/*
 * 慢知己管理后台样式：Tabler 1.6.1（static/admin/vendor/tabler）之上的品牌主题、页面布局和旧页面兼容层。
 * 页面依次引入 tabler.min.css、tabler-icons.min.css、本文件，再引入模块样式（shop.css、review.css 等）。
 *
 * - 主题：品牌绿 #38D786 用于按钮、选中、进度条；正文里的文字链接用对比度足够的深绿 #13864D（亮绿字在白底上看不清）。
 * - 布局：宽屏时侧边栏固定在左侧；内容区在 16:9 屏上铺满，超宽屏（如 34 寸 3440×1440）最宽 1800px 并居中，
 *   表格和表单不会被拉得过长；992px 以下侧边栏收成顶部栏。
 * - 兼容层：旧页面的 .panel、.filter-bar、.badge、button.secondary 和不带类名的 table、input 等写法自动套用 Tabler 的外观。
 *   这些规则的优先级刻意压低（:where()），模块样式和 Tabler 原生组件（.btn、.table、.form-control 等）都能覆盖它们。
 */

/* ---------- 主题 ---------- */
:root,
[data-bs-theme=light] {
    --tblr-primary: #38d786;
    --tblr-primary-rgb: 56, 215, 134;
    --tblr-primary-fg: #fff;
    --tblr-primary-darken: #2bc073;
    --tblr-primary-lt-rgb: 235, 251, 243;
    --tblr-link-color: #13864d;
    --tblr-link-color-rgb: 19, 134, 77;
    --tblr-link-hover-color: #0e6b3d;
    --tblr-link-hover-color-rgb: 14, 107, 61;
    --tblr-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --tblr-body-bg: #f5f7fa;
    /* 模块样式里的选中色、进度色。 */
    --accent: #38d786;
    /* 正文里的文字链接、强调数字。 */
    --mz-link: #13864d;
    --mz-primary-soft: #ebfbf3;
    --mz-content-max: 1800px;
    /* 顶部栏高度，和左侧品牌区一样高，两条分隔线对齐。 */
    --mz-topbar-height: 3.875rem;
    --mz-radius: 8px;
    --mz-radius-lg: 10px;
    --mz-border: #e3e8ef;
    --mz-border-soft: #eef1f5;
    --mz-text: #1f2937;
    --mz-muted: #6b7785;
    --mz-surface-2: #f8fafc;
    /* 次要图标、坐标轴文字。 */
    --mz-subtle: #8a96a3;
    /* 可点卡片悬停时的边框。 */
    --mz-primary-border: #b9ecd0;
    --mz-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
    /* 图表（工作概览）：人数、用户用绿，次数用蓝，未知来源用灰；两色在色弱下也分得开，对白底 ≥ 3:1。 */
    --mz-chart-users: #1fa463;
    --mz-chart-logins: #3b6fd8;
    --mz-chart-logins-text: #2f5fc4;
    --mz-chart-logins-soft: #ebf1fd;
    --mz-chart-unknown: #b8c2cc;
    --mz-chart-quiet: #d9dfe6;
    --mz-chart-grid: #eef1f5;
    --mz-chart-base: #d5dbe3;
    --mz-chart-guide: #b7c1cc;
    --mz-chart-hover: #f3f6f9;
    /* 升降标签：增加、减少。 */
    --mz-up-text: #13864d;
    --mz-up-bg: #e7f7ee;
    --mz-down-text: #b42318;
    --mz-down-bg: #fdeeec;
    /* 评价的星星（陪诊师评分）。 */
    --mz-star: #f5a524;
}

body {
    min-height: 100vh;
    color: var(--mz-text);
    background: var(--tblr-body-bg);
    -webkit-font-smoothing: antialiased;
}

a:hover {
    text-decoration: none;
}

/* ---------- 侧边栏（fragments.html） ---------- */
.admin-sidebar {
    --tblr-navbar-active-bg: var(--mz-primary-soft);
    background: #fff;
    border-inline-end: 1px solid var(--mz-border);
    box-shadow: none;
}

/* Tabler 默认把品牌区居中、菜单项上下各留 0.75rem；这里改成左对齐、紧凑一些，一屏能放下更多菜单。 */
.navbar-vertical.admin-sidebar .navbar-brand.admin-brand {
    justify-content: flex-start;
    width: auto;
    margin-inline: 0;
    text-align: left;
}

