/* ==========================================================
   可可充值 / 可可用户组 —— 原版插件红白风格复刻
   图标与角标素材来自插件包 template/images
   ========================================================== */
.kk-page{padding:0;max-width:1200px;margin:0 auto;}
.kk-shell{display:flex;align-items:stretch;background:#fff;border:1px solid #eee;min-height:620px;font-family:"Microsoft YaHei",Helvetica,Arial,sans-serif;font-size:14px;color:#333;}
.kk-side{width:260px;flex:0 0 260px;border-right:1px solid #eee;background:#fff;}
.kk-side a{display:block;height:70px;line-height:70px;padding-left:24px;font-size:16px;color:#333;text-decoration:none;border-bottom:1px solid #f5f5f5;}
.kk-side a:hover{color:#fc4e53;text-decoration:none;}
.kk-side a.on{background:#fc4e53;color:#fff;border-bottom-color:#fc4e53;}
.kk-body{flex:1;min-width:0;padding:34px 40px 0 0;background:#fff;}

/* 移动端粉色头图（PC 隐藏） */
.kk-mhead{display:none;}

/* 通用行：左标签右内容 */
.kk-row{display:flex;align-items:flex-start;margin-bottom:26px;}
.kk-label{width:180px;flex:0 0 180px;text-align:right;padding-right:20px;color:#959595;line-height:34px;font-size:14px;}
.kk-content{flex:1;min-width:0;}
.kk-red{color:#fc4e53;}
.kk-money{color:#fc4e53;font-weight:bold;}

/* 余额信息行 */
.kk-assets{display:flex;flex-wrap:wrap;gap:40px;align-items:baseline;line-height:34px;}
.kk-assets .kk-a{font-size:14px;color:#959595;}
.kk-assets .kk-a b{color:#fc4e53;font-size:16px;margin-right:4px;}
.kk-assets .kk-a em{font-style:normal;color:#959595;}

/* 充值数量卡片 */
.kk-packs{display:flex;flex-wrap:wrap;gap:16px;max-width:690px;}
.kk-pack{position:relative;box-sizing:border-box;width:190px;height:80px;border:1px solid #d7d7d7;border-radius:3px;background:#fff;cursor:pointer;text-align:center;padding-top:15px;transition:border-color .15s;}
.kk-pack h4{margin:0;font-size:15px;color:#333;font-weight:bold;line-height:20px;}
.kk-pack p{margin:6px 0 0;font-size:14px;color:#999;line-height:20px;}
.kk-pack:hover{border-color:#ffb0b1;}
.kk-pack.on{border-color:#fc4e53;background:url(/public/assets/images/keke/jb.png) right bottom no-repeat #fffbfb;background-size:26px;}
.kk-pack.on h4{color:#fc4e53;}
.kk-pack .kk-cite{position:absolute;left:-1px;top:-11px;height:20px;line-height:20px;padding:0 8px;border-radius:8px 0 8px 0;color:#fff;font-style:normal;font-size:12px;background:linear-gradient(to right,#ff7e7f,#ff3b3b);white-space:nowrap;}
.kk-pack .kk-cite img{width:12px;height:12px;vertical-align:-1px;margin-right:3px;}
.kk-pack.kk-custom{padding-top:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:15px;color:#333;line-height:22px;}
.kk-pack.kk-custom input{width:120px;border:0;border-bottom:1px solid #eee;text-align:center;font-size:15px;color:#fc4e53;outline:0;background:transparent;height:24px;}

/* 支付方式 */
.kk-pays{display:flex;flex-wrap:wrap;gap:14px;max-width:690px;}
.kk-pay{position:relative;width:200px;height:66px;border:1px solid #d7d7d7;border-radius:3px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;}
.kk-pay img{max-height:38px;max-width:150px;}
.kk-pay:hover{border-color:#ffb0b1;}
.kk-pay.on{border-color:#fc4e53;background:url(/public/assets/images/keke/jb.png) right bottom no-repeat #fff;background-size:34px;}
.kk-pay.kk-hidden{display:none;}

/* 卡密填写区 */
.kk-cardbox{display:none;margin:6px 0 26px;background:#fff;max-width:690px;}
.kk-cardbox.show{display:block;}
.kk-cardbox .kk-cardtip{color:#999;font-size:12px;line-height:22px;margin-top:8px;}
.kk-cardbox input{width:100%;box-sizing:border-box;height:44px;background:#f5f5f5;border:0;border-radius:3px;text-align:center;font-size:16px;margin-bottom:10px;outline:0;}
.kk-cardbox .kk-cardlink{float:right;color:#fc4e53;font-size:12px;text-decoration:none;}

/* 主按钮 */
.kk-btnrow{margin:34px 0 10px;}
.kk-btn{display:inline-block;min-width:300px;padding:0 90px;height:56px;line-height:56px;text-align:center;background:#fc4e53;color:#fff !important;border:0;border-radius:3px;font-size:18px;cursor:pointer;text-decoration:none;}
.kk-btn:hover{background:#ff7579;color:#fff;text-decoration:none;}
.kk-btn[disabled],.kk-btn.kk-disabled{background:#e9a0a2;cursor:not-allowed;}

/* 底部说明 */
.kk-tips{max-width:690px;border-top:1px solid #eee;margin-top:18px;padding:16px 0 30px;color:#aeb1ae;font-size:12px;line-height:25px;}

/* 支付方式单行（移动端） */
.kk-paylist{display:none;}

/* ============ 用户组购买 ============ */
.kk-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:920px;}
.kk-groups.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;}
.kk-groups.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1080px;}
.kk-group{position:relative;box-sizing:border-box;min-height:112px;border:1px solid #eee;border-radius:2px;background:linear-gradient(135deg,#fff 0%,#fff 58%,#fafafa 58%,#fafafa 100%);cursor:pointer;padding:20px 20px 20px 18px;display:flex;align-items:center;gap:16px;overflow:visible;}
.kk-group:hover{border-color:#FADABA;}
.kk-group.on{border-color:#FADABA;box-shadow:0 0 20px #FFF0EC;background:url(/public/assets/images/keke/jb.png) right bottom no-repeat linear-gradient(135deg,#fff 0%,#fff 58%,#fbfbfb 58%,#fbfbfb 100%);background-size:44px;}
.kk-group .kk-gico{flex:0 0 75px;width:75px;height:75px;border-radius:50%;border:1px solid #eee;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;}
.kk-group .kk-gico img{width:45px;height:45px;object-fit:contain;}
.kk-group .kk-gtxt{flex:1;min-width:0;}
.kk-group .kk-gname{font-size:22px;font-weight:bold;color:#333;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kk-group .kk-gmeta{font-size:13px;color:#999;line-height:22px;margin-top:2px;}
.kk-group .kk-gmeta b{color:#fc4e53;font-size:14px;font-weight:normal;}
.kk-group .kk-gmeta .kk-price{color:#fc4e53;font-size:15px;font-weight:bold;}
.kk-group .kk-give{position:absolute;right:-7px;top:-9px;padding:2px 10px;border-radius:12px;color:#fff;font-size:12px;line-height:18px;background:linear-gradient(to right,#ff9966,#eb4c50);white-space:nowrap;}
.kk-group .kk-give img{width:14px;height:14px;vertical-align:-2px;margin-right:3px;}
.kk-group .kk-give b{font-weight:normal;}
.kk-gwrap{padding:26px 0 0;}
.kk-slash{color:#ddd;}
.kk-owned{color:#fc4e53;font-size:12px;margin-left:6px;}

/* 特权 */
.kk-priv{display:flex;flex-wrap:wrap;gap:10px;max-width:920px;}
.kk-priv span{background:#F5F5F5;color:#333;font-size:13px;line-height:30px;padding:0 12px;}
.kk-priv-empty{color:#bbb;font-size:13px;}

/* 订单 / 记录表格 */
.kk-table{width:100%;border-collapse:collapse;background:#fff;font-size:13px;}
.kk-table th,.kk-table td{border-bottom:1px solid #f0f0f0;padding:12px 10px;text-align:left;color:#666;}
.kk-table th{background:#fafafa;color:#333;font-weight:normal;}
.kk-empty{padding:60px 0;text-align:center;color:#bbb;}

/* 充值类型切换 */
.kk-tabs{display:flex;gap:10px;}
.kk-tab{border:1px solid #d7d7d7;background:#fff;border-radius:3px;height:36px;padding:0 22px;font-size:14px;color:#333;cursor:pointer;}
.kk-tab.on{border-color:#fc4e53;color:#fc4e53;font-weight:500;}
@media(min-width:769px){.kk-only-mb{display:none !important;}}

/* ============ 移动端 ============ */
@media(max-width:768px){
.kk-only-pc{display:none !important;}
.kk-tabsrow,.kk-assetsrow{display:none;}
.kk-page{padding:0;max-width:100%;}
.kk-shell{display:block;border:0;min-height:0;background:#fff;}
.kk-side{display:none;}
.kk-body{padding:0;background:#fff;}
.kk-mhead{display:block;position:relative;background:linear-gradient(to right,#ff7e7f,#ff3b3b);color:#fff;padding:14px 0 22px;text-align:center;overflow:hidden;}
.kk-mhead:before,.kk-mhead:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06);}
.kk-mhead:before{width:280px;height:280px;right:-120px;top:-160px;}
.kk-mhead:after{width:240px;height:240px;left:-90px;bottom:-170px;}
.kk-mhead .kk-back{position:absolute;left:12px;top:12px;width:30px;height:30px;color:#fff;font-size:22px;line-height:30px;text-decoration:none;}
.kk-mhead .kk-home{position:absolute;right:12px;top:12px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;}
.kk-mhead .kk-avatar{position:relative;width:60px;height:60px;margin:0 auto;border-radius:50%;border:2px solid #f9dada;background:#f1f1f1;overflow:visible;}
.kk-mhead .kk-avatar img.kk-face{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;}
.kk-mhead .kk-avatar img.kk-hi{position:absolute;right:-8px;top:-2px;width:18px;height:18px;}
.kk-mhead .kk-uname{display:block;font-size:17px;line-height:34px;color:#fff;text-decoration:none;margin-top:4px;}
.kk-mhead .kk-stats{display:flex;margin-top:8px;}
.kk-mhead .kk-stats>div{flex:1;position:relative;text-align:center;}
.kk-mhead .kk-stats>div:first-child:after{content:"";position:absolute;right:0;top:6px;width:1px;height:30px;background:rgba(255,255,255,.45);}
.kk-mhead .kk-stats em{display:block;font-style:normal;font-size:13px;color:#fff;opacity:.92;line-height:20px;}
.kk-mhead .kk-stats b{display:block;font-size:16px;font-weight:normal;line-height:24px;}
.kk-mhead .kk-topbtns{position:absolute;right:12px;top:12px;display:flex;gap:8px;}
.kk-mhead .kk-topbtns a{display:block;padding:3px 8px;border:1px solid rgba(255,255,255,.6);border-radius:3px;color:#fff;font-size:12px;line-height:18px;text-decoration:none;}
.kk-mhead .kk-gline{font-size:13px;color:#ffe9e9;margin-top:2px;}

.kk-msection{padding:0 14px;}
.kk-row{display:block;margin:0;}
.kk-label{display:none;}
.kk-content{padding:0;}

/* 移动端余额/金额卡：三列 */
.kk-packs{display:flex;flex-wrap:wrap;gap:10px;max-width:100%;padding:15px 14px 0;box-sizing:border-box;}
.kk-pack{width:calc((100% - 20px)/3);height:84px;border-radius:10px;border-color:#eee;padding:14px 0 0;margin:0;}
.kk-pack h4{font-size:14px;line-height:18px;color:#666;}
.kk-pack p{font-size:16px;color:#666;margin-top:12px;line-height:18px;}
.kk-pack.on{border-color:#ffb0b1;background:url(/public/assets/images/keke/jb.png) right bottom no-repeat #fffbfb;background-size:28px;border-radius:5px;}
.kk-pack.on h4{color:#fe7c6e;}
.kk-pack.on p{color:#fe7c6e;}
.kk-pack .kk-cite{left:-1px;right:1px;top:-6px;border-radius:0;padding:0;background:none;text-align:left;}
.kk-pack .kk-cite b{display:inline-block;padding:0 8px;border-radius:8px 0 8px 0;background:linear-gradient(to right,#ff7e7f,#ff3b3b);font-weight:normal;}
.kk-pack.kk-custom{width:calc(100% - 28px);height:60px;margin:10px 14px 0;border:0;border-radius:0;background:url(/public/assets/images/keke/bottom01.png) 0 bottom no-repeat;background-size:100% auto;display:block;padding:0;line-height:59px;font-size:16px;color:#333;text-align:center;}
.kk-pack.kk-custom input{display:inline-block;width:110px;font-size:16px;height:26px;border-bottom:0;color:#333;}

/* 支付列表 */
.kk-pays{display:none;}
.kk-paylist{display:block;border-top:10px solid #f5f5f5;background:#fff;}
.kk-paylist .kk-payrow{display:flex;align-items:center;padding:0 16px;height:62px;border-bottom:1px solid #f2f2f2;position:relative;cursor:pointer;}
.kk-paylist .kk-payrow img{width:26px;height:26px;object-fit:contain;margin-right:14px;}
.kk-paylist .kk-payrow span{font-size:16px;color:#333;flex:1;}
.kk-paylist .kk-payrow i{width:18px;height:18px;border-radius:50%;border:1px solid #ccc;box-sizing:border-box;display:block;}
.kk-paylist .kk-payrow.on i{border-color:#fc4e53;background:#fc4e53;position:relative;}
.kk-paylist .kk-payrow.on i:after{content:"";position:absolute;left:5px;top:2px;width:6px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);}
.kk-paylist .kk-payrow.kk-hidden{display:none;}

/* 卡密区移动端 */
.kk-cardbox{display:none;padding:0 14px;max-width:100%;margin:0;background:#fff;}
.kk-cardbox.show{display:block;padding-top:18px;padding-bottom:14px;}
.kk-cardbox input{height:44px;font-size:15px;background:#f1f1f1;border-radius:0;}
.kk-cardbox .kk-cardtip{padding-bottom:6px;}

/* 按钮固定在内容尾部，大圆角 */
.kk-btnrow{margin:10px 0 0;padding:12px 14px;background:#fff;}
.kk-btn{display:block;width:100%;min-width:0;padding:0;height:46px;line-height:46px;border-radius:30px;font-size:16px;text-align:center;}
.kk-tips{margin:0;padding:12px 14px 90px;border-top:1px solid #f2f2f2;background:#fff;max-width:100%;}

/* 用户组：横滑三列卡 */
.kk-groups,.kk-groups.cols-3,.kk-groups.cols-4{display:flex;gap:0;max-width:100%;overflow-x:auto;padding:30px 10px 16px;box-sizing:border-box;}
.kk-gwrap{padding:0;}
.kk-groups{overflow-y:visible;}
.kk-group{flex:0 0 31%;width:31%;margin-right:10px;min-height:0;padding:14px 4px;display:block;text-align:center;background:linear-gradient(135deg,#fff 0%,#fff 58%,#fafafa 58%,#fafafa 100%);}
.kk-group:last-child{margin-right:0;}
.kk-group .kk-gico{display:none;}
.kk-group .kk-gname{font-size:14px;line-height:22px;font-weight:bold;}
.kk-group .kk-gmeta{font-size:12px;margin-top:6px;line-height:20px;}
.kk-group .kk-gmeta .kk-price{display:block;font-size:24px;line-height:30px;margin:6px 0 2px;}
.kk-group .kk-gmeta .kk-price:before{content:"¥";font-size:13px;margin-right:2px;}
.kk-group .kk-give{position:static;display:block;margin-top:8px;padding:0;background:none;border-radius:0;}
.kk-group .kk-give b{display:block;background:#FCEAEA;color:#e65450;font-size:12px;line-height:28px;font-weight:normal;}
.kk-group .kk-give img{display:none;}
.kk-group.on .kk-give b{background:#FCE5E2;color:#e65450;}

/* 特权区 */
.kk-privblock{margin-top:6px;border-top:8px solid #f4f4f4;padding:16px 14px 18px;background:#fff;background-image:linear-gradient(0deg,rgba(255,240,240,.5),rgba(255,255,255,0));}
.kk-privtit{font-size:18px;font-weight:bold;color:#333;margin-bottom:14px;position:relative;padding-bottom:10px;}
.kk-privtit span{font-size:12px;color:#bbb;font-weight:normal;margin-left:8px;}
.kk-privtit:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:#eee;}
.kk-priv{display:flex;justify-content:space-around;gap:0;max-width:100%;}
.kk-priv span{background:none;padding:0;text-align:center;font-size:13px;color:#333;line-height:20px;}
.kk-priv span em{display:block;width:38px;height:38px;margin:0 auto 6px;border-radius:50%;background:#fff;border:1px solid #ffe3e3;line-height:36px;font-style:normal;font-size:18px;color:#e65450;}
.kk-priv span b{font-weight:normal;}

/* 结算区 */
.kk-checkout{margin-top:8px;border-top:10px solid #f4f4f4;padding:14px 16px 0;background:#fff;}
.kk-checkout .kk-crow{display:flex;align-items:center;min-height:34px;font-size:14px;color:#666;}
.kk-checkout .kk-crow .kk-clabel{width:80px;flex:0 0 80px;color:#959595;}
.kk-checkout .kk-crow .kk-cval{flex:1;}
.kk-checkout .kk-crow .kk-cval b{color:#fc4e53;font-size:22px;font-weight:bold;}
.kk-checkout .kk-crow .kk-cval em{font-style:normal;color:#333;font-size:14px;}
}

/* ============ 免费点播弹窗 ============ */
.kk-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998;display:none;}
.kk-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9999;width:520px;max-width:90vw;background:#fff;border-radius:8px;padding:34px 30px 26px;box-sizing:border-box;display:none;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.18);}
.kk-modal.show,.kk-mask.show{display:block;}
.kk-modal .kk-mico{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:#fff4f4;display:flex;align-items:center;justify-content:center;font-size:30px;}
.kk-modal .kk-mtitle{font-size:18px;color:#333;font-weight:bold;margin-bottom:10px;}
.kk-modal .kk-mtext{font-size:15px;color:#555;line-height:26px;margin-bottom:22px;}
.kk-modal .kk-mtext b{color:#fc4e53;}
.kk-modal .kk-mbtn{display:inline-block;min-width:150px;height:42px;line-height:42px;background:#fc4e53;color:#fff;border-radius:30px;font-size:15px;text-decoration:none;cursor:pointer;border:0;}
.kk-modal .kk-mbtn:hover{background:#ff7579;color:#fff;}
@media(max-width:600px){.kk-modal{width:88vw;padding:26px 18px 22px;}.kk-modal .kk-mtext{font-size:14px;}}