/* ==========================================================================
   灰太狼社区 · 设计系统 v1.0
   纯手写 CSS，无任何框架依赖；全站零 emoji，图标一律 SVG
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 变量
   -------------------------------------------------------------------------- */
:root {
    /* 背景层（浅色主题） */
    --bg:          #f5f6f8;
    --bg-2:        #ffffff;
    --panel:       #ffffff;
    --panel-2:     #f6f7f9;
    --panel-3:     #eceff4;

    /* 描边 */
    --line:        rgba(16, 24, 40, .08);
    --line-2:      rgba(16, 24, 40, .14);

    /* 文字 */
    --text:        #101828;
    --text-2:      #556076;
    --text-3:      #8b93a5;

    /* 品牌 */
    --brand:       #f2620f;
    --brand-2:     #b8420b;
    --brand-lite:  #ff9152;
    --brand-dim:   rgba(242, 98, 15, .10);
    --brand-line:  rgba(242, 98, 15, .30);
    --ink:         #ffffff;

    /* 辅助色 */
    --cyan:        #0284c7;
    --green:       #0f9d6e;
    --red:         #d92d3f;
    --purple:      #7c5cf0;

    /* 圆角 */
    --r-s: 10px;
    --r:   14px;
    --r-l: 20px;

    /* 阴影 */
    --sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
    --sh-2: 0 10px 28px rgba(16, 24, 40, .09), 0 2px 6px rgba(16, 24, 40, .04);
    --sh-glow: 0 8px 22px rgba(242, 98, 15, .25);

    /* 尺寸 */
    --max: 1240px;
    --hd:  68px;

    --ease: cubic-bezier(.22, .68, .32, 1);
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hd) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

/* --------------------------------------------------------------------------
   品牌头像（灰太狼社区 logo）
   --------------------------------------------------------------------------
   2026-09-27：由内联 SVG 狼头换成品牌位图（assets/img/tx.jpg），见 functions.php 的 logo()。
   圆角矩形：尺寸由 <img> 的 width/height 属性给，这里只负责裁圆角。
   ★ 这里**不能**写 width/height —— CSS 会覆盖 HTML 属性的尺寸，logo 会一下变成原图的 512px。

   ★ 关于"禁止长按保存"：
     下面这几条只能挡掉「长按弹菜单 / 右键另存为 / 拖拽」这三个最常见的路径。
     截图、开发者工具、直接打开 /assets/img/tx.jpg 都挡不住 ——
     网页上的图片本质上防不住下载，只能提高随手保存的门槛。
   -------------------------------------------------------------------------- */
.logo-mark {
    display: block;
    flex: none;
    border-radius: 26%;            /* 圆角矩形 */
    object-fit: cover;             /* 非正方形原图会按中心方形裁切，不变形 */
    background: var(--panel-2);    /* 图还没加载出来时不会是一片空白 */
    -webkit-touch-callout: none;   /* iOS Safari 长按不弹"存储图像" */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;       /* 不能拖到桌面/新标签 */
    pointer-events: none;          /* 右键、长按都落到外层 <a> 上，图片本身不接收事件 */
}
/* 点 logo 依然能跳转：指针事件交给外层链接处理即可（logo 都在 <a class="brand"> 里） */

a { color: inherit; text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand); }

h1, h2, h3, h4, h5 {
    margin: 0;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -.01em;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    outline: none;
}

button { cursor: pointer; border: 0; background: none; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--brand); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: var(--panel-3);
    border-radius: 99px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #c8cfda; }

/* 图标基类 —— 所有图标统一跟随字号与颜色 */
.ico {
    flex: none;
    vertical-align: -3px;
    transition: transform .2s var(--ease);
}

/* --------------------------------------------------------------------------
   3. 布局
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px;
}

/* 移动端横向溢出防护：网格 / 弹性子项默认 min-width:auto，长内容会把页面顶宽 */
body { overflow-wrap: break-word; }
.layout > *, .detail > *, .script-grid > *, .cat-grid > *,
.feat-grid > *, .tut-grid > *, .hero-inner > *, .uc-grid > *,
.row-item > *, .sc > * { min-width: 0; }

.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--soft {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 40px;
}

.sec-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 12px;
    border: 1px solid var(--brand-line);
    border-radius: 99px;
    background: var(--brand-dim);
    color: var(--brand-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

.sec-title {
    font-size: 30px;
    letter-spacing: -.02em;
}

.sec-sub {
    margin-top: 10px;
    max-width: 620px;
    color: var(--text-2);
    font-size: 14.5px;
}

.sec-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.sec-link:hover { color: var(--brand); }
.sec-link:hover .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--r-s);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .2s var(--ease);
}

.btn--lg  { height: 50px; padding: 0 28px; font-size: 15px; border-radius: 12px; }
.btn--sm  { height: 34px; padding: 0 14px; font-size: 13px; }
.btn--full { width: 100%; }

.btn--primary {
    background: linear-gradient(135deg, var(--brand-lite), var(--brand));
    color: #fff;
    box-shadow: var(--sh-glow);
}
.btn--primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(242, 98, 15, .35);
}

.btn--ghost {
    border-color: var(--line-2);
    background: var(--panel);
    color: var(--text);
}
.btn--ghost:hover {
    border-color: var(--brand-line);
    background: var(--brand-dim);
    color: var(--brand-2);
}

.btn--dark {
    background: var(--panel-2);
    border-color: var(--line);
    color: var(--text-2);
}
.btn--dark:hover { background: var(--panel-3); color: var(--text); }

