/* =====================================================================
   V免签 Worker — 黑客风主题覆盖层 (Hacker / Matrix Style)
   黑底绿字、等宽字体、发光边框、网格扫描线
   引入顺序：必须放在原主题 CSS 之后（main.css / layui.css / global.css）
   作用范围：登录页 index.html + 后台框架 aaa.html（含所有 layui 片段页）
   ===================================================================== */

:root {
  --hack-bg: #000000;          /* 主背景：纯黑 */
  --hack-bg-panel: #001a00;    /* 面板背景：深绿黑 */
  --hack-bg-hover: #003300;    /* 悬停背景 */
  --hack-green: #00ff41;       /* 主绿（Matrix 绿） */
  --hack-green-dim: #00cc33;   /* 次级绿 */
  --hack-green-faint: rgba(0, 255, 65, 0.35);   /* 淡绿（弱边框） */
  --hack-green-glow: rgba(0, 255, 65, 0.6);     /* 发光色 */
  --hack-border: 1px solid rgba(0, 255, 65, 0.55);
  --hack-font: Consolas, "Courier New", "Microsoft YaHei", monospace;
  --hack-grid-v: rgba(0, 255, 65, 0.025);
  --hack-grid-h: rgba(0, 255, 65, 0.02);
}

/* ---------------------------------------------------------------
   全局基础
   --------------------------------------------------------------- */
html, body {
  background-color: var(--hack-bg) !important;
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
}

::selection { background: var(--hack-green); color: #000; }

/* 滚动条（WebKit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #003300; border: 1px solid var(--hack-green-faint); }
::-webkit-scrollbar-thumb:hover { background: #004400; }

/* 网格背景（纯 CSS，无图）——登录页与后台统一规格 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,  var(--hack-grid-v) 0px, var(--hack-grid-v) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, var(--hack-grid-h) 0px, var(--hack-grid-h) 1px, transparent 1px, transparent 48px);
}

/* =====================================================================
   登录页 index.html（HTML5 UP Dimension 模板覆盖）
   ===================================================================== */
body, input, select, textarea { color: var(--hack-green) !important; }

/* 隐藏原背景图，纯黑（网格由 body::before 统一提供） */
#bg:after { background: #000 !important; }
#bg:before { background: rgba(0, 0, 0, 0.85) !important; background-image: none !important; }

#wrapper { z-index: 3; }
#wrapper:before { background: none !important; }

/* 主标题：荧光绿发光 + 光标闪烁（长标题适配） */
#header h1 {
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
  text-shadow: 0 0 8px var(--hack-green), 0 0 24px var(--hack-green-glow);
  letter-spacing: 0.3rem !important;
  font-size: 1.9rem !important;
  line-height: 1.5;
  white-space: nowrap;
}
#header h1::after {
  content: "_";
  color: var(--hack-green);
  animation: hack-blink 1s step-end infinite;
}
@keyframes hack-blink { 50% { opacity: 0; } }
@media screen and (max-width: 736px) {
  #header h1 { font-size: 1.35rem !important; letter-spacing: 0.18rem !important; white-space: normal; }
}

#header p, #header .content p, #main p {
  color: var(--hack-green) !important;
  text-shadow: 0 0 6px var(--hack-green-glow);
}
/* 副标题：分行排版 */
#header .content p {
  letter-spacing: 0.12rem !important;
  font-size: 0.95rem !important;
  line-height: 1.9 !important;
  text-transform: none !important;
}

/* logo 圆形徽标（图片版） */
#header .logo {
  border-color: var(--hack-green) !important;
  box-shadow: 0 0 12px var(--hack-green-glow), inset 0 0 12px rgba(0, 255, 65, 0.25);
  overflow: hidden;
}
#header .logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
  display: block;
}
/* 后台顶栏 logo */
.hack-header-logo {
  height: 36px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 65, 0.5);
  box-shadow: 0 0 8px var(--hack-green-glow);
  display: inline-block;
}
#header .content { border-color: var(--hack-green) !important; }
#header > *:before { background: var(--hack-green) !important; }

/* 导航（登录 / 简介） */
#header nav ul {
  border-color: var(--hack-green) !important;
  box-shadow: 0 0 10px var(--hack-green-glow);
}
#header nav ul li { border-left-color: var(--hack-green) !important; }
#header nav ul li a { color: var(--hack-green) !important; text-transform: uppercase; letter-spacing: 0.2rem; }
#header nav ul li a:hover { background: rgba(0, 255, 65, 0.12) !important; box-shadow: inset 0 0 8px var(--hack-green-glow); }
#header nav ul li a:active { background: rgba(0, 255, 65, 0.3) !important; }

