/* =====================================================================
   Foxynred 后台样式（Layui 2.8 之上的定制层）
   ---------------------------------------------------------------------
   版式：顶栏 + 左侧菜单 + 多标签页 + 面包屑 + iframe 内容区
   品牌色取自 logo 的橙红渐变 #ff8a3d → #f5453a
   想换成纯蓝（跟常见后台模板一致）：把 --fx-primary / --fx-primary-2
   改成 #2b7de9 / #4b9bff，并把 --fx-primary-soft 换成 rgba(43,125,233,.08)
   ===================================================================== */

:root {
    /* 品牌色 */
    --fx-primary: #f5453a;
    --fx-primary-2: #ff8a3d;
    --fx-primary-soft: rgba(245, 69, 58, .075);
    --fx-primary-line: rgba(245, 69, 58, .22);

    /* 语义色 */
    --fx-info: #2b7de9;
    --fx-success: #16a34a;
    --fx-warn: #d97706;
    --fx-danger: #e5455f;

    /* 文本 */
    --fx-text: #1f2430;
    --fx-text-2: #5b6472;
    --fx-text-3: #97a0ad;

    /* 面 / 线 */
    --fx-bg: #f4f6fa;
    --fx-card: #ffffff;
    --fx-border: #e9ecf2;
    --fx-border-2: #dfe3eb;
    --fx-head-bg: #f7f8fa;

    /* 尺寸 */
    --fx-header-h: 56px;
    --fx-side-w: 220px;
    --fx-side-w-mini: 60px;
    --fx-tabbar-h: 44px;
    --fx-crumb-h: 42px;

    --fx-radius: 10px;
    --fx-shadow: 0 1px 2px rgba(31, 36, 48, .04), 0 2px 10px rgba(31, 36, 48, .045);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 14px;
    color: var(--fx-text);
    background: var(--fx-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--fx-primary); text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d3d8e0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #bfc6d1; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   1. 框架
   ===================================================================== */

.fx-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--fx-header-h);
    display: flex;
    align-items: center;
    background: var(--fx-card);
    border-bottom: 1px solid var(--fx-border);
    z-index: 1000;
}

.fx-logo {
    width: var(--fx-side-w);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    flex: none;
    border-right: 1px solid var(--fx-border);
    transition: width .18s ease, padding .18s ease;
}

.fx-logo img {
    width: 30px; height: 30px;
    border-radius: 9px;
    object-fit: cover;
    flex: none;
}

.fx-logo span {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fx-text);
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
}

.fx-header-mid {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 10px;
}

.fx-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 18px;
}

/* 顶栏圆形图标按钮 */
.fx-ico-btn {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fx-text-2);
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex: none;
}

.fx-ico-btn:hover { background: #f1f3f8; color: var(--fx-text); }
.fx-ico-btn.fx-ico-sm { width: 28px; height: 28px; font-size: 14px; }
.fx-ico-btn.is-on { background: var(--fx-primary-soft); color: var(--fx-primary); }

/* 用户区 */
.fx-user {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 4px;
    margin-left: 4px;
    border-radius: 20px;
    cursor: pointer;
    color: var(--fx-text-2);
    font-size: 13.5px;
    transition: background .15s;
}

.fx-user:hover { background: #f1f3f8; }

.fx-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: #eef1f6;
}

.fx-user > i { font-size: 12px; color: var(--fx-text-3); }

.fx-user-menu {
    position: fixed;
    top: calc(var(--fx-header-h) - 6px);
    right: 16px;
    min-width: 148px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(31, 36, 48, .13);
    display: none;
    z-index: 1200;
}

.fx-user-menu.show { display: block; }

.fx-user-menu li {
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--fx-text-2);
    border-radius: 7px;
    cursor: pointer;
}

.fx-user-menu li:hover { background: #f4f6fa; color: var(--fx-text); }
.fx-user-menu li i { margin-right: 8px; font-size: 14px; }

/* =====================================================================
   2. 左侧菜单
   ===================================================================== */

.fx-side {
    position: fixed;
    top: var(--fx-header-h);
    left: 0; bottom: 0;
    width: var(--fx-side-w);
    background: var(--fx-card);
    border-right: 1px solid var(--fx-border);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 900;
    transition: width .18s ease;
}

.fx-menu-search {
    position: relative;
    padding: 12px 14px 6px;
}

.fx-menu-search > i {
    position: absolute;
    left: 25px; top: 50%;
    transform: translateY(-8%);
    font-size: 14px;
    color: var(--fx-text-3);
}

.fx-menu-search input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: #f7f8fb;
    font-size: 13px;
    color: var(--fx-text);
    outline: none;
    transition: border-color .15s, background .15s;
}

