/* ============================================================
   六合彩收单记账系统 - 样式
   【版本】v8.6 - 2026-09-18
   【本次修订】
   1. 🔧 新增「复制粘贴支持」区块：
      - #txtMsg 显式覆盖 -webkit-touch-callout 为 default
      - 聊天消息气泡（.msg-text / .msg-hint / .msg-warning）允许选中
      - 空状态提示 / 规则代码 / 指令代码允许选中
      - 修复原因：全局 * 上的 -webkit-touch-callout: none 导致 iOS 长按
        不弹「拷贝/粘贴」菜单，即便 #txtMsg 有 user-select: text 也无效
   2. ✅ 保留 v8.5 全部其它样式（指令弹窗、录入规则弹窗、玩法卡片、搜索框等）
   3. ✅ 未删除任何原有样式
   ============================================================ */


/* ============================================================
   全局
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html {
    font-size: clamp(16px, 4.4vw, 18px);
    height: 100%;
}

body {
    height: 100%;
    background: #ededed;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Helvetica Neue", Helvetica, "Microsoft YaHei", sans-serif;
    font-size: 1rem;
    color: #333;
    overflow: hidden;
    user-select: none;
    --kb-height: 0px;
}

button,
input,
textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
    background: none;
}

button {
    cursor: pointer;
    user-select: none;
}


/* ============================================================
   错误页
   ============================================================ */
#errorPage {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    padding: 1.25rem;
    z-index: 9999;
}

.error-box {
    text-align: center;
    max-width: 20rem;
}

.error-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.error-msg {
    font-size: 1.125rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.error-hint {
    font-size: 0.9375rem;
    color: #666;
}


/* ============================================================
   主布局
   ============================================================ */
#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}


/* ============================================================
   顶部栏（单行：左用户名 / 中期号 / 右彩种）
   ============================================================ */
#header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.5rem;
    padding: 0 0.75rem;
    padding-top: env(safe-area-inset-top);
    background: #ededed;
    border-bottom: 1px solid #d9d9d9;
    flex-shrink: 0;
}

.header-username {
    flex-shrink: 0;
    max-width: 5.5rem;
    font-size: 1rem;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    overflow: hidden;
}

.header-period {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 0;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    user-select: none;
}

.header-period:active {
    opacity: 0.6;
}

.header-period-prefix {
    font-size: 1rem;
    color: #333;
    font-weight: 600;
    flex-shrink: 0;
}

.header-period-text {
    font-size: 1rem;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-period-text.history {
    color: #333;
}

.header-back-text {
    font-size: 1rem;
    color: #07c160;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.header-back-text:active {
    opacity: 0.6;
}

.header-source {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}

.header-source:active {
    background: #f0f0f0;
}

.signal-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #bbb;
    flex-shrink: 0;
    transition: background .3s;
}

.signal-dot.ok {
    background: #07c160;
}

.signal-dot.warn {
    background: #fa9d3b;
}

.signal-dot.bad {
    background: #e63939;
}

.source-caret {
    font-size: 0.8125rem;
    color: #666;
    margin-left: 0.125rem;
}


/* ============================================================
   聊天流
   ============================================================ */
#chatMessages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0;
    background: #ededed;
    -webkit-overflow-scrolling: touch;
    transition: padding-bottom .2s ease;
}

#chatMessages::-webkit-scrollbar {
    width: 3px;
}

#chatMessages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .1);
    border-radius: 2px;
}


/* ============================================================
   消息气泡
   ============================================================ */
.msglayer {
    display: flex;
    align-items: flex-start;
    margin: 0.5rem 0.75rem;
    gap: 0.5rem;
}

.msg-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    object-fit: cover;
    background: #ddd;
}

.msg-body {
    max-width: calc(100% - 6rem);
    display: flex;
    flex-direction: column;
}

.msg-name {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.25rem;
    padding: 0 0.25rem;
}

.msg-text {
    display: inline-block;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #333;
    word-break: break-word;
    white-space: pre-wrap;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.msglayer:not(.self) .msg-text::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.75rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.375rem 0.5rem 0.375rem 0;
    border-color: transparent #fff transparent transparent;
}

