/* ============================================================
   启元.QIEAM UI V4 原子组件库 —— 单一真源 (components.css)
   覆盖规范声明的 26 项原子组件。
   硬性纪律：
   1. 100% 消费 tokens.css / base.css 既有令牌与原语，零裸值、零 !important。
   2. 根类一律使用 qx-* 命名空间，状态类修饰符使用 .is-* 或 .qx-xxx--{variant}。
   3. 每个组件完整覆盖 6 种标准物理状态：默认 / hover / 聚焦 / 禁用 / 加载 / 错误。
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. 基础控件与表单输入族
   ════════════════════════════════════════════════════════════ */

/* ── 1.1 按钮组件 (qx-btn) ── */
.qx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--scale-sp-2);
    min-height: 32px;
    padding: var(--scale-sp-1) var(--scale-sp-3);
    font-family: var(--font-sans);
    font-size: var(--scale-t-body);
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--scale-panel);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--scale-steel);
    border: 1px solid var(--scale-steel);
    border-radius: var(--scale-r-ctl);
    outline: none;
    transition:
        background-color var(--dur-inst) var(--ease-out),
        border-color var(--dur-inst) var(--ease-out),
        color var(--dur-inst) var(--ease-out);
}

.qx-btn:hover,
.qx-btn.is-hover {
    background-color: var(--scale-steel-hi);
    border-color: var(--scale-steel-hi);
    color: var(--scale-panel);
}

.qx-btn:focus-visible,
.qx-btn.is-focus {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
}

.qx-btn:disabled,
.qx-btn.is-disabled {
    cursor: not-allowed;
    background-color: var(--scale-recess);
    border-color: var(--scale-rule);
    color: var(--scale-ink-4);
    pointer-events: none;
}

.qx-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}

.qx-btn.is-loading::after {
    position: absolute;
    width: 14px;
    height: 14px;
    content: "";
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: qx-spin 0.6s linear infinite;
    color: var(--scale-panel);
}

.qx-btn.is-error,
.qx-btn--danger {
    background-color: var(--scale-redline);
    border-color: var(--scale-redline);
    color: var(--scale-panel);
}

.qx-btn.is-error:hover,
.qx-btn--danger:hover {
    background-color: #8C221A;
    border-color: #8C221A;
}

/* 按钮变体：线框次按键 */
.qx-btn--secondary {
    background-color: var(--scale-panel);
    border-color: var(--scale-rule-strong);
    color: var(--scale-ink-1);
}

.qx-btn--secondary:hover {
    background-color: var(--scale-recess);
    border-color: var(--scale-rule-focus);
    color: var(--scale-ink-1);
}

.qx-btn--secondary.is-loading::after {
    color: var(--scale-ink-1);
}

/* 按钮变体：轻量浅底按键 */
.qx-btn--subtle {
    background-color: var(--scale-steel-wash);
    border-color: transparent;
    color: var(--scale-steel);
}

.qx-btn--subtle:hover {
    background-color: var(--scale-recess);
    color: var(--scale-steel-hi);
}

/* 尺寸变体 */
.qx-btn--sm {
    min-height: 28px;
    padding: 2px var(--scale-sp-2);
    font-size: var(--scale-t-meta);
}

.qx-btn--lg {
    min-height: 40px;
    padding: var(--scale-sp-2) var(--scale-sp-4);
    font-size: var(--scale-t-title);
}

/* ── 1.2 图标按钮 (qx-icon-btn) ── */
.qx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: var(--scale-t-body);
    color: var(--scale-ink-2);
    cursor: pointer;
    background-color: transparent;
    border: 1px solid var(--scale-rule);
    border-radius: var(--scale-r-ctl);
    outline: none;
    transition: all var(--dur-inst) var(--ease-out);
}

.qx-icon-btn:hover,
.qx-icon-btn.is-hover {
    background-color: var(--scale-recess);
    border-color: var(--scale-rule-strong);
    color: var(--scale-ink-1);
}

.qx-icon-btn:focus-visible,
.qx-icon-btn.is-focus {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
}

.qx-icon-btn:disabled,
.qx-icon-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

.qx-icon-btn.is-loading {
    color: transparent;
    pointer-events: none;
}

