/* ============================================================================
 * reg-v3/admin 统一外壳层  [r3-shell-v1]
 *
 * 作用：让 admin/ 下 10 个工具页（推广页、模板生成器、结果页、短链配置、短链接生成器、
 *      云中客、苹果APP、我的链接、TG节点）共用同一套顶栏、主色、圆角、阴影与窄屏规则。
 *
 * 原则：
 * 1) 只新增 .r3-* 命名空间的组件，以及 body[data-r3] 作用域规则；
 *    不用 !important 去压各页自带的 150~900 行内联样式（本文件在各页 </style> 之后引入，
 *    同特异度时后者胜出，够用）。
 * 2) 需要与页面自己的 sticky 元素共存时，一律用 --r3-top 做偏移，不写死像素。
 * 3) 顶栏不依赖任何图标字体（各页装的图标库不一致：bootstrap-icons / font-awesome / 无），
 *    品牌位用内联 SVG，其余为文字标签。
 * ==========================================================================*/

:root {
    /* 主色单一真值（曾因 [r3-light-v1] 在文件尾部又声明一份同名字变量，出现“改上面没反应”的陷阱，已合并）
     * 取值按 WCAG 实算定：白字在 #4f46e5→#6d28d9 上最低 6.29:1（旧 #6366f1→#8b5cf6→#a78bfa 最低 2.72:1） */
    --r3-brand: #4f46e5;
    --r3-brand-2: #6d28d9;
    --r3-band: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    --r3-brand-dark: #4338ca;
    --r3-brand-soft: rgba(79, 70, 229, .10);
    --r3-ink: #334155;
    --r3-ink-2: #64748b;
    --r3-ink-3: #6b7280;
    --r3-line: #e2e8f0;
    --r3-card: #ffffff;
    --r3-radius: 14px;
    --r3-radius-sm: 10px;
    --r3-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --r3-shadow: 0 6px 18px -6px rgba(15, 23, 42, .12);
    --r3-top: 54px;
    --r3-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}

/* ---------- 顶栏 ---------- */
.r3-top {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--r3-top);
    padding: 0 14px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border-bottom: 1px solid rgba(99, 102, 241, .14);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    font-family: var(--r3-font);
    color: var(--r3-ink);
}
.r3-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--r3-brand-dark);
    text-decoration: none;
    white-space: nowrap;
}
.r3-brand svg { width: 20px; height: 20px; fill: var(--r3-brand); display: block; }
.r3-nav {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.r3-nav::-webkit-scrollbar { display: none; }
.r3-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--r3-ink-2);
    background: #fff;
    border: 1px solid var(--r3-line);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s, border-color .16s, background .16s, transform .12s;
}
.r3-chip:hover { color: var(--r3-brand-dark); border-color: rgba(99, 102, 241, .45); background: rgba(99, 102, 241, .06); }
.r3-chip:active { transform: translateY(1px); }
.r3-chip.on {
    color: #fff;
    background: linear-gradient(135deg, var(--r3-brand), var(--r3-brand-2));
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(99, 102, 241, .3);
}
.r3-chip:focus-visible { outline: 2px solid var(--r3-brand); outline-offset: 2px; }

/* ---------- 与各页自带 sticky 共存：顶栏之下再吸附的元素要下移 ----------
 * --r3-stick 由 r3-nav.php 里的脚本按顶栏实际高度写入（桌面会换行，高度不是定值），
 * 没 JS 时回落到 --r3-top。 */
body[data-r3] .tui-toolbar { top: var(--r3-stick, var(--r3-top)); }
body[data-r3] .yzk-preview-pane { top: calc(var(--r3-stick, var(--r3-top)) + 12px); }

/* ---------- 顶栏贴边满宽 ----------
 * 好几页给 body 加了左右 padding（拿不到统一值，所以逐页用等值负 margin 抵消，
 * 不用 width:100vw：那会把滞条宽算进去，宽屏反而多出 15px 横向溢出）。 */
