/* ==========================================================================
   闲鱼直充管理后台 - 全局样式
   --------------------------------------------------------------------------
   设计要点：
   1. 所有颜色、圆角、阴影收敛到 :root 变量，改一处即可全局换肤；
   2. 面板、按钮、输入框、表格、弹窗统一圆角与阴影层级；
   3. 交互反馈：按钮 hover 抬升 + active 按压、输入框聚焦光环、弹窗/遮罩淡入、
      表格行悬停高亮、统一细滚动条；
   4. lucide 图标统一尺寸（默认 24px 过大，这里按场景缩放）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量（Design Tokens）
   -------------------------------------------------------------------------- */
:root {
    /* 背景与面板 */
    --bg: #f3f5f9;                /* 页面底色，比纯灰多一点点冷调 */
    --panel: #ffffff;             /* 面板底色 */
    --border: #e4e8ef;            /* 常规描边 */
    --border-strong: #cdd5df;     /* 输入框描边 */
    --hover-bg: #f5f7fa;          /* 按钮/行悬停底色 */

    /* 文本 */
    --text: #1f2933;              /* 主文本 */
    --muted: #737e8c;             /* 次要文本 */

    /* 主色（品牌蓝） */
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --accent-soft: #e8effd;       /* 主色浅底（选中态、图标底） */

    /* 语义色（浅底/深字成对出现） */
    --ok-bg: #e5f6ec;
    --ok-text: #15803d;
    --warn-bg: #fdf1e0;
    --warn-text: #b45309;
    --danger-bg: #fdeaea;
    --danger-text: #b91c1c;
    --danger: #dc2626;            /* 危险按钮主色 */
    --danger-dark: #b91c1c;
    --info-bg: #e8effd;
    --info-text: #1d4ed8;
    --neutral-bg: #eef1f4;
    --neutral-text: #4b5563;

    /* 侧边栏（深色渐变） */
    --sidebar-bg-1: #171e2b;
    --sidebar-bg-2: #232e40;
    --sidebar-line: rgba(255, 255, 255, 0.08);
    --sidebar-text: #a7b0bf;
    --sidebar-active: rgba(37, 99, 235, 0.22);

    /* 圆角 */
    --radius: 8px;                /* 常规组件 */
    --radius-lg: 12px;            /* 面板/弹窗 */

    /* 阴影层级 */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.22);
    /* 主按钮投影：静态微光，hover 时加深 */
    --shadow-primary: 0 2px 6px rgba(37, 99, 235, 0.30);
}

/* --------------------------------------------------------------------------
   2. 基础重置与全局
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* 文本选中态使用主色浅底，细节质感 */
::selection {
    background: rgba(37, 99, 235, 0.18);
}

/* 统一细滚动条（webkit 内核），避免默认粗滚动条破坏观感 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #cbd3dd;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aab4c1;
}

::-webkit-scrollbar-track {
    background: transparent;
}

a {
    color: var(--accent);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. lucide 图标尺寸统一
   -------------------------------------------------------------------------- */
/* lucide 渲染出的 svg 默认 24px，在 30px 高的按钮里过于拥挤，统一缩小 */
svg.lucide {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   4. 整体布局：侧边栏 + 主区域
   -------------------------------------------------------------------------- */
.layout {
    display: flex;
    min-height: 100vh;
}

/* 侧边栏：深色渐变 + 品牌区 + 导航 */
.sidebar {
    width: 190px;
    flex: 0 0 190px;
    background: linear-gradient(180deg, var(--sidebar-bg-1), var(--sidebar-bg-2));
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
}

/* 品牌区：渐变小方块 Logo + 站点名 */
.sidebar .brand {
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid var(--sidebar-line);
    display: flex;
    align-items: center;
    gap: 9px;
}

/* 品牌图标方块：主色渐变 + 圆角 + 轻投影 */
.sidebar .brand::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.45);
    flex: 0 0 auto;
}