.qx-icon-btn.is-loading::after {
    position: absolute;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid var(--scale-ink-2);
    border-top-color: transparent;
    border-radius: 50%;
    animation: qx-spin 0.6s linear infinite;
}

.qx-icon-btn.is-error {
    border-color: var(--scale-redline);
    color: var(--scale-redline);
}

.qx-icon-btn--sm {
    width: 28px;
    height: 28px;
    font-size: var(--scale-t-meta);
}

.qx-icon-btn--lg {
    width: 40px;
    height: 40px;
    font-size: var(--scale-t-title);
}

/* ── 1.3 单行文本输入框 (qx-input) ── */
.qx-input {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: var(--scale-sp-1) var(--scale-sp-2);
    font-family: var(--font-sans);
    font-size: var(--scale-t-body);
    line-height: var(--lh-body);
    color: var(--scale-ink-1);
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule-strong);
    border-radius: var(--scale-r-ctl);
    outline: none;
    transition: border-color var(--dur-inst) var(--ease-out);
}

.qx-input::placeholder {
    color: var(--scale-ink-4);
}

.qx-input:hover,
.qx-input.is-hover {
    border-color: var(--scale-rule-focus);
}

.qx-input:focus,
.qx-input.is-focus {
    border-color: var(--scale-steel);
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 1px;
}

.qx-input:disabled,
.qx-input.is-disabled {
    cursor: not-allowed;
    background-color: var(--scale-recess);
    border-color: var(--scale-rule);
    color: var(--scale-ink-4);
}

.qx-input.is-loading {
    background-image: linear-gradient(90deg, transparent 0%, var(--scale-recess) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: qx-shimmer 1.5s infinite;
}

.qx-input.is-error,
.qx-input:invalid {
    border-color: var(--scale-redline);
    background-color: var(--scale-redline-wash);
}

.qx-input--mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ── 1.4 下拉选择框 (qx-select) ── */
.qx-select {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: var(--scale-sp-1) var(--scale-sp-4) var(--scale-sp-1) var(--scale-sp-2);
    font-family: var(--font-sans);
    font-size: var(--scale-t-body);
    color: var(--scale-ink-1);
    background-color: var(--scale-panel);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236B7276' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 10px;
    border: 1px solid var(--scale-rule-strong);
    border-radius: var(--scale-r-ctl);
    outline: none;
    appearance: none;
    cursor: pointer;
}

.qx-select:hover,
.qx-select.is-hover {
    border-color: var(--scale-rule-focus);
}

.qx-select:focus,
.qx-select.is-focus {
    border-color: var(--scale-steel);
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 1px;
}

.qx-select:disabled,
.qx-select.is-disabled {
    cursor: not-allowed;
    background-color: var(--scale-recess);
    color: var(--scale-ink-4);
    opacity: 0.6;
}

.qx-select.is-error {
    border-color: var(--scale-redline);
    background-color: var(--scale-redline-wash);
}

/* ── 1.5 多行文本框 (qx-textarea) ── */
.qx-textarea {
    display: block;
    width: 100%;
    min-height: 80px;
    padding: var(--scale-sp-2);
    font-family: var(--font-sans);
    font-size: var(--scale-t-body);
    line-height: var(--lh-body);
    color: var(--scale-ink-1);
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule-strong);
    border-radius: var(--scale-r-ctl);
    outline: none;
    resize: vertical;
}

.qx-textarea:hover,
.qx-textarea.is-hover {
    border-color: var(--scale-rule-focus);
}

.qx-textarea:focus,
.qx-textarea.is-focus {
    border-color: var(--scale-steel);
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 1px;
}

.qx-textarea:disabled,
.qx-textarea.is-disabled {
    cursor: not-allowed;
    background-color: var(--scale-recess);
    color: var(--scale-ink-4);
}

.qx-textarea.is-error {
    border-color: var(--scale-redline);
    background-color: var(--scale-redline-wash);
}

/* ── 1.6 复选框 (qx-check) ── */
.qx-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--scale-sp-2);
    font-size: var(--scale-t-body);
    color: var(--scale-ink-2);
    cursor: pointer;
    user-select: none;
}