body[data-r3="manage"] .r3-top,
body[data-r3="dwz"]    .r3-top,
body[data-r3="ios"]    .r3-top { margin: -2.5rem -1rem 18px; }
body[data-r3="iosout"] .r3-top { margin: 0 -1.5rem 18px; }
body[data-r3="gen"]    .r3-top { margin: -40px -12px 18px; }
body[data-r3="tg"]     .r3-top,
body[data-r3="genout"] .r3-top { margin: -16px -14px 0; }
@media (max-width: 576px) {
    body[data-r3="gen"] .r3-top { margin: -20px -10px 14px; }
}

/* ---------- flex 居中画布的页单独处理（tg 节点页、生成器结果页） ----------
 * 这两页把 body 当 display:flex + justify/align center 的居中容器用，
 * 直接往里插顶栏会和卡片并排、把卡片挤窄，所以改成普通块流 + 正文 margin auto 居中。 */
body[data-r3="tg"],
body[data-r3="genout"] { display: block; padding: 16px 14px 40px; }
body[data-r3="tg"] .node-card,
body[data-r3="genout"] .wrapper { margin: 18px auto 0; }

/* ---------- 全局轻调和（只改质感，不改版面） ---------- */
body[data-r3] { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body[data-r3] ::selection { background: rgba(99, 102, 241, .16); color: var(--r3-brand-dark); }
body[data-r3] :focus-visible { outline: 2px solid var(--r3-brand); outline-offset: 2px; }
body[data-r3] ::-webkit-scrollbar { width: 8px; height: 8px; }
body[data-r3] ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, .22); border-radius: 4px; }
body[data-r3] ::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, .38); }

/* ---------- 主色归一（只动强调色；画布统一在后面的 [r3-light-v1] 段） ----------
 * 规则都带 body[data-r3=…] 前缀（特异度 0,2,1），不用 !important 就能盖过页内同名类声明；
 * 原本带 :hover 的变色规则特异度更高（如 .btn-generate:hover:not(:disabled)），仍会正常生效。 */