.navbar-vertical.admin-sidebar .navbar-brand.admin-brand > * {
    margin: 0;
}

.admin-sidebar .navbar-nav.admin-menu {
    --tblr-sidebar-nav-padding-y: .4375rem;
    --tblr-sidebar-nav-padding-x: .75rem;
    --tblr-nav-link-icon-color: #7b8794;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
    padding: .75rem 0;
    color: var(--mz-text);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
}

.admin-brand:hover {
    color: var(--mz-text);
}

.admin-brand img {
    flex: none;
    border-radius: 8px;
}

.admin-brand small {
    display: block;
    margin-top: 3px;
    color: var(--mz-muted);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .2em;
}

.admin-menu {
    gap: 1px;
}

.admin-menu-group {
    padding: 1rem .75rem .375rem;
    color: #8a96a3;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    list-style: none;
}

.navbar-vertical.admin-sidebar .admin-menu .nav-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.25rem;
    padding: .375rem .75rem;
    border-radius: var(--mz-radius);
    color: #3b4654;
    font-weight: 500;
}

.navbar-vertical.admin-sidebar .admin-menu .nav-link:hover {
    background: var(--mz-surface-2);
    color: var(--mz-text);
}

.admin-menu .nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    color: #7b8794;
    opacity: 1;
}

.admin-menu .nav-link-icon .ti {
    font-size: 1.125rem;
}

.navbar-vertical.admin-sidebar .admin-menu .nav-item.active > .nav-link {
    position: relative;
    background: var(--mz-primary-soft);
    color: #15944f;
    font-weight: 600;
}

.navbar-vertical.admin-sidebar .admin-menu .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    inset: .5rem auto .5rem -.5rem;
    width: 3px;
    border-radius: 3px;
    background: var(--tblr-primary);
}

.admin-menu .nav-item.active .nav-link-icon {
    color: var(--tblr-primary);
}

@media (min-width: 992px) {
    .admin-sidebar {
        overflow: hidden;
    }

    .admin-sidebar > .container-fluid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: 100%;
        min-height: 0;
        padding: 0;
    }

    .admin-brand {
        padding: 1.125rem 1.25rem;
        border-bottom: 1px solid var(--mz-border-soft);
    }

    /* 菜单多时只滚动菜单。 */
    .admin-sidebar .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .admin-sidebar .admin-menu {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-height: 0;
        margin: 0;
        padding: .5rem .75rem 1rem;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .navbar-vertical.navbar-expand-lg ~ .shell {
        margin-inline-start: var(--tblr-sidebar-width, 16rem);
        padding-inline: max(2rem, calc((100vw - var(--tblr-sidebar-width, 16rem) - var(--mz-content-max)) / 2));
    }
}

@media (max-width: 991.98px) {
    .admin-sidebar {
        position: sticky;
        top: 0;
        z-index: 1030;
        border-inline-end: 0;
        border-bottom: 1px solid var(--mz-border);
    }

    .admin-sidebar .admin-menu {
        padding: .5rem 0;
    }
}

/* ---------- 顶部栏（fragments.html 的 sidebar 片段里）：左边当前位置，右上角个人菜单 ---------- */
/* 顶部栏固定在上面时，键盘切换焦点、页内跳转不能被它挡住。 */
html {
    scroll-padding-top: calc(var(--mz-topbar-height) + .5rem);
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--mz-topbar-height);
    padding-inline: max(1.5rem, calc((100vw - var(--mz-content-max)) / 2));
    background: #fff;
    border-bottom: 1px solid var(--mz-border);
}

@media (min-width: 992px) {
    .admin-sidebar .admin-brand {
        min-height: var(--mz-topbar-height);
    }

    .navbar-vertical.navbar-expand-lg ~ .admin-topbar {
        margin-inline-start: var(--tblr-sidebar-width, 16rem);
        padding-inline: max(2rem, calc((100vw - var(--tblr-sidebar-width, 16rem) - var(--mz-content-max)) / 2));
    }
}

/* 窄屏时侧边栏已经收成顶部栏，这一条不再吸顶，只显示当前位置和头像。 */
@media (max-width: 991.98px) {
    .admin-topbar {
        position: static;
    }

    html {
        scroll-padding-top: 4.5rem;
    }
}

@media (max-width: 575.98px) {
    .admin-topbar {
        padding-inline: .75rem;
    }
}

/* 当前位置：分组 › 页面；在详情页时页面名可以点回列表。 */
.admin-crumbs {
    min-width: 0;
}