/* 简介 / 登录面板 */
#main article {
  background-color: rgba(0, 0, 0, 0.9) !important;
  border: var(--hack-border);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.25);
}
#main article h2 {
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
  text-shadow: 0 0 8px var(--hack-green-glow);
}
#main article h2.major, #main article .major { border-bottom-color: var(--hack-green) !important; }

/* 表单 */
#login label { color: var(--hack-green) !important; letter-spacing: 0.2rem; }
#login input[type="text"], #login input[type="password"] {
  background: rgba(0, 255, 65, 0.04) !important;
  border: var(--hack-border) !important;
  border-radius: 0 !important;
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
  box-shadow: none !important;
}
#login input[type="text"]:focus, #login input[type="password"]:focus {
  background: rgba(0, 255, 65, 0.08) !important;
  border-color: var(--hack-green) !important;
  box-shadow: 0 0 10px var(--hack-green-glow) !important;
}
#login ::-webkit-input-placeholder { color: rgba(0, 255, 65, 0.4) !important; }

/* 按钮 */
#login input[type="submit"], #login input[type="reset"], #login .button {
  box-shadow: inset 0 0 0 1px var(--hack-green) !important;
  color: var(--hack-green) !important;
  border-radius: 0 !important;
  letter-spacing: 0.2rem;
  font-family: var(--hack-font) !important;
}
#login input[type="submit"]:hover, #login input[type="reset"]:hover, #login .button:hover {
  background: rgba(0, 255, 65, 0.12) !important;
  box-shadow: inset 0 0 0 1px var(--hack-green), 0 0 12px var(--hack-green-glow) !important;
}
#login input[type="submit"].special {
  background: var(--hack-green) !important;
  color: #000 !important;
  font-weight: 600;
}
#login input[type="submit"].special:hover { background: #33ff66 !important; box-shadow: 0 0 16px var(--hack-green) !important; }

/* 页脚 */
#footer .copyright { color: rgba(0, 255, 65, 0.6) !important; letter-spacing: 0.2rem; }

/* 面板关闭叉号：白色 → 荧光绿（含 hover/active 状态） */
#main article .close:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cstyle%3Eline%7Bstroke:%2300ff41;stroke-width:1%7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18'/%3E%3Cline x1='18' y1='2' x2='2' y2='18'/%3E%3C/svg%3E") !important;
  background-color: rgba(0, 255, 65, 0.15) !important;
  background-size: 20px 20px !important;
}
#main article .close:hover:before { background-color: rgba(0, 255, 65, 0.25) !important; }
#main article .close:active:before { background-color: rgba(0, 255, 65, 0.4) !important; }

/* =====================================================================
   后台框架 aaa.html + layui 片段页
   ===================================================================== */