.msglayer.self {
    flex-direction: row-reverse;
}

.msglayer.self .msg-body {
    align-items: flex-end;
}

.msglayer.self .msg-name {
    text-align: right;
}

.msglayer.self .msg-text {
    background: #95ec69;
    color: #111;
}

.msglayer.self .msg-text::after {
    content: '';
    position: absolute;
    right: -0.5rem;
    top: 0.75rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.375rem 0 0.375rem 0.5rem;
    border-color: transparent transparent transparent #95ec69;
}

.msglayer.bot .msg-text {
    background: #fff;
}

.msglayer.system {
    justify-content: center;
    margin: 0.625rem 0.75rem;
}

.msglayer.system .msg-avatar {
    display: none;
}

.msglayer.system .msg-body {
    max-width: 90%;
    align-items: center;
}

.msglayer.system .msg-name {
    display: none;
}

.msglayer.system .msg-text {
    background: rgba(0, 0, 0, .08);
    color: #666;
    font-size: 0.9375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    box-shadow: none;
}

.msglayer.system .msg-text::before,
.msglayer.system .msg-text::after {
    display: none;
}


/* ============================================================
   开奖通知气泡（msg_type='draw_notice'）
   ============================================================ */
.msglayer.draw-notice .msg-text {
    background: #f0fdf4;
    border: 1px solid #b7ebc6;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}

.msglayer.draw-notice .msg-text:active {
    background: #e0f8e8;
}

.msglayer.draw-notice:not(.self) .msg-text::before {
    border-color: transparent #f0fdf4 transparent transparent;
}


/* ============================================================
   机器人回复的"提示段"（小字灰色）
   ============================================================ */
.msg-hint {
    margin-top: 0.375rem;
    padding: 0 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #666;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
}


/* ============================================================
   机器人回复的"警告段"（用于共N不一致）
   ============================================================ */
.msg-warning {
    margin-top: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #c8780c;
    background: #fffbeb;
    border-left: 3px solid #fa9d3b;
    border-radius: 0.25rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
}


/* ============================================================
   图片消息（内联 SVG 版）
   ============================================================ */
.msg-image-svg {
    display: block;
    width: 100%;
    max-width: 20rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: box-shadow .15s;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    padding: 0.25rem;
}

.msg-image-svg:active {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}

.msg-image-svg svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 0.375rem;
    pointer-events: none;
}


/* ============================================================
   图片消息（老版 URL 版，保留兼容）
   ============================================================ */
.msg-image {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: auto;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    cursor: pointer;
    transition: box-shadow .15s;
    -webkit-user-select: none;
    user-select: none;
}

.msg-image:active {
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}


/* ============================================================
   图片全屏预览
   ============================================================ */
.img-preview-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: imgFadeIn .15s ease;
    cursor: zoom-out;
}

@keyframes imgFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.img-preview-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.25rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .4);
    cursor: default;
    object-fit: contain;
}


/* ============================================================
   预览浮层底部操作栏
   ============================================================ */
.img-preview-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .85);
    z-index: 10000;
}

.img-preview-toolbar button {
    flex: 1;
    height: 3rem;
    border-radius: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 500;
    transition: opacity .15s;
}

.img-preview-toolbar button:active {
    opacity: 0.7;
}

.img-preview-save-btn {
    background: #07c160;
    color: #fff;
}

.img-preview-close-btn {
    background: #444;
    color: #fff;
    flex: 0 0 5rem !important;
}

.img-preview-img {
    max-height: calc(100vh - 6rem) !important;
}


/* ============================================================
   分隔线 / 空状态
   ============================================================ */
.divider-line {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 1.5rem;
    color: #666;
    font-size: 0.9375rem;
}

.divider-line::before,
.divider-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #bbb;
}

.divider-line span {
    padding: 0 0.75rem;
    white-space: nowrap;
}

.empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.75rem 1.25rem;
    color: #666;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.empty-text {
    font-size: 1.0625rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.empty-hint {
    font-size: 0.9375rem;
    color: #999;
    line-height: 1.7;
    text-align: center;
}


/* ============================================================
   聊天时间戳
   ============================================================ */
