/* ======================================================================
   ui.css —— 现代 UI 增强层（v3，2026-10-12）
   ----------------------------------------------------------------------
   定位：加载顺序 tokens → components → style → **ui（本文件）**。
        只做「润色 / 增强 / 补件」，不改任何布局不变量，不删既有规则。

   硬约束（与 docs/FRONTEND.md 对齐，改本文件前必读）：
     1. 纯 CSS、无构建工具；颜色一律走 token —— 半透明用
        `rgba(var(--x-rgb), N)`，**禁止 color-mix()**（保守基线不支持）。
     2. 断点只用 1380 / 1024 / 768 三个，不发明新数字。
     3. 不碰三类不变量（FRONTEND.md §8.1–8.3）：
        表头 sticky 偏移归零、宽表不压缩、窄屏卡片化。
     4. ⚠️ **不给 `.panel` / `.card` 基类写 padding / margin / border-radius /
        background**：这些属性被变体类（.sl-card / .sl-deep-status / .tc-main-card /
        .ar-index …）以同特异性竞争，本文件最后加载 ⇒ 会静默压掉变体（§8 陷阱）。
        基类只允许补 **变体不竞争的属性**（如 box-shadow / transition）。
     5. `transition` 是整属性覆盖：凡在本文件重写 transition 的元素，
        必须把该元素需要动画的属性一次写全。
     6. 新增组件一律 `ui-` 前缀命名空间，避免与存量类撞名。
     7. `prefers-reduced-motion: reduce` 下停用一切位移/循环动画（见文件末尾，
        必须排在所有 animation 之后）。
   ====================================================================== */

/* ======================================================================
   1. 全局基础润色
   ====================================================================== */

/* 字体平滑：让深色底/大字更细腻（仅视觉，不改字重） */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 平滑滚动（回到顶部/锚点跳转）；reduced-motion 下于文末关闭 */
    scroll-behavior: smooth;
}

/* 文本选中：品牌蓝浅底，与主色呼应 */
::selection {
    background: var(--primary-bg);
    color: var(--primary-text-on-bg);
}

/* 滚动条：默认细、低对比，悬停加深；track 透明不画竖带。
   侧栏另有专属滚动条规则（.qt-sidebar::-webkit-scrollbar，特异性更高）不受影响。 */
html {
    scrollbar-color: var(--border) transparent;  /* Firefox / 标准属性（可继承） */
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;   /* 透明描边 + content-box ⇒ 视觉更细 */
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
    background-clip: content-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* 键盘焦点环：给「尚无自有焦点样式」的可交互元素统一兜底。
   已有 :focus-visible 样式的元素（.qt-sidebar-item / .qt-theme-toggle /
   .qt-user-avatar 等）特异性更高，保持原样。鼠标点击不触发（:focus-visible）。
   ⚠️ 不写 `border-radius: inherit`——那会把「父容器圆角」带到每个按钮/链接上，
   静默改变无圆角元素的形状；outline 本身会跟随元素已有的圆角。 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 触屏点按高亮：去掉 Android/Chrome 的灰块闪烁（hover 态已提供反馈） */
html {
    -webkit-tap-highlight-color: transparent;
}

/* ======================================================================
   2. 交互反馈 · 按钮
   ----------------------------------------------------------------------
   .btn 的 transition 在 components.css 只写了 background / border-color，
   本文件重写为**完整清单**（含 color / box-shadow / transform）——
   悬停轻抬 + 按压回弹 + 实心按钮投影，构成「可点」的即时反馈。
   ====================================================================== */
.btn {
    transition:
        background-color var(--dur-fast) var(--ease-standard),
        border-color var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-med) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
    /* 触屏长按/拖拽不选中文字 */
    user-select: none;
}
@media (hover: hover) {
    .btn:not(:disabled):hover {
        transform: translateY(-1px);
    }
}
/* 实心按钮才给投影：ghost/outline 透明底加投影会显脏 */
.btn-primary:not(:disabled):hover,
.btn-danger:not(:disabled):hover,
.btn-recharge:not(:disabled):hover {
    box-shadow: var(--elev-2);
}
/* 按压：回落 + 轻微内收，给「按到了」的确定感 */
.btn:not(:disabled):active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--elev-1);
    transition-duration: var(--dur-instant);
}

