/* ==========================================================================
   卡哇猫 · 设计系统 (KawaMao Design System)
   全局覆盖 Layui / PearAdmin 默认样式，提供统一的专业 SaaS 视觉语言。
   加载顺序必须位于 pear.css 之后。
   ========================================================================== */

:root {
    /* 品牌主色 */
    --km-primary: #4F46E5;
    --km-primary-600: #4338CA;
    --km-primary-500: #6366F1;
    --km-primary-50: #EEF2FF;
    --km-accent: #F97066;
    --km-accent-50: #FEF2F2;

    /* 语义色 */
    --km-success: #10B981;
    --km-success-50: #ECFDF5;
    --km-warning: #F59E0B;
    --km-warning-50: #FFFBEB;
    --km-danger: #EF4444;
    --km-danger-50: #FEF2F2;
    --km-info: #3B82F6;
    --km-info-50: #EFF6FF;

    /* 中性色 */
    --km-text: #111827;
    --km-text-2: #4B5563;
    --km-text-3: #9CA3AF;
    --km-border: #E8EAF2;
    --km-border-strong: #D5D9E5;
    --km-bg: #F5F6FA;
    --km-surface: #FFFFFF;
    --km-surface-2: #FAFBFD;

    /* 圆角 / 阴影 / 动效 */
    --km-radius: 14px;
    --km-radius-sm: 10px;
    --km-radius-xs: 8px;
    --km-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --km-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --km-shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
    --km-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
    --km-ring: 0 0 0 3px rgba(79, 70, 229, .14);
    --km-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. 基础排版与滚动条
   -------------------------------------------------------------------------- */
body {
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--km-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #D8DCE8;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #B9BFCE;
    background-clip: content-box;
}

/* --------------------------------------------------------------------------
   2. 页面容器
   -------------------------------------------------------------------------- */
.pear-container,
body.pear-container {
    background: var(--km-bg) !important;
    padding: 16px !important;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   3. 卡片
   -------------------------------------------------------------------------- */
.layui-card,
.km-card {
    border: 1px solid var(--km-border) !important;
    border-radius: var(--km-radius) !important;
    background: var(--km-surface) !important;
    box-shadow: var(--km-shadow);
    margin-bottom: 16px;

    /* 这里必须保持 overflow: visible（原为 hidden）：
       layui 的下拉层是绝对定位在卡片内部的
       （.layui-form-select 是 position:relative，dl 是 position:absolute;top:42px），
       卡片一旦裁剪，下拉列表只能露出第一项，
       表现就是「文章管理 → 采集文章 → 选择资源」只见一个选项。
       卡片圆角改由下面的首/末子元素自行承担。 */
    overflow: visible;
    transition: box-shadow .2s var(--km-ease), border-color .2s var(--km-ease);
}

/* 卡片圆角替代方案：由首/末子元素各自圆角，避免 overflow: hidden 裁掉下拉层 */
.layui-card > :first-child,
.km-card > :first-child {
    border-radius: calc(var(--km-radius) - 1px) calc(var(--km-radius) - 1px) 0 0;
}

.layui-card > :last-child,
.km-card > :last-child {
    border-radius: 0 0 calc(var(--km-radius) - 1px) calc(var(--km-radius) - 1px);
}

/* 仅有一个子元素时四角都需圆角 */
.layui-card > :only-child,
.km-card > :only-child {
    border-radius: calc(var(--km-radius) - 1px);
}

/* 卡片内容区不参与裁剪，保证表单下拉 / 弹层完整可见 */
.layui-card-body {
    overflow: visible !important;
}

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

.layui-card:hover {
    box-shadow: var(--km-shadow-md);
}

.layui-card-header {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 14px 18px !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--km-text);
    border-bottom: 1px solid var(--km-border) !important;
    background: var(--km-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.layui-card-header:not(:has(*)) {
    /* 纯文本标题回退 */
    display: block;
}

.layui-card-body {
    padding: 18px !important;
    color: var(--km-text-2);
    background: var(--km-surface);
}

/* --------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
.layui-btn,
.pear-btn {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 16px !important;
    border-radius: var(--km-radius-xs) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .2px;
    border: 1px solid transparent !important;
    transition: all .18s var(--km-ease) !important;
    box-shadow: none !important;
}

.layui-btn-sm,
.pear-btn-sm {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

.layui-btn-lg,
.pear-btn-lg {
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    border-radius: var(--km-radius-sm) !important;
}

.layui-btn-xs,
.pear-btn-xs {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
}

/* 主按钮 */
.layui-btn-normal,
.layui-btn-primary,
.pear-btn-primary {
    background: var(--km-primary) !important;
    border-color: var(--km-primary) !important;
    color: #fff !important;
}

.layui-btn-normal:hover,
.layui-btn-primary:hover,
.pear-btn-primary:hover {
    background: var(--km-primary-600) !important;
    border-color: var(--km-primary-600) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .28) !important;
    transform: translateY(-1px);
}

/* 危险按钮 */
.layui-btn-danger,
.pear-btn-danger {
    background: var(--km-danger) !important;
    border-color: var(--km-danger) !important;
    color: #fff !important;
}

.layui-btn-danger:hover,
.pear-btn-danger:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, .28) !important;
    transform: translateY(-1px);
}

/* 成功按钮 */
.layui-btn-success {
    background: var(--km-success) !important;
    border-color: var(--km-success) !important;
    color: #fff !important;
}

.layui-btn-success:hover {
    background: #059669 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, .28) !important;
    transform: translateY(-1px);
}

/* 警告按钮 */
.layui-btn-warm {
    background: var(--km-warning) !important;
    border-color: var(--km-warning) !important;
    color: #fff !important;
}

/* 默认/次要按钮 */
.layui-btn:not([class*="layui-btn-"]):not(.pear-btn-primary):not(.pear-btn-danger),
.pear-btn:not(.pear-btn-primary):not(.pear-btn-danger):not(.pear-btn-success) {
    background: #fff !important;
    border-color: var(--km-border-strong) !important;
    color: var(--km-text-2) !important;
}

.layui-btn:not([class*="layui-btn-"]):hover,
.pear-btn:not(.pear-btn-primary):not(.pear-btn-danger):hover {
    border-color: var(--km-primary) !important;
    color: var(--km-primary) !important;
    background: var(--km-primary-50) !important;
}