.admin-crumbs .breadcrumb {
    flex-wrap: nowrap;
    margin: 0;
    font-size: .875rem;
    line-height: 1.4;
    white-space: nowrap;
}

.admin-crumbs .breadcrumb-item {
    color: var(--mz-muted);
}

.admin-crumbs .breadcrumb-item a {
    color: var(--mz-link);
}

.admin-crumbs .breadcrumb-item a:hover {
    text-decoration: underline;
}

.admin-crumbs .breadcrumb-item.active {
    overflow: hidden;
    color: var(--mz-text);
    font-weight: 600;
    text-overflow: ellipsis;
}

/* 个人菜单按钮：头像 + 姓名 + 角色。 */
.admin-account {
    flex: none;
}

.admin-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.75rem;
    padding: .25rem .5rem .25rem .25rem;
    color: var(--mz-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--mz-radius);
    transition: background-color .15s ease, border-color .15s ease;
}

.admin-account-toggle:hover,
.admin-account-toggle[aria-expanded="true"] {
    background: var(--mz-surface-2);
    border-color: var(--mz-border-soft);
}

.admin-account-toggle:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

.admin-account-toggle > .ti {
    color: var(--mz-subtle);
    font-size: 1rem;
    transition: transform .15s ease;
}

.admin-account-toggle[aria-expanded="true"] > .ti {
    transform: rotate(180deg);
}

.admin-avatar {
    --tblr-avatar-size: 2rem;
    flex: none;
    color: var(--mz-link);
    background: var(--mz-primary-soft);
    border: 1px solid var(--mz-primary-border);
    font-size: .875rem;
    font-weight: 600;
}

.admin-account-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    text-align: left;
}

.admin-account-name strong {
    max-width: 10rem;
    overflow: hidden;
    font-size: .875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-account-name small {
    color: var(--mz-muted);
    font-size: .75rem;
}

@media (max-width: 575.98px) {
    .admin-account-name {
        display: none;
    }
}

/* 下拉菜单：上面是账号信息，中间是个人设置，最下面单独隔开「退出登录」。 */
.admin-account-menu {
    width: 18.5rem;
    padding: .5rem;
    border-color: var(--mz-border);
    border-radius: var(--mz-radius-lg);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .1), 0 2px 6px rgba(16, 24, 40, .06);
}

.admin-account-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .5rem .75rem;
}

.admin-account-card .admin-avatar {
    --tblr-avatar-size: 2.5rem;
    font-size: 1rem;
}