.btn:disabled, .btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. 通用小件
   -------------------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.6;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--brand-dim);
    color: var(--brand-2);
    font-size: 11.5px;
    font-weight: 500;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.badge--hot  { background: rgba(217, 45, 63, .10); color: #b3202f; }
.badge--new  { background: rgba(2, 132, 199, .10); color: #0369a1; }
.badge--free { background: rgba(15, 157, 110, .12); color: #067a55; }
.badge--vip  { background: linear-gradient(135deg, var(--brand-lite), var(--brand)); color: #fff; }

.dot-live {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(15, 157, 110, .55);
    animation: pulse 2.2s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(15, 157, 110, .5); }
    70%  { box-shadow: 0 0 0 8px rgba(15, 157, 110, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 157, 110, 0); }
}

.card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
}

.muted { color: var(--text-2); }
.c-text2 { color: var(--text-2); }
.c-text3 { color: var(--text-3); }
.notebox {
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--panel-3);
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: 13.5px;
}
.dim   { color: var(--text-3); }

/* ==================================================================
   游戏大厅（首页）
   ------------------------------------------------------------------
   一个游戏一张卡。加游戏只动 includes/games.php，这里不用改。
   卡片配色由 games.php 的 tone 决定（orange 为默认）。
   ================================================================== */
.hero--solo .wrap { max-width: 820px; }
.hero--solo h1 { margin-bottom: 14px; }

.game-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.game-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 22px 20px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    min-width: 0;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(16,24,40,.09);
    border-color: var(--brand);
}
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.game-ico {
    width: 50px; height: 50px; flex: none; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand-lite), var(--brand));
    color: #fff;
}
.game-card--blue   .game-ico { background: linear-gradient(135deg, #5fa8f5, #2f80ed); }
.game-card--green  .game-ico { background: linear-gradient(135deg, #3ec99a, #0f9d6e); }
.game-card--purple .game-ico { background: linear-gradient(135deg, #a58bf7, #7c5cf0); }
.game-card--red    .game-ico { background: linear-gradient(135deg, #f2707c, #d92d3f); }
.game-card--cyan   .game-ico { background: linear-gradient(135deg, #4bb4e8, #0284c7); }
.game-state {
    font-size: 12px; padding: 4px 10px; border-radius: 999px;
    background: var(--panel-3); color: var(--text-2);
    display: inline-flex; align-items: center; gap: 6px; flex: none;
}
.game-state--on { background: rgba(15,157,110,.10); color: #0a6b4c; }
.game-name { margin: 2px 0 0; font-size: 21px; line-height: 1.3; }
.game-slogan { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.65; }
.game-tips { margin: 2px 0 4px; padding: 0; list-style: none; display: grid; gap: 6px; }
.game-tips li { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--text-3); line-height: 1.55; }
.game-tips li .ico { flex: none; margin-top: 2px; }
.game-card .btn { margin-top: auto; }
.game-card--off, .game-card--ghost { opacity: .68; }
.game-card--off:hover, .game-card--ghost:hover {
    transform: none; box-shadow: none; border-color: var(--line);
}
.game-card--ghost { border-style: dashed; }
.is-disabled { pointer-events: none; }
@media (max-width: 640px) {
    .game-grid { grid-template-columns: 1fr; }
    .game-name { font-size: 19px; }
}

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* 页面标题条（内页） */
.page-head {
    padding: 46px 0 34px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(700px 260px at 12% -30%, rgba(242, 98, 15, .10), transparent 70%),
        var(--bg-2);
}
.crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--text-3);
    font-size: 13px;
}
.crumb a:hover { color: var(--brand); }
.crumb .ico { opacity: .5; }
.page-title { font-size: 28px; }
.page-desc { margin-top: 10px; max-width: 720px; color: var(--text-2); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   页面头 · 内嵌版（控制台 / 绑定页 / 排行榜在用）
   --------------------------------------------------------------------------
   左边「面包屑 + 标题 + 说明」，右边操作按钮（游戏切换 tab / 绑定管理）。

   ★ 为什么要单独一个修饰类，而不是直接改 .page-head：
     help.php / user.php 用的是**通栏版** —— .page-head 在外面包着一个 .wrap、
     里面只有一个子元素。直接给 .page-head 加 flex、改 padding，那两页会跟着变。
     没必要动的就别动。

   ★ 那为什么这里的按钮以前会挤到标题下面：
     .page-head 是块级元素，两个子 div 只能上下堆。类名叫 console-head-act，
     听着像"右上角操作区"，实际从来没在右边过 —— 现在真的把它放到右边。

   ★ padding: 0 0 26px 看着像多余的？不：
     通栏版靠自己的 padding: 46px 0 34px 撑开；内嵌版外面已经有 .wrap 的上下留白，
     这里只需要"底部一条"。以前是在 HTML 上写 style="padding-top:0" 去压掉上面那半 ——
     能用类就用类，省得每个页面各写一遍、还容易漏。
   -------------------------------------------------------------------------- */
.page-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding: 0 0 26px;
}
/* 手机上按钮会换到标题下面一行 —— 行间距由上面的 gap: 16px 管，这里不用再加 margin，
   加了两者会叠加（一条规则只该有一个地方负责间距）。 */

/* --------------------------------------------------------------------------
   6. 头部导航
   -------------------------------------------------------------------------- */
.site-head {
    position: sticky;
    top: 0;
    z-index: 90;
    height: var(--hd);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-head.is-stuck {
    border-bottom-color: var(--line);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--sh-1);
}

.head-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    height: var(--hd);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
.brand:hover { color: var(--text); }
.brand-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
}
.brand-name span { color: var(--brand); }
.brand-tag {
    display: block;
    margin-top: -3px;
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .1em;
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}
.nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
}
.nav a .ico { opacity: .7; }
.nav a:hover {
    background: rgba(16, 24, 40, .05);
    color: var(--text);
}
.nav a.is-active {
    background: var(--brand-dim);
    color: var(--brand-2);
}
.nav a.is-active .ico { opacity: 1; }

.head-search {
    position: relative;
    flex: 1;
    max-width: 300px;
    margin-left: auto;
}
.head-search input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    color: var(--text);
    font-size: 13.5px;
    transition: all .2s var(--ease);
}
.head-search input::placeholder { color: var(--text-3); }
.head-search input:focus {
    border-color: var(--brand-line);
    background: var(--bg-2);
    box-shadow: 0 0 0 3px rgba(242, 98, 15, .12);
}
.head-search .ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}

.head-act { display: flex; align-items: center; gap: 10px; flex: none; }

/* --------------------------------------------------------------------------
   6b. 底部导航（手机端）
   --------------------------------------------------------------------------
   2026-09-28 换的形态：手机端原来靠 ☰ 开右侧抽屉（.burger/.drawer/.mask），
   现在改成**底部四格 tab**（首页 / 控制台 / 钱包 / 我的），抽屉整套删掉了。

   为什么用 fixed + 给页脚补 padding-bottom（而不是给 body 补）：
     · fixed 定位让它永远贴在屏幕下沿，页面再长也不用回顶；
     · 补白补在 .site-foot 上，是因为页脚背景是白色（--bg-2），
       补在 body 上的话底栏后面会露出一条 --bg 的灰缝（浅色页面上能看出来）。
     · 不能给 body 加 overflow:hidden 来"防抖" —— 那会把 sticky 顶栏一起搞坏。

   ★ 底栏**只在小屏出现**（≤760px）。电脑端它是 display:none，不占位、不参与布局。
   ★ 安全区：iPhone 底部那条 home indicator 会盖住最后一格图标，
     所以 padding-bottom 走 env(safe-area-inset-bottom)，页脚的补白也要跟着加同一个值。
   ★ z-index 95：压在内容之上、但**必须低于弹窗**。全站阶梯是
     内容 1~9 → 顶栏 90 → 底栏 95 → 弹窗 130 → toast 200（见 .wm-modal 那段注释）。
   -------------------------------------------------------------------------- */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: none;                 /* 电脑端不显示，见下面的 @media */
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.tabbar-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.tabbar-item .ico { opacity: .75; transition: opacity .18s var(--ease); }
.tabbar-item:hover { color: var(--text-2); }
.tabbar-item.is-active { color: var(--brand); }
.tabbar-item.is-active .ico { opacity: 1; }
/* 点下去给一点反馈（手机上 .is-active 只说明"你在这一格"，不是"你按到了"） */
.tabbar-item:active { background: var(--brand-dim); }

/* --------------------------------------------------------------------------
   6c. 页内分段切换（seg-tabs）
   --------------------------------------------------------------------------
   底部只有四格，所以「排行榜」「帮助中心」各自变成宿主页里的第二格：
       钱包页：我的钱包 / 今日收益榜
       我的页：我的     / 帮助中心
   走的是服务端渲染（?view=rank / ?view=help），不是 JS 切换 ——
   这样刷新、分享、后退都对得上，也跟全站"能不用 JS 就不用"的调子一致。
   -------------------------------------------------------------------------- */
.seg-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-2);
}
.seg-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 9px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}
.seg-tabs a.is-active {
    background: var(--panel);
    color: var(--brand-2);
    box-shadow: var(--sh-1);
}

/* --------------------------------------------------------------------------
   7. 首页 Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding: 74px 0 84px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.hero::before {
    content: "";
    position: absolute;
    top: -280px; left: 50%;
    width: 1100px; height: 620px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(242, 98, 15, .13), transparent 72%);
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(16, 24, 40, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 24, 40, .035) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(720px 340px at 30% 25%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(720px 340px at 30% 25%, #000, transparent 78%);
    pointer-events: none;
}
.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 56px;
    align-items: center;
}
/* 网格子项默认 min-width:auto，会被内容顶宽，导致移动端横向溢出 */
.hero-inner > * { min-width: 0; }

.hero-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 7px 14px 7px 11px;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    background: var(--panel);
    color: var(--text-2);
    font-size: 12.5px;
}
.hero-badge b { color: var(--text); font-weight: 600; }

.hero h1 {
    font-size: clamp(32px, 4.2vw, 52px);
    line-height: 1.14;
    letter-spacing: -.03em;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--brand-2), var(--brand) 60%, #ff5f1f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-lead {
    margin-top: 20px;
    max-width: 540px;
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.85;
}
.hero-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.hero-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-3);
    font-size: 13px;
}
.hero-meta .ico { color: var(--green); }

/* Hero 右侧：运行控制台模拟 */
.console {
    /* 终端面板使用独立的深色令牌：浅色主题下作为视觉锚点 */
    --bg:         #0b0e13;
    --bg-2:       #10141b;
    --panel:      #141a22;
    --panel-2:    #1a212b;
    --panel-3:    #212a36;
    --line:       rgba(255, 255, 255, .08);
    --line-2:     rgba(255, 255, 255, .14);
    --text:       #e8edf5;
    --text-2:     #9aa7b8;
    --text-3:     #67748a;
    --brand-2:    #ffb45c;
    --brand-dim:  rgba(255, 122, 47, .16);
    --cyan:       #38bdf8;
    --green:      #3ddc97;

    position: relative;
    border: 1px solid #12161d;
    border-radius: var(--r-l);
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
    box-shadow: var(--sh-2);
    color: var(--text);
    overflow: hidden;
}
.console::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-l);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    pointer-events: none;
}
.console-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
}
.console-dots { display: flex; gap: 6px; }
.console-dots i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--panel-3);
}
.console-dots i:nth-child(1) { background: #ff5f57; }
.console-dots i:nth-child(2) { background: #febc2e; }
.console-dots i:nth-child(3) { background: #28c840; }
.console-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-2);
    font-size: 12.5px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.console-body {
    padding: 18px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 2.05;
    min-height: 268px;
    overflow: hidden;
}
.log-line {
    display: flex;
    gap: 10px;
    min-width: 0;
    opacity: 0;
    animation: logIn .34s var(--ease) forwards;
}
@keyframes logIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.log-time { color: var(--text-3); flex: none; }
.log-ok   { color: var(--green); flex: none; }
.log-info { color: var(--cyan); flex: none; }
.log-warn { color: var(--brand-2); flex: none; }
.log-txt  {
    color: var(--text-2);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.console-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
    font-size: 12.5px;
    color: var(--text-3);
}
.console-foot b { color: var(--brand-2); font-weight: 600; }

/* 控制台内嵌数据条 */
.console-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
}
.mini {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    background: var(--bg-2);
}
.mini-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--brand-dim);
    color: var(--brand-2);
}
.mini strong { display: block; font-size: 15px; line-height: 1.35; }
.mini span { color: var(--text-3); font-size: 11.5px; }

