/* ============================================================
   洗浴SPA管理系统 - 科幻暗黑主题 v2.0
   设计基调: 深空背景 + 霓虹青/紫发光 + 玻璃态 + 动态脉冲
   ============================================================ */

/* ===== CSS变量 ===== */
:root {
    --bg-deep: #080c1a;
    --bg-surface: #0d1428;
    --bg-card: rgba(13, 20, 40, 0.7);
    --bg-card-hover: rgba(18, 28, 52, 0.85);
    --bg-sidebar: #060918;
    --border-subtle: rgba(0, 229, 255, 0.12);
    --border-glow: rgba(0, 229, 255, 0.35);
    --accent-cyan: #00e5ff;
    --accent-purple: #b44dff;
    --accent-green: #00ff88;
    --accent-orange: #ff8a50;
    --accent-red: #ff4d6a;
    --accent-blue: #4488ff;
    --text-primary: #e0e6f0;
    --text-secondary: #8899bb;
    --text-muted: #556688;
    --glow-cyan: 0 0 20px rgba(0, 229, 255, 0.3);
    --glow-purple: 0 0 20px rgba(180, 77, 255, 0.3);
    --radius: 10px;
    --radius-lg: 14px;
    --sidebar-w: 240px;            /* 侧边栏宽度, 由主题(模板)覆盖 */
    /* ===== 按钮统一尺寸体系 ===== */
    --btn-h: 38px;              /* 标准按钮高度(工具栏/筛选/表单/表格行, 与表单控件等高) */
    --btn-h-lg: 40px;          /* 主操作按钮(模态确认/保存) */
    --btn-h-sm: 30px;          /* 小按钮(表格行内文字操作) */
    --btn-h-xs: 26px;          /* 超小按钮(表格行内图标操作) */
    --btn-radius: 8px;         /* 按钮圆角 */
    --btn-font: 13px;          /* 标准按钮字号 */
    --btn-px: 16px;            /* 标准水平内边距 */
    --btn-px-lg: 26px;         /* 大按钮水平内边距 */
    --btn-px-sm: 12px;         /* 小按钮水平内边距 */
    --btn-px-xs: 8px;          /* 超小按钮水平内边距 */
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 全局重置 ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }
body {
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}
/* 星空粒子背景 */
body::before {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background:
        radial-gradient(2px 2px at 10% 20%, rgba(0, 229, 255, 0.6), transparent),
        radial-gradient(2px 2px at 25% 45%, rgba(180, 77, 255, 0.5), transparent),
        radial-gradient(1px 1px at 40% 15%, rgba(0, 255, 136, 0.4), transparent),
        radial-gradient(2px 2px at 55% 70%, rgba(0, 229, 255, 0.5), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(68, 136, 255, 0.5), transparent),
        radial-gradient(2px 2px at 85% 55%, rgba(180, 77, 255, 0.4), transparent),
        radial-gradient(1px 1px at 15% 80%, rgba(0, 255, 136, 0.4), transparent),
        radial-gradient(1px 1px at 60% 90%, rgba(0, 229, 255, 0.4), transparent),
        radial-gradient(2px 2px at 90% 10%, rgba(255, 138, 80, 0.3), transparent);
    pointer-events: none; z-index: 0;
}
/* 网格线背景 */
body::after {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none; z-index: 0;
}

/* ===== 登录页 ===== */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg-deep); position: relative; z-index: 1;
}
.login-box {
    background: linear-gradient(145deg, rgba(13, 20, 40, 0.95), rgba(8, 12, 26, 0.98));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg); padding: 50px 44px;
    width: 420px; text-align: center;
    box-shadow: var(--glow-cyan), 0 0 60px rgba(0, 229, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    position: relative;
    animation: loginIn 0.6s ease-out;
}
@keyframes loginIn { from { opacity: 0; transform: translateY(-30px) scale(0.96); } to { opacity: 1; transform: none; } }
.login-box::before {
    content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}
.login-title { font-size: 22px; color: #e8eef7; margin-bottom: 32px; letter-spacing: 2px; }
.login-title em { color: var(--accent-cyan); font-style: normal; }
.login-input {
    width: 100%; height: 46px; background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 8px;
    padding: 0 18px; margin-bottom: 16px; font-size: 14px; color: #e8eef7;
    outline: none; transition: var(--transition);
}
.login-input::placeholder { color: rgba(0, 229, 255, 0.5); }
.login-input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 15px rgba(0, 229, 255, 0.15); }
.login-btn {
    width: 100%; height: 46px;
    background: linear-gradient(135deg, var(--accent-cyan), #0099cc);
    color: #060918; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: 4px;
    transition: var(--transition); margin-top: 8px;
}
.login-btn:hover { box-shadow: 0 0 30px rgba(0, 229, 255, 0.4); transform: translateY(-1px); }
.login-tip { margin-top: 24px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }

/* ===== 主界面布局 ===== */
.main-page { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* ---- 侧边栏 ---- */
.sidebar {
    width: var(--sidebar-w, 240px); background: var(--bg-sidebar);
    display: flex; flex-direction: column; position: fixed;
    top: 0; bottom: 0; left: 0; z-index: 1040;
    border-right: 1px solid var(--border-subtle);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4);
}
.sidebar-logo {
    padding: 22px 20px; font-size: 18px; font-weight: 700;
    text-align: center; letter-spacing: 1px;
    border-bottom: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.06), transparent);
    color: var(--text-primary);
}
.sidebar-logo span { color: var(--accent-cyan); }
.sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; overflow-x: hidden; }

/* 一级菜单项 */
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px; color: var(--text-secondary); text-decoration: none;
    font-size: 13px; cursor: pointer; transition: var(--transition);
    border-left: 3px solid transparent; position: relative;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-item:hover { background: rgba(0, 229, 255, 0.05); color: var(--text-primary); }
.nav-item.active {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.12), transparent);
    color: var(--accent-cyan); border-left-color: var(--accent-cyan);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
.nav-item.active::after {
    content: ''; position: absolute; right: 12px; width: 6px; height: 6px;
    background: var(--accent-cyan); border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-cyan);
}
/* 菜单组 (可折叠) */
.nav-group { user-select: none; }
.nav-group-header {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px; color: var(--text-secondary); cursor: pointer;
    font-size: 13px; transition: var(--transition);
    border-left: 3px solid transparent; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.nav-group-header:hover { background: rgba(0, 229, 255, 0.05); color: var(--text-primary); }
.nav-group-header .arrow {
    margin-left: auto; transition: transform 0.3s; font-size: 10px;
    color: var(--text-muted);
}
.nav-group.open .nav-group-header { color: var(--accent-cyan); border-left-color: rgba(0, 229, 255, 0.4); }
.nav-group.open .nav-group-header .arrow { transform: rotate(180deg); color: var(--accent-cyan); }
/* 子菜单 */
.nav-sub { display: none; }
.nav-group.open .nav-sub { display: block; }
.nav-sub-item {
    display: block;
    padding: 10px 16px 10px 42px; color: var(--text-muted);
    text-decoration: none; font-size: 12px; cursor: pointer;
    transition: var(--transition); border-left: 3px solid transparent;
    position: relative; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; line-height: 1.5;
}
.nav-sub-item:hover { background: rgba(0, 229, 255, 0.04); color: var(--text-primary); }
/* 嵌套三级菜单 (nav-group 在 .nav-sub 内) */
.nav-sub .nav-group { margin: 0; }
.nav-sub .nav-group .nav-group-header { padding-left: 42px; font-size: 12px; cursor: pointer; }
.nav-sub .nav-group .nav-sub-item { padding-left: 58px; }
.nav-sub-item.active {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), transparent);
    color: var(--accent-cyan); border-left-color: var(--accent-cyan);
}
.nav-sub-item.active::after {
    content: ''; position: absolute; right: 12px; width: 4px; height: 4px;
    background: var(--accent-cyan); border-radius: 50%;
    box-shadow: 0 0 6px var(--accent-cyan);
}
/* 子菜单中的功能操作项（如修改密码），带顶部分隔线 */
.nav-sub-divider {
    margin-top: 6px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--border-subtle) !important;
    color: var(--accent-cyan) !important;
    font-weight: 600;
}
.nav-sub-divider:hover { background: rgba(0, 229, 255, 0.06) !important; }