.admin-account-card strong {
    display: block;
    color: var(--mz-text);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.admin-account-phone {
    display: block;
    margin-top: 2px;
    color: var(--mz-muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.admin-account-facts {
    display: grid;
    gap: .375rem;
    margin: 0 .5rem .5rem;
    padding: .625rem .75rem;
    background: var(--mz-surface-2);
    border-radius: var(--mz-radius);
    font-size: .8125rem;
}

.admin-account-facts > div {
    display: flex;
    align-items: baseline;
    gap: .75rem;
}

.admin-account-facts dt {
    flex: none;
    width: 4em;
    color: var(--mz-muted);
    font-weight: 400;
}

.admin-account-facts dd {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
    color: var(--mz-text);
}

.admin-role {
    padding: .125rem .5rem;
    color: var(--mz-link);
    background: var(--mz-primary-soft);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
}

.admin-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    color: var(--mz-text);
    border-radius: var(--mz-radius);
}

.admin-account-menu .dropdown-item .ti {
    color: var(--mz-subtle);
    font-size: 1.125rem;
}

.admin-account-menu .dropdown-item:hover,
.admin-account-menu .dropdown-item:focus-visible {
    background: var(--mz-surface-2);
}

.admin-account-menu .dropdown-item.active {
    color: var(--mz-link);
    background: var(--mz-primary-soft);
    font-weight: 600;
}

.admin-account-menu .dropdown-item.active .ti {
    color: var(--tblr-primary);
}

.admin-account-menu .dropdown-divider {
    margin: .375rem 0;
    border-color: var(--mz-border-soft);
}

.admin-account-menu form {
    margin: 0;
}

.admin-account-menu button.dropdown-item {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
}

.admin-account-menu .admin-logout:hover,
.admin-account-menu .admin-logout:focus-visible {
    color: var(--mz-down-text);
    background: var(--mz-down-bg);
}

.admin-account-menu .admin-logout:hover .ti,
.admin-account-menu .admin-logout:focus-visible .ti {
    color: var(--mz-down-text);
}

/* ---------- 修改密码页（account-password.html） ---------- */
.password-panel {
    max-width: 34rem;
}

.password-field {
    position: relative;
    display: flex;
}

.password-field input {
    flex: 1;
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: .25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--mz-subtle);
    background: transparent;
    border: 0;
    border-radius: var(--mz-radius);
    transform: translateY(-50%);
}

.password-toggle:hover {
    color: var(--mz-text);
    background: var(--mz-surface-2);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 0;
}

.password-toggle .ti {
    font-size: 1.125rem;
}

.field-hint {
    display: block;
    margin-top: .375rem;
    color: var(--mz-muted);
    font-size: .8125rem;
    font-weight: 400;
}

.field-error {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .375rem;
    color: var(--mz-down-text);
    font-size: .8125rem;
    font-weight: 500;
}

.password-panel input[aria-invalid="true"] {
    border-color: var(--mz-down-text);
}

.password-effects {
    margin: 0 0 1.25rem;
}

.password-effects ul {
    margin: .375rem 0 0;
    padding-left: 1.25rem;
}

.password-effects li + li {
    margin-top: .25rem;
}

/* ---------- 内容区 ---------- */
.shell {
    display: block;
    min-width: 0;
    padding: 1.5rem max(1.5rem, calc((100vw - var(--mz-content-max)) / 2)) 3rem;
}

/* 没有侧边栏的单张卡片页面（错误页）。 */
.shell.shell-narrow {
    max-width: 46rem;
    margin: 3rem auto;
    padding: 0 1.5rem;
}

@media (max-width: 575.98px) {
    .shell,
    .navbar-vertical.navbar-expand-lg ~ .shell {
        padding: 1rem .75rem 2rem;
    }
}

/* 页面标题区：标题 + 说明。分组名由顶部栏显示；.eyebrow 只用于标题上方带额外信息的小字（如「商城 · 手机预览」）。 */
.eyebrow {
    margin: 0 0 .25rem;
    color: #8a96a3;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}

:where(.shell, .login-card) h1 {
    margin: .125rem 0 .5rem;
    color: var(--mz-text);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35;
}

:where(.shell) h2 {
    margin: 0 0 .75rem;
    color: var(--mz-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

:where(.shell) h3 {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    font-weight: 600;
}

:where(.shell) p {
    margin: 0 0 .75rem;
}

/* 返回上一级的链接（如「← 发票申请」）。 */
.shell > a:first-child,
.shell > .eyebrow + a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .25rem;
    color: var(--mz-muted);
    font-size: .8125rem;
}

.shell > a:first-child:hover,
.shell > .eyebrow + a:hover {
    color: var(--mz-link);
}

/* ---------- 卡片 ---------- */
.panel,
.stats article {
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--mz-border);
    border-radius: var(--mz-radius-lg);
    box-shadow: var(--mz-shadow);
}

.panel > :last-child {
    margin-bottom: 0;
}

.stats,
.columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.stats {
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}

.stats article {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
}

.stats article > span:first-child {
    color: var(--mz-muted);
    font-size: .8125rem;
}

.stats strong {
    display: block;
    margin: .25rem 0;
    color: var(--mz-text);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.columns > .panel,
.columns .panel {
    margin: 0;
}

/* ---------- 文字 ---------- */
.muted,
.hint,
:where(.shell, .login-card) small {
    color: var(--mz-muted);
}

.hint,
:where(.shell, .login-card) small {
    font-size: .8125rem;
}

:where(.shell) td small {
    display: block;
    margin-top: .125rem;
}

.mono {
    font-family: var(--tblr-font-monospace, ui-monospace, monospace);
    font-size: .8125rem;
    word-break: break-all;
}

.prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.nowrap {
    white-space: nowrap;
}

/* ---------- 提示 ---------- */
.notice,
.error {
    display: block;
    margin: .75rem 0;
    padding: .75rem 1rem;
    border: 1px solid;
    border-radius: var(--mz-radius);
    font-size: .875rem;
}

.notice {
    background: #ecfaf2;
    border-color: #c4ecd6;
    color: #166534;
}

.error {
    background: #fdf0f0;
    border-color: #f5c9c9;
    color: #a12a2a;
}

.notice.warn {
    background: #fff7e8;
    border-color: #f6dcae;
    color: #8a5a00;
}

.error:empty {
    display: none;
}

.admin-toast {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1080;
    max-width: min(26rem, calc(100vw - 2.5rem));
    padding: .75rem 1rem .75rem 1.125rem;
    border: 1px solid #f3c7c3;
    border-left: 4px solid #d63939;
    border-radius: var(--mz-radius);
    background: #fff;
    color: #8c2d22;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}

.admin-toast.success {
    border-color: #c4ecd6;
    border-left-color: var(--tblr-primary);
    color: #166534;
}

/* ---------- 表单 ---------- */
:where(.shell, .login-card) form {
    display: grid;
    gap: 1rem;
}

:where(.shell, .login-card) label:where(:not([class*="form-"], [class*="btn"])) {
    display: grid;
    gap: .375rem;
    color: #3b4654;
    font-size: .875rem;
    font-weight: 500;
}

:where(.shell, .login-card) :where(input:not([type=checkbox], [type=radio], [type=range], [type=hidden], [type=color], [type=submit], [type=button], [type=reset], [type=image]), select, textarea):where(:not(.form-control, .form-select, [class*="w-e-"], [class*="w-e-"] *)) {
    display: block;
    width: 100%;
    min-height: 2.25rem;
    margin: 0;
    padding: .4375rem .75rem;
    color: var(--mz-text);
    font: inherit;
    font-weight: 400;
    line-height: 1.4286;
    background-color: #fff;
    border: 1px solid #d5dce5;
    border-radius: var(--mz-radius);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03);
    transition: border-color .15s, box-shadow .15s;
}

:where(.shell, .login-card) :where(input, select, textarea):where(:not(.form-control, .form-select, [type=checkbox], [type=radio], [type=range])):focus {
    outline: 0;
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 .1875rem rgba(56, 215, 134, .22);
}

:where(.shell, .login-card) :where(input, select, textarea):disabled {
    color: var(--mz-muted);
    background-color: var(--mz-surface-2);
}

:where(.shell) textarea:where(:not(.form-control, [class*="w-e-"] *)) {
    min-height: 6rem;
    resize: vertical;
}

:where(.shell) input[type=file]:where(:not(.form-control)) {
    padding: .3125rem .375rem;
}

:where(.shell) input[type=file]::file-selector-button {
    margin-right: .75rem;
    padding: .25rem .75rem;
    border: 0;
    border-radius: 6px;
    background: #eef2f6;
    color: #3b4654;
    font: inherit;
    cursor: pointer;
}

:where(.shell, .login-card) :where(input[type=checkbox], input[type=radio], input[type=range]) {
    accent-color: var(--tblr-primary);
}

:where(.shell, .login-card) :where(input[type=checkbox], input[type=radio]) {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

/* 单列表单里的输入框不随超宽屏拉长。 */
:where(.shell) label > :where(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
    max-width: 40rem;
}

:where(.shell) label > textarea {
    max-width: 64rem;
}

.check {
    display: flex !important;
    align-items: center;
    gap: .5rem;
}

.check input {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .75rem 1rem;
    margin: 1rem 0;
}

.shell > .filter-bar {
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--mz-border);
    border-radius: var(--mz-radius-lg);
    box-shadow: var(--mz-shadow);
}

.filter-bar label {
    min-width: 10rem;
}

.filter-bar > a:not(.button) {
    align-self: center;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .5rem;
    margin-bottom: .5rem;
}

.inline-form label {
    min-width: 7.5rem;
}

.grid-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    margin-top: 1rem;
}

.grid-form button {
    grid-column: 1 / -1;
    justify-self: start;
}

.stack {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

/* 标题和主要操作同一行（如「商品分类」右侧的「新建分类」）。 */
.page-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.page-title-row h1 {
    margin-bottom: .25rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* 标题下方的主要操作（如「新建用户」）。 */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0;
}

.recipient-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

#recipient-picker[hidden] {
    display: none;
}

:where(.shell) summary {
    cursor: pointer;
    font-weight: 600;
}

:where(.shell) dialog {
    width: min(40rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 1.5rem;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24);
}

/* 弹窗较窄，里面的多列表单改成单列。 */
:where(.shell) dialog .grid-form {
    grid-template-columns: 1fr;
}

:where(.shell) dialog::backdrop {
    background: rgba(15, 23, 42, .45);
}

/* ---------- 按钮 ---------- */
button:where(:not(.btn, .btn-close, .navbar-toggler, .nav-link, .page-link, .dropdown-item, .accordion-button, .list-group-item, .admin-account-toggle, .password-toggle, [class*="w-e-"], [class*="w-e-"] *)),
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    /* 表单是网格布局，按钮按内容宽度显示，不被拉满整行。 */
    width: fit-content;
    min-height: 2.25rem;
    padding: .4375rem 1rem;
    color: #fff;
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    background: var(--tblr-primary);
    border: 1px solid transparent;
    border-radius: var(--mz-radius);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .06);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

button:where(:not(.btn, .btn-close, .navbar-toggler, .nav-link, .page-link, .dropdown-item, .accordion-button, .list-group-item, .admin-account-toggle, .password-toggle, [class*="w-e-"], [class*="w-e-"] *)):hover,
a.button:hover {
    color: #fff;
    background: var(--tblr-primary-darken);
}

button:where(:not(.btn, .btn-close, .navbar-toggler, .admin-account-toggle, .password-toggle, [class*="w-e-"], [class*="w-e-"] *)):focus-visible,
a.button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .1875rem rgba(56, 215, 134, .3);
}