/* 按钮加载态：文字隐去、居中出现转圈。用法 `<button class="btn btn-primary is-loading">`
   （只加类名即可，无需改结构）。 */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    border-top-color: transparent;
    animation: ui-spin 0.65s linear infinite;
}
/* 实心底上的转圈用白系，保证对比 */
.btn-primary.is-loading::after,
.btn-danger.is-loading::after {
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: transparent;
}

/* 图标按钮（正方形、无文字）：新组件，供工具栏/卡片操作位复用 */
.ui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard),
        transform var(--dur-fast) var(--ease-out);
}
.ui-icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}
.ui-icon-btn:active {
    transform: scale(0.92);
}

/* ======================================================================
   3. 交互反馈 · 表格与列表行
   ====================================================================== */
.data-table tbody tr {
    transition: background-color var(--dur-fast) var(--ease-standard);
}
/* 表头冻结时的「投阴影」：滚动才自然，用 inset 阴影不占布局 */
.data-table th {
    transition: box-shadow var(--dur-med) var(--ease-standard);
}
/* 可点行：悬停整行微抬 + 主色左缘提示（新类，按需挂） */
.ui-row-clickable {
    cursor: pointer;
}
.ui-row-clickable:hover {
    background: var(--surface-2);
}

/* 列表项统一动效（新类，供卡片内条目复用） */
.ui-list-item {
    transition:
        background-color var(--dur-fast) var(--ease-standard),
        transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
    .ui-list-item:hover {
        transform: translateX(2px);
    }
}

/* ======================================================================
   4. 交互反馈 · 导航 / 侧栏
   既有 :focus-visible 已就位，这里只补过渡曲线与 active 位移。
   ====================================================================== */
.qt-sidebar-item {
    transition:
        background-color var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard),
        transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
    .qt-sidebar-item:not(.active):hover {
        transform: translateX(2px);
    }
}
/* active 左缘指示条：出现时轻微「生长」而非硬切 */
.qt-sidebar-item.active::before {
    animation: ui-bar-in var(--dur-slow) var(--ease-out);
}
/* 顶部主题/头像按钮：与 .ui-icon-btn 统一手感 */
.qt-theme-toggle:active,
.qt-user-avatar:active {
    transform: scale(0.94);
}

/* ======================================================================
   5. 加载状态 · 转圈 / 骨架微光 / 进度
   ====================================================================== */

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

/* 通用转圈（可脱离按钮单独用） */
.ui-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    border-top-color: var(--primary);
    animation: ui-spin 0.7s linear infinite;
    vertical-align: middle;
}
.ui-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.ui-spinner--lg { width: 28px; height: 28px; border-width: 3px; }

/* 骨架微光：把「呼吸」升级为「流光」（覆盖 components.css 的 sk-pulse；
   同样在文末 reduced-motion 里关闭）。 */
.sk-bar,
.sk-chart {
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-hover) 45%,
        var(--surface-2) 90%
    );
    background-size: 220% 100%;
    animation: ui-shimmer 1.5s var(--ease-in-out) infinite;
}
@keyframes ui-shimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* 骨架基础件（新类，供 JS/模板按需拼装；与既有 .sk-* 互不冲突） */
.ui-skel {
    border-radius: var(--radius-md);
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
}
.ui-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--text-muted-rgb), 0.14),
        transparent
    );
    animation: ui-sheen 1.5s var(--ease-in-out) infinite;
}
@keyframes ui-sheen {
    100% { transform: translateX(100%); }
}
.ui-skel-line { height: 12px; margin: 8px 0; }
.ui-skel-line--sm { height: 9px; }
.ui-skel-block { height: 96px; }
.ui-skel-circle { border-radius: 50%; width: 40px; height: 40px; }