.layui-btn:active,
.pear-btn:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.layui-btn .layui-icon,
.pear-btn .layui-icon {
    font-size: 15px !important;
    margin-right: 4px;
    vertical-align: -1px;
}

.layui-btn-xs .layui-icon,
.pear-btn-sm .layui-icon {
    margin-right: 3px;
}

/* 只含图标的按钮去掉右边距 */
.layui-btn .layui-icon:only-child,
.pear-btn .layui-icon:only-child,
.layui-btn-primary > .layui-icon:only-child {
    margin-right: 0;
}

.layui-btn-group .layui-btn {
    border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   5. 表格
   -------------------------------------------------------------------------- */
.layui-table-view {
    border: 1px solid var(--km-border) !important;
    border-radius: var(--km-radius) !important;
    overflow: hidden;
    margin: 0 !important;
    box-shadow: var(--km-shadow);
    background: #fff;
}

.layui-table-view .layui-table-header {
    border-bottom: 1px solid var(--km-border) !important;
    background: var(--km-surface-2);
}

.layui-table-header th,
.layui-table-tool,
.layui-table-view .layui-table th {
    background: var(--km-surface-2) !important;
}

.layui-table-view .layui-table th,
.layui-table-header th {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--km-text-3) !important;
    letter-spacing: .4px;
    padding: 11px 12px !important;
    border-bottom: 1px solid var(--km-border) !important;
}

.layui-table-view .layui-table td {
    padding: 12px !important;
    font-size: 13px;
    color: var(--km-text-2);
    border-bottom: 1px solid #F1F2F7 !important;
}

.layui-table-hover,
.layui-table tbody tr:hover,
.layui-table-click {
    background: var(--km-primary-50) !important;
}

.layui-table-view .layui-table[lay-even] tr:nth-child(even) {
    background: #FCFCFE;
}

.layui-table-page {
    border-top: 1px solid var(--km-border) !important;
    padding: 10px 12px !important;
    background: #fff;
}

.layui-table-body {
    overflow-x: auto;
}

/* 表格工具栏 */
.layui-table-tool {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--km-border) !important;
    background: #fff !important;
}

/* 表格内头像/图片 */
.layui-table img {
    border-radius: 6px;
    border: 1px solid var(--km-border);
}

/* --------------------------------------------------------------------------
   6. 表单
   -------------------------------------------------------------------------- */
.layui-form-item {
    margin-bottom: 16px !important;
    clear: both;
}

.layui-form-label {
    float: left;
    padding: 8px 12px 8px 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--km-text-2);
    width: 88px;
}

.layui-input-block {
    margin-left: 100px !important;
    min-height: 36px;
}

.layui-input-inline {
    margin-right: 10px;
}

.layui-input,
.layui-textarea,
.layui-select,
.layui-form-select .layui-input {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--km-border-strong) !important;
    border-radius: var(--km-radius-xs) !important;
    background: #fff;
    font-size: 13px;
    color: var(--km-text);
    transition: all .18s var(--km-ease);
}

.layui-textarea {
    height: auto !important;
    line-height: 1.7 !important;
    padding: 10px 12px !important;
    min-height: 88px;
}

.layui-input:hover,
.layui-textarea:hover,
.layui-select:hover {
    border-color: #B9BFCE !important;
}

.layui-input:focus,
.layui-textarea:focus,
.layui-select:focus {
    border-color: var(--km-primary) !important;
    box-shadow: var(--km-ring) !important;
}

.layui-input::-webkit-input-placeholder,
.layui-textarea::-webkit-input-placeholder {
    color: #B9BFCE;
    font-size: 13px;
}

.layui-input[disabled],
.layui-disabled {
    background: #F5F6FA !important;
    color: var(--km-text-3) !important;
    border-color: var(--km-border) !important;
    cursor: not-allowed;
}

.layui-form-select dl {
    border-radius: var(--km-radius-xs) !important;
    border: 1px solid var(--km-border) !important;
    box-shadow: var(--km-shadow-md);
    padding: 4px 0;
}

.layui-form-select dl dd,
.layui-form-select dl dt {
    padding: 0 12px !important;
    line-height: 34px !important;
    font-size: 13px;
}

.layui-form-select dl dd:hover {
    background: var(--km-primary-50) !important;
}

.layui-form-select dl dd.layui-this,
.layui-form-select .layui-this {
    background: var(--km-primary) !important;
    color: #fff !important;
}

.layui-form-select .layui-edge {
    right: 12px !important;
    border-top-color: var(--km-text-3) !important;
}

/* 复选框 / 单选 */
.layui-form-checkbox,
.layui-form-radio {
    margin-top: 0 !important;
    padding-left: 26px !important;
}

