/* ========================================
   霜禾管理后台 · 全局样式（水蓝色主题）
   主色：水蓝渐变 (#67e8f9 → #22d3ee → #06b6d4 → #0891b2)
   ======================================== */

* {
    box-sizing: border-box;
}

html {
    background: #d3f1f9;
    min-height: 100%;
    /* 防止内部表格的溢出冲坼整页布局（表格内部的横向滚动交由各自 wrapper 处理） */
    overflow-x: hidden;
}

body {
    /* 明显的渐变水蓝色背景（4 层叠加） */
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(103, 232, 249, 0.55) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 5%, rgba(34, 211, 238, 0.45) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(6, 182, 212, 0.25) 0%, transparent 70%),
        linear-gradient(180deg, #e0f7fa 0%, #cffafe 50%, #d3f1f9 100%);
    background-attachment: fixed;
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ================ 顶部 Header ================ */
.site-header {
    background: rgba(255 255 255);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    /* 限高防止 logo 撑大 */
    max-height: 72px;
    box-sizing: border-box;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;    /* 左右两端对齐（左 logo / 右按钮） */
    max-width: 100%;                  /* 不要居中限制 */
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;              /* 少量两边距 */
}

/* 左上角 logo（图片） */
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 0;
    /* 容器本身限制高度，防止 img 撑破 */
    max-height: 48px;
    max-width: 220px;
    overflow: hidden;
}

.brand-logo {
    /* 多重限制 + important 防止被任何默认样式覆盖 */
    height: 42px !important;
    width: auto !important;
    max-width: 200px !important;
    max-height: 42px !important;
    display: block;
    object-fit: contain;
    object-position: left center;
    transition: opacity 0.15s ease;
}

.brand:hover .brand-logo {
    opacity: 0.85;
}

/* 顶导 · 右侧弧形登录按钮（水蓝色背景） */
.btn-login {
    border-radius: 999px;
    padding: 9px 26px;
    background: linear-gradient(135deg, #cff9fd 0%, #06b6d4 60%, #cbf6fc 100%);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.32), 0 1px 3px rgba(8, 145, 178, 0.18);
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

/* 已登录顶导：用户名 + | + 退出登录贴右 */
.header-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

/* 顶导 · 左上角品牌 "霜禾后台"（4 个独立字符 · 非按钮样式） */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;                          /* 个性字间距 */
    padding: 0;
    background: transparent;            /* 不要背景胶囊 */
    border: none;
    cursor: pointer;                   /* 点击返回首页 */
    user-select: none;
    text-decoration: none;             /* 不要下划线 */
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "HarmonyOS Sans SC", sans-serif;
    font-size: 1.45rem;                /* 大字 */
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.cmark {
    display: inline-block;
    color: #0891b2;                                       /* 主题水蓝 */
    background: linear-gradient(180deg, #155e75 0%, #06b6d4 60%, #67e8f9 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(8, 145, 178, 0.25);
    transition: transform 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease;
    will-change: transform;
    animation: cmarkWave 3.6s ease-in-out infinite;
}

/* 4 个字错位上浮的波浪动画 */
.cmark:nth-child(1) { animation-delay: 0.00s; }
.cmark:nth-child(2) { animation-delay: 0.15s; }
.cmark:nth-child(3) { animation-delay: 0.30s; }
.cmark:nth-child(4) { animation-delay: 0.45s; }

.brand-mark:hover .cmark {
    animation-play-state: paused;
    transform: translateY(0);
}

/* hover 任一字符：静态上浮 + 发光 */
.brand-mark .cmark:hover {
    transform: translateY(-3px) scale(1.08);
    text-shadow: 0 6px 14px rgba(6, 182, 212, 0.55);
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.6));
}

@keyframes cmarkWave {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .cmark, .brand-mark:hover .cmark { animation: none !important; transform: none !important; }
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 20px rgba(6, 182, 212, 0.42),
        0 2px 6px rgba(8, 145, 178, 0.25);
    color: #ffffff;
    background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 60%, #0891b2 100%);
}

.btn-login:active {
    transform: translateY(0);
}

/* ================ Main ================ */
.site-main {
    padding: 36px 0 60px;
    min-height: calc(100vh - 200px);
}

.container {
    max-width: 1240px;
}

/* Layout 内容容器：保证页面在桌面端居中、窄屏有足够边距 */
.layout-container {
    width: 100%;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    /* 限制最大宽度，让超宽屏也不至于拉得过开 */
    max-width: 1240px;
}

/* ================ 通用卡片 ================ */
.panel {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 22px;
    box-shadow:
        0 1px 3px rgba(6, 182, 212, 0.06),
        0 8px 24px rgba(6, 182, 212, 0.04);
    border: 1px solid rgba(6, 182, 212, 0.08);
}

/* ================ Hero Card 主图卡片（水蓝渐变） ================ */
.hero-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 340px;
    background:
        linear-gradient(135deg, #67e8f9 0%, #22d3ee 30%, #06b6d4 65%, #0891b2 100%);
    color: #fff;
    cursor: pointer;
    box-shadow:
        0 8px 28px rgba(6, 182, 212, 0.28),
        0 2px 8px rgba(8, 145, 178, 0.18);
}

.hero-card-media {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 32px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 45%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.10) 0%, transparent 50%);
}