.qx-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.qx-check__box {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule-strong);
    border-radius: 2px;
    transition: all var(--dur-inst) var(--ease-out);
}

.qx-check:hover .qx-check__box,
.qx-check.is-hover .qx-check__box {
    border-color: var(--scale-rule-focus);
}

.qx-check input[type="checkbox"]:focus-visible + .qx-check__box,
.qx-check.is-focus .qx-check__box {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
}

.qx-check input[type="checkbox"]:checked + .qx-check__box {
    background-color: var(--scale-steel);
    border-color: var(--scale-steel);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
}

.qx-check input[type="checkbox"]:disabled + .qx-check__box,
.qx-check.is-disabled {
    cursor: not-allowed;
    background-color: var(--scale-recess);
    border-color: var(--scale-rule);
    opacity: 0.5;
}

.qx-check.is-error .qx-check__box {
    border-color: var(--scale-redline);
}

/* ── 1.7 单选框 (qx-radio) ── */
.qx-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--scale-sp-2);
    font-size: var(--scale-t-body);
    color: var(--scale-ink-2);
    cursor: pointer;
    user-select: none;
}

.qx-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.qx-radio__circle {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule-strong);
    border-radius: 50%;
    transition: all var(--dur-inst) var(--ease-out);
}

.qx-radio:hover .qx-radio__circle,
.qx-radio.is-hover .qx-radio__circle {
    border-color: var(--scale-rule-focus);
}

.qx-radio input[type="radio"]:focus-visible + .qx-radio__circle,
.qx-radio.is-focus .qx-radio__circle {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
}

.qx-radio input[type="radio"]:checked + .qx-radio__circle {
    border-color: var(--scale-steel);
    background-color: var(--scale-panel);
    box-shadow: inset 0 0 0 4px var(--scale-steel);
}

.qx-radio input[type="radio"]:disabled + .qx-radio__circle,
.qx-radio.is-disabled {
    cursor: not-allowed;
    background-color: var(--scale-recess);
    border-color: var(--scale-rule);
    opacity: 0.5;
}

/* ── 1.8 滑动开关 (qx-switch) ── */
.qx-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--scale-sp-2);
    cursor: pointer;
    user-select: none;
}

.qx-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.qx-switch__track {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    background-color: var(--scale-rule-strong);
    border-radius: 10px;
    transition: background-color var(--dur-inst) var(--ease-out);
}

.qx-switch__track::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    content: "";
    background-color: var(--scale-panel);
    border-radius: 50%;
    transition: transform var(--dur-inst) var(--ease-out);
}

.qx-switch input[type="checkbox"]:checked + .qx-switch__track {
    background-color: var(--scale-steel);
}

.qx-switch input[type="checkbox"]:checked + .qx-switch__track::after {
    transform: translateX(16px);
}

.qx-switch input[type="checkbox"]:focus-visible + .qx-switch__track,
.qx-switch.is-focus .qx-switch__track {
    outline: 2px solid var(--scale-rule-focus);
    outline-offset: 2px;
}

.qx-switch input[type="checkbox"]:disabled + .qx-switch__track,
.qx-switch.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* ── 1.9 表单字段容器 (qx-field) ── */
.qx-field {
    display: flex;
    flex-direction: column;
    gap: var(--scale-sp-1);
    margin-bottom: var(--scale-sp-3);
}

.qx-field__label {
    font-size: var(--scale-t-meta);
    font-weight: 500;
    color: var(--scale-ink-2);
}

.qx-field__label.is-required::after {
    margin-left: 2px;
    content: "*";
    color: var(--scale-redline);
}

.qx-field__help {
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
}

.qx-field__error {
    display: none;
    font-size: var(--scale-t-meta);
    color: var(--scale-redline);
}

.qx-field.is-error .qx-field__error {
    display: block;
}

/* ════════════════════════════════════════════════════════════
   2. 数据表格与导航过滤族
   ════════════════════════════════════════════════════════════ */

/* ── 2.1 文档式密表 (qx-table) ── */
.qx-table-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--scale-rule);
    background-color: var(--scale-panel);
}