/* --------------------------------------------------------------------------
   8. 统计条
   -------------------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.stat {
    padding: 26px 22px;
    background: var(--panel);
    transition: background .2s var(--ease);
}
.stat:hover { background: var(--panel-2); }
.stat-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-3);
    font-size: 12.5px;
}
.stat-hd .ico { color: var(--brand); }
.stat-num {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-num i { font-style: normal; margin-left: 3px; color: var(--text-3); font-size: 14px; font-weight: 500; }

/* --------------------------------------------------------------------------
   9. 分类网格
   -------------------------------------------------------------------------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.cat-card {
    position: relative;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    overflow: hidden;
    transition: all .25s var(--ease);
}
.cat-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: var(--brand-dim);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.cat-card:hover {
    border-color: var(--brand-line);
    transform: translateY(-4px);
    box-shadow: var(--sh-2);
}
.cat-card:hover::before { opacity: 1; }
.cat-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    margin-bottom: 16px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--panel-2);
    color: var(--brand);
    transition: all .25s var(--ease);
}
.cat-card:hover .cat-ico {
    background: linear-gradient(135deg, var(--brand-lite), var(--brand));
    border-color: transparent;
    color: #fff;
}
.cat-card h3 { position: relative; font-size: 15.5px; }
.cat-card p {
    position: relative;
    margin-top: 6px;
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.7;
}
.cat-count {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    color: var(--text-2);
    font-size: 12px;
}
.cat-count b { color: var(--brand-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. 筛选条
   -------------------------------------------------------------------------- */
.filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.filter-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel);
}
.filter-tabs button {
    padding: 7px 15px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13.5px;
    font-weight: 500;
    transition: all .18s var(--ease);
}
.filter-tabs button:hover { color: var(--text); background: rgba(16, 24, 40, .05); }
.filter-tabs button.is-active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}
.filters .spacer { flex: 1; }
.select {
    height: 38px;
    padding: 0 34px 0 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
    color: var(--text-2);
    font-size: 13.5px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.select:focus { border-color: var(--brand-line); }

/* --------------------------------------------------------------------------
   11. 脚本卡片
   -------------------------------------------------------------------------- */
.script-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.script-grid--2 { grid-template-columns: repeat(2, 1fr); }
.script-grid--4 { grid-template-columns: repeat(4, 1fr); }

.sc {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    overflow: hidden;
    transition: all .25s var(--ease);
}
.sc:hover {
    border-color: var(--brand-line);
    transform: translateY(-4px);
    box-shadow: var(--sh-2);
}
.sc-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 18px 14px;
}
.sc-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    flex: none;
    border-radius: 13px;
    border: 1px solid var(--line-2);
    background: var(--panel-2);
}
.sc-cover--orange { color: var(--brand); }
.sc-cover--blue   { color: var(--cyan); }
.sc-cover--green  { color: var(--green); }
.sc-cover--red    { color: var(--red); }
.sc-cover--purple { color: var(--purple); }
.sc-cover--cyan   { color: var(--cyan); }
.sc-cover--orange { background: rgba(242, 98, 15, .09); }
.sc-cover--blue,
.sc-cover--cyan   { background: rgba(2, 132, 199, .09); }
.sc-cover--green  { background: rgba(15, 157, 110, .10); }
.sc-cover--red    { background: rgba(217, 45, 63, .09); }
.sc-cover--purple { background: rgba(124, 92, 240, .10); }

.sc-head { min-width: 0; flex: 1; }
.sc-title {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-author {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--text-3);
    font-size: 12px;
}
.sc-badges { display: flex; gap: 5px; flex: none; }

.sc-body { padding: 0 18px; }
.sc-desc {
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
}
.sc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 13px 0 0;
    padding: 0;
}
.sc-tags li {
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel-2);
    color: var(--text-3);
    font-size: 11.5px;
}

.sc-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 15px 0 0;
    padding: 0;
    color: var(--text-3);
    font-size: 12px;
}
.sc-stats li { display: flex; align-items: center; gap: 5px; }
.sc-rate { color: var(--brand-2); font-weight: 600; }

.stars { display: inline-flex; gap: 1px; }
.star.is-on  { color: var(--brand-2); }
.star.is-off { color: var(--text-3); opacity: .45; }
.star.is-half { color: var(--brand-2); opacity: .5; }

.sc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: var(--panel-2);
}
.price-num {
    color: var(--brand-2);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.price-num i { font-style: normal; font-size: 13px; margin-right: 1px; }
.price-free { color: var(--green); font-size: 16px; font-weight: 700; }

/* --------------------------------------------------------------------------
   12. 特色 / 流程
   -------------------------------------------------------------------------- */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.feat {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    transition: all .25s var(--ease);
}
.feat:hover { border-color: var(--line-2); transform: translateY(-3px); }
.feat-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: 16px;
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    background: var(--brand-dim);
    color: var(--brand-2);
}
.feat h3 { font-size: 15.5px; }
.feat p { margin-top: 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.8; }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    counter-reset: step;
}
.step {
    position: relative;
    padding: 28px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
}
.step-no {
    position: absolute;
    top: 20px; right: 22px;
    color: var(--panel-3);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}
.step-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    margin-bottom: 16px;
    border-radius: 11px;
    background: var(--brand-dim);
    color: var(--brand-2);
}
.step h3 { position: relative; font-size: 16px; }
.step p { position: relative; margin-top: 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.8; }
.step + .step::before {
    content: "";
    position: absolute;
    left: -13px; top: 50%;
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--line-2);
    border-top: 1.5px solid var(--line-2);
    transform: translateY(-50%) rotate(45deg);
}

/* --------------------------------------------------------------------------
   13. 排行榜表格
   -------------------------------------------------------------------------- */
.rank-table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    overflow: hidden;
}
.rank-table thead th {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.rank-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--text-2);
}
.rank-table tbody tr:last-child td { border-bottom: 0; }
.rank-table tbody tr { transition: background .18s var(--ease); }
.rank-table tbody tr:hover { background: rgba(16, 24, 40, .03); }
.rank-table .col-no { width: 74px; }
.rank-table .col-num { text-align: right; white-space: nowrap; }
.rank-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rank-no--1 { background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #3b2500; }
.rank-no--2 { background: linear-gradient(135deg, #e8edf4, #b9c3d0); color: #2b3644; }
.rank-no--3 { background: linear-gradient(135deg, #f2b183, #c96a1e); color: #3a1d02; }
.rank-name {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text);
    font-weight: 500;
}
.rank-name:hover { color: var(--brand); }
.rank-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: 9px;
    background: var(--brand-dim);
    color: var(--brand-2);
}
.trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.trend--up   { color: var(--red); }
.trend--down { color: var(--green); }
.trend--flat { color: var(--text-3); }

/* --------------------------------------------------------------------------
   14. FAQ 折叠
   -------------------------------------------------------------------------- */
.faq { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-q {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 19px 22px;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    transition: background .18s var(--ease);
}
.faq-q:hover { background: rgba(16, 24, 40, .03); }
.faq-q .ico:first-child { color: var(--brand); }
.faq-q .faq-arrow {
    margin-left: auto;
    color: var(--text-3);
    transition: transform .25s var(--ease);
}
.faq-item.is-open .faq-q { color: var(--brand-2); }
.faq-item.is-open .faq-arrow { transform: rotate(180deg); color: var(--brand); }
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
    padding: 0 22px 20px 58px;
    color: var(--text-2);
    font-size: 13.8px;
    line-height: 1.9;
}

/* --------------------------------------------------------------------------
   15. CTA 区块
   -------------------------------------------------------------------------- */
.cta {
    position: relative;
    padding: 56px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-l);
    background:
        radial-gradient(560px 240px at 88% 0%, rgba(242, 98, 15, .12), transparent 70%),
        linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    overflow: hidden;
    text-align: center;
}
.cta h2 { font-size: 30px; letter-spacing: -.02em; }
.cta p { margin: 14px auto 0; max-width: 560px; color: var(--text-2); font-size: 15px; }
.cta .hero-acts { justify-content: center; }

/* --------------------------------------------------------------------------
   16. 页脚
   -------------------------------------------------------------------------- */
.site-foot {
    margin-top: 0;
    border-top: 1px solid var(--line);
    background: var(--bg-2);
}
.foot-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding: 56px 0 44px;
}
.foot-brand p {
    margin: 16px 0 0;
    max-width: 300px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.85;
}
.foot-social { display: flex; gap: 9px; margin-top: 20px; }
.foot-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    color: var(--text-2);
}
.foot-social a:hover {
    border-color: var(--brand-line);
    background: var(--brand-dim);
    color: var(--brand-2);
}
.foot-col h4 {
    margin-bottom: 16px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
}
.foot-col li + li { margin-top: 11px; }
.foot-col a { color: var(--text-3); font-size: 13px; }
.foot-col a:hover { color: var(--brand); }
.foot-note {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--panel-2);
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.75;
}
.foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font-size: 12.5px;
    flex-wrap: wrap;
}
.foot-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-bottom a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   17. 内页：脚本库两栏
   -------------------------------------------------------------------------- */