/* 侧边栏底部 */
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border-subtle); flex-shrink: 0; }
.logout-btn {
    width: 100%; height: var(--btn-h-sm, 34px); padding: 0 12px; font-size: 12px;
    background: transparent; color: var(--accent-red);
    border: 1px solid rgba(255, 77, 106, 0.3); border-radius: var(--btn-radius);
    cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logout-btn:hover { background: rgba(255, 77, 106, 0.1); box-shadow: 0 0 15px rgba(255, 77, 106, 0.2); }

/* ---- 主内容区 ---- */
.content { flex: 1; margin-left: var(--sidebar-w, 240px); padding: 32px 32px 40px; min-height: 100vh; }
.page-content { display: none; animation: fadeSlideIn 0.35s ease-out; }
.page-content.active { display: block; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.page-title {
    font-size: 22px; font-weight: 700; margin-bottom: 24px;
    display: flex; align-items: center; justify-content: space-between;
    color: var(--text-primary); letter-spacing: 0.5px;
}
.page-title::before {
    content: ''; display: inline-block; width: 4px; height: 20px;
    background: var(--accent-cyan); border-radius: 2px; margin-right: 12px;
    box-shadow: 0 0 12px var(--accent-cyan);
}

/* ===== 统计卡片(科幻版) ===== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 24px; }
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 22px 20px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px); transition: var(--transition);
    position: relative; overflow: hidden;
}
.stat-card:hover { border-color: var(--border-glow); box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0; transition: var(--transition);
}
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-icon { font-size: 32px; margin-bottom: 8px; display: block; }
.stat-card .stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.stat-card .stat-value {
    font-size: 28px; font-weight: 700; margin-top: 6px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-card .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* 统计卡色彩变体 */
.stat-card.cyan .stat-value { background: linear-gradient(135deg, var(--accent-cyan), #0088bb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-card.purple .stat-value { background: linear-gradient(135deg, var(--accent-purple), #8800cc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-card.green .stat-value { background: linear-gradient(135deg, var(--accent-green), #00aa55); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-card.orange .stat-value { background: linear-gradient(135deg, var(--accent-orange), #ff5500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* 脉冲动画指示器 */
.pulse-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-green); margin-right: 6px;
    box-shadow: 0 0 8px var(--accent-green);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.5; }
}

/* ===== 通用卡片 ===== */
.card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: 22px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px); margin-bottom: 20px;
}
.card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 14px; font-weight: 600; color: var(--text-primary);
    font-size: 15px;
}
.flex-1 { flex: 1; }

/* ===== 图表区域 ===== */
.chart-area { min-height: 200px; padding: 10px 0; }
.chart-area canvas { max-height: 350px; }

/* ===== 仪表盘 ===== */
.dashboard-row { display: flex; gap: 20px; }
.pending-list { display: flex; flex-direction: column; gap: 10px; }
.pending-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: rgba(0, 229, 255, 0.03);
    border: 1px solid var(--border-subtle); border-radius: 8px;
    transition: var(--transition);
}
.pending-item:hover { border-color: var(--border-glow); }
.pending-count { font-size: 22px; font-weight: 700; color: var(--accent-cyan); }

/* ===== 导航标签(Tabs) - 如果还有用 ===== */
.nav-tabs { border-bottom: 1px solid var(--border-subtle); position: -webkit-sticky; position: sticky; top: 0; z-index: 10; }
.nav-tabs .nav-link {
    color: var(--text-muted); border: none; padding: 10px 18px;
    font-size: 13px; transition: var(--transition);
}
.nav-tabs .nav-link:hover { color: var(--text-primary); border: none; }
.nav-tabs .nav-link.active {
    color: var(--accent-cyan); background: transparent; border: none;
    border-bottom: 2px solid var(--accent-cyan);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

/* ===== 工具栏/筛选区 ===== */
.toolbar { display: flex; gap: 12px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
.search-input {
    height: 38px; background: rgba(0, 229, 255, 0.03); border: 1px solid var(--border-subtle);
    border-radius: 8px; padding: 0 14px; font-size: 13px; color: var(--text-primary);
    outline: none; width: 260px; transition: var(--transition);
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 12px rgba(0, 229, 255, 0.1); }
.toolbar select {
    height: 38px; background: rgba(0, 229, 255, 0.03); border: 1px solid var(--border-subtle);
    border-radius: 8px; padding: 0 14px; font-size: 13px; color: var(--text-primary);
    outline: none;
}

/* Form控件暗黑化 */
.form-control, .form-select {
    background: rgba(0, 229, 255, 0.03) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    transition: var(--transition) !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.1) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-label { color: var(--text-secondary); font-size: 12px; margin-bottom: 4px; }
.form-select option { background: var(--bg-surface); color: var(--text-primary); }

/* ===== 按钮(统一尺寸系统) ===== */
/* 统一基础: 所有 .btn 共享高度/圆角/字号, 文本垂直居中 */
.btn {
    height: var(--btn-h); padding: 0 var(--btn-px);
    font-size: var(--btn-font); border-radius: var(--btn-radius);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 600; line-height: 1; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
    transition: var(--transition);
}
.btn-sm { height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: 12px; border-radius: calc(var(--btn-radius) - 2px); }
.btn-lg { height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: 14px; }
.btn-xs { height: var(--btn-h-xs); padding: 0 var(--btn-px-xs); font-size: 12px; border-radius: calc(var(--btn-radius) - 2px); }

/* Bootstrap 彩色变体: 仅改配色, 尺寸沿用 .btn 统一体系 */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-cyan), #0099cc) !important;
    border: none !important; color: #060918 !important; font-weight: 600;
}
.btn-primary:hover { box-shadow: 0 0 20px rgba(0, 229, 255, 0.35) !important; }
.btn-outline-primary {
    border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important;
}
.btn-outline-primary:hover { background: rgba(0, 229, 255, 0.12) !important; }
.btn-outline-secondary { border-color: var(--text-muted) !important; color: var(--text-secondary) !important; }
.btn-outline-secondary:hover { background: rgba(136, 153, 187, 0.1) !important; color: var(--text-primary) !important; }
.btn-outline-success { border-color: var(--accent-green) !important; color: var(--accent-green) !important; }
.btn-outline-success:hover { background: rgba(0, 255, 136, 0.1) !important; }
.btn-outline-warning { border-color: var(--accent-orange) !important; color: var(--accent-orange) !important; }
.btn-outline-warning:hover { background: rgba(255, 138, 80, 0.1) !important; }
.btn-outline-danger { border-color: var(--accent-red) !important; color: var(--accent-red) !important; }
.btn-outline-danger:hover { background: rgba(255, 77, 106, 0.1) !important; }
.btn-outline-info { border-color: var(--accent-purple) !important; color: var(--accent-purple) !important; }
.btn-outline-info:hover { background: rgba(180, 77, 255, 0.1) !important; }