.msg-time {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    padding: 0.5rem 0 0.25rem;
    user-select: none;
    pointer-events: none;
}


/* ============================================================
   底部输入区
   ============================================================ */
#inputBar {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    background: #f7f7f7;
    border-top: 1px solid #d9d9d9;
    flex-shrink: 0;
}

.kb-toggle {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.375rem;
    border-radius: 50%;
    flex-shrink: 0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.kb-toggle:active {
    background: #e5e5e5;
}

.kb-toggle.active {
    background: #07c160;
    color: #fff;
}

#txtMsg {
    flex: 1;
    min-width: 0;
    height: 2.75rem;
    max-height: 6rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border-radius: 0.375rem;
    font-size: 1.125rem;
    line-height: 1.5;
    resize: none;
    border: 1px solid #ccc;
    color: #333;
    -webkit-user-select: text;
    user-select: text;
    transition: border-color .2s;
}

#txtMsg:focus {
    border-color: #07c160;
}

#txtMsg[inputmode="none"] {
    border-color: #07c160;
}

.send-btn {
    padding: 0 0.875rem;
    height: 2.75rem;
    font-size: 1.125rem;
    color: #fff;
    background: #07c160;
    border-radius: 0.375rem;
    flex-shrink: 0;
    font-weight: 500;
}

.send-btn:active {
    background: #06a850;
}


/* ============================================================
   虚拟键盘弹起时
   ============================================================ */
body.kb-open #inputBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--kb-height, 17rem);
    z-index: 10;
}

body.kb-open #chatMessages {
    padding-bottom: calc(var(--kb-height, 17rem) + 4.5rem);
}


/* ============================================================
   开奖记录面板
   ============================================================ */
.draw-panel-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: flex-end;
    z-index: 200;
}

.draw-panel-mask.show {
    display: flex;
}

.draw-panel {
    width: 100%;
    max-height: 78vh;
    background: #f5f7fa;
    border-radius: 0.75rem 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
    animation: slideUp .22s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.draw-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.draw-panel-title {
    font-size: 1.1875rem;
    font-weight: 600;
    color: #333;
}

.draw-panel-close {
    font-size: 1.5rem;
    color: #666;
    line-height: 1;
    padding: 0 0.25rem;
    font-weight: 300;
}

.draw-panel-close:active {
    color: #333;
}

.draw-panel-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.875rem 1rem 1.25rem;
}

.draw-panel-body::-webkit-scrollbar {
    width: 3px;
}

.draw-panel-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.source-row-label {
    font-size: 1rem;
    color: #666;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.source-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.source-btn {
    flex: 1;
    height: 3rem;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 0.5rem;
    font-size: 1.0625rem;
    color: #333;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.source-btn.active {
    border-color: #07c160;
    background: #f0fdf4;
    color: #07c160;
    font-weight: 600;
}

.source-btn:active {
    transform: scale(0.97);
}


/* ============================================================
   开奖卡片（通用）
   ============================================================ */
.draw-card {
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.draw-card-latest {
    border: 1px solid #e0e0e0;
}

.draw-card.clickable {
    cursor: pointer;
}

@media (hover: hover) {
    .draw-card.clickable:hover {
        background: #f5f5f5;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }

    .draw-card.clickable.viewing:hover {
        background: #e6f9ec;
        box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.15), 0 2px 8px rgba(0, 0, 0, .08);
    }

    .draw-card-live:hover {
        background: #e6f9ec;
    }

    .draw-card-live.viewing:hover {
        background: #e6f9ec;
        box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.15), 0 2px 8px rgba(0, 0, 0, .08);
    }
}

.draw-card.clickable:active {
    background: #f0f0f0;
}

.draw-card.clickable.viewing:active {
    background: #e6f9ec;
}

.draw-card-live {
    border: 2px dashed #07c160;
    background: #f0fdf4;
    cursor: pointer;
}

.draw-card-live.viewing {
    border: 2px solid #07c160;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.15);
}

.draw-card-live .draw-card-period {
    color: #07c160;
}

.draw-card-live .draw-card-time {
    color: #07c160;
    font-weight: 600;
}