.layout {
    display: grid;
    grid-template-columns: 252px 1fr;
    gap: 32px;
    align-items: start;
}
/* 侧栏在右、且更宽的变体（排行榜 / 帮助页的条款区）。
   这两处原来写成行内 style="grid-template-columns:1fr 320px"，
   而行内样式的优先级高于媒体查询 —— 手机上下面的 .layout{1fr} 压不动它，
   正文列被固定的 300~320px 侧栏挤到只剩几十像素。
   挪成类名后，媒体查询才管得住。（此规则在文件中靠前，
   ≤1040px 的 .layout{grid-template-columns:1fr} 同权重、在它之后，故能覆盖。） */
.layout--aside { grid-template-columns: 1fr 320px; }
.side { position: sticky; top: calc(var(--hd) + 20px); }
.side-card {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    overflow: hidden;
}
.side-card + .side-card { margin-top: 16px; }
.side-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}
.side-card h3 .ico { color: var(--brand); }
.side-body { padding: 14px 18px 18px; }
.opt-list { display: grid; gap: 3px; }
.opt-list a, .opt-list label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13.5px;
    cursor: pointer;
    transition: all .18s var(--ease);
}
.opt-list a:hover, .opt-list label:hover { background: rgba(16, 24, 40, .05); color: var(--text); }
.opt-list a.is-active {
    background: var(--brand-dim);
    color: var(--brand-2);
    font-weight: 600;
}
.opt-list .cnt {
    margin-left: auto;
    color: var(--text-3);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px; height: 17px;
    flex: none;
    border: 1.5px solid var(--line-2);
    border-radius: 5px;
    color: transparent;
    transition: all .18s var(--ease);
}
input[type="checkbox"], input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
input[type="checkbox"]:checked + .check,
input[type="radio"]:checked + .check {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
input[type="checkbox"]:checked ~ span,
input[type="radio"]:checked ~ span { color: var(--text); }

/* --------------------------------------------------------------------------
   18. 内页：脚本详情
   -------------------------------------------------------------------------- */
.detail {
    display: grid;
    grid-template-columns: 1fr 336px;
    gap: 30px;
    align-items: start;
}
.dt-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
}
.dt-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px; height: 78px;
    flex: none;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: var(--panel-2);
    color: var(--brand);
}
.dt-title { font-size: 24px; }
.dt-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    color: var(--text-3);
    font-size: 13px;
}
.dt-sub > span { display: flex; align-items: center; gap: 6px; }
.dt-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.panel {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    overflow: hidden;
}
.panel-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
    font-size: 14.5px;
    font-weight: 600;
}
.panel-head .ico { color: var(--brand); }
.panel-body { padding: 22px; }
.panel-body p + p { margin-top: 14px; }
.panel-body p { color: var(--text-2); font-size: 14px; line-height: 1.92; }
.panel-body h4 { margin: 22px 0 10px; font-size: 15px; }
.panel-body h4:first-child { margin-top: 0; }
.panel-body ul.bullet { display: grid; gap: 9px; }
.panel-body ul.bullet li {
    display: flex;
    gap: 10px;
    color: var(--text-2);
    font-size: 14px;
}
.panel-body ul.bullet .ico { color: var(--green); margin-top: 5px; }

.notice {
    display: flex;
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-s);
    background: var(--brand-dim);
    color: #96390a;
    font-size: 13px;
    line-height: 1.8;
}
.notice .ico { flex: none; margin-top: 3px; }
.notice--danger {
    border-color: rgba(217, 45, 63, .28);
    background: rgba(217, 45, 63, .07);
    color: #a01b28;
}

/* 版本时间线 */
.timeline { display: grid; gap: 0; }
.tl-item {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.tl-item:first-child { padding-top: 0; }
.tl-item:last-child { border-bottom: 0; padding-bottom: 0; }
.tl-dot {
    position: relative;
    width: 12px; height: 12px;
    flex: none;
    margin-top: 7px;
    border: 2px solid var(--panel);
    border-radius: 50%;
    background: var(--text-3);
}
.tl-item:first-child .tl-dot {
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(242, 98, 15, .16);
}
.tl-main { min-width: 0; flex: 1; }
.tl-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tl-ver {
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--panel-3);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.tl-date { color: var(--text-3); font-size: 12.5px; }
.tl-txt { margin-top: 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.8; }

/* 详情侧栏 */
.buy-card {
    border: 1px solid var(--brand-line);
    border-radius: var(--r);
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    overflow: hidden;
}
.buy-top { padding: 24px; text-align: center; border-bottom: 1px solid var(--line); }
.buy-price {
    color: var(--brand-2);
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}
.buy-price i { font-style: normal; font-size: 20px; margin-right: 2px; }
.buy-old {
    margin-top: 6px;
    color: var(--text-3);
    font-size: 13px;
    text-decoration: line-through;
}
.buy-acts { display: grid; gap: 10px; padding: 20px 24px; }
.buy-meta { padding: 0 24px 22px; }
.buy-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px dashed var(--line);
    font-size: 13px;
}
.buy-meta li:first-child { border-top: 0; }
.buy-meta .k { display: flex; align-items: center; gap: 7px; color: var(--text-3); }
.buy-meta .v { color: var(--text); font-weight: 500; }

.author-card {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
}
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-lite), var(--brand));
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.author-card strong { display: block; font-size: 14.5px; }
.author-card span { color: var(--text-3); font-size: 12px; }

/* --------------------------------------------------------------------------
   19. 教程 / 帮助
   -------------------------------------------------------------------------- */
.tut-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.tut {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    transition: all .25s var(--ease);
}
.tut:hover { border-color: var(--brand-line); transform: translateY(-4px); box-shadow: var(--sh-2); }
.tut-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.tut-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--brand-dim);
    color: var(--brand-2);
}
.tut h3 { font-size: 15.5px; line-height: 1.5; }
.tut p { margin-top: 9px; color: var(--text-2); font-size: 13.5px; line-height: 1.8; flex: 1; }
.tut-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font-size: 12px;
}
.tut-foot span { display: flex; align-items: center; gap: 6px; }

/* 帮助：联系方式卡 */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.contact {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
    text-align: center;
}
.contact-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    margin: 0 auto 16px;
    border: 1px solid var(--brand-line);
    border-radius: 14px;
    background: var(--brand-dim);
    color: var(--brand-2);
}
.contact h3 { font-size: 15.5px; }
.contact p { margin-top: 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.8; }
.contact .btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   20. 登录 / 注册
   -------------------------------------------------------------------------- */
.auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--hd));
}
.auth-aside {
    position: relative;
    padding: 56px 52px;
    border-right: 1px solid var(--line);
    background:
        radial-gradient(600px 380px at 20% 15%, rgba(242, 98, 15, .10), transparent 70%),
        linear-gradient(180deg, var(--bg-2), var(--bg));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-aside h2 { font-size: 32px; letter-spacing: -.02em; }
.auth-aside > p { margin-top: 16px; max-width: 420px; color: var(--text-2); font-size: 15px; line-height: 1.85; }
.auth-points { display: grid; gap: 16px; margin-top: 36px; }
.auth-points li { display: flex; gap: 13px; }
.auth-points .ico { flex: none; margin-top: 4px; color: var(--brand); }
.auth-points strong { display: block; font-size: 14.5px; font-weight: 600; }
.auth-points span { color: var(--text-3); font-size: 13px; }

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
}
.auth-box { width: 100%; max-width: 400px; }
.auth-box > h1 { font-size: 26px; }
.auth-box > p { margin-top: 10px; color: var(--text-2); font-size: 14px; }
.auth-form { display: grid; gap: 16px; margin-top: 28px; }
.field label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
}
.field-wrap { position: relative; display: flex; align-items: center; }
.field-wrap > .ico {
    position: absolute;
    left: 13px;
    color: var(--text-3);
    pointer-events: none;
}
.input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-s);
    background: var(--panel);
    color: var(--text);
    font-size: 14px;
    transition: all .2s var(--ease);
}
.input.no-ico { padding-left: 14px; }
.input::placeholder { color: var(--text-3); }
.input:focus {
    border-color: var(--brand-line);
    background: var(--bg-2);
    box-shadow: 0 0 0 3px rgba(242, 98, 15, .12);
}
.field-eye {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 7px;
    color: var(--text-3);
}
.field-eye:hover { background: rgba(16, 24, 40, .07); color: var(--text); }

.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.field-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    cursor: pointer;
}
.field-row a { color: var(--brand-2); }
.field-row a:hover { color: var(--brand); }