/* 业务按钮(向后兼容旧 class) —— 全部套用统一高度与圆角, 仅配色不同 */
.btn-add, .btn-export, .btn-search, .btn-save {
    height: var(--btn-h); padding: 0 var(--btn-px);
    font-size: var(--btn-font); border-radius: var(--btn-radius);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 600; line-height: 1; cursor: pointer; border: none; white-space: nowrap;
    transition: var(--transition);
}
.btn-add { background: linear-gradient(135deg, var(--accent-green), #009955); color: #060918; }
.btn-add:hover { box-shadow: 0 0 15px rgba(0, 255, 136, 0.3); }
.btn-export { background: linear-gradient(135deg, var(--accent-blue), #2266dd); color: #fff; }
.btn-export:hover { box-shadow: 0 0 15px rgba(68, 136, 255, 0.3); }
.btn-search { background: linear-gradient(135deg, var(--accent-cyan), #0099cc); color: #060918; }
/* 主操作按钮(模态保存)略大, 与 .btn-cancel 等高对齐 */
.btn-save {
    height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: 14px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); color: #fff;
    margin-top: 16px;
}
/* 模态底部按钮栏自带间距, 取消保存按钮的额外上边距, 保证与取消按钮等高对齐 */
.modal-actions .btn-save { margin-top: 0; }
.btn-save:hover { box-shadow: 0 0 25px rgba(0, 229, 255, 0.35); }

/* ===== 数据表格(科幻版) ===== */
.data-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--bg-card); border-radius: var(--radius);
    overflow: hidden; border: 1px solid var(--border-subtle);
}
.data-table th {
    background: rgba(0, 229, 255, 0.05); padding: 13px 16px;
    text-align: left; font-size: 12px; color: var(--accent-cyan); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-glow);
}
.data-table td {
    padding: 11px 16px; font-size: 13px; color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}
.data-table tbody tr { transition: var(--transition); }
.data-table tbody tr:hover { background: rgba(0, 229, 255, 0.04); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* Bootstrap表格暗黑覆盖 */
.table { color: var(--text-primary) !important; }
.table-light { --bs-table-bg: rgba(0, 229, 255, 0.06) !important; --bs-table-color: var(--accent-cyan) !important; }
.table-hover tbody tr:hover { background: rgba(0, 229, 255, 0.04) !important; }
.table td, .table th { border-color: var(--border-subtle) !important; vertical-align: middle; }
.page-link {
    background: var(--bg-surface) !important; border-color: var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}
.page-link:hover { background: rgba(0, 229, 255, 0.1) !important; color: var(--accent-cyan) !important; }
.page-item.active .page-link {
    background: linear-gradient(135deg, var(--accent-cyan), #0099cc) !important;
    border-color: var(--accent-cyan) !important; color: #060918 !important; font-weight: 600;
}
.page-item.disabled .page-link { opacity: 0.4; background: transparent !important; }

/* ===== Badge/Tag ===== */
.badge { font-weight: 500; letter-spacing: 0.3px; }
.bg-success { background: rgba(0, 255, 136, 0.15) !important; color: var(--accent-green) !important; }
.bg-danger { background: rgba(255, 77, 106, 0.15) !important; color: var(--accent-red) !important; }
.bg-warning { background: rgba(255, 138, 80, 0.15) !important; color: var(--accent-orange) !important; }
.bg-info { background: rgba(0, 229, 255, 0.15) !important; color: var(--accent-cyan) !important; }
.bg-primary { background: rgba(68, 136, 255, 0.15) !important; color: var(--accent-blue) !important; }
.bg-secondary { background: rgba(136, 170, 204, 0.12) !important; color: var(--text-secondary) !important; }

/* 旧Tag兼容 */
.tag {
    display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
}
.tag-success { background: rgba(0, 255, 136, 0.12); color: var(--accent-green); }
.tag-warning { background: rgba(255, 138, 80, 0.12); color: var(--accent-orange); }
.tag-danger { background: rgba(255, 77, 106, 0.12); color: var(--accent-red); }
.tag-info { background: rgba(0, 229, 255, 0.12); color: var(--accent-cyan); }
.tag-gray { background: rgba(136, 170, 204, 0.1); color: var(--text-muted); }
.tag-primary { background: rgba(0, 229, 255, 0.12); color: var(--accent-cyan); }
.tag-cyan { background: rgba(0, 229, 255, 0.12); color: var(--accent-cyan); }
.tag-hot { background: rgba(255, 77, 106, 0.14); color: var(--accent-red); }
.tag-new { background: rgba(124, 220, 226, 0.14); color: #4dd0e1; }
.tag-limit { background: rgba(255, 184, 0, 0.14); color: #ffb800; }

/* ===== 服务模块专用 UI ===== */
.fw-500 { font-weight: 500; }
.req { color: var(--accent-red); }
.checkbox-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.checkbox-row label { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }

.img-upload-row { display: flex; align-items: center; gap: 12px; }
.img-preview-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.img-thumb { position: relative; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-subtle); }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.img-thumb button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.img-thumb button:hover { background: var(--accent-red); }

.pkg-svc-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px; }
.pkg-svc-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid var(--border-subtle); }
.pkg-svc-item:last-child { border-bottom: none; }
.pkg-svc-item label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin: 0; }
.pkg-svc-item .pkg-svc-qty { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-primary); padding: 4px 6px; font-size: 13px; }

.review-item { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.review-item:last-child { border-bottom: none; }
.review-item p { margin: 6px 0 0; color: var(--text-secondary); font-size: 13px; }

/* ===== 弹窗/Modal(科幻版) ===== */
.modal-content {
    background: linear-gradient(145deg, var(--bg-surface), var(--bg-deep)) !important;
    border: 1px solid var(--border-glow) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--glow-cyan), 0 0 40px rgba(0, 0, 0, 0.5) !important;
}
.modal-header, .modal-footer { border-color: var(--border-subtle) !important; }
.modal-title { color: var(--text-primary) !important; }
.btn-close { filter: invert(0.6); }

/* 旧弹窗兼容 */
.modal-mask {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(4, 6, 14, 0.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    z-index: 2000; display: flex; align-items: center; justify-content: center;
}
/* 修改密码弹窗位置下移 */
#changePwdMask { align-items: flex-start; padding-top: 15vh; }
.modal-box {
    background: linear-gradient(145deg, var(--bg-surface), var(--bg-deep));
    border: 1px solid var(--border-glow); border-radius: var(--radius-lg);
    width: 600px; max-width: 90vw; max-height: 85vh; overflow-y: auto;
    box-shadow: var(--glow-cyan), 0 0 40px rgba(0, 0, 0, 0.5);
    padding: 0 0 16px;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.modal-header h3 { font-size: 17px; color: var(--text-primary); }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); transition: var(--transition); }
.modal-close:hover { color: var(--accent-red); }
.modal-body { padding: 22px; }
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(4, 6, 14, 0.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    z-index: 2000; display: flex; align-items: center; justify-content: center;
}
.modal-actions {
    display: flex; gap: 10px; justify-content: flex-end; align-items: center;
    padding: 16px 22px 0; border-top: 1px solid var(--border-subtle);
    margin-top: 12px;
}
.btn-cancel {
    height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: 14px;
    background: rgba(255,255,255,0.06); color: var(--text-secondary);
    border: 1px solid var(--border-subtle); border-radius: var(--btn-radius);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-weight: 600; transition: var(--transition);
}
.btn-cancel:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.modal-box > h3:first-child {
    padding: 16px 22px; margin: 0; font-size: 16px; color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}
.modal-box .form-group,
.modal-box > .row,
.modal-box > div:not([class]) { padding-left: 22px; padding-right: 22px; }
.modal-box > div > .form-group { padding-left: 0; padding-right: 0; }

/* ===== 表单(暗黑) ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; height: 38px; background: rgba(0, 229, 255, 0.03);
    border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 0 14px; font-size: 13px; color: var(--text-primary); outline: none;
    transition: var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
}
.form-group textarea { height: 80px; padding: 10px 14px; resize: vertical; }

/* ===== 分页器(旧) ===== */
.pager { display: flex; justify-content: center; gap: 8px; padding: 22px 0; }
.pager button {
    min-width: 36px; height: 36px; border: 1px solid var(--border-subtle);
    background: var(--bg-surface); color: var(--text-secondary);
    border-radius: 8px; cursor: pointer; font-size: 13px; transition: var(--transition);
}
.pager button:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.pager button.active {
    background: linear-gradient(135deg, var(--accent-cyan), #0099cc);
    color: #060918; border-color: var(--accent-cyan); font-weight: 600;
}
.pager button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ===== 分销配置 ===== */
.config-form { max-width: 520px; }
.config-row { display: flex; align-items: center; margin-bottom: 14px; }
.config-row label { width: 180px; font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.config-input {
    height: 38px; flex: 1; background: rgba(0, 229, 255, 0.03);
    border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 0 14px; font-size: 13px; color: var(--text-primary); outline: none;
}
.config-row select {
    height: 38px; flex: 1; background: rgba(0, 229, 255, 0.03);
    border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: 0 14px; font-size: 13px; color: var(--text-primary); outline: none;
}

/* ===== 财务摘要 ===== */
.finance-summary-card { text-align: center; }
.finance-summary-card .stat-value { font-size: 28px; }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.4); }

/* ===== 响应式微调 ===== */
@media (max-width: 768px) {
    .sidebar { width: 200px; }
    .content { margin-left: 200px; padding: 24px 20px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== 页面装修编辑器 ===================== */
.decor-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.decor-editor-wrap { display: flex; flex-direction: column; align-items: center; padding: 20px 0; position: relative; }
/* 缩放容器: 占位尺寸 = 设备尺寸 × 显示比例, 避免 scale 后留白/溢出 */
.preview-scale-wrap {
  position: relative;
  margin: 0 auto 14px;
  overflow: hidden;
  /* width / height 由 JS 动态设置 */
  transition: width .3s ease, height .3s ease;
}
/* 手机预览区(无外壳) — 固定视口，内部滚动 */
.decor-phone {
  width: 390px;
  height: 844px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transform-origin: top left;
  position: relative; /* 供浮动滚动条指示器绝对定位 */
  transition: transform .3s ease, width .3s ease, height .3s ease;
}
/* 标题栏已废弃, 隐藏 */
.decor-phone-bar { display: none !important; }

/* ====== 仿小程序顶部状态栏+导航栏 ====== */
.phone-top-bar {
  flex-shrink: 0;
  background: #fff;
  border-bottom: .5px solid #e5e5e5;
  cursor: pointer;
}
.phone-status-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 4px;
  font-size: 13px; font-weight: 600; color: #000;
  line-height: 1;
}
.psb-carrier { letter-spacing: -1px; font-size: 12px; }
.psb-time { font-size: 15px; font-weight: 600; }
.psb-icons { display: flex; align-items: center; gap: 5px; color: #000; }
/* 信号强度(4格柱状) */
.psi-signal {
  display: flex; align-items: flex-end; gap: 1.2px;
  height: 11px; width: 14px;
}
.psi-signal span {
  display: block; background: #000; border-radius: .5px;
}
.psi-signal span:nth-child(1) { width: 2.5px; height: 3px; }
.psi-signal span:nth-child(2) { width: 2.5px; height: 5px; }
.psi-signal span:nth-child(3) { width: 2.5px; height: 7.5px; }
.psi-signal span:nth-child(4) { width: 2.5px; height: 10px; }
/* WiFi 图标(三段扇形弧线 + 底部圆点) */
.psi-wifi {
  width: 14px; height: 11px; position: relative;
}
.psi-wifi::before,
.psi-wifi::after {
  content: ''; position: absolute; left: 50%;
  border-style: solid; border-color: transparent;
  border-bottom-color: #000; border-left-color: #000; border-right-color: #000;
  transform-origin: center bottom;
}
/* 三层扇形(用 ::before 的 box-shadow 叠三层) */
.psi-wifi::before {
  bottom: 3px; margin-left: -7px;
  width: 0; height: 0;
  border-width: 0 6px 5px 6px;
  border-radius: 50% 50% 0 0;
  box-shadow:
    0 -3px 0 0 #000,    /* 中层弧 */
    0 -6px 0 0 #000;    /* 外层弧 */
}
/* 底部圆点 */
.psi-wifi::after {
  bottom: 0; left: 50%; margin-left: -2px;
  width: 4px; height: 4px; background: #000; border-radius: 50%;
  border-width: 0;
}
/* 电池图标(满电) */
.psi-battery {
  display: flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: -.3px;
}
.psi-bat-body {
  width: 21px; height: 10px;
  border: 1.2px solid #000;
  border-radius: 2.5px;
  background: #000; /* 满电=全黑填充 */
  position: relative;
}
.psi-bat-cap {
  width: 2px; height: 5px; background: #000;
  border-radius: 0 1px 1px 0;
}

/* 导航栏行(标题 + 胶囊按钮) */
.phone-nav-row {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 16px 8px;
  min-height: 38px;
  position: relative;
}
.pnb-title {
  position: absolute; left: 88px; right: 88px; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 17px; font-weight: 600; color: #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pnb-capsule {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.92);
  border: .5px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 4px 8px;
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 1px 6px rgba(0,0,0,.10);
}
/* 第 1 个点 */
.pnb-capsule .pnb-dot {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: #222; opacity .82;
}
/* 实心圆点（菜单）—— 位于第 1 个点之后，比第 1 个点大 1px */
.pnb-capsule .pnb-square {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: #222; opacity .85;
}
/* 右侧：同心圆（关闭 ◎） */
.pnb-circle {
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  border: 1.5px solid #222; background: transparent !important;
  position: relative; opacity .88 !important;
}
/* 内圈小点 */
.pnb-circle::after {
  content: '';
  display: block; position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5px; height: 4.5px; border-radius: 50%;
  background: #222; opacity .9;
}

/* 画布: 填满剩余空间，内容超出时内部滚动（模拟真实手机视口）
   原生滚动条隐藏 → 内容贴边零间隙; 视觉滚动条由 JS 驱动的浮动指示器(.decor-scroll-indicator)实现 */
.decor-canvas {
  flex: 1;
  min-height: 0;
  background: #f2f4f7;
  padding: 0;
  overflow-y: auto;
  position: relative;               /* 落点指示线(.decor-drop-indicator)定位基准 */
  /* 隐藏原生滚动条: 内容完全贴边, 无间隙 */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* 旧 Edge */
}
.decor-canvas::-webkit-scrollbar { display: none; }  /* WebKit/Chrome/Safari */

/* JS 驱动的浮动滚动条指示器(覆盖在画布右边缘之上, 不占布局空间) */
.decor-scroll-indicator {
  position: absolute; right: 2px; top: 0; width: 4px;
  background: rgba(0, 229, 255, 0.35);
  border-radius: 2px; opacity: 0;
  transition: opacity .45s ease; pointer-events: none; z-index: 6;
}

/* 拖拽落点指示线(库→画布插入 / 画布内重排时显示) */
.decor-drop-indicator {
  position: absolute; left: 8px; right: 8px; height: 0;
  border-top: 2px dashed rgba(0, 229, 255, 0.9);
  display: none; pointer-events: none; z-index: 7;
}
/* 拖拽中的组件卡: 抬起感(半透明 + 阴影, 制造"拿起"滑动感) */
.decor-comp.dragging { opacity: .5; box-shadow: 0 10px 26px rgba(0,0,0,.18); cursor: grabbing; }
/* 松手落位: 平滑滑入 */
.decor-comp.just-dropped { animation: compDropIn .28s ease; }
@keyframes compDropIn {
  from { transform: translateY(-10px); opacity: .55; }
  to   { transform: none; opacity: 1; }
}
.decor-scroll-indicator.show { opacity: 1; }

/* 底部机型选择器 */
.device-selector-wrap {
  display: flex; align-items: center; gap: 16rpx; margin-top: 14px;
  padding: 8rpx 16rpx; background: #f5f5f5; border-radius: 24rpx; font-size: 13px;
}
.device-selector-wrap label { color: #666; white-space: nowrap; font-weight: 500; }
.device-selector-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff; border: 1px solid #ddd; border-radius: 8rpx;
  padding: 4rpx 28rpx 4rpx 12rpx; font-size: 13px; color: #333;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.decor-empty { text-align: center; color: #999; padding: 40px 10px; font-size: 13px; }
.decor-tip { color: #888; font-size: 12px; margin-top: 12px; text-align: center; }

/* ========== 轮播图属性面板(双Tab) ========== */
.banner-prop-panel { padding: 0; }
.bpp-title {
  font-size: 16px; font-weight: 600; margin-bottom: 14px;
  color: var(--text-primary, #1a1a2e);
}
.bpp-tabs {
  display: flex; border-radius: 24px; background: #f0f0f5; padding: 3px; gap: 0;
}
.bpp-tab {
  flex: 1; border: none; background: none; cursor: pointer; font-size: 13px;
  font-weight: 500; color: #666; padding: 8px 16px; border-radius: 22px; transition: all .25s ease;
}
.bpp-tab.active {
  background: #1890ff; color: #fff; box-shadow: 0 2px 8px rgba(24,144,255,.35);
}
.bpp-content { display: none; }
.bpp-content.active { display: block; }

/* ---- 内容 Tab ---- */
.banner-tip {
  color: #999; font-size: 12px; line-height: 1.5; margin-bottom: 12px; padding: 8px 4px;
}
.slide-item-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0;
}
.slide-item-row:last-of-type { border-bottom: none; }
.slide-drag {
  display: inline-flex; flex-wrap: wrap; width: 14px; gap: 3px;
  cursor: grab; user-select: none; flex-shrink: 0; padding: 2px 0; align-content: center;
}
.slide-drag i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #ccc; }
.slide-drag:hover i { background: #999; }
.slide-drag:hover { color: #999; }
.slide-item-row[draggable="true"] { cursor: grab; }
.slide-item-row[draggable="true"]:active { cursor: grabbing; }
.slide-item-row.drag-over {
    outline: 2px dashed #d4a574; outline-offset: 2px; border-radius: 6px; background: #fffaf2;
}
.slide-thumb {
  cursor: pointer; position: relative; width: 80px; height: 100px; border-radius: 8px;
  overflow: visible; background: #eee; flex-shrink: 0; border: 1px solid #e0e0e0;
}
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.slide-thumb.uploading { opacity: .55; cursor: wait; }
.slide-thumb.uploading::after {
  content: "上传中"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 11px; color: #fff;
  background: rgba(0,0,0,.45); border-radius: 6px;
}
.slide-no-img {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 18px; color: #bbb;
}
.slide-del-btn {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; background: #999; color: #fff; border: none; font-size: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1; z-index: 1;
}
.slide-del-btn:hover { background: #e4393c; }

/* ---------- 草稿管理 / 发布总览 ---------- */
.dm-tip { font-size: 12px; color: var(--text-muted, #888); margin: 0 0 12px; line-height: 1.6; }
.dm-list { display: flex; flex-direction: column; gap: 8px; }
.dm-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: #f7f8fa; border: 1px solid #eceef1; border-radius: 8px;
}
.dm-name { font-weight: 600; min-width: 72px; }
.dm-count { color: #666; font-size: 13px; min-width: 78px; }
.dm-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.dm-status.on { color: #1a9d54; background: #e6f7ee; }
.dm-status.off { color: #c08a00; background: #fff6e0; }
.dm-time { color: #999; font-size: 12px; flex: 1; }
.dm-actions { display: flex; gap: 6px; }
.dm-footer { margin-top: 14px; text-align: right; }
.slide-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: 0; padding-top: 0; }
.slide-field { display: flex; align-items: center; }
.slide-field label { font-size: 12px; color: #666; margin-bottom: 0; display: inline-block; white-space: nowrap; width: 32px; flex-shrink: 0; }
.slide-field .form-control {
  height: 34px; width: 100%; box-sizing: border-box;
  font-size: 13px; border-color: #ddd; border-radius: 8px; padding: 0 10px;
}
.slide-link-field .slide-link-row {
  position: relative; display: flex; align-items: center; cursor: pointer; flex: 1; min-width: 0;
}
.slide-link-row .form-control { flex: 1; cursor: pointer; background: #fafafa; padding-right: 28px; }
.slide-link-arrow {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: #ccc; font-size: 16px; pointer-events: none;
}
.btn-banner-add {
  display: block; width: 100%; padding: 10px; margin-top: 12px;
  background: #1890ff; color: #fff; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity .2s;
}
.btn-banner-add:hover { opacity: .9; }

/* ---- 导航组内容 Tab ---- */
.nav-item-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid #f0f0f0;
}
.nav-item-row:last-of-type { border-bottom: none; }
.nav-item-icon {
  position: relative; width: 72px; height: 72px; min-width: 72px;
  border-radius: 10px; overflow: visible; background: #f5f7fa;
  border: 1px solid #e8ecf1; cursor: pointer; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-item-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.nav-no-icon {
  font-size: 22px; color: #c0c8d4;
}
.nav-item-fields {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  min-width: 0; padding-top: 2px;
}

/* ---- 样式 Tab ---- */
.style-row {
  display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5;
}
.style-row:last-child { border-bottom: none; }
.style-row > label {
  width: 90px; flex-shrink: 0; font-size: 13px; color: #555; font-weight: 500;
}

/* 样式切换按钮组(圆角/方角) */
.style-toggle-group {
  display: flex; gap: 6px; margin-left: auto;
}
.stoggle-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border: 1.5px solid #ddd; border-radius: 8px; background: #fff;
  font-size: 13px; color: #555; cursor: pointer; transition: all .2s;
}
.stoggle-btn.active {
  border-color: #1890ff; background: #e6f7ff; color: #1890ff; box-shadow: 0 1px 4px rgba(24,144,255,.15);
}
.stoggle-btn i { font-style: normal; }

/* 指示器样式按钮组 */
.indicator-btn-group,
.align-btn-group {
  display: flex; gap: 6px; margin-left: auto;
}
.ind-btn, .align-btn {
  width: 40px; height: 34px; border: 1.5px solid #ddd; border-radius: 8px; background: #fff;
  font-size: 14px; color: #666; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.ind-btn.active, .align-btn.active {
  border-color: #1890ff; background: #1890ff; color: #fff; box-shadow: 0 1px 4px rgba(24,144,255,.25);
}

/* 开关行 */
.switch-row > .decor-switch { margin-left: auto; }

/* 数值输入行(如: 图片透出区域 / 渐变带高度) */
.number-row { display: flex; align-items: center; }
.number-row > label { flex: 0 0 auto; margin-bottom: 0; }
.number-row > .num-wrap { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.number-row > .num-wrap > .decor-num {
  width: 64px; height: 32px; padding: 0 8px; text-align: center;
  border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 13px; color: #333;
}
.number-row > .num-wrap > .decor-num:focus { outline: none; border-color: #1890ff; }
.number-row > .num-wrap > .num-hint { font-size: 12px; color: #999; white-space: nowrap; }

/* 高级折叠区 */
.style-advanced {
  margin-top: 4px; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden;
}
.style-advanced summary {
  display: flex; align-items: center; padding: 8px 12px;
  background: #fafafa; font-size: 13px; color: #666; cursor: pointer;
  user-select: none; transition: background .2s;
}
.style-advanced summary:hover { background: #f0f0f0; }
.style-advanced .adv-arrow {
  margin-left: auto; font-size: 11px; transition: transform .2s;
}
.style-advanced[open] .adv-arrow { transform: rotate(180deg); }
.style-advanced > *:not(summary) { padding: 0 12px; }

/* 颜色选择行 */
.color-row .color-pickers {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.cp-item {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.cp-item input[type="color"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none; border-radius: 8px; cursor: pointer; padding: 0;
  -webkit-appearance: none; appearance: none;
}
.cp-reset {
  padding: 3px 10px; border: none; border-radius: 4px; font-size: 11px; cursor: pointer;
  color: #fff; background: #666; transition: opacity .2s;
}
.cp-reset:hover { opacity: .85; }
.cp-reset-white { background: #e0e0e0; color: #333; }

/* 滑块行 */
.slider-wrap { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 1; max-width: 220px; }
.slider-wrap input[type="range"] {
  flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: #ddd;
  border-radius: 2px; outline: none; cursor: pointer;
}
.slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #1890ff;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); border: 2px solid #fff;
}
.slider-num {
  width: 50px; height: 30px; text-align: center; border: 1px solid #ddd; border-radius: 6px;
  font-size: 13px; padding: 0 4px; outline: none;
}

/* ---- 组件卡片: 真实手机预览风格(点击选中, 显示控制层) ---- */
.decor-comp {
    position: relative;
    cursor: default;
}
/* 选中态: 蓝色边框高亮 */
.decor-comp.selected {
    outline: 2px solid #1890ff;
    outline-offset: -2px;
    z-index: 3;
}
.decor-comp.off .comp-preview { filter: grayscale(1) opacity(.35); pointer-events: none; }
.decor-comp.off.selected { outline-color: #999; }

/* hover 时显示标签(未选中时) */
.decor-comp:hover .comp-label { opacity: .7; }
/* 选中时标签始终显示 */
.decor-comp.selected .comp-label { opacity: 1; }

/* (旧 .comp-toolbar 内联规则已移除, 统一用 .comp-toolbar-float 共享浮动工具栏) */

/* 预览主体 - 直接展示组件在手机上的样子 */
.comp-preview {
    min-height: 20px;
}

/* 左上角标签: 默认隐藏, hover/选中时淡入 */
.comp-label {
    position: absolute;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: #1890ff;
    border-radius: 0 0 4px 0;
    font-size: 10px;
    color: #fff;
    z-index: 5;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}
.comp-label > * { pointer-events: auto; }
.comp-drag { cursor: grab; color: rgba(255,255,255,.7); font-size: 11px; flex-shrink: 0; margin-right: 1px; }
.comp-icon { font-size: 10px; flex-shrink: 0; }
.comp-name { font-weight: 600; font-size: 10px; white-space: nowrap; line-height: 1; }

/* hover 时显示标签 + 工具栏 */
.decor-comp:hover .comp-label { opacity: 1; }

/* 共享浮动工具栏: 手机右边框外 - 蓝底白字 (left/top 由 JS 动态计算) */
.comp-toolbar-float {
    position: absolute;
    top: 44px; left: 0;
    width: 36px;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 3px;
    background: #1890ff !important;
    border: 2px solid #096dd9 !important;
    border-radius: 8px;
    box-shadow: 0 3px 14px rgba(24,144,255,.45) !important;
    opacity: 0; visibility: hidden;
    transform: translateX(10px);
    transition: all .2s ease;
    z-index: 999;
    padding: 5px 3px;
}
.comp-toolbar-float .ct-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: none; border-radius: 6px;
    background: rgba(255,255,.25);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s;
}
.comp-toolbar-float .ct-btn:hover { background: rgba(255,255,.45); }
.comp-toolbar-float .ct-btn.ct-del:hover { background: #ff4d4f; }
.comp-toolbar-float .ct-btn.ct-edit:hover { background: rgba(255,255,.55); }

/* 画布底部操作按钮组 */
.canvas-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
}
.canvas-action-btn {
    font-size: 12px;
    padding: 5px 14px;
}
.canvas-action-btn.danger { color: #e74c3c; border-color: #e74c3c; }

/* 开关 (嵌入 comp-label) */
.comp-switch { position: relative; display: inline-block; width: 26px; height: 14px; flex-shrink: 0; }
.comp-switch input { opacity: 0; width: 0; height: 0; }
.comp-switch span { position: absolute; inset: 0; background: rgba(255,255,255,.35); border-radius: 14px; transition: .15s; }
.comp-switch span:before { content: ''; position: absolute; width: 10px; height: 10px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .15s; }
.comp-switch input:checked + span { background: #52c41a; }
.comp-switch input:checked + span:before { transform: translateX(12px); }

/* 弹窗 */
.decor-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 3000; }
.decor-modal { width: 560px; max-width: 94vw; max-height: 88vh; background: #fff; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.decor-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #eef1f5; font-weight: 600; }
.decor-modal-x { border: none; background: none; font-size: 18px; cursor: pointer; color: #888; }
.decor-modal-body { padding: 18px; overflow-y: auto; }
.decor-modal-foot { padding: 12px 18px; border-top: 1px solid #eef1f5; display: flex; justify-content: flex-end; gap: 8px; }

/* 调色板 / 模板 */
.decor-palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.decor-palette-item { border: 1px solid #e3e8ef; border-radius: 10px; padding: 16px 10px; text-align: center; cursor: grab; transition: .15s; }
.decor-palette-item:active { cursor: grabbing; }
.decor-palette-item:hover { border-color: var(--accent-cyan, #00e5ff); background: #f3fdff; }
.dp-icon { font-size: 26px; display: block; }
.dp-name { font-size: 13px; font-weight: 600; display: block; margin-top: 6px; }
.dp-desc { font-size: 11px; color: #999; display: block; margin-top: 4px; }
.decor-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.decor-tpl-card { border: 1px solid #e3e8ef; border-radius: 12px; padding: 18px; text-align: center; }
.decor-tpl-thumb { font-size: 40px; }
.decor-tpl-name { font-weight: 600; margin: 10px 0 4px; }
.decor-tpl-desc { font-size: 12px; color: #999; margin-bottom: 12px; }

/* 表单子块 */
.decor-form .form-group { margin-bottom: 14px; }
.decor-subrow { border: 1px dashed #e0e5ec; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.decor-sublist { margin-bottom: 8px; }
.form-row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.form-row .form-control { flex: 1; min-width: 120px; }
.decor-picker { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 200px; overflow-y: auto; }
.decor-pick { font-size: 13px; color: #444; display: flex; align-items: center; gap: 4px; }
.muted { color: #999; font-size: 13px; }

/* ===== 配置中心 · 开放平台绑定模式 ===== */
.seg { display: inline-flex; border: 1px solid #e0e5ec; border-radius: 8px; overflow: hidden; }
.seg-btn { border: 0; background: #fff; padding: 7px 14px; font-size: 13px; color: #555; cursor: pointer; border-right: 1px solid #e0e5ec; }
.seg-btn:last-child { border-right: 0; }
.seg-btn.seg-on { background: #3b7cff; color: #fff; }
.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { display: none; }
.switch .slider-sw { width: 40px; height: 22px; background: #ccc; border-radius: 22px; position: relative; transition: background .2s; display: inline-block; }
.switch .slider-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left .2s; }
.switch input:checked + .slider-sw { background: #3b7cff; }
.switch input:checked + .slider-sw::after { left: 20px; }
.btn-primary { background: #3b7cff; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer; }

/* ===================== 三栏编辑器布局 ===================== */
/* ⚠️ display 必须放到 .active 上: ID 选择器(#page-decor)优先级高于 .page-content{display:none},
   若在此处写 display:flex 会导致装修页永远显示、覆盖其它页面(如技师管理页也看到首页设计) */
#page-decor { padding: 0 !important; flex-direction: column; overflow: hidden; }
#page-decor.active { display: flex; height: calc(100vh - 72px); }
#page-decor .page-header { display: none; } /* 隐藏默认 page-header, 用 decor-topbar 替代 */

/* 顶栏(蓝色) */
.decor-topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: #2563eb; color: #fff;
    padding: 0 24px; height: 52px; min-height: 52px;
    flex-shrink: 0; z-index: 10;
}
.decor-tb-left { display: flex; align-items: baseline; gap: 12px; }
.decor-tb-left h2 { margin: 0; font-size: 17px; font-weight: 600; color: #fff; }
.decor-tb-sub { color: rgba(255,255,255,.75); font-size: 13px; }
.decor-tb-right { display: flex; align-items: center; gap: 8px; }
.decor-tb-sel { width: 150px !important; height: 32px; font-size: 13px; }

/* 白色按钮 */
.btn-white {
    border: 1px solid rgba(255,255,255,.4); background: transparent;
    color: #fff; border-radius: 6px; padding: 5px 16px; font-size: 13px;
    cursor: pointer; transition: .15s; line-height: 1.4;
}
.btn-white:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.6); }
.btn-primary-solid { background: #fff !important; color: #2563eb !important; font-weight: 600; }
.btn-primary-solid:hover { background: #f0f7ff !important; }

/* 三栏主体 */
.decor-layout {
    display: flex; flex: 1; min-height: 0; overflow: hidden;
    background: #f0f2f5; position: relative;
}

/* 左侧面板: 组件调色板 */
.decor-left-panel {
    width: 258px; flex-shrink: 0;
    background: #fafbfc; border-right: 1px solid #e8ecf0;
    display: flex; flex-direction: column; overflow: hidden; max-height: 100%;
}
.decor-lp-tabs {
    display: flex; border-bottom: 1px solid #e8ecf0;
    background: #fff;
}
.decor-lp-tab {
    flex: 1; text-align: center; padding: 11px 0; font-size: 13px;
    cursor: pointer; color: #666; border-bottom: 2px solid transparent;
    transition: .15s;
}
.decor-lp-tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.decor-lp-body { padding: 12px; flex: 1; min-height: 0; overflow-y: auto; }
/* 调色板分类 */
.decor-palette-cat { margin-bottom: 14px; }
.decor-pcat-head {
    font-size: 12px; font-weight: 700; color: #999; text-transform: uppercase;
    letter-spacing: .5px; padding: 4px 2px 8px;
}
/* 调色板图标网格(左侧窄版: 2列) */
.decor-left-panel .decor-palette { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.decor-left-panel .decor-palette-item {
    padding: 10px 4px; border-radius: 8px; border: 1px solid #eaedf2;
    transition: .15s; background: #fff;
}
.decor-left-panel .decor-palette-item:hover { border-color: #2563eb; box-shadow: 0 2px 8px rgba(37,99,235,.12); transform: translateY(-1px); }
.decor-left-panel .dp-icon { font-size: 22px; }
.decor-left-panel .dp-name { font-size: 11px; margin-top: 4px; }

/* 中间区: 手机预览 */
.decor-center-area {
    flex: 1; display: flex; justify-content: center; align-items: flex-start;
    padding: 20px 16px; overflow-y: auto; background: #e8ecf1;
}
#decorPhoneWrap {
    position: -webkit-sticky; position: sticky; top: 20px;
}
/* 手机底部 tabbar 预览 — 固定在视口底部 */
.decor-tabbar-preview {
    display: flex; align-items: center; justify-content: space-around;
    background: #fff; border-top: 1px solid #eee; height: 48px; font-size: 11px; color: #666;
    flex-shrink: 0; /* 不被压缩，始终在底部 */
    cursor: pointer; transition: all .15s; position: relative;
}
.decor-tabbar-preview:hover { background: #f8f9fa; }
.decor-tabbar-preview.selected { outline: 2px solid #2563eb; outline-offset: -2px; background: #eff6ff; }
.decor-tabbar-preview span { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; }
.decor-tabbar-preview span.active { color: #2563eb; }

/* 右侧面板: TabBar 编辑项 */
.tabbar-item-row {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 12px; margin-bottom: 10px;
}
.tabbar-item-row .tabbar-item-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.tabbar-item-row .tabbar-item-num {
    font-size: 12px; font-weight: 600; color: #2563eb; background: #eff6ff;
    padding: 2px 8px; border-radius: 4px;
}
.tabbar-item-row .form-group { margin-bottom: 8px; }
.tabbar-item-row .form-group:last-child { margin-bottom: 0; }
.tabbar-item-row label { font-size: 11px; color: #64748b; }
.tabbar-item-row .form-control { font-size: 13px; }

/* 右侧面板: 设置 */
.decor-right-panel {
    width: 375px; flex-shrink: 0;
    background: #fff; border-left: 1px solid #e8ecf0;
    display: flex; flex-direction: column; overflow: hidden; max-height: 100%;
}
.decor-rp-head {
    padding: 14px 16px; font-weight: 600; font-size: 14px;
    border-bottom: 1px solid #eef1f5; background: #fafbfc;
    display: flex; align-items: center; justify-content: space-between;
}
.decor-rp-head::after { content: '⚙'; font-size: 15px; color: #bbb; }
.decor-rp-body { padding: 16px; flex: 1; min-height: 0; overflow-y: auto; }
.decor-rp-section .form-group { margin-bottom: 14px; }
.decor-rp-section label {
    display: block; font-size: 12px; font-weight: 600; color: #555;
    margin-bottom: 5px;
}
.decor-rp-actions { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #eef1f5; }
.decor-rp-actions .btn-sm { font-size: 12px; padding: 5px 12px; }

/* 响应式: 小屏时隐藏左右面板 */
@media (max-width: 1100px) {
    .decor-left-panel, .decor-right-panel { display: none; }
}
.img-upload-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.img-preview { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; }
.img-preview-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.img-thumb { position: relative; }
.img-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #eee; }
.img-thumb button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 10px; }

/* 预览组件 */
.pv-banner { position: relative; }
/* 轮播图底层渐变带: 满宽方角, 高度由内联 style 动态控制(兜底45%), z-index最底; 图片层用mask透明淡出后透出此渐变 */
.pv-banner-band { position: absolute; top: 0; left: 0; right: 0; height: 45%; z-index: 1; pointer-events: none; }
/* 图片层容器(占下2/3): position由内联 style 控制, 此处仅作堆叠上下文 */
.pv-banner-imgs { position: absolute; }
.pv-banner-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.5); transition: opacity .6s ease; }
.pv-nav { display: block; padding: 12px; background: #fff; }
.pv-nav-grid { width: 100%; }
.pv-nav-i { text-align: center; font-size: 12px; color: #555; }
.pv-nav-ico { width: 44px; height: 44px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f2f3f5; }
.pv-nav-ico-empty { border: 1px dashed #d0d0d5; background: #fafafa; }
.pv-nav-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-nav-ind { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.pv-nav-ind i { display: block; }
.pv-nav-ind-dot i { width: 6px; height: 6px; border-radius: 50%; background: #ddd; }
.pv-nav-ind-dot i.on { background: var(--ic, #ff4d4f); }
.pv-nav-ind-line i { width: 14px; height: 3px; border-radius: 2px; background: #ddd; }
.pv-nav-ind-line i.on { background: var(--ic, #ff4d4f); }
.pv-title { padding: 10px 14px; font-weight: 600; font-size: 15px; }
.pv-sec-title { padding: 12px 10px 6px; font-weight: 600; font-size: 14px; color: #333; }
.pv-goods { display: flex; gap: 10px; background: #fff; padding: 8px 12px; border-radius: 0; align-items: center; }
.pv-goods img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.pv-gname { font-size: 13px; font-weight: 600; }
.pv-price { color: #e15b5b; font-size: 13px; }
.pv-coupon { display: flex; align-items: center; gap: 8px; background: #fff7f0; border: 1px dashed #f0b27a; padding: 8px 12px; border-radius: 0; }
.pv-coupon b { color: #e15b5b; font-size: 18px; }
.pv-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px; }
.pv-album img { width: 100%; height: 80px; object-fit: cover; border-radius: 6px; }
.pv-rich { padding: 10px; background: #fff; font-size: 13px; color: #444; }
.pv-notice { background: #fffbe6; color: #ad6800; padding: 8px 12px; font-size: 12px; border-radius: 0; }

/* ---- banner enhanced ---- */
.pv-banner.pv-empty { justify-content: center; align-items: center; }
/* 指示器须高于图片层(z-index:2), 否则被满高图片层盖住不显示 */
.pv-banner-dots, .pv-banner-num, .pv-banner-line { z-index: 3; }
.pv-banner-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:5px; }
.pv-banner-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); }
.pv-banner-dots i.on { background: var(--ind-color, #fff); }
.pv-empty-inner { display:flex; flex-direction:column; align-items:center; gap:4px; color:rgba(255,255,255,.85); font-size:12px; }

/* banner 自定义指示器(Phase2) */
.pv-banner { position: relative; }
.pv-banner-num { position:absolute; bottom:8px; font-size:12px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.pv-banner-num.left { left:12px; }
.pv-banner-num.center { left:50%; transform:translateX(-50%); }
.pv-banner-num.right { right:12px; }
.pv-banner-line { position:absolute; bottom:8px; display:flex; gap:5px; }
.pv-banner-line.left { left:12px; }
.pv-banner-line.center { left:50%; transform:translateX(-50%); }
.pv-banner-line.right { right:12px; }
.pv-banner-line i { width:18px; height:3px; border-radius:2px; background:rgba(255,255,255,.5); }
.pv-banner-line i.on { background:#fff; }
.pv-banner-dots.left { left:12px; transform:none; }
.pv-banner-dots.right { right:12px; left:auto; transform:none; }
.pv-empty-inner span:first-child { font-size:24px; }

/* ---- search_bar ---- */
.pv-search { display:flex; align-items:center; margin:0 10px; padding:6px; border-radius:8px; }
.pv-search-pill { display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:8px 14px; border-radius:24px; color:#999; font-size:13px; }
.pv-search-icon { font-size:15px; flex-shrink:0; }
.pv-search-logo { height:24px; width:auto; max-width:40px; object-fit:contain; border-radius:4px; flex-shrink:0; }
.pv-search-camera { font-size:15px; flex-shrink:0; margin-left:auto; }
.pv-search-btn { flex-shrink:0; margin-left:8px; padding:8px 18px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; }
.pv-search-wrap { }
.pv-search-hotwords { display:flex; flex-wrap:wrap; gap:8px; padding:4px 14px 8px; }
.pv-hotword-tag { display:inline-block; padding:3px 12px; border-radius:14px; font-size:11px; color:#666; background:#f5f5f5; border:1px solid #eee; white-space:nowrap; }
.pv-search-hotroll { flex:1; min-width:0; height:18px; overflow:hidden; }
.pv-search-hotroll-inner { display:flex; flex-direction:column; }
.pv-search-hotroll-inner span { height:18px; line-height:18px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- 搜索框编辑面板特有 ---- */
.sb-logo-upload {
    width:80px; height:80px; border:2px dashed var(--border-subtle); border-radius:8px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:#fafafa; overflow:hidden; transition:var(--transition);
}
.sb-logo-upload:hover { border-color:var(--accent-cyan); background:#f0fdff; }
.sb-logo-img { width:100%; height:100%; object-fit:cover; }
.sb-logo-placeholder { font-size:28px; color:#ccc; }
.sb-hw-row { display:flex; align-items:center; gap:8px; position:relative; }
.sb-hw-text { flex:1; min-width:0; }
.sb-hw-text .form-control { font-size:13px; }

/* ---- news_list ---- */
.pv-news-item { background:#fff; padding:8px 12px; border-radius:0; font-size:13px; color:#333; }

/* ---- notice_ticker ---- */
.pv-ticker { background:#fffbe6; color:#ad6800; padding:8px 12px; margin:0; border-radius:0; font-size:12px; display:flex; align-items:center; gap:6px; overflow:hidden; }
.pv-ticker marquee { flex:1; }

/* ---- promotion_list ---- */
.pv-promo-row { display:flex; gap:8px; padding:0 10px; overflow-x:auto; }
.pv-promo-card { min-width:110px; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.pv-promo-card img { width:100%; height:70px; object-fit:cover; background:#eee; }
.pv-promo-name { padding:6px 8px 8px; font-size:11px; text-align:center; color:#555; }

/* ---- category_grid ---- */
.pv-cat-grid { display:grid; gap:10px; padding:8px 12px; background:#fff; margin:0; border-radius:0; }
.pv-cat-item { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; color:#555; }
.pv-cat-icon { font-size:22px; }

/* ---- image_cube / activity_cube ---- */
.pv-cube { display:grid; grid-template-columns:repeat(2,1fr); gap:4px; padding:4px 10px; }
.pv-cube img { width:100%; height:85px; object-fit:cover; border-radius:6px; background:#eee; }

/* ---- spacer ---- */
.pv-spacer { background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,.03) 4px,rgba(0,0,0,.03) 8px); border-bottom:1px dashed rgba(0,0,0,.08); }

/* ---- divider ---- */
.pv-divider { display:flex; align-items:center; justify-content:center; padding:10px 16px; font-size:12px; color:#bbb; }
.pv-divider::before, .pv-divider::after { content:''; flex:1; height:1px; background:#e8e8e8; margin:0 10px; }

/* ---- customer_service ---- */
.pv-cs { display:flex; align-items:center; gap:8px; background:#f0f7ff; color:#1890ff; padding:8px 14px; border-radius:0; font-size:13px; font-weight:600; }
.pv-cs-icon { font-size:18px; }

/* ---- follow_qrcode ---- */
.pv-qrcode { background:#fff; padding:14px; border-radius:0; text-align:center; font-size:13px; color:#333; }
.pv-qr-box { width:120px; height:120px; margin:10px auto 0; background:#f5f5f5; border:1px dashed #ddd; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:11px; }

/* ---- bargain ---- */
.pv-bargain-card { position:relative; background:#fff; margin:0; border-radius:0; overflow:hidden; }
.pv-bargain-card img { width:100%; height:90px; object-fit:cover; background:#eee; }
.pv-binfo { padding:8px 10px; }
.pv-binfo b { font-size:13px; display:block; }
.pv-binfo p { font-size:12px; color:#e15b5b; margin-top:2px; }
.pv-badge { position:absolute; top:6px; left:6px; padding:2px 8px; border-radius:4px; font-size:10px; color:#fff; font-weight:600; }
.pv-badge.hot { background:#e15b5b; }

/* ---- group_buy ---- */

/* ---- flash_sale ---- */
.pv-flash-card { position:relative; display:flex; background:#fff; margin:0; border-radius:0; overflow:hidden; padding:8px; gap:8px; align-items:center; }
.pv-flash-card img { width:72px; height:56px; object-fit:cover; border-radius:6px; background:#eee; flex-shrink:0; }
.pv-flash-info { flex:1; min-width:0; }
.pv-flash-info b { font-size:13px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-flash-price { margin-top:2px; font-size:13px; }
.pv-flash-now { color:#e15b5b; font-weight:700; }
.pv-flash-price del { color:#ccc; font-size:11px; margin-left:4px; }
.pv-flash-badge { position:absolute; top:0; right:0; background:#e15b5b; color:#fff; font-size:9px; padding:2px 6px; border-radius:0 0 0 6px; font-weight:600; }

/* ---- live_stream ---- */
.pv-live { background:linear-gradient(135deg,#ff416c,#ff4b2b); color:#fff; padding:16px; margin:0; border-radius:0; position:relative; overflow:hidden; }
.pv-live-dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:pv-live-blink 1.2s infinite; display:inline-block; vertical-align:middle; margin-right:6px; }
@keyframes pv-live-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.pv-live-text { font-weight:700; font-size:15px; display:inline-block; }
.pv-live-sub { font-size:11px; opacity:.85; margin-top:4px; }

/* ---- common empty hint ---- */
.pv-empty-hint { text-align:center; color:#ccc; padding:14px; font-size:12px; background:#fafafa; border-radius:0; }
.pv-unknown { text-align:center; padding:14px; color:#ccc; font-size:12px; background:#fafafa; margin:0; border-radius:0; border:1px dashed #ddd; }

/* ===== 素材管理 ===== */
/* 装修模式: 保留左侧导航栏可见(用户需在装修时也能切换模块),
   不再需要提升顶栏 z-index — sidebar 与 content 为左右 flex 并排布局, 互不重叠 */

/* 选图覆盖层: 素材管理作为顶层全屏覆盖层(z-index 高于侧边栏与任何弹窗/模态),
   底层页面与弹窗保持原位, 选完移除 body.pick-mode 即恢复 */
body.pick-mode #page-decor-media {
    position: fixed; inset: 0; z-index: 4000; background: #fff; overflow: auto;
    display: block !important;
}
body.pick-mode #page-decor-media .page-header { display: none; }

/* 选图模式提示条(点轮播图缩略图进入整页素材管理时显示) */
.media-pick-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#eef4ff; border:1px solid #cfe0ff; color:#1d4ed8; padding:10px 14px; border-radius:8px; margin-bottom:12px; font-size:13px; }
.media-pick-banner .media-pick-tip { flex:1; }
.media-item.media-pickable { cursor:pointer; transition:box-shadow .12s; }
.media-item.media-pickable:hover { box-shadow:0 0 0 2px #1d4ed8; }
.media-wrap { display:flex; gap:16px; align-items:flex-start; }
.media-side { position:relative; width:200px; flex:0 0 200px; border:1px solid var(--border, #eee); border-radius:10px; padding:8px; background:#fff; max-height:72vh; overflow:auto; }
.media-cat-item { display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px; color:#333; }
.media-cat-item:hover { background:#f3f6fb; }
.media-cat-item.active { background:var(--primary, #3b82f6); color:#fff; }
.media-cat-count { font-size:12px; opacity:.85; }
.media-side-head { display:flex; align-items:center; justify-content:space-between; padding:2px 4px 8px; margin-bottom:6px; border-bottom:1px solid var(--border, #eee); }
.media-side-head > span { font-size:13px; font-weight:600; color:#555; }
.media-cat-right { display:flex; align-items:center; gap:6px; }
/* ⋮ 更多按钮 */
.media-cat-more { border:none; background:transparent; cursor:pointer; font-size:16px; line-height:1; padding:2px 6px; border-radius:4px; color:#aaa; font-weight:bold; letter-spacing:-1px; }
.media-cat-more:hover { background:rgba(0,0,0,0.08); color:#333; }
.media-cat-item.active .media-cat-more { color:rgba(255,255,255,0.85); }
.media-cat-item.active .media-cat-more:hover { background:rgba(255,255,255,0.2); color:#fff; }
/* 二级浮层菜单 */
.media-cat-dropdown { position:absolute; z-index:100; background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.12); padding:4px 0; min-width:130px; font-size:13px; }
.media-cat-dropdown > div { padding:8px 14px; cursor:pointer; display:flex; align-items:center; gap:6px; color:#374151; }
.media-cat-dropdown > div:hover { background:#f3f4f6; }
.media-cat-dropdown > div.danger { color:#e53e3e; }
.media-cat-dropdown > div.danger:hover { background:#fef2f2; }
/* 子分类缩进 */
.media-cat-child { padding-left:22px; }
.media-cat-child .media-cat-name { font-size:12.5px; }

/* ========== 上传弹窗样式（专业素材库风格） ========== */
.up-modal { max-width:560px; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.18); }
.up-head  { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0eff3; background:#fafafa; }
.up-title { font-size:16px; font-weight:600; color:#1a1a2e; margin:0; }
.up-close { border:none; background:none; font-size:22px; color:#bbb; cursor:pointer; line-height:1; padding:2px 6px; border-radius:50%; transition:.15s; }
.up-close:hover { background:#e8e8ec; color:#555; }
.up-body  { padding:20px 24px; }
/* 顶栏：tab + 分组 */
.up-top-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.up-tabs    { display:flex; gap:0; border:1px solid #e2e2ea; border-radius:8px; overflow:hidden; }
.up-tab     { padding:7px 18px; font-size:13.5px; cursor:pointer; color:#666; user-select:none; transition:.15s; border-right:1px solid #e2e2ea; background:#fff; }
.up-tab:last-child { border-right:none; }
.up-tab.active { background:var(--primary,#3b82f6); color:#fff; }
.up-tab:not(.active):hover { background:#f7f7fa; }
.up-cat-wrap { display:flex; align-items:center; gap:6px; }
.up-cat-wrap label { font-size:13px; color:#888; white-space:nowrap; }
.up-cat-wrap select { width:150px; height:32px; font-size:13px; border-radius:6px; border:1px solid #ddd; background:#fff; }

/* 内容区 */
.up-area   { min-height:120px; }

/* 拖拽上传区 — 居中大块 */
.up-drop-wrap {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:100%; height:180px; border:2px dashed #d0d4da; border-radius:14px;
    background:#fafbfc; cursor:pointer; transition:.25s;
}
.up-drop-wrap:hover, .up-drop-wrap.drop-over {
    border-color:var(--primary,#3b82f6); background:rgba(59,130,246,.04);
}
.up-drop-icon  { font-size:48px; color:#c4c9d4; line-height:1; margin-bottom:8px; transition:.2s; }
.up-drop-wrap:hover .up-drop-icon { color:var(--primary,#3b82f6); transform:scale(1.08); }
.up-drop-text { font-size:13.5px; color:#999; }

/* 网络上传行 */
.up-url-row { display:flex; align-items:center; gap:10px; }
.up-url-row label { font-size:13.5px; color:#555; white-space:nowrap; }

/* 预览列表 — 横排可拖拽 */
.upload-preview-list {
    display:flex; flex-wrap:nowrap; gap:10px;
    overflow-x:auto; padding:4px 0 8px; min-height:0;
    /* 隐藏滚动条但保持功能 */
    scrollbar-width:thin; scrollbar-color:#ccc transparent;
}
.upload-preview-item {
    position:relative; width:80px; height:80px; border-radius:8px;
    overflow:hidden; border:2px solid #e5e7eb; background:#fff;
    flex-shrink:0; cursor:grab; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.upload-preview-item:hover { border-color:var(--primary,#3b82f6); }
.upload-preview-item img { width:100%; height:100%; object-fit:cover; }
.preview-loading { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:11px; color:#9ca3af; background:#f3f4f6; }
.preview-name { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); color:#fff; font-size:9px; padding:1px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.preview-remove { position:absolute; top:1px; right:1px; width:16px; height:16px; border-radius:50%; border:none; background:rgba(220,38,38,.85); color:#fff; font-size:11px; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; z-index:2; }
.preview-remove:hover { background:#dc2626; }

/* 拖拽状态 */
.upload-preview-item.dragging { opacity:.4; cursor:grabbing; border-color:var(--primary,#3b82f6); }
.upload-preview-item.drag-over { border-color:var(--primary,#3b82f6); box-shadow:0 0 0 3px rgba(59,130,246,.25); transform:scale(1.05); }

/* 底部提示 */
.up-tips { font-size:12px; color:#b0b5be; margin-top:14px; line-height:1.5; }
/* 按钮栏 */
.up-foot  { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid #f0eff3; background:#fafafa; }
.up-foot .btn-save { margin-top: 0; }

/* 扫码区域 */
.qrcode-area { text-align:center; padding:30px 20px; }
.qrcode-tip { color:#6b7280; font-size:14px; margin-bottom:14px; }
.qrcode-placeholder { width:160px; height:160px; border:1px dashed #d1d5db; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#9ca3af; font-size:13px; }
.media-main { flex:1; min-width:0; }
.media-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.media-toolbar-spacer { flex:1; }
.media-search { width:200px; }
.media-move-sel { width:140px; }
.media-view-toggle { display:flex; gap:4px; }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.media-item { position:relative; border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.media-item:hover { border-color:var(--primary, #3b82f6); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.media-item.selected { border-color:var(--primary, #3b82f6); box-shadow:0 0 0 2px var(--primary, #3b82f6) inset; }
.media-thumb { height:120px; background:#f5f6f8; display:flex; align-items:center; justify-content:center; }
.media-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.media-meta { padding:8px; }
.media-name { font-size:12px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-size { font-size:11px; color:#999; margin-top:2px; }
.media-check { position:absolute; top:6px; left:6px; z-index:2; background:rgba(255,255,255,.92); border-radius:4px; padding:2px 4px; }
.media-empty { grid-column:1 / -1; text-align:center; color:#999; padding:40px; }
.media-list { display:flex; flex-direction:column; gap:6px; }
.media-row { display:flex; align-items:center; gap:10px; border:1px solid #eee; border-radius:8px; padding:8px; background:#fff; }
.media-row.selected { border-color:var(--primary, #3b82f6); }
.media-row .media-thumb { width:60px; height:60px; flex:0 0 60px; }
.media-row .media-name { flex:1; font-size:13px; }
.media-row .media-size, .media-row .media-cat { font-size:12px; color:#999; width:92px; }
.media-pager { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:14px; }
.media-pager-cur { font-size:13px; color:#666; }
.media-pager-info { font-size:12px; color:#999; }
.media-pick .media-side { max-height:58vh; }
.media-pick .media-main { max-height:58vh; overflow:auto; }
.decor-lib-btn { margin-left:6px; }
.media-pick-item.selected { border-color:var(--primary, #3b82f6); box-shadow:0 0 0 2px var(--primary, #3b82f6) inset; }