.hero-card-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(255,255,255,0.95);
    color: #0891b2;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.hero-card-tag.tag-aqua {
    color: #0891b2;
}

.hero-card-overlay {
    position: relative;
    z-index: 2;
}

.hero-card-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);
}

.hero-card-desc {
    font-size: 0.95rem;
    margin: 0 0 18px;
    opacity: 0.95;
    line-height: 1.55;
}

.hero-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-card-meta time {
    font-size: 0.85rem;
    opacity: 0.88;
}

.btn-readmore {
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    padding: 7px 22px;
    border-radius: 999px;
    font-size: 0.85rem;
    backdrop-filter: blur(8px);
    transition: all 0.15s ease;
    cursor: pointer;
}

.btn-readmore:hover {
    background: #ffffff;
    color: #0891b2;
    border-color: #ffffff;
}

/* ================ 列表（主卡下方） ================ */
.news-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.news-item {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(6, 182, 212, 0.08);
}

.news-item:last-child {
    border-bottom: none;
}

.news-thumb {
    width: 96px;
    height: 64px;
    border-radius: 8px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.18);
}

/* 三档水蓝渐变（列表缩略图） */
.thumb-aqua-1 { background: linear-gradient(135deg, #67e8f9, #22d3ee); }
.thumb-aqua-2 { background: linear-gradient(135deg, #22d3ee, #06b6d4); }
.thumb-aqua-3 { background: linear-gradient(135deg, #06b6d4, #0891b2); }

.news-body {
    flex: 1;
    min-width: 0;
}

.news-title {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 4px;
    display: block;
    transition: color 0.15s ease;
}

.news-title:hover {
    color: #0891b2;
}

.news-desc {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0 0 4px;
    line-height: 1.5;
}

.news-time {
    color: #9ca3af;
    font-size: 0.78rem;
}

/* ================ 快捷卡片（4×2 居中，7 个紧凑布局） ================ */
.quick-card {
    display: flex;
    flex-direction: row;            /* 横向布局：左图标 + 右文字 */
    align-items: stretch;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    overflow: hidden;
    height: 78px;                    /* 紧凑高度 */
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow:
        0 1px 3px rgba(6, 182, 212, 0.06),
        0 4px 12px rgba(6, 182, 212, 0.04);
    border: 1px solid rgba(6, 182, 212, 0.08);
}

/* 居中容器：加宽以容纳 4 列 */
.quick-grid-wrapper {
    max-width: 1080px;
    margin: 0 auto;
}

.quick-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px rgba(6, 182, 212, 0.18),
        0 4px 10px rgba(8, 145, 178, 0.10);
}

/* 出色区：横向布局时变成“左侧色块” */
.quick-card-media {
    flex: 0 0 72px;                  /* 固定宽度 72px */
    width: 72px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 6 档水蓝色系（从浅到深） */
.media-aqua-1 { background: linear-gradient(135deg, #cffafe, #67e8f9); }
.media-aqua-2 { background: linear-gradient(135deg, #a5f3fc, #22d3ee); }
.media-aqua-3 { background: linear-gradient(135deg, #67e8f9, #06b6d4); }
.media-aqua-4 { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.media-aqua-5 { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.media-aqua-6 { background: linear-gradient(135deg, #0891b2, #155e75); }

.quick-card-emoji {
    font-size: 1.9rem;
    filter: drop-shadow(0 2px 4px rgba(8, 145, 178, 0.15));
}

/* 标签隐藏：横向布局不再合适 */
.quick-card-tag {
    display: none;
}

/* 文字区：占全部剩余宽度 */
.quick-card-body {
    flex: 1 1 auto;
    min-width: 0;                    /* 允许内容收缩 */
    padding: 8px 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.quick-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-card-desc {
    font-size: 0.74rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-card-meta {
    color: #9ca3af;
    font-size: 0.72rem;
}

/* ================ 首页 · 公开工具卡片（简约风格） ================ */
.tool-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow:
        0 1px 3px rgba(6, 182, 212, 0.06),
        0 4px 12px rgba(6, 182, 212, 0.04);
    border: 1px solid rgba(6, 182, 212, 0.08);
    height: 100%;
}

.tool-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 24px rgba(6, 182, 212, 0.16),
        0 3px 8px rgba(8, 145, 178, 0.08);
}

.tool-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.icon-blue   { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.icon-green  { background: linear-gradient(135deg, #d1fae5, #6ee7b7); }
.icon-purple { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.icon-orange { background: linear-gradient(135deg, #fed7aa, #fb923c); }

/* 已登录专属：管理后台卡片（全宽置顶、深水蓝 + 发光） */
.tool-card-admin {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 60%, #22d3ee 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 6px 20px rgba(6, 182, 212, 0.28),
        0 2px 6px rgba(8, 145, 178, 0.18);
    padding: 16px 18px;
    color: #ffffff;
}
.tool-card-admin:hover {
    transform: translateY(-3px);
    box-shadow:
        0 14px 32px rgba(6, 182, 212, 0.40),
        0 6px 12px rgba(8, 145, 178, 0.22);
}
.tool-card-admin .tool-card-title {
    color: #ffffff;
    font-size: 1.02rem;
}
.tool-card-admin .tool-card-desc {
    color: rgba(255, 255, 255, 0.85);
}
.icon-admin {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.tool-card-arrow {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.6rem;
    font-weight: 300;
    margin-left: auto;
    transition: transform 0.18s ease;
}
.tool-card-admin:hover .tool-card-arrow {
    transform: translateX(4px);
}

.tool-card-body {
    flex: 1;
    min-width: 0;
}

.tool-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px;
}

.tool-card-desc {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* ================ 首页 · 简约公告 / 动态栏 ================ */
.tool-panel {
    padding: 18px 18px;
}

.tool-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0891b2;
    margin: 0 0 12px;
}

.tool-panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tool-panel-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: #4b5563;
    font-size: 0.85rem;
    border-bottom: 1px dashed rgba(6, 182, 212, 0.12);
}

.tool-panel-list li:last-child {
    border-bottom: none;
}

.tool-panel-list .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    flex-shrink: 0;
}

/* ================ 后台 · 欢迎条 ================ */
.admin-welcome {
    background: linear-gradient(135deg, rgba(207, 250, 254, 0.95), rgba(165, 243, 252, 0.95));
    border: 1px solid rgba(6, 182, 212, 0.25);
    color: #0e7490;
    border-radius: 12px;
    padding: 14px 20px;
}

.admin-welcome strong {
    color: #0891b2;
    font-size: 1.1rem;
}

.admin-welcome-account {
    font-size: 0.85rem;
    color: #4b5563;
    margin-left: 6px;
}

/* ================ 后台 · 实时时钟（欢迎条右侧） ================ */
.live-clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(207, 250, 254, 0.55));
    border: 1px solid rgba(6, 182, 212, 0.25);
    box-shadow:
        0 2px 8px rgba(6, 182, 212, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    font-feature-settings: "tnum" 1, "lnum" 1; /* 等宽数字 */
}

.live-clock-icon {
    font-size: 1rem;
    filter: drop-shadow(0 0 6px rgba(8, 145, 178, 0.45));
    animation: clockIconPulse 2s ease-in-out infinite;
}

.live-clock-date {
    color: #0e7490;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.live-clock-time {
    color: #0891b2;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", "Courier New", monospace;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-shadow:
        0 0 12px rgba(6, 182, 212, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.6);
    background: linear-gradient(180deg, #0891b2 0%, #155e75 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 4px;
    border-left: 1px solid rgba(6, 182, 212, 0.25);
    margin-left: 2px;
}

.clk-segment {
    display: inline-block;
    min-width: 1.05em;
    text-align: center;
}

.clk-colon {
    display: inline-block;
    margin: 0 2px;
    opacity: 0.9;
    animation: blinkColon 1s steps(2, start) infinite;
}

.clk-sec.clk-roll-in {
    animation: secRoll 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes blinkColon {
    0%, 50%   { opacity: 0.55; }
    51%, 100% { opacity: 1; }
}

@keyframes clockIconPulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(8, 145, 178, 0.35)); }
    50%      { transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.55)); }
}

@keyframes secRoll {
    0%   { transform: translateY(-12%) scale(0.85); opacity: 0; filter: blur(2px); }
    60%  { transform: translateY(0)    scale(1.08); opacity: 1; filter: blur(0); }
    100% { transform: translateY(0)    scale(1);    opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .live-clock-icon, .clk-colon, .clk-sec.clk-roll-in { animation: none !important; }
}

.admin-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
    padding-left: 10px;
    border-left: 4px solid #06b6d4;
    line-height: 1.2;
}

.admin-session li {
    padding: 4px 0;
    color: #4b5563;
}

/* ================ 后台 · 用户管理列表页（/Admin/Users） ================ */
.users-page {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(6, 182, 212, 0.08);
    box-shadow:
        0 1px 3px rgba(6, 182, 212, 0.04),
        0 6px 18px rgba(6, 182, 212, 0.05);
    padding: 18px 20px;
}

.users-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.users-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.users-search-input {
    width: 280px;
    border-color: rgba(6, 182, 212, 0.25);
}
.users-search-input:focus {
    border-color: #06b6d4;
    box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.18);
}
.users-role-select {
    width: 130px;
    border-color: rgba(6, 182, 212, 0.25);
}
.users-btn-primary {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.users-btn-primary:hover {
    transform: translateY(-1px);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.45);
}
.users-btn-ghost {
    background: rgba(207, 250, 254, 0.4);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 6px 16px;
    font-weight: 500;
}
.users-btn-ghost:hover {
    background: rgba(207, 250, 254, 0.7);
    color: #0e7490;
}
.users-stats {
    margin-left: auto;
    color: #0e7490;
    font-size: 0.9rem;
    background: rgba(207, 250, 254, 0.45);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 999px;
    padding: 5px 14px;
}
.stats-num {
    font-weight: 800;
    color: #0891b2;
    font-size: 1.05rem;
}

.users-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* iOS 顺滑滚动 */
    border-radius: 10px;
    border: 1px solid rgba(6, 182, 212, 0.1);
}
.users-table {
    width: 100%;
    /* 8 列 + ID 280px + 中文名/手机号/店铺/时间 ，最低 1080px 才能不被压缩 */
    min-width: 1080px;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}
.users-table thead th {
    background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%);
    color: #0e7490;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
    white-space: nowrap;
    text-align: left;
}
.users-table thead th.th-id { width: 280px; }

/* ================ 表格内容全局规则 ================ */
/* 1. tbody td 默认不分行：避免列被挤压后中文逐字竖排 */
.users-table tbody td {
    padding: 12px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.6);
    color: #1f2937;
    vertical-align: middle;
    white-space: nowrap;
}
/* 2. 仅 ID 列允许 break-all（GUID、超长 ID 可接行），其他列均不可逐字换行 */
.users-table tbody td.cell-id {
    word-break: break-all;
    white-space: normal;
}
/* 3. 表格内嵌的子元素（徽章、状态药丸、链接）都不可换行 */
.users-table tbody td .badge,
.users-table tbody td .status-pill,
.users-table tbody td .badge-supplier,
.users-table tbody td .cell-mono,
.users-table tbody td .cell-meta,
.users-table tbody td .order-no {
    white-space: nowrap;
}
.users-table tbody tr:hover td {
    background: rgba(207, 250, 254, 0.35);
}
.cell-mono {
    font-family: "JetBrains Mono", "Consolas", "Monaco", monospace;
    font-size: 0.84rem;
    color: #475569;
}
.cell-meta { color: #6b7280; font-size: 0.84rem; }
.users-loading,
.users-empty,
.users-error {
    padding: 32px 0;
    text-align: center;
    color: #6b7280;
    font-size: 0.92rem;
}
.users-error { color: #dc2626; }

/* 角色徽章 */
.badge-stack {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.badge-admin    { background: linear-gradient(135deg, #0891b2, #155e75); color: #fff; }
.badge-consumer { background: rgba(207, 250, 254, 0.6); color: #0e7490; border-color: rgba(6, 182, 212, 0.2); }
.badge-supplier { background: rgba(224, 231, 255, 0.6); color: #4338ca; border-color: rgba(99, 102, 241, 0.2); }

/* 状态药丸 */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.status-open   { background: rgba(209, 250, 229, 0.7); color: #047857; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-closed { background: rgba(254, 226, 226, 0.6); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.3); }
.status-online { background: rgba(207, 250, 254, 0.55); color: #0e7490; border: 1px solid rgba(6, 182, 212, 0.25); }
.status-pending { background: rgba(254, 243, 199, 0.65); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.3); }
.status-info    { background: rgba(219, 234, 254, 0.65); color: #1e40af; border: 1px solid rgba(59, 130, 246, 0.3); }
.status-success { background: rgba(209, 250, 229, 0.85); color: #065f46; border: 1px solid rgba(5, 150, 105, 0.4); }
.status-warning { background: linear-gradient(135deg, rgba(253, 230, 138, 0.85), rgba(251, 191, 36, 0.7)); color: #78350f; border: 1px solid rgba(217, 119, 6, 0.4); font-weight: 700; }

.muted { color: #9ca3af; }

/* 分页 */
.users-pagination {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.page-btn {
    background: rgba(207, 250, 254, 0.45);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 5px 14px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.page-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.18);
    background: rgba(165, 243, 252, 0.55);
}
.page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.page-info {
    color: #4b5563;
    font-size: 0.92rem;
    font-weight: 500;
}
.page-info span { color: #0891b2; font-weight: 700; }

/* ================ 底部 Footer（白色背景，文字不变） ================ */
.site-footer {
    background: #ffffff;
    color: #9ca3af;
    padding: 26px 0;
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid rgba(6, 182, 212, 0.12);
}

.site-footer small {
    color: #6b7280;
}

/* ================ Code 样式（保留） ================ */
code {
    color: #d63384;
    background-color: #f7f7f9;
    padding: 0.15rem 0.35rem;
    border-radius: 0.2rem;
    font-size: 90%;
}

/* ================ 响应式微调 ================ */
@media (max-width: 992px) {
    .site-header .container { justify-content: space-between; }
    .hero-card { height: 280px; }
    .brand-logo { height: 38px !important; max-height: 38px !important; }
    .brand { max-height: 44px; }

    /* 页面主区与内容容器：压缩文档级边距 */
    .site-main { padding: 28px 0 50px; }
    .layout-container { padding-left: 14px; padding-right: 14px; }

    /* 工具栏：行内控件不挤压，统计块换行 */
    .users-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .users-search {
        width: 100%;
    }
    .users-search-input {
        flex: 1 1 200px;
        width: auto;
        min-width: 0;
    }
    .users-role-select {
        flex: 0 0 130px;
    }
    .users-stats {
        margin-left: 0;
        align-self: flex-start;
    }

    /* 订单筛选栏：每行 2 个字段，按钮换行到新一行 */
    .orders-page .filter-row {
        gap: 10px;
    }
    .orders-page .filter-cell {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
    }
    .orders-page .filter-cell[style*="max-width:130px"],
    .orders-page .filter-cell[style*="max-width:160px"] {
        max-width: none !important;
    }
    .orders-page .filter-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    /* 表格：缩字号 + 缩 padding，宽度由 wrapper 自身横向滚动提供 */
    .users-table {
        font-size: 0.85rem;
    }
    .users-table thead th,
    .users-table tbody td {
        padding: 9px 10px;
    }

    /* 卡片：缩 padding */
    .users-page {
        padding: 14px;
    }

    /* 统计 + 分页条：可换行 */
    .orders-page .users-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .orders-page .users-stats {
        margin-left: 0;
    }
    .orders-page .page-size-wrap {
        align-self: flex-start;
    }

    /* 分页：允许换行 */
    .users-pagination {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .hero-card { height: 240px; padding: 18px; }
    .hero-card-title { font-size: 1.25rem; }
    .news-thumb { width: 72px; height: 48px; }
    .btn-login { padding: 7px 18px; font-size: 0.85rem; }
    .brand-logo { height: 34px !important; max-height: 34px !important; }
    .brand { max-height: 40px; }

    /* 页面主区与内容容器：手机端紧凑 */
    .site-main { padding: 18px 0 36px; }
    .layout-container { padding-left: 10px; padding-right: 10px; }

    /* 表格：进一步压缩字号与 padding */
    .users-table {
        font-size: 0.8rem;
    }
    .users-table thead th,
    .users-table tbody td {
        padding: 7px 8px;
    }
    .users-table thead th {
        font-size: 0.78rem;
    }

    /* 工具栏：搜索/筛选控件各占一行 */
    .users-search {
        flex-direction: column;
        align-items: stretch;
    }
    .users-search > * {
        flex: 1 1 auto;
        width: 100%;
    }
    .users-search-input,
    .users-role-select {
        width: 100%;
    }
    .users-btn-primary,
    .users-btn-ghost {
        width: 100%;
    }

    /* 订单筛选：单列，更紧凑 */
    .orders-page .filter-cell {
        flex: 1 1 100%;
    }
    .orders-page .orders-filter {
        padding: 12px;
    }

    /* 面包屑：缩字号 */
    .breadcrumb {
        font-size: 0.85rem;
    }
}

/* ====================================================
   首页 · 背景特效已移除（保持清爽简约）
   ==================================================== */

/* ====================================================
   管理员登录页 · 玻璃拟态 + 炫酷交互
   ==================================================== */

/* 动态背景层（3 个漂浮的水蓝光圈） */
.login-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.login-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    animation: blobFloat 18s ease-in-out infinite;
}

.blob-1 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, #67e8f9 0%, transparent 70%);
    top: -120px;
    left: -100px;
}

.blob-2 {
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
    bottom: -160px;
    right: -120px;
    animation-delay: -6s;
}

.blob-3 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -12s;
}

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.05); }
    66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* 登录页布局 */
.login-page {
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

/* 登录卡（玻璃拟态 + 渐变边框动画） */
.login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 38px 32px 30px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 20px 60px rgba(6, 182, 212, 0.18),
        0 4px 16px rgba(8, 145, 178, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: cardEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 渐变光晕边框 */
.login-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, #67e8f9, #22d3ee, #06b6d4, #0891b2);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 顶部品牌 */
.login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 60%, #0891b2 100%);
    color: #ffffff;
    box-shadow:
        0 8px 24px rgba(6, 182, 212, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    margin-bottom: 14px;
    position: relative;
    animation: iconPulse 2.5s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
    50%      { box-shadow: 0 8px 30px rgba(6, 182, 212, 0.55), 0 0 0 8px rgba(6, 182, 212, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

.login-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px;
    letter-spacing: 1px;
}

.login-subtitle {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* 错误提示（抖动动画） */
.login-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 1px solid #fca5a5;
    color: #b91c1c;
    border-radius: 10px;
    font-size: 0.85rem;
}

.login-error-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.login-error.shake {
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
    10%, 90%  { transform: translateX(-1px); }
    20%, 80%  { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60%  { transform: translateX(4px); }
}

/* 表单 */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 输入字段（浮动 label + 焦点光环） */
.login-field {
    position: relative;
}

.login-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.25s ease;
    z-index: 2;
}

.login-input {
    width: 100%;
    height: 50px;
    padding: 16px 44px 16px 44px;
    font-size: 0.95rem;
    color: #1f2937;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid rgba(6, 182, 212, 0.15);
    border-radius: 12px;
    outline: none;
    transition: all 0.25s ease;
}

.login-input:hover {
    border-color: rgba(6, 182, 212, 0.4);
    background: rgba(255, 255, 255, 0.85);
}

.login-input:focus {
    border-color: #06b6d4;
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(6, 182, 212, 0.15),
        0 4px 12px rgba(6, 182, 212, 0.08);
}

.login-input:focus + .login-label,
.login-input:not(:placeholder-shown) + .login-label {
    transform: translateY(-26px) scale(0.85);
    color: #06b6d4;
    background: #ffffff;
    padding: 0 6px;
}

.login-input:focus ~ .login-field-icon {
    color: #06b6d4;
}

.login-label {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
    transition: all 0.25s ease;
    transform-origin: left center;
    z-index: 1;
}

/* 密码可见切换 */
.login-toggle-pw {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 6px;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-toggle-pw:hover {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.08);
}

.login-toggle-pw .eye-off { display: none; }
.login-toggle-pw.show .eye-on { display: none; }
.login-toggle-pw.show .eye-off { display: block; }

/* 记住我（自定义 checkbox） */
.login-remember {
    margin-top: -6px;
}

.login-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #4b5563;
    font-size: 0.88rem;
    user-select: none;
}

.login-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.login-checkbox-mark {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.login-checkbox input:checked + .login-checkbox-mark {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    border-color: #06b6d4;
}

.login-checkbox input:checked + .login-checkbox-mark::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.login-checkbox:hover .login-checkbox-mark {
    border-color: #06b6d4;
}

/* 登录按钮（炫酷：渐变 + 箭头 + hover 抬升 + 涟漪 + 加载态） */
.login-btn {
    position: relative;
    width: 100%;
    height: 50px;
    margin-top: 6px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 60%, #0891b2 100%);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 4px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow:
        0 8px 24px rgba(6, 182, 212, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 32px rgba(6, 182, 212, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 60%, #0891b2 100%);
}

.login-btn:hover::before {
    width: 400px;
    height: 400px;
}

.login-btn:active {
    transform: translateY(0);
}

.login-btn-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.login-btn:hover .login-btn-arrow {
    transform: translateX(4px);
}

/* 加载态 */
.login-btn-loader {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    animation: spin 0.8s linear infinite;
}

.login-btn.loading .login-btn-text,
.login-btn.loading .login-btn-arrow {
    opacity: 0;
}

.login-btn.loading .login-btn-loader {
    opacity: 1;
}

.login-btn.loading {
    pointer-events: none;
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 装饰分割线 */
.login-divider {
    position: relative;
    text-align: center;
    margin: 22px 0 16px;
}

.login-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent);
}

.login-divider span {
    position: relative;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.7);
    color: #0891b2;
    font-size: 0.72rem;
    letter-spacing: 2px;
}

/* 底部说明 */
.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.78rem;
}

.login-footer .lock-icon {
    font-size: 0.85rem;
}

/* 响应式 */
@media (max-width: 576px) {
    .login-card { padding: 32px 22px 24px; }
    .login-title { font-size: 1.35rem; }
    .login-icon { width: 56px; height: 56px; }
}

/* ================ 后台 · 字典配置页（/Admin/Dictionaries） ================ */
.dict-page { margin-top: 4px; }

.dict-category-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dict-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(6, 182, 212, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(6, 182, 212, 0.04),
        0 6px 18px rgba(6, 182, 212, 0.05);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.dict-card:hover {
    box-shadow:
        0 8px 24px rgba(6, 182, 212, 0.12),
        0 2px 6px rgba(8, 145, 178, 0.08);
}

.dict-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%);
    border-bottom: 1px solid rgba(6, 182, 212, 0.18);
}

.dict-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0e7490;
}
.dict-card-title .muted {
    font-weight: 500;
    color: #6b7280;
    margin-left: 4px;
}

.dict-card-count {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(6, 182, 212, 0.25);
    color: #0891b2;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.dict-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
}
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: #0891b2;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 500;
    transition: color 0.15s ease;
}
.link-btn:hover { color: #155e75; text-decoration: underline; }
.link-danger { color: #b91c1c; }
.link-danger:hover { color: #7f1d1d; }
.link-success { color: #047857; font-weight: 600; }
.link-success:hover { color: #065f46; text-decoration: underline; }
.link-success:disabled,
.link-btn:disabled { color: #94a3b8; cursor: not-allowed; }

/* 编辑弹窗 */
.dict-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dict-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}
.dict-modal-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 20px 60px rgba(6, 182, 212, 0.25),
        0 6px 20px rgba(8, 145, 178, 0.15);
    padding: 22px 24px 18px;
    animation: modalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dict-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0e7490;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
    padding-bottom: 10px;
}
.dict-modal-body { display: flex; flex-direction: column; gap: 14px; }
.dict-modal-body .form-row { display: flex; flex-direction: column; gap: 6px; }
.dict-modal-body label {
    font-size: 0.85rem;
    color: #4b5563;
    font-weight: 600;
}
.dict-modal-body .form-control,
.dict-modal-body .form-select {
    border-color: rgba(6, 182, 212, 0.25);
}
.dict-modal-body .form-control:focus,
.dict-modal-body .form-select:focus {
    border-color: #06b6d4;
    box-shadow: 0 0 0 0.18rem rgba(6, 182, 212, 0.18);
}
.dict-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(6, 182, 212, 0.1);
}

/* ============== 订单管理（列表 + 详情） ============== */
.orders-page .orders-filter {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(6, 182, 212, 0.18);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 14px;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.08);
}
.orders-page .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.orders-page .filter-cell {
    flex: 1 1 180px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.orders-page .filter-cell label {
    font-size: 0.82rem;
    color: #4b5563;
    font-weight: 600;
}
.orders-page .filter-actions {
    flex: 0 0 auto;
    min-width: auto;
    flex-direction: row;
    gap: 8px;
    align-items: flex-end;
    margin-left: auto;
}
.orders-page .orders-table-wrap {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(6, 182, 212, 0.18);
    border-radius: 12px;
    /* 改为横向滚动：窄屏可左右滑动查看完整表格（原 overflow: hidden 会裁掉一半列） */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;  /* iOS 顺滑滚动 */
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.08);
}
.orders-page .orders-table th {
    background: rgba(207, 250, 254, 0.45);
    font-weight: 600;
    color: #0e7490;
}
.orders-page .orders-table {
    /* Orders 表格 9 列：170+120+180+90+120+90+90+140+240 = 1240px */
    min-width: 1240px;
}
.orders-page .cell-right { text-align: right; }
.orders-page .order-no {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
}
.orders-page .order-no:hover { color: #155e75; text-decoration: underline; }
.orders-page .badge-supplier {
    display: inline-block;
    background: rgba(207, 250, 254, 0.7);
    color: #0e7490;
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    margin: 1px 2px 1px 0;
    /* 关键：禁止逐字换行，多个供应商名称可换行多个 badge */
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* 供应商列：保证最小宽度，防止被其他列挤到 40px 导致中文逐字换行 */
.orders-page .col-supplier,
.orders-page .orders-table td:nth-child(3) {
    min-width: 180px;
    max-width: 280px;
}
.orders-page .orders-table thead th.col-supplier {
    width: auto;
}
.orders-page .dict-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.orders-page .dict-actions .link-btn { white-space: nowrap; }
.orders-page .page-size-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4b5563;
    font-size: 0.85rem;
}
.orders-page .page-size-wrap .form-select { width: 80px; display: inline-block; }

/* 商品管理 */
.goods-table small, .goods-name-cell small { display: block; color: #6b7280; margin-top: 3px; }
.goods-name-cell { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.goods-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(6,182,212,.2); flex: 0 0 auto; }
.goods-thumb.empty { display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: #9ca3af; font-size: .72rem; }
.goods-detail-page { display: flex; flex-direction: column; gap: 16px; }
.goods-detail-page .detail-header, .goods-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.goods-panel { padding: 20px; border-radius: 12px; border: 1px solid rgba(6,182,212,.18); background: rgba(255,255,255,.65); box-shadow: 0 4px 14px rgba(6,182,212,.08); }
.goods-panel h5 { color: #0e7490; margin-bottom: 16px; }
.goods-form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 14px; }
.goods-form-grid label, .goods-panel > label { color: #4b5563; font-size: .85rem; font-weight: 600; }
.goods-form-grid .form-control, .goods-panel > label .form-control { margin-top: 5px; }
.goods-images { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 14px; }
.goods-image-card { border: 1px solid #dbeafe; border-radius: 10px; padding: 9px; background: #fff; }
.goods-image-card img { width: 100%; height: 130px; object-fit: cover; border-radius: 7px; margin-bottom: 8px; }
.goods-image-card strong { color: #0891b2; }
.goods-image-card .dict-actions { margin-top: 7px; display: flex; gap: 8px; }
.goods-panel .users-table input[type="number"] { min-width: 100px; }
.goods-panel .detail-html-wide { width: 100%; min-height: 320px; max-width: 100%; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; }
.goods-panel .form-select { margin-top: 5px; }
.goods-detail-page .goods-panel { width: 100%; }
.goods-detail-page .goods-panel > label { display: block; }
@media (max-width: 992px) { .goods-panel .detail-html-wide { min-height: 220px; } }

/* 订单详情 */
.order-detail-page { display: flex; flex-direction: column; gap: 14px; }
.order-detail-page .detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.08);
}
.order-detail-page .detail-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-detail-page .detail-title-no { font-size: 1.1rem; color: #0e7490; }
.order-detail-page .detail-title-no strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #0c4a6e; }
.order-detail-page .btn-back { font-size: 0.85rem; }
.order-detail-page .detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 768px) {
    .order-detail-page .detail-grid { grid-template-columns: 1fr; }
}
.order-detail-page .detail-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(6, 182, 212, 0.18);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.08);
}
.order-detail-page .detail-card-full { grid-column: 1 / -1; }
.order-detail-page .detail-card-title {
    font-size: 1rem;
    color: #0e7490;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(6, 182, 212, 0.25);
}
.order-detail-page .detail-card-body { display: flex; flex-direction: column; gap: 8px; }
.order-detail-page .kv { display: flex; gap: 10px; font-size: 0.9rem; }
.order-detail-page .kv-k { color: #6b7280; flex: 0 0 90px; font-weight: 600; }
.order-detail-page .kv-v { color: #1f2937; flex: 1; word-break: break-word; overflow-wrap: anywhere; }
.order-detail-page .kv-total .kv-v { color: #dc2626; font-weight: 700; font-size: 1.1rem; }
.order-detail-page .kv-full { flex-direction: column; align-items: flex-start; gap: 4px; }
.order-detail-page .kv-full .kv-k { flex: none; }

/* 订单详情页 · 商品明细表：设定最小宽度避免小屏被压缩，允许横向滚动 */
.order-detail-page .users-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid rgba(6, 182, 212, 0.1);
}
.order-detail-page .users-table {
    min-width: 820px;  /* 80+200+160+120+80+70+110 = 820 */
}
.order-detail-page .goods-cover {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}
.order-detail-page .goods-cover.placeholder {
    background: rgba(207, 250, 254, 0.5);
    color: #6b7280;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.order-detail-page .small { font-size: 0.78rem; }
.order-detail-page code {
    background: rgba(207, 250, 254, 0.5);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #0c4a6e;
}
.order-detail-page .order-action-row {
    background: linear-gradient(135deg, rgba(207, 250, 254, 0.65), rgba(255, 255, 255, 0.7));
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.08);
}
.order-detail-page .action-tip { color: #0e7490; font-size: 0.95rem; }
.order-detail-page .action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.users-btn-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #f59e0b 60%, #fbbf24 100%);
    color: #ffffff;
    border: none;
}
.users-btn-warning:hover { color: #ffffff; opacity: 0.92; }

/* ================ 绿色通过按钮（待付款 · 审核付款） ================ */
.users-btn-success {
    background: linear-gradient(135deg, #bbf7d0 0%, #22c55e 55%, #15803d 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.28);
}
.users-btn-success:hover {
    color: #ffffff;
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.42);
}
.users-btn-success:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.3);
}
.users-btn-success[disabled],
.users-btn-success:disabled {
    background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 60%, #94a3b8 100%);
    color: #ffffff;
    opacity: 0.75;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ================ 凭证预览区（订单详情支付方式） ================ */
.order-detail-page .receipt-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.order-detail-page .receipt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.order-detail-page .receipt-tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(207, 250, 254, 0.95), rgba(165, 243, 252, 0.85));
    color: #0e7490;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(6, 182, 212, 0.25);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.order-detail-page .receipt-no {
    background: rgba(254, 243, 199, 0.7);
    border: 1px dashed rgba(217, 119, 6, 0.45);
    color: #92400e;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.88rem;
    word-break: break-all;
}
.order-detail-page .receipt-thumb-link {
    position: relative;
    display: inline-block;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, 0.25);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.18);
    cursor: zoom-in;
    background: rgba(207, 250, 254, 0.4);
}
.order-detail-page .receipt-thumb-link:hover {
    border-color: rgba(6, 182, 212, 0.55);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.32);
}
.order-detail-page .receipt-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.order-detail-page .receipt-zoom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.65) 100%);
    color: #ffffff;
    font-size: 0.7rem;
    text-align: center;
    padding: 12px 4px 4px;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.order-detail-page .receipt-thumb-link:hover .receipt-zoom { opacity: 1; }
.order-detail-page .receipt-tip {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #b45309;
    background: rgba(254, 243, 199, 0.55);
    border-left: 3px solid #f59e0b;
    padding: 6px 10px;
    border-radius: 4px;
    line-height: 1.5;
}

/* ================ 凭证放大 Lightbox ================ */
.receipt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.receipt-lightbox-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.receipt-lightbox-panel {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.receipt-lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    background: #ffffff;
    object-fit: contain;
}
.receipt-lightbox-close {
    position: absolute;
    top: -42px;
    right: -6px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(15, 23, 42, 0.55);
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.receipt-lightbox-close:hover {
    background: rgba(220, 38, 38, 0.85);
    transform: scale(1.06);
}

/* ================ 商品分类管理（/Admin/Categories） ================ */
.categories-page .users-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 992px) {
    .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.category-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(6, 182, 212, 0.18);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.18);
}
.category-card-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(207, 250, 254, 0.55), rgba(165, 243, 252, 0.4));
    border: 1px solid rgba(6, 182, 212, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.category-card-img.placeholder {
    color: #6b7280;
    font-size: 0.92rem;
    background: rgba(207, 250, 254, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-card-img.broken { display: none; }
.category-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.category-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0c4a6e;
    word-break: break-all;
}
.category-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.badge-mono {
    display: inline-block;
    background: rgba(207, 250, 254, 0.7);
    color: #0e7490;
    font-size: 0.78rem;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(6, 182, 212, 0.2);
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-weight: 600;
}

/* 分类图标上传行 */
.category-icon-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.category-icon-preview {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    border: 1px solid rgba(6, 182, 212, 0.25);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.18);
    background: rgba(207, 250, 254, 0.4);
}
.category-icon-upload {
    flex: 1;
    min-width: 220px;
}
.category-icon-upload input[type="file"] {
    display: block;
    width: 100%;
    padding: 6px 0;
    font-size: 0.85rem;
    color: #475569;
}

/* ================ 轮播图管理（/Admin/Banners） ================ */
.banners-page .users-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.banners-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 768px) {
    .banners-grid { grid-template-columns: 1fr; }
}

.banner-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(6, 182, 212, 0.18);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.banner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.18);
}
.banner-card.disabled {
    opacity: 0.6;
    background: rgba(248, 250, 252, 0.85);
}

.banner-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 750 / 320;
    background: linear-gradient(135deg, rgba(207, 250, 254, 0.55), rgba(165, 243, 252, 0.4));
    overflow: hidden;
}
.banner-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.banner-card-img.placeholder {
    color: #6b7280;
    font-size: 1rem;
    background: rgba(207, 250, 254, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-card-img.broken { display: none; }

.banner-card-media .status-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.banner-card-body {
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.banner-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.banner-card-link {
    font-size: 0.82rem;
    color: #475569;
    word-break: break-all;
    line-height: 1.5;
}
.banner-card-link a {
    color: #0891b2;
    text-decoration: none;
}
.banner-card-link a:hover {
    color: #155e75;
    text-decoration: underline;
}

.banner-image-preview {
    width: 220px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 750 / 320;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(6, 182, 212, 0.25);
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.18);
    background: rgba(207, 250, 254, 0.4);
}

/* 链接按钮颜色（停用橙 / 启用绿 / 删除红） */
.link-warning { color: #b45309 !important; font-weight: 600; }
.link-warning:hover { color: #92400e !important; text-decoration: underline; }