/* Fixed favicon (always visible, no scrolling) */
.fixed-favicon {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    z-index: 2000;
    pointer-events: none; /* avoid blocking clicks */
}
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', 'SimHei', Arial, sans-serif;
    background: linear-gradient(to bottom, #E0FFFF 0%, #ADD8E6 100%);
    min-height: 100vh;
    padding: 20px;
    color: #2F4F4F;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
/* header removed */

.logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Carousel Banner */
.carousel-container {
    width: 100%;
    max-width: 1200px;
    margin: 10px auto 20px; /* 去掉顶部大空白 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    position: relative;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: #FFFFFF;
    /* 允许垂直滚动手势，不阻止水平滑动识别 */
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}

.carousel-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E0FFFF 0%, #ADD8E6 100%);
    color: #2F4F4F;
    font-size: 24px;
    font-weight: bold;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-indicator.active {
    background: #FFFFFF;
    border-color: #FFFFFF;
    width: 24px;
    border-radius: 5px;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    color: #2F4F4F;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.carousel-prev {
    left: 15px;
}

.carousel-next {
    right: 15px;
}

/* Navigation */
.lottery-nav {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 20px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Map Banner */
.map-banner-container {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    z-index: 1;
}

.map-banner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Navigation Tabs Overlay */
.nav-tabs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
}

.nav-row {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    flex-wrap: nowrap;
    width: 100%;
    flex: 1;
}

.nav-tab {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: #696969;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0 10px;
    white-space: nowrap;
    transform: translateY(-2px);
}

.nav-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.3);
}

/* 激活标签：白色背景 */
.nav-tab.active {
    background: #FFFFFF;
    color: #2F4F4F;
    font-weight: bold;
    z-index: 10;
    position: relative;
}


/* 隐藏滚动条但保持滚动功能 */
.lottery-nav::-webkit-scrollbar {
    height: 6px;
}

.lottery-nav::-webkit-scrollbar-track {
    background: #F0F0F0;
    border-radius: 3px;
}

.lottery-nav::-webkit-scrollbar-thumb {
    background: #46B7A6;
    border-radius: 3px;
}

.lottery-nav::-webkit-scrollbar-thumb:hover {
    background: #5A9BD4;
}

.lottery-main-content::-webkit-scrollbar {
    height: 6px;
}

.lottery-main-content::-webkit-scrollbar-track {
    background: #F0F0F0;
    border-radius: 3px;
}

.lottery-main-content::-webkit-scrollbar-thumb {
    background: #46B7A6;
    border-radius: 3px;
}

.lottery-main-content::-webkit-scrollbar-thumb:hover {
    background: #5A9BD4;
}

/* Main Container */
.main-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    box-sizing: border-box;
}

/* Video and Calendar Container - Tab Style */
.video-calendar-container:not(.hide-for-jndpcdd) {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 5; /* 提高层级，防止被覆盖 */
    margin-bottom: 16px; /* 与下方表格留出间距 */
}

/* 加拿大PC时完全隐藏容器 */
body.is-jndpcdd .video-calendar-container {
    display: none !important;
}

/* 加拿大PC时隐藏预测组数选择和历史记录 */
body.is-jndpcdd .hide-for-jndpcdd,
.hide-for-jndpcdd {
    display: none !important;
}

body.is-jndpcdd .show-for-jndpcdd {
    display: block !important;
}

/* Tab Buttons */
.video-calendar-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #E6FAF8;
    background: #FFFFFF;
    padding: 0;
    border-radius: 8px 8px 0 0;
}

.vc-tab-btn {
    flex: 1; /* 横向铺满，各占50% */
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #696969;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: -2px;
    text-align: center;
}

.vc-tab-btn:hover {
    background: #F0F0F0;
    color: #2F4F4F;
}

.vc-tab-btn.active {
    background: #46B7A6;
    color: #FFFFFF;
    font-weight: 600;
    border-bottom: 2px solid #46B7A6;
}

/* Content Area */
.vc-content {
    display: none;
    width: 100%;
    position: relative;
    z-index: 5; /* 内容层级提高，避免被覆盖 */
}

.vc-content.active {
    display: flex;
    flex-direction: column;
}

.vc-content.hidden {
    display: none !important;
}


/* Cards */
.video-card,
.calendar-card {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 防止内部内容撑破 */
}

