/* ============================================================
   自助服务中心 UI 增强层  (self-ui.css)
   ------------------------------------------------------------
   作用范围：仅 /self/ 自助服务页面
   加载顺序：必须在 app.css 之后引入
   设计原则：
     1. 不修改共享设计系统 app.css —— Portal 认证页与管理后台零影响
     2. 三主题全兼容（tech-blue / dark / minimal）：仅使用既有 CSS 变量，
        不硬编码主题色（唯一例外：品牌渐变上的白色文字，与 app.css 既有做法一致）
     3. 不依赖任何 JS 改动：所有既有元素 ID、data-i18n、表单字段名保持不变
   ============================================================ */

/* 自助页用 class="hidden" 切换登录/首页；app.css 未定义该工具类 */
.hidden{display:none !important}

/* ========== 1. 页面容器 ========== */

/* 覆盖 app.css 的 main{overflow:auto}，使内部 sticky 导航能相对视口生效 */
main.self-main-wrap{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:0 20px 56px;
  overflow:visible;
  scroll-behavior:smooth;
}

/* 顶栏内边距与 1200 主栏对齐，避免品牌贴左、内容居中错位 */
body.app-shell > header.topbar{
  padding-left:max(20px, calc((100% - 1200px) / 2 + 20px));
  padding-right:max(20px, calc((100% - 1200px) / 2 + 20px));
  box-sizing:border-box;
}


/* ========== 2. 登录页：品牌分栏 ========== */

/* 全幅出血 + 柔和品牌光晕。
   刻意只用 background-image（径向渐变边缘为 transparent）而不铺底色，
   这样管理端配置的 body 背景图（bgImageUrl）仍可从透明区域透出。 */
.self-login{
  margin:0 -20px;
  min-height:calc(100vh - 56px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
  background-color:transparent;
  background-image:
    radial-gradient(1100px 520px at 6% -12%, var(--brand-light), transparent 62%),
    radial-gradient(760px 440px at 100% 2%, var(--brand-light), transparent 58%);
  background-repeat:no-repeat;
}

.self-login-grid{
  width:100%;
  max-width:960px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}

/* --- 左侧品牌介绍 --- */
.self-login-intro{min-width:0}

.li-logo{
  width:58px;height:58px;border-radius:17px;
  background:linear-gradient(135deg,var(--brand),var(--brand-active));
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:25px;
  margin-bottom:22px;
  box-shadow:var(--shadow-pop);
}

.self-login-intro h1{
  font-size:30px;line-height:1.28;margin:0 0 12px;
  letter-spacing:-.02em;font-weight:650;color:var(--text);
}

.li-sub{
  color:var(--text-secondary);font-size:14.5px;line-height:1.75;
  margin:0 0 28px;max-width:34em;
}

.self-login-feats{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.self-login-feats li{
  display:flex;align-items:center;gap:11px;
  font-size:13.5px;color:var(--text-secondary);
}
.self-login-feats li i{
  flex-shrink:0;width:21px;height:21px;border-radius:50%;
  background:var(--brand-light);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:11px;font-weight:700;
}

/* --- 右侧登录卡 --- */
.self-login .auth-card{
  max-width:none;width:100%;
  padding:34px 32px;border-radius:18px;
}
.self-login .auth-hero{margin-bottom:20px}
.self-login .auth-hero .big{width:52px;height:52px;font-size:26px;margin-bottom:12px}
.self-login .auth-card h2{font-size:20px}

.self-login-alt{
  text-align:center;margin-top:18px;font-size:13px;
  border-top:1px dashed var(--border);padding-top:15px;
}
.self-login-alt a{font-weight:500}

/* 登录表单"记住我"复选框 */
.lf-remember{
  display:flex !important;align-items:center;gap:8px;
  margin:14px 0 4px !important;
  font-size:13px;color:var(--text-secondary);font-weight:500;
  cursor:pointer;user-select:none;
}
.lf-remember input{width:auto;margin:0;cursor:pointer;accent-color:var(--brand)}
.lf-remember:hover{color:var(--brand)}

/* 登录表单：用户名 / 密码各占一行，左对齐同宽 */
.self-login .auth-card #lf{
  display:flex;flex-direction:column;align-items:stretch;
}
.self-login .auth-card #lf > label:not(.lf-remember){
  display:block;margin:12px 0 0;
  font-size:13px;font-weight:500;
}
.self-login .auth-card #lf > label:not(.lf-remember):first-of-type{margin-top:0}
.self-login .auth-card #lf > input{
  display:block;width:100%;box-sizing:border-box;
  margin:6px 0 0;padding:9px 11px;
}


