/* ============================================================================
   客户中心皮肤  v1.30.9 —— 密码/账号/验证码输入框补全 autocomplete 语义，避免浏览器自动填错

   这一版整体收紧了一档，往「控制台」的方向走：
   留白变小、字号压低、行高收紧、卡片圆角和投影都减弱，
   目标是一屏能看到更多东西，而不是一屏三张大卡片。

   跟 v1.0 的主要差别（都在下面的变量里，要整体再松/再紧改这里就够）：
       正文       14px  → 13px
       侧栏宽     236px → 204px
       顶栏高     62px  → 52px
       卡片内边距 20/22 → 14/16
       卡片圆角   10px  → 6px
       表格行高   ~46px → ~38px
       输入框高   40px  → 32px
       按钮高     ~38px → 30px

   这个文件是「盖」在魔方官方 clientarea/default 之上的一层皮：
   模板结构、类名、JS 钩子全部沿用官方的，这里只改外观。
   加载顺序在 app.min.css、global.css、responsive.css 和后台 custom.css 之后。

   目录：
     1. 变量与基础校正      7. 按钮
     2. 顶栏                8. 表单控件
     3. 左侧菜单            9. 徽章/提示/分页/标签页/下拉/弹窗
     4. 内容区与标题条     10. 页脚
     5. 卡片               11. 响应式
     6. 表格               12. 官方样式纠偏
                           13. 列表页与移动端侧栏
                           14. 登录/注册/找回密码
     ……（中间是各业务页的单独修正，按页分节）
     32. 第三方登录块      33. 图形验证码高度

   v1.22.0 改了什么：
     · 修复「支付宝快速登录图标不见了」——
       上一版 login.tpl 里那段清空壳的脚本会顺手清 .lcl-oauth 下的 <li>，
       而插件的图标常常是字体图标（画在 ::before 上）或纯背景图的空 <span>，
       「有没有内容」的递归判断看不见它们，于是整条被删。
       现在脚本明令不许碰 .lcl-oauth，CSS 也不再用 overflow:hidden + 只给 max-*。
     · 修复「图形验证码跟输入框不等高」——
       改成由 includes/verify.tpl 的脚本**量**同一组输入框的实际高度再写到图上，
       登录/注册/找回密码/绑定/安全中心九个弹窗全部对齐，装了验证码插件也一样。
   ========================================================================= */

/* ---------------------------- 1. 变量与基础校正 ---------------------------- */
:root{
  --blue:#1274d6; --blue-h:#2e8be7; --blue-a:#1e7edd; --blue-d:#0a5aa8; --blue-l:#eaf3fd;
  --green:#00a884; --amber:#e19b2e; --red:#e2562f;
  --ink:#151a21; --ink2:#4d5561; --ink3:#6b7280; --ink4:#98a0ac;
  --line:#e8ebef; --line-2:#f1f3f6; --bg:#f7f8fa; --card:#fff;
  --r:6px; --r-lg:8px;
  --ctl-h:32px;              /* 输入框/按钮统一高度；弹窗里会放大到 40px */
  --sh1:0 1px 2px rgba(18,44,84,.04);
  --sh2:0 4px 14px rgba(20,45,85,.07);
  --sh3:0 10px 28px rgba(18,44,84,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
  --top-h:66px; --side-w:240px;
  --gap:12px;
}

html{ -webkit-tap-highlight-color:transparent; }

body.lcc{
  font-family:"HarmonyOS Sans SC","MiSans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  font-size:13px; line-height:1.6; color:var(--ink); background:var(--bg);
}
.lcc a{ color:var(--blue); text-decoration:none; }
.lcc a:hover{ color:var(--blue-h); text-decoration:none; }
.lcc h1,.lcc h2,.lcc h3,.lcc h4,.lcc h5,.lcc h6{ color:var(--ink); font-weight:600; letter-spacing:-.1px; }
.lcc hr{ margin:12px 0; border-color:var(--line); }
.lcc p{ margin-bottom:.6rem; }
.lcc .text-muted{ color:var(--ink3)!important; }
.lcc .font-size-18{ font-size:15px!important; }
.lcc .font-size-16{ font-size:14px!important; }
.lcc .font-size-14{ font-size:13px!important; }
.lcc small,.lcc .small{ font-size:12.5px; }
.lcc ::selection{ background:rgba(18,116,214,.16); }
.lcc [style*="color:#979699"],.lcc [style*="color: #979699"]{ color:var(--ink3)!important; }

/* 官方模板里到处是 mt-4 / mb-3 / mt-5，在紧凑版里显得太空，统一收一档 */
.lcc .mt-4,.lcc .my-4{ margin-top:14px!important; }
.lcc .mb-4,.lcc .my-4{ margin-bottom:14px!important; }
.lcc .mt-5,.lcc .my-5{ margin-top:20px!important; }
.lcc .mb-5,.lcc .my-5{ margin-bottom:20px!important; }
.lcc .p-4{ padding:14px!important; }
.lcc .p-5{ padding:20px!important; }

.lcc ::-webkit-scrollbar{ width:8px; height:8px; }
.lcc ::-webkit-scrollbar-thumb{ background:#d2d8e0; border-radius:5px; }
.lcc ::-webkit-scrollbar-thumb:hover{ background:#bac3ce; }
.lcc ::-webkit-scrollbar-track{ background:transparent; }

/* ------------------------------ 2. 顶栏 ------------------------------ */
.lcc #page-topbar{
  height:var(--top-h); background:#fff;
  border-bottom:1px solid var(--line); box-shadow:none;
}
.lcc #page-topbar .navbar-header{
  height:var(--top-h); padding:0 12px 0 0; max-width:none;
  display:flex; align-items:center; justify-content:space-between;
}
.lcc .navbar-brand-box{
  width:var(--side-w); padding:0 6px 0 14px; background:transparent;
  display:flex; align-items:center;
}
.lcc .navbar-brand-box .logo{ line-height:1; display:inline-flex; align-items:center; }
.lcc .navbar-brand-box img{ height:42px; width:auto; max-width:210px; }
.lcc .logo-light{ display:none; }

/* ⚠ 这几条必须带 !important：
   官方 app.min.css 里的 #vertical-menu-btn（ID，1,0,0）会把汉堡的字号压回 16px，
   而本文件后面那条 .lcc #page-topbar .header-item（也带 ID，1,2,0）里的 height:auto
   会把按钮高度压成「跟着图标走」——线上看到的就是一个 44×15 的扁条、图标只有 15px。
   两个都比 .lcc .lcc-burger（0,2,0）权重高，所以只能用 !important 锁死。 */
.lcc .lcc-burger{
  width:42px!important; height:42px!important; padding:0!important; margin-left:0;
  display:inline-flex!important; align-items:center; justify-content:center;
  border:0; border-radius:9px; background:transparent;
  color:var(--ink2); font-size:24px!important; line-height:1!important; box-shadow:none!important;
}

.lcc .lcc-icobtn{
  position:relative; width:42px!important; height:42px!important; padding:0!important; margin-left:4px;
  display:inline-flex!important; align-items:center; justify-content:center;
  border:0; border-radius:9px; background:transparent;
  color:var(--ink2); font-size:22px!important; line-height:1!important; box-shadow:none!important;
}
/* ⚠ 悬停底色只给真的有指针的设备：手机上点一下这个灰底会「粘」在按钮上不走，
   看起来就像按钮一直是选中态。 */
@media (hover:hover) and (pointer:fine){
  .lcc .lcc-burger:hover{ background:var(--line-2); color:var(--blue); }
  .lcc .lcc-icobtn:hover{ background:var(--line-2); color:var(--blue); }
  .lcc .lcc-user .btn:hover{ background:var(--line-2); }
}
/* 图标本体跟着按钮的字号走，别再被 .bx 自己的字号截胡 */
.lcc .lcc-burger > i,
.lcc .lcc-icobtn > i{ font-size:inherit!important; line-height:1!important; vertical-align:middle; }
/* 点完之后留一圈蓝色胶囊描边（Bootstrap 的 .btn:focus 阴影）很难看，
   鼠标点击不留痕，键盘 Tab 仍然给焦点圈，可访问性不丢。 */
.lcc .lcc-burger:focus,.lcc .lcc-icobtn:focus,
.lcc .lcc-user .btn:focus{ box-shadow:none!important; outline:0; }
.lcc .lcc-burger:focus-visible,.lcc .lcc-icobtn:focus-visible,
.lcc .lcc-user .btn:focus-visible{ box-shadow:0 0 0 3px rgba(18,116,214,.22)!important; }
.lcc #header-lang-img{ height:19px!important; width:auto; border-radius:3px; }
.lcc .lcc-dot{
  position:absolute; top:2px; right:1px; min-width:15px; height:15px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; background:#d0431d; color:#fff; font-size:10.5px; font-weight:600; line-height:1;
}

.lcc .lcc-user .btn{ padding:0 10px 0 6px; height:42px!important; border:0; box-shadow:none; background:transparent; border-radius:var(--r); }
.lcc .lcc-avatar{
  width:32px; height:32px; flex:none; margin-right:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--blue); color:#fff;
  font-size:14.5px; font-weight:600; line-height:1;
  /* 头像里正常只有 1~3 个字（模板按用户名首字截的）。
     万一后台给了别的格式截出一长串，这两条保证它只会被裁掉、不会撑破圆圈。 */
  overflow:hidden; white-space:nowrap;
}
.lcc .lcc-uname{ max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14.5px; color:var(--ink); }
.lcc .lcc-user .bx-chevron-down{ margin-left:1px; color:var(--ink3); font-size:14px; }
.lcc .lcc-login{
  height:36px; padding:0 18px; display:inline-flex; align-items:center;
  border-radius:var(--r); background:var(--blue); color:#fff!important; font-size:14px; font-weight:500;
}
.lcc .lcc-login:hover{ background:var(--blue-h); }

/* 顶栏右侧导航项：图标 + 文字。
   只有图标没人知道是干嘛的，所以每一项都带名字。
   窄屏分两步退让：先只留图标，再把次要入口（帮助/工单/费用）收起来。 */
.lcc .lcc-navit{
  position:relative; height:42px; padding:0 12px; margin-left:2px;
  display:inline-flex; align-items:center; gap:7px;
  border-radius:9px; background:transparent; color:var(--ink2)!important;
  font-size:14px; line-height:1; white-space:nowrap;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.lcc .lcc-navit > i{ font-size:20px; line-height:1; flex:none; }
@media (hover:hover) and (pointer:fine){
  .lcc .lcc-navit:hover{ background:var(--line-2); color:var(--blue)!important; }
}
.lcc .lcc-navit:active{ background:#e9edf3; }
/* 未读角标跟着图标走，不要顶到文字上 */
.lcc .lcc-navit .lcc-dot{ top:4px; left:26px; right:auto; }

@media (max-width:1199px){
  .lcc .lcc-navit{ padding:0 9px; gap:0; }
  .lcc .lcc-navit > span{ display:none; }      /* 只留图标 */
  .lcc .lcc-navit > i{ font-size:22px; }
  .lcc .lcc-navit .lcc-dot{ left:auto; right:2px; top:3px; }
}
@media (max-width:767px){
  /* 手机上只保留消息、购物车和用户菜单，其余入口在左侧菜单里都有 */
  .lcc .lcc-navit[href="/knowledgebase"],
  .lcc .lcc-navit[href="/supporttickets"],
  .lcc .lcc-navit[href="/billing"]{ display:none; }
}

/* --------------------------- 3. 左侧菜单 --------------------------- */
.lcc .vertical-menu{
  width:var(--side-w); top:var(--top-h); padding-top:4px;
  background:#fff; border-right:1px solid var(--line); box-shadow:none;
}
.lcc #sidebar-menu{ padding:6px 0 14px; }
/* 行高和字号：之前 13px / 7px 内边距，放在 1440 宽的控制台里偏小也偏挤，
   跟现网那套比一眼就看得出来。这里统一成 14px 字、38px 行。 */
.lcc #sidebar-menu ul li a{
  margin:2px 8px; padding:11px 13px; border-radius:var(--r);
  display:flex; align-items:center; gap:10px; position:relative;
  color:var(--ink2); font-size:14.5px; font-weight:400; line-height:1.4;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
/* 图标那一列固定宽度，后台没配图标的条目（SSL、发票管理这种）由模板补一个小圆点，
   占住同样的宽度 —— 不然那几行的文字会比别人往左突出去，看着参差不齐。 */
.lcc #sidebar-menu ul li a i{
  flex:none; width:19px; min-width:19px; margin:0; text-align:center;
  font-size:18px; color:var(--ink3); line-height:1; transition:color .16s var(--ease);
}
.lcc #sidebar-menu ul li a i.lcc-ico-dot{
  position:relative; font-size:0;
}
.lcc #sidebar-menu ul li a i.lcc-ico-dot::before{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px;
  margin:-3px 0 0 -3px; border-radius:50%; background:#c3ccd7;
  transition:background-color .16s var(--ease);
}
.lcc #sidebar-menu ul li a span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lcc #sidebar-menu ul li a:hover{ background:var(--line-2); color:var(--ink); }
.lcc #sidebar-menu ul li a:hover i{ color:var(--blue); }
.lcc #sidebar-menu ul li a:hover i.lcc-ico-dot::before{ background:var(--blue); }
/* 当前项：浅蓝底 + 蓝字 + 左边一道竖条，扫一眼就知道自己在哪 */
.lcc #sidebar-menu ul li.mm-active > a,
.lcc #sidebar-menu ul li a.active,
.lcc #sidebar-menu ul li a.mm-active{
  background:var(--blue-l); color:var(--blue); font-weight:500;
}
.lcc #sidebar-menu ul li.mm-active > a i,
.lcc #sidebar-menu ul li a.active i,
.lcc #sidebar-menu ul li a.mm-active i{ color:var(--blue); }
.lcc #sidebar-menu ul li.mm-active > a i.lcc-ico-dot::before,
.lcc #sidebar-menu ul li a.active i.lcc-ico-dot::before{ background:var(--blue); }
.lcc #sidebar-menu > ul > li > a.active::before,
.lcc #sidebar-menu > ul > li.mm-active > a::before{
  content:""; position:absolute; left:-4px; top:50%; width:3px; height:16px;
  margin-top:-8px; border-radius:0 3px 3px 0; background:var(--blue);
}

/* 左侧菜单的展开箭头。
   ⚠ 官方 app.min.css 这里是 content:"\F0140" + font-family:"Material Design Icons"，
     也就是说每个有子菜单的页面（几乎是全部页面）都会为了这一个箭头
     去下载 materialdesignicons-webfont.woff2 —— 270 KB，只为画一个 ∨。
     这里改成用两条边框拼的纯 CSS 箭头，一个字节都不用下。
     float:right 是官方给的，位置照旧，只是把字形换成了边框。 */
.lcc #sidebar-menu ul li a.has-arrow::after{
  content:""; font-family:inherit;
  width:7px; height:7px; margin-top:-2px; margin-right:2px;
  border-right:1.6px solid var(--ink4); border-bottom:1.6px solid var(--ink4);
  border-radius:0 0 1px 0;
  transform:rotate(45deg); transform-origin:center;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.lcc #sidebar-menu ul li a.has-arrow[aria-expanded="true"]::after,
.lcc #sidebar-menu ul li.mm-active > a.has-arrow::after{
  transform:rotate(-135deg); margin-top:2px;
  border-right-color:var(--blue); border-bottom-color:var(--blue);
}

.lcc #sidebar-menu .sub-menu{ padding:2px 0 4px; }
.lcc #sidebar-menu .sub-menu li a{ position:relative; padding:9px 10px 9px 42px; font-size:13.5px; }
.lcc #sidebar-menu .sub-menu li a i{ display:none; }
.lcc #sidebar-menu .sub-menu li a::before{
  content:""; position:absolute; left:26px; top:50%; width:4px; height:4px;
  margin-top:-2px; border-radius:50%; background:#c8d0da;
}
.lcc #sidebar-menu .sub-menu li a:hover::before,
.lcc #sidebar-menu .sub-menu li.mm-active > a::before{ background:var(--blue); }
.lcc #sidebar-menu .sub-menu .sub-menu li a{ padding-left:50px; }
.lcc #sidebar-menu .sub-menu .sub-menu li a::before{ left:36px; }

