/********************ionic************************/

.popup-body {
    text-align: center;
}


/********************帮助类***********************/

a {
    color: #888;
    text-decoration: none;
    font-size: 13px;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.center-block {
    display: block;
}

.pull-right {
    float: right !important;
    color: #777d83;
}

.pull-left {
    float: left !important;
}

.text-red {
    color: #ea3737!important;
}
.text-red1 {
    color: #fd8a00!important;
    font-size: 17px;
    font-weight: 700;
}
.text-green {
    color: #67c61e!important;
}

.col-full {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -moz-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 0;
    color: #000000;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
    background-color: #ffffff;

}

.text-center {
    text-align: center!important;
}

.hidden {
    display: none!important;
}

.bg-grey {
    background-color: #ddd!important;
    background: #ddd!important;
}

.tabs {
    background: #ffffff;
    color: #777d83;
}

/* .tab-item1 {
    color: #111;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    /* 覆盖Ionic默认的透明度设置 - 确保未激活状态下图标颜色正常 */
/*  opacity: 1 !important;
}

.tab-item1.active {
color: #60a5fa !important;
} */



/* Tab导航图片化样式系统 */
.tab-item {
    color: #111;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    /* 覆盖Ionic默认的透明度设置 - 确保未激活状态下图标颜色正常 */
    opacity: 1 !important;
}

.tab-item.active {
    color: #60a5fa !important;
}

.tab-item:active {
    opacity: 1;
}

/* 确保图标在所有状态下都是完全不透明的 */
.tab-item .tab-icon {
    opacity: 1 !important;
}

/* 保持激活状态图标的完整颜色 */
.tab-item.active .tab-icon {
    opacity: 1 !important;
}

/* ========================================================================
   公告页面样式 (notice.html) - 现在与home.html模态框完全一致
   ======================================================================== */

/* 公告详情模态框样式 */
.notice-detail-content {
    padding: 20px;
}

.notice-detail-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 12px;

}

.notice-detail-body {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

.notice-detail-body p {
    margin-bottom: 12px;
}

.notice-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 12px 0;
}

/* notice.html现在与home.html模态框完全一致，无需额外响应式样式 */

/* Tab图标容器 */
.tab-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 4px;
}

/* Tab文字标签 */
.tab-label {
    font-size: 12px;
    line-height: 1.2;
}

.f15{
    font-size: 15px!important;
}
.text-white{
    color: #fff!important;
}
.m150{
    margin: 15px 0!important;
}
.m100{
    margin: 10px 0!important;
}
.mt20{
    margin-top: 20px!important;
}
.mfull10{
    margin: 5px!important;
}
.displayinline{
    display: inline-block!important;
}
.displayinline110{
    display: inline-block;
    width: 110px;
}
.paddingcolor{
    padding: 5px;color: red;
}
.mpc{
    margin: 20px 0;
    padding-left: 20px;
    color: #ff6b68;
}
.displayinline60{
    display: inline-block;margin-left: 60px
}
.lpt{
    line-height: 50px;padding-top: 15px;
}
.lpt button{
    display: block;
    margin: 10px 0;
}
.padding0{
    padding: 0!important;
}

.binduserp{
    margin:10px 0;padding-left:15px;color: red
}
.p05{
    padding: 20px;
    margin: 0px;
}
.plr10{
    padding: 0px 10px;
}
.pt20{
    padding-top: 20px;
}
.p54{
    padding: 5px 5px 5px 54px!important;
}
.fw600{
    font-weight: 600;
}
.delete-bt{
    margin-right: 20px;
}

.user-hierarchy {
    padding: 0px 10px 0 10px;
}
.user-level-btn{
    display: inline-block;
    line-height: 30px;
}
.user-level-name{
    background: #60a5fa;
    padding: 2px;
    border-radius: 5px;
    color: #fff;
}
.user-level-tag{
    margin: 0 5px;
}
.text-center{
    text-align: center!important;
}
.p510{
    padding: 0px 20px;
}
.p101{
    padding: 0 20px 14px 20px;
}
.p5{
    padding: 20px;
    margin: 0px;
    line-height: 1.6;
}
.noninput{
    display:inline-block;border: none;width: 80%
}
.p020{
    padding: 0 20px;
}
.wp5{
    width: 100%;
    padding: 5px;
}
.bpl{
    background: #fff;padding: 20px;line-height: 20px;
}
/****************************登录*****************************/

#refleshCode {
    height: 34px;
    position: absolute;
    right: 5px;
    top: 100px;
    z-index: 100;
}

.logo-login{
    text-align: center;
    margin-top: 60px;
}
.forget{
    height: 50px;
    color: #333;
    line-height: 50px;
    text-align:center;
    margin: 0 20px;
}

.forget a{
    font-size: 14px;
}

.wind-wt{
    margin: 10px 30px  auto 30px;
}
/***************************首页****************************/