.auth-alt {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0;
    color: var(--text-3);
    font-size: 12.5px;
}
.auth-alt::before, .auth-alt::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.auth-foot { margin-top: 26px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.auth-foot a { color: var(--brand-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   21. 用户中心
   --------------------------------------------------------------------------
   ★ 2026-09-28 手机上踩过的坑（改这些规则之前先读一遍）：
     原来 .uc-head 是个**不换行**的 flex 行：头像 + 信息 + 按钮组三段抢宽度，
     390 宽下中间那段被压到只剩二三十像素 ——「注册于 2026-09-28 09:26:18
     · 最后登录 …」就**一个汉字一行**竖着排，整张卡片被撑到 400 多像素高、
     一屏看不到底；右边两个按钮也被挤没了。
     修法不是缩小字号，而是**给三段各自定"翻脸线"，放不下就整段换行**：
       .uc-head-main  中间那段，flex-basis 260px —— 这是关键的一个数
       .uc-head-acts  按钮组，手机上整行掉到第二行
     ★ 参数化 width 靠 min-width:0 兜底：flex 子项默认 min-width:auto，
       会被长内容顶开、把别的格子挤扁 —— 所以下面每个"装文字的格子"都要给 min-width:0。
   -------------------------------------------------------------------------- */
.uc-head {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: linear-gradient(120deg, var(--panel-2) 0%, var(--panel) 65%);
    flex-wrap: wrap;              /* 窄了让按钮组自己掉到下一行，而不是把中间那段压扁 */
}
.uc-head-main { flex: 1 1 260px; min-width: 0; }
.uc-head-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: none;
}
.uc-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px; height: 68px;
    flex: none;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--brand-lite), var(--brand));
    color: #fff;
    font-size: 26px;
    font-weight: 700;
}
.uc-name { display: flex; align-items: center; gap: 10px; font-size: 20px; flex-wrap: wrap; }
/* 注册于 / 最后登录 / 邀请人 —— 各自是一个"内部不折行"的小块，放不下就整块换行。
   ★ 别改回 "· 最后登录 …" 拼成一整句：那样手机端会在句子中间随便断，又变回一字一行。 */
.uc-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 14px;
    margin-top: 7px;
    color: var(--text-3);
    font-size: 13px;
}
.uc-sub > span { white-space: nowrap; }
.uc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 18px;
}
.uc-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
}
.uc-stat > div { min-width: 0; }                 /* 长值（手机号/大额金额）不许把卡片顶开 */
.uc-stat .ico { color: var(--brand); flex: none; }
.uc-stat strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.uc-stat span { color: var(--text-3); font-size: 12.5px; line-height: 1.55; }

/* 通用列表行 */
.row-list { display: grid; }
.row-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    transition: background .18s var(--ease);
}
.row-item:last-child { border-bottom: 0; }
.row-item:hover { background: rgba(16, 24, 40, .03); }
.row-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: 11px;
    background: var(--panel-2);
    color: var(--brand-2);
}
.row-main { min-width: 0; flex: 1; }
.row-main strong { display: block; font-size: 14px; font-weight: 600; }
.row-main span { color: var(--text-3); font-size: 12.5px; }
.row-side { display: flex; align-items: center; gap: 14px; flex: none; color: var(--text-3); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   22. 分页
   -------------------------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;          /* 手机上 7 个格子一行放不下，让它换行而不是顶出横向滚动 */
    gap: 6px;
    margin-top: 38px;
}
.pager a, .pager span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px; height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    color: var(--text-2);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--brand-line); color: var(--brand-2); }
.pager .is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 700;
}
.pager .is-disabled { opacity: .4; pointer-events: none; }
.pager a .ico, .pager span .ico { opacity: .75; }

/* 分页条外壳：左边「共 N 笔」，右边页码
   ★ 放在 .console-block 里时必须把上边距压小 —— 那里紧挨着流水表，
     38px 的间隔会把分页按钮推到下一屏外，用户会以为"没有分页"。 */
.pager-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.pager-info { color: var(--text-3); font-size: 12.5px; }
.pager-info b { color: var(--text-2); font-variant-numeric: tabular-nums; }
.pager-bar .pager { margin-top: 0; }
/* 省略号：只是"这里还有更多页"的提示，不该长得像能点的按钮 */
.pager .is-gap {
    border: 0;
    background: none;
    box-shadow: none;
    min-width: 16px;
    padding: 0;
    color: var(--text-3);
}

/* --------------------------------------------------------------------------
   23. 图标色板（供小范围调色）
   -------------------------------------------------------------------------- */
.c-brand  { color: var(--brand-2); }
.c-green  { color: var(--green); }
.c-cyan   { color: var(--cyan); }
.c-red    { color: var(--red); }
.c-purple { color: var(--purple); }

/* --------------------------------------------------------------------------
   24. 动效：滚动入场
   -------------------------------------------------------------------------- */
