/* ========== 文章页「配置需求」Tab（inc/template-sysreq.php，只在有配置要求的文章页加载） ========== */

.xy-sysreq {
    --sr-bg: #fff;
    --sr-card: #fbfcfd;
    --sr-line: #e9edf2;
    --sr-text: #2c3e50;
    --sr-muted: #8a94a6;
    --sr-soft: #f6f7f9;
    background: var(--sr-bg);
    padding: 20px;
    border-radius: 0 0 4px 4px;
    color: var(--sr-text);
}

.dark-open .xy-sysreq {
    --sr-bg: #293042;
    --sr-card: #232a3a;
    --sr-line: #343d52;
    --sr-text: #d3d9e4;
    --sr-muted: #8d97aa;
    --sr-soft: #232a3a;
}

/* ---------- 显卡对比条 ---------- */
/* 与配置卡片同款的素色框，只有结论文字和前面的小图标带状态色 */
.xy-sysreq-cmp {
    --c: var(--sr-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--sr-line);
    border-radius: 10px;
    background: var(--sr-card);
}
.xy-sysreq-cmp.is-ok   { --c: #16a34a; }
.xy-sysreq-cmp.is-good { --c: #2563eb; }
.xy-sysreq-cmp.is-warn { --c: #d97706; }
.xy-sysreq-cmp.is-bad  { --c: #dc2626; }
.dark-open .xy-sysreq-cmp.is-ok   { --c: #4ade80; }
.dark-open .xy-sysreq-cmp.is-good { --c: #60a5fa; }
.dark-open .xy-sysreq-cmp.is-warn { --c: #fbbf24; }
.dark-open .xy-sysreq-cmp.is-bad  { --c: #f87171; }

.xy-sysreq-cmp-gpu {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.xy-sysreq-cmp-k {
    color: var(--sr-muted);
    font-size: 12px;
}
.xy-sysreq-cmp-res {
    flex: 1 1 220px;
    min-width: 0;
}
.xy-sysreq-cmp-res strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}
.xy-sysreq-cmp-res strong i {
    flex: none;
    font-size: 14px;
}
.xy-sysreq-cmp-res small {
    display: block;
    color: var(--sr-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* 游客 / 没识别过：一句引导 + 按钮 */
.xy-sysreq-cmp.is-none > .fa-microchip {
    flex: none;
    color: var(--sr-muted);
    font-size: 16px;
}
.xy-sysreq-cmp-msg {
    flex: 1 1 200px;
    min-width: 0;
    color: var(--sr-text);
    font-size: 14px;
}
.xy-sysreq-cmp-btn,
.xy-sysreq-cmp-btn:hover,
.xy-sysreq-cmp-btn:focus {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 32px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #f58907 0%, #e67d00 100%);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(245, 137, 7, .3);
}
.xy-sysreq-cmp-btn:hover {
    filter: brightness(1.05);
}

/* ---------- 说明文字（Switch） ---------- */
.xy-sysreq-intro {
    margin-bottom: 14px;
    color: var(--sr-muted);
    font-size: 14px;
    line-height: 1.7;
}
.xy-sysreq-intro p {
    margin: 0 0 4px;
}
.xy-sysreq-intro p:last-child {
    margin-bottom: 0;
}

/* ---------- 配置卡片 ---------- */
.xy-sysreq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.xy-sysreq-grid.is-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xy-sysreq-card {
    padding: 14px 16px 6px;
    border: 1px solid var(--sr-line);
    border-radius: 10px;
    background: var(--sr-card);
}
.xy-sysreq .xy-sysreq-h {
    display: inline-block;
    margin: 0 0 6px;
    padding: 2px 12px;
    border-radius: 999px;
    background: #64748b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}
.xy-sysreq .xy-sysreq-card.is-rec .xy-sysreq-h {
    background: linear-gradient(135deg, #f58907 0%, #e67d00 100%);
}
.xy-sysreq-list {
    margin: 0;
}
.xy-sysreq-row {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-top: 1px dashed var(--sr-line);
    font-size: 14px;
    line-height: 1.6;
}
.xy-sysreq-row:first-child {
    border-top: 0;
}
.xy-sysreq-row dt {
    color: var(--sr-muted);
    font-size: 13px;
    font-weight: 400;
}
.xy-sysreq-row dd {
    margin: 0;
    min-width: 0;
    color: var(--sr-text);
    overflow-wrap: anywhere;
}
.xy-sysreq-row.is-p {
    grid-template-columns: minmax(0, 1fr);
}
.xy-sysreq-row.is-p dd {
    color: var(--sr-muted);
    font-size: 13px;
}

/* 显卡行末尾的结论小标签 */
.xy-sysreq-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    vertical-align: 1px;
}
.xy-sysreq-chip i {
    font-size: 10px;
}
.xy-sysreq-chip.is-pass { background: #dcfce7; color: #15803d; }
.xy-sysreq-chip.is-near { background: #fef3c7; color: #b45309; }
.xy-sysreq-chip.is-low  { background: #fee2e2; color: #b91c1c; }
.dark-open .xy-sysreq-chip.is-pass { background: rgba(74, 222, 128, .14); color: #4ade80; }
.dark-open .xy-sysreq-chip.is-near { background: rgba(251, 191, 36, .14); color: #fbbf24; }
.dark-open .xy-sysreq-chip.is-low  { background: rgba(248, 113, 113, .14); color: #f87171; }

.xy-sysreq-note {
    margin: 10px 0 0;
    color: var(--sr-muted);
    font-size: 12px;
    line-height: 1.6;
}

/*
 * 多了一个 Tab 后，375 宽的手机上第四个会被挤到第二行。本文件只在出这个 Tab 的文章页加载，
 * 窄屏时去掉 Tab 图标、收紧间距，四个正好排一行（不影响没有这个 Tab 的文章）。
 */
@media (max-width: 420px) {
    .single-download-nav li:not(:last-child) {
        margin-right: 6px;
    }
    .single-download-nav li .nav-link > i {
        display: none;
    }
}

@media (max-width: 767px) {
    .xy-sysreq {
        padding: 14px 12px;
    }
    .xy-sysreq-grid.is-2 {
        grid-template-columns: minmax(0, 1fr);
    }
    .xy-sysreq-cmp {
        padding: 10px 12px;
    }
    .xy-sysreq-row {
        grid-template-columns: 5em minmax(0, 1fr);
        gap: 8px;
    }
}