.table-card {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.info-card {
    background: #FFFFFF;
    border: 1px solid #46B7A6;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}


.disclaimer-bar {
    background: #81D8D0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    color: #2F4F4F;
    margin-bottom: 15px;
    text-align: center;
}

/* Main Content Layout - 自适应网格（不限机型） */
.lottery-main-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* 顶部信息区：自适应换行，避免在不同机型上相互遮挡 */
.top-info { display:grid; grid-template-columns: auto 1fr auto; gap:12px; align-items:center; overflow: visible; grid-column: 1 / -1; width: 100%; }
.top-info .lottery-logo-large{ flex:0 0 auto; }
.top-info .lottery-logo-large{ margin-left: -31px; }
.top-info .countdown-wrapper-inline{ justify-self: start; }
.top-info .numbers-inline-display{ justify-self: start; }
.top-info .history-year-group{ justify-self: start; }

/* 当空间不足时，适度缩小字号与内边距，优先保证不重叠 */
@media (max-width: 1100px) {
  .issue-number-new { font-size: 18px; }
  .mipai-btn-img { width: 42px; height: 42px; }
  .lottery-logo-large { width: 88px; height: 88px; }
}

/* 超弹性：当可用空间不足时自动变为单列，所有元素纵向堆叠，绝不重叠 */
@media (max-width: 820px) {
  .top-info { grid-template-columns: 1fr; }
  .top-info .lottery-logo-large{ margin-left: -29px; }
  .tg-robot-btn { position: static; transform: none; right:auto; top:auto; }
  /* 小屏：视频与日历已改为标签页切换，无需修改 */
}

/* Title Group Inline */
.lottery-title-group-inline {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 1;
    min-width: 120px;
}

.lottery-title-inline {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
}

.lottery-subtitle-inline {
    margin: 0;
    font-size: 11px;
    color: #696969;
    white-space: nowrap;
}

.lottery-logo-large {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lottery-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.lottery-title-new {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.lottery-title-new h1 {
    margin: 0;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
}

.title-red {
    color: #FF0000;
}

.title-blue {
    color: #46B7A6;
}

.lottery-subtitle-new {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: #696969;
}

/* Countdown Wrapper Inline */
.countdown-wrapper-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 1;
    min-width: 120px;
}

.countdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.countdown-wrapper-inline + .refresh-btn-inline {
    margin-left: 10px;
    margin-top: 6px; /* 与倒计时更紧凑 */
}

/* 加拿大PC：倒计时与刷新按钮并排显示 */
.countdown-wrapper-inline.pc-inline,
.countdown-wrapper-inline.with-refresh { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 8px; row-gap: 2px; }
.countdown-wrapper-inline.pc-inline .next-issue-label-inline,
.countdown-wrapper-inline.with-refresh .next-issue-label-inline { grid-column: 1 / span 2; }
.countdown-wrapper-inline.pc-inline .countdown-header,
.countdown-wrapper-inline.with-refresh .countdown-header { grid-column: 1 / span 2; }
.refresh-btn-inline.inline { margin: 0; width: 40px; height: 40px; }
/* PC布局时，倒计时与号码区间留出安全间距，避免重叠 */
.countdown-wrapper-inline.pc-inline + .numbers-inline-display,
.countdown-wrapper-inline.with-refresh + .numbers-inline-display { margin-top: 10px !important; }

.next-issue-label-inline {
    font-size: 14px;
    color: #696969;
    font-weight: bold;
    margin-left: 90px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

/* TG Robot Button */
.tg-robot-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: 0;
}

.mipai-btn-img {
    width: 48px;
    height: 48px;
    display: block;
    object-fit: contain;
}

.mipai-btn-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    white-space: nowrap;
}

.tg-robot-btn:hover {
    opacity: 0.9;
}

.issue-label-new {
    font-size: 16px;
    color: #46B7A6;
    display: flex;
    align-items: center;
    gap: 5px;
}

.issue-number-new {
    font-size: 20px;
    font-weight: bold;
    color: #FF6600;
}

.issue-label-inline-short {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px; /* 缩小文案 */
    color: #46B7A6;
    white-space: nowrap;
    width: 100%;
    justify-content: flex-start;
}

/* 顶部信息区内：将“最新: x期”整行内容水平居中显示 */
.top-info .issue-label-inline-short{
    justify-content: center;
    text-align: center;
    margin: 0 auto; /* 完全居中 */
    transform: translateX(-30px); /* 视觉左移30px */
    justify-self: center; /* 位于中间列水平居中 */
    align-self: center;   /* 在该行垂直居中 */
}

.mi-pai-btn-new {
    background: #81D8D0;
    color: #2F4F4F;
    border: 1px solid #46B7A6;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 10px;
}

/* Countdown with Separate Boxes */
.countdown-new-section {
    display: flex;
    align-items: center;
    gap: 3px;
}

.countdown-item {
    background: #46B7A6;
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    align-items: baseline;
    gap: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.countdown-value {
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
}

.countdown-unit {
    font-size: 10px;
    color: #FFFFFF;
    opacity: 0.9;
}

.refresh-btn-inline {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.refresh-btn-inline:hover {
    background: transparent;
    opacity: 0.8;
}

.refresh-icon-img {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform 0.3s ease;
}

.refresh-btn-inline.rotating .refresh-icon-img {
    animation: rotate360 0.6s ease-in-out;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* History Button */
.history-btn {
    background: #46B7A6;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 80px;
}

.history-btn:hover {
    background: #3a9a8d;
    box-shadow: 0 2px 6px rgba(70, 183, 166, 0.3);
}

/* Inline Numbers Display */
.numbers-inline-display {
    display: flex;
    gap: 8px; /* 全局缩小间距 */
    align-items: center;
    flex-shrink: 1;
    min-width: 180px;
    flex-wrap: nowrap; /* 一行展示 */
}

.numbers-front-inline,
.numbers-back-inline {
    display: flex;
    flex-direction: column; /* 标签在上，号码在下 */
    align-items: center;
    gap: 4px;
}

.area-label-inline {
    font-size: 14px;
    color: #40E0D0;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.front-balls,
.back-balls {
    display: flex;
    align-items: center;
    gap: 3px; /* 再缩小球间距，便于一行放下 */
}

.plus-sign-inline {
    font-size: 16px; /* 再缩小加号字号 */
    color: #40E0D0;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 1;
    margin-top: 0; /* 与球居中对齐 */
}

/* History Label and Year Selector Group */
.history-year-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    flex-shrink: 0;
}

.history-label-text {
    font-size: 14px;
    color: #2F4F4F;
    white-space: nowrap;
}

.year-selector-btn {
    background: #E0FFFF;
    border: 1px solid #46B7A6;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: #2F4F4F;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.year-selector-btn:hover {
    background: #81D8D0;
}

.subscribe-btn-inline {
    background: #E0FFFF;
    border: 1px solid #46B7A6;
    border-radius: 8px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.subscribe-btn-inline:hover {
    background: #81D8D0;
}

.play-triangle-icon {
    width: 20px;
    height: 20px;
}

/* Legacy styles - can be removed if not used */
.numbers-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.numbers-front,
.numbers-back {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.area-label {
    font-size: 14px;
    color: #696969;
}

.front-balls,
.back-balls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ball-new {
    width: 24px;  /* 进一步缩小球体尺寸 */
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12px; /* 对应缩小字号 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* 加拿大PC开奖结果缩小 */
body.is-jndpcdd .ball-new {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

body.is-jndpcdd .numbers-inline-display {
    gap: 6px;
}

body.is-jndpcdd .front-balls,
body.is-jndpcdd .back-balls {
    gap: 4px;
}

body.is-jndpcdd .plus-sign-inline {
    font-size: 18px;
    margin-top: 0;
}

.ball-new.red {
    background-image: url('../images/red-ball.png');
}

.ball-new.blue {
    background-image: url('../images/blue-ball.png');
}

/* 新增：加拿大PC 绿球与黑球（使用纯色背景） */
.ball-new.green {
    background-image: url('../images/green-ball.png');
}

.ball-new.black {
    background-image: url('../images/black-ball.png');
}

.plus-sign {
    color: #E0FFFF;
    font-size: 20px;
    font-weight: bold;
    padding: 0 8px;
}

.ball {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid;
}

.ball.red {
    background: #FF0000;
    border-color: #FF0000;
}

.ball.blue {
    background: #46B7A6;
    border-color: #46B7A6;
}

.ball.green {
    background: #90EE90;
    border-color: #90EE90;
}

.ball.black {
    background: #2F4F4F;
    border-color: #2F4F4F;
}

/* Video Card */
.video-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* When video-card is vc-content */
.video-card.vc-content {
    background: #FFFFFF;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-card::after {
    content: "";
    display: none; /* 防止可能的伪元素造成空白 */
}

/* Card Title Bar - 浅青绿色渐变标题栏 */
.card-title-bar {
    height: 50px;
    background: linear-gradient(to bottom, #81D8D0 0%, #E6FAF8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 20px;
    flex-shrink: 0; /* 标题栏不被压缩 */
    position: relative; /* 确保层级正确 */
    z-index: 1; /* 确保在内容之上 */
}

.card-title-text {
    font-size: 18px;
    font-weight: bold;
    color: #2F4F4F;
    margin: 0;
    text-align: center;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio - 这会创建固定的高度 */
    background: #000;
    overflow: hidden;
    margin: 0;
    padding-bottom: 0 !important; /* 确保底部没有额外padding */
    flex-shrink: 0; /* 防止被压缩 */
    flex-grow: 0; /* 不拉伸 */
    line-height: 0; /* 移除inline元素可能的空白 */
    height: 0; /* 配合padding-top，避免额外高度 */
}


.youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block; /* 移除inline元素可能的空白 */
}

/* 兼容管理员后台粘贴的通用嵌入代码（无类名的 iframe） */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

/* WebRTC 订阅视频填满容器 */
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    background: #000;
}

/* Calendar Card */
.calendar-card {
    padding: 0;
    overflow: visible; /* 允许内容外溢可见，避免被裁剪 */
    display: flex;
    flex-direction: column;
}

/* When calendar-card is vc-content */
.calendar-card.vc-content {
    background: #FFFFFF;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.calendar-container {
    padding: 20px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 内容从顶部开始 */
    min-height: auto;
    overflow: visible; /* 不裁剪内容 */
    flex: 0 0 auto; /* 由内容决定高度，不强制收缩 */
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-shrink: 0; /* 不收缩 */
}

.current-month {
    font-size: 16px;
    font-weight: bold;
    color: #2F4F4F;
    min-width: 120px;
    text-align: center;
}

.nav-month-btn,
.nav-year-btn {
    background: #F8F8F8;
    border: 1px solid #D3D3D3;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #2F4F4F;
}

.nav-month-btn:hover,
.nav-year-btn:hover {
    background: #E8E8E8;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 10px;
    flex-shrink: 0; /* 不收缩 */
}

.weekday {
    text-align: center;
    font-size: 14px;
    color: #2F4F4F;
    font-weight: bold;
    padding: 5px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    min-height: 0; /* 允许收缩 */
    flex-shrink: 1; /* 允许收缩 */
    max-height: 100%; /* 限制最大高度 */
    overflow: hidden; /* 隐藏溢出 */
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: default; /* 日期不可点击 */
    font-size: 14px;
    color: #696969;
    min-height: 0; /* 允许收缩 */
    position: relative;
}

.calendar-day.other-month {
    color: #D3D3D3;
}

.calendar-day .day-number {
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.calendar-day.other-month .day-number {
    color: #D3D3D3;
}

.calendar-day.has-draw {
    position: relative;
}

.calendar-day.has-draw .day-number {
    color: #FF0000;
}

.calendar-day.scheduled-draw .day-number {
    color: #FF4500;
    font-weight: bold;
}

.calendar-day.has-draw.scheduled-draw .day-number {
    color: #FF0000;
}

/* Table Card */
.table-card {
    padding: 0;
    overflow: hidden;
    width: 100%;
}

.table-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #D3D3D3;
    padding: 0;
    justify-content: stretch;
}

.table-tab {
    flex: 1 1 0; /* 横向铺满，平均分布 */
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: #696969;
    transition: all 0.3s;
    text-align: center;
    white-space: nowrap;
}

.table-tab:hover {
    color: #2F4F4F;
}

.table-tab.active {
    background: #E0FFFF;
    color: #2F4F4F;
    border-bottom: 2px solid #40E0D0;
    font-weight: bold;
}

.table-content {
    padding: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.table-content.hidden {
    display: none;
}

/* Table */
.draws-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.draws-table thead {
    background: #E0FFFF;
}

.draws-table th {
    padding: 6px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #2F4F4F;
    border-bottom: 2px solid #40E0D0;
}

.draws-table td {
    padding: 6px 4px;
    font-size: 13px;
    color: #2F4F4F;
    border-bottom: 1px solid #F0F0F0;
    text-align: center; /* 内容与表头一致居中 */
}
/* 结果表格：前区/后区列居中显示并收窄左右留白，避免中间大片空白 */
/* 调整各列宽度和左右内边距，缩小前区与后区中间距离 */
.draws-table { table-layout: fixed; }
.draws-table th:nth-child(3), .draws-table td:nth-child(3),
.draws-table th:nth-child(4), .draws-table td:nth-child(4) { padding-left: 4px; padding-right: 4px; }
.draws-table td:nth-child(3) .table-balls { justify-content: center; margin: 0 auto; }
.draws-table td:nth-child(4) .table-balls { justify-content: center; margin: 0 auto; }
/* 列宽占比：期号18% / 时间28% / 前区34% / 后区20% */
.draws-table th:nth-child(1), .draws-table td:nth-child(1) { width: 16%; }
.draws-table th:nth-child(2), .draws-table td:nth-child(2) { width: 26%; }
.draws-table th:nth-child(3), .draws-table td:nth-child(3) { width: 38%; }
.draws-table th:nth-child(4), .draws-table td:nth-child(4) { width: 20%; }

.draws-table tbody tr:hover {
    background: #F8F8F8;
}

/* 隔行背景色，提升开奖结果可读性 */
.draws-table tbody tr.alt {
    background-color: rgba(0, 173, 181, 0.08);
}

.table-balls {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
}
/* PC28 结果一行显示 */
.table-balls.nowrap { flex-wrap: nowrap !important; }
/* PC28 单行时进一步缩小球与间距，确保一行容纳 */
.table-balls.nowrap { gap: 2px; }
.table-balls.nowrap .table-ball { width: 22px; height: 22px; line-height: 22px; font-size: 10px; }

/* 当号码较多时自动分成两行显示 */
.table-balls.split-2 { display: grid; grid-auto-flow: row; grid-template-columns: repeat(6, auto); justify-content: center; align-items: center; column-gap: 2px; row-gap: 2px; }
@media (max-width: 375px) {
    .table-balls.split-2 { grid-template-columns: repeat(5, auto); }
}
.draws-table td { vertical-align: middle; }

/* 紧凑模式：当空间不足时自动缩小球与间距，避免横向滚动 */
.table-balls.compact { gap: 4px; }
.table-balls.compact .table-ball { width: 28px; height: 28px; line-height: 28px; font-size: 12px; }
.draws-table tr.compact td { padding: 6px 6px; }
@media (max-width: 375px) {
    .table-balls.compact .table-ball { width: 26px; height: 26px; line-height: 26px; font-size: 11px; }
}

/* 大乐透：前区两行显示（3 + 2） */
.balls-two-rows { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.balls-two-rows .balls-row { display: flex; gap: 4px; justify-content: center; }

/* 将表格在移动端压到无横向滚动 */
body .draws-table { min-width: 100% !important; table-layout: fixed; }
/* 列内号码球整体再缩小 */
.draws-table .table-ball { width: 26px; height: 26px; line-height: 26px; font-size: 11px; }
@media (max-width: 420px) {
  .draws-table th { font-size: 12px; }
  .draws-table td { font-size: 12px; }
  .draws-table .table-ball { width: 24px; height: 24px; line-height: 24px; font-size: 10px; }
}

/* 开奖时间两行显示并自适应缩放 */
.opentime-2l { display:flex; flex-direction:column; line-height:1.1; align-items:flex-start; }
.opentime-2l .date { font-size: clamp(12px, 3.2vw, 14px); color:#334155; }
.opentime-2l .time { font-size: clamp(12px, 3.2vw, 14px); color:#64748b; }

/* 六合彩新样式 */
.hk6-result-row {
    padding: 0 !important;
    border: none !important;
}

/* 六合彩表格行可以突破宽度限制 */
.draws-table tr .hk6-result-row {
    width: 100% !important;
}

.hk6-result-wrapper {
    border: 2px solid #90EE90;
    border-radius: 8px;
    padding: 15px;
    margin: 8px;
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
}

.hk6-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.hk6-issue {
    font-size: 16px;
    font-weight: bold;
    color: #2F4F4F;
}

.hk6-date {
    font-size: 16px;
    font-weight: bold;
    color: #2F4F4F;
}

.hk6-numbers-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
}

.hk6-ball-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.hk6-ball {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.hk6-labels {
    font-size: 11px;
    color: #2F4F4F;
    text-align: center;
}

.hk6-plus {
    font-size: 20px;
    font-weight: bold;
    color: #2F4F4F;
    align-self: flex-start;
    margin-top: 8px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .hk6-issue, .hk6-date {
        font-size: 14px;
    }
    
    .hk6-numbers-container {
        gap: 5px;
    }
    
    .hk6-ball {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 12px !important;
    }
    
    .hk6-labels {
        font-size: 9px;
    }
    
    .hk6-plus {
        font-size: 16px;
    }
}

/* ========= 趋势/统计图表（号码分布） ========= */
.trend-chart-container { overflow-x: auto; }
.trend-chart-table { border-collapse: collapse; width: max(1200px, 100%); table-layout: fixed; }
.trend-chart-table thead th { background: #fff; position: sticky; top: 0; z-index: 2; font-weight: 600; font-size: 12px; color: #374151; }
.trend-chart-table th, .trend-chart-table td { border: 1px solid #eee; text-align: center; padding: 4px; font-size: 12px; color: #374151; height: 24px; }
.trend-fixed-col { position: sticky; left: 0; background: #f9fafb; z-index: 1; min-width: 110px; }
.trend-fixed-col-issue { position: sticky; left: 110px; background: #f9fafb; z-index: 1; min-width: 80px; }
.trend-front-head { background: #ffefe9; color: #d14b3f; }
.trend-back-head { background: #eaf2ff; color: #2563eb; }
.trend-front-zone-1 { background: #fff2ec; }
.trend-front-zone-2 { background: #ffe7de; }
.trend-front-zone-3 { background: #ffddd3; }
.trend-back-zone-1 { background: #edf4ff; }
.trend-back-zone-2 { background: #e3ecff; }
.trend-num-col { width: 28px; }
.trend-row-alt td { background: #f9f9f9; }
.trend-hit { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.trend-hit.front { background: linear-gradient(180deg, #ff6b6b, #e53935); border: 1px solid rgba(200,0,0,0.25); }
.trend-hit.back { background: linear-gradient(180deg, #63a3ff, #2f6bff); border: 1px solid rgba(30,80,200,0.25); }
.trend-hit.hk6-analysis { background: linear-gradient(180deg, #4CAF50, #2E7D32); border: 1px solid rgba(0,100,0,0.25); min-width: auto; width: auto; padding: 2px 6px; border-radius: 4px; font-size: 11px; }
.trend-hk6-type-header { background: #E8F5E9; color: #2E7D32; font-weight: bold; text-align: center; padding: 8px 4px; font-size: 12px; border: 1px solid #C8E6C9; }
.trend-hk6-item-header { background: #F1F8E9; color: #558B2F; text-align: center; padding: 6px 3px; font-size: 11px; border: 1px solid #DCEDC8; min-width: 45px; }

/* 六合彩分类按钮 */
.hk6-category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 12px;
}
.hk6-category-btn {
    padding: 8px 16px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.3s;
    white-space: nowrap;
}
.hk6-category-btn:hover {
    background: #e8e8e8;
    border-color: #bbb;
}
.hk6-category-btn.active {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
    font-weight: bold;
}

/* 加拿大PC 走势：更紧凑 */
.pc28-compact .trend-chart-table th,
.pc28-compact .trend-chart-table td { padding: 0 1px; height: 14px; font-size: 9px; line-height: 1; }
.pc28-compact .trend-chart-table th { padding: 0 1px; height: 14px; font-size: 9px; line-height: 1; }
.pc28-compact .trend-chart-table thead th { font-size: 11px; }
.pc28-compact .trend-hit { width: 10px; height: 10px; font-size: 7px; }
.pc28-compact .trend-badge { width: auto !important; min-width: 24px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10px; white-space: nowrap; }
/* 进一步压缩容器的上下边距 */
.pc28-compact .trend-chart-container { margin: 2px 0; }
.pc28-compact .table-tabs { margin-bottom: 4px; }
/* 边框更细，降低视觉占用 */
.pc28-compact .trend-chart-table th,
.pc28-compact .trend-chart-table td { border-width: 0.5px; }
/* PC28走势：移除底部期数与翻页区域 */
.pc28-compact .statistics-pagination { display: none !important; }
.pc28-compact .pagination { display: none !important; }
/* 宽度缩小：去掉最小宽度并压窄各列 */
.pc28-compact .trend-chart-table { width: 100% !important; }
.pc28-compact .trend-chart-table td:nth-child(n+3) { width: 20px; min-width: 20px; max-width: 20px; }
.pc28-compact .trend-number-cell,
.pc28-compact .trend-number-ball,
.pc28-compact .trend-number-ball.table-ball { width: 18px; height: 18px; min-width: 18px; min-height: 18px; line-height: 18px; font-size: 9px; }
.pc28-compact .trend-number-cell.omission { min-height: 18px; font-size: 9px; }
/* 左两列更窄并调整粘性偏移 */
.pc28-compact .trend-chart-table th:first-child,
.pc28-compact .trend-chart-table td:first-child { min-width: 70px; }
.pc28-compact .trend-chart-table th:nth-child(2),
.pc28-compact .trend-chart-table td:nth-child(2) { min-width: 70px; left: 70px; }

/* PC28 自定义非表格趋势列表 */
.pc28-trend-list { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.pc28-trend-row { display: grid; grid-template-columns: 60px 32px 1fr; align-items: center; gap: 4px; padding: 1px 2px; border-bottom: 1px solid #eee; }
.pc28-trend-row.alt { background: #fafafa; }
.pc28-issue { font-weight: 600; color: #374151; text-align: center; font-size: 12px; }
.pc28-value { font-weight: 600; color: #111827; text-align: center; font-size: 12px; }
.pc28-badges { display: grid; grid-template-columns: repeat(8, minmax(24px, auto)); gap: 4px; justify-items: center; align-items: center; }
.pc28-trend-list .trend-badge { transform: scale(0.85); }
.pc28-empty { display:inline-block; width: 28px; height: 20px; }
/* 表头 */
.pc28-trend-head { display:grid; grid-template-columns: 60px 32px 1fr; gap:4px; align-items:center; padding:2px 2px; background:#f1f5f9; color:#374151; font-weight:600; position: sticky; top: 0; z-index: 5; font-size: 12px; }
.pc28-head-cols { display:grid; grid-template-columns: repeat(8, minmax(24px, auto)); gap:4px; text-align:center; font-size: 12px; }

/* 隐藏走势/统计下方不需要的工具条与按钮，但保留期数选择和翻页 */
#statisticsContent .annotation-form,
#statisticsContent .statistics-footer { display: none !important; }

/* 在走势/统计视图下，隐藏卡片底部的全局分页 */
body.analysis-active .pagination { display: none !important; }

/* 加拿大PC 趋势徽标样式 */
.trend-badge { display:inline-flex; min-width:20px; height:20px; padding:0 8px; border-radius:999px; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:12px; box-shadow:0 1px 2px rgba(0,0,0,0.15); }
.trend-badge.red { background: linear-gradient(180deg,#ff6b6b,#e53935); border:1px solid rgba(200,0,0,0.25); }
.trend-badge.green { background: linear-gradient(180deg,#34d399,#10b981); border:1px solid rgba(0,120,60,0.25); }
.trend-cell-center { text-align:center; }

/* 预测占位提示样式 */
.predict-unavailable {
    padding: 60px 20px;
    text-align: center;
    font-size: 18px;
    color: #666;
}

.table-ball {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.table-ball.red {
    background-image: url('../images/red-ball.png');
    border-color: #FF0000;
}

.table-ball.blue {
    background-image: url('../images/blue-ball.png');
    border-color: #46B7A6;
}

.table-ball.green {
    background-image: url('../images/green-ball.png');
    border-color: #2ecc71;
}

.table-ball.black {
    background-image: url('../images/black-ball.png');
    border-color: #333333;
}

/* 取消号码球外侧描边，让视觉更干净 */
.table-ball { border: 0 !important; box-shadow: none; }

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid #F0F0F0;
}

.pagination-info {
    font-size: 14px;
    color: #696969;
}

.pagination-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}

.page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    background: #F8F8F8;
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #696969;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover:not(.active) {
    background: #E8E8E8;
}

.page-btn.active {
    background: #E0FFFF;
    color: #2F4F4F;
    border: 1px solid #2F4F4F;
    font-weight: bold;
}

.page-ellipsis {
    padding: 0 5px;
    color: #696969;
}

.pagination-goto {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #696969;
}

.page-input {
    width: 50px;
    padding: 4px 8px;
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}

.page-input:focus {
    outline: none;
    border-color: #40E0D0;
}

/* 加拿大PC 专用：隐藏视频与日期区块 - 使用最高优先级 */
body.is-jndpcdd .video-calendar-container,
body.is-jndpcdd .video-calendar-tabs,
body.is-jndpcdd .video-card,
body.is-jndpcdd .calendar-card,
body.is-jndpcdd .video-container,
body.is-jndpcdd .calendar-container,
.video-calendar-container[data-lottery="jndpcdd"],
.nav-tab[data-lottery="jndpcdd"] ~ * .video-calendar-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    z-index: -9999 !important;
}

/* 备用规则：直接通过类名隐藏 */
.video-calendar-container.hide-for-jndpcdd {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 当加拿大PC标签激活时，强制隐藏视频日历容器 */
.nav-tab[data-lottery="jndpcdd"].active ~ * .video-calendar-container,
body:has(.nav-tab[data-lottery="jndpcdd"].active) .video-calendar-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Placeholders */
.statistics-placeholder,
.rules-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: #696969;
    font-size: 16px;
}

/* Prediction Container */
.prediction-container {
    padding: 30px 20px;
    max-width: 800px;
    margin: 0 auto;
}

.prediction-header {
    text-align: center;
    margin-bottom: 30px;
}

.prediction-title {
    font-size: 24px;
    font-weight: bold;
    color: #2F4F4F;
    margin: 0 0 10px 0;
}

.prediction-desc {
    font-size: 14px;
    color: #696969;
    margin: 0;
}

.prediction-settings-section {
    margin-top: 20px;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.prediction-group-selector {
    display: flex;
    align-items: center;
    gap: 15px;
}

.prediction-label {
    font-size: 14px;
    color: #2F4F4F;
    font-weight: 500;
}

.prediction-group-buttons {
    display: flex;
    gap: 8px;
}

.prediction-group-btn {
    padding: 8px 20px;
    background: #F0F0F0;
    border: 1px solid #D3D3D3;
    border-radius: 6px;
    font-size: 14px;
    color: #2F4F4F;
    cursor: pointer;
    transition: all 0.3s;
}

.prediction-group-btn:hover {
    background: #E0E0E0;
}

.prediction-group-btn.active {
    background: #46B7A6;
    color: #FFFFFF;
    border-color: #46B7A6;
    font-weight: bold;
}

.prediction-start-btn {
    padding: 10px 30px;
    background: #46B7A6;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prediction-start-btn:hover {
    background: #3A9B8A;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(70, 183, 166, 0.3);
}

.prediction-start-btn:active {
    transform: translateY(0);
}

.prediction-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.prediction-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.prediction-empty .empty-text {
    font-size: 14px;
}

.prediction-groups-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.prediction-group-item {
    padding: 20px;
    background: #F8F8F8;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
}

.prediction-group-number {
    font-size: 14px;
    font-weight: bold;
    color: #46B7A6;
    margin-bottom: 12px;
}

.prediction-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.predict-btn {
    background: linear-gradient(135deg, #46B7A6 0%, #81D8D0 100%);
    color: #FFFFFF;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(70, 183, 166, 0.3);
}

.predict-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(70, 183, 166, 0.4);
}

.predict-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.predict-btn-icon {
    font-size: 18px;
}

.history-limit-select {
    padding: 10px 15px;
    border: 1px solid #D3D3D3;
    border-radius: 8px;
    font-size: 14px;
    color: #2F4F4F;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.history-limit-select:hover {
    border-color: #46B7A6;
}

.prediction-result {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prediction-placeholder {
    text-align: center;
    color: #696969;
}

.placeholder-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.placeholder-text {
    font-size: 16px;
    line-height: 1.6;
}

.prediction-loading {
    text-align: center;
    padding: 40px 20px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #E6FAF8;
    border-top-color: #46B7A6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    font-size: 16px;
    color: #696969;
}

.prediction-success {
    width: 100%;
    max-width: 100%;
    background: #F8F9FA;
    border-radius: 12px;
    padding: 20px 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* PC28 预测表格样式 */
.pc28-table-container {
    width: 100%;
    overflow: visible;
    margin-bottom: 20px;
}

.pc28-pred-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    table-layout: fixed;
    font-size: 14px;
    min-width: 100%;
}

.pc28-pred-table thead th {
    background: #E6FAF8;
    color: #2F4F4F;
    font-weight: 600;
    padding: 10px 6px;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
}

.pc28-pred-table tbody td {
    padding: 10px 6px;
    border-top: 1px solid #F0F0F0;
    color: #2F4F4F;
    text-align: center;
    font-size: 13px;
    vertical-align: middle;
}

.pc28-pred-table tbody tr:nth-child(even) {
    background: #F9FCFD;
}

.pc28-pred-table tbody tr:nth-child(odd) {
    background: #FFFFFF;
}

.pc28-pred-table tbody tr:hover {
    background: #F0F8F7;
}

/* 调整列宽分配，确保完整显示 */
.pc28-pred-table th:nth-child(1),
.pc28-pred-table td:nth-child(1) {
    width: 20%;
    min-width: 75px;
}

.pc28-pred-table th:nth-child(2),
.pc28-pred-table td:nth-child(2) {
    width: 16%;
    min-width: 60px;
}

.pc28-pred-table th:nth-child(3),
.pc28-pred-table td:nth-child(3) {
    width: 44%;
    min-width: 140px;
}

.pc28-pred-table th:nth-child(4),
.pc28-pred-table td:nth-child(4) {
    width: 20%;
    min-width: 65px;
}

.prediction-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 2px 0;
}

.pc28-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    margin: 0 2px;
    white-space: nowrap;
}

.pc28-chip.green {
    background: #2ecc71;
}

.pc28-chip.blue {
    background: #3498db;
}

.pc28-chip.red {
    background: #e74c3c;
}

.pc28-ok {
    color: #2ecc71;
    font-weight: 900;
    font-size: 16px;
}

.pc28-bad {
    color: #e74c3c;
    font-weight: 900;
    font-size: 16px;
}

/* AI学习分析样式 */
.prediction-analysis {
    margin-top: 20px;
    padding: 15px;
    background: #F8F9FA;
    border-radius: 8px;
    border-left: 4px solid #46B7A6;
}

.analysis-title {
    font-size: 14px;
    font-weight: 600;
    color: #2F4F4F;
    margin-bottom: 10px;
}

.analysis-item {
    font-size: 13px;
    color: #696969;
    line-height: 1.6;
    margin-bottom: 6px;
    padding-left: 8px;
}

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

.prediction-result-header {
    text-align: center;
    margin-bottom: 25px;
}

.result-lottery-name {
    font-size: 20px;
    font-weight: bold;
    color: #46B7A6;
    margin-bottom: 8px;
}

.result-label {
    font-size: 14px;
    color: #696969;
}

.prediction-numbers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.prediction-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.prediction-area-label {
    font-size: 14px;
    color: #696969;
    font-weight: 500;
}

.prediction-balls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.prediction-ball {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.prediction-ball.red {
    background-image: url('../images/red-ball.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.prediction-ball.blue {
    background-image: url('../images/blue-ball.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.prediction-plus {
    font-size: 24px;
    color: #46B7A6;
    font-weight: bold;
}

.prediction-text {
    font-size: 18px;
    color: #2F4F4F;
    text-align: center;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
}

.prediction-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #E6E6E6;
}

.prediction-note {
    font-size: 13px;
    color: #696969;
    margin-bottom: 10px;
    line-height: 1.6;
}

.prediction-timestamp {
    font-size: 12px;
    color: #999999;
}

.prediction-error {
    text-align: center;
    padding: 40px 20px;
    color: #FF6B6B;
}

.error-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.error-text {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.error-tip {
    font-size: 14px;
    color: #696969;
}

/* 预测历史记录样式 */
.prediction-current-section,
.prediction-history-section {
    margin-bottom: 30px;
}

.section-label {
    font-size: 16px;
    font-weight: 600;
    color: #2F4F4F;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #E6FAF8;
}

.prediction-history-list {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

.prediction-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: #696969;
    font-size: 14px;
}

.prediction-history-item {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.prediction-history-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #46B7A6;
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F0F0F0;
}

.history-issue {
    font-size: 14px;
    font-weight: 600;
    color: #46B7A6;
}

.history-time {
    font-size: 12px;
    color: #999999;
}

.history-prediction-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.history-prediction-numbers .prediction-group {
    margin: 0;
}

.history-prediction-numbers .prediction-balls {
    gap: 6px;
}

.history-prediction-numbers .prediction-ball {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

/* 开奖统计/走势样式 */
.statistics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #F8F8F8;
    border-bottom: 1px solid #E0E0E0;
    flex-wrap: wrap;
    gap: 10px;
}

.statistics-tools {
    display: flex;
    gap: 8px;
}

.tool-btn, .control-btn {
    padding: 6px 12px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #2F4F4F;
    transition: all 0.3s;
}

.tool-btn:hover, .control-btn:hover {
    background: #E0F7FF;
    border-color: #46B7A6;
}

.confirm-btn {
    background: #46B7A6;
    color: #FFFFFF;
    border-color: #46B7A6;
}

.confirm-btn:hover {
    background: #2F4F4F;
}

.statistics-title {
    font-size: 18px;
    font-weight: bold;
    color: #2F4F4F;
    flex: 1;
    text-align: center;
}

.statistics-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.issue-input {
    padding: 5px 10px;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    width: 100px;
    font-size: 13px;
}

.annotation-form {
    display: flex;
    gap: 15px;
    padding: 12px 20px;
    background: #FFFFFF;
    border-bottom: 1px solid #E0E0E0;
    flex-wrap: wrap;
}

.annotation-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #2F4F4F;
    cursor: pointer;
}

.annotation-checkbox input[type="checkbox"] {
    cursor: pointer;
}

.trend-chart-container {
    overflow-x: auto;
    overflow-y: visible;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    margin: 15px 0;
    width: 100%;
    max-width: 100%;
    display: block;
    position: relative;
}

.trend-chart-wrapper {
    min-width: 100%;
    width: max-content;
    display: block;
}

.trend-chart-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    display: table;
    table-layout: fixed;
}

.trend-chart-table th {
    background: #E0FFFF;
    padding: 8px 4px;
    text-align: center;
    border: 1px solid #D0D0D0;
    font-weight: bold;
    color: #2F4F4F;
    white-space: nowrap;
    position: relative;
}

.trend-chart-table th:first-child,
.trend-chart-table th:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #E0FFFF;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.trend-chart-table th:nth-child(2) {
    left: 110px;
}

.trend-chart-table td {
    padding: 4px 2px;
    text-align: center;
    border: 1px solid #F0F0F0;
    position: relative;
    white-space: nowrap;
}

.trend-chart-table td:nth-child(n+3) {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
}

.trend-chart-table td:first-child,
.trend-chart-table td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #FFFFFF;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.trend-chart-table td:nth-child(2) {
    left: 110px;
}

.trend-chart-table tbody tr:hover td:first-child,
.trend-chart-table tbody tr:hover td:nth-child(2) {
    background: #F8F8F8;
}

.trend-chart-table tbody tr:hover {
    background: #F8F8F8;
}

.trend-number-cell {
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 2px auto;
    border-radius: 50%;
    font-weight: bold;
    font-size: 11px;
    position: relative;
    display: inline-block;
}

.trend-number-ball {
    width: 28px;
    height: 28px;
    margin: 2px auto;
    font-size: 11px;
}

.trend-number-ball.table-ball {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}

.trend-number-cell.omission {
    color: #999999;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

.trend-chart-table td.trend-number-cell {
    padding: 2px;
}

.trend-date-cell, .trend-issue-cell {
    white-space: nowrap;
    font-weight: bold;
    background: #FFFFFF;
}

.trend-chart-table th:first-child,
.trend-chart-table th:nth-child(2) {
    min-width: 100px;
}

.statistics-footer {
    padding: 15px 20px;
    background: #F8F8F8;
    border-top: 1px solid #E0E0E0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.stat-countdown {
    font-size: 14px;
    color: #2F4F4F;
    font-weight: bold;
}

.stat-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-btn {
    padding: 6px 14px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #2F4F4F;
    transition: all 0.3s;
}

.action-btn:hover {
    background: #E0F7FF;
    border-color: #46B7A6;
}

.statistics-charts {
    margin: 20px 0;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

.charts-header {
    margin-bottom: 10px;
}

.chart-title {
    font-size: 16px;
    font-weight: bold;
    color: #2F4F4F;
}

.charts-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
}

.chart-row-wrapper {
    display: block;
    width: 100%;
}

.chart-row {
    display: flex;
    border-bottom: 1px solid #F0F0F0;
    width: 100%;
}

.chart-header-row {
    background: #E0FFFF;
    font-weight: bold;
}

.chart-cell {
    padding: 6px 4px;
    text-align: center;
    font-size: 11px;
    color: #2F4F4F;
    border-right: 1px solid #F0F0F0;
    position: relative;
    flex-shrink: 0;
}

.chart-cell.chart-number {
    width: 50px;
    font-weight: bold;
}

.chart-cell.chart-row-label {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    font-weight: bold;
    background: #F0F0F0;
    text-align: left;
    padding-left: 8px;
    padding-right: 4px;
    position: sticky;
    left: 0;
    z-index: 5;
    flex-shrink: 0;
    font-size: 11px;
}

.chart-cell.chart-zone-label {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    font-weight: bold;
    background: #E0E0E0;
    text-align: center;
    padding: 4px 2px;
    flex-shrink: 0;
    font-size: 11px;
}

.chart-cell.chart-header-cell {
    background: #F8F8F8;
    font-weight: bold;
    font-size: 9px;
    padding: 3px 1px;
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    flex-shrink: 0;
}

.chart-cell.chart-zone-divider {
    width: 2px;
    min-width: 2px;
    max-width: 2px;
    background: #D0D0D0;
    padding: 0;
    border: none;
    flex-shrink: 0;
}

.chart-cell.chart-number-cell {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    padding: 2px 1px;
    position: relative;
    font-size: 10px;
    flex-shrink: 0;
}

.chart-value {
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: 9px;
    color: #2F4F4F;
    font-weight: bold;
    white-space: nowrap;
}

.chart-cell:nth-child(2) { width: 100px; }
.chart-cell:nth-child(3) { width: 100px; }
.chart-cell:nth-child(4) { width: 100px; }
.chart-cell:nth-child(5) { width: 100px; }
.chart-cell:nth-child(6) { width: 100px; }
.chart-cell:nth-child(7) { width: 120px; }

.chart-bar {
    height: 16px;
    background: #46B7A6;
    border-radius: 2px;
    margin-top: 14px;
    transition: width 0.3s;
    min-width: 1px;
    display: block;
    position: relative;
}

.statistics-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #F8F8F8;
    border-top: 1px solid #E0E0E0;
    flex-wrap: wrap;
    gap: 15px;
}

.period-selector {
    display: flex;
    gap: 8px;
}

.period-btn {
    padding: 6px 14px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #2F4F4F;
    transition: all 0.3s;
}

.period-btn:hover, .period-btn.active {
    background: #46B7A6;
    color: #FFFFFF;
    border-color: #46B7A6;
}

.stat-pagination-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}

.stat-page-btn {
    padding: 4px 10px;
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #2F4F4F;
    transition: all 0.3s;
}

.stat-page-btn:hover, .stat-page-btn.active {
    background: #46B7A6;
    color: #FFFFFF;
    border-color: #46B7A6;
}

.stat-page-info {
    font-size: 13px;
    color: #696969;
    margin: 0 5px;
}

.stat-page-input {
    width: 50px;
    padding: 4px;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    margin: 0 5px;
}

/* 刮刮乐模态框样式 */
.scratch-card-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

.scratch-card-modal.hidden {
    display: none;
}

.scratch-card-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scratch-card-content-wrapper {
    width: 100%;
    margin-bottom: 20px;
}

.scratch-card-bg {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff4757 50%, #ff3838 100%);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    /* 波浪边框效果 */
    border: 8px solid #FFFFFF;
    padding: 0;
    box-sizing: border-box;
}

.scratch-card-bg::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.8) 10px,
            rgba(255, 255, 255, 0.8) 20px
        );
    border-radius: 15px;
    z-index: -1;
    pointer-events: none;
}

/* 顶部标题区域 */
.scratch-card-header-area {
    position: relative;
    padding: 30px 20px 25px;
    background: linear-gradient(135deg, #ff6b9d 0%, #ff4757 50%, #ff3838 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.golden-ribbon-bg {
    position: absolute;
    top: 50%;
    left: -30px;
    right: -30px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    transform: translateY(-50%) rotate(-2deg);
    z-index: 1;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.4);
}

.scratch-card-title {
    position: relative;
    z-index: 2;
    font-size: 36px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.issue-info {
    position: relative;
    z-index: 2;
    font-size: 14px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 15px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
}

/* 中间刮开区域 */
.scratch-card-scratch-zone {
    position: relative;
    min-height: 200px;
    background: #4A4A4A;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin: 15px;
    border-radius: 8px;
}

/* 底部信息区域 */
.scratch-card-footer-area {
    position: relative;
    background: rgba(255, 182, 193, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    box-sizing: border-box;
    border-radius: 8px;
    margin: 0 15px 15px;
}

.countdown-info {
    font-size: 13px;
    color: #FF8C00;
    font-weight: 500;
}

.refresh-btn-small {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 15px;
    padding: 6px 15px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
}

.refresh-btn-small:hover {
    background: #FFFFFF;
    transform: scale(1.05);
}

/* 底部关闭按钮 */
.scratch-close-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    margin-top: 10px;
}

.scratch-close-btn span {
    font-size: 28px;
    color: #333;
    font-weight: bold;
    line-height: 1;
}

.scratch-close-btn:hover {
    background: #F0F0F0;
    transform: scale(1.1);
}

.lottery-numbers-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 100%;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    /* 号码一开始就存在，但被canvas遮罩层（z-index: 10）完全覆盖，只有刮开后才能看到 */
    visibility: hidden; /* 初始状态下完全隐藏，当刮开一定比例后再显示 */
    box-sizing: border-box;
}

#scratchCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="none" stroke="%23FFD700" stroke-width="2"/><circle cx="20" cy="20" r="15" fill="rgba(255,215,0,0.2)"/></svg>') 20 20, crosshair;
    touch-action: none;
    z-index: 10;
    /* 确保canvas在最上层，完全遮挡号码 */
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
}

.lottery-numbers-display {
    text-align: center;
    background: transparent;
    padding: 0;
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.lottery-numbers-display .lottery-numbers-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 15px;
    border-radius: 12px;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 2px solid #FFD700;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.scratch-numbers-title {
    font-size: 18px;
    font-weight: bold;
    color: #2F4F4F;
    margin-bottom: 15px;
    white-space: nowrap;
    overflow: visible;
}

.scratch-numbers-front,
.scratch-numbers-back {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.scratch-numbers-back {
    margin-bottom: 0;
}

.scratch-area-label {
    font-size: 14px;
    font-weight: bold;
    color: #2F4F4F;
    min-width: 40px;
    flex-shrink: 0;
    white-space: nowrap;
}

.scratch-balls {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.scratch-ball {
    width: 36px;
    height: 36px;
    font-size: 16px;
    flex-shrink: 0;
}

.scratch-card-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #E0E0E0;
}

.scratch-card-actions .action-btn {
    padding: 10px 20px;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main-container {
        grid-template-columns: 1fr;
    }
    
    .nav-row {
        flex-wrap: wrap;
    }
    
    .nav-tab {
        width: calc(50% - 1px);
    }
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .header {
        top: 10px;
        left: 10px;
    }
    
    .lottery-nav {
        padding-top: 60px;
    }
    
    .nav-tab {
        width: 100%;
        font-size: 12px;
    }
    
    .draw-number-section {
        flex-direction: column;
    }
    
    .pagination {
        flex-direction: column;
        gap: 15px;
    }
}

/* 加拿大PC统计界面样式 */
.jndpcdd-stats-container {
    display: flex;
    gap: 10px;
    width: 100%;
    margin: 10px 0;
}

.jndpcdd-stats-table-wrapper {
    flex: 1;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
}

.jndpcdd-stats-table-title {
    padding: 8px 10px;
    background: #e8e8e8;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.jndpcdd-stats-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.jndpcdd-stats-table thead {
    background: #f9f9f9;
}

.jndpcdd-stats-table th {
    padding: 6px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

.jndpcdd-stats-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

.jndpcdd-stats-table tbody tr.trend-row-alt {
    background: #fafafa;
}

.jndpcdd-stats-table td {
    padding: 6px 8px;
    font-size: 12px;
    color: #333;
    text-align: center;
}

.jndpcdd-stat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: linear-gradient(180deg, #5ba3f5, #3a8ee6);
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(58, 142, 230, 0.3);
    min-width: 28px;
}

/* ===== Mobile 优化（≤ 768px）===== */
@media (max-width: 768px) {
    html, body { width: 100%; overflow-x: hidden; }

    /* 顶部轮播：按比例自适应，避免被裁切 */
    .carousel-container,
    .carousel-wrapper { width: 100%; aspect-ratio: 16/9; height: auto !important; }
    .carousel-slide,
    .carousel-slide img { width: 100%; height: 100%; object-fit: cover; }

    /* 导航条可以横向滑动，标签不被挤压 */
    .lottery-nav,
    .nav-tabs,
    .table-tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .nav-tab,
    .table-tab { flex: 0 0 auto; padding: 8px 12px; font-size: 14px; }

    /* 彩种导航还原为两行显示（覆盖上面的横向滑动） */
    .lottery-nav { overflow-x: visible; white-space: normal; }
    .lottery-nav .nav-tabs-overlay { width: 100%; }
    .lottery-nav .nav-row { display: flex; justify-content: space-between; gap: 6px; flex-wrap: nowrap; }
    .lottery-nav .nav-tab { flex: 1 1 0; padding: 8px 8px; font-size: 14px; }

    /* 顶部号码区与倒计时（移动优化） */
    .numbers-inline-display { gap: 6px; flex-wrap: nowrap; justify-content: center; margin-top: 6px; }
    .ball-new,
    .table-ball { width: 36px; height: 36px; line-height: 36px; font-size: 15px; box-shadow: 0 2px 0 #00000012; }
    .plus-sign-inline { color: #aab8c7; font-weight: 600; }
    .countdown-new-section { gap: 6px; }
    .countdown-item .countdown-value { font-size: 22px; font-weight: 800; color: #0e2b2b; display:flex; align-items:center; justify-content:center; height:100%; letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(255,255,255,.6); }

    /* 顶部两列网格：左LOGO 96px，右内容自适应 */
    .lottery-main-content { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; }
    .top-info { position:relative; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:12px; padding:10px; background:#E6FAF8; border:1px solid #dfe7e7; border-radius:12px; box-shadow:0 6px 18px #0b3c3c0f; }
    /* 禁止在顶部信息区内横向滑动，避免触发上方轮播/滑动手势 */
    .top-info, .countdown-wrapper-inline { touch-action: pan-y; overscroll-behavior-x: contain; }
    .top-info { z-index: 2; }
    .top-info .tg-robot-btn{ position: static; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:auto; box-shadow:0 6px 18px #0b3c3c1a; }
    .lottery-logo-img { width: 78px; height: 78px; object-fit: contain; margin-left: 45px; }
    .lottery-logo-img { width: 78px; height: 78px; object-fit: contain; }
    .next-issue-label-inline { text-align: center; margin-bottom: 0; font-size: 13px; color:#234; }
    .countdown-new-section { display: inline-grid; grid-template-columns: repeat(3, 70px); align-items: stretch; }
    .countdown-wrapper-inline { margin-bottom: -2px; }
    /* 倒计时下方的年份按钮：放在“分”下方对齐，不遮挡 */
    .year-inline { align-self: center; margin-top: 0; margin-bottom: 0; width: 64px; }
    .year-inline .year-selector-btn { padding: 4px 6px; border-radius: 8px; width: 100%; }
    .countdown-new-section.two-block { grid-template-columns: repeat(2, 70px); }
    .countdown-item .countdown-value.flip-animate { animation: flipDown .6s ease-in-out; transform-origin: center top; }
    @keyframes flipDown { 0%{ transform: rotateX(0deg);} 49%{transform: rotateX(-90deg);} 50%{transform: rotateX(-90deg);} 100%{ transform: rotateX(0deg);} }
    .countdown-item { position: relative; height: 48px; border-radius: 12px; background: linear-gradient(180deg,#E6FAF8 0%, #FFFFFF 100%); border:1px solid #CFEFEB; box-shadow: 0 6px 18px rgba(70,183,166,.12), inset 0 -2px 0 rgba(0,0,0,.04); margin-bottom: 0; overflow: hidden; }
    .countdown-item .countdown-unit { position: absolute; top: 4px; right: 6px; font-size: 11px; color: #2aa897; }

    /* Tab 与表格 */
    .table-tabs { display: flex; overflow: visible; gap: 0; padding: 0; border-bottom: 1px solid #dfe7e7; margin-top: 10px; }
    .table-tab { flex: 1 1 0; padding: 10px 12px; border-radius: 10px 10px 0 0; border: 1px solid #dfe7e7; background: #fff; text-align: center; }
    .table-tab.active { background: #46B7A6; border-color: #46B7A6; color: #fff; }
    .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .draws-table { min-width: 720px; font-size: 14px; }
    .draws-table th,
    .draws-table td { padding: 10px 8px; }
    .table-balls { gap: 2px; }

    /* 走势/统计表格：同理 */
    .trend-chart-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .trend-chart-table { min-width: 720px; }

    /* 卡片留白与标题在移动端缩小 */
    .card,
    .table-card,
    .page-container { padding: 10px; }
    .section-title { font-size: 16px; }
}

/* ===== 超小屏（≤ 375px）再压缩 ===== */
@media (max-width: 375px) {
    .ball-new { width: 22px; height: 22px; line-height: 22px; font-size: 11px; }
    .front-balls, .back-balls { gap: 2px; }
    .plus-sign-inline { font-size: 14px; }
    .nav-tab,
    .table-tab { padding: 6px 10px; font-size: 13px; }
    .draws-table { min-width: 520px; }
}

/*（恢复原样式）*/

/* ===== History filters ===== */
.history-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filter-select {
    padding: 10px 16px;
    padding-right: 34px; /* 预留右侧下拉箭头空间，避免文字被遮挡 */
    border: 1px solid #D3D3D3;
    border-radius: 10px;
    font-size: 14px;
    color: #2F4F4F;
    background: #FFFFFF;
    min-width: 120px; /* 防止“最新500期”被截断 */
    height: 42px;
    line-height: 20px;
    box-sizing: border-box;
}
.filter-select:focus { outline: none; border-color: #46B7A6; box-shadow: 0 0 0 3px rgba(70,183,166,0.15); }

/* ===== HK6 labels under balls (homepage & modules) ===== */
.hk6-ball-wrapper { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 2px; }
.hk6-ball-wrapper .ball-new,
.hk6-ball-wrapper .table-ball { margin: 0; }
.hk6-labels { font-size: 12px; line-height: 1; color: #6b6b6b; white-space: nowrap; }