/* ==========================================================================
   2026-09-25 新版视觉层（参考 zb/index.html 的卡片 + 渐变风格）
   --------------------------------------------------------------------------
   1. 在 xadmin.css、mobile.css 之后引入，纯覆盖，不改动原框架文件；
   2. 不依赖任何外部 CDN / 字体，鸿蒙 ArkWeb 与微信内置浏览器均可渲染；
   3. 桌面端与手机端统一视觉语言：蓝渐变顶栏 + 白卡片 + 圆角 + 浅灰底；
   4. 只改样式不改 class 名，xadmin.js 的菜单 / tab / iframe 逻辑完全复用。
   ========================================================================== */

:root{
    --brand:#2563eb;
    --brand-dark:#1e3a8a;
    --brand-light:#0ea5e9;
    /* 柔和配色（2026-09-25 应要求调整）：整体降亮、去纯白刺眼感，保留蓝色调 */
    --bg:#e6ecf4;        /* 页面底：柔和蓝灰 */
    --card:#f4f7fb;      /* 卡片 / 内容区：柔和近白，不再是纯白 */
    --soft:#eaf0f7;      /* 表头 / 工具条：比卡片再柔一档 */
    --line:#dde4ee;
    --text:#1e293b;
    --muted:#64748b;
    --radius:16px;
}

*{box-sizing:border-box}
body.index{background:var(--bg);overflow:hidden}

/* ======================= 顶部栏 ======================= */
.container{
    height:50px !important;
    display:flex !important;
    align-items:center;
    padding:0 8px !important;
    background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#0ea5e9 100%) !important;
    box-shadow:0 8px 20px -12px rgba(30,58,138,.9);
    overflow:visible;
}
.container .left_open{
    float:none !important;
    order:1;
    flex:0 0 auto;
    height:50px !important;
    margin-left:0 !important;
}
.container .left_open i{
    width:36px !important;
    height:36px !important;
    line-height:36px !important;
    margin-top:7px !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.22) !important;
    font-size:20px !important;
    transition:background .2s;
}
.container .left_open a{
    display:flex;
    align-items:center;
    height:50px;
    color:#fff;
    text-decoration:none;
}
.container .left_open a:active i{background:rgba(255,255,255,.4) !important}
.container .logo{
    float:none !important;
    order:2;
    flex:1 1 auto;
    min-width:0;
    height:50px;
    overflow:hidden;
}
.container .logo a{
    float:none !important;
    display:block !important;
    width:auto !important;
    padding-left:8px !important;
    font-size:16px !important;
    line-height:50px !important;
    color:#fff !important;
    font-weight:600;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.container .right{float:none !important;order:3;flex:0 0 auto}
.container .layui-nav-item{line-height:50px !important}
.container .layui-nav-item a{color:#fff !important;font-size:14px}
.container .layui-nav-more{top:22px !important;border-top-color:rgba(255,255,255,.8) !important}
.container .layui-nav-child{
    top:52px !important;
    background:var(--card) !important;
    border-radius:12px !important;
    box-shadow:0 12px 28px -12px rgba(15,23,42,.35) !important;
    padding:6px !important;
    min-width:120px;
}
.container .layui-nav-child dd{margin:2px 0}
.container .layui-nav-child a{
    color:#334155 !important;
    border-radius:9px !important;
    padding:0 12px !important;
}
.container .layui-nav-child a:hover{background:#eff6ff !important;color:#1d4ed8 !important}
/* 用户名前的图标（首次进入时用户名为空，只剩一个下拉箭头会显得很怪） */
.container #username::before{
    content:"\e66f";
    font-family:layui-icon !important;
    margin-right:5px;
    font-size:14px;
    opacity:.9;
}
.container .layui-nav-item a{padding:0 8px !important;border-radius:9px}
.container .layui-nav-item a:hover{background:rgba(255,255,255,.16)}
/* 左栏滚动字幕
   2026-09-26 修复："只滚动一小段、看不到全部内容"。
   原因：#scroll 被设成 width:100%（=左栏宽度）且它自身带 overflow:hidden，
   marquee 滚动的是这个窄盒子，盒内超出的文字被自己裁掉，永远只露出开头一小段。
   正确做法：盒子宽度随文字撑开并保持单行（nowrap），marquee 才能整段滚过。 */
.left-nav marquee{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    padding:5px 0;
    box-sizing:border-box;
    overflow:hidden;
    line-height:0;
    /* 原有内联 border/color 不变，这里只补一条分隔感 */
    border-top:1px solid var(--line);
}
.left-nav #scroll{
    display:inline-block !important;
    width:auto !important;
    max-width:none !important;
    white-space:nowrap !important;
    overflow:visible !important;
    padding:0 8px !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

/* 左栏底部版权信息：吸底常驻，不随左栏内容滚走 */
.left-nav .nav-copyright{
    position:sticky;
    bottom:0;
    z-index:5;
    margin-top:auto;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    text-align:center;
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
    /* 接近不透明的柔和底，吸底时不会透出下方内容 */
    background:linear-gradient(180deg,rgba(234,240,247,.90) 0%,var(--soft) 38%);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border-top:1px solid var(--line);
}
.left-nav .nav-copyright span{display:block}
.left-nav .nav-copyright a{color:var(--brand);text-decoration:none}
.left-nav .nav-copyright a:hover{text-decoration:underline}

/* ======================= 左侧菜单 ======================= */
.left-nav{
    top:50px !important;
    background:var(--card) !important;
    border-right:1px solid var(--line);
    padding-top:8px !important;
    box-shadow:0 0 24px rgba(15,23,42,.12);
    /* 左栏内容（菜单 + 地球 + 滚动通知）高于可视区时可滚动，不会把地球挤掉 */
    overflow-y:auto;
    overflow-x:hidden;
    /* 纵向 flex：让底部版权条能靠 margin-top:auto 贴住左栏底部 */
    display:flex;
    flex-direction:column;
}
/* 这些块都不参与压缩，避免菜单被压扁 */
.left-nav #side-nav,
.left-nav .layui-tab-item,
.left-nav marquee,
.left-nav .nav-copyright{flex:none}
.left-nav #nav{padding:0 8px 12px}
.left-nav #nav li a{
    border-radius:12px !important;
    border-left:none !important;
    margin:3px 0 !important;
    /* 2026-09-26：由 12px 收紧到 10px，为底部版权条腾出空间，
       避免版权条吸底时盖住滚动字幕（桌面 768 高度下左栏内容正好装下） */
    padding:10px 14px !important;
    color:#334155 !important;
    font-size:14.5px !important;
    display:flex !important;
    align-items:center;
    background:transparent;
}
.left-nav #nav li a .iconfont.left-nav-li{margin-right:10px;font-size:17px;color:#2563eb}
/* cite 占满剩余宽度，把右侧箭头推到最右边（xadmin.css 里 cite 有 float，需 !important 覆盖） */
.left-nav #nav li a cite{
    flex:1 1 auto !important;
    float:none !important;
    display:block !important;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.left-nav #nav li a .iconfont.nav_right{color:#cbd5e1;font-size:15px}
.left-nav #nav li a.active .iconfont.nav_right{color:rgba(255,255,255,.75)}
.left-nav a:hover{
    background:#eff6ff !important;
    color:#1d4ed8 !important;
    border-color:transparent !important;
}
.left-nav #nav li a.active{
    background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
    color:#fff !important;
    box-shadow:0 10px 18px -12px rgba(37,99,235,.95);
}
.left-nav #nav li a.active .iconfont.left-nav-li{color:#fff}
.left-nav #nav li a.active cite{font-weight:600}
/* ---- 左栏里的 3D 转动地球（iframe ./3D/index.html）----
   桌面端显示，手机端左栏收进抽屉时隐藏（见下方媒体查询）。
   注意：这里只针对左栏，不要写成全局隐藏，否则桌面端的地球就没了。
   iframe 默认高度 150px，地球会挤成一团，这里给 170px 并配深色太空底。 */