.layui-form-checkbox i,
.layui-form-radio i {
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

.layui-form-radio i {
    border-radius: 50% !important;
}

.layui-form-checked,
.layui-form-checked:hover {
    border-color: var(--km-primary) !important;
}

.layui-form-checked i,
.layui-form-checked:hover i {
    background: var(--km-primary) !important;
    border-color: var(--km-primary) !important;
    color: #fff !important;
}

.layui-form-checkbox span,
.layui-form-radio span {
    font-size: 13px;
    color: var(--km-text-2);
}

/* 开关：无文字胶囊款，与「图片本地化」开关按钮完全同款（灰=关，绿=开） */
.layui-form-switch {
    width: 44px !important;
    height: 22px !important;
    line-height: 22px !important;
    border-radius: 999px !important;
    border-color: transparent !important;
    background: #C9CFD6;
    transition: background-color .2s var(--km-ease);
}

.layui-form-switch em { display: none !important; }

.layui-form-switch i {
    width: 16px !important;
    height: 16px !important;
    top: 3px !important;
    left: 3px !important;
    border-radius: 50% !important;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: left .2s var(--km-ease);
}

.layui-form-onswitch {
    border-color: transparent !important;
    background: #16BAAA !important;
}

.layui-form-onswitch i {
    left: 25px !important;
}

/* --------------------------------------------------------------------------
   7. 标签 / 徽章
   -------------------------------------------------------------------------- */
.layui-badge,
.layui-badge-rim {
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500;
    background: var(--km-primary-50) !important;
    color: var(--km-primary) !important;
    border: none !important;
}

.layui-badge.layui-bg-blue,
.layui-bg-blue {
    background: var(--km-info-50) !important;
    color: var(--km-info) !important;
}

.layui-badge.layui-bg-green,
.layui-bg-green {
    background: var(--km-success-50) !important;
    color: var(--km-success) !important;
}

.layui-badge.layui-bg-red,
.layui-bg-red {
    background: var(--km-danger-50) !important;
    color: var(--km-danger) !important;
}

.layui-badge.layui-bg-orange,
.layui-bg-orange {
    background: var(--km-warning-50) !important;
    color: var(--km-warning) !important;
}

.layui-badge.layui-bg-cyan,
.layui-bg-cyan {
    background: #ECFEFF !important;
    color: #0891B2 !important;
}

/* 引用块 */
.layui-elem-quote {
    border-left: 3px solid var(--km-primary) !important;
    border-radius: 0 var(--km-radius-xs) var(--km-radius-xs) 0 !important;
    background: var(--km-primary-50) !important;
    color: var(--km-text-2) !important;
    padding: 12px 16px !important;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   8. 顶部导航 / 侧边栏（框架层）
   -------------------------------------------------------------------------- */
.layui-layout-admin .layui-header,
.pear-admin .layui-header {
    height: 60px !important;
    left: 220px !important;
    width: calc(100% - 220px) !important;
    background: var(--km-surface) !important;
    border-bottom: 1px solid var(--km-border) !important;
    box-shadow: var(--km-shadow-xs);
    z-index: 1000;
}

.layui-header .layui-nav {
    background: transparent !important;
    padding: 0 !important;
}

.layui-header .layui-nav .layui-nav-item {
    line-height: 60px !important;
    margin: 0 2px !important;
}

.layui-header .layui-nav .layui-nav-item a {
    color: var(--km-text-2) !important;
    font-size: 14px;
    padding: 0 12px !important;
    border-radius: var(--km-radius-xs);
    transition: all .18s var(--km-ease);
}

.layui-header .layui-nav .layui-nav-item a:hover {
    color: var(--km-primary) !important;
    background: var(--km-primary-50) !important;
}

.layui-header .layui-nav .layui-nav-item a .layui-icon {
    font-size: 17px;
}

.layui-header .layui-nav .layui-nav-bar {
    display: none !important;
}

/* 用户头像 */
.layui-nav-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 2px solid var(--km-border);
    object-fit: cover;
}

.layui-nav-child {
    border-radius: var(--km-radius-sm) !important;
    border: 1px solid var(--km-border) !important;
    box-shadow: var(--km-shadow-lg);
    padding: 6px !important;
    overflow: hidden;
}

/* 顶栏头像下拉需要下移到 60px 头部之下。
   注意：这里必须限定在 .layui-header 内——历史上写成全局 .layui-nav-child 时，
   侧栏子菜单也被 top:58px 整体下移（布局盒子留在原位），
   表现为「子菜单往下移 60px、与父项之间出现空洞」。 */
.layui-header .layui-nav-child {
    top: 58px !important;
}

.layui-nav-child dd {
    border-radius: var(--km-radius-xs);
}

.layui-nav-child dd a {
    line-height: 38px !important;
    color: var(--km-text-2) !important;
    font-size: 13px;
}

.layui-nav-child dd a:hover {
    background: var(--km-primary-50) !important;
    color: var(--km-primary) !important;
}

/* 侧边栏
   注意：.layui-logo 位于 .layui-side 内部（pear 的布局），
   因此 .layui-side 必须从 top:0 开始铺满整列；若再设 top:60
   会与内部 logo 的高度叠加扣减，导致菜单区被吃掉 60px、顶部留空。 */
.layui-layout-admin .layui-side,
.pear-admin .layui-side {
    top: 0 !important;
    bottom: 0 !important;
    width: 220px !important;
    background: linear-gradient(180deg, #0F172A 0%, #131F3A 100%) !important;
    box-shadow: none !important;
}

.pear-admin .layui-side-scroll {
    width: 220px !important;
    height: calc(100% - 60px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #0F172A 0%, #131F3A 100%) !important;
}

/* pear 的 menu.js 会在 #sideMenu 内部再生成一个 .layui-side-scroll（内联 height:100%），
   真正承载菜单内容的是它。必须让它可滚动，否则展开分组后超出的菜单项会被切掉且滚不到。 */
#sideMenu .layui-side-scroll,
#sideMenu .pear-side-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* ul 若被固定高度，容器的 scrollHeight 不会随展开的子菜单增长，导致内容被裁剪。
   这里改为自适应高度，保证滚动条能覆盖全部菜单项。 */
#sideMenu .layui-side-scroll > ul,
#sideMenu .pear-side-scroll > ul {
    height: auto !important;
    min-height: 100%;
    padding-bottom: 14px;
}

/* admin.css 把滚动条宽度设为 0，菜单超出屏幕时看不出还能滚动，这里恢复细滚动条 */
.pear-admin .layui-side-scroll::-webkit-scrollbar,
#sideMenu .layui-side-scroll::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.pear-admin .layui-side-scroll::-webkit-scrollbar-track,
#sideMenu .layui-side-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}

.pear-admin .layui-side-scroll::-webkit-scrollbar-thumb,
#sideMenu .layui-side-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16) !important;
    border-radius: 999px !important;
}

.pear-admin .layui-side-scroll:hover::-webkit-scrollbar-thumb,
#sideMenu .layui-side-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .30) !important;
}