/* ========== 3. 登录后：页面标题与用户概览 ========== */

.self-hero{margin:24px 0 4px}

.self-hero-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:16px;
}
.self-page-title{font-size:22px;font-weight:600;margin:0;letter-spacing:-.01em}
.self-page-sub{color:var(--text-tertiary);font-size:13px;margin:5px 0 0}

/* JS 向 #me 注入 4 个 .stat；此处重塑为一体化指标面板（1px 间隙做分隔线） */
#me.self-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;
  margin:0;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
#me .stat{
  margin:0 !important;              /* 覆盖 JS 注入的内联 margin:0 */
  min-width:0;
  border:0;border-radius:0;box-shadow:none;
  background:var(--card);
  padding:17px 20px;gap:5px;
  display:flex;flex-direction:column;justify-content:center;
  transition:background .18s ease;
}
#me .stat:hover{background:var(--table-stripe)}
#me .stat span{
  order:1;font-size:11.5px;color:var(--text-tertiary);
  letter-spacing:.04em;white-space:nowrap;
}
#me .stat b{
  order:2;font-size:23px;font-weight:700;line-height:1.25;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 首格（用户名）作品牌强调块 */
#me .stat:first-child{background:linear-gradient(135deg,var(--brand),var(--brand-active))}
#me .stat:first-child:hover{background:linear-gradient(135deg,var(--brand-hover),var(--brand-active))}
#me .stat:first-child span{color:rgba(255,255,255,.8)}
#me .stat:first-child b{color:#fff}


/* ========== 4. 锚点导航 ========== */

.self-nav{
  position:sticky;top:56px;z-index:15;
  display:flex;gap:7px;flex-wrap:nowrap;align-items:center;
  margin:20px 0 22px;padding:11px 0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.self-nav::-webkit-scrollbar{height:6px}
.self-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.self-nav::-webkit-scrollbar-track{background:transparent}
.self-nav a{
  padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:500;white-space:nowrap;
  color:var(--text-secondary);
  background:var(--card);border:1px solid var(--border);
  transition:color .15s,border-color .15s,background .15s;
}
.self-nav a:hover{
  color:var(--brand);border-color:var(--brand);background:var(--brand-light);
}
.self-nav a.on{
  color:#fff;background:var(--brand);border-color:var(--brand);
}


/* ========== 5. 主体两栏 ========== */

.self-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 334px;
  gap:22px;
  align-items:start;
}
.self-col-main,.self-col-side{min-width:0}

.self-sec{margin-bottom:10px;scroll-margin-top:126px}
.self-sec-title{
  font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-tertiary);
  margin:0 0 12px;padding-left:2px;
}


/* ========== 6. 卡片增强 ========== */

.self-body .card{
  margin-bottom:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:20px 22px 16px;
  transition:box-shadow .18s ease,border-color .18s ease;
}
.self-body .card:hover{
  box-shadow:var(--shadow-pop);
  border-color:var(--border-strong);
}
.self-body .card h3{font-size:15px;margin:0 0 14px}

/* 卡片说明文字（替代原先散落的内联样式段落） */
.card-desc{
  color:var(--text-tertiary);font-size:12.5px;line-height:1.7;
  margin:-6px 0 15px;
}

/* 卡片内子块分隔：解决"修改密码 + 终端备案"挤在一张卡里的问题 */
.card .sub-block+.sub-block{
  margin-top:28px;padding-top:24px;
  border-top:2px solid var(--border);
  position:relative;
}
.card .sub-block+.sub-block::before{
  content:"";position:absolute;top:-1px;left:0;width:48px;height:2px;
  background:var(--brand);border-radius:2px;
}
.card .sub-block>h3{font-size:14px;margin-bottom:12px}