.fx-menu-search input::placeholder { color: var(--fx-text-3); }

.fx-menu-search input:focus {
    border-color: var(--fx-primary-line);
    background: #fff;
}

.fx-menu {
    list-style: none;
    margin: 0;
    padding: 6px 0 24px;
}

.fx-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 16px;
    color: var(--fx-text-2);
    font-size: 14px;
    cursor: pointer;
    position: relative;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.fx-menu a > .layui-icon:first-child {
    font-size: 16px;
    color: var(--fx-text-3);
    flex: none;
    transition: color .15s;
}

.fx-menu a:hover { background: #f6f8fc; color: var(--fx-text); }
.fx-menu a:hover > .layui-icon:first-child { color: var(--fx-text-2); }

.fx-menu .fx-arrow {
    margin-left: auto;
    font-size: 12px !important;
    color: var(--fx-text-3) !important;
    transition: transform .2s;
}

.fx-menu-group.open > .fx-menu-title { color: var(--fx-text); }
.fx-menu-group.open > .fx-menu-title > .layui-icon:first-child { color: var(--fx-primary); }
.fx-menu-group.open > .fx-menu-title .fx-arrow { transform: rotate(180deg); }

.fx-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
}

.fx-menu-group.open > .fx-submenu { max-height: 640px; }

.fx-submenu a {
    height: 38px;
    padding-left: 42px;
    font-size: 13.5px;
}

.fx-submenu a::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background .15s;
}

.fx-submenu a:hover { background: #f6f8fc; }

.fx-submenu a.active {
    background: var(--fx-primary-soft);
    color: var(--fx-primary);
    font-weight: 500;
}

.fx-submenu a.active::before { background: var(--fx-primary); }

/* 一级（无子菜单）菜单项选中态 */
.fx-menu-leaf a.active {
    background: var(--fx-primary-soft);
    color: var(--fx-primary);
    font-weight: 500;
}

.fx-menu-leaf a.active > .layui-icon:first-child { color: var(--fx-primary); }

.fx-menu-leaf a.active::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--fx-primary);
}

/* 折叠（mini）态 */
.fx-layout.fx-mini .fx-logo { width: var(--fx-side-w-mini); padding: 0; justify-content: center; }
.fx-layout.fx-mini .fx-logo span { display: none; }
.fx-layout.fx-mini .fx-side { width: var(--fx-side-w-mini); }
.fx-layout.fx-mini .fx-main { margin-left: var(--fx-side-w-mini); }
.fx-layout.fx-mini .fx-menu-search { display: none; }
.fx-layout.fx-mini .fx-menu a > span,
.fx-layout.fx-mini .fx-menu a > .fx-arrow { display: none; }
.fx-layout.fx-mini .fx-menu a { justify-content: center; padding: 0; }
.fx-layout.fx-mini .fx-submenu { display: none; }

/* =====================================================================
   3. 内容区：标签栏 / 面包屑 / iframe
   ===================================================================== */

.fx-main {
    margin-left: var(--fx-side-w);
    padding-top: var(--fx-header-h);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .18s ease;
}

.fx-tabbar {
    height: var(--fx-tabbar-h);
    flex: none;
    display: flex;
    align-items: stretch;
    background: var(--fx-card);
    border-bottom: 1px solid var(--fx-border);
    padding: 0 8px 0 6px;
}

.fx-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none;
}

.fx-tabs::-webkit-scrollbar { display: none; }

.fx-tabs li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    height: var(--fx-tabbar-h);
    font-size: 13.5px;
    color: var(--fx-text-2);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, background .15s;
}

.fx-tabs li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ccd3de;
    flex: none;
    transition: background .15s;
}

