/* ============================================================
 * PXE Design System — theme.css（Apple / macOS 风格）
 * ------------------------------------------------------------
 * 全站统一视觉规范（CSS Variables + Bootstrap 3 组件覆写）。
 * 加载顺序：bootstrap.min.css → base_main.css → index.css
 *           → theme.css → mobile.css
 * 设计关键词：简洁 / 轻盈 / 精致 / 柔和。白、浅灰、浅蓝为主，
 * 低饱和度柔和渐变；只做视觉层覆写，不改 DOM 与行为逻辑。
 * ============================================================ */

:root {
    /* 色彩 · 主色 */
    --pxe-primary:        #1677FF;
    --pxe-primary-strong: #0F65E8;
    --pxe-primary-soft:   #EAF3FF;
    --pxe-primary-border: #D6E6FF;
    --pxe-primary-ring:   rgba(22, 119, 255, .14);

    /* 色彩 · 辅助（仅小范围点缀） */
    --pxe-purple:      #8B5CF6;
    --pxe-purple-soft: #F0EBFF;
    --pxe-pink-soft:   #FFF0F6;
    --pxe-cyan-soft:   #E7F8FF;

    /* 色彩 · 背景 / 表面 */
    --pxe-bg:               #F7F9FC;
    --pxe-card:             #FFFFFF;
    --pxe-surface-2:        #F5F7FB;
    --pxe-nav-bg:           rgba(255, 255, 255, .82);

    /* 色彩 · 文字 */
    --pxe-text:        #1D2433;
    --pxe-text-strong: #1D2433;
    --pxe-text-2:      #68748A;
    --pxe-text-3:      #98A2B3;

    /* 色彩 · 边框 / 状态 */
    --pxe-border:      #E8ECF3;
    --pxe-border-soft: #F0F3F8;

    --pxe-danger:        #E5484D;
    --pxe-danger-strong: #D33B40;
    --pxe-danger-soft:   #FDECEC;

    --pxe-success:      #30A46C;
    --pxe-success-soft: #E7F6EC;
    --pxe-warning:      #E8930C;
    --pxe-warning-soft: #FDF4E3;

    /* 圆角 */
    --pxe-radius-sm: 10px;
    --pxe-radius:    12px;
    --pxe-radius-md: 14px;
    --pxe-radius-lg: 18px;
    --pxe-radius-xl: 24px;

    /* 阴影：轻柔、低透明度，像浮在页面上 */
    --pxe-shadow-sm:   0 2px 10px rgba(35, 70, 130, .04);
    --pxe-shadow:      0 4px 20px rgba(35, 70, 130, .05);
    --pxe-shadow-hover:0 8px 28px rgba(35, 70, 130, .09);
    --pxe-shadow-lg:   0 18px 48px rgba(35, 70, 130, .14), 0 4px 12px rgba(35, 70, 130, .06);

    --pxe-nav-h: 72px;

    /* 过渡 */
    --pxe-transition: 180ms ease;

    /* 字体 */
    --pxe-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
    --pxe-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- 基础 ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
    font-family: var(--pxe-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--pxe-text);
    background: var(--pxe-bg);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--pxe-font); color: var(--pxe-text-strong); }

a { transition: color var(--pxe-transition), background-color var(--pxe-transition), border-color var(--pxe-transition); }

code { font-family: var(--pxe-mono); }

::selection { background: var(--pxe-primary-border); color: var(--pxe-text-strong); }

/* 全局细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #DCE1E9; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #C7CEd9; }

/* 键盘可达性：统一的柔和焦点环 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pxe-primary-ring);
}

/* ============================================================
 * 顶部导航栏（macOS 质感：半透明白 + 轻模糊 + 细分隔线）
 * ============================================================ */

