/* =====================================================================
   科技感主题皮肤 —— 叠加在 xadmin.css / children.css / swch-ui.css 之上
   设计语言：深蓝渐变侧栏 + 青蓝主色 + 发光高亮 + 卡片化内容区
   注意：只做「覆盖增强」，不改动原有类名结构
   ===================================================================== */

:root {
  --st-primary: #2e7cff;
  --st-cyan: #00d0ff;
  --st-top-grad: linear-gradient(90deg, #0a1a33 0%, #10305e 60%, #0d4a7a 100%);
  --st-side-grad: linear-gradient(180deg, #0b1c33 0%, #0e2440 55%, #0c2b4e 100%);
  --st-body-bg: #eef3fa;
  --st-text: #24304a;
  --st-border: #dde6f2;
}

/* ---------- 全局背景：冷蓝灰 + 极淡网格 ---------- */
body {
  background: var(--st-body-bg) !important;
  background-image:
    linear-gradient(rgba(46,124,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,124,255,.035) 1px, transparent 1px) !important;
  background-size: 28px 28px, 28px 28px !important;
  color: var(--st-text);
}

/* ---------- 顶部栏：深蓝渐变 + 底部青色光带 ---------- */
.container {
  background: var(--st-top-grad) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 14px rgba(10, 35, 70, .35);
  position: relative;
}
.container::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--st-cyan) 30%, #2e7cff 70%, transparent);
  opacity: .8;
}
.container .logo a {
  color: #eaf6ff !important;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(0, 208, 255, .55);
}
.container .left_open i {
  background: rgba(255,255,255,.12) !important;
  color: #cfe9ff !important;
  transition: all .25s;
}
.container .left_open i:hover {
  background: rgba(0,208,255,.25) !important;
  box-shadow: 0 0 8px rgba(0,208,255,.5);
}
.container .layui-nav-item a { color: #dcecff !important; }
.container .layui-nav-child { background: #0f2747 !important; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.container .layui-nav-child a { color: #bcd8f5 !important; }
.container .layui-nav-child a:hover { background: rgba(0,208,255,.12) !important; color: #fff !important; }

/* ---------- 左侧栏：深蓝渐变 ---------- */
.left-nav {
  background: var(--st-side-grad) !important;
  border-right: none !important;
  box-shadow: 4px 0 18px rgba(8, 25, 50, .18);
}
.left-nav #nav li { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.left-nav #nav li a { color: #9db8d8 !important; transition: all .2s; }
.left-nav #nav li a i { color: #5f83ad !important; transition: color .2s; }
.left-nav #nav li a:hover { color: #fff !important; background: rgba(46,124,255,.14); }
.left-nav #nav li a:hover i { color: var(--st-cyan) !important; }
.left-nav #nav li .sub-menu li a { color: #7fa0c5 !important; }
.left-nav #nav li .sub-menu li a:hover { color: var(--st-cyan) !important; background: rgba(0,208,255,.06); }
.left-nav #nav .current,
.left-nav #nav li .opened .current {
  background: linear-gradient(90deg, rgba(0,208,255,.18), rgba(46,124,255,.05)) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--st-cyan);
}
.left-nav #nav .current cite { color: #fff !important; }

/* ---------- 按钮：蓝青渐变主按钮 ---------- */
.layui-btn {
  border-radius: 6px;
  transition: all .2s;
  letter-spacing: .5px;
}
.layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm):not(.layui-btn-disabled) {
  background: linear-gradient(135deg, #2e7cff, #1f5fe0) !important;
  box-shadow: 0 2px 8px rgba(46,124,255,.35);
}
.layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm):hover {
  box-shadow: 0 4px 14px rgba(46,124,255,.5);
  filter: brightness(1.08);
}
.layui-btn-primary {
  border: 1px solid var(--st-border) !important;
  color: #3d5a80 !important;
  background: #fff !important;
}
.layui-btn-primary:hover { border-color: var(--st-primary) !important; color: var(--st-primary) !important; }
.layui-btn-warm { background: linear-gradient(135deg, #ff9f43, #f08c1e) !important; box-shadow: 0 2px 8px rgba(240,140,30,.3); }
.layui-btn-danger { background: linear-gradient(135deg, #ff5f57, #e03e3e) !important; box-shadow: 0 2px 8px rgba(224,62,62,.3); }

/* ---------- 表格：深蓝表头 + 行 hover 蓝光 ---------- */
.x-body .layui-table, .layui-table {
  border: 1px solid var(--st-border) !important;
  box-shadow: 0 2px 12px rgba(30, 60, 110, .07);
}
.layui-table thead tr { background: linear-gradient(90deg, #12315e, #1a4a8a) !important; }
.layui-table thead th {
  color: #eaf4ff !important;
  font-weight: 600 !important;
  border-color: rgba(255,255,255,.08) !important;
  background: transparent !important;
}
.layui-table tbody tr { transition: background .15s; }
.layui-table tbody tr:hover { background: #e9f3ff !important; }
.layui-table td { border-color: #e8eef7 !important; }

/* ---------- 表单：聚焦青色描边 ---------- */
.layui-input, .layui-select, .layui-textarea {
  border: 1px solid var(--st-border) !important;
  border-radius: 6px;
  transition: all .2s;
}
.layui-input:focus, .layui-select:focus, .layui-textarea:focus {
  border-color: var(--st-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 208, 255, .15) !important;
}

/* ---------- 面包屑导航 ---------- */
.x-nav {
  background: linear-gradient(90deg, #ffffff, #f2f7ff);
  border-bottom: 1px solid var(--st-border);
  color: #33507a;
  box-shadow: 0 1px 6px rgba(30,60,110,.06);
}

/* ---------- 分页按钮 ---------- */
.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background: linear-gradient(135deg, #2e7cff, #1f5fe0) !important;
  border-radius: 4px;
}
.layui-laypage a, .layui-laypage span { border-radius: 4px !important; }
.layui-laypage a:hover { color: var(--st-primary) !important; }

/* ---------- 弹窗：圆角 + 蓝色标题条 ---------- */
.layui-layer {
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(10, 35, 70, .3) !important;
}
.layui-layer-title {
  background: var(--st-top-grad) !important;
  color: #eaf6ff !important;
  border-bottom: none !important;
  letter-spacing: 1px;
}
.layui-layer-btn .layui-layer-btn0 {
  background: linear-gradient(135deg, #2e7cff, #1f5fe0) !important;
  border-color: transparent !important;
}

/* ---------- 标签页 ---------- */
.layui-tab-title .layui-this { color: var(--st-primary) !important; }
.layui-tab-title .layui-this:after {
  border-bottom: 2px solid var(--st-cyan) !important;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(46,124,255,.28); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(46,124,255,.5); }
.left-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
.left-nav::-webkit-scrollbar-thumb:hover { background: rgba(0,208,255,.4); }

/* ---------- 徽章/引用块 ---------- */
.layui-badge { background: linear-gradient(135deg, #ff5f57, #e03e3e) !important; }
blockquote { border-left: 3px solid var(--st-cyan) !important; background: #f0f7ff !important; }

/* =====================================================================
   登录页（body.st-login 作用域）
   ===================================================================== */
body.st-login {
  background: linear-gradient(135deg, #08152b 0%, #0d2c55 45%, #0a4a7e 100%) !important;
  background-image:
    radial-gradient(ellipse 60% 40% at 70% 20%, rgba(0,208,255,.18), transparent),
    linear-gradient(135deg, #08152b 0%, #0d2c55 45%, #0a4a7e 100%) !important;
  min-height: 100vh;
  /* 登录框弹性居中（替代 login.css 的绝对定位居中） */
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-login-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(0,208,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,208,255,.05) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
}
body.st-login .login {
  position: relative; z-index: 1;
  left: auto; top: auto; margin: 0 !important;   /* 清掉 login.css 绝对定位偏移，交给 flex 居中 */
  background: rgba(13, 33, 63, .72) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 208, 255, .3);
  border-radius: 14px !important;
  height: auto !important;        /* 覆盖 login.css 固定 235px，避免"短信登录"按钮溢出 */
  min-height: 120px !important;
  max-width: 420px !important;
  padding: 36px !important;
  box-shadow: 0 20px 60px rgba(0, 10, 30, .6), 0 0 40px rgba(0, 208, 255, .12) !important;
}
body.st-login .login h1 { color: #eaf6ff !important; text-shadow: 0 0 12px rgba(0,208,255,.5); }
body.st-login .login h1 img { max-width: 64px !important; min-width: 0; }
body.st-login .login h1 span { white-space: nowrap; }
body.st-login .login .layui-input {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(0, 208, 255, .3) !important;
  color: #eaf6ff !important;
  border-radius: 6px;
}
body.st-login .login .layui-input::placeholder { color: #7fa0c5 !important; }
body.st-login .login .layui-btn:not(.layui-btn-primary) {
  background: linear-gradient(135deg, #00d0ff, #2e7cff) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 208, 255, .4) !important;
  color: #06182f !important;
  font-weight: 600;
}
body.st-login .login .ewm-msg, body.st-login .login p { color: #cfe4fb !important; }

/* =====================================================================
   皮肤主题（html.st-skin-xxx，由页面配置控制）
   ===================================================================== */

/* ---------- 暗夜紫 ---------- */
html.st-skin-purple body { background-color: #f2effa !important; }
html.st-skin-purple .container { background: linear-gradient(90deg, #170b2e 0%, #33125c 60%, #4a1f7a 100%) !important; }
html.st-skin-purple .left-nav { background: linear-gradient(180deg, #150a29 0%, #221041 55%, #2b1454 100%) !important; }
html.st-skin-purple .layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm) { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; box-shadow: 0 2px 8px rgba(139,92,246,.35) !important; }
html.st-skin-purple .layui-table thead tr { background: linear-gradient(90deg, #2a1150, #4a1f7a) !important; }
html.st-skin-purple .layui-laypage .layui-laypage-curr .layui-laypage-em { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; }
html.st-skin-purple body.st-login { background: radial-gradient(ellipse 60% 40% at 70% 20%, rgba(196,120,255,.2), transparent), linear-gradient(135deg, #0d0620 0%, #1d0d3d 45%, #3b1670 100%) !important; }
html.st-skin-purple .st-login-bg { background-image: linear-gradient(rgba(196,120,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(196,120,255,.06) 1px, transparent 1px) !important; }
html.st-skin-purple body.st-login .login .layui-btn:not(.layui-btn-primary) { background: linear-gradient(135deg, #c478ff, #8b5cf6) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(139,92,246,.45) !important; }

/* ---------- 翡翠绿 ---------- */
html.st-skin-green body { background-color: #edf7f2 !important; }
html.st-skin-green .container { background: linear-gradient(90deg, #06231a 0%, #0c4632 60%, #127a55 100%) !important; }
html.st-skin-green .left-nav { background: linear-gradient(180deg, #07231a 0%, #0a3325 55%, #0d4330 100%) !important; }
html.st-skin-green .layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm) { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 2px 8px rgba(16,185,129,.35) !important; }
html.st-skin-green .layui-table thead tr { background: linear-gradient(90deg, #0c4a34, #127a55) !important; }
html.st-skin-green .layui-laypage .layui-laypage-curr .layui-laypage-em { background: linear-gradient(135deg, #10b981, #059669) !important; }
html.st-skin-green body.st-login { background: radial-gradient(ellipse 60% 40% at 70% 20%, rgba(16,233,169,.16), transparent), linear-gradient(135deg, #04150f 0%, #083526 45%, #0d5c42 100%) !important; }
html.st-skin-green .st-login-bg { background-image: linear-gradient(rgba(16,233,169,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16,233,169,.05) 1px, transparent 1px) !important; }
html.st-skin-green body.st-login .login .layui-btn:not(.layui-btn-primary) { background: linear-gradient(135deg, #34e8ae, #10b981) !important; color: #04281c !important; box-shadow: 0 4px 16px rgba(16,185,129,.45) !important; }

/* =====================================================================
   登录页动画（页面配置 login_anim=on 时输出 .st-login-orbs）
   ===================================================================== */
.st-login-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.st-login-orbs i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(0,208,255,.45), rgba(0,208,255,.06) 65%, transparent 70%);
  filter: blur(6px); opacity: .7; animation: stFloat 16s ease-in-out infinite;
}
.st-login-orbs i:nth-child(1) { width: 340px; height: 340px; left: 8%;  top: 12%; animation-delay: 0s; }
.st-login-orbs i:nth-child(2) { width: 220px; height: 220px; right: 12%; top: 55%; animation-delay: -6s; animation-duration: 20s;
  background: radial-gradient(circle at 30% 30%, rgba(46,124,255,.4), rgba(46,124,255,.05) 65%, transparent 70%); }
.st-login-orbs i:nth-child(3) { width: 150px; height: 150px; left: 45%; bottom: 6%; animation-delay: -11s; animation-duration: 14s;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), rgba(255,255,255,.04) 65%, transparent 70%); }
@keyframes stFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, -40px) scale(1.12); }
  66%  { transform: translate(-40px, 30px) scale(.92); }
  100% { transform: translate(0, 0) scale(1); }
}
html.st-skin-purple .st-login-orbs i { background: radial-gradient(circle at 30% 30%, rgba(196,120,255,.45), rgba(196,120,255,.06) 65%, transparent 70%) !important; }
html.st-skin-green  .st-login-orbs i { background: radial-gradient(circle at 30% 30%, rgba(16,233,169,.4), rgba(16,233,169,.05) 65%, transparent 70%) !important; }
body.st-login .login, body.st-login .st-login-bg { z-index: 1; }