.layui-side-scroll {
    background: linear-gradient(180deg, #0F172A 0%, #131F3A 100%) !important;
}

.layui-bg-black,
.layui-side.layui-bg-black {
    background: linear-gradient(180deg, #0F172A 0%, #131F3A 100%) !important;
}

.layui-layout-admin .layui-body,
.layui-layout-admin .layui-footer {
    top: 60px !important;
    left: 220px !important;
    bottom: 0 !important;
}

.layui-body {
    background: var(--km-bg) !important;
}

/* Logo 区 */
.layui-logo,
.pear-admin .layui-logo {
    width: 220px !important;
    height: 60px !important;
    line-height: 60px !important;
    background: linear-gradient(180deg, #0F172A 0%, #131F3A 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    padding: 0 18px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
}

.layui-logo .logo,
.layui-logo img.logo {
    width: 30px !important;
    height: 30px !important;
    display: inline-block !important;
    vertical-align: middle;
    border-radius: 8px;
}

.layui-logo .title,
.layui-logo .title1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
    color: #fff !important;
}

/* 菜单 */
.pear-menu,
.layui-nav-tree {
    background: transparent !important;
}

.layui-nav-tree .layui-nav-item,
.pear-menu .layui-nav-item {
    margin: 2px 8px !important;
    border-radius: var(--km-radius-xs);
    line-height: 40px !important;
}

.layui-nav-tree .layui-nav-item > a,
.pear-menu .layui-nav-item > a {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 10px 0 12px !important;
    color: #94A3B8 !important;
    font-size: 13.5px;
    border-radius: var(--km-radius-xs);
    transition: all .18s var(--km-ease);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.layui-nav-tree .layui-nav-item > a .layui-icon,
.pear-menu .layui-nav-item > a .layui-icon {
    flex: none;
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-right: 10px;
    font-size: 14px;
    text-align: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    color: #C7D2FE;
    transition: all .18s var(--km-ease);
}

.layui-nav-tree .layui-nav-item > a:hover .layui-icon,
.pear-menu .layui-nav-item > a:hover .layui-icon {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* 一级菜单文字占满剩余宽度，箭头靠右，避免长标题互相遮挡 */
.layui-nav-tree .layui-nav-item > a > span,
.layui-nav-tree .layui-nav-item > a > cite,
.pear-menu .layui-nav-item > a > span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

.layui-nav-tree .layui-nav-item > a:hover,
.pear-menu .layui-nav-item > a:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

.layui-nav-tree .layui-nav-item.layui-this > a,
.layui-nav-tree .layui-nav-itemed > a,
.pear-menu .layui-nav-item.layui-this > a {
    background: rgba(99, 102, 241, .16) !important;
    color: #fff !important;
    box-shadow: none !important;
    position: relative;
    font-weight: 600;
}

/* 激活态左侧色条 */
.layui-nav-tree .layui-nav-item.layui-this > a::before,
.layui-nav-tree .layui-nav-itemed > a::before,
.pear-menu .layui-nav-item.layui-this > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--km-primary-500), var(--km-primary-600));
}

/* 子菜单样式已迁移至文件末尾「13. 侧栏菜单高优先级覆盖」 */

/* ---- 菜单栏布局修正 ------------------------------------------------------
   component/pear/css/module/menu.css 是按「230px 侧栏 + 56px 行高」设计的，
   本设计系统改成「220px 侧栏 + 40px 行高」后两套规则叠加，出现三类错位：
   ① ul / 滚动容器固定 230px，比侧栏可视宽度（220px − 6px 滚动条 = 214px）还宽，
      菜单项右侧被裁掉，激活态背景与圆角被切；
   ② 子菜单缩进 = 自定义 padding-left(40px) + pear 的 span margin-left(30px) = 70px，
      比一级菜单文字(48px)深太多，标题被挤成省略号；
   ③ 展开箭头 top:23px 是按 56px 行高算的，40px 行高下箭头掉到行底部。
   ------------------------------------------------------------------------ */
#sideMenu,
#sideMenu .layui-side-scroll,
#sideMenu .pear-side-scroll,
#sideMenu .pear-nav-tree {
    width: 100% !important;
    box-sizing: border-box;
}

/* ② 子菜单文字与一级菜单文字左对齐（8px 外边距 + 12px 内边距 + 20px 图标 + 8px 间距 = 48px） */
.pear-nav-tree .layui-nav-child dd a span {
    margin-left: 0 !important;
}



/* ③ 一级（40px）/ 二级（36px）菜单展开箭头垂直居中 */
.pear-nav-tree.arrow .layui-nav-more,
.pear-nav-tree.arrow .layui-nav-child .layui-nav-more {
    top: 50% !important;
    margin-top: -5px !important;
}

/* --------------------------------------------------------------------------
   9. 选项卡
   -------------------------------------------------------------------------- */
.layui-tab {
    margin: 0 !important;
}

.layui-tab-title {
    height: 44px !important;
    border-bottom: 1px solid var(--km-border) !important;
    background: #fff;
    padding: 0 8px;
}

.layui-tab-title li {
    line-height: 44px !important;
    padding: 0 16px !important;
    font-size: 13px;
    color: var(--km-text-3) !important;
    border-radius: var(--km-radius-xs) var(--km-radius-xs) 0 0;
}

.layui-tab-title li:hover {
    color: var(--km-primary) !important;
}

.layui-tab-title .layui-this {
    color: var(--km-primary) !important;
    font-weight: 600;
}

.layui-tab-title .layui-this:after {
    height: 42px !important;
    border: none !important;
    border-bottom: 2px solid var(--km-primary) !important;
    border-radius: 2px;
    top: 1px !important;
}

.layui-tab-brief > .layui-tab-title .layui-this {
    color: var(--km-primary) !important;
}

/* --------------------------------------------------------------------------
   10. 弹层 / 分页 / 时间线 / 进度条
   -------------------------------------------------------------------------- */
.layui-layer {
    border-radius: var(--km-radius) !important;
    overflow: hidden;
    box-shadow: var(--km-shadow-lg) !important;
}

.layui-layer-title {
    height: 48px !important;
    line-height: 48px !important;
    font-size: 15px !important;
    font-weight: 600;
    color: var(--km-text) !important;
    border-bottom: 1px solid var(--km-border) !important;
    background: #fff !important;
    border-radius: var(--km-radius) var(--km-radius) 0 0 !important;
    padding: 0 18px !important;
}

.layui-layer-content {
    color: var(--km-text-2);
}

.layui-layer-msg {
    border-radius: var(--km-radius-xs) !important;
    border: none !important;
    box-shadow: var(--km-shadow-md) !important;
}

.layui-layer-btn {
    padding: 0 18px 18px !important;
    text-align: right;
}