/* ------------------------------------------------------------
 * 主导航栏：首帧即固定在浏览器视口顶部，刷新 / 滚动都不跳动
 *
 * 【刷新跳动的真实原因（逐帧实测）】
 *   ace.min.css 的 `.header{margin-top:18px}` 会经 .Ea / .Ea_min
 *   外边距塌陷到 body，使首帧导航位于 y=18；约 10~20ms 后浏览器
 *   恢复上次的滚动位置，sticky 又把导航吸到 y=0 —— 每次刷新都发生
 *   18px 的上下跳动，滚动从顶部开始时也会跳一次。
 *   实测导航高度（桌面 77px / 移动 83px）与宽度在整个加载过程中恒定，
 *   没有 JS 动态设置定位、没有定位类切换、没有字体或 Logo 加载重排、
 *   导航自身没有动画（只有下拉菜单的 180ms 展开动画）。
 *
 * 【修复】首帧 CSS 就把顶部外边距归零，sticky 从第一帧起即贴在 y=0，
 *   滚动与滚动位置恢复都保持 y=0，因此不存在「先显示一个位置再切换」。
 *   仍选 sticky 而不是 fixed：保留文档流高度，主体内容天然避让，
 *   无需全局 padding-top / 占位元素 / 硬编码高度（响应式高度不受影响），
 *   宽度始终等于内容宽度，不会与滚动条宽度产生横向错位；
 *   不含主导航的全屏 IDE 页面完全不受影响。
 * 注意：部分页面模板自身也使用 .Ea 作为主体内容容器，因此必须用
 * .pxe-site-header 精确限定 base_main.html 的导航容器，否则内容容器
 * 也会变成 sticky 并盖住导航（同层级、DOM 靠后者绘制在上）。
 * z-index 沿用 Bootstrap 标准 1030：高于普通内容 / 侧边栏，
 * 低于 modal(1040+)、全站搜索(3000)、通知(9500)、分享弹窗(20000)，
 * 不干扰弹窗与导航内部下拉菜单的层级。
 * ------------------------------------------------------------ */
