@charset "utf-8";
/* ========================================
   Admin 后台主题 v2 —— 品牌金×墨色（与官网一致）
   主色：金 #D4AF37 · 暖纸中性底 · 60-30-10 用色纪律
   ────────────────────────────────────────
   60%：中性画布与填充（ink 系 / fill 系）
   30%：结构白（卡片 / chrome 条）
   10%：品牌金 —— 只给【选中态 / 主按钮 / 关键强调】
        表头、弹窗标题、提示条、徽标、次要按钮一律中性
   分层说明：本文件管【设计令牌 + 内容区组件】；
   框架布局（顶栏/一二三级菜单/内容卡）见 admin-layout.css。
   本文件先于 admin-layout.css 加载；组件样式对旧 common.css
   的覆盖依赖加载顺序 + !important，勿调整 base.html 中顺序。
   ======================================== */

:root {
    /* 品牌金系 */
    --gold-50: #FBF7EA;
    --gold-100: #F3EDDC;
    --gold-200: #E5DEC9;
    --gold-300: #D4AF37;
    --gold-400: #C9A22F;
    --gold-500: #B8912C;
    --gold-600: #9C7A22;
    --gold-700: #8F6E1A;
    --gold-800: #5E4A12;
    --gold-900: #3D2F0B;

    /* 墨色系（暖中性） */
    --ink-50: #F7F5EF;
    --ink-100: #EFEBDD;
    --ink-400: #B8B09C;
    --ink-500: #97907D;
    --ink-700: #3D3628;
    --ink-800: #26200F;
    --ink-900: #17130A;

    /* 点缀蓝（保留：信息链接等极少量场景） */
    --blue-accent: #4472B0;

    /* ====== 语义令牌：组件只准消费这一层 ====== */
    /* 文字三级 */
    --text-1: #241E10;                /* 标题/正文强调 */
    --text-2: #57503F;                /* 常规正文 */
    --text-3: #97907D;                /* 辅助说明 */
    --text-disabled: var(--ink-400);

    /* 线两级 */
    --line-1: var(--gold-200);        /* 强调线/控件边框 */
    --line-2: #E8E4D6;                /* 发丝分隔线 */

    /* 填充层级 */
    --fill-1: #F7F5EF;                /* 表头/内嵌浅块 */
    --fill-2: #F1EDE0;                /* 次浅填充/按压 */
    --chrome-2: #FBFAF6;              /* 二级导航栏底 */

    /* 页面配色（画布为暖纸灰，与白卡拉开半档明度） */
    --bg-page: #F4F1E8;
    --bg-card: #FFFFFF;
    --bg-hover: var(--gold-100);
    --border-color: var(--gold-200);
    --border-light: var(--ink-100);

    /* 主色 - 品牌金（文字/图标用 deep，底色用 light） */
    --primary: var(--gold-500);
    --primary-light: var(--gold-300);
    --primary-dark: var(--gold-700);
    --primary-bg: var(--gold-50);

    /* 功能色（品牌调校过的低饱和系） */
    --success: #2E9E8F;
    --success-bg: #E5F3F0;
    --info: var(--blue-accent);
    --info-bg: #E9EEF6;
    --warning: #C08A2D;
    --warning-bg: #F8EFDB;
    --danger: #C25B4E;
    --danger-bg: #F7E7E4;

    /* 字体栈与字号阶梯 */
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-20: 20px;

    /* 海拔阶梯（层次感第一通道：画布 e0 → 卡片 e1 → 悬浮 e2 → 弹层 e3） */
    --e1: 0 1px 2px rgba(27, 22, 11, 0.05), 0 1px 3px rgba(27, 22, 11, 0.06);
    --e2: 0 4px 10px -2px rgba(27, 22, 11, 0.10);
    --e3: 0 12px 28px -6px rgba(27, 22, 11, 0.16);
    --shadow-sm: var(--e1);
    --shadow-md: var(--e2);
    --shadow-lg: var(--e3);

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ====== 全局排版基线（此前全站无 font-family 声明） ====== */
body {
    font-family: var(--font-family);
    font-size: var(--fs-14);
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
}

/* 链接：统一金棕（消灭 layui 默认蓝链接） */
a {
    color: var(--gold-700);
}
a:hover {
    color: var(--gold-600);
}

/* 页面背景（暖纸色） */
html, body {
    background-color: var(--bg-page) !important;
}

/* 用户下拉菜单 */
.layui-layout-admin .layui-header .layui-nav-child {
    background-color: #FFFFFF !important;
    border: 1px solid var(--line-2) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--e3) !important;
    top: 55px !important;
    padding: 5px 0 !important;
    min-width: 120px !important;
}