:is(button, a.button).secondary {
    color: #3b4654;
    background: #fff;
    border-color: #d5dce5;
}

:is(button, a.button).secondary:hover {
    color: var(--mz-text);
    background: var(--mz-surface-2);
    border-color: #c4ccd6;
}

:is(button, a.button).danger {
    color: #fff;
    background: #d63939;
}

:is(button, a.button).danger:hover {
    background: #bd2e2e;
}

:is(button, a.button).subtle {
    color: #c03535;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

:is(button, a.button).subtle:hover {
    background: #fdf0f0;
}

button:where(:not(.btn)):disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- 表格 ---------- */
.table-wrap {
    overflow-x: auto;
}

:where(.shell) table:where(:not(.table)) {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: .875rem;
}

:where(.shell table:not(.table)) > thead > tr > th {
    padding: .625rem .75rem;
    color: #6b7785;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--mz-surface-2);
    border-bottom: 1px solid var(--mz-border);
}

:where(.shell table:not(.table)) > :where(tbody, tfoot) > tr > :where(td, th) {
    padding: .75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--mz-border-soft);
}

:where(.shell table:not(.table)) > tbody > tr:last-child > :where(td, th) {
    border-bottom: 0;
}

:where(.shell table:not(.table)) > tbody > tr:hover > :where(td, th) {
    background-color: #fafcfd;
}

