/* ===================================================================
   yikatong admin/merchant 鍝佺墝 v1 UI 绯荤粺 v3 鈥?璁捐绋?1:1 杩樺師
   鑰佹澘 2026-07-24 鎷嶆澘: 鎸?5 涓?PC 璁捐绋?+ 5 涓?miniapp 璁捐绋?1:1
   璁捐绋? https://amy0tag80uxju.space.mcode.cn (v1 绱壊 PC)
   鍩虹: v2 鍏叡绫?+ 瀹屾暣 menu/topbar/stat-card/table 瑙勮寖
   =================================================================== */

/* ============== 瀛椾綋 (璺熻璁＄涓€鑷? ============== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ============== CSS 鍙橀噺鎵╁睍 (璁捐绋块厤鑹? ============== */
:root {
    /* hotfix45c 2026-07-25 01:08 纪律: 严格按 design-system 色彩体系 v6 (https://ykt.itjt.cn/design-system/)
       --brand 改为 v6 主色 #1677ff (按钮/链接/active 全部 v6 蓝)
       hotfix95a 2026-07-25 20:55: 老板 20:53 拍板"彻底清除紫色", 废除 v6 design-system 17.1 Sidebar 紫色保留条款
       --brand-dark / --brand-darker / --gold 全部改 v6 蓝/白, sidebar 改白底蓝边 (v6 design-system 17.7 标准) */
    --brand: #1677ff;                  /* v6 主色 蓝 (按钮/链接/active) */
    --brand-light: #4096ff;            /* v6 浅蓝 (hover) */
    --brand-50: #e6f4ff;                /* v6 浅蓝背景 */
    --brand-dark: #ffffff;              /* hotfix95a: 浅底用, 替代 v4 紫 #2d1f4d */
    --brand-darker: #fafafa;            /* hotfix95a: 极浅底, 替代 v4 深紫 #1a1230 */
    --brand-bg: #f5f7fa;                /* 璁捐绋?bg-canvas 灰白 */
    --brand-card: #ffffff;
    --gold: #1677ff;                    /* hotfix95a: 改 v6 主色蓝, 替代 gold #B8945E (active 左边条 + icon) */
    --gold-light: #4096ff;              /* hotfix95a: 改 v6 浅蓝 */
    --gold-bg: #e6f4ff;                 /* hotfix95a: 改 v6 浅蓝背景 */
    --blue: #1677ff;                 /* hotfix45c: 改 v6 蓝 (跟 --brand 一致) */
    --blue-light: #4096ff;            /* hotfix45c: 改 v6 浅蓝 */
    --green: #52c41a;
    --green-light: #73d13d;
    --orange: #faad14;                /* hotfix45c: 改 v6 橙 */
    --orange-light: #ffc53d;           /* hotfix45c: 改 v6 浅橙 */
    --red: #ff4d4f;                     /* v6 改 f5222d → ff4d4f (v6 design-system) */
    --red-light: #ff7875;
    --emerald: #10b981;
    --teal: #14b8a6;
    --indigo: #6366f1;
    --rose: #f43f5e;
    --amber: #f59e0b;
    --text: #1f1f1f;
    --text-secondary: #595959;
    --text-tertiary: #8c8c8c;
    --text-quaternary: #bfbfbf;
    --border: #f0f0f0;
    --border-light: #e8e8e8;
    --border-lighter: #f5f5f5;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --shadow-sm: 0 2px 8px rgba(22,119,255,0.06);
    --shadow: 0 4px 12px rgba(22,119,255,0.10);
    --shadow-lg: 0 8px 24px rgba(22,119,255,0.15);
    --shadow-xl: 0 12px 32px rgba(22,119,255,0.20);

    /* === 2026-07-25 hotfix45i: 补 v6 design-system 完整 :root 变量 (铁律 30)
       之前 stat-card .icon-wrap.blue/green/orange/red 和 .spark .bar 用 var(--primary-bg) 等
       undefined 变量, 导致 sparkline 柱透明不显示, icon-wrap 颜色退化成默认
       必须显式定义全部 v6 变量, 跟 design-system 12 段 1:1 一致 */
    --primary: #1677ff;
    --primary-light: #4096ff;
    --primary-bg: #e6f4ff;
    --primary-50: #e6f4ff;
    --primary-200: #bae0ff;
    --primary-600: #0958d9;
    --primary-700: #003eb3;
    --success: #52c41a;
    --success-light: #73d13d;
    --success-bg: #f6ffed;
    --warning: #faad14;
    --warning-light: #ffc53d;
    --warning-bg: #fffbe6;
    --danger: #ff4d4f;
    --danger-light: #ff7875;
    --danger-bg: #fff1f0;
    --text-primary: #1f1f1f;
    --text-disabled: #bfbf5f;
    --bg-card: #ffffff;
    --bg-page: #f5f7fa;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --duration-fast: 0.15s;
    --duration: 0.2s;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============== 鍏ㄥ眬鍩虹 (璺熻璁＄涓€鑷? ============== */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background: var(--brand-bg);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-light); }