.sidebar nav {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 8px;
    padding: 9px 12px;
    color: var(--sidebar-text);
    font-size: 13px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar nav a svg.lucide {
    width: 16px;
    height: 16px;
}

.sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

/* 当前页：主色半透明底 + 左侧高亮条 */
.sidebar nav a.active {
    background: var(--sidebar-active);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
}

/* 主区域：topbar + content 纵向排布 */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* 顶栏：吸顶 + 细阴影，标题前加主色竖条 */
.topbar {
    height: 52px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar .title {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar .title::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--accent);
}

.topbar .user-area {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
}

.content {
    padding: 18px 20px 32px;
}

/* --------------------------------------------------------------------------
   5. 面板与页头
   -------------------------------------------------------------------------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.panel + .panel {
    margin-top: 14px;
}

/* 页头：大标题 + 描述 + 右侧动作区（商品配置等页面使用） */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.page-header .page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.page-header .page-desc {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.page-header .page-actions {
    display: flex;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   6. 统计卡片（商品配置页顶部）
   -------------------------------------------------------------------------- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* 统计卡片左侧的圆角图标底 */
.stat-card .icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.stat-card .icon-box svg.lucide {
    width: 18px;
    height: 18px;
}

/* 图标底配色变体 */
.stat-card .icon-box.blue {
    background: var(--accent-soft);
    color: var(--accent);
}

.stat-card .icon-box.green {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.stat-card .icon-box.gray {
    background: var(--neutral-bg);
    color: var(--neutral-text);
}

.stat-card .stat-value {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card .stat-label {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

/* --------------------------------------------------------------------------
   7. 表单：筛选区、输入框、提示与错误
   -------------------------------------------------------------------------- */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 14px;
    align-items: end;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.field label {
    color: var(--muted);
    font-size: 12px;
}

input, select, button, textarea {
    font-family: inherit;
    font-size: 13px;
}

input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
    height: auto;
    padding: 6px 10px;
}

input:hover, select:hover, textarea:hover {
    border-color: #9fb0c3;
}

/* 聚焦光环：主色半透明外圈 */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.filter-actions {
    display: flex;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   8. 按钮体系
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease,
        border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
    background: var(--hover-bg);
    border-color: #aeb9c7;
}

/* 按压时轻微下沉，强化点击反馈 */
.btn:active {
    transform: translateY(1px);
}

/* 键盘可达性：焦点环 */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6, var(--accent));
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2f74ee, var(--accent-dark));
    border-color: var(--accent-dark);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.40);
}

/* 危险按钮（确认停用等场景） */
.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.30);
}

.btn-danger:hover {
    background: var(--danger-dark);
    border-color: var(--danger-dark);
}

/* 表格行内的文字按钮 */
.btn-link {
    border: none;
    background: none;
    color: var(--accent);
    padding: 0 4px;
    height: auto;
    cursor: pointer;
    border-radius: 4px;
}

.btn-link:hover {
    text-decoration: underline;
    background: none;
}

.btn-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.btn-link.danger {
    color: var(--danger-text);
}

/* 提交中按钮内的旋转小圈（配合 .btn disabled 使用） */
.spinner {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* --------------------------------------------------------------------------
   9. 表格
   -------------------------------------------------------------------------- */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.table-toolbar .summary {
    color: var(--muted);
}

.table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: auto;
    background: #fff;
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 1080px;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f9fc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: #4a5768;
    padding: 10px 12px;
    white-space: nowrap;
}

tbody td {
    border-bottom: 1px solid #eef1f5;
    padding: 10px 12px;
    white-space: nowrap;
}

/* 行悬停：淡蓝高亮 + 平滑过渡 */
tbody tr {
    transition: background 0.12s ease;
}