.live-hint {
    font-size: 0.9375rem;
    color: #666;
    margin-top: 0.5rem;
    text-align: center;
}

.draw-card.viewing {
    border: 2px solid #07c160;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.15);
}

.draw-card.viewing .draw-card-period {
    color: #07c160;
}

.draw-card.viewing .draw-card-time {
    color: #07c160;
    font-weight: 600;
}

.draw-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.draw-card-period {
    font-size: 1.125rem;
    font-weight: 700;
    color: #333;
    font-family: 'Courier New', monospace;
}

.draw-card-time {
    font-size: 0.9375rem;
    color: #666;
    font-family: 'Courier New', monospace;
}

.balls-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.ball-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ball-cell .ball {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Courier New', monospace;
    line-height: 1;
}

.ball-cell .zodiac {
    font-size: 0.9375rem;
    color: #666;
    line-height: 1;
    white-space: nowrap;
}

.ball-cell .zodiac.special {
    color: #e63939;
    font-weight: 600;
}

.ball.red {
    background: #e63939;
}

.ball.blue {
    background: #2288dd;
}

.ball.green {
    background: #3ec67c;
}

.ball-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 2rem;
    font-size: 1.125rem;
    color: #666;
    font-weight: 500;
    flex-shrink: 0;
}


/* ============================================================
   进行中卡片：大倒计时
   ============================================================ */
.live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.live-period {
    font-size: 1.1875rem;
    font-weight: 700;
    color: #07c160;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #07c160;
    flex-shrink: 0;
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(7, 193, 96, 0.6);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(7, 193, 96, 0);
    }
}

.live-source {
    font-size: 0.9375rem;
    color: #666;
}

.live-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0 0.5rem;
}

.cd-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 4rem;
}

.cd-num {
    display: block;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: #07c160;
    font-family: 'Courier New', Consolas, monospace;
    letter-spacing: 0.05em;
    transition: color .3s;
}

.cd-label {
    font-size: 0.8125rem;
    color: #666;
    font-weight: 500;
}

.cd-sep {
    font-size: 2rem;
    font-weight: 700;
    color: #07c160;
    line-height: 1;
    margin-top: -1rem;
    transition: color .3s;
}

.live-countdown.urgent .cd-num,
.live-countdown.urgent .cd-sep {
    color: #e63939;
}

.cd-waiting {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fa9d3b;
    text-align: center;
    padding: 1rem 0;
    letter-spacing: 0.05em;
}


/* ============================================================
   虚拟键盘
   ============================================================ */
.vkb-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d1d5db;
    border-top: 1px solid #c0c0c0;
    z-index: 20;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform .2s ease;
    display: none;
    max-height: 60vh;
    overflow-y: auto;
}

.vkb-panel.show {
    display: block;
    transform: translateY(0);
}

.vkb-tabs {
    display: flex;
    background: #e5e7eb;
    border-bottom: 1px solid #c0c0c0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.vkb-tab {
    flex: 1;
    padding: 0.625rem;
    font-size: 1rem;
    color: #666;
    border-bottom: 2px solid transparent;
}

.vkb-tab.active {
    color: #07c160;
    border-bottom-color: #07c160;
    font-weight: 600;
    background: #f0fdf4;
}

.vkb-content {
    padding: 0.375rem;
}

.vkb-row {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}

.vkb-key {
    flex: 1;
    height: 3rem;
    background: #fff;
    border-radius: 0.375rem;
    font-size: 1.375rem;
    color: #333;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vkb-key:active {
    background: #e5e5e5;
    transform: scale(0.97);
}

.vkb-key.vkb-word {
    font-size: 1.1875rem;
    color: #07c160;
    font-weight: 500;
}

.vkb-key.vkb-zodiac {
    color: #c9302c;
    font-weight: 500;
}

.vkb-key.vkb-del {
    background: #c8ccd0;
    color: #333;
}

.vkb-key.vkb-clear {
    background: #f0f0f0;
    font-size: 1.0625rem;
    color: #c9302c;
}

.vkb-key.vkb-send {
    background: #07c160;
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 500;
}

.vkb-key.vkb-send:active {
    background: #06a850;
}