[data-reveal] {
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
/* 仅当 JS 可用时才隐藏待入场元素：禁用 JS 时内容依旧完整可读 */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   25. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .foot-main { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
    .script-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1040px) {
    .nav, .head-search { display: none; }
    /* 顶部导航一收起，右上角按钮区就得自己顶到最右边
       （原来是靠 .burger 的 margin-left:auto 撑的，☰ 删掉后改在这儿管）。 */
    .head-act { margin-left: auto; }
    .hero-inner { grid-template-columns: 1fr; gap: 44px; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .feat-grid, .steps, .tut-grid, .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .step + .step::before { display: none; }
    .layout, .detail { grid-template-columns: 1fr; }
    .side { position: static; }
    .auth { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .uc-grid { grid-template-columns: repeat(2, 1fr); }
    .script-grid, .script-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .wrap { padding: 0 18px; }
    .section { padding: 58px 0; }
    .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
    .sec-title { font-size: 24px; }
    .hero { padding: 48px 0 58px; }
    .hero-meta { gap: 14px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .cat-grid, .feat-grid, .steps, .tut-grid, .contact-grid,
    .script-grid, .script-grid--2, .script-grid--4 { grid-template-columns: 1fr; }
    .cta { padding: 36px 22px; }
    .cta h2 { font-size: 23px; }
    .foot-main { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 0 32px; }
    .foot-brand { grid-column: 1 / -1; }
    .foot-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
    .dt-head { flex-direction: column; }
    /* ---------- 流水表在手机上的形态 ----------
       ★ 以前是"把 td 堆成一列"：值保留了、**表头没了**，一串数字看不出哪个是哪个，
         而且时间列还带着 col-opt 被一起隐藏（用户反馈"手机上没时间"就是这个）。
       现在改成"一人一张小卡片"：每格带行内标签（PHP 里的 data-l），值靠右，
       期号独占一行当标题，结果那格独占一行（它是个徽章，挤在半格不好看）。
       次要列（档位/赢回/被杀）继续隐藏 —— 那是真的用不上。 */
    .rank-table thead { display: none; }
    .rank-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px 14px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
    }
    .rank-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
        padding: 0;
        border: 0;
        font-size: 13px;
        text-align: left;
    }
    .rank-table td::before {
        content: attr(data-l);
        flex: none;
        color: var(--text-3);
        font-size: 11.5px;
    }
    .rank-table td[data-l="期号"] {
        grid-column: 1 / -1;
        padding-bottom: 4px;
        font-weight: 600;
    }
    .rank-table td[data-l="结果"] { grid-column: 1 / -1; justify-content: flex-start; gap: 10px; }

    /* ★★ 值一定放不下的那几列，手机上独占整行（2026-09-28 钱包页实测踩到）
       ---------------------------------------------------------------
       不加这几条会怎样（商道哥哥截图里的"文字叠在一块"）：
         「时间 2026-09-28 09:14:10」这格：时间戳 19 个字符约 143px，
         而两列网格里一格只有约 156px，再扣掉标签「时间」和间距 → 根本放不下；
         时间列又带着 .wm-nowrap（不许折行）→ 时间戳**直接溢出到右边那一格**，
         盖住「类型」的标签，屏幕上显示成 "2026-09-28 09:1购买40" 这种穿插。
         「接收人」那格同理，昵称「灰太狼大帅哥」被压成一字一行竖着排。
       独占整行后可用宽度约 326px，19 个字符的时间戳稳稳放得下（还留一半余量）。
       ★ 以后再加"值长度不可控"的列（昵称 / 编号 / 长文案 / 时间戳），一并往这里加。
       ★ 判断标准：那一列的值**最长可能到多少字符 × 13px**，超过 120px 就别放半格。 */
    .rank-table td[data-l="时间"],
    .rank-table td[data-l="最近一笔"],
    .rank-table td[data-l="接收人"] { grid-column: 1 / -1; }

    /* 兜底：没列举到的列（昵称「用户」、房间名…）宁可换行，也不许溢出到隔壁格子上。
       ★ 为什么必须加：td 里的值是没有标签的**裸文本**，在 flex 容器里会生成匿名 flex item，
         它的 min-width 是 auto —— 也就是"我多宽就多宽"，不会收缩，放不下就溢出去。
       （代价：极长的值会变成"标签一行 + 值一行"，比压成一字一行强得多。） */
    .rank-table td { flex-wrap: wrap; overflow-wrap: anywhere; }

    .rank-table td.col-num { text-align: right; }
    .page-title { font-size: 23px; }

    /* ---------- 用户中心（我的）在手机上的形态 ----------
       ★ 2026-09-28 商道哥哥反馈"这一块太长了"，正主是下面这两组规则。
         改之前的样子：账号卡被中间那段撑到 400+ 像素高（文字一字一行），
         下面 4 张统计卡又是 1 列竖排将近 370px —— 一屏看不到底。 */

    /* 统计卡：2×2。同样的信息省掉约一半高度，也更像 App 的四宫格 */
    .uc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .uc-stat { padding: 13px 14px; gap: 11px; border-radius: var(--r-s); }
    .uc-stat .ico { width: 18px; height: 18px; }
    .uc-stat strong { font-size: 15px; }
    .uc-stat span { font-size: 11.5px; }

    /* 账号卡：头像收一档；★★ 中间那段必须改成 flex: 1 1 0 ——
       桌面用的 260px 翻脸线在 390 宽下会让头像被挤到自己单独一行。
       手机上按"剩余宽度全给它"算：318 - 头像 52 - 间距 16 = 250px，
       「注册于 2026-09-28 09:26」约 195px，正好一行放得下。 */
    .uc-head { padding: 18px; gap: 14px 16px; align-items: flex-start; }
    .uc-avatar { width: 52px; height: 52px; border-radius: 14px; font-size: 21px; }
    .uc-name { font-size: 18px; }
    .uc-head-main { flex: 1 1 0; }
    /* 按钮组整行掉到第二行、两个按钮各占一半宽（拇指好点，也保证一定看得见） */
    .uc-head-acts { flex: 1 1 100%; }
    .uc-head-acts > .btn,
    .uc-head-acts > form { flex: 1 1 0; min-width: 0; }
    .uc-head-acts > form { display: flex; }
    .uc-head-acts > form > .btn { width: 100%; }
}

@media (max-width: 400px) {
    .hero-acts .btn { width: 100%; }
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   23. 挂机平台：通用小件（消息条 / 输入提示 / 空态）
   --------------------------------------------------------------------------
   这些原来散在 login.php 的内联 <style> 里（一个页面的样式不该只对它生效），
   现在统一收进设计系统 —— bind.php / console.php / login.php 都在用。
   ========================================================================== */

/* 表单消息条（原来叫 msgbox，沿用旧类名，免得再改一遍模板） */
.msgbox {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: var(--r-s);
    font-size: 13.5px;
    line-height: 1.7;
    background: #fdecee;
    color: #9c1f2d;
    border: 1px solid #f5c6cb;
}
.msgbox--ok { background: #eaf8f2; color: #0a6b4c; border-color: #b9e6d5; }

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.7;
}
.field-hint a { color: var(--brand-2); }

/* 一行里放"输入 + 按钮"（短信验证码那一行） */
.field-inline { display: flex; gap: 10px; align-items: center; }
.field-inline .input { flex: 1 1 auto; min-width: 0; }
.field-inline .btn { flex: 0 0 auto; white-space: nowrap; }

/* 盈亏配色：跟随站内已有惯例（--trend--up 是红、--trend--down 是绿） */
.c-up   { color: var(--red); }
.c-down { color: var(--green); }

.empty-line {
    padding: 26px 20px;
    border: 1px dashed var(--line-2);
    border-radius: var(--r);
    text-align: center;
    color: var(--text-3);
    font-size: 13.5px;
    background: var(--panel-2);
}
.empty-state { text-align: center; padding: 46px 24px; }
.empty-state h2 { font-size: 21px; }
.empty-state p { margin: 12px auto 0; max-width: 520px; font-size: 14px; line-height: 1.85; }
.empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px; height: 66px;
    margin-bottom: 16px;
    border-radius: 20px;
    background: var(--brand-dim);
    color: var(--brand);
}

/* 导航右上角的用户 ID / 退出按钮 */
.head-uid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 12.5px;
}
.head-uid b { font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: .02em; }
.head-uid:hover { border-color: var(--brand-line); background: var(--brand-dim); color: var(--brand-2); }
.head-uid:hover b { color: var(--brand-2); }
.head-out { display: flex; }

/* 游戏卡片（选择游戏 / 绑定列表共用；原来也在 login.php 内联样式里） */
.hub-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(16, 24, 40, .08);
    border-color: var(--brand);
}
.hub-card.is-off { opacity: .55; cursor: not-allowed; }
.hub-card.is-off:hover { transform: none; box-shadow: none; border-color: var(--line); }
.hub-ico {
    flex: 0 0 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-lite);
    color: #fff;
}
.hub-card--blue   .hub-ico { background: #2f80ed; }
.hub-card--green  .hub-ico { background: #0f9d6e; }
.hub-card--purple .hub-ico { background: #7c5cf0; }
.hub-card--red    .hub-ico { background: #d92d3f; }
.hub-card--cyan   .hub-ico { background: #0284c7; }

/* --------------------------------------------------------------------------
   游戏图标位图（games.php 的 'logo' 字段，渲染走 game_logo()）
   --------------------------------------------------------------------------
   2026-09-28 加的：臻途换成官方 App 图标（assets/img/ztlogo.png），
   比原来自绘的 SVG 闪电更容易一眼认出是哪个游戏。

   ★ 下面那两条 :has() 是必须的，别删：
     位图是**整幅**铺满容器的（.game-ico 50px / .hub-ico 46px），而这两个容器
     原本给 SVG 图标垫了彩色底（橙 / 蓝 / 绿 / 紫…）。位图虽然已经把白底抠成透明，
     圆角之外还是会露出那层彩色底 —— 所以一旦放了位图就把容器底色去掉。
   ★ 为什么用 :has() 而不是给容器加个类名：位图由 game_logo() 输出，容器 markup 在模板里，
     两边分开才做得到"在 games.php 填一个 logo 字段就生效、所有模板一行都不用改"。
     :has() 在 iOS 15.4+ / Chrome 105+ 都支持；万一老浏览器不认，
     最差情况只是图标背后还垫着一块彩色（不出白块、不难看），可以接受。
   ★ 位图必须是无背景的正方形（边长 ≥160）—— 白底图会在浅色卡片上露出一块白方块。
   -------------------------------------------------------------------------- */
.game-logo { display: block; }
.game-ico:has(> .game-logo),
.hub-ico:has(> .game-logo) { background: none; }
.hub-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hub-body strong { font-size: 15.5px; }
.hub-body em { font-style: normal; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.hub-tag {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--panel-3);
    color: var(--text-2);
}

/* 阿里云验证码容器（popup 模式也要留一个） */
#captcha-box { position: relative; z-index: 9; }

/* ==========================================================================
   24. 挂机平台：绑定页
   ========================================================================== */
.alertbox {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 17px 20px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r);
    background: #fff5ee;
}
.alertbox-ico { flex: none; color: var(--brand); margin-top: 1px; }
.alertbox h3 { font-size: 15.5px; }
.alertbox p { margin-top: 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.9; }
.alertbox p b { color: var(--text); }
.alertbox--soft { background: var(--panel); border-left: 4px solid var(--brand); }

.bind-grid {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}
.bind-side { display: grid; gap: 14px; }

.bind-head { display: flex; align-items: center; gap: 12px; }
.bind-ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: rgba(15, 157, 110, .12);
    color: var(--green);
}

.kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 22px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kv dt { color: var(--text-3); font-size: 12.5px; flex: none; }
.kv dd { margin: 0; font-size: 13px; font-weight: 500; text-align: right; min-width: 0; word-break: break-all; }
.kv-mono { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12.5px; }

.side-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14.5px;
    color: var(--text);
}
.side-title .ico { color: var(--brand); }

.plain-list { display: grid; gap: 9px; }
.plain-list li {
    position: relative;
    padding-left: 15px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.75;
}
.plain-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: 8px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand-line);
}

.steps-mini { display: grid; gap: 12px; }
.steps-mini li { display: flex; gap: 10px; align-items: flex-start; }
.steps-mini b {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand-dim);
    color: var(--brand-2);
    font-size: 12px;
    font-weight: 700;
}
.steps-mini span { color: var(--text-2); font-size: 13px; line-height: 1.7; }

/* ==========================================================================
   25. 挂机平台：控制台
   ========================================================================== */