code {
    background: var(--border-lighter);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: "SF Mono", Consolas, monospace;
    font-size: 12px;
    color: var(--brand);
}
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* ===================================================================
   LAYOUT 甯冨眬 (璺熻璁＄ .flex .min-h-screen 涓€鏍?
   =================================================================== */
.layout {
    display: flex;
    min-height: 100vh;
}

/* ===================================================================
   SIDEBAR 渚ф爮 (璁捐绋?1:1 鈥?w-60 + 娓愬彉 + 鍦嗚 logo + icon 鑿滃崟)
   =================================================================== */
.sidebar {
    /* hotfix95a 2026-07-25 20:55: 老板拍板"彻底清除紫色"
       改前: 整段 sidebar 是 v4 紫色渐变 (#1f1147 → #2d1b5e) + 白字 + gold 金色高亮
       改后: v6 design-system 17.7 完整后台布局 demo 标准 = 白底 + 蓝边 + 蓝高亮
    */
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;                                /* v6 白底 */
    color: #1f1f1f;                                     /* v6 深色字 */
    border-right: 1px solid #f0f0f0;                    /* v6 浅灰右边 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    overflow: hidden;
}
/* 闅愯棌婊氬姩鏉′絾淇濇寔鍙粴鍔?*/
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }

/* logo 鍖?(璁捐绋?.px-6 py-6 border-b border-white/10) */
.sidebar .logo {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;                   /* v6 浅灰边 */
    flex-shrink: 0;
}
.sidebar .logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1f1f1f !important;                          /* v6 深色字 */
}
.sidebar .logo .logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    /* hotfix45c: logo-mark 改 v6 蓝渐变 (跟 design-system 17.7 完整后台布局 demo 一致) */
    background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(22,119,255,0.2);         /* hotfix95a: gold 阴影 → v6 蓝阴影 */
    border: 1.5px solid rgba(22,119,255,0.3);           /* hotfix95a: gold 边 → v6 蓝边 */
}
.sidebar .logo .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.sidebar .logo .logo-text-main {
    font-weight: 700;
    font-size: 15px;
    color: #1f1f1f;                                     /* v6 深色字 */
}
.sidebar .logo .logo-text-version {
    font-size: 11px;
    color: #8c8c8c;                                     /* v6 浅灰版本号 */
    margin-top: 2px;
}

/* menu 婊氬姩鍖?(璁捐绋?flex-1 overflow-y-auto py-4) */
.sidebar .menu {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}
.sidebar .menu li.group {
    color: #8c8c8c;                                     /* v6 浅灰分组标题 */
    padding: 12px 24px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}
.sidebar .menu li.group:first-child { margin-top: 0; }
.sidebar .menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    color: #1f1f1f;                                     /* v6 深色菜单字 */
    font-size: 13px;
    border-left: 3px solid transparent;
    transition: all .15s;
    line-height: 1.4;
}
.sidebar .menu li a i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: #595959;                                     /* v6 灰 icon */
    transition: color .15s;
    flex-shrink: 0;
}
.sidebar .menu li a:hover {
    background: #e6f4ff;                                /* v6 浅蓝底 hover */
    color: #1677ff;                                     /* v6 蓝字 hover */
}
.sidebar .menu li a:hover i { color: #1677ff; }        /* v6 蓝 icon hover (替换 gold) */
.sidebar .menu li a.active {
    background: #e6f4ff;                                /* v6 浅蓝底 active */
    border-left-color: #1677ff;                         /* v6 蓝左边条 (替换 gold) */
    color: #1677ff;                                     /* v6 蓝字 active */
    font-weight: 600;
}
.sidebar .menu li a.active i { color: #1677ff; }       /* v6 蓝 icon active (替换 gold) */

/* ===================================================================
   TOPBAR 椤堕儴鏍?(璁捐绋?1:1 鈥?bg-white border-b + h1 + 鍓爣棰?+ 閫氱煡 + avatar)
   =================================================================== */
.main {
    flex: 1;
    margin-left: 240px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    /* hotfix68b v3.2 2026-07-25: 统一 admin/merchant 眉头高度 */
    padding: 12px 24px;
    min-height: 72px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 40;
}
.header .header-left {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.header h1, .header .title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.header .breadcrumb {
    color: var(--text-tertiary);
    font-size: 12px;
    margin-top: 4px;
}
.header .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.header .header-right .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.header .header-right .icon-btn:hover {
    background: var(--border-lighter);
    color: var(--brand);
}
.header .header-right .user-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 8px;
}
.header .header-right .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* hotfix95a: 头像背景改 v6 蓝 (替代 v4 紫 #5b3a8c → #7a5fb8) */
    background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(22,119,255,0.25);
}
.header .header-right .user-info {
    line-height: 1.3;
}
.header .header-right .user-info .name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.header .header-right .user-info .role {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.header .header-right .logout {
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: color .15s;
    text-decoration: none;
}
.header .header-right .logout:hover { color: var(--red); }

/* ===================================================================
   CONTENT 涓诲尯 (璁捐绋?1:1 鈥?p-8 space-y-6)
   =================================================================== */
.content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
}

/* section 鏍囬鍖?(璁捐绋?mb-4 + 鏍囬 + 鍓爣棰?鎿嶄綔鍙冲榻? */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.section-head h2, .section-head .title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.section-head .extra {
    font-size: 12px;
    color: var(--text-tertiary);
}
.section-head .action a { color: var(--brand); font-size: 12px; }

/* ===================================================================
   STAT CARD 统计卡 (design-system v6 12 段 1:1 还原, hotfix45i 2026-07-25 02:08)
   老板拍板 7-25 02:00: "我一直强调的遵守设计ui风格来" → 删 hotfix45d 4 块大渐变,
   改成 design-system 12 段 demo 的白底 + 同比箭头 + sparkline 柱状图
   =================================================================== */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all var(--duration) var(--ease);
    display: block;
    text-decoration: none;
    color: inherit;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--primary-light);
}
.stat-card .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.stat-card .label { font-size: var(--fs-sm); color: var(--text-tertiary); }
.stat-card .icon-wrap {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.stat-card .icon-wrap.blue   { background: var(--primary-bg); color: var(--primary); }
.stat-card .icon-wrap.green  { background: var(--success-bg); color: var(--success); }
.stat-card .icon-wrap.orange { background: var(--warning-bg); color: var(--warning); }
.stat-card .icon-wrap.red    { background: var(--danger-bg); color: var(--danger); }
.stat-card .value {
    font-size: 26px; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2; margin-bottom: 4px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.stat-card .delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); }