.left-nav .layui-tab-item{
    display:block !important;
    /* 2026-09-26：底部内边距 8→2，为版权条腾空间 */
    padding:2px 8px 2px !important;
    box-sizing:border-box;
}
/* 2026-09-25：原先把 iframe 背景设成深空渐变，但那会露出一个深色方块边框；
   3D 页面自身已是透明背景，这里直接透明，让地球直接浮在左栏底色上 */
.left-nav .layui-tab-item iframe{
    display:block;
    width:100% !important;
    height:170px !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    overflow:hidden;
}

/* ======================= 内容区 ======================= */
.page-content{
    top:50px !important;
    background:var(--bg) !important;
}
.page-content-bg{
    top:50px !important;
    background:rgba(15,23,42,.42) !important;
    z-index:1000;
}

/* tab 条：胶囊化 + 横向滚动 */
.page-content .layui-tab-title{
    height:auto !important;
    min-height:44px;
    background:transparent !important;
    border-bottom:none !important;
    padding:6px 10px 0 !important;
    display:flex !important;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    white-space:nowrap;
}
.page-content .layui-tab-title::-webkit-scrollbar{display:none}
.page-content .layui-tab-title li{
    flex:none !important;
    height:34px !important;
    line-height:34px !important;
    padding:0 14px !important;
    margin:0 !important;
    border:1px solid var(--line) !important;
    border-radius:999px !important;
    background:var(--card) !important;
    color:#334155 !important;
    font-size:13.5px !important;
    font-weight:600;
}
.page-content .layui-tab-title li.layui-this{
    background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
    border-color:transparent !important;
    color:#fff !important;
    box-shadow:0 8px 16px -10px rgba(37,99,235,.95);
}
.page-content .layui-tab-title li.layui-this:after{display:none !important;border:none !important}
.page-content .layui-tab-title li .layui-icon{margin-right:4px}
.page-content .layui-tab-bar{display:none !important}

