/* =========================================================================
 * Prokvm 会员中心新视觉设计系统  ·  企业级 / 专业 / 大气
 * 默认靛蓝 #635bff，8 套配色可在右上角切换（skinpro.js 注入，写 localStorage）
 * 亮色 :root  ·  暗色 html[data-skin="dark"]
 * 品牌色由 --sk-brand* 变量驱动，配色器通过覆盖这些变量实现换肤。
 * 与后台 skinpro 共享 localStorage(skin_color / skin_theme)，观感统一。
 * 直接集成、覆盖 Bootstrap3 类、结构不变、可逆（移除本文件即还原）。
 * ========================================================================= */

:root{
  --sk-brand:#635bff; --sk-brand-d:#4f46e5; --sk-brand-l:#8b85ff;
  --sk-brand-bg:#eeedfe; --sk-brand-bg2:#f5f4ff;
  --sk-glow:rgba(99,91,255,.42); --sk-ring:rgba(99,91,255,.18);
  --sk-page:#f6f7f9; --sk-card:#ffffff; --sk-card-2:#fafbfc;
  --sk-border:#edeff2; --sk-border-2:#f3f4f6; --sk-border-3:#e3e6ea;
  --sk-ink:#0d1526; --sk-ink-2:#475569; --sk-mut:#8b95a7; --sk-faint:#c4ccd8;
  --sk-rail:#0e1119; --sk-rail-2:#161a24; --sk-rail-mut:#8b93a7; --sk-rail-faint:#565f74;
  --sk-head:#f9f9fd; --sk-stripe:#fbfbfe;
  --sk-danger:#e8554d; --sk-danger-bg:#fdecec;
  --sk-success:#16a06a; --sk-success-bg:#e7f6ee;
  --sk-warn:#dd9224; --sk-warn-bg:#fdf3e1;
  /* 负载曲线的两条线：CPU 用品牌色，出网用青绿（跟靛蓝拉得开，又不像琥珀/红自带告警语义） */
  --v3c-cpu:var(--sk-brand); --v3c-net:#0d9488;
  --sk-radius-sm:9px; --sk-radius:11px; --sk-radius-lg:14px;
  /* 布局外壳变量（默认=① 云控制台：浅色侧栏、方正紧凑） */
  --sk-app-bg:var(--sk-page);
  --sk-side-bg:var(--sk-card); --sk-side-ink:var(--sk-ink-2); --sk-side-grp:var(--sk-mut);
  --sk-side-brand:var(--sk-ink); --sk-side-bd:var(--sk-border);
  --sk-card-bd:var(--sk-border); --sk-card-blur:none;
  --sk-sh:0 1px 2px rgba(13,21,38,.04),0 1px 3px rgba(13,21,38,.05);
  --sk-sh-md:0 4px 18px rgba(13,21,38,.06),0 2px 6px rgba(13,21,38,.04); --sk-sh-lg:0 16px 44px rgba(13,21,38,.14);
}
html[data-skin="dark"]{
  --v3c-cpu:var(--sk-brand-l); --v3c-net:#2dd4bf;
  --sk-page:#0b0b14; --sk-card:#15151f; --sk-card-2:#1a1a26;
  --sk-border:#262636; --sk-border-2:#1f1f2c; --sk-border-3:#2e2e40;
  --sk-ink:#e9eaf4; --sk-ink-2:#c0c2d6; --sk-mut:#7f819b; --sk-faint:#5a5c75;
  --sk-rail:#0a0a14; --sk-rail-2:#14141f; --sk-head:#1a1a26; --sk-stripe:#181822;
  --sk-danger:#f1746b; --sk-danger-bg:#3a1f1d;
  --sk-success:#34c281; --sk-success-bg:#15301f;
  --sk-warn:#e7a948; --sk-warn-bg:#352713;
  --sk-sh:0 1px 2px rgba(0,0,0,.3); --sk-sh-md:0 6px 22px rgba(0,0,0,.45); --sk-sh-lg:0 16px 46px rgba(0,0,0,.6);
}

/* ============================== 深色模式修正 ============================== */
html[data-skin="dark"] .dropdown-input li:hover a,
html[data-skin="dark"] .dropdown-input li a:hover,
html[data-skin="dark"] .pagination > li > a:hover,
html[data-skin="dark"] a.list-group-item:hover,
html[data-skin="dark"] a.list-group-item.active,
html[data-skin="dark"] .label-info,html[data-skin="dark"] .label.bg-info,html[data-skin="dark"] .label-primary,
html[data-skin="dark"] .alert-info,
html[data-skin="dark"] .filter-row .label{ color:var(--sk-brand-l) !important; }
html[data-skin="dark"] ::selection{ color:var(--sk-brand-l); }

/* ============================== 基础 / 排版 ============================== */
html,body{ background:var(--sk-app-bg) !important; }
body{ color:var(--sk-ink); font-family:'Inter',"PingFang SC","Microsoft Yahei","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; font-size:13px; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--sk-ink); font-weight:600; letter-spacing:-.01em; }
a{ color:var(--sk-brand); transition:color .15s; }
a:hover,a:focus{ color:var(--sk-brand-d); }
a,a:focus,a:active,button,button:focus,.btn,.btn:focus,.btn:active,.dropdown-toggle,.dropdown-toggle:focus,
#nav a,#nav a:focus,#header a,#header a:focus{ outline:0 !important; -webkit-tap-highlight-color:transparent; }
hr{ border-top-color:var(--sk-border); }
.text-info,.text-primary{ color:var(--sk-brand) !important; }
.text-muted,.text-gray{ color:var(--sk-mut) !important; }
.text-danger{ color:var(--sk-danger) !important; }
.text-success{ color:var(--sk-success) !important; }
.text-warning{ color:var(--sk-warn) !important; }
.text-black{ color:var(--sk-ink) !important; }
.bg-white,.bg-light{ background:var(--sk-card) !important; }
::selection{ background:var(--sk-brand-bg); color:var(--sk-brand-d); }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:rgba(139,144,167,.4); border-radius:9px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(139,144,167,.65); background-clip:content-box; }

/* ============================== 左侧栏 · 变量驱动（4 布局共用） ============================== */
#nav.nav-primary,.nav-primary{ background:var(--sk-side-bg) !important; transition:width .2s,background .2s; }
#nav{ box-shadow:2px 0 18px rgba(20,19,39,.07); scrollbar-width:none; -ms-overflow-style:none; }
/* 移动端划出侧栏改窄（默认 75% 太宽）；内容右移量同步为 240px，避免侧栏与内容间空白缝 */
@media (max-width:991px){
    .slide-nav #nav{ width:240px !important; }
    .slide-nav > #header,.slide-nav > #content{ transform:translate3d(240px,0,0) !important; }
    .slide-nav.slide-nav-right > #header,.slide-nav.slide-nav-right > #content{ transform:translate3d(-240px,0,0) !important; }
}
#nav::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none; }
.nav-primary .affix{ background:var(--sk-side-bg) !important; }
/* 侧栏固定：不随右侧内容区滚动；菜单过长时侧栏自身内部滚动 */
@media (min-width:992px){
  #nav{ position:fixed !important; top:0; left:0; bottom:0; overflow-y:auto; }
  .nav-primary .nav[data-spy="affix"],
  .nav-primary .affix,
  .nav-primary .affix-top,
  .nav-primary .affix-bottom{ position:static !important; top:auto !important; left:auto !important; width:auto !important; }
}
/* 品牌 / LOGO */
.nav-primary .nav-brand{ display:flex !important; align-items:center; justify-content:center; height:56px; padding:0 16px !important; margin:0; border-bottom:1px solid var(--sk-side-bd); overflow:hidden; }
.nav-primary .nav-brand img{ max-height:34px; max-width:150px; width:auto; }
.nav-primary .nav-brand .txt{ font-size:16px !important; font-style:normal !important; font-weight:700 !important; color:var(--sk-side-brand) !important; letter-spacing:-.2px; white-space:nowrap; }
/* 菜单列表 */
.nav-primary > ul{ padding:12px 12px 20px !important; }
.nav-primary li{ line-height:1.4 !important; }
/* 分组标题 */
.nav-primary li.group{ padding:16px 0 5px !important; }
.nav-primary li.group span{ padding-left:12px !important; color:var(--sk-side-grp) !important; font-size:11px !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.nav-primary li.group:first-child{ padding-top:4px !important; }
/* 菜单项 */
.nav-primary > ul > li > a,
.nav-primary.bg-light > ul > li > a{
  display:flex !important; align-items:center; gap:2px;
  color:var(--sk-side-ink) !important; padding:10px 12px !important; margin-bottom:2px;
  border:0 !important; border-radius:12px; font-size:13.5px; font-weight:500; word-wrap:break-word; white-space:nowrap;
  transition:background .16s,color .16s,box-shadow .16s; }
.nav-primary li a i,
.nav-primary > ul > li > a i{ margin-right:11px !important; font-size:1.2em !important; width:20px !important; text-align:center; display:inline-block; flex-shrink:0; opacity:.92; }
.nav-primary > ul > li > a span{ flex:1 1 auto; }
/* 悬停 */
.nav-primary > ul > li > a:hover,
.nav-primary > ul > li > a:focus,
.nav-primary > ul > .dropdown-submenu:hover > a,
.nav-primary.bg-light > ul > li > a:hover,
.nav-primary.bg-light > ul > li > a:focus{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand-d) !important; }
/* 选中：克制柔底 + 品牌色（浅色侧栏）；深色侧栏在 data-sk-side 块内覆盖 */
.nav-primary > ul > li.active > a,
.nav-primary > ul > li.active > a:hover,
.nav-primary > ul > li.active > a:focus,
.nav-primary.bg-light > ul > li.active > a{
  background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; box-shadow:none; font-weight:600; }
.nav-primary > ul > li.active > a i,
.nav-primary > ul > li.active > a *{ color:var(--sk-brand-d) !important; opacity:1; }
.nav-primary > ul > .dropdown-submenu > a:after{ display:none; }
.nav-primary .logo_mark a{ color:var(--sk-side-grp) !important; }
.nav-primary .logo_mark a:hover{ color:var(--sk-brand) !important; }
/* 移动端抽屉内的展开子菜单 */
@media (max-width:991px){
  .nav-primary .dropdown-menu a{ color:var(--sk-side-ink) !important; border-bottom-color:var(--sk-side-bd) !important; }
  .nav-primary .dropdown-menu a:hover{ color:var(--sk-brand-d) !important; }
}

/* ============================== 顶栏 header ============================== */
.navbar,#header.navbar{ background:var(--sk-card) !important; border:0; border-bottom:1px solid var(--sk-border); box-shadow:none; min-height:56px; }
/* 顶栏恒在最上层（其内部下拉随之），压过购买页右侧固定卡片 #wrapFooter(z-index:20)；1030=标准 navbar 层级，仍低于弹窗/modal */
#header.navbar{ z-index:1030 !important; }
/* dropdown li 需定位，.open{z-index:1050} 才生效 */
#header .navbar-nav.pull-right > li.dropdown{ position:relative; }
.navbar-fixed{ padding-top:57px; }
#header .navbar-nav > li > a{ color:var(--sk-ink-2); transition:color .15s; }
#header .navbar-nav > li > a:hover,#header .navbar-nav > li > a:focus{ color:var(--sk-brand) !important; background:transparent; }
#header .thumb-small.avatar img,#header .img-circle{ border:2px solid var(--sk-border); border-radius:50% !important; }
/* 顶栏右侧对齐 */
#header .navbar-nav.pull-right{ display:flex !important; align-items:center; gap:2px; height:56px; }
#header .navbar-nav.pull-right > li{ float:none !important; display:flex; align-items:center; height:56px; }
#header .navbar-nav.pull-right > li > a{ position:relative; display:inline-flex !important; align-items:center; justify-content:center; padding:0 11px !important; height:56px; line-height:1; border-radius:0; color:var(--sk-ink-2); transition:color .15s,background .15s; }
#header .navbar-nav.pull-right > li > a:hover{ color:var(--sk-brand) !important; }
#header .navbar-nav.pull-right > li > a > svg{ width:17px; height:17px; display:block; }
/* 调色盘图标略小于线性图标，视觉更协调 */
#header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn > svg{ width:15px; height:15px; }
#header .navbar-nav.pull-right > li > a .caret{ margin-left:6px; color:var(--sk-faint); }
/* 右上角图标（含调色盘）：链接满高(56)天然垂直居中；hover 方块底用居中伪元素(38×38 圆角) */
#header .navbar-nav.pull-right:not(.navbar-avatar) > li > a,
#header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn{ position:relative; width:44px !important; height:56px !important; padding:0 !important; margin:0; border-radius:0; }
#header .navbar-nav.pull-right:not(.navbar-avatar) > li > a::before,
#header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn::before{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:10px; background:transparent; transition:background .15s; z-index:0; }
#header .navbar-nav.pull-right:not(.navbar-avatar) > li > a:hover::before,
#header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn:hover::before{ background:var(--sk-head); }
#header .navbar-nav.pull-right:not(.navbar-avatar) > li > a > svg,
#header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn > svg{ position:relative; z-index:1; }
#header .navbar-nav.pull-right:not(.navbar-avatar) > li > a:hover,
#header .navbar-nav.pull-right > li.sk-pop-wrap > a.sk-tbtn:hover{ color:var(--sk-brand) !important; }
/* 工单未读红点：方块右上角小圆点 */
#header .navbar-nav.pull-right > li > a .point.bg-danger{ position:absolute; top:11px; right:5px; z-index:2; width:7px; height:7px; padding:0; border-radius:50%; background:var(--sk-danger) !important; border:1.5px solid var(--sk-card); }
/* 顶栏左侧标题 · 站点名 + 面包屑 */
#header .navbar-nav.navbar-title.pull-left{ display:flex !important; align-items:center; height:56px; padding-left:24px; margin:0; }
#header .navbar-nav.navbar-title.pull-left > li{ display:flex !important; align-items:center; height:56px; float:none; }
.navbar-title .sk-crumb{ display:flex; align-items:center; font-size:13px; color:var(--sk-mut); }
.navbar-title .sk-crumb .sk-site{ font-size:14px !important; font-weight:400; color:var(--sk-ink) !important; padding:0 !important; letter-spacing:-.2px; white-space:nowrap; }
.navbar-title .sk-crumb .sk-site:hover{ color:var(--sk-brand) !important; }
.navbar-title .sk-crumb .sk-sep{ margin:0 9px; font-size:12px; color:var(--sk-faint); }
/* 演示模式徽章：.env 的 DEMO_DATA=1 时挂在站点名后面，
   免得演示站里的假数据被当成真实数据。li 已经是 56px 高的 flex，
   背景色得落在内层 span 上，不然会撑成一整条 */
.navbar-title .sk-demo-flag{ display:inline-flex; align-items:center; gap:5px; margin-left:10px;
  height:22px; padding:0 9px; border-radius:11px; white-space:nowrap; cursor:default;
  font-size:12px; font-weight:500; line-height:1;
  background:var(--sk-warn-bg); color:var(--sk-warn); }
.navbar-title .sk-demo-flag i{ width:6px; height:6px; border-radius:50%; background:var(--sk-warn); flex:none; }
.navbar-title .sk-crumb .sk-crumb-ico{ margin-right:6px; margin-left:1px; font-size:15px; color:var(--sk-brand); }
.navbar-title .sk-crumb .sk-crumb-cur{ color:var(--sk-ink); font-weight:500; font-size:14px; white-space:nowrap; }

/* 用户下拉菜单（头像）· 现代结构 */
.dropdown-menu.header-user.sk-um{ min-width:262px; padding:0 !important; overflow:hidden; }
.dropdown-menu.header-user.sk-um.sk-um-work{ min-width:346px; }
.sk-um-head{ display:flex; align-items:center; gap:12px; padding:16px; background:var(--sk-head); border-bottom:1px solid var(--sk-border); }
.sk-um-ava{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 3px var(--sk-brand-bg); }
.sk-um-meta{ min-width:0; }
.sk-um-name{ font-size:15px; font-weight:700; color:var(--sk-ink); letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-um-badges{ display:flex; gap:6px; margin-top:7px; }
.sk-um-b{ width:23px; height:23px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; background:var(--sk-border-2); color:var(--sk-faint); }
.sk-um-b.ok{ background:var(--sk-success-bg); color:var(--sk-success); }
a.sk-um-b:hover{ color:var(--sk-brand) !important; }
.sk-um-list{ padding:7px; }
.sk-um-list > a{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; color:var(--sk-ink-2); font-size:13.5px; font-weight:500; }
.sk-um-list > a > i:first-child{ width:16px; text-align:center; color:var(--sk-mut); font-size:15px; flex-shrink:0; }
.sk-um-list > a > span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-um-list > a:hover{ background:var(--sk-brand-bg2); color:var(--sk-brand-d) !important; }
.sk-um-list > a:hover > i:first-child{ color:var(--sk-brand-d); }
.sk-um-arw{ margin-left:auto; font-size:11px !important; color:var(--sk-faint) !important; }
.sk-um-list > a:hover .sk-um-arw{ color:var(--sk-brand) !important; }
.sk-um-foot{ border-top:1px solid var(--sk-border); padding:7px; }
.sk-um-foot > a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border-radius:9px; color:var(--sk-danger); font-size:13.5px; font-weight:600; }
.sk-um-foot > a > i{ font-size:14px; }
.sk-um-foot > a:hover{ background:var(--sk-danger-bg); color:var(--sk-danger) !important; }
/* 财务下拉头 */
.sk-um-fin-head{ display:flex; align-items:center; gap:12px; padding:15px 16px; background:var(--sk-head); border-bottom:1px solid var(--sk-border); }
.sk-um-fin-l{ font-size:12px; color:var(--sk-mut); }
.sk-um-fin-v{ font-size:20px; font-weight:750; color:var(--sk-ink); letter-spacing:-.5px; margin-top:3px; font-variant-numeric:tabular-nums; }
.sk-um-fin-head .btn{ margin-left:auto; height:32px; padding:0 16px; display:inline-flex; align-items:center; border-radius:8px; }
/* 工单下拉 */
.sk-um-thead{ display:flex; align-items:center; gap:9px; padding:14px 16px; border-bottom:1px solid var(--sk-border); font-size:14px; font-weight:700; color:var(--sk-ink); }
.sk-um-cnt{ font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:20px; background:var(--sk-warn-bg); color:var(--sk-warn); }
.sk-um-empty{ text-align:center; color:var(--sk-mut); font-size:13px; padding:22px 0; }
.sk-um-empty i{ color:var(--sk-success); margin-right:4px; }
.sk-um-list > a > span.sk-um-tag{ flex:none; overflow:visible; font-size:10.5px; font-weight:600; padding:1px 8px; border-radius:20px; white-space:nowrap; }
.sk-um-tag.is-adm{ background:var(--sk-warn-bg); color:var(--sk-warn); }
.sk-um-tag.is-mem{ background:var(--sk-success-bg); color:var(--sk-success); }
.sk-um-foot2{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--sk-border); }
.sk-um-foot2 .btn{ flex:1; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border-radius:9px; }

/* open 态去旧绿边 */
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle{ background:transparent !important; box-shadow:none !important; color:var(--sk-brand) !important; }
/* 下拉打开时也显示与调色盘一致的方块底（伪元素） */
#header .navbar-nav.pull-right > li.dropdown.open > a.dropdown-toggle::before{ background:var(--sk-head); }
/* 头像下拉/工单/财务面板 */
.navbar .nav > li > .header-user{ min-width:270px; }
.navbar .nav > li > .header-user .panel{ margin:0; border:0 !important; box-shadow:none; }
.dropdown-menu.header-user .panel-heading{ background:var(--sk-head) !important; }
.dropdown-menu.header-user .panel-body a,.dropdown-menu.header-user .panel-footer a:not(.btn){ color:var(--sk-ink-2); }
.dropdown-menu.header-user .panel-body a:hover{ color:var(--sk-brand) !important; }
.dropdown-menu.header-user .panel-body i{ color:var(--sk-mut); }
/* 移动端汉堡 */
#header .btn-link.nav-toggle{ color:var(--sk-ink-2) !important; }
#header .btn-link.nav-toggle:hover{ color:var(--sk-brand) !important; }

/* ============================== 主体 / 页脚 ============================== */
#content{ background:transparent; }
/* 列表空状态 · 标准化：居中插画式图标 + 灰字（覆盖各列表页 td[colspan] 的"没找到记录"行） */
.main table td[colspan]:has(> .text-muted > .icon-exclamation-sign){ text-align:center !important; }
.main table td[colspan] > .text-muted:has(> .icon-exclamation-sign){ display:flex; flex-direction:column; align-items:center; gap:12px; padding:46px 0 42px; text-align:center; color:var(--sk-mut) !important; font-size:13px; }
.main table td[colspan] > .text-muted:has(> .icon-exclamation-sign)::before{ content:''; width:52px; height:52px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4ccd8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") no-repeat center/52px 52px; }
.main table td[colspan] > .text-muted:has(> .icon-exclamation-sign) .icon-exclamation-sign{ display:none; }
.main table td[colspan] > .text-muted:has(> .icon-exclamation-sign) b{ font-weight:400; }
/* 纯文字空状态（单行 .text-muted 直接挂在 td 上，无 align）水平居中 + 上下留白，配合 colspan=99 横跨整表 */
.main table td[colspan].text-muted{ text-align:center !important; padding:34px 0 !important; color:var(--sk-mut) !important; }
#footer{ color:var(--sk-faint) !important; font-size:11px !important; letter-spacing:.3px; padding:16px 0 20px !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
#footer a{ color:var(--sk-faint); } #footer a:hover{ color:var(--sk-brand) !important; }
/* 版权在内容区（去掉左侧栏 195px）内居中 */
@media (min-width:992px){ #footer{ padding-left:195px !important; } }
.main.padder{ padding:20px 24px !important; }
/* 列表页顶部标题栏 · 一排（标题左，操作按钮右对齐，窄屏自动换行） */
.main .page-head{ padding:2px 2px 20px !important; margin:0; }
.main .page-head h4{ display:flex !important; flex-wrap:wrap; align-items:center; gap:8px; margin:0; line-height:1.2; }
.main .page-head h4 > .btn-group{ display:inline-flex; align-items:center; margin:0 !important; }
.main .page-head h4 > .btn-group:first-child{ padding:0; font-size:16px; font-weight:700; color:var(--sk-ink); letter-spacing:-.3px; gap:9px; }
.main .page-head h4 > .btn-group:first-child > i{ font-size:17px; color:var(--sk-brand) !important; }
/* page-head 里裸露的按钮（如"返回"，未包 btn-group、带 m-b-small）：清零边距对齐 */
.main .page-head h4 > .btn{ margin:0 !important; }
/* 页头按钮统一规格。
 * 标题块 19px、按钮 30px 且顶部不对齐（27 / 22），排在一起会参差 —— 这条修正
 * 原先只挂在 #APPLIST.v3l 上，于是同一套 $main.btn 菜单，在 v3 列表页和
 * blocks/btn.html 出来的页面（各产品购买页、push、invoice…）长得不是一套。
 * 规则提到 .main .page-head，所有页头一致。 */
.main .page-head h4 .btn{ height:30px; display:inline-flex; align-items:center; gap:5px; }
/* 激活的操作按钮用品牌色（原红色改为品牌），未激活白底描边 */
.main .page-head h4 .btn-group > .btn.btn-danger{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; box-shadow:0 2px 8px var(--sk-ring); }
.main .page-head h4 .btn-group > .btn.btn-danger:hover{ background:var(--sk-brand-d) !important; }

/* ============================== 卡片 / 面板 ============================== */
.panel{ background:var(--sk-card); border:1px solid var(--sk-card-bd) !important; border-radius:var(--sk-radius-lg); box-shadow:var(--sk-sh); overflow:hidden; backdrop-filter:var(--sk-card-blur); }
/* 面板内有下拉展开 / 搜索框聚焦（自动补全）时放开裁剪，避免菜单被 overflow:hidden 截断（其余时仍裁剪保圆角） */
.panel:has(.open),
.panel:has(.input-group-search:focus-within){ overflow:visible; }
/* 行内下拉(操作列「更多」等)展开时放开容器 overflow，避免被 .panel/.table-responsive 裁掉 */
.panel:has(.btn-group.open),.panel:has(.dropdown.open),.panel:has(li.dropdown.open){ overflow:visible !important; }
.table-responsive:has(.btn-group.open),.table-responsive:has(.dropdown.open){ overflow:visible !important; }
.panel-heading,.panel-footer{ background:var(--sk-head) !important; border-color:var(--sk-border) !important; color:var(--sk-ink); padding:14px 18px; }
.panel-heading{ font-weight:600; }
.panel-body{ padding:18px; }
.panel .table{ margin-bottom:0; }
.well{ background:var(--sk-card-2); border:1px solid var(--sk-border); border-radius:var(--sk-radius); box-shadow:none; }
/* 会员专属 panel-card */
.panel-card{ background:var(--sk-card); border:1px solid var(--sk-card-bd) !important; border-radius:var(--sk-radius-lg) !important; box-shadow:var(--sk-sh) !important; overflow:hidden; margin-bottom:20px; backdrop-filter:var(--sk-card-blur); transition:box-shadow .18s,transform .18s,border-color .18s; }
.panel-card:hover{ box-shadow:var(--sk-sh-md) !important; }
.panel-card .card-heading{ display:flex; align-items:center; font-size:14px !important; font-weight:700 !important; color:var(--sk-ink) !important; padding:15px 18px 0 !important; letter-spacing:-.2px; }
.panel-card .card-heading::before{ content:''; width:4px; height:15px; border-radius:3px; margin-right:9px; background:linear-gradient(180deg,var(--sk-brand-l),var(--sk-brand-d)); box-shadow:0 2px 8px var(--sk-glow); }
.panel-card .card-body{ padding:16px 18px 18px !important; }

/* ============================== 按钮 ============================== */
.btn{ border-radius:var(--sk-radius); font-weight:600; transition:all .15s; border:1px solid transparent; }
.btn:focus,.btn.active{ outline:0; box-shadow:none; }
.btn-white,.btn-default{ background:var(--sk-card); border:1px solid var(--sk-border-3) !important; color:var(--sk-ink) !important; }
.btn-white:hover,.btn-default:hover,.btn-white:focus,.btn-default:focus{ background:var(--sk-card-2); border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; }
.btn-primary,.btn-info{ background:var(--sk-brand); border-color:var(--sk-brand); color:#fff; box-shadow:0 2px 8px var(--sk-ring); }
.btn-white.btn-info,.btn-white.btn-primary,.btn-default.btn-info,.btn-default.btn-primary{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; }
.btn-primary:hover,.btn-info:hover,.btn-primary:focus,.btn-info:focus,.btn-primary:active,.btn-info:active{ background:var(--sk-brand-d) !important; border-color:var(--sk-brand-d) !important; color:#fff !important; }
/* toggle 按钮组选中态跟随主题 */
.btn-toggle .btn-white.active{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; }
.btn-success{ background:var(--sk-success); border-color:var(--sk-success); color:#fff; }
.btn-success:hover{ filter:brightness(.94); color:#fff !important; }
.btn-danger{ background:var(--sk-danger); border-color:var(--sk-danger); color:#fff; }
.btn-danger:hover{ filter:brightness(.94); color:#fff !important; }
.btn-warning{ background:var(--sk-warn); border-color:var(--sk-warn); color:#fff; }
.btn-link{ color:var(--sk-brand); }
.btn-sm,.btn-small,.btn-xs,.btn-mini{ border-radius:var(--sk-radius-sm); }
.btn-circle{ border-radius:20px !important; }
.btn-group > .btn{ box-shadow:none; }
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn{ border-radius:0 !important; }
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn + .btn{ margin-left:-1px !important; }
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn:first-child{ border-top-left-radius:var(--sk-radius-sm) !important; border-bottom-left-radius:var(--sk-radius-sm) !important; }
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn:last-child,
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn.dropdown-toggle{ border-top-right-radius:var(--sk-radius-sm) !important; border-bottom-right-radius:var(--sk-radius-sm) !important; }
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn.btn-info,
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn.btn-primary,
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn.active,
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn:hover{ position:relative; z-index:2; }
.open > .dropdown-toggle.btn-white,.open > .dropdown-toggle.btn-default{ background:var(--sk-card-2); border-color:var(--sk-border-3); color:var(--sk-ink); }
/* 整合式下拉按钮（箭头在按钮内，如"导出账单▾"）：两侧都圆角 */
.btn-group:not(.input-group):not(.input-group-search):not(.btn-group-vertical) > .btn[data-toggle="dropdown"]:first-child{ border-radius:var(--sk-radius-sm) !important; }

/* ============================== 表单 ============================== */
.form-control{ background:var(--sk-card); border:1px solid var(--sk-border-3); color:var(--sk-ink); border-radius:var(--sk-radius); box-shadow:none; transition:border-color .15s,box-shadow .15s; }
.form-control:focus{ border-color:var(--sk-brand) !important; box-shadow:0 0 0 3px var(--sk-ring) !important; }
.form-control::-webkit-input-placeholder{ color:var(--sk-faint); }
.form-control[disabled],.form-control[readonly]{ background:var(--sk-card-2); color:var(--sk-mut); }
.control-label,label{ color:var(--sk-ink-2); font-weight:500; }
.input-group-addon{ background:var(--sk-head); border:1px solid var(--sk-border-3); color:var(--sk-mut); border-radius:var(--sk-radius); }
.help-block{ color:var(--sk-mut); }
.has-error .form-control{ border-color:var(--sk-danger) !important; }
.has-error .control-label,.parsley-errors-list{ color:var(--sk-danger); }
.checkbox,.radio{ color:var(--sk-ink-2); }
input[type=checkbox],input[type=radio]{ accent-color:var(--sk-brand); }

/* ============================== 表格 ============================== */
.table{ color:var(--sk-ink-2); }
.table > thead > tr > th{ color:var(--sk-mut); font-weight:600; border-bottom:1px solid var(--sk-border) !important; background:var(--sk-head); }
.table > tbody > tr > td{ border-top:1px solid var(--sk-border-2) !important; vertical-align:middle; }
.table.b-t{ border-top-color:var(--sk-border) !important; }
.panel .table th,.panel .table td{ padding:11px 18px; border-top-color:var(--sk-border-2) !important; }
.panel .table-striped > thead > tr > th{ background:var(--sk-head) !important; color:var(--sk-mut); border-right:0 !important; border-bottom:1px solid var(--sk-border) !important; }
.panel .table-striped > tbody > tr:nth-child(odd) > td{ background:var(--sk-stripe) !important; }
.table > thead > tr.warning > th,.table tr.warning > td,.table > thead > tr.active > th{ background:var(--sk-head) !important; color:var(--sk-mut); }
.table-hover > tbody > tr:hover > td,.table tbody > tr:hover > td{ background:var(--sk-brand-bg2) !important; }
.pull-out{ overflow-x:auto; }

/* ============================== 徽章 / 标签（胶囊） ============================== */
.label{ font-weight:600; font-size:91%; padding:.3em .75em; border-radius:20px; }
.badge{ font-weight:600; border-radius:20px; background:var(--sk-mut); padding:3px 9px; }
.label-success,.label.bg-success{ background:var(--sk-success-bg) !important; color:var(--sk-success) !important; }
.label-danger,.label.bg-danger{ background:var(--sk-danger-bg) !important; color:var(--sk-danger) !important; }
.label-warning,.label.bg-warning{ background:var(--sk-warn-bg) !important; color:var(--sk-warn) !important; }
.label-info,.label.bg-info,.label-primary{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; }
.label-default{ background:var(--sk-border-2) !important; color:var(--sk-mut) !important; }
.badge.bg-success{ background:var(--sk-success) !important; color:#fff; }
.badge.bg-danger{ background:var(--sk-danger) !important; color:#fff; }
.badge.bg-primary,.badge.bg-info{ background:var(--sk-brand) !important; color:#fff; }
.point.bg-danger{ background:var(--sk-danger) !important; }

/* ============================== 提示框 alert · 现代（左强调条 + 柔底 + 语义色图标） ============================== */
.alert{ border:0 !important; border-radius:var(--sk-radius); padding:12px 16px; font-size:12px; line-height:1.6; }
.alert b,.alert strong{ font-weight:600; font-size:12px; }
.alert > i:first-child{ margin-right:5px; opacity:.95; }
.alert b,.alert strong{ font-weight:600; }
.alert-danger{ background:var(--sk-danger-bg); color:var(--sk-danger); }
.alert-success{ background:var(--sk-success-bg); color:var(--sk-success); }
.alert-warning{ background:var(--sk-warn-bg); color:var(--sk-warn); }
.alert-info{ background:var(--sk-brand-bg); color:var(--sk-brand-d); }
.alert .close{ opacity:.6; }

/* ============================== 选项卡 / nav ============================== */
.nav-tabs{ border-bottom:1px solid var(--sk-border); }
.nav-tabs > li > a{ color:var(--sk-mut); border:0; border-bottom:2px solid transparent; border-radius:0; margin-right:6px; padding:9px 4px; transition:all .15s; }
.nav-tabs > li > a:hover{ background:transparent; border-bottom-color:var(--sk-border-3); color:var(--sk-ink); }
.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{ color:var(--sk-brand) !important; background:transparent; border:0; border-bottom:2px solid var(--sk-brand); }
/* 含选项卡的 panel-heading：白底、去底边与下内边距，让下划线选项卡干净贴合（参考后台应用管理） */
.panel > .panel-heading:has(.nav-tabs){ background:var(--sk-card) !important; border-bottom:0 !important; padding:10px 18px 0 !important; }
.panel-heading > .nav-tabs{ float:none !important; display:block; border-bottom:1px solid var(--sk-border) !important; margin:0 !important; padding:0; }
.panel-heading > .nav-tabs > li{ float:left; }
.panel-heading > .nav-tabs > li > a{ border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; background:transparent !important; color:var(--sk-mut) !important; margin:0 22px -1px 0 !important; padding:12px 2px !important; font-size:14px; }
.panel-heading > .nav-tabs > li > a:hover{ color:var(--sk-ink) !important; border-bottom-color:var(--sk-border-3) !important; }
.panel-heading > .nav-tabs > li.active > a{ color:var(--sk-brand) !important; border-bottom-color:var(--sk-brand) !important; font-weight:600; }
.nav-pills > li > a{ border-radius:var(--sk-radius); color:var(--sk-ink-2); }
.nav-pills > li.active > a,.nav-pills > li.active > a:hover{ background:var(--sk-brand) !important; color:#fff; }

/* ============================== 分页 ============================== */
.pagination > li > a,.pagination > li > span{ color:var(--sk-ink-2); background:var(--sk-card); border:1px solid var(--sk-border-3); margin:0 3px; border-radius:var(--sk-radius) !important; min-width:34px; text-align:center; transition:all .15s; }
.pagination > li > a:hover{ background:var(--sk-brand-bg2); border-color:var(--sk-brand); color:var(--sk-brand) !important; }
.pagination > .active > a,.pagination > .active > span,.pagination > .active > a:hover{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; box-shadow:0 4px 12px var(--sk-glow); }
.pagination > .disabled > a,.pagination > .disabled > span{ background:var(--sk-card-2); border-color:var(--sk-border); color:var(--sk-faint); }

/* ============================== 下拉菜单 ============================== */
.dropdown-menu{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:14px; box-shadow:var(--sk-sh-lg); padding:6px; margin-top:6px; }
/* 行内下拉展开时抬升层级，避免被分页/footer/相邻行盖住（简单类选择器，兼容老浏览器） */
.panel .btn-group.open,.panel .dropdown.open,.table-responsive .btn-group.open,.table-responsive .dropdown.open{ position:relative; z-index:1055 !important; }
.panel .btn-group.open > .dropdown-menu,.table-responsive .btn-group.open > .dropdown-menu{ z-index:1056 !important; }
.dropdown-menu > li > a{ color:var(--sk-ink-2); border-radius:var(--sk-radius-sm); padding:8px 12px; }
.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand-d) !important; }
.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus{ background:var(--sk-brand) !important; color:#fff !important; }
.dropdown-menu > li > a:hover i{ color:var(--sk-brand-d); }
.dropdown-menu > .active > a i{ color:#fff; }
.dropdown-input{ border:1px solid var(--sk-border) !important; border-radius:14px !important; box-shadow:var(--sk-sh-lg) !important; background:var(--sk-card) !important; padding:6px !important; margin-top:6px; }
.dropdown-input ul{ width:auto; }
.dropdown-input li a{ color:var(--sk-ink-2) !important; height:34px; line-height:34px; padding:0 12px !important; border-radius:8px; transition:.12s; }
.dropdown-input li:hover{ background:transparent !important; }
.dropdown-input li:hover a,.dropdown-input li a:hover{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand-d) !important; }
.dropdown-input li.active a,.dropdown-input li.hover a{ background:var(--sk-brand) !important; color:#fff !important; }
.dropdown-menu .divider{ background:var(--sk-border); margin:6px 4px; }
.dropdown-header,.dropdown-menu > li > span{ color:var(--sk-mut); }
.dropdown-select li.active a,.dropdown-select li a:hover{ color:var(--sk-brand-d); }

/* ============================== 弹窗 modal ============================== */
.modal-content{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); box-shadow:var(--sk-sh-lg); overflow:hidden; }
.modal-header{ background:var(--sk-head); border-bottom:1px solid var(--sk-border); padding:15px 20px; }
.modal-title{ color:var(--sk-ink); font-weight:600; }
.modal-body{ padding:20px; }
.modal-footer{ border-top:1px solid var(--sk-border); background:var(--sk-card); }
.modal-backdrop{ background:#0b1220; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.modal-backdrop.in{ opacity:.52; }
/* bootstrap.css 里 .tooltip 只有 z-index:1030，低于 modal(1050)，挂到 body 上会被弹窗盖住 —— 抬到弹窗之上 */
.tooltip{ z-index:1080; }
.close{ color:var(--sk-mut); opacity:.7; text-shadow:none; }
.close:hover{ color:var(--sk-ink); opacity:1; }

/* ============================== 提示 tooltip / popover ============================== */
.tooltip-inner{ background:#171a2b; border-radius:var(--sk-radius-sm); padding:6px 11px; font-size:12px; }
.popover{ border:1px solid var(--sk-border); border-radius:var(--sk-radius); box-shadow:var(--sk-sh-lg); background:var(--sk-card); }
.popover-title{ background:var(--sk-head); border-bottom-color:var(--sk-border); color:var(--sk-ink); }
.popover-content{ color:var(--sk-ink-2); }

/* ============================== 其它通用 ============================== */
.breadcrumb{ background:transparent; padding:2px 0 14px; margin-bottom:0; color:var(--sk-mut); font-size:13px; }
.breadcrumb > li{ color:var(--sk-mut); }
.breadcrumb > li + li::before{ content:'\203a'; color:var(--sk-faint); padding:0 9px; }
.breadcrumb > li > a{ color:var(--sk-ink-2); }
.breadcrumb > li > a:hover{ color:var(--sk-brand) !important; }
.breadcrumb > .active,.breadcrumb > li.active{ color:var(--sk-ink); font-weight:600; }
.list-group-item{ background:var(--sk-card); border-color:var(--sk-border); color:var(--sk-ink-2); }
a.list-group-item:hover,a.list-group-item:focus{ background:var(--sk-brand-bg2); }
a.list-group-item.active{ background:var(--sk-brand-bg) !important; border-color:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; }
.progress{ background:var(--sk-border-2); border-radius:20px; box-shadow:none; height:8px; }
.progress-bar{ background:var(--sk-brand); }
.filter-row .label{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; }

/* ============================== 列表页内容区（#APPLIST，与后台一致） ============================== */
.panel-layout-list{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); overflow:visible !important; }
#APPLIST > .panel-layout-list{ box-shadow:var(--sk-sh); }
.panel-layout-list > .panel-heading{ background:var(--sk-card) !important; border-bottom:0 !important; padding:0 !important; }
.panel-layout-list > :first-child,
.panel-layout-list > .panel-heading{ border-top-left-radius:var(--sk-radius-lg) !important; border-top-right-radius:var(--sk-radius-lg) !important; }
.panel-layout-list > :last-child,
.panel-layout-list .panel-footer{ border-bottom-left-radius:var(--sk-radius-lg) !important; border-bottom-right-radius:var(--sk-radius-lg) !important; }
#APPLIST > .clearfix:not(:has(.btn-group)),.main.padder > .clearfix:not(:has(.btn-group)){ display:none !important; }
/* 工具栏（无下边线；搜索框在左、日期/操作在右） */
#APPLIST > .panel > form.form-inline,
.panel > form.form-inline.m-b-none{ display:flex !important; align-items:center; flex-wrap:wrap; gap:8px; padding:12px 14px !important; margin:0 !important; }
#APPLIST > .panel > form.form-inline > .pull-right,
.panel > form.form-inline.m-b-none > .pull-right{ float:none !important; }
/* 搜索框（非 pull-right 的 input-group-search）靠左 */
#APPLIST > .panel > form.form-inline > .input-group-search:not(.pull-right),
.panel > form.form-inline.m-b-none > .input-group-search:not(.pull-right){ order:1; }
/* 日期/操作等 pull-right 靠右 */
#APPLIST > .panel > form.form-inline > .pull-right,
.panel > form.form-inline.m-b-none > .pull-right{ order:2; }
#APPLIST > .panel > form.form-inline > .pull-right:not(.pull-right ~ .pull-right),
.panel > form.form-inline.m-b-none > .pull-right:not(.pull-right ~ .pull-right){ margin-left:auto !important; }
#APPLIST > .panel > form.form-inline > .filter-row,
.panel > form.form-inline.m-b-none > .filter-row{ order:3; flex-basis:100%; padding:0 !important; margin:6px 0 0 !important; }
/* 独立控件（非输入组）统一高度/圆角 */
.panel .form-inline > .form-control,.panel .form-inline > select,
.panel .form-inline .btn-small.btn-primary,.panel .form-inline .btn-small.btn-white{ height:36px !important; border-radius:var(--sk-radius) !important; display:inline-flex; align-items:center; margin:0 !important; }
.form-inline .form-control{ height:36px; }

/* 搜索框 & 输入组 · 统一单框圆角、内部无边分段、聚焦高亮 */
.panel .form-inline .input-group-search,
.panel .form-inline .input-group:not(.input-group-search){ display:inline-flex !important; align-items:stretch; height:36px; margin:0 !important; padding:0 !important; border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card); overflow:visible; vertical-align:middle; transition:border-color .15s,box-shadow .15s; }
/* 下拉标签左上/左下切圆角，与外框贴合 */
.panel .form-inline .input-group-search > a.btn:first-child{ border-radius:var(--sk-radius) 0 0 var(--sk-radius) !important; }
.panel .form-inline .input-group-search:focus-within,
.panel .form-inline .input-group:not(.input-group-search):focus-within{ border-color:var(--sk-brand); box-shadow:0 0 0 3px var(--sk-ring); }
/* 搜索框内部（显式列出，避开 .dropdown-input 弹层，不产生多余竖线） */
.panel .form-inline .input-group-search > a.btn,
.panel .form-inline .input-group-search > .form-control,
.panel .form-inline .input-group-search > button{ border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; height:auto !important; margin:0 !important; align-self:stretch; display:inline-flex !important; align-items:center; }
.panel .form-inline .input-group-search > a.btn{ padding:0 6px 0 12px; color:var(--sk-ink-2) !important; white-space:nowrap; }
.panel .form-inline .input-group-search > a.btn .caret{ margin-left:6px; color:var(--sk-faint); }
.panel .form-inline .input-group-search > .form-control{ padding:0 12px; min-width:130px; }
.panel .form-inline .input-group-search > button{ padding:0 13px; color:var(--sk-mut) !important; }
.panel .form-inline .input-group-search > button:hover{ color:var(--sk-brand) !important; }
/* 嵌套输入组（如交易日期）：内部无边、相邻加细分隔线 */
.panel .form-inline .input-group:not(.input-group-search) > *{ border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; height:auto !important; margin:0 !important; align-self:stretch; display:inline-flex !important; align-items:center; }
/* BS3 给 addon 设了 width:1%，flex 下会把标签压窄导致文字溢出重叠 → 改 auto */
.panel .form-inline .input-group:not(.input-group-search) > .input-group-addon{ width:auto !important; color:var(--sk-mut); padding:0 12px; white-space:nowrap; flex:0 0 auto; }
.panel .form-inline .input-group:not(.input-group-search) > .form-control{ padding:0 12px; }
/* select 不能用 flex（会塌缩重叠），恢复 inline-block，宽度按内容、收窄，留出原生箭头空间 */
.panel .form-inline .input-group:not(.input-group-search) > select{ display:inline-block !important; width:auto !important; flex:0 0 auto; padding:0 18px 0 10px !important; background-position:right 4px center; }
/* 自动补全浮层：绝对定位到搜索框正下方，避免错位 */
.panel .form-inline .input-group-search{ position:relative; }
.panel .form-inline .input-group-search > .dropdown-input{ position:absolute !important; top:calc(100% + 6px) !important; left:0 !important; right:auto !important; min-width:100%; margin:0 !important; z-index:1050; }
/* 外层若只是包裹一个嵌套输入组（交易日期外层），不重复描边 */
.panel .form-inline .input-group-search:has(> .input-group){ border:0 !important; background:transparent !important; overflow:visible; height:auto; }
/* 列表表格 */
.panel .table > thead > tr > th,.panel .table > thead > tr > td{ padding:11px 14px !important; font-size:12px !important; font-weight:600; color:var(--sk-mut) !important; background:var(--sk-head) !important; border-top:0 !important; border-right:0 !important; border-bottom:1px solid var(--sk-border) !important; white-space:nowrap; }
.panel .table > tbody > tr > td{ padding:12px 14px !important; font-size:13px !important; color:var(--sk-ink-2); border-top:1px solid var(--sk-border-2) !important; vertical-align:middle; }
.panel .table > tbody > tr:hover > td{ background:var(--sk-brand-bg2) !important; }
.panel .table .btn.btn-mini,.panel .table .btn-group .btn-mini{ height:28px; line-height:1; padding:0 11px; border-radius:8px; font-size:12px; display:inline-flex; align-items:center; }
.panel > .panel-footer{ background:var(--sk-card) !important; border-top:1px solid var(--sk-border); padding:10px 14px; }
/* 列表底部批量操作栏：统一按钮尺寸/圆角/间距/悬停，消除大小不一与拥挤感 */
.main .panel-footer .form-inline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.main .panel-footer .form-inline .btn.btn-mini{ height:34px !important; line-height:1 !important; padding:0 14px !important; margin:0 !important; border-radius:var(--sk-radius) !important; font-size:13px !important; font-weight:500; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--sk-border-3) !important; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; box-shadow:none !important; transition:border-color .15s,color .15s,background .15s; }
.main .panel-footer .form-inline .btn.btn-mini:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; background:var(--sk-brand-bg2) !important; }
.main .panel-footer .form-inline .btn.btn-mini > i{ font-size:14px; line-height:1; }

/* ---------- 列表页表格 · 精修（.table-hover=列表表格；详情/表单表格不用它，不受影响） ---------- */
/* 表头：白底 + 清晰下边界 + 字距（去掉发闷的灰带，更现代） */
.main .table-hover > thead > tr > th,.main .table-hover > thead > tr > td{ padding:11px 16px !important; font-size:12px !important; font-weight:600 !important; letter-spacing:.04em; color:var(--sk-mut) !important; background:transparent !important; border:0 !important; border-bottom:1.5px solid var(--sk-border) !important; }
/* 行：适度留白 + 细分隔线 + 悬停高亮（去掉斑马条，更干净现代） */
.main .table-hover > tbody > tr > td{ padding:10px 16px !important; font-size:13px !important; color:var(--sk-ink-2); border-top:1px solid var(--sk-border-2) !important; vertical-align:middle; transition:background .12s; }
.main .table-hover > tbody > tr:first-child > td{ border-top:0 !important; }
.main .table-hover > tbody > tr:hover > td{ background:var(--sk-brand-bg2) !important; }
/* 首个数据列（编号/名称）用主文字色（不加粗） */
.main .table-hover > tbody > tr > td:nth-child(2){ color:var(--sk-ink); }
/* 右对齐数字（金额/状态列）用等宽数字 */
.main .table-hover td.text-right,.main .table-hover th.text-right{ font-variant-numeric:tabular-nums; }
/* 勾选列居中收窄 + 品牌色复选框 */
.main .table-hover th:has(> input[type=checkbox]),
.main .table-hover td:has(> input[type=checkbox]){ text-align:center; width:46px; padding-left:10px !important; padding-right:10px !important; }
/* 自定义复选框：圆角方块，选中品牌底 + 白勾 */
.main .table-hover input[type=checkbox]{ -webkit-appearance:none; appearance:none; width:17px; height:17px; margin:0; border:1.5px solid var(--sk-border-3); border-radius:5px; background:var(--sk-card); cursor:pointer; vertical-align:middle; position:relative; transition:border-color .15s,background .15s; }
.main .table-hover input[type=checkbox]:hover{ border-color:var(--sk-brand); }
.main .table-hover input[type=checkbox]:checked{ background:var(--sk-brand); border-color:var(--sk-brand); }
.main .table-hover input[type=checkbox]:checked::after{ content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
/* 行操作按钮 hover 品牌色 */
.main .table-hover .btn.btn-white:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; }
/* 空状态 */
.main .table-hover td[colspan]{ color:var(--sk-mut); padding:34px 0 !important; }
/* 列表通用点睛类：状态胶囊 / 支付标签 / 单号等宽 / 金额 */
.st-pill{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:2px 10px; border-radius:20px; white-space:nowrap; }
.st-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-pill.ok{ background:var(--sk-success-bg); color:var(--sk-success); }
.st-pill.no{ background:var(--sk-card-2); color:var(--sk-mut); }
.st-pill.wait{ background:var(--sk-warn-bg); color:var(--sk-warn); }
.st-pill.err{ background:var(--sk-danger-bg); color:var(--sk-danger); }
.pay-tag{ display:inline-block; font-size:11.5px; color:var(--sk-ink-2); background:var(--sk-card-2); border:1px solid var(--sk-border); border-radius:6px; padding:2px 9px; white-space:nowrap; }
.pay-tag.muted{ color:var(--sk-mut); }
.oid{ font-family:"SF Mono",Consolas,"Roboto Mono","Microsoft Yahei",monospace; font-size:12.5px; letter-spacing:.2px; color:var(--sk-ink); }
.amt-cell{ font-weight:700; color:var(--sk-ink); font-variant-numeric:tabular-nums; }

/* ============================== 会员仪表盘 · 专属组件 ============================== */
/* 欢迎横幅 */
.user-head-info{ display:flex !important; align-items:center; height:auto !important; line-height:1.4 !important; padding:22px 24px; margin-bottom:20px !important;
  background:linear-gradient(120deg,var(--sk-brand-d),var(--sk-brand) 55%,var(--sk-brand-l)); border-radius:var(--sk-radius-lg);
  color:#fff; box-shadow:0 12px 30px var(--sk-glow); position:relative; overflow:hidden; }
.user-head-info::after{ content:''; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.10); }
.user-head-info::before{ content:''; position:absolute; right:80px; bottom:-90px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.07); }
.user-head-info .user_avatar{ width:58px !important; height:58px !important; margin-right:16px !important; border-radius:50%; border:3px solid rgba(255,255,255,.35); box-shadow:0 6px 16px rgba(0,0,0,.18); flex-shrink:0; position:relative; z-index:1; }
.user-head-info .text-muted{ color:rgba(255,255,255,.85) !important; font-size:14px; position:relative; z-index:1; }
.user-head-info .user_name{ font-size:22px !important; font-weight:700; color:#fff !important; background:none !important; letter-spacing:-.3px; position:relative; z-index:1; }
.user-head-info .user_icon{ position:relative; z-index:1; }
.user-head-info .user_icon a{ color:rgba(255,255,255,.55) !important; width:auto !important; height:auto !important; }
.user-head-info .user_icon a.text-primary{ color:#fff !important; }
.user-head-info .user_icon a:hover{ color:#fff !important; }

/* 已开通产品 · 磁贴 */
.member_product .item{ margin-bottom:12px; }
.member_product .item a{ position:relative; display:block !important; padding:16px 16px 16px 62px !important; margin:0 !important;
  border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius) !important; background:var(--sk-card) !important;
  transition:border-color .16s,box-shadow .16s,transform .16s; }
.member_product .item a:hover{ border-color:var(--sk-brand) !important; box-shadow:0 8px 20px var(--sk-glow); transform:translateY(-2px); }
.member_product .item a i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:10px;
  display:flex !important; align-items:center; justify-content:center; font-size:19px !important; color:var(--sk-brand) !important;
  background:var(--sk-brand-bg) !important; }
.member_product .item a:hover i{ color:#fff !important; background:linear-gradient(135deg,var(--sk-brand),var(--sk-brand-d)) !important; }
.member_product .item h3{ font-size:14px !important; font-weight:600; color:var(--sk-ink) !important; margin:0 0 3px !important; }
.member_product .item p{ font-size:12px !important; color:var(--sk-mut) !important; }

/* 待办 / 列表 list_gray */
.list_gray .list-group-item{ background:var(--sk-card-2) !important; border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius) !important; margin-bottom:8px !important; color:var(--sk-ink-2) !important; padding:12px 14px; transition:.15s; }
.list_gray .list-group-item:last-child{ margin-bottom:0 !important; }
.list_gray .list-group-item:hover{ background:var(--sk-brand-bg2) !important; border-color:var(--sk-brand) !important; color:var(--sk-brand-d) !important; }
.list_gray .list-group-item i{ color:var(--sk-brand); margin-right:6px; }
.pends b{ color:var(--sk-danger) !important; }

/* ============================== 配色 / 主题切换器（skinpro.js 注入） ============================== */
.sk-pop-wrap{ position:relative; display:flex !important; align-items:center; }
.sk-pop-wrap > a.sk-tbtn{ display:inline-flex !important; align-items:center; justify-content:center; width:40px; height:56px; color:var(--sk-ink-2) !important; cursor:pointer; }
.sk-pop-wrap > a.sk-tbtn:hover{ color:var(--sk-brand) !important; }
.sk-tbtn svg{ display:block; }
.sk-pop{ position:fixed; top:58px; right:16px; width:234px; background:var(--sk-card); border:1px solid var(--sk-border); border-radius:16px; box-shadow:var(--sk-sh-lg); padding:15px; z-index:3000; opacity:0; transform:translateY(-6px); pointer-events:none; transition:.16s; }
.sk-pop.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.sk-pop .sk-h{ font-size:13px; font-weight:600; color:var(--sk-ink); margin-bottom:12px; }
.sk-pop .sk-h i{ margin-right:7px; color:var(--sk-mut); }
.sk-sw{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; justify-items:center; }
.sk-sw button{ width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer; border:2px solid var(--sk-card); box-shadow:0 0 0 1px var(--sk-border); transition:.15s; position:relative; flex-shrink:0; }
.sk-sw button:hover{ transform:scale(1.14); }
.sk-sw button.on{ box-shadow:0 0 0 2px var(--sk-card),0 0 0 4px currentColor; }
.sk-sw button.on::after{ content:'\2713'; font-weight:700; color:#fff; font-size:11px; line-height:1; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.sk-div{ height:1px; background:var(--sk-border); margin:14px 0 12px; }
.sk-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--sk-ink-2); font-weight:500; }
.sk-row > span i{ margin-right:7px; color:var(--sk-mut); }
.sk-switch{ width:40px; height:23px; border-radius:20px; background:var(--sk-border-3); position:relative; cursor:pointer; transition:.15s; flex-shrink:0; }
.sk-switch::after{ content:''; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.15s; }
.sk-switch.on{ background:var(--sk-brand); }
.sk-switch.on::after{ left:20px; }

/* ============================== 全局提示 toast（jQuery Toast） ============================== */
.jq-toast-wrap{ width:344px; max-width:92%; padding:0; }
.jq-toast-single{
  position:relative; background:var(--sk-card) !important; color:var(--sk-ink-2) !important;
  border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius-lg) !important;
  box-shadow:var(--sk-sh-lg) !important; padding:14px 40px 14px 55px !important; margin:0 0 12px !important;
  font-size:13px !important; line-height:1.55; text-shadow:none !important; background-image:none !important; overflow:hidden;
}
.jq-toast-single.jq-icon-error,.jq-toast-single.jq-icon-success,
.jq-toast-single.jq-icon-warning,.jq-toast-single.jq-icon-info{ background:var(--sk-card) !important; border-color:var(--sk-border) !important; }
.jq-toast-single h2.jq-toast-heading{ color:var(--sk-ink) !important; font-weight:600 !important; font-size:14px !important; line-height:1.3 !important; margin:0 0 2px !important; border:0 !important; text-shadow:none !important; letter-spacing:0; }
.jq-toast-single a{ color:var(--sk-brand) !important; }
.jq-toast-single::before{ content:'i'; position:absolute; left:15px; top:15px; width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff !important; font-size:15px; font-weight:700; font-style:normal; line-height:1; background:var(--sk-mut); font-family:Georgia,'Times New Roman',serif; }
.jq-toast-single.jq-icon-error::before{ content:'!'; background:var(--sk-danger); font-family:inherit; }
.jq-toast-single.jq-icon-warning::before{ content:'!'; background:var(--sk-warn); font-family:inherit; }
.jq-toast-single.jq-icon-success::before{ content:'\2713'; background:var(--sk-success); font-family:inherit; }
.jq-toast-single.jq-icon-info::before{ content:'i'; background:var(--sk-brand); }
.close-jq-toast-single{ color:var(--sk-mut) !important; opacity:.7; font-size:17px !important; font-weight:400 !important; top:12px !important; right:14px !important; text-shadow:none !important; transition:.15s; }
.close-jq-toast-single:hover{ color:var(--sk-ink) !important; opacity:1; }
.jq-toast-loader{ height:3px !important; top:0 !important; bottom:auto !important; left:0; border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0 !important; background:var(--sk-brand) !important; }
.jq-toast-single.jq-icon-error .jq-toast-loader{ background:var(--sk-danger) !important; }
.jq-toast-single.jq-icon-success .jq-toast-loader{ background:var(--sk-success) !important; }
.jq-toast-single.jq-icon-warning .jq-toast-loader{ background:var(--sk-warn) !important; }
.jq-toast-single.jq-icon-info .jq-toast-loader{ background:var(--sk-brand) !important; }

/* =========================================================================
 * 侧边栏固定深色（配置开关 data-sk-side="dark"）
 * 默认侧栏跟随明暗（浅色主题=浅色栏）；开启后侧栏始终深色，不随明暗。
 * ========================================================================= */
html[data-sk-side="dark"]{
  --sk-side-bg:var(--sk-rail); --sk-side-ink:var(--sk-rail-mut); --sk-side-grp:var(--sk-rail-faint);
  --sk-side-brand:#fff; --sk-side-bd:rgba(255,255,255,.07);
}
/* 深色侧栏上的悬停用半透明白覆盖（避免浅色品牌底在深栏上刺眼） */
html[data-sk-side="dark"] .nav-primary > ul > li > a:hover,
html[data-sk-side="dark"] .nav-primary > ul > li > a:focus,
html[data-sk-side="dark"] .nav-primary > ul > .dropdown-submenu:hover > a,
html[data-sk-side="dark"] .nav-primary.bg-light > ul > li > a:hover{ background:rgba(255,255,255,.06) !important; color:#eef1f6 !important; }
/* 深色侧栏选中：柔白底 + 白字 + 品牌色图标（去发光） */
html[data-sk-side="dark"] .nav-primary > ul > li.active > a,
html[data-sk-side="dark"] .nav-primary > ul > li.active > a:hover,
html[data-sk-side="dark"] .nav-primary > ul > li.active > a:focus,
html[data-sk-side="dark"] .nav-primary.bg-light > ul > li.active > a{ background:rgba(255,255,255,.09) !important; color:#fff !important; box-shadow:none !important; }
html[data-sk-side="dark"] .nav-primary > ul > li.active > a span,
html[data-sk-side="dark"] .nav-primary > ul > li.active > a *{ color:#fff !important; }
html[data-sk-side="dark"] .nav-primary > ul > li.active > a i{ color:var(--sk-brand-l) !important; }
@media (max-width:991px){
  html[data-sk-side="dark"] .nav-primary .dropdown-menu a:hover{ color:#fff !important; }
}

/* =========================================================================
 * 会员中心 · 概览页组件（.mc-*）· 现代 / 高级 / 专业
 * 全部走 --sk-* 变量，随调色盘 / 明暗 / 侧栏配置生效。
 * ========================================================================= */
#MEMBER_DASH{ max-width:1280px; margin:0 auto; padding:24px 28px !important; }
#MEMBER_DASH .mc-card{ background:var(--sk-card); border:1px solid var(--sk-card-bd); border-radius:var(--sk-radius-lg); box-shadow:none; }
#MEMBER_DASH .mc-chd{ display:flex; align-items:center; height:52px; padding:0 20px; border-bottom:1px solid var(--sk-border-2); }
#MEMBER_DASH .mc-chd h3{ font-size:14.5px; font-weight:700; color:var(--sk-ink); letter-spacing:-.2px; margin:0; }
#MEMBER_DASH .mc-chd .mc-more{ margin-left:auto; font-size:12.5px; color:var(--sk-mut); display:inline-flex; align-items:center; gap:2px; }
#MEMBER_DASH .mc-chd .mc-more:hover{ color:var(--sk-brand) !important; }
#MEMBER_DASH .mc-cbody{ padding:6px 20px 12px; }

/* 账户条 */
#MEMBER_DASH .mc-hero{ display:flex; align-items:center; gap:16px; padding:20px 22px; margin-bottom:16px; background:var(--sk-brand-bg2); background:linear-gradient(135deg, color-mix(in srgb, var(--sk-brand) 14%, var(--sk-card)) 0%, color-mix(in srgb, var(--sk-brand) 5%, var(--sk-card)) 55%, var(--sk-card) 100%); border-color:color-mix(in srgb, var(--sk-brand) 16%, var(--sk-card)); }
#MEMBER_DASH .mc-hero .mc-ava{ width:52px; height:52px; border-radius:14px; object-fit:cover; flex-shrink:0; box-shadow:var(--sk-sh); }
#MEMBER_DASH .mc-hero .mc-nm{ font-size:18px; font-weight:700; color:var(--sk-ink); letter-spacing:-.3px; }
#MEMBER_DASH .mc-hero .mc-chips{ display:flex; gap:7px; margin-top:8px; flex-wrap:wrap; }
#MEMBER_DASH .mc-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; padding:2px 9px; border-radius:6px; border:1px solid var(--sk-border); color:var(--sk-mut); background:var(--sk-card-2); }
#MEMBER_DASH .mc-chip.ok{ color:var(--sk-success); border-color:transparent; background:var(--sk-success-bg); }
#MEMBER_DASH .mc-hero .mc-sp{ flex:1; }

/* KPI */
#MEMBER_DASH .mc-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
#MEMBER_DASH .mc-kpi{ background:var(--sk-card); border:1px solid var(--sk-card-bd); border-radius:var(--sk-radius-lg); box-shadow:none; padding:18px; transition:border-color .18s; }
#MEMBER_DASH .mc-kpi:hover{ border-color:var(--sk-border-3); }
#MEMBER_DASH .mc-kt{ display:flex; align-items:center; justify-content:space-between; }
#MEMBER_DASH .mc-kl{ font-size:12.5px; color:var(--sk-mut); font-weight:500; }
#MEMBER_DASH .mc-ki{ width:30px; height:30px; border-radius:9px; background:var(--sk-brand-bg); color:var(--sk-brand); display:flex; align-items:center; justify-content:center; font-size:15px; }
#MEMBER_DASH .mc-kv{ font-size:28px; font-weight:750; color:var(--sk-ink); letter-spacing:-1px; margin-top:12px; line-height:1; font-variant-numeric:tabular-nums; }
#MEMBER_DASH .mc-kv small{ font-size:15px; font-weight:600; color:var(--sk-mut); margin:0 1px; }
#MEMBER_DASH .mc-kf{ display:flex; align-items:center; gap:8px; margin-top:11px; font-size:11.5px; color:var(--sk-mut); }
#MEMBER_DASH .mc-delta{ display:inline-flex; align-items:center; gap:2px; font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:6px; }
#MEMBER_DASH .mc-delta.dn{ color:var(--sk-success); background:var(--sk-success-bg); }
#MEMBER_DASH .mc-delta.up{ color:var(--sk-danger); background:var(--sk-danger-bg); }

#MEMBER_DASH .mc-grid{ display:grid; grid-template-columns:1fr 300px; gap:16px; margin-top:16px; }
#MEMBER_DASH .mc-stack{ display:flex; flex-direction:column; gap:16px; }
@media (max-width:1100px){ #MEMBER_DASH .mc-kpis{ grid-template-columns:repeat(2,1fr); } #MEMBER_DASH .mc-grid{ grid-template-columns:1fr; } }
@media (max-width:600px){ #MEMBER_DASH .mc-kpis{ grid-template-columns:1fr; } }
/* 移动端自适应：欢迎卡换行堆叠、去弹簧、按钮平铺一行；整体收窄内边距 */
@media (max-width:640px){
    #MEMBER_DASH{ padding:14px 12px !important; }
    #MEMBER_DASH .mc-hero{ flex-wrap:wrap; gap:12px; padding:16px !important; }
    #MEMBER_DASH .mc-hero > div{ flex:1 1 auto; min-width:0; }
    #MEMBER_DASH .mc-hero .mc-nm{ font-size:16px; }
    #MEMBER_DASH .mc-hero .mc-sp{ display:none; }
    #MEMBER_DASH .mc-hero .btn{ flex:1 1 40%; text-align:center; justify-content:center; }
    #MEMBER_DASH .mc-chd{ padding:0 14px; }
    #MEMBER_DASH .mc-cbody{ padding:6px 14px 12px; }
    /* 顶栏面包屑：移动端只保留当前页，隐藏站点名 + 分隔符 */
    .navbar-title .sk-crumb .sk-site,.navbar-title .sk-crumb .sk-sep{ display:none !important; }
}
/* 汉堡菜单(.nav-toggle position:absolute;left:0)显示时，面包屑右移让位，避免与其重叠 */
@media (max-width:1199px){ #header .navbar-nav.navbar-title.pull-left{ padding-left:52px !important; } }

/* 资源表 */
#MEMBER_DASH .mc-restb{ width:100%; border-collapse:collapse; }
#MEMBER_DASH .mc-restb th{ text-align:left; font-size:11.5px; font-weight:600; color:var(--sk-mut); text-transform:uppercase; letter-spacing:.04em; padding:11px 20px; border-bottom:1px solid var(--sk-border-2); }
#MEMBER_DASH .mc-restb td{ padding:12px 20px; border-bottom:1px solid var(--sk-border-2); font-size:13px; color:var(--sk-ink-2); vertical-align:middle; }
#MEMBER_DASH .mc-restb tbody tr:last-child td{ border-bottom:0; }
#MEMBER_DASH .mc-restb tbody tr:hover td{ background:var(--sk-brand-bg2); }
#MEMBER_DASH .mc-pn{ display:flex; align-items:center; gap:11px; }
#MEMBER_DASH .mc-pn .mc-pic{ width:34px; height:34px; border-radius:9px; background:var(--sk-brand-bg); color:var(--sk-brand); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
#MEMBER_DASH .mc-pn b{ color:var(--sk-ink); font-weight:600; font-size:13.5px; display:block; }
#MEMBER_DASH .mc-pn span{ color:var(--sk-mut); font-size:11.5px; }
#MEMBER_DASH .mc-n{ font-weight:700; color:var(--sk-ink); font-size:14px; font-variant-numeric:tabular-nums; }
#MEMBER_DASH .mc-n.z{ color:var(--sk-faint); font-weight:600; }
#MEMBER_DASH .mc-pill{ display:inline-flex; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; }
#MEMBER_DASH .mc-pill.w{ background:var(--sk-warn-bg); color:var(--sk-warn); }
#MEMBER_DASH .mc-pill.z{ background:var(--sk-card-2); color:var(--sk-faint); }
#MEMBER_DASH a.mc-mng{ height:30px; line-height:28px; padding:0 13px; border-radius:8px; border:1px solid var(--sk-border-3); background:var(--sk-card); color:var(--sk-ink-2); font-size:12.5px; font-weight:600; display:inline-block; }
#MEMBER_DASH a.mc-mng:hover{ border-color:var(--sk-brand); color:var(--sk-brand) !important; }

/* 列表（待办 / 公告） */
#MEMBER_DASH .mc-li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--sk-border-2); font-size:13px; color:var(--sk-ink-2); }
#MEMBER_DASH .mc-li:last-child{ border-bottom:0; }
#MEMBER_DASH .mc-li .mc-ico{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
#MEMBER_DASH .mc-li .mc-ico.w{ background:var(--sk-warn-bg); color:var(--sk-warn); }
#MEMBER_DASH .mc-li .mc-ico.b{ background:var(--sk-brand-bg); color:var(--sk-brand); }
#MEMBER_DASH .mc-li .mc-ico.g{ background:var(--sk-success-bg); color:var(--sk-success); }
#MEMBER_DASH .mc-li .mc-tx{ line-height:1.4; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sk-ink-2); }
#MEMBER_DASH .mc-li .mc-tx b{ color:var(--sk-ink); font-weight:600; }
#MEMBER_DASH .mc-li a.mc-tx:hover{ color:var(--sk-brand) !important; }
#MEMBER_DASH .mc-li .mc-go{ margin-left:auto; font-size:12.5px; color:var(--sk-brand) !important; font-weight:600; white-space:nowrap; }
#MEMBER_DASH .mc-li .mc-t2{ margin-left:auto; color:var(--sk-mut); font-size:12px; white-space:nowrap; }
#MEMBER_DASH .mc-empty{ text-align:center; color:var(--sk-mut); padding:26px 0; font-size:13px; }
#MEMBER_DASH .mc-chart{ width:100%; height:200px; }

/* 我的资源 · 左色条卡（2 列） */
#MEMBER_DASH .mc-resgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 20px; }
@media (max-width:1100px){ #MEMBER_DASH .mc-resgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #MEMBER_DASH .mc-resgrid{ grid-template-columns:1fr; } }
/* 我的资源卡片 · D方案（紧凑列表：无图标块/无左色条，名称前小图标，两行布局） */
#MEMBER_DASH .mc-res{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--sk-border); border-radius:var(--sk-radius); padding:13px 15px; background:var(--sk-card); transition:border-color .16s; }
#MEMBER_DASH .mc-res:hover{ border-color:var(--sk-brand); }
#MEMBER_DASH .mc-res-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#MEMBER_DASH .mc-res-nm{ display:flex; align-items:center; gap:7px; min-width:0; font-size:14px; font-weight:600; color:var(--sk-ink); letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#MEMBER_DASH .mc-res-nm i{ color:var(--sk-brand); font-size:15px; flex-shrink:0; }
#MEMBER_DASH .mc-res:hover .mc-res-nm i{ color:var(--sk-brand-d); }
#MEMBER_DASH .mc-res-v{ flex-shrink:0; font-size:20px; font-weight:750; color:var(--sk-ink); line-height:1; font-variant-numeric:tabular-nums; }
#MEMBER_DASH .mc-res-v.z{ color:var(--sk-faint); font-weight:600; }
#MEMBER_DASH .mc-res-bot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#MEMBER_DASH .mc-res-desc{ min-width:0; flex:1; font-size:12px; color:var(--sk-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#MEMBER_DASH .mc-res-e{ flex-shrink:0; font-size:11.5px; color:var(--sk-warn); font-weight:600; }
#MEMBER_DASH .mc-res-e.z{ color:var(--sk-faint); font-weight:500; }
/* 公告表格（pjax 载入）在概览卡片内的收敛样式 */
#MEMBER_DASH #notice_body .dash_notice{ width:100% !important; margin:0 !important; table-layout:fixed; }
#MEMBER_DASH #notice_body .dash_notice td{ border:0 !important; border-bottom:1px solid var(--sk-border-2) !important; padding:0 !important; }
#MEMBER_DASH #notice_body .dash_notice tr:last-child td{ border-bottom:0 !important; }
#MEMBER_DASH #notice_body .dash_notice a{ color:var(--sk-ink-2); }
#MEMBER_DASH #notice_body .dash_notice a:hover{ color:var(--sk-brand) !important; }
#MEMBER_DASH #notice_body .badge{ font-size:10.5px; font-weight:600; flex-shrink:0; }
/* 公告：单行——标题(超出省略号，撑满) + 未读徽章 + 日期靠右固定；悬停=左右对称内缩的圆角高亮 */
#MEMBER_DASH #notice_body .dash_notice .dn-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 12px; margin:0 -12px; border-radius:9px; transition:background .12s; }
#MEMBER_DASH #notice_body .dash_notice tr:hover .dn-row{ background:var(--sk-brand-bg2); }
#MEMBER_DASH #notice_body .dash_notice .dn-link{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#MEMBER_DASH #notice_body .dash_notice .dn-meta{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
#MEMBER_DASH #notice_body .dash_notice .dn-dot{ width:7px; height:7px; border-radius:50%; background:var(--sk-danger); flex-shrink:0; }
#MEMBER_DASH #notice_body .dash_notice .dn-d{ font-size:11.5px; color:var(--sk-faint); font-variant-numeric:tabular-nums; }

/* ============================== layui layer 弹层 · 主题化 ============================== */
.layui-layer{ border-radius:var(--sk-radius-lg) !important; box-shadow:var(--sk-sh-lg) !important; background:var(--sk-card) !important; border:1px solid var(--sk-border) !important; color:var(--sk-ink-2); font-family:inherit; }
.layui-layer-title{ background:var(--sk-card) !important; color:var(--sk-ink) !important; border-bottom:1px solid var(--sk-border) !important; height:52px !important; line-height:52px !important; padding:0 22px !important; font-size:15px !important; font-weight:700 !important; border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0 !important; }
.layui-layer-content{ color:var(--sk-ink-2) !important; }
.layui-layer-dialog .layui-layer-content{ padding:22px 24px !important; font-size:14px !important; line-height:1.75 !important; }
/* 带图标的弹窗(layer.alert/confirm 等)：上面的内边距会盖掉 layui 原生 .layui-layer-padding 的左留白，导致图标遮挡文字。
   这里为“有图标”的内容重新预留左侧空间，并让图标垂直居中，统一处理所有带图标弹窗。 */
.layui-layer-dialog .layui-layer-content.layui-layer-padding{ padding:22px 24px 22px 64px !important; }
.layui-layer-dialog .layui-layer-content .layui-layer-ico{ left:22px !important; top:50% !important; margin-top:-15px !important; }
.layui-layer-page .layui-layer-content{ color:var(--sk-ink-2); }
/* 关闭按钮：重绘为主题色 × */
.layui-layer-setwin{ top:16px !important; right:16px !important; }
.layui-layer-setwin .layui-layer-close1,.layui-layer-setwin .layui-layer-close2{ background:none !important; width:26px !important; height:26px !important; border-radius:8px; position:relative; transition:background .15s,color .15s; color:var(--sk-mut); }
.layui-layer-setwin .layui-layer-close1::before,.layui-layer-setwin .layui-layer-close2::before,
.layui-layer-setwin .layui-layer-close1::after,.layui-layer-setwin .layui-layer-close2::after{ content:''; position:absolute; left:50%; top:50%; width:13px; height:1.6px; background:currentColor; border-radius:2px; }
.layui-layer-setwin .layui-layer-close1::before,.layui-layer-setwin .layui-layer-close2::before{ transform:translate(-50%,-50%) rotate(45deg); }
.layui-layer-setwin .layui-layer-close1::after,.layui-layer-setwin .layui-layer-close2::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.layui-layer-setwin .layui-layer-close1:hover,.layui-layer-setwin .layui-layer-close2:hover{ background:var(--sk-card-2); color:var(--sk-brand); }
.layui-layer-setwin .layui-layer-close2{ right:-28px; top:-28px; color:#fff; }
/* 按钮区 */
.layui-layer-btn{ padding:4px 22px 20px !important; border-top:0 !important; text-align:right !important; }
.layui-layer-btn a{ display:inline-flex !important; align-items:center; justify-content:center; height:36px !important; line-height:1 !important; padding:0 18px !important; margin:0 0 0 10px !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; font-size:13px !important; font-weight:600; transition:all .15s; }
.layui-layer-btn a:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; background:var(--sk-card-2) !important; }
.layui-layer-btn .layui-layer-btn0{ background:var(--sk-brand) !important; border-color:var(--sk-brand) !important; color:#fff !important; }
.layui-layer-btn .layui-layer-btn0:hover{ background:var(--sk-brand-d) !important; border-color:var(--sk-brand-d) !important; color:#fff !important; }
/* 输入/prompt 层 */
.layui-layer-prompt .layui-layer-input{ background:var(--sk-card) !important; border:1px solid var(--sk-border-3) !important; color:var(--sk-ink) !important; border-radius:var(--sk-radius) !important; }
.layui-layer-prompt .layui-layer-input:focus{ border-color:var(--sk-brand) !important; box-shadow:0 0 0 3px var(--sk-ring) !important; }
/* 加载提示(layer.msg icon:16)：干净盒子 + 主题色 CSS spinner，替换默认转圈图标 */
.layui-layer-msg{ border-radius:14px !important; }
.layui-layer-msg .layui-layer-content{ padding:15px 22px 15px 48px !important; font-size:14px !important; color:var(--sk-ink) !important; line-height:1.5 !important; }
.layui-layer-msg .layui-layer-content .layui-layer-ico16{ background:none !important; width:18px !important; height:18px !important; left:20px !important; top:50% !important; margin-top:-9px !important; border:2px solid var(--sk-border-3) !important; border-top-color:var(--sk-brand) !important; border-radius:50% !important; box-sizing:border-box; animation:sk-loadspin .7s linear infinite; }
/* 成功提示图标（icon:1）：自定义 SVG 绿色勾，替代未加载的精灵图 */
.layui-layer-msg .layui-layer-content .layui-layer-ico1{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2316a06a'/%3E%3Cpath d='M7 12.4l3.4 3.4L17 9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center !important; background-size:contain !important; width:19px !important; height:19px !important; left:20px !important; top:50% !important; margin-top:-9.5px !important; }
@keyframes sk-loadspin{ to{ transform:rotate(360deg); } }
/* loading 遮罩层保持默认；tips 小气泡背景 */
.layui-layer-tips .layui-layer-content{ background:var(--sk-rail) !important; color:#fff !important; border-radius:var(--sk-radius-sm) !important; box-shadow:var(--sk-sh-md) !important; }

/* ============================== jquery-confirm 弹层 · 主题化 ============================== */
.jconfirm .jconfirm-box{ border-radius:var(--sk-radius-lg) !important; box-shadow:var(--sk-sh-lg) !important; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; padding:0 !important; }
.jconfirm .jconfirm-box .jconfirm-title-c{ padding:15px 22px !important; margin:0 !important; border-bottom:1px solid var(--sk-border) !important; background:var(--sk-card) !important; border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0 !important; }
.jconfirm .jconfirm-box .jconfirm-title{ color:var(--sk-ink) !important; font-size:15px !important; font-weight:700 !important; }
.jconfirm .jconfirm-box .jconfirm-content-pane{ margin:0 !important;
  /* 这货是 inline-block，默认基线对齐会在它下面吊出 3px 行内空白，
     弹窗没有底部按钮时那 3px 就是一条贴不严的白边 */
  vertical-align:top; }
.jconfirm .jconfirm-box .jconfirm-content{ color:var(--sk-ink-2) !important; padding:22px 24px !important; font-size:14px; line-height:1.7; }
.jconfirm .jconfirm-box div.jconfirm-buttons{ padding:4px 22px 20px !important; margin:0 !important; text-align:right !important; float:none !important; border-top:0 !important; }
.jconfirm .jconfirm-box .jconfirm-buttons button{ display:inline-flex !important; align-items:center; justify-content:center; height:36px !important; line-height:1 !important; padding:0 18px !important; margin:0 0 0 10px !important; border-radius:var(--sk-radius) !important; font-size:13px !important; font-weight:600 !important; }
/* 关闭 X · 保留原生图标，只做主题上色/定位 */
.jconfirm .jconfirm-box .jconfirm-closeIcon{ top:10px !important; right:14px !important; color:var(--sk-mut) !important; opacity:1 !important; font-size:20px !important; line-height:1 !important; transition:color .15s; }
.jconfirm .jconfirm-box .jconfirm-closeIcon:hover{ color:var(--sk-brand) !important; }

/* ============================== 购买 / 选购页（.purchase）· 主题化（仅调样式，不动结构） ============================== */
.purchase .wrap{ background:var(--sk-card) !important; border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); box-shadow:var(--sk-sh); margin-bottom:16px; padding:18px 24px; }
.purchase .wrap .wrap-heading{ color:var(--sk-ink); font-size:15px; }
.purchase .wrap .wrap-heading:before{ background:var(--sk-brand); }
/* 说明提示 · 浅底信息条 + 图标 */
.purchase .rule-desc{ position:relative; background:transparent !important; border:0 !important; border-radius:0 !important; padding:3px 0 3px 20px !important; margin-top:6px !important; color:var(--sk-mut) !important; font-size:12px; line-height:1.55; }
.purchase .rule-desc + .rule-desc{ margin-top:1px !important; }
.purchase .rule-desc::before{ content:''; position:absolute; left:1px; top:4px; width:14px; height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/14px 14px; }
.purchase .rule-desc .text-black,.purchase .rule-desc .text-danger{ color:var(--sk-ink-2) !important; font-weight:600; }
/* 售罄等 badge · 统一 inline 灰胶囊（同地域按钮，不再浮上方角标） */
.purchase .rule-list .rule-item .badge{ position:static !important; top:auto !important; right:auto !important; margin-left:6px !important; background:var(--sk-danger-bg) !important; color:var(--sk-danger) !important; font-weight:600; font-size:10.5px; padding:1px 8px !important; border-radius:9px; vertical-align:middle; }
.purchase .wrap-rule-name{ color:var(--sk-ink-2); }
/* 选项按钮 rule-item：独立圆角 + 主题色 */
.purchase .rule-list .rule-item{ margin:5px 8px 5px 0 !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; background:var(--sk-card) !important; color:var(--sk-ink-2) !important; height:36px; line-height:34px; transition:border-color .15s,color .15s,background .15s; }
.purchase .rule-list .rule-item:first-child,.purchase .rule-list .rule-item:last-of-type{ border-radius:var(--sk-radius) !important; }
.purchase .rule-list .rule-item:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; }
.purchase .rule-list .rule-item.active{ background:var(--sk-brand-bg2) !important; border-color:var(--sk-brand) !important; color:var(--sk-brand-d) !important; box-shadow:inset 0 0 0 1px var(--sk-brand); font-weight:600; z-index:2; position:relative; }
.purchase .rule-list .rule-item.active::after{ content:'\2713'; position:absolute; right:0; bottom:0; width:16px; height:16px; line-height:16px; text-align:center; font-size:9px; font-weight:700; color:#fff; background:var(--sk-brand); border-radius:8px 0 var(--sk-radius) 0; }
.purchase .rule-list .rule-item.disabled{ background:var(--sk-card-2) !important; color:var(--sk-faint) !important; border-color:var(--sk-border-2) !important; }
/* 地域按钮（含国旗）· 可换行 + 统一高度 + 国旗/名称/国家整齐 */
.purchase .btn-group-country:not(:has(.dropdown-menu)){ display:flex !important; flex-wrap:wrap; gap:10px; }
.purchase .btn-group-country:has(.dropdown-menu){ display:inline-block !important; vertical-align:top; margin:0 10px 10px 0 !important; }
.purchase .btn-group-country .rule-item{ border-radius:var(--sk-radius) !important; height:auto !important; min-height:50px; line-height:1.3 !important; display:flex !important; flex-wrap:wrap; align-items:center; padding:7px 16px !important; margin:0 !important; }
.purchase .btn-group-country .rule-item br{ display:none !important; }
.purchase .btn-group-country .rule-item .flag-icon{ float:none !important; margin:0 8px 0 0 !important; }
.purchase .btn-group-country .rule-item .small,.purchase .btn-group-country .rule-item .text-small{ flex-basis:100%; width:100%; margin:2px 0 0 !important; padding:0 !important; color:var(--sk-mut) !important; font-size:11px; line-height:1.2; }
.purchase .btn-group-country .rule-item.active .small{ color:var(--sk-mut) !important; }
.purchase .btn-group-country .rule-item .badge{ position:static !important; top:auto !important; right:auto !important; margin-left:6px; }
/* 地域按钮 · 方案3 单行胶囊（国家做浅标签；选中态沿用统一浅底+品牌字+边框+勾，不用色底） */
.purchase .btn-group-country:not(:has(.dropdown-menu)) .rule-item{ height:42px !important; min-height:0 !important; line-height:1 !important; flex-wrap:nowrap !important; gap:8px; padding:0 16px !important; border-radius:var(--sk-radius) !important; }
.purchase .btn-group-country:not(:has(.dropdown-menu)) .rule-item .flag-icon{ margin:0 !important; width:18px !important; height:13px !important; box-shadow:0 1px 2px rgba(0,0,0,.12) !important; }
.purchase .rule-list .rule-item .badge:after{ display:none !important; }
.purchase .btn-group-country:not(:has(.dropdown-menu)) .rule-item .small{ flex-basis:auto !important; width:auto !important; margin:0 !important; padding:1px 7px !important; background:var(--sk-head); border-radius:8px; font-size:11px; color:var(--sk-mut) !important; line-height:1.5; }
.purchase .btn-group-country:not(:has(.dropdown-menu)) .rule-item.active .small{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; }
/* 操作系统 · 类型+版本合一下拉卡片：加大卡片 + LOGO与文字之间拉开间距 */
.purchase .btn-group-country:has(.dropdown-menu) .rule-item{ min-height:64px !important; min-width:156px; padding:12px 20px !important; }
.purchase .btn-group-country:has(.dropdown-menu) .rule-item > img,.purchase .btn-group-country:has(.dropdown-menu) .rule-item > i{ margin-right:8px !important; font-size:19px; }
.purchase .btn-group-country:has(.dropdown-menu) .rule-item > span:not(.small):not(.text-small):not(.badge){ font-weight:600; font-size:14px; }
.purchase .btn-group-country:has(.dropdown-menu) .rule-item .small,.purchase .btn-group-country:has(.dropdown-menu) .rule-item .text-small{ margin-top:5px !important; font-size:12px; }
.purchase .rule-list.os-ver-row .rule-item.os-ver{ height:auto !important; min-height:0 !important; line-height:1.4 !important; padding:7px 15px !important; border-radius:18px !important; font-size:13px; font-weight:500; }
.purchase .rule-list.os-ver-row .rule-item.os-ver.active{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand-d) !important; box-shadow:inset 0 0 0 1px var(--sk-brand) !important; }
.purchase .rule-list.os-ver-row .rule-item.os-ver.active::after{ display:none !important; }
/* 选择规格 · 过滤表单（独立一行 · 全部输入框同排固定宽 · 统一圆角+34px 高） */
.purchase .spec-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.purchase .spec-filter .spec-ctrl{ height:34px !important; line-height:34px !important; width:150px !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; box-shadow:none !important; font-size:13px; color:var(--sk-ink) !important; background:var(--sk-card) !important; margin:0 !important; }
.purchase .spec-filter select.spec-ctrl{ padding:0 30px 0 12px !important; cursor:pointer; }
.purchase .spec-filter .spec-ctrl:hover,.purchase .spec-filter .spec-ctrl:focus{ border-color:var(--sk-brand) !important; }
.purchase .spec-filter .spec-search{ display:flex; }
.purchase .spec-filter .spec-search .spec-ctrl{ border-radius:var(--sk-radius) 0 0 var(--sk-radius) !important; border-right:0 !important; padding:0 12px !important; }
.purchase .spec-filter .spec-search-btn{ height:34px !important; padding:0 15px !important; border:1px solid var(--sk-border-3) !important; border-left:0 !important; border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; background:var(--sk-head) !important; color:var(--sk-mut) !important; box-shadow:none !important; }
.purchase .spec-filter .spec-search-btn:hover{ color:var(--sk-brand) !important; background:var(--sk-head) !important; }
/* 套餐卡 rule-card */
.purchase .rule-list .rule-card{ border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius-lg) !important; background:var(--sk-card) !important; color:var(--sk-ink) !important; width:340px; transition:border-color .18s,box-shadow .18s,transform .18s; }
.purchase .rule-list .rule-card.active,.purchase .rule-list .rule-card:hover{ border-color:var(--sk-brand) !important; box-shadow:var(--sk-sh-md) !important; transform:translateY(-2px); }
.purchase .rule-list .rule-card label{ color:var(--sk-ink); font-weight:600; }
.purchase .rule-list .rule-card.active label,.purchase .rule-list .rule-card:hover label{ color:var(--sk-brand) !important; }
.purchase .rule-list .rule-card label:after{ background:var(--sk-brand); }
.purchase .rule-list .rule-card .desc{ color:var(--sk-mut); }
.purchase .rule-list .rule-card .icon-bg{ border-top-color:var(--sk-brand) !important; }
/* 一键购买套餐卡 · C 风格（标题左对齐 + 配置 key-value 两端 + 分隔线） */
.purchase .rule-list .rule-card{ width:256px !important; padding-bottom:12px; }
.purchase .rule-list .rule-card label{ text-align:left !important; height:auto !important; line-height:1.3 !important; padding:14px 16px 3px !important; font-size:15px !important; cursor:pointer; }
.purchase .rule-list .rule-card label:after{ display:none !important; }
.purchase .rule-list .rule-card .desc{ text-align:left !important; padding:0 16px 10px !important; color:var(--sk-mut) !important; font-size:11.5px; }
.purchase .rule-list .rule-card ul{ text-align:left !important; padding:7px 16px 0 !important; border-top:1px solid var(--sk-border); }
.purchase .rule-list .rule-card ul li{ display:flex !important; justify-content:space-between; align-items:center; padding:4px 0 !important; font-size:12.5px; border-bottom:1px dashed var(--sk-border-2); }
.purchase .rule-list .rule-card ul li:last-child{ border-bottom:0; }
.purchase .rule-list .rule-card ul li .text-muted{ color:var(--sk-mut) !important; }
/* 套餐卡等高：描述恒为一行（无简介给默认文案，超长省略号），卡片自然齐平 */
.purchase .rule-list:has(.rule-card){ display:flex; flex-wrap:wrap; align-items:stretch; margin:0 !important; padding:2px 16px 6px 0 !important; }
.purchase .rule-list .rule-card{ float:none !important; margin:0 14px 14px 0 !important; }
.purchase .rule-list .rule-card .desc{ white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; }
/* 输入框 input-group 主题化（NAT转发/防御峰值/实例用户密码等） */
.purchase .rule-input .form-control,.purchase .input-box .form-control{ border-color:var(--sk-border-3) !important; box-shadow:none !important; }
.purchase .rule-input .form-control:hover,.purchase .rule-input .form-control:focus,.purchase .input-box .form-control:hover,.purchase .input-box .form-control:focus{ border-color:var(--sk-brand) !important; }
.purchase .rule-input .input-group-addon,.purchase .input-box .input-group-addon{ background:var(--sk-head) !important; border-color:var(--sk-border-3) !important; color:var(--sk-ink-2) !important; }
.purchase .rule-input .input-group > .form-control:first-child,.purchase .input-box .input-group > .form-control:first-child{ border-radius:var(--sk-radius) 0 0 var(--sk-radius) !important; }
.purchase .rule-input > .form-control{ border-radius:var(--sk-radius) !important; }
/* 实例用户 · 自定义密码表单（图标addon在左 + 随机生成按钮收尾） */
.purchase .rule-input:not(.input-box) .form-control{ height:36px !important; }
.purchase .rule-input:not(.input-box) textarea.form-control{ height:76px !important; padding:8px 12px !important; line-height:1.6 !important; resize:vertical; }
.purchase .rule-input:not(.input-box) .input-group-addon{ height:36px !important; }
.purchase .rule-input:not(.input-box) .input-group-btn .btn{ height:36px !important; line-height:36px !important; padding-top:0 !important; padding-bottom:0 !important; }
.purchase .rule-input .input-group-addon:first-child{ border-radius:var(--sk-radius) 0 0 var(--sk-radius) !important; border-right:0 !important; }
.purchase .rule-input .input-group-addon:first-child i{ color:var(--sk-mut); font-size:15px; }
.purchase .rule-input .input-group > .form-control:last-child{ border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; }
.purchase .rule-input .input-group > .form-control:not(:first-child):not(:last-child){ border-radius:0 !important; }
.purchase .rule-input .form-control[disabled]{ background:var(--sk-head) !important; color:var(--sk-ink-2) !important; cursor:default; }
.purchase .rule-input .input-group-btn .btn-primary{ background:var(--sk-brand) !important; border:1px solid var(--sk-brand) !important; color:#fff !important; font-weight:600; }
.purchase .rule-input .input-group-btn .btn-primary:hover{ background:var(--sk-brand-d) !important; border-color:var(--sk-brand-d) !important; }
/* 行级垂直居中（vhost 每月流量/连接数=无限制时，标签与胶囊中线对齐，清掉滑块补位内边距） */
.purchase .wrap-item.row-center{ display:flex; align-items:center; }
.purchase .wrap-item.row-center .wrap-rule-name{ float:none !important; width:90px; flex-shrink:0; padding:0 !important; }
.purchase .wrap-item.row-center .wrap-rule-body{ float:none !important; flex:1; min-width:0; padding-left:20px !important; }
.purchase .wrap-item.row-center .rule-item{ margin-top:0 !important; margin-bottom:0 !important; }
/* 固定配置（不可选）· 灰底锁定态。可点项=a.rule-item(天然排除)；售罄/占位=.disabled 类(排除，保留红角标) */
.purchase .rule-list span.rule-item:not(.disabled){ background:var(--sk-head) !important; border:1px solid var(--sk-border-2) !important; box-shadow:none !important; color:var(--sk-ink-2) !important; font-weight:600; cursor:default; }
.purchase .rule-list span.rule-item:not(.disabled)::after{ display:none !important; }
.purchase .rule-list span.rule-item:not(.disabled)::before{ content:''; display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-1px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center/12px 12px; }
.purchase .rule-input .input-group-addon:last-child,.purchase .input-box .input-group-addon:last-child{ border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; }
.purchase .rule-input .input-group-btn:last-child .btn{ border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; }
/* 购买数量步进器 · 主题化（单位「台」透明融入 + 步进箭头去旧蓝 #00aaff hover） */
.purchase .input-box .input-addon-txt{ background:transparent !important; border-left:0 !important; color:var(--sk-mut) !important; padding-left:4px !important; padding-right:8px !important; }
.purchase .input-box .btn-updown{ background:var(--sk-head) !important; border-color:var(--sk-border-3) !important; padding:0 !important; border-radius:0 var(--sk-radius) var(--sk-radius) 0 !important; overflow:hidden; }
.purchase .input-box .btn-updown .spinner-up,.purchase .input-box .btn-updown .spinner-down{ color:var(--sk-mut) !important; transition:color .15s,background .15s; }
.purchase .input-box .btn-updown .spinner-down{ border-top:1px solid var(--sk-border-3); }
.purchase .input-box .btn-updown a:hover{ color:var(--sk-brand) !important; background:var(--sk-brand-bg2) !important; }

/* ============================== layer 加载图标 · 统一标准 spinner ============================== */
.layui-layer-loading{ background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:50% !important; }
.layui-layer-loading .layui-layer-content{ width:46px !important; height:46px !important; padding:0 !important; background:none !important; display:flex !important; align-items:center; justify-content:center; }
.layui-layer-loading .layui-layer-content::before{ content:''; width:32px; height:32px; border:3px solid var(--sk-ring); border-top-color:var(--sk-brand); border-radius:50%; animation:sk-spin .7s linear infinite; }
@keyframes sk-spin{ to{ transform:rotate(360deg); } }
/* 购买按钮加载态（无全局遮罩，仅按钮禁用+加载中提示） */
.purchase .btn_buy.is-loading{ cursor:default !important; opacity:.85; pointer-events:none; }
.purchase .btn_buy.is-loading .pl-mini{ display:inline-block; width:12px; height:12px; margin-right:7px; vertical-align:-1px; border:2px solid rgba(120,120,140,.35); border-top-color:var(--sk-brand); border-radius:50%; animation:sk-spin .7s linear infinite; }

/* 购买页顶部主切换（一键购买 / 自定义购买）· 方案4 图标卡+副标题 */
.purchase > .nav-tabs{ display:inline-flex !important; background:transparent !important; border:0 !important; padding:0 !important; margin:2px 0 16px !important; }
.purchase > .nav-tabs > li{ margin:0 12px 0 0 !important; float:none !important; border:0 !important; }
.purchase > .nav-tabs > li > a{ display:flex !important; align-items:center; gap:12px; padding:11px 20px !important; margin:0 !important; border:1.5px solid var(--sk-border-3) !important; border-radius:var(--sk-radius-lg) !important; background:var(--sk-card) !important; cursor:pointer; transition:all .18s; }
.purchase > .nav-tabs > li > a:hover{ border-color:var(--sk-brand) !important; background:var(--sk-card) !important; }
.purchase > .nav-tabs > li > a .tb-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--sk-head); color:var(--sk-mut); flex-shrink:0; transition:.18s; }
.purchase > .nav-tabs > li > a .tb-ic i{ font-size:17px; margin:0 !important; color:inherit !important; }
.purchase > .nav-tabs > li > a .tb-tx{ display:flex; flex-direction:column; line-height:1.3; text-align:left; }
.purchase > .nav-tabs > li > a .tb-tt{ font-weight:600; font-size:14px; color:var(--sk-ink); }
.purchase > .nav-tabs > li > a .tb-st{ font-size:11.5px; color:var(--sk-mut); font-weight:400; }
.purchase > .nav-tabs > li.active > a,.purchase > .nav-tabs > li.active > a:hover,.purchase > .nav-tabs > li.active > a:focus{ border-color:var(--sk-brand) !important; background:var(--sk-brand-bg2) !important; box-shadow:none !important; }
.purchase > .nav-tabs > li.active > a .tb-ic{ background:var(--sk-brand); color:#fff; }
.purchase > .nav-tabs > li.active > a .tb-tt{ color:var(--sk-brand-d); }
.purchase > .nav-tabs > li.active > a .tb-st{ color:var(--sk-brand-l); }

/* 区块内二级筛选 tab（实例位置/实例类型等）· 下划线铺满 100% 宽 */
.purchase .wrap .nav-tabs{ border-bottom:1px solid var(--sk-border) !important; }
.purchase .wrap .nav-tabs.pull-left{ float:none !important; width:100% !important; }

/* bootstrap-slider 滑块 · 方案2 iOS风（10px内凹粗轨+渐变填充+22px白色大圆钮，数值看右侧输入框） */
.slider-track{ background:var(--sk-head) !important; background-image:none !important; box-shadow:inset 0 1px 2px rgba(13,21,38,.08) !important; height:10px !important; border-radius:10px !important; }
.slider-selection{ background:linear-gradient(90deg,var(--sk-brand-l),var(--sk-brand)) !important; background-image:linear-gradient(90deg,var(--sk-brand-l),var(--sk-brand)) !important; box-shadow:none !important; border-radius:10px !important; }
.slider-handle{ background:#fff !important; background-image:none !important; border:0 !important; border-radius:50% !important; width:22px !important; height:22px !important; opacity:1 !important; box-shadow:0 1px 2px rgba(13,21,38,.25),0 3px 8px rgba(13,21,38,.15) !important; transition:transform .15s,box-shadow .15s; }
.slider-handle:hover,.slider-handle:focus{ transform:scale(1.12); box-shadow:0 1px 3px rgba(13,21,38,.3),0 4px 10px rgba(13,21,38,.18),0 0 0 5px var(--sk-ring) !important; }
.slider.slider-horizontal{ width:100% !important; height:22px !important; }
.slider.slider-horizontal .slider-track{ top:50% !important; margin-top:-5px !important; }
.slider.slider-horizontal .slider-handle{ top:50% !important; margin-top:-11px !important; }
.slider .slider-tick{ display:none !important; }
.slider .tooltip{ display:none !important; }
.slider-large .slider .slider-handle:before,.slider-large .slider .slider-handle:after{ content:none !important; display:none !important; }
.slider-input{ align-items:center !important; }
.slider-input .input-box{ margin-top:0 !important; margin-bottom:0 !important; }

/* 规格表 t-table（自定义购买） */
.purchase .panel-table-warp{ border:1px solid var(--sk-border) !important; border-radius:var(--sk-radius) !important; box-shadow:none !important; }
.purchase .t-table .t-thead{ color:var(--sk-mut) !important; background:var(--sk-head) !important; }
.purchase .t-table .t-row{ transition:background .15s; }
.purchase .t-table .t-row:hover{ background:var(--sk-brand-bg2) !important; }
.purchase .t-table .t-row:has(input:checked){ background:var(--sk-brand-bg2) !important; box-shadow:inset 3px 0 0 var(--sk-brand); }
/* 规格表价格列 · 红色（同设计稿） */
.purchase .t-table .t-body .t-row .t-col:last-child{ color:var(--sk-danger) !important; font-weight:700; }
/* 规格名称加粗 + 售罄红色胶囊 */
.purchase .t-table .t-body .t-name{ font-weight:600; color:var(--sk-ink); }
.purchase .t-table .t-body .t-col > .badge{ background:var(--sk-danger-bg) !important; color:var(--sk-danger) !important; font-weight:600; font-size:10.5px; padding:1px 8px !important; border-radius:9px; margin-left:6px; }
/* 费用总计 + 立即购买 */
.purchase #wrapFooter .rule-price .text-danger{ font-size:22px !important; font-weight:800; }
.purchase .btn_buy{ border-radius:var(--sk-radius) !important; font-weight:700; padding-left:36px; padding-right:36px; }

/* --- 右侧悬浮购买卡（#wrapFooter 精简卡 + 更多折叠） --- */
.wrap#wrapFooter .wrap-heading{ display:block !important; }
.wrap#wrapFooter .pf-r{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:7px 0; }
.wrap#wrapFooter .pf-k{ color:var(--sk-mut); flex-shrink:0; }
.wrap#wrapFooter .pf-v{ color:var(--sk-ink); text-align:right; word-break:break-word; }
.wrap#wrapFooter .pf-more{ margin:2px 0 4px; }
.wrap#wrapFooter .pf-more summary{ cursor:pointer; font-size:12.5px; color:var(--sk-brand); list-style:none; padding:7px 0; user-select:none; outline:none; }
.wrap#wrapFooter .pf-more summary::-webkit-details-marker{ display:none; }
.wrap#wrapFooter .pf-more summary::after{ content:'  \25be'; }
.wrap#wrapFooter .pf-more[open] summary::after{ content:'  \25b4'; }
.wrap#wrapFooter hr{ border:0 !important; border-top:1px solid var(--sk-border) !important; margin:12px 0 !important; }
/* 费用区纵向：价格在上、按钮在底 */
.wrap#wrapFooter .wrap-amount .wrap-rule-name{ display:none; }
.wrap#wrapFooter .wrap-amount .wrap-rule-body{ display:flex; flex-direction:column-reverse; gap:7px; padding:0 !important; }
.wrap#wrapFooter .wrap-amount .pull-right{ float:none !important; width:100%; margin:0 !important; }
.wrap#wrapFooter .wrap-amount .rule-price{ padding:0 !important; }
.wrap#wrapFooter .wrap-amount .btn_buy{ display:block; width:100%; text-align:center; }
.wrap#wrapFooter .wrap-coupon .form-control{ width:100% !important; }
/* A版：配置概要/价格概要分区 + 更多配置 hover 左侧弹出 */
.wrap#wrapFooter{ border-radius:18px !important; }
/* 右卡产品标识卡头（云服务器/物理服务器/托管…） */
.wrap#wrapFooter .pf-card-hd{ display:flex; align-items:center; gap:8px; padding:12px 18px; background:linear-gradient(135deg,var(--sk-brand-bg2),var(--sk-brand-bg)); border-bottom:1px solid var(--sk-border); border-radius:18px 18px 0 0; font-size:14px; font-weight:700; color:var(--sk-brand-d); }
.wrap#wrapFooter .pf-card-hd i{ font-size:15px; color:var(--sk-brand); }
.wrap#wrapFooter .wrap-heading{ padding-left:0 !important; }
/* 购买卡移动端(非固定态)：统一左右内边距为18px，修正基础样式泄漏(wrap-body 右30/左15、heading 左0)的不对称 */
@media (max-width:991px){
    /* 卡片自身内边距清零(否则套用 .purchase .wrap 的 24px，band/内容四周多出白边)；内部各区块自带 18px 边距 */
    .wrap#wrapFooter{ padding:0 !important; }
    .wrap#wrapFooter .wrap-heading{ padding-left:18px !important; padding-right:18px !important; }
    .wrap#wrapFooter .wrap-body{ padding-left:18px !important; padding-right:18px !important; }
    /* 配置概要悬停弹窗：移动端整卡近满宽，侧弹会出屏 → 改为标题下方整宽展开 */
    .wrap#wrapFooter .pf-flyout{ left:0 !important; right:0 !important; top:calc(100% + 6px) !important; width:auto !important; }
    .wrap#wrapFooter .pf-flyout::before,.wrap#wrapFooter .pf-flyout::after{ display:none !important; }
}
.wrap#wrapFooter .wrap-heading:before{ display:none !important; }
.wrap#wrapFooter .wrap-coupon{ width:100% !important; float:none !important; padding-right:0 !important; }
/* 积分注释 · 与页面其他注释一致的强调色空心图标 */
.wrap#wrapFooter .pf-points{ position:relative; padding-left:0 !important; line-height:1.35; margin:-2px 0 !important; font-size:11.5px; }
.wrap#wrapFooter .pf-points::before{ content:''; display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-right:6px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/13px 13px; }
.wrap#wrapFooter .wrap-amount .pull-right:first-child{ margin-top:4px !important; }
.wrap#wrapFooter .pf-sec-hd{ font-size:14px; font-weight:600; color:var(--sk-ink); margin:0 0 6px; }
/* 右卡 · 购买设置区（左右结构：标签左 / 控件右；购买时长=下拉带折扣） */
.wrap#wrapFooter .pf-buyset .wrap-item{ margin:0 0 10px; display:flex; align-items:center; gap:10px; }
.wrap#wrapFooter .pf-buyset .wrap-item:last-child{ margin-bottom:2px; }
.wrap#wrapFooter .pf-buyset .wrap-rule-name{ float:none !important; width:58px !important; flex-shrink:0; padding:0 !important; font-size:13px; color:var(--sk-mut) !important; line-height:1.5 !important; white-space:nowrap; }
.wrap#wrapFooter .pf-buyset > .rule-desc.pf-stock{ margin:-8px 0 2px 68px !important; }
.wrap#wrapFooter .pf-buyset .rule-list{ display:flex; flex-wrap:wrap; }
.wrap#wrapFooter .pf-buyset .rule-item{ height:32px !important; line-height:30px !important; padding:0 14px !important; font-size:12.5px !important; margin:0 8px 0 0 !important; }
.wrap#wrapFooter .pf-buyset textarea.form-control{ width:100% !important; max-width:none !important; height:56px !important; border-radius:var(--sk-radius) !important; border-color:var(--sk-border-3) !important; box-shadow:none !important; padding:8px 12px !important; }
.wrap#wrapFooter .pf-buyset .wrap-item:has(textarea){ align-items:flex-start; }
.wrap#wrapFooter .pf-buyset .wrap-item:has(textarea) .wrap-rule-name{ padding-top:8px !important; }
/* 可点 addon（host页 随机生成密码/端口） */
.purchase .rule-input a.input-group-addon{ cursor:pointer; color:var(--sk-brand) !important; font-weight:600; user-select:none; white-space:nowrap; }
.purchase .rule-input a.input-group-addon:hover{ background:var(--sk-brand-bg2) !important; }
/* SSL证书购买页 certBuy · 细节（须在通用规则之后，靠后序赢同特异性平局） */
.certBuy .rule-input .form-control{ border-radius:var(--sk-radius) !important; }
.certBuy .rule-input:not(.input-box) textarea.form-control{ height:180px !important; }
.certBuy .rule-price .text-danger:not(.text-small){ font-size:24px !important; font-weight:800; }
.certBuy .cert-buy{ height:42px !important; line-height:42px !important; padding:0 46px !important; font-size:15px !important; font-weight:600; border-radius:var(--sk-radius) !important; border:0 !important; box-shadow:0 6px 16px rgba(232,85,77,.25); }
.certBuy label.input-group-addon{ font-weight:400; cursor:pointer; }
/* 旧SSL购买页 ssl/purchase · 品牌介绍盒子 */
.purchase .ssl_product_tips{ display:flex; align-items:center; gap:14px; background:var(--sk-head) !important; border:1px solid var(--sk-border-2); border-radius:var(--sk-radius) !important; padding:10px 14px !important; margin-top:10px; }
.purchase .ssl_product_tips .product_content{ color:var(--sk-mut) !important; font-size:12.5px; line-height:1.65; }
/* ── 证书页差异化 A+B+C+D ── */
/* D · 签发流程步骤 */
.certBuy .cert-steps{ display:flex; align-items:center; max-width:680px; margin:4px auto 18px; }
.certBuy .cert-step{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.certBuy .cert-step .n{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--sk-brand); color:#fff; }
.certBuy .cert-step .t{ font-size:13px; font-weight:600; color:var(--sk-ink); }
.certBuy .cert-step.todo .n{ background:var(--sk-head); color:var(--sk-mut); border:1px solid var(--sk-border-3); }
.certBuy .cert-step.todo .t{ color:var(--sk-mut); font-weight:400; }
.certBuy .cert-line{ flex:1; height:2px; background:var(--sk-border); margin:0 14px; border-radius:2px; min-width:24px; }
.certBuy .cert-line.done{ background:var(--sk-brand); }
/* A · 浏览器地址栏实景 */
.certBuy .cert-browser{ max-width:680px; border:1px solid var(--sk-border-3); border-radius:12px; overflow:hidden; box-shadow:var(--sk-sh-md); margin:0 auto 18px; background:var(--sk-card); }
.certBuy .cert-chrome{ display:flex; gap:6px; background:var(--sk-head); padding:9px 12px; border-bottom:1px solid var(--sk-border); }
.certBuy .cert-chrome i{ width:10px; height:10px; border-radius:50%; }
.certBuy .cert-chrome i:nth-child(1){ background:#ff5f57; } .certBuy .cert-chrome i:nth-child(2){ background:#febc2e; } .certBuy .cert-chrome i:nth-child(3){ background:#28c840; }
.certBuy .cert-url{ display:flex; align-items:center; gap:8px; padding:11px 16px; }
.certBuy .cert-url svg{ width:15px; height:15px; flex-shrink:0; color:var(--sk-faint); }
.certBuy .cert-url.ok svg{ color:var(--sk-success); }
.certBuy .cert-url .https{ color:var(--sk-success); font-weight:700; font-family:Consolas,monospace; font-size:13px; }
.certBuy .cert-url .dm{ color:var(--sk-ink); font-family:Consolas,monospace; font-size:13px; word-break:break-all; }
.certBuy .cert-url .dm.ph{ color:var(--sk-faint); }
.certBuy .cert-url .ok-badge{ margin-left:auto; font-size:11px; font-weight:600; color:var(--sk-success); background:var(--sk-success-bg); padding:2px 9px; border-radius:9px; white-space:nowrap; }
/* B · 信任等级卡 DV/OV/EV */
.certBuy .cert-tiers{ display:flex; flex-wrap:wrap; gap:12px; }
.certBuy .cert-tier{ position:relative; display:flex; flex-direction:column; width:268px; padding:14px 16px 11px; border:1.5px solid var(--sk-border-3); border-radius:14px; background:var(--sk-card); cursor:pointer; transition:.18s; }
.certBuy .cert-tier .ct-tx b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.certBuy .cert-tier:hover{ border-color:var(--sk-brand); transform:translateY(-2px); box-shadow:var(--sk-sh-md); }
.certBuy .cert-tier.on{ border-color:var(--sk-brand) !important; background:var(--sk-brand-bg2); box-shadow:inset 0 0 0 1px var(--sk-brand); }
.certBuy .cert-tier.on::after{ content:'\2713'; position:absolute; right:0; bottom:0; width:18px; height:18px; line-height:18px; text-align:center; font-size:10px; color:#fff; background:var(--sk-brand); border-radius:9px 0 13px 0; }
.certBuy .cert-tier .ct-hd{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.certBuy .cert-tier .ct-shield{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--sk-brand-bg); color:var(--sk-brand); }
.certBuy .cert-tier.ov .ct-shield{ background:#e3f2fd; color:#1976d2; }
.certBuy .cert-tier.ev .ct-shield{ background:#fdf6e3; color:#b7791f; }
.certBuy .cert-tier .ct-shield svg{ width:18px; height:18px; }
.certBuy .cert-tier .ct-tx{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.certBuy .cert-tier .ct-tx b{ font-size:14px; color:var(--sk-ink); }
.certBuy .cert-tier.on .ct-tx b{ color:var(--sk-brand-d); }
.certBuy .cert-tier .ct-tx i{ font-style:normal; font-size:10.5px; color:var(--sk-mut); margin-top:2px; }
.certBuy .cert-tier .ct-li{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--sk-ink-2); padding:2.5px 0; }
.certBuy .cert-tier .ct-li::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--sk-faint); flex-shrink:0; }
/* 分组标题编号 */
.certBuy .cert-gnum{ display:inline-flex; width:22px; height:22px; border-radius:7px; background:var(--sk-brand-bg); color:var(--sk-brand-d); font-size:12px; font-weight:700; align-items:center; justify-content:center; margin-right:9px; vertical-align:-4px; }
/* C · 证书文书右卡 */
.wrap#wrapFooter .cert-band{ position:relative; padding:16px 20px 13px; background:linear-gradient(135deg,#4f46e5,#7c74ff); color:#fff; border-radius:18px 18px 0 0; overflow:hidden; }
.wrap#wrapFooter .cert-band .t{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:9px; }
.wrap#wrapFooter .cert-band .t svg{ width:18px; height:18px; }
.wrap#wrapFooter .cert-band .sn{ margin-top:5px; font-size:10px; font-family:Consolas,monospace; color:rgba(255,255,255,.72); letter-spacing:.1em; }
.wrap#wrapFooter .cert-band::after{ content:''; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.09); }
.wrap#wrapFooter .cert-seal{ position:absolute; right:16px; top:96px; width:60px; height:60px; border:2px solid rgba(232,85,77,.45); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(232,85,77,.55); font-size:9.5px; font-weight:700; transform:rotate(-14deg); letter-spacing:.1em; text-align:center; line-height:1.3; pointer-events:none; z-index:3; }
.wrap#wrapFooter .cert-safe{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:11px; color:var(--sk-mut); }
.wrap#wrapFooter .cert-safe svg{ width:12px; height:12px; color:var(--sk-success); }
.wrap#wrapFooter .cert-perf{ height:8px; background:radial-gradient(circle at 8px -3px, transparent 6px, var(--sk-card) 6.5px); background-size:16px 8px; margin-top:-8px; position:relative; z-index:2; }
.certBuy #wrapFooter .pf-r .pf-v{ font-weight:600; }
.certBuy #wrapFooter .pf-v.cert-mono{ font-family:Consolas,monospace; font-size:12px; }
.wrap#wrapFooter .cert-year{ align-items:center; }
.wrap#wrapFooter .cert-year select.pf-cycle{ width:130px; height:34px !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; box-shadow:none !important; font-size:13px; color:var(--sk-ink) !important; padding:0 28px 0 12px; cursor:pointer; appearance:none; -webkit-appearance:none; background:var(--sk-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px 14px; }
.wrap#wrapFooter .cert-year select.pf-cycle:hover,.wrap#wrapFooter .cert-year select.pf-cycle:focus{ border-color:var(--sk-brand) !important; outline:0; }
/* 游戏面板 · 右卡B霓虹电竞卡头 */
.wrap#wrapFooter .game-band{ position:relative; padding:15px 20px 12px; background:#171a2e; color:#fff; border-radius:18px 18px 0 0; overflow:hidden; }
.wrap#wrapFooter .game-band::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,#22d3ee,var(--sk-brand),#e879f9); }
.wrap#wrapFooter .game-band .t{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:9px; }
.wrap#wrapFooter .game-band .t i{ font-size:16px; color:#22d3ee; }
.wrap#wrapFooter .game-band .t .gt{ background:linear-gradient(90deg,#22d3ee,#e879f9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wrap#wrapFooter .game-band .sn{ margin-top:5px; font-size:10px; font-family:Consolas,monospace; color:rgba(255,255,255,.7); letter-spacing:.14em; }
.wrap#wrapFooter .game-band .sn .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#12b886; margin-right:6px; box-shadow:0 0 6px #12b886; vertical-align:1px; animation:sk-breathe 1.6s ease-in-out infinite; }
@keyframes sk-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.ptergame #wrapFooter .btn-danger.btn_buy{ background:linear-gradient(90deg,#06b6d4,#635bff) !important; border:0 !important; box-shadow:0 6px 18px rgba(34,211,238,.35) !important; }
.wrap#wrapFooter .game-safe{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:11px; color:var(--sk-mut); }
.wrap#wrapFooter .game-safe i{ color:var(--sk-warn); font-size:12px; }
/* L1 · 游戏封面卡 */
.ptergame .game-covers{ display:flex; flex-wrap:wrap; gap:12px; }
.ptergame .game-cover{ position:relative; width:186px; border:1.5px solid var(--sk-border-3); border-radius:14px; overflow:hidden; background:var(--sk-card); cursor:pointer; transition:.18s; }
.ptergame .game-cover:hover{ transform:translateY(-3px); box-shadow:var(--sk-sh-md); border-color:var(--sk-brand); }
.ptergame .game-cover.on{ border-color:var(--sk-brand); box-shadow:0 0 0 2px var(--sk-ring), var(--sk-sh-md); }
.ptergame .game-cover.on::after{ content:'\2713'; position:absolute; right:0; top:0; width:22px; height:22px; line-height:22px; text-align:center; color:#fff; background:var(--sk-brand); font-size:11px; border-radius:0 12px 0 10px; }
.ptergame .game-cover .gc-img{ height:86px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--sk-brand-bg),var(--sk-brand-bg2)); }
.ptergame .game-cover .gc-img img{ max-height:64px; max-width:80%; border-radius:8px; }
.ptergame .game-cover .gc-img i{ font-size:30px; color:var(--sk-brand-l); }
.ptergame .game-cover .gc-tx{ display:block; padding:9px 13px 10px; line-height:1.3; }
.ptergame .game-cover .gc-tx b{ display:block; font-size:13.5px; color:var(--sk-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ptergame .game-cover.on .gc-tx b{ color:var(--sk-brand-d); }
.ptergame .game-cover .gc-tx i{ font-style:normal; font-size:11px; color:var(--sk-mut); }
/* L2 · 背包资源格 */
.ptergame .game-slots{ display:flex; flex-wrap:wrap; gap:12px; }
.ptergame .game-slot{ width:150px; border:1.5px solid var(--sk-border-3); border-radius:13px; background:var(--sk-card); padding:12px 14px 10px; text-align:center; }
.ptergame .game-slot .ic{ width:38px; height:38px; margin:0 auto 6px; border-radius:10px; background:var(--sk-brand-bg); display:flex; align-items:center; justify-content:center; font-size:18px; }
.ptergame .game-slot .nm{ font-size:12px; color:var(--sk-mut); }
.ptergame .game-slot .ct{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; }
.ptergame .game-slot .ct a{ width:24px; height:24px; border:1px solid var(--sk-border-3); border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--sk-ink-2); cursor:pointer; font-weight:700; user-select:none; }
.ptergame .game-slot .ct a:hover{ border-color:var(--sk-brand); color:var(--sk-brand); }
.ptergame .game-slot .ct b{ font-size:16px; min-width:30px; color:var(--sk-ink); }
.ptergame .game-slot .mx{ margin-top:4px; font-size:10.5px; color:var(--sk-faint); }
/* L3 · 选择大区 */
.ptergame .game-srvs{ display:flex; flex-wrap:wrap; gap:12px; }
.ptergame .game-srv{ position:relative; width:200px; border:1.5px solid var(--sk-border-3); border-radius:13px; background:var(--sk-card); padding:11px 15px 9px; cursor:pointer; transition:.16s; }
.ptergame .game-srv:hover{ border-color:var(--sk-brand); }
.ptergame .game-srv.on{ border-color:var(--sk-brand); background:var(--sk-brand-bg2); box-shadow:inset 0 0 0 1px var(--sk-brand); }
.ptergame .game-srv.dis{ opacity:.55; cursor:not-allowed; }
.ptergame .game-srv .hd{ display:flex; align-items:center; justify-content:space-between; }
.ptergame .game-srv .hd b{ font-size:13.5px; color:var(--sk-ink); }
.ptergame .game-srv.on .hd b{ color:var(--sk-brand-d); }
.ptergame .game-srv .ping{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.ptergame .game-srv .ping i{ width:3.5px; border-radius:1px; background:var(--sk-success); }
.ptergame .game-srv .ping i:nth-child(1){ height:5px; } .ptergame .game-srv .ping i:nth-child(2){ height:8px; } .ptergame .game-srv .ping i:nth-child(3){ height:11px; } .ptergame .game-srv .ping i:nth-child(4){ height:14px; }
.ptergame .game-srv .ping.off i{ background:var(--sk-border-3); }
.ptergame .game-srv .st{ display:block; margin-top:4px; font-size:11px; }
.ptergame .game-srv .st .ok{ color:var(--sk-success); }
.ptergame .game-srv .st .full{ color:var(--sk-danger); }
/* L4 · 战力配置台 */
.ptergame .g4-steps{ display:flex; flex-wrap:wrap; gap:8px; max-width:560px; }
.ptergame .g4-s{ min-width:86px; flex:1; text-align:center; padding:9px 8px 7px; border:1.5px solid var(--sk-border-3); border-radius:11px; cursor:pointer; transition:.15s; background:var(--sk-card); }
.ptergame .g4-s:hover{ border-color:var(--sk-brand); }
.ptergame .g4-s.on{ border-color:var(--sk-brand); background:var(--sk-brand-bg2); box-shadow:inset 0 0 0 1px var(--sk-brand); }
.ptergame .g4-s.dis{ opacity:.45; cursor:not-allowed; }
.ptergame .g4-s b{ display:block; font-size:14px; color:var(--sk-ink); }
.ptergame .g4-s.on b{ color:var(--sk-brand-d); }
.ptergame .g4-s i{ font-style:normal; font-size:10px; color:#d9930d; letter-spacing:1px; font-weight:700; }
.ptergame .g4-power{ display:flex; align-items:center; gap:12px; max-width:560px; padding-top:12px; }
.ptergame .g4-power .bar{ flex:1; height:10px; border-radius:10px; background:var(--sk-head); overflow:hidden; }
.ptergame .g4-power .bar i{ display:block; height:100%; background:linear-gradient(90deg,#22d3ee,var(--sk-brand),var(--sk-brand-l)); border-radius:10px; transition:width .3s; }
.ptergame .g4-power b{ color:var(--sk-brand-d); font-size:15px; min-width:48px; }
/* 方案2 · 游戏类型/版本下拉卡精修（覆盖页内 btn-group-pack 内联样式） */
.ptergame .btn-group-pack .rule-item.gp-chip{ display:inline-flex !important; align-items:center; gap:10px; height:50px !important; min-width:190px; padding:0 14px !important; border-radius:12px !important; text-align:left !important; line-height:1.25 !important; white-space:nowrap; }
.ptergame .gp-chip .gp-ic{ height:26px !important; width:auto; margin:0 !important; border-radius:6px; background:#fff; flex-shrink:0; }
.ptergame .gp-chip .gp-tx{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.ptergame .gp-chip .gp-tx b{ font-size:13.5px; color:var(--sk-ink); font-weight:600; }
.ptergame .rule-item.gp-chip.active .gp-tx b{ color:var(--sk-brand-d); }
.ptergame .gp-chip .gp-tx i{ font-style:normal; font-size:11px !important; color:var(--sk-mut); display:flex; align-items:center; gap:4px; margin-top:1px; padding:0 !important; }
.ptergame .rule-item.gp-chip.active .gp-tx i{ color:var(--sk-brand) !important; }
.ptergame .gp-chip .gp-tx i .sel{ background:var(--sk-brand-bg); color:var(--sk-brand-d); padding:0 7px; border-radius:8px; line-height:16px; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.ptergame .gp-chip .gp-caret{ margin-left:auto; color:var(--sk-faint); font-size:10px; padding-left:8px; }
/* 标签旁 tooltip 触发图标 · 实心感叹号→空心 info（与全站注释图标统一） */
.ptergame .wrap-rule-name .icon-exclamation-sign{ display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-left:2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/13px 13px; }
.ptergame .wrap-rule-name .icon-exclamation-sign::before{ content:'' !important; }
.wrap#wrapFooter .pf-buyset .wrap-rule-body{ padding-left:0 !important; flex:1; min-width:0; }
.wrap#wrapFooter .pf-buyset select.pf-cycle{ width:100%; height:36px !important; border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important; box-shadow:none !important; font-size:13px; color:var(--sk-ink) !important; padding:0 30px 0 12px; cursor:pointer; appearance:none; -webkit-appearance:none; background:var(--sk-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px 15px !important; }
.wrap#wrapFooter .pf-buyset select.pf-cycle:hover,.wrap#wrapFooter .pf-buyset select.pf-cycle:focus{ border-color:var(--sk-brand) !important; outline:0; }
.wrap#wrapFooter .pf-buyset .rule-input:not(.input-box) .form-control{ width:100% !important; max-width:none !important; }
.wrap#wrapFooter .pf-buyset .rule-input.input-box{ width:100% !important; }
.wrap#wrapFooter .pf-buyset .input-box .form-control{ height:36px !important; }
.wrap#wrapFooter .pf-buyset .input-box .btn-updown .spinner-up,.wrap#wrapFooter .pf-buyset .input-box .btn-updown .spinner-down{ height:17px !important; line-height:17px !important; }
.wrap#wrapFooter .pf-buyset .rule-desc{ margin-top:6px !important; }
/* 购买时长自定义下拉：折扣做成红色标签、靠右显示（全购买页通用） */
.pf-cyclesel{ position:relative; width:100%; }
.pf-cyclesel-cur{ display:flex; align-items:center; gap:8px; height:38px; padding:0 34px 0 12px; border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card); color:var(--sk-ink); font-size:13px; cursor:pointer; position:relative; transition:border-color .15s; }
.pf-cyclesel-cur:hover,.pf-cyclesel.open .pf-cyclesel-cur{ border-color:var(--sk-brand); }
.pf-cyclesel-nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-cyclesel-caret{ position:absolute; right:13px; top:50%; width:7px; height:7px; border-right:1.5px solid var(--sk-mut); border-bottom:1.5px solid var(--sk-mut); transform:translateY(-70%) rotate(45deg); transition:transform .18s; pointer-events:none; }
.pf-cyclesel.open .pf-cyclesel-caret{ transform:translateY(-30%) rotate(225deg); }
.pf-cyclesel-tag{ flex-shrink:0; font-size:11px; font-weight:600; line-height:1; padding:3px 7px; border-radius:6px; color:#fff; background:var(--sk-danger,#e8554d); white-space:nowrap; }
.pf-cyclesel-list{ position:absolute; left:0; right:0; top:calc(100% + 6px); margin:0; padding:5px; list-style:none; background:var(--sk-card); border:1px solid var(--sk-border); border-radius:12px; box-shadow:var(--sk-sh-lg); z-index:40; max-height:260px; overflow-y:auto; }
.pf-cyclesel-list li{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--sk-ink-2); cursor:pointer; transition:background .12s; }
.pf-cyclesel-list li:hover{ background:var(--sk-brand-bg2,#f3f2ff); }
.pf-cyclesel-list li.active{ background:var(--sk-brand-bg,#eef0ff); color:var(--sk-brand-d); font-weight:600; }
/* 配置概要标题 = 弹窗触发（文字虚线下划线，hover 左侧弹出完整配置） */
.wrap#wrapFooter .wrap-heading.pf-more-wrap{ position:relative; height:auto !important; line-height:1.5 !important; }
.wrap#wrapFooter .wrap-heading .pf-more-btn{ font-size:15px !important; font-weight:700; color:var(--sk-ink) !important; border-bottom:1px dashed var(--sk-faint); padding-bottom:3px; cursor:default; }
.wrap#wrapFooter .wrap-heading .pf-more-btn::after{ content:none !important; }
.wrap#wrapFooter .wrap-heading .pf-hd-spec{ float:right; font-size:12px; font-weight:600; color:var(--sk-brand-d); background:var(--sk-brand-bg2); padding:2px 10px; border-radius:12px; line-height:1.6; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 「悬停标题可查看完整配置」提示：隐藏以压缩卡片高度（完整配置仍可悬停标题查看） */
.wrap#wrapFooter .pf-hd-tip{ display:none !important; position:relative; font-size:11.5px; font-weight:400; color:var(--sk-mut); margin-top:8px; padding-left:18px; clear:both; }
.wrap#wrapFooter .pf-hd-tip::before{ content:''; position:absolute; left:1px; top:2px; width:13px; height:13px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center/13px 13px; }
.wrap#wrapFooter .wrap-heading .pf-flyout{ top:12px; }
.wrap#wrapFooter .wrap-heading .pf-flyout::after{ top:10px; }
.wrap#wrapFooter .pf-divider{ height:1px; background:var(--sk-border); margin:14px 0; }
.wrap#wrapFooter .pf-dashed{ border-top:1px dashed var(--sk-border-3); margin:10px 0 6px; }
.wrap#wrapFooter .pf-cut{ color:var(--sk-success) !important; }
.wrap#wrapFooter .rule-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }
.wrap#wrapFooter .pf-total-lb{ font-size:13px; font-weight:600; color:var(--sk-ink-2); margin-right:auto; }
.purchase #wrapFooter .rule-price > .text-danger:not(.text-small){ font-size:24px !important; font-weight:800; }
.purchase #wrapFooter .rule-price .text-small{ font-size:12px !important; font-weight:400 !important; flex-basis:100%; text-align:right; }
.wrap#wrapFooter .wrap-coupon .form-control{ height:38px !important; border-radius:var(--sk-radius) !important; border-color:var(--sk-border-3) !important; color:var(--sk-ink-2); box-shadow:none !important; }
.wrap#wrapFooter .wrap-coupon .form-control:hover,.wrap#wrapFooter .wrap-coupon .form-control:focus{ border-color:var(--sk-brand) !important; }
.wrap#wrapFooter .btn_buy{ height:44px !important; line-height:44px !important; padding:0 !important; font-size:15px !important; font-weight:600; border-radius:var(--sk-radius) !important; box-shadow:0 6px 16px rgba(232,85,77,.25); }
/* 积分行 · 灰色小字（含感叹号图标弱化） */
.wrap#wrapFooter .wrap-amount .wrap-coupon{ font-size:12px; color:var(--sk-mut); }
.wrap#wrapFooter .wrap-amount .wrap-coupon label{ font-weight:600; color:var(--sk-ink-2); margin:0 1px; font-size:12px; }
.wrap#wrapFooter .wrap-amount .wrap-coupon .icon-exclamation-sign{ color:var(--sk-faint); font-size:12px; }
/* 代金券下拉 · 自定义细 chevron */
.wrap#wrapFooter .wrap-coupon select.form-control{ appearance:none; -webkit-appearance:none; padding-right:34px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:15px !important; background-color:var(--sk-card) !important; }
.wrap#wrapFooter .pf-more-wrap{ position:relative; margin:6px 0 2px; }
.wrap#wrapFooter .pf-more-btn{ display:inline-flex; align-items:center; gap:2px; font-size:12.5px; color:var(--sk-brand); cursor:pointer; user-select:none; }
.wrap#wrapFooter .pf-more-btn::after{ content:'\25be'; font-size:11px; line-height:1; margin-left:2px; }
.wrap#wrapFooter .pf-more-wrap:hover .pf-more-btn{ text-decoration:underline; }
.wrap#wrapFooter .pf-flyout{ visibility:hidden; opacity:0; transition:opacity .15s ease, visibility 0s linear .25s; position:absolute; right:calc(100% + 22px); top:-16px; width:290px; background:var(--sk-card); border:1px solid var(--sk-border); border-radius:14px; box-shadow:var(--sk-sh-lg); padding:14px 16px; z-index:30; }
.wrap#wrapFooter .pf-flyout::before{ content:''; position:absolute; right:-26px; top:0; width:26px; height:100%; }
.wrap#wrapFooter .pf-flyout::after{ content:''; position:absolute; right:-6px; top:20px; width:11px; height:11px; background:var(--sk-card); border-right:1px solid var(--sk-border); border-top:1px solid var(--sk-border); transform:rotate(45deg); }
.wrap#wrapFooter .pf-more-wrap:hover .pf-flyout,.wrap#wrapFooter .pf-flyout:hover{ visibility:visible; opacity:1; transition-delay:0s,0s; }
.wrap#wrapFooter .pf-flyout-hd{ font-size:13px; font-weight:600; color:var(--sk-ink); margin-bottom:8px; }
.wrap#wrapFooter .pf-fly-grp{ display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:600; color:var(--sk-mut); margin:18px 0 5px; }
.wrap#wrapFooter .pf-fly-grp::after{ content:''; flex:1; height:1px; background:var(--sk-border); }
.wrap#wrapFooter .pf-flyout-hd + .pf-fly-grp{ margin-top:4px; }
.wrap#wrapFooter .pf-flyout .pf-r{ padding:4px 0; justify-content:flex-start; gap:12px; }
.wrap#wrapFooter .pf-flyout .pf-k{ width:76px; flex-shrink:0; }
.wrap#wrapFooter .pf-flyout .pf-v{ text-align:left; }
/* 桌面：固定右侧、随视口跟随 */
@media (min-width:992px){
    .main.padder.purchase{ padding-right:376px !important; }
    .purchase .wrap{ margin-right:0 !important; }
    .wrap#wrapFooter{ position:fixed !important; top:72px; right:24px; left:auto !important; bottom:auto !important; width:328px !important; margin:0 !important; padding:0 !important; overflow:visible !important; box-shadow:var(--sk-sh-lg) !important;
        /* A方案：卡片过高（超出视口）时封顶，wrap-body 内部滚动；内容少时卡片贴合内容 */
        display:flex !important; flex-direction:column; max-height:calc(100vh - 96px);
        /* 压到顶栏之下，避免遮住 #header 的工单/财务下拉（顶栏 z-index:1030） */
        z-index:20 !important; }
    /* scroll_fixed 会把父div高度设成卡片高（旧底部跟随占位）→ 桌面右侧固定态强制清零，消除底部大空白 */
    .purchase div:has(> #wrapFooter){ height:0 !important; }
    .wrap#wrapFooter .wrap-heading{ padding:16px 18px 0 !important; margin:0 !important; flex-shrink:0; }
    /* wrap-body 吃掉剩余高度并内部滚动；min-height:0 允许其在 flex 下收缩。
       注意：overflow 只能放这里，别放 #wrapFooter 上——会裁掉 wrap-heading 的悬停浮层 pf-flyout */
    .wrap#wrapFooter .wrap-body{ padding:26px 18px 16px !important; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
    .wrap#wrapFooter .wrap-body::-webkit-scrollbar{ width:6px; }
    .wrap#wrapFooter .wrap-body::-webkit-scrollbar-thumb{ background:var(--sk-border-3); border-radius:6px; }
    .wrap#wrapFooter .wrap-body::-webkit-scrollbar-thumb:hover{ background:var(--sk-mut); }
}

/* ===== 云服务器详情弹窗 · 图一控制台风格：左侧竖排导航 + 右侧宽内容 ===== */
/* 加宽弹窗（原 900px → 1080px；窄屏自适应） */
.modal.fade .modal-large{ width:1080px; margin-left:-540px; }
@media(max-width:1120px){ .modal.fade .modal-large{ width:94vw; margin-left:-47vw; } }

/* 弹窗顶栏：标题左对齐（无背景框）+ 右侧刷新/关闭图标钮 */
.sk-winbar{ display:flex; align-items:center; gap:12px; padding:15px 18px; background:var(--sk-head); border-bottom:1px solid var(--sk-border); }
.sk-winbar-title{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:400; color:var(--sk-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-winbar-title b{ font-weight:400; }
.sk-winbar-title .sk-head-ic{ color:var(--sk-brand); width:18px; height:18px; font-size:16px; flex:0 0 auto; }
.sk-winbar-sn{ color:var(--sk-mut); font-weight:400; }
.sk-winbar-act{ flex:0 0 auto; display:flex; gap:8px; }

/* 弹窗整体固定高度：顶栏 + 左栏固定，右侧内容区独立滚动 */
#serverModalPjax{ display:flex; flex-direction:column; max-height:85vh; overflow:hidden; }
#serverModalPjax > .sk-winbar{ flex:0 0 auto; }
/* 两栏布局：占满顶栏以下全部高度 */
.kvm_detail.sk-modal-2col{ display:flex; padding:0 !important; flex:1 1 auto; min-height:0; }
.kvm_detail .sk-modal-side{ overflow-y:auto; }

/* 左侧导航栏 */
.kvm_detail .sk-modal-side{ width:156px; flex:0 0 156px; background:var(--sk-head); border-right:1px solid var(--sk-border); padding:14px 10px; }
.kvm_detail .sk-side-head{ display:flex; align-items:center; gap:8px; padding:4px 10px 14px; }
.kvm_detail .sk-side-head .sk-head-ic{ color:var(--sk-brand); font-size:17px; }
.kvm_detail .sk-side-title{ font-size:13px; }
.kvm_detail .sk-side-title b{ font-weight:600; }
.kvm_detail .sk-side-sn{ color:var(--sk-mut); font-weight:400; }
/* 竖排导航（覆盖横向 nav-tabs 样式） */
.kvm_detail .sk-side-nav{ border:0 !important; display:flex; flex-direction:column; gap:2px; float:none !important; margin:0 !important; }
.kvm_detail .sk-side-nav > li{ float:none !important; margin:0 !important; }
.kvm_detail .sk-side-nav > li > a{ display:flex !important; align-items:center; gap:9px; padding:9px 11px !important; margin:0 !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:var(--sk-ink-2) !important; font-size:13px; }
.kvm_detail .sk-side-nav > li > a:hover{ background:var(--sk-card) !important; color:var(--sk-ink) !important; border:0 !important; }
.kvm_detail .sk-side-nav > li.active > a,
.kvm_detail .sk-side-nav > li.active > a:hover,
.kvm_detail .sk-side-nav > li.active > a:focus{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; border:0 !important; font-weight:500; }
.kvm_detail .sk-side-nav > li > a i{ font-size:15px; width:16px; text-align:center; flex:0 0 auto; }
.kvm_detail .sk-side-nav > li > a b{ font-weight:inherit; }

/* 右侧主区 */
.kvm_detail .sk-modal-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.kvm_detail .sk-main-head{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 18px 0; }
.kvm_detail .sk-main-body{ padding:18px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.kvm_detail .sk-main-body::-webkit-scrollbar{ width:7px; }
.kvm_detail .sk-main-body::-webkit-scrollbar-thumb{ background:var(--sk-border-3); border-radius:6px; }
.kvm_detail .sk-main-body::-webkit-scrollbar-thumb:hover{ background:var(--sk-mut); }

/* 右上角低调 ghost 圆钮（刷新/关闭） */
.sk-winbar .sk-hbtn{ width:32px; height:32px; padding:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--sk-ink-2); background:var(--sk-card); border:1px solid var(--sk-border-3); transition:all .15s; cursor:pointer; text-decoration:none; }
.sk-winbar .sk-hbtn{ width:30px; height:30px; }
.sk-winbar .sk-hbtn i{ font-size:12.5px; margin:0; }
.sk-winbar .sk-hbtn:hover{ background:var(--sk-brand-bg); color:var(--sk-brand-d); border-color:var(--sk-brand-l); }
.sk-winbar .sk-hbtn.sk-hbtn-close:hover{ background:var(--sk-danger-bg); color:var(--sk-danger); border-color:transparent; }

/* 移动端：两栏塌成上下，导航横向滚动 */
@media(max-width:767px){
    /* 手机端弹窗满屏居中：撤销桌面的 -47vw 负边距（其 left:50% 锚点仅在 ≥768px 生效） */
    .modal.fade .modal-large{ width:auto; margin:10px; }
    /* 手机端弹窗整体滚动改用 overflow:visible，圆角失去裁剪；给顶栏补上顶部圆角 */
    #serverModalPjax > .modal-header,
    #serverModalPjax > .sk-winbar{ border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0; }
    .kvm_detail.sk-modal-2col{ flex-direction:column; min-height:0; }
    .kvm_detail .sk-modal-side{ width:auto; flex:none; border-right:0; border-bottom:1px solid var(--sk-border); padding:10px; }
    .kvm_detail .sk-side-head{ padding:4px 6px 10px; }
    .kvm_detail .sk-side-nav{ flex-direction:row; overflow-x:auto; gap:4px; -webkit-overflow-scrolling:touch; }
    .kvm_detail .sk-side-nav > li > a b{ white-space:nowrap; }
    /* 移动端整体滚动，取消桌面的固定高度/局部滚动 */
    #serverModalPjax{ max-height:none; overflow:visible; }
    .kvm_detail .sk-modal-main{ overflow:visible; }
    .kvm_detail .sk-main-body{ overflow-y:visible; }
    .kvm_detail .sk-modal-side{ overflow-y:visible; }
}

/* 实例卡：主机名 + 右上状态胶囊 + 操作排 + 资源指标（控制台风格） */
.kvm_detail .sk-inst-card{ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius-lg); background:var(--sk-card); padding:18px; margin-bottom:14px; }
.kvm_detail .sk-inst-head{ display:flex; align-items:flex-start; justify-content:flex-start; gap:12px; }
.kvm_detail .sk-inst-head > .sk-status-pill{ margin-left:auto; }
.kvm_detail .sk-inst-os{ flex:0 0 auto; align-self:center; display:flex; align-items:center; justify-content:center; }
.kvm_detail .sk-inst-os img{ width:36px; height:36px; object-fit:contain; }
.kvm_detail .sk-inst-os i{ font-size:32px; line-height:1; color:var(--sk-ink-2); }
.kvm_detail .sk-inst-title{ font-size:17px; font-weight:600; color:var(--sk-ink); line-height:1.3; word-break:break-all; }
.kvm_detail .sk-inst-sub{ font-size:12.5px; color:var(--sk-mut); margin-top:3px; word-break:break-all; }
/* 状态胶囊：圆点 + 文字，颜色随电源状态（开机绿 / 关机红 / 异常黄） */
.kvm_detail .sk-status-pill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:20px; font-size:12.5px; font-weight:500; background:var(--sk-head); color:var(--sk-mut); white-space:nowrap; }
.kvm_detail .sk-status-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.kvm_detail .sk-status-pill b{ font-size:12.5px !important; font-weight:500; color:inherit !important; margin:0; display:inline-flex; align-items:center; }
.kvm_detail .sk-status-pill b i{ display:none; }
.kvm_detail .sk-status-pill.sk-on{ background:var(--sk-success-bg); color:var(--sk-success); }
.kvm_detail .sk-status-pill.sk-off{ background:var(--sk-danger-bg); color:var(--sk-danger); }
.kvm_detail .sk-status-pill.sk-warn{ background:var(--sk-warn-bg); color:var(--sk-warn); }
/* 提示消息 */
.kvm_detail .sk-inst-msg{ margin-top:10px; font-size:13px; }
/* 操作按钮排 */
.kvm_detail .sk-inst-acts{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
/* 按钮排在实例卡内时（物理服务器）：与上方状态留间距 */
.kvm_detail .sk-inst-card > .sk-inst-acts{ margin:15px 0 0; }
.kvm_detail .sk-inst-acts .btn-group,
.kvm_detail .sk-inst-acts .btn{ margin:0 !important; vertical-align:middle; }
.kvm_detail .sk-inst-acts .m-r-mini{ margin-right:0 !important; }
.kvm_detail .sk-inst-acts .btn{ padding:7px 15px !important; border-radius:9px !important; font-weight:400 !important; }
/* 普通按钮（开机/关机/重启/PUSH）：文字次级灰、图标更淡灰、hover 加深 */
.kvm_detail .sk-inst-acts .btn-white{ color:var(--sk-ink) !important; border-color:var(--sk-border-3) !important; }
.kvm_detail .sk-inst-acts .btn-white i{ color:var(--sk-ink-2) !important; }
.kvm_detail .sk-inst-acts .btn-white:hover,
.kvm_detail .sk-inst-acts .btn-white:focus{ color:var(--sk-ink) !important; background:var(--sk-head) !important; border-color:var(--sk-border-3) !important; }
.kvm_detail .sk-inst-acts .btn-white:hover i{ color:var(--sk-ink-2) !important; }
.kvm_detail .sk-inst-acts .caret{ opacity:.5; }
.kvm_detail .sk-inst-acts .btn-info .caret{ border-top-color:var(--sk-brand-d); opacity:.9; }
/* 远程连接（主操作）：描边高亮，图标同品牌色 */
.kvm_detail .sk-inst-acts .btn-info{ background:var(--sk-brand-bg) !important; color:var(--sk-brand-d) !important; border:1px solid var(--sk-brand-l) !important; box-shadow:none !important; }
.kvm_detail .sk-inst-acts .btn-info i{ color:var(--sk-brand-d) !important; }
.kvm_detail .sk-inst-acts .btn-info:hover,
.kvm_detail .sk-inst-acts .btn-info:focus{ background:var(--sk-brand-bg2) !important; border-color:var(--sk-brand) !important; }

/* 资源指标卡：大数字（CPU/内存为实时使用率）+ 标签 + 进度条 */
.kvm_detail .sk-res-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 14px; }
.kvm_detail .sk-res{ background:var(--sk-head); border-radius:12px; padding:14px 16px; }
.kvm_detail .sk-res-pct{ display:block; font-size:23px; font-weight:600; color:var(--sk-ink); line-height:1.15; }
.kvm_detail .sk-res-pct.text-success{ color:var(--sk-brand) !important; }
.kvm_detail .sk-res-u{ font-size:14px; font-weight:400; color:var(--sk-ink-2); }
.kvm_detail .sk-res-k{ display:block; color:var(--sk-mut); font-size:12px; margin:5px 0 10px; }
.kvm_detail .sk-res-line{ height:4px; border-radius:3px; background:var(--sk-border); box-shadow:none; overflow:hidden; margin:0; }
.kvm_detail .sk-res-line .progress-bar{ height:100%; box-shadow:none; background:var(--sk-brand); transition:width .5s ease; }
.kvm_detail .sk-res-line .progress-bar.progress-bar-success{ background:var(--sk-brand); }
.kvm_detail .sk-res-line .progress-bar.progress-bar-warning{ background:var(--sk-warn); }
.kvm_detail .sk-res-line .progress-bar.progress-bar-danger{ background:var(--sk-danger); }
.kvm_detail .sk-res-line-static{ opacity:.55; }
.kvm_detail .sk-res-sub{ display:block; font-size:12px; font-weight:500; color:var(--sk-ink-2); line-height:1.1; letter-spacing:.2px; }
@media(max-width:640px){ .kvm_detail .sk-res-bar{ grid-template-columns:repeat(2,1fr); } }

/* 信息卡 / 付费卡：描边圆角卡 + 卡头操作区 */
.kvm_detail .sk-info-card{ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius-lg); overflow:hidden; margin-bottom:14px; box-shadow:none; background:var(--sk-card); }
.kvm_detail .sk-info-card > .list-group-item.heading{ display:flex; align-items:center; gap:10px; background:transparent; padding:13px 16px 11px; border:0; margin:0; }
/* 合并卡里的第二小节标题（付费信息）：加上分隔线区分 */
.kvm_detail .sk-info-card > .list-group-item.heading.sk-sub-head{ border-top:1px solid var(--sk-border-2); margin:6px 16px 0; padding:15px 0 11px; }
.kvm_detail .sk-info-card .heading b.text-black{ font-weight:600; font-size:13.5px; }
.kvm_detail .sk-info-card .heading b.text-black::before{ display:none; }
.kvm_detail .sk-head-ic2{ width:15px; height:15px; color:var(--sk-mut); margin-right:8px; vertical-align:-3px; flex:0 0 auto; }
.kvm_detail .sk-head-acts{ margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:4px 14px; font-size:12.5px; }
.kvm_detail .sk-head-acts a{ white-space:nowrap; }
.kvm_detail .sk-head-acts .sk-auto-renew{ margin:0; font-weight:400; color:var(--sk-ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.kvm_detail .sk-head-acts .sk-auto-renew input{ margin:0; vertical-align:middle; }
.kvm_detail .sk-head-acts .icon-lock{ color:var(--sk-brand); }

/* 属性网格（方案A）：标签在上、值在下，3 列，留白分隔 */
.kvm_detail .sk-kv{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 28px; padding:18px; background:transparent; }
.kvm_detail .sk-kv-i{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:0; background:transparent; border:0; }
.kvm_detail .sk-kv-full{ grid-column:1 / -1; flex-direction:row; align-items:baseline; gap:10px; }
/* 跨整行、标签在上内容在下（如用户备注） */
.kvm_detail .sk-kv-wide{ grid-column:1 / -1; }
.kvm_detail .sk-kv-wide .sk-v{ white-space:pre-wrap; line-height:1.6; }
.kvm_detail .sk-k{ color:var(--sk-mut); font-size:12px; flex:0 0 auto; white-space:nowrap; }
.kvm_detail .sk-v{ color:var(--sk-ink); font-size:14px; min-width:0; word-break:break-all; }
.kvm_detail .sk-kv-full .sk-v{ flex:0 1 auto; }
.kvm_detail .sk-acts{ flex:0 0 auto; margin-left:auto; white-space:nowrap; padding-left:12px; }
.kvm_detail .sk-acts a{ margin-left:12px; }
.kvm_detail .sk-acts a:first-child{ margin-left:0; }
@media(max-width:640px){
    .kvm_detail .sk-kv{ grid-template-columns:1fr 1fr; }
    .kvm_detail .sk-kv-full{ grid-column:1 / -1; }
}

/* ===== 图一冷浅蓝灰色系 + 降噪（减少加粗），更清爽 ===== */
/* 顶栏 / 左栏 / 指标卡：冷浅蓝灰底（暗色回退主题色） */
.sk-winbar,
.kvm_detail .sk-modal-side,
.kvm_detail .sk-res{ background:#f4f6fb; }
html[data-skin="dark"] .sk-winbar,
html[data-skin="dark"] .kvm_detail .sk-modal-side,
html[data-skin="dark"] .kvm_detail .sk-res{ background:var(--sk-head); }
/* 减少加粗：标题/数值用中等字重，键值正文不加粗 */
.kvm_detail .sk-inst-title{ font-weight:500; }
.kvm_detail .sk-res-pct{ font-weight:500; }
.kvm_detail .sk-info-card .heading b.text-black{ font-weight:500; }
.kvm_detail .sk-kv .sk-v,
.kvm_detail .sk-kv .sk-v b{ font-weight:400; }
.kvm_detail .sk-inst-card b{ font-weight:500; }

/* ===== 连接信息卡：现代 alert 风格（浅品牌底 + 等宽字体，突出登录凭证；置于信息卡上方） ===== */
/* 顺序：实例卡 → 连接卡 → 云服务器信息卡 → 付费卡（用 order 调，不改 HTML） */
.kvm_detail #detailForm{ display:flex; flex-direction:column; }
.kvm_detail #detailForm > *{ order:3; }
.kvm_detail #detailForm > .sk-inst-card{ order:1; }
.kvm_detail #detailForm > .sk-inst-acts{ order:2; }
.kvm_detail #detailForm > .sk-res-bar{ order:3; }
.kvm_detail #detailForm > .sk-conn-card{ order:4; }
.kvm_detail #detailForm > .sk-info-card:not(.sk-conn-card){ order:5; }
/* alert 外观：浅品牌底 + 品牌边框 + 图标 */
.kvm_detail .sk-conn-card{ background:var(--sk-brand-bg2); border:1px solid var(--sk-brand-bg); box-shadow:none; }
.kvm_detail .sk-conn-card .heading{ border:0 !important; }
.kvm_detail .sk-conn-card .heading b.text-black{ color:var(--sk-brand-d) !important; display:flex; align-items:center; }
.kvm_detail .sk-conn-card .heading b.text-black::before{ display:none; }
.kvm_detail .sk-conn-card .sk-conn-ic{ width:16px; height:16px; color:var(--sk-brand); margin-right:8px; flex:0 0 auto; }
.kvm_detail .sk-conn-card .sk-v{ color:var(--sk-ink); font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,'Courier New',monospace; letter-spacing:.02em; }
/* 紧凑：减小标题/内容内边距与行距 */
.kvm_detail .sk-conn-card .heading{ padding:11px 16px 3px !important; }
.kvm_detail .sk-conn-card .sk-kv{ row-gap:9px; }
/* 查看/隐藏/复制：统一灰色图标 + hover 加深 */
.kvm_detail .sk-conn-card .sk-eye,
.kvm_detail .sk-conn-card .icon-copy{ color:var(--sk-mut) !important; margin-left:8px; cursor:pointer; }
.kvm_detail .sk-conn-card .sk-eye:hover,
.kvm_detail .sk-conn-card .icon-copy:hover{ color:var(--sk-ink-2) !important; }
.kvm_detail .sk-conn-card .sk-eye-ic{ width:15px; height:15px; vertical-align:-3px; }
/* 用户备注标签旁的编辑图标 */
.kvm_detail .sk-remark-edit{ color:var(--sk-mut); margin-left:6px; cursor:pointer; }
.kvm_detail .sk-remark-edit:hover{ color:var(--sk-brand); }
.kvm_detail .sk-remark-edit i{ font-size:12px; }
/* 实例名后的备注图标（hover 显示备注、点击编辑） */
.kvm_detail .sk-name-remark{ display:inline-flex; align-items:center; color:var(--sk-mut); margin-left:8px; cursor:pointer; vertical-align:middle; }
.kvm_detail .sk-name-remark:hover{ color:var(--sk-brand); }
.kvm_detail .sk-name-remark.has-remark{ color:var(--sk-brand); }
.kvm_detail .sk-name-remark svg{ width:15px; height:15px; }

/* ===== 详情选项卡页面通用视觉增强（网络/硬盘/安全组/备份/任务/日志） ===== */
/* 顶部工具栏按钮间距 */
.kvm_detail .sk-main-body .btn.m-b{ margin-bottom:14px; }
/* 卡片 panel：描边圆角、无阴影 */
.kvm_detail .sk-main-body .panel{ border:1px solid var(--sk-border-2) !important; border-radius:var(--sk-radius-lg) !important; box-shadow:none !important; background:var(--sk-card); overflow:hidden; margin-bottom:14px; }
.kvm_detail .sk-main-body .panel > .panel-body{ padding:0; }
.kvm_detail .sk-main-body .panel > .panel-heading{ background:var(--sk-head) !important; border-bottom:1px solid var(--sk-border-2) !important; padding:11px 16px; font-weight:500; }
/* 表格：清爽表头 + 细分隔 + hover */
.kvm_detail .sk-main-body .table{ margin:0; }
.kvm_detail .sk-main-body .table > tbody > tr > td,
.kvm_detail .sk-main-body .table > thead > tr > th{ padding:11px 16px !important; border-color:var(--sk-border-2) !important; vertical-align:middle; }
.kvm_detail .sk-main-body .table > tbody > tr.active > td{ background:var(--sk-head) !important; color:var(--sk-mut) !important; font-weight:400; }
.kvm_detail .sk-main-body .table > tbody > tr:not(.active):hover > td{ background:var(--sk-card-2) !important; }
/* list-group（键值信息卡）：描边圆角，排除概览页自定义卡 */
.kvm_detail .sk-main-body .list-group:not(.sk-info-card){ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius-lg); overflow:hidden; box-shadow:none; margin-bottom:14px; }
.kvm_detail .sk-main-body .list-group:not(.sk-info-card) > .list-group-item{ border:0; border-bottom:1px solid var(--sk-border-2); padding:11px 16px; background:var(--sk-card); }
.kvm_detail .sk-main-body .list-group:not(.sk-info-card) > .list-group-item:last-child{ border-bottom:0; }
/* 分页：右对齐 + 上下边距 */
.kvm_detail .sk-main-body .pagination{ display:block !important; text-align:right; margin:16px 4px 6px !important; padding:0; }

/* ═══════════════════════════════════════════════════════════
   产品列表页（probill 版式）· 云服务器等产品列表共用
   这段原本在 skinv3.css，但那个文件由「会员中心模板」开关控制加载；
   列表页已不再走开关（直接替换旧版），样式必须无条件生效，故移到这里。
   颜色全部走 --sk-* 令牌，开关打开时自动跟随 v3 配色。
   ═══════════════════════════════════════════════════════════ */
#APPLIST.v3l{ padding:18px 20px; }

/* 产品页头：对齐和按钮高度已提到公共的 .main .page-head（见上），这里只留 v3 列表页特有的。
 * 末尾的 .sp 把页面级动作（刷新等）顶到同一行最右，不再单起一行 */
/* 原来页头和分段之间隔着一行统计（已去掉），这里补回间距 */
#APPLIST.v3l .page-head{ margin-bottom:10px; }
#APPLIST.v3l .page-head h4 > .sp{ flex:1; min-width:8px; }
#APPLIST.v3l .page-head h4 > .acts{ display:inline-flex; align-items:center; gap:8px; }
#APPLIST.v3l .page-head .acts .btn-white i{ color:var(--sk-mut); }

/* 状态分段：v3 设计稿的下划线式标签页（色点 + 文字 + 计数），激活态主色下划线。
 * 不用 probill 的大数字统计条 */
.v3l-seg{ display:flex; gap:2px; border-bottom:1px solid var(--sk-border); margin-bottom:14px; flex-wrap:wrap; }
.v3l-seg > a{ padding:9px 13px; font-size:12.5px; color:var(--sk-mut); border-bottom:2px solid transparent;
  display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; margin-bottom:-1px; }
.v3l-seg > a:hover{ color:var(--sk-ink-2); }
.v3l-seg > a i{ width:6px; height:6px; border-radius:50%; flex:none; display:block; opacity:.55; }
.v3l-seg > a b{ font-weight:600; color:var(--sk-ink-2);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3l-seg > a.on{ color:var(--sk-ink); border-bottom-color:var(--sk-brand); font-weight:600; }
.v3l-seg > a.on i{ opacity:1; }
.v3l-seg > a.on b{ color:var(--sk-brand); }

/* 次级切换：胶囊式二选一（PUSH 过户的「发送 / 接收」）。
   产品分类已经占了上面那排下划线 tab，方向再用同一种样式就分不出层级了 */
.v3l-way{ display:inline-flex; gap:2px; padding:3px; margin-bottom:14px;
  background:var(--sk-head); border:1px solid var(--sk-border); border-radius:var(--sk-radius-sm); }
.v3l-seg:has(+ .v3l-way){ margin-bottom:12px; }
.v3l-way > a{ display:inline-flex; align-items:center; gap:6px; padding:5px 14px;
  font-size:12.5px; color:var(--sk-mut); white-space:nowrap; cursor:pointer;
  border-radius:calc(var(--sk-radius-sm) - 1px); text-decoration:none !important;
  transition:background .15s,color .15s; }
.v3l-way > a:hover{ color:var(--sk-ink-2); }
.v3l-way > a.on{ background:var(--sk-card); color:var(--sk-ink); font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.05); }

/* 列表卡片：工具条 + 表格 + 分页 拼成一张。
 * 不能用 overflow:hidden 裁圆角——那会把检索框的字段下拉一起切掉，
 * 改成卡片不裁剪、由首尾子元素各自切圆角。 */
.v3l-card{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); overflow:visible; }
.v3l-card > .v3l-tool:first-child{ border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0; }
.v3l-card > :last-child{ border-radius:0 0 var(--sk-radius-lg) var(--sk-radius-lg); }
/* 工具条里的下拉要压在表格之上（DOM 在前，默认会被后面的表格盖住） */
.v3l-tool:has(.open){ position:relative; z-index:6; }

/* 工具条：左批量操作，右检索 */
.v3l-tool{ display:flex; align-items:center; gap:9px; padding:11px 14px;
  border-bottom:1px solid var(--sk-border); flex-wrap:wrap; }
.v3l-tool .sp{ flex:1; min-width:12px; }
/* BS3 给 checkbox 设了 margin:4px 0 0 且 vertical-align:baseline，会比旁边文字低一截 */
.v3l-tool .ckall{ display:inline-flex; align-items:center; }
.v3l-tool .ckall input{ margin:0 !important; vertical-align:middle; }
.v3l-tool .sel{ font-size:12.5px; color:var(--sk-ink-2); white-space:nowrap; display:inline-flex; align-items:center; }
.v3l-tool .sel b{ font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
/* 工具条上的小计：进账绿、出账红，和表格里的金额一个色口径 */
.v3l-tool .sel b.k-in{ color:var(--sk-success); }
.v3l-tool .sel b.k-out{ color:var(--sk-danger); }
.v3l-tool .dv{ width:1px; height:18px; background:var(--sk-border); flex:none; }
/* 工具条上的提醒 chip：本身就是一次检索的入口（待验证 / 临近到期），
   数字走等宽字体，和列表里的到期列观感一致 */
.v3l-chip{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--sk-radius-sm); font-size:12px; font-weight:500;
  text-decoration:none !important; transition:border-color .15s; }
.v3l-chip i{ font-size:12px; }
.v3l-chip b{ font-weight:600; font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3l-chip.k-warn{ background:var(--sk-warn-bg); color:var(--sk-warn) !important; }
.v3l-chip.k-warn:hover{ border-color:var(--sk-warn); }
.v3l-chip.k-danger{ background:var(--sk-danger-bg); color:var(--sk-danger) !important; }
.v3l-chip.k-danger:hover{ border-color:var(--sk-danger); }
/* 检索表单挪进工具条右侧：只清框架给的内外边距，display 交回 form-inline，
 * 否则检索控件会从横排变成各占一行（撑到 90px 高） */
.v3l-tool .v3l-search,
.v3d-pg-hd .v3l-search{ margin:0 !important; padding:0 !important; }

/* 检索框「单框 + 内部无边分段」：
 * skinpro 那套规则的作用域是 .panel .form-inline .input-group-search，
 * 而 v3 卡片没有 .panel class（有的话会连带覆盖表头等一堆样式），所以整套落空——
 * 表现就是三段各自圆角、各自 1px 边框、高度还不一致。这里在 v3 作用域重写一份。 */
.v3l-tool .v3l-search .input-group-search,
.v3d-pg-hd .v3l-search .input-group-search{
  display:inline-flex !important; align-items:stretch; height:30px; position:relative;
  margin:0 !important; padding:0 !important; overflow:visible; vertical-align:middle;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card);
  transition:border-color .15s,box-shadow .15s; }
.v3l-tool .v3l-search .input-group-search:focus-within,
.v3d-pg-hd .v3l-search .input-group-search:focus-within{ border-color:var(--sk-brand); box-shadow:0 0 0 3px var(--sk-ring); }
/* 内部三段：去掉各自的边框和圆角，靠外框统一描边 → 接缝处无圆角、边框只有 1px */
.v3l-tool .v3l-search .input-group-search > a.btn,
.v3d-pg-hd .v3l-search .input-group-search > a.btn,
.v3l-tool .v3l-search .input-group-search > .form-control,
.v3d-pg-hd .v3l-search .input-group-search > .form-control,
.v3l-tool .v3l-search .input-group-search > button,
.v3d-pg-hd .v3l-search .input-group-search > button{
  border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important;
  height:auto !important; margin:0 !important; align-self:stretch;
  display:inline-flex !important; align-items:center; }
.v3l-tool .v3l-search .input-group-search > a.btn,
.v3d-pg-hd .v3l-search .input-group-search > a.btn{ padding:0 6px 0 11px; color:var(--sk-ink-2) !important; white-space:nowrap; }
.v3l-tool .v3l-search .input-group-search > a.btn .caret,
.v3d-pg-hd .v3l-search .input-group-search > a.btn .caret{ margin-left:6px; color:var(--sk-faint); }
/* 下拉标签和输入框之间补一条细分隔线，替代原先各自的边框 */
.v3l-tool .v3l-search .input-group-search > .form-control,
.v3d-pg-hd .v3l-search .input-group-search > .form-control{ padding:0 11px; width:190px; min-width:130px;
  border-left:1px solid var(--sk-border-2) !important; }
.v3l-tool .v3l-search .input-group-search > button,
.v3d-pg-hd .v3l-search .input-group-search > button{ padding:0 12px; color:var(--sk-mut) !important; }
.v3l-tool .v3l-search .input-group-search > button:hover,
.v3d-pg-hd .v3l-search .input-group-search > button:hover{ color:var(--sk-brand) !important; }
/* 带字段名的检索项（域名列表的「注册时间 / 到期时间」这类 addon + 输入框）：
 * BS3 给 .input-group-addon 定了 width:1% —— 在它原本的 display:table 里那是「按内容收缩」的老写法，
 * 可外框被上面改成 inline-flex 之后，1% 变成了真的百分比宽度，标签被压到 20 来 px，
 * 文字整段溢出盖在输入框上，看着就像 placeholder。这里把宽度交还给内容，
 * 并且和其它分段一样剥掉自带的边框圆角底色——接缝只留输入框那条左边线。 */
.v3l-tool .v3l-search .input-group-search > .input-group-addon,
.v3d-pg-hd .v3l-search .input-group-search > .input-group-addon{
  width:auto !important; flex:none; align-self:stretch; white-space:nowrap;
  display:inline-flex !important; align-items:center;
  height:auto !important; margin:0 !important; padding:0 11px !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent !important;
  font-size:12px; line-height:normal; color:var(--sk-mut) !important; }
/* 单输入框的检索框（DDoS 页只有一个 IP 输入框，没有左侧下拉）：
   左边那条分隔线是给「下拉｜输入框」接缝用的，这里没有下拉就别画 */
.v3d-pg-hd .v3l-search .input-group-search > .form-control:first-child{ border-left:0 !important; }
/* 自动补全浮层绝对定位，别把外框撑高 */
.v3l-tool .v3l-search .input-group-search > .dropdown-input,
.v3d-pg-hd .v3l-search .input-group-search > .dropdown-input{
  position:absolute !important; top:calc(100% + 6px) !important; left:0 !important; right:auto !important;
  min-width:100%; margin:0 !important; z-index:1050; }

/* ── 工具条里的「多字段筛选」（模板管理这类页面）──
 * 这些页面没有 $search_config，用不上外壳自带的检索表单，字段是页面自己用 Vue 绑的，
 * 也就套不上上面 .input-group-search 那套单框结构 —— 裸的 select / input / button
 * 各按 BS3 默认走，高度不一、也不居中。这里统一到和检索框一样的 30px。
 * 右对齐靠 margin-left:auto：外壳在 tool block 之后还有一根 .sp 撑杆，
 * 页面里要是再加一根，空白会被两根五五分掉，检索区就停在中间了，所以这里把它压平。 */
.v3l-search-multi{ display:inline-flex !important; align-items:center; gap:6px; flex-wrap:wrap; }
/* 选择器要压过前面那条 .v3l-tool .v3l-search{margin:0!important}，否则 auto 被顶成 0、贴不了右 */
.v3l-tool .v3l-search.v3l-search-multi{ margin-left:auto !important; }
/* 直接不渲染，压平宽度还不够：它仍是 flex item，工具条的 gap 会在右边多留 9px */
.v3l-tool .v3l-search-multi ~ .sp{ display:none !important; }
.v3l-search-multi > .form-control,
.v3l-search-multi > .btn{ height:30px !important; min-height:30px; margin:0 !important;
  padding:0 10px !important; font-size:12.5px; line-height:normal; vertical-align:middle;
  border:1px solid var(--sk-border-3) !important; border-radius:var(--sk-radius) !important;
  background:var(--sk-card) !important; color:var(--sk-ink) !important; box-shadow:none !important; }
.v3l-search-multi > select.form-control{ width:106px; padding-right:4px !important; }
.v3l-search-multi > input.form-control{ width:132px; }
.v3l-search-multi > .form-control::placeholder{ color:var(--sk-faint); }
.v3l-search-multi > .form-control:focus{ border-color:var(--sk-brand) !important;
  box-shadow:0 0 0 3px var(--sk-ring) !important; }
.v3l-search-multi > .btn{ display:inline-flex; align-items:center; padding:0 12px !important;
  color:var(--sk-mut) !important; }
.v3l-search-multi > .btn:hover{ color:var(--sk-brand) !important; border-color:var(--sk-brand) !important; }
@media(max-width:768px){
  .v3l-search-multi{ margin-left:0 !important; }
  .v3l-search-multi > select.form-control,
  .v3l-search-multi > input.form-control{ width:auto; flex:1 1 110px; min-width:0; }
}

/* 检索项标签行 */
.v3l-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 14px;
  border-bottom:1px solid var(--sk-border-2); font-size:12px; }
.v3l-filter .lb{ color:var(--sk-mut); }
.v3l-filter > i{ color:var(--sk-mut); }

/* 行内小按钮（工具条 + 操作列共用）。工具条内高度与检索框对齐（都 30px） */
.v3l-tool .op,.v3l-ops .op{ height:30px; padding:0 10px; border:1px solid var(--sk-border-3); border-radius:var(--sk-radius-sm);
  font-size:12px; background:var(--sk-card); color:var(--sk-ink-2); display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; white-space:nowrap; }
.v3l-tool .op:hover,.v3l-ops .op:hover{ border-color:var(--sk-brand); color:var(--sk-brand); }
.v3l-tool .op i,.v3l-ops .op i{ font-size:12px; color:var(--sk-mut); }
.v3l-tool .op:hover i,.v3l-ops .op:hover i{ color:var(--sk-brand); }
.v3l-tool .op.pri,.v3l-ops .op.pri{ color:var(--sk-brand); border-color:#C4CBF2; background:var(--sk-brand-bg2); }
.v3l-tool .op.pri i,.v3l-ops .op.pri i{ color:var(--sk-brand); }
/* .op.pri 的底和边是写死的浅色（--sk-brand-bg2 没有深色档、#C4CBF2 更是死值），
   深色下「查看 / 解析设置」这类主操作会变成深表格里一块惨白。口径同 v3d-note.is-info */
html[data-skin="dark"] .v3l-tool .op.pri,
html[data-skin="dark"] .v3l-ops .op.pri{ background:var(--sk-head); border-color:var(--sk-border-3);
  /* --sk-brand（#635BFF）压在深底上只有 3.6 的对比度，字号又只有 12px，
     深色下统一换成亮一档的 --sk-brand-l */
  color:var(--sk-brand-l) !important; }
html[data-skin="dark"] .v3l-inst > a.sn,
html[data-skin="dark"] .v3l-res b,
html[data-skin="dark"] .v3l-res b a{ color:var(--sk-brand-l); }
.v3l-ops .op{ height:26px; padding:0 9px; }
/* 一条都没勾选时，批量按钮置灰不可点（由 bindSelCount 切换 .off） */
.v3l-tool .op.off,.v3l-tool .op.off:hover{ opacity:.45; cursor:not-allowed; pointer-events:none;
  border-color:var(--sk-border-3); color:var(--sk-mut); background:var(--sk-card); }
.v3l-tool .op.off i{ color:var(--sk-faint); }

/* 表格。窄屏横向滚动而不是把单元格挤到换行（和 v2 的 .table-responsive 行为一致）。
 * 但滚动容器会裁掉操作列的「···」下拉，所以展开时临时放开裁剪并抬高层级
 * （沿用 skinpro 里 .panel:has(.input-group-search:focus-within) 的同一套路） */
.v3l-wrap{ overflow-x:auto; }
.v3l-wrap:has(.btn-group.open){ overflow:visible; position:relative; z-index:5; }
/* 列多了以后（加了「续费金额」列）窄屏放不下：外层给横向滚动，
   否则超出的右侧列直接被卡片的 overflow 裁掉，既看不见也滚不到 */
.v3l-scroll{ overflow-x:auto; }
.v3l-tbl{ width:100%; min-width:1080px; margin:0 !important; border:0 !important; background:transparent; }
.v3l-tbl > thead > tr > th{ background:var(--sk-head); text-align:left; font-weight:500; font-size:12.5px;
  color:var(--sk-mut); letter-spacing:0; text-transform:none; padding:9px 14px !important; white-space:nowrap;
  border:0 !important; border-bottom:1px solid var(--sk-border) !important; font-family:inherit; }
.v3l-tbl > tbody > tr > td{ padding:12px 14px !important; vertical-align:middle;
  border:0 !important; border-bottom:1px solid var(--sk-border-2) !important; }
.v3l-tbl > tbody > tr:last-child > td{ border-bottom:0 !important; }
.v3l-tbl > tbody > tr:hover > td{ background:var(--sk-card-2); }
.v3l-tbl .ck{ width:34px; }
/* BS3 给 checkbox 设了 margin:4px 0 0，在单元格里会比同行内容矮一截；
   工具条那颗已经归零过，这里让表内的两颗（表头全选 + 行内）跟它一个口径 */
.v3l-tbl .ck input[type=checkbox]{ margin:0 !important; vertical-align:middle; }
/* 列少的列表（常用地址这种五六列的）：1080 的下限会把内容拉得稀稀拉拉，
   给一个窄档，窄屏照样横向滚 */
.v3l-tbl.is-narrow{ min-width:760px; }
/* 「这一列吃掉富余宽度」，其余列收到 min-content（和 .v3d-tbl 里同名的一条同义） */
.v3l-tbl .cw{ width:100%; }
.v3l-tbl .ac{ text-align:right; }
/* 金额列不给死宽度：.v3l-amt 已经 nowrap，交给表格按内容算，金额位数多了也不会折行 */
.v3l-tbl .ar{ text-align:right; white-space:nowrap; }
/* 通用：短值列不折行（咨询类型、产品类型这种两三个字的，列一窄就被拆成两行） */
.v3l-tbl th.nw,.v3l-tbl td.nw{ white-space:nowrap; }

/* 单元格内一律不换行，宽度不够时整表横向滚动 */
.v3l-tbl td .v3l-res b,.v3l-tbl td .v3l-res > span,
.v3l-tbl td .v3l-spec b,.v3l-tbl td .v3l-spec .tx > span,
.v3l-tbl td .v3l-ip b,.v3l-tbl td .v3l-ip > span,
.v3l-tbl td .v3l-exp b,.v3l-tbl td .v3l-exp .lf{ white-space:nowrap; }

/* 实例列（顺序同 v2）：第一行编号 → 详情弹窗；第二行别名 → 改名 popover。
 * 编号是弹窗主入口，必须一眼看出可点（v2 里就是 text-info 蓝字） */
.v3l-res b{ display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--sk-brand);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3l-res b a{ color:var(--sk-brand); cursor:pointer; }
.v3l-res b a:hover{ color:var(--sk-brand-d); text-decoration:underline; }
.v3l-res b .lk{ font-size:12px; color:var(--sk-danger); }
.v3l-res b u{ text-decoration:none; font-weight:400; font-size:12px; padding:1px 6px; border-radius:3px;
  color:#8A5B04; background:var(--sk-live-bg); font-family:var(--sk-font,inherit); }
/* 产品类型标识（云服务器 / 轻量应用服务器 / 游戏云） */
.v3l-res b em.ty{ font-style:normal; font-weight:400; font-size:12px; padding:1px 6px; border-radius:3px;
  color:var(--sk-mut); background:var(--sk-head); border:1px solid var(--sk-border-2);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; white-space:nowrap; }
/* 别名行 */
.v3l-res > span{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:12.5px; color:var(--sk-ink-2); }
.v3l-res > span .server_name{ color:var(--sk-ink); font-weight:500; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; }
.v3l-res > span .server_name i{ font-size:12px; color:var(--sk-faint); }
.v3l-res > span .server_name:hover,.v3l-res > span .server_name:hover i{ color:var(--sk-brand); }
.v3l-res > span em{ font-style:normal; font-size:12px; color:var(--sk-mut); }

/* 实例列的轻量版（域名 / 解析 / 免费产品）：第一行主标识，第二行挂 ID 或别名。
 * 这块之前漏了定义，两段就挤在同一行，跟上面 .v3l-res 那种两行结构对不上。
 * 主标识是链接才给品牌色（订单号是纯文本，标蓝会让人以为能点） */
.v3l-inst{ display:flex; flex-direction:column; align-items:flex-start; }
.v3l-inst > .sn{ display:inline-flex; align-items:center; gap:6px; max-width:100%; white-space:nowrap;
  font-size:13px; font-weight:600; color:var(--sk-ink); }
.v3l-inst > a.sn{ color:var(--sk-brand); cursor:pointer; }
.v3l-inst > a.sn:hover{ color:var(--sk-brand-d); text-decoration:underline; }
/* 主标识是用户自己填的长文本（工单标题这类）：.sn 本身 nowrap，
   不设上限的话一条长标题能把整列撑到上千像素，这里给个上限 + 省略号 */
.v3l-inst > .sn.is-cut{ display:block; max-width:360px; overflow:hidden; text-overflow:ellipsis; }
.v3l-inst .mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
/* 次行统一压成小一号的灰字；:not(.sn) 是必须的，否则会把上面那行 span.sn 一起吃掉 */
.v3l-inst > span:not(.sn),
.v3l-inst > a.server_name{ display:inline-flex; align-items:center; gap:5px; margin-top:3px; white-space:nowrap;
  font-size:12px; color:var(--sk-mut); }
.v3l-inst > a.server_name{ color:var(--sk-ink); font-weight:500; cursor:pointer; }
.v3l-inst > a.server_name:hover{ color:var(--sk-brand); }

/* 配置 / 地域：主行 + 次行 */
.v3l-spec b{ font-size:12.5px; font-weight:500; color:var(--sk-ink); display:flex; align-items:center; gap:5px; }
.v3l-spec b img,.v3l-spec b > i{ flex:none; font-size:13px; color:var(--sk-mut); }
/* 次要行：地域列直接挂在 .v3l-spec 下，配置列挂在 .tx 下；.v3l-os 是图标要排除，
 * 否则会被这条的 display:block 压掉 inline-flex */
.v3l-spec > span:not(.v3l-os),
.v3l-spec .tx > span{ display:block; margin-top:2px; font-size:12px; color:var(--sk-mut); }

/* IP 列 */
.v3l-ip b{ font-size:12.5px; font-weight:500; color:var(--sk-ink); display:block;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3l-ip > span{ display:flex; align-items:center; gap:6px; margin-top:2px; font-size:12px; color:var(--sk-mut);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3l-ip em{ font-style:normal; font-size:12px; padding:0 5px; border-radius:3px;
  background:var(--sk-border-2); color:var(--sk-ink-2); font-family:inherit; }
.v3l-ip em.nat{ background:var(--sk-danger-bg); color:var(--sk-danger); }

/* 到期列：日期 + 剩余进度条 + 剩余天数。
 * 宽度按「2026-08-31 17:11:10」这种完整时间给足，否则会折成两行 */
.v3l-exp{ width:152px; }
/* 只作用于到期日期那一行——直接子级选择器，别把 .amt 里的 <b> 也变成块级（会把「续费 100 元」拆成三行） */
.v3l-exp > b{ font-size:12.5px; font-weight:500; color:var(--sk-ink); display:block;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3l-exp .tr{ display:block; height:3px; border-radius:2px; background:var(--sk-border-3); margin-top:5px; overflow:hidden; }
.v3l-exp .tr i{ display:block; height:100%; border-radius:2px; background:var(--sk-success); }
.v3l-exp .tr i.k-urg{ background:var(--sk-danger); }
.v3l-exp .tr i.k-warn{ background:var(--sk-warn); }
.v3l-exp .lf{ display:flex; align-items:center; gap:5px; margin-top:3px; font-size:12px; color:var(--sk-mut); }
.v3l-exp .lf.k-urg{ color:var(--sk-danger); }
.v3l-exp .lf.k-warn{ color:var(--sk-warn); }
.v3l-exp .lf em{ font-style:normal; color:var(--sk-success); }
/* ── 解析记录页（domain / alidns / pdns 共用）──
   行内编辑时，被编辑那行的下面会插一整行填写说明：鼠标移到哪一格就展开哪一段。
   它是表格里的「附注」，不该跟数据行一个分量，所以底色压深一档、字号收小。 */
.v3d-tbl > tbody > tr > td.v3d-tip-row{ padding:10px 15px 12px 15px !important;
  background:var(--sk-head); font-size:12px; line-height:1.85; color:var(--sk-mut); }
.v3d-tip-row .text-danger{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
/* 主机记录输入框右边贴的「.example.com」：域名长了别把输入框挤没 */
.domain-input{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--sk-mut) !important; cursor:default; }

/* 域名列表的列头排序箭头：脚本按当前排序状态往 th 里追加一个 <a> */
.v3l-tbl th a.v3l-sort{ margin-left:5px; color:var(--sk-faint) !important; font-size:11px; cursor:pointer; }
.v3l-tbl th a.v3l-sort:hover,
.v3l-tbl th a.v3l-sort.icon-sort-up,
.v3l-tbl th a.v3l-sort.icon-sort-down{ color:var(--sk-brand) !important; }

/* ── 更多产品列表：订单配置列 ──
   这个模块的产品是后台自定义的，每种产品的字段完全不一样，
   列表只能按「标签 + 值」通用地铺，超过三条收成「等 N 项」。 */
/* 更多产品列表的自动续费开关：并在状态列下面，点一下切换 */
.fp-auto{ display:inline-flex; align-items:center; gap:4px; font-size:12px;
  color:var(--sk-mut); cursor:pointer; }
.fp-auto:hover{ color:var(--sk-brand); }
.fp-auto.on{ color:var(--sk-success); }

/* 更多产品列表：套餐列
   「订单配置」那列是 .cw（吃掉所有富余宽度），别的列就只剩 min-content，
   套餐名一长就被压成两三行（「10 万条包 / [短信套餐包] × 1」）。
   给它一个下限，整体装不下时交给外层 .v3l-scroll 横向滚动 */
.fp-tbl .fp-spec{ min-width:158px; }

.v3l-fields{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.v3l-fields .f{ display:flex; align-items:baseline; gap:6px; min-width:0; font-size:12px; }
.v3l-fields .f em{ flex:none; font-style:normal; color:var(--sk-mut); }
.v3l-fields .f b{ min-width:0; font-weight:500; color:var(--sk-ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 续费金额：独立一列，右对齐 + 数字等宽，纵向扫一眼就能比价 */
.v3l-amt{ white-space:nowrap; font-size:12px; color:var(--sk-mut); }
.v3l-amt b{ font-size:13px; font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3l-amt em{ margin-left:3px; font-style:normal; font-size:11.5px; color:var(--sk-faint); }
/* 金额下面挂一行附注（域名订单的「含隐私保护 20.00」）。
   em 那种行内后缀是「/ 月付」这类两三个字的，这条长得多，挤一行会把金额列撑宽 */
.v3l-amt .sub{ display:block; margin-top:2px; font-size:11.5px; font-weight:400; color:var(--sk-faint); }

/* 状态列的次要说明 */
.v3l-sub{ display:block; margin-top:3px; font-size:12px; color:var(--sk-mut); cursor:pointer; }
/* 状态徽章底下那行小字（待审核原因 / 自动续费 / 已停用…）：
   原来只给了个颜色，字号跟正文一样大、又允许换行，列一窄就被撕成两三行
   （PDNS / 阿里 DNS 的「审核通过后可配置解析」最明显）。
   压成 12px 的副标题行并禁止折行，装不下时交给外层 .v3l-scroll 横向滚动 */
.v3l-warn{ display:block; margin:3px 0 0 4px; font-size:12px; line-height:1.5;
  white-space:nowrap; color:var(--sk-warn); }
.v3l-warn > i{ margin-right:3px; }
.v3l-danger{ color:var(--sk-danger); }
.v3l-success{ color:var(--sk-success); }

/* 操作列 */
.v3l-ops{ display:flex; gap:4px; justify-content:flex-end; align-items:center; }

/* 分页条：卡片内最后一栏 */
.v3l-pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px solid var(--sk-border-2); background:var(--sk-head); }
.v3l-pager .lb{ font-size:12px; color:var(--sk-mut); }
.v3l-pager .pagination{ margin:0 !important; }

/* ── 列表空态：插画 + 主标题 + 说明 + 行动，全站产品列表共用 ──
   插画走 mask 上色（色值取 --sk-faint），明暗模式自动跟随，不用备两套图；
   和 el-empty 一样全站只用这一张图，靠文案区分场景（无数据 / 检索无果 / 状态页签为空）。
   不支持 mask 的浏览器直接不画图——底色块会露成一个实心方块，宁可只留文字 */
.v3l-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:54px 20px 58px; text-align:center; }
.v3l-empty .ico{ display:none; width:96px; height:84px; margin-bottom:18px; flex:none; }
@supports (mask-image:url("#m")) or (-webkit-mask-image:url("#m")){
  .v3l-empty .ico{ display:block; background:var(--sk-faint); opacity:.8;
    -webkit-mask:center/contain no-repeat var(--sk-emp); mask:center/contain no-repeat var(--sk-emp); }
}
.v3l-empty b{ display:block; font-size:15px; font-weight:600; color:var(--sk-ink); line-height:1.5; }
.v3l-empty p{ margin:7px 0 0; max-width:430px; font-size:12.5px; color:var(--sk-mut); line-height:1.75; }
.v3l-empty .acts{ display:flex; align-items:center; gap:8px; margin-top:20px; flex-wrap:wrap; justify-content:center; }
.v3l-empty .acts .btn{ height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 16px; }
/* 表格内的空态：单元格自带的居中/内边距会跟 flex 打架，统一交给 .v3l-empty */
td > .v3l-empty{ margin:0 auto; }
:root{
  --sk-emp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 70'%3E%3Cellipse cx='40' cy='63' rx='33' ry='6' fill='%23000' fill-opacity='.14'/%3E%3Cpath d='M6 28l9-22a3 3 0 0 1 3-2h44a3 3 0 0 1 3 2l9 22H54l-4 8H30l-4-8z' fill='%23000' fill-opacity='.2'/%3E%3Cpath d='M6 28h20l4 8h20l4-8h20v26a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4z' fill='%23000' fill-opacity='.36'/%3E%3C/svg%3E");
}

@media(max-width:768px){
  .v3l-empty{ padding:40px 16px 44px; }
  #APPLIST.v3l{ padding:14px; }
  .v3l-seg > a{ padding:9px 10px; }
}

/* 配置列：系统图标独占左栏，两行文字在右栏统一左对齐 */
/* 系统图标跟右侧两行文字整体垂直居中（图标只有一行高，顶对齐会偏上） */
.v3l-spec.os-row{ display:flex; align-items:center; gap:9px; }
.v3l-spec.os-row > .tx{ display:block; min-width:0; }
.v3l-os{ display:inline-flex; align-items:center; justify-content:center;
  width:22px; flex:none; cursor:default; }
.v3l-os img{ max-width:20px; max-height:20px; }
.v3l-os i{ font-size:18px; color:var(--sk-ink-2); }
.v3l-os em{ font-style:normal; color:var(--sk-faint); }

/* ═══════════════════════════════════════════════════════════
   云服务器详情页（原弹窗改独立页面）
   版式照 probill：整宽页头卡（面包屑/标题+主动作/关键信息条/tabs）
                  + 两栏（左内容 / 右快捷操作·远程连接·计费）
   骨架在 server/layouts/server_detail_page.html
   ═══════════════════════════════════════════════════════════ */
#SERVER_DETAIL.v3d{ padding:18px 20px; }
.v3d-body{ min-height:200px; }
.v3d-body > .sk-main-body{ padding:0 !important; }

/* ── 整页外框：上半白底（页头），tabs 以下灰底（内容区），卡片浮在灰底上 ── */
.v3d-shell{ background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-radius-lg); overflow:hidden; }
/* 页头 tabs 里的下拉要溢出到卡外面，shell 的 overflow:hidden（用来裁圆角）会把它切掉。
   只在下拉展开的那一刻放开，平时仍然裁切，跟检索框那处用的是同一招 */
.v3d-shell:has(.v3d-tabs .btn-group.open){ overflow:visible; }
.v3d-tabs .btn-group{ position:relative; }
.v3d-tabs .btn-group > .dropdown-menu{ z-index:1050; margin-top:0; }
.v3d-body-bg{ background:var(--sk-page); padding:14px; }

/* ── 整宽页头（外框的上半部分，本身不再画边框） ── */
.v3d-hd-card{ background:var(--sk-card); padding:14px 18px 0; }

/* 面包屑行：右端挂「刷新 / 返回列表」两个轻链接 */
.v3d-hd-card .crumb{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sk-mut); margin-bottom:9px; }
.v3d-hd-card .crumb a{ color:var(--sk-mut); }
.v3d-hd-card .crumb a:hover{ color:var(--sk-brand); }
.v3d-hd-card .crumb > i{ font-size:12px; color:var(--sk-faint); }
.v3d-hd-card .crumb > span{ color:var(--sk-ink-2); }
.v3d-hd-card .crumb .sp{ flex:1; min-width:8px; }
.v3d-hd-card .crumb .lk{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.v3d-hd-card .crumb .lk i{ font-size:12px; color:var(--sk-faint); }
.v3d-hd-card .crumb .lk:hover i{ color:var(--sk-brand); }

/* 标题行：名称 + 编号牌 + 状态徽章 …… 右端主动作 */
.v3d-hd-card .ttl{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.v3d-hd-card .ttl h1{ margin:0; font-size:19px; font-weight:600; letter-spacing:-.02em;
  color:var(--sk-ink); word-break:break-all; }
/* 标题前的产品图标：直接复用左侧导航那一个（$main.btn_icon，iconfont 或 FA 的
   class），不另做一套。尺寸对齐 h1 的 19px，颜色压一档，是标识不是强调 */
.v3d-hd-card .ttl > .v3d-ttl-ico{ flex:none; font-size:19px; line-height:1; color:var(--sk-ink-2); }
.v3d-hd-card .ttl .sn{ font-size:12px; color:var(--sk-mut); padding:2px 7px;
  border:1px solid var(--sk-border); border-radius:var(--sk-radius-sm);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-hd-card .ttl .sp{ flex:1; min-width:12px; }
/* 页头标题行的电源状态：整页最该一眼看到的信息，通用 .v3-b 那身白底细描边在这里太轻，
   关机的浅灰更是几乎看不见。换成实心底 + 加粗胶囊，开机绿、关机红、异常黄，
   开机时色点再呼吸一下。右侧栏那颗（dossier）不动，保持原来的轻量样式。 */
.v3d-hd-card .ttl .js-power-b{ height:24px; padding:0 11px; border-radius:999px; border-color:transparent;
  font-size:12.5px; font-weight:600; }
.v3d-hd-card .ttl .js-power-b i{ width:7px; height:7px; }
.v3d-hd-card .ttl .js-power-b.ok{ background:var(--sk-success-bg); color:var(--sk-success); }
.v3d-hd-card .ttl .js-power-b.ok i{ background:var(--sk-success); animation:sk-pw-blink 1.4s ease-in-out infinite; }
.v3d-hd-card .ttl .js-power-b.d{ background:var(--sk-danger-bg); color:var(--sk-danger); }
.v3d-hd-card .ttl .js-power-b.d i{ background:var(--sk-danger); }
/* m 是「未知 / 已删除」这一档，不是关机（关机走 .d 红，见 blocks/power_badge.html）。
   这档本就不该抢眼，只跟着放大，底色沿用 .v3-b 默认的白底细描边 */
.v3d-hd-card .ttl .js-power-b.m{ border-color:var(--sk-border); }
.v3d-hd-card .ttl .js-power-b.w{ background:var(--sk-warn-bg); color:var(--sk-warn); }
.v3d-hd-card .ttl .js-power-b.w i{ background:var(--sk-warn); }
@keyframes sk-pw-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.kvm_detail .v3d-hd-card .ttl .sk-name-remark{ margin-left:-2px; }

/* 标题行右端的主动作：横排小按钮 */
.v3d-acts{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.v3d-acts > .btn,.v3d-acts > .btn-group{ margin:0 !important; }
.v3d-acts .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:30px; padding:0 11px !important; margin:0 !important;
  font-size:12px; white-space:nowrap; }
.v3d-acts .btn svg{ width:13px; height:13px; flex:none; }
.v3d-acts .btn i{ flex:none; }
.v3d-acts .btn .caret{ margin-left:1px; opacity:.55; }

/* ── 关键信息条：页头里的一行，细线分隔。
   每格按内容自适应宽度（不是等分），值不加粗——版式照 probill ── */
/* nowrap：flex 容器一旦允许换行就会「先换行再收缩」，最后一格总被挤到第二行；
   改成不换行，宽度不够时各格自己收缩、长值走省略号。窄屏再放开换行 */
.v3d-key{ display:flex; flex-wrap:nowrap; margin:14px 0 0;
  border-top:1px solid var(--sk-border-2); }
@media(max-width:900px){ .v3d-key{ flex-wrap:wrap; } }
.v3d-key .k{ flex:0 1 auto; min-width:0; padding:11px 20px 11px 0; }
.v3d-key .k + .k{ padding-left:20px; border-left:1px solid var(--sk-border-2); }
.v3d-key .k .t{ display:block; font-size:12px; color:var(--sk-mut); margin-bottom:4px; white-space:nowrap; }
/* 单行省略：系统名之类的长值不许把整条挤到换行（完整内容挂在 title 上） */
.v3d-key .k b{ display:block; font-size:13px; font-weight:400; color:var(--sk-ink); line-height:1.45;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v3d-key .k b.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-variant-numeric:tabular-nums; }

/* ── tabs：下划线式，压在页头卡底边上 ── */
/* 不要 overflow-x:auto——那会在 tabs 行右侧挂一条滚动条；标签多了直接换行 */
.v3d-tabs{ display:flex; gap:2px; margin:0 -18px; padding:0 18px; flex-wrap:wrap;
  border-top:1px solid var(--sk-border-2); }
.v3d-tabs > a{ display:flex; align-items:center; gap:6px; padding:10px 12px; white-space:nowrap;
  font-size:13px; color:var(--sk-mut); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.v3d-tabs > a:hover{ color:var(--sk-ink-2); }
.v3d-tabs > a i{ font-size:13px; }
.v3d-tabs > a.on{ color:var(--sk-ink); border-bottom-color:var(--sk-brand); font-weight:600; }
.v3d-tabs > a.on i{ color:var(--sk-brand); }
/* 二级 tabs：面板类产品（虚拟主机）的菜单有三层，第三层在页头再铺一行，
   做成灰底胶囊，跟一级的下划线式区分开，免得两行看着像同级 */
.v3d-subtabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 -18px; padding:9px 18px;
  border-top:1px solid var(--sk-border-2); background:var(--sk-head); }
.v3d-subtabs > a{ display:inline-flex; align-items:center; height:26px; padding:0 11px; white-space:nowrap;
  border-radius:999px; font-size:12.5px; color:var(--sk-ink-2); cursor:pointer; }
.v3d-subtabs > a:hover{ background:var(--sk-card); color:var(--sk-ink); }
.v3d-subtabs > a.on{ background:var(--sk-brand); color:#fff; font-weight:500; }
/* 卡内表单区：默认文档 / 伪静态 / 防盗链这些功能页共用 */
.v3d-form-row{ margin-bottom:12px; }
.v3d-form-row:last-child{ margin-bottom:0; }
.v3d-form-row > .form-control{ width:100%; max-width:620px; }
/* 只放一个下拉的表单（PHP 版本这类），620px 太空，收窄一档 */
.v3d-form-row.is-narrow > .form-control{ max-width:260px; }
/* 字段标题 + 一排单选/复选（SSL 的验证方式、证书域名） */
.v3d-form-row > .v3d-fld-lb{ display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:400; color:var(--sk-ink-2); }
.v3d-radio{ display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  margin:0 16px 6px 0 !important; font-size:12.5px; font-weight:400; color:var(--sk-ink-2); }
.v3d-radio input{ margin:0 !important; }
.v3d-radio .text-muted{ font-size:12px; }
/* 并排两个大文本域（SSL 的 KEY / 证书）*/
.v3d-2fld{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.v3d-2fld > .f > label{ display:block; margin-bottom:6px;
  font-size:12.5px; font-weight:400; color:var(--sk-ink-2); }
.v3d-2fld > .f > .form-control{ width:100%; max-width:none; font-size:12px; line-height:1.6; }
@media(max-width:900px){ .v3d-2fld{ grid-template-columns:1fr; } }
.v3d-form-row > .form-control.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-size:12.5px; }
.v3d-form-ft{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:12px; margin-top:12px; border-top:1px solid var(--sk-border-2); }
.v3d-form-ft label{ margin:0; font-weight:400; font-size:12.5px; color:var(--sk-ink-2); cursor:pointer; }
.v3d-form-ft label input{ margin-right:4px; vertical-align:-1px; }
/* 一排互斥选项（续费周期、套餐档位这类三五个选项）：比原生 select 好扫一眼，
 * 也比 BS3 的 btn-group 轻。选中态只描边不填色——填成实心会比下面的「需支付」还抢眼 */
.v3d-opts{ display:flex; flex-wrap:wrap; gap:8px; }
/* 续费时长这类要跟着表单提交的，药丸本体得是 <label><input type=radio>，
   选中状态由 BS3 的 data-toggle="buttons" 打在 label 上（.active），
   所以 a.on 和 label.active 两套状态类都要认 */
.v3d-opts > a,
.v3d-opts > label{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 15px; white-space:nowrap; cursor:pointer;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card);
  font-size:12.5px; color:var(--sk-ink-2);
  transition:border-color .15s,color .15s,background .15s; }
.v3d-opts > label{ margin:0; font-weight:400; position:relative; }
.v3d-opts > a{ position:relative; }
.v3d-opts > a:hover,
.v3d-opts > label:hover{ border-color:var(--sk-brand); color:var(--sk-brand); }
.v3d-opts > a.on,
.v3d-opts > label.active{ border-color:var(--sk-brand); background:var(--sk-brand-bg2);
  color:var(--sk-brand) !important; font-weight:600; }
/* 单选框只负责提交值，视觉全交给 label；不能 display:none，否则表单取不到 */
.v3d-opts > label > input[type=radio]{ position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
/* 旧版在药丸里塞了个 icon-ok 当选中标记，现在整块变色就够了 */
.v3d-opts > label > i.icon-ok{ display:none; }
.v3d-opts > a .px,
.v3d-opts > label .px{ font-size:12px; color:var(--sk-mut); font-variant-numeric:tabular-nums; }
.v3d-opts > a.on .px,
.v3d-opts > label.active .px{ color:var(--sk-brand); }
/* 折扣角标：这一档比原价便宜多少，是让人选长周期的唯一理由，得看得见 */
.v3d-opts .dc{ font-size:11px; font-weight:600; line-height:1; padding:2px 5px; border-radius:5px;
  background:var(--sk-danger-bg); color:var(--sk-danger); font-variant-numeric:tabular-nums; }

/* 表单底栏：左边算钱、右边按钮，中间用 .sp 撑开 */
.v3d-form-ft .sp{ flex:1; min-width:8px; }
/* BS3 给 a.btn 和 button.btn 的内边距差 1px（8px vs 9px），并排放就一高一低（38/40）。
   底栏按钮统一钉死高度，字号也从 BS3 默认的 14px 收回 v3 的档位 */
.v3d-form-ft .btn{ height:34px; min-height:34px; padding:0 16px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13px; line-height:1; }
.v3d-form-ft .pay{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--sk-mut); }
.v3d-form-ft .pay b{ font-weight:600; color:var(--sk-ink); }
.v3d-form-ft .pay s{ color:var(--sk-faint); }
/* 实付金额：这一屏唯一要一眼看到的数字 */
.v3d-form-ft .pay .big{ margin:0 1px; font-size:19px; font-weight:700; color:var(--sk-danger);
  font-variant-numeric:tabular-nums; }
/* 页头里内联的下拉（伪静态选规则） */
.v3d-pg-hd .v3d-form-inline{ display:inline-block; }
.v3d-pg-hd .v3d-form-inline .form-control{ height:30px; padding:0 10px; font-size:12.5px; }
/* 表单型功能页的输入框在 kv 网格里要占满格 */
.v3d-kv2 .v > .form-control{ width:100%; max-width:320px; height:30px; }

/* 虚拟主机概览的「功能入口」：面板菜单平铺成几组，省得每次去顶部下拉里找 */
.vh-entry{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.vh-entry .grp{ border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); overflow:hidden; }
.vh-entry .grp .hd{ display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--sk-head);
  border-bottom:1px solid var(--sk-border-2); font-size:12.5px; font-weight:600; color:var(--sk-ink); }
.vh-entry .grp .hd i{ color:var(--sk-brand); font-size:13px; }
.vh-entry .grp .lk{ display:flex; flex-direction:column; padding:4px 0; }
.vh-entry .grp .lk > a{ padding:7px 12px; font-size:12.5px; color:var(--sk-ink-2); cursor:pointer; }
.vh-entry .grp .lk > a:hover{ background:var(--sk-bg-2); color:var(--sk-brand); }
/* 卡头里的实时状态占位：load_status() 会往里塞 <b class="text-xxx">，
   这里只负责压住字号，别让面板返回的 22px 大字撑破卡头 */
.v3d-panel-hd .v3d-live-slot b{ font-size:12.5px !important; font-weight:600; }
.v3d-panel-hd .v3d-live-slot i{ margin-right:3px; }
/* 一级 tabs 里带下拉的那几项（面板菜单有子项时） */
.v3d-tabs > .btn-group > a.dropdown-toggle{ display:flex; align-items:center; gap:6px; padding:10px 12px;
  white-space:nowrap; font-size:13px; color:var(--sk-mut); border-bottom:2px solid transparent;
  margin-bottom:-1px; cursor:pointer; }
.v3d-tabs > .btn-group > a.dropdown-toggle:hover{ color:var(--sk-ink-2); }
.v3d-tabs > .btn-group > a.dropdown-toggle.on{ color:var(--sk-ink); border-bottom-color:var(--sk-brand); font-weight:600; }
.v3d-tabs > .btn-group > a.dropdown-toggle.on i{ color:var(--sk-brand); }
.v3d-tabs > .btn-group > a.dropdown-toggle .caret{ margin-left:2px; color:var(--sk-faint); }

/* ── 两栏：左内容 + 右卡片栈（各自独立卡，不再是通栏档案帧） ── */
.v3d-2col{ display:flex; align-items:flex-start; gap:14px; }
.v3d-main{ flex:1; min-width:0; }
/* 选项卡内页（网络/硬盘/安全组/任务/日志）：内容统一套一个大背景卡，
   里面各页原有的 .panel 去壳，避免卡中卡。
   卡本身不留内边距——改造过的页面靠分区块自己通栏；老页面的 .panel 补回内边距 */
.v3d-main-card{ background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-radius-lg); overflow:hidden; }
.v3d-main-card > .panel,
.v3d-main-card > #NET_VUE > .v3d-pg-empty,
.v3d-main-card > .v3d-pg-empty{ padding:16px; }

/* ── 卡内页头工具条：标题 + 汇总 + 右侧动作 ── */
.v3d-pg-hd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 15px; border-bottom:1px solid var(--sk-border-2); }
.v3d-pg-hd h3{ margin:0; font-size:13.5px; font-weight:600; color:var(--sk-ink); }
.v3d-pg-hd .sub{ font-size:12px; color:var(--sk-mut); }
.v3d-pg-hd .sp{ flex:1; min-width:8px; }
.v3d-pg-hd .btn{ margin:0 !important; }
.v3d-pg-hd .v3m-seg{ margin-left:4px; }
.v3d-pg-hd .v3m-seg .btn i{ margin-right:4px; font-size:12px; }
/* 卡内顶部提示条（防火墙未开启等） */
.v3d-pg-tip{ padding:9px 15px; border-bottom:1px solid var(--sk-border-2);
  background:var(--sk-head); font-size:12px; color:var(--sk-ink-2); line-height:1.7; }
.v3d-pg-tip i{ margin-right:5px; color:var(--sk-faint); }
.v3d-pg-tip.is-danger{ background:var(--sk-danger-bg); color:#A83232; }
.v3d-pg-tip.is-danger i{ color:var(--sk-danger); }
/* 成功态提示条（SSL 已部署那条横幅） */
.v3d-pg-tip.is-ok{ background:var(--sk-success-bg); color:var(--sk-ink-2); }
.v3d-pg-tip.is-ok i{ color:var(--sk-success); }
.v3d-pg-tip.is-ok b{ color:var(--sk-ink); font-weight:600; }
/* 卡内底部提示（如宝塔面板推荐） */
.v3d-pg-ft{ padding:10px 15px; border-top:1px solid var(--sk-border-2); background:var(--sk-head);
  font-size:12px; color:var(--sk-mut); }
.v3d-pg-ft i{ margin-right:4px; color:var(--sk-faint); }
/* 空态 / 加载态 */
.v3d-pg-empty{ padding:36px 15px; text-align:center; font-size:13px; color:var(--sk-mut); }
/* 页头里的复选框（任务状态的「只显示错误」） */
.v3d-pg-chk{ margin:0; }
.v3d-pg-chk label{ display:inline-flex; align-items:center; height:30px; padding:0 11px; margin:0;
  border:1px solid var(--sk-border); border-radius:var(--sk-radius); background:var(--sk-card);
  font-size:12px; font-weight:400; color:var(--sk-ink-2); cursor:pointer; white-space:nowrap; }
.v3d-pg-chk input{ margin:0 6px 0 0 !important; vertical-align:middle; }
/* 分页条 */
.v3d-pg-page{ padding:10px 15px; border-top:1px solid var(--sk-border-2); }
.v3d-pg-page .pagination{ margin:0; }
.v3d-pg-page .pagination > li > a,
.v3d-pg-page .pagination > li > span{ border-color:var(--sk-border) !important; color:var(--sk-ink-2) !important;
  padding:5px 11px; font-size:12px; }
.v3d-pg-page .pagination > .active > a,
.v3d-pg-page .pagination > .active > span{ background:var(--sk-brand) !important;
  border-color:var(--sk-brand) !important; color:#fff !important; }
/* 自助防火墙页头里的两个控件：当前 IP 下拉、黑白名单添加表单 */
.v3d-fw-ip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--sk-mut); }
.v3d-fw-ip select{ height:28px; padding:0 6px; border:1px solid var(--sk-border);
  border-radius:var(--sk-radius); background:var(--sk-card); color:var(--sk-ink); font-size:12px; }
.v3d-fw-form{ display:flex; align-items:center; gap:6px; margin:0; }
.v3d-fw-form .form-control{ height:28px !important; width:auto; min-width:130px;
  font-size:12px !important; padding:0 9px !important; }
.v3d-fw-form .btn{ margin:0 !important; }
@media(max-width:900px){
  .v3d-fw-form{ flex-wrap:wrap; }
  .v3d-fw-form .form-control{ min-width:110px; }
}

/* 窄屏时表格横向滚动，不撑破卡片 */
@media(max-width:768px){
  .v3d-tbl{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* 月流量占比条（网络页右栏底部） */
.v3d-flow-bd{ padding:12px 15px; border-top:1px solid var(--sk-border-2); }
.v3d-flow-bd .lb{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:7px; font-size:12px; color:var(--sk-mut); }
.v3d-flow-bd .lb b{ font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-flow-bd .tr{ display:block; height:6px; border-radius:3px; background:var(--sk-border-2); overflow:hidden; }
.v3d-flow-bd .tr i{ display:block; height:100%; border-radius:3px; background:var(--sk-success); }
.v3d-flow-bd .tr i.k-warn{ background:var(--sk-warn); }
.v3d-flow-bd .tr i.k-urg{ background:var(--sk-danger); }

/* 页头工具条里的按钮（该页不在大卡里，吃不到 .v3d-main-card 的按钮规则） */
.v3d-pg-hd .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:30px; padding:0 12px !important; font-size:12px; }
.v3d-pg-hd .btn-xs{ height:26px; padding:0 9px !important; }
.v3d-main-card .panel,
.v3d-main-card .list-group{ border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent !important; margin-bottom:0 !important; }
.v3d-main-card .panel > .panel-heading{ padding:0 0 11px; background:transparent; border-radius:0;
  border-bottom:1px solid var(--sk-border-2); margin-bottom:14px; }
.v3d-main-card .panel > .panel-heading b{ font-size:13.5px; font-weight:600; color:var(--sk-ink); }
.v3d-main-card .pull-out{ margin-left:0; margin-right:0; }
.v3d-main-card > *:last-child{ margin-bottom:0 !important; }

/* ── 选项卡内页里遗留的 bootstrap 组件，统一到 v3 观感（override-only，不动各页模板） ── */
/* 表格：mono 小写表头 + 细线行，跟概览页的最近任务一套 */
.v3d-main-card .table{ margin-bottom:0; font-size:12.5px; background:transparent; }
.v3d-main-card .table > thead > tr > td,
.v3d-main-card .table > thead > tr > th{ background:var(--sk-head) !important; color:var(--sk-mut) !important;
  padding:9px 14px !important; border-top:0 !important; border-bottom:1px solid var(--sk-border-2) !important;
  font-size:12px; font-weight:500 !important; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-main-card .table > tbody > tr > td{ padding:11px 14px !important; vertical-align:middle;
  color:var(--sk-ink-2); border-top:0 !important; border-bottom:1px solid var(--sk-border-2) !important; }
/* 有些页把表头写在 tbody 里（<tr class="active">，如网络页的「公网IP/内网IP」分组行），一并按表头处理 */
.v3d-main-card .table > tbody > tr.active > td{ background:var(--sk-head) !important; color:var(--sk-mut) !important;
  padding:9px 14px !important; font-size:12px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-main-card .table > tbody > tr.active:hover > td{ background:var(--sk-head) !important; }
.v3d-main-card .table > tbody > tr:last-child > td{ border-bottom:0 !important; }
.v3d-main-card .table > tbody > tr:hover > td{ background:var(--sk-stripe); }
.v3d-main-card .table-responsive{ border:0; }

/* 二级选项卡（安全组的入/出方向）：下划线式，同顶部 tabs */
.v3d-main-card .nav-tabs{ border-bottom:1px solid var(--sk-border) !important; display:flex; gap:2px; float:none !important; }
.v3d-main-card .nav-tabs > li{ float:none; margin:0; }
.v3d-main-card .nav-tabs > li > a{ margin:0 0 -1px !important; padding:9px 13px !important;
  border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important;
  background:transparent !important; font-size:12.5px; color:var(--sk-mut) !important; }
.v3d-main-card .nav-tabs > li > a:hover{ color:var(--sk-ink-2) !important; }
.v3d-main-card .nav-tabs > li.active > a{ color:var(--sk-ink) !important; font-weight:600;
  border-bottom-color:var(--sk-brand) !important; }
.v3d-main-card .nav-tabs > li > a i{ color:var(--sk-mut) !important; }
.v3d-main-card .nav-tabs > li.active > a i{ color:var(--sk-brand) !important; }

/* 行内按钮：统一高度与字号 */
.v3d-main-card .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:30px; padding:0 12px !important; font-size:12px; }
.v3d-main-card .btn-xs,.v3d-main-card .btn-mini{ height:26px; padding:0 9px !important; }
.v3d-main-card .btn-group > .btn{ margin:0; }
/* 时间范围切换（监控页）：选中态用品牌浅底 */
.v3d-main-card .btn-group[data-toggle=buttons] > label.btn{ height:28px; }
.v3d-main-card .btn-group[data-toggle=buttons] > label.btn.active{ background:var(--sk-brand-bg2) !important;
  border-color:#C4CBF2 !important; color:var(--sk-brand) !important; box-shadow:none !important; }

/* 提示条：扁平细线，不要大色块 */
.v3d-main-card .alert{ padding:10px 13px; margin-bottom:14px; border-radius:var(--sk-radius);
  font-size:12.5px; line-height:1.7; border:1px solid var(--sk-border-2); background:var(--sk-head); color:var(--sk-ink-2); }
.v3d-main-card .alert b{ font-weight:500; }
.v3d-main-card .alert-danger{ background:var(--sk-danger-bg); border-color:#F0C9C9; color:#A83232; }
.v3d-main-card .alert-info{ background:var(--sk-brand-bg2); border-color:#C9CFF0; color:var(--sk-ink-2); }

/* 键值行（网络页的 DNS / MAC / 线路等） */
.v3d-main-card .list-group-item{ padding:10px 0 !important; background:transparent !important;
  border:0 !important; border-bottom:1px solid var(--sk-border-2) !important; font-size:12.5px; color:var(--sk-ink); }
.v3d-main-card .list-group-item:last-child{ border-bottom:0 !important; }
.v3d-main-card .list-group-item.heading{ font-size:13px; color:var(--sk-ink); }
.v3d-main-card .list-group-item.heading b{ font-weight:600; }
/* ── 监控页：不套外层大卡，分区标题走工具条，每张图各自独立成卡 ── */
.v3m-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:0 0 12px; }
.v3m-bar:not(:first-child){ margin-top:18px; }
.v3m-bar h3{ margin:0; font-size:13.5px; font-weight:600; color:var(--sk-ink); }
.v3m-bar .r{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* 工具条里的电源状态（setActionHtml 会重写里面的 i / span，只能按图标字体来排） */
.v3m-bar .status b{ display:inline-flex; align-items:center; gap:5px; font-size:12px !important; font-weight:500; }
.v3m-bar .status b i{ font-size:12px; }

/* 实时四格：CPU / 内存 用环形，网络 / 硬盘 用面积图，后两个更宽 */
.v3m-live{ display:grid; grid-template-columns:1fr 1fr 1.6fr 1.6fr; gap:14px; }
.v3m-cell{ background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-radius-lg); padding:13px 14px 11px; min-width:0; }
.v3m-cell .hd{ font-size:12.5px; font-weight:600; color:var(--sk-ink); margin-bottom:4px; }
.v3m-cell .ring{ height:152px; }
.v3m-cell .area{ height:158px; }
.v3m-cell .ft{ margin-top:2px; text-align:center; font-size:12px; color:var(--sk-mut); }
.v3m-cell .ft span{ color:var(--sk-ink-2); font-weight:500;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
@media(max-width:1100px){ .v3m-live{ grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .v3m-live{ grid-template-columns:1fr; } }

/* 分段控件（时间范围 / 统计口径）：连体细边，选中品牌浅底 */
.v3m-seg{ display:inline-flex; border:1px solid var(--sk-border); border-radius:var(--sk-radius);
  overflow:hidden; background:var(--sk-card); }
.v3m-seg .btn{ height:28px !important; padding:0 11px !important; margin:0 !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent !important; color:var(--sk-mut) !important; font-size:12px !important;
  display:inline-flex; align-items:center; font-weight:500 !important; }
.v3m-seg .btn + .btn{ border-left:1px solid var(--sk-border) !important; }
.v3m-seg .btn:hover{ color:var(--sk-ink-2) !important; }
.v3m-seg .btn.active{ background:var(--sk-brand-bg2) !important; color:var(--sk-brand) !important; }
.v3m-seg input{ display:none; }

/* RRD 大图：每张一张独立卡 */
.v3m-rrd{ background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-radius-lg); padding:13px 14px; margin-bottom:14px; }
.v3m-rrd:last-child{ margin-bottom:0; }
.v3m-rrd h4{ margin:0 0 6px; padding-bottom:9px; border-bottom:1px solid var(--sk-border-2);
  font-size:12.5px; font-weight:600; color:var(--sk-ink); }
.v3m-rrd > div{ height:230px; }

/* 分页 */
.v3d-main-card .pagination{ margin:14px 0 0; }
.v3d-main-card .pagination > li > a,
.v3d-main-card .pagination > li > span{ border-color:var(--sk-border) !important; color:var(--sk-ink-2) !important;
  padding:5px 11px; font-size:12px; }
.v3d-main-card .pagination > .active > a,
.v3d-main-card .pagination > .active > span{ background:var(--sk-brand) !important;
  border-color:var(--sk-brand) !important; color:#fff !important; }

/* 筛选行（任务状态页的「只显示错误」） */
.v3d-main-card .form-inline{ margin-bottom:12px; }
.v3d-main-card .form-inline label{ display:inline-flex; align-items:center; height:28px; padding:0 10px;
  border:1px solid var(--sk-border); border-radius:var(--sk-radius); background:var(--sk-card);
  font-size:12px; font-weight:400; color:var(--sk-ink-2); cursor:pointer; }
.v3d-main-card .form-inline input[type=checkbox]{ margin:0 6px 0 0; vertical-align:middle; }

/* ── 页内层次：分区标题 / 表格框 / 操作行 ── */
/* 分区标题（网络页的「公网带宽」「公网流量」等 heading 行）→ mono 小标题 + 细线 */
.v3d-main-card .list-group-item.heading{ padding:0 0 8px !important; margin:0 0 4px !important;
  border-bottom:1px solid var(--sk-border-2) !important; }
.v3d-main-card .list-group-item.heading b{ font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sk-faint);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-main-card .list-group + .list-group{ margin-top:20px; }
/* 表格统一加一层细框，和卡片内壁拉开层次 */
.v3d-main-card .pull-out,
.v3d-main-card .table-responsive{ border:1px solid var(--sk-border-2) !important;
  border-radius:var(--sk-radius); overflow:hidden; }
.v3d-main-card .pull-out > .table-responsive{ border:0 !important; border-radius:0; }
/* 顶部操作按钮行 */
.v3d-main-card .block{ margin-bottom:14px !important; padding:0 !important; }
.v3d-main-card .panel > .block:first-child{ margin-top:0; }
/* 左右两栏之间留白（网络页 col-lg-8 / col-lg-4） */
@media(min-width:992px){
  .v3d-main-card .row > [class*="col-lg-4"]{ padding-left:22px; }
}
.v3d-side{ width:320px; flex:none; display:flex; flex-direction:column; gap:14px; }
.v3d-side > .v3d-panel{ margin-bottom:0; }

@media(max-width:1200px){
  .v3d-2col{ flex-direction:column; }
  /* 竖排之后 flex:1 管的是高度不是宽度，而 .v3d-2col 上的 align-items:flex-start
     会让子项按内容收缩——右栏有 width:100% 顶着没事，左主栏没有，就会塌成
     内容宽度（实测 1000px 视口下只剩 450px）。补一条 width:100% */
  .v3d-main{ width:100%; }
  .v3d-side{ width:100%; }
}

/* ── 实例状态提示条（停机原因 / 过户中 / 任务失败） ──
   原来是一行裸的红字，和下面的白卡没有层次；改成浅色底 + 左色条的提示卡：
   左图标定性、标题一句话说清状态、正文放管理员填的原因、右侧直接给下一步动作 */
.v3d-note{ display:flex; align-items:flex-start; gap:11px; padding:12px 14px; margin-bottom:14px;
  border:1px solid transparent; border-left-width:3px; border-radius:var(--sk-radius-lg);
  background:var(--sk-head); border-left-color:var(--sk-mut); }
.v3d-note .ic{ flex:none; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-top:1px; color:var(--sk-mut); }
.v3d-note .ic svg{ width:18px; height:18px; }
.v3d-note .tx{ flex:1; min-width:0; font-size:12.5px; line-height:1.75; color:var(--sk-ink-2); }
.v3d-note .tx b{ display:block; margin-bottom:1px; font-size:13px; font-weight:600; color:var(--sk-ink); }
.v3d-note .tx .mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-note .ac{ flex:none; display:inline-flex; align-items:center; height:28px; padding:0 12px;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card);
  font-size:12px; color:var(--sk-ink-2) !important; white-space:nowrap; cursor:pointer; }
.v3d-note .ac:hover{ border-color:var(--sk-brand); color:var(--sk-brand) !important; }
.v3d-note.is-danger{ background:var(--sk-danger-bg); border-left-color:var(--sk-danger); }
.v3d-note.is-danger .ic{ color:var(--sk-danger); }
.v3d-note.is-warn{ background:var(--sk-warn-bg); border-left-color:var(--sk-warn); }
.v3d-note.is-warn .ic{ color:var(--sk-warn); }
.v3d-note.is-info{ background:var(--sk-brand-bg2); border-left-color:var(--sk-brand); }
.v3d-note.is-info .ic{ color:var(--sk-brand); }
/* --sk-brand-bg2 的深色档是 skinpro.js 换肤时才注入的，CSS 里它仍是亮底；
   暗色下不赌 JS 跑没跑，直接换成中性深底，只留左侧品牌色条 */
html[data-skin="dark"] .v3d-note.is-info{ background:var(--sk-head); }
@media(max-width:768px){
  .v3d-note{ flex-wrap:wrap; }
  .v3d-note .ac{ margin-left:33px; }
}

/* ── 内容面板 ── */
.v3d-panel{ background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg);
  margin-bottom:14px; overflow:hidden; }
.v3d-main > .v3d-panel:last-child{ margin-bottom:0; }
.v3d-panel-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 15px; border-bottom:1px solid var(--sk-border-2); }
.v3d-panel-hd h3{ margin:0; font-size:13.5px; font-weight:600; color:var(--sk-ink); }
/* panel-hd 是 space-between，只认「左一坨、右一坨」。标题旁边要挂徽章就包成一组，
   直接并排放三个子元素会被均分，徽章飘到正中间 */
.v3d-panel-hd > .hd-l{ display:flex; align-items:center; gap:9px; min-width:0; }
.v3d-panel-hd .hd-r{ display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.v3d-panel-hd .more{ font-size:12px; font-weight:500; color:var(--sk-brand); white-space:nowrap; }
.v3d-panel-bd{ padding:12px 15px; }
.v3d-panel-ft{ padding:11px 15px; border-top:1px solid var(--sk-border-2); display:flex; gap:7px; flex-wrap:wrap; }
.v3d-panel-ft .btn{ flex:1; min-width:96px; display:inline-flex; align-items:center; justify-content:center;
  gap:5px; height:30px; padding:0 10px !important; margin:0 !important; font-size:12px; }
/* 左主栏的卡宽得多，底部按钮再按右栏那样均分就会拉成一条巨长的横条。
   只挑 v3d-main 的直接子卡——网络页在 v3d-main 里又嵌了一个 .v3d-side，那边仍按右栏规则均分 */
.v3d-main > .v3d-panel > .v3d-panel-ft .btn{ flex:none; padding:0 18px !important; }
/* 账号这两页是窄页单列，底部按钮再均分就成了两条横贯全宽的巨条 */
.v3a-page .v3d-panel-ft .btn{ flex:none; padding:0 16px !important; }

/* ══════════════ 续费弹窗 · 纵向三步 ══════════════
   续费这件事的顺序是「选多久 → 续到哪天 → 要不要用优惠 → 付多少」。
   上一版把六个字段等权重竖着码在一起，最该决策的时长和最该确认的新到期日
   都没被突出。这里把顺序显性化成三步，金额常驻底栏，明细默认收起。 */
.v3d-steps{ display:flex; flex-direction:column; gap:16px; }
.v3d-step{ display:flex; gap:12px; }
.v3d-step > .no{ flex:none; width:20px; height:20px; border-radius:50%; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sk-brand-bg); color:var(--sk-brand); font-size:11px; font-weight:700;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
/* --sk-brand-bg 没有深色档（同 v3d-note.is-info / .op.pri 那两处），
   不补的话深色弹窗里这一串步骤序号是一颗颗惨白的圆点 */
html[data-skin="dark"] .v3d-step > .no{ background:var(--sk-head); color:var(--sk-brand-l); }
.v3d-step > .c{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.v3d-step .t{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:12.5px; font-weight:600; color:var(--sk-ink); }
.v3d-step .t em{ font-style:normal; font-weight:400; font-size:11.5px; color:var(--sk-mut); }

/* 两行药丸：上行时长、下行折后价。折扣是比率，人对钱敏感——
   右上角直接挂「省 ¥240」，比「8.3 折」更能推动买长周期 */
.v3d-opts.is-2l > a,
.v3d-opts.is-2l > label{ flex-direction:column; align-items:center; justify-content:center;
  gap:1px; height:auto; padding:7px 14px; }
.v3d-opts.is-2l > a .d,
.v3d-opts.is-2l > label .d{ font-size:12.5px; color:var(--sk-ink-2); line-height:1.5; }
.v3d-opts.is-2l > a .p,
.v3d-opts.is-2l > label .p{ font-size:13px; font-weight:700; color:var(--sk-ink); line-height:1.4;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-opts.is-2l > a.on .d,
.v3d-opts.is-2l > a.on .p,
.v3d-opts.is-2l > label.active .d,
.v3d-opts.is-2l > label.active .p{ color:var(--sk-brand); }
.v3d-opts .save{ position:absolute; top:-8px; right:-6px; z-index:1;
  font-size:10px; font-weight:700; line-height:1.7; padding:0 6px; border-radius:20px;
  background:var(--sk-danger); color:#fff; white-space:nowrap;
  font-variant-numeric:tabular-nums; }

/* 续费后到期：这是用户花这笔钱真正买到的东西，必须自成一块 */
.v3d-shift{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:var(--sk-radius);
  background:var(--sk-brand-bg2); border:1px solid var(--sk-brand-bg); }
.v3d-shift .c{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.v3d-shift .c .k{ font-size:11px; color:var(--sk-mut); }
.v3d-shift .c .v{ font-size:13.5px; font-weight:600; color:var(--sk-ink); white-space:nowrap;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-shift .c.new .v{ color:var(--sk-brand); }
.v3d-shift .ar{ flex:none; color:var(--sk-brand); font-size:15px; line-height:1; }
.v3d-shift .plus{ margin-left:auto; flex:none; white-space:nowrap;
  font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px;
  background:var(--sk-brand); color:#fff; }
/* 已过期的续费：从今天起算，说清楚免得以为白买了几个月 */
/* 表格里用的紧凑版（物理机批量续费每行的「原到期 → 续费后」）：
   去掉卡片底和内边距，排成一行，不占高度 */
.v3d-shift.is-inline{ display:inline-flex; align-items:baseline; gap:6px; flex-wrap:nowrap;
  padding:0; background:none; border:0; border-radius:0; white-space:nowrap; }
.v3d-shift.is-inline > .from{ font-size:12px; color:var(--sk-mut); }
.v3d-shift.is-inline > .ar{ font-size:12px; color:var(--sk-faint); }
.v3d-shift.is-inline > .to{ font-size:12.5px; font-weight:600; color:var(--sk-ink); }

.v3d-shift.is-expired{ background:var(--sk-warn-bg); border-color:var(--sk-warn-bg); }
.v3d-shift.is-expired .c.new .v,
.v3d-shift.is-expired .ar{ color:var(--sk-warn); }
.v3d-shift.is-expired .plus{ background:var(--sk-warn); }

/* 金额明细：默认收起，点底栏「明细」展开 */
.v3d-bill{ display:flex; flex-direction:column; gap:8px; padding:12px 15px;
  background:var(--sk-head); border-top:1px solid var(--sk-border-2); }
.v3d-bill .r{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:12.5px; }
.v3d-bill .r .k{ color:var(--sk-mut); }
.v3d-bill .r .v{ color:var(--sk-ink-2);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-bill .r.cut .v{ color:var(--sk-success); }

/* 底栏：金额常驻。is-lg 把实付放大到 24px，只给续费这种「就为了这个数」的表单用 */
.v3d-form-ft.is-lg{ padding:13px 15px; margin-top:0;
  background:var(--sk-head); border-top:1px solid var(--sk-border); }
.v3d-form-ft.is-lg .pay .big{ font-size:24px; }
.v3d-form-ft .pay .cut{ font-size:11.5px; padding:2px 9px; border-radius:20px;
  background:var(--sk-success-bg); color:var(--sk-success); font-weight:600;
  font-variant-numeric:tabular-nums; }
.v3d-form-ft .fold{ font-size:12px; color:var(--sk-brand); cursor:pointer; white-space:nowrap; }
.v3d-form-ft .fold:hover{ color:var(--sk-brand-d); }

/* 结账型弹窗（续费 / 重装 / 升级…）：底栏是一条贴着弹窗下沿的结算条。
 * jconfirm 给内容区固定的 22/24 内边距，会在结算条外面留一圈白，等于让它浮在
 * 弹窗里。撑满的办法不能用负 margin —— jquery-confirm 的 setDialogCenter() 有一句
 * contentHeight += 第一个子元素的 margin-top，-22px 会被它当成「少 22px」，
 * 内容窗被算矮一截，底栏直接被 overflow:hidden 裁掉（实测裁 22px）。
 * 所以改由弹窗自己带一小段 <style> 把 .jconfirm-content 的内边距清零，
 * 见 blocks/flush_dialog.html。这里只管内部各段的留白，取 22px 跟弹窗标题对齐。
 * .main 自带 padding-bottom:15px（旧模板靠 p-b-none 压掉），外壳这层一并清零。 */
.v3d-flush{ padding:0; }
.v3d-flush > form > .v3d-panel-bd{ padding:18px 22px; }
.v3d-flush .v3d-note{ margin:0 22px 16px; }
.v3d-flush .v3d-bill{ padding:12px 22px; }
.v3d-flush .v3d-form-ft.is-lg{ padding:14px 22px; }
.v3d-flush .v3d-tl-sum{ padding:12px 22px; }
/* jconfirm-box 自己是 overflow:hidden，正常会裁掉；这里补一道，
   免得换个 theme 结算条的直角戳出弹窗圆角 */
.jconfirm-content > .v3d-flush .v3d-form-ft.is-lg,
.jconfirm-content > .v3d-flush .v3d-tl-sum{
  border-radius:0 0 var(--sk-radius-lg) var(--sk-radius-lg); }
@media(max-width:520px){
  .v3d-flush > form > .v3d-panel-bd{ padding:16px; }
  .v3d-flush .v3d-note{ margin:0 16px 14px; }
  .v3d-flush .v3d-bill,
  .v3d-flush .v3d-form-ft.is-lg{ padding:12px 16px; }
}

/* ══════════════ 重装系统弹窗 ══════════════
   全站最不可逆的一次点击：系统盘抹掉重建。上一版把它做成一张普通表单——
   警告挂在 alert-info 上（渲染出来是浅绿），弹窗里看不到当前装的是什么，
   「格式化数据盘」和「换个远程端口」长得一模一样。这里按续费那套三步骨架
   重排，并且把「换成什么」常驻底栏。 */

/* 通栏危险条：贴住弹窗标题下沿。v3d-note 本体是卡片内的小块提示，
   这条说的是不可逆操作，得占满整宽压在最上面，所以只改几何不动配色 */
.v3d-note.is-bar{ margin:0 !important; padding:12px 22px;
  border-radius:0; border-top:0; border-right:0;
  border-bottom:1px solid var(--sk-border); }

/* 系统模板选择器：原来是「发行版标签页 + 卡片网格」，一次只看得见一个发行版，
   十来个模板就是四行卡片、约 260px 高，长名字还折行。改成一个下拉——
   收起占一行，展开后左栏把发行版竖着全列（多少个都不换行），右栏是该发行版的版本 */
.v3d-ospick{ position:relative; max-width:460px; }
.v3d-ospick-btn{ display:flex; align-items:center; gap:9px; width:100%; height:38px; padding:0 12px;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius-sm); background:var(--sk-card);
  cursor:pointer; font-size:13px; color:var(--sk-ink); text-align:left; font-family:inherit; }
.v3d-ospick-btn:hover{ border-color:var(--sk-brand); }
.v3d-ospick.is-open .v3d-ospick-btn{ border-color:var(--sk-brand); box-shadow:0 0 0 3px var(--sk-ring); }
.v3d-ospick-btn > .ico{ flex:none; display:inline-flex; align-items:center; line-height:1; font-size:15px; }
.v3d-ospick-btn > .ico img{ height:16px; width:auto; }
.v3d-ospick-btn > .ico:empty{ display:none; }
.v3d-ospick-btn > .nm{ flex:1; min-width:0; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v3d-ospick-btn > .nm.is-empty{ font-weight:400; color:var(--sk-faint); }
/* 右侧灰字是发行版类型：名字里未必带得出来（Rocky Linux 挂在 CentOS 下） */
.v3d-ospick-btn > .fam{ flex:none; font-size:11.5px; color:var(--sk-mut); }
.v3d-ospick-btn > .cv{ flex:none; width:0; height:0; border-left:4px solid transparent;
  border-right:4px solid transparent; border-top:5px solid var(--sk-mut); transition:transform .15s; }
.v3d-ospick.is-open .v3d-ospick-btn > .cv{ transform:rotate(180deg); }

.v3d-ospick-panel{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
  display:none; overflow:hidden; background:var(--sk-card);
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); box-shadow:var(--sk-sh-lg); }
.v3d-ospick.is-open .v3d-ospick-panel{ display:block; }
.v3d-ospick-cols{ display:grid; grid-template-columns:152px 1fr; }
.v3d-ospick-fams{ padding:6px; display:flex; flex-direction:column; gap:2px;
  background:var(--sk-card-2); border-right:1px solid var(--sk-border-2);
  max-height:230px; overflow-y:auto; }
.v3d-ospick-fams > a{ display:flex; align-items:center; gap:8px; height:32px; padding:0 10px;
  border-radius:var(--sk-radius-sm); cursor:pointer; white-space:nowrap;
  font-size:12.5px; color:var(--sk-ink-2) !important; }
.v3d-ospick-fams > a:hover{ background:var(--sk-card); }
.v3d-ospick-fams > a.on{ background:var(--sk-brand-bg2); color:var(--sk-brand) !important; font-weight:600; }
.v3d-ospick-fams > a > .ico{ flex:none; display:inline-flex; align-items:center; line-height:1; font-size:15px; }
.v3d-ospick-fams > a > .ico img{ height:16px; width:auto; }
.v3d-ospick-fams > a > .tx{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.v3d-ospick-fams > a > .ct{ flex:none; font-size:11px; color:var(--sk-mut);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-ospick-fams > a.on > .ct{ color:var(--sk-brand); }
.v3d-ospick-opts{ padding:6px; max-height:230px; overflow-y:auto; }
.v3d-ospick-opts > .pane{ display:flex; flex-direction:column; gap:2px; }
.v3d-ospick-opts .opt{ display:flex; align-items:center; gap:9px; margin:0; padding:7px 11px;
  border-radius:var(--sk-radius-sm); cursor:pointer; font-weight:400; }
.v3d-ospick-opts .opt:hover{ background:var(--sk-head); }
/* 单选框只负责提交值，视觉全交给 label；不能 display:none，否则表单取不到 */
.v3d-ospick-opts .opt > input[type=radio]{ position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
.v3d-ospick-opts .opt > .tick{ flex:none; width:14px; height:14px; opacity:0; color:var(--sk-brand); }
.v3d-ospick-opts .opt > .nm{ flex:1; min-width:0; font-size:12.5px; line-height:1.45; color:var(--sk-ink); }
/* 「当前」角标：重装最容易搞错的就是把机器又装回原样 */
.v3d-ospick-opts .opt > .now{ flex:none; font-size:10px; font-weight:700; line-height:1.8;
  padding:0 7px; border-radius:20px; background:var(--sk-ink-2); color:var(--sk-card); }
.v3d-ospick-opts .opt.on{ background:var(--sk-brand-bg2); }
.v3d-ospick-opts .opt.on > .tick{ opacity:1; }
.v3d-ospick-opts .opt.on > .nm{ color:var(--sk-brand); font-weight:600; }
.v3d-ospick-ft{ padding:8px 12px; background:var(--sk-head); border-top:1px solid var(--sk-border-2);
  font-size:11.5px; color:var(--sk-mut); }
/* --sk-brand-bg2 的深色档是 skinpro.js 换肤时才注入的，CSS 里它仍是亮底——
   暗色下这两处选中态会变成深色面板里的两块惨白，口径同上面 v3d-note.is-info 那条 */
html[data-skin="dark"] .v3d-ospick-fams > a.on,
html[data-skin="dark"] .v3d-ospick-opts .opt.on{ background:var(--sk-head); }
@media(max-width:520px){
  .v3d-ospick{ max-width:none; }
  .v3d-ospick-cols{ grid-template-columns:1fr; }
  .v3d-ospick-fams{ flex-direction:row; overflow-x:auto; max-height:none;
    border-right:0; border-bottom:1px solid var(--sk-border-2); }
  .v3d-ospick-fams > a > .ct{ display:none; }
  .v3d-ospick-opts{ max-height:190px; }
}

/* 短标签 + 一排单选的行。v3d-form-row 是标签在上，那个更适合输入框，
   这里两行选项要左对齐，标签压到左边才对得齐 */
.v3d-inline-row{ display:flex; gap:12px; align-items:baseline; }
.v3d-inline-row > .lb{ flex:none; width:60px; font-size:12.5px; color:var(--sk-mut); }
.v3d-inline-row > .c{ flex:1; min-width:0; }
/* 标签超过四个字的行（「所在地区」「详细地址」这类）：60px 会把标签挤折行 */
.v3d-inline-row.is-w > .lb{ width:78px; }
/* ── 紧凑表单：细分隔线分组 + 左标签右控件 ──
   字段多、正文（textarea）又该占主导的表单用这个，别再拿 v3d-steps 去套：
   序号只有在真有先后依赖时才该出现，一张平铺的表单没有。 */
.v3d-fm > .g{ border-top:1px solid var(--sk-border-2); margin-top:18px; padding-top:16px; }
.v3d-fm > .g:first-child{ border-top:0; margin-top:0; padding-top:0; }
.v3d-fm .gt{ margin-bottom:12px; font-size:12px; font-weight:600; color:var(--sk-mut); }
.v3d-fm .f{ display:grid; grid-template-columns:82px 1fr; gap:14px; align-items:start; margin-bottom:14px; }
.v3d-fm .f:last-child{ margin-bottom:0; }
.v3d-fm .k{ padding-top:7px; font-size:12.5px; color:var(--sk-ink-2); }
.v3d-fm .k i{ margin-right:3px; font-style:normal; color:var(--sk-danger); }
.v3d-fm .two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.v3d-fm .sub{ margin-top:6px; font-size:11.5px; color:var(--sk-mut); }
.v3d-fm textarea.form-control{ line-height:1.75; resize:vertical; }
@media(max-width:560px){
  .v3d-fm .f{ grid-template-columns:1fr; gap:5px; }
  .v3d-fm .k{ padding-top:0; }
  .v3d-fm .two{ grid-template-columns:1fr; }
}

/* 一行里并排放两个下拉（提交工单的「产品类型 + 具体实例」这种），窄屏折行 */
.v3d-selrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.v3d-selrow > .form-control,
.v3d-selrow > div{ flex:1 1 170px; min-width:0; max-width:250px; }
.v3d-selrow > div > .form-control{ width:100%; }
/* 输入框右侧贴一个可点的后缀（「默认手机号码」这种一键填入） */
.v3d-ingroup{ max-width:320px; }
.v3d-ingroup .input-group-addon{ font-size:12px; white-space:nowrap; cursor:pointer;
  color:var(--sk-mut); background:var(--sk-head); border-color:var(--sk-border-3); }
.v3d-ingroup .input-group-addon:hover{ color:var(--sk-brand); }

/* 省 / 市 / 区三连下拉：窄屏折行，别横着挤成三条细缝 */
.v3a-sel3{ display:flex; gap:8px; flex-wrap:wrap; }
.v3a-sel3 > .form-control{ flex:1 1 118px; min-width:0; max-width:170px; }
/* 「一并格式化」这一档会连数据盘一起抹，单选钮本身染成警示色，
   免得它和「换个远程端口」看起来一样无害 */
.v3d-radio.is-warn{ color:var(--sk-warn); }
.v3d-radio.is-warn input{ accent-color:var(--sk-warn); }

/* ══════════════ 升级配置 ══════════════ */
/* 加量那几行：短标签 + 数量框 + 单价提示 */
.v3d-qty-row{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.v3d-qty-row > .lb{ flex:none; width:60px; font-size:12.5px; color:var(--sk-mut); }
.v3d-qty-row > .px{ font-size:11.5px; color:var(--sk-mut); }
.v3d-qty-row > .ro{ font-size:12.5px; font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
/* slider-input 组件在这里传的是 :is_slider=false :is_desc=false，
   渲染出来就是「数字输入框 + 上下箭头」——组件没动，只把 BS3 那身皮换掉：
   input-group 的圆角/负边距那套在 v3 里对不齐，统一描成一个 34px 的数量框 */
.v3d .v3d-qty-row .rule-slider,
.v3d .v3d-qty-row .slider-input,
.v3d .v3d-qty-row .rule-input{ margin:0 !important; padding:0 !important; float:none !important; }
.v3d .v3d-qty-row .input-group{ display:flex; align-items:stretch; width:auto; border-collapse:separate;
  height:34px; border:1px solid var(--sk-border-3); border-radius:var(--sk-radius-sm);
  background:var(--sk-card); overflow:hidden; }
.v3d .v3d-qty-row .input-group > .form-control{ width:76px; height:100%; float:none;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 10px;
  background:transparent; text-align:center; color:var(--sk-ink);
  font-size:13px; font-weight:600;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d .v3d-qty-row .input-group > .form-control:focus{ outline:0; }
.v3d .v3d-qty-row .input-group-addon{ display:inline-flex !important; align-items:center;
  width:auto !important; height:auto !important; margin:0 !important; padding:0 9px !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:var(--sk-head) !important; color:var(--sk-mut) !important;
  font-size:11.5px; line-height:normal; white-space:nowrap; }
.v3d .v3d-qty-row .input-group-addon.btn-updown{ flex-direction:column; justify-content:center;
  padding:0 7px !important; gap:1px; }
.v3d .v3d-qty-row .btn-updown a{ display:block; line-height:1; color:var(--sk-mut) !important;
  font-size:11px; cursor:pointer; }
.v3d .v3d-qty-row .btn-updown a:hover{ color:var(--sk-brand) !important; }
/* 数字输入框把浏览器自带的上下箭头也顶出来，跟组件自己那对撞一起 */
.v3d .v3d-qty-row .input-group > .form-control::-webkit-outer-spin-button,
.v3d .v3d-qty-row .input-group > .form-control::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0; }
.v3d .v3d-qty-row .input-group > .form-control[type=number]{ -moz-appearance:textfield; }

/* 字段要独占一行时（textarea 这种），标签回到上面 */
.v3d-qty-row.is-block{ display:block; }
.v3d-qty-row.is-block > .lb{ display:block; width:auto; margin-bottom:6px; }

/* 带单位的小输入框（金盾那边的 Mbps / PPS / 设置集序号）。
   BS3 的 input-group 在 v3 里圆角和负边距都对不齐，换成一个自己的壳 */
.v3d-unit{ display:inline-flex; align-items:stretch; height:34px; overflow:hidden;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius-sm); background:var(--sk-card); }
.v3d-unit > .form-control{ width:96px; height:100%; float:none; padding:0 10px;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent; color:var(--sk-ink); font-size:12.5px;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-unit > .form-control:focus{ outline:0; }
.v3d-unit > i{ display:inline-flex; align-items:center; padding:0 9px; white-space:nowrap;
  font-style:normal; font-size:11.5px; color:var(--sk-mut); background:var(--sk-head); }
.v3d-unit.is-pre > i{ order:-1; }

/* 一组勾选项：过滤模块、防护规则集这种。BS3 的 checkbox-inline 在 v3 里
   行高和间距都对不上，统一成等宽换行的格子 */
.v3d-chks{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.v3d-chk{ display:inline-flex; align-items:center; gap:6px; margin:0 !important;
  font-size:12.5px; font-weight:400; color:var(--sk-ink-2); cursor:pointer; }
.v3d-chk input{ margin:0 !important; }
/* 规则集多起来要能滚，别把弹窗撑爆 */
.v3d-setlist{ display:flex; flex-direction:column; gap:6px; max-height:190px; overflow-y:auto;
  padding:10px 13px; border:1px solid var(--sk-border-2); border-radius:var(--sk-radius-sm);
  background:var(--sk-card-2); }
.v3d-setlist .v3d-chk.is-all{ padding-bottom:7px; margin-bottom:1px !important;
  border-bottom:1px solid var(--sk-border-2); color:var(--sk-mut); }

/* 安全组规则：把行为/协议/端口/来源四个字段读成一句话，提交前能核一眼 */
.v3d-rulesum{ padding:9px 13px; border-radius:var(--sk-radius-sm); font-size:12.5px;
  line-height:1.7; background:var(--sk-success-bg); color:var(--sk-success); }
.v3d-rulesum.is-deny{ background:var(--sk-danger-bg); color:var(--sk-danger); }
.v3d-rulesum:empty{ display:none; }

/* 硬盘那两个弹窗把 slider 留着了（拖着选容量比敲数字直观），
   组件本身没动，这里只把 bootstrap-slider 那身皮换成 v3 的配色 */
.v3d-qty-row.is-slider{ display:block; }
.v3d-qty-row.is-slider .rule-slider{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.v3d-qty-row.is-slider .slider-input{ flex:1; min-width:180px; display:flex; align-items:center; gap:14px; }
.v3d .slider.slider-horizontal{ width:100%; min-width:120px; }
.v3d .slider-track{ height:6px; border-radius:6px; background:var(--sk-border-3); box-shadow:none; }
.v3d .slider-selection{ background:var(--sk-brand); box-shadow:none; border-radius:6px; }
.v3d .slider-handle{ width:16px; height:16px; margin-top:-5px; background:var(--sk-card);
  border:2px solid var(--sk-brand); box-shadow:var(--sk-sh); opacity:1; }
.v3d .slider .tooltip-inner{ background:var(--sk-ink); font-size:11.5px; }

/* 「当前 → 升级后」对照表 */
.v3d-diff{ display:flex; flex-direction:column; border:1px solid var(--sk-border-2);
  border-radius:var(--sk-radius-sm); overflow:hidden; max-width:420px; }
.v3d-diff > .r{ display:grid; grid-template-columns:64px 1fr 16px 1fr; align-items:center;
  gap:10px; padding:8px 13px; font-size:12.5px; }
.v3d-diff > .r + .r{ border-top:1px solid var(--sk-border-2); }
.v3d-diff .k{ font-size:11.5px; color:var(--sk-mut); }
.v3d-diff .a{ color:var(--sk-mut);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-diff .ar{ text-align:center; color:var(--sk-faint); }
.v3d-diff .b{ font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-diff > .r.is-up .ar,
.v3d-diff > .r.is-up .b{ color:var(--sk-success); }
.v3d-diff > .r.is-same .b{ font-weight:400; color:var(--sk-mut); font-family:inherit; }
@media(max-width:520px){
  .v3d-diff{ max-width:none; }
  .v3d-qty-row > .px{ width:100%; }
}

/* 弹窗里那种「一段字段一个小标题」的分节（物理机重装的网络配置 / 分区配置）：
   原来是一行 form-group 里孤零零一个加粗 label，这里给它一条细分隔线 */
.v3d-grp-t{ margin:16px 0 12px; padding-top:14px; border-top:1px solid var(--sk-border-2);
  font-size:12.5px; font-weight:600; color:var(--sk-ink-2); }

/* ══════════════ 物理机重装：分区编辑器 ══════════════
   probill / prodcim / toplink / zjmflink 四家驱动各自带一套自定义分区，
   上一版是 BS3 栅格（col-lg-3 套 input-group）拼的，列宽随弹窗一起晃，
   加减按钮还掉到下一行。这里改成一行一个分区、字段按内容定宽 */
.v3d-part{ display:flex; flex-direction:column; gap:8px; }
.v3d-part > .r{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.v3d-part > .r > .form-control{ height:32px !important; font-size:12.5px !important; }
.v3d-part .f-path{ width:112px; }
.v3d-part .f-fmt{ width:118px; }
.v3d-part .f-size{ width:104px; }
.v3d-part .f-unit{ width:74px; }
/* 大小 + 单位贴一起，中间不留缝 */
/* 行首的小标签（原文是 input-group-addon 里的「名称」「挂载点」） */
.v3d-part .addon-l{ display:inline-flex; align-items:center; height:32px; padding:0 10px; flex:none;
  white-space:nowrap; font-size:11.5px; color:var(--sk-mut); background:var(--sk-head);
  border:1px solid var(--sk-border-3); border-right:0;
  border-radius:var(--sk-radius-sm) 0 0 var(--sk-radius-sm); }
.v3d-part .addon-l + .form-control{ border-top-left-radius:0; border-bottom-left-radius:0; }
.v3d-part .grp{ display:flex; align-items:stretch; }
.v3d-part .grp > .form-control:first-child{ border-top-right-radius:0; border-bottom-right-radius:0; }
.v3d-part .grp > .addon{ display:inline-flex; align-items:center; padding:0 10px; white-space:nowrap;
  font-size:11.5px; color:var(--sk-mut); background:var(--sk-head);
  border:1px solid var(--sk-border-3); border-left:0;
  border-radius:0 var(--sk-radius-sm) var(--sk-radius-sm) 0; }
/* 行首的固定标签（Windows 那边分区名不让改） */
.v3d-part .fixed{ display:inline-flex; align-items:center; justify-content:center; width:112px; height:32px;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius-sm);
  background:var(--sk-head); color:var(--sk-mut); font-size:12.5px; }
/* 加/减按钮：不参与弹性，别被挤到下一行 */
.v3d-part .op{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid var(--sk-border-3); border-radius:var(--sk-radius-sm);
  background:var(--sk-card); color:var(--sk-mut); cursor:pointer; font-size:12px; }
.v3d-part .op:hover{ border-color:var(--sk-brand); color:var(--sk-brand) !important; }
.v3d-part .op.is-off{ opacity:.4; cursor:default; pointer-events:none; }
.v3d-part .add{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px; height:30px;
  padding:0 12px; border:1px dashed var(--sk-border-3); border-radius:var(--sk-radius-sm);
  background:transparent; color:var(--sk-mut); font-size:12.5px; cursor:pointer; }
.v3d-part .add:hover{ border-color:var(--sk-brand); color:var(--sk-brand) !important; }
/* 分区方案说明（toplink 那份默认分区表） */
.v3d-part-tip{ font-size:11.5px; line-height:1.9; color:var(--sk-mut);
  padding:9px 12px; border-radius:var(--sk-radius-sm); background:var(--sk-card-2); }
.v3d-part-tip b{ color:var(--sk-ink-2); font-weight:600; }
/* LVM 子分区：缩进一层，和上面的卷组拉开 */
.v3d-part .sub{ margin-left:22px; padding-left:12px; border-left:2px solid var(--sk-border-2); }
@media(max-width:560px){
  .v3d-part .f-path,.v3d-part .f-fmt,.v3d-part .f-size,.v3d-part .fixed{ width:auto; flex:1; min-width:88px; }
}

/* ══════════════ 重置系统密码 ══════════════ */
/* 连接信息条：登录名 / IP / 端口，改完密码马上要用的三个值。
   注意不能叫 v3d-conn —— 那是详情页「远程连接」那套的类名，十几个模板在用 */
.v3d-linkinfo{ display:flex; gap:22px; flex-wrap:wrap; padding:11px 14px;
  border-radius:var(--sk-radius-sm); background:var(--sk-card-2); border:1px solid var(--sk-border-2); }
.v3d-linkinfo > div{ display:flex; flex-direction:column; gap:1px; }
.v3d-linkinfo .k{ font-size:11px; color:var(--sk-mut); }
.v3d-linkinfo .v{ font-size:12.5px; font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }

/* 密码输入：生成 / 显隐 / 复制三个动作收在框里。
   上一版「随机密码」挂的是 input-group-addon，flex 下会被 width:1% 压扁，
   而且明说了「页面上无法查看」却不给复制按钮 */
.v3d-pwfield{ display:flex; align-items:center; height:38px; padding:0 5px 0 12px;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius-sm); background:var(--sk-card);
  max-width:420px; }
.v3d-pwfield:focus-within{ border-color:var(--sk-brand); box-shadow:0 0 0 3px var(--sk-ring); }
.v3d-pwfield > .val{ flex:1; min-width:0; height:100%; border:0; outline:0; padding:0;
  background:transparent; color:var(--sk-ink); font-size:13.5px; letter-spacing:.02em;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-pwfield > .val::placeholder{ font-family:inherit; font-size:12.5px;
  letter-spacing:0; color:var(--sk-faint); }
.v3d-pwfield > .act{ flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:28px; border-radius:7px; color:var(--sk-mut) !important; cursor:pointer; }
.v3d-pwfield > .act:hover{ background:var(--sk-head); color:var(--sk-brand) !important; }
.v3d-pwfield > .act.on{ color:var(--sk-brand) !important; }
.v3d-pwfield > .act svg{ width:15px; height:15px; }
.v3d-pwfield > .act.gen{ width:auto; gap:5px; padding:0 10px; white-space:nowrap;
  font-size:12px; color:var(--sk-brand) !important; }
.v3d-copied{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  line-height:1.75; padding:0 8px; border-radius:20px;
  background:var(--sk-success-bg); color:var(--sk-success); }
.v3d-copied svg{ width:10px; height:10px; }

/* 强度提示：只给判断依据，能不能用以后端校验为准 */
.v3d-meter{ display:flex; align-items:center; gap:9px; min-height:14px; }
.v3d-meter .bars{ display:flex; gap:4px; flex:none; }
.v3d-meter .bars i{ width:26px; height:4px; border-radius:3px; background:var(--sk-border-3); }
.v3d-meter .lb{ font-size:11.5px; }
.v3d-meter.s1 .bars i:nth-child(-n+1){ background:var(--sk-danger); }
.v3d-meter.s1 .lb{ color:var(--sk-danger); }
.v3d-meter.s2 .bars i:nth-child(-n+2){ background:var(--sk-warn); }
.v3d-meter.s2 .lb{ color:var(--sk-warn); }
.v3d-meter.s3 .bars i{ background:var(--sk-success); }
.v3d-meter.s3 .lb{ color:var(--sk-success); }
@media(max-width:520px){
  .v3d-pwfield{ max-width:none; }
  .v3d-pwfield > .act.gen > svg{ display:none; }
  .v3d-linkinfo{ gap:14px; }
}

/* ══════════════ 虚拟主机升级：滑块行 ══════════════
   网页空间 / 数据库 / 域名 / 流量 四条 bootstrap-slider。
   上一版每条占三行（右上角浮一行单价 + 左边一行当前值 + 一条通栏滑块），
   现在收成一行抬头：左标签、中间 当前→升级后、右边单价与上限，滑块压在下面 */
.v3d-slide{ display:flex; flex-direction:column; gap:10px; }
.v3d-slide > .it + .it{ padding-top:13px; border-top:1px solid var(--sk-border-2); }
.v3d-slide .hd{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:1px; }
.v3d-slide .lb{ flex:none; font-size:12.5px; color:var(--sk-mut); }
.v3d-slide .cur{ font-size:12.5px; color:var(--sk-mut);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-slide .cur > i{ margin:0 5px; font-style:normal; color:var(--sk-faint); }
.v3d-slide .cur .b,
.v3d-slide .cur > b{ font-weight:600; color:var(--sk-ink); }
.v3d-slide .px{ margin-left:auto; font-size:11.5px; color:var(--sk-mut); }
/* 滑块自带 9px 上下外边距，行高容易被拉开 */
.v3d-slide .slider.slider-horizontal{ margin:2px 0 0; }
@media(max-width:520px){
  .v3d-slide .px{ margin-left:0; width:100%; }
}

/* 滑块行里的标签：父容器是 display:block，60px 的固定宽会把长标签折行 */
.v3d-qty-row.is-slider > .lb{ display:block; width:auto; margin-bottom:5px; }

/* ══════════════ 升级记录 ══════════════
   升级本来就是一串按时间发生的事，左时间 / 中变更 / 右金额。
   上一版是 list-group 里塞 row+col，金额、月数、时间全挤在右半边两行 */
.v3d-tl{ display:flex; flex-direction:column; }
.v3d-tl > .it{ display:grid; grid-template-columns:96px 1fr auto; gap:14px; padding:13px 0; }
.v3d-tl > .it + .it{ border-top:1px solid var(--sk-border-2); }
.v3d-tl .when{ font-size:11.5px; line-height:1.5; color:var(--sk-mut);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-tl .when b{ display:block; font-weight:600; color:var(--sk-ink-2); }
.v3d-tl .what{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.v3d-tl .chips{ display:flex; gap:6px; flex-wrap:wrap; }
/* 这次加了什么，一项一颗，比一整行文字好数 */
.v3d-tl .chip{ display:inline-flex; align-items:center; font-size:11.5px; line-height:1.75;
  padding:1px 9px; border-radius:20px;
  background:var(--sk-success-bg); color:var(--sk-success); }
.v3d-tl .chip.is-plain{ background:var(--sk-head); color:var(--sk-ink-2); }
.v3d-tl .after{ font-size:11.5px; color:var(--sk-mut); word-break:break-all; }
.v3d-tl .cost{ display:flex; flex-direction:column; gap:2px; text-align:right; white-space:nowrap; }
.v3d-tl .cost .a{ font-size:14px; font-weight:700; color:var(--sk-danger);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-tl .cost .m{ font-size:11px; color:var(--sk-mut); }
/* 底部汇总条：升了几次、总共补了多少 */
.v3d-tl-sum{ display:flex; gap:26px; flex-wrap:wrap; padding:12px 22px;
  background:var(--sk-head); border-top:1px solid var(--sk-border); }
.v3d-tl-sum > div{ display:flex; flex-direction:column; gap:1px; }
.v3d-tl-sum .k{ font-size:11px; color:var(--sk-mut); }
.v3d-tl-sum .v{ font-size:14px; font-weight:700; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-tl-sum .v.is-red{ color:var(--sk-danger); }
@media(max-width:560px){
  .v3d-tl > .it{ grid-template-columns:1fr; gap:7px; }
  .v3d-tl .cost{ flex-direction:row; align-items:baseline; gap:9px; text-align:left; }
  .v3d-tl-sum{ gap:18px; }
}

/* 底栏左侧的「换成什么」：上一版整个弹窗都没说当前系统是哪个 */
.v3d-osshift{ display:flex; align-items:center; gap:9px; font-size:12.5px; min-width:0; }
.v3d-osshift .from{ color:var(--sk-mut); }
.v3d-osshift .ar{ flex:none; color:var(--sk-danger); }
.v3d-osshift .to{ font-weight:600; color:var(--sk-ink); }
.v3d-osshift .to.none{ font-weight:400; color:var(--sk-faint); }
/* 装回同一个系统时不摆「A → A」，只留一句「原样重装为 X」 */
.v3d-osshift.is-same .from,
.v3d-osshift.is-same .ar{ display:none; }

/* ══════════════ 账号管理（基本资料 / 安全设置）══════════════
   这两页原来各带一张几乎相同的资料头卡，安全设置页还把 54 行样式和一套
   只此一家的 ms-* 写在模板里。现在分工划清楚：头卡只在基本资料出现一次，
   两页共用下面这批 v3a-* 组件，安全设置那段页内 style 全删。 */

/* 这两页是「设置」型的，一列到底。铺满宽屏的话每一行会拉得很长，
   标签和右侧动作离得太远。收成窄页居中，口径同旧版安全设置页的 .ms-wrap */
.v3a-page{ max-width:900px; margin:0 auto; }

/* ── 资料头卡：头像（点头像换图）+ 身份 + 右侧账号完整度 ── */
.v3a-hero{ display:flex; align-items:center; gap:18px; padding:20px 22px; flex-wrap:wrap; }
.v3a-hero > .av{ position:relative; flex:none; width:60px; height:60px; margin:0; cursor:pointer; }
.v3a-hero > .av > img{ width:60px; height:60px; border-radius:50%; object-fit:cover;
  border:2px solid var(--sk-brand-bg); background:var(--sk-card-2); }
/* 换头像收成头像右下角那个小相机，不再单独占一块面板 */
.v3a-hero > .av > .cam{ position:absolute; right:-2px; bottom:-2px; width:22px; height:22px;
  border-radius:50%; background:var(--sk-card); border:1px solid var(--sk-border-3);
  color:var(--sk-mut); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.v3a-hero > .av:hover > .cam{ color:var(--sk-brand); border-color:var(--sk-brand); }
.v3a-hero > .av > .cam svg{ width:12px; height:12px; }
.v3a-hero > .av > .cam input[type=file]{ position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; font-size:0; }
.v3a-hero .id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.v3a-hero .nm{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:19px; font-weight:700; color:var(--sk-ink); letter-spacing:-.01em; }
.v3a-hero .sub{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--sk-mut); }
.v3a-hero .sub b{ font-weight:500; color:var(--sk-ink-2);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }

/* 账号完整度：把「还差什么」变成能点的东西，不是一个死数字 */
.v3a-done{ flex:none; display:flex; align-items:center; gap:13px;
  padding-left:20px; border-left:1px solid var(--sk-border-2); }
.v3a-ring{ position:relative; width:56px; height:56px; flex:none; }
.v3a-ring svg{ transform:rotate(-90deg); }
.v3a-ring .val{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3a-done .txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.v3a-done .txt .k{ font-size:11.5px; color:var(--sk-mut); }
.v3a-done .miss{ display:flex; gap:6px; flex-wrap:wrap; }
.v3a-done .miss > a{ font-size:11.5px; line-height:1.75; padding:0 8px; border-radius:20px;
  cursor:pointer; background:var(--sk-warn-bg); color:var(--sk-warn) !important; }
.v3a-done .miss > a:hover{ background:var(--sk-warn); color:var(--sk-card) !important; }
.v3a-done .all{ font-size:11.5px; color:var(--sk-success); }

/* ── 信息行：标签 + 值 + 动作。每行都能动，不再是一张只读的 kv 网格 ── */
.v3a-rows > .r{ display:flex; align-items:center; gap:14px; padding:11px 20px; font-size:13px; }
.v3a-rows > .r + .r{ border-top:1px solid var(--sk-border-2); }
.v3a-rows .k{ flex:none; width:88px; font-size:12.5px; color:var(--sk-mut); }
.v3a-rows .v{ flex:1; min-width:0; color:var(--sk-ink); word-break:break-all; }
.v3a-rows .v.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3a-rows .v.is-empty{ color:var(--sk-faint); }
.v3a-rows .act{ flex:none; font-size:12.5px; color:var(--sk-brand) !important;
  cursor:pointer; white-space:nowrap; }
.v3a-rows .act:hover{ color:var(--sk-brand-d) !important; }
/* 认证之后姓名和公司归认证材料管，这里只能看 */
.v3a-rows .lock{ flex:none; display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--sk-faint); white-space:nowrap; }
.v3a-rows .lock svg{ width:12px; height:12px; }
/* 没绑手机这类「该补但没补」的行，给一层很淡的底色，扫得到 */
.v3a-rows > .r.is-warn{ background:color-mix(in srgb, var(--sk-warn-bg) 45%, transparent); }

/* ── 安全项行（安全设置页）：图标 + 标题说明 + 状态动作 ── */
.v3a-sitem{ display:flex; align-items:center; gap:14px; padding:14px 20px; }
.v3a-sitem + .v3a-sitem{ border-top:1px solid var(--sk-border-2); }
.v3a-sitem:hover{ background:var(--sk-card-2); }
.v3a-sitem > .ico{ flex:none; width:36px; height:36px; border-radius:11px;
  background:var(--sk-brand-bg2); color:var(--sk-brand);
  display:flex; align-items:center; justify-content:center; font-size:17px; overflow:hidden; }
.v3a-sitem > .ico > img{ width:24px; height:24px; object-fit:contain; }
.v3a-sitem > .m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.v3a-sitem > .m > .t{ font-size:13px; font-weight:600; color:var(--sk-ink); }
.v3a-sitem > .m > .d{ font-size:11.5px; line-height:1.6; color:var(--sk-mut); }
.v3a-sitem > .m > .d .on{ color:var(--sk-success); font-weight:500; }
.v3a-sitem > .s{ flex:none; display:flex; align-items:center; gap:11px; }

/* 安全强度条 */
.v3a-bar{ display:flex; align-items:center; gap:12px; padding:13px 20px;
  border-bottom:1px solid var(--sk-border-2); }
.v3a-bar .k{ flex:none; font-size:12px; color:var(--sk-mut); }
.v3a-bar .track{ flex:1; min-width:80px; height:6px; border-radius:6px;
  background:var(--sk-border-3); overflow:hidden; }
.v3a-bar .track > i{ display:block; height:100%; border-radius:6px; background:var(--sk-brand); }
.v3a-bar .track > i.c-success{ background:var(--sk-success); }
.v3a-bar .track > i.c-warning{ background:var(--sk-warn); }
.v3a-bar .track > i.c-danger{  background:var(--sk-danger); }
.v3a-bar .lv{ flex:none; font-size:12.5px; font-weight:700; color:var(--sk-ink); }
.v3a-bar .lv.c-success{ color:var(--sk-success); }
.v3a-bar .lv.c-warning{ color:var(--sk-warn); }
.v3a-bar .lv.c-danger{  color:var(--sk-danger); }

@media(max-width:760px){
  .v3a-done{ width:100%; padding-left:0; padding-top:14px;
    border-left:0; border-top:1px solid var(--sk-border-2); }
  .v3a-rows > .r{ flex-wrap:wrap; gap:6px 12px; }
  .v3a-rows .k{ width:72px; }
  .v3a-sitem > .m > .d{ display:none; }
}

/* 密钥等同密码：默认打码，点眼睛才显形；真值只放在 data 属性上 */
.v3d-secret{ display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; }
.v3d-secret > code{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:2px 9px; border-radius:6px; background:var(--sk-head); color:var(--sk-ink-2);
  font-size:12px; letter-spacing:.06em;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-secret > a{ flex:none; color:var(--sk-mut) !important; cursor:pointer; }
.v3d-secret > a:hover{ color:var(--sk-brand) !important; }

/* ── 快捷操作：2 列图标按钮 ── */

.v3d-quick{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 15px; }
.v3d-quick > a{ display:flex; align-items:center; gap:7px; padding:0 10px; height:36px;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card);
  font-size:12px; color:var(--sk-ink-2); cursor:pointer; white-space:nowrap; overflow:hidden; }
.v3d-quick > a:hover{ border-color:var(--sk-brand); color:var(--sk-brand); }
.v3d-quick > a i{ font-size:14px; color:var(--sk-mut); flex:none; }
.v3d-quick > a:hover i{ color:var(--sk-brand); }
/* 物理机的「人工」标记：走机房工单而不是接口直发的那几个操作 */
.v3d-quick > a .v3d-quick-tag{ margin-left:auto; padding:0 5px; border-radius:3px; font-style:normal;
  font-size:10.5px; line-height:16px; color:var(--sk-mut); background:var(--sk-bg-2); flex:none; }

/* ── 远程连接：标签 + 只读字段框 ── */
.v3d-conn{ margin-bottom:11px; }
.v3d-conn:last-child{ margin-bottom:0; }
.v3d-conn .lb{ display:block; margin-bottom:5px; font-size:12px; color:var(--sk-mut); }
.v3d-conn .fld{ display:flex; align-items:center; gap:8px; min-height:32px; padding:5px 9px;
  border:1px solid var(--sk-border-2); border-radius:var(--sk-radius); background:var(--sk-head); }
.v3d-conn .fld code{ flex:1; min-width:0; padding:0; background:none; border:0; color:var(--sk-ink);
  font-size:12.5px; word-break:break-all;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-conn .fld > a{ flex:none; color:var(--sk-mut) !important; cursor:pointer; }
.v3d-conn .fld > a:hover{ color:var(--sk-brand) !important; }
.v3d-conn .sk-eye{ color:var(--sk-mut) !important; }
.v3d-conn .sk-eye:hover{ color:var(--sk-ink-2) !important; }
.v3d-conn .sk-eye-ic{ width:14px; height:14px; vertical-align:-3px; margin-left:6px; }
/* ── 云数据库概览：存储用量 ──
   原来这块是一张 bg-primary 的大色卡（progress_color_box），进度条还甩在卡外面，
   跟 v3 这套白底卡完全不是一路。改成「数值 + 百分比 + 细进度条 + 一句结论」，
   档位配色沿用列表页那套 k-warn / k-urg。 */
.v3q-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.v3q-hd .n b{ font-size:20px; font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3q-hd .n .text-muted{ font-size:13px; }
.v3q-hd .p{ font-size:13px; font-weight:600; color:var(--sk-success);
  font-variant-numeric:tabular-nums; }
.v3q-hd .p.k-warn{ color:var(--sk-warn); }
.v3q-hd .p.k-urg{ color:var(--sk-danger); }
.v3q-tr{ display:block; height:6px; border-radius:3px; background:var(--sk-border-3);
  margin-top:9px; overflow:hidden; }
.v3q-tr i{ display:block; height:100%; border-radius:3px; background:var(--sk-success);
  transition:width .3s ease; }
.v3q-tr i.k-warn{ background:var(--sk-warn); }
.v3q-tr i.k-urg{ background:var(--sk-danger); }
.v3q-ft{ margin-top:8px; font-size:12px; }
.v3q-ft b{ font-weight:600; color:var(--sk-ink-2); }

/* ── 云数据库概览：访问控制 ──
   「所有人可访问」= 库直接暴露在公网，必须一眼能看出来，
   所以徽章 + 一句人话说明并排，指定 IP 时再把地址跟在后面。 */
.v3q-acl{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--sk-mut); }
.v3q-acl .tx{ color:var(--sk-ink-2); }
.v3q-ips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.v3q-ips .ip,
.v3q-acl .ip{ padding:2px 8px; border-radius:var(--sk-radius-sm);
  background:var(--sk-bg-2); color:var(--sk-ink-2); font-size:12px; word-break:break-all; }
/* 卡里的警示条比停机提示那条窄一档，别把整张卡撑成一块红 */
.v3q-warn{ margin:11px 0 0; }

/* 左主栏里的连接信息：栏宽够，地址/账号/密码横着排一行，别再竖着堆三段 */
.v3d-conn-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:12px; }
.v3d-conn-row .v3d-conn{ margin-bottom:0; }

/* ── 独立面板登录信息（server/panel）：弹窗和整页两用 ──
   弹窗（jquery-confirm）本身就是白底，里面再套带边框的卡就是卡中卡，
   所以卡壳只在整页时生效；内部一律「分组条 + 单行 kv」，比上下堆叠的输入框紧凑得多 */
.v3p{ background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-radius-lg); overflow:hidden; }
.jconfirm-content .v3p{ border:0; border-radius:0; }
.v3p-hd{ display:flex; align-items:center; gap:8px; padding:10px 15px;
  background:var(--sk-head); border-bottom:1px solid var(--sk-border-2); }
.v3p-kv + .v3p-hd{ border-top:1px solid var(--sk-border-2); }
.v3p-hd h3{ margin:0; font-size:13px; font-weight:600; color:var(--sk-ink); }
.v3p-hd .sp{ flex:1; min-width:6px; }
.v3p-hd .btn{ margin:0 !important; }
.v3p-kv{ display:flex; align-items:center; gap:10px; height:44px; padding:0 15px;
  border-bottom:1px solid var(--sk-border-2); font-size:12.5px; }
.v3p-kv:last-child{ border-bottom:0; }
.v3p-kv .k{ flex:none; width:72px; color:var(--sk-mut); }
.v3p-kv .v{ flex:1; min-width:0; color:var(--sk-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v3p-kv .v.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3p-kv .cp{ flex:none; color:var(--sk-mut) !important; cursor:pointer; }
.v3p-kv .cp:hover{ color:var(--sk-brand) !important; }
.v3p-kv .sk-eye{ color:var(--sk-mut) !important; }
.v3p-kv .sk-eye:hover{ color:var(--sk-ink-2) !important; }
.v3p-kv .sk-eye-ic{ width:14px; height:14px; vertical-align:-3px; margin-left:6px; }
/* 页内提示条在这套版式里跟卡等宽，不要再挂外边距 */
.v3p + .v3d-note{ margin-top:12px; }

/* ── 右栏里的 kv：左标签右值 ── */
.v3d-side .sk-kv{ display:block !important; padding:12px 15px !important; }
.v3d-side .sk-kv-i{ display:flex !important; align-items:flex-start; justify-content:space-between;
  gap:10px; width:100% !important; padding:4px 0 !important; border:0 !important; }
.v3d-side .sk-kv-i .sk-k{ flex:none; font-size:12px; color:var(--sk-mut); margin:0 !important; }
.v3d-side .sk-kv-i .sk-v{ flex:1 1 auto; min-width:0; text-align:right; font-size:12.5px;
  color:var(--sk-ink); word-break:break-all; margin:0 !important; }
.v3d-side .sk-kv-i .sk-v.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-variant-numeric:tabular-nums; }
.v3d-side .sk-kv-i .sk-v b{ font-weight:500; }
.v3d-side .sk-auto-renew{ display:inline-flex; align-items:center; gap:5px; margin:0;
  font-weight:400; color:var(--sk-ink); cursor:pointer; }
.v3d-side .sk-auto-renew input{ margin:0 !important; vertical-align:middle; }

/* ── 资源信息：分组标题 + 两列明细 ── */
.v3d-grp{ padding:9px 15px; background:var(--sk-head); border-bottom:1px solid var(--sk-border-2);
  border-top:1px solid var(--sk-border-2); font-size:12px; font-weight:500; letter-spacing:.12em;
  color:var(--sk-faint); text-transform:uppercase;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-panel-hd + .v3d-grp,
.v3d-pg-hd + .v3d-grp{ border-top:0; }
.v3d-grp em{ font-style:normal; margin-left:6px; padding:1px 6px; border-radius:3px;
  background:var(--sk-card); border:1px solid var(--sk-border-2); letter-spacing:0;
  text-transform:none; color:var(--sk-mut); font-family:inherit; }
/* 表格 / kv 紧跟分区标题时不要再画一条顶边 */
.v3d-grp + .table > thead > tr > td,
.v3d-grp + .table > thead > tr > th{ border-top:0 !important; }
.v3d-kv2{ display:grid; grid-template-columns:1fr 1fr; }
.v3d-kv2 .i{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:10px 15px; border-bottom:1px solid var(--sk-border-2); min-width:0; }
.v3d-kv2 .i:nth-child(odd){ border-right:1px solid var(--sk-border-2); }
.v3d-kv2 .i:nth-last-child(1),.v3d-kv2 .i:nth-last-child(2):nth-child(odd){ border-bottom:0; }
/* 条目数为奇数时最后一条独占一行，免得右半空一块 */
.v3d-kv2 .i:last-child:nth-child(odd){ grid-column:1 / -1; border-right:0; }
.v3d-kv2 .i.span2{ grid-column:1 / -1; border-right:0; }
.v3d-kv2 .k{ flex:none; font-size:12px; color:var(--sk-mut); }
.v3d-kv2 .v{ flex:1 1 auto; min-width:0; text-align:right; font-size:12.5px; color:var(--sk-ink);
  word-break:break-all; }
.v3d-kv2 .v.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-variant-numeric:tabular-nums; }
@media(max-width:700px){
  .v3d-kv2{ grid-template-columns:1fr; }
  .v3d-kv2 .i:nth-child(odd){ border-right:0; }
}

/* 系统图标（跟列表页 .v3l-os 同一套）。iconcolor 彩色字体自带 16px，
   放在 13px 的信息条里偏大，压到 15px 才和旁边文字齐平 */
.v3d-os{ margin-right:5px; vertical-align:-2px; color:var(--sk-ink-2); font-size:15px; }
img.v3d-os{ max-width:15px; max-height:15px; }

/* ── 24 小时负载曲线：内联 SVG，不引 echarts（拉不到数据整块被 JS 移除）
   两条线单位不同 → 左轴 CPU 百分比、右轴出网带宽；
   轴标签走 HTML 绝对定位，不写在 SVG 里——SVG 被横向拉伸，里面的文字会跟着压扁 ── */
/* ── 24 小时负载曲线 ──
   坐标系由 JS 按容器真实像素建，SVG 不再拉伸；两条线单位不同，各占一侧刻度轴。
   出网那条另外铺一层「桶内最小~最大」的淡包络，尖峰看得见、主线又不被噪声糊掉。 */
.v3d-chart{ margin:2px 0 12px; }
.v3d-chart-box{ display:flex; align-items:stretch; gap:8px; }
.v3d-chart-yl,.v3d-chart-yr{ position:relative; width:56px; flex:none; }
.v3d-chart-yl span,.v3d-chart-yr span{ position:absolute; line-height:12px; white-space:nowrap;
  font-size:11.5px; color:var(--sk-faint);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-chart-yl span{ right:0; text-align:right; }
.v3d-chart-yr span{ left:0; }
.v3d-chart-plot{ position:relative; flex:1; min-width:0; height:158px; }
.v3d-chart svg{ display:block; width:100%; height:100%; overflow:visible; }
.v3d-chart .grid line{ stroke:var(--sk-border-2); stroke-width:1; stroke-dasharray:3 4; }
.v3d-chart .grid line.base{ stroke:var(--sk-border); stroke-dasharray:none; }
.v3d-chart .ln{ fill:none; stroke-linejoin:round; stroke-linecap:round; }
.v3d-chart .ln-cpu{ stroke:var(--v3c-cpu); stroke-width:1.7; }
.v3d-chart .ln-net{ stroke:var(--v3c-net); stroke-width:1.4; }
.v3d-chart .ar{ stroke:none; }
.v3d-chart .ar-net{ fill:var(--v3c-net); fill-opacity:.12; }
/* 面积渐变的两端颜色写在 stop 上，才能跟着深浅色主题走 */
.v3d-chart #v3dGradCpu .g0{ stop-color:var(--v3c-cpu); stop-opacity:.26; }
.v3d-chart #v3dGradCpu .g1{ stop-color:var(--v3c-cpu); stop-opacity:0; }
.v3d-chart.is-loading .v3d-chart-box{ opacity:.35; }

/* 横轴时刻 */
.v3d-chart-xa{ display:flex; justify-content:space-between; margin:7px 56px 0;
  font-size:11.5px; color:var(--sk-faint);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-chart-xa span:first-child{ text-align:left; }
.v3d-chart-xa span:last-child{ text-align:right; }

/* 悬停：竖线 + 两条线上的点 + 读数卡 */
.v3d-chart-cur{ position:absolute; top:0; bottom:0; width:1px; background:var(--sk-border-3); display:none; }
.v3d-chart-dot{ position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  border:2px solid var(--sk-card); display:none; }
.v3d-chart-dot.d-cpu{ background:var(--v3c-cpu); box-shadow:0 0 0 3px var(--sk-ring); }
.v3d-chart-dot.d-net{ background:var(--v3c-net); }
.v3d-chart-tip{ position:absolute; top:2px; display:none; z-index:3; margin-left:12px;
  padding:9px 12px; border:1px solid var(--sk-border); border-radius:var(--sk-radius);
  background:var(--sk-card); box-shadow:var(--sk-sh-md); white-space:nowrap; pointer-events:none;
  min-width:132px; }
.v3d-chart-tip.flip{ transform:translateX(-100%); margin-left:-12px; }
.v3d-chart-tip b{ display:block; margin-bottom:6px; padding-bottom:6px;
  border-bottom:1px solid var(--sk-border-2);
  font-weight:500; font-size:11.5px; color:var(--sk-mut);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-chart-tip span{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sk-mut);
  line-height:1.9; }
.v3d-chart-tip em{ margin-left:auto; font-style:normal; font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-chart-tip i{ display:inline-block; width:8px; height:8px; border-radius:2px; flex:none; }
.v3d-chart-tip i.c-cpu{ background:var(--v3c-cpu); }
.v3d-chart-tip i.c-net{ background:var(--v3c-net); }

/* 图例挪到曲线上方：当前值加粗、峰值收成灰色小标 */
.v3d-chart-lg{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:0 0 10px;
  font-size:12px; color:var(--sk-mut); }
.v3d-chart-lg .s{ display:inline-flex; align-items:center; gap:6px; }
.v3d-chart-lg .s i{ width:9px; height:9px; border-radius:3px; flex:none; }
.v3d-chart-lg .s-cpu i{ background:var(--v3c-cpu); }
.v3d-chart-lg .s-net i{ background:var(--v3c-net); }
.v3d-chart-lg b{ font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-chart-lg em{ font-style:normal; font-size:11.5px; color:var(--sk-faint); }
.v3d-chart-lg em:empty{ display:none; }
.v3d-chart-lg .rg{ margin-left:auto; color:var(--sk-faint);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }

@media(max-width:640px){
  .v3d-chart-yl,.v3d-chart-yr{ width:44px; }
  .v3d-chart-xa{ margin-left:44px; margin-right:44px; }
  .v3d-chart-plot{ height:132px; }
}

/* 资源读数条：阈值配色由 setActionHtml 挂 progress-bar-* 类 */
.v3d-gauge{ display:flex; align-items:center; gap:12px; padding:6px 0; }
.v3d-gauge .lb{ width:52px; flex:none; font-size:12px; color:var(--sk-mut); }
.v3d-gauge .tr{ flex:1; height:6px; border-radius:3px; background:var(--sk-border-2); overflow:hidden; }
.v3d-gauge .tr i{ display:block; height:100%; border-radius:3px; background:var(--sk-success); transition:width .3s; }
.v3d-gauge .tr i.progress-bar-warning{ background:var(--sk-warn); }
.v3d-gauge .tr i.progress-bar-danger{ background:var(--sk-danger); }
.v3d-gauge .tr i.v3d-static{ background:var(--sk-border-3); }
.v3d-gauge .vl{ width:104px; flex:none; text-align:right; font-size:12.5px; font-weight:600; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3d-gauge .vl .text-muted{ font-weight:400; }
.v3d-gauge-ft{ margin-top:8px; padding-top:8px; border-top:1px solid var(--sk-border-2);
  font-size:12px; color:var(--sk-mut); }

/* 最近任务表：细线 + mono 表头，跟列表页一套观感 */
.v3d-tbl{ margin:0 !important; font-size:12.5px; }
/* 表头不加 letter-spacing / uppercase：那两条是照英文表头调的，
   中文会被撑成「操 作  I P」，而本项目的表头绝大多数是中文。
   mono 字体保留——中文本来就 fallback，英文表头（IP / CPU）还能吃到等宽 */
.v3d-tbl > thead > tr > td{ background:var(--sk-head); color:var(--sk-mut);
  padding:8px 15px !important; border-bottom:1px solid var(--sk-border-2) !important;
  font-size:12px; font-weight:500;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3d-tbl > tbody > tr > td{ padding:10px 15px !important; vertical-align:middle; color:var(--sk-ink-2);
  border-top:0 !important; border-bottom:1px solid var(--sk-border-2) !important; }
.v3d-tbl > tbody > tr:last-child > td{ border-bottom:0 !important; }
.v3d-tbl .mono{ font-size:12px;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
/* 主列：吃掉剩余宽度，把其余列挤到右侧收紧。
   不给的话 table-layout:auto 会把内容列全堆在左边、右侧空一大片，长域名还会被折行 */
.v3d-tbl .cw{ width:100%; }

/* 解析记录表（域名注册商解析 / ALIDNS / PDNS 三页共用）
 * ----------------------------------------------------------------
 * .cw 是「这一列吃掉所有富余宽度」，别的列就只剩 min-content。
 * 原先挂在「主机记录」上，可最长的分明是「解析值」（长 CNAME、TXT 一串），
 * 结果左边空一大片、右边几列全被挤扁——「操作」那格的两个按钮甚至叠成两行。
 * 现在 .cw 挪去解析值，其余列给一个下限，保证表头和按钮都不换行。 */
.v3d-tbl-dns .rec-sub{ min-width:150px; }
.v3d-tbl-dns .rec-type{ min-width:92px; }
.v3d-tbl-dns .rec-line{ min-width:88px; }
.v3d-tbl-dns .rec-ttl{ min-width:70px; }
/* 操作列按内容收紧，靠右 */
.v3d-tbl-dns > thead > tr > td.ac,
.v3d-tbl-dns > tbody > tr > td.ac{ width:1%; white-space:nowrap; }
/* 编辑态每格塞的是 input/select，太窄就没法填了 */
.v3d-tbl-dns .form-control{ min-width:76px; }
.v3d-tbl-dns .input-group > .form-control{ min-width:90px; }
/* 「解析值」那格外面套了一层 .form-inline，会被 .form-inline .form-control{height:36px}
   顶高 6px，跟同一行别的输入框对不齐；顺便让它吃满格宽——长 TXT 全靠这一格 */
.v3d-tbl-dns td .form-control{ height:30px; }
.v3d-tbl-dns td .form-inline{ display:block; }
.v3d-tbl-dns td .form-inline > .form-control{ width:100%; }

/* ═══════════════════════════════════════════════════════════
   SSL 证书详情页（原弹窗改独立页面）
   骨架直接复用云服务器详情那套 v3d-*，只补两块证书特有的：
   申请进度条（v3c-steps）和保护域名列表（v3c-dm）
   ═══════════════════════════════════════════════════════════ */
#CERT_DETAIL.v3d{ padding:18px 20px; }

/* ── 申请进度：支付 → 创建 → 验证 → 颁发，一条横向步骤 ── */
.v3c-steps{ display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.v3c-steps .s{ position:relative; flex:1; min-width:96px; display:flex; flex-direction:column;
  align-items:center; gap:8px; font-size:12.5px; color:var(--sk-mut); text-align:center; }
/* 连接线画在圆点那一行，最后一步不画 */
.v3c-steps .s::after{ content:''; position:absolute; top:7px; left:calc(50% + 12px); right:calc(-50% + 12px);
  height:2px; background:var(--sk-border-3); }
.v3c-steps .s:last-child::after{ display:none; }
.v3c-steps .s > i{ width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid var(--sk-border-3); background:var(--sk-card); }
.v3c-steps .s.done{ color:var(--sk-ink-2); }
.v3c-steps .s.done > i{ border-color:var(--sk-success); background:var(--sk-success); }
.v3c-steps .s.done::after{ background:var(--sk-success); }
/* 当前步：品牌色 + 一圈光晕，跟列表页的「正在发生」保持一个语气 */
.v3c-steps .s.on{ color:var(--sk-ink); font-weight:600; }
.v3c-steps .s.on > i{ border-color:var(--sk-brand); background:var(--sk-card); box-shadow:0 0 0 4px var(--sk-ring); }

/* ── 证书详情：左边一列分组信息，右边一列保护的域名 ── */
.v3c-detail{ display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:26px; }
@media(max-width:900px){ .v3c-detail{ grid-template-columns:1fr; gap:18px; } }

/* 左列：分组小标题 + 「窄标签 + 值」的行。指纹、序列号很长，值列允许断行 */
.v3c-sec{ margin-bottom:3px; font-size:12.5px; font-weight:600; color:var(--sk-ink); }
.v3c-sec ~ .v3c-sec,
.v3c-row + .v3c-sec{ margin-top:18px; }
.v3c-row{ display:flex; align-items:flex-start; gap:16px; padding:7px 0;
  border-bottom:1px solid var(--sk-border-2); }
.v3c-row:last-child{ border-bottom:0; }
.v3c-row > .k{ flex:none; width:84px; font-size:12.5px; color:var(--sk-mut); line-height:1.7; }
.v3c-row > .v{ flex:1; min-width:0; font-size:12.5px; line-height:1.7; color:var(--sk-ink); word-break:break-all;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3c-empty{ padding:6px 0 2px; font-size:12.5px; color:var(--sk-mut); line-height:1.7; }

/* 右列：保护的域名，从上往下一个一行，各自能复制 */
.v3c-dmbox .hd{ display:flex; align-items:center; gap:7px; margin-bottom:10px;
  font-size:12.5px; color:var(--sk-mut); }
.v3c-dmbox .hd b{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:9px; background:var(--sk-border-2); color:var(--sk-ink-2);
  font-size:11.5px; font-weight:600; }
.v3c-dmbox .hd a{ margin-left:auto; color:var(--sk-mut) !important; cursor:pointer; }
.v3c-dmbox .hd a:hover{ color:var(--sk-brand) !important; }
.v3c-dmbox .ls{ display:flex; flex-direction:column; gap:7px; }
/* 用成功色打底：这些域名是「已被这张证书保护」的，和状态徽章一个语气 */
.v3c-dmbox .dm{ display:flex; align-items:center; gap:8px; padding:5px 10px;
  border:1px solid transparent; border-radius:var(--sk-radius-sm); background:var(--sk-success-bg); }
.v3c-dmbox .dm:hover{ border-color:var(--sk-success); }
.v3c-dmbox .dm em{ flex:1; min-width:0; font-style:normal; font-size:12.5px; color:var(--sk-success);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3c-dmbox .dm a{ flex:none; color:var(--sk-mut) !important; cursor:pointer; }
.v3c-dmbox .dm a:hover{ color:var(--sk-success) !important; }

/* 卡底：左边一句说明，右边下载按钮 */
.v3c-ft{ justify-content:space-between; align-items:center; }
.v3c-ft .tip{ font-size:12px; color:var(--sk-mut); }

@media(max-width:768px){
  #CERT_DETAIL.v3d{ padding:14px; }
  .v3c-steps .s{ min-width:72px; font-size:12px; }
}

/* ── 域名验证展开区：缩进对齐上面那一行的域名列，底色跟表格拉开层次 ── */
.v3d-tbl > tbody > tr > td.v3c-dcv{ padding:14px 15px 16px 45px !important;
  background:var(--sk-card-2); border-bottom:1px solid var(--sk-border-2) !important; }
.v3c-dcv-tip{ margin-bottom:11px; font-size:12.5px; line-height:1.75; color:var(--sk-ink-2); }
.v3c-dcv-warn{ display:flex; align-items:center; gap:6px; margin-top:11px;
  font-size:12px; color:var(--sk-danger); }

/* ── 证书交付计划（右侧栏）：服务期 + 分期交付节点的竖向时间轴 ── */
.v3c-plan-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:10px; border-bottom:1px solid var(--sk-border-2); font-size:12px; }
.v3c-plan-hd .k{ flex:none; color:var(--sk-mut); }
.v3c-plan-hd .v{ min-width:0; text-align:right; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3c-plan{ padding-top:13px; }
.v3c-plan .p{ position:relative; display:flex; gap:10px; padding-bottom:14px; }
.v3c-plan .p:last-child{ padding-bottom:0; }
/* 节点之间的竖线，最后一个不画 */
.v3c-plan .p::before{ content:''; position:absolute; left:4px; top:14px; bottom:0; width:1px; background:var(--sk-border-3); }
.v3c-plan .p:last-child::before{ display:none; }
.v3c-plan .p > i{ position:relative; z-index:1; width:9px; height:9px; margin-top:4px; flex:none;
  border-radius:50%; background:var(--sk-card); border:2px solid var(--sk-border-3); }
.v3c-plan .p.done > i{ background:var(--sk-success); border-color:var(--sk-success); }
.v3c-plan .p.on > i{ border-color:var(--sk-brand); box-shadow:0 0 0 3px var(--sk-ring); }
/* 快到期的那一期用琥珀，跟页头的到期提醒同一个语气 */
.v3c-plan .p.warn > i{ background:var(--sk-warn); border-color:var(--sk-warn); }
.v3c-plan .tx{ flex:1; min-width:0; }
.v3c-plan .tx b{ display:flex; align-items:baseline; gap:8px; font-size:12.5px; font-weight:600; color:var(--sk-ink); }
.v3c-plan .tx b em{ margin-left:auto; flex:none; font-style:normal; font-size:11.5px; font-weight:500; color:var(--sk-mut); }
.v3c-plan .p.on .tx b em{ color:var(--sk-brand); }
.v3c-plan .p.warn .tx b em{ color:var(--sk-warn); }
.v3c-plan .p.wait .tx b{ color:var(--sk-ink-2); font-weight:500; }
.v3c-plan .tx .rg{ display:block; margin-top:3px; font-size:11.5px; color:var(--sk-mut);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3c-plan-tip{ margin-top:12px; padding-top:11px; border-top:1px solid var(--sk-border-2);
  font-size:11.5px; line-height:1.75; color:var(--sk-mut); }
/* 页头订单编号旁的复制（右侧已经没有订单信息卡了，编号只在标题这一处） */
#CERT_DETAIL .v3d-hd-card .ttl .sn .icon-copy{ margin-left:6px; color:var(--sk-faint) !important; cursor:pointer; }
#CERT_DETAIL .v3d-hd-card .ttl .sn .icon-copy:hover{ color:var(--sk-brand) !important; }
/* 交付计划里「还有 N 期」那一行：不画实心点，只留一个空心小点带过 */
.v3c-plan .p.more > i{ border-style:dashed; }
.v3c-plan .p.more .tx b{ color:var(--sk-mut); font-weight:500; }
/* 详情页表格的右对齐列（.ar 原来只在列表页 .v3l-tbl 下有定义） */
.v3d-tbl .ar{ text-align:right; white-space:nowrap; }
.v3d-tbl .ac{ text-align:right; white-space:nowrap; }

/* ── 域名详情的 WHOIS 浮层 ──
   layer.open 把这块搬进浮层，宽度由 layer 给，这里只管排版：
   左标签右值，值可能是一长串注册局状态码，得能换行 */
.v3d-whois{ padding:4px 16px 14px; }
.v3d-whois .gp{ margin:14px 0 8px; padding-bottom:7px; font-size:13px; font-weight:600;
  color:var(--sk-ink); border-bottom:1px solid var(--sk-border-2); }
.v3d-whois .gp:first-child{ margin-top:8px; }
.v3d-whois .it{ display:flex; gap:12px; padding:4px 0; font-size:12.5px; line-height:1.7; }
.v3d-whois .it .k{ flex:none; width:96px; text-align:right; color:var(--sk-mut); }
.v3d-whois .it .v{ flex:1; min-width:0; color:var(--sk-ink-2); overflow-wrap:anywhere; }
/* layer 打开时会把 .hide 的元素显示出来，但 Bootstrap 的 .hide 是 !important，
   在浮层里得改回来，否则内容是空的 */
.layui-layer-content .v3d-whois.hide{ display:block !important; }
/* 邮箱验证里可选的那几个收件地址：等宽小字，跟正文拉开 */
.v3c-dcv-mails{ font-style:normal; color:var(--sk-ink-2);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-size:12px; }

/* ── 域名验证表：状态备注单独一行，两列都不折行 ── */
.v3c-dcv-mark{ display:block; margin-top:3px; font-size:11.5px; color:var(--sk-mut); white-space:nowrap; }
/* DNS 记录三项：类型只有 TXT/CNAME 几个字，宽度让给最长的记录值 */
.v3c-dcv-dns{ grid-template-columns:104px minmax(0,1fr) minmax(0,2fr) !important; }
@media(max-width:900px){ .v3c-dcv-dns{ grid-template-columns:1fr !important; } }
/* 文件验证的文件内容：卡头放文件名和复制 / 下载，内容整段摊开 */
.v3c-dcv-file{ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius); background:var(--sk-head); overflow:hidden; }
.v3c-dcv-file .hd{ display:flex; align-items:center; gap:9px; padding:6px 11px; border-bottom:1px solid var(--sk-border-2); }
.v3c-dcv-file .hd .lb{ flex:none; font-size:12px; color:var(--sk-mut); }
.v3c-dcv-file .hd .fn{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-style:normal; font-size:12px; color:var(--sk-ink-2);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3c-dcv-file .hd .acts{ margin-left:auto; flex:none; display:inline-flex; gap:14px; }
.v3c-dcv-file .hd .lk{ display:inline-flex; align-items:center; gap:4px; font-size:12px;
  color:var(--sk-mut) !important; cursor:pointer; white-space:nowrap; }
.v3c-dcv-file .hd .lk:hover{ color:var(--sk-brand) !important; }
.v3c-dcv-file .bd{ margin:0; padding:10px 11px; border:0; border-radius:0; background:transparent;
  font-size:12.5px; line-height:1.75; color:var(--sk-ink); white-space:pre-wrap; word-break:break-all;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }

/* ── 列表操作列的待办按钮：验证给琥珀（要客户动手），续签走已有的 .pri 品牌色 ── */
.v3l-ops .op.warn{ color:var(--sk-warn); border-color:#EFD6A8; background:var(--sk-warn-bg); }
.v3l-ops .op.warn i{ color:var(--sk-warn); }
.v3l-ops .op.warn:hover{ border-color:var(--sk-warn); color:var(--sk-warn); }
/* 暗色下琥珀边太亮，压深一档（.pri 那条的浅紫边是项目既有做法，这里不动） */
html[data-skin="dark"] .v3l-ops .op.warn{ border-color:#6a5225; }
/* 证书详情两列本身不设样式，只压掉 grid 子项默认的 min-width:auto，长指纹才不会撑破 */
.v3c-detail-l,.v3c-detail-r{ min-width:0; }

/* ── 状态徽章：列表页和详情页都在用，而这两处的样式（v3l-* / v3d-*）已经无条件加载，
   徽章却还留在开关控制的 skinv3.css 里——关掉「会员中心模板」开关就成了裸文字。
   这里补一份同样的定义，skinv3.css 那份保留不动（值一样，谁后加载都一个效果）。 */
.v3-b{ display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 8px; border-radius:var(--sk-radius-sm);
  background:#fff; border:1px solid var(--sk-border); color:var(--sk-ink-2); font-size:12px; font-weight:500; white-space:nowrap; }
html[data-skin="dark"] .v3-b{ background:transparent; }
.v3-b i{ width:6px; height:6px; border-radius:50%; flex:none; display:block; }
.v3-b.ok i{ background:var(--sk-success); }
.v3-b.w i{ background:var(--sk-warn); } .v3-b.w{ color:#8A5B04; border-color:#EFD9B8; }
.v3-b.d i{ background:var(--sk-danger); } .v3-b.d{ color:#A83232; border-color:#F0C9C9; }
.v3-b.m i{ background:var(--sk-faint); } .v3-b.m{ color:var(--sk-mut); }
/* 警告/危险两档的文字和描边是写死的浅色系（#8A5B04 / #A83232），
   深色下就成了近黑底上的深棕、深红，基本看不清。换回主题色档。 */
html[data-skin="dark"] .v3-b.w{ color:var(--sk-warn); border-color:var(--sk-warn-bg); }
html[data-skin="dark"] .v3-b.d{ color:var(--sk-danger); border-color:var(--sk-danger-bg); }
/* 列表里的「上游代理」标记跟 .v3-b.w 用的是同一个写死的 #8A5B04，
   底色却是主题的 --sk-live-bg，深色下就是深棕底压深棕字（对比度 2.6） */
html[data-skin="dark"] .v3l-res b u{ color:var(--sk-live); }
/* 提交中 / 禁用的按钮
   style.css 那条只写了 background-color:#c4c9cf 和 color:#fff，没动 border-color，
   于是红按钮一进 loading 就成了「灰底 + 红边」，蓝按钮同理，看着像出错了。
   这里把底色、字色、描边一起定死，并去掉 BS3 的 opacity:.65（半透明只会让字更糊）。
   用的是主题变量，深浅两套一并生效——深色下 style.css 的浅灰底配主题的浅字色，
   本来也是两浅相撞（对比度 1.4）。 */
.btn.disabled, .btn[disabled], fieldset[disabled] .btn,
.btn.disabled:hover, .btn[disabled]:hover, fieldset[disabled] .btn:hover,
.btn.disabled:focus, .btn[disabled]:focus, fieldset[disabled] .btn:focus,
.btn.disabled:active, .btn[disabled]:active, fieldset[disabled] .btn:active,
.btn.disabled.active, .btn[disabled].active, fieldset[disabled] .btn.active{
  background-color:var(--sk-card-2) !important;
  border-color:var(--sk-border) !important;
  color:var(--sk-mut) !important;
  opacity:1 !important; box-shadow:none !important; text-shadow:none !important;
  cursor:default !important; }

/* 独立 CDN 模块的详情页（addons/cdn）：骨架和云服务器 / 虚拟主机共用 v3d-*，
   只需要补外层留白这一条 */
#CDN_DETAIL.v3d{ padding:18px 20px; }
@media(max-width:768px){ #CDN_DETAIL.v3d{ padding:14px; } }

/* ── CDN 概览「接入信息」卡 ──
   CNAME 是这个产品唯一的关键动作信息：域名加完，下一步就是去 DNS 那边把
   加速域名 CNAME 到这个值上，不配就永远不生效。原来它挤在页头信息条里
   （小字，还不能复制），域名表格里又给每行重复渲染了一遍同样的值——
   现在提成一张卡、给足字号并带复制，表格那列就去掉了。
   右边一格顺带放域名配额用量，右侧栏因此不必再重复一遍实例信息。 */
.v3c-in{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); }
.v3c-in > div{ padding:13px 16px; min-width:0; }
.v3c-in > div + div{ border-left:1px solid var(--sk-border-3); }
.v3c-in .t{ display:block; font-size:12px; color:var(--sk-mut); margin-bottom:6px; }
/* 复制按钮钉在第一行右侧：域名真放不下要折行时，别让它被挤到末行尾巴上 */
.v3c-in .cn{ display:flex; align-items:flex-start; gap:8px; }
.v3c-in .cn b{ min-width:0; font-size:14.5px; font-weight:600; color:var(--sk-ink); line-height:1.35;
  /* anywhere 而不是 break-all：宽度够就整串不断，实在放不下才拆，
     不会出现 main8801.demo-cd / n.net 这种从中间劈开的样子 */
  overflow-wrap:anywhere; }
.v3c-in .cn .icon-copy{ line-height:1.5; }
.v3c-in .cn .icon-copy{ flex:none; font-size:13px; color:var(--sk-mut); cursor:pointer; }
.v3c-in .cn .icon-copy:hover{ color:var(--sk-brand); }
.v3c-in .tip{ margin-top:6px; font-size:11.5px; color:var(--sk-mut); }
/* 配额条复用列表页那套观感，只是详情里不用压成固定宽 */
.v3c-in .v3l-exp{ width:auto; }
@media(max-width:900px){
  .v3c-in{ grid-template-columns:1fr; }
  .v3c-in > div + div{ border-left:0; border-top:1px solid var(--sk-border-3); }
}

/* ── 卡头右侧（.v3d-panel-hd .hd-r）：文字、检索框、按钮统一高度和垂直居中 ──
   原来那条只给了 flex + align-items:center，但里面塞的是一个 <form>（block）
   加 bootstrap 的 .input-small / .btn-sm，三者高度各不相同，看着就是没对齐。
   统一压成 30px 一行，跟卡底那排按钮同高。 */
.v3d-panel-hd .hd-r{ min-height:30px; }
.v3d-panel-hd .hd-r > span,
.v3d-panel-hd .hd-r > .text-muted{ display:inline-flex; align-items:center; font-size:12.5px; white-space:nowrap; }
.v3d-panel-hd .hd-r form{ display:inline-flex; align-items:center; gap:6px; margin:0 !important; }
.v3d-panel-hd .hd-r .form-control{ height:30px !important; padding:0 10px !important;
  font-size:12.5px !important; line-height:normal; min-width:170px;
  /* BS3 的 .form-control 是 display:block;width:100%，检索框直接放在 .hd-r 里
     （不裹 <form>）时会把整行占满，把后面的按钮挤到下一行去——DNS 解析记录那
     三个页面就是这样。这里把宽度收回内容宽，靠 min-width 保底 */
  width:auto; max-width:100%; flex:0 1 auto; }
.v3d-panel-hd .hd-r .btn{ height:30px; display:inline-flex; align-items:center; justify-content:center;
  gap:5px; padding:0 12px !important; margin:0 !important; font-size:12.5px; white-space:nowrap; }
.v3d-panel-hd .hd-r .btn i{ font-size:12px; }
@media(max-width:900px){
  .v3d-panel-hd .hd-r .form-control{ min-width:120px; }
}

/* ══════════════ 实名认证（member/auth 全流程）══════════════
   auth / auth_form / auth_realcompay 三个片段原来各自在 body 里塞一段
   <head><style>（HTML 上根本不合法，三份内容还几乎一模一样），
   表单是 form-horizontal 里再套一张 table，身份证上传用 .well 加一个
   绝对定位的加号，命中区域只有中间那 20px。这里统一收进 v3au-*：
   整条流程窄页居中，卡片 / 行 / 上传框都跟站内其它 v3 页面一套观感。 */
.v3au{ max-width:860px; margin:0 auto; }

/* ── 步骤条 ── */
.v3au-steps{ display:flex; padding:22px 26px; margin-bottom:16px;
  background:var(--sk-card); border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg); }
.v3au-steps .st{ flex:1; text-align:center; position:relative; }
/* 连接线画在圆点纵向中点上（圆点 34px 高，一半 17px） */
.v3au-steps .st::before{ content:''; position:absolute; top:17px; left:-50%; width:100%; height:2px;
  background:var(--sk-border-3); }
.v3au-steps .st:first-child::before{ display:none; }
.v3au-steps .st.done::before,.v3au-steps .st.on::before{ background:var(--sk-brand); }
.v3au-steps .d{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--sk-card);
  border:2px solid var(--sk-border-3); color:var(--sk-mut); font-size:13px; font-weight:700;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3au-steps .st.on .d{ border-color:var(--sk-brand); color:var(--sk-brand); box-shadow:0 0 0 4px var(--sk-ring); }
.v3au-steps .st.done .d{ background:var(--sk-brand); border-color:var(--sk-brand); color:#fff; }
.v3au-steps .t{ display:block; margin-top:9px; font-size:12.5px; color:var(--sk-mut); }
.v3au-steps .st.on .t,.v3au-steps .st.done .t{ color:var(--sk-ink); font-weight:600; }
@media(max-width:560px){
  .v3au-steps{ padding:18px 10px; }
  .v3au-steps .t{ font-size:11px; }
}

/* ── 第一步：选认证类型。两张一样大的卡，点哪张进哪条流程 ── */
.v3au-pick{ display:flex; gap:16px; }
.v3au-pick > .c{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:34px 24px 28px; background:var(--sk-card); border:1px solid var(--sk-border);
  border-radius:var(--sk-radius-lg); text-decoration:none !important;
  transition:border-color .18s, box-shadow .18s, transform .18s; }
.v3au-pick > .c:hover{ border-color:var(--sk-brand); box-shadow:var(--sk-sh-md); transform:translateY(-3px); }
.v3au-pick .ico{ width:49px; height:36px; margin-bottom:18px; background-repeat:no-repeat;
  background-position:center; background-size:contain; }
.v3au-pick .ico.k-person{ background-image:url("../images/personal.png"); }
.v3au-pick .ico.k-company{ background-image:url("../images/company.png"); }
.v3au-pick h3{ margin:0 0 8px; font-size:16px; font-weight:700; color:var(--sk-ink); }
.v3au-pick p{ margin:0 0 20px; font-size:12.5px; line-height:1.9; color:var(--sk-mut); }
.v3au-pick .btn{ min-width:120px; height:34px; display:inline-flex; align-items:center;
  justify-content:center; font-size:13px; }
@media(max-width:560px){ .v3au-pick{ flex-direction:column; } }

/* ── 认证接口切换（后台配了多家时才有）：卡头一排段落式页签 ── */
.v3au-tabs{ display:flex; gap:2px; padding:0 15px; background:var(--sk-head);
  border-bottom:1px solid var(--sk-border); border-radius:var(--sk-radius-lg) var(--sk-radius-lg) 0 0;
  flex-wrap:wrap; }
.v3au-tabs > a{ padding:11px 13px; font-size:12.5px; color:var(--sk-mut);
  border-bottom:2px solid transparent; cursor:pointer; }
.v3au-tabs > a:hover{ color:var(--sk-ink-2); }
.v3au-tabs > a.on{ color:var(--sk-brand); font-weight:600; border-bottom-color:var(--sk-brand); }

/* ── 证件照上传：整块都是命中区（file-wrapper 把 input 铺满），
      没传过是虚线框加一个加号，传过就换成缩略图 ── */
.v3au-ups{ display:flex; gap:12px; flex-wrap:wrap; }
.v3au-up{ position:relative; flex:1 1 190px; min-width:0; display:block; margin:0; cursor:pointer; }
.v3au-up > .box{ position:relative; height:132px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:1px dashed var(--sk-border-3); border-radius:var(--sk-radius);
  background:var(--sk-card-2); }
.v3au-up:hover > .box{ border-color:var(--sk-brand); background:var(--sk-brand-bg2); }
.v3au-up > .box > img{ max-width:100%; max-height:100%; object-fit:contain; }
/* 有图之后占位就让位；两者靠 img 身上的 .hidden 切换（上传脚本改的就是这个 class） */
.v3au-up > .box > img:not(.hidden) + .ph{ display:none; }
.v3au-up .ph{ display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:12px; color:var(--sk-mut); }
.v3au-up .ph i{ display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--sk-brand-bg); color:var(--sk-brand); font-size:12px; }
.v3au-up:hover .ph i{ background:var(--sk-brand); color:#fff; }
.v3au-up > .cap{ display:block; margin-top:7px; text-align:center; font-size:12px; color:var(--sk-mut); }
/* 上传要求 + 两张示例图 */
.v3au-spec{ display:flex; align-items:center; gap:14px; margin-top:12px; padding:11px 14px;
  border-radius:var(--sk-radius); background:var(--sk-head); font-size:12px; line-height:1.85;
  color:var(--sk-mut); flex-wrap:wrap; }
.v3au-spec > .tx{ flex:1; min-width:150px; }
.v3au-spec > img{ flex:none; width:88px; border-radius:4px; }
@media(max-width:560px){ .v3au-spec > img{ display:none; } }

/* ── 扫码认证 ── */
.v3au-qr{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:32px 24px 26px; }
.v3au-qr .code{ padding:12px; background:#fff; border:1px solid var(--sk-border);
  border-radius:var(--sk-radius); line-height:0; }
.v3au-qr .code img{ width:180px; height:180px; }
.v3au-qr .hint{ margin-top:16px; font-size:13px; line-height:1.9; color:var(--sk-ink-2); }
.v3au-qr .hint b{ color:var(--sk-brand); }
/* 呼吸点：告诉用户页面还在轮询结果、别关 */
.v3au-qr .wait{ display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:12px; color:var(--sk-mut); }
.v3au-qr .wait i{ width:7px; height:7px; border-radius:50%; background:var(--sk-brand);
  animation:v3auPulse 1.2s ease-in-out infinite; }
@keyframes v3auPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
@media(prefers-reduced-motion:reduce){ .v3au-qr .wait i{ animation:none; opacity:.7; } }

/* ── 对公打款：金额是这一屏唯一要看准的数字，单拎出来 ── */
.v3au-amt{ display:flex; align-items:baseline; justify-content:center; gap:8px;
  padding:22px 15px 6px; font-size:12.5px; color:var(--sk-mut); }
.v3au-amt b{ font-size:28px; font-weight:700; color:var(--sk-danger);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3au-amt + .tip{ padding:0 15px 16px; text-align:center; font-size:12px; color:var(--sk-mut); }
/* 卡号这类要照抄进网银的，等宽 + 一键复制 */
.v3au-copy{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.v3au-copy > span{ min-width:0; overflow-wrap:anywhere;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3au-copy > a{ flex:none; color:var(--sk-mut) !important; cursor:pointer; }
.v3au-copy > a:hover{ color:var(--sk-brand) !important; }

/* ── 认证完成 ── */
.v3au-done{ display:flex; flex-direction:column; align-items:center; padding:36px 26px 30px; }
.v3au-done .ok{ width:60px; height:60px; border-radius:50%; background:var(--sk-success-bg);
  color:var(--sk-success); display:flex; align-items:center; justify-content:center; font-size:28px; }
.v3au-done .ok.k-wait{ background:var(--sk-warn-bg); color:var(--sk-warn); }
.v3au-done h2{ margin:18px 0 0; font-size:18px; font-weight:700; color:var(--sk-ink); }
.v3au-done .sub{ margin-top:7px; max-width:420px; text-align:center;
  font-size:12.5px; line-height:1.8; color:var(--sk-mut); }
.v3au-done .rows{ width:100%; max-width:460px; margin:22px 0 0; text-align:left;
  border:1px solid var(--sk-border); border-radius:var(--sk-radius); overflow:hidden; }
.v3au-done .rows > .r{ display:flex; gap:16px; padding:11px 16px; font-size:13px; }
.v3au-done .rows > .r + .r{ border-top:1px solid var(--sk-border-2); }
.v3au-done .rows .k{ flex:none; width:126px; font-size:12.5px; color:var(--sk-mut); }
.v3au-done .rows .v{ flex:1; min-width:0; color:var(--sk-ink); word-break:break-word; }
.v3au-done .rows .v.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3au-done .acts{ margin-top:20px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.v3au-done .acts .btn{ min-width:120px; height:34px; display:inline-flex;
  align-items:center; justify-content:center; gap:6px; font-size:13px; }
@media(max-width:560px){ .v3au-done .rows .k{ width:96px; } }

/* 卡底那排按钮：v3d-form-ft 本来是弹窗结算条，放进页面卡片要补个下圆角 */
.v3au .v3d-form-ft.is-lg{ border-radius:0 0 var(--sk-radius-lg) var(--sk-radius-lg); }
/* 这几行的标签最长是「统一社会信用代码」，通用档的 60px 会折成两行 */
.v3au .v3d-inline-row > .lb{ width:118px; }
@media(max-width:560px){
  .v3au .v3d-inline-row{ flex-direction:column; align-items:stretch; gap:5px; }
  .v3au .v3d-inline-row > .lb{ width:auto; }
}
/* 这条流程里的返回链接（重新提交资料）：卡外单独一行，居中 */
.v3au-back{ margin-top:14px; text-align:center; }
.v3au-back > a{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  color:var(--sk-mut) !important; cursor:pointer; }
.v3au-back > a:hover{ color:var(--sk-brand) !important; }

/* ══════════════ 财务中心（交易订单 / 收支明细 / 充值记录 / 积分 / 流量扣费 / 代金券）══════════════
   这六个页面原来各写各的：BS3 的 .table-hover 裸表 + .panel-footer 分页 +
   一条 alert-info 顶在最上面，金额用 .text-success / .text-danger 直接染色，
   资金渠道用 BS3 的 .badge，状态用 .badge bg-success，两两之间没有一处对得上。
   现在统一挂到 v3 列表外壳（member_list_v3）上，这里只补财务特有的几个零件。 */

/* ── 收支金额：正负分色 + 等宽，一列扫下来能比大小 ── */
.v3f-amt{ display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap; }
/* 财务这几张表里，渠道标签和时间戳都短，却因为带空格/中英混排被折成两行。
   .v3l-tbl 上游那条「单元格内一律不换行」只点名了产品线自己的几个类，这里补上财务的 */
.v3l-tbl td .v3f-src,
.v3l-tbl td .v3f-amt,
.v3l-tbl td > .mono{ white-space:nowrap; }
.v3f-amt > b{ font-size:13.5px; font-weight:700; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3f-amt.is-in > b{ color:var(--sk-success); }
.v3f-amt.is-out > b{ color:var(--sk-danger); }
.v3f-amt > em{ font-style:normal; font-size:11.5px; color:var(--sk-faint); }

/* 资金渠道标签（余额 / 在线支付 / 佣金 / 冻结佣金）。
   原来四种渠道套的是 BS3 的 .badge / .badge-danger / .bg-info，
   在暗色下是三块高饱和实心，比金额本身还抢眼 —— 这里一律压成描边小药丸 */
.v3f-src{ flex:none; padding:1px 8px; border-radius:20px; font-size:11.5px; font-weight:500;
  background:var(--sk-head); color:var(--sk-mut); border:1px solid var(--sk-border-2); }
.v3f-src.k-line{ background:var(--sk-brand-bg2); color:var(--sk-brand); border-color:transparent; }
.v3f-src.k-cms{ background:var(--sk-warn-bg); color:var(--sk-warn); border-color:transparent; }
html[data-skin="dark"] .v3f-src.k-line{ background:var(--sk-head); }

/* ── 页头右侧的总额（积分总额 / 账户余额）── */
.v3f-sum{ display:inline-flex; align-items:baseline; gap:7px; height:30px; padding:0 13px;
  border:1px solid var(--sk-border-2); border-radius:var(--sk-radius); background:var(--sk-head);
  font-size:12px; color:var(--sk-mut); }
.v3f-sum b{ font-size:15px; font-weight:700; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }

/* 金额下面挂一行小字（提现的「申请 xx」这类原值/折算值对照） */
.v3f-sub2{ display:block; margin-top:2px; font-size:11.5px; color:var(--sk-faint);
  white-space:nowrap; font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }

/* 收款账户列：上行收款人、下行收款方式（点开 popover 看完整开户信息） */
.v3f-acct{ display:inline-flex; flex-direction:column; gap:2px; min-width:0; cursor:pointer; }
.v3f-acct > b{ font-size:12.5px; font-weight:500; color:var(--sk-ink); }
.v3f-acct > span{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--sk-mut); }
.v3f-acct:hover > b,.v3f-acct:hover > span{ color:var(--sk-brand); }

/* ── 表格里的说明列：一行主文 + 一行灰字，太长省略 ── */
.v3f-desc{ min-width:0; }
.v3f-desc > b{ display:block; font-size:12.5px; font-weight:500; color:var(--sk-ink);
  overflow:hidden; text-overflow:ellipsis; }
.v3f-desc > span{ display:block; margin-top:2px; font-size:11.5px; color:var(--sk-mut); }

/* ── 流量：三个数字并排，主的是总量 ── */
.v3f-flow{ display:flex; gap:14px; align-items:baseline; white-space:nowrap; }
.v3f-flow .i{ display:flex; flex-direction:column; gap:1px; }
.v3f-flow .i em{ font-style:normal; font-size:11px; color:var(--sk-faint); }
.v3f-flow .i b{ font-size:12.5px; font-weight:600; color:var(--sk-ink-2);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3f-flow .i.k-main b{ font-size:13px; color:var(--sk-ink); }

/* ══════════════ 代金券 ══════════════
   券卡本体沿用上一版的描边票券（浅品牌底 + 齿孔虚线 + 大面值），
   只是把 123 行页内 style 收进来，类名也从 .cash-coupon-* 那串
   改成和其它 v3 组件一致的短名。 */
.v3f-cps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:16px; padding:16px; }
.v3f-cps > .cp{ position:relative; display:flex; flex-direction:column;
  background:var(--sk-brand-bg2); border:1px solid var(--sk-brand-bg); border-radius:14px;
  overflow:hidden; transition:box-shadow .16s, transform .16s; }
.v3f-cps > .cp:hover{ box-shadow:var(--sk-sh-md); transform:translateY(-2px); }
/* 券头：大面值 + 齿孔虚线 */
.v3f-cps .hd{ position:relative; text-align:center; padding:20px 16px 16px;
  border-bottom:2px dashed var(--sk-brand-l); }
.v3f-cps .hd::before,.v3f-cps .hd::after{ content:''; position:absolute; bottom:-10px;
  width:18px; height:18px; border-radius:50%; z-index:1;
  /* 券上那两个齿孔要「透」出它背后那层，网格现在装在 v3l-card 里，背后就是卡面 */
  background:var(--sk-card); }
.v3f-cps .hd::before{ left:-10px; }
.v3f-cps .hd::after{ right:-10px; }
.v3f-cps .val{ line-height:1; color:var(--sk-brand-d);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3f-cps .val .n{ font-size:40px; font-weight:800; letter-spacing:-1.5px; }
.v3f-cps .val .cur{ font-size:17px; font-weight:700; margin-right:2px; }
.v3f-cps .val .unit{ font-size:15px; font-weight:700; margin-left:2px; }
.v3f-cps .cond{ margin-top:10px; font-size:12.5px; color:var(--sk-brand-d); }
.v3f-cps .tm{ margin-top:8px; font-size:12px; color:var(--sk-mut); font-variant-numeric:tabular-nums; }
/* 券身：三条限制说明 */
.v3f-cps .bd{ flex:1; padding:14px 16px; display:flex; flex-direction:column; gap:7px; }
.v3f-cps .bd .f{ display:flex; gap:5px; min-width:0; font-size:12.5px; line-height:1.5; color:var(--sk-ink-2); }
.v3f-cps .bd .f em{ flex:none; font-style:normal; color:var(--sk-mut); }
.v3f-cps .bd .f span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v3f-cps .bd .f span.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3f-cps .act{ display:block; margin:0 16px 16px; height:36px; line-height:36px; text-align:center;
  border-radius:9px; background:var(--sk-brand); color:#fff !important; font-weight:600; font-size:13px;
  transition:background .15s; }
.v3f-cps .act:hover{ background:var(--sk-brand-d); }
/* 已用 / 过期：整张灰化，按钮也点不动 */
.v3f-cps > .cp.off{ background:var(--sk-card-2); border-color:var(--sk-border); }
.v3f-cps > .cp.off .hd{ border-bottom-color:var(--sk-border-3); }
.v3f-cps > .cp.off .val,.v3f-cps > .cp.off .cond{ color:var(--sk-mut) !important; }
.v3f-cps > .cp.off .act{ background:var(--sk-border-2); color:var(--sk-mut) !important; cursor:not-allowed; }
/* 空态铺满整行网格 */
.v3f-cps > .v3l-empty{ grid-column:1 / -1; }
/* --sk-brand-bg / --sk-brand-bg2 / --sk-brand-d 都没有深色档（口径同 v3d-note.is-info：
   深色值是换肤脚本运行时才注入的），券卡整张的底、边、面值全靠它们，
   暗色下不补这几条就是深色页面里一块惨白 */
html[data-skin="dark"] .v3f-cps > .cp{ background:var(--sk-head); border-color:var(--sk-border); }
html[data-skin="dark"] .v3f-cps .hd{ border-bottom-color:var(--sk-border-3); }
html[data-skin="dark"] .v3f-cps .val,
html[data-skin="dark"] .v3f-cps .cond{ color:var(--sk-brand-l); }
html[data-skin="dark"] .v3f-cps > .cp.off{ background:var(--sk-card-2); }
@media(max-width:560px){
  .v3f-cps{ grid-template-columns:1fr; padding:12px; }
}

/* ── 交易订单详情弹窗 ── */
/* 金额是这一屏唯一要先看到的东西，单独一行提到最上面 */
.v3f-bill{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.v3f-bill .m{ display:flex; flex-direction:column; gap:3px; }
.v3f-bill .k{ font-size:12px; color:var(--sk-mut); }
.v3f-bill .n{ font-size:26px; font-weight:700; color:var(--sk-ink); line-height:1.15;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
/* 弹窗里成组的只读内容统一描一圈边，和外面的留白分开 */
.v3f-box{ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius); overflow:hidden; }
.v3f-box + .v3f-sec{ margin-top:18px; }
.v3f-sec{ margin-bottom:8px; font-size:12.5px; font-weight:600; color:var(--sk-ink); }
/* 明细表在弹窗里不需要列表页那套横向下限 */
.v3f-box > .v3l-tbl{ min-width:0 !important; }
.v3f-box > .v3l-tbl > thead > tr > th{ padding:8px 13px !important; }
.v3f-box > .v3l-tbl > tbody > tr > td{ padding:9px 13px !important; font-size:12.5px; }
.v3f-box .v3f-src{ display:inline-block; margin:1px 3px 1px 0; }

/* ══════════════ 账户充值（member/cost）══════════════
   上一版是「左 3/4 表单 + 右 1/4 余额卡」，右栏只放了一个渐变大圆图标、
   一个余额数字和两个按钮；手续费只写在支付方式底下一行灰字里，
   选完看不到实付多少；样式整整 51 行写在 views/member/pay/css.html 里。
   现在右栏换成实时结算卡，样式收进这里（.v3r-*），页内 style 那份已删。 */
.v3r-two{ display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:start; }
.v3r-main{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.v3r .v3d-panel-hd .rq{ font-style:normal; color:var(--sk-danger); margin-right:3px; }

/* ── 快捷金额 ── */
.v3r-amts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
.v3r-amts > a{ position:relative; height:56px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--sk-border-3); border-radius:10px; background:var(--sk-card);
  font-size:17px; font-weight:700; color:var(--sk-ink); cursor:pointer; overflow:hidden;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums;
  transition:border-color .15s, background .15s; }
.v3r-amts > a:hover{ border-color:var(--sk-brand); }
.v3r-amts > a.active{ border-color:var(--sk-brand); background:var(--sk-brand-bg2); color:var(--sk-brand-d); }
.v3r-amts > a.active::after{ content:'\2713'; position:absolute; right:0; bottom:0;
  width:17px; height:17px; line-height:17px; text-align:center; font-size:9px; font-weight:700;
  color:#fff; background:var(--sk-brand); border-radius:8px 0 0 0; font-family:inherit; }
html[data-skin="dark"] .v3r-amts > a.active{ background:var(--sk-head); color:var(--sk-brand-l); }

/* 自定义金额：一体化输入组 */
.v3r-cus{ display:flex; align-items:stretch; margin-top:12px; max-width:300px; overflow:hidden;
  border:1.5px solid var(--sk-border-3); border-radius:10px; transition:border-color .15s, box-shadow .15s; }
.v3r-cus:focus-within{ border-color:var(--sk-brand); box-shadow:0 0 0 3px var(--sk-ring); }
.v3r-cus > .cy{ flex:none; width:42px; display:flex; align-items:center; justify-content:center;
  background:var(--sk-head); color:var(--sk-mut); font-size:15px; }
.v3r-cus > .form-control{ flex:1; min-width:0; height:42px !important; padding:0 13px !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:var(--sk-card); color:var(--sk-ink); font-size:16px; font-weight:600;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3r-min{ margin-top:7px; font-size:11.5px; color:var(--sk-mut); }

/* ── 支付方式 ── */
.v3r-pays{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
.v3r-pays > a{ position:relative; height:52px; display:flex; align-items:center; justify-content:center;
  padding:0 10px; border:1.5px solid var(--sk-border-3); border-radius:10px; background:var(--sk-card);
  cursor:pointer; overflow:hidden; transition:border-color .15s, background .15s; }
.v3r-pays > a:hover{ border-color:var(--sk-brand); }
.v3r-pays > a.active{ border-color:var(--sk-brand); background:var(--sk-brand-bg2); }
.v3r-pays > a.active::after{ content:'\2713'; position:absolute; right:0; bottom:0;
  width:17px; height:17px; line-height:17px; text-align:center; font-size:9px; font-weight:700;
  color:#fff; background:var(--sk-brand); border-radius:8px 0 0 0; }
html[data-skin="dark"] .v3r-pays > a.active{ background:var(--sk-head); }
.v3r-pays img{ max-height:26px; max-width:86px; width:auto; object-fit:contain; display:block; }
.v3r-pays > a > span{ font-size:12.5px; color:var(--sk-ink-2); text-align:center; line-height:1.3; }
.v3r-pays > a.active > span{ color:var(--sk-brand-d); font-weight:600; }
html[data-skin="dark"] .v3r-pays > a.active > span{ color:var(--sk-brand-l); }
/* 有手续费的通道，费率直接压在卡片左上角，不再只写在下面一行灰字里 */
.v3r-pays .fee{ position:absolute; left:7px; top:5px; font-style:normal; font-size:10.5px; color:var(--sk-warn); }

/* 选中通道的补充说明（转账账号、payssion 二级通道、速买配…） */
.v3r-payx{ margin-top:14px; padding:13px 15px; border:1px solid var(--sk-border); border-radius:var(--sk-radius);
  background:var(--sk-card-2); font-size:12.5px; line-height:1.75; color:var(--sk-ink-2); }
.v3r-payx > b{ display:block; margin-bottom:4px; font-size:12.5px; color:var(--sk-ink); }
.v3r-payx label{ display:block; margin:0 0 9px; font-size:12.5px; font-weight:600; color:var(--sk-ink); }
.v3r-payx .v3r-pays > a{ height:44px; }
.v3r-payx .v3r-pays{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }

/* ── 右栏结算卡 ── */
.v3r-sum{ position:sticky; top:14px; }
.v3r-sum .r{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:6px 0; font-size:12.5px; }
.v3r-sum .r .k{ color:var(--sk-mut); }
.v3r-sum .r .k em{ font-style:normal; color:var(--sk-warn); }
.v3r-sum .r .v{ color:var(--sk-ink); text-align:right; overflow-wrap:anywhere;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3r-sum .hr{ height:1px; margin:10px 0; background:var(--sk-border-2); }
.v3r-sum .big{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.v3r-sum .big .k{ font-size:12.5px; color:var(--sk-mut); }
.v3r-sum .big .v{ font-size:25px; font-weight:800; color:var(--sk-danger); letter-spacing:-.5px;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
/* 充值之后余额变成多少 —— 这是用户点付款前最后想确认的那个数 */
.v3r-sum .after{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding:9px 12px; border-radius:var(--sk-radius-sm);
  background:var(--sk-success-bg); color:var(--sk-success); font-size:12px; }
.v3r-sum .after b{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-variant-numeric:tabular-nums; }
.v3r-sum .go{ display:flex; align-items:center; justify-content:center; width:100%; height:42px;
  margin-top:16px; border-radius:10px; font-size:14px; font-weight:600; }
.v3r-sum .go.off{ opacity:.5; pointer-events:none; }
.v3r-sum .acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }
.v3r-sum .acts .btn{ height:28px; padding:0 11px !important; font-size:12px;
  display:inline-flex; align-items:center; }

/* 确认支付弹层（layer 里那一小块） */
/* 确认支付弹窗（layer type:1，DOM 在 cost.html 的 #layerConfirmPay）
   原来是两个一样的灰块（支付方式 / 本次支付）+ 一个按钮 + 一行灰字，
   金额跟支付方式同级、手续费看不见，两步流程也没有交代。
   改成「金额当主视觉 + 明细 + 主按钮 + 回来确认」四段。 */
.v3r-confirm{ padding:4px 2px 2px; }

/* 金额区：这个弹窗的主角 */
.v3r-confirm .amt-box{ text-align:center; padding:6px 0 18px; }
.v3r-confirm .amt-box .amt{ display:flex; align-items:baseline; justify-content:center; gap:2px;
  color:var(--sk-danger); line-height:1.1; }
.v3r-confirm .amt-box .amt i{ font-style:normal; font-size:17px; font-weight:600; }
.v3r-confirm .amt-box .amt b{ font-size:31px; font-weight:700; letter-spacing:-.5px;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3r-confirm .amt-box .lb{ display:block; margin-top:5px; font-size:12px; color:var(--sk-mut); }

/* 明细：支付方式 / 充值金额 / 手续费 */
.v3r-confirm .rows{ border:1px solid var(--sk-border); border-radius:var(--sk-radius-lg);
  background:var(--sk-card-2); overflow:hidden; margin-bottom:16px; }
.v3r-confirm .rows .r{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 13px; font-size:12.5px; border-bottom:1px solid var(--sk-border-2); }
.v3r-confirm .rows .r:last-child{ border-bottom:0; }
.v3r-confirm .rows .k{ color:var(--sk-mut); flex:none; }
.v3r-confirm .rows .k em{ font-style:normal; margin-left:4px; padding:1px 5px; border-radius:3px;
  font-size:11px; background:var(--sk-warn-bg); color:var(--sk-warn); }
.v3r-confirm .rows .v{ font-weight:600; color:var(--sk-ink); min-width:0; text-align:right; }
.v3r-confirm .rows .v.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-variant-numeric:tabular-nums; }
/* 支付方式那行：logo 跟名字并排 */
.v3r-confirm .rows .v.pm{ display:inline-flex; align-items:center; gap:7px; }
.v3r-confirm .rows .v.pm img{ height:18px; width:auto; max-width:74px; object-fit:contain;
  border-radius:3px; flex:none; }

/* 主按钮 */
.v3r-confirm .btn{ width:100%; height:40px; display:flex; align-items:center; justify-content:center;
  gap:6px; border-radius:10px; font-size:13.5px; font-weight:600; }

/* 「去支付」是新窗口打开的，回来还得点一下才刷新余额——这一步得说清楚 */
.v3r-confirm .tip{ margin:13px 0 9px; padding-top:12px; border-top:1px dashed var(--sk-border);
  font-size:11.5px; line-height:1.65; color:var(--sk-mut); text-align:center; }
.v3r-confirm .later{ display:flex; align-items:center; justify-content:center; height:34px;
  border:1px solid var(--sk-border); border-radius:9px; font-size:12.5px;
  color:var(--sk-ink-2) !important; cursor:pointer; transition:border-color .15s,color .15s; }
.v3r-confirm .later:hover{ border-color:var(--sk-brand); color:var(--sk-brand) !important; }

/* layer 外框：默认那身皮跟 v3 不搭，标题栏重配一下色 */
.layui-layer.v3r-paylayer{ border-radius:var(--sk-radius-lg); overflow:hidden;
  box-shadow:var(--sk-sh-lg); background:var(--sk-card); }
.layui-layer.v3r-paylayer .layui-layer-title{ height:46px; line-height:46px; padding:0 46px 0 18px;
  font-size:14px; font-weight:600; color:var(--sk-ink);
  background:var(--sk-card); border-bottom:1px solid var(--sk-border); }
.layui-layer.v3r-paylayer .layui-layer-content{ padding:16px 18px 18px; background:var(--sk-card); }
.layui-layer.v3r-paylayer .layui-layer-setwin{ top:15px; right:16px; }
.layui-layer.v3r-paylayer .layui-layer-setwin .layui-layer-close1{ background-position:1px -40px; opacity:.5; }
.layui-layer.v3r-paylayer .layui-layer-setwin .layui-layer-close1:hover{ opacity:1; }

@media(max-width:900px){
  .v3r-two{ grid-template-columns:1fr; }
  .v3r-sum{ position:static; }
}

/* ══════════════ 工单详情弹窗（member/worksystem_view）══════════════
   样式原来是写在模板里的一段 <style>（靠「{ 后面加空格」绕 Smarty 定界符），
   搬到这里统一管，模板只剩结构。
   版式还是「左栏进度 + 属性 / 右栏对话 / 底部回复」三块，
   零件换成 v3 的口径：徽章带色点、属性两列对齐、次要动作描边不填色。 */
#wkv .modal-header{ padding:15px 18px; border-bottom:1px solid var(--sk-border); }
#wkv .modal-title{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600;
  color:var(--sk-ink); min-width:0; }
#wkv .modal-title > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 状态徽章：跟列表页的 .v3-b 一个口径（小色点 + 浅底） */
#wkv .wkv-spill{ display:inline-flex; align-items:center; gap:5px; flex:none;
  height:22px; padding:0 9px; border-radius:11px; font-size:12px; font-weight:600; }
#wkv .wkv-spill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
#wkv .wkv-spill.ok{ background:var(--sk-success-bg); color:var(--sk-success); }
#wkv .wkv-spill.wait{ background:var(--sk-warn-bg); color:var(--sk-warn); }
#wkv .wkv-spill.rep{ background:var(--sk-brand-bg); color:var(--sk-brand-d); }
/* 右上角两个图标按钮：原来是绿底「刷新」+ 深色「关闭」，太抢戏，压成描边图标 */
#wkv .modal-header .pull-right .btn{ width:28px; height:28px; padding:0; margin-left:6px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:7px;
  background:var(--sk-card) !important; border:1px solid var(--sk-border) !important;
  color:var(--sk-mut) !important; }
#wkv .modal-header .pull-right .btn:hover{ border-color:var(--sk-brand) !important;
  color:var(--sk-brand) !important; }
#wkv .modal-body{ padding:0 !important; }

#wkv .wkv-b{ display:flex; align-items:stretch; }

/* ── 左栏 ── */
#wkv .wkv-side{ width:246px; flex-shrink:0; border-right:1px solid var(--sk-border);
  background:var(--sk-card-2); padding:18px 18px 20px; display:flex; flex-direction:column; }
/* 竖向三步：未到=空心灰点，进行中=主色描边+光晕，已完成=主色实心打勾 */
#wkv .wkv-vst{ position:relative; padding-left:27px; padding-bottom:17px; }
/* 最后一步用 .is-last 点名，不能用 :last-of-type——.wkv-vst 后面还有 .wkv-meta，
   同样是 div，last-of-type 会落到它身上，于是第三步下面白多出一截线 */
#wkv .wkv-vst.is-last{ padding-bottom:0; }
#wkv .wkv-vst::before{ content:""; position:absolute; left:8px; top:19px; bottom:1px; width:2px;
  background:var(--sk-border-3); border-radius:1px; }
#wkv .wkv-vst.is-last::before{ display:none; }
#wkv .wkv-vst.done::before{ background:var(--sk-brand); }
#wkv .wkv-vst .d{ position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--sk-border-3); background:var(--sk-card); box-sizing:border-box; }
#wkv .wkv-vst.active .d{ border-color:var(--sk-brand); box-shadow:0 0 0 3px var(--sk-ring); }
#wkv .wkv-vst.done .d{ background:var(--sk-brand); border-color:var(--sk-brand); }
#wkv .wkv-vst.done .d::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
#wkv .wkv-vst .l{ font-size:13px; line-height:18px; color:var(--sk-mut); }
#wkv .wkv-vst.active .l,#wkv .wkv-vst.done .l{ color:var(--sk-ink); font-weight:600; }

/* 属性：两列，标签不折行、值靠右 */
#wkv .wkv-meta{ margin-top:16px; padding-top:14px; border-top:1px solid var(--sk-border); }
#wkv .wkv-meta .r{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:12.5px; padding:7px 0; }
#wkv .wkv-meta .r + .r{ border-top:1px solid var(--sk-border-2); }
#wkv .wkv-meta .r .k{ color:var(--sk-mut); flex:none; }
#wkv .wkv-meta .r .v{ color:var(--sk-ink); font-weight:500; text-align:right; min-width:0;
  word-break:break-all; }
#wkv .wkv-meta .r .v.mono{ font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-variant-numeric:tabular-nums; }
#wkv .wkv-meta .r .v a{ color:var(--sk-brand); }

/* 左栏底部动作：关闭工单是正常流程不是危险操作，描边就够 */
/* 按住 border-box：BS3 的 .btn 自带左右 padding，content-box 下 width:100% 会顶出左栏 */
#wkv .wkv-side .btn{ box-sizing:border-box; width:100%; height:34px; padding:0 12px;
  margin-top:auto; display:flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:12.5px; font-weight:500; }
/* 变体只改配色，几何一律继承上面那条 */
#wkv .wkv-side .btn.btn-danger{ background:var(--sk-card) !important; color:var(--sk-danger) !important;
  border:1px solid var(--sk-border) !important; }
#wkv .wkv-side .btn.btn-danger:hover{ border-color:var(--sk-danger) !important;
  background:var(--sk-danger-bg) !important; }
#wkv .wkv-side .btn.btn-success{ background:var(--sk-success-bg) !important;
  color:var(--sk-success) !important; border:0 !important; opacity:1; cursor:default; }

/* ── 右栏对话 ── */
#wkv .wkv-main{ flex:1; min-width:0; padding:18px 20px; background:var(--sk-card); }
#wkv .wkv-thread{ max-height:54vh; overflow-y:auto; display:flex; flex-direction:column; gap:16px;
  padding:2px; }
#wkv .wkv-msg{ display:flex; gap:11px; align-items:flex-start; max-width:88%; }
#wkv .wkv-msg.eng{ flex-direction:row-reverse; align-self:flex-end; }
#wkv .wkv-av img{ width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:1px solid var(--sk-border); }
#wkv .wkv-eng{ width:34px; height:34px; border-radius:50%; background:var(--sk-brand-bg);
  color:var(--sk-brand); display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0; }
#wkv .wkv-bubble{ background:var(--sk-card-2); border:1px solid var(--sk-border);
  border-radius:12px; border-top-left-radius:3px; padding:11px 14px; min-width:120px; }
#wkv .wkv-msg.eng .wkv-bubble{ background:var(--sk-brand-bg2); border-color:transparent;
  border-radius:12px; border-top-right-radius:3px; }
#wkv .wkv-bhd{ display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px; }
#wkv .wkv-bhd .nm{ font-weight:600; color:var(--sk-ink); }
#wkv .wkv-bhd .tm{ color:var(--sk-faint); display:inline-flex; align-items:center; gap:4px; }
#wkv .wkv-bd{ color:var(--sk-ink-2); font-size:13.5px; line-height:1.7; word-break:break-word; }
#wkv .wkv-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#wkv .wkv-thumbs .t{ position:relative; }
#wkv .wkv-thumbs img{ width:66px; height:66px; border-radius:8px; object-fit:cover; cursor:zoom-in;
  border:1px solid var(--sk-border); }
#wkv .wkv-thumbs .icon-minus-sign{ position:absolute; right:-7px; top:-7px; background:var(--sk-card);
  border-radius:50%; }
/* 上传图片：气泡里的次要动作，压成一行浅色小按钮 */
#wkv .wkv-upload{ margin-top:9px; }
#wkv .wkv-upload .btn{ height:26px; padding:0 10px; display:inline-flex; align-items:center; gap:5px;
  border-radius:7px; font-size:12px; background:var(--sk-card) !important;
  border:1px solid var(--sk-border) !important; color:var(--sk-mut) !important; }
#wkv .wkv-upload .btn:hover{ border-color:var(--sk-brand) !important; color:var(--sk-brand) !important; }
#wkv .wkv-upload .btn .text-gray{ color:var(--sk-faint) !important; font-size:11.5px; }
#wkv .wkv-alert{ display:flex; align-items:flex-start; gap:9px; background:var(--sk-warn-bg);
  color:var(--sk-warn); border-radius:var(--sk-radius-lg); padding:11px 14px; font-size:12.5px;
  line-height:1.6; }

/* ── 底部回复 ── */
#wkv .modal-footer{ padding:14px 20px; border-top:1px solid var(--sk-border);
  background:var(--sk-card-2); }
#wkv .wkv-reply{ display:flex; gap:11px; align-items:flex-start; width:100%; }
#wkv .wkv-reply .wkv-av img{ width:34px; height:34px; border-radius:50%; }
#wkv .wkv-reply .box{ flex:1; min-width:0; }
#wkv .wkv-reply textarea{ border-radius:10px; resize:vertical; font-size:13px; padding:9px 12px; }
#wkv .wkv-reply .box .foot{ display:flex; justify-content:flex-end; margin-top:9px; }
#wkv .wkv-reply .box .foot .btn{ height:34px; padding:0 20px; display:inline-flex;
  align-items:center; border-radius:9px; font-size:13px; font-weight:500; }

@media (max-width:640px){
  #wkv .wkv-b{ flex-direction:column; }
  #wkv .wkv-side{ width:auto; border-right:0; border-bottom:1px solid var(--sk-border); }
  #wkv .wkv-msg{ max-width:100%; }
}

/* ══════════════ 推荐返利（invite 插件 · 会员端）══════════════
   四个页面原来都是 BS3 裸表 + panel-footer 分页：邀请链接是两个占满宽度的
   input，返佣比例做成一张 12 列的表头（三个产品横着并排、每个产品占四列，
   产品少的时候后面全是「/」），佣金那五个数字挤在一行 span 里靠 margin-right
   拉开。现在统一到 v3：列表走 member_list_v3，这里只补三个专有零件。 */

/* ── 邀请链接 / 邀请码 ── */
.v3i-share{ display:flex; flex-direction:column; gap:10px; }
.v3i-share > .f{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.v3i-share .k{ flex:none; width:76px; font-size:12.5px; color:var(--sk-mut); }
.v3i-share .box{ flex:1; min-width:200px; display:flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--sk-border-3); border-radius:var(--sk-radius); background:var(--sk-card-2); }
.v3i-share .box > input{ flex:1; min-width:0; height:34px; padding:0 12px; border:0; outline:0;
  background:transparent; color:var(--sk-ink); font-size:12.5px;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; }
.v3i-share .box > a{ flex:none; display:flex; align-items:center; gap:5px; padding:0 14px;
  border-left:1px solid var(--sk-border-3); background:var(--sk-head);
  font-size:12.5px; color:var(--sk-ink-2) !important; cursor:pointer; white-space:nowrap; }
.v3i-share .box > a:hover{ color:var(--sk-brand) !important; background:var(--sk-brand-bg2); }
html[data-skin="dark"] .v3i-share .box > a:hover{ background:var(--sk-card-2); }
.v3i-share .tip{ margin-top:2px; font-size:11.5px; color:var(--sk-mut); }

/* ── 返佣比例：一个产品一张小卡，比原来那张 12 列的表好扫多了 ── */
.v3i-rates{ display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:10px; }
.v3i-rates > .r{ border:1px solid var(--sk-border-2); border-radius:var(--sk-radius);
  background:var(--sk-card-2); padding:12px 14px; }
.v3i-rates > .r > b{ display:block; margin-bottom:9px; font-size:12.5px; font-weight:600; color:var(--sk-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v3i-rates .x{ display:flex; gap:14px; flex-wrap:wrap; }
.v3i-rates .x > span{ display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--sk-mut); }
.v3i-rates .x em{ font-style:normal; font-size:14px; font-weight:700; color:var(--sk-brand);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
html[data-skin="dark"] .v3i-rates .x em{ color:var(--sk-brand-l); }
.v3i-rates .x em.off{ color:var(--sk-faint); font-weight:500; }

/* ── 佣金总览：五个数字一条，可提现的那个最大 ── */
.v3i-stats{ display:flex; align-items:center; gap:26px; padding:16px 20px; flex-wrap:wrap; }
.v3i-stats > .s{ display:flex; flex-direction:column; gap:3px; }
.v3i-stats .k{ font-size:11.5px; color:var(--sk-mut); }
.v3i-stats .v{ font-size:16px; font-weight:700; color:var(--sk-ink);
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-variant-numeric:tabular-nums; }
.v3i-stats > .s.k-main .v{ font-size:24px; color:var(--sk-success); letter-spacing:-.5px; }
.v3i-stats .v.k-wait{ color:var(--sk-warn); }
.v3i-stats > .sp{ flex:1; min-width:8px; }
.v3i-stats .acts{ display:flex; gap:8px; flex-wrap:wrap; }
.v3i-stats .acts .btn{ height:32px; display:inline-flex; align-items:center; gap:6px;
  padding:0 15px !important; font-size:13px; }
@media(max-width:760px){
  .v3i-stats{ gap:16px 20px; }
  .v3i-stats > .sp{ display:none; }
  .v3i-stats .acts{ width:100%; }
}