tbody tr:hover {
    background: #f6f9ff;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* 停用行整行降透明度（商品配置页使用） */
tbody tr.row-disabled {
    color: #9aa4b1;
}

.mono {
    font-family: Consolas, "Courier New", monospace;
}

.muted {
    color: var(--muted);
}

/* 编号类短标识（商品编号等）：浅底圆角小胶囊，等宽字体 */
.chip {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f4f8;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    color: #3d4856;
}

/* --------------------------------------------------------------------------
   10. 状态标签（带圆点的胶囊）
   -------------------------------------------------------------------------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

/* 标签前的小圆点：继承文字颜色，一行代码给所有状态加视觉锚点 */
.tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.tag-ok {
    background: var(--ok-bg);
    color: var(--ok-text);
}

.tag-warn {
    background: var(--warn-bg);
    color: var(--warn-text);
}

.tag-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.tag-info {
    background: var(--info-bg);
    color: var(--info-text);
}

.tag-neutral {
    background: var(--neutral-bg);
    color: var(--neutral-text);
}

/* --------------------------------------------------------------------------
   11. 分页器
   -------------------------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    color: var(--muted);
}

/* 分页器的「每页条数」下拉框。
   两个坑都在这里踩过：
     1) 写死小宽度（曾值 76px）+ 通用规则的 padding 会让「20 条/页」被箭头压住；
     2) 改用大 padding-right 给原生箭头让位，又会留下很宽的空档 ——
        原生箭头的位置和尺寸浏览器不给控制。
   所以这里关掉原生外观，改为自绘箭头（background-image 的 SVG），
   间距就变成完全可控的：padding-right 24 = 箭头右边距 8 + 箭头宽 10 + 与文字间隔 6。
   宽度按内容自适应，会落在最宽选项「100 条/页」上（实测约 96px），
   切换选项时不会跳动。 */
.pager select {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23737e8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
}

/* --------------------------------------------------------------------------
   12. 空状态
   -------------------------------------------------------------------------- */
.empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
}

/* 空状态内的大图标（由 JS 渲染 lucide 图标后生效） */
.empty svg.lucide {
    width: 34px;
    height: 34px;
    display: block;
    margin: 0 auto 8px;
    opacity: 0.4;
}

/* --------------------------------------------------------------------------
   13. 轻提示（Toast）
   -------------------------------------------------------------------------- */
.toast {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 60;
    padding: 9px 18px;
    border-radius: 8px;
    background: #1f2933;
    color: #fff;
    box-shadow: var(--shadow-md);
    display: none;
    transform: translate(-50%, -12px);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast.error {
    background: #b91c1c;
}

/* --------------------------------------------------------------------------
   14. 弹窗（遮罩 + 对话框）
   -------------------------------------------------------------------------- */
.mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 24px;
}

/* 遮罩淡入动画（display 切换会重新触发 animation） */
.mask.show {
    display: flex;
    animation: maskIn 0.18s ease-out;
}

@keyframes maskIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.dialog {
    background: #fff;
    border-radius: var(--radius-lg);
    width: 560px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    /* 弹窗上滑入场动画 */
    animation: dialogIn 0.2s ease-out;
}

@keyframes dialogIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dialog.wide {
    width: 860px;
}

/* 窄弹窗：确认对话使用 */
.dialog.narrow {
    width: 420px;
}

