/* uu-game-test-tool 页面样式
 *
 * 从 index.html 的 <style> 原样抽出(2026-08-12 拆分,内容逐字未改)。
 * 拆分原因:index.html 曾长到 2025 行 / 83KB,CSS + 6 个功能模块的 JS 全挤在一个文件里,
 * 改任何一处都要在几千行里翻。拆完 index.html 只剩结构。
 */
    * { box-sizing: border-box; }
    body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f5f7fa;
    color: #2c3e50;
    font-size: 14px;
    }
    .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    }
    h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
    color: #1a1a1a;
    }
    .subtitle {
    font-size: 13px;
    color: #909399;
    margin-left: 10px;
    font-weight: normal;
    }
    .card {
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    padding: 20px 24px;
    }
    .row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    }
    .row:last-child { margin-bottom: 0; }
    .label {
    flex: 0 0 100px;
    padding-top: 8px;
    color: #606266;
    font-weight: 500;
    }
    .label.required::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
    }
    .field { flex: 1; }
    textarea, input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #2c3e50;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    }
    textarea:focus, input[type="text"]:focus { border-color: #409eff; }
    #code, #reverseCode {
    height: 400px;
    resize: vertical;
    white-space: pre;
    overflow: auto;
    }
    /* 概率表:列多且要横向比对,用真表格而不是 textarea 纯文本 */
    .prob-wrap { max-height: 560px; overflow: auto; border: 1px solid #e0e0e0; border-radius: 4px; margin-top: 12px; }
    .prob-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .prob-table th, .prob-table td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
    /* 表头吸顶:项多时(pc28 有 72 项)滚动仍能看到列名 */
    .prob-table thead th { position: sticky; top: 0; background: #fafafa; z-index: 1; text-align: left; font-weight: 600; }
    /* 数字列右对齐,表头必须跟着右对齐 —— 否则表头贴左、数字贴右,看着就是"表头和值没对上" */
    .prob-table th.num { text-align: right; }
    .prob-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
    .prob-table tbody tr:hover { background: #f6faff; }
    /* 返奖率分档着色 —— 只给"两端"上色,中间 90~98% 是正常区间,不着色以免满屏花。
       阈值按三个游戏 267 个投注项的实测分布定:>100% 0 项 / 98~100% 39 项 /
       90~98% 119 项 / 80~90% 70 项 / <80% 39 项。这是提示不是判罚,
       低返奖率的冷门高赔项(pc28 顺子 28.8%)本来就是这么设计的。 */
    .payout-loss  { color: #c5221f; font-weight: 700; background: #fce8e6; }  /* >100% 庄家倒贴 */
    .payout-thin  { color: #b06000; font-weight: 600; }            /* 98~100% 庄家利润薄 */
    .payout-wide  { color: #1967d2; }                      /* 80~90%  庄家赢面偏大 */
    .payout-heavy { color: #6b3fa0; font-weight: 700; background: #f3e8fd; }   /* <80%    庄家赢面过大 */
    .prob-legend { margin-top: 10px; font-size: 12px; color: #666; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .prob-legend span.sw { padding: 1px 6px; border-radius: 3px; }
    .prob-summary { margin-top: 10px; font-size: 13px; color: #666; }
    .dup-flag { color: #d93025; font-size: 12px; font-weight: 600; }
    #resultSingle, #resultRandom, #resultReverse {
    height: 260px;
    resize: vertical;
    background: #fafafa;
    margin-top: 12px;
    }
    .test-row { display: flex; gap: 12px; }
    #input {
    flex: 1;
    font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace;
    }
    button {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    background: #409eff;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    }
    button:hover:not(:disabled) { background: #66b1ff; }
    button:disabled {
    background: #a0a4aa;
    cursor: not-allowed;
    }
    button.btn-secondary {
    background: #fff;
    color: #606266;
    border: 1px solid #dcdfe6;
    }
    button.btn-secondary:hover:not(:disabled) {
    background: #ecf5ff;
    border-color: #409eff;
    color: #409eff;
    }
    button.btn-secondary:disabled {
    background: #f5f7fa;
    color: #c0c4cc;
    border-color: #e4e7ed;
    }
    .script-details {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    }
    /* 【必须显式覆盖 background】通用 button:hover:not(:disabled) 会给所有 button 加背景色,
       tab-btn 想保持透明底 + 只变文字色,必须在 hover/focus/active 都显式声明 background */
    .script-details summary {
    padding: 8px 12px;
    cursor: pointer;
    color: #f56c6c;
    font-size: 13px;
    user-select: none;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-weight: 500;
    }
    .script-details summary:hover { background: #f5f7fa; }
    .script-details[open] summary { border-bottom: 1px solid #e4e7ed; }
    .script-details #code {
    border: none;
    border-radius: 0 0 4px 4px;
    }
    /* 脚本 details 展开后的顶部工具条(现在只有一个复制按钮) */
    .script-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 6px 8px;
    background: #fafafa;
    border-bottom: 1px solid #e4e7ed;
    }
    .copy-btn {
    padding: 4px 12px;
    background: #fff;
    color: #409eff;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    }
    .copy-btn:hover:not(:disabled) {
    background: #ecf5ff;
    border-color: #409eff;
    }
    .copy-btn.ok {
    background: #f0f9eb;
    color: #67c23a;
    border-color: #b3e19d;
    }
    .copy-btn.err {
    background: #fef0f0;
    color: #f56c6c;
    border-color: #fbc4c4;
    }
    .game-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 20px;
    }
    .game-tab-btn {
    padding: 8px 24px;
    background: #f2f6fc;
    color: #606266;
    border: 1px solid #dcdfe6;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
    font-family: inherit;
    }
    .game-tab-btn:hover:not(.active):not(:disabled) {
    background: #ecf5ff;
    color: #409eff;
    border-color: #b3d8ff;
    }
    .game-tab-btn.active {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
    }
    .game-tab-btn:disabled { cursor: not-allowed; opacity: 0.5; }
    .primary-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e4e7ed;
    }
    .primary-tab-btn:disabled { cursor: not-allowed; opacity: 0.5; }
    .primary-tab-btn {
    padding: 12px 24px;
    background: transparent;
    color: #909399;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
    }
    .primary-tab-btn:hover:not(:disabled),
    .primary-tab-btn:focus,
    .primary-tab-btn.active {
    background: transparent;
    }
    .primary-tab-btn:hover:not(:disabled) { color: #66b1ff; }
    .primary-tab-btn:focus { outline: none; }
    .primary-tab-btn.active {
    color: #303133;
    border-bottom-color: #409eff;
    }
    .primary-panel { display: none; }
    .primary-panel.active { display: block; }
    .tabs {
    display: flex;
    gap: 2px;
    margin: 8px 0 20px;
    border-bottom: 1px solid #dcdfe6;
    }
    .tab-btn {
    padding: 10px 20px;
    background: transparent;
    color: #606266;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s, border-color 0.15s;
    }
    .tab-btn:hover:not(:disabled),
    .tab-btn:focus,
    .tab-btn.active {
    background: transparent;
    }
    .tab-btn:hover:not(:disabled) { color: #66b1ff; }
    .tab-btn:focus { outline: none; }
    .tab-btn.active {
    color: #409eff;
    border-bottom-color: #409eff;
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: flex; }
    /* 反向内部子 tab —— 视觉与 .tab-btn 一致,用独立 class + data-rev 避免 JS 事件冲突 */
    .rev-tab-btn {
    padding: 10px 20px;
    background: transparent;
    color: #606266;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
    }
    .rev-tab-btn:hover:not(:disabled),
    .rev-tab-btn:focus,
    .rev-tab-btn.active {
    background: transparent;
    }
    .rev-tab-btn:hover:not(:disabled) { color: #66b1ff; }
    .rev-tab-btn:focus { outline: none; }
    .rev-tab-btn.active {
    color: #409eff;
    border-bottom-color: #409eff;
    }
    .rev-panel { display: none; }
    .rev-panel.active { display: block; }
    #resultReverseRandom { height: 320px; resize: vertical; background: #fafafa; margin-top: 12px; }
    .batch-table-wrap {
    margin-top: 10px;
    max-height: 480px;
    overflow: auto;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    }
    table.batch {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    }
    table.batch th, table.batch td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f2f5;
    text-align: left;
    vertical-align: top;
    }
    table.batch th {
    background: #f5f7fa;
    font-weight: 600;
    color: #606266;
    position: sticky;
    top: 0;
    z-index: 1;
    }
    table.batch tr.error { background: #fdf6ec; }
    table.batch tr.error td.reason { color: #e6a23c; font-weight: 600; }
    pre.json-cell {
    margin: 0;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
    color: #303133;
    }
    .batch-summary {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    font-size: 13px;
    color: #606266;
    flex-wrap: wrap;
    }
    .batch-summary span { padding: 2px 8px; border-radius: 3px; }
    .batch-summary .s-pass { background: #f0f9eb; color: #67c23a; }
    .batch-summary .s-fail { background: #fef0f0; color: #f56c6c; }
    .batch-summary .s-nj   { background: #f4f4f5; color: #909399; }
    .batch-summary .s-err  { background: #fdf6ec; color: #e6a23c; }
    .source-details {
    margin-top: 10px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background: #fafafa;
    }
    .source-details summary {
    padding: 8px 12px;
    cursor: pointer;
    color: #f56c6c;
    font-size: 13px;
    user-select: none;
    font-weight: 500;
    }
    .source-details summary:hover { background: #f0f2f5; }
    .source-details[open] summary { border-bottom: 1px solid #e4e7ed; }
    .source-meta {
    padding: 6px 12px;
    font-size: 12px;
    color: #909399;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    }
    #randomSource, #reverseRandomSource {
    width: calc(100% - 24px);
    margin: 0 12px 12px;
    height: 350px;
    font-family: "SF Mono", Monaco, Consolas, monospace;
    font-size: 12px;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 8px 12px;
    white-space: pre;
    overflow: auto;
    resize: vertical;
    color: #2c3e50;
    }
    .hint {
    font-size: 12px;
    color: #909399;
    margin-top: 6px;
    }
    .err { color: #f56c6c; }
    .chip-groups {
    margin: 6px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    }
    .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
    padding: 2px 0;
    }
    .chip-label {
    font-size: 11px;
    color: #909399;
    min-width: 60px;
    padding-top: 4px;
    }
    .chip-btn {
    padding: 3px 10px;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 12px;
    color: #409eff;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.12s;
    line-height: 1.4;
    font-family: inherit;
    }
    .chip-btn:hover:not(:disabled) {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
    }
    .chip-btn:active:not(:disabled) {
    background: #3a8ee6;
    border-color: #3a8ee6;
    }
    .chip-empty-tip {
    font-size: 11px;
    color: #c0c4cc;
    padding: 4px 0;
    }
    details.chip-fold summary {
    font-size: 11px;
    color: #909399;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
    list-style: none;
    }
    details.chip-fold summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s;
    }
    details.chip-fold[open] summary::before {
    transform: rotate(90deg);
    }
    details.chip-fold summary:hover { color: #409eff; }
    .clear-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: #fff;
    color: #909399;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    }
    .clear-btn:hover:not(:disabled) {
    background: #fef0f0;
    border-color: #f56c6c;
    color: #f56c6c;
    }

/* 枚举残缺告警 —— 这一页对外宣称"精确值",跑不满时必须一眼看出来 */
.prob-incomplete { color: #c5221f; font-weight: 600; background: #fce8e6; padding: 6px 10px; border-radius: 4px; }

/* 概率表异常标记 —— 都是"脚本写错了"级别的信号,要能一眼扫到 */
.flag-bad  { color: #c5221f; font-size: 12px; font-weight: 600; }
.flag-warn { color: #b06000; font-size: 12px; font-weight: 600; }
.prob-table tr.row-bad td { background: #fce8e6; }
    /* 反向查询:该游戏根本不支持按玩法名反查(结果空间不可枚举)。
       比 .chip-empty-tip 重一级 —— 那个是"没配按钮但能手输"的轻提示,
       这个是"这个功能对本游戏不可用",得让人一眼看见而不是当成灰字忽略掉。 */
    .chip-empty-note {
    padding: 10px 12px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    color: #6d4c41;
    font-size: 12.5px;
    line-height: 1.7;
    }