.console-head-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.tabs {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-2);
}
.tabs a {
    padding: 7px 15px;
    border-radius: 999px;
    color: var(--text-2);
    font-size: 13.5px;
    text-decoration: none;
    transition: all .18s var(--ease);
}
.tabs a:hover { color: var(--text); }
.tabs a.is-active { background: var(--brand); color: #fff; }

.console-panel {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
    padding: 18px 22px;
}
.cp-left { display: flex; align-items: center; gap: 10px; flex: none; }
.cp-mid { flex: 1; min-width: 0; display: grid; gap: 5px; }
.cp-msg { font-size: 13.5px; font-weight: 500; word-break: break-word; }
.cp-act { display: flex; align-items: center; gap: 10px; flex: none; }

.state-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--panel-3);
    color: var(--text-2);
}
.state-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state-pill.is-run   { background: rgba(15, 157, 110, .12); color: #0a6b4c; }
.state-pill.is-drain { background: var(--brand-dim); color: var(--brand-2); }
.state-pill.is-off   { background: var(--panel-3); color: var(--text-3); }
.state-pill.is-run i { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.engine-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--text-3);
    font-size: 12.5px;
}
.engine-pill.is-on   { color: #0a6b4c; border-color: #b9e6d5; background: #eaf8f2; }
.engine-pill.is-wait { color: var(--brand-2); border-color: var(--brand-line); background: var(--brand-dim); }
.engine-pill.is-bad  { color: #9c1f2d; border-color: #f5c6cb; background: #fdecee; }

.mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.mini-card {
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--panel);
}
.mini-card span { display: block; font-size: 12px; color: var(--text-3); }
.mini-card b {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.console-block { margin-top: 30px; }
.block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 13px;
}
.block-head h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; }
.block-head h2 .ico { color: var(--brand); }

.param-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--panel);
}
.param-field { min-width: 0; }
.param-field > label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
}
.param-hint { margin-top: 7px; color: var(--text-3); font-size: 12px; line-height: 1.75; }
.param-act {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   下注策略块（2026-09-28 加「滚雪球」）
   --------------------------------------------------------------------------
   ★ 两个策略的输入内容都渲染在页面上，靠 JS 切 hidden —— 不重新取 HTML，
     免得把用户正在填的值冲掉。
   ★ .param-field--wide 让它跨整行：.param-form 是 auto-fit 的 grid，
     这个块内容多（分段 + 两套输入），挤在半列里没法看。
   -------------------------------------------------------------------------- */
.param-field--wide { grid-column: 1 / -1; }
.strat-pane { margin-top: 14px; }
.strat-pane[hidden] { display: none; }
.param-row2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.param-act-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* 开奖历史 */
.period-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.period-chip {
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--panel);
}
.pc-no { display: block; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--text-3); }
.pc-kill { display: block; margin: 4px 0 3px; font-size: 14.5px; font-weight: 600; color: var(--brand-2); }
.pc-time { display: block; font-size: 11.5px; }

/* 房间对照 */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.room-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--panel-2);
    font-size: 13.5px;
}
.room-cell b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex: none;
    border-radius: 7px;
    background: var(--panel-3);
    color: var(--text-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
    .bind-grid { grid-template-columns: 1fr; }
    .console-panel { flex-direction: column; align-items: flex-start; }
    .cp-act { width: 100%; }
    .cp-act .btn { flex: 1; }
}

@media (max-width: 760px) {
    .kv { grid-template-columns: 1fr; }
    .param-form { grid-template-columns: 1fr; padding: 18px; }
    .hub-grid { grid-template-columns: 1fr; }
    .alertbox { padding: 15px 16px; }
    .head-uid { display: none; }
    /* 下注流水在手机上本来会变成"一行一个格子"（.rank-table 的既有规则），
       9 列堆起来完全看不出哪列是哪列 —— 所以把次要列直接去掉，
       只留 期号 / 房间 / 下注 / 结果 / 净收益。 */
    .rank-table th.col-opt, .rank-table td.col-opt { display: none; }
}

/* 徽章不要被挤成两行（"待开奖"在 390 宽下会断成"待开 / 奖"） */
.badge { white-space: nowrap; }

/* ------------------------------------------------------------------
   手机端顶栏 + 底部导航（2026-09-28 改版）
   ------------------------------------------------------------------
   原来的病（2026-09-27 手机上看到的）：顶栏右侧那排按钮在 390 宽下放不下 ——
   登录态是「控制台 + 退出」，未登录是「登录 + 免费注册」，而 .head-act 是
   flex:none（不肯收缩）→ 直接把整页顶出横向滚动，手机上表现为
   "右边溢出屏幕、左边内容被切掉"。

   第一版修法：手机上顶栏按钮**全隐藏**，靠 ☰ 抽屉当唯一入口。
   第二版（现在）：☰ 抽屉整个删掉，换成底部四格 tab —— 于是未登录时顶栏
   必须留一个「登录」，否则手机上除了首页 Hero 就没有登录入口了。
   所以这里的规则是"**只留登录，其余仍隐藏**"：
     · .head-login  未登录时的「登录」—— 手机上唯一保留的顶栏按钮（约 64px，放得下）
     · .head-reg    「免费注册」—— 继续隐藏，它才是把整页顶出横向滚动的元凶；
                    注册入口在登录页和首页 Hero 上都有，没丢
     · .head-uid / .head-out  登录态下的 UID 和「退出」—— 隐藏；
                    退出在「我的」页里有，UID 在「我的」页第一块就写着
   断点跟 .nav 隐藏（≤1040）不是一回事，别合并。
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
    .head-act .btn,
    .head-act .head-uid,
    .head-act .head-out { display: none; }

    /* 写在 .head-act .btn 后面才能盖住上面那条（同权重，靠顺序生效） */
    .head-act .head-login { display: inline-flex; }

    /* 底部导航：手机端才出现 */
    .tabbar { display: flex; }

    /* 底栏是 fixed 的，会盖住页脚最后一段 —— 给页脚补出底栏的高度。
       补在页脚上而不是 body 上，是为了让页脚的白色背景一直铺到屏幕下沿
       （补在 body 上会露出一条 --bg 的灰缝）。安全区跟着一起加。 */
    .site-foot { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* 分段切换在小屏上铺满整行，比一小块胶囊好按 */
    .seg-tabs { display: flex; width: 100%; }
    .seg-tabs a { flex: 1 1 0; justify-content: center; }

    /* 兜底：手机上任何元素都不该把整页顶出横向滚动。
       用 clip 不用 hidden —— hidden 会在 html/body 上造出滚动容器，
       把 position:sticky 的顶栏一起搞坏（clip 不创建滚动容器）。 */
    html, body { overflow-x: clip; }
}

/* 品牌区不许把顶栏撑开：允许收缩，且名字永不折行 */
.head-inner { min-width: 0; }
.brand { min-width: 0; }
.brand-name, .brand-tag { white-space: nowrap; }

/* ==================================================================
   控制台实时块（2026-09-27 加）
   ------------------------------------------------------------------
   参考「自动神佑网站」看板里那几块（倒计时 / 倍投进度 / 止盈止损条），
   按灰太狼的浅色 + 狼橙重做。全部只用 CSS 变量，换肤不用动这里。
   ================================================================== */

/* ---------- 本期倒计时（封盘=开奖，同一个瞬间，所以只有一根条）---------- */
.round-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-2);
    border-radius: var(--r-s);
    background: var(--panel);
    box-shadow: var(--sh-1);
}
.round-bar .rb-phase { flex: none; min-width: 132px; font-size: 12.5px; color: var(--text-3); }
.round-bar .rb-num {
    flex: none;
    min-width: 104px;
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}
.round-bar .rb-track {
    flex: 1;
    height: 8px;
    border-radius: 5px;
    background: var(--panel-3);
    overflow: hidden;
}
.round-bar .rb-track i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 5px;
    background: var(--brand);
    transition: width .3s linear;
}
.round-bar .rb-side { flex: none; font-size: 11.5px; color: var(--text-3); text-align: right; }
.round-bar.is-bet  { border-left-color: var(--brand); }
.round-bar.is-draw { border-left-color: var(--cyan); }
.round-bar.is-bet  .rb-phase { color: var(--brand-2); font-weight: 600; }
.round-bar.is-draw .rb-phase { color: var(--cyan); font-weight: 600; }
.round-bar.is-bet  .rb-num { color: var(--brand); }
.round-bar.is-draw .rb-num { color: var(--cyan); }
.round-bar.is-draw .rb-track i { background: var(--cyan); }

/* ---------- 倍投进度 + 止盈止损 ---------- */
.viz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.viz-card { padding: 14px 16px; }
.viz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.viz-head h3 { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin: 0; }

.ladder { display: flex; gap: 7px; flex-wrap: wrap; }
.lad-step {
    flex: 1 1 62px;
    min-width: 62px;
    padding: 8px 6px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--panel-2);
}
.lad-i { display: block; font-size: 11px; color: var(--text-3); }
.lad-a { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.lad-step.is-done { opacity: .5; }
.lad-step.is-done .lad-a { text-decoration: line-through; }
.lad-step.is-now { background: var(--brand-dim); border-color: var(--brand-line); }
.lad-step.is-now .lad-a,
.lad-step.is-now .lad-i { color: var(--brand-2); }

.gauge { display: grid; gap: 12px; }
.g-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.g-k { flex: none; width: 34px; color: var(--text-3); }
.g-track { flex: 1; height: 8px; border-radius: 5px; background: var(--panel-3); overflow: hidden; }
.g-track i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--brand-lite), var(--brand));
    transition: width .4s var(--ease);
}
.g-track--down i { background: linear-gradient(90deg, #f08a90, var(--red)); }
.g-v { flex: none; min-width: 96px; text-align: right; color: var(--text-3); }
.g-row.is-hit .g-v { color: var(--brand-2); font-weight: 600; }

/* ---------- 房间热度（实时下注额 + 人数）---------- */
.room-grid--heat { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
.room-grid--heat .room-cell { display: block; padding: 10px 12px 11px; }
.rc-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.rc-head b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    flex: none;
    border-radius: 6px;
    background: var(--panel-3);
    color: var(--text-2);
    font-size: 11.5px;
}
.rc-bet {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.rc-ppl { display: block; margin-top: 1px; min-height: 14px; font-size: 11px; color: var(--text-3); }
.rc-bar {
    display: block;
    margin-top: 7px;
    height: 5px;
    border-radius: 4px;
    background: var(--panel-3);
    overflow: hidden;
}
.rc-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--brand-lite), var(--brand));
    transition: width .4s var(--ease);
}