/* 内容卡片 */
.page-content .layui-tab-content{
    top:48px !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 4px 14px -10px rgba(15,23,42,.3);
    overflow:hidden;
}
.page-content .layui-tab-content .layui-tab-item{border-radius:var(--radius);overflow:hidden}
.page-content .layui-tab-content .layui-tab-item iframe{
    border-radius:var(--radius);
    background:var(--card);
}
/* 弹层（修改密码等父页面弹窗）：柔和底
   2026-10-22 修复登录错误提示看不清：
   layer.msg 默认自带 layui-layer-hui（深色半透明底 rgba(0,0,0,.6) + 白字），
   之前这里把所有 .layui-layer 一律改成近白底，msg 的白字落在近白底上就"隐身"了。
   现在把白卡片样式排除 .layui-layer-msg，并为 msg 单独定义深色底白字大字号样式
   （xadmin.css 的 .x-admin-sm 还会把弹层文字压到 12px，这里一并覆盖回 15px）。 */
.layui-layer:not(.layui-layer-msg){background:var(--card) !important;border-radius:14px !important;overflow:hidden}
.layui-layer-title{
    background:var(--soft) !important;
    border-bottom:1px solid var(--line) !important;
    color:#334155 !important;
}
.layui-layer-dialog:not(.layui-layer-msg) .layui-layer-content{background:var(--card) !important}

/* layer.msg 轻提示（登录错误等）：深色底 + 白字，任何页面上都可读 */
.layui-layer-msg{
    background:rgba(15,23,42,.9) !important;
    border:none !important;
    border-radius:10px !important;
    box-shadow:0 12px 30px -12px rgba(15,23,42,.65) !important;
    min-width:220px !important;
}
.layui-layer-msg .layui-layer-content{
    background:transparent !important;
    color:#fff !important;
    font-size:15px !important;
    line-height:1.6 !important;
    padding:14px 22px !important;
    text-align:center !important;
}
/* msg 带 icon 时保持图标与文字的原有布局 */
.layui-layer-msg .layui-layer-content.layui-layer-padding{
    text-align:left !important;
    padding:18px 22px 18px 55px !important;
}

/* 登录错误提示条（2026-10-22b：loginB 改为在登录卡片内、登录按钮下方常驻显示，
   不再用 layer.msg 弹层——弹层 3 秒自动消失，用户容易来不及看清） */
.login-err{
    display:none;
    margin-top:14px;
    padding:10px 12px;
    border-radius:10px;
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
    font-size:14.5px;
    line-height:1.55;
    text-align:center;
}

/* 右键菜单 */
#tab_right{
    background:var(--card) !important;
    border-radius:12px !important;
    box-shadow:0 12px 28px -12px rgba(15,23,42,.35) !important;
    overflow:hidden;
}
#tab_right dd{padding:8px 14px;color:#334155}
#tab_right dd:hover{background:#eff6ff;color:#1d4ed8}

/* ======================= 手机端（<768px） ======================= */
@media screen and (max-width:768px){
    /* 顶栏：加深色渐变，用户名与标题压缩 */
    .container{height:50px !important;padding:0 6px !important}
    .container .logo a{font-size:15px !important;padding-left:6px !important}

    /* 抽屉：宽度固定 78vw，靠 transform 收起/展开
       （xadmin.js 仍按 width:0 / 220px 控制，js/m-page.js 负责同步成 class） */
    .left-nav{
        width:78vw !important;
        max-width:320px !important;
        transform:translateX(0);
        transition:transform .26s cubic-bezier(.4,0,.2,1);
        z-index:1003 !important;
        box-shadow:0 0 32px rgba(15,23,42,.28) !important;
    }
    body.nav-closed .left-nav{transform:translateX(-104%)}
    .left-nav #nav li a{padding:14px 16px !important;font-size:15.5px !important}
    .left-nav .layui-tab-item,
    .left-nav marquee,
    #scroll{display:none !important}

    .page-content{left:0 !important;right:0 !important}
    .page-content-bg{z-index:1002 !important}

    /* tab 条：手机上只显示当前页名称，胶囊更小 */
    .page-content .layui-tab-title{padding:6px 8px 4px !important}
    .page-content .layui-tab-title li{height:32px !important;line-height:32px !important;font-size:13px !important;padding:0 12px !important}
    .page-content .layui-tab-content{
        top:46px !important;
        left:8px !important;
        right:8px !important;
        bottom:8px !important;
        border-radius:14px;
    }

    /* 修改密码弹窗里的输入框 */
    .layui-layer .layui-input{height:44px !important;font-size:16px !important;border-radius:10px}
    .layui-layer-dialog .layui-layer-content{padding:20px 18px !important;font-size:15px}
}