/* 卡片里的表格贴边显示，和 Tabler 的 card-table 一样。 */
.panel.table-wrap {
    padding: 0;
}

.panel.table-wrap > :not(table) {
    margin-inline: 1.5rem;
}

.panel.table-wrap > :first-child:not(table) {
    margin-top: 1.25rem;
}

.panel.table-wrap > :last-child:not(table) {
    margin-bottom: 1.25rem;
}

.panel.table-wrap > table :where(td, th):first-child {
    padding-inline-start: 1.5rem;
}

.panel.table-wrap > table :where(td, th):last-child {
    padding-inline-end: 1.5rem;
}

.panel.table-wrap > :not(table) + table {
    border-top: 1px solid var(--mz-border);
}

/* ---------- 标签 ---------- */
.badge:where(:not([class*="bg-"], [class*="text-bg"])) {
    padding: .25em .625em;
    color: #1e7d46;
    font-size: .75rem;
    font-weight: 500;
    background: #e7f8ee;
    border: 0;
    border-radius: 999px;
}

.badge.warn {
    color: #9a5b00;
    background: #fff4e0;
}

.badge.danger {
    color: #b42318;
    background: #fdecec;
}

.badge.disabled {
    color: #5f6b7a;
    background: #eef1f5;
}

/* ---------- 分页、空状态 ---------- */
div.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 1.25rem 0;
}

div.pagination > a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .25rem .875rem;
    color: #3b4654;
    background: #fff;
    border: 1px solid #d5dce5;
    border-radius: var(--mz-radius);
}

div.pagination > a:hover {
    color: var(--mz-link);
    border-color: var(--tblr-primary);
}

div.pagination > span {
    padding: 0 .5rem;
    color: var(--mz-muted);
}

:where(.shell) .empty {
    height: auto;
    padding: 2.5rem 1rem;
    color: var(--mz-muted);
    text-align: center;
}

:where(.shell) :is(td, th).empty {
    display: table-cell;
}