/* 进度条（新组件；与存量 .progress-bar 语义不同，故另起名） */
.ui-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    overflow: hidden;
}
.ui-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width var(--dur-slow) var(--ease-out);
}
.ui-progress__fill--up { background: var(--up); }
.ui-progress__fill--down { background: var(--down); }
.ui-progress__fill--warning { background: var(--warning); }

/* 忙碌容器：内容降透明度 + 禁止交互（换页/提交时挂上，避免误点） */
.ui-busy {
    opacity: 0.55;
    pointer-events: none;
    filter: saturate(0.9);
    transition: opacity var(--dur-med) var(--ease-standard);
}

/* ======================================================================
   6. 新组件（ui- 命名空间，跨页复用）
   ====================================================================== */

/* 状态胶囊：比 .badge 更「现代」的圆点 + 文字形态（用于状态机展示） */
.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.7;
    background: var(--surface-2);
    color: var(--text-secondary);
    transition: background-color var(--dur-fast) var(--ease-standard);
}
.ui-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.ui-pill--up { background: var(--up-bg); color: var(--up); }
.ui-pill--down { background: var(--down-bg); color: var(--down); }
.ui-pill--info { background: var(--primary-bg); color: var(--primary-text-on-bg); }
.ui-pill--warning { background: var(--warning-bg); color: var(--warning); }
.ui-pill--muted { background: var(--surface-2); color: var(--text-muted); }

/* 可移除 chip：筛选条件展示（配套既有 .filter-bar 使用） */
.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    transition:
        border-color var(--dur-fast) var(--ease-standard),
        background-color var(--dur-fast) var(--ease-standard);
}
.ui-chip:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.ui-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    /* WCAG 2.2 SC 2.5.8（目标尺寸 24×24 最小）：视觉保持 16px 圆点，
       命中区用伪元素外扩 4px 到 24×24（2026-10-21 设计评审批次5）。
       position:relative 只为给 ::before 提供包含块，不改布局。 */
    position: relative;
    transition:
        background-color var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard);
}
.ui-chip__x::before {
    content: '';
    position: absolute;
    inset: -4px;   /* 16 + 4×2 = 24×24 命中区 */
}
.ui-chip__x:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* 分段控件（Segment Control）：比一排 tab 更紧凑的切换 */
.ui-segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}
.ui-seg {
    appearance: none;
    border: none;
    background: transparent;
    padding: 5px 14px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-med) var(--ease-out);
}
.ui-seg:hover {
    color: var(--text);
}
.ui-seg.is-active {
    background: var(--surface);
    color: var(--primary-text-on-bg);
    box-shadow: var(--elev-1);
}

/* KPI 磁贴：数值放大 + 标签弱化 + 可选涨跌色（新组件，统一运营/看板数字卡） */
.ui-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--elev-1);
    transition:
        box-shadow var(--dur-med) var(--ease-out),
        transform var(--dur-med) var(--ease-out);
}
@media (hover: hover) {
    .ui-stat:hover {
        box-shadow: var(--elev-2);
        transform: translateY(-2px);
    }
}
.ui-stat__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
.ui-stat__value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.ui-stat__value--up { color: var(--up); }
.ui-stat__value--down { color: var(--down); }
.ui-stat__delta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* 交互卡（悬停整卡抬升）：挂到需要「可点」的卡上 */
.ui-card-interactive {
    cursor: pointer;
    transition:
        box-shadow var(--dur-med) var(--ease-out),
        transform var(--dur-med) var(--ease-out),
        border-color var(--dur-med) var(--ease-standard);
}
@media (hover: hover) {
    .ui-card-interactive:hover {
        box-shadow: var(--elev-3);
        transform: translateY(-2px);
        border-color: var(--primary-border);
    }
}
.ui-card-interactive:active {
    transform: translateY(0);
    box-shadow: var(--elev-1);
}