/* ======================= 登录页通用（loginB / loginCW） =======================
   2026-09-27h 修复两处：
   ① 垂直居中：原来只写了 margin-top:8vh，窗口越高卡片越靠上（1920×1080 下明显偏上）。
      改成 flex 纵向 + margin:auto 居中——auto 外边距在"窗口比卡片还矮"时会自动退化为 0，
      卡片不会被裁掉顶部（比 justify-content:center 更安全）。上下各留 48px 内边距：
      既保证真正按窗口居中（上下对称），又让卡片底部避开固定版权条（高 40px）。
   ② 登录按钮文字不居中：css/login.css 给 input[type=submit] 写了 padding:12px 24px，
      而这里定了 height:46px + line-height:46px + box-sizing:border-box
      → 内容盒只剩 46-12-12=22px 高，却塞了 46px 的行高，文字被往下顶 12px。
      补 padding:0 使其真正居中，同时把字号从 16px 提到 18px。
   ⚠️ 注意：login.css 的 .login-bg 带 overflow:hidden，这里必须放开，
      否则矮窗口下卡片被裁且无法滚动。 */
body.login-bg{
    background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#0ea5e9 100%) !important;
    min-height:100vh;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    padding:48px 16px !important;
    box-sizing:border-box;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}
body.login-bg .login{
    width:min(92vw,400px) !important;
    margin:auto !important;
    flex:0 0 auto;
    /* 收掉 login.css 的 min-height:420px —— 内容只有约 250px，多出来的空白居中后更显突兀 */
    min-height:0 !important;
    background:#fff !important;
    border-radius:20px !important;
    box-shadow:0 24px 48px -24px rgba(15,23,42,.75) !important;
    padding:24px 22px 26px !important;
    position:relative;
    overflow:visible;
}
body.login-bg .login .message{
    font-size:18px !important;
    font-weight:700;
    color:var(--brand-dark) !important;
    background:transparent !important;
    text-align:center;
    padding:0 0 16px !important;
    letter-spacing:.02em;
}
body.login-bg #darkbannerwrap{display:none !important}
body.login-bg .login .layui-input{
    height:46px !important;
    border-radius:12px !important;
    border:1px solid var(--line) !important;
    font-size:16px !important;
    padding-left:14px !important;
    background:#f8fafc;
}
body.login-bg .login .layui-input:focus{border-color:var(--brand) !important;background:#fff}
body.login-bg .login hr{display:none !important}
body.login-bg .login form input[type="submit"],
body.login-bg .login input[lay-submit]{
    width:100% !important;
    height:46px !important;
    line-height:46px !important;
    /* login.css 的 padding:12px 24px 会把内容盒压到 22px，导致文字偏下 12px，必须清掉 */
    padding:0 !important;
    margin-top:18px !important;
    border:none !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
    color:#fff !important;
    font-size:18px !important;
    font-family:inherit !important;
    font-weight:600;
    letter-spacing:.08em;
    box-shadow:0 12px 22px -14px rgba(37,99,235,1);
}

/* ======================= 桌面端字号放大（≥769px） =======================
   2026-09-25 应要求：电脑网页端的标题与正文整体调大一号。
   用 min-width 限定在桌面端，手机端（≤768px）字号维持原样不受影响。 */
@media screen and (min-width:769px){
    /* 顶栏 */
    .container .logo a{font-size:18px !important}
    .container .layui-nav-item a{font-size:15px !important}
    .container #username::before{font-size:15px}
    .container .layui-nav-child a{font-size:15px !important}

    /* 左栏菜单 */
    .left-nav #nav li a{font-size:15.5px !important}
    .left-nav #nav li a .iconfont.left-nav-li{font-size:18px}
    .left-nav #nav li a .iconfont.nav_right{font-size:16px}
    .left-nav #scroll{font-size:14px !important}

    /* tab 胶囊：字号变大，同步加宽内边距与高度 */
    .page-content .layui-tab-title{min-height:46px}
    .page-content .layui-tab-title li{
        height:36px !important;
        line-height:36px !important;
        font-size:14.5px !important;
        padding:0 16px !important;
    }

    /* 弹层 / 右键菜单 */
    .layui-layer-title{font-size:16px !important;height:46px !important;line-height:46px !important}
    .layui-layer-dialog .layui-layer-content{font-size:15.5px}
    #tab_right dd{font-size:15px;padding:9px 16px}
}