.dialog header {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dialog header svg.lucide {
    width: 16px;
    height: 16px;
}

.dialog .body {
    padding: 18px;
    overflow: auto;
}

.dialog footer {
    padding: 13px 18px;
    border-top: 1px solid var(--border);
    background: #f8fafc;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.icon-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    padding: 2px;
    display: inline-flex;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.icon-btn:hover {
    color: var(--text);
    background: var(--hover-bg);
}

/* 确认弹窗里的正文提示文案 */
.dialog .confirm-text {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
}

.dialog .confirm-text .muted {
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   15. 详情弹窗（订单查询页）
   -------------------------------------------------------------------------- */
.detail-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px 14px;
}

.detail-grid .label {
    color: var(--muted);
}

.detail-block {
    margin-top: 14px;
}

.detail-block .label {
    color: var(--muted);
    margin-bottom: 6px;
}

pre {
    margin: 0;
    padding: 10px;
    background: #f7f9fb;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 240px;
    overflow: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
}

/* --------------------------------------------------------------------------
   16. 纵向表单（弹窗内表单）
   -------------------------------------------------------------------------- */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.form-row label {
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
}

/* 必填项红星 */
.form-row label.req::after,
.field label.req::after {
    content: " *";
    color: var(--danger-text);
}

/* 输入框下方说明文字 */
.form-row .hint,
.field .hint {
    color: var(--muted);
    font-size: 12px;
}

/* 输入框下方错误提示（默认隐藏，JS 校验失败时显示） */
.form-row .form-error,
.field .form-error {
    display: none;
    color: var(--danger-text);
    font-size: 12px;
}

.form-row .form-error.show,
.field .form-error.show {
    display: block;
}

/* 输入校验失败时给输入框描红 */
.input-invalid {
    border-color: var(--danger) !important;
}

.input-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* --------------------------------------------------------------------------
   17. 分段选择器（启用/停用开关，商品配置弹窗使用）
   -------------------------------------------------------------------------- */
.segment {
    display: inline-flex;
    background: #edf0f4;
    border-radius: var(--radius);
    padding: 3px;
    gap: 2px;
}

.segment label {
    cursor: pointer;
}

.segment input {
    display: none;
}

.segment span {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
    transition: all 0.15s ease;
}

.segment input:checked + span {
    background: #fff;
    color: var(--accent);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   18. 带图标的输入框（登录页使用）
   -------------------------------------------------------------------------- */
.input-icon {
    position: relative;
}

.input-icon svg.lucide {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa6b5;
    pointer-events: none;
}

.input-icon input {
    padding-left: 32px;
}

/* --------------------------------------------------------------------------
   19. 登录页
   -------------------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 深蓝渐变底，营造后台系统登录氛围 */
    background: linear-gradient(135deg, #1e293b 0%, #1d3a6e 55%, #2563eb 100%);
    position: relative;
    overflow: hidden;
    padding: 24px;
}

/* 背景装饰光斑：两个模糊圆增加层次感 */
.login-page::before,
.login-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    pointer-events: none;
}

.login-page::before {
    width: 380px;
    height: 380px;
    background: #3b82f6;
    top: -120px;
    right: -80px;
}

.login-page::after {
    width: 300px;
    height: 300px;
    background: #0ea5e9;
    bottom: -110px;
    left: -70px;
}

.login-card {
    width: 380px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 30px 28px 24px;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    /* 卡片入场动画 */
    animation: cardIn 0.35s ease-out;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 登录卡顶部品牌区：渐变圆角 Logo + 标题 + 副标题 */
.login-card .login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.login-card .login-brand .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.40);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.login-card .login-brand .brand-mark svg.lucide {
    width: 20px;
    height: 20px;
}

.login-card h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.login-card .login-sub {
    margin: 18px 0 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.login-card .error {
    color: var(--danger-text);
    min-height: 18px;
    margin-top: 8px;
    font-size: 12px;
}

.login-card .btn {
    width: 100%;
    height: 38px;
    margin-top: 6px;
    font-size: 14px;
}

.login-card .login-footer {
    margin-top: 16px;
    text-align: center;
    color: #9aa6b5;
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   20. 响应式适配
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .sidebar {
        width: 56px;
        flex: 0 0 56px;
    }

    .sidebar .brand {
        padding: 16px 10px;
        font-size: 12px;
        justify-content: center;
    }

    .sidebar .brand-text {
        display: none;
    }

    .sidebar nav a {
        padding: 10px 10px;
        justify-content: center;
    }

    .sidebar nav a span {
        display: none;
    }

    .content {
        padding: 12px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}