.layui-layout-admin .layui-header .layui-nav-child dd {
    line-height: 40px !important;
    background-color: transparent !important;
}

.layui-layout-admin .layui-header .layui-nav-child dd a,
.layui-layout-admin .layui-header .layui-nav .layui-nav-child a {
    color: var(--text-1) !important;
    padding: 0 20px !important;
    display: block !important;
    font-size: var(--fs-14) !important;
    background-color: transparent !important;
}

.layui-layout-admin .layui-header .layui-nav-child dd a:hover,
.layui-layout-admin .layui-header .layui-nav .layui-nav-child a:hover {
    background-color: var(--gold-50) !important;
    color: var(--gold-700) !important;
}

/* ====== 主体内容区（画布暖纸灰） ====== */
.layui-layout-admin .layui-body {
    background-color: var(--bg-page) !important;
}

/* ====== 按钮三级化 ======
   一级 主操作：金渐变+墨字（全站唯一大面积金）
   二级 次操作：白底+金边（layui-btn-primary）
   三级 行内操作：文字钮（金棕字/浅金 hover，无底无框） */
.layui-btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-out !important;
    background: linear-gradient(135deg, #E2C362 0%, var(--gold-300) 55%, #B8933A 100%) !important;
    color: var(--ink-900) !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(212, 175, 55, 0.35) !important;
}

.layui-btn:hover {
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5) !important;
    filter: brightness(1.04) !important;
}

.layui-btn-normal,
.ypui-bg-color {
    background: linear-gradient(135deg, #E2C362 0%, var(--gold-300) 55%, #B8933A 100%) !important;
    color: var(--ink-900) !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(212, 175, 55, 0.35) !important;
}

.layui-btn-normal:hover,
.ypui-bg-color:hover {
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5) !important;
    filter: brightness(1.04) !important;
}

/* 功能色按钮（低饱和品牌调） */
.layui-btn-green {
    background: var(--success) !important;
    border: none !important;
}

.layui-btn-warm {
    background: var(--warning) !important;
    border: none !important;
}

.layui-btn-danger {
    background: var(--danger) !important;
    border: none !important;
}

/* 二级按钮：白底金边 */
.layui-btn-primary {
    background: var(--bg-card) !important;
    border: 1px solid var(--line-1) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
    filter: none !important;
}

.layui-btn-primary:hover {
    border-color: var(--gold-400) !important;
    color: var(--gold-600) !important;
    background: var(--gold-50) !important;
    box-shadow: none !important;
    filter: none !important;
}

/* 三级按钮：表格行内操作 = 文字钮（此前是蓝字药丸/金渐变小豆） */
.ypui-table-btn .layui-btn,
td:last-child .layui-table-cell .layui-btn {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: var(--radius-sm) !important;
    color: var(--gold-700) !important;
    font-weight: 500 !important;
    padding: 0 8px !important;
    transition: background-color 0.15s ease !important;
}

.ypui-table-btn .layui-btn:hover,
td:last-child .layui-table-cell .layui-btn:hover {
    background: var(--gold-50) !important;
    background-color: var(--gold-50) !important;
    color: var(--gold-800) !important;
    filter: none !important;
    box-shadow: none !important;
}

/* 行内危险操作保持警示色 */
.ypui-table-btn .layui-btn.layui-btn-danger,
td:last-child .layui-table-cell .layui-btn.layui-btn-danger {
    color: var(--danger) !important;
}
.ypui-table-btn .layui-btn.layui-btn-danger:hover,
td:last-child .layui-table-cell .layui-btn.layui-btn-danger:hover {
    background: var(--danger-bg) !important;
    color: var(--danger) !important;
}

/* ====== 表格（表头回归中性——金只留给选中态） ====== */
.layui-table-view {
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--e1) !important;
    border: 1px solid var(--line-2) !important;
}

.layui-table-view .layui-table {
    border: none !important;
}

.layui-table-view .layui-table th {
    background: var(--fill-1) !important;
    color: var(--text-2) !important;
    font-weight: 600 !important;
}

.layui-table-view .layui-table td {
    border-bottom: 1px solid var(--border-light) !important;
}