.stat-card .delta.up   { color: var(--danger); }
.stat-card .delta.down { color: var(--success); }
.stat-card .spark {
    margin-top: 12px;
    height: 32px;
    display: flex; align-items: flex-end; gap: 2px;
}
.stat-card .spark .bar {
    flex: 1;
    background: var(--primary-bg);
    border-radius: 1px;
    transition: background var(--duration) var(--ease);
}
.stat-card:hover .spark .bar { background: var(--primary); }
.stat-card .footer-line { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; }

/* hotfix45i: 删 .stat-card.stat-red/green/orange/blue 4 块大渐变 class (违反铁律 30)
   老板 7-25 02:00 发火: "第一张图是你排版的admin后台界面, 第二张图是设计的ui风格,
   我一直强调的遵守设计ui风格来" → design-system 12 段 dashboard 是白底+sparkline,
   不是 hotfix45d 改的 4 块大渐变. 4 块大渐变彻底废弃. */
.stat-card.stat-blue .stat-extra { color: rgba(255,255,255,0.75); }

/* 4 鍒?+ 3 鍒?+ 2 鍒?grid (璁捐绋?.grid grid-cols-4) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ===================================================================
   CARD 鍗＄墖 (璁捐绋?1:1 鈥?bg-white rounded-2xl p-6 border)
   =================================================================== */
.card {
    background: #fff;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.card-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.card-header h2, .card-header .title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.card-header .extra {
    font-size: 12px;
    color: var(--text-tertiary);
}
.card-header .action a { color: var(--brand); font-size: 12px; }
.card-body { padding: 24px; }
.card-body-flush { padding: 0; }

/* ===================================================================
   TABLE 琛ㄦ牸 (璁捐绋?1:1 鈥?w-full text-sm + text-xs thead + py-3)
   =================================================================== */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.table thead th {
    text-align: left;
    padding: 12px 16px;
    background: #fafafa;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-lighter);
    color: var(--text-secondary);
    vertical-align: middle;
}

/* 2026-08-17 hotfix213 老板拍板: list-table (member/detail + card/detail 4 tab) 列宽由 th 决定 + td 不换行
   修 member/detail tab 3 店铺列没 width 被撑到 195px 大空白 + card/detail tab 2 8 列全没 width 不均匀
   跟 hotfix209 .today-table 同源: table-layout: fixed + width: 100% + td nowrap
   重要: .list-table 必须 table-layout: fixed, 否则 th 上的 width:% 不生效 (浏览器按内容撑开) */
