/* ==========================================================================
   129 · 模拟搜索引擎蜘蛛抓取测试 —— 页面皮肤
   依赖 run-code.css（rc-* 基础骨架），本文件只做本页扩展
   ========================================================================== */

/* ---------- 首屏语言卡 ---------- */
.sp-lang-card {
    background: linear-gradient(150deg, #16a34a, #0e7490);
    color: #fff;
    font-size: 44px;
}

/* ---------- 工具条 ---------- */
.sp-toolbar {
    flex-wrap: wrap;
    row-gap: 10px;
}

.sp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--rc-border, #d8dee6);
    background: var(--rc-card, #fff);
    font-size: 13px;
    line-height: 1.4;
    color: var(--rc-text, #333);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.sp-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sp-pill:hover {
    border-color: #16a34a;
    color: #14713a;
}

.sp-pill.is-on {
    background: linear-gradient(150deg, #16a34a, #0e7490);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(22, 163, 74, .3);
}

.sp-url-row {
    display: flex;
    flex: 1 1 100%;
    gap: 10px;
    min-width: 0;
}

/* UA 展示行：跟随所选蜘蛛切换 */
.sp-ua {
    flex: 1 1 100%;
    margin: 0;
    padding: 0 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--rc-text-sub, #98a2b3);
    word-break: break-all;
    user-select: all;
}

.sp-url {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--rc-border, #d8dee6);
    background: var(--rc-card, #fff);
    color: var(--rc-text, #333);
    font-size: 13.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sp-url:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .16);
}

.sp-url::placeholder {
    color: var(--rc-text-sub, #98a2b3);
    font-family: inherit;
}

/* ---------- 结果区 ---------- */
.sp-result .sp-out {
    margin: 0;
    padding: 14px 16px;
    min-height: 320px;
    max-height: 560px;
    overflow: auto;
    background: var(--rc-pre-bg, #0d1117);
    color: var(--rc-pre-text, #c9d1d9);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-all;
}

/* 元信息条 */
.sp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rc-border, #e5e9f0);
    background: var(--rc-subtle, #f6f8fa);
    font-size: 12.5px;
}

.sp-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sp-meta-item .k {
    color: var(--rc-text-sub, #8a94a3);
    flex-shrink: 0;
}

.sp-meta-item .v {
    color: var(--rc-text, #333);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.sp-status {
    font-weight: 700;
}

.sp-status.is-ok   { color: #16a34a; }
.sp-status.is-warn { color: #d97706; }
.sp-status.is-bad  { color: #dc2626; }

/* ---------- 深色主题 ---------- */
@media (prefers-color-scheme: dark) {
    .sp-pill {
        border-color: var(--rc-border, #2c3440);
        background: var(--rc-card, #161b22);
        color: var(--rc-text, #d0d7de);
    }
    .sp-pill:hover { color: #4ade80; }
    .sp-pill.is-on { color: #fff; }
    .sp-url {
        border-color: var(--rc-border, #2c3440);
        background: var(--rc-input-bg, #0d1117);
        color: var(--rc-text, #d0d7de);
    }
    .sp-meta {
        background: var(--rc-subtle, #161b22);
        border-bottom-color: var(--rc-border, #2c3440);
    }
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
    .sp-url-row {
        flex-direction: column;
    }
    .sp-url {
        height: 40px;
    }
    .sp-meta-item .v {
        max-width: 150px;
    }
}