.layui-layer-btn a {
    height: 34px !important;
    line-height: 34px !important;
    border-radius: var(--km-radius-xs) !important;
    font-size: 13px !important;
    padding: 0 18px !important;
    border: 1px solid var(--km-border-strong) !important;
    background: #fff !important;
    color: var(--km-text-2) !important;
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: var(--km-primary) !important;
    background: var(--km-primary) !important;
    color: #fff !important;
}

.layui-laypage {
    margin: 0 !important;
}

.layui-laypage a,
.layui-laypage span {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 11px !important;
    margin: 0 3px !important;
    border-radius: 6px !important;
    border: 1px solid var(--km-border) !important;
    background: #fff !important;
    color: var(--km-text-2) !important;
    font-size: 13px;
}

.layui-laypage a:hover {
    border-color: var(--km-primary) !important;
    color: var(--km-primary) !important;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
    border-radius: 6px !important;
    background: var(--km-primary) !important;
}

.layui-laypage .layui-laypage-curr em {
    color: #fff !important;
}

.layui-timeline-item:before {
    background: var(--km-border) !important;
}

.layui-timeline-axis {
    color: var(--km-primary) !important;
    background: #fff !important;
}

.layui-progress {
    border-radius: 999px !important;
    background: #EEF0F6 !important;
    height: 8px !important;
}

.layui-progress-bar {
    border-radius: 999px !important;
    background: var(--km-primary) !important;
    height: 8px !important;
    line-height: 8px !important;
}

/* --------------------------------------------------------------------------
   11. 卡哇猫 · 框架增强组件
   -------------------------------------------------------------------------- */

/* 顶栏账户信息胶囊 */
.km-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--km-surface-2);
    border: 1px solid var(--km-border);
    font-size: 13px;
    color: var(--km-text-2);
    white-space: nowrap;
}

.km-chip b {
    color: var(--km-text);
    font-weight: 600;
}

.km-chip.is-warn {
    background: var(--km-warning-50);
    border-color: #FDE68A;
    color: #92400E;
}

.km-chip.is-warn b {
    color: #92400E;
}

.km-chip .layui-icon {
    font-size: 15px;
}

/* 品牌区 */
.km-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.km-brand__mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: block;
    flex: none;
}

.km-brand__text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}

.km-brand__name {
    display: block;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: .5px;
    white-space: nowrap;
}

.km-brand__sub {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #64748B;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 2px;
}

/* 折叠态（pear-mini）：必须显式覆盖上面的 !important 宽度 */
.pear-mini .layui-side,
.pear-mini .layui-logo {
    width: 60px !important;
}

.pear-mini .layui-side-scroll {
    width: 60px !important;
}

.pear-mini .layui-header {
    left: 60px !important;
    width: calc(100% - 60px) !important;
}

.pear-mini .layui-body,
.pear-mini .layui-layout-admin .layui-body {
    left: 60px !important;
}

.pear-mini .layui-logo {
    justify-content: center;
    padding: 0 !important;
}

.pear-mini .km-brand__text {
    display: none;
}

/* 移动端悬浮按钮 */
.pear-collasped-pe {
    background-color: var(--km-primary) !important;
}

/* 主题面板选中态 */
.pearone-color .color-content li.layui-this:after,
.pearone-color .color-content li:hover:after {
    border-color: var(--km-primary) !important;
}

/* 加载动画 */
.loader-main {
    background: var(--km-surface) !important;
}

.loader-main .loader {
    width: 50px !important;
    height: 50px !important;
    background-color: transparent !important;
}

.loader-main .loader:after {
    background-color: var(--km-primary) !important;
    border-radius: 10px !important;
}

/* 空状态 */
.km-empty {
    padding: 56px 20px;
    text-align: center;
    color: var(--km-text-3);
}

.km-empty__icon {
    font-size: 46px;
    color: #C7CBD6;
    display: block;
    margin-bottom: 12px;
}

/* 卡片式 KPI */
.km-kpi {
    position: relative;
    padding: 20px;
    border-radius: var(--km-radius);
    background: #fff;
    border: 1px solid var(--km-border);
    box-shadow: var(--km-shadow);
    overflow: hidden;
    transition: all .2s var(--km-ease);
}

.km-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--km-shadow-md);
}

.km-kpi__label {
    font-size: 13px;
    color: var(--km-text-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.km-kpi__value {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 700;
    color: var(--km-text);
    letter-spacing: -.5px;
    line-height: 1.1;
}

.km-kpi__foot {
    margin-top: 8px;
    font-size: 12px;
    color: var(--km-text-3);
}

.km-kpi__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
}

.km-kpi--brand .km-kpi__icon {
    background: var(--km-primary-50);
    color: var(--km-primary);
}

.km-kpi--success .km-kpi__icon {
    background: var(--km-success-50);
    color: var(--km-success);
}

.km-kpi--warning .km-kpi__icon {
    background: var(--km-warning-50);
    color: var(--km-warning);
}

.km-kpi--info .km-kpi__icon {
    background: var(--km-info-50);
    color: var(--km-info);
}

/* 区块标题 */
.km-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--km-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.km-section-title:before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--km-primary);
}

/* 通用工具类 */
.km-mt-0 {
    margin-top: 0 !important;
}

.km-mb-0 {
    margin-bottom: 0 !important;
}

.km-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.km-flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.km-spacer {
    flex: 1 1 auto;
}

.km-muted {
    color: var(--km-text-3) !important;
}

/* --------------------------------------------------------------------------
   12. 响应式
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   13. 侧栏菜单高优先级覆盖（修正子菜单布局 & 覆盖 PearAdmin 默认激活态）
   -------------------------------------------------------------------------- */