/* 无感认证当前状态条 */
.mac-cur{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
  padding:11px 14px;margin:0 0 15px;
  background:var(--info-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:13px;color:var(--text-secondary);
}
.mac-cur .btn-sm{margin-left:auto}


/* ========== 7. 表单 ========== */

.self-body form label{
  display:block;margin:13px 0 0;
  font-size:12.5px;color:var(--text-secondary);font-weight:500;
}
.self-body form input,
.self-body form select,
.self-body form textarea{
  display:block;width:100%;margin:5px 0 0;padding:9px 11px;
}
.self-body form button[type=submit]{
  margin-top:18px;width:auto;min-width:118px;padding:9px 20px;
}

/* 个人信息：字段自适应双列 */
#profbody{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:0 18px;
}
#profbody label{margin:11px 0 0}
#profbody label input[readonly]{color:var(--text-tertiary)}

/* 表单结果提示 */
.self-body .auth-msg{text-align:left;margin-top:11px;min-height:1.2em}


/* ========== 8. 表格：拆掉"卡中套框"的双层边框 ========== */

.self-body .table-wrap{
  border:0;background:transparent;border-radius:0;
  overflow-x:auto;overflow-y:visible;
}
.self-body table{width:100%;font-size:13.5px}
.self-body thead th{
  position:static;
  background:var(--brand-light);
  padding:8px 12px 9px;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-tertiary);font-weight:600;
  border-bottom:1px solid var(--border);
}
.self-body tbody td{padding:11px 12px}
.self-body tbody tr:nth-child(even) td{background:transparent}
.self-body tbody tr:hover td{background:var(--brand-light) !important}
.self-body tbody tr:last-child td{border-bottom:0}

/* 空态：JS 注入的 colspan 占位行 */
.self-body td[colspan]{
  padding:30px 12px;text-align:center;
  color:var(--text-tertiary);font-size:13px;
}

/* 操作列按钮间距 */
.self-body td .btn-sm+.btn-sm{margin-left:6px}


/* ========== 9. 套餐键值对 / 公告 ========== */

#pkg .kv{padding:9px 0;font-size:13.5px;align-items:baseline}
#pkg .kv .k{color:var(--text-tertiary);flex-shrink:0;margin-right:14px;font-size:12.5px}
#pkg .kv .v{font-weight:500;text-align:right;word-break:break-all}

#nbox>div{line-height:1.7}
#nbox>div:last-child{border-bottom:0 !important}


/* ========== 10. 可访问性 ========== */

.self-nav a:focus-visible,
.self-body button:focus-visible,
.self-body input:focus-visible,
.self-body select:focus-visible,
.self-login button:focus-visible,
.self-login input:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  html,main.self-main-wrap{scroll-behavior:auto}
  .self-body .card,#me .stat,.self-nav a,button{transition-duration:.01ms !important}
}


/* ========== 11. 响应式 ========== */

@media (max-width:1024px){
  .self-body{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:880px){
  .self-login-grid{grid-template-columns:1fr;gap:30px;max-width:470px}
  .self-login-intro{text-align:center}
  .self-login-intro .li-sub{margin-left:auto;margin-right:auto}
  .self-login-feats{justify-items:center}
  .self-login-intro h1{font-size:26px}
}

@media (max-width:640px){
  body.app-shell > header.topbar{padding-left:14px;padding-right:14px}
  main.self-main-wrap{padding:0 14px 44px}
  .self-login{margin:0 -14px;padding:30px 14px;min-height:auto}
  .self-login .auth-card{padding:26px 20px;border-radius:15px}
  .self-hero{margin:18px 0 2px}
  .self-page-title{font-size:19px}
  #me.self-grid{grid-template-columns:1fr 1fr}
  #me .stat{padding:14px 15px}
  #me .stat b{font-size:19px}
  /* 顶栏在窄屏会换行变高，此处取消吸顶避免遮挡 */
  .self-nav{position:static;margin:16px 0 18px;padding:0 0 10px}
  .self-sec{scroll-margin-top:16px}
  .card{padding:16px 15px}
  #profbody{grid-template-columns:1fr}
  .self-body form button[type=submit]{width:100%}
  .mac-cur .btn-sm{margin-left:0}
}

@media (max-width:520px){
  .self-login-feats{display:none}
  .self-login-intro h1{font-size:23px}
}


/* ========== 12. 按导航点选才展开内容 ========== */

.self-pane-empty{
  display:none;
  margin:4px 0 28px;
  padding:36px 22px;
  text-align:center;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.7;
  background:var(--card);
  border:1px dashed var(--border);
  border-radius:var(--radius-lg);
}
#home.self-pane-mode.self-pane-idle .self-pane-empty{display:block}
#home.self-pane-mode.self-pane-idle .self-body{display:none}
#home.self-pane-mode .self-body .card:not(.self-pane-on){display:none !important}
#home.self-pane-mode .self-sec:not(:has(.card.self-pane-on)){display:none}
#home.self-pane-mode .self-col-main:not(:has(.card.self-pane-on)),
#home.self-pane-mode .self-col-side:not(:has(.card.self-pane-on)){display:none}
#home.self-pane-mode:not(.self-pane-idle) .self-body{
  grid-template-columns:minmax(0,1fr);
}
#home.self-pane-mode .self-sec-title{display:none}
#home.self-pane-mode .self-sec{margin-bottom:0}
#home.self-pane-mode:not(.self-pane-idle) .self-body .card.self-pane-on{
  margin:0;
}