.list-table {
    table-layout: fixed;     /* 列宽由 th width 决定, 不按内容撑开 */
    width: 100%;
}
.list-table thead th {
    white-space: nowrap;     /* 表头不换行 */
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-table tbody td {
    white-space: nowrap;     /* 2026-08-17 hotfix213 修小红框: -¥ 100.00 不再换行 */
    overflow: hidden;
    text-overflow: ellipsis;
}
.table tbody tr:hover { background: #fafafa; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .action-cell a, .table .action-cell button {
    color: var(--brand);
    margin-right: 12px;
    font-size: 12px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .15s;
}
.table .action-cell a:last-child, .table .action-cell button:last-child { margin-right: 0; }
.table .action-cell a:hover, .table .action-cell button:hover { color: var(--brand-light); }
.table .action-cell .danger { color: var(--red); }
.table .action-cell .danger:hover { color: var(--red-light); }

/* ===================================================================
   TAG 鏍囩 (璁捐绋?1:1 鈥?6 鐘舵€佽壊 + 鍦嗚 + text-xs px-2 py-1)
   =================================================================== */
.tag {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 4px;
    background: var(--border-lighter);
    color: var(--text-secondary);
    line-height: 1.5;
    font-weight: 500;
    /* 2026-08-17 hotfix218 老板拍板: tag 内文字不换行 — 修"已预绑定"4 字垂直 bug (tagWidth 40px / tagHeight 58px = 强制换行)
       实战: listPage 通用模板用 .table 段 (不走 .list-table), td 没 nowrap, .tag 内中文 3-4 字被强制换行
       1 改 1 受益所有 .tag 元素 (status / 标记 / tag) — 跟 hotfix209 .today-table + hotfix213 .list-table 同源 */
    white-space: nowrap;
}
.tag-blue   { background: #e6f4ff; color: #1890ff; }
.tag-green  { background: #e8f5e9; color: #389e0d; }
.tag-orange { background: #fff3e0; color: #d46b08; }
.tag-red    { background: #ffebee; color: #cf1322; }
.tag-gold   { background: var(--gold-bg); color: #1677ff; }  /* hotfix95a: 金色字 #8b5a1e → v6 蓝字 */
.tag-gray   { background: var(--border-lighter); color: var(--text-tertiary); }

/* ===================================================================
   BUTTON 鎸夐挳 (璁捐绋?1:1 鈥?鍦嗚 + icon 鏀寔)
   =================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 14px; }
.btn-primary {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 2px 6px rgba(22,119,255,0.20);
}
.btn-primary:hover {
    background: var(--brand-light);
    border-color: var(--brand-light);
    color: #fff;
    box-shadow: 0 4px 12px rgba(22,119,255,0.30);
}
/* hotfix45c: btn-gold 改 v6 蓝色 (v6 design-system 没有 .btn-gold, 用 .btn-primary 同色) */
.btn-gold {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}
.btn-gold:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: #fff;
}
.btn-danger {
    background: #fff;
    color: var(--red);
    border-color: #ffccc7;
}
.btn-danger:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn-ghost:hover {
    color: var(--brand);
    background: var(--border-lighter);
}

/* ===================================================================
   SEARCH BAR 鎼滅储鏍?(璁捐绋?.form-row 鍐呭祵 + input 36px 楂?+ 鍦嗚)
   =================================================================== */
.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 16px 20px;
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
}
.search-bar input,
.search-bar select {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    font-size: 13px;
    background: #fff;
    color: var(--text);
    min-width: 120px;
    transition: border-color .15s;
}
.search-bar input:focus,
.search-bar select:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(22,119,255,0.1);
}
.search-bar input.search-input { min-width: 200px; }
.search-bar .actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* ===================================================================
   EMPTY 绌虹姸鎬?(璁捐绋?灞呬腑 + icon + 鏂囧瓧)
   =================================================================== */
.empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
}
.empty .empty-icon {
    font-size: 48px;
    color: var(--text-quaternary);
    margin-bottom: 16px;
}
.empty .empty-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.empty .empty-tip {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ===================================================================
   PAGINATION 鍒嗛〉 (璁捐绋?1:1 鈥?灞呭彸 + 鍏?X 鏉?/ 绗?X / X 椤?+ 涓婁笅椤?
   =================================================================== */
.pager {
    margin-top: 16px;
    text-align: right;
    color: var(--text-tertiary);
    font-size: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.pager .info { margin-right: 12px; }

/* ===================================================================
   BREADCRUMB 闈㈠寘灞?(璁捐绋?1:1 鈥?鍓爣棰樹綅缃?
   =================================================================== */
.breadcrumb {
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.3;
    margin-top: 4px;
}
.breadcrumb i { color: var(--text-quaternary); margin: 0 6px; }
.breadcrumb .sep { color: var(--text-quaternary); margin: 0 6px; }

/* ===================================================================
   MODAL 妯℃€佹 (璁捐绋垮眳涓伄缃?+ 鍦嗚 + 鏍囬鏍?
   =================================================================== */
.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100;
    display: none;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    min-width: 420px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    z-index: 101;
    display: none;
    flex-direction: column;
}
.modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.modal-close {
    background: none; border: 0; color: var(--text-tertiary);
    font-size: 22px; cursor: pointer; line-height: 1; padding: 0; width: 24px; height: 24px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.form-row { margin-bottom: 14px; }
.form-row label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
    transition: border-color .15s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(22,119,255,0.10);
}

/* ===================================================================
   ALERT 鎻愮ず鏉?(璁捐绋垮唴椤垫彁绀虹敤)
   =================================================================== */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 16px;
}
.alert i { font-size: 14px; flex-shrink: 0; }
.alert-info  { background: #e6f4ff; color: #1890ff; border-color: #91d5ff; }
.alert-success { background: #e8f5e9; color: #389e0d; border-color: #b7eb8f; }
.alert-warning { background: #fff3e0; color: #d46b08; border-color: #ffd591; }
.alert-error  { background: #ffebee; color: #cf1322; border-color: #ffa39e; }

/* ===================================================================
   LOGIN PAGE 鐧诲綍椤?(璁捐绋?pc-login.html)
   =================================================================== */
/* hotfix93g 2026-07-25 21:10: 老板 21:03 反馈"admin 端欢迎登录字体大小跟 merchant 不一致"
   真凶: 下面这段是 v3 老 .login-box 风格死代码 (hotfix45c 之前), 但 hotfix45c 只清理了"紫色全屏背景"段
         这段 .login-page .login-title { color: var(--brand-dark) } 仍然在文件里
         hotfix95a 改色时把 --brand-dark 从紫 #2d1f4d 改成白 #ffffff → 标题变白字 → 白底上看不到
         同时 .login-page .form-item { margin-bottom: 16px } 覆盖主样式 12px, 间距大 4px
         merchant 端没有这段死代码, 所以看起来更舒服
   修法: 删整段 v3 死代码, admin 端回归主样式, 跟 merchant 完全一致
         login.php 用 .login-wrap 不是 .login-box, 这段死代码没任何引用 */


/* ===================================================================
   LOGIN PAGE v6 双栏 (admin + merchant 共用) — hotfix45 2026-07-25 00:50
   设计: 左侧 1fr 蓝渐变品牌区 + 右侧 480px 白底表单
   来源: https://ykt.itjt.cn/design-system/ 17.7 完整后台布局 demo + hotfix42 v6 双栏
   触发: 老板截图 admin 登录 form-item 标签挤压, 改造 .form-item 块级, 同时补全 v6 双栏 CSS
   =================================================================== */
/* hotfix93d 2026-07-25 20:48: 老板反馈 "蓝渐变品牌区再窄点, 整个往下居中"
   - body.login-page 改回 flex 居中 (删掉 hotfix45 加的 display: block 死代码)
   - 加 padding: 60px 24px (上下 60px 留白, 避免卡片贴边)
   - .login-wrap max-width 1000 → 880, grid 1fr 440 → 400 480 (左栏变窄, 比例 5:6) */
body.login-page {
    background: #f5f7fa;
    min-height: 100vh;
    display: flex;
    align-items: center;             /* 垂直居中 */
    justify-content: center;         /* 水平居中 */
    padding: 60px 24px;              /* 上下 60px 留白, 避免贴顶/底 */
    margin: 0;
}
.login-wrap {
    /* hotfix93d: 卡片整体缩到 880, 左栏 400 + 右栏 480 (左窄右宽)
       margin 改 0 (flex 父元素下, 居中由 body 控制)
    */
    width: 100%;
    max-width: 880px;
    min-height: 600px;                /* 固定高度, 不撑满全屏 */
    margin: 0;                        /* flex 居中, 不需要 margin */
    display: grid;
    grid-template-columns: 400px 480px;  /* hotfix93d: 左栏变窄 1fr(560) → 400, 右栏 440 → 480 */
    background: #fff;
    border-radius: 16px;              /* 圆角 */
    overflow: hidden;                 /* 圆角裁切 */
    box-shadow: 0 12px 40px rgba(31, 17, 71, 0.10);  /* 阴影 */
}
.login-brand {
    background: linear-gradient(135deg, #1677ff 0%, #4096ff 60%, #69b1ff 100%);
    color: #fff;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.login-brand::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.login-brand::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.brand-content { position: relative; z-index: 1; }

/* ============== 端身份 BADGE (admin=管理后台 / merchant=商户中心) ============== */
/* hotfix45h 2026-07-25 01:50: 端身份区分, 老板反馈 "总后台和商户端要区分" */
.brand-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    letter-spacing: 0.3px;
    position: relative; z-index: 2;
}
.brand-badge i { font-size: 12px; }
.brand-badge-admin {
    background: rgba(255,255,255,0.22);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
}
.brand-badge-merchant {
    background: rgba(82,196,26,0.28);
    color: #fff;
    border: 1px solid rgba(82,196,26,0.5);
}
.brand-logo {
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700;
    color: #fff;
    margin-bottom: 28px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.brand-title {
    font-size: 30px; font-weight: 700;
    color: #fff; margin: 0 0 12px;
    letter-spacing: 0.5px;
}
.brand-subtitle {
    font-size: 14px; line-height: 1.7;
    color: rgba(255,255,255,0.85);
    margin: 0;
}
.brand-stats {
    display: flex; gap: 40px;
    position: relative; z-index: 1;
}
.brand-stat .v {
    font-size: 26px; font-weight: 700;
    color: #fff; line-height: 1.2;
}
.brand-stat .l {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}

.login-form-side {
    background: #fff;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
}
.login-title {
    font-size: 22px; font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.login-sub {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 20px;
}
.login-options {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 13px;
}
.login-options a { color: var(--primary); text-decoration: none; }
.login-options a:hover { text-decoration: underline; }
.opt-remember {
    display: flex; align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    cursor: pointer;
}
.opt-remember input[type="checkbox"] { margin: 0; }
/* v6 hotfix45: .login-page .btn-login 覆盖 v4 紫色版, 用 specificity 高的限定符
   hotfix93i 2026-07-25 21:20: 老板反馈"admin 登录按钮变形, 跟 merchant 不一致"
   真凶: hotfix93g 删 v3 死代码 line 793-887 时把 v3 .btn-login 整段删了
         v6 覆盖只设了 background/color/border/box-shadow/margin-top, 缺 width/height/font-size/font-weight/cursor/transition
         修法: 补回 v3 .btn-login 关键属性, 跟 merchant 端 v3 死代码 line 986-999 一致 */
.login-page .btn-login {
    width: 100%;
    height: 44px;
    background: linear-gradient(135deg, #1677ff, #4096ff) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0;
    box-shadow: 0 4px 12px rgba(22,119,255,0.25) !important;
    transition: all .15s;
}
.login-page .btn-login:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(22,119,255,0.35) !important;
}
.login-page .btn-login:active:not(:disabled) { transform: translateY(0); }
.login-page .btn-login:disabled { opacity: 0.6; cursor: wait; }
/* hotfix93i: 补 .form-error 样式 (admin 端之前完全没定义, merchant 端 v3 死代码 line 1007-1012 有) */
.form-error {
    color: var(--red);
    font-size: 13px;
    text-align: center;
    margin-top: 8px;
    min-height: 18px;
}
.login-footer {
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid var(--border-light);
    text-align: center;
    color: var(--text-tertiary);
    font-size: 12px;
}
.login-footer a { color: var(--primary); text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .login-wrap { grid-template-columns: 1fr; }
    .login-brand { padding: 40px 24px; min-height: 200px; }
    .login-form-side { padding: 40px 24px; max-width: 100%; }
    .brand-stats { gap: 24px; }
    .brand-stat .v { font-size: 20px; }
    .brand-title { font-size: 22px; }
}

/* ===================================================================
   TOOLBAR 宸ュ叿鏍?(璁捐绋?鏍囬鍖?+ 鎿嶄綔鎸夐挳鍙冲榻?
   =================================================================== */
.toolbar {
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 14px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.toolbar .toolbar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.toolbar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===================================================================
   CHECKBOX / RADIO (璁捐绋跨偣鍑诲崱鐗囧紡)
   =================================================================== */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.checkbox-item {
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    transition: all .15s;
    user-select: none;
}
.checkbox-item:hover { border-color: var(--brand); }
.checkbox-item.active {
    background: rgba(22,119,255,0.06);
    border-color: var(--brand);
    color: var(--brand);
    font-weight: 500;
}

/* ===================================================================
   DETAIL 璇︽儏椤?(璁捐绋?detail 椤甸潰甯冨眬)
   =================================================================== */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.detail-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-lighter);
}
.detail-row:last-child { border-bottom: 0; }
.detail-row .label {
    width: 120px;
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-size: 13px;
}
.detail-row .value {
    flex: 1;
    color: var(--text);
    font-size: 13px;
    word-break: break-all;
}


'@ + '

/* ===================================================================
   COMPAT LAYER v3-hotfix37 — 老 class 兼容(2026-07-24 老板 1:1 要求)
   让 41 个 view 用的老类名也走 v3 设计稿风格(1:1 还原)
   不修改 view,只在 CSS 加兼容层
   =================================================================== */

/* ============== BTN 变体 ============== */
.btn-default { background: #fff; color: var(--text); border: 1px solid var(--border-light); }
.btn-default:hover { border-color: var(--brand); color: var(--brand); background: #fafaff; }
.btn-danger  { background: var(--red); color: #fff; border: 1px solid var(--red); }
.btn-danger:hover  { background: #cf1322; border-color: #cf1322; }
.btn-success { background: var(--green); color: #fff; border: 1px solid var(--green); }
.btn-success:hover { background: #389e0d; }
.btn-warning { background: var(--orange); color: #fff; border: 1px solid var(--orange); }
.btn-warning:hover { background: #d46b08; }
.btn-xs { padding: 2px 8px; font-size: 12px; }

/* ============== FORM 变体 ============== */
.form_row { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.form_row label { width: 100px; flex-shrink: 0; color: var(--text-secondary); font-size: 13px; }
.form_row input, .form_row select, .form_row textarea {
    flex: 1; padding: 6px 10px; border: 1px solid var(--border-light); border-radius: var(--radius);
    font-size: 13px; transition: border-color .15s; background: #fff; min-width: 0;
}
.form_row input:focus, .form_row select:focus, .form_row textarea:focus {
    border-color: var(--brand); outline: none;
}
.form-label { color: var(--text-secondary); font-size: 13px; }
.form-input, .form-select {
    padding: 6px 10px; border: 1px solid var(--border-light); border-radius: var(--radius);
    font-size: 13px; background: #fff; transition: border-color .15s;
}
.form-input:focus, .form-select:focus { border-color: var(--brand); outline: none; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* v6 hotfix-20260725-001: form-item 改 v6 块级排版 (label 上 + input 下, 避免 flex 同行 label 挤压)
   触发: 老板截图 admin 登录红框, .form-item 用了 flex 让 label+input 同行, label 紧贴 input 左边
   修法: 跟 .form-row 一致, label 块 + input 块 + width:100%, 保持 admin 端其他文件兼容 */
.form-item { display: block; margin-bottom: 12px; }
.form-item .label,
.form-item > label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.form-item input,
.form-item select,
.form-item textarea { display: block; width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 14px; color: var(--text); background: #fff; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,119,255,0.12); }
.required::after { content: " *"; color: var(--red); }

/* ============== CARD 变体 ============== */
.card-title { font-size: 14px; font-weight: 600; color: var(--text); }
.card .actions { font-size: 12px; color: var(--text-tertiary); }
.card-header .title { font-size: 14px; font-weight: 600; color: var(--text); }
.card-body { padding: 20px; }

/* hotfix45f 2026-07-25 01:30: 删老 class 残留 (铁律 30)
   原 .stat-card.primary/success/warning/danger 用了 v4 紫色 + Tailwind 浓色组
   跟 design-system v6 (https://ykt.itjt.cn/design-system/) 不一致
   admin 端统一用 .stat-card.stat-red/green/orange/blue (v6 柔和渐变)
   merchant 端用独立 CSS (hotfix45e 12KB, .stat-card.primary v6 蓝渐变)
   原 .stat-card 基础定义和 :hover 已在 line 1140-1141, 重复删 */

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.stat-grid:has(> *:only-child) { grid-template-columns: 1fr; }
@media (max-width: 1200px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .stat-grid { grid-template-columns: 1fr; } }

/* ============== KPI 4 色 ============== */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1200px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi-card { padding: 18px; border-radius: var(--radius-lg); color: #fff; transition: all .2s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-label { font-size: 13px; opacity: 0.9; margin-bottom: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; }
.kpi-sub   { font-size: 12px; opacity: 0.8; margin-top: 4px; }
/* hotfix95a: KPI 卡片色全部改 v6 (kpi-blue 实际是 v4 紫 #5b3a8c → #7a5fb8 改 v6 蓝, kpi-purple 紫渐变改 v6 rose 红) */
.kpi-blue   { background: linear-gradient(135deg, #1677ff, #4096ff); }
.kpi-green  { background: linear-gradient(135deg, #10b981, #14b8a6); }
.kpi-orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.kpi-purple { background: linear-gradient(135deg, #f43f5e, #fb7185); }  /* hotfix95a: 改 v6 rose 红, 替代紫渐变 */

/* ============== CHART 区块 ============== */
.chart-card { background: #fff; border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-lighter); }
.chart-title { font-size: 15px; font-weight: 600; color: var(--text); }
.chart-row { display: flex; gap: 16px; margin-bottom: 16px; }
.chart-body { }
.chart-body-tall { min-height: 280px; }
.chart-tag { display: inline-block; padding: 2px 10px; background: var(--brand-bg); color: var(--text-secondary); font-size: 12px; border-radius: 12px; margin-right: 6px; }
@media (max-width: 900px) { .chart-row { flex-direction: column; } }

/* ============== PAGE / PANEL ============== */
.page { padding: 24px; }
.panel { background: #fff; border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }

/* ============== TOP BAR (部分老页面用) ============== */
.top-bar { background: #fff; padding: 12px 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; }
.top-title { font-size: 16px; font-weight: 600; color: var(--text); }
.top-left, .top-right { display: flex; align-items: center; gap: 12px; }
.top-btn { padding: 4px 12px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); cursor: pointer; font-size: 13px; transition: all .15s; }
.top-btn:hover { border-color: var(--brand); color: var(--brand); }
.top-clock { font-size: 12px; color: var(--text-tertiary); }
.top-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.top-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.top-status .dot.offline { background: var(--text-quaternary); }
.top-tag { padding: 3px 10px; background: var(--brand-bg); color: var(--brand); font-size: 12px; border-radius: 12px; }
.top-update { font-size: 12px; color: var(--text-tertiary); }

/* ============== LAYOUT (老 2 栏布局) ============== */
.staff_layout, .card_issue_layout, .reconcile_layout, .verify_layout, .merchant-layout { display: flex; gap: 16px; }
.staff_left, .card_issue_left, .reconcile_left, .verify_left, .merchant-left { flex: 1; }
.staff_right, .card_issue_right, .reconcile_right, .verify_right, .merchant-right { width: 360px; flex-shrink: 0; }
.staff_panel, .issue_panel { background: #fff; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
@media (max-width: 1000px) {
    .staff_layout, .card_issue_layout, .reconcile_layout, .verify_layout, .merchant-layout { flex-direction: column; }
    .staff_right, .card_issue_right, .reconcile_right, .verify_right, .merchant-right { width: 100%; }
}

/* ============== ACTION BAR ============== */
.action_bar, .action_row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.action_bar .btn, .action_row .btn { margin: 0; }

/* ============== RESULT BOX ============== */
.result_box, .result-box { padding: 16px; border-radius: var(--radius-lg); margin-bottom: 16px; }
.result-success, .result-info { background: #f6ffed; border: 1px solid #b7eb8f; color: #389e0d; }
.result-error, .result-danger { background: #fff1f0; border: 1px solid #ffa39e; color: #cf1322; }
.result-warning { background: #fffbe6; border: 1px solid #ffe58f; color: #d48806; }

/* ============== TEXT COLOR ============== */
.text-muted { color: var(--text-tertiary); }
.text-danger { color: var(--red); }
.text-success { color: var(--green); }
.text-warning { color: var(--orange); }
.text-primary { color: var(--brand); }

.primary { color: var(--brand); }
.success { color: var(--green); }
.warning { color: var(--orange); }
.danger { color: var(--red); }
.green { color: var(--green); }
.red { color: var(--red); }

/* ============== KV (key-value 显示) ============== */
.kv { display: flex; padding: 10px 0; border-bottom: 1px solid var(--border-lighter); }
.kv:last-child { border-bottom: 0; }
.kv .k { width: 120px; flex-shrink: 0; color: var(--text-tertiary); font-size: 13px; }
.kv .v { flex: 1; color: var(--text); font-size: 13px; }
.v { color: var(--text); font-size: 13px; }
.sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.subtitle { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }

/* ============== TAG 变体 ============== */
.tag-purple { background: #f9f0ff; color: #722ed1; }
.tag-blue { background: #e6f4ff; color: #1890ff; }
.tag-green { background: #e8f5e9; color: #389e0d; }
.tag-red { background: #ffebee; color: #cf1322; }
.tag-orange { background: #fff3e0; color: #d46b08; }
.tag-gold { background: var(--gold-bg); color: #1677ff; }  /* hotfix95a: 金色字 #8b5a1e → v6 蓝字 */
.tag-gray { background: var(--border-lighter); color: var(--text-tertiary); }
.tag-blue, .tag-green, .tag-red, .tag-orange, .tag-gold, .tag-gray, .tag-purple {
    display: inline-block; padding: 2px 10px; font-size: 12px; border-radius: 12px; margin-right: 4px;
}
.status-tag { display: inline-block; padding: 2px 10px; font-size: 12px; border-radius: 12px; }

/* ============== PAGINATION ============== */
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 0; }
.pagination .info { font-size: 13px; color: var(--text-tertiary); margin-right: 12px; }
.pagination button { padding: 4px 12px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); cursor: pointer; font-size: 13px; transition: all .15s; }
.pagination button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.pagination button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pagination select { padding: 4px 8px; border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 13px; }
.pagination input.curPage { width: 50px; padding: 4px 8px; border: 1px solid var(--border-light); border-radius: var(--radius); text-align: center; font-size: 13px; }

/* ============== MODAL 变体 ============== */
.modal-content { background: #fff; border-radius: var(--radius-lg); width: 480px; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); }
.modal-content .modal-header, .modal-content .modal-body, .modal-content .modal-footer { padding: 16px 20px; }
.modal-content .modal-body { overflow-y: auto; flex: 1; }
.modal-content .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-lighter); }
.modal-content .modal-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.modal .close { background: none; border: 0; font-size: 18px; color: var(--text-tertiary); cursor: pointer; line-height: 1; padding: 4px; }
.modal .close:hover { color: var(--text); }

/* ============== TABS ============== */
.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.tab { padding: 10px 18px; cursor: pointer; color: var(--text-secondary); font-size: 14px; transition: all .15s; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab:hover { color: var(--brand); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tab_panel { display: none; }
.tab_panel.active { display: block; }

/* ============== TIMELINE ============== */
.timeline { padding: 12px 0; position: relative; }
.timeline-node { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-lighter); }
.timeline-node:last-child { border-bottom: 0; }
.timeline-node .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); margin-top: 6px; flex-shrink: 0; }

/* ============== MISC ============== */
.checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.checkbox input { width: 16px; height: 16px; cursor: pointer; }
.icon-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.config-group { background: #fff; border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.config-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-lighter); }
.config-row:last-child { border-bottom: 0; }
.config-tip { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.detail_table { background: #fff; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.sn-input { width: 240px; max-width: 100%; }
.full { width: 100%; }
.cname { color: var(--brand); font-weight: 600; }
.ckey { color: var(--text-tertiary); font-family: monospace; }
.cdesc { color: var(--text-secondary); font-size: 12px; }
.cact { text-align: right; }
.cinput { display: flex; gap: 6px; align-items: center; }
.meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
.create_form, .refund_form, .preview-form { background: #fff; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.dashboard { padding: 0; }
.refund_filter { background: #fff; border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.import_hint { padding: 12px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: var(--radius); color: #d48806; margin-bottom: 12px; font-size: 13px; }
.protocol_text { font-size: 12px; color: var(--text-tertiary); line-height: 1.6; padding: 12px; background: var(--brand-bg); border-radius: var(--radius); max-height: 200px; overflow-y: auto; }

/* hotfix95b 2026-07-25 21:38: 老板 21:35 反馈"sidebar 4 个分组标题空白看不见"
   真凶: 上面这段 (line 1317-1334) 是 hotfix70g 2026-07-25 17:00 加的 v3 死代码, 死代码跟主样式 line 199-207 specificity 相同
         但定义在后, 后定义覆盖前定义 → 分组标题实际渲染 color: rgba(255,255,255,0.4) (白色 40% 透明)
         在白底 sidebar 上几乎看不到
   修法: 删整段死代码 (含 hotfix70g 注释 + .menu-group 兜底), admin 端回归主样式 #8c8c8c 浅灰
         sidebar 滚动条样式 line 1336+ 保留 (跟 v6 蓝白风格一致) */

/* === 2026-07-24 滚动条加粗 v2 (8px 圆角, 覆盖 v4 的 6px) === */
.sidebar .menu::-webkit-scrollbar { width: 8px; }
.sidebar .menu::-webkit-scrollbar-track { background: transparent; }
.sidebar .menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; transition: background 0.2s; }
.sidebar .menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
.sidebar .menu::-webkit-scrollbar-thumb:active { background: rgba(255,255,255,0.6); }
.sidebar .menu { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; }

/* === 2026-07-25 hotfix45i part 3: page-demo / page-header / demo-grid-* (design-system 12 段 dashboard 1:1) === */
.page-demo {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.page-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-title { font-size: 20px; font-weight: 600; margin: 0; color: var(--text-primary); }
.page-sub { color: var(--text-tertiary); font-size: 13px; margin-top: 4px; }
.page-body { padding: 24px; }
.demo-block-subtitle { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.demo-flex { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.demo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }  /* hotfix122b 2026-07-31 老板拍板加 */
.demo-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* tag-dot: 圆点前缀 (design-system 12 段 .tag tag-blue tag-dot 等) */
.tag.tag-dot { display: inline-flex; align-items: center; gap: 5px; }
.tag.tag-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block; flex-shrink: 0;
}

/* hotfix93h 2026-07-25 21:15: 老板 21:07 反馈"左侧品牌区 admin 略小, merchant 大气"
   真凶: 上面这段 (line 1359-1382) 是 v3 老 .login-brand 死代码 + hotfix45h 02:05 端区分覆盖
         19 行全部让 admin 端"小一号" (brand-title 24 vs 30 / brand-stats gap 32 vs 40 / 绝对定位 vs 静态)
         merchant 端没有这段, 主样式 (line 871-931) 跟 merchant 完全一致
   修法: 删整段 19 行, admin 端回归主样式, 跟 merchant 视觉一致
         badge 区分 (admin 浅白 / merchant 浅绿) 保留主样式 line 883-892, 仍然区分两端 */