/* 空状态：图标 + 说明 + 可选动作，垂直居中留白 */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--text-muted);
    text-align: center;
}
.ui-empty__icon {
    width: 40px;
    height: 40px;
    color: var(--border-strong);
    opacity: 0.9;
}
.ui-empty__title {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
}
.ui-empty__desc {
    font-size: var(--font-size-sm);
    max-width: 32em;
    line-height: 1.6;
}

/* 分隔线 */
.ui-divider {
    height: 1px;
    border: none;
    margin: var(--space-4) 0;
    background: var(--border);
}
.ui-divider--v {
    width: 1px;
    height: auto;
    align-self: stretch;
    margin: 0 var(--space-3);
}

/* 键帽（快捷键提示） */
.ui-kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    text-align: center;
}

/* 色板取样块（设计稿/图例复用） */
.ui-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-xs);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    vertical-align: -3px;
}

/* ======================================================================
   7. 动效工具类（按需挂；reduced-motion 下于文末统一关闭）
   ====================================================================== */
.anim-fade-in { animation: ui-fade-in var(--dur-med) var(--ease-standard) both; }
.anim-rise { animation: ui-rise var(--dur-slow) var(--ease-out) both; }
.anim-scale-in { animation: ui-scale-in var(--dur-med) var(--ease-out) both; }

@keyframes ui-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ui-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ui-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes ui-bar-in {
    from { transform: translateY(-50%) scaleY(0.2); opacity: 0; }
    to   { transform: translateY(-50%) scaleY(1); opacity: 1; }
}

/* 级联入场：容器挂 .anim-stagger，子项依次浮现（最多铺 12 项，之后同批） */
.anim-stagger > * {
    animation: ui-rise var(--dur-slow) var(--ease-out) both;
}
.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 30ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 60ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 90ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 120ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 150ms; }
.anim-stagger > *:nth-child(7) { animation-delay: 180ms; }
.anim-stagger > *:nth-child(8) { animation-delay: 210ms; }
.anim-stagger > *:nth-child(9) { animation-delay: 240ms; }
.anim-stagger > *:nth-child(10) { animation-delay: 270ms; }
.anim-stagger > *:nth-child(11) { animation-delay: 300ms; }
.anim-stagger > *:nth-child(12) { animation-delay: 330ms; }

/* ======================================================================
   8. 响应式（只用 1024 / 768 两个约定断点）
   ----------------------------------------------------------------------
   媒体查询不提升特异性（FRONTEND.md §8）：需要覆盖既有声明时用
   `html body …` 前缀抬到同特异性以上；本层新增组件用自身类名即可。
   ====================================================================== */

/* 主题切换过渡（P2-5，2026-10-21）：theme.js 切换 data-theme 前挂 .theme-switching，
   350ms 后摘除。只过渡「颜色类」属性——transition 限定清单（而非 all），布局属性
   （width/height/padding）绝不动，避免切主题引发整页重排抖动。
   prefers-reduced-motion 下由文末降级块整体豁免（回到瞬时切换，功能不受损）。 */
html.theme-switching,
html.theme-switching body,
html.theme-switching body * {
    transition:
        background-color 0.2s var(--ease-standard),
        border-color 0.2s var(--ease-standard),
        color 0.2s var(--ease-standard),
        fill 0.2s var(--ease-standard),
        stroke 0.2s var(--ease-standard) !important;
}