/* 表容器与面板内缘对齐时取消自身描边（原模板内联 border:none） */
.qx-table-wrap--plain {
    border: 0;
}

.qx-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--scale-t-body);
    color: var(--scale-ink-2);
    text-align: left;
}

.qx-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--scale-sp-2) var(--scale-sp-3);
    font-size: var(--scale-t-meta);
    font-weight: 600;
    color: var(--scale-ink-3);
    background-color: var(--scale-recess);
    border-bottom: 1px solid var(--scale-rule-strong);
    white-space: nowrap;
}

.qx-table td {
    padding: var(--scale-sp-2) var(--scale-sp-3);
    border-bottom: 1px solid var(--scale-rule);
    transition: background-color var(--dur-inst) var(--ease-out);
}

.qx-table tbody tr:hover td {
    background-color: var(--scale-face);
}

.qx-table tbody tr.is-selected td {
    background-color: var(--scale-steel-wash);
}

.qx-table td.qx-num {
    font-family: var(--font-mono);
    text-align: right;
}

/* ── 2.2 机械刻度分页器 (qx-pagination) ── */
.qx-pagination {
    display: inline-flex;
    align-items: center;
    gap: var(--scale-sp-1);
    padding: var(--scale-sp-2) 0;
    font-family: var(--font-mono);
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-2);
}

.qx-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--scale-sp-2);
    color: var(--scale-ink-2);
    text-decoration: none;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule-strong);
    border-radius: var(--scale-r-ctl);
    cursor: pointer;
    transition: all var(--dur-inst) var(--ease-out);
}

.qx-pagination__btn:hover {
    border-color: var(--scale-rule-focus);
    color: var(--scale-ink-1);
}

.qx-pagination__btn.is-active {
    background-color: var(--scale-steel);
    border-color: var(--scale-steel);
    color: var(--scale-panel);
}

.qx-pagination__btn:disabled,
.qx-pagination__btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

/* ── 2.3 单行筛选带 (qx-filterbar) ── */
.qx-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-sp-3);
    padding: var(--scale-sp-2) var(--scale-sp-3);
    background-color: var(--scale-recess);
    border: 1px solid var(--scale-rule);
    border-radius: var(--scale-r-ctl);
    margin-bottom: var(--scale-sp-3);
}

.qx-filterbar__group {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-2);
    flex-wrap: wrap;
}

/* 主检索字段：吃掉剩余宽度（原模板内联 flex: 1 1 320px） */
.qx-filterbar__group--grow {
    flex: 1 1 320px;
}

/* 主检索输入框：宽度自适应组内剩余空间——.qx-input 的 width:100% 在
   flex-wrap 组里会把搜索图标挤到上一行（历史遗留），此处显式改回 flex 布局 */
.qx-filterbar__group--grow > .qx-input {
    flex: 1 1 0;
    width: auto;
}

/* ── 2.4 标签页导航 (qx-tabs) ── */
.qx-tabs {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-4);
    border-bottom: 1px solid var(--scale-rule);
    margin-bottom: var(--scale-sp-4);
}

.qx-tabs__item {
    position: relative;
    padding: var(--scale-sp-2) 0;
    font-size: var(--scale-t-body);
    font-weight: 500;
    color: var(--scale-ink-3);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    transition: color var(--dur-inst) var(--ease-out);
}

.qx-tabs__item:hover {
    color: var(--scale-ink-1);
}

.qx-tabs__item.is-active {
    color: var(--scale-steel);
    font-weight: 600;
}

.qx-tabs__item.is-active::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    content: "";
    background-color: var(--scale-steel);
}

.qx-tabs__item:disabled,
.qx-tabs__item.is-disabled {
    cursor: not-allowed;
    color: var(--scale-ink-4);
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   3. 信息呈现与度量读数族
   ════════════════════════════════════════════════════════════ */

/* ── 3.1 状态胶囊 (qx-tag) ── */
.qx-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--scale-sp-1);
    padding: 1px var(--scale-sp-2);
    font-size: var(--scale-t-meta);
    font-weight: 500;
    line-height: var(--lh-tight);
    border-radius: var(--scale-r-ctl);
    border: 1px solid var(--scale-rule);
    background-color: var(--scale-face);
    color: var(--scale-ink-2);
    white-space: nowrap;
}