/* 顶栏 */
.layui-header, .header, .header-demo {
  background: #000 !important;
  border-bottom: 1px solid var(--hack-green) !important;
  box-shadow: 0 1px 8px rgba(0, 255, 65, 0.3);
}
.layui-header .layui-main span, .header span { color: var(--hack-green) !important; text-shadow: 0 0 8px var(--hack-green-glow); }
.layui-header .layui-nav .layui-nav-item a { color: var(--hack-green) !important; }
.layui-header .layui-nav .layui-nav-item a:hover { background: rgba(0, 255, 65, 0.1) !important; }
.layui-header .layui-nav .layui-nav-child { background: #000 !important; border: var(--hack-border); }
.layui-header .layui-nav .layui-nav-child dd a { color: var(--hack-green) !important; }
.layui-header .layui-nav .layui-nav-child dd a:hover { background: rgba(0, 255, 65, 0.12) !important; }

/* 侧边栏 */
.layui-side, .layui-bg-black, .layui-side-scroll {
  background: #000 !important;
  border-right: 1px solid rgba(0, 255, 65, 0.4) !important;
}
.layui-nav-tree { background: #000 !important; }
.layui-nav-tree .layui-nav-item > a { color: var(--hack-green) !important; font-family: var(--hack-font) !important; }
.layui-nav-tree .layui-nav-item > a:hover { background: rgba(0, 255, 65, 0.1) !important; }
.layui-nav-tree .layui-nav-child { background: #000 !important; }
.layui-nav-tree .layui-nav-child dd a { color: var(--hack-green-dim) !important; }
.layui-nav-tree .layui-nav-child dd a:hover { background: rgba(0, 255, 65, 0.12) !important; color: var(--hack-green) !important; }
.layui-nav-tree .layui-nav-itemed > a { background: rgba(0, 255, 65, 0.06) !important; color: var(--hack-green) !important; }
.layui-nav-tree .layui-this > a, .layui-nav-tree .layui-nav-child dd.layui-this a {
  background: var(--hack-green) !important;
  color: #000 !important;
  text-shadow: none;
}
.layui-nav-tree .layui-nav-bar { background: var(--hack-green) !important; box-shadow: 0 0 8px var(--hack-green); }
.layui-nav .layui-nav-more { border-top-color: var(--hack-green) !important; }
.layui-nav .layui-nav-mored { border-color: transparent transparent var(--hack-green) !important; }

/* 内容区 */
.layui-body { background: #000 !important; }
.layui-main { color: var(--hack-green) !important; }

/* 表单 */
.layui-form-label { color: var(--hack-green) !important; font-family: var(--hack-font) !important; }
.layui-input, .layui-textarea, .layui-select {
  background: #001100 !important;
  border: var(--hack-border) !important;
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
  border-radius: 0 !important;
}
.layui-input:focus, .layui-textarea:focus {
  border-color: var(--hack-green) !important;
  box-shadow: 0 0 8px var(--hack-green-glow) !important;
  background: #002200 !important;
}
.layui-input[readonly] { background: #000d00 !important; color: var(--hack-green-dim) !important; }
.layui-form select, .layui-form-select dl { background: #000 !important; }
.layui-form-select dl dd { color: var(--hack-green) !important; }
.layui-form-select dl dd:hover, .layui-form-select dl dd.layui-this { background: rgba(0, 255, 65, 0.15) !important; }
.layui-form-select .layui-edge { border-top-color: var(--hack-green) !important; }
.layui-input::-webkit-input-placeholder { color: rgba(0, 255, 65, 0.35) !important; }
select option { background: #000 !important; color: var(--hack-green) !important; }

/* 表单 pane 模式（订单列表筛选区） */
.layui-form-pane .layui-form-label {
  background: #001a00 !important;
  border: var(--hack-border) !important;
  color: var(--hack-green) !important;
}
.layui-form-pane .layui-input, .layui-form-pane .layui-textarea { border: var(--hack-border) !important; }

/* 复选框（表格勾选等） */
.layui-form-checkbox i, .layui-form-checkbox span {
  border-color: rgba(0, 255, 65, 0.6) !important;
  color: var(--hack-green) !important;
  background: #000 !important;
}
.layui-form-checkbox:hover i { border-color: var(--hack-green) !important; }
.layui-form-checked[lay-skin="primary"] i {
  background: var(--hack-green) !important;
  border-color: var(--hack-green) !important;
  color: #000 !important;
}
.layui-form-checked[lay-skin="primary"] span { color: var(--hack-green) !important; }

/* 按钮 */
.layui-btn {
  background: #000 !important;
  border: var(--hack-border) !important;
  color: var(--hack-green) !important;
  border-radius: 0 !important;
  font-family: var(--hack-font) !important;
}
.layui-btn:hover { background: #003300 !important; box-shadow: 0 0 10px var(--hack-green-glow); }
.layui-btn-primary { background: #000 !important; color: var(--hack-green) !important; }
.layui-btn-normal { background: #003300 !important; color: var(--hack-green) !important; border-color: var(--hack-green) !important; }
.layui-btn-normal:hover { background: #004400 !important; }
/* 危险操作用例（删除订单等）保留红色语义，适配黑底 */
.layui-btn-danger { background: #2a0000 !important; border-color: rgba(255, 87, 34, 0.7) !important; color: #ff5722 !important; }
.layui-btn-danger:hover { background: #3d0000 !important; box-shadow: 0 0 10px rgba(255, 87, 34, 0.5); }

/* 表格 */
.layui-table, .layui-table-view { background: #000 !important; color: var(--hack-green) !important; }
.layui-table-view { border: 1px solid rgba(0, 255, 65, 0.4) !important; }
.layui-table th, .layui-table thead th {
  background: #001a00 !important;
  color: var(--hack-green) !important;
  border-color: rgba(0, 255, 65, 0.4) !important;
  font-family: var(--hack-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.layui-table td { background: #000 !important; color: var(--hack-green) !important; border-color: rgba(0, 255, 65, 0.25) !important; }
.layui-table tbody tr:hover td, .layui-table-hover, .layui-table tbody tr:hover { background: #001a00 !important; }
.layui-table tbody tr:nth-child(even) td { background: #000d00 !important; }
.layui-table-header, .layui-table-tool, .layui-table-fixed .layui-table-header { background: #001a00 !important; }
.layui-table-fixed-l, .layui-table-fixed-r { box-shadow: 0 0 8px rgba(0, 255, 65, 0.2) !important; }

/* 表格 / 表单中的图片（二维码预览等） */
.layui-form img, .layui-table img, .layui-table-cell img {
  border: 1px solid rgba(0, 255, 65, 0.35) !important;
  background: #000 !important;
  border-radius: 0 !important;
}

/* 分页 */
.layui-laypage a, .layui-laypage span {
  background: #000 !important;
  border-color: rgba(0, 255, 65, 0.4) !important;
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
}
.layui-laypage a:hover { background: #003300 !important; }
.layui-laypage .layui-laypage-curr .layui-laypage-em { background: var(--hack-green) !important; }
.layui-laypage .layui-laypage-curr em { color: #000 !important; }

/* 引用块 / 折叠面板（Api说明等） */
.layui-elem-quote {
  background: #001100 !important;
  border-left: 3px solid var(--hack-green) !important;
  border-radius: 0 !important;
  color: var(--hack-green) !important;
}
.layui-elem-quote a { color: #33ff66 !important; }
.layui-collapse { border-color: rgba(0, 255, 65, 0.4) !important; }
.layui-colla-item { border-color: rgba(0, 255, 65, 0.3) !important; }
.layui-colla-title {
  background: #001a00 !important;
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
  border-radius: 0 !important;
}
.layui-colla-title:hover { background: #002a00 !important; }
.layui-colla-content { background: #000 !important; color: var(--hack-green) !important; }
.layui-colla-icon { color: var(--hack-green) !important; }
blockquote { color: var(--hack-green) !important; }
h1, h2, h3, h4 { color: var(--hack-green) !important; font-family: var(--hack-font) !important; text-transform: uppercase; letter-spacing: 0.15em; }
a { color: #33ff66 !important; }
a:hover { color: var(--hack-green) !important; }

/* 代码块（Api说明） */
code, .layui-code, pre {
  background: #001100 !important;
  color: var(--hack-green) !important;
  border: var(--hack-border) !important;
  border-radius: 0 !important;
}
.layui-code ol, .layui-code ol li { background: none !important; border: none !important; color: var(--hack-green) !important; }

/* layer 弹窗 */
.layui-layer {
  background: #000 !important;
  border: var(--hack-border) !important;
  box-shadow: 0 0 24px rgba(0, 255, 65, 0.35) !important;
  border-radius: 0 !important;
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
}
.layui-layer-title { background: #001a00 !important; color: var(--hack-green) !important; border-bottom: var(--hack-border) !important; }
.layui-layer-btn a {
  background: #000 !important;
  border: var(--hack-border) !important;
  color: var(--hack-green) !important;
  border-radius: 0 !important;
}
.layui-layer-btn a:hover { background: #003300 !important; }
.layui-layer-btn .layui-layer-btn0 { background: var(--hack-green) !important; color: #000 !important; border: none; }
.layui-layer-btn .layui-layer-btn0:hover { background: #33ff66 !important; }
.layui-layer-msg { background: #001100 !important; color: var(--hack-green) !important; box-shadow: 0 0 16px rgba(0, 255, 65, 0.3) !important; }
.layui-layer-dialog .layui-layer-content { color: var(--hack-green) !important; }
/* 弹窗图标 / loading（icon:16 旋转方块） */
.layui-layer-ico { border-color: var(--hack-green) !important; }
.layui-layer-ico16 { background: none !important; border-color: var(--hack-green) !important; }

/* 上传组件 */
.layui-upload button { font-family: var(--hack-font) !important; }
.layui-upload-list { color: var(--hack-green) !important; }
.layui-upload-file { display: none; }
.layui-upload-img { border: var(--hack-border) !important; border-radius: 0 !important; background: #000 !important; }

/* 日期选择（laydate） */
.layui-laydate {
  background: #000 !important;
  border: var(--hack-border) !important;
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.25) !important;
}
.layui-laydate-header i, .layui-laydate-header span { color: var(--hack-green) !important; }
.layui-laydate-content td { color: var(--hack-green-dim) !important; }
.layui-laydate-content td:hover { background: #003300 !important; }
.layui-laydate-content td.layui-this, .layui-laydate-content td.layui-this:hover { background: var(--hack-green) !important; color: #000 !important; }
.layui-laydate-content td.layui-laydate-choose { color: var(--hack-green) !important; }
.layui-laydate-footer { background: #001100 !important; }
.layui-laydate-footer span { color: var(--hack-green) !important; border-color: rgba(0, 255, 65, 0.5) !important; }

/* 首页面板卡片（main.html） */
#LAY_preview .panel_box a {
  background: #001100 !important;
  border: var(--hack-border);
  border-radius: 0 !important;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.15);
}
#LAY_preview .panel_box a:hover { background: #002200 !important; box-shadow: 0 0 16px var(--hack-green-glow); }
.panel_icon { background: #003300 !important; }
.panel_icon i { color: var(--hack-green) !important; text-shadow: 0 0 6px var(--hack-green-glow); }
/* 状态语义色：暗色底 + 语义色图标（保留可读性，统一黑客基调） */
.panel_icon.layui-bg-green { background: #003300 !important; }
.panel_icon.layui-bg-green i { color: var(--hack-green) !important; text-shadow: 0 0 6px var(--hack-green-glow) !important; }
.panel_icon.layui-bg-red { background: #2a0000 !important; }
.panel_icon.layui-bg-red i { color: #ff5722 !important; text-shadow: 0 0 6px rgba(255, 87, 34, 0.6) !important; }
.panel_icon.layui-bg-orange { background: #2a1500 !important; }
.panel_icon.layui-bg-orange i { color: #ffa940 !important; text-shadow: 0 0 6px rgba(255, 169, 64, 0.5) !important; }
.panel_icon.layui-bg-cyan { background: #002a2a !important; }
.panel_icon.layui-bg-cyan i { color: #00e5e5 !important; text-shadow: 0 0 6px rgba(0, 229, 229, 0.5) !important; }
.panel_icon.layui-bg-blue { background: #001a33 !important; }
.panel_icon.layui-bg-blue i { color: #3399ff !important; text-shadow: 0 0 6px rgba(51, 153, 255, 0.5) !important; }
.panel_icon.layui-bg-black { background: #111111 !important; }
.panel_icon.layui-bg-black i { color: var(--hack-green) !important; text-shadow: 0 0 6px var(--hack-green-glow) !important; }
.panel_word { color: var(--hack-green) !important; }
.panel_word span { color: var(--hack-green) !important; text-shadow: 0 0 8px var(--hack-green-glow); }
.panel_word cite { color: var(--hack-green-dim) !important; font-style: normal; }

/* 后台页脚（aaa.html hack-footer）：fixed 在左侧边栏底部 */
.hack-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200px;
  min-height: 40px;
  z-index: 1000;
  box-sizing: border-box;
  background: #000 !important;
  border-top: 1px solid rgba(0, 255, 65, 0.4) !important;
  color: var(--hack-green-dim) !important;
  font-family: var(--hack-font) !important;
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
  padding: 8px 6px;
  overflow-wrap: break-word;
  word-break: break-all;
}
/* 侧边栏滚动区底部让位给用户区+页脚 */
.layui-side-scroll { padding-bottom: 100px !important; }
/* 侧边栏底部用户区（管理员 / 退出） */
.hack-side-user {
  position: fixed;
  bottom: 40px;
  left: 0;
  width: 200px;
  height: 44px;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #000 !important;
  border-top: 1px solid rgba(0, 255, 65, 0.4) !important;
  color: var(--hack-green) !important;
  font-family: var(--hack-font) !important;
  font-size: 13px;
}
.hack-side-user-name {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hack-side-user-logout {
  color: var(--hack-green) !important;
  border: 1px solid rgba(0, 255, 65, 0.5);
  padding: 2px 10px;
  text-decoration: none;
  font-size: 12px;
}
.hack-side-user-logout:hover {
  background: rgba(0, 255, 65, 0.15);
  box-shadow: 0 0 10px var(--hack-green-glow);
}
/* 移动端：侧边栏收起后页脚全宽，用户区隐藏 */
@media screen and (max-width: 992px) {
  .hack-footer { width: 100%; }
  .hack-side-user { display: none; }
}
.hack-footer a {
  color: var(--hack-green) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--hack-green);
}
.hack-footer a:hover {
  text-shadow: 0 0 8px var(--hack-green-glow);
}

/* 时间线 / 其他杂项 */
.layui-timeline-item:before { background: var(--hack-green) !important; }
.layui-timeline-title { color: var(--hack-green) !important; }
b, strong { color: var(--hack-green) !important; }
hr { border-bottom-color: rgba(0, 255, 65, 0.4) !important; }