/* skip-link（P2-1，UX-006）：默认视觉隐藏（不用 display:none——保持可聚焦），
   键盘 Tab 聚焦时浮现于左上角。z 高于 navbar；容器留白让它不遮内容。 */.qt-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 400;
    padding: 8px 14px;
    background: var(--primary-solid);
    color: #fff;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-3);
    text-decoration: none;
    /* 视觉隐藏但可聚焦：1px 裁剪 + 透明，聚焦时还原 */
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.qt-skip-link:focus-visible {
    width: auto;
    height: auto;
    clip-path: none;
    overflow: visible;
}
/* #qt-main 接收跳转焦点时给出可见轮廓（tabindex=-1 的程序化聚焦不触发
   :focus-visible，属正常现象；outline 让「跳到了哪」可确认） */
#qt-main:focus {
    outline: none;
}

@media (max-width: 1024px) {
    .ui-stat { padding: var(--space-3); }
    .ui-stat__value { font-size: 22px; }
}
@media (max-width: 768px) {
    /* 触屏：卡片整数化，去掉悬停位移（无 hover 语义） */
    .ui-card-interactive:hover { transform: none; }
    .ui-stat:hover { transform: none; }
    .ui-seg { padding: 6px 12px; }
}

/* ======================================================================
   9. 动效降级（必须排在所有 animation / transition 之后）
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* 停用一切循环动画（含覆盖 components.css 的骨架微光、按钮转圈） */
    .sk-bar,
    .sk-chart,
    .ui-skel::after,
    .ui-spinner,
    .btn.is-loading::after,
    .anim-fade-in,
    .anim-rise,
    .anim-scale-in,
    .anim-stagger > *,
    .qt-sidebar-item.active::before {
        animation: none !important;
    }
    /* 骨架保持可辨识（静态灰块），别变成空白 */
    .sk-bar,
    .sk-chart {
        background: var(--surface-hover);
    }
    /* 去掉位移/缩放型交互，仅保留颜色变化 */
    .btn:not(:disabled):hover,
    .btn:not(:disabled):active,
    .ui-icon-btn:active,
    .qt-sidebar-item:not(.active):hover,
    .qt-theme-toggle:active,
    .qt-user-avatar:active,
    .ui-card-interactive:hover,
    .ui-list-item:hover,
    .ui-stat:hover {
        transform: none;
    }
    .ui-card-interactive,
    .ui-stat,
    .ui-progress__fill {
        transition: none;
    }
    /* 主题切换过渡豁免（P2-5）：减弱动态偏好下回瞬时切换 */
    html.theme-switching,
    html.theme-switching body,
    html.theme-switching body * {
        transition: none !important;
    }
}

/* ======================================================================
   全站页脚（.qt-footer，2026-10-26）
   ----------------------------------------------------------------------
   为什么有它：SEO 方案 §4.1.5 —— ICP 备案号是境内服务器的合规必填项，
   同时页脚是「公开页（会员/免责/隐私）唯一的站内链接来源」：不登录的
   爬虫只能靠这里发现它们。三个作用叠在一处（合规 / 信任 / 内链）。

   位置：base.html 的 <main> 内部末尾（不用 fixed / 不脱离文档流），
   这样宽度与内容区自动对齐，不会和固定 sidebar、navbar 打架。

   断点只用 768（本项目约定的三档之一），窄屏纵向堆叠。
   ====================================================================== */
.qt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    /* 左右用 margin 内缩到内容区（.qt-main 本身没有横向 padding，内容区靠
       .market-layout 等的 padding 撑开）：这样分割线与正文左右缘同时对齐。
       实测不留这 24px 时，页脚会贴着 sidebar 边缘和屏幕右缘。 */
    margin: 40px var(--content-padding) 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

.qt-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.qt-footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.qt-footer-links a:hover {
    color: var(--text);
    text-decoration: underline;
}

.qt-footer-copy {
    /* 不用 nowrap：这句含免责声明，长度固定且偏长，nowrap 在 769~1000px 之间
       会顶出横向滚动条（窄屏已另设折行，这里直接放开更稳）。 */
    min-width: 0;
}

@media (max-width: 768px) {
    .qt-footer {
        flex-direction: column;
        align-items: flex-start;
        margin: 28px var(--content-padding) 20px;
    }
}