.qx-tag--ok {
    border-color: var(--scale-ok);
    background-color: #EBF5EE;
    color: var(--scale-ok);
}

.qx-tag--warn {
    border-color: var(--scale-warn);
    background-color: #FEF7E6;
    color: var(--scale-warn);
}

.qx-tag--alarm,
.qx-tag--redline {
    border-color: var(--scale-redline);
    background-color: var(--scale-redline-wash);
    color: var(--scale-redline);
}

.qx-tag--steel {
    border-color: var(--scale-steel);
    background-color: var(--scale-steel-wash);
    color: var(--scale-steel);
}

/* ── 3.2 状态指示灯 (qx-dot) ── */
.qx-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--scale-ink-4);
    vertical-align: middle;
}

.qx-dot--ok { background-color: var(--scale-ok); }
.qx-dot--warn { background-color: var(--scale-warn); }
.qx-dot--alarm { background-color: var(--scale-redline); }
.qx-dot--steel { background-color: var(--scale-steel); }

.qx-dot.is-pulse {
    animation: qx-pulse 1.8s infinite;
}

/* ── 3.3 基础面板 (qx-panel) ── */
.qx-panel {
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
    border-radius: 0;
    padding: var(--scale-sp-4);
    margin-bottom: var(--scale-sp-4);
}

.qx-panel--compact {
    padding: var(--scale-sp-3);
}

/* 面板内容自管内距（表格/看板列/列表整片铺满，原模板内联 padding:0） */
.qx-panel--flush {
    padding: 0;
}

.qx-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--scale-sp-2);
    margin-bottom: var(--scale-sp-3);
    border-bottom: 1px solid var(--scale-rule);
}

/* 表头嵌入去内距面板：补回左右内距（原模板内联 padding:sp3 sp4 0） */
.qx-panel__header--inset {
    padding: var(--scale-sp-3) var(--scale-sp-4) 0;
}

.qx-panel__title {
    font-size: var(--scale-t-title);
    font-weight: 600;
    color: var(--scale-ink-1);
}

/* ── 3.4 指标度量卡 (qx-stat) ── */
.qx-stat {
    display: flex;
    flex-direction: column;
    gap: var(--scale-sp-1);
    padding: var(--scale-sp-3);
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
}

.qx-stat__label {
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
}

.qx-stat__value {
    font-family: var(--font-mono);
    font-size: var(--scale-t-stat);
    font-weight: 500;
    line-height: var(--lh-tight);
    color: var(--scale-ink-1);
}

/* ── 3.5 页面标题带 (qx-page-band) ── */
.qx-page-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--scale-sp-2) var(--scale-sp-3);
    padding: var(--scale-sp-3) 0;
    margin-bottom: var(--scale-sp-4);
    border-bottom: 1px solid var(--scale-rule-strong);
}

.qx-page-band__title {
    font-size: var(--scale-t-page);
    font-weight: 600;
    color: var(--scale-ink-1);
    margin: 0;
}

/* 页头副标题：说明本页职责与数据口径 */
.qx-page-band__sub {
    margin-top: var(--scale-sp-1);
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
}

/* 页头右侧动作区（筛选/新增/导出按钮组） */
.qx-page-band__actions {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-2);
}

/* ── 3.6 分组区块 (qx-section) ── */
.qx-section {
    position: relative;
    padding-left: var(--scale-sp-3);
    margin: var(--scale-sp-5) 0 var(--scale-sp-3);
}

.qx-section::before {
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    content: "";
    background-color: var(--scale-steel);
}

.qx-section__title {
    font-size: var(--scale-t-title);
    font-weight: 600;
    color: var(--scale-ink-1);
    margin: 0;
}

/* ── 3.7 键值对展示项 (qx-kv) ── */
.qx-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qx-kv__key {
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
}

.qx-kv__value {
    font-size: var(--scale-t-body);
    font-weight: 500;
    color: var(--scale-ink-1);
}

.qx-kv--row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--scale-sp-2);
}