body[data-r3="manage"]  .btn-primary-grad,
body[data-r3="dwz"]     .btn-generate,
body[data-r3="ios"]     .btn-generate,
body[data-r3="yzk"]     .btn-generate,
body[data-r3="cfg"]     .btn-primary,
body[data-r3="cfg"]     .top-bar,
body[data-r3="gen"]     .card-header-gradient {
    background: linear-gradient(135deg, var(--r3-brand) 0%, var(--r3-brand-2) 100%);
}
/* yzk 原页的 hover 是平色（特异度低于上面这条），补一条同色系的 hover 保住反馈 */
body[data-r3="yzk"] .btn-generate:hover { background: linear-gradient(135deg, var(--r3-brand-dark) 0%, #6d28d9 100%); }
/* 深色页的投影带蓝调，换装主色后一并换成靓光 */
body[data-r3="manage"] .btn-primary-grad,
body[data-r3="dwz"]    .btn-generate,
body[data-r3="ios"]    .btn-generate { box-shadow: 0 6px 18px rgba(99, 102, 241, .35); }
/* 深色页渐变标题的尾色：蓝白 → 靓白（只改 background，它们的 background-clip:text 仍走自己那条） */
body[data-r3="manage"] .page-header h1,
body[data-r3="dwz"]    .page-header h1,
body[data-r3="ios"]    .page-header h1 { background: linear-gradient(90deg, #fff 0%, #c7d2fe 100%); }
/* 紫色描边/文字类组件跟同一色盘 */
body[data-r3="cfg"] .btn-outline { color: var(--r3-brand-dark); border-color: rgba(99, 102, 241, .5); }
/* cfg 未登录时实际渲染的是游客区头部（DOM 里没有 .top-bar），紫调组件一并跟上 */
body[data-r3="cfg"] .guest-card-header,
body[data-r3="cfg"] .guest-edit-header,
body[data-r3="cfg"] .guest-btn,
body[data-r3="cfg"] .pagination button.active {
    background: linear-gradient(135deg, var(--r3-brand) 0%, var(--r3-brand-2) 100%);
}
body[data-r3="cfg"] .pagination button.active { border-color: var(--r3-brand); }
body[data-r3="cfg"] .guest-btn:hover { box-shadow: 0 8px 20px rgba(99, 102, 241, .35); }
body[data-r3="cfg"] .form-row input:focus,
body[data-r3="cfg"] .form-row select:focus {
    border-color: var(--r3-brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
body[data-r3="cfg"] .code-badge {
    color: var(--r3-brand-dark);
    background: linear-gradient(135deg, rgba(99, 102, 241, .13), rgba(139, 92, 246, .13));
}
body[data-r3="gen"] .btn-preview { color: var(--r3-brand-dark); border-color: rgba(99, 102, 241, .45); }
/* 生成器页内的紫调交互件（聚焦环/选中态/开关/提示图标）全部跟同一色盘；
 * 生成按钮组的底色见后面的 [r3-genbtn-v1] 段。 */
body[data-r3="gen"] .form-control-cs:focus,
body[data-r3="gen"] .tid-select:focus {
    border-color: var(--r3-brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}
body[data-r3="gen"] .tpl-item.active { border-color: var(--r3-brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }
body[data-r3="gen"] .tpl-item.active .tpl-name { color: var(--r3-brand-dark); }
body[data-r3="gen"] .adv-toggle:hover,
body[data-r3="gen"] .btn-preview:hover { border-color: var(--r3-brand); background: rgba(99, 102, 241, .06); }
body[data-r3="gen"] .bg-type-btn { border-color: rgba(99, 102, 241, .3); }
body[data-r3="gen"] .bg-type-btn.active,
body[data-r3="gen"] .upload-modal-icon.main {
    background: linear-gradient(135deg, var(--r3-brand) 0%, var(--r3-brand-2) 100%);
    border-color: transparent;
}
body[data-r3="gen"] .sys-notice i { color: var(--r3-brand-dark); }

/* 结果页（qq.php）整页走自己的 CSS 变量：--primary-color 既当文字色（9 处）也当
 * .bookmark-btn 的背景色（白字），所以两个模式都要选到能同时满足 4.5:1 的值：
 * 浅色 #4f46e5（于白 6.29:1，原 #3b82f6 只有 3.68:1）；深色 #a5b4fc（于卡片 #1a202c 8.19:1），
 * 但浅字不能直接当按钮底，所以 .bookmark-btn 在深色下单独用 #4338ca（白字 7.90:1）。 */
body[data-r3="genout"] { --primary-color: #4f46e5; }
body[data-r3="genout"].dark-mode { --primary-color: #a5b4fc; }
body[data-r3="genout"].dark-mode .bookmark-btn { background-color: #4338ca; color: #fff; }

/* 深色模式下顶栏不能还是刺眼白条（结果页有浅/深切换） */
body[data-r3="genout"].dark-mode .r3-top {
    background: rgba(17, 24, 39, .94);
    border-bottom-color: rgba(226, 232, 240, .14);
    color: #e2e8f0;
}
body[data-r3="genout"].dark-mode .r3-brand { color: #e2e8f0; }
body[data-r3="genout"].dark-mode .r3-brand svg { fill: #a5b4fc; }
body[data-r3="genout"].dark-mode .r3-chip { background: #1f2937; border-color: #374151; color: #cbd5e1; }
body[data-r3="genout"].dark-mode .r3-chip:hover { color: #f1f5f9; border-color: #64748b; background: #273244; }
body[data-r3="genout"].dark-mode .r3-chip.on { background: linear-gradient(135deg, #4338ca, #6d28d9); color: #fff; border-color: transparent; }
body[data-r3="genout"].dark-mode .r3-arrow { background: #1f2937; border-color: #374151; color: #cbd5e1; }
body[data-r3="genout"].dark-mode .r3-rowbar::after { background: linear-gradient(90deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, .96)); }
body[data-r3="genout"].dark-mode .r3-rowbar::before { background: linear-gradient(270deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, .96)); }

/* ---------- 窄屏（手机优先） ---------- */
@media (max-width: 767px) {
    :root { --r3-top: 48px; }
    .r3-top { padding: 0 10px; gap: 8px; }
    .r3-brand span { display: none; }
    .r3-brand { flex: 0 0 auto; }
    .r3-chip { height: 40px; padding: 0 12px; font-size: 13px; }
    /* iOS 上小于 16px 的输入框一聚焦就自动放大页面，这里统一兜底 */
    body[data-r3] input,
    body[data-r3] select,
    body[data-r3] textarea { font-size: 16px; }
    body[data-r3="home"] .tui-search { font-size: 16px; }
    body[data-r3] .table-responsive,
    body[data-r3] .r3-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 400px) {
    .r3-chip { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .r3-chip, .r3-top, body[data-r3] * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================================
 * [r3-navscroll-v1] chip 行可滑性修复
 *
 * 问题：.r3-nav（顶栏入口）与 #tuiNav（推广页分组导航）都是 overflow-x:auto，
 *      但旧写法把滞条 display:none 掉了；电脑端滚轮只做纵向滚动，于是一排标签
 *      看着像“卡住滑不动”，被截断的入口根找不到。
 * 分三档：
 *   ≤767       单行 + 手指左右滑 + 右缘渐隐提示（触屏不占位）
 *   768~1023   单行 + 细滞条 + ◀ ▶ 按钮（鼠标可用，不劫持滚轮）
 *   ≥1024      自动换行，入口全部直接可见，根本不需要滑
 * 脚本只建包襄容器 .r3-rowbar 并插两个按钮，不改动各页业务 DOM。
 * ==========================================================================*/
.r3-rowbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}
.r3-nav, #tuiNav { scroll-padding-inline: 10px; scroll-behavior: smooth; }
.r3-rowbar::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 2px;
    bottom: 2px;
    width: 26px;
    border-radius: 0 10px 10px 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96));
}
.r3-rowbar.r3-more-r::after { opacity: 1; }
.r3-rowbar::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 2px;
    bottom: 2px;
    width: 22px;
    border-radius: 10px 0 0 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96));
}
.r3-rowbar.r3-more-l::before { opacity: 1; }
.r3-arrow {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    font: 600 15px/1 var(--r3-font);
    color: var(--r3-ink-2);
    background: #fff;
    border: 1px solid var(--r3-line);
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s, opacity .15s;
}
.r3-arrow:hover { color: var(--r3-brand-dark); border-color: rgba(99, 102, 241, .45); background: rgba(99, 102, 241, .07); }
.r3-arrow[disabled] { opacity: .3; cursor: default; }

/* 768~1023：把滞条显式露出来 + 给鼠标用户提供左右按钮 */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .r3-arrow { display: inline-flex; }
    .r3-arrow.r3-arrow-off { display: none; }
    .r3-nav,
    #tuiNav {
        scrollbar-width: thin;
        scrollbar-color: rgba(99, 102, 241, .4) transparent;
    }
    .r3-nav::-webkit-scrollbar,
    #tuiNav::-webkit-scrollbar { display: block; height: 6px; -webkit-appearance: none; }
    .r3-nav::-webkit-scrollbar-track,
    #tuiNav::-webkit-scrollbar-track { background: transparent; }
    .r3-nav::-webkit-scrollbar-thumb,
    #tuiNav::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, .35); border-radius: 3px; }
    .r3-nav::-webkit-scrollbar-thumb:hover,
    #tuiNav::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, .55); }
}

/* ≥1024：自动换行，一切可见；包襄行变多行时顶栏跟着长高，--r3-stick 会重新量 */
@media (min-width: 1024px) {
    .r3-top { height: auto; min-height: var(--r3-top); padding-top: 6px; padding-bottom: 6px; }
    .r3-nav { flex-wrap: wrap; overflow-x: visible; }
    #tuiNav { flex-wrap: wrap; overflow-x: visible; }
    .r3-arrow { display: none !important; }
    .r3-rowbar.r3-more-r::after, .r3-rowbar.r3-more-l::before { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .r3-nav, #tuiNav { scroll-behavior: auto; }
}

/* ============================================================================
 * [r3-light-v1] 内容层统一：4 个深色页并入同一套浅色画布 + 对比度收深
 *
 * 实测前提：manage / dwz / ios / gen 这四页“只有画布是深色”，卡片本来就是白底深字
 * （.card-shell = rgba(255,255,255,.95) + #1d1d1f，.glass-card = rgba(255,255,255,.97)），
 *  body 文字色也已是深色，所以转浅只需改画布 + 页头 + 深底时代的白字残留。
 *
 * 对比度（WCAG 相对亮度实算，不是目测）：
 *   旧色带 #6366f1→#8b5cf6→#a78bfa 白字最低只有 2.72:1（连大字号 AA 3:1 都不达）
 *   新主色 #4f46e5→#6d28d9 白字最低 6.29:1，rgba(255,255,255,.85) 也有 5.54:1 → 小字号 AA 过
 * 主色与色带只在文件开头的 :root 单一定义，本段不再重复声明（曾重复，导致改开头无效）。
 * ==========================================================================*/
/* 推广页自己那套 var(--primary-color) 也拉到同一深度（body 声明会继承给页内所有元素） */
body[data-r3="home"] { --primary-color: #4f46e5; }

/* 1) 画布转浅 */
body[data-r3="manage"],
body[data-r3="dwz"],
body[data-r3="ios"],
body[data-r3="gen"] {
    background: linear-gradient(135deg, #f4f6fb 0%, #e9edf6 100%);
    color: var(--r3-ink);
}

/* 2) 页头：从“白字直接压在深底上”改成渐变带（与推广页同一个头部形状） */
body[data-r3="home"] .page-header,
body[data-r3="manage"] .page-header,
body[data-r3="dwz"]    .page-header,
body[data-r3="ios"]    .page-header {
    background: var(--r3-band);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    box-shadow: 0 14px 30px -18px rgba(67, 56, 202, .75);
}
body[data-r3="manage"] .page-header p,
body[data-r3="dwz"]    .page-header p,
body[data-r3="ios"]    .page-header p { color: rgba(255, 255, 255, .85); }

/* 3) 卡片：深底时代的重阴影 + 半透明白 → 浅底上的实心白 + 细边 + 轻影 */
body[data-r3="manage"] .card-shell,
body[data-r3="dwz"]    .card-shell,
body[data-r3="ios"]    .card-shell,
body[data-r3="ios"]    .instructions,
body[data-r3="gen"]    .glass-card {
    background: #fff;
    border: 1px solid rgba(99, 102, 241, .12);
    border-radius: 18px;
    box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .45);
}
/* 深底遗留的白字：现在在浅底上会直接看不见 */
body[data-r3="gen"] .footer-text { color: var(--r3-ink-2); }
body[data-r3="manage"] .yzk-empty-tip,
body[data-r3="manage"] .yzk-img-thumb-empty,
body[data-r3="dwz"] .multi-url-tip,
body[data-r3="ios"] .upload-text { color: var(--r3-ink-2); }

/* 4) 表单控件：浅底上补回可见边框 + 统一焦点环，触控高度拉到位 */
body[data-r3="manage"] .form-control,
body[data-r3="dwz"]    .form-control,
body[data-r3="ios"]    .form-control,
body[data-r3="gen"]    .form-control-cs,
body[data-r3="gen"]    .tid-select {
    background: #fff;
    border: 1.5px solid var(--r3-line);
}
body[data-r3="manage"] .form-control:focus,
body[data-r3="dwz"]    .form-control:focus,
body[data-r3="ios"]    .form-control:focus {
    border-color: var(--r3-brand);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, .14);
}
body[data-r3="ios"] .preset-icon-item:hover,
body[data-r3="ios"] .preset-icon-item.selected,
body[data-r3="ios"] .custom-icon-upload:hover,
body[data-r3="ios"] .custom-icon-upload.selected { border-color: var(--r3-brand); }
body[data-r3="ios"] .preset-icon-item.selected { box-shadow: 0 0 0 4px rgba(79, 70, 229, .16); }
body[data-r3="ios"] .preset-icon-item.selected::after { background: var(--r3-brand); }
body[data-r3]:not([data-r3="home"]) :is(input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], select) {
    min-height: 44px;
}
@media (max-width: 767px) {
    body[data-r3]:not([data-r3="home"]) button[class*="btn"],
    body[data-r3]:not([data-r3="home"]) a[class*="btn"] { min-height: 46px; }
}

/* 5) 推广页既存两个观感缺陷顺手收掉：
 *    折叠箭头初始方向与展开状态相反（原来只靠 JS 给图标加 .collapsed，未交互时全是错的）；
 *    桌面永远 2 列且容器被 860px 卡死；预览图容器 9/16 而上层素材多为 400×872，上下各裁一成多。 */
body[data-r3="home"] .tool-accordion-icon { transition: transform .2s ease; }
body[data-r3="home"] .tool-accordion-header[aria-expanded="false"] .tool-accordion-icon { transform: rotate(180deg); }
body[data-r3="home"] .tool-accordion-header[aria-expanded="true"] .tool-accordion-icon { transform: rotate(0deg); }
body[data-r3="home"] .container { max-width: 1160px !important; }
body[data-r3="home"] .img-container { aspect-ratio: 9 / 18; }
body[data-r3="home"] .link-img-img { object-position: top center; }
@media (min-width: 1024px) {
    body[data-r3="home"] .link-grid-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1400px) {
    body[data-r3="home"] .link-grid-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ============================================================================
 * [r3-light-v2] 浏览器实算审计后补齐：剩下三页画布统一 + 两处对比度不达标的色块
 *
 * 上一轮 computed 审计（逐元素算 WCAG）报了三页未接入画布（cfg / yzk / tg，都是纯色背景）
 * 与两处真实读不清的文字：yzk 的类型小标签（10px 白字压在 #f0ad4e/#9b8bc7 等亮色上，
 * 最低 1.95:1）与模板生成器六个轮换按钮（白字压在 #fee140/#38f9d7 亮端）。
 * 所以下面用的深色值全部是实算过白字 ≥ 4.5:1 的候选（#1d4ed8 6.70 / #047857 5.48 /
 * #6d28d9 7.10 / #92400e 7.09 / #0f766e 5.47），不是凭感觉调深。
 * ==========================================================================*/
body[data-r3="home"],
body[data-r3="cfg"],
body[data-r3="yzk"],
body[data-r3="tg"] {
    background: linear-gradient(135deg, #f4f6fb 0%, #e9edf6 100%);
}
body[data-r3="tg"] { color: var(--r3-ink); }   /* 该页 body 没设文字色，原本落在继承的 #000 上 */

/* yzk：浅底上次级文字太浅 + 老 Bootstrap4 白字按钮 + 类型小标签 */
body[data-r3="yzk"] .yzk-header .sub,
body[data-r3="yzk"] .tpl-card-blank .tpl-card-desc,
body[data-r3="yzk"] .tpl-card-blank .tpl-card-banner { color: var(--r3-ink-2); }
body[data-r3="yzk"] .tpl-card-blank .tpl-card-banner { background: #eef1f6; }
body[data-r3="yzk"] .btn-primary { background-color: #4f46e5; border-color: #4f46e5; }
body[data-r3="yzk"] .btn-primary:hover, body[data-r3="yzk"] .btn-primary:focus { background-color: #4338ca; border-color: #4338ca; }
body[data-r3="yzk"] .btn-success { background-color: #047857; border-color: #047857; }
body[data-r3="yzk"] .btn-info     { background-color: #155e75; border-color: #155e75; }
body[data-r3="yzk"] .btn-warning,
body[data-r3="yzk"] .btn-secondary { background-color: #92400e; border-color: #92400e; color: #fff; }
body[data-r3="yzk"] .tag-redirect_button { background: #1d4ed8; }
body[data-r3="yzk"] .tag-image           { background: #047857; }
body[data-r3="yzk"] .tag-text            { background: #6d28d9; }
body[data-r3="yzk"] .tag-copy_button     { background: #92400e; }
body[data-r3="yzk"] .tpl-type-dot { font-weight: 700; }

/* tg：原青绿 #26a69a 白字只有 3.00:1，换到同色系深一档 */
body[data-r3="tg"] .highlight    { color: #0f766e; }
body[data-r3="tg"] .tg-link-btn  { background-color: #0f766e; }
body[data-r3="tg"] .tg-link-btn:hover { background-color: #115e59; }

/* ============================================================================
 * [r3-genbtn-v1] 模板生成器「生成X专属链接」按钮组重做
 *
 * 旧做法：底色按按钮下标 %6 轮换 6 套高饱和渐变 —— 渠道一多就露馅（9 个按钮时
 *   1/7、2/8、3/9 同色），而且整块实色压白字看着像随机上色。
 * 现做法：底色统一为品牌渐变（白字 6.29~7.10:1，AA 稳过），渠道身份改由
 *   左侧 3px 色条（按 data-tid 固定映射，与按钮顺序无关）+ 序号徽标承载；
 *   文字左对齐、右侧统一箭头，读起来是一列可执行动作而不是一堆彩色块。
 * .btn-c0~c5 的底色规则已删（类名保留仅作历史兼容，不再决定颜色）。
 * ==========================================================================*/
body[data-r3="gen"] .btn-stack { gap: 10px; }
body[data-r3="gen"] .btn-grad {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px 12px 18px;
    overflow: hidden;                 /* 波纹效果不溢出圆角 */
    text-align: left;
    letter-spacing: .2px;
    background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
    border-radius: 14px;
    box-shadow: 0 6px 16px -8px rgba(67, 56, 202, .6), inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
body[data-r3="gen"] .btn-grad:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -10px rgba(67, 56, 202, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body[data-r3="gen"] .btn-grad:active { transform: translateY(0) scale(.995); filter: brightness(.98); }
body[data-r3="gen"] .btn-grad:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 2px; }
/* 左侧色条：按 tid 固定，不随按钮顺序变化（亮色系在这里只作深底上的装饰条） */
body[data-r3="gen"] .btn-grad::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgba(255, 255, 255, .55);
}
body[data-r3="gen"] .btn-grad[data-tid="1"]::before  { background: #a5b4fc; }
body[data-r3="gen"] .btn-grad[data-tid="2"]::before  { background: #f9a8d4; }
body[data-r3="gen"] .btn-grad[data-tid="3"]::before  { background: #5eead4; }
body[data-r3="gen"] .btn-grad[data-tid="4"]::before  { background: #fca5a5; }
body[data-r3="gen"] .btn-grad[data-tid="5"]::before  { background: #fcd34d; }
body[data-r3="gen"] .btn-grad[data-tid="6"]::before  { background: #c4b5fd; }
body[data-r3="gen"] .btn-grad[data-tid="7"]::before  { background: #7dd3fc; }
body[data-r3="gen"] .btn-grad[data-tid="8"]::before  { background: #86efac; }
body[data-r3="gen"] .btn-grad[data-tid="9"]::before  { background: #fda4af; }
body[data-r3="gen"] .btn-grad[data-tid="10"]::before { background: #93c5fd; }
body[data-r3="gen"] .btn-grad[data-tid="11"]::before { background: #fdba74; }
/* 序号徽标 / 文案 / 右侧箭头 */
body[data-r3="gen"] .btn-num {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 12px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .26);
}
body[data-r3="gen"] .btn-label { flex: 1 1 auto; }
body[data-r3="gen"] .btn-grad::after {
    content: "\2192";
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    opacity: .7;
    transition: transform .16s ease, opacity .16s ease;
}
body[data-r3="gen"] .btn-grad:hover::after { transform: translateX(2px); opacity: 1; }
/* 按钮全部关闭时的提示：原本是一行裸灰字（内联 style，需要 !important 才能收进卡片风格） */
body[data-r3="gen"] .btn-stack > p {
    padding: 13px 15px;
    font-size: 13px !important;
    color: #4338ca !important;
    text-align: center;
    background: rgba(99, 102, 241, .07);
    border: 1px dashed rgba(99, 102, 241, .35);
    border-radius: 12px;
}

/* 结果页三个状态小元素（深浅两模式共用同一条规则，所以不依赖深色模式的黑盒推断）：
 * 实测白字在 #4CAF50 上 2.78:1、#f44336 上 3.68:1、#10b981→#059669 上 2.54~3.77:1，
 * 全部不达 4.5，换成同色系深一档：#15803d 5.02 / #b91c1c 6.47 / #047857→#065f46 5.48~7.68。
 * .checking 本来就是黄底黑字（达标），不动。 */
body[data-r3="genout"] .status-normal,
body[data-r3="genout"] .ms-normal { background-color: #15803d; }
body[data-r3="genout"] .status-error,
body[data-r3="genout"] .ms-error  { background-color: #b91c1c; }
body[data-r3="genout"] .short-link-btn { background: linear-gradient(135deg, #047857, #065f46); }
body[data-r3="genout"] .short-link-btn:hover { background: linear-gradient(135deg, #065f46, #064e3b); }

/* 推广页 101 张卡的两个白字小标签：原本 rgba(99,102,241,.85) / .42 压在亮图上读不清，
 * 改成不依赖图内容的深色底（白字 ≈ 10:1）。 */
body[data-r3="home"] .preview-text { background: rgba(15, 23, 42, .78); font-weight: 700; }
body[data-r3="home"] .card-go { background: rgba(15, 23, 42, .58); }

/* ============================================================================
 * [r3-query-tbl-v1] 推广页「数据查询」结果表细节
 *
 * 主 bug（用户截图里表头是空的）：渐变画在 thead 元素上，而 Bootstrap 5 给每个
 * 单元格自己刷了不透明的 background-color: var(--bs-table-bg)（白），把渐变整个盖住
 * → 白字压白底，表头看不见。修法：把 --bs-table-bg 置空并把渐变改画到 th 上
 * （特异度 0,3,3 高于 BS 的 .table > :not(caption) > * > * 的 0,1,3）；
 * 斑马纹与 hover 本来就走 tr 背景，单元格透底后仍然正常。
 * ==========================================================================*/
body[data-r3="home"] .data-card .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: rgba(99, 102, 241, .06);
    border-collapse: separate;
    border-spacing: 0;
}
body[data-r3="home"] .data-card .table thead th {
    /* [r3-thband-v1] 原来写的是 --primary-color → --primary-dark，但本页 :root 里
     * --primary-dark 就是 #4f46e5，而外壳又把 --primary-color 覆盖成同一个 #4f46e5
     * → 两端同色，渐变实测退化成纯色带（computed: linear-gradient(135deg, rgb(79,70,229) 0%, rgb(79,70,229) 100%)）。
     * 改挂页头同款令牌 --r3-band（#4338ca → #6d28d9），与 .page-header 共用一份真值，不会再各自漂移；
     * 白字于两端实算 7.90 : 7.10，均过 AA 小字号。 */
    background: var(--r3-band);
    color: #fff;
    border-bottom: 0;
}
body[data-r3="home"] .data-card .table thead th:first-child { border-top-left-radius: 10px; }
body[data-r3="home"] .data-card .table thead th:last-child { border-top-right-radius: 10px; }
body[data-r3="home"] .data-card .table tbody tr:last-child td { border-bottom: 0; }
/* 线路编号：原来是 <a href="#" target="_blank">，点了只会多开一个本页标签，改成代码片 + hover 看完整线路 */
body[data-r3="home"] .data-card .line-chip {
    display: inline-block;
    min-width: 42px;
    padding: 2px 9px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--primary-dark);
    background: rgba(99, 102, 241, .10);
    border: 1px solid rgba(99, 102, 241, .18);
    border-radius: 7px;
    cursor: help;
}
body[data-r3="home"] .data-card .table td:first-child { color: var(--text-secondary); }
/* 空表占位行：首屏与点「清空」后原本只剩一个空框，看着像坏了 */
body[data-r3="home"] .data-card .tbl-empty td {
    padding: 22px 14px;
    color: var(--text-secondary);
    font-size: .88rem;
    background: repeating-linear-gradient(45deg, rgba(99, 102, 241, .035), rgba(99, 102, 241, .035) 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 20px);
}
@media (max-width: 767px) {
    body[data-r3="home"] .data-card .table thead th,
    body[data-r3="home"] .data-card .table td { padding: 10px 8px; font-size: .82rem; }
}