.layui-table-view .layui-table tbody tr:hover {
    background-color: var(--gold-50) !important;
}

/* 表格分页 */
.layui-table-page {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--line-2) !important;
}

/* ====== 表单控件金色化（清剿旧蓝） ====== */
.layui-form .layui-input,
.layui-form .layui-textarea,
.layui-form .layui-select {
    border-radius: var(--radius-sm) !important;
    border-color: var(--line-1) !important;
    background: var(--bg-card) !important;
}

.layui-form .layui-input:focus,
.layui-form .layui-textarea:focus {
    border-color: var(--gold-400) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16) !important;
}

/* 开关 / 复选 / 单选：选中 = 品牌金 */
.layui-form-onswitch,
.layui-form-checked[lay-skin=primary] i,
.layui-form-radioed i {
    background-color: var(--gold-500) !important;
    border-color: var(--gold-500) !important;
}

.layui-form-radio > i:hover {
    color: var(--gold-600) !important;
}

/* 下拉选中项：浅金底+深金字（Ant 式选中，不用蓝） */
.layui-form-select dl dd.layui-this,
.layui-anim.layui-anim-upbit dd.layui-this {
    background-color: var(--gold-50) !important;
    color: var(--gold-800) !important;
}

/* 分页当前页：金渐变+墨字（与主按钮同语言） */
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background: linear-gradient(135deg, #E2C362 0%, var(--gold-300) 55%, #B8933A 100%) !important;
}

.layui-laypage .layui-laypage-curr em {
    color: var(--ink-900) !important;
}

.layui-laypage a:hover {
    color: var(--gold-700) !important;
}

/* 日期控件 */
.layui-laydate li.layui-this,
.layui-laydate td.layui-this {
    background-color: var(--gold-500) !important;
    color: var(--ink-900) !important;
}

.layui-laydate-footer span:hover,
.layui-laydate-header i:hover,
.layui-laydate-header span:hover {
    color: var(--gold-700) !important;
}

.layui-laydate-footer span[lay-type=date] {
    color: var(--gold-700) !important;
}

/* 弹窗：标题回归中性（金留给确认按钮） */
.layui-layer {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--e3) !important;
}

.layui-layer-title {
    background: var(--fill-1) !important;
    border-bottom: 1px solid var(--line-2) !important;
    color: var(--text-1) !important;
    font-weight: 600 !important;
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: var(--gold-400) !important;
    background: linear-gradient(135deg, #E2C362 0%, var(--gold-300) 55%, #B8933A 100%) !important;
    color: var(--ink-900) !important;
}

/* 取色器确认钮 */
.layui-colorpicker-main .layui-btn-container .layui-btn:last-of-type {
    background: var(--gold-500) !important;
    color: var(--ink-900) !important;
}

/* 卡片 */
.layui-card {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--e1) !important;
    border: 1px solid var(--line-2) !important;
    background: var(--bg-card) !important;
}

.layui-card-header {
    border-bottom: 1px solid var(--line-2) !important;
    font-weight: 600 !important;
}

/* 卡片标题竖条：中性段内唯一允许的小金点缀 */
.ypui-card-brief .ypui-card-title::before {
    background-color: var(--gold-400) !important;
}

/* Tab —— 药丸页签：选中=金渐变+墨字加粗（与一级栏选中项/主按钮同一视觉语言，对比拉满）。
   豁免两处自带风格的页签：fourstage-nav（编辑页下划线式，见 admin-layout.css）、
   ypui-table-tab（表格卡片式，见 common.css） */
.layui-tab:not(.fourstage-nav):not(.ypui-table-tab) .layui-tab-title {
    border-bottom-color: var(--line-2) !important;
    background: transparent !important;
}

.layui-tab:not(.fourstage-nav):not(.ypui-table-tab) .layui-tab-title li {
    height: 32px !important;
    line-height: 32px !important;
    margin: 4px 3px 0 !important;
    padding: 0 22px !important;
    border-radius: 16px !important;
    font-size: var(--fs-14) !important;
    color: var(--text-2) !important;
    background: transparent !important;
    transition: all 0.18s ease !important;
}

.layui-tab:not(.fourstage-nav):not(.ypui-table-tab) .layui-tab-title li:hover {
    color: var(--gold-700) !important;
    background: var(--gold-100) !important;
}