.vkb-action {
    flex: 1;
    height: 3.25rem;
    background: #fff;
    border-radius: 0.375rem;
    font-size: 1.0625rem;
    color: #333;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.vkb-action:active {
    background: #e5e5e5;
    transform: scale(0.97);
}


/* ============================================================
   虚拟键盘：分组标题（保留，防旧缓存）
   HTML 里已删，但保留 CSS 以防旧版页面缓存调用
   ============================================================ */
.vkb-group-title {
    font-size: 0.8125rem;
    color: #999;
    font-weight: 500;
    padding: 0.5rem 0.5rem 0.25rem;
    text-align: center;
    letter-spacing: 0.05em;
    user-select: none;
}


/* ============================================================
   操作 Tab：卡片式布局（保留，兼容旧版）
   ============================================================ */
.vkb-action-panel {
    padding: 0.5rem;
}

.vkb-card {
    background: #f9fafb;
    border-radius: 0.5rem;
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.vkb-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.vkb-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
}

.vkb-card-actions .vkb-action {
    height: 3rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

/* 危险按钮（清除） */
.vkb-action-danger {
    color: #dc2626 !important;
    border: 1px solid #fca5a5;
    background: #fef2f2 !important;
    font-weight: 600;
}

.vkb-action-danger:active {
    background: #fee2e2 !important;
}

/* 信息按钮（录入规则 / 用户使用手册） */
.vkb-action-info {
    color: #2563eb !important;
    border: 1px solid #93c5fd;
    background: #eff6ff !important;
    font-weight: 600;
}

.vkb-action-info:active {
    background: #dbeafe !important;
}


/* ============================================================
   🆕 v8.5 指令按钮（键盘上的"📝 指令"）
   与 vkb-action-info（绿色）区分，用紫色
   ============================================================ */
.vkb-action-cmd {
    color: #7c3aed !important;
    border: 1px solid #c4b5fd;
    background: #f5f3ff !important;
    font-weight: 600;
}

.vkb-action-cmd:active {
    background: #ede9fe !important;
}


/* ============================================================
   弹窗通用
   ============================================================ */
.popup-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 1.25rem;
}

.popup-mask.show {
    display: flex;
}

.popup-panel {
    background: #fff;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 25rem;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.popup-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
}

.popup-close {
    font-size: 1.5rem;
    color: #666;
    padding: 0 0.25rem;
    line-height: 1;
    font-weight: 300;
}

.popup-close:active {
    color: #333;
}

.popup-body {
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
}


/* ============================================================
   录入规则弹窗（用户使用手册）
   ============================================================ */
.input-rules-panel {
    max-width: 92vw;
    width: 92vw;
    max-height: 85vh;
}

.input-rules-body {
    padding: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    white-space: normal;
    word-break: normal;
}


/* ============================================================
   搜索框
   ============================================================ */
.rules-search-box {
    position: relative;
    margin-bottom: 1rem;
}

.rules-search-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 2.5rem 0 0.875rem;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #333;
    -webkit-user-select: text;
    user-select: text;
    transition: border-color .15s, background .15s;
}

.rules-search-input:focus {
    background: #fff;
    border-color: #07c160;
}

.rules-search-input::placeholder {
    color: #bbb;
}

.rules-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #ddd;
    color: #fff;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.rules-search-clear:active {
    background: #bbb;
}


/* ============================================================
   分类折叠
   ============================================================ */
.rules-section {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #e5e5e5;
}

.rules-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0.5rem;
}

.rules-section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.5rem;
    background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 100%);
    border-left: 3px solid #07c160;
    border-radius: 0.25rem;
}

.rules-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}

.rules-section-toggle:active {
    background: #e8f8ee;
}

.rules-cat-arrow {
    font-size: 0.75rem;
    color: #07c160;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    transition: transform .15s;
}

.rules-cat-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rules-cat-count {
    font-size: 0.875rem;
    color: #999;
    font-weight: 500;
    flex-shrink: 0;
}

.rules-cat-body {
    padding-top: 0.25rem;
}


/* ============================================================
   玩法卡片
   ============================================================ */
.rule-card {
    background: #fafafa;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid #07c160;
}