.self-card-actions{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 16px}
.self-form-slot .self-form-src{display:none !important}
#self-sub-card .self-form-src{display:block !important}
.self-sub{display:none;margin:18px 0 48px}
#home.self-sub-open .self-sub{display:block}
#home.self-sub-open .self-hero,
#home.self-sub-open .self-nav,
#home.self-sub-open .self-pane-empty,
#home.self-sub-open .self-body{display:none !important}
.self-sub-bar{
  display:flex;align-items:center;gap:14px;
  margin:0 0 16px;
}
.self-sub-title{font-size:18px;font-weight:600;margin:0;letter-spacing:-.01em}
#self-sub-card{padding:22px 24px 20px}

/* ========== 模块14：自助端 SMP+ 深蓝科技风（参考 RG-SMP+ 手册界面） ========== */
.self-login{
  background-color:transparent;
  background-image:
    radial-gradient(1200px 520px at 12% -10%, rgba(47,123,255,.38), transparent 60%),
    radial-gradient(900px 460px at 105% 108%, rgba(20,80,190,.5), transparent 55%),
    linear-gradient(160deg, #071733 0%, #0a2450 55%, #0d2f6b 100%);
}
.self-login-intro h1{color:#fff}
.li-sub{color:#a9c2ec}
.self-login-feats li{color:#c6d8f6}
.self-login-feats li i{
  background:rgba(47,123,255,.22);
  color:#9cc2ff;
  border:1px solid rgba(110,165,255,.4);
}
.li-logo{box-shadow:0 10px 30px rgba(2,10,30,.5)}

.self-login .auth-card{
  background:rgba(10,30,66,.78);
  border:1px solid rgba(110,165,255,.38);
  color:#eaf2ff;
  box-shadow:0 18px 50px rgba(2,10,30,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.self-login .auth-card h2,
.self-login .auth-card .auth-hero .big{color:#fff}
.self-login .auth-card label{color:#a9c2ec}
.self-login .auth-card input,
.self-login .auth-card select{
  background:rgba(255,255,255,.07);
  border-color:rgba(110,165,255,.42);
  color:#fff;
}
.self-login .auth-card input::placeholder{color:#7d95c0}
.self-login .auth-card input:focus{border-color:#3c89e8;background:rgba(255,255,255,.12)}
.self-login .auth-card .btn.primary,
.self-login .auth-card button[class*="primary"]{
  background:linear-gradient(135deg,#2f7bff,#1664ff);
  border-color:transparent;
  box-shadow:0 6px 18px rgba(22,100,255,.45);
}
.self-login-alt{color:#9db6e0;border-top-color:rgba(110,165,255,.28)}
.self-login-alt a{color:#9cc2ff}
.self-login .auth-card .muted,
.self-login .auth-card .hint,
.self-login .auth-card p,
.self-login .auth-card .remember-row,
.self-login .auth-card .form-error{color:#c6d8f6}
.self-login .auth-card .form-error{color:#ff8f8f}
.self-login .auth-card a{color:#9cc2ff}
.self-login .auth-card .btn-block{width:100%;margin-top:8px;min-height:40px;cursor:pointer}
.self-login .auth-card .auth-msg{min-height:1.2em;margin:8px 0 0;font-size:13px}
.self-login .auth-card .auth-msg.err{color:#ff8f8f}