.lcc .lcc-menu-foot{
  margin:10px 10px 16px; padding-top:10px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.lcc .lcc-menu-foot a{
  height:36px; display:flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--r); font-size:13.5px; font-weight:500;
}
.lcc .lcc-menu-foot i{ font-size:16px; }
.lcc .lcc-menu-buy{ background:var(--blue); color:#fff!important; }
.lcc .lcc-menu-buy:hover{ background:var(--blue-h); color:#fff!important; }
.lcc .lcc-menu-tk{ background:#fff; border:1px solid var(--line); color:var(--ink2)!important; }
.lcc .lcc-menu-tk:hover{ border-color:#a8c9ea; color:var(--blue)!important; }

/* ------------------------- 4. 内容区与标题条 ------------------------- */
.lcc .main-content{ margin-left:var(--side-w); }
/* 页脚那行版权已按要求去掉，正文不用再为它留 72px。
   ⚠ 如果把 footer.tpl 里的 <footer> 放回来，这里要改回 72px ——
   官方的 .footer 是 position:absolute 吸在底部的，不留高度会被卡片压住。 */
.lcc .page-content{ padding:calc(var(--top-h) + 20px) 0 24px; }
/* ⚠ 以前这里写了 max-width:1560px，宽屏上内容被居中，两边各空出一两百像素的灰带，
   看着像页面没做满。控制台类页面应该铺满，所以改成不限宽，左右各留 16px 气口。 */
.lcc .container-fluid{ max-width:none; padding-left:16px; padding-right:16px; }

.lcc .lcc-phead{ margin-bottom:0; }
.lcc .page-title-box{ padding:0 0 10px; }
.lcc .lcc-phead-l{ display:flex; align-items:center; gap:2px; min-width:0; }
.lcc .backBtn{
  width:26px; height:26px; margin-left:-5px; flex:none;
  display:none; align-items:center; justify-content:center;
  border-radius:var(--r); color:var(--ink2);
}
.lcc .backBtn i{ font-size:21px; }
.lcc .backBtn:hover{ background:var(--line-2); color:var(--blue); }
.lcc .page-title-box h4{ font-size:16px!important; font-weight:600; color:var(--ink); }

.lcc .breadcrumb{ margin:0; padding:0; background:transparent; font-size:12px; }
.lcc .breadcrumb-item + .breadcrumb-item::before{ color:#c8ced8; padding:0 6px; }
.lcc .breadcrumb-item a{ color:var(--ink3); }
.lcc .breadcrumb-item a:hover{ color:var(--blue); }
.lcc .breadcrumb-item.active{ color:var(--ink2); }

/* 行间距：官方 .row 的槽宽在紧凑版里太大 */
.lcc .page-content .row{ margin-left:-6px; margin-right:-6px; }
.lcc .page-content .row > [class*="col-"]{ padding-left:6px; padding-right:6px; }

/* ------------------------------ 5. 卡片 ------------------------------ */
.lcc .card{
  margin-bottom:var(--gap); border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); box-shadow:none;
}
.lcc .card-body{ padding:14px 16px; }
.lcc .card-header{
  padding:10px 16px; border-bottom:1px solid var(--line);
  background:transparent; border-radius:var(--r) var(--r) 0 0;
}
.lcc .card-title{ margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.lcc .card-title-desc{ margin-bottom:10px; font-size:12px; color:var(--ink3); }
/* 卡片里那种「一个标签 + 一个大数字」的统计块 */
.lcc .card-body > p.text-muted:first-child{ margin-bottom:4px; font-size:12.5px; }
.lcc .card-body > h4{ font-size:21px; font-weight:600; letter-spacing:-.4px; }

/* ------------------------------ 6. 表格 ------------------------------ */
.lcc .table{ margin-bottom:0; color:var(--ink2); font-size:12.5px; }
.lcc .table thead th{
  padding:8px 12px; border-top:0; border-bottom:1px solid var(--line);
  background:#fafbfc; color:var(--ink2); font-size:12.5px; font-weight:600; white-space:nowrap;
}
.lcc .table tbody td{
  padding:9px 12px; border-top:1px solid var(--line-2); vertical-align:middle; line-height:1.55;
}
.lcc .table tbody tr:hover{ background:#fafbfc; }
/* ⚠ 这条以前写的是 .lcc .table td a，权重 (0,2,1) 压过了 .lcc .btn-primary (0,2,0)，
   于是表格里的「管理」按钮变成蓝底蓝字 —— 线上看到的就是一个个空蓝方块。
   所以必须把按钮排除掉，并且再给几个实心按钮补一条白字兜底。 */
.lcc .table td a:not(.btn){ color:var(--blue); }
.lcc .table td a:not(.btn):hover{ color:var(--blue-h); text-decoration:underline; }
.lcc .table td a.btn-primary,.lcc .table td a.btn-success,
.lcc .table td a.btn-danger,.lcc .table td a.btn-warning,
.lcc .table td a.btn-info{ color:#fff; }
.lcc .table td a.btn-outline-primary{ color:#1268c4; }
.lcc .table td a.btn-secondary,.lcc .table td a.btn-light{ color:var(--ink2); }
.lcc .table-bordered,.lcc .table-bordered td,.lcc .table-bordered th{ border-color:var(--line); }
.lcc .table .custom-control,.lcc .table .form-check{ min-height:0; }

/* ------------------------------ 7. 按钮 ------------------------------ */
.lcc .btn{
  height:32px; padding:0 14px; border-radius:var(--r);
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-size:13px; font-weight:400; line-height:1; letter-spacing:0;
  box-shadow:none!important;
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.lcc .btn-sm{ height:28px; padding:0 12px; font-size:13px; border-radius:5px; }
.lcc .btn-lg{ height:36px; padding:0 20px; font-size:14px; }
.lcc .btn-block{ width:100%; }
.lcc .btn i{ font-size:15px; line-height:1; }

.lcc .btn-primary{ background-color:var(--blue); border-color:var(--blue); color:#fff; }
.lcc .btn-secondary{ background-color:#fff; border-color:var(--line); color:var(--ink2); }
.lcc .btn-light{ background-color:#f2f5f8; border-color:transparent; color:var(--ink2); }
.lcc .btn-success{ background-color:var(--green); border-color:var(--green); color:#fff; }
.lcc .btn-danger{ background-color:var(--red); border-color:var(--red); color:#fff; }
.lcc .btn-warning{ background-color:var(--amber); border-color:var(--amber); color:#fff; }
.lcc .btn-info{ background-color:#3aa0d8; border-color:#3aa0d8; color:#fff; }
.lcc .btn-outline-primary{ background:#fff; border-color:#a8c9ea; color:#1268c4; }
.lcc .btn-outline-secondary,.lcc .btn-outline-light{ background:#fff; border-color:var(--line); color:var(--ink2); }
.lcc .btn-link{ height:auto; padding:0; color:var(--blue); }

@media (hover:hover) and (pointer:fine){
  .lcc .btn-primary:hover{ background-color:var(--blue-h); border-color:var(--blue-h); color:#fff; }
  .lcc .btn-secondary:hover{ background-color:#f6f8fa; border-color:#a8c9ea; color:var(--blue); }
  .lcc .btn-light:hover{ background-color:#e9edf3; color:var(--ink); }
  .lcc .btn-success:hover{ background-color:#13bf99; border-color:#13bf99; }
  .lcc .btn-danger:hover{ background-color:#ee6b46; border-color:#ee6b46; }
  .lcc .btn-warning:hover{ background-color:#efac48; border-color:#efac48; }
  .lcc .btn-info:hover{ background-color:#4fb0e6; border-color:#4fb0e6; }
  .lcc .btn-outline-primary:hover{ background:var(--blue-l); border-color:#8fbbe4; color:#0f65bd; }
  .lcc .btn-outline-secondary:hover,.lcc .btn-outline-light:hover{ background:#f6f8fa; border-color:#a8c9ea; color:var(--blue); }
}
.lcc .btn-primary:active,.lcc .btn-primary:focus,.lcc .show > .btn-primary.dropdown-toggle{
  background-color:var(--blue-a)!important; border-color:var(--blue-a)!important; color:#fff!important;
}
.lcc .btn:focus{ outline:none; box-shadow:0 0 0 2px rgba(18,116,214,.18)!important; }
.lcc .btn-group > .btn{ border-radius:var(--r); }

/* ---------------------------- 8. 表单控件 ---------------------------- */
.lcc .form-control,.lcc .custom-select{
  height:var(--ctl-h); padding:0 10px; border:1px solid #dce0e6; border-radius:var(--r);
  background-color:#fff; color:var(--ink); font-size:13px; line-height:calc(var(--ctl-h) - 2px); box-shadow:none;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.lcc textarea.form-control{ height:auto; min-height:76px; padding:7px 10px; line-height:1.65; }
.lcc select.form-control{ line-height:1.4; }

/* ---- 原生下拉统一外观 ----
   分页那个「每页 N 条」是个裸 <select>，模板里还写死了行内样式
   （width:60px; border-color:#ddd; background:#fff），系统自带的箭头和边框
   跟站里其它控件完全两个风格。这里把没套 .form-control 的原生下拉统一接管：
   自绘箭头、同样的圆角和高度；行内样式只能用 !important 盖。
   ⚠ 展开后的那层选项是操作系统画的，CSS 管不到，只能用 color-scheme / accent-color
     让它保持浅色、选中色跟主题一致。 */
.lcc select:not(.form-control):not(.custom-select):not(.selectpicker){
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  height:30px; padding:0 26px 0 10px!important;
  border:1px solid #dce0e6!important; border-radius:var(--r)!important;
  background-color:#fff!important;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378828f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 9px center!important;
  background-size:10px 7px!important;
  color:var(--ink); font-size:13px; line-height:28px; box-shadow:none; outline:0;
  vertical-align:middle; cursor:pointer;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.lcc select:not(.form-control):not(.custom-select):not(.selectpicker):hover{ border-color:#c2ccd8!important; }
.lcc select:not(.form-control):not(.custom-select):not(.selectpicker):focus{
  border-color:var(--blue)!important; box-shadow:0 0 0 2px rgba(18,116,214,.13);
}
/* 分页那颗行内写死了 60px，太窄，三位数会被截掉 */
.lcc .table-pagination select,.lcc #limitSel{ width:68px!important; }
/* .form-control 那类下拉也换成同一个箭头，不用系统的 */
.lcc select.form-control{
  -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:26px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378828f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:10px 7px;
}
.lcc{ accent-color:var(--blue); color-scheme:light; }
/* 展开后的选项列表是浏览器/系统画的，CSS 只能管到这几条；
   Windows 上的 Chrome 认 option 的底色和字色，选中项就不会再是那条刺眼的纯蓝。 */
.lcc select option{ background-color:#fff; color:var(--ink); padding:6px 10px; }
.lcc select option:checked,.lcc select option:hover{ background-color:#eaf3fd; color:#1268c4; }

/* ---- bootstrap-select（产品列表的「状态」多选就是它）----
   ⚠ 跟购物车主题同一个坑：它会把原 select 的 class 抄到外层 div 上，
   于是 .form-control 的高度内边距跑到外壳上，里面的按钮又自带一套，
   两层框叠在一起、文字贴着顶边。外壳必须先清空，只让里面的按钮当输入框用。 */
.lcc .bootstrap-select{ width:100%!important; max-width:320px; }
.lcc .bootstrap-select.form-control{
  height:auto!important; min-height:0!important; padding:0!important; border:0!important;
  border-radius:0!important; background:none!important; box-shadow:none!important; display:block;
}
.lcc .bootstrap-select > .dropdown-toggle{
  width:100%; height:32px; padding:0 30px 0 10px; display:flex; align-items:center;
  background:#fff!important; border:1px solid #dce0e6!important; border-radius:var(--r)!important;
  box-shadow:none!important; font-size:13px; line-height:1.4; color:var(--ink)!important;
  outline:0!important; text-align:left!important; white-space:nowrap; overflow:hidden;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378828f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 10px center!important;
  background-size:10px 7px!important;
}
.lcc .bootstrap-select > .dropdown-toggle:focus,
.lcc .bootstrap-select.show > .dropdown-toggle{
  border-color:var(--blue)!important; box-shadow:0 0 0 2px rgba(18,116,214,.13)!important;
}
.lcc .bootstrap-select > .dropdown-toggle::after,
.lcc .bootstrap-select .bs-caret,
.lcc .bootstrap-select .caret{ display:none!important; }
.lcc .bootstrap-select .filter-option{
  position:static!important; display:flex!important; align-items:center;
  width:100%; height:100%; padding:0!important; text-align:left; overflow:hidden;
}
.lcc .bootstrap-select .filter-option-inner{ display:flex; align-items:center; width:100%; min-width:0; }
.lcc .bootstrap-select .filter-option-inner-inner{
  width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4;
}
.lcc .bootstrap-select .dropdown-menu{
  padding:6px; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh2);
  margin-top:4px; min-width:100%;
}
.lcc .bootstrap-select .dropdown-menu li a,
.lcc .bootstrap-select .dropdown-menu .dropdown-item{
  padding:7px 10px; border-radius:5px; font-size:13px; color:var(--ink2);
}
.lcc .bootstrap-select .dropdown-menu li a:hover,
.lcc .bootstrap-select .dropdown-menu .dropdown-item:hover{ background:var(--line-2); color:var(--blue); }
.lcc .bootstrap-select .dropdown-menu li.selected a,
.lcc .bootstrap-select .dropdown-menu .dropdown-item.selected,
.lcc .bootstrap-select .dropdown-menu .dropdown-item.active{
  background:var(--blue-l)!important; color:var(--blue)!important;
}
.lcc .bootstrap-select .dropdown-menu .inner{ max-height:280px; }
.lcc .form-control:focus,.lcc .custom-select:focus{
  border-color:var(--blue); box-shadow:0 0 0 2px rgba(18,116,214,.13); background-color:#fff;
}
.lcc .form-control::placeholder{ color:var(--ink4); }
.lcc .form-control:disabled,.lcc .form-control[readonly]{ background-color:#f6f7f9; color:var(--ink3); }
.lcc label,.lcc .col-form-label{ margin-bottom:4px; font-size:12.5px; font-weight:500; color:var(--ink2); }
.lcc .form-group{ margin-bottom:12px; }
/* ---- 输入框组：输入框、按钮、验证码图统一高度并拼成一整条 ----
   ⚠ 之前是各写各的固定高度（输入框 32 / 追加按钮 32），弹窗里输入框被放大到 40
   之后按钮还是 32，于是「眼睛」按钮、「获取验证码」按钮、验证码图片
   跟输入框高度全对不上。现在统一吃 --ctl-h 这个变量，弹窗里整体放大。 */
.lcc .input-group-text{
  height:var(--ctl-h); padding:0 10px; border-color:#dce0e6; background:#fafbfc;
  color:var(--ink2); font-size:12.5px; border-radius:var(--r);
}
.lcc .input-group > .input-group-append > .btn,
.lcc .input-group > .input-group-prepend > .btn,
.lcc .input-group > .input-group-append > .input-group-text,
.lcc .input-group > .input-group-prepend > .input-group-text{
  height:var(--ctl-h)!important; display:inline-flex; align-items:center; justify-content:center;
}
.lcc .input-group > .form-control,
.lcc .input-group > .custom-select{ height:var(--ctl-h); }
/* 拼接处去掉内侧圆角，别再是「一个框 + 一个圆角小方块」 */
.lcc .input-group > .form-control:not(:last-child),
.lcc .input-group > .custom-select:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }
.lcc .input-group > .form-control:not(:first-child),
.lcc .input-group > .custom-select:not(:first-child){ border-top-left-radius:0; border-bottom-left-radius:0; }
.lcc .input-group > .input-group-append{ margin-left:-1px; }
.lcc .input-group > .input-group-prepend{ margin-right:-1px; }
.lcc .input-group > .input-group-append > .btn,
.lcc .input-group > .input-group-append > .input-group-text{ border-top-left-radius:0; border-bottom-left-radius:0; }
.lcc .input-group > .input-group-prepend > .btn,
.lcc .input-group > .input-group-prepend > .input-group-text{ border-top-right-radius:0; border-bottom-right-radius:0; }
/* 图形验证码图片：官方给的是 width="120px" 行内属性、没有高度，
   于是它按原图高度显示，跟输入框差一截。这里按控件高度等比缩放。 */
.lcc .input-group .lcx-captcha,
.lcc .input-group-append > img{
  height:var(--ctl-h)!important; width:auto!important; max-width:150px;
  display:block; object-fit:contain; background:#fff; cursor:pointer;
  border:1px solid #dce0e6; border-left:0;
  border-radius:0 var(--r) var(--r) 0; background:#fff;
}
.lcc .custom-control-label{ font-weight:400; font-size:12.5px; }
.lcc .custom-control-input:checked ~ .custom-control-label::before{ background-color:var(--blue); border-color:var(--blue); }
/* ⚠ 这条以前把 .text-danger 也压成了 12px —— 账单详情页的「未支付」是
   <h3 class="text-danger">，结果整个状态被缩成一行小红字，差点看不见。
   小字号只留给表单的错误提示，颜色才是 .text-danger 该管的事。 */
.lcc .invalid-feedback{ color:var(--red)!important; font-size:12px; }
.lcc .text-danger{ color:var(--red)!important; }
/* 账单详情页右上角的状态（未支付 / 已支付 / 已取消 / 已退款）：
   模板用的是 h3/h5 + text-danger/text-success，这里做成醒目的状态块 */
.lcc h3.text-style,.lcc h5.text-style{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 10px;
  padding:6px 16px; border-radius:20px; font-size:17px; font-weight:600; line-height:1.6;
}
.lcc h3.text-style::before,.lcc h5.text-style::before{ width:7px; height:7px; }
.lcc h3.text-style.text-danger,.lcc h5.text-style.text-danger{ background:#fdeee9; }
.lcc .btnWidth{ width:auto!important; }
.lcc h3.text-style.text-success,.lcc h5.text-style.text-success{ background:#e6f7f2; color:#067a60!important; }
.lcc h3.text-style::before,.lcc h5.text-style::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
}

/* ------------ 9. 徽章 / 提示 / 分页 / 标签页 / 下拉 / 弹窗 ------------ */
.lcc .badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:4px; font-size:12px; font-weight:500; letter-spacing:0; line-height:1.55;
}
.lcc .badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.85; }
.lcc .badge-success,.lcc .badge-soft-success{ background:#e6f7f2; color:#067a60; }
.lcc .badge-danger,.lcc .badge-soft-danger{ background:#fdeee9; color:#bd401b; }
.lcc .badge-warning,.lcc .badge-soft-warning{ background:#fdf4e6; color:#8f620a; }
.lcc .badge-info,.lcc .badge-soft-info{ background:#e8f4fc; color:#1a7cb5; }
.lcc .badge-primary,.lcc .badge-soft-primary{ background:var(--blue-l); color:#1268c4; }
.lcc .badge-secondary,.lcc .badge-soft-secondary{ background:var(--line-2); color:var(--ink2); }

/* 账单 / 产品状态徽章：模板里输出的是 status-{状态小写}，之前没写样式，
   结果「未支付」几乎看不见（只有一个小圆点）。按语义分四组上色。 */
.lcc .status-unpaid,.lcc .status-pending,.lcc .status-collections,
.lcc .status-processing,.lcc .status-open{ background:#fdf4e6; color:#a8740f; }
.lcc .status-paid,.lcc .status-active,.lcc .status-completed,
.lcc .status-answered,.lcc .status-success{ background:#e6f7f2; color:#067a60; }
.lcc .status-refunded,.lcc .status-cancelled,.lcc .status-canceled,
.lcc .status-terminated,.lcc .status-closed,.lcc .status-deleted{ background:var(--line-2); color:var(--ink2); }
.lcc .status-suspended,.lcc .status-fraud,.lcc .status-overdue,
.lcc .status-failed,.lcc .status-expired{ background:#fdeee9; color:#bd401b; }
/* 列表里的操作链接：给点间距和可点区域，别挤成一坨 */
.lcc .table td a.text-success,.lcc .table td a.text-primary,.lcc .table td a.text-danger{
  display:inline-flex; align-items:center; gap:4px; font-size:13px;
}
.lcc .table td a.text-primary{ color:var(--blue)!important; }
.lcc .table td a.text-success{ color:var(--green)!important; }

/* ---- 安全中心顶部横幅 ----
   官方用的是 .bg-primary，整块亮蓝糊在页面顶上，跟站里其它卡片完全两个世界。
   这里改成跟别的卡片一致的白底浅蓝渐变 + 描边，文字恢复深色，
   只有头像圈、强度条和徽章留一点蓝，看着才像同一个后台。
   ⚠ 模板里给整行加了 .text-white，所以必须逐个把颜色扳回来。 */
/* ⚠ 选择器必须带上 .bg-primary：本文件后面有一条
   .lcc .bg-primary{background-color:var(--blue)!important}，权重跟 .lcc .security-header
   一样 (0,2,0)、但排在后面，会把这里的浅色底又刷回实心蓝（线上就是这么变回蓝块的）。 */
.lcc .security-header,
.lcc .security-header.bg-primary{
  background:linear-gradient(180deg,#f7fbff 0%,#fff 62%)!important;
  border:1px solid var(--line)!important; border-radius:var(--r-lg);
  box-shadow:var(--sh1); margin-bottom:var(--gap)!important;
}
.lcc .security-header .card-body{ padding:20px 22px; }
.lcc .security-header .text-white,
.lcc .security-header .text-white *{ color:var(--ink)!important; }
/* 官方给 .security-info 套了一块纯蓝底，去掉它整行才干净 */
.lcc .security-header .security-info{
  background:none!important; background-color:transparent!important;
  padding:0!important; border-radius:0!important; box-shadow:none!important;
}
/* ⚠ 官方把 .security-avatar 做成了 100×100 的圆，还用两层 inset 阴影画了两圈蓝环
   （inset 0 0 0 10px / 20px）。在白卡上看着就是一个「靶心」。这里整个拍平，
   只留里面那颗实心圆头像。 */
.lcc .security-header .security-avatar{
  width:auto!important; height:auto!important; border-radius:0!important;
  background:none!important; box-shadow:none!important;
  display:flex; align-items:center; justify-content:center;
}
.lcc .security-header .security-username{
  background:transparent!important; padding:0!important;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:18px; font-weight:600; color:var(--ink)!important;
}
.lcc .security-header .security-logo,
.lcc .security-header .security-logo.bg-info{
  width:56px; height:56px; padding:0!important; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue)!important; color:#fff!important;
  font-size:20px; font-weight:600; box-shadow:none;
}
.lcc .security-header .security-label{ font-size:13px; color:var(--ink3)!important; margin-bottom:6px; }
.lcc .security-header .security-label .security-text{ color:var(--ink)!important; font-weight:500; }
.lcc .security-header .progress{ height:6px; border-radius:4px; background:var(--line-2)!important; }
.lcc .security-header .progress-bar{ background:var(--blue)!important; border-radius:4px; }
.lcc .security-header .progress-bar.bg-danger{ background:var(--blue)!important; }
.lcc .security-header .badge-success{ background:#e6f7f2!important; color:#067a60!important; }
.lcc .security-header .badge-light{ background:var(--line-2)!important; color:var(--ink3)!important; }
.lcc .security-header .security-meta li{ font-size:13px; color:var(--ink2)!important; }
.lcc .security-header .security-meta li span{ color:var(--ink3)!important; }

/* ---- 提交工单 ----
   说明文字原来是 12px 的小灰字，一整屏看着累；部门卡片是空壳，没有悬停反馈。 */
.lcc .ticket-top p{ margin:0 0 8px; font-size:13.5px; line-height:1.9; color:var(--ink2); }
.lcc .ticket-top p:last-child{ margin-bottom:0; }
.lcc a > .card.border-hover{
  height:100%; margin-bottom:0; border:1px solid var(--line)!important; border-radius:var(--r-lg);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.lcc a > .card.border-hover:hover{
  border-color:var(--blue)!important; box-shadow:0 4px 16px rgba(16,42,80,.08); transform:translateY(-2px);
}
.lcc .border-hover .card-header{ padding:14px 16px 10px; border-bottom:1px solid var(--line-2); }
.lcc .border-hover .card-header h5{ margin:0; font-size:15px; font-weight:600; color:var(--ink); }
.lcc .border-hover .card-body{ padding:12px 16px 16px; min-height:58px; }
.lcc .border-hover .card-text{ margin:0; font-size:13px; line-height:1.75; color:var(--ink3); }
.lcc .border-hover:hover .card-header h5{ color:var(--blue); }

.lcc .alert{ padding:9px 13px; margin-bottom:var(--gap); border:0; border-left:3px solid transparent;
  border-radius:var(--r); font-size:12.5px; line-height:1.65; }
.lcc .alert-success{ background:#eaf8f4; border-left-color:var(--green); color:#067a60; }
.lcc .alert-danger{ background:#fdeee9; border-left-color:var(--red); color:#b93f1b; }
.lcc .alert-warning{ background:#fdf5e8; border-left-color:var(--amber); color:#96661a; }
.lcc .alert-info{ background:var(--blue-l); border-left-color:var(--blue); color:#0f5c9e; }

.lcc .pagination{ gap:4px; margin:0; }
.lcc .page-link{
  min-width:28px; height:28px; padding:0 7px; border:1px solid var(--line); border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink2); font-size:12.5px; background:#fff;
}
.lcc .page-link:hover{ border-color:#a8c9ea; color:var(--blue); background:#f6f8fa; }
.lcc .page-item.active .page-link{ background:var(--blue); border-color:var(--blue); color:#fff; }
.lcc .page-item.disabled .page-link{ color:#858d9a; background:#fff; }

.lcc .nav-tabs{ border-bottom:1px solid var(--line); gap:18px; }
.lcc .nav-tabs .nav-item{ margin:0; }
.lcc .nav-tabs .nav-link{
  padding:7px 0; border:0; border-bottom:2px solid transparent; border-radius:0;
  color:var(--ink2); font-size:13px;
}
.lcc .nav-tabs .nav-link:hover{ color:var(--blue); }
.lcc .nav-tabs .nav-link.active{ color:var(--blue); background:transparent; border-bottom-color:var(--blue); font-weight:500; }
.lcc .nav-pills .nav-link{ padding:5px 12px; font-size:12.5px; border-radius:var(--r); }
.lcc .nav-pills .nav-link.active{ background:var(--blue); }

.lcc .dropdown-menu{
  padding:4px; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh3); font-size:12.5px; min-width:150px;
}
.lcc .dropdown-item{
  padding:6px 9px; border-radius:5px; color:var(--ink2);
  display:flex; align-items:center; gap:8px;
}
.lcc .dropdown-item i{ font-size:15px; color:var(--ink3); }
.lcc .dropdown-item:hover{ background:var(--line-2); color:var(--ink); }
.lcc .dropdown-item:hover i{ color:var(--blue); }
.lcc .lcc-logout,.lcc .lcc-logout i{ color:var(--red)!important; }
.lcc .lcc-logout:hover{ background:#fdeee9; }
.lcc .dropdown-divider{ margin:4px 2px; border-color:var(--line); }

/* 弹窗：整体放大一档。之前 14.5px 标题 + 13px 正文 + 12px 内边距，
   在 1440 屏上看着又小又挤，跟页面的字号完全不是一个档。 */
.lcc .modal-content{ border:0; border-radius:var(--r-lg); box-shadow:0 20px 52px rgba(14,40,80,.20); }
.lcc .modal-header{ padding:18px 24px; border-bottom:1px solid var(--line); align-items:center; }
.lcc .modal-title{ font-size:17px; font-weight:600; color:var(--ink); }
.lcc .modal-header .close{
  padding:0; margin:0 0 0 auto; width:32px; height:32px; border-radius:var(--r);
  font-size:24px; font-weight:400; color:var(--ink3); opacity:1; text-shadow:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.lcc .modal-header .close:hover{ background:var(--line-2); color:var(--ink); }
.lcc .modal-body{ padding:22px 24px; font-size:14px; line-height:1.75; color:var(--ink2); }
.lcc .modal-footer{
  padding:14px 24px; border-top:1px solid var(--line); background:#fcfdfe;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}
.lcc .modal-footer > .btn{ height:40px; min-width:96px; padding:0 24px; margin:0!important; font-size:14.5px; }
/* ⚠ 官方模板里按钮顺序不统一：有的「取消 / 确定」，有的「提交 / 取消」。
   只用 order 调显示顺序，让主按钮一律在右边；DOM 顺序和事件都没动。 */
.lcc .modal-footer > .btn{ order:1; }
.lcc .modal-footer > .btn-primary,
.lcc .modal-footer > .btn-success,
.lcc .modal-footer > .btn-danger{ order:2; }

/* ⚠ 有些模板（cancelrequire 等）把 .modal-footer 写在了 .modal-body 里面，
   不出血的话就变成一条缩在内容里的灰条。这里让它顶到卡片边缘。 */
.lcc .modal-body > .modal-footer{ margin:22px -24px -22px; }
@media (max-width:767px){ .lcc .modal-body > .modal-footer{ margin:18px -16px -18px; } }

/* 弹窗里的表单：标签、控件、校验提示都对齐放大 */
.lcc .modal .form-group{ margin-bottom:18px; }
.lcc .modal .col-form-label,
.lcc .modal label{ font-size:14px; color:var(--ink2); margin-bottom:6px; }
.lcc .modal{ --ctl-h:40px; }        /* 弹窗里的控件统一放大一档，整组一起变 */
.lcc .modal .form-control,
.lcc .modal .custom-select,
.lcc .modal select.form-control{ font-size:14px; }
.lcc .modal textarea.form-control{ height:auto; min-height:92px; }
/* 原生复选框/单选在弹窗里是没上过样式的小方块，跟主题不搭 */
.lcc .modal input[type="checkbox"],
.lcc .modal input[type="radio"]{
  width:16px; height:16px; margin:0 8px 0 0; accent-color:var(--blue);
  vertical-align:-3px; cursor:pointer;
}
.lcc .modal .form-group.row [class^="col-"] > label,
.lcc .modal .form-group.row [class*=" col-"] > label{
  display:inline-flex; align-items:center; margin:0; min-height:40px;
  font-size:14px; color:var(--ink); cursor:pointer;
}
/* 左边那列标签：跟右边 40px 高的控件在同一条水平线上，
   ⚠ 不能吃 .lcc .modal label 的 margin-bottom:6px，否则标签会比控件高半行
   （「强制关机」跟它右边的复选框错开就是这么来的）。 */
.lcc .modal .col-form-label{
  min-height:40px; margin-bottom:0!important; padding-top:0; padding-bottom:0;
  display:flex; align-items:center;
}
.lcc .modal .col-form-label.text-right,
.lcc .modal .col-form-label.justify-content-end{ justify-content:flex-end; }
/* 官方给复选框那一列写了个不存在的 .pt-9，实际是 0，这里显式归零免得将来打架 */
.lcc .modal .form-group.row > [class*="col-"].pt-9{ padding-top:0; }

/* 校验提示：它是 .row 的直接子元素，会被挤到新的一行且没有缩进，
   看着像一句飘在半空的话。让它占满一行并对齐到控件列。
   ⚠ 缩进要算上栅格列自带的 15px 内边距，只写 25% 会比控件左边缘偏左 15px。 */
.lcc .modal .form-group.row > .error-tip,
.lcc .modal .form-group.row > label.error-tip{
  flex:0 0 100%; max-width:100%; min-height:0; margin:6px 0 0;
  padding-left:calc(25% + 15px); font-size:12.5px; font-weight:400; color:#d1451f!important;
}
/* 标签列是 col-*-2 的行（部分弹窗用的是 2 列宽），缩进跟着变 */
.lcc .modal .form-group.row > .col-2 ~ .error-tip,
.lcc .modal .form-group.row > .col-sm-2 ~ .error-tip,
.lcc .modal .form-group.row > .col-md-2 ~ .error-tip{ padding-left:calc(16.6667% + 15px); }
@media (max-width:767px){
  .lcc .modal .col-form-label{ min-height:0; margin-bottom:6px!important; }
  .lcc .modal .form-group.row > .error-tip,
  .lcc .modal .form-group.row > label.error-tip{ padding-left:15px; }
  .lcc .modal-body{ padding:18px 16px; }
  .lcc .modal-header,.lcc .modal-footer{ padding-left:16px; padding-right:16px; }
  .lcc .modal-footer > .btn{ flex:1 1 0; min-width:0; }
}
.lcc .close{ font-size:19px; font-weight:400; color:var(--ink3); opacity:1; text-shadow:none; padding:10px 14px; }
.lcc .close:hover{ color:var(--ink); }

/* ------------------------------ 10. 页脚 ------------------------------ */
.lcc .footer.lcc-footer{
  left:var(--side-w); height:auto; padding:0; background:transparent; border-top:1px solid var(--line);
}
/* 页脚只留一行版权，居中；原来那排「帮助中心/提交工单/公告/返回官网」已去掉 */
.lcc .lcc-footer-in{
  max-width:none; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
}
.lcc .lcc-copy{ margin:0; font-size:13px; color:var(--ink3); }
.lcc .lcc-flinks{ display:flex; gap:14px; flex-wrap:wrap; }
.lcc .lcc-flinks a{ font-size:12px; color:var(--ink3); }
.lcc .lcc-flinks a:hover{ color:var(--blue); }

/* ---------------------------- 11. 响应式 ---------------------------- */
@media (max-width:992px){
  .lcc .main-content{ margin-left:0; }
  .lcc .navbar-brand-box{ width:auto; padding-left:12px; }
  .lcc .footer.lcc-footer{ left:0; }
  .lcc .page-content{ padding:calc(var(--top-h) + 10px) 6px 18px; }
  .lcc .card-body{ padding:12px 13px; }
  .lcc .backBtn{ display:inline-flex!important; }
}
@media (max-width:768px){
  .lcc .page-title-box{ flex-direction:column; align-items:flex-start!important; gap:4px; padding-bottom:9px; }
  .lcc .page-title-right{ width:100%; }
  .lcc .lcc-footer-in{ flex-direction:column; align-items:flex-start; padding:10px 12px; }
  .lcc .table thead th,.lcc .table tbody td{ padding:8px 10px; }
}
@media (max-width:560px){
  .lcc .navbar-brand-box img{ height:34px; max-width:130px; }
  .lcc .lcc-uname{ display:none!important; }
  .lcc .container-fluid{ padding-left:4px; padding-right:4px; }
}

/* ============================================================================
   12. 官方样式纠偏
   下面这些是被 app.min.css / global.css 写死（甚至带 !important）的地方，
   常规权重盖不住，只能同样用 !important 硬顶。每一条都注明了对手是谁，
   魔方升级基础样式后，回来对着这份清单核一遍。
   ========================================================================= */

/* global.css:1050 .vertical-menu{background:#1e1e2d!important}
   global.css:1054 .navbar-brand-box{background:#14141e!important} */
.lcc .vertical-menu{ background:#fff!important; }
.lcc .navbar-brand-box{ background:#fff!important; }

/* app.min.css:45 .logo-light{display:none}
   前面 .lcc .navbar-brand-box .logo 权重 (0,3,0) 会把它盖掉，导致两个 logo 一起显示 */
.lcc .navbar-brand-box .logo-light{ display:none!important; }
.lcc .navbar-brand-box .logo-dark{ display:inline-flex!important; }

/* 侧栏文字色：global.css 里有零散的浅色残留 */
.lcc #sidebar-menu ul li a,
.lcc #sidebar-menu ul li a span{ color:var(--ink2)!important; }
.lcc #sidebar-menu ul li a i{ color:var(--ink3)!important; }
.lcc #sidebar-menu ul li a:hover,
.lcc #sidebar-menu ul li a:hover span{ color:var(--ink)!important; }
.lcc #sidebar-menu ul li a:hover i{ color:var(--blue)!important; }
.lcc #sidebar-menu ul li.mm-active > a,
.lcc #sidebar-menu ul li.mm-active > a span,
.lcc #sidebar-menu ul li a.active,
.lcc #sidebar-menu ul li a.active span{ color:#1268c4!important; }
.lcc #sidebar-menu ul li.mm-active > a i,
.lcc #sidebar-menu ul li a.active i{ color:var(--blue)!important; }
.lcc #sidebar-menu .sub-menu li a,
.lcc #sidebar-menu .sub-menu li a span{ color:var(--ink2)!important; }

/* bootstrap.min.css:2678 .btn-secondary{color:#fff;background:#74788d}
   这套模板里 secondary 是个近白的灰，白底白字看不见 */
.lcc .btn-secondary,
.lcc .btn-secondary:not(:disabled):not(.disabled){
  background-color:#fff!important; border-color:var(--line)!important; color:var(--ink2)!important;
}
.lcc .btn-light,.lcc .btn-light:not(:disabled):not(.disabled){
  background-color:#f2f5f8!important; border-color:transparent!important; color:var(--ink2)!important;
}
@media (hover:hover) and (pointer:fine){
  .lcc .btn-secondary:hover{ background-color:#f6f8fa!important; border-color:#a8c9ea!important; color:var(--blue)!important; }
  .lcc .btn-light:hover{ background-color:#e9edf3!important; color:var(--ink)!important; }
}

.lcc #page-topbar .header-item{ height:auto; background:transparent; border:0; color:var(--ink2); }
.lcc #page-topbar .header-item:hover{ background:var(--line-2); }
.lcc .bg-soft-primary{ background-color:var(--blue-l)!important; }
.lcc .bg-light{ background-color:#fafbfc!important; }
.lcc .text-primary{ color:var(--blue)!important; }
.lcc .bg-primary{ background-color:var(--blue)!important; }

/* ============================================================================
   13. 列表页与移动端侧栏
   ========================================================================= */

/* 列表页顶部搜索框：官方给的是 .col-sm-6，宽屏上等于半张表格那么宽 */
.lcc .table-search{ margin-bottom:10px; }
.lcc .table-search .row{ margin:0; }
.lcc .table-search .col-sm-6{ flex:0 0 auto; width:auto; max-width:100%; padding:0; }
.lcc .search-box{ position:relative; }
.lcc .search-box .position-relative{ width:230px; max-width:100%; }
.lcc .search-box .form-control{ padding-left:30px; height:32px; }
.lcc .search-box .search-icon{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  font-size:15px; line-height:1; color:var(--ink3); cursor:pointer; z-index:2;
}
.lcc .search-box .search-icon:hover{ color:var(--blue); }
@media (max-width:560px){
  .lcc .table-search .col-sm-6,.lcc .search-box .position-relative{ width:100%; }
  .lcc .table-search .row{ justify-content:stretch!important; }
}

/* 列表表格：列多的时候在容器内横向滚动，而不是把整页撑宽 */
/* 表格横向滚动。⚠ 注意 overflow-x:auto 会让 overflow-y 也变成 auto，
   所以任何开在表格里的下拉都会被这一层裁掉；表格底部那排批量操作按钮
   （.table-footer）必须留在这一层外面，下面几条就是保证它们不被裁。 */
.lcc .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* 「批量操作」的下拉只显示前两项，就是被外层的 overflow 裁掉的。
   卡片、卡片内容、表格底栏这几层统统改成不裁剪，再把菜单的层级提上去。 */
.lcc .card,.lcc .card-body,.lcc .table-footer,.lcc .table-tools,
.lcc .table-footer .btn-group{ overflow:visible!important; }
/* ⚠ 真正的凶手在这一层：Skote 的 .main-content 带着 overflow:hidden，
   开在页面底部的下拉一律被它切掉（批量操作只看得见前两项就是这么来的）。
   改成 visible；横向溢出由 .table-responsive 自己滚，不会因此出现横向滚动条。 */
.lcc .main-content{
  overflow:visible;                 /* 老浏览器兜底 */
  overflow-x:clip; overflow-y:visible;  /* 横向照旧不许溢出，纵向放行，下拉才不会被切 */
}
/* ⚠ 只给「真的弹出来的」下拉提层级（Bootstrap 打开时会加 .show）。
   之前这条写在 .dropdown-menu 上，而产品详情页的控制按钮是被我摊平成
   一排常驻按钮的 .dropdown-menu —— 于是那排按钮拿着 1200 的层级浮在
   弹窗遮罩（1040）上面，弹窗开着还能点到开机/关机，这是我引入的 bug。 */
.lcc .dropdown-menu.show{ z-index:1200; }
.lcc .table-footer{ position:relative; z-index:2; }
.lcc .table.tablelist{ min-width:900px; }
.lcc .table.tablelist td,.lcc .table.tablelist th{ white-space:nowrap; }
.lcc .table.tablelist td:nth-child(3){ white-space:normal; min-width:150px; }
.lcc .btn.w-xs{ min-width:56px; width:auto; padding-left:11px; padding-right:11px; }
.lcc .tablelist .text-muted{ font-size:11.5px; }

/* 移动端侧栏：从左滑出 + 遮罩。.sidebar-enable 是 app.js 点 #vertical-menu-btn 时挂到 body 上的 */
@media (max-width:992px){
  .lcc .vertical-menu{
    transform:translateX(-100%); transition:transform .26s var(--ease);
    box-shadow:none; z-index:1003;
  }
  body.lcc.sidebar-enable .vertical-menu{ transform:none; box-shadow:0 12px 40px rgba(14,40,80,.20); }
  body.lcc.sidebar-enable::after{
    content:""; position:fixed; inset:0; z-index:1002; background:rgba(16,28,48,.42);
  }
  .lcc #page-topbar{ z-index:1004; }
}

/* 后台没配图标的菜单项（SSL、发票管理）也要对齐 */
.lcc #sidebar-menu > ul > li > a:not(:has(i))::before{ content:""; flex:none; width:17px; min-width:17px; }
@supports not selector(:has(*)){ .lcc #sidebar-menu > ul > li > a{ padding-left:10px; } }

/* ============================================================================
   14. 登录 / 注册 / 找回密码 —— 参考华为云账号注册页

   版式：
     · 顶栏白底，logo 靠左，一条细线收口
     · 页面浅灰底，中间一块大白板（最宽 1160px）
     · 白板顶部一行：左边标题，右边「已有账号，去登录 ›」
     · 表单在白板里**居中收成一窄列（440px）**，两边留大量空白 —— 这是华为云
       那个页面最关键的一点，表单不铺满白板，反而更好读
     · 输入框不写标签，全靠 placeholder；高度 46px，间距拉开
     · 「获取验证码」不是一颗独立按钮，是嵌在输入框右侧的文字链接
     · 版权压在页面最底

   ⚠ 标签（<label>）没有删，只是视觉上藏起来了（.lca-form label）——
     读屏软件还要靠它，删了就是无障碍倒退。
   ========================================================================= */
.lca{ min-height:100vh; display:flex; flex-direction:column; background:#f2f3f5; }

/* ---- 顶栏 ---- */
.lca-top{
  flex:none; height:62px; padding:0 32px; background:#fff;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px;
}
.lca-brand{ display:inline-flex; align-items:center; }
.lca-brand img{ height:38px; width:auto; max-width:220px; }
.lca-brand img + span{ display:none; }          /* 图正常时不显示公司名 */
.lca-brand span{ font-size:17px; font-weight:600; color:var(--ink); letter-spacing:.3px; }
.lca-top-sub{
  padding-left:16px; border-left:1px solid var(--line);
  font-size:14px; color:var(--ink2);
}

/* ---- 中间大白板 ---- */
.lca-body{ flex:1 1 auto; display:flex; justify-content:center; padding:28px 20px 12px; }
.lca-panel{
  width:100%; max-width:1160px; background:#fff; border:1px solid #ebedf0; border-radius:4px;
  align-self:flex-start;
}
.lca-panel-h{
  padding:22px 32px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.lca-panel-h h1{ margin:0; font-size:21px; font-weight:600; letter-spacing:-.2px; color:var(--ink); }
.lca-panel-alt{ margin:0; font-size:13px; color:var(--ink2); }
.lca-panel-alt a{ color:var(--blue); }

/* ---- 表单：白板里居中的一窄列 ---- */
.lca-form{ width:440px; max-width:100%; margin:0 auto; padding:34px 0 44px; }

/* 字段标签视觉隐藏，读屏还能读到。
   ⚠ 必须排除 .lca-agree —— 协议勾选那一整块本身就是个 <label>，
     不排除的话整块协议文字会跟着一起消失（踩过一次）。 */
.lca-form label:not(.lca-agree){
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.lca-form .form-group{ margin-bottom:18px; }
.lca-form{ --auth-ctl-h:46px; }
.lca-form .form-control{
  height:var(--auth-ctl-h); line-height:calc(var(--auth-ctl-h) - 2px); padding:0 14px; font-size:14px;
  border:1px solid #dcdfe6; border-radius:4px; color:var(--ink);
}
.lca-form .form-control::placeholder{ color:#b4bac3; }
.lca-form .form-control:focus{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(18,116,214,.12); }
.lca-form select.form-control{ line-height:1.4; }
.lca-form textarea.form-control{ height:auto; line-height:1.7; padding:11px 14px; }

/* 标签页：有两个才显示，只有一个的时候整条藏掉（单个 tab 很怪） */
.lca-tabs.nav-tabs{ margin-bottom:22px; border-bottom:1px solid var(--line); gap:24px; }
.lca-tabs .nav-item{ margin:0; }
.lca-tabs .nav-link{
  padding:0 0 10px; border:0; border-bottom:2px solid transparent; border-radius:0;
  font-size:14px; color:var(--ink3); background:transparent;
}
.lca-tabs .nav-link:hover{ color:var(--blue); }
.lca-tabs .nav-link.active{ color:var(--ink); border-bottom-color:var(--blue); font-weight:600; background:transparent; }
.lca-tabs:not(:has(.nav-item + .nav-item)){ display:none; }

/* 手机号：区号拼在左边，共用一圈边框 */
.lca-phone{ border:1px solid #dcdfe6; border-radius:4px; background:#fff; }
.lca-phone:focus-within{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(18,116,214,.12); }
.lca-phone .form-control{ border:0!important; box-shadow:none!important; background:transparent; }
.lca-phone .input-group-prepend{ width:84px; }
.lca-phone .input-group-prepend .form-control{
  border-right:1px solid var(--line)!important; border-radius:0;
  padding-left:12px; padding-right:2px; font-size:13.5px; color:var(--ink2);
}

/* 验证码 / 图形码：按钮和图都嵌进输入框里，不做成独立控件 */
.lca-code{ border:1px solid #dcdfe6; border-radius:4px; background:#fff; }
.lca-code:focus-within{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(18,116,214,.12); }
.lca-code .form-control{ border:0!important; box-shadow:none!important; background:transparent; }
.lca-code .input-group-append{ align-items:center; }
.lca-code .input-group-append .btn{
  height:44px; padding:0 15px; border:0!important; border-left:1px solid var(--line)!important;
  border-radius:0; background:transparent!important; color:var(--blue)!important;
  font-size:13.5px; white-space:nowrap; box-shadow:none!important;
}
.lca-code .input-group-append .btn:hover{ background:#f6f8fa!important; }
/* 图形验证码那一组：输入框 + 验证码图拼成一条。
   ⚠ 别用 [class*="_captcha"] 选这一组 —— 手机登录的密码字段所在的
     .form-group.allow_login_phone_captcha 也会被选中，边框会被一起抹掉
     （踩过一次，密码框整个变成没有边的一条）。
     这里按「组里确实有那张验证码图」来选，才不会误伤。 */
.lca-form .form-group:has(.input-group-append img) .input-group{
  border:1px solid #dcdfe6; border-radius:4px; background:#fff;
}
.lca-form .form-group:has(.input-group-append img) .input-group:focus-within{
  border-color:var(--blue); box-shadow:0 0 0 2px rgba(18,116,214,.12);
}
.lca-form .form-group:has(.input-group-append img) .form-control{
  border:0!important; box-shadow:none!important; background:transparent;
}
.lca-form .input-group-append img{
  height:44px; width:112px; object-fit:cover; border:1px solid #dcdfe6;
  border-radius:0 4px 4px 0; cursor:pointer;
}
/* 不支持 :has() 的浏览器：图和输入框各自带边，也能看 */
@supports selector(:has(*)){
  .lca-form .form-group:has(.input-group-append img) .input-group-append img{
    border:0; border-left:1px solid var(--line);
  }
}

/* 忘记密码 / 切换登录方式那一行 */
.lca-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-4px 0 20px; }
.lca-row-end{ justify-content:flex-end; }
.lca-link{ font-size:13px; color:var(--blue); cursor:pointer; }
.lca-link:hover{ color:var(--blue-h); }
.pointer{ cursor:pointer; }

.lca-submit{
  height:48px!important; width:100%; font-size:15px; font-weight:500;
  letter-spacing:2px; border-radius:4px; margin-top:4px;
}

.lca-agree{
  display:flex; align-items:flex-start; gap:9px; margin:18px 0 0;
  font-size:13px; line-height:1.75; color:var(--ink2); font-weight:400; cursor:pointer;
}
.lca-agree input{ margin-top:4px; flex:none; width:14px; height:14px; accent-color:var(--blue); }
.lca-agree a{ color:var(--blue); }

.lca-oauth{ margin-top:26px; }
.lca-sep{ display:block; position:relative; margin-bottom:14px; font-size:12.5px; color:var(--ink3); text-align:center; }
.lca-sep::before,.lca-sep::after{
  content:""; position:absolute; top:50%; width:calc(50% - 56px); height:1px; background:var(--line);
}
.lca-sep::before{ left:0; } .lca-sep::after{ right:0; }
.lca-oauth .list-inline{ margin:0; display:flex; justify-content:center; gap:12px; }
.lca-oauth .list-inline-item{ margin:0; }
.lca-oauth .social-list-item{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; color:var(--ink2); font-size:17px;
}
.lca-oauth .social-list-item:hover{ border-color:#a8c9ea; color:var(--blue); background:#f6f8fa; }

/* 白板顶部右侧已经有「去登录 / 立即注册」了，底下那条重复，藏掉 */
.lca-foot{ display:none; }
.lca-slot{ padding:10px 16px; text-align:center; font-size:13px; color:var(--ink2); }

.lca-copy{
  flex:none; margin:0; padding:16px 20px 22px;
  text-align:center; font-size:12px; color:var(--ink4);
}

/* 后台填了「自定义登录背景图」时，把图铺在灰底那层上，白板照旧 */
.lca.has-bg .lca-body{
  background-image:linear-gradient(152deg,rgba(8,40,84,.72),rgba(10,62,122,.58));
  background-size:cover; background-position:center;
}
.lca.has-bg .lca-copy{ color:var(--ink4); }

@media (max-width:860px){
  .lca-body{ padding:0; }
  .lca-panel{ max-width:none; border:0; border-radius:0; min-height:calc(100vh - 62px); }
  .lca-panel-h{ padding:20px 20px 16px; }
  .lca-panel-h h1{ font-size:19px; }
  .lca-form{ width:100%; padding:26px 20px 36px; }
  .lca-top{ height:56px; padding:0 18px; }
  .lca-top-sub{ display:none; }
}
@media (max-width:420px){
  .lca-form{ padding:22px 16px 32px; }
  .lca-phone .input-group-prepend{ width:74px; }
  .lca-code .input-group-append .btn{ padding:0 11px; font-size:12.5px; }
}

/* ============================================================================
   15. 登录页 —— 版式参考莱卡云现网登录页

   跟注册页（第 14 节，华为账号页那套）是两套外壳，刻意做得不一样：
   注册是「大白板 + 居中窄列」，登录是「左主视觉 + 右登录卡」。
   两边共用的是卡片里的表单样式（.lca-* 那些），改的时候注意别互相踩。

   结构：顶栏（logo + 右侧导航）/ 中间左右两栏 / 左对齐的备案页脚
   ========================================================================= */
.lcl{
  min-height:100vh; display:flex; flex-direction:column;
  background:#f1f4f8;
  background-image:
    radial-gradient(760px 460px at 8% 4%, rgba(18,116,214,.07), transparent 62%),
    radial-gradient(620px 420px at 96% 88%, rgba(226,86,47,.05), transparent 60%);
}

/* ---- 顶栏 ---- */
/* 顶栏和 logo 放大一档：30px 的 logo 在 58px 的条里显得很小 */
.lcl-top{
  flex:none; height:66px; padding:0 30px; background:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
/* logo：后台传了图就用图；没图时用「色块首字 + 公司名」顶上，
   比光秃秃一行文字像个样子。img 加载失败会自己 remove()，
   下面这条 `img + span` 随之失配，文字版自动显示。 */
.lcl-brand{ display:inline-flex; align-items:center; gap:9px; }
.lcl-brand img{ height:40px; width:auto; max-width:230px; }
.lcl-brand img + span{ display:none; }
.lcl-brand span{
  display:inline-flex; align-items:center; gap:9px;
  font-size:17px; font-weight:600; color:var(--ink); letter-spacing:.3px;
}
.lcl-brand span::before{
  content:""; width:26px; height:26px; border-radius:7px;
  background:linear-gradient(135deg,#2e8be7,#00b6d4);
}
.lcl-nav{ display:flex; align-items:center; gap:26px; }
.lcl-nav a{ font-size:14.5px; color:var(--ink2); }
.lcl-nav a:hover{ color:var(--blue); }

/* ---- 中间：左主视觉 + 右登录卡 ---- */
.lcl-main{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  gap:64px; padding:24px 30px; max-width:1320px; width:100%; margin:0 auto;
}
.lcl-say{ flex:0 1 620px; min-width:0; text-align:center; }
.lcl-say h2{
  margin:0 0 10px; font-size:34px; font-weight:700; letter-spacing:-1px; color:#11203a;
}
.lcl-say > p{ margin:0 0 6px; font-size:15px; color:var(--ink2); }
.lcl-art{ width:100%; }
.lcl-art svg,.lcl-art img{ width:100%; max-width:520px; height:auto; display:block; margin:0 auto; }

/* ---- 登录卡 ---- */
.lcl-card{
  flex:0 0 452px; max-width:100%; background:#fff; border-radius:6px;
  box-shadow:0 10px 40px rgba(18,44,84,.08), 0 1px 3px rgba(18,44,84,.05);
  overflow:hidden;
}
/* 标签页平分整张卡的宽度，中间一道竖线 —— 现网就是这个做法。
   ⚠ 下划线画在 .nav-link 上而不是 .nav-item 上，而且 .nav-link 是
     flex:0 0 auto（只占文字那么宽），这样 ::after 用 left:0/right:0
     就正好是文字的宽度。
     早先的写法是 .nav-link 撑满整格、::after 定在 left:50% 上，
     结果只有一个标签的时候整格就是整张卡，下划线飘到卡中间去了，
     跟文字完全对不上 —— 踩过，别改回去。 */
.lcl-tabs.nav-tabs{
  display:flex; margin:0; border:0!important; border-bottom:1px solid var(--line)!important; gap:0;
}
.lcl-tabs .nav-item{
  flex:1 1 0; margin:0; display:flex; align-items:center; justify-content:center;
}
.lcl-tabs .nav-item + .nav-item{ border-left:1px solid var(--line); }
.lcl-tabs .nav-link{
  flex:0 0 auto; height:60px; padding:0 2px;
  border:0!important; border-radius:0!important; background:transparent!important;
  display:inline-flex; align-items:center; position:relative;
  font-size:15px; color:var(--ink3);
}
.lcl-tabs .nav-link:hover{ color:var(--blue); }
.lcl-tabs .nav-link.active{ color:var(--ink); font-weight:600; }
.lcl-tabs .nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--blue);
}
/* 只有一个标签：不平分，靠左，竖线也没有 */
.lcl-tabs:not(:has(.nav-item + .nav-item)) .nav-item{ justify-content:flex-start; padding-left:34px; }

.lcl-body{ padding:28px 34px 30px; }
.lcl-body form{ display:flex; flex-direction:column; }
.lcl-body .form-group{ order:0; margin-bottom:16px; }
.lcl-body .form-group label{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.lcl-body{ --auth-ctl-h:46px; }     /* 登录卡里的控件统一高度，验证码图也吃这个值 */
.lcl-body .form-control{
  height:var(--auth-ctl-h); line-height:calc(var(--auth-ctl-h) - 2px); padding:0 14px; font-size:14px;
  border:1px solid #dcdfe6; border-radius:4px;
}
.lcl-body .form-control::placeholder{ color:#b4bac3; }
.lcl-body .form-control:focus{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(18,116,214,.12); }

/* 区号 + 手机号：现网是两个独立的框，中间留空，不是拼在一起的 */
.lcl-body .lca-phone{ border:0; box-shadow:none!important; display:flex; gap:10px; }
.lcl-body .lca-phone .input-group-prepend{ width:118px; flex:none; }
.lcl-body .lca-phone .input-group-prepend .form-control{
  border:1px solid #dcdfe6!important; border-radius:4px; padding:0 10px; font-size:13.5px;
}
/* ⚠ 手机号那个框外面被脚本套了一层 .lcx-wrap（放图标用），
   所以不能只写 `.lca-phone > .form-control` —— 套壳之后它就不是直接子元素了，
   边框会整个消失，看着像少了一个框。两种情况都要写上。 */
.lcl-body .lca-phone > .form-control,
.lcl-body .lca-phone > .lcx-wrap > .form-control{
  border:1px solid #dcdfe6!important; border-radius:4px!important; width:auto; flex:1 1 auto;
}
.lcl-body .lca-phone > .lcx-wrap{ flex:1 1 auto; min-width:0; }
.lcl-body .lca-phone > .lcx-wrap > .form-control{ width:100%; }
/* ⚠ 手机端「区号」会掉到手机号上面单独占一行 —— Bootstrap 的 .input-group
   默认 flex-wrap:wrap，而手机号那格的基准宽度是按占位文字算的（≈200px），
   118 + 10 + 200 已经超过 390 屏上的行宽，于是换行。
   两条一起写才管用：整行 nowrap + 手机号那格 flex-basis 归零（可以被压缩）。 */
.lca-phone{ flex-wrap:nowrap!important; }
.lcl-body .lca-phone > .lcx-wrap,
.lcl-body .lca-phone > .form-control{ flex:1 1 0!important; min-width:0; }

/* ---- 拼接行（短信验证码 + 获取验证码按钮）----
   ⚠ 这一组有两个坑，都踩过：
   1) Bootstrap 的 .input-group 默认 flex-wrap:wrap，里面的输入框又被脚本
      套了一层 .lcx-wrap（放图标用）。壳一旦按 100% 宽算，右边的按钮就被
      挤出边框外面去 —— 表现就是「获取验证码」浮在框的右边、压着描边。
      所以必须 nowrap + 壳 flex:1 1 0 + min-width:0，让壳可以被压缩。
   2) 外面那圈边画在 .lca-code 上，里面的控件一律去边；
      再加 overflow:hidden，任何子元素都不可能跑到圆角外面。 */
.lcl-body .lca-code, .lca-form .lca-code{
  display:flex; flex-wrap:nowrap; align-items:stretch;
  border:1px solid #dcdfe6; border-radius:4px; background:#fff; overflow:hidden;
}
.lcl-body .lca-code:focus-within, .lca-form .lca-code:focus-within{
  border-color:var(--blue); box-shadow:0 0 0 2px rgba(18,116,214,.12);
}
.lcl-body .lca-code > .lcx-wrap, .lca-form .lca-code > .lcx-wrap,
.lcl-body .lca-code > .form-control, .lca-form .lca-code > .form-control{
  flex:1 1 0; min-width:0; width:auto;
}
.lcl-body .lca-code .form-control, .lca-form .lca-code .form-control{
  border:0!important; box-shadow:none!important; background:transparent;
  border-radius:0!important; width:100%;
}
.lcl-body .lca-code .input-group-append, .lca-form .lca-code .input-group-append{
  flex:none; margin:0; display:flex; align-items:stretch;
}
.lcl-body .lca-code .input-group-append .btn, .lca-form .lca-code .input-group-append .btn{
  height:auto; min-height:44px; padding:0 15px; white-space:nowrap;
  border:0!important; border-left:1px solid var(--line)!important; border-radius:0!important;
  background:transparent!important; color:var(--blue)!important; font-size:13.5px; box-shadow:none!important;
}
.lcl-body .lca-code .input-group-append .btn:hover,
.lca-form .lca-code .input-group-append .btn:hover{ background:#f6f8fa!important; }
.lcl-body .lca-code .input-group-append .btn:disabled,
.lca-form .lca-code .input-group-append .btn:disabled{ color:var(--ink4)!important; background:#fafbfc!important; }

/* 登录按钮：蓝色渐变，通栏。order:1 把它排在字段后面 */
.lcl-body .lca-submit{
  order:1; height:50px!important; width:100%; margin:6px 0 0;
  border:0!important; border-radius:4px;
  /* 渐变写成 background-image，另外留一条 background-color 兜底：
     万一渐变没生效（老浏览器 / 被覆盖），按钮也不会变成白底白字。 */
  background-color:#1268c4!important;
  background-image:linear-gradient(90deg,#1274d6 0%,#0d5fc4 100%)!important;
  color:#fff!important; font-size:16px; font-weight:500; letter-spacing:4px;
}
@media (hover:hover) and (pointer:fine){
  .lcl-body .lca-submit:hover{ background-color:#1e7edd!important; background-image:linear-gradient(90deg,#2e8be7 0%,#1770d6 100%)!important; }
}
.lcl-body .lca-submit:active{ background-color:#1268c9!important; background-image:linear-gradient(90deg,#1e7edd 0%,#1268c9 100%)!important; }

/* 链接行：order:2 挪到按钮下面，三条并排 */
.lcl-body .lca-row{
  order:2; display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  justify-content:flex-start; margin:16px 0 0;
}
.lcl-body .lca-link{ font-size:13px; color:var(--ink2); }
.lcl-body .lca-link:hover{ color:var(--blue); }
.lcl-body .lca-link-hi{ margin-left:auto; color:#d1451f; font-weight:500; }
.lcl-body .lca-link-hi:hover{ color:#ee6b46; }

.lcl-oauth{ margin-top:24px; }
.lcl-sep{ display:block; position:relative; margin-bottom:16px; font-size:13px; color:var(--ink3); text-align:center; }
.lcl-sep::before,.lcl-sep::after{
  content:""; position:absolute; top:50%; width:calc(50% - 62px); height:1px; background:var(--line);
}
.lcl-sep::before{ left:0; } .lcl-sep::after{ right:0; }
.lcl-oauth .list-inline{ margin:0; display:flex; justify-content:center; gap:14px; }
.lcl-oauth .list-inline-item{ margin:0; }
.lcl-oauth .social-list-item{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--ink2); font-size:19px;
}
.lcl-oauth .social-list-item img{ width:38px; height:38px; border-radius:50%; }
.lcl-slot{ padding:12px 0 0; text-align:center; font-size:13px; color:var(--ink3); }

/* ---- 页脚：左对齐，跟现网一致 ---- */
.lcl-foot{ flex:none; padding:18px 30px 24px; font-size:12.5px; color:#666e7c; line-height:1.9; }
.lcl-foot p{ margin:0; }
.lcl-foot-gov{ display:flex; flex-wrap:wrap; gap:2px 22px; }
.lcl-foot-gov a{ color:#666e7c; }
.lcl-foot-gov a:hover{ color:var(--blue); }

@media (max-width:1100px){
  .lcl-main{ gap:40px; padding:30px 22px 22px; }
  .lcl-say h2{ font-size:28px; }
  .lcl-card{ flex-basis:420px; }
}
@media (max-width:900px){
  .lcl-main{ flex-direction:column; gap:26px; padding:26px 18px 18px; }
  .lcl-say{ flex:none; width:100%; max-width:520px; }
  .lcl-say h2{ font-size:24px; }
  .lcl-art{ display:none; }          /* 手机上主视觉太占地方，收起来 */
  .lcl-card{ flex:none; width:100%; max-width:452px; }
  .lcl-nav{ gap:18px; }
  .lcl-top{ padding:0 16px; height:58px; }
  .lcl-brand img{ height:32px; max-width:170px; }
  .lcl-foot{ padding:16px; }
}
@media (max-width:480px){
  .lcl-nav a:nth-child(2){ display:none; }
  .lcl-body{ padding:24px 18px 26px; }
  .lcl-tabs .nav-link{ height:54px; font-size:14px; }
  .lcl-body .lca-phone{ flex-wrap:wrap; }
  .lcl-body .lca-phone .input-group-prepend{ width:104px; }
  .lcl-body .lca-row{ gap:16px; }
  .lcl-body .lca-link-hi{ margin-left:0; }
}

/* ============================================================================
   16. 表单细节：字段图标 / 密码眼睛 / 链接行

   ⚠ 图标为什么画在外层 .lcx-wrap 的 ::before 上，而不是 input 的 background-image：
     Chrome 的自动填充（autofill）会用一个特殊图层盖住输入框，
     input 自己的 background-image 会被整个吃掉 —— 表现就是
     「没填的框有图标，浏览器自动填过的框图标没了」。
     画在外层元素上就不受影响。踩过，别改回 background-image。
   ========================================================================= */

/* 包在输入框外面的一层，由模板里的脚本注入 */
.lcx-wrap{ position:relative; display:block; }
.lcx-wrap .form-control{ padding-left:40px; }
.lcx-wrap::before{
  content:""; position:absolute; left:13px; top:50%; margin-top:-9px;
  width:18px; height:18px; z-index:2; pointer-events:none;
  background-repeat:no-repeat; background-position:center; background-size:17px 17px;
}
.lcx-ico-user::before{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.lcx-ico-lock::before{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.7' 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");
}
.lcx-ico-code::before{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H5.2L4 17.5z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");
}
.lcx-ico-mail::before{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E");
}
/* 拼接组（验证码那种）里，外层 wrap 要能撑开 */
.input-group > .lcx-wrap{ flex:1 1 auto; min-width:0; }
.input-group > .lcx-wrap .form-control{ border-radius:4px 0 0 4px; }


/* 密码框右侧的显示/隐藏眼睛 */
.lcx-eye{
  position:absolute; top:50%; right:1px; transform:translateY(-50%);
  width:40px; height:calc(100% - 2px); padding:0; border:0; border-radius:0 4px 4px 0;
  background:transparent; color:#9aa2ae; cursor:pointer; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.lcx-eye:hover{ color:var(--blue); }
.lcx-eye svg{ width:18px; height:18px; }
.lcx-wrap:has(.lcx-eye) .form-control{ padding-right:44px; }

/* 输入框三态 */
.lcl-body .form-control, .lca-form .form-control{
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.lcl-body .form-control:hover, .lca-form .form-control:hover{ border-color:#b9c2cd; }

/* 卡片底部的链接行（注册/找回密码用；登录用的是表单里那个 .lca-row） */
.lcl-links{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  margin:16px 0 0; padding-top:2px;
}
.lcl-links a{ font-size:13px; color:var(--ink2); }
.lcl-links a:hover{ color:var(--blue); }
.lcl-links a:last-child{ margin-left:auto; }

/* 协议勾选放在按钮下面 */
.lcl-body .lca-agree{
  display:flex; align-items:flex-start; gap:8px; margin:14px 0 0;
  font-size:12.5px; line-height:1.7; color:var(--ink2); font-weight:400; cursor:pointer;
}
.lcl-body .lca-agree input{ margin-top:3px; flex:none; width:13px; height:13px; accent-color:var(--blue); }
.lcl-body .lca-agree a{ color:var(--blue); }

/* 卡片里的字段节奏 */
.lcl-body .form-group{ margin-bottom:14px; }
.lcl-body .form-group:last-of-type{ margin-bottom:2px; }
.lcl-body .lca-row{ padding-top:2px; }
/* 注册页字段多，卡片给高一点的上限并允许滚动 */
.lcl-card{ max-height:none; }

/* ============================================================================
   17. 图形验证码那一行 + 页面的视觉层次

   之前图形验证码是「输入框自己一圈边 + 图片浮在右边」，
   图片比输入框矮 2px、又压在圆角上，看着像贴歪了。
   现在整行当成一个控件：外面一圈边，输入框去边，图片撑满行高贴右边。
   ========================================================================= */

/* 图形验证码行（includes/verify.tpl 输出的那一组） */
.lcl-body .input-group:has(.lcx-captcha),
.lca-form .input-group:has(.lcx-captcha){
  display:flex; flex-wrap:nowrap; align-items:stretch;
  border:1px solid #dcdfe6; border-radius:4px; background:#fff; overflow:hidden;
}
.lcl-body .input-group:has(.lcx-captcha) > .lcx-wrap,
.lca-form .input-group:has(.lcx-captcha) > .lcx-wrap,
.lcl-body .input-group:has(.lcx-captcha) > .form-control,
.lca-form .input-group:has(.lcx-captcha) > .form-control{ flex:1 1 0; min-width:0; width:auto; }
.lcl-body .input-group:has(.lcx-captcha):focus-within,
.lca-form .input-group:has(.lcx-captcha):focus-within{
  border-color:var(--blue); box-shadow:0 0 0 2px rgba(18,116,214,.12);
}
.lcl-body .input-group:has(.lcx-captcha) .form-control,
.lca-form .input-group:has(.lcx-captcha) .form-control{
  border:0!important; box-shadow:none!important; background:transparent; border-radius:0!important;
}
/* ---- 图形验证码：输入框在左，图在右，同一行 ----
   两条原则合在一起：
     1) **同一行**（不要把图甩到下一行去，那样看着像页面里夹了张图）
     2) **图自己就是框**：边框圆角画在 <img> 上，图填满框，四周不留白
   图的高度跟输入框对齐，宽度 auto 等比；给个 200px 的上限，
   保证左边输入框还有一半以上的位置可以打字。

   ⚠ 改过七版，坑全在这，别再走回去：
     v1 cover 填满右边一格           → 被裁一圈，数字上下切断
     v2 限死 114×40 塞进同一圈边      → 缩太小，糊成一团
     v3 独立成框，限高 46 限宽 160    → 扁图缩完只剩 40 来像素高
     v4 甩到下一行，图按自己尺寸放     → 比输入框窄一截、左对齐飘着
     v5 下一行 + 外套等宽框、图居中    → 两边大片留白
     v6 下一行 + 图即是框             → 还是「下一行」，位置不对
     v7（现在）同一行 + 图即是框       → 就是这个 */
.lcl-body .form-group:has(.lcx-captcha) .input-group,
.lca-form .form-group:has(.lcx-captcha) .input-group,
.lcl-body .input-group:has(.lcx-captcha),
.lca-form .input-group:has(.lcx-captcha){
  display:flex; flex-wrap:nowrap; align-items:center; gap:10px;
  border:0!important; background:none!important; overflow:visible; box-shadow:none!important;
}
/* 左边输入框：占满剩余宽度，自己有边框 */
.lcl-body .input-group:has(.lcx-captcha) > .lcx-wrap,
.lca-form .input-group:has(.lcx-captcha) > .lcx-wrap,
.lcl-body .input-group:has(.lcx-captcha) > .form-control,
.lca-form .input-group:has(.lcx-captcha) > .form-control{
  flex:1 1 0; min-width:0; width:auto;
}
.lcl-body .input-group:has(.lcx-captcha) .form-control,
.lca-form .input-group:has(.lcx-captcha) .form-control{
  width:100%; border:1px solid #dcdfe6!important; border-radius:4px!important;
  background:#fff; box-shadow:none;
}
.lcl-body .input-group:has(.lcx-captcha) .form-control:focus,
.lca-form .input-group:has(.lcx-captcha) .form-control:focus{
  border-color:var(--blue)!important; box-shadow:0 0 0 2px rgba(18,116,214,.12);
}
/* 右边放图的容器：不画任何东西，只负责占位。
   ⚠ align-self:stretch —— 让这一格跟左边输入框一样高，
   图再用 height:100% 贴上去，不管输入框高度怎么调都不会差那一两像素。 */
.lcl-body .input-group:has(.lcx-captcha) .input-group-append,
.lca-form .input-group:has(.lcx-captcha) .input-group-append{
  flex:none; margin:0; padding:0; width:auto; align-self:stretch;
  border:0!important; background:none!important; box-shadow:none!important;
  display:flex; align-items:stretch; line-height:0;
}
/* 这一格的宽度上限按行宽的百分比算（不是写死像素）：
   图再扁也只占半行，左边输入框永远留得下「图形验证码」几个字。 */
.lcl-body .input-group:has(.lcx-captcha) .input-group-append,
.lca-form .input-group:has(.lcx-captcha) .input-group-append{ max-width:52%; }
/* 图 = 框：边框圆角画在 <img> 上，图填满框，四周不留白。
   ⚠ 尺寸只用 max-width / max-height 两个上限，**绝不写死 height 或 width**：
     - 两个都是 auto + 两个上限 → 浏览器等比缩到盒子里，
       img 自己的盒子跟着缩到实际尺寸，既不变形也不留白。
     - 一旦写死一边（比如 height:38px）再给另一边上限，
       宽度被截断而高度不变，图就压扁了（240×60 压成 78×44，踩过）。
     - 而且写死高度时，遇到特别扁的图（5:1、6:1）宽度会算得很大，
       直接把左边输入框挤没、图冲出卡片（手机上就是这个样子，也踩过）。 */
/* 2026-09 改：图的高度锁死成跟输入框一样（48px），宽度上限不变，
   靠 object-fit:contain 保证不变形 —— 比例特殊的图会在框内留白，
   但「跟输入框一样高」比「图自己多高就多高」更整齐，用户要的是这个。 */
.lcx-captcha{
  display:block; width:auto;
  height:46px;                                 /* 老浏览器兜底 */
  height:var(--auth-ctl-h,var(--ctl-h,46px));               /* 跟输入框同一个变量，永远一样高 */
  box-sizing:border-box;                       /* 把 1px 边框算进高度里，不会多出 2px */
  object-fit:contain; background:#fff;
  max-width:200px;              /* 老浏览器兜底 */
  max-width:min(200px,100%);    /* 不许超出右边那格（那格自己还有个百分比上限） */
  border:1px solid #dcdfe6!important; border-radius:4px!important;
  background:#fff; cursor:pointer;
  /* border-box：max-width 要把 1px 边框算进去，否则最窄的屏上图会比容器宽 2px */
  box-sizing:border-box;
}
.lcx-captcha:hover{ border-color:#a8c9ea!important; }

/* 手机：**仍然是同一行**，不换行。
   做法是把图的上限改成按行宽的百分比算，图再扁也只占不到一半，
   左边输入框保底 96px，够放「图形验证码」这几个字，谁也挤不掉谁。
   （曾经有一版是 480 以下把图甩到第二行，看着像页面里夹了张图，已经废弃，别改回去） */
@media (max-width:480px){
  .lcl-body .form-group:has(.lcx-captcha) .input-group,
  .lca-form .form-group:has(.lcx-captcha) .input-group{ flex-wrap:nowrap; gap:8px; }
  .lcl-body .input-group:has(.lcx-captcha) > .lcx-wrap,
  .lca-form .input-group:has(.lcx-captcha) > .lcx-wrap,
  .lcl-body .input-group:has(.lcx-captcha) > .form-control,
  .lca-form .input-group:has(.lcx-captcha) > .form-control{ flex:1 1 0; min-width:92px; }
  /* 窄屏上多分一点宽度给图（54%），图越扁越需要横向空间才看得清；
     左边输入框保底 92px，放得下「图形验证码」这几个字。 */
  .lcl-body .input-group:has(.lcx-captcha) .input-group-append,
  .lca-form .input-group:has(.lcx-captcha) .input-group-append{ flex:0 1 auto; min-width:0; max-width:54%; }
  .lcx-captcha{ max-width:100%; max-height:46px; }
}

/* 不支持 :has() 的浏览器兜底 */
@supports not selector(:has(*)){
  .lcx-captcha{ width:auto; height:auto; max-width:200px; max-height:48px; }
}

/* ---- 浏览器自动填充那层淡蓝/淡黄底 ----
   Chrome 用一个特殊图层画它，常规 background 盖不住，
   只有 inset box-shadow 能压过去。三个伪类都要写，不然聚焦/悬停时又冒出来。 */
.lcc input:-webkit-autofill,
.lcc input:-webkit-autofill:hover,
.lcc input:-webkit-autofill:focus,
.lcc input:-webkit-autofill:active,
.lcl-body input:-webkit-autofill,
.lcl-body input:-webkit-autofill:hover,
.lcl-body input:-webkit-autofill:focus,
.lcl-body input:-webkit-autofill:active,
.lcc select:-webkit-autofill,
.lcc textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
          box-shadow:0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:var(--ink) !important;
  caret-color:var(--ink) !important;
  transition:background-color 99999s ease-out 0s !important;
}

/* ---- 页面不要白得发慌：加一层很淡的底纹和光晕 ----
   颜色控制在 5% 以内，远看是「有质感的浅灰」，凑近才看得出纹路，
   不会变成之前那种一眼蓝的大色块。 */
.lcl::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(820px 520px at 6% 0%, rgba(18,116,214,.055), transparent 60%),
    radial-gradient(680px 460px at 100% 100%, rgba(0,176,170,.045), transparent 58%);
}
.lcl::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(19,32,56,.055) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(86% 72% at 32% 42%,#000,transparent 76%);
          mask-image:radial-gradient(86% 72% at 32% 42%,#000,transparent 76%);
}
.lcl{ position:relative; }
.lcl-top,.lcl-main,.lcl-foot{ position:relative; z-index:1; }

/* ---- 卡片：加一道顶边高光和更实的投影，跟底纹拉开层次 ---- */
.lcl-card{
  position:relative;
  box-shadow:0 18px 48px rgba(18,44,84,.10), 0 2px 6px rgba(18,44,84,.05);
}
.lcl-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg,#1274d6,#00b6d4);
  border-radius:6px 6px 0 0;
}

/* ---- 左边主视觉：标题层次拉开一点 ---- */
.lcl-say h2{
  background:linear-gradient(96deg,#11203a 0%,#1b3f6e 60%,#0f5fae 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#11203a;
}
.lcl-say > p{ font-size:15px; color:#5b6c82; }
.lcl-art{ margin-top:16px; }

/* ---- 顶栏：底下补一道极淡的分隔，跟内容区分开 ---- */
.lcl-top{ box-shadow:0 1px 0 rgba(19,32,56,.05); }

/* ---- 按钮按下去有一点点下沉，手感更实 ---- */
.lcl-body .lca-submit{ transition:background .18s var(--ease), transform .08s var(--ease); }
.lcl-body .lca-submit:active{ transform:translateY(1px); }

/* 图形验证码输入框的图标
   ⚠ 这一个不套 .lcx-wrap（怕影响验证码插件按 DOM 兄弟节点找图），
     图标直接画在输入框自己的 background 上。
     验证码框不会被浏览器自动填充，所以不用担心自动填充盖住图标。 */
.lcl-body .lcx-cap-inp,
.lca-form .lcx-cap-inp{
  padding-left:40px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v5.5c0 4.6-3.2 8.5-8 9.5-4.8-1-8-4.9-8-9.5V6z'/%3E%3Cpath d='M9.2 12.2l2 2 3.6-3.8'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:13px 50%!important;
  background-size:17px 17px!important;
}

/* 旧的套壳写法保留给其它字段用 */
.lcx-ico-shield::before{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v5.5c0 4.6-3.2 8.5-8 9.5-4.8-1-8-4.9-8-9.5V6z'/%3E%3Cpath d='M9.2 12.2l2 2 3.6-3.8'/%3E%3C/svg%3E");
}
/* ⚠ 这里原来有一条「图形验证码行里的输入框去边」的规则，是上一版
   「图和输入框拼在同一圈边里」留下的。现在两者是两个独立的框，
   输入框必须自己有边 —— 那条规则权重比新规则高，留着会把边框抹掉，
   表现是「图形验证码那一行只剩一行字、没有框」。已删除，别加回来。
   壳的伸缩仍然要： */
.lcl-body .input-group:has(.lcx-captcha) .lcx-wrap,
.lca-form .input-group:has(.lcx-captcha) .lcx-wrap,
.lcl-body .input-group > .lcx-cap-inp,
.lca-form .input-group > .lcx-cap-inp{ flex:1 1 0; min-width:0; }
/* ⚠ 高度必须单独写死一条。
   上面有一条 .lcc .input-group > .form-control{height:var(--ctl-h)}（32px，权重 0,3,0），
   验证码输入框改成 .input-group 的直接子元素之后就被它命中了，
   结果只有 32px 高，比同一张卡里其它输入框矮一截（其它框外面还套着 .lcx-wrap，命不中）。
   这里用更高的权重把登录卡的 46px 拿回来。 */
.lcc .lcl-body .input-group > .lcx-cap-inp,
.lcc .lca-form .input-group > .lcx-cap-inp,
.lcl-body .input-group > .lcx-cap-inp,
.lca-form .input-group > .lcx-cap-inp{
  height:var(--auth-ctl-h, var(--ctl-h, 46px))!important;
  line-height:calc(var(--auth-ctl-h, var(--ctl-h, 46px)) - 2px);
}

/* ============================================================================
   18. 总览页（clientarea.tpl）

   排布跟现网一致：上面三张等宽卡（用户信息 / 财务信息 / 消费信息），
   中间代办事项和已开通产品各占一整行，底下资源列表 8 + 公告 4。
   两条硬要求写在这里，改之前先读：
     1) 上面三张卡必须等高，并且内容撑得起来 —— 之前一张卡只有一百来像素高，
        页面看着头轻脚重；
     2) 底下两张卡各自按内容高，谁也不许被拉长 —— 之前资源列表被拉到跟右栏一样高，
        四行表格下面空出一大片。
   ========================================================================= */
.lcc .lcc-ov .lcc-ov-card{
  height:100%; margin-bottom:var(--gap); padding:16px 18px 18px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.lcc .lcc-ov .lcc-ov-card:hover{ border-color:#dbe6f2; box-shadow:0 2px 14px rgba(16,42,80,.05); }
/* 底下这两张（资源列表 / 公告通知）同排等高：
   ⚠ 之前给资源列表写了 min-height:220px，机器少的时候就白白拉出一大片空白；
   又给两张都写了 height:auto!important，于是矮的那张也不会跟着高的那张对齐。
   现在两条都去掉 —— 走 .lcc-ov-card 的 height:100%，
   整排高度跟着「内容多的那一张」走，内容少就一起矮下来。 */
.lcc .lcc-ov-t{
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line-2);
  font-size:14.5px; font-weight:600; color:var(--ink);
}
.lcc .lcc-ov-t-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.lcc .lcc-ov-t-row a{ font-size:12.5px; font-weight:400; }

/* ---- 用户信息 ---- */
.lcc .lcc-ov-user{ display:flex; align-items:flex-start; gap:13px; }
.lcc .lcc-ov-ava{
  flex:none; width:52px; height:52px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff; font-size:17px; font-weight:600; letter-spacing:.5px;
}
.lcc .lcc-ov-uinfo{ min-width:0; padding-top:2px; }
.lcc .lcc-ov-hi{ margin:0; font-size:12.5px; color:var(--ink3); line-height:1.5; }
.lcc .lcc-ov-name{ margin:2px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lcc .lcc-ov-name a{ font-size:17px; font-weight:600; color:var(--ink); }
.lcc .lcc-ov-name a:hover{ color:var(--blue); }
.lcc .lcc-ov-grp{
  padding:2px 9px; border-radius:20px; background:var(--blue-l); color:#116bc6;
  font-size:12px; font-style:normal; font-weight:500; line-height:18px;
}
/* 资料行：标签固定宽 + 冒号，值左对齐，两行对得齐 */
.lcc .lcc-ov-user .lcc-ov-meta{ margin:8px 0 0; }
.lcc .lcc-ov-meta{ margin:0; padding:0; list-style:none; }
.lcc .lcc-ov-meta > li{ display:flex; align-items:baseline; gap:6px; padding:3px 0; font-size:13px; line-height:1.65; }
.lcc .lcc-ov-meta > li > span{ flex:none; min-width:62px; color:var(--ink3); }
.lcc .lcc-ov-meta > li > span::after{ content:"："; }
.lcc .lcc-ov-meta > li > b{ font-weight:500; color:var(--ink2); word-break:break-all; }
.lcc .lcc-ov-sec{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
}
.lcc .lcc-ov-secit{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 2px; border-radius:var(--r); color:var(--ink3)!important;
  font-size:12px; text-align:center; line-height:1.4;
  transition:background-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.lcc .lcc-ov-secit i{ font-size:20px; }
.lcc .lcc-ov-secit:hover{ background:var(--line-2); color:var(--ink2)!important; transform:translateY(-1px); }
.lcc .lcc-ov-secit.is-ok{ color:var(--blue)!important; }
.lcc .lcc-ov-secit.is-ok:hover{ background:var(--blue-l); }

/* ---- 财务信息 ---- */
/* 余额面板：撑满卡片剩余高度，内容垂直居中。
   之前是「标签+数字+按钮」直接堆在卡片顶部，底下空一大片，很不好看。 */
.lcc .lcc-ov-bal{
  flex:1 1 auto; margin:2px 0 0;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px;
  padding:22px 20px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fafbfc;
}
.lcc .lcc-ov-lb{ margin:0; font-size:13px; color:var(--ink3); }
.lcc .lcc-ov-money{
  margin:6px 0 0; font-size:32px; font-weight:600; color:var(--price);
  line-height:1.2; letter-spacing:-.4px; word-break:break-all;
}
.lcc .lcc-ov-btn{ width:auto; max-width:none; height:40px; padding:0 30px; font-size:14.5px; flex:none; }
.lcc .lcc-ov-links{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px;
}
.lcc .lcc-ov-links a:hover{ text-decoration:underline; }
/* 卡片内部拉成竖向弹性，快捷链接才能贴着底边，三张卡的底线对齐 */
.lcc .lcc-ov .card-body.lcc-ov-card{ display:flex; flex-direction:column; }

/* ---- 消费信息 ---- */
.lcc .lcc-ov-fin{ display:flex; align-items:center; gap:22px; margin:auto 0; }
.lcc .lcc-ov-fin #balanceCharts{ flex:none; width:180px; height:180px; }
.lcc .lcc-ov-fin .lcc-ov-meta-v{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:12px; }
/* 右侧两项做成浅底小卡，别再是两行贴着虚线的小字 */
.lcc .lcc-ov-meta-v > li{
  display:flex; flex-direction:column; gap:5px; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fafbfc;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.lcc .lcc-ov-meta-v > li:hover{ border-color:#cfe0f2; background:#f6faff; }
.lcc .lcc-ov-meta-v > li > span{ min-width:0; font-size:13px; color:var(--ink3); }
.lcc .lcc-ov-meta-v > li > span::after{ content:""; }
.lcc .lcc-ov-meta-v > li > b{ font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.3px; line-height:1.2; }
.lcc .lcc-ov-meta-v > li:last-child > b{ color:var(--price); }

/* ---- 代办事项：整行三块，等宽 ---- */
.lcc .lcc-ov-stat{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.lcc .lcc-ov-statit{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:18px 12px; border:1px solid var(--line); border-radius:var(--r-lg);
  color:var(--ink3)!important; font-size:13px; background:#fff;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.lcc .lcc-ov-statit b{ font-size:28px; font-weight:600; color:var(--ink); line-height:1.15; }
.lcc .lcc-ov-statit:hover{ border-color:#a8c9ea; box-shadow:0 3px 14px rgba(16,42,80,.07); transform:translateY(-2px); }
.lcc .lcc-ov-statit:hover b{ color:var(--blue); }

/* ---- 已开通产品：整行平铺，几个分组就分几等份 ---- */
.lcc .lcc-ov-prod{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:12px; }
.lcc .lcc-ov-prodit{
  display:flex; align-items:center; gap:9px;
  padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-lg);
  font-size:14px; color:var(--ink2)!important;
  transition:border-color .18s var(--ease), color .18s var(--ease),
             background-color .18s var(--ease), transform .18s var(--ease);
}
.lcc .lcc-ov-prodit i{ font-size:17px; color:var(--blue); }
.lcc .lcc-ov-prodit span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lcc .lcc-ov-prodit em{ flex:none; font-style:normal; font-size:13px; color:var(--ink3); }
.lcc .lcc-ov-prodit:hover{ border-color:#a8c9ea; background:#f7fbff; color:var(--blue)!important; transform:translateY(-1px); }

/* ---- 公告 ---- */
/* 公告条数由后台决定，多的时候会把整排撑得很高（旁边资源列表就空一大片）。
   这里给列表封顶 380px（约 8 条）并在内部滚动：
   - 公告多 → 列表自己滚，整排高度不再被它带着走；
   - 资源列表更高 → 列表 flex 撑开填满，不留空档。 */
.lcc .lcc-ov-news{
  margin:0; padding:0; list-style:none;
  flex:1 1 auto; min-height:0; max-height:380px; overflow-y:auto; overscroll-behavior:contain;
}
.lcc .lcc-ov-news::-webkit-scrollbar{ width:6px; }
.lcc .lcc-ov-news::-webkit-scrollbar-thumb{ background:#dfe4ea; border-radius:3px; }
.lcc .lcc-ov-news::-webkit-scrollbar-thumb:hover{ background:#cbd2da; }
/* 公告列表跟现网一致：左边日期（带时分）、右边标题，行距松一点，不要分隔线 */
.lcc .lcc-ov-news li{
  display:flex; align-items:center; gap:20px; padding:11px 0; font-size:14px;
}
.lcc .lcc-ov-news li time{
  flex:0 0 auto; width:126px; font-size:13px; color:var(--ink3); font-variant-numeric:tabular-nums;
}
.lcc .lcc-ov-news li a{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink2);
}
.lcc .lcc-ov-news li a:hover{ color:var(--blue); }
@media (max-width:420px){
  .lcc .lcc-ov-news li{ flex-wrap:wrap; gap:2px 12px; padding:9px 0; }
  .lcc .lcc-ov-news li time{ width:auto; order:2; font-size:12.5px; }
  .lcc .lcc-ov-news li a{ flex:1 0 100%; order:1; white-space:normal; }
}
.lcc .lcc-ov-empty{ margin:6px 0; font-size:13px; color:var(--ink3); }
/* .lcc-ov-src 不再写死最小高度，见上面「同排等高」那段说明 */

/* 进场动画：卡片依次浮上来一点点，克制，不抢戏 */
@media (prefers-reduced-motion:no-preference){
  .lcc .lcc-ov > section{ animation:lccUp .32s var(--ease-out) both; }
  .lcc .lcc-ov > section:nth-child(2){ animation-delay:.04s; }
  .lcc .lcc-ov > section:nth-child(3){ animation-delay:.08s; }
  .lcc .lcc-ov > section:nth-child(4){ animation-delay:.12s; }
  .lcc .lcc-ov > section:nth-child(5){ animation-delay:.16s; }
  .lcc .lcc-ov > section:nth-child(6){ animation-delay:.2s; }
  .lcc .lcc-ov > section:nth-child(7){ animation-delay:.24s; }
}
@keyframes lccUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:991px){
  .lcc .lcc-ov-stat{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .lcc .lcc-ov-statit{ padding:14px 8px; }
  .lcc .lcc-ov-statit b{ font-size:23px; }
}
@media (max-width:575px){
  .lcc .lcc-ov-sec{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lcc .lcc-ov-stat{ grid-template-columns:1fr; }
  .lcc .lcc-ov-fin{ flex-direction:column; align-items:stretch; gap:14px; }
  .lcc .lcc-ov-fin #balanceCharts{ width:100%; height:190px; }
  .lcc .lcc-ov-btn{ max-width:none; }
  .lcc .lcc-ov-money{ font-size:26px; }
}

/* 充值页的条款勾选 */
.lcc .lcc-terms{
  display:inline-flex; align-items:flex-start; gap:8px; margin:0;
  font-size:13px; font-weight:400; color:var(--ink2); cursor:pointer; line-height:1.7;
}
.lcc .lcc-terms input{ width:15px; height:15px; margin-top:3px; flex:none; accent-color:var(--blue); }
.lcc .lcc-terms a{ color:var(--blue); }
.lcc .lcc-terms a:hover{ text-decoration:underline; }
.lcc .lcc-terms-tip{ margin:6px 0 0; font-size:12.5px; color:var(--red); }
.lcc .lcc-terms-tip[hidden]{ display:none; }

/* ============================================================================
   19. 产品详情页（servicedetail/cloud|dedicated|zjmfcloud|zjmfdcim）

   官方在模板里用 <style> 写死了一条紫蓝渐变的大横幅（.server_header_box），
   跟整站的调子完全不搭，而且那段 <style> 在 body 里、排在主题 CSS 后面，
   所以这里必须用 .lcc 前缀把权重提上去（0,2,0 > 0,1,0）才盖得住。
   改法对齐现网：白底卡片 + 深色标题 + 主题蓝按钮。
   ========================================================================= */
.lcc .server_header_box{
  background-image:none!important; background:#fff!important;
  border:1px solid var(--line); border-radius:var(--r-lg)!important;
  padding:18px 20px!important; color:var(--ink)!important; box-shadow:var(--sh1);
}
.lcc .server_header_box .text-white,
.lcc .server_header_box h4,
.lcc .server_header_box h5,
.lcc .server_header_box span,
.lcc .server_header_box p{ color:var(--ink)!important; }
.lcc .server_header_box .text-white-50,
.lcc .server_header_box small{ color:var(--ink3)!important; }
.lcc .server_header_box h4{ font-size:19px; font-weight:600; }
/* 横幅里那些小蓝块（重装系统、状态标签）改成浅蓝描边芯片 */
.lcc .server_header_box .left_wrap_btn,
.lcc .server_header_box .custom-button{
  width:auto!important; height:auto!important; padding:3px 10px!important;
  background:var(--blue-l)!important; box-shadow:none!important;
  border:1px solid #bcd9f5!important; border-radius:var(--r)!important;
  color:#1268c4!important; font-size:12px!important; line-height:1.6!important;
}
.lcc .server_header_box .left_wrap_btn:hover,
.lcc .server_header_box .custom-button:hover{ background:#e2edfb!important; }
/* 电源图标那一圈 */
/* 电源那个圆：它在一个 flex 容器里，只写 width/height 会被压扁成椭圆，
   必须把 flex 收缩关掉并锁死最小宽高。 */
.lcc .server_header_box .powerimg{
  flex:0 0 48px!important; width:48px!important; height:48px!important;
  min-width:48px; min-height:48px; aspect-ratio:1/1;
  border-radius:50%!important;
  display:flex!important; align-items:center; justify-content:center;
  color:#fff!important; font-size:22px; line-height:1;
  /* 官方给它配了浅灰底 + 一圈发紫的投影（rgba(6,31,179,.26)），
     在白卡上看着像块脏斑。去掉底色和投影，只留状态图标本身。 */
  background:transparent!important; box-shadow:none!important;
  /* ⚠ 不能 overflow:hidden —— 圆角会把 48px 的状态图标边缘削掉一圈，
     看着就是「圆圈少了一块」。 */
  overflow:visible!important;
}
/* ⚠⚠ 千万别改 .sprite 的尺寸！
   官方那张 status2.png 是雪碧图：background-size:48px、每一帧的纵向步进是 55px
   （.closed 在 -55px、.unknown 在 -163px、.waitOn 在 -218px …）。
   我之前把它改成 width/height/background-size 都是 44px，等于把整张图缩到 91.7%，
   所有帧的偏移量就全部对不上了 —— 于是画出来的是「上一帧的下半截 + 这一帧的上半截」，
   看起来正好像圆圈缺了一角。这里显式写回官方值，防止别处的规则再压到它。 */
.lcc .server_header_box .powerimg .sprite,
.lcc .powerimg .sprite{
  width:48px!important; height:48px!important;
  background-size:48px!important; background-repeat:repeat-y!important;
  flex:none;
}
.lcc .server_header_box .power_box{ flex:none; }
/* 右上角的操作按钮组：统一成主题按钮，不再是一排深蓝方块 */
.lcc .server_header_box .btn-group .btn,
.lcc .server_header_box .btn{
  height:30px; padding:0 13px; border-radius:var(--r);
  font-size:13px; box-shadow:none!important;
}
.lcc .server_header_box .btn-primary,
.lcc .server_header_box .btn-info,
.lcc .server_header_box .btn-success{
  background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important;
}
.lcc .server_header_box .btn-outline-light,
.lcc .server_header_box .btn-light{
  background:#fff!important; border:1px solid var(--line)!important; color:var(--ink2)!important;
}
/* 详情页里那些浅灰信息块 */
.lcc .bg-gray,.lcc .card-body.bg-light{ background:#fafbfc!important; border-radius:var(--r); }
.lcc .xf-bg-text{ font-size:13px; color:var(--ink2); }
/* 详情页的标签页跟站内其它标签页保持一致 */
.lcc .nav-tabs{ border-bottom:1px solid var(--line); }
.lcc .nav-tabs .nav-link{
  padding:9px 14px; border:0; border-bottom:2px solid transparent; border-radius:0;
  font-size:14px; color:var(--ink2); background:transparent;
}
.lcc .nav-tabs .nav-link:hover{ color:var(--blue); }
.lcc .nav-tabs .nav-link.active{ color:var(--blue); border-bottom-color:var(--blue); font-weight:500; background:transparent; }

/* ---- 产品详情：「控制 / 控制台」已经在模板里摊平成一排真按钮 ----
   官方模板把开机、关机、重启、硬关机、硬重启、VNC 收在一个下拉里，
   每次操作要点两下、按钮又小。现在改成模板直接渲染成并排按钮
   （servicedetail/zjmfcloud|cloud|dedicated|zjmfdcim.tpl），
   那颗「控制 ▾」触发按钮连同 .dropdown-menu 一起不再输出。
   ⚠ 每个按钮的 class、onclick、data-func 一个都没动，
     点下去仍然走官方的 service_module_button / dcim_service_module_button。
   ⚠ 也正因为不再有常驻的 .dropdown-menu，弹窗遮罩不会再被这排按钮穿透。 */
/* 8 个操作按钮跟信息栏挤在同一行，宽度不够就被「撑」到下一行，看着像排版塌了。
   干脆让它们固定占满一整行，上面加一条分隔线 —— 变成有意为之的第二行。 */
.lcc .server_header_box .d-flex.justify-content-end{
  flex:1 0 100%!important; max-width:100%;
  flex-wrap:wrap; gap:10px; align-items:center;
  justify-content:flex-start!important;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.lcc .lcc-ctrl-grp{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0;
}
.lcc .server_header_box .lcc-ctrl-btn,
.lcc .server_header_box .btn-group .btn,
.lcc .server_header_box > .btn,
.lcc .server_header_box .btn{
  height:42px!important; padding:0 24px!important; font-size:14.5px!important; font-weight:500;
  border-radius:var(--r)!important; white-space:nowrap;
}
/* ⚠ 一排 8 个实心蓝块太重了，整条头部被糊成一块蓝。
   改成：电源/救援这些控制项是白底描边芯片，只有「控制台（VNC）」留实心蓝当主操作。 */
/* ⚠ 这里必须写成 .btn.custom-button.lcc-ctrl-btn（0,5,0）：
   本文件后面还有一条 .lcc .server_header_box .btn.custom-button{背景:实心蓝}（0,4,0），
   排在后面、权重又不低，只写 .lcc-ctrl-btn 会被它整排刷回蓝色块。 */
.lcc .server_header_box .btn.custom-button.lcc-ctrl-btn,
.lcc .server_header_box .lcc-ctrl-btn{
  display:inline-flex!important; align-items:center; justify-content:center;
  background:#fff!important; border:1px solid var(--line)!important; color:var(--ink2)!important;
  box-shadow:none!important; line-height:1!important;
  transition:border-color .16s var(--ease), color .16s var(--ease),
             background-color .16s var(--ease), box-shadow .16s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .lcc .server_header_box .btn.custom-button.lcc-ctrl-btn:hover,
  .lcc .server_header_box .lcc-ctrl-btn:hover{
    background:#f7fbff!important; border-color:#a8c9ea!important; color:var(--blue)!important;
    box-shadow:0 2px 8px rgba(16,42,80,.06);
  }
}
.lcc .server_header_box .btn.custom-button.lcc-ctrl-btn:active,
.lcc .server_header_box .lcc-ctrl-btn:active{ background:#eef6ff!important; box-shadow:none; }
/* 硬关机 / 硬重启 有风险，悬停给个红提示 */
.lcc .server_header_box .btn.custom-button.lcc-ctrl-btn[data-func*="hard"]:hover,
.lcc .server_header_box .btn.custom-button.lcc-ctrl-btn[data-func*="force"]:hover{
  background:#fdf3f0!important; border-color:#e8a892!important; color:#bd401b!important;
}
/* 控制台（VNC / 远程连接）是主操作：实心蓝 */
.lcc .server_header_box .btn.custom-button:not(.lcc-ctrl-btn){
  background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important;
}
.lcc .server_header_box .btn.custom-button:not(.lcc-ctrl-btn):hover{
  background:var(--blue-h)!important; border-color:var(--blue-h)!important; color:#fff!important;
  box-shadow:0 4px 12px rgba(18,116,214,.22);
}
.lcc .server_header_box .btn-outline-primary,
.lcc .server_header_box .btn-outline-info,
.lcc .server_header_box .btn-secondary{
  background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important;
}

/* ---- 「重装系统 / 重置密码 / 订购流量」这类小按钮 ----
   之前压成了 12px 的小芯片，太小了。恢复成正常大小的浅蓝按钮。 */
/* 顶部这一排操作按钮统一成实心蓝（跟现网一致）。
   ⚠ .custom-button 之前被我做成了浅蓝芯片，于是 VNC 一个人是淡蓝的、
   旁边开机关机全是实心蓝，看着很突兀。 */
.lcc .server_header_box .custom-button,
.lcc .server_header_box .btn.custom-button{
  width:auto!important; height:42px!important; padding:0 24px!important;
  display:inline-flex!important; align-items:center; justify-content:center;
  background:var(--blue)!important; border:1px solid var(--blue)!important;
  border-radius:var(--r)!important; box-shadow:none!important;
  color:#fff!important; font-size:14.5px!important; font-weight:500;
  line-height:1!important; white-space:nowrap;
}
.lcc .server_header_box .custom-button:hover{ background:var(--blue-h)!important; border-color:var(--blue-h)!important; }
/* 「重装系统」这类跟在文字后面的小标签仍然是浅蓝芯片，它不是操作按钮 */
.lcc .server_header_box .left_wrap_btn,
.lcc .left_wrap_btn{
  width:auto!important; height:30px!important; padding:0 14px!important;
  display:inline-flex!important; align-items:center; justify-content:center;
  background:var(--blue-l)!important; border:1px solid #bcd9f5!important;
  border-radius:var(--r)!important; box-shadow:none!important;
  color:#1268c4!important; font-size:13px!important; line-height:1!important; white-space:nowrap;
}
.lcc .server_header_box .left_wrap_btn:hover,
.lcc .left_wrap_btn:hover{ background:#e2edfb!important; }

/* ---- 图表上方的时间范围选择 ----
   官方有两种：一种是几个按钮（近7天/近1天/12小时/30分钟），一种是下拉。
   两种都放大一档，选中态用主题蓝，别再是一排灰扑扑的小按钮。 */
.lcc .servicedetail-time .btn,
.lcc .chart-time .btn,
.lcc .btn-group-toggle .btn.btn-sm{ height:32px!important; padding:0 14px!important; font-size:13px!important; }
.lcc .servicedetail-time .btn.active,
.lcc .chart-time .btn.active{
  background:var(--blue-l)!important; border-color:var(--blue)!important; color:#1268c4!important; font-weight:500;
}

/* ============================================================================
   20. 产品详情横幅统一成白卡
   官方给 SSL / 域名 / 通用产品 / 软件 / NAT 的详情页各写了一条大蓝底横幅
   （.sslStatus 是渐变，其余是 .bg-primary），跟站内其它页面的白卡完全两个调子。
   这里统一压成白底描边卡，文字改深色，分隔线改浅灰。
   ⚠ 只改配色和留白，DOM 结构、按钮行为一个没动。
   ========================================================================= */
.lcc .sslStatus,
.lcc .card.bg-primary.sslStatus,
.lcc .p-5.bg-primary.rounded,
.lcc .card.card_body.bg-primary,
.lcc .bg-primary.rounded-sm{
  height:auto!important;
  background:#fff!important; background-image:none!important;
  border:1px solid var(--line)!important; border-radius:var(--r-lg)!important;
  box-shadow:var(--sh1)!important;
}
/* p-5 = 48px 内边距，横幅上用太空了 */
.lcc .p-5.bg-primary.rounded{ padding:22px 24px!important; }
.lcc .sslStatus .card-body{ padding:20px 22px; }

.lcc .sslStatus,
.lcc .sslStatus .text-white,
.lcc .sslStatus .row.text-white,
.lcc .p-5.bg-primary.rounded,
.lcc .p-5.bg-primary.rounded .text-white,
.lcc .p-5.bg-primary.rounded h1,
.lcc .card.card_body.bg-primary,
.lcc .card.card_body.bg-primary .text-white,
.lcc .bg-primary.rounded-sm,
.lcc .bg-primary.rounded-sm .text-white{ color:var(--ink)!important; }
.lcc .sslStatus .text-white-50,
.lcc .p-5.bg-primary.rounded .text-white-50,
.lcc .card.card_body.bg-primary .text-white-50,
.lcc .bg-primary.rounded-sm .text-white-50{ color:var(--ink3)!important; }
.lcc .p-5.bg-primary.rounded h1{ font-size:22px; font-weight:600; }

/* SSL 横幅细节：左侧图标底、竖分隔线、字号 */
.lcc .sslStatus .sslStatusOnediv > div:first-child > div{
  background:var(--blue-l)!important; border:1px solid #dbe9f8;
}
.lcc .sslStatus .sslStatusTwo > div:first-child,
.lcc .sslStatus .sslStatusTwo > div:last-child{ border-color:var(--line)!important; }
.lcc .sslStatus .sslStatusTwoDiv > div:first-child{ color:var(--ink3)!important; font-size:13px; }
.lcc .sslStatus .sslStatusTwoDiv > div:last-child{ color:var(--ink)!important; font-size:15px; font-weight:500; }
.lcc .sslStatus .sslStatusThree > .btn,
.lcc .sslStatus .btn-primary{
  background:var(--blue)!important; border-color:var(--blue)!important;
  color:#fff!important; box-shadow:none!important; border-radius:var(--r)!important;
}
.lcc .sslStatus .sslStatusThree > .btn:hover,
.lcc .sslStatus .btn-primary:hover{ background:var(--blue-h)!important; border-color:var(--blue-h)!important; }
/* NAT 那条地址栏，白卡里再压一层浅灰底更好认 */
.lcc .bg-primary.rounded-sm{ background:#fafbfc!important; }
.lcc .bg-primary.rounded-sm .btn-copy{ color:var(--ink3)!important; }
.lcc .bg-primary.rounded-sm .btn-copy:hover{ color:var(--blue)!important; }

/* ============================================================================
   21. 续费弹窗（includes/renew.tpl）
   官方是「窄标签 + 一排连在一起的深蓝方块 + 一个小按钮」，挤在左边很难看。
   改成：标题分段 + 独立圆角周期芯片 + 大号价格 + 底部操作条。
   ⚠ 单选框、.btn-radio-bill、#cycle-amount、#billingcycle、.rightBill 全部保留，
     切换周期改价格的那段 JS 一个字没改。
   ========================================================================= */
.lcc .lcc-renew{ padding:22px 24px 20px; }
.lcc .lcc-renew-sec{ margin-bottom:20px; }
.lcc .lcc-renew-lb{
  margin-bottom:10px; font-size:13px; font-weight:500; color:var(--ink3);
}
/* 周期芯片：btn-group 的负边距/圆角合并全部拆开，变成独立芯片 */
.lcc .lcc-cycle-grp{ display:flex!important; flex-wrap:wrap; gap:10px; }
.lcc .lcc-cycle-grp > .btn,
.lcc .lcc-cycle-grp > .btn.btn-primary{
  height:44px; min-width:96px; padding:0 20px; margin:0!important;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r)!important; border:1px solid var(--line)!important;
  background:#fff!important; color:var(--ink2)!important;
  font-size:14.5px; font-weight:500; line-height:1; box-shadow:none!important;
  transition:border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.lcc .lcc-cycle-grp > .btn:hover{ border-color:#a8c9ea!important; color:var(--blue)!important; background:#f7fbff!important; }
.lcc .lcc-cycle-grp > .btn.active,
.lcc .lcc-cycle-grp > .btn.btn-primary.active,
.lcc .lcc-cycle-grp > .btn.focus{
  background:var(--blue-l)!important; border-color:var(--blue)!important;
  color:#1268c4!important; font-weight:600;
}
.lcc .lcc-cycle-grp > .btn input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }

.lcc .lcc-renew-amt{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px;
  padding:14px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fafbfc;
}
.lcc .lcc-renew-cur{ font-size:20px; font-weight:600; color:var(--price); }
.lcc .lcc-renew-num{ font-size:32px; font-weight:600; color:var(--price); letter-spacing:-.5px; line-height:1.1; }
.lcc .lcc-renew-unit{ margin-left:8px; font-size:13.5px; color:var(--ink3); }
.lcc .lcc-renew-tip{ margin-top:8px; font-size:13px; color:var(--ink3); line-height:1.6; }

.lcc .lcc-renew-foot{
  display:flex; justify-content:flex-end; gap:10px;
  margin:0 -24px -20px; padding:16px 24px; border-top:1px solid var(--line-2); background:#fcfdfe;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.lcc .lcc-renew-foot .btn{ height:42px; min-width:104px; padding:0 22px; font-size:14.5px; border-radius:var(--r); }
.lcc .lcc-renew-cancel{
  background:#fff; border:1px solid var(--line); color:var(--ink2);
}
.lcc .lcc-renew-cancel:hover{ background:#f6f8fa; border-color:#a8c9ea; color:var(--blue); }
.lcc .lcc-renew-foot .rightBill{ background:var(--blue); border-color:var(--blue); color:#fff; }
.lcc .lcc-renew-foot .rightBill:hover{ background:var(--blue-h); border-color:var(--blue-h); }
@media (max-width:560px){
  .lcc .lcc-renew{ padding:18px 16px 16px; }
  .lcc .lcc-renew-foot{ margin:0 -16px -16px; padding:14px 16px; }
  .lcc .lcc-renew-foot .btn{ flex:1 1 0; min-width:0; }
  .lcc .lcc-cycle-grp > .btn{ flex:1 1 calc(50% - 5px); min-width:0; }
  .lcc .lcc-renew-num{ font-size:28px; }
}

/* 续费周期芯片：Bootstrap 的 .btn-group > .btn 带 flex:1 1 auto，
   会把四个周期抻满整行，看着像四个大色块。改成按内容宽。 */
.lcc .lcc-cycle-grp > .btn{ flex:0 0 auto; }

/* ============================================================================
   22. 产品详情横幅：信息分栏（对齐现网）
   官方给 .box_left_wrap 写的分隔线是半透明白色（配深蓝底用的），
   横幅改白底之后那条线就看不见了，几栏信息糊成一片。
   这里换成浅灰竖线，并把「标签在上、值在下」的字号拉开层次。
   ========================================================================= */
.lcc .server_header_box{ row-gap:14px; }
.lcc .server_header_box .box_left_wrap{
  min-height:0!important; min-width:110px;
  padding-left:22px!important; margin-right:22px!important;
  border-left:1px solid var(--line)!important;
}
.lcc .server_header_box .box_left_wrap > span,
.lcc .server_header_box .box_left_wrap .text-white-50{
  display:inline-block; margin-bottom:2px; font-size:13px; color:var(--ink3)!important;
}
.lcc .server_header_box .box_left_wrap h5{
  margin:4px 0 0!important; font-size:16px; font-weight:600; color:var(--ink)!important;
  line-height:1.4; word-break:break-all;
}
.lcc .server_header_box .power_box h4{ line-height:1.3; }
.lcc .server_header_box .power_box section:last-child span{ font-size:13px; color:var(--ink3)!important; }
/* 状态徽标在白底上要看得见 */
.lcc .server_header_box .badge-pill{
  padding:3px 10px; font-size:12px; font-weight:500; line-height:18px;
  background:var(--blue-l)!important; color:#1268c4!important;
}
.lcc .server_header_box .badge-pill.status-suspended{ background:#fdf0e6!important; color:#b4610d!important; }
.lcc .server_header_box .badge-pill.status-terminated,
.lcc .server_header_box .badge-pill.status-deleted{ background:#f6f7f9!important; color:var(--ink3)!important; }
/* 操作按钮那一列：窄屏时整排挪到下一行，仍然靠右 */
@media (max-width:1199px){
  .lcc .server_header_box .d-flex.justify-content-end{ flex:1 0 100%!important; justify-content:flex-start!important; }
  .lcc .server_header_box .box_left_wrap{ padding-left:16px!important; margin-right:16px!important; }
}
/* 信息块统一成「标签(+小标签) 一行 / 值一行」，
   不这么写的话「操作系统 + 重装系统芯片 + 值」会散成三行，跟隔壁列对不齐。 */
.lcc .server_header_box .box_left_wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; align-content:flex-start;
}
.lcc .server_header_box .box_left_wrap h5{ flex:1 0 100%; }
/* 标题那一行（产品名 + 状态徽标）窄屏要能换行，否则徽标会被挤出屏幕 */
.lcc .server_header_box .power_box{ min-width:0; }
.lcc .server_header_box .power_box > .text-white{ min-width:0; flex-wrap:nowrap; }
/* 电源圆右边的文字块要能压缩，否则窄屏上它会把自己挤到圆的下一行 */
.lcc .server_header_box .power_box > .text-white > div:last-child{ flex:1 1 0; min-width:0; }
.lcc .server_header_box .power_box section{ flex-wrap:wrap; gap:4px 8px; min-width:0; }
.lcc .server_header_box h4{ word-break:break-word; min-width:0; }
.lcc .server_header_box .badge-pill{ max-width:100%; }

@media (max-width:767px){
  /* ⚠ 窄屏不要再用 flex-wrap 排信息块：每块高度不一样，换行之后上下错位，
     长一点的系统名还会挤到隔壁列上去。这里整块改成两列网格，
     标题行和按钮行各占满一整行，每格「标签一行、值一行」，天然对齐。 */
  .lcc .server_header_box{
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 14px; margin:0!important; padding:16px!important;
  }
  .lcc .server_header_box > .power_box,
  .lcc .server_header_box > .d-flex.justify-content-end{ grid-column:1 / -1; }
  .lcc .server_header_box .power_box{ margin-right:0!important; margin-bottom:0; }
  .lcc .server_header_box h4{ font-size:17px; }
  .lcc .server_header_box .box_left_wrap{
    display:block!important; min-width:0;
    padding:0!important; margin:0!important; border-left:0!important;
  }
  .lcc .server_header_box .box_left_wrap > span,
  .lcc .server_header_box .box_left_wrap .text-white-50{ display:block; margin-bottom:4px; }
  .lcc .server_header_box .box_left_wrap h5{
    margin:0!important; font-size:15px; line-height:1.5; word-break:break-word;
  }
  /* 操作按钮在窄屏排成等宽两列，别再是长短不一的三行 */
  .lcc .server_header_box .d-flex.justify-content-end{
    margin-top:14px; padding-top:14px; gap:8px;
  }
  .lcc .server_header_box .lcc-ctrl-grp{
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px; width:100%;
  }
  .lcc .server_header_box .lcc-ctrl-grp > .btn{ width:100%; min-width:0; }
  /* 控制台那一组通常只有 VNC 一颗，让它占满一行当主操作 */
  .lcc .server_header_box .lcc-ctrl-grp > .btn:only-child{ grid-column:1 / -1; }
  .lcc .server_header_box .lcc-ctrl-btn,
  .lcc .server_header_box .btn{
    height:40px!important; padding:0 10px!important; font-size:14px!important;
  }
}

/* SSL 详情页「快速上手」那串步骤圆点，官方写死了一套紫色（#6064FF / #DFE0FF），
   跟站内的蓝不是一个色系。统一换成主题蓝。 */
.lcc .sslCurrentStep > .yuan{ background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important; }
.lcc .sslCurrentStep .btn-ssl-b{ background-color:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important; }
.lcc .sslCurrentStep .btn-ssl{ border:1px solid var(--blue)!important; color:var(--blue)!important; }
.lcc .sslCompletedStep > .yuan{ background:var(--blue-l)!important; border-color:#cfe2f6!important; color:#1268c4!important; }
.lcc .v-active{ background:var(--blue)!important; color:#fff!important; }
/* ⚠ status-* 是全站通用类名（产品列表、账单列表都在用），
   之前我把 .lcc .status-active 直接改成实心蓝，结果产品列表里的「已激活」
   变成了一颗深蓝方块、字还看不清 —— 这条必须收进 SSL 详情页的作用域里。 */
.lcc .sslStatus .status-overdue_active{ background-color:#f0a12a!important; border-color:#f0a12a!important; }
.lcc .sslStatus .status-active{ background-color:var(--blue)!important; border-color:var(--blue)!important; }

/* ============================================================================
   23. 彩色卡片：被 .lcc .card 压成白底导致「白底白字」的，逐个补回来
   ⚠ 这是一类必须盯住的坑：.lcc .card{background:var(--card)} 权重 (0,2,0)
   高于 Bootstrap 的 .bg-promote / .bg-warning / .bg-danger (0,1,0)，
   卡片被刷成白底，而模板往往在外层挂了 .text-white，于是整块内容看不见。
   ========================================================================= */

/* 推介计划「可提现金额」那张卡：官方是橙色 #f78400，跟站内蓝不搭，
   这里换成主题蓝渐变，文字和「立即提现」按钮一起处理。 */
.lcc .card.bg-promote{
  background-color:#1268c4!important;
  background-image:linear-gradient(135deg,#1b7fd8 0%,#0f5fae 100%)!important;
  border-color:transparent!important; color:#fff!important;
  box-shadow:0 6px 18px rgba(18,116,214,.22);
}
.lcc .card.bg-promote .card-body{ padding:18px 20px; }
.lcc .card.bg-promote h4,
.lcc .card.bg-promote .text-white,
.lcc .card.bg-promote .aff-amo-num{ color:#fff!important; }
.lcc .card.bg-promote .aff-amo-nums{ font-size:34px; line-height:1.35; font-weight:600; }
.lcc .card.bg-promote .aff-amo-title,
.lcc .card.bg-promote .suffix{ color:rgba(255,255,255,.85)!important; font-size:12.5px; }
.lcc .card.bg-promote #withdrawNow{
  height:34px; padding:0 16px; border-radius:var(--r);
  background:#fff!important; color:var(--blue)!important; font-size:13.5px; font-weight:500;
  border:0; box-shadow:none;
  /* 窄屏上这一列只剩八十来像素宽，「立即提现」会断成两行卡在按钮里。
     按钮不许折行，让外面那一行自己换行，宽度不够时整颗按钮掉到下一行。 */
  white-space:nowrap; flex:none;
}
@media (max-width:575px){
  /* 窄屏重排：两个金额各占一半并排，提现按钮单独占一整行做成通栏，
     比挤成一行、按钮被压到八十像素宽好用得多。 */
  .lcc .card.bg-promote .card-body > .row{ row-gap:14px; }
  .lcc .card.bg-promote .card-body > .row > .col{ flex:0 0 50%; max-width:50%; }
  .lcc .card.bg-promote .card-body > .row > .col:last-child{
    flex:0 0 100%; max-width:100%; justify-content:stretch!important;
  }
  .lcc .card.bg-promote #withdrawNow{ width:100%; height:38px; }
}
.lcc .card.bg-promote #withdrawNow:hover{ background:#eef6ff!important; }
.lcc .card.bg-promote #withdrawNow:disabled{ opacity:.65; cursor:not-allowed; }

/* 软件产品详情右侧那两张「授权码 / IP 地址」卡：官方是实心红和实心黄，
   外层还挂着 .text-white。改成同色系的浅底 + 深字，内容才看得见。 */
.lcc .card.bg-danger{ background:#fdeee9!important; border-color:#f6cfc2!important; }
.lcc .card.bg-warning{ background:#fdf4e6!important; border-color:#f2dfbb!important; }
.lcc .card.bg-danger,.lcc .card.bg-danger *{ color:#b8401c!important; }
.lcc .card.bg-warning,.lcc .card.bg-warning *{ color:#9a6a0d!important; }
.lcc .card.bg-danger .bx,.lcc .card.bg-warning .bx{ font-size:18px; }
.lcc .card.bg-danger .btn-copy:hover,.lcc .card.bg-warning .btn-copy:hover{ opacity:.7; }

/* 推介计划左侧的统计行、收益说明，跟着卡片风格收一收 */
.lcc .aff-item{ padding:14px 18px; font-size:14px; }
.lcc .aff-item-num{ font-size:20px; font-weight:600; color:var(--ink); margin-top:0; }
.lcc .aff-item-title{ color:var(--ink2); }
.lcc .aff-item-title > i{ font-size:19px; color:var(--ink3); }

/* ============================================================================
   24. 官方 auth 布局（绑定手机/邮箱 bind、令牌登录 loginaccesstoken）
   这两页没有重排版，仍走官方的左图右表单结构；但左边那张深藏青背景图
   跟站内的蓝完全不是一回事，右边表单也比站内控件小一档。
   这里只用 CSS 把它们拉到同一套调子上，DOM 一个字没动。
   ⚠ 后台如果设置了自定义登录背景图，模板的行内样式带 !important，仍然优先。
   ========================================================================= */
.lcc .auth-full-bg{ background:var(--blue)!important; }
.lcc .auth-full-bg .bg-overlay{
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(720px 380px at 84% 86%, rgba(255,255,255,.11), transparent 62%),
    linear-gradient(150deg,#0f5fae 0%,#1274d6 52%,#2e8be7 100%)!important;
  opacity:1!important;
}
.lcc .auth-full-page-content{ padding:36px 32px!important; }
.lcc .login_right{ width:100%; max-width:420px; }
.lcc .login_right .logo img{ max-height:42px; width:auto; }
.lcc .login_right .nav-tabs{ margin-top:26px; border-bottom:1px solid var(--line); }
.lcc .login_right .nav-tabs .nav-link{ font-size:14.5px!important; padding:10px 4px; }
.lcc .login_right .form-group{ margin-bottom:16px; }
.lcc .login_right .form-group label{ font-size:13.5px; color:var(--ink2); margin-bottom:6px; }
.lcc .login_right .form-control{ height:42px; font-size:14px; }
.lcc .login_right .input-group-append .btn,
.lcc .login_right .input-group-prepend .form-control{ height:42px; }
.lcc .login_right .btn-primary.btn-block{ height:44px; font-size:15px; font-weight:500; }
.lcc .login_right .input-group-prepend{ width:auto; }
.lcc .login_right .input-group-prepend select.form-control{ width:96px; }

/* ============================================================================
   25. 「一排可选项」的按钮组 —— 配置升降级的 CPU/内存、续费周期、图表时间范围
   官方把每一颗都写成 .btn-primary，于是整排都是深蓝色块，只有选中的那颗靠
   Bootstrap 的 .active 变得再深一点点 —— 看上去就是一条蓝色长条，
   根本分不出到底选了哪个（配置升降级弹窗里最明显）。
   改成：未选中 = 白底描边，选中 = 主题蓝实心。
   ⚠ 只改外观，里面的 radio/checkbox、name、value、data-toggle="buttons" 都没动。
   ========================================================================= */
.lcc .btn-group-toggle{ display:flex!important; flex-wrap:wrap; gap:8px; }
.lcc .btn-group-toggle > .btn,
.lcc .btn-group-toggle > .btn.btn-primary,
.lcc .btn-group-toggle > .btn.btn-sm{
  flex:0 0 auto; height:38px!important; min-width:70px; padding:0 16px!important; margin:0!important;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r)!important; border:1px solid var(--line)!important;
  background:#fff!important; color:var(--ink2)!important;
  font-size:14px!important; font-weight:500; line-height:1; box-shadow:none!important;
  transition:border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .lcc .btn-group-toggle > .btn:hover{
    border-color:#a8c9ea!important; color:var(--blue)!important; background:#f7fbff!important;
  }
}
.lcc .btn-group-toggle > .btn.active,
.lcc .btn-group-toggle > .btn.btn-primary.active,
.lcc .btn-group-toggle > .btn.focus.active{
  background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important;
  font-weight:600;
}
.lcc .btn-group-toggle > .btn.disabled,
.lcc .btn-group-toggle > .btn:disabled{
  opacity:1; background:#f6f7f9!important; border-color:var(--line)!important;
  color:var(--ink3)!important; cursor:not-allowed;
}
.lcc .btn-group-toggle > .btn input[type="radio"],
.lcc .btn-group-toggle > .btn input[type="checkbox"]{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
/* 续费弹窗的周期芯片比配置项大半档，这条要排在上面那组后面才压得住 */
.lcc .lcc-cycle-grp > .btn,
.lcc .lcc-cycle-grp > .btn.btn-primary{
  height:44px!important; min-width:96px; padding:0 20px!important; font-size:14.5px!important;
}

/* ---- 配置升降级：带宽/硬盘这类滑杆 ----
   原生 range 在 Chrome 里的滑块是一条细竖杠，配上官方那条 JS 画的渐变轨道，
   看着就是「一根蓝线上插了根针」。这里把轨道和滑块都做成主题样式。
   ⚠ 轨道的渐变是 JS 按当前值算出来写进 style 的，这里只定义高度/圆角/滑块，
     不碰 background，免得进度条不跟着走。 */
.lcc input[type="range"].configoption_range,
.lcc input[type="range"].form-control-range{
  -webkit-appearance:none; appearance:none;
  height:6px!important; padding:0; border:0; border-radius:4px;
  outline:0; cursor:pointer; vertical-align:middle;
}
.lcc input[type="range"].configoption_range::-webkit-slider-thumb,
.lcc input[type="range"].form-control-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--blue);
  box-shadow:0 1px 5px rgba(16,42,80,.28); cursor:grab; margin-top:-7px;
}
.lcc input[type="range"].configoption_range::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.06); }
.lcc input[type="range"].configoption_range::-moz-range-thumb,
.lcc input[type="range"].form-control-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--blue);
  box-shadow:0 1px 5px rgba(16,42,80,.28); cursor:grab;
}
.lcc input[type="range"].configoption_range::-webkit-slider-runnable-track{ height:6px; border-radius:4px; }
.lcc input[type="range"].configoption_range::-moz-range-track{ height:6px; border-radius:4px; background:transparent; }
/* 滑杆右边那个数值框原来是 col-md-1，窄到放不下四位数 */
.lcc .configoption_range_val{
  flex:none!important; width:88px!important; max-width:88px!important;
  height:38px!important; padding:0 10px!important; margin-left:10px;
  font-size:14px!important; text-align:center;
}
.lcc .configureproduct .col-md-10 > span{ margin-left:8px; font-size:13.5px; color:var(--ink3); }
/* 配置项每一行之间留点气口，标签跟控件对齐 */
.lcc .configureproduct{ align-items:center; margin-bottom:18px; }
.lcc .configureproduct > .col-form-label{ font-size:14px; color:var(--ink2); }

/* ============================================================================
   26. 长内容弹窗（消息详情、公告详情）
   消息详情里塞的是一整篇公告，弹窗会被内容顶到比屏幕还高，只能滚整个页面。
   这里给弹窗正文加高度上限 + 内部滚动，并把富文本的排版规整一下。
   ========================================================================= */
/* ⚠ 只给「消息详情」这种长文弹窗加内部滚动。
   不能写成所有 .modal-body —— overflow:auto 会把弹窗里打开的下拉菜单裁掉
   （配置升降级里的快照/备份数量就是下拉），那是另一个坑。 */
.lcc .bs-example-modal-lg .modal-body,
.lcc .modal-body:has(> #msgContent){
  max-height:calc(100vh - 210px); overflow-y:auto; overscroll-behavior:contain;
}
.lcc .bs-example-modal-lg .modal-body::-webkit-scrollbar{ width:8px; }
.lcc .bs-example-modal-lg .modal-body::-webkit-scrollbar-thumb{ background:#d9dee6; border-radius:4px; }
.lcc .bs-example-modal-lg .modal-body::-webkit-scrollbar-thumb:hover{ background:#c3cad4; }

/* 富文本正文：消息详情 / 公告 / 帮助文档 共用一套排版 */
.lcc #msgContent,
.lcc .newscontent,
.lcc .kb-content{
  font-size:14.5px; line-height:1.9; color:var(--ink2); word-break:break-word;
}
.lcc #msgContent > *:first-child,
.lcc .newscontent > *:first-child{ margin-top:0!important; }
.lcc #msgContent > *:last-child,
.lcc .newscontent > *:last-child{ margin-bottom:0!important; }
.lcc #msgContent p,
.lcc .newscontent p{ margin:0 0 14px; }
.lcc #msgContent h1,.lcc #msgContent h2,.lcc #msgContent h3,
.lcc #msgContent h4,.lcc #msgContent h5,
.lcc .newscontent h1,.lcc .newscontent h2,.lcc .newscontent h3,
.lcc .newscontent h4,.lcc .newscontent h5{
  margin:26px 0 12px; color:var(--ink); font-weight:600; line-height:1.5;
  padding-left:11px; border-left:3px solid var(--blue); border-radius:2px;
}
.lcc #msgContent h1,.lcc .newscontent h1{ font-size:19px; }
.lcc #msgContent h2,.lcc .newscontent h2{ font-size:17.5px; }
.lcc #msgContent h3,.lcc #msgContent h4,.lcc #msgContent h5,
.lcc .newscontent h3,.lcc .newscontent h4,.lcc .newscontent h5{ font-size:16px; }
.lcc #msgContent strong,.lcc .newscontent strong{ color:var(--ink); font-weight:600; }
.lcc #msgContent a,.lcc .newscontent a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.lcc #msgContent ul,.lcc #msgContent ol,
.lcc .newscontent ul,.lcc .newscontent ol{ margin:0 0 14px; padding-left:22px; }
.lcc #msgContent li,.lcc .newscontent li{ margin:4px 0; }
.lcc #msgContent img,.lcc .newscontent img{
  max-width:100%; height:auto; border-radius:var(--r); margin:8px 0;
}
.lcc #msgContent hr,.lcc .newscontent hr{ margin:20px 0; border:0; border-top:1px solid var(--line); }
.lcc #msgContent blockquote,.lcc .newscontent blockquote{
  margin:0 0 14px; padding:12px 16px; border-left:3px solid #cfe0f2;
  background:#f7fbff; border-radius:0 var(--r) var(--r) 0; color:var(--ink2);
}
.lcc #msgContent pre,.lcc .newscontent pre{
  margin:0 0 14px; padding:14px 16px; border-radius:var(--r);
  background:#f6f8fa; border:1px solid var(--line);
  font-size:13px; line-height:1.7; overflow-x:auto; white-space:pre;
}
.lcc #msgContent code,.lcc .newscontent code{
  padding:2px 6px; border-radius:4px; background:#f1f3f6; font-size:13px; color:#bd401b;
}
.lcc #msgContent pre code,.lcc .newscontent pre code{ padding:0; background:none; color:inherit; }
.lcc #msgContent table,.lcc .newscontent table{
  width:100%; margin:0 0 14px; border-collapse:collapse; font-size:13.5px;
}
.lcc #msgContent table th,.lcc #msgContent table td,
.lcc .newscontent table th,.lcc .newscontent table td{
  padding:8px 12px; border:1px solid var(--line);
}
.lcc #msgContent table th,.lcc .newscontent table th{ background:#fafbfc; font-weight:600; color:var(--ink); }

/* 消息列表：未读的标题加粗，红点做成小圆点对齐 */
.lcc .tablelist td .bg-danger.rounded-circle{
  background:var(--red)!important; vertical-align:middle; margin-bottom:1px!important;
}

/* ============================================================================
   27. 提交工单 · 部门选择卡片
   官方是「标题卡头 + 一条分隔线 + 描述」，内边距很小，三张卡还不等高，
   挤在一起看着很局促。这里加大留白、去掉那条灰线、卡片等高并加悬停反馈。
   ========================================================================= */
.lcc .border-hover{
  height:100%; margin:0!important;
  border:1px solid var(--line)!important; border-radius:var(--r-lg)!important;
  box-shadow:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.lcc .border-hover .card-header{
  padding:20px 22px 0!important; border-bottom:0!important; background:transparent!important;
}
.lcc .border-hover .card-header h5{ font-size:16px; font-weight:600; color:var(--ink); line-height:1.5; }
.lcc .border-hover .card-body{ padding:8px 22px 22px!important; }
.lcc .border-hover .card-text{
  margin:0; font-size:13.5px; line-height:1.8; color:var(--ink3)!important;
}
@media (hover:hover) and (pointer:fine){
  .lcc .border-hover:hover{
    border-color:#a8c9ea!important; box-shadow:0 6px 20px rgba(16,42,80,.08)!important;
    transform:translateY(-2px);
  }
  .lcc .border-hover:hover .card-header h5{ color:var(--blue); }
}
/* 部门卡整排改成网格：行距、列距都交给 gap。
   ⚠ 之前是「栅格列 + 卡片下外边距」，栅格本身没有行间距，
   第二行会紧贴着第一行的底边（就是「贴一起了」那个问题）；
   而且卡片 height:100% 撑满列高之后，那点外边距也被吃掉了。 */
.lcc .lcc-dept{
  display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px; margin:0!important;
}
.lcc .lcc-dept > [class*="col-"]{
  flex:none!important; width:auto!important; max-width:none!important; padding:0!important;
}
.lcc .lcc-dept > [class*="col-"] > a{ display:block; height:100%; margin:0; }
.lcc .lcc-dept > [class*="col-"] > a:hover{ text-decoration:none; }
@media (max-width:991px){ .lcc .lcc-dept{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (max-width:575px){ .lcc .lcc-dept{ grid-template-columns:1fr; gap:14px; } }
/* 工单须知那段文字也松一松 */
.lcc .ticket-top{ font-size:14px; line-height:1.95; color:var(--ink2); }
.lcc .ticket-top p{ margin:0 0 8px; }
.lcc .ticket-top p:last-child{ margin-bottom:0; }

/* ============================================================================
   28. 公告 / 新闻正文页（newsview）
   ⚠ 正文本身是写进 iframe 的，排版样式在 newsview.tpl 里随内容一起注入；
   这里管的是 iframe 外面那层：标题、日期、标签、上一篇/下一篇。
   ========================================================================= */
.lcc .card-body .text-center > .mb-4 > .badge-light{
  padding:5px 12px; border-radius:20px; background:var(--blue-l)!important; color:#1268c4!important;
  font-size:12.5px; font-weight:500;
}
.lcc .card-body .text-center > .mb-4 > .badge-light i{ color:#1268c4!important; }
.lcc .card-body .text-center > h4{
  margin:14px 0 10px; font-size:23px; font-weight:600; color:var(--ink); line-height:1.5;
}
.lcc .card-body .text-center > p.text-muted{ font-size:13px; color:var(--ink3)!important; }

/* 标签：两列小圆点列表 → 一排芯片 */
.lcc .lcc-newstags{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; width:100%;
}
.lcc .lcc-newstags > li{
  padding:5px 13px; border-radius:20px;
  background:#f4f7fa; border:1px solid var(--line);
  font-size:13px; color:var(--ink2); line-height:1.6;
}
.lcc .card-body h5.mb-3{ font-size:15px; font-weight:600; color:var(--ink); }

/* 上一篇 / 下一篇：两颗实心蓝长条太抢戏，改成描边按钮并限制宽度 */
/* ⚠ 选择器要写到 a.btn.lcc-newsnav（0,3,1）：后面那条
   .lcc a.btn-primary{color:#fff!important}（0,2,1）权重更高，
   只写 .lcc .lcc-newsnav（0,2,0）会被它刷成白字白底，整颗按钮看不见。 */
.lcc a.btn.lcc-newsnav,
.lcc a.btn.lcc-newsnav:hover,
.lcc a.btn.lcc-newsnav:focus,
.lcc .lcc-newsnav{
  max-width:46%; height:auto!important; min-height:42px; padding:9px 18px!important;
  display:inline-flex; align-items:center; gap:2px;
  background:#fff!important; border:1px solid var(--line)!important; color:var(--ink2)!important;
  border-radius:var(--r)!important; font-size:14px!important; font-weight:400;
  box-shadow:none!important; text-align:left; line-height:1.5;
}
.lcc .lcc-newsnav i{ flex:none; font-size:18px!important; color:var(--ink3); }
@media (hover:hover) and (pointer:fine){
  .lcc a.btn.lcc-newsnav:hover,
  .lcc .lcc-newsnav:hover{
    border-color:#a8c9ea!important; color:var(--blue)!important; background:#f7fbff!important;
  }
  .lcc .lcc-newsnav:hover i{ color:var(--blue); }
}
@media (max-width:575px){
  .lcc .lcc-newsnav{ max-width:100%; width:100%; }
  .lcc .card-body .text-center > h4{ font-size:19px; }
}

/* ============================================================================
   29. 文本选中高亮 + 推介卡片细节
   「金额选不中 / 选中了也看不出来」有两个原因：
   1) 官方给 .aff-amo-nums 加了个绝对定位的钱包水印 ::before，它盖在数字这一行上，
      会拦住鼠标，拖选的时候等于在拖一张图片 —— pointer-events:none 解决；
   2) 浏览器默认的选中色是浅蓝底 + 原色字，在蓝底白字上等于没有高亮。
      所以这里给全站和蓝底卡分别定义选中色。
   ========================================================================= */
.lcc ::selection{ background:rgba(18,116,214,.20); color:inherit; }
.lcc ::-moz-selection{ background:rgba(18,116,214,.20); color:inherit; }
.lcc .card.bg-promote ::selection{ background:rgba(255,255,255,.34); color:#fff; }
.lcc .card.bg-promote ::-moz-selection{ background:rgba(255,255,255,.34); color:#fff; }

.lcc .card.bg-promote .card-body{ padding:22px 24px!important; }
.lcc .card.bg-promote h4{
  margin:0 0 6px!important; font-size:14.5px!important; font-weight:400!important;
  color:rgba(255,255,255,.9)!important; letter-spacing:.3px;
}
.lcc .card.bg-promote .aff-amo-nums{
  margin:0 0 18px; font-size:36px; line-height:1.25; font-weight:600; letter-spacing:-.5px;
}
.lcc .card.bg-promote .aff-amo-nums .suffix{ font-size:14px; margin-left:6px; }
.lcc .card.bg-promote .aff-amo-nums::before{
  pointer-events:none;           /* ⚠ 就是它挡住了金额，拖选不到 */
  opacity:.16; top:0; right:4px; width:52px; height:52px;
}
.lcc .card.bg-promote .row{ align-items:flex-end; row-gap:12px; }
.lcc .card.bg-promote .aff-amo-num{ margin-top:0; font-size:20px; font-weight:600; }
.lcc .card.bg-promote .aff-amo-title{ margin-top:4px; }

/* ---- 总览「用户信息」卡：身份信息收进浅底面板并撑满高度 ----
   之前是「头像+姓名+两行资料」直接堆在卡片顶部，下面空一大片
   （这张卡要跟右边 180px 环形图那张卡等高）。现在跟财务/消费两张卡一个做法。 */
.lcc .lcc-ov-idbox{
  flex:1 1 auto; margin:2px 0 0;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fafbfc;
}
.lcc .lcc-ov-idbox .lcc-ov-user{ margin:0; }
.lcc .lcc-ov-idbox .lcc-ov-meta{ margin:0; padding-top:14px; border-top:1px dashed #e3e8ee; }
.lcc .lcc-ov-idbox .lcc-ov-meta > li{ padding:3px 0; }
.lcc .lcc-ov-sec{ margin-top:16px; }
@media (max-width:575px){
  .lcc .lcc-ov-idbox{ padding:16px; gap:14px; }
}

/* ---- 安全中心顶部：三块内容重新排版 ----
   官方用的是 col-sm-2 / col-sm-3 ml-3 / col-sm-5 这种固定栅格，
   头像挤在最左、姓名和「未实名认证」徽标中间隔着一大段空白、
   安全强度的「中」被推到很远、右边的邮箱/开通时间/手机挤成一行小字。
   这里把三块改成弹性排布，右边的资料做成两列对齐的键值网格。 */
.lcc .security-header .row{ padding-left:0!important; row-gap:16px; flex-wrap:wrap; }
.lcc .security-header .row > [class*="col-"]{ min-width:0; }
.lcc .security-header .col-sm-2,
.lcc .security-header .col-md-1{ flex:0 0 auto; width:auto; max-width:none; padding-right:0; }
.lcc .security-header .col-sm-3{ flex:1 1 240px; max-width:none; margin-left:16px!important; }
.lcc .security-header .col-sm-5{ flex:1 1 320px; max-width:none; }
.lcc .security-header .security-avatar{ display:flex; }

.lcc .security-header .security-username{ font-size:19px; gap:10px; }
.lcc .security-header .security-username .badge{
  padding:4px 11px; border-radius:20px; font-size:12.5px; font-weight:500; line-height:1.5;
}
.lcc .security-header .security-username .badge-light.novalid{
  background:#fdf4e6!important; color:#a8740f!important;
}
.lcc .security-header .security-username .badge-success{
  background:#e6f7f2!important; color:#067a60!important;
}

.lcc .security-header .security-strength{ margin-top:12px; max-width:320px; }
.lcc .security-header .security-label{
  display:flex; align-items:center; gap:6px; margin-bottom:7px;
}
.lcc .security-header .security-label .security-text{ font-weight:600; }
.lcc .security-header .security-strength .security-text > .progress{ margin:0; }

/* 右边那组资料：两列键值网格；⚠ 模板里「手机」是套在一个嵌套 <ul> 里的，
   用 display:contents 让它的 li 直接参与外层网格，否则它会占掉一整格。 */
.lcc .security-header .security-meta > ul{
  display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 24px; margin:0!important; padding:0; list-style:none;
}
.lcc .security-header .security-meta ul ul{ display:contents!important; }
.lcc .security-header .security-meta li{
  display:flex; align-items:baseline; gap:2px; margin:0!important; padding:0;
  font-size:13.5px; color:var(--ink)!important; min-width:0; word-break:break-all;
}
.lcc .security-header .security-meta li > label{
  flex:none; margin:0!important; font-weight:400; color:var(--ink3)!important;
}
@media (max-width:575px){
  .lcc .security-header .col-sm-3{ margin-left:0!important; }
  .lcc .security-header .security-meta > ul{ grid-template-columns:1fr; gap:8px; }
  .lcc .security-header .security-strength{ max-width:none; }
}

/* ============================================================================
   30. <a class="btn"> 的文字色 / .btn-default / 工单附件行
   ⚠ 本文件开头有 .lcc a:hover{ color:var(--blue-h) }，权重 (0,2,1) 高过
   .lcc .btn-success 这类 (0,2,0) 的按钮规则 —— 于是 <a class="btn btn-success">
   一悬停文字就变蓝，在绿底上看着像褪色（工单页的「添加更多」就是这个）。
   凡是用 <a> 当按钮的，都要把文字色重新钉死。
   ========================================================================= */
.lcc a.btn-primary,.lcc a.btn-primary:hover,.lcc a.btn-primary:focus,
.lcc a.btn-success,.lcc a.btn-success:hover,.lcc a.btn-success:focus,
.lcc a.btn-danger,.lcc a.btn-danger:hover,.lcc a.btn-danger:focus,
.lcc a.btn-warning,.lcc a.btn-warning:hover,.lcc a.btn-warning:focus,
.lcc a.btn-info,.lcc a.btn-info:hover,.lcc a.btn-info:focus{ color:#fff!important; }
.lcc a.btn{ text-decoration:none!important; }

/* Bootstrap 4 没有 .btn-default（那是 BS3 的类名），模板里却还在用，
   结果「取消」渲染成一个没有样式的透明大方框，像个空输入框。
   这里按次要按钮补上。 */
.lcc .btn-default,
.lcc a.btn-default{
  background:#fff!important; border:1px solid var(--line)!important; color:var(--ink2)!important;
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .lcc .btn-default:hover,
  .lcc a.btn-default:hover{
    background:#f6f8fa!important; border-color:#a8c9ea!important; color:var(--blue)!important;
  }
}

/* ---- 工单回复的附件区 ---- */
.lcc #filelist .filebox{ align-items:center; gap:10px; }
.lcc #filelist .form-control-file{
  flex:1 1 auto; min-width:0; width:auto!important;
  padding:6px 10px; border:1px dashed #cfd6de; border-radius:var(--r);
  background:#fafbfc; font-size:13px; color:var(--ink2);
}
.lcc #filelist .form-control-file::file-selector-button{
  margin-right:10px; padding:5px 12px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; color:var(--ink2); font-size:13px; cursor:pointer;
}
.lcc #filelist .form-control-file::file-selector-button:hover{ border-color:#a8c9ea; color:var(--blue); }
/* 「删除」原来是一颗实心红，跟旁边的虚线框不搭，改成浅红描边芯片 */
.lcc #filelist .deletefileBtn,
.lcc a#filelist .deletefileBtn,
.lcc #filelist a.deletefileBtn,
.lcc #filelist a.btn.deletefileBtn{
  flex:none; height:34px; padding:0 16px;
  display:inline-flex; align-items:center;
  background:#fdeee9!important; border:1px solid #f3cfc2!important; color:#bd401b!important;
  box-shadow:none; border-radius:var(--r);
}
@media (hover:hover) and (pointer:fine){
  .lcc #filelist a.btn.deletefileBtn:hover,
  .lcc #filelist .deletefileBtn:hover{ background:#fbe0d8!important; color:#b8401c!important; }
}
/* 「添加更多」原来是一颗实心绿，跟整站的蓝不搭，改成浅蓝描边的次要按钮 */
.lcc #addFileBtn,
.lcc a#addFileBtn{
  height:34px; padding:0 16px;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blue-l)!important; border:1px solid #bcd9f5!important; color:#1268c4!important;
  border-radius:var(--r); font-size:13.5px; box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .lcc #addFileBtn:hover,.lcc a#addFileBtn:hover{ background:#e2edfb!important; border-color:#a8c9ea!important; color:#1268c4!important; }
}
/* 回复工单 / 取消 这一排在窄屏上左右各占一半，别叠成两行 */
@media (max-width:575px){
  .lcc #filelist .filebox{ flex-wrap:wrap; }
  .lcc #filelist .form-control-file{ flex:1 1 100%; }
}

/* ⚠ 模板里还留着 Bootstrap 3 的 .col-xs-*，BS4 里这个类名不存在，
   所以窄屏下这些列没有任何宽度约束、也没有列间距，按钮会紧紧贴在一起。
   这里按「窄屏占满一行、上下留间距」补齐。 */
@media (max-width:991px){
  .lcc .row > [class*="col-xs-"]{ flex:0 0 100%; max-width:100%; }
  .lcc .row > [class*="col-xs-"] + [class*="col-xs-"]{ margin-top:10px; }
}
@media (min-width:576px) and (max-width:991px){
  .lcc .row > .col-xs-6.col-md-6{ flex:0 0 50%; max-width:50%; margin-top:0; }
}

/* ⚠⚠ 真凶在这：官方 assets_custom/css/global.css 里写着
       .table-responsive{ min-height: calc(100vh - 650px) }
   也就是「表格区最少要占掉半屏」。屏幕越高空得越多 ——
   1080 高的屏幕上就是 430px，4 行的表格底下白白空出一大截，
   而且全站所有带表格的页面都会这样。这里改成按内容高。 */
.lcc .table-responsive{ min-height:0!important; }

/* 资源列表那块的容器还带着官方的 .h100p（height:100%）。
   它在「被拉伸的 flex 列」里会反过来把卡片撑高 —— 表格只有 4 行、
   却空出一大截，就是这么来的。这里让它按内容高。 */
.lcc .lcc-ov-src .h100p,
.lcc .lcc-ov-src .user-center_resources{ height:auto!important; }
.lcc .lcc-ov-src .table-footer{ margin-top:12px; }

/* ============================================================================
   31. 产品详情两处溢出
   ========================================================================= */
/* ---- 登录信息卡：密码一长就把「重置密码」顶飞 ----
   官方给那颗按钮加了 .fr（float:right），密码是一整串不带空格的字符串，
   浮动元素和长文本互相挤，按钮就跑到奇怪的位置、甚至顶出卡片。
   改成正常内联流 + 允许长串换行，按钮自然跟在后面或落到下一行。 */
.lcc .bg-gray p,
.lcc .bg-light.card-body.bg-gray p{ overflow-wrap:anywhere; word-break:break-word; }
.lcc .bg-gray .btnCopyPwd,
.lcc .bg-gray .dc{ word-break:break-all; }
.lcc .bg-gray .left_wrap_btn.fr,
.lcc .bg-gray .fr{
  float:none!important; display:inline-flex!important; vertical-align:middle;
  margin-left:8px!important; white-space:nowrap;
}

/* ---- 图表上方的时间范围按钮（近7天 / 近1天 / 12小时 / 30分钟）----
   这排按钮是虚拟化模块自己输出的，不在主题模板里，只能按通用规则收。
   窄屏上 4 颗按固定最小宽度排不下，会顶出卡片 —— 允许换行并缩一档。 */
.lcc .btn-group{ flex-wrap:wrap; }
@media (max-width:767px){
  .lcc .btn-group-toggle{ flex-wrap:wrap; }
  .lcc .btn-group-toggle > .btn,
  .lcc .btn-group-toggle > .btn.btn-sm{
    min-width:0; height:34px!important; padding:0 12px!important; font-size:13px!important;
  }
  .lcc .card .btn-group > .btn{ margin-bottom:6px; }
}

/* ---- 窄屏的标签页（消息中心、工单、推介计划…）----
   标签一多就换行排成两列，中间空出一块，选中下划线也断开。
   改成「一行横向滑动」，是移动端更常见也更整齐的做法。 */
@media (max-width:767px){
  .lcc .nav-tabs{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
  }
  .lcc .nav-tabs::-webkit-scrollbar{ display:none; height:0; }
  .lcc .nav-tabs .nav-item{ flex:0 0 auto; }
  .lcc .nav-tabs .nav-link{ white-space:nowrap; padding:10px 13px; font-size:14px; }
}

/* ---- 图表上方那排时间范围按钮（近7天/近1天/12小时/30分钟）再收一档 ----
   ⚠ 这排按钮是虚拟化模块自己输出的 HTML，不在主题模板里，主题只能按通用规则收。
   窄屏下 4 颗按默认尺寸排不下会顶出卡片，这里允许换行并把尺寸压小，
   同时给卡片内的按钮组都解开 nowrap。 */
.lcc .card .btn-group,
.lcc .card .btn-group-toggle,
.lcc .tab-pane .btn-group,
.lcc .tab-pane .btn-group-toggle{ flex-wrap:wrap!important; max-width:100%; }
@media (max-width:991px){
  .lcc .tab-pane .btn-group > .btn,
  .lcc .tab-pane .btn-group-toggle > .btn,
  .lcc .card .btn-group > .btn,
  .lcc .card .btn-group-toggle > .btn,
  .lcc .tab-pane .btn.btn-sm{
    min-width:0!important; height:32px!important; padding:0 10px!important;
    font-size:12.5px!important; margin-bottom:6px;
  }
}

/* ---- 帮助中心文章正文 ----
   官方把正文塞在 <pre class="newscontent"> 里：默认等宽字体 + white-space:pre，
   富文本 HTML 放进去之后，<p> 换一次行、<pre> 再把源码换行渲染一次，
   行距翻倍、顶上还留一大片（模板缩进也被原样画出来）。
   模板里已经把内容紧贴标签、并按内容判断切换 white-space，这里补排版。 */
.lcc pre.newscontent{
  margin:0; padding:0; border:0; background:none; overflow:visible;
  font-family:inherit!important; font-size:14.5px; line-height:1.9; color:var(--ink2);
  word-break:break-word; overflow-wrap:anywhere; tab-size:2;
}
/* 正文里真正的代码块仍然保持预格式 */
.lcc pre.newscontent pre,
.lcc pre.newscontent code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace!important;
  white-space:pre-wrap;
}
.lcc pre.newscontent pre{
  margin:0 0 14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r); background:#f6f8fa; font-size:13px; line-height:1.7; overflow-x:auto;
}
.lcc pre.newscontent code{ padding:2px 6px; border-radius:4px; background:#f1f3f6; font-size:13px; color:#bd401b; }
.lcc pre.newscontent pre code{ padding:0; background:none; color:inherit; }

/* ============================================================================
   32. 第三方登录那一块（.lcl-oauth / .lca-oauth）
   ⚠ 登录卡底部那片白，不是旁边多了个容器 —— 是第三方登录这一块**自己**被撑高了：
   插件输出的 <a>/<span>/<img> 常常自带内边距、外边距或固定高度（有的还给
   <li> 塞了 100px 以上的 padding 来放二维码）。所以这一块从 <ul> 到图标
   全部锁成固定盒子：没有多余的 margin / padding，图标 38×38。

   ⚠ v1.22.0 修正（支付宝图标消失的教训）：
     锁尺寸可以，**不能把图标锁没了**。上一版有两个杀手：
       1) .social-list-item{overflow:hidden}
       2) .social-list-item > *{max-width:38px;max-height:38px}
     插件的图标未必是 <img>：常见的还有字体图标 <i>（图案在 ::before 上）
     和纯背景图的空 <span>。这两种都是「没有内容高度」的元素，
     只给 max-* 不给 min-*，在 flex 里会被算成 0×0 —— 图标就没了。
     现在的写法：
       · <a> 固定 38×38，overflow:visible（永远不裁）；
         自带 font-size / line-height，字体图标直接就能显示；
       · <img> 用 max-* + width/height:auto，等比缩进 38 的格子里，不变形；
       · 非 <img> 的子元素强制 38×38 的 inline-flex 盒子 + 背景图居中 contain，
         字体图标和背景图图标都能画出来。
     另外 login.tpl 里那段「清空壳」的脚本已经明令不许碰 .lcl-oauth。
   ========================================================================= */
.lcl-oauth,.lca-oauth{ margin-bottom:0!important; padding-bottom:0!important; }
.lcl-oauth .list-inline,.lca-oauth .list-inline{
  margin:0!important; padding:0!important;
  height:auto!important; min-height:0!important;
  display:flex!important; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px;
}
.lcl-oauth .list-inline-item,.lca-oauth .list-inline-item{
  margin:0!important; padding:0!important; height:auto!important; min-height:0!important;
  display:inline-flex; align-items:center;
}
.lcl-oauth .social-list-item,.lca-oauth .social-list-item{
  width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important;
  max-height:38px!important;
  margin:0!important; padding:0!important; flex:none;
  display:inline-flex!important; align-items:center; justify-content:center;
  overflow:visible!important;                 /* ⚠ 不许裁：裁过一次，图标整个没了 */
  font-size:22px; line-height:1;              /* 字体图标（::before）靠这两条显示 */
  text-decoration:none;
}
/* 官方 app.css 给 .social-list-item 加了 2px 灰圈：插件给的是 logo 图时图盖住了圈，
   给的是字体图标时那个灰圈就露出来了，一排图标粗细不一。现网是直接去掉圈的，跟它走。 */
.lcl-oauth .social-list-item{ border:0!important; background:transparent!important; }
.lcl-oauth .social-list-item img,.lca-oauth .social-list-item img{
  width:auto!important; height:auto!important;
  max-width:38px!important; max-height:38px!important;
  margin:0!important; padding:0!important;
  object-fit:contain; display:block;
}
/* 非 <img> 的图标壳（<i> 字体图标 / <span> 背景图 / 插件自己的二维码壳）：
   强制一个有确定尺寸的 38×38 盒子，否则它们在 flex 里会被算成 0×0。 */
.lcl-oauth .social-list-item > i,.lca-oauth .social-list-item > i,
.lcl-oauth .social-list-item > b,.lca-oauth .social-list-item > b,
.lcl-oauth .social-list-item > em,.lca-oauth .social-list-item > em,
.lcl-oauth .social-list-item > span,.lca-oauth .social-list-item > span,
.lcl-oauth .social-list-item > div,.lca-oauth .social-list-item > div{
  display:inline-flex!important; align-items:center; justify-content:center;
  width:38px!important; height:38px!important;
  max-width:38px!important; max-height:38px!important;
  margin:0!important; padding:0!important;
  font-size:22px; line-height:1; overflow:visible!important;
  background-repeat:no-repeat; background-position:center center; background-size:contain;
}
/* 壳里再套一层图（<span><img></span>）也要缩得进去 */
.lcl-oauth .social-list-item *,.lca-oauth .social-list-item *{
  margin:0!important; padding:0!important;
}

/* ============================================================================
   33. 图形验证码：跟输入框一样高
   ⚠ 光靠 CSS 变量是不够的，原因有两个：
     1) includes/verify.tpl 里有个模板钩子 template_custom_clientarea_captcha_html，
        装了验证码插件时整段 HTML 由插件输出，主题写的 class（.lcx-captcha）根本不在；
     2) <img> 上带着 width="120px" 的行内属性，高度由图自己的比例决定，
        图是扁的（常见 3:1）就只有三十几像素，比输入框矮一截。
   所以真正生效的是 includes/verify.tpl 里那段脚本：它**量**同一个 .input-group
   里输入框的实际高度，再写到图上。下面这些是脚本跑之前的兜底样式。
   ========================================================================= */
.lcx-captcha{
  display:block; width:auto;
  height:46px;                                 /* 老浏览器兜底 */
  height:var(--auth-ctl-h,var(--ctl-h,46px));               /* 跟输入框同一个变量 */
  box-sizing:border-box;
  object-fit:contain; background:#fff; cursor:pointer;
  max-width:200px;
  max-width:min(200px,100%);
  border:1px solid #dcdfe6; border-radius:4px;
}
.lcx-captcha:hover{ border-color:#a8c9ea; }
/* 钩子/插件输出的验证码图上没有 .lcx-captcha 这个 class，按结构再兜一层。
   ⚠ 必须单独成条：:has() 在老浏览器里会让整条规则作废，
     跟上面那条写在一起会把 .lcx-captcha 也一起带没。 */
.input-group:has(> input[name="captcha"]) .input-group-append img,
.input-group:has(.lcx-wrap > input[name="captcha"]) .input-group-append img{
  display:block; width:auto; height:var(--auth-ctl-h,var(--ctl-h,46px));
  box-sizing:border-box; object-fit:contain; background:#fff; cursor:pointer;
  max-width:min(200px,100%);
  border:1px solid #dcdfe6; border-radius:4px;
}

/* ============================================================================
   34. 对比度补齐（v1.23.0）
   全站扫了一遍文字/底色的对比度，凡是低于 WCAG AA（正文 4.5:1）的都提上来。
   大头是 --ink3 那一档次要文字，已经在变量里从 #8b939f 调到 #6b7280；
   下面这几条是官方 CSS 里写死的 #999，盖不到变量，单独覆盖。
   ⚠ 只改颜色，不动任何尺寸和布局。
   ========================================================================= */
.lcc .text-gray{ color:var(--ink3)!important; }              /* 官方 global.css 是 #999，白底 2.75:1 */
.lcc .security-item-desc{ color:var(--ink3)!important; }     /* 同上 */
.lcc .security-label{ color:var(--ink2); }
.lcc small.text-gray,.lcc .card small{ color:var(--ink3); }

/* ============================================================================
   35. 移动端点击目标（v1.23.0）
   在 390 宽逐页量过一遍，把手指点不准的目标撑到 ≥30px。
   WCAG 2.2 的下限是 24×24，这里按更稳的 30~34 给。
   ⚠ 全部用 inline-flex + min-height 撑「可点区域」，字号和排版一个都不动；
     正文句子里的行内链接按规范可以豁免，不在这里处理。
   ========================================================================= */
@media (max-width:768px){
  /* 表格里的「管理 / 续费 / 详情」原来只有 14px 高，是全站最常点的东西 */
  .lcc .table td a,
  .lcc .tablelist td a{ display:inline-flex; align-items:center; min-height:30px; }
  .lcc .table td a.btn,
  .lcc .tablelist td a.btn{ min-height:30px; }
  /* 总览页的几组小链接 */
  .lcc .lcc-ov-links a{ display:inline-flex; align-items:center; min-height:32px; }
  .lcc .lcc-ov-t-row a{ display:inline-flex; align-items:center; min-height:30px; }
  .lcc .lcc-ov-news li a{ display:inline-flex; align-items:center; min-height:30px; }
  .lcc .lcc-ov-prodit,.lcc .lcc-ov-secit{ min-height:44px; }
  /* 页脚导航 */
  .lcc .lcc-flinks a{ display:inline-flex; align-items:center; min-height:32px; }
  /* 登录/注册页的顶栏导航、底部备案、表单下面那排链接 */
  .lcl-nav a{ display:inline-flex; align-items:center; min-height:32px; }
  .lcl-foot-gov a,.lcl-foot-gov span{ display:inline-flex; align-items:center; min-height:30px; }
  .lca-row .lca-link,.lcl-links a{ display:inline-flex; align-items:center; min-height:30px; }
  /* 返回箭头、分页、小按钮：26~28px，指尖点着费劲，统一给到 32 */
  .lcc .backBtn{ width:32px; height:32px; }
  .lcc .page-link{ min-width:32px; height:32px; }
  .lcc .btn-sm,.lcc .btn-group-sm > .btn{ min-height:32px; }
}


/* ---- 验证码那一行下面的「发送失败 → 联系客服」小字 ----
   跟着所在的 .form-group 一起显示/隐藏，密码登录时不会露出来。
   字号压到 12.5px，只有「点击联系客服」是蓝的，不抢主按钮的注意力。 */
.lcl-body .lca-kf,.lca-form .lca-kf{
  margin:7px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink3);
}
.lcl-body .lca-kf a,.lca-form .lca-kf a{ color:var(--blue); }
.lcl-body .lca-kf a:hover,.lca-form .lca-kf a:hover{ color:var(--blue-h); text-decoration:underline; }
/* 手机上这条是真要用手指点的，把可点区域撑高一点，行间距靠上面的 margin 补回来 */
@media (max-width:768px){
  .lcl-body .lca-kf,.lca-form .lca-kf{ margin-top:2px; }
  .lcl-body .lca-kf a,.lca-form .lca-kf a{ display:inline-block; padding:6px 2px; }
}

/* ============================================================================
   36. 配置升降级 · 开关机状态提示（v1.25.0）
   弹窗里那一行状态文案 + 两条计费说明。
   颜色都过了 WCAG AA（正文 4.5:1）。
   ========================================================================== */
.lcc .lcu-upgrade-tip{
  /* 升降级的计费规则要让人一眼看到：红色加粗。
     #c0392b 压在 #fff 上 5.5:1，压在弹窗的浅灰底上也过 WCAG AA。 */
  margin:0; font-size:13px; line-height:1.7;
  color:#c0392b; font-weight:600;
}
.lcc .lcu-power{
  margin:0 0 4px; padding:8px 12px; border-radius:4px;
  font-size:13px; line-height:1.6;
  background:#f4f6f9; color:var(--ink2,#4d5561);
}
.lcc .lcu-power.is-ok{ background:#eaf6ee; color:#1d6b39; }
.lcc .lcu-power.is-bad{ background:#fdeeec; color:#b4271a; }
.lcc .lcu-power-retry{
  color:inherit; text-decoration:underline; white-space:nowrap;
  display:inline-block; padding:2px 4px;
}
.lcc .lcu-power-retry:hover{ color:inherit; opacity:.8; }
/* 按钮被禁用时给个明确的观感，别让用户以为是点不动的 bug */
.lcc #upgradeSub[disabled]{ opacity:.55; }

/* ============================================================================
   37. 云服务器「使用教程」标签页（v1.25.0）
   一组常见问题外链，样式跟站内其它列表统一。
   链接高度按 WCAG 2.2 的 24px 触摸目标给足。
   ========================================================================== */
.lcc .lcc-tut{ padding:6px 2px 2px; }
.lcc .lcc-tut h3{
  margin:18px 0 8px; font-size:15px; font-weight:600; color:var(--ink,#151a21);
}
.lcc .lcc-tut h3:first-child{ margin-top:4px; }
.lcc .lcc-tut ul{ margin:0; padding:0; list-style:none; }
.lcc .lcc-tut li{ margin:0; }
.lcc .lcc-tut li a{
  display:inline-block; padding:5px 0; min-height:24px;
  font-size:13.5px; line-height:1.7; color:var(--ink2,#4d5561);
}
.lcc .lcc-tut li a::before{
  content:""; display:inline-block; vertical-align:middle;
  width:4px; height:4px; margin:-2px 8px 0 2px; border-radius:50%;
  background:#c3cad4;
}
.lcc .lcc-tut li a:hover{ color:var(--blue,#1274d6); }
.lcc .lcc-tut li a:hover::before{ background:var(--blue,#1274d6); }

/* ============================================================================
   38. 云产品订购页 / 详情页的 Element 弹窗 · 移动端宽度（v1.25.0）
   这些弹窗在模板里写死了 width="620px"/"680px"/"950px"/"1200px"，
   Element 会把它写成行内 style，手机上直接超出屏幕，左右都能拉出去。
   这里按屏幕宽度改写，行内样式得用 !important 才盖得住。
   ⚠ 只改宽度和最大高度，不动任何交互逻辑。
   ========================================================================== */
@media (max-width:991px){
  .lcc .el-dialog{ width:min(720px, calc(100vw - 32px))!important; }
}
@media (max-width:767px){
  .lcc .el-dialog{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    margin-top:12vh!important;
  }
  /* 内容超过一屏时弹窗内部滚动，别把整页顶出去 */
  .lcc .el-dialog__body{
    max-height:calc(100vh - 200px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-left:16px; padding-right:16px;
  }
  .lcc .el-dialog__header{ padding-left:16px; padding-right:16px; }
  .lcc .el-dialog__footer{ padding-left:16px; padding-right:16px; }
  /* 底部按钮窄屏一行放不下就各占一半，别挤成两行半 */
  .lcc .el-dialog__footer .dialog-footer{ display:flex; gap:10px; }
  .lcc .el-dialog__footer .dialog-footer > .el-button{ flex:1 1 0; margin-left:0!important; }
  /* 弹窗里的表格给个横向滚动，别撑破弹窗 */
  .lcc .el-dialog__body .el-table{ max-width:100%; }
}
@media (max-width:480px){
  .lcc .el-dialog{ margin-top:8vh!important; }
  .lcc .el-dialog__body{ max-height:calc(100vh - 170px); }
}

/* ============================================================================
   39. 防重复提交时的按钮状态（v1.25.0）
   只做视觉反馈 + 挡住再次点击，不用 disabled 属性
   （disabled 的提交按钮不会把 name/value 提交给后端，会出功能问题）。
   ========================================================================== */
.lcc .lc-submitting{
  pointer-events:none;
  opacity:.68;
  cursor:progress;
}
.lcc .lc-submitting::after{
  content:""; display:inline-block; vertical-align:-2px;
  width:13px; height:13px; margin-left:8px;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%;
  animation:lcSpin .7s linear infinite;
}
@keyframes lcSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .lcc .lc-submitting::after{ animation:none; }
}

/* ============================================================================
   40. 登录/注册页移动端点击目标（v1.25.0）
   「服务条款」「隐私政策」这种夹在句子里的链接，WCAG 2.2 本来就豁免，
   但手机上 14px 高确实不好点，补一点上下内边距，行高够了也不会把版式撑乱。
   ========================================================================== */
@media (max-width:768px){
  .lcl-body .lca-agree a,
  .lca-form .lca-agree a,
  .lcl-body label a,
  .lca-form label a{
    display:inline-block; padding:5px 2px; line-height:1.4;
  }
  .lcl-brand{ padding:4px 0; }
}

/* ============================================================================
   41. 对比度 / 点击目标收尾（v1.25.0）
   全站又扫了一遍，把最后几处低于 WCAG AA 的补上。
   ========================================================================== */
/* 流量进度条里的百分比：白字压在 #34c38f 上只有 2.25:1，看不清。
   底色不动（保持原来的浅绿），把字换成深绿，5.45:1。 */
.lcc .progress .progress-bar.bg-success{ color:#0b3d2b; font-weight:600; }

/* 分页上一页/下一页置灰时 #858d9a 只有 3.35:1，提到 4.83:1，
   跟正常状态的 #4d5561 仍然分得出来。 */
.lcc .page-item.disabled .page-link{ color:#6b7280; }

/* 必填星号：官方的 #f46a6a 在白底上只有 2.95:1。 */
.lcc .red-color{ color:#d92c2c; }

/* 表格里的「管理 / 续费」两字链接，窄屏下只有 26px 宽，指尖点着容易点偏。 */
@media (max-width:768px){
  .lcc .table td a{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:30px; min-height:30px;
  }
}

/* ============================================================================
   42. 应用镜像信息卡（v1.26.0）
   宝塔 / 1Panel / WordPress / 可道云 / Discuz / 游戏面板等镜像的面板地址与账号。
   一行一项：左边固定宽度的标签，右边值。窄屏改成上下两行。
   ========================================================================== */
.lcc .lcc-appcard{ height:auto; }
.lcc .lcc-appcard > p.text-gray{ margin-bottom:10px; }

.lcc .lcc-info-row{
  display:flex; align-items:baseline; gap:10px;
  padding:5px 0; font-size:13px; line-height:1.8;
  border-top:1px solid rgba(0,0,0,.045);
}
.lcc .lcc-info-row:first-of-type{ border-top:0; }
.lcc .lcc-info-row > span:first-child{
  flex:0 0 86px; color:var(--ink3); font-size:12.5px;
}
.lcc .lcc-info-row > b{ color:var(--ink); font-weight:600; }
.lcc .lcc-info-row a{ color:var(--blue); word-break:break-all; }
.lcc .lcc-info-row a:hover{ text-decoration:underline; }

/* 可复制 / 可展开的值 */
.lcc .lcc-info-row code{
  padding:1px 6px; border-radius:4px;
  background:rgba(18,116,214,.07); color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; word-break:break-all;
}
.lcc .lcc-copy,
.lcc .lcc-secret{ cursor:pointer; }
.lcc .lcc-copy:hover,
.lcc .lcc-secret:hover{ background:rgba(18,116,214,.14); }
.lcc .lcc-secret-btn{
  flex:none; min-height:24px; padding:1px 9px;
  border:1px solid #cfd6e0; border-radius:4px; background:#fff;
  color:var(--ink2); font-size:12px; line-height:20px;
}
.lcc .lcc-secret-btn:hover{ border-color:#a8c9ea; color:var(--blue); }

.lcc .lcc-app-note{
  margin:10px 0 0; font-size:12.5px; line-height:1.7; color:var(--ink3);
}
/* 「首次登录后请及时修改密码」这类提醒。
   官方旧模板用的是纯红 #f00，白底上只有 4:1，这里用 #c62828（5.6:1）。 */
.lcc .lcc-app-warn{ color:#c62828; }

@media (max-width:575px){
  .lcc .lcc-info-row{ flex-wrap:wrap; gap:2px 10px; }
  .lcc .lcc-info-row > span:first-child{ flex:0 0 100%; }
}


/* ==========================================================================
   点击区域下限（WCAG 2.2 目标尺寸最小 24×24）
   --------------------------------------------------------------------------
   下面这些是"一排并列的功能链接"，不是正文句子里的行内链接，
   不在规范的豁免范围内。原来只有 15~21px 高，手机上容易点偏。
   只加高度和内边距，不改颜色、不改排版位置、不动 href。
   ========================================================================== */
.lcc .lcc-ov-links a,
.lcl-body .lca-link,
.lcl-nav a,
.lcl-links a,
.lcc .navbar-brand-box .logo,
.lcc .page-title-box .breadcrumb a,
.lcc .table-tools > a > .btn{
  display:inline-flex; align-items:center;
  min-height:24px;
}
.lcc .lcc-ov-links a,
.lcl-body .lca-link,
.lcl-nav a,
.lcl-links a{ padding-block:2px; }