.rule-card:last-child {
    margin-bottom: 0;
}

.rule-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    gap: 0.5rem;
}

.rule-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    flex-shrink: 0;
}

.rule-card-odds {
    font-size: 0.875rem;
    color: #07c160;
    font-weight: 600;
    flex-shrink: 0;
    text-align: right;
}

.rule-card-ma {
    font-size: 0.8125rem;
    color: #fa9d3b;
    margin-left: 0.375rem;
    font-weight: 500;
}

.rule-card-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.rule-card-row:last-child {
    margin-bottom: 0;
}

.rule-card-label {
    flex-shrink: 0;
    min-width: 2.5rem;
    font-size: 0.8125rem;
    color: #999;
    padding-top: 0.125rem;
    font-weight: 500;
}

.rule-card-code {
    flex: 1;
    min-width: 0;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.9375rem;
    color: #07c160;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.25rem;
    padding: 0.2rem 0.5rem;
    word-break: break-all;
    user-select: text;
    -webkit-user-select: text;
}

.rule-card-desc {
    flex: 1;
    font-size: 0.875rem;
    color: #333;
    line-height: 1.5;
}

.rule-card-hit {
    flex: 1;
    font-size: 0.875rem;
    color: #dc2626;
    line-height: 1.5;
}

.rule-card-rel {
    flex: 1;
    font-size: 0.875rem;
    color: #fa9d3b;
    line-height: 1.5;
}

.rule-card-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
    padding: 0.25rem;
    font-size: 0.8125rem;
    color: #07c160;
    cursor: pointer;
    user-select: none;
    border-radius: 0.25rem;
    transition: background .15s;
}

.rule-card-toggle:active {
    background: #e8f8ee;
}

.rule-card-toggle-text {
    font-weight: 500;
}

.rule-card-toggle-arrow {
    font-size: 0.75rem;
    transition: transform .15s;
}


/* ============================================================
   加载 / 错误状态
   ============================================================ */
.rules-loading,
.rules-error {
    text-align: center;
    padding: 1.5rem;
    color: #999;
    font-size: 0.9375rem;
}

.rules-error {
    color: #dc2626;
}


/* ============================================================
   旧弹窗条目样式（保留，兼容旧弹窗 #rulesMask 和规则弹窗的操作说明区块）
   ============================================================ */
.rules-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: #fafafa;
    border-radius: 0.375rem;
}

.rules-item:last-child {
    margin-bottom: 0;
}

.rules-label {
    flex-shrink: 0;
    min-width: 5rem;
    font-size: 0.9375rem;
    color: #666;
    font-weight: 500;
    line-height: 1.5;
    padding-top: 0.125rem;
}

.rules-code {
    flex: 1;
    min-width: 0;
    display: block;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.9375rem;
    color: #07c160;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    line-height: 1.5;
    word-break: break-all;
    white-space: pre-wrap;
    user-select: text;
    -webkit-user-select: text;
}

.rules-item-danger {
    background: #fef2f2;
}

.rules-item-danger .rules-code {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fff;
}

.rules-item-hint {
    background: transparent;
    padding: 0;
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}

.rules-hint {
    font-size: 0.875rem;
    color: #dc2626;
    line-height: 1.5;
    padding-left: 0.25rem;
}

.rules-footer {
    margin-top: 1rem;
    padding: 0.625rem 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    color: #92400e;
    line-height: 1.5;
    text-align: center;
}


/* ============================================================
   🆕 v8.5 指令弹窗
   ============================================================ */
.commands-panel {
    max-width: 92vw;
    width: 92vw;
    max-height: 88vh;
}

.commands-body {
    padding: 0.875rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    /* 取消 popup-body 的 pre-wrap */
    white-space: normal;
    word-break: normal;
}

/* 分组容器 */
.cmd-group {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #e5e5e5;
}

.cmd-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0.5rem;
}

/* 分组标题 */
.cmd-group-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: linear-gradient(90deg, #f0f4ff 0%, #ffffff 100%);
    border-left: 3px solid #2563eb;
    border-radius: 0.25rem;
}