.layui-tab:not(.fourstage-nav):not(.ypui-table-tab) .layui-tab-title li.layui-this {
    color: var(--ink-900) !important;
    background: linear-gradient(135deg, #E2C362 0%, var(--gold-300) 55%, #B8933A 100%) !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(184, 147, 58, 0.35) !important;
}

.layui-tab:not(.fourstage-nav):not(.ypui-table-tab) .layui-tab-title li::after {
    border: none !important;
}

/* ====== 状态徽标（低饱和品牌调功能色，替换 Element 原色） ====== */
.ypui-status-badge.success {
    background: var(--success-bg) !important;
    color: #1F7A6E !important;
}

.ypui-status-badge.warning {
    background: var(--warning-bg) !important;
    color: #96650F !important;
}

.ypui-status-badge.info {
    background: var(--info-bg) !important;
    color: #2F5586 !important;
}

.ypui-status-badge.danger {
    background: var(--danger-bg) !important;
    color: #99372C !important;
}

/* ====== 操作提示条（天蓝 → 暖中性，符合 60-30-10） ====== */
.ypui-tips-bar,
.ypui-tips,
.ypui-tips-compact {
    background: var(--fill-1) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text-2) !important;
}

.ypui-tips-bar::before {
    color: var(--text-3) !important;
}

.ypui-tips-bar span,
.ypui-tips .layui-colla-title,
.ypui-tips-compact .tips-title,
.ypui-tips .layui-colla-content li,
.ypui-tips-compact .tips-content li {
    color: var(--text-2) !important;
}

/* ====== 筛选条与表格同卡（卡片内去嵌套，只留一条分隔） ====== */
.ypui-single-filter-box {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid var(--line-2) !important;
    border-radius: 0 !important;
    margin-bottom: 12px !important;
    padding: 12px 0 !important;
}

/* ====== 统计卡 / 快捷入口 / 版本信息（结构白 e1） ====== */
.ypui-survey-info {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--e1) !important;
    border: 1px solid var(--line-2) !important;
    background: var(--bg-card) !important;
}

.ypui-survey-detail-num {
    color: var(--primary) !important;
}

.statistics-wrap .flex-box {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--e1) !important;
    border: 1px solid var(--line-2) !important;
    background: var(--bg-card) !important;
}

.statistics-wrap .flex-box:hover {
    box-shadow: var(--e2) !important;
    border-color: var(--gold-300) !important;
}

.statistics-wrap .flex-box .num {
    color: var(--primary) !important;
}

/* 常用功能引导条 */
.common-function .layui-elem-quote {
    border-left: 4px solid var(--gold-300) !important;
    background: var(--fill-1) !important;
    color: var(--text-2) !important;
}

/* 版本信息 */
.version_box,
.system_box {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--e1) !important;
    border: 1px solid var(--line-2) !important;
    background: var(--bg-card) !important;
}

.index-info .layui-card {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--e1) !important;
    border: 1px solid var(--line-2) !important;
}

/* 搜索栏 */
.table-search {
    background: var(--bg-card) !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    border: 1px solid var(--line-2) !important;
    border-bottom: none !important;
}

/* ====== 营销工具卡片（原蓝渐变 → 暖中性） ====== */
.ypui-promotion-header .ypui-card-title::before {
    background: linear-gradient(180deg, var(--gold-400), var(--gold-300)) !important;
}

.ypui-promotion-header {
    border-bottom: 1px solid var(--line-2) !important;
}

.ypui-promotion-item {
    background: var(--fill-1) !important;
}

.ypui-promotion-item:hover {
    background: var(--bg-card) !important;
    border-color: var(--line-1) !important;
    box-shadow: 0 2px 12px rgba(184, 147, 58, 0.12) !important;
}

.ypui-promotion-item .ypui-promotion-icon {
    background: linear-gradient(135deg, var(--gold-50), var(--gold-100)) !important;
}

.ypui-promotion-item.ypui-disabled .ypui-promotion-icon {
    background: linear-gradient(135deg, #F5F5F5, #E8E8E8) !important;
}

/* 拖拽装修选中态 */
.draggable-element.selected, .draggable-element:hover {
    border-color: var(--gold-400) !important;
}

/* 版本升级提示 */
.version-upgrade {
    background: var(--warning-bg) !important;
    border: 1px solid var(--warning) !important;
    color: var(--warning) !important;
}

/* 选中文字 */
::selection {
    background-color: var(--gold-300) !important;
    color: var(--ink-900) !important;
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ink-100);
}

::-webkit-scrollbar-thumb {
    background: var(--line-1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-300);
}