/* ── 3.8 详情页双栏栅格 (qx-detail-grid) ── */
/* 主内容 + 320px 侧栏；窄屏 ≤1024px 折叠单列（原 13 个详情页各写一份 @media 内联块） */
.qx-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--scale-sp-4);
    align-items: start;
}

.qx-detail-grid--7-3 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.qx-detail-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.qx-detail-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

@media (max-width: 1024px) {
    .qx-detail-grid,
    .qx-detail-grid--7-3,
    .qx-detail-grid--7-5,
    .qx-detail-grid--2-1 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── 3.9 指标卡栅格 (qx-stat-grid) ── */
/* 自适应列数：≥220px 一列，面板组顶部成排 */
.qx-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--scale-sp-3);
    margin-bottom: var(--scale-sp-4);
}

/* ════════════════════════════════════════════════════════════
   4. 反馈、浮层与占位族
   ════════════════════════════════════════════════════════════ */

/* ── 4.1 空状态组件 (qx-empty) ── */
.qx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--scale-sp-7) var(--scale-sp-4);
    text-align: center;
}

.qx-empty__icon {
    font-size: 36px;
    color: var(--scale-rule-focus);
    margin-bottom: var(--scale-sp-2);
}

.qx-empty__text {
    font-size: var(--scale-t-body);
    color: var(--scale-ink-3);
}

/* ── 4.2 模态对话框 (qx-modal) ── */
.qx-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45);
}

.qx-modal {
    width: 100%;
    max-width: 520px;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
    border-radius: var(--scale-r-float);
    box-shadow: var(--scale-shadow-float);
    overflow: hidden;
    animation: qx-rise var(--dur-lead) var(--ease-out);
}

.qx-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--scale-sp-3) var(--scale-sp-4);
    border-bottom: 1px solid var(--scale-rule);
}

.qx-modal__body {
    padding: var(--scale-sp-4);
}

.qx-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--scale-sp-2);
    padding: var(--scale-sp-3) var(--scale-sp-4);
    background-color: var(--scale-recess);
    border-top: 1px solid var(--scale-rule);
}

/* ── 4.2.1 在线更新提示（顶栏 pill 打开的全局弹窗）──
   几何：日志块最大高度 min(48vh, 420px)——半屏与固定上限取小值，
   保证长日志内部滚动、短日志不留空白；其余全部消费 --scale-* 令牌。 */
.qx-update-compare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--scale-sp-2);
    margin: 0 0 var(--scale-sp-3);
    font-size: var(--scale-t-body);
    color: var(--scale-ink-2);
}

.qx-update-compare strong {
    color: var(--scale-ink-1);
    font-variant-numeric: tabular-nums;
}

.qx-update-log-title {
    margin: 0 0 var(--scale-sp-2);
    font-size: var(--scale-t-meta);
    font-weight: 600;
    color: var(--scale-ink-3);
}

.qx-update-log {
    margin: 0;
    padding: var(--scale-sp-3);
    max-height: min(48vh, 420px);
    overflow: auto;
    background: var(--scale-face);
    border: 1px solid var(--scale-rule);
    border-radius: var(--scale-r-ctl);
    color: var(--scale-ink-2);
    font-family: var(--font-mono);
    font-size: var(--scale-t-code);
    line-height: var(--lh-body);
    white-space: pre-wrap;
    word-break: break-word;
}

.qx-update-note {
    display: flex;
    align-items: flex-start;
    gap: var(--scale-sp-2);
    margin: 0;
    padding: var(--scale-sp-2) var(--scale-sp-3);
    background: var(--scale-recess);
    border: 1px solid var(--scale-rule);
    border-radius: var(--scale-r-ctl);
    font-size: var(--scale-t-body);
    color: var(--scale-ink-2);
}

.qx-update-note.is-warn {
    border-color: var(--scale-warn);
}

.qx-update-note.is-warn i {
    color: var(--scale-warn);
}

.qx-update-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--scale-sp-2);
    margin: var(--scale-sp-3) 0 0;
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
}

.qx-update-actions {
    flex-wrap: wrap;
}

.qx-update-actions form {
    margin: 0;
}