:where(.shell) p.empty {
    display: block;
    margin: 1rem 0;
    background: #fff;
    border: 1px dashed var(--mz-border);
    border-radius: var(--mz-radius-lg);
}

/* ---------- 图片 ---------- */
.preview {
    display: block;
    width: 160px;
    height: 160px;
    margin: .75rem 0;
    object-fit: contain;
    background: var(--mz-surface-2);
    border: 1px solid var(--mz-border-soft);
    border-radius: var(--mz-radius-lg);
}

.thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--mz-surface-2);
    border: 1px solid var(--mz-border-soft);
    border-radius: var(--mz-radius);
}

.product-cell {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* ---------- 登录、注册 ---------- */
.login-body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    background:
        radial-gradient(60rem 30rem at 0% 0%, #def8ea 0%, transparent 60%),
        radial-gradient(50rem 28rem at 100% 100%, #e6f1fb 0%, transparent 55%),
        var(--tblr-body-bg);
}

.login-card {
    width: min(26.25rem, 100%);
    padding: 2.25rem 2rem 2rem;
    background: #fff;
    border: 1px solid var(--mz-border);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .08);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    color: var(--mz-text);
    font-size: 1.125rem;
    font-weight: 700;
}

.login-brand img {
    border-radius: 10px;
}

.login-brand small {
    display: block;
    margin-top: 2px;
    color: var(--mz-muted);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .2em;
}

.login-card form {
    margin-top: 1.5rem;
}

.login-card form + .hint {
    margin-top: .875rem;
}

.login-card button[type=submit] {
    width: 100%;
    min-height: 2.5rem;
    font-size: .9375rem;
}

.login-card label > div {
    display: flex;
    gap: .5rem;
}

.login-card label > div > select {
    flex: 0 0 9.5rem;
}

/* ---------- 图片预览（admin.js）：后台图片在页面内放大查看，不新开页面、不下载 ---------- */
.shell img {
    cursor: zoom-in;
}

.shell :is([contenteditable="true"], [class*="w-e-"]) img {
    cursor: default;
}

.shell :is(a[href], button, label) img {
    cursor: pointer;
}

.image-viewer {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
}

.image-viewer[open] {
    display: grid;
    place-items: center;
}

.image-viewer::backdrop {
    background: rgba(10, 20, 28, .86);
}

.image-viewer img {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
    cursor: zoom-out;
}

.image-viewer button {
    position: fixed;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    color: #fff;
    font-size: 26px;
    line-height: 44px;
    text-align: center;
    background: rgba(255, 255, 255, .16);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}

.image-viewer button:hover {
    background: rgba(255, 255, 255, .3);
}

.image-viewer button[hidden] {
    display: none;
}

.image-viewer-close {
    top: 20px;
    right: 20px;
}

.image-viewer-prev,
.image-viewer-next {
    top: 50%;
    transform: translateY(-50%);
}

.image-viewer-prev {
    left: 20px;
}

.image-viewer-next {
    right: 20px;
}

.image-viewer-count {
    position: fixed;
    left: 50%;
    bottom: 22px;
    padding: 4px 12px;
    color: #fff;
    font-size: 13px;
    background: rgba(0, 0, 0, .45);
    border-radius: 12px;
    transform: translateX(-50%);
}

/* ---------- 复制按钮、PDF 预览（admin.js） ---------- */
.copy-button {
    min-height: 1.75rem;
    padding: .125rem .625rem;
    color: #3b4654;
    font-size: .75rem;
    line-height: 1.5;
    vertical-align: middle;
    background: #eef2f6;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
}

.copy-button:hover {
    color: var(--mz-text);
    background: #e2e8ef;
}

.pdf-viewer {
    width: min(980px, 94vw);
    height: 92vh;
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #fff;
}

.pdf-viewer[open] {
    display: flex;
    flex-direction: column;
}

.pdf-viewer::backdrop {
    background: rgba(10, 20, 28, .6);
}

.pdf-viewer-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mz-border);
}

.pdf-viewer-bar strong {
    flex: 1;
}

.pdf-viewer-bar button {
    min-height: 34px;
    padding: 4px 14px;
}

.pdf-viewer iframe {
    flex: 1;
    width: 100%;
    border: 0;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 991.98px) {
    .columns,
    .grid-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel,
    .stats article {
        padding: 1rem;
    }

    .panel.table-wrap > :not(table) {
        margin-inline: 1rem;
    }
}