/* 首页背景图片 */
.home-page-content {
    background-image: url('/static/images/bj.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* 购彩大厅背景图片 */
.lobby-page-content {
    background-image: url('/static/images/bj.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.title-logo{
    width: 100%;
    text-align: center;
    line-height: 54px;
    margin-right: 40px;
}

.kefu{
    font-size:13px;
    color: #777d83;
    line-height: 35px;
    width: 84px;
}

/* 新设计的快捷导航栏样式 */
.quicktool-redesigned {
    background: #ffffff;
    border-radius: 0;
    margin: 7px 7px;
    padding: 7px 5.5px 5.5px 5.5px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* 第一行：用户信息和余额区 */
.user-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;

    min-height: 50px;
}

/* 用户信息区域 */
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

.username {
    font-size: 15px;
    font-weight: 500;
    color: #333333;
}

/* 余额信息区域 */
.balance-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.balance-text {
    font-size: 16px;
    font-weight: 600;
    color: #60a5fa;
}

.balance-hidden {
    font-size: 16px;
    font-weight: 600;
    color: #666666;
    letter-spacing: 2px;
}

.toggle-icon, .refresh-icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-position-x: 50%;
    background-position-y: 50%;
    background-size: 18px;
    background-repeat: no-repeat;
}

.toggle-icon:active, .refresh-icon:active {
    opacity: 0.6;
    transform: scale(0.9);
}

/* 第二行：功能按钮区 */
.action-buttons {
    display: flex;
    justify-content: space-around;
    gap: 8px;
}

.btn-action {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 8px;
    text-decoration: none;
    color: #333333;
    border-radius: 6px;
    transition: all 0.2s ease;
    height: 36px;
    justify-content: center;
    gap: 8px;
}

.btn-action:active {
    background: rgba(0,0,0,0.05);
    transform: scale(0.98);
}

.btn-action img {
    width: 18px;
    height: 19px;
    flex-shrink: 0;
}

.btn-action span {
    font-size: 13px;
    font-weight: 400;
    color: #666666;
}

/* 功能按钮差异化样式 - 基于ui-sref属性 */
.btn-action[ui-sref="charge"] {
    background-color: #3b82f6;
    color: #ffffff;
}

.btn-action[ui-sref="charge"] span {
    color: #ffffff;
}

.btn-action[ui-sref="withdraw"] {
    background-color: #2563eb;
    color: #ffffff;
}

.btn-action[ui-sref="withdraw"] span {
    color: #ffffff;
}

.btn-action[ui-sref="transfer_account"] {
    background-color: #1d4ed8;
    color: #ffffff;
}

.btn-action[ui-sref="transfer_account"] span {
    color: #ffffff;
}

/* 悬停/点击效果优化 */
.btn-action[ui-sref="charge"]:active {
    background-color: #d49a45;
    transform: scale(0.98);
}

.btn-action[ui-sref="withdraw"]:active {
    background-color: #959c3a;
    transform: scale(0.98);
}

.btn-action[ui-sref="transfer_account"]:active {
    background-color: #e55658;
    transform: scale(0.98);
}

/* 响应式适配 */
@media (max-width: 320px) {
    .quicktool-redesigned {
        margin: 8px 12px;
        padding: 12px;
    }

    .user-avatar {
        width: 27px;
        height: 27px;
    }

    .username {
        font-size: 13px;
    }

    .balance-text, .balance-hidden {
        font-size: 14px;
    }

    .toggle-icon, .refresh-icon {
        width: 18px;
        height: 18px;
        background-position-x: 50%;
        background-position-y: 50%;
        background-size: 14px;
        background-repeat: no-repeat;
    }

    .btn-action {
        padding: 4px 6px;
        height: 30px;
        gap: 6px;
    }

    .btn-action img {
        width: 16px;
        height: 17px;
    }

    .btn-action span {
        font-size: 12px;
    }
}

.hotcp {
    margin: 7px 7px;
    background-color: #fff;
    border-radius: 7px;
    color: #484848;
}

/* 彩票大厅容器 */
.lottery-hall-container {
    display: flex;
    min-height: 450px;
    background: #ffffff;
    border-radius: 7px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* 左侧彩种导航 */
.lottery-categories {
    width: 60px;
    border-radius: 7px 0 0 7px;
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

.category-item {
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid #ffffff;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;


}

.category-item:last-child {
    border-bottom: none;
}

.category-item:hover {
    background: #ffffff;
}

.category-item.active {
    background: #ede9ec !important;
    color: #60a5fa !important;
}

.category-icon {
    width: 35px;
    height: 35px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 10px;
    display: block;
    /* 添加备选显示，如果图片加载失败则显示彩色背景 */
    border-radius: 4px;
}

/* 各彩种图标背景图片 */
.ssc-icon {
    background-image: url('/static/images/home/ssc.png');
    background-color: #60a5fa; /* 红色备选 */
}

.s11-5 {
    background-image: url('/static/images/home/11x5.png');
    background-color: #4ecdc4; /* 青色备选 */
}

.k3d {
    background-image: url('/static/images/home/kl3.png');
    background-color: #45b7d1; /* 蓝色备选 */
}

.pk10 {
    background-image: url('/static/images/home/pk10.png');
    background-color: #f9ca24; /* 黄色备选 */
}

.f3d {
    background-image: url('/static/images/home/fc3.png');
    background-color: #6c5ce7; /* 紫色备选 */
}

.category-item span {
    font-size: 12.5px;
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
}

/* 右侧彩票内容 */
.lottery-content {
    flex: 1;
    padding: 12px;
}

.lottery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.lottery-item {
    background: #eff6ff;
    border: 1px solid #e9ecef;
    border-radius: 7px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.lottery-item:active {
    background: #e9ecef;
    transform: scale(0.98);
}

.lottery-name {
    font-size: 13px;
    color: #495057;
    text-align: center;
    word-break: break-all;
    line-height: 1.2;
}

/* 响应式适配 */
@media (max-width: 320px) {
    .lottery-categories {
        width: 70px;
    }

    .category-item {
        padding: 8px 4px;
    }

    .category-icon {
        width: 28px;
        height: 28px;
    }

    .category-item span {
        font-size: 10px;
    }

    .lottery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lottery-name {
        font-size: 11px;
    }
}

/* 投注页面头部样式调整 */
.ssc-container .bar.bar-header.bar-positive {
    height: 48px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ssc-container .bar.bar-header .title {
    margin: 0;
    font-size: 18px;
}

.ssc-container .bar.bar-header .button {
    position: absolute;
    top: 8px;
    height: 32px;
}

/* 投注页面头部余额显示样式 */
.bar.bar-positive .balance-display {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 15px;
    white-space: nowrap;
}

.bar.bar-positive .balance-label {
    opacity: 0.8;
}

.bar.bar-positive .balance-amount {
    font-weight: bold;
    color: #ffeb3b;
}

.bar.bar-positive .balance-refresh-icon {
    margin-left: 8px;
    font-size: 14px;
    color: #fff;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.bar.bar-positive .balance-refresh-icon:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.bar.bar-positive .balance-refresh-icon.refreshing {
    animation: spin 1s linear infinite;
}

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

/* 调整内容区域顶部间距以适应增高的header */
.ssc-container .has-header {
    top: 65px !important;
}

.hotcp .displaycp >.row {
    display: flex;
    flex-wrap: wrap;
}

.hotcp .displaycp >.row >.col {
    flex: 0 0 25%;
    max-width: 25%;
    margin-bottom: 10px;
}

.hotcp .displaycp >.row >.col>a {
    display: block;
}

.hotcp .displaycp >.row >.col .box {
    background-color: #f5f6f7;
    height: 124px;
}

.hotcp .displaycp >.row >.col .box>div {
    margin: auto;
    width: 100%;
    height: 100%;
    background-size: auto 70%;
    background-position: 50%;
}

.box{
    text-align: center;
    font-size: 14px;
    color: #3e444c;
}

.game-logo img{
    padding: 20px 0 6px 0;
    width: 48px;

}

.game-logo2 img{
    padding: 30px 0 14px 0;
    height: 76px;

}

.home-cgame {
    background: url(/static/images/home/c-game.png) no-repeat;
}

.home-zgame {
    background: url(/static/images/home/z-game.png) no-repeat;
}

.home-dgame {
    background: url(/static/images/home/d-game.png) no-repeat;
}
.home-sport-game {
    background: url(/static/images/home/sport-game.png) no-repeat;
}

/********************公告栏**************************/
.slide {height:30px;border-bottom:1px solid #dcdcdc;margin: 0 auto;overflow: hidden;position: relative;}
.slideIco{
    position: absolute;
    font-size: 20px;
    color: #ff6b68;
    top: 5px;
    left: 10px;
}
.notice-more{
    position: absolute;
    font-size: 13px;
    top: 5px;
    right: 20px;
    z-index: 999;
}
.slideUl{
    width: 100%;
    z-index: 99;
    position: absolute;
    top: 0;
    color: #000;
    padding-left: 30px;
    padding-right: 55px;
}
.slide li {height: 30px;line-height: 30px;text-align: left;padding: 0 10px;font-size: 16px;list-style: none;border-bottom: 1px dashed #dcdcdc;cursor: pointer;}
.slide li:hover{background: #ccc;}
.slide li a{
    text-decoration: underline;
    color: #ff6b68;
}
.notice-list li{
    padding: 14px 10px;
    overflow: hidden;
    border-bottom: 1px dashed #d9dde1;
}
.notice-list li .pull-right{
    margin-right: 25px;
}
/********************侧边栏**************************/

.sidemenu {
    background-color: #ffffff;
}

.sidemenu .row .col .box {
    height: 60px;
    text-align: center;
}

.sidemenu .row .col .box span {
    color: #000000;
    font-size: 13px;
}

.side-h-logo {
    background: url(/static/images/side/home.png);
}

.side-at-logo {
    background: url(/static/images/side/lw.png);
}

.side-u-logo {
    background: url(/static/images/side/yh.png);
}

.side-op-logo {
    background: url(/static/images/side/kj.png);
}

.side-pay-logo {
    background: url(/static/images/side/ck.png);
}

.side-t-logo {
    background: url(/static/images/side/qk.png);
}

.side-tr-logo {
    background: url(/static/images/side/zz.png);
}

.side-ser-logo {
    background: url(/static/images/side/kf.png);
}

.side-at-logo,
.side-h-logo,
.side-op-logo,
.side-pay-logo,
.side-ser-logo,
.side-t-logo,
.side-tr-logo,
.side-u-logo {
    width: 100%;
    height: 35px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50%;
    background-size: 28px 28px;
}

.sidemenu .balance {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 90px;
    color: #000000;
    font-size: 13px;
    padding: 24px 0 20px 24px;

}

.sidemenu .balance p {
    margin-bottom: 0;
    color: #000000;
    font-size: 24px;
    padding-top: 6px;
}

.menu-leftb{
    margin: 14px 0 10px 0;
}

/*.side-list-ul {
    margin-top: 45px;
}*/

.side-list-ul>li {
    list-style: none;
    height: 46px;
    border-bottom:1px solid rgba(255, 255, 255, 0.05);
}

.side-list-ul>li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.side-myp {
    background: url(/static/images/side/bb.png);
}

.side-ber {
    background: url(/static/images/side/jl.png);
}

.side-tra {
    background: url(/static/images/side/jl.png);
}

.side-payr {
    background: url(/static/images/side/jl.png);
}

.side-payr {
    background-size: auto 45%;
}

.side-cah {
    background: url(/static/images/side/jl.png);
}

.side-msg {
    background: url(/static/images/side/yj.png);
}

.side-tc {
    background: url(/static/images/side/tc.png);
}

.side-ber,
.side-cah,
.side-msg,
.side-myp,
.side-payr,
.side-tc,
.side-tra {
    width: 100px;
    height: 100%;
    margin-left: 24px;
    background-repeat: no-repeat;
    font-size: 15px;
    color: #000000;
    line-height: 52px;
    background-position: 0;
    background-size: 18px 18px;
    padding-left: 30px;
}


/***************************购彩大厅****************************************/

.hall-content {
    margin-top: 20px;
}

.hall-content>div {
    width: 100%;
    padding: 0 15px;
}

.lottery-t {
    color: #ff6b68;
    font-size: 16px;
    font-weight: 700;
    height: 35px;
    margin: 0 0 10px 14px;
}

.lottery-t>div {
    float: left;
}

.ssc-icon {
    background: url(/static/images/home/ssc.png) no-repeat;
}

.s11-5 {
    background: url(/static/images/home/11x5.png) no-repeat;
}

.f3d {
    background: url(/static/images/home/fc3.png) no-repeat;
}

.k3d {
    background: url(/static/images/home/kl3.png) no-repeat;
}

.pk10{
    background: url(/static/images/home/pk10.png) no-repeat;
}

.f3d,
.k3d,
.s11-5,
.pk10,
.ssc-icon {
    width: 30px;
    height: 30px;
    background-size: 100% auto;
    background-position: 50%;

}

.lottery-t>div:nth-child(2) {
    height: 100%;
    line-height: 38px;
    margin-left: 3px;
}

.lottery-ul {
    width: 100%;
    margin: 0 auto;
    background:  #ffffff;

}

.lottery-ul>li {
    list-style: none;
    float: left;
    width: 33%;
    height: 40px;
    margin-bottom: 14px;
}

.lottery-ul>li>div {
    width: 90%;
    height: 40px;
    line-height: 40px;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    text-align: center;
    margin: 0 auto;
    color: #050505;
    background: #eff6ff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.lottery-ul>li>div:active {
    background: #f0e5e4;
    transform: scale(0.98);
}


/***************************近期开奖****************************************/

.openlottery-item {
    font-size: 15px;
    border-bottom: 1px solid #f1f1f1;
    margin: 14px 14px 0px 14px;
    color:#3e444c;
    position: relative;
}

.openlottery-item>div {
    padding: 0 5px;
    padding-right: 10px;
}

.openlottery-item>div:nth-child(1) {
    height: 32px;
    line-height: 30px;
    clear: both;
}

.openlottery-item>div:nth-child(1)>div:nth-child(1) {
    float: left;
}

.openlottery-item>div:nth-child(1)>div:nth-child(2) {
    float: right;
    font-size: 12px;
    color: #ff6b68;
}

.openlottery-item>div {
    padding: 0 5px;
    padding-right: 10px;
}

.openlottery-item>div:nth-child(2)>div {
    margin-top: 2px;
    float: left;
}

.common-ball {
    width: 18px;
    height: 18px;
    line-height: 19px;
    text-align: center;
    border: 1px solid #666;
    border-radius: 9px;
}

.common-ball.active {
    border: 0;
    color: #fff;
    background: #ff6b68;
}

.openlottery-item>div {
    padding: 0 5px;
    padding-right: 10px;
    margin: 5px;
}

.openlottery-item>div:nth-child(2) .common-ball {
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 100%;
    margin:0 8px 8px 0;
}

.openlottery-item>div:nth-child(3),
.openlottery-item>div:nth-child(4) {
    font-size: 12px;
    color: #aeaeae;
    line-height: 24px;
}

.openlottery-item>div:nth-child(3) {
    margin-top: 5px;
}

.open-issue {
    color: #ff6b68;
}

.trendBtn{
    position: absolute;
    right: 0;
    bottom: 10px;
}

/***************************历史记录************************************/
.lottery-history-table {
    width: 100%;
    font-size: 14px;
    padding: 0 10px 0 10px;
    text-align: center;
}
.lottery-history-table thead tr{
    height: 44px;
    line-height: 44px;
    color: #ff6b68;
    font-weight: 600;
}
.lottery-history-table thead tr th:nth-child(1){
}
.lottery-history-table tbody tr{
    height: 44px;
    line-height: 44px;
}
.lottery-history-table tbody tr:nth-child(odd){
    background: #f3f3f3;
}
.lottery-history-table tbody tr td{
    vertical-align: middle;
}
/*.lottery-history-table tbody tr td ul{
    width: 160px;
}*/
.lottery-history-table tbody tr td ul li{
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border: none;
    border-radius: 100%;
    color: #fff;
    background: #ff6b68;
    margin-left: 6px;
}

/***************************投注页面样式************************************/

.ssc-nav .col-full span {
    color: #777d83;
}

.icon-size12{
    margin:0 6px;
    font-size: 12px;
    color: #b5b8bc;

}

.icon-size16{
    font-size: 16px;
    color: #b5b8bc;

}

/* 倒计时行 - 加大字号 */
.ssc-issue-info {
    background-color: #ffffff;  /* 白色背景 */
    font-weight: 700;
    font-size: 16px;
    color: #666;
    padding: 8px 10px;  /* 内边距 */
    margin: 8px 10px;  /* 两侧边距，露出背景图 */
    border-radius: 0;  /* 圆角 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);  /* 轻微阴影 */
}

.ssc-issue-info .text-red {
    font-size: 16px;  /* 期号和倒计时的红色数字更大 */
    font-weight: 500;
}

/* 上期开奖号码区域 - 两行布局 */
.ssc-issue {
    background-color: #ffffff;  /* 白色背景 */
    font-weight: 700;
    font-size: 16px;
    color: #666;
    padding: 8px 10px;  /* 内边距 */
    margin: 8px 10px;  /* 两侧边距，露出背景图 */
    border-radius: 0;  /* 圆角 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);  /* 轻微阴影 */
}

/* 投注区域 */
.bet-area {
    background-color: #ffffff;  /* 白色背景 */
    padding: 10px;  /* 内边距 */
    margin: 8px 10px;  /* 两侧边距，露出背景图 */
    border-radius: 0;  /* 圆角 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);  /* 轻微阴影 */
}

/* 第一行：期号和开奖号码 */
/* 第一行：期号（左） + 历史开奖（右） */
.ssc-issue .last-issue-header {
    display: flex;
    justify-content: flex-start;  /* 改为左对齐，让两者更靠近 */
    align-items: center;
    padding: 0 0;
    line-height: 28px;
    gap: 8px;  /* 减少间距（从15px改为8px） */
}

.ssc-issue .issue-text {
    flex: 0 0 auto;
    font-size: 13px;  /* 与倒计时区域一致 */
    font-weight: 500;  /* 与倒计时区域一致 */
    color: #000000;  /* 与倒计时区域一致 */
}

.ssc-issue .text-red {
    font-size: 17px;  /* 与倒计时区域一致（从16px改为17px） */
    font-weight: 500;
}

/* 历史开奖（在第一行右侧） */
.ssc-issue .history-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 17px;
    color: #000000;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

.ssc-issue .history-toggle:active {
    opacity: 0.7;
}

/* 第二行：中奖号码（居中） */
.ssc-issue .last-issue-code-row {
    display: flex;
    justify-content: center;
    padding: 0 0;
}

.ssc-issue .last-issue-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;  /* 号码球之间的间距 */
}

/* 开奖号码圆形背景样式 */
.lottery-ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #2563eb;  /* 深红色背景 */
    color: #fff;  /* 白色文字 */
    border-radius: 50%;  /* 圆形 */
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(105, 38, 34, 0.3);  /* 轻微阴影 */
}

/* 添加按钮样式（移到收藏玩法区域） */
.favorite-add-btn-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    width: auto;
    min-width: 70px;
    height: 32px;  /* 统一高度 */
    padding: 0 12px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 16px;  /* 胶囊形状（高度的一半） */
    font-size: 13px;
    font-weight: normal;
}

.favorite-add-btn-inline .add-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.favorite-add-btn-inline:active {
    background: #5a1f1c;
}

.playintro span {
    line-height: 28px;
    display: inline-block;
    color: #666;
}

.cqssc-intrologo {
    display: inline-block;
    background: url(/static/images/cqssc/intro.png) no-repeat;
    width: 18px;
    height: 28px;
    background-size: 100% auto;
    background-position: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.ssc-lottery {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 20px;
    padding-bottom: 17px;
}

.ssc-lottery>div:nth-child(1) {
    border-bottom: 1px solid #ddd;
    height: 40px;
    font-size: 15px;
    color: #666;
}

.ssc-lottery>div:nth-child(1)>div {
    float: left;
    height: 40px;
    line-height: 40px;
    margin-left: 15px;
    color: #ff6b68;
    font-weight: 700;
}

.ssc-lottery>div:nth-child(1)>ul {
    float: right;
    margin-right: 12px;
}

.ssc-lottery>div:nth-child(1)>ul>li {
    list-style: none;
    float: left;
    font-size: 14px;
    width: 30px;
}

.ssc-lottery>div:nth-child(1)>ul>li>div {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
}

.ssc-lottery>div:nth-child(1)>ul>li>div.active {
    border-radius: 12px;
    background: #ff6b68;
    color: #fff;
}

.ssc-lottery>div:nth-child(1)>ul>li.on>div {
    border-radius: 12px;
    background: #ff6b68;
    color: #fff;
}

.lottery-num-ul {
    width: 100%;
    margin: 0 auto;
    padding: 0 5px;
    box-sizing: border-box;
}

.lottery-num-ul>li {
    list-style: none;
    width: 20%;
    float: left;
    height: 46px;
    font-size: 16px;
    color: #666;
    box-sizing: border-box;
}

.lottery-num-ul>li>div {
    margin: 0 auto;
    width: 36px;
    height: 36px;
    line-height: 34px;
    text-align: center;
    border-radius: 18px;
    margin-top: 12px;
}

.lt-teshuhao>li>div {
    width: 50px;
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
}

.lottery-num-ul>li.on>div {
    border: 0;
    background: #ff6b68;
    border: 1px solid #ff6b68;
    color: #fff;
}

/* 倍数模式区域 - 重构为两行布局 */
.ssc-b-m {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0 10px 5px 10px;
    background: #fff;

    font-size: 13px;
}

/* 第一行：倍数控制 + 操作按钮 */
.beishu-row {
    display: flex;
    align-items: center;
    height: 35px;
}

/* 倍数控制区域 */
.beishu-control {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.beishu-label {
    color: #666;
    font-size: 13px;
    white-space: nowrap;
}

/* 倍数加减控制器 */
.min-plus {
    display: flex;
    align-items: center;
    width: 100px;
    height: 25px;
    /*border: 1px solid #ddd;*/
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.min-plus .icon-minus,
.min-plus .icon-plus {
    width: 28px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    background: #2563eb;
    border: none;
}

.min-plus .icon-minus:active,
.min-plus .icon-plus:active {
    background: #5a1f1c;
}

.min-plus .multiple-text {
    flex: 1;
    height: 100%;
    border: none;
    text-align: center;
    width: 30px !important;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    background: #fff;
    color: #333;
}

/* 全梭按钮 */
.btn-full-amount {
    padding: 1px 16px;
    height: 25px;
    background: #faf0e8;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    color: #2563eb;
    cursor: pointer;
    margin-left: auto;
    margin-right: 10px;
    white-space: nowrap;
}


/* 半梭链接 */
.link-all-lines {
    display: inline-block;
    padding: 1px 16px;
    height: 25px;
    line-height: 20px;
    background: #faf0e8;
    border: none;
    border-radius: 20px;
    color: #2563eb;
    font-size: 13px;
    text-decoration: none;
    margin-right: 10px;
    cursor: pointer;
    white-space: nowrap;
}


/* 删除按钮 - 圆形背景图 */
.delete-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fdebeb;
    background-image: url('/static/images/lj.png');
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 隐藏图标字体的伪元素 */
.delete-icon::before,
.delete-icon::after {
    content: none !important;
    display: none !important;
}



/* 第二行：模式选择 */
.moshi-row {
    display: flex;
    align-items: center;
    height: 32px;
}

.moshi-label {
    color: #666;
    font-size: 13px;
    white-space: nowrap;
}

/* 模式选项容器 */
.yuan-jiao-fen {
    display: flex;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
}

.yuan-jiao-fen > div {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #333;
    background: #fff;
    border-right: 1px solid #ddd;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

.yuan-jiao-fen > div:last-child {
    border-right: none;
}

.yuan-jiao-fen > div.active {
    background: #2563eb;
    color: #fff;
    font-weight: 500;
}

.yuan-jiao-fen > div:not(.active):hover {
    background: #f5f5f5;
}

/* 投注信息展示区域 */
.bet-info-display {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 45px;
    background: #f5f6f7;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 10px;
}

.bet-info-display .info-item {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.bet-info-display .info-label {
    font-size: 13px;
    color: #666;
}

.bet-info-display .info-value {
    font-size: 16px;
    font-weight: 600;
    color: #ff6b68;
}

.bet-info-display .info-unit {
    font-size: 12px;
    color: #999;
}

/* 选号信息展示 - 两行布局 */
.bet-info-display-split {
    display: flex;
    flex-direction: column;
    /*gap: 4px;*/
    min-height: 50px;
    background: #ffffff;
    /*border-bottom: 1px solid #e0e0e0;*/
    padding: 1px 7px;
    font-size: 14px;
}

/* 第一行：左右分栏 */
.bet-info-row-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 20px;
}

/* 第一行左侧：选号信息 */
.bet-info-row-left {
    flex: 1;
}

/* 第一行右侧：余额显示 */
.bet-info-row-right {
    display: flex;
    align-items: center;
    padding-left: 15px;
}

/* 第二行：完整一行 */
.bet-info-row-full {
    width: 100%;
    line-height: 20px;
}

/* 普通文字（黑色） */
.bet-info-row-left .info-text,
.bet-info-row-full .info-text {
    color: #333;
    font-weight: normal;
}

/* 数字样式（红色） */
.bet-info-row-left .info-num,
.bet-info-row-full .info-num {
    color: #ff6b68;
    font-weight: 600;
    margin: 0 2px;
}

/* 金额数字样式（红色） */
.bet-info-row-left .info-num-money,
.bet-info-row-full .info-num-money {
    color: #ff6b68;
    font-weight: 600;
    margin: 0 2px;
}

.bet-balance-display {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.balance-amount-inline {
    font-weight: bold;
    color: #ffeb3b;
    font-size: 15px;
    background: linear-gradient(135deg, #ff6b68 0%, #ff8566 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.balance-refresh-icon-inline {
    margin-left: 8px;
    font-size: 16px;
    color: #ff6b68;
    cursor: pointer;
}

.has-footer2 {
    bottom: 167px !important;  /* 增大底部间距，适应自适应高度的footer */
}

.cqssc-footer {
    width: 100%;
    min-height: 167px;      /* 最小高度177px */
    height: auto;           /* 自适应内容高度 */
    max-height: 280px;      /* 最大高度280px，防止过高 */
    position: absolute;
    bottom: 0;
    z-index: 9;
    background: #ffffff;
    /* overflow-y: auto; */

}

.cqssc-footer .ssc-b-m {
    background: #fff;
}

.cqssc-footer .bet-cnt-btns {
    background: #fff;
}

/* 五个按钮布局 - 参考图片样式 */
.hall-ft-ul {
    width: 100%;
    height: 60px;
    margin: 0;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding: 0 5px;
    display: flex;
    gap: 10px;
    background: #2563eb;
}

.hall-ft-ul>li {
    list-style: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.hall-ft-ul>li:active {
    opacity: 0.8;
    transform: scale(0.98);
}

/* 隐藏图标 */
.btn-icon {
    display: none;
}

/* 按钮文字样式 */
.btn-text {
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-weight: 500;
    letter-spacing: 1px;
}

/* 各按钮背景色 - 参考图片配色 */
.btn-add-cart {
    background: #28292a;
}

.btn-cart {
    background: #3b82f6;
}

/* 号码篮图片样式 */
.btn-cart-icon {
    height: 24px;
    width: auto;
    display: block;
}

.btn-quick {
    background: #ed5548;
}

.btn-all {
    background: #f39c12;
}

.btn-half {
    background: #d63838;
}

/* 号码篮徽章 */
.cart-badge {
    position: absolute;
    top: 3px;
    right: 8px;
    border-radius: 10px;
    background: #ff0000;
    color: #fff;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 0 5px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.card .item {
    font-size: 14px;
    color:#323840;
}

.ssc-list-f {
    background: #fff;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 94px;
    height: 250px;
    border-radius: 3px;
}

.ssc-list-f>.scroll-content {
    margin: 10px;
    height: 240px;

}

.ssc-list-f>div>div {
    margin-top: 10px;
}

.ssc-list-c {
    margin: 10px 6px 14px 6px;
}

.ssc-list-c>* {
    float: left;
}

.ssc-list-c>div {
    width: 70px;
    text-align: center;
    color: red;
}

.ssc-list-c>ul {
    width: calc(100% - 85px);
    margin-left: 10px;
}

.ssc-list-c>ul>li {
    list-style: none;
    float: left;
    height: 28px;
    margin-left: 10px;
}

.ssc-list-c>ul>li.on {
    color: #1bae1b;
}

.cq-open-his-c>div>ul {
    width: 100%;
    height: 28px;
}

.cq-open-his-c>div>ul>li {
    color: #ff6b68;
    font-size: 14px;
    height: 100%;
    line-height: 36px;
    text-align: center;
    float: left;
    list-style: none;
}

.cq-open-his-c>div>ul>li:nth-child(1) {
    width: 36%;
}
.cq-open-his-c>div>ul>li:nth-child(2) {
    width: 64%;
}

.cq-open-his-c>div>ul {
    width: 100%;
    height: 36px;
}

.cq-open-his-c>div:nth-child(2)>ul {
    height: 36px;
}

.cq-open-his-c>div:nth-child(2)>ul:nth-child(odd) {
    background: #f5f6f7;
}

.cq-open-his-c>div:nth-child(2)>ul>li {
    font-size: 14px;
    color: #666;
}

.cq-open-his-c>div:nth-child(2)>ul>li:nth-child(even) {
    color: #ff6b68;
}

.his-first-no {
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    height: 100%;
    overflow: hidden;
    width: 120px;
}

.his-first-no>div {
    float: left;
    margin-top: 4px;
    margin-left: 5px;
}

.common-ball.active {
    border: 0;
    color: #fff;
    background: #ff6b68;
}

.common-ball {
    width: 18px;
    height: 18px;
    line-height: 19px;
    text-align: center;
    border: 1px solid #666;
    border-radius: 9px;
}

.tracerecord {
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 45px;
}

.sel-position {
    margin-bottom: 10px;
}

.sel-position>ul>li {
    list-style: none;
    width: 60px;
    float: left;
    height: 25px;
    font-size: 14px;
    color: #666;
}

.sel-position>ul>li>div {
    margin: 0 auto;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border: 1px solid #666;
    border-radius: 12px;
}

.sel-position>ul>li>div.active {
    border: 0;
    background: #ff6b68;
    color: #fff;
}

.sel-position-text {
    font-size: 12px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.page-set-prize {
    background: rgba(0, 0, 0, .1);
    z-index: 10;
}

.set-prize-view {
    position: absolute;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.set-prize-bg {
    width: 250px;
    height: 88px;
    position: absolute;
    right: 10px;
    top: 44px;
    background: #fff;
    border-radius: 5px;
}

.set-prize-txt {
    text-align: center;
    height: 30px;
    line-height: 38px;
    font-weight: 700;
    font-size: 12px;
}

.prize-range-c {
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
}

.lottery-type-f {
    background: #fff;
    position: absolute;
    width: 100%;
    height: 400px;
    left: 0;
    top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.lt-type-t {
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    color: #ff6b68;
    width: 100%;
    clear: both;
    padding: 0 5px;
    margin-bottom: 6px;

}

.lt-type-t>span {
    font-size: 11px;
    color: #939393;
}

.lt-type-list {
    clear: both;
    height: auto;
    float: left;
    width: 100%;
}

.lt-type-list>li {
    font-size: 13px;
    list-style: none;
    float: left;
    width: 33%;
    height: 38px;
    margin-bottom:10px;
}

.lt-type-list>li>div {
    margin: 0 auto;
    width: 90%;
    border: 1px solid #eaeaea;
    text-align: center;
    height: 40px;
    margin-top: 5px;
    line-height: 40px;
    border-radius: 3px;
    white-space: nowrap;
    color: #777d83;
}


/*************************购彩车************************************/

.bet-cart-open {
    color: #8a7878;
    background: #fff9e6;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
}

.betcart-tab-c {
    width: 100%;
    height: 40px;
    background: #ffffff;
    line-height: 40px;
    margin-top: 48px;
}

.betcart-tab-c>ul {
    width: 95%;
    margin: auto;
    height: 28px;
    border: 1px solid #555;
    border-radius: 4px;
    position: relative;
    top: 6px;
}

.betcart-tab-c>ul>li {
    border-right: 1px solid #555;
    height: 26px;
    line-height: 26px;
    text-align: center;
    float: left;
    list-style: none;
    width: 33.5%;
    color: #000000;
    font-size: 13px;
}

.font-color-444{color: #555;}

.betcart-tab-c>ul>li:first-child {
    background: #ff6b68;
}

.betcart-tab-c>ul>li:nth-child(2) {
    width: 33%;
}

.betcart-tab-c>ul>li:last-child {
    border-right: 0;
}

.betcat-item {
    border: 2px solid #e4e4e4;
    height: 124px;
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 2px;
}

.betcat-item-t {
    height: 40px;
    line-height: 40px;
    border-bottom: 2px solid #e4e4e4;
}

.betcat-item-t>div:first-child {
    float: left;
    margin-left: 12px;
    color: #4ed475;
    font-size: 13px;
}

.betcat-item-t>div:last-child {
    float: right;
    font-size: 14px;
    margin-right: 12px;
}

.betcat-item-t>div:last-child>span {
    color: #629ef7;
}

.betcat-item-num {
    height: 40px;
    font-size: 13px;
    line-height: 40px;
    border-bottom: 2px solid #e4e4e4;
    border-right: 2px solid #e4e4e4;
    width: 85%;
    float: left;
    overflow: hidden;
    white-space: nowrap;
}

.betcat-item-num>span {
    margin-left: 12px;
}

.betcat-item-del {
    height: 80px;
    float: right;
    width: 15%;
    margin-top: 0;
    line-height: 80px;
    font-size: 14px;
    text-align: center;
    color: #ff6b68;
}

.betcat-item-m {
    height: 40px;
    line-height: 40px;
    float: left;
    width: 85%;
    border-right: 2px solid #e4e4e4;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.betcat-item-m>div {
    margin-left: 12px;
}

.betcat-item-m>div>div {
    display: inline-block;
}

.betcat-min,
.betcat-mult,
.betcat-plus {
    margin-top: 7px;
}

.betcat-mult {
    width: 35px;
    text-align: center;
    border: 1px solid #ddd;
    height: 26px;
    line-height: 26px;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 5px;
}

.betcat-min,
.betcat-plus {
    width: 35px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.betcat-money {
    color: #ff6b68;
}


/************************充值记录**********************************/

/* ========== 充值通道横向滚动容器 ========== */

/* 外层滚动容器 */
.charge-tabs-scroll-wrapper {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
    padding: 10px 0;
    position: relative;
    margin-top: 44px; /* Ionic header 高度 */
    z-index: 1;
}




/* 隐藏滚动条（Webkit内核） */
.charge-tabs-scroll-wrapper::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 隐藏滚动条（Firefox） */
.charge-tabs-scroll-wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 内层flex容器 */
.charge-tabs-container {
    display: inline-flex;
    flex-wrap: nowrap;
    padding: 0 5px;
    min-width: 100%;
    width: max-content;
}

/* 充值通道按钮 */
.charge-tab-btn {
    display: inline-block;
    flex-shrink: 0;
    margin: 0 6px;
    height: 34px;
    line-height: 34px;
    padding: 0 15px;
    background: #3b82f6;
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease;
}

/* 激活状态 */
.charge-tab-btn.active {
    background: #60a5fa;
    color: #000000;
}

/* 触摸反馈 */
.charge-tab-btn:active {
    opacity: 0.7;
}

/* 维护中的按钮样式（与普通按钮一致，点击后显示提示） */
.charge-tab-btn.charge-tab-maintenance {
    opacity: 1;
}


/************************投注记录**********************************/

.record-top {
    background-color: #ffffff;
}

.record-top a {
    margin: 10px 6px 5px 6px;
    height: 34px;
    line-height: 34px;
    background: #3b82f6;
    border-radius: 3px;
    color: #ffffff;
}

.record-top a.active {
    background: #60a5fa;
    color: #000000 !important;
}

.has-bet-header {
    top: 104px;
}

/* 充值页面专用：header(44px) + charge-tabs(54px) */
.has-charge-tabs {
    top: 98px !important;
}

.bethis-title>ul {
    height: 28px;
    line-height: 29px;
    width: 100%;
    background: #eee;
    color: #525252;
}

.bethis-title>ul>li {
    float: left;
    list-style: none;
    width: 20%;
    text-align: center;
    border-right: 1px solid #dfdfdf;
    font-size: 12px;
}

.bethis-list>ul {
    height: 60px;
    line-height: 20px;
    width: 100%;
    color: #525252;
    border-bottom: 1px solid #ddd;
}

.bethis-list>ul>li {
    float: left;
    height: 100%;
    list-style: none;
    width: 20%;
    text-align: center;
    font-size: 12px;
    border-right: 1px solid #dfdfdf;
}

.bethis-list>ul>li>div {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

.bethis-list>ul>li:nth-child(1)>div:nth-child(1) {
    height: 90%;
    line-height: 60px;
}

.bethis-list>ul>li:nth-child(1)>div:nth-child(2) {
    height: 50%;
    line-height: 25px;
    color: #b0b0b0;
}

.bethis-list>ul>li:nth-child(3) {
    color: #ff6b68;
}

.bethis-list>ul>li:nth-child(2) {
    padding-top: 10px;
}

.bethis-list>ul>li:nth-child(3),
.bethis-list>ul>li:nth-child(4),
.bethis-list>ul>li:nth-child(5) {
    line-height: 60px;
    height: 100%;
}

.recordContainer>.row>.col>select {
    padding: 5px;
}

.recordContainer>.row>.col>button {
    min-width: 48px;
}

.table_bordered {
    width: 100%;
}

.table_bordered>tbody>tr>td {
    border: 1px solid #ddd;
    padding: 14px;
    font-size: 13px;
}

.table_bordered>tbody>tr>td:nth-child(even) {
    white-space: nowrap;
}

.table_sign>thead>tr>th {
    border: 1px solid #ddd;
    padding: 5px;
    font-size: 14px;
    background-color: #f5f5f5;
    height: 38px;
    vertical-align: middle;
}
.table_sign>tbody>tr>td {
    color: #1bae1b;
    height: 38px;
    font-size: 22px;
    vertical-align: middle;
}

/****************************************************/

.sel-position-inp {
    width: 98%;
    margin: 0 auto;
    color: #666;
    text-align: left;
}

.sel-position-inp>span {
    color: #ff6b68;
}

.input-textarea>textarea {
    width: 98%;
    height: 110px;
    border: 1px solid #ddd;
    resize: none;
    margin-top: 5px;
    font-size: 11px;
    padding: 5px;
}

.input-clear,
.sel-position-inp {
    height: 25px;
    line-height: 25px;
    font-size: 11px;
}

.input-clear {
    float: right;
    width: 70px;
    background: #ff6b68;
    color: #fff;
    border-radius: 3px;
    margin-right: 10px;
    margin-top: 7px;
    text-align: center;
}

.bet-cart-footer {
    height: 88px;
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    background: #fff;
}

.betcart-t {
    height: 40px;
    border-top: 2px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    line-height: 45px;
}

.betcart-btn {
    background: #cf3131;
    width: 95%;
    height: 38px;
    margin: 0 auto;
    border-radius: 3px;
    text-align: center;
    line-height: 38px;
    color: #fff;
    font-size: 16px;
    margin-top: 4px;
}

.has-cart-footer {
    bottom: 90px!important;
}

.bethis-tab-c {
    width: 100%;
    height: 40px;

    line-height: 36px;
    margin-top: 48px;
}

.bethis-tab-c>ul {
    width: 95%;
    margin: auto;
    height: 28px;
    border-radius: 3px;
    position: relative;
    top: 5px;
}

.bethis-tab-c>ul>li {
    border: 1px solid #555;
    line-height: 25px;
    height: 26px;
    text-align: center;
    float: left;
    list-style: none;
    width: 50%;
    color: #000000;
    font-size: 12px;
}

.bethis-tab-c>ul>li.active {
    background: #ff6b68;
}

.bethis-tab-c>ul>li:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.chase-same-top {
    width: 95%;
    margin: 0 auto;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 160px;
    padding: 10px 0;
}

.chase-same-top>ul {
    width: 100%;
    height: 36px;
}

.chase-same-top>ul>li {
    list-style: none;
    float: left;
    height: 100%;
    line-height: 36px;
}

.chase-same-top>ul>li:first-child {
    width: 80px;
    padding-left: 6px;
}

.mlt-top-d {
    border: 1px solid #ddd;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    margin-top: 2px;
    width: 210px;
}

.mlt-top-d>input {
    width: 185px;
    border: 0;
}

.chase-mlt-l {
    width: 100%;
    margin-left: 6px;
    margin-top: 5px;
}

.chase-multiple-top input {
    text-align: center;
}

.chase-mlt-l>input {
    width: 60px;
    border: 1px solid #ddd;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.chase-select-times {
    margin-top: 5px;
}

.chase-select-times>li {
    list-style: none;
    float: left;
    width: 50px;
    height: 25px;
    margin-right: 5px;
}

.chase-select-times>li>div {
    text-align: center;
    background: #ebebeb;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-right: 0;
    line-height: 25px;
    border-radius: 2px;
}

.chase-select-times>li>div.active {
    background: #ff6b68;
    color: #fff;
}

.chase-input-times {
    border: 1px solid #ddd;
    border-radius: 3px;
    height: 28px;
    margin-top: 3px;
    line-height: 28px;
}

.chase-input-times>input {
    width: 105px;
    text-align: center;
    border: 0;
}

.chase-same-select {
    font-size: 12px;
    width: 213px;
    border-radius: 2px;
    height: 30px;
}

.chase-same-mult {
    border: 1px solid #ddd;
    border-radius: 3px;
    height: 28px;
    width: 213px;
}

.chase-same-mult>* {
    float: left;
}

.chase-same-mult>span {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    height: 28px;
    line-height: 28px;
    width: 30px;
}

.chase-same-mult>input {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    width: 120px;
    text-align: center;
    border: 0;
    background: transparent;
}

.chase-same-mult>span {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    height: 28px;
    line-height: 28px;
    width: 30px;
}

.chase-order-list {
    border: 1px solid #ddd;
    width: 95%;
    margin: 0 auto;
}

.chase-order-list-title {
    background: #ebebeb;
    width: 100%;
    height: 28px;
}

.chase-order-list-title>li {
    float: left;
    list-style: none;
    width: 33%;
    text-align: center;
    height: 28px;
    line-height: 29px;
    border-left: 1px solid #ddd;
    border-bottom: 1px dashed #ddd;
}

.chase-order-list-title>li:first-child {
    width: 34%;
    border-left: 0;
}

.chase-order-notice {
    height: 26px;
    line-height: 26px;
    text-align: center;
}

.chase-total {
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 95%;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 2px;
}

.chase-bot-1 {
    /*height: 20px;*/
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 8px;
}
.chase-bot-1 img{
    vertical-align: middle;margin-bottom: 3px
}

.chase-order-list-c>ul {
    height: 26px;
    width: 100%;
}

.chase-order-list-c>ul>li {
    list-style: none;
    float: left;
    width: 33%;
    text-align: center;
    height: 100%;
    line-height: 26px;
    border-bottom: 1px dashed #ddd;
    border-left: 1px solid #ddd;
    overflow: hidden;
}

.chase-order-list-c>ul>li:first-child {
    width: 34%;
    border-left: 0;
}

.chase-order-list-c>ul>li:nth-child(2)>div {
    width: 90px;
    border: 1px solid #ddd;
    margin: 0 auto;
    height: 20px;
    line-height: 20px;
    margin-top: 3px;
    border-radius: 3px;
}

.chase-order-list-c>ul>li:nth-child(2)>div>input {
    width: 65px;
    text-align: center;
    border: 0;
}

.checkbox input:checked+.checkbox-icon:before,
.checkbox input:checked:before {
    background: #ff1010;
    border-color: #ff1010;
}


/************************银行卡绑定**********************************/

.banktips h3 {
    line-height: 25px;
}

.add-card{
    font-size: 14px;
    color: #fff!important;
    border: 1px solid #ff6b68;
    margin: 0 20px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    background: #ff6b68;
    border-radius: 3px;

}

/**************************团队管理*****************************************/

.self_list .item {
    padding: 5px;
}

.self_list ul {
    padding: 0;
    margin: 0;
}

.self_list ul li {
    float: left;
    list-style: none;
    width: 20%;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
}

.team_work>.row>.col>p>span {
    display: inline-block;
    width: 80px;
    text-align: left;
}

.team_work>.row {
    border-bottom: 1px solid #ddd;
}
/*******************查看契约详情*****************************/
.bonus_ul{
    margin: 0;
    padding:0;
}
.bonus_ul li{
    list-style: none;
    float: left;
    width: 25%;
    padding: 5px;
}
/*******************红包雨*****************************/
.red_packet_rain{
    width: 60px;
    height: 50px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    cursor: pointer;
    position: absolute;
    visibility: visible;
    top: 15px;
    left: 15px;
}
.red_packet_layer{
    width: 300px;
    height: 250px;
    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    position: absolute;
    z-index: 9999;
}
.red_packet_layer .red_packet_layer_bg{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.red_packet_layer .ion-close-circled{
    position:absolute;
    float: right;
    right:20px;
    top:20px;
    cursor:pointer;
    font-size: 30px;
    color: #a69f9f;
}

.red_packet_layer .red_packet_layer_open_btn{
    position:absolute;
    left:119px;
    top:45px;
    cursor:pointer;
    width: 60px;
    height: 60px;
}

.red_packet_layer .red_packet_layer_word {
    position:absolute;
    left:0px;
    top:137px;
    line-height:18px;
    font-size: 18px;
    font-weight: 600;
    font-family: 微软雅黑;
    color:#f0f808;
    text-align:center;
    width:100%;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(185, 159, 88, 1)), to(rgba(254, 237, 169, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.red_packet_layer .red_packet_layer_word .red_packet_layer_amount {
    line-height:22px;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(220, 220, 220)), to(rgb(255, 255, 255)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spin{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.btn_small{
    line-height: 20px!important;
    min-height: 20px!important;
    padding: 0px 4px 0px 4px!important;
}
.amount_positive{
    background-color:#c00;
    color: #fff;
    border-radius: 5px;
    padding: 0px 4px 0px 4px!important;
}
.amount_negative{
    background-color: #390;
    color:#fff;
    border-radius: 5px;
    padding: 0px 4px 0px 4px!important;
}
.charge-channel{
    text-align: center;
    display: table;
    padding: 10px 0 0px;
}
.charge-channel button{
    padding:0 10px;
    margin: 5px;
    font-weight: 400;
    font-size: 15px;
    height: 34px;
    line-height: 34px;
    min-width: 60px;
}
.fs16{
    font-size: 16px;
    color: #b5b8bc;
}
.button-middle{
    margin: 5px;
    font-weight: 400;
    font-size: 14px;
    height: 30px!important;
    line-height: 30px!important;;
    min-width: 50px!important;
    min-height: 30px!important;
    background: #c3c1c1;
}
.zhuanpan-bg {height: 100%; width: 100%; position: absolute; background: url(../images/home/black-hover.png) center repeat;}
.zhuanpan {height: 100%; min-height: 500px; top: 100px; text-align: center;}
.zhuanpan .zp1{width: 320px;height: 320px; position: absolute;top: 119px;left: calc((100% - 320px)/2);}
.zhuanpan .zp2{width: 260px;height: 260px; position: absolute;top: 150px;left: calc((100% - 260px)/2);}
.zhuanpan .zp3{width: 90px;height: 110px; position: absolute;top: 214px;left: calc((100% - 90px)/2);}
@media (max-width: 320px)  {
    .zhuanpan .zp1{width: 300px;height: 300px; left: calc((100% - 300px)/2);}
    .zhuanpan .zp2{width: 240px;height: 240px; left: calc((100% - 240px)/2);}
    .zhuanpan .zp3{width: 80px;height: 100px; left: calc((100% - 80px)/2);}
}
.checkcode {
    width: 100px;
    height: 38px;
}
.qr-code-btn{
    width: 32px;
    height: 32px;
    background:url(/static/images/common/qr_code_icon.png) no-repeat;
    margin-left: 7px;
}

.item-input input{
    border: none !important;
}

/* 交易协定页面样式 */
.terms-content {
    background-color: #3b82f6;
    /* 确保内容不被导航栏遮挡 */
    padding-top: 60px !important;
}

.terms-container {
    background-color: #3b82f6;
    padding: 0;
}

.terms-text {
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
    /* 外边距：显示深红色背景 */
    margin-top: 11px;
    margin-right: 11px;
    margin-bottom: 11px;
    margin-left: 11px;
    /* 内边距：白色内容区域 */
    padding-top: 15.5px;
    padding-right: 1px;
    padding-bottom: 24.5px;
    padding-left: 1px;
    text-align: justify;
    word-wrap: break-word;
    background-color: #ffffff;
}

.terms-text br {
    line-height: 1.8;
}

/* 确保深红色导航栏样式 */
.bar-assertive {
    border-color: #3b82f6;
    background-color: #3b82f6 !important;
    background-image: linear-gradient(0deg, #3b82f6, #3b82f6 50%, transparent 50%) !important;
    color: #ffffff;
}

.bar-assertive .title {
    color: #ffffff;
}

.bar-assertive .button {
    border-color: transparent;
    background-color: transparent;
    color: #ffffff;
}

.bar-assertive .button:hover {
    color: #ffffff;
    text-decoration: none;
}

.bar-assertive .button.activated {
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.1);
}

/* 移动端优化 */
@media (max-width: 480px) {
    .terms-text {
        font-size: 14px;
        padding: 16px 12px;
    }
}

/* ========================================
   玩法收藏功能样式
   ======================================== */

/* 1. 添加按钮 + 横向滚动列表的容器 */
.favorite-with-add-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 10px; /* 增加上下padding */
    background: #ffffff00;

}

/* 2. 收藏滚动区域（在flex容器内，占据剩余空间） */
.favorite-scroll-area {
    flex: 1;
    min-width: 0;  /* 允许flex item收缩 */
}

/* 3. 横向滚动容器 */
.favorite-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.favorite-scroll-container::-webkit-scrollbar {
    display: none;
}

/* 4. 收藏列表 */
.favorite-list {
    display: inline-flex;
    gap: 8px;
}

/* 5. 收藏项（胶囊形状） */
.favorite-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    min-width: auto;  /* 自适应宽度 */
    height: 32px;  /* 与添加按钮一致 */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;  /* 胶囊形状（高度的一半） */
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;  /* 平滑过渡效果 */
}

.favorite-item:active {
    background: #e8e8e8;
}

/* 选中状态 */
.favorite-item.active {
    background: #4a87ee;  /* 蓝色背景 */
    color: #fff;  /* 白色文字 */
    border-color: #4a87ee;  /* 蓝色边框 */
    /*transform: scale(1.05);  !* 轻微放大 *!*/
}

/* 5. 收藏管理弹框 - 遮罩层 */
.favorite-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* 6. 收藏管理弹框 - 主体 */
.favorite-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: #fff;
    border-radius: 8px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 7. 弹框头部 */
.favorite-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.favorite-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.favorite-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: #999;
    padding: 0;
    cursor: pointer;
}

.favorite-modal-close:active {
    color: #666;
}

/* ========================================
   모든 시스템 팝업을 하얀색 배경 + 검은색 글자로 통일
   ======================================== */

/* Ionic 팝업 스타일 오버라이드 */
.popup-container .popup {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

.popup-container .popup-head {
    color: #000000 !important;
    border-bottom-color: #eee !important;
}

.popup-container .popup-title {
    color: #000000 !important;
}

.popup-container .popup-sub-title {
    color: #000000 !important;
}

.popup-container .popup-body {
    color: #000000 !important;
}

.popup-container .popup-buttons .button {
    color: #000000 !important;
    background-color: #f5f5f5 !important;
    border-color: #ccc !important;
}

.popup-container .popup-buttons .button.activated {
    background-color: #e8e8e8 !important;
    color: #000000 !important;
}

/* 일반 팝업 스타일 통일 */
.popup,
.popup-overlay .popup,
.popup-dialog,
.alert-popup,
.toast-popup,
.notification-popup {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

.popup p,
.popup div,
.popup span,
.popup h1,
.popup h2,
.popup h3,
.popup h4,
.popup h5,
.popup h6 {
    color: #000000 !important;
}

.popup button,
.popup .button {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
    border-color: #ccc !important;
}

.popup button:active,
.popup .button:active,
.popup button.activated,
.popup .button.activated {
    background-color: #e8e8e8 !important;
    color: #000000 !important;
}

/* Ionic 팝업 강화 스타일 - modWithdrawPwd 페이지용 */
.popup-container,
.popup-container .popup,
.popup-container .popup-head,
.popup-container .popup-body,
.popup-container .popup-buttons {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

.popup-container .popup * {
    color: #000000 !important;
}

.popup-container .popup-head .popup-title,
.popup-container .popup-body,
.popup-container .popup-body * {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.popup-container .popup-buttons .button,
.popup-container .popup-buttons button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

.popup-container .popup-buttons .button.activated,
.popup-container .popup-buttons button:active {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
}

/* Ionic 팝업 템플릿 스타일 */
.popup,
.popup-head,
.popup-body,
.popup-buttons {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.popup .popup-title,
.popup .popup-sub-title,
.popup .popup-body,
.popup .popup-body * {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.popup .button,
.popup button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

.popup .button.activated,
.popup button:active {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
}

/* 커스텀 흰색 팝업 클래스 - modWithdrawPwd 페이지용 */
.custom-white-popup,
.custom-white-popup .popup,
.custom-white-popup .popup-head,
.custom-white-popup .popup-body,
.custom-white-popup .popup-buttons {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

.custom-white-popup .popup-title,
.custom-white-popup .popup-sub-title,
.custom-white-popup .popup-body,
.custom-white-popup .popup-body * {
    color: #000000 !important;
    background-color: #ffffff !important;
}

.custom-white-popup .button,
.custom-white-popup button,
.custom-white-popup .popup-buttons .button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

.custom-white-popup .button.activated,
.custom-white-popup button:active,
.custom-white-popup .popup-buttons .button.activated {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
}

/* 모달 스타일 통일 */
.modal-content,
.modal-dialog,
.modal-body,
.modal-header {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6,
.modal-content p,
.modal-content div,
.modal-content span,
.modal-content label {
    color: #000000 !important;
}

.modal-content .close-btn,
.modal-content .modal-close,
.modal-content .close-button {
    color: #000000 !important;
}

.modal-content .close-btn:hover,
.modal-content .modal-close:hover,
.modal-content .close-button:hover {
    color: #333333 !important;
}

/* 8. 弹框内容区域 */
.favorite-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    -webkit-overflow-scrolling: touch;
}

/* 9. 玩法分组 */
.favorite-group {
    margin-bottom: 20px;
}

.favorite-group:last-child {
    margin-bottom: 0;
}

/* 10. 分组标题 */
.favorite-group-title {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
}

/* 11. 玩法网格（3列） */
.favorite-play-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* 12. 玩法项 - 未收藏状态 */
.favorite-play-item {
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-play-item:active {
    transform: scale(0.95);
}

/* 13. 玩法名称 - 未收藏 */
.favorite-play-name {
    font-size: 13px;
    color: #3E444C;
    word-break: break-word;
}

/* 14. 玩法项 - 已收藏状态 */
.favorite-play-collected {
    background: #faf0e8;
    border-color: #faf0e8;
}

.favorite-play-collected .favorite-play-name {
    color: #1bae1b;
    font-weight: bold;
}

/* 15. 响应式适配 */

/* 小屏幕 (320px以下) */
@media (max-width: 320px) {
    .favorite-play-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .favorite-modal {
        width: 95%;
    }

    .favorite-add-btn-inline {
        min-width: 60px;
        height: 28px;
        padding: 0 10px;
        border-radius: 14px;  /* 保持胶囊形状 */
        font-size: 12px;
    }

    .favorite-add-btn-inline .add-icon {
        width: 14px;
        height: 14px;
    }

    .favorite-item {
        height: 28px;
        padding: 0 12px;
        border-radius: 14px;  /* 保持胶囊形状 */
        font-size: 12px;
    }
}

/* 横屏模式 */
@media (orientation: landscape) {
    .favorite-modal {
        max-height: 90vh;
    }
}

.bar.bar-positive .title {
    color: #fff;
}