.fx-tabs li:hover { background: #f7f8fb; color: var(--fx-text); }

.fx-tabs li.active {
    color: var(--fx-primary);
    border-bottom-color: var(--fx-primary);
    font-weight: 500;
}

.fx-tabs li.active::before { background: var(--fx-primary); }

.fx-tabs li .fx-tab-close {
    font-size: 12px;
    color: var(--fx-text-3);
    border-radius: 50%;
    width: 16px; height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}

.fx-tabs li .fx-tab-close:hover { background: #e7eaf1; color: var(--fx-text); }

.fx-tabbar-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 8px;
    flex: none;
}

.fx-crumb {
    height: var(--fx-crumb-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--fx-card);
    border-bottom: 1px solid var(--fx-border);
    font-size: 13.5px;
    color: var(--fx-text-2);
}

.fx-crumb-home { color: var(--fx-text-2); }
.fx-crumb-sep { font-size: 12px; color: var(--fx-text-3); }
.fx-crumb-cur { color: var(--fx-text); font-weight: 500; }
.fx-crumb-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.fx-frame-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
}

.fx-frame-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =====================================================================
   4. 内容页通用组件（iframe 内页面使用）
   ===================================================================== */

.fx-page { padding: 16px; }

.fx-card {
    background: var(--fx-card);
    border-radius: var(--fx-radius);
    padding: 18px 20px;
    box-shadow: var(--fx-shadow);
    margin-bottom: 16px;
}

.fx-card:last-child { margin-bottom: 0; }

.fx-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.fx-card-head .fx-card-title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fx-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fx-card-head .fx-card-title > i { color: var(--fx-primary); font-size: 16px; }
.fx-card-head .fx-card-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.fx-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--fx-text);
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 3px solid var(--fx-primary);
}

/* 提示条 */
.fx-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 13px;
    margin: 0 0 14px;
    background: #fff9ec;
    border: 1px solid #ffe4b8;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.8;
    color: #9a6b16;
}

.fx-tip > i { color: var(--fx-warn); font-size: 14px; margin-top: 3px; flex: none; }

.fx-tip.fx-tip-info {
    background: #f0f7ff;
    border-color: #cfe4ff;
    color: #2a6bb8;
}
.fx-tip.fx-tip-info > i { color: var(--fx-info); }

/* 搜索区：左树 + 右统计/表单 */
.fx-filter {
    display: flex;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    margin-bottom: 14px;
    /* 千万不能加 overflow:hidden —— 侧栏的下拉面板（layui select 生成的 dl）
       是绝对定位在侧栏内部的，会被这里裁掉，表现就是「点开只有箭头翻转、看不到选项」。
       两个子栏都是透明背景，本来也不需要靠裁剪来收圆角。 */
}

.fx-filter-side {
    width: 226px;
    flex: none;
    border-right: 1px solid var(--fx-border);
    padding: 12px 0;
}

.fx-filter-side-head {
    display: flex;
    align-items: center;
    padding: 0 14px 10px;
    font-size: 13px;
    color: var(--fx-text-3);
}

.fx-filter-side-head .fx-filter-side-refresh {
    margin-left: auto;
    cursor: pointer;
    font-size: 13px;
}
.fx-filter-side-head .fx-filter-side-refresh:hover { color: var(--fx-primary); }

/* 侧栏里的筛选下拉（原先是常驻竖排列表 .fx-tree，改为 select 后由 layui 美化） */
.fx-filter-side-body { padding: 0 14px; }
.fx-filter-side-body .layui-form-select { width: 100%; }
.fx-filter-side-body .layui-form-select .layui-input { height: 34px; line-height: 34px; }

.fx-tree { list-style: none; margin: 0; padding: 0; }