/* ── 4.3 轻量浮层通知 (qx-toast) ── */
.qx-toast {
    position: fixed;
    top: var(--scale-sp-4);
    right: var(--scale-sp-4);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--scale-sp-2);
    padding: var(--scale-sp-2) var(--scale-sp-3);
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule-strong);
    border-radius: var(--scale-r-ctl);
    box-shadow: var(--scale-shadow-float);
    font-size: var(--scale-t-body);
    color: var(--scale-ink-1);
    animation: qx-rise var(--dur-lead) var(--ease-out);
}

.qx-toast--ok { border-left: 3px solid var(--scale-ok); }
.qx-toast--warn { border-left: 3px solid var(--scale-warn); }
.qx-toast--error { border-left: 3px solid var(--scale-redline); }

/* ── 4.4 浮层菜单 (qx-menu) ── */
.qx-menu {
    position: absolute;
    z-index: 900;
    min-width: 160px;
    padding: var(--scale-sp-1) 0;
    background-color: var(--scale-panel);
    border: 1px solid var(--scale-rule);
    border-radius: var(--scale-r-float);
    box-shadow: var(--scale-shadow-float);
}

.qx-menu__item {
    display: flex;
    align-items: center;
    gap: var(--scale-sp-2);
    padding: var(--scale-sp-1) var(--scale-sp-3);
    font-size: var(--scale-t-body);
    color: var(--scale-ink-2);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-inst) var(--ease-out);
}

.qx-menu__item:hover {
    background-color: var(--scale-recess);
    color: var(--scale-ink-1);
}

/* ════════════════════════════════════════════════════════════
   5. 表面专属件与标尺点缀
   ════════════════════════════════════════════════════════════ */

/* ── 5.1 HUD 读数块 (qx-hud-readout) ── */
.qx-hud-readout {
    display: inline-flex;
    flex-direction: column;
    padding: var(--scale-sp-2);
    background-color: var(--hud-panel, #121415);
    border: 1px solid var(--hud-rule, #2A2E30);
    font-family: var(--font-mono);
}

.qx-hud-readout__label {
    font-size: 11px;
    color: var(--hud-amber-dim, #B87900);
}

.qx-hud-readout__value {
    font-size: var(--scale-t-stat);
    color: var(--hud-amber, #FFB000);
    text-shadow: 0 0 4px rgba(255, 176, 0, 0.4);
}

/* ── 5.2 六分仪弧尺点缀 (qx-arc-scale) ── */
.qx-arc-scale {
    position: relative;
    display: inline-block;
    width: 96px;
    height: 54px;
}

.qx-arc-scale svg {
    width: 100%;
    height: 100%;
}

/* ════════════════════════════════════════════════════════════
   6. 通用微动效关键帧
   ════════════════════════════════════════════════════════════ */
@keyframes qx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes qx-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes qx-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes qx-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 无障碍偏好：弱动效降级 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ════════════════════════════════════════════════════════════
   7. 移动端兼容层（≤767.98px）
   目标：页头动作区不再挤压、宽表保留列宽、iOS 输入聚焦不缩放。
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* 页头：纵向堆叠；动作区换行；按钮文字不折行 */
    .qx-page-band {
        flex-direction: column;
        align-items: stretch;
        gap: var(--scale-sp-2);
    }

    .qx-page-band > * {
        width: 100%;
        min-width: 0;
    }

    .qx-page-band > .qx-page-band__actions {
        flex-wrap: wrap;
    }

    .qx-page-band .qx-btn {
        white-space: nowrap;
    }

    /* 宽表：容器横向滚动，表格保留可读列宽 */
    .qx-table-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .qx-table-wrap > .qx-table {
        min-width: 640px; /* 640px：5~6 列密表最小可读宽度 */
    }

    /* Safari：原生 select/input 的固有宽度会撑破窄栅格 */
    .qx-input,
    .qx-select,
    .qx-textarea,
    select {
        min-width: 0;
        max-width: 100%;
    }

    .row > [class*="col-"] {
        min-width: 0;
    }

    /* iOS Safari：表单控件字号 <16px 会在聚焦时自动放大页面 */
    .qx-input,
    .qx-select,
    .qx-textarea,
    .topbar .global-search input,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: var(--scale-t-title);
    }
}