/* 一级菜单项 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-item {
    margin: 2px 8px !important;
    border-radius: var(--km-radius-xs);
    line-height: 40px !important;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-item > a {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 10px 0 12px !important;
    color: #94A3B8 !important;
    font-size: 13.5px;
    border-radius: var(--km-radius-xs);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    transition: all .18s var(--km-ease);
}

/* 一级图标芯片 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-item > a .layui-icon {
    flex: none;
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-right: 10px;
    font-size: 14px;
    text-align: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    color: #C7D2FE;
    transition: all .18s var(--km-ease);
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-item > a:hover,
.pear-admin .layui-side .layui-nav-tree .layui-nav-item > a:hover .layui-icon {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

/* 激活 / 展开 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-item.layui-this > a,
.pear-admin .layui-side .layui-nav-tree .layui-nav-itemed > a {
    background: rgba(99, 102, 241, .16) !important;
    color: #fff !important;
    box-shadow: none !important;
    position: relative;
    font-weight: 600;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-item.layui-this > a .layui-icon,
.pear-admin .layui-side .layui-nav-tree .layui-nav-itemed > a .layui-icon {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* 左侧激活色条 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-item.layui-this > a::before,
.pear-admin .layui-side .layui-nav-tree .layui-nav-itemed > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--km-primary-500), var(--km-primary-600));
}

/* ===== 子菜单：SaaS 简洁嵌套列表 ===== */
.pear-admin .layui-side .layui-nav-tree .layui-nav-child {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0;
    margin: 2px 8px 4px 44px !important;
    padding: 0 0 2px 0 !important;
    display: none;
    position: relative;
}

/* 竖向引导线，与父级文字左侧对齐 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(255, 255, 255, .10);
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-itemed > .layui-nav-child {
    display: block !important;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd {
    margin: 0 !important;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd a,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a {
    height: 34px !important;
    line-height: 34px !important;
    margin: 1px 0 !important;
    padding: 0 10px 0 12px !important;
    color: #94A3B8 !important;
    font-size: 13px;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .18s var(--km-ease), color .18s var(--km-ease);
}

/* 子项前导小圆点 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd a::before,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin-right: 10px;
    border-radius: 50%;
    background: #64748B;
    transition: all .18s var(--km-ease);
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child a:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child a:hover::before {
    background: var(--km-primary-500);
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd.layui-this a,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a.layui-this,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child .layui-this > a {
    background: rgba(99, 102, 241, .16) !important;
    color: #C7D2FE !important;
    box-shadow: none !important;
    font-weight: 500;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd.layui-this a::before,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a.layui-this::before,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child .layui-this > a::before {
    background: var(--km-primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
}

/* 折叠箭头颜色 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-more {
    border-top-color: rgba(255, 255, 255, .35) !important;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-itemed > a .layui-nav-more {
    border-color: transparent transparent #fff !important;
}
@media screen and (max-width: 992px) {
    .pear-container {
        padding: 12px !important;
    }

    .km-dash,
    .km-grid {
        grid-template-columns: 1fr !important;
    }

    .layui-form-label {
        width: auto;
        float: none;
        display: block;
        padding: 0 0 6px 0 !important;
    }

    .layui-input-block {
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   14. 可爱猫爪侧栏（Kawaii Sidebar）
   奶油粉紫主题 + 猫耳 Logo + 马卡龙图标芯片 + 子菜单像素级对齐
   （本段位于文件末尾，同优先级规则覆盖前文的深色商务侧栏）
   ========================================================================== */

:root {
    --km-side-bg-a: #FFF6FB;
    --km-side-bg-b: #F3ECFF;
    --km-side-text: #9A8BB4;
    --km-side-text-strong: #6D5A8E;
    --km-pink: #FF8FBE;
    --km-pink-deep: #F76EA8;
    --km-lav: #B78CF7;
    --km-capsule: linear-gradient(135deg, #FF9AC4 0%, #B78CF7 100%);
    --km-capsule-shadow: 0 6px 14px rgba(247, 110, 168, .28);
}

/* ---- 14.1 侧栏容器：奶油粉紫渐变 ---- */
.pear-admin .layui-side,
.layui-layout-admin .layui-side,
.pear-admin .layui-side-scroll,
.layui-side-scroll,
.layui-bg-black,
.layui-side.layui-bg-black {
    background: linear-gradient(180deg,
    var(--km-side-bg-a) 0%,
    var(--km-side-bg-b) 100%) !important;
}

/* 反制 component/pear/css/module/menu.css 的
   `.dark-theme .layui-nav-tree { background-color:#28333E !important }`
   （0,2,0 + !important，会盖掉浅色主题成为深色底），此处用更高特异性复位为透明。 */
.pear-admin .layui-side .pear-nav-tree.layui-nav-tree,
.pear-admin .layui-side .pear-nav-tree.layui-nav-tree .layui-nav-child {
    background: transparent !important;
    background-color: transparent !important;
}

/* 右下角淡猫爪印水印（一个大掌 + 三个趾） */
.pear-admin .layui-side::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 14px;
    width: 56px;
    height: 56px;
    pointer-events: none;
    opacity: .5;
    background:
    radial-gradient(circle at 50% 22%, rgba(247, 110, 168, .22) 7px, transparent 8px),
    radial-gradient(circle at 27% 42%, rgba(247, 110, 168, .18) 4.5px, transparent 5.5px),
    radial-gradient(circle at 50% 46%, rgba(247, 110, 168, .18) 4.5px, transparent 5.5px),
    radial-gradient(circle at 73% 42%, rgba(247, 110, 168, .18) 4.5px, transparent 5.5px),
    radial-gradient(ellipse 13px 11px at 50% 74%, rgba(247, 110, 168, .22) 60%, transparent 61%);
}

/* ---- 14.2 Logo 区：奶油底 + 猫耳 + 渐变标题 ---- */
.layui-logo,
.pear-admin .layui-logo {
    background: transparent !important;
    border-bottom: 1px dashed rgba(247, 110, 168, .28) !important;
    position: relative;
}

/* 猫耳：画在 Logo 图标两侧上方 */
.layui-logo .km-brand {
    position: relative;
}

.layui-logo .km-brand::before,
.layui-logo .km-brand::after {
    content: "";
    position: absolute;
    top: -7px;
    width: 13px;
    height: 13px;
    z-index: 0;
    background: #FFB1CF;
    border-radius: 62% 62% 8% 8% / 78% 78% 10% 10%;
}

.layui-logo .km-brand::before {
    left: 4px;
    transform: rotate(-38deg);
}

.layui-logo .km-brand::after {
    left: 30px;
    transform: rotate(38deg);
}

/* 耳朵内芯（浅粉高光） */
.layui-logo .km-brand .logo,
.layui-logo .km-brand img.logo {
    position: relative;
    z-index: 1;
    border-radius: 9px;
    transition: transform .25s var(--km-ease);
}