/* 「未押上」的徽章：比"未中"更浅、更中性 —— 它不是输，是这期没投进去 */
.badge--skip { background: var(--panel-3); color: var(--text-3); }

/* ---------- 手机端：倒计时换两行，两个卡片竖排 ---------- */
@media (max-width: 760px) {
    .round-bar { flex-wrap: wrap; gap: 8px 12px; padding: 11px 14px; }
    .round-bar .rb-phase { min-width: 0; }
    .round-bar .rb-num { min-width: 0; font-size: 20px; }
    .round-bar .rb-track { order: 3; flex-basis: 100%; }
    .round-bar .rb-side { order: 4; flex-basis: 100%; text-align: left; }
    .viz-row { grid-template-columns: 1fr; }
    .g-v { min-width: 78px; }
}

/* ==========================================================================
   26. 今日收益榜（rank.php）
   --------------------------------------------------------------------------
   ★ 没有做金银铜那套华丽配色：站点是浅色 + 狼橙，硬塞一套金银铜会和整体打架。
     前 3 名用品牌橙的浅底胶囊 + 整行淡橙底标出来，扫一眼就知道榜头在哪，够了。
   ★ 排行榜只做"看"—— 上面没有任何按钮，用户看完就回控制台。
   ========================================================================== */
.leaderboard td.col-rank { width: 76px; }

.leaderboard .lb-no {
    display: inline-block;
    min-width: 22px;
    color: var(--text-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 名次胶囊：第 1 名品牌橙，2/3 名中性灰 */
.leaderboard .lb-medal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 6px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.lb-medal--1 { background: var(--brand-dim); color: var(--brand-2); border: 1px solid var(--brand-line); }
.lb-medal--n { background: var(--panel-3); color: var(--text-2); border: 1px solid var(--line); }

/* 前三名整行淡橙底 */
.leaderboard tbody tr.is-top { background: rgba(242, 98, 15, .045); }
.leaderboard tbody tr.is-top:hover { background: rgba(242, 98, 15, .085); }

.leaderboard .lb-user { font-weight: 600; }
/* 「我」标记：不用一行行数也知道自己在哪 */
.leaderboard .lb-me {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}

/* 页脚的「这个榜是怎么算的」 */
.lb-rules { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.95; }
.lb-rules b { color: var(--text); }

@media (max-width: 760px) {
    /* 手机上：名次 / 用户 / 今日净收益 各占一整行 —— 竖着读最舒服，
       不会出现"数字挤在半格、名字被截断"。
       今日下注 / 期数 / 最近一笔 走全局的 .col-opt 规则被隐藏（见上面的媒体查询）。 */
    .leaderboard td[data-l="名次"],
    .leaderboard td[data-l="用户"],
    .leaderboard td[data-l="今日净收益"] { grid-column: 1 / -1; }
    .leaderboard td[data-l="名次"] {
        justify-content: flex-start;
        padding-bottom: 4px;
    }
    /* ★ 桌面那条 .leaderboard td.col-rank{width:76px} 在手机上必须放开 ——
       否则"占满一整行"的 grid 项会被这个固定宽度卡成 76px，名次和下面几行对不齐。 */
    .leaderboard td.col-rank { width: auto; }

    /* 分页在手机上收窄一点，让 上一页 / 页码 / 下一页 能挤在同一行 */
    .pager a, .pager span { min-width: 34px; height: 34px; padding: 0 9px; font-size: 13px; }
    .pager-bar { justify-content: center; }
}

/* ==================================================================
   钱包页（积分 / 充值 / 转增）
   ------------------------------------------------------------------
   为什么确认金额要用自建弹窗而不是 window.confirm：
   这里做的事是**从用户自己的游戏账号里转出宝石**，确认文案必须能把
   "转多少、从哪个账号出、不可撤销"三件事讲清楚 —— 原生 confirm 只能一行字，
   容易被顺手点掉。多写这几十行是值得的。
   ================================================================== */
.wm-card { padding: 22px 24px; }
.wm-card + .wm-card { margin-top: 18px; }
.wm-title { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: 16px; font-weight: 650; }
.wm-desc { margin: 0 0 16px; color: var(--text-2); font-size: 13px; line-height: 1.75; }

.wm-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.wm-row .field { flex: 1 1 220px; margin: 0; }
.wm-row .btn { flex: none; }

/* 被拦下时（挂机中 / 未绑号）的提示块 */
.wm-block {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 15px 18px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-s);
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 13px; line-height: 1.75;
}
.wm-block strong { color: var(--text); display: block; margin-bottom: 3px; }

/* 查到的接收人 */
.wm-lookup {
    display: flex; align-items: center; gap: 11px;
    margin-top: 14px; padding: 12px 14px;
    border: 1px solid var(--line-2); border-radius: var(--r-s);
    background: var(--panel-2);
}
.wm-avatar {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    background: var(--line-2); object-fit: cover;
}
.wm-avatar--txt {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-3); font-size: 15px; font-weight: 600;
}
.wm-who { min-width: 0; }
.wm-who b { display: block; font-size: 14.5px; }
.wm-who span { color: var(--text-3); font-size: 12.5px; }

/* 确认弹窗
   ★ z-index 必须**高于底部导航（.tabbar 是 95）**：
     2026-09-28 加底栏时忘了这一条会踩两个坑 ——
       ① 弹窗下缘被底栏压住（"确认"按钮被遮住一半，看着像点不动）；
       ② 弹窗开着的时候底栏还能点，用户一点就跳走、充值单已经提交了。
     全站 z-index 阶梯（改之前先看一眼，别插在中间）：
       内容 1 ~ 9 → 顶栏 90 → 底栏 95 → 弹窗 130 → toast 200 */
.wm-modal {
    position: fixed; inset: 0; z-index: 130;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(16, 24, 40, .45);
}
.wm-modal[hidden] { display: none; }
.wm-box {
    width: 100%; max-width: 420px;
    padding: 24px;
    border-radius: 16px;
    background: var(--panel);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
}
.wm-box h3 { margin: 0 0 10px; font-size: 17px; }
.wm-box p { margin: 0 0 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.8; }
.wm-box .wm-amt { color: var(--text); font-weight: 700; font-size: 15px; }
.wm-acts { display: flex; gap: 10px; margin-top: 20px; }
.wm-acts .btn { flex: 1; }

.wm-tabbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.wm-nowrap { white-space: nowrap; }

@media (max-width: 760px) {
    .wm-card { padding: 18px 16px; }
    .wm-row .btn { width: 100%; }
    .wm-acts { flex-direction: column-reverse; }
}

/* ==================================================================
   公告 / 交流群（site_notice() 输出）
   ------------------------------------------------------------------
   ★ 自己带 max-width + 左右内边距，**不套 .wrap** —— 因为它被放在 header 之后、
     各页面自己的 .wrap 之前，套两层 .wrap 会多出一份内边距、在手机上挤窄。
   ★ 两样都空时 site_notice() 返回空串，这段样式不会产生任何可见元素。
   ================================================================== */
.noticebar {
    width: 100%;
    max-width: var(--max);
    margin: 18px auto 0;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}
.noticebar-main {
    flex: 1 1 320px; min-width: 0;
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-s);
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 13px; line-height: 1.75;
}
.noticebar-main .ico { flex: none; margin-top: 2px; color: var(--brand); }
.noticebar-text { min-width: 0; }
.noticebar-qq {
    flex: none;
    display: flex; gap: 9px; align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-s);
    background: var(--panel);
    font-size: 13px;
    color: var(--text-2);
}
.noticebar-qq .ico { color: var(--brand); }
.noticebar-qq b { color: var(--text); letter-spacing: .3px; }
.noticebar-qq .btn { margin-left: 2px; }

.contact-line {
    display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
    margin-top: 12px;
    font-size: 13.5px; color: var(--text-2);
}
.contact-line .ico { color: var(--brand); }
.contact-line b { color: var(--text); }

@media (max-width: 760px) {
    .noticebar { padding: 0 16px; margin-top: 14px; }
    .noticebar-qq { width: 100%; justify-content: space-between; }
}