/* 单条指令行 */
.cmd-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.25rem;
    background: #fafafa;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background .15s;
    user-select: none;
}

.cmd-item:active {
    background: #e8f0fe;
}

.cmd-item:last-child {
    margin-bottom: 0;
}

/* 指令代码（等宽字体，可点击） */
.cmd-code {
    flex-shrink: 0;
    min-width: 7rem;
    max-width: 45%;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.875rem;
    color: #07c160;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.25rem;
    padding: 0.2rem 0.5rem;
    line-height: 1.4;
    word-break: break-all;
    text-align: left;
    -webkit-user-select: text;
    user-select: text;
}

/* 指令说明（小字灰色） */
.cmd-desc {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4;
    word-break: break-word;
}

/* 危险指令（清空本期） */
.cmd-item-danger {
    background: #fef2f2;
}

.cmd-item-danger .cmd-code {
    color: #dc2626;
    border-color: #fca5a5;
}

.cmd-item-danger .cmd-desc {
    color: #dc2626;
}

.cmd-item-danger:active {
    background: #fee2e2;
}

/* 底部提示 */
.cmd-footer {
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #92400e;
    line-height: 1.5;
    text-align: center;
}


/* ============================================================
   报表弹窗
   ============================================================ */
.report-panel {
    max-width: 92vw;
    max-height: 88vh;
    width: 92vw;
}

.report-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem;
    background: #f5f5f5;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 8rem;
}

.report-body svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 0.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.report-body .report-loading,
.report-body .report-error {
    color: #666;
    font-size: 1rem;
    padding: 2rem 1rem;
    text-align: center;
}

.report-body .report-error {
    color: #c9302c;
}

.report-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid #e5e5e5;
    background: #fff;
    flex-shrink: 0;
}