.Ea.pxe-site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    margin-top: 0;          /* 兜底：任何外边距都不得把导航推离视口顶部 */
    /* 整条导航独立成合成层：滚动时不再与下方内容一起重绘，
       消除 Safari 上 sticky + backdrop-filter 的背景拉伸 / 回缩伪影 */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 顶部导航下方不再留「空下拉带」。
   ace.min.css 的 .header{margin-bottom:16px;padding-bottom:4px;
   border-bottom:1px solid #CCC} 会让 sticky 容器比导航条高 21px：
   这条透明带既像一条没内容的下拉框，滚动时内容还会从导航下方漏出来，
   看起来就是整块内容一直「咣当」。sticky 容器高度必须严格等于导航条。
   呼吸间距改放在主体容器内部（见下方 .con 规则），其它页面复用
   .header 作标题时不受影响。 */
.Ea.pxe-site-header .header {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
/* 导航与主体之间只保留 12px 的紧凑留白；这段留白属于内容容器，
   不再属于 sticky 头部，因此不会随滚动变成半透明空隙。 */
.Ea.pxe-site-header ~ .Ea .con,
.Ea.pxe-site-header ~ .con { padding-top: 12px; }

/* 首帧即固定导航内可变媒体尺寸，避免字体 / 图片加载引起重排 */
.Ea.pxe-site-header .brand-logo { flex: 0 0 38px; width: 38px; height: 38px; }
.Ea.pxe-site-header .navbar-nav img { flex-shrink: 0; }

/* ------------------------------------------------------------
 * 持续往上 / 往下滚时的「拉伸 / 缩进去」：两类根因一起根治
 *
 * ① 根级 overscroll 回弹：macOS 触控板、移动端一直滚到顶或底还继续滚时，
 *    浏览器会把整个页面（含 sticky 导航）拉离视口再弹回，看起来就是导航
 *    被拉长、又缩回去。禁用根滚动容器的 overscroll 链即可消除。
 * ② 滚动条宽度变化：内容变长 → 滚动条出现 → 布局宽度少 8~15px，
 *    导航条以及其中居中的 1440px 容器左右位移，甚至触发菜单换行
 *    （77px ↔ 149px）。上一版写成 html:has(.pxe-site-header){...}，
 *    旧内核（Safari <15.4、Firefox <121、部分国产 Chromium）不支持 :has，
 *    整条规则失效，所以仍然会抖。改为根元素全局生效，并给不支持
 *    scrollbar-gutter 的浏览器用 overflow-y:scroll 兜底（滚动条常驻）。
 *
 * 全屏 IDE 页面在 python_editor/css/editor.css 里把这三属性恢复默认值，
 * 不受常驻滚动条槽与禁止回弹的影响（C++ 编辑器复用该文件）。
 * ------------------------------------------------------------ */
html {
    scrollbar-gutter: stable;
    overscroll-behavior-y: none;
}
body { overscroll-behavior-y: none; }
@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

.navbar {
    min-height: var(--pxe-nav-h);
    margin-bottom: 0;
    border: none;
    /* backdrop-filter 会创建层叠上下文，必须抬高整条导航，
       否则页面内 position:relative 的横幅/内容会盖住下拉菜单 */
    position: relative;
    z-index: 1030;
}
.navbar-default {
    background-color: var(--pxe-nav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: none;
    border-bottom: 1px solid var(--pxe-border);
    box-shadow: 0 1px 2px rgba(35, 70, 130, .03);
}
.header { line-height: normal; }

/* 导航内容与页面主体 .con 对齐：同宽同留白，不顶格 */
.navbar .container-fluid {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}
@media (max-width: 767px) {
    .navbar .container-fluid { padding-left: 12px; padding-right: 12px; }
}

.navbar-default .navbar-brand {
    height: auto;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* 桌面端品牌区与菜单项一致：17px 上下边距在 72px 导航内垂直居中。
   特异度需高于 Bootstrap 的 .navbar > .container-fluid .navbar-brand（margin-left:-15px） */
@media (min-width: 768px) {
    .navbar > .container-fluid .navbar-default .navbar-brand,
    .navbar.navbar-default > .container-fluid .navbar-brand { margin: 17px 0; }
    .navbar.navbar-default > .container-fluid .navbar-brand { margin-left: 0; margin-right: 0; }
    .navbar.navbar-default > .container-fluid .navbar-nav.navbar-right:last-child { margin-right: 0; }
}
/* 品牌标识：蓝色渐变圆角方块 + 白色文件夹图标（参考新版设计图） */
.brand-logo {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #FFFFFF;
    font-size: 18px;
    background: linear-gradient(135deg, #4D9FFF 0%, #1677FF 55%, #2E6BE6 100%);
    box-shadow: 0 4px 12px rgba(22, 119, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.brand-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--pxe-text-strong);
    white-space: nowrap;
    line-height: 1.2;
}
.brand-text small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--pxe-text-3);
    line-height: 1.3;
    letter-spacing: .3px;
}

/* 顶部搜索胶囊（全站搜索入口，行为不变） */
.navbar-nav > li > a.gs-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 17px 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--pxe-surface-2);
    border: 1px solid var(--pxe-border);
    color: var(--pxe-text-3);
    font-size: 13px;
    line-height: 20px;
    min-width: 200px;
}
.navbar-nav > li > a.gs-nav-btn i { color: var(--pxe-text-3); margin: 0; font-size: 13px; }
.navbar-nav > li > a.gs-nav-btn .gs-nav-text { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-nav > li > a.gs-nav-btn .gs-kbd {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--pxe-text-3);
    background: #FFFFFF;
    border: 1px solid var(--pxe-border);
    border-radius: 6px;
    padding: 0 5px;
    line-height: 16px;
}
.navbar-nav > li > a.gs-nav-btn:hover,
.navbar-nav > li > a.gs-nav-btn:focus {
    background: #FFFFFF;
    border-color: var(--pxe-primary-border);
    color: var(--pxe-text-2);
    box-shadow: var(--pxe-shadow-sm);
}
.navbar-nav > li > a.gs-nav-btn:hover i { color: var(--pxe-primary); }
@media (max-width: 1160px) {
    .navbar-nav > li > a.gs-nav-btn { min-width: 0; }
    .navbar-nav > li > a.gs-nav-btn .gs-nav-text,
    .navbar-nav > li > a.gs-nav-btn .gs-kbd { display: none; }
}

/* 桌面端：菜单项做成柔和胶囊，选中为浅蓝圆角背景 */
@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding: 9px 14px;
        margin: 17px 3px;
        border-radius: var(--pxe-radius-sm);
        color: var(--pxe-text-2);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        transition: background var(--pxe-transition), color var(--pxe-transition);
    }
    .navbar-nav > li > a i { margin-right: 5px; font-size: 14px; color: var(--pxe-text-3); transition: color var(--pxe-transition); }
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
        color: var(--pxe-text-strong);
        background: var(--pxe-surface-2);
    }
    .navbar-default .navbar-nav > li > a:hover i { color: var(--pxe-text-2); }

    /* 当前页面（由 base_main.js 路径匹配添加 active-nav） */
    .navbar-default .navbar-nav > li.active-nav > a,
    .navbar-default .navbar-nav > li.active-nav > a:hover,
    .navbar-default .navbar-nav > li.active-nav > a:focus {
        color: var(--pxe-primary);
        background: var(--pxe-primary-soft);
    }
    .navbar-default .navbar-nav > li.active-nav > a i { color: var(--pxe-primary); }

    /* 下拉箭头弱化 */
    .navbar-nav > li > a .caret { margin-left: 4px; border-top-color: #C4CAD3; }
    .navbar-nav > li > a:hover .caret,
    .navbar-default .navbar-nav > .open > a .caret { border-top-color: currentColor; }

    /* 打开的下拉菜单项保持高亮 */
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        color: var(--pxe-text-strong);
        background: var(--pxe-surface-2);
    }
}