.fx-tree li {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    font-size: 13.5px;
    color: var(--fx-text-2);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.fx-tree li:hover { background: #f6f8fc; color: var(--fx-text); }
.fx-tree li.active { background: var(--fx-primary-soft); color: var(--fx-primary); font-weight: 500; }
.fx-tree li .fx-tree-count { margin-left: auto; font-size: 12px; color: var(--fx-text-3); }
.fx-tree li.active .fx-tree-count { color: var(--fx-primary); }

.fx-filter-main {
    flex: 1;
    min-width: 0;
    padding: 13px 14px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
}

/* 搜索表单展开时占满整行 */
.fx-filter-main .fx-statline { padding-top: 6px; }

.fx-statline {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 13.5px;
    color: var(--fx-text-2);
    flex-wrap: wrap;
}

.fx-statline b {
    font-size: 15px;
    font-weight: 600;
    color: var(--fx-info);
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

.fx-filter-form { flex: 1; min-width: 0; }
.fx-filter-form[hidden] { display: none; }

.fx-pill {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--fx-border-2);
    border-radius: 16px;
    background: #fff;
    color: var(--fx-text-2);
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}

.fx-pill:hover { border-color: var(--fx-primary-line); color: var(--fx-primary); }
.fx-pill > i { font-size: 12px; transition: transform .2s; }
.fx-pill.open > i { transform: rotate(180deg); }

/* 工具条 */
.fx-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fx-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }

/* 黑色方块（列配置）按钮 */
.fx-btn-col {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: #232a35;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s;
}

.fx-btn-col:hover { background: #39424f; }

/* 表格里的操作链接 */
.fx-op { display: inline-flex; align-items: center; gap: 12px; }
.fx-op a { font-size: 13px; cursor: pointer; }
.fx-op a.is-primary { color: var(--fx-info); }
.fx-op a.is-danger { color: var(--fx-danger); }
.fx-op a.is-muted { color: var(--fx-text-2); }
.fx-op a:hover { opacity: .78; }

/* 头像 + 文字 单元格 */
.fx-cell-user { display: flex; align-items: center; gap: 9px; }
.fx-cell-user img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #eef1f6; flex: none; }
.fx-cell-user a { color: var(--fx-info); }

/* 无头像时用首字母圆形色块兜底 */
.fx-avatar-txt {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    flex: none;
    text-transform: uppercase;
}

/* 状态徽标 */
.fx-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 20px;
    font-size: 12px;
    line-height: 19px;
}

.fx-badge-ok { background: #e8f8ef; color: var(--fx-success); }
.fx-badge-no { background: #fdeceb; color: #d9453a; }
.fx-badge-off { background: #f1f3f7; color: var(--fx-text-2); }
.fx-badge-warn { background: #fff4e5; color: var(--fx-warn); }

.fx-empty { color: var(--fx-text-3); font-size: 13px; padding: 30px 0; text-align: center; }

/* 看板统计卡 */
.fx-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.fx-stat-grid .fx-card { margin-bottom: 0; }

.fx-stat label {
    display: block;
    font-size: 12.5px;
    color: var(--fx-text-3);
    margin-bottom: 8px;
}

.fx-stat b {
    font-size: 24px;
    font-weight: 600;
    color: var(--fx-text);
    font-variant-numeric: tabular-nums;
}

.fx-stat .fx-unit { font-size: 13px; color: var(--fx-text-3); margin-left: 3px; font-weight: 400; }
.fx-stat-accent b { color: var(--fx-primary); }

.fx-trend { display: flex; align-items: flex-end; gap: 14px; height: 190px; padding: 8px 4px 0; }
.fx-trend-item { flex: 1; text-align: center; }
.fx-bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 140px; }
.fx-bar { width: 14px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--fx-primary-2), var(--fx-primary)); }
.fx-bar.fx-bar-scan { background: linear-gradient(180deg, #7cb8ff, #4b83f0); }
.fx-trend-item span { display: block; margin-top: 8px; font-size: 12px; color: var(--fx-text-3); }

/* =====================================================================
   5. Layui 组件覆盖
   ===================================================================== */

/* 按钮 */
.layui-btn {
    background-color: var(--fx-primary);
    border-radius: 6px;
}

.layui-btn:hover { opacity: .9; color: #fff; }

.layui-btn.layui-btn-primary {
    background: #fff;
    border: 1px solid var(--fx-border-2);
    color: var(--fx-text-2);
}

.layui-btn.layui-btn-primary:hover { border-color: var(--fx-primary-line); color: var(--fx-primary); }

.fx-btn-rose { background-color: var(--fx-danger); }
.fx-btn-gray { background-color: #6b7280; }

.layui-btn .layui-icon { margin-right: 4px; font-size: 13px; }

/* 表格 */
.layui-table-view { border: 1px solid var(--fx-border); border-radius: 8px; overflow: hidden; margin: 0; }

/* 列很多时限制在卡片内横向滚动，不要撑破卡片 */
.fx-card .layui-table-view,
.fx-card .layui-table-box { max-width: 100%; }

.layui-table-view .layui-table th,
.layui-table-view .layui-table td { font-size: 13.5px; }

.layui-table-view .layui-table th {
    background: var(--fx-head-bg);
    color: var(--fx-text-2);
    font-weight: 500;
}

.layui-table-view .layui-table td { color: var(--fx-text); }

.layui-table-view .layui-table tbody tr:hover,
.layui-table-view .layui-table-hover { background: #fafbfd; }

.layui-table-cell { height: 42px; line-height: 42px; }

.layui-table-tool-self .layui-table-tool-panel { border-radius: 8px; }

/* 分页 */
.layui-table-page { border-top: 1px solid var(--fx-border); }

.layui-laypage a,
.layui-laypage span,
.layui-laypage input,
.layui-laypage button,
.layui-laypage select {
    border-radius: 6px;
    font-size: 13px;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
    border-radius: 6px;
    background-color: var(--fx-primary);
}

.layui-laypage button,
.layui-laypage input { border-color: var(--fx-border-2); }

/* 内层 tab */
.fx-subtab.layui-tab { margin: 0 0 12px; }
.fx-subtab .layui-tab-title { border-bottom-color: var(--fx-border); }
.fx-subtab .layui-tab-title li { font-size: 14px; color: var(--fx-text-2); }
.fx-subtab .layui-tab-title .layui-this { color: var(--fx-primary); font-weight: 500; }
.fx-subtab .layui-tab-title .layui-this::after { border-bottom: 2px solid var(--fx-primary); }

/* 表单 */
.layui-input, .layui-select, .layui-textarea { border-radius: 6px; border-color: var(--fx-border-2); }
.layui-input:focus, .layui-textarea:focus { border-color: var(--fx-primary-line) !important; box-shadow: 0 0 0 3px var(--fx-primary-soft); }
.layui-form-label { font-size: 13.5px; color: var(--fx-text-2); }

.layui-inline { margin-right: 14px; margin-bottom: 10px; }
.layui-form .layui-inline > label { font-size: 13px; color: var(--fx-text-2); margin-right: 6px; }

/* 弹层 */
.layui-layer { border-radius: 10px; }
.layui-layer-title { font-size: 14.5px; font-weight: 500; }

/* =====================================================================
   6. 登录页
   ===================================================================== */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff4ec 0%, #f7f9fc 45%, #eef3fb 100%);
}

.login-wrap {
    width: 380px;
    padding: 36px 34px 22px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(31, 36, 48, .12);
}

.login-brand { text-align: center; margin-bottom: 26px; }

.login-logo {
    width: 76px; height: 76px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(245, 69, 58, .22);
}

.login-brand h1 { margin: 14px 0 6px; font-size: 20px; font-weight: 600; color: var(--fx-text); }
.login-brand p { margin: 0; font-size: 12px; color: var(--fx-text-3); letter-spacing: .5px; }

.login-field { position: relative; margin-bottom: 16px; }

.login-field > i {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: #b9bfcc;
    font-size: 16px;
}

.login-field .layui-input {
    height: 46px;
    padding-left: 40px;
    border-radius: 10px;
    border-color: var(--fx-border);
    background: #fbfcfe;
}

.login-field .layui-input:focus {
    border-color: var(--fx-primary-2) !important;
    box-shadow: 0 0 0 3px rgba(255, 138, 61, .12);
}

.login-field-code .layui-input { padding-right: 118px; }

.captcha-img {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    height: 38px; width: 106px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--fx-border);
    background: #fafbfd;
}

.login-btn {
    height: 46px;
    border-radius: 10px;
    font-size: 15px;
    letter-spacing: 3px;
    background: linear-gradient(135deg, var(--fx-primary-2), var(--fx-primary));
    border: none;
}

.login-btn:hover { opacity: .92; }

.login-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 12px;
    color: #a9b0bd;
}

/* =====================================================================
   7. 安装向导
   ===================================================================== */

.install-page {
    min-height: 100vh;
    padding: 34px 16px 60px;
    background: linear-gradient(160deg, #eef4ff 0%, #f7f9fc 40%, #fff6f0 100%);
}

.install-wrap { max-width: 860px; margin: 0 auto; }

.install-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.install-head .login-logo { width: 60px; height: 60px; border-radius: 14px; }
.install-head h1 { margin: 0 0 4px; font-size: 20px; color: var(--fx-text); }
.install-head p { margin: 0; font-size: 12.5px; color: var(--fx-text-2); }

.install-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 3px 14px rgba(31, 36, 48, .06);
}

.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.install-grid .layui-form-label { width: 92px; padding-left: 0; text-align: left; }
.install-grid .layui-input-block { margin-left: 92px; }

.install-tip { font-size: 12.5px; color: var(--fx-text-2); margin: 6px 0 0; line-height: 1.8; }

.install-ok { color: var(--fx-success); font-weight: 600; }
.install-no { color: #dc2626; font-weight: 600; }

.install-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 400;
}

.install-badge-ok { background: #e8f8ef; color: var(--fx-success); }
.install-badge-no { background: #fdeceb; color: #dc2626; }

.install-actions { text-align: center; margin-top: 22px; }

.install-btn {
    min-width: 200px;
    height: 44px;
    border-radius: 10px;
    font-size: 15px;
    letter-spacing: 2px;
    background: linear-gradient(135deg, var(--fx-primary-2), var(--fx-primary));
    border: none;
}

/* =====================================================================
   8. 响应式
   ===================================================================== */

@media (max-width: 900px) {
    .fx-layout .fx-side { width: var(--fx-side-w-mini); }
    .fx-layout .fx-main { margin-left: var(--fx-side-w-mini); }
    .fx-layout .fx-logo { width: var(--fx-side-w-mini); padding: 0; justify-content: center; }
    .fx-layout .fx-logo span { display: none; }
    .fx-layout .fx-menu-search { display: none; }
    .fx-layout .fx-menu a > span,
    .fx-layout .fx-menu a > .fx-arrow { display: none; }
    .fx-layout .fx-menu a { justify-content: center; padding: 0; }
    .fx-layout .fx-submenu { display: none; }
    .fx-filter { flex-direction: column; }
    .fx-filter-side { width: 100%; border-right: 0; border-bottom: 1px solid var(--fx-border); }
    .install-grid { grid-template-columns: 1fr; }
    .install-grid .layui-form-label { width: 80px; }
    .install-grid .layui-input-block { margin-left: 80px; }
}

/* ==================================================================
   插件管理（app/plugin/ 自动发现）
   ================================================================== */
.fx-plugin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.fx-plugin-card {
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    padding: 16px 18px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.fx-plugin-card:hover {
    border-color: var(--fx-primary-line);
    box-shadow: 0 2px 10px rgba(31, 36, 48, .06);
}

.fx-plugin-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fx-plugin-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--fx-text);
}

.fx-plugin-desc {
    font-size: 13px;
    color: var(--fx-text-2);
    line-height: 1.7;
    min-height: 44px;
}

.fx-plugin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 14px;
    font-size: 12px;
    color: var(--fx-text-3);
}

.fx-plugin-meta b { color: var(--fx-text-2); font-weight: 600; }

.fx-plugin-ops { display: flex; gap: 8px; }

/* ==================================================================
   弹窗内表单（fx-crud 的通用新增 / 编辑弹窗）
   --------------------------------------------------------------
   layui 默认 label 宽 80px，连「绑定门店」都会折成两行，字段多时很花；
   这里统一放宽到 116px（内容区 92px，六字标签也能放下）。

   字段多的表单（如码段批次有 17 项）用 C.form.cols = 2 开两列，
   能少滚一大截；个别长文本字段可用 {'span' => 2} 独占整行。
   ================================================================== */
.fx-form .layui-form-label {
    width: 116px;
    padding: 9px 12px;
}

.fx-form .layui-input-block {
    margin-left: 140px;
}

/* 两列：grid 直接加在 form 上（form-item 才是它的子元素） */
.fx-form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
}

.fx-form-cols .fx-span2 {
    grid-column: 1 / -1;
}

/* 内容区窄时自动退回单列，别硬挤成两栏 */
@media (max-width: 720px) {
    .fx-form-cols { grid-template-columns: 1fr; }
}