.report-btn {
    flex: 1;
    height: 2.75rem;
    border-radius: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.report-btn-primary {
    background: #07c160;
    color: #fff;
}

.report-btn-primary:active {
    background: #06a850;
}

.report-btn-secondary {
    background: #f0f0f0;
    color: #333;
}

.report-btn-secondary:active {
    background: #e0e0e0;
}


/* ============================================================
   新消息提示
   ============================================================ */
.new-msg-btn {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    background: #fff;
    border-radius: 1.25rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.9375rem;
    color: #07c160;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    display: none;
    align-items: center;
    gap: 0.375rem;
    z-index: 50;
}

.new-msg-btn.show {
    display: flex;
}

body.kb-open .new-msg-btn {
    bottom: calc(var(--kb-height, 17rem) + 5.5rem);
}

.new-msg-count {
    font-weight: 600;
    color: #07c160;
}


/* ============================================================
   🆕 v8.6 复制粘贴支持
   ------------------------------------------------------------
   背景：
     全局 * 上有 -webkit-touch-callout: none，
     导致 iOS 上长按输入框 / 消息气泡不弹「拷贝/粘贴」菜单。
     这里对需要复制的元素显式覆盖为 default。

   覆盖范围：
     1. #txtMsg              — 输入框（必须能粘贴）
     2. .msg-text            — 消息气泡文本（方便复制账单号/链接）
     3. .msg-hint            — 机器人提示段
     4. .msg-warning         — 机器人警告段
     5. .empty-hint          — 空状态里的示例
     6. .rules-code          — 使用手册里的示例代码
     7. .rule-card-code      — 玩法卡片里的输入示例
     8. .cmd-code            — 指令弹窗里的指令代码

   说明：
     - 用 !important 是因为要覆盖 * 选择器，避免优先级问题
     - 只开 user-select / touch-callout，不影响点击事件
     - 不影响 .msg-image-svg / .msg-image（图片消息保持不可选）
   ============================================================ */
#txtMsg,
.msg-text,
.msg-hint,
.msg-warning,
.empty-hint,
.rules-code,
.rule-card-code,
.cmd-code {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}


/* ============================================================
   小屏适配（320~360px）
   ============================================================ */
@media (max-width: 360px) {
    html {
        font-size: clamp(15px, 4.2vw, 16px);
    }

    .header-username {
        max-width: 4rem;
        font-size: 0.9375rem;
    }

    .header-period {
        font-size: 0.9375rem;
    }

    .header-period-prefix {
        font-size: 0.9375rem;
    }

    .header-period-text {
        font-size: 0.9375rem;
    }

    .header-back-text {
        font-size: 0.9375rem;
    }

    .header-source {
        height: 2rem;
        padding: 0 0.5rem;
        font-size: 0.9375rem;
    }

    .ball-cell .ball {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.875rem;
    }

    .ball-cell .zodiac {
        font-size: 0.8125rem;
    }

    .balls-row {
        gap: 0.25rem;
    }

    .ball-plus {
        width: 0.75rem;
        font-size: 1rem;
    }

    .vkb-key {
        height: 2.75rem;
        font-size: 1.25rem;
    }

    .report-panel {
        width: 96vw;
        max-width: 96vw;
    }

    .report-btn {
        font-size: 1rem;
        height: 2.5rem;
    }

    .cd-num {
        font-size: 2.25rem;
    }

    .cd-block {
        min-width: 3.25rem;
    }

    .cd-sep {
        font-size: 1.75rem;
    }

    .cd-label {
        font-size: 0.75rem;
    }

    .vkb-action {
        height: 2.75rem;
        font-size: 0.9375rem;
    }

    .msg-hint {
        font-size: 0.875rem;
    }

    .msg-warning {
        font-size: 0.875rem;
        padding: 0.3rem 0.5rem;
    }

    .msg-image {
        max-width: 16rem;
    }

    .msg-image-svg {
        max-width: 16rem;
    }

    .vkb-card-actions .vkb-action {
        height: 2.75rem;
        font-size: 0.9375rem;
    }

    .vkb-card-title {
        font-size: 0.875rem;
    }

    .input-rules-panel {
        width: 96vw;
        max-width: 96vw;
    }

    .rules-label {
        min-width: 4rem;
        font-size: 0.875rem;
    }

    .rules-code {
        font-size: 0.875rem;
        padding: 0.2rem 0.4rem;
    }

    .rules-section-title {
        font-size: 1rem;
    }

    .img-preview-toolbar {
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }

    .img-preview-toolbar button {
        height: 2.75rem;
        font-size: 1rem;
    }

    .img-preview-close-btn {
        flex: 0 0 4rem !important;
    }

    .img-preview-img {
        max-height: calc(100vh - 5rem) !important;
    }

    /* 录入规则弹窗小屏适配 */
    .rules-search-input {
        height: 2.25rem;
        font-size: 0.875rem;
    }

    .rule-card {
        padding: 0.5rem 0.625rem;
    }

    .rule-card-name {
        font-size: 0.9375rem;
    }

    .rule-card-odds {
        font-size: 0.8125rem;
    }

    .rule-card-ma {
        font-size: 0.75rem;
        margin-left: 0.25rem;
    }

    .rule-card-desc,
    .rule-card-hit,
    .rule-card-rel {
        font-size: 0.8125rem;
    }

    .rule-card-code {
        font-size: 0.875rem;
        padding: 0.15rem 0.4rem;
    }

    .rule-card-label {
        min-width: 2rem;
        font-size: 0.75rem;
    }

    .rule-card-toggle {
        font-size: 0.75rem;
    }

    .rules-cat-count {
        font-size: 0.8125rem;
    }

    .vkb-group-title {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem 0.25rem;
    }

    /* 🆕 v8.5 指令弹窗小屏适配 */
    .commands-panel {
        width: 96vw;
        max-width: 96vw;
    }

    .commands-body {
        padding: 0.75rem 0.875rem;
    }

    .cmd-group-title {
        font-size: 0.9375rem;
        padding: 0.3rem 0.4rem;
    }

    .cmd-item {
        padding: 0.4rem 0.5rem;
        gap: 0.5rem;
    }

    .cmd-code {
        min-width: 6rem;
        max-width: 42%;
        font-size: 0.8125rem;
        padding: 0.15rem 0.4rem;
    }

    .cmd-desc {
        font-size: 0.8125rem;
    }

    .cmd-footer {
        font-size: 0.8125rem;
        padding: 0.5rem 0.625rem;
    }
}