/* 未读徽标（消息 / 好友申请） */
.nav-badge {
    display: inline-block;
    min-width: 17px;
    padding: 0 5px;
    margin-left: 2px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background: #EF4444;
    border-radius: 999px;
    vertical-align: 2px;
}

/* 导航栏用户头像 */
.navbar-nav > li > a .user-nav-avatar,
.navbar-nav > li > a img[src*="avatar"] {
    border-radius: 50%;
    margin-right: 2px;
}

/* 移动端汉堡按钮 */
.navbar-default .navbar-toggle {
    border: none;
    margin-top: 19px;
    margin-bottom: 19px;
    border-radius: var(--pxe-radius-sm);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: var(--pxe-surface-2); }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--pxe-text-2); }
.navbar-collapse { border-top: none; box-shadow: none; }
@media (max-width: 767px) {
    .navbar-collapse {
        background: #FFFFFF;
        border-bottom: 1px solid var(--pxe-border);
        box-shadow: var(--pxe-shadow);
        border-radius: 0 0 var(--pxe-radius-md) var(--pxe-radius-md);
        padding: 6px 10px 10px;
    }
    .navbar-nav > li > a { border-radius: var(--pxe-radius-sm); }
}

/* 未登录访客：右上角「登录 / 注册」主按钮 */
.navbar-nav > li.nav-guest-login > a.nav-login-btn,
.navbar-nav > li.nav-guest-login > a.nav-login-btn:hover,
.navbar-nav > li.nav-guest-login > a.nav-login-btn:focus {
    color: #FFFFFF;
    background: var(--pxe-primary);
    border: 1px solid var(--pxe-primary);
    border-radius: var(--pxe-radius-sm);
}
.navbar-nav > li.nav-guest-login > a.nav-login-btn:hover,
.navbar-nav > li.nav-guest-login > a.nav-login-btn:focus {
    background: var(--pxe-primary-strong);
    border-color: var(--pxe-primary-strong);
    box-shadow: 0 4px 14px rgba(22, 119, 255, .28);
}
.navbar-nav > li.nav-guest-login > a.nav-login-btn i { color: #FFFFFF; margin-right: 4px; }
.nav-login-mobile { display: none; }
@media (min-width: 768px) {
    .navbar-nav > li.nav-guest-login { padding: 0 0 0 8px; }
    .navbar-nav > li.nav-guest-login > a.nav-login-btn {
        margin: 17px 0;
        padding: 8px 18px;
        font-size: 14px;
        line-height: 20px;
    }
}
@media (max-width: 767px) {
    .navbar-nav > li.nav-guest-login { display: none; }
    .nav-login-mobile {
        display: inline-block;
        float: right;
        margin: 16px 4px 0 0;
        padding: 6px 15px;
        font-size: 13.5px;
        line-height: 20px;
        color: #FFFFFF;
        background: var(--pxe-primary);
        border: 1px solid var(--pxe-primary);
        border-radius: var(--pxe-radius-sm);
    }
    .nav-login-mobile:hover,
    .nav-login-mobile:focus {
        color: #FFFFFF;
        background: var(--pxe-primary-strong);
        border-color: var(--pxe-primary-strong);
        text-decoration: none;
    }
}

/* ============================================================
 * 按钮（覆盖 bootstrap btn）
 * ============================================================ */
.btn {
    border-radius: var(--pxe-radius-sm);
    font-weight: 500;
    font-family: var(--pxe-font);
    transition: background-color var(--pxe-transition), border-color var(--pxe-transition),
                color var(--pxe-transition), box-shadow var(--pxe-transition), transform 120ms ease;
}
.btn:active, .btn.active { box-shadow: none; transform: scale(.98); }

.btn-default {
    color: var(--pxe-text);
    background: #FFFFFF;
    border-color: var(--pxe-border);
}
.btn-default:hover, .btn-default:focus,
.btn-default:active, .btn-default.active {
    color: var(--pxe-text-strong);
    background: var(--pxe-surface-2);
    border-color: #D9DFE9;
}

.btn-primary {
    color: #FFFFFF;
    background: var(--pxe-primary);
    border-color: var(--pxe-primary);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:active, .btn-primary.active {
    color: #FFFFFF;
    background: var(--pxe-primary-strong);
    border-color: var(--pxe-primary-strong);
}
.btn-primary[disabled]:hover, .btn-primary.disabled:hover { background: var(--pxe-primary); }

.btn-danger {
    color: #FFFFFF;
    background: var(--pxe-danger);
    border-color: var(--pxe-danger);
}
.btn-danger:hover, .btn-danger:focus,
.btn-danger:active, .btn-danger.active {
    color: #FFFFFF;
    background: var(--pxe-danger-strong);
    border-color: var(--pxe-danger-strong);
}

.btn-sm, .btn-group-sm > .btn { padding: 5px 12px; font-size: 13px; border-radius: var(--pxe-radius-sm); }
.btn .icon-caret, .btn .caret { margin-left: 3px; }

/* ============================================================
 * 表单控件
 * ============================================================ */
.form-control {
    border-color: var(--pxe-border);
    border-radius: var(--pxe-radius-sm);
    box-shadow: none;
    font-family: var(--pxe-font);
    color: var(--pxe-text);
    transition: border-color var(--pxe-transition), box-shadow var(--pxe-transition);
}
.form-control:focus {
    border-color: var(--pxe-primary);
    box-shadow: 0 0 0 3px var(--pxe-primary-ring);
}
.form-control::placeholder { color: var(--pxe-text-3); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--pxe-primary); cursor: pointer; }

/* ============================================================
 * 下拉菜单（淡入 + 轻位移）
 * ============================================================ */
.dropdown-menu {
    border: 1px solid var(--pxe-border);
    border-radius: var(--pxe-radius);
    box-shadow: var(--pxe-shadow-lg);
    padding: 6px;
    font-size: 13px;
    -webkit-background-clip: padding-box;
    animation: pxe-menu-in 180ms ease;
    transform-origin: top center;
}
@keyframes pxe-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-menu > li > a {
    padding: 8px 11px;
    border-radius: 8px;
    color: var(--pxe-text);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--pxe-primary-soft);
    color: var(--pxe-primary);
}
.dropdown-menu .divider { margin: 6px 4px; background: var(--pxe-border-soft); }
.dropdown-menu > li > a i { margin-right: 6px; color: var(--pxe-text-3); }
.dropdown-menu > li > a:hover i { color: var(--pxe-primary); }