.layui-logo:hover .km-brand img.logo {
    transform: rotate(-6deg) scale(1.08);
}

.layui-logo .title,
.layui-logo .title1,
.layui-logo .km-brand__name {
    background: linear-gradient(120deg, #F76EA8 10%, #A678F0 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 修正：pear 旧版给 .title 加的 top:5px / margin-left:5px 会把品牌名压到 kawamao 字母上 */
.layui-logo .km-brand__name {
    position: static !important;
    top: auto !important;
    margin-left: 0 !important;
}

.layui-logo .km-brand__sub {
    color: #C9A8DD !important;
    font-size: 11px !important;
    letter-spacing: 2px;
}

/* ---- 14.3 一级菜单：白玉圆角条 + 马卡龙图标芯片 ---- */
.pear-admin .layui-side .pear-nav-tree .layui-nav-item {
    margin: 3px 10px !important;
    line-height: 42px !important;
    border-radius: 14px;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item > a {
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 10px 0 8px !important;
    color: var(--km-side-text) !important;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 14px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    transition: background .2s var(--km-ease), color .2s var(--km-ease), transform .2s var(--km-ease);
}

/* 每组一个马卡龙色相（第 1..6 组循环） */
.pear-admin .layui-side .pear-nav-tree .layui-nav-item:nth-child(6n+1) > a .layui-icon {
    background: linear-gradient(135deg, #FF9AC4, #FF7FB2);
    color: #fff !important;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item:nth-child(6n+2) > a .layui-icon {
    background: linear-gradient(135deg, #FFC48A, #FFAB66);
    color: #fff !important;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item:nth-child(6n+3) > a .layui-icon {
    background: linear-gradient(135deg, #FFE07E, #FFD25E);
    color: #fff !important;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item:nth-child(6n+4) > a .layui-icon {
    background: linear-gradient(135deg, #A4E8B8, #7FD8A0);
    color: #fff !important;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item:nth-child(6n+5) > a .layui-icon {
    background: linear-gradient(135deg, #9AC8FF, #7FB0FF);
    color: #fff !important;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item:nth-child(6n+6) > a .layui-icon {
    background: linear-gradient(135deg, #C9A6FF, #B78CF7);
    color: #fff !important;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item > a .layui-icon {
    flex: none;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: 10px;
    font-size: 13px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(247, 110, 168, .18);
    transition: transform .2s var(--km-ease), box-shadow .2s var(--km-ease);
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item > a:hover {
    background: #fff !important;
    color: var(--km-side-text-strong) !important;
    transform: translateX(2px);
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item > a:hover .layui-icon {
    transform: rotate(-8deg) scale(1.12);
}

/* 激活/展开：白底 + 粉紫渐变描边 + 右侧猫爪圆点 */
.pear-admin .layui-side .pear-nav-tree .layui-nav-item.layui-this > a,
.pear-admin .layui-side .pear-nav-tree .layui-nav-itemed > a {
    background: #fff !important;
    color: var(--km-pink-deep) !important;
    box-shadow: 0 4px 12px rgba(247, 110, 168, .16), inset 0 0 0 1.5px #FFD3E6 !important;
    position: relative;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item.layui-this > a::after,
.pear-admin .layui-side .pear-nav-tree .layui-nav-itemed > a::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--km-pink);
    box-shadow: 0 0 0 3px rgba(255, 143, 190, .18);
}

/* 猫爪圆点在展开时换成小掌印三趾 */
.pear-admin .layui-side .pear-nav-tree .layui-nav-itemed > a::after {
    width: 14px;
    height: 8px;
    margin-top: -4px;
    background:
    radial-gradient(circle at 20% 20%, var(--km-pink) 2.2px, transparent 3px),
    radial-gradient(circle at 50% 12%, var(--km-pink) 2.2px, transparent 3px),
    radial-gradient(circle at 80% 20%, var(--km-pink) 2.2px, transparent 3px),
    radial-gradient(ellipse 5px 3.5px at 50% 78%, var(--km-pink) 60%, transparent 61%);
    box-shadow: none;
}

/* 激活项图标芯片变成粉紫渐变胶囊 */
.pear-admin .layui-side .pear-nav-tree .layui-nav-item.layui-this > a .layui-icon,
.pear-admin .layui-side .pear-nav-tree .layui-nav-itemed > a .layui-icon {
    background: var(--km-capsule) !important;
    box-shadow: var(--km-capsule-shadow);
    color: #fff !important;
}

/* 13 段的靛蓝激活条在浅色主题下改为粉色 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-item.layui-this > a::before,
.pear-admin .layui-side .layui-nav-tree .layui-nav-itemed > a::before {
    background: linear-gradient(180deg, var(--km-pink), var(--km-lav)) !important;
}

/* ---- 14.4 子菜单：与一级菜单严格对齐 ----
   对齐基准（自侧栏左缘，实测校准）：
   一级文字 = li外边距10 + a内边距8 + 图标24 + 图标右距10 = 52px
   子菜单   = li外边距10 + child左外边距8 + a内边距34     = 52px（同一像素列）
   图标中轴 = 10 + 8 + 12 = 30px → 引导线与肉垫圆点都落在 30px 中轴上 */
.pear-admin .layui-side .layui-nav-tree .layui-nav-child {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0;
    margin: 4px 10px 6px 8px !important;
    padding: 0 !important;
    /* 复位第 8 节通用 .layui-nav-child 规则的副作用：
       ① top:58px 会让整块子菜单下移，而布局盒子留在原位 → 父项下方出现空洞；
       ② overflow:hidden 会裁掉圆点外发光与阴影。 */
    top: auto !important;
    overflow: visible !important;
    position: relative;
}

/* 竖向引导线：中轴 30px（child左18 + left1 + 线宽半1 = 30... 即 left:1px 时线中心=20？
   实算：child 左缘 = 18px，线中心 = 18 + left + 1 = 30 → left = 11px） */
.pear-admin .layui-side .layui-nav-tree .layui-nav-child::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 143, 190, .35), rgba(183, 140, 247, .35));
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-itemed > .layui-nav-child {
    display: block !important;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child li,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd {
    margin: 0 !important;
    line-height: 32px !important;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd a,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a {
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 10px 0 34px !important;
    margin: 1px 0 !important;
    color: var(--km-side-text) !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 9px;
    display: flex !important;
    align-items: center;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .18s var(--km-ease), color .18s var(--km-ease);
}

/* pear 给子项 span 加的 margin-left(30px) 会破坏对齐，清零（34px 内边距已含缩进） */
.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd a span,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a span {
    margin-left: 0 !important;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 子项前导「小肉垫」圆点：中心对齐父级图标中轴 30px（child 左缘18 + left9 + 半径3 = 30） */
.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd a::before,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E3C7E8;
    transition: all .18s var(--km-ease);
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child a:hover {
    background: #fff !important;
    color: var(--km-side-text-strong) !important;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child a:hover::before {
    background: var(--km-pink);
    transform: scale(1.25);
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd.layui-this a,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a.layui-this,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child .layui-this > a {
    background: #fff !important;
    color: var(--km-pink-deep) !important;
    box-shadow: 0 3px 10px rgba(247, 110, 168, .14), inset 0 0 0 1.5px #FFD3E6 !important;
    font-weight: 600;
}

.pear-admin .layui-side .layui-nav-tree .layui-nav-child dd.layui-this a::before,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child a.layui-this::before,
.pear-admin .layui-side .layui-nav-tree .layui-nav-child .layui-this > a::before {
    background: var(--km-capsule);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 143, 190, .16);
}

/* 展开/收起箭头：收起时是薰衣草色小箭头，展开后隐藏（位置让给右侧猫爪印）
   选择器里的 :nth-child(n) 用于把特异性抬到 (0,6,2)：
   14.3 的 `:nth-child(6n+N) > a .layui-icon` 配色规则特异性为 (0,6,1) 且带 !important，
   会连带命中箭头 <i>（它同时有 .layui-icon 和 .layui-nav-more），把箭头刷成白色而隐形。 */
.pear-admin .layui-side .pear-nav-tree .layui-nav-item:nth-child(n) > a > .layui-nav-more {
    display: inline-block !important;
    top: 50% !important;
    right: 10px !important;
    margin: -8px 0 0 0 !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    padding: 0 !important;
    font-size: 11px !important;
    text-align: center;
    border: none !important;
    border-radius: 8px;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #C9A8DD !important;
    transition: color .2s var(--km-ease);
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item:nth-child(n) > a:hover > .layui-nav-more {
    color: var(--km-pink) !important;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-itemed:nth-child(n) > a > .layui-nav-more,
.pear-admin .layui-side .pear-nav-tree .layui-nav-item.layui-this:nth-child(n) > a > .layui-nav-more {
    display: none !important;
}

/* ---- 14.5 细节收口 ---- */

/* 子项 hover 轻微右移，与一级菜单一致的交互手感 */
.pear-admin .layui-side .pear-nav-tree .layui-nav-child a:hover {
    transform: translateX(2px);
}

/* pear 用 <cite> 渲染标题时同样清零缩进（34px 内边距已含对齐缩进） */
.pear-admin .layui-side .pear-nav-tree .layui-nav-child dd a cite,
.pear-admin .layui-side .pear-nav-tree .layui-nav-child a cite {
    margin-left: 0 !important;
    font-style: normal;
}

/* 侧栏聚焦不出现蓝色描边 */
.pear-admin .layui-side a:focus,
.pear-admin .layui-side a:active {
    outline: none !important;
}

/* ---- 14.6 盒子模型纠正（消除右侧被裁切）----
   pear/layui 给菜单项设了 `width:100%`（content-box），再叠加本设计系统的
   左右外边距与内边距后，实际宽度会超出侧栏可用宽度，导致卡片右缘和圆角被
   `overflow-x:hidden` 裁掉。改为 width:auto + border-box 让宽度按可用空间计算。 */
.pear-admin .layui-side .pear-nav-tree .layui-nav-item,
.pear-admin .layui-side .pear-nav-tree .layui-nav-child,
.pear-admin .layui-side .pear-nav-tree .layui-nav-child dd,
.pear-admin .layui-side .pear-nav-tree .layui-nav-child li {
    width: auto !important;
    box-sizing: border-box !important;
}

.pear-admin .layui-side .pear-nav-tree .layui-nav-item > a,
.pear-admin .layui-side .pear-nav-tree .layui-nav-child dd a,
.pear-admin .layui-side .pear-nav-tree .layui-nav-child a {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* 子菜单容器再显式扣掉自身左右外边距（8px + 10px），
   否则 `width:100%` 会让它比父级卡片多伸出 8px，右缘圆角被裁掉。
   这里带 #sideMenu（ID）是为了压过 pear 菜单模块里同名的 width:100% 规则。 */
html body .pear-admin .layui-side #sideMenu .pear-nav-tree .layui-nav-child,
.pear-admin .layui-side .pear-nav-tree .layui-nav-child {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
}

/* 兜底：子菜单容器显式按侧栏几何取值（侧栏固定 220px，见 8 节）
   列表内容宽 214 − 一级左右外边距 20 = 194；子容器左侧再缩进 8px 定位到 18px，
   故宽度取 186px，右缘正好落在 204px，与一级卡片右缘对齐。 */
html body .pear-admin .layui-side #sideMenu .pear-nav-tree > li > .layui-nav-child {
    width: 186px !important;
    max-width: 186px !important;
    /* 关键：父级规则里的 min-width:100%（=194px）在 CSS 中优先于 max-width，
       会把子容器强行撑到 194px 而压过 width，必须显式清零。 */
    min-width: 0 !important;
}

/* 直接约束子项胶囊本体：容器宽度受 pear 的 min-width:100% 影响难以收敛，
   这里把胶囊本身定为 186px（左缘 18px → 右缘 204px，与一级卡片右缘精确对齐）。
   注意：必须使用不带 #sideMenu / html body 前缀的选择器形态（已验证可匹配）。 */
.pear-admin .layui-side .pear-nav-tree .layui-nav-child a,
.pear-admin .layui-side .pear-nav-tree .layui-nav-child dd a {
    width: 186px !important;
    max-width: 186px !important;
    min-width: 0 !important;
}