/* ============================================================
 * 弹窗（Bootstrap modal）：白底大圆角 + 缩放进入
 * ============================================================ */
.modal-content {
    border: none;
    border-radius: var(--pxe-radius-lg);
    box-shadow: var(--pxe-shadow-lg);
}
.modal-backdrop.in { opacity: .4; }
.modal.in .modal-dialog {
    animation: pxe-modal-in 220ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes pxe-modal-in {
    from { opacity: 0; transform: translate(0, -14px) scale(.98); }
    to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
.modal-header { border-bottom: 1px solid var(--pxe-border-soft); padding: 18px 22px 14px; }
.modal-header .modal-title { font-size: 17px; font-weight: 600; }
.modal-body { padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--pxe-border-soft); padding: 14px 22px 18px; }
.modal-footer .btn { min-width: 88px; }

/* ============================================================
 * 通用表格（未使用 #fileTable 专属样式的页面）
 * ============================================================ */
.table { margin-bottom: 0; }
.table > thead > tr > th {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .4px;
    color: var(--pxe-text-2);
    background: var(--pxe-surface-2);
    border-bottom: 1px solid var(--pxe-border);
    padding: 11px 14px;
}
.table > tbody > tr > td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pxe-border-soft);
    color: var(--pxe-text);
    font-size: 13.5px;
    vertical-align: middle;
}
.table > tbody > tr:hover > td { background: #FAFBFD; }

/* ============================================================
 * 标签 / 状态徽标（Bootstrap label 轻量化）
 * ============================================================ */
.label {
    font-weight: 500;
    padding: .25em .7em;
    border-radius: 999px;
}
.label-primary { background: var(--pxe-primary-soft); color: var(--pxe-primary); }
.label-success { background: var(--pxe-success-soft); color: #1F7A4D; }
.label-warning { background: var(--pxe-warning-soft); color: #B26E00; }
.label-danger  { background: var(--pxe-danger-soft); color: var(--pxe-danger); }
.label-default { background: #EEF1F6; color: var(--pxe-text-2); }

/* ============================================================
 * 提示条（alert）轻量化
 * ============================================================ */
.alert {
    border-radius: var(--pxe-radius);
    border: 1px solid transparent;
    padding: 12px 16px;
    font-size: 13.5px;
}
.alert-danger  { background: var(--pxe-danger-soft); border-color: #F7D4D4; color: #A93236; }
.alert-success { background: var(--pxe-success-soft); border-color: #C9EBD8; color: #1F7A4D; }
.alert-warning { background: var(--pxe-warning-soft); border-color: #F5E3BC; color: #A26A00; }
.alert-info    { background: var(--pxe-primary-soft); border-color: var(--pxe-primary-border); color: #1358C7; }

/* ============================================================
 * 面板 / 卡片（panel 轻量化为卡片）
 * ============================================================ */
.panel {
    border: 1px solid var(--pxe-border);
    border-radius: var(--pxe-radius-md);
    box-shadow: var(--pxe-shadow-sm);
    background: var(--pxe-card);
}
.panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--pxe-border-soft);
    padding: 14px 18px;
    font-weight: 600;
}
.panel-body { padding: 18px; }
.panel-default > .panel-heading { background: transparent; color: var(--pxe-text-strong); }

/* ============================================================
 * 全局浮层：默认过期时间设置（#divTop / #divTop_up）
 * ============================================================ */
#divTop, #divTop_up {
    background: #FFFFFF;
    border: 1px solid var(--pxe-border);
    border-radius: var(--pxe-radius-lg);
    box-shadow: var(--pxe-shadow-lg);
    padding: 4px 22px 22px;
    min-height: 0;
}
.divTop_top {
    margin: 16px 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--pxe-text-strong);
    text-align: left;
}
.divTop_mid { text-align: left; font-size: 13px; color: var(--pxe-text-2); margin: 0 0 14px; }
.divTop_mid strong { color: var(--pxe-primary); }
#divTop .form-horizontal, #divTop_up .form-horizontal { text-align: left; }
#divTop input[type="text"], #divTop_up input[type="text"] {
    height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--pxe-border);
    border-radius: var(--pxe-radius-sm);
    outline: none;
    width: 140px;
    color: var(--pxe-text);
}
#divTop input[type="text"]:focus, #divTop_up input[type="text"]:focus {
    border-color: var(--pxe-primary);
    box-shadow: 0 0 0 3px var(--pxe-primary-ring);
}
.config_file_time_all { margin-left: 10px !important; font-size: 13px; font-weight: 500; color: var(--pxe-primary) !important; }

/* ============================================================
 * 动效偏好：减少动态效果
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* 中等宽度：收紧导航间距，防止换行 */
@media (min-width: 768px) and (max-width: 1400px) {
    .navbar-nav > li > a {
        padding: 9px 10px;
        margin: 17px 1px;
        font-size: 13.5px;
    }
    .navbar-nav > li > a.gs-nav-btn { min-width: 170px; padding: 8px 12px; }
    .navbar-default .navbar-brand img,
    .brand-text { margin-top: 0; }
}
/* 搜索胶囊在 1366px 以上才展开成带文字的长条。此前阈值是 1200px，
   在 1201~1320px 管理员（多「回收站 / 后台管理」两项）会被 170px 的
   搜索框挤成两行，导航高度 77↔149px 反复切换，整页内容跟着跳动。 */
@media (min-width: 768px) and (max-width: 1365px) {
    .navbar-nav > li > a.gs-nav-btn { min-width: 0; }
    .navbar-nav > li > a.gs-nav-btn .gs-nav-text,
    .navbar-nav > li > a.gs-nav-btn .gs-kbd { display: none; }
}

/* ------------------------------------------------------------
 * 桌面导航「单行稳定」：菜单永不掉到第二行，下拉永不推动内容
 *
 * Bootstrap 3 用 float 排导航，宽度一不够就把右侧菜单整块折到下一行；
 * 改为 flex-nowrap 后，宽度不够时由下面的分级收紧规则处理，而不是
 * 让导航变高 72px 把整页内容往下推（用户反馈的「一直咣当」）。
 * 下拉菜单明确为绝对定位浮层，展开时只覆盖内容、不占文档流高度。
 * ------------------------------------------------------------ */
@media (min-width: 768px) {
    .navbar > .container-fluid {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    .navbar > .container-fluid > .navbar-header {
        float: none;
        flex: 0 0 auto;
    }
    .navbar > .container-fluid > .navbar-collapse {
        float: none;
        flex: 1 1 auto;
        min-width: 0;
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        height: auto;
    }
    .navbar-collapse > .navbar-nav {
        float: none;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        min-width: 0;
        margin: 0;
    }
    .navbar-collapse > .navbar-nav.navbar-right {
        float: none;
        margin-left: auto;
        margin-right: 0;
        flex: 0 1 auto;
    }
    .navbar-collapse .navbar-nav > li {
        float: none;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .navbar-collapse .navbar-nav > li > a { white-space: nowrap; }
    .navbar-collapse .navbar-nav > li.nav-search { flex: 0 1 auto; min-width: 0; }
    .navbar-collapse .navbar-nav > li.nav-search > a.gs-nav-btn { max-width: 100%; }
    /* 下拉菜单始终浮在内容之上：展开 / 收起都不改变导航与内容的位置 */
    .navbar-collapse .navbar-nav > li > .dropdown-menu {
        position: absolute;
        top: 100%;
        float: none;
        margin-top: 4px;
        max-width: min(320px, calc(100vw - 24px));
    }
}

/* 1200px 以下的桌面：把与用户菜单重复的次级入口收到用户菜单里，
   保证「首页 / 编程工具库 / 搜索 / 设置 / 账户」这一行始终单行。
   这些链接在用户下拉菜单里都仍然可达（回收站亦已补入）。 */
@media (min-width: 768px) and (max-width: 1200px) {
    .navbar-collapse .navbar-nav > li.nav-secondary { display: none; }
}

/* ---------- 用户菜单：分组标题 + 当前页状态 ---------- */
.pxe-user-menu .dropdown-header {
    padding: 7px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--pxe-text-3, #98a2b3);
    white-space: nowrap;
}
.pxe-user-menu > li.is-current > a {
    position: relative;
    background: #F0F6FF;
    color: var(--pxe-primary, #1677FF);
    font-weight: 600;
}
.pxe-user-menu > li.is-current > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--pxe-primary, #1677FF);
}
.pxe-user-menu > li.is-current > a i { color: var(--pxe-primary, #1677FF); }