:root{--mg-bg:#194e7b;--mg-ink:#fff;--mg-muted:#d6e1eb;--mg-tile:#2e5e87;--mg-active:#476f95;--mg-line:#476f95;--mg-accent:#194e7b;}
*{box-sizing:border-box;letter-spacing:0;}
body{margin:0;min-height:100vh;background:var(--mg-bg)!important;color:var(--mg-ink);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;padding-bottom:calc(86px + env(safe-area-inset-bottom));perspective:none;}
.mg-home{font-size:14px;line-height:1.5;}
.mg-home a{color:inherit;text-decoration:none;}
.mg-home button,.mg-home input{font:inherit;}
.mg-home button{cursor:pointer;}
.mg-home button:disabled{cursor:default;}
.mg-home [hidden]{display:none!important;}
.mg-home :focus-visible,.mg-bottom-nav a:focus-visible{outline:3px solid #ffe467;outline-offset:3px;}
.mg-icon{display:block;width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.mg-main{max-width:1000px;margin:0 auto;padding:8px 6px 0;}
.mg-search-row{display:flex;align-items:stretch;gap:8px;margin:0 0 12px;min-width:0;}
.mg-bookmark{flex:0 0 auto;padding:0 14px;border:1px solid #dcc32e;border-radius:6px;background:#ffdf27;color:#14171b;font-size:15px!important;font-weight:700;height:42px;white-space:nowrap;}
.mg-search{display:flex;align-items:center;flex:1;min-width:0;height:42px;overflow:hidden;background:#fff;border:1px solid #d0d9e2;border-radius:6px;}
.mg-search input{flex:1;min-width:0;width:0;height:100%;padding:0 10px;border:0;outline:none;color:#24313e;background:transparent;font-size:15px;}
.mg-search input::placeholder{color:#7a8086;}
.mg-search button{display:flex;align-items:center;justify-content:center;flex:0 0 40px;height:40px;background:none;border:0;color:#2d4a60;}
.mg-categories{margin:0 0 5px;}
.mg-category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px 5px;}
.mg-category{display:flex;align-items:center;justify-content:center;min-width:0;min-height:38px;padding:5px 3px;border-radius:4px;background:var(--mg-tile);border:1px solid var(--mg-line);color:var(--mg-muted)!important;line-height:22px;font-size:17px;font-weight:800;text-align:center;overflow-wrap:anywhere;}
.mg-category.is-active,.mg-category:hover{background:var(--mg-active);color:var(--mg-ink)!important;border-color:var(--mg-muted);}
.mg-category-toggle{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-height:30px;background:none;border:0;color:var(--mg-muted);font-size:12px!important;padding:4px;}
.mg-category-toggle .mg-icon{width:15px;height:15px;flex-basis:15px;transition:transform .15s;}
.mg-category-toggle[aria-expanded=true] .mg-icon{transform:rotate(180deg);}
.mg-announcement{display:flex;align-items:center;gap:10px;min-height:42px;margin:6px 0 12px;padding:9px 12px;background:var(--mg-tile);border-top:1px solid var(--mg-line);border-bottom:1px solid var(--mg-line);color:var(--mg-ink);font-size:13px;}
.mg-announcement-label{display:flex;align-items:center;gap:5px;flex:0 0 auto;padding-right:10px;border-right:1px solid var(--mg-line);white-space:nowrap;}
.mg-announcement-label .mg-icon{width:17px;height:17px;flex-basis:17px;}
.mg-announcement-track{min-width:0;overflow:hidden;white-space:nowrap;flex:1;}
.mg-announcement-text{display:block;width:max-content;}
.mg-announcement.is-scrolling .mg-announcement-text{animation:mg-scroll var(--mg-scroll-time) linear var(--mg-scroll-delay) infinite;}
.mg-announcement:focus .mg-announcement-text{animation-play-state:paused;}
@media(hover:hover){.mg-announcement:hover .mg-announcement-text{animation-play-state:paused;}}
@keyframes mg-scroll{from{transform:translateX(var(--mg-scroll-start));}to{transform:translateX(var(--mg-scroll-distance));}}
@media(prefers-reduced-motion:reduce){.mg-announcement-track{white-space:normal;}.mg-announcement-text{width:auto;overflow-wrap:anywhere;}}
.mg-banners{position:relative;margin:0 0 12px;}
.mg-banner-track{display:flex;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:4px;}
.mg-banner-track::-webkit-scrollbar{display:none;}
.mg-banner{flex:0 0 100%;min-width:0;scroll-snap-align:start;}
.mg-banner a{display:block;}
.mg-banner img{display:block;width:100%;aspect-ratio:10/1;object-fit:cover;}
.mg-banner-controls{display:flex;justify-content:flex-end;gap:5px;margin-top:4px;}
.mg-banner-controls button{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--mg-line);border-radius:4px;background:var(--mg-tile);color:var(--mg-ink);}
.mg-results{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px;font-size:14px;overflow-wrap:anywhere;}
.mg-results small{font-size:12px;color:var(--mg-muted);}
.mg-results>a{flex-shrink:0;color:var(--mg-muted);text-decoration:underline;}
.mg-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.mg-video{display:block;min-width:0;border:1px solid var(--mg-line);border-radius:6px;overflow:hidden;background:var(--mg-tile);}
.mg-cover{position:relative;height:0;padding-top:75%;background:#132634;overflow:hidden;}
.mg-cover>img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:cover;}
.mg-views{position:absolute;left:6px;bottom:6px;z-index:2;display:flex;align-items:center;gap:3px;max-width:calc(100% - 76px);background:rgba(0,0,0,.76);color:#fff;font:12px/18px Arial,sans-serif;padding:1px 5px;border-radius:3px;pointer-events:none;white-space:nowrap;}
.mg-views .mg-icon{width:13px;height:13px;flex:0 0 13px;}
.mg-views>span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.mg-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(20,25,30,.44);color:#fff;}
.mg-play .mg-icon{width:19px;height:19px;fill:currentColor;stroke-width:1;}
.mg-video:hover .mg-play{background:rgba(20,25,30,.7);}
.mg-video-body{padding:4px 6px;background:var(--mg-tile);color:var(--mg-ink);}
.mg-video h2{font-size:14px;font-weight:600;line-height:20px;height:40px;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;}
.mg-load{display:flex;justify-content:center;padding:22px 0;min-height:74px;}
.mg-load button{border:1px solid var(--mg-line);border-radius:6px;background:var(--mg-tile);padding:9px 20px;color:var(--mg-ink);font-size:13px;}
.mg-load button:disabled{border-color:transparent;background:none;color:var(--mg-muted);}
.mg-empty{text-align:center;min-height:180px;padding:60px 20px;color:var(--mg-muted);}
.mg-empty a{display:block;margin-top:14px;text-decoration:underline;}
.mg-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--mg-bg);border-top:1px solid var(--mg-line);padding-bottom:env(safe-area-inset-bottom);}
.mg-bottom-nav>div{max-width:1000px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.mg-bottom-nav a{min-height:64px;padding:7px 8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:13px;color:var(--mg-muted)!important;text-decoration:none;line-height:20px;}
.mg-bottom-nav .mg-icon{width:23px;height:23px;flex-basis:23px;}
.mg-bottom-nav a.is-active{color:var(--mg-ink)!important;background:var(--mg-tile);}
.mg-dialog{width:calc(100% - 32px);max-width:400px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;padding:22px;border:1px solid #d4dae1;border-radius:8px;background:#fff;color:#24313e;margin:auto;box-shadow:0 16px 48px rgba(0,0,0,.25);}
.mg-dialog::backdrop{background:rgba(0,0,0,.6);}
.mg-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.mg-dialog h2{font-size:18px;line-height:26px;margin:0;overflow-wrap:anywhere;}
.mg-dialog button:not(.mg-primary){width:34px;height:34px;flex:0 0 34px;border:1px solid #d4dae1;border-radius:6px;background:#f3f6f8;color:#24313e;display:grid;place-items:center;}
.mg-dialog p{font-size:14px;margin:10px 0;overflow-wrap:anywhere;}
.mg-copy-row{display:flex;gap:8px;margin:16px 0;}
.mg-copy-row input{min-width:0;flex:1;font-size:13px;padding:6px;border:1px solid #d4dae1;border-radius:4px;}
.mg-member-code{text-align:center;margin:16px 0;font-size:14px;}
#gridFavoriteQr{display:block;margin:12px auto;}
#gridCopyStatus{min-height:21px;text-align:center;color:#316d46;}
.mg-primary{border:0;border-radius:6px;background:var(--mg-bg);color:var(--mg-ink);padding:10px 22px;font-size:14px;}
.mg-notice-body{font-size:14px;line-height:1.8;margin-bottom:18px;overflow-wrap:anywhere;}
.mg-notice-body img{max-width:100%;height:auto;}
.mg-dialog--notice{max-width:520px;border:2px solid var(--mg-accent);padding:26px;}
.mg-dialog--notice[open]{display:flex;flex-direction:column;}
.mg-dialog--notice::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(3px);}
.mg-dialog--notice .mg-dialog-heading{align-items:flex-start;flex-shrink:0;}
.mg-dialog--notice h2{min-width:0;font-size:20px;line-height:28px;color:var(--mg-accent);}
.mg-dialog--notice .mg-notice-body{min-height:0;overflow:auto;border-top:1px solid #d4dae1;margin:0;padding:16px 0;}
.mg-dialog--notice .mg-notice-body>:first-child{margin-top:0;}
.mg-dialog--notice .mg-notice-body>:last-child{margin-bottom:0;}
.mg-notice-actions{display:flex;justify-content:flex-end;flex-shrink:0;padding-top:8px;}
.mg-notice-actions .mg-primary{min-height:42px;min-width:112px;border:1px solid var(--mg-accent);font-weight:700;}
.mg-dialog--notice .mg-primary:focus-visible{outline:2px solid var(--mg-accent);outline-offset:3px;}
@media(max-width:480px){.mg-dialog--notice{padding:20px 18px;}.mg-dialog--notice h2{font-size:18px;line-height:26px;}}
/* The legacy detail and account views keep their markup and business actions. */
body:not(.mg-home) .header{background:#070a0d;border:0;box-shadow:none;}
body:not(.mg-home) .header .inner{gap:12px;flex-wrap:wrap;}
body:not(.mg-home) .logo{background:none!important;color:#9bdaa7!important;-webkit-text-fill-color:#9bdaa7!important;font-size:18px;overflow-wrap:anywhere;}
body:not(.mg-home) .header .user-info,body:not(.mg-home) .header .user-info span{color:#e1e7ed!important;}
body:not(.mg-home) .header .member-code,body:not(.mg-home) .header .member-code span{color:#e1e7ed!important;}
body:not(.mg-home) .header .logo-wrap{flex-wrap:wrap;}
body:not(.mg-home) .container{max-width:1000px;}
body:not(.mg-home) .card,body:not(.mg-home) .video-details{background:none;border:0;border-radius:0;box-shadow:none;color:var(--mg-ink);padding:16px 0;}
body:not(.mg-home) .card h2,body:not(.mg-home) .card-title,body:not(.mg-home) .video-details h1{color:var(--mg-ink);border-color:var(--mg-line);font-size:18px;background:none;-webkit-text-fill-color:var(--mg-ink);}
body:not(.mg-home) .description,body:not(.mg-home) .meta-row,body:not(.mg-home) .info-row .label,body:not(.mg-home) .info-row .val,body:not(.mg-home) .footer,body:not(.mg-home) .empty{color:var(--mg-muted);}
body:not(.mg-home) .code-box{background:var(--mg-tile);border-color:var(--mg-line);border-radius:6px;}
body:not(.mg-home) .code-box .code,body:not(.mg-home) .code-box .label{color:var(--mg-ink);letter-spacing:0;}
body:not(.mg-home) .info-row{border-color:var(--mg-line);gap:12px;flex-wrap:wrap;}
body:not(.mg-home) .tabs{gap:6px;}
body:not(.mg-home) .tab,body:not(.mg-home) .crumb-btn{background:var(--mg-tile);border-color:var(--mg-line);color:var(--mg-ink);border-radius:6px;}
body:not(.mg-home) .tab.active{background:var(--mg-active);border-color:var(--mg-muted);}
body:not(.mg-home) .pkg-card,body:not(.mg-home) .video-item{background:#f5f7fa;color:#273340;border:1px solid #d9e0e7;border-radius:6px;}
body:not(.mg-home) .pkg-card .name,body:not(.mg-home) .pkg-card .price,body:not(.mg-home) .pkg-card .days,body:not(.mg-home) .video-item .title,body:not(.mg-home) .video-item .meta{color:#273340;}
body:not(.mg-home) .form-group label{color:var(--mg-ink);}
body:not(.mg-home) .form-group input{color:#273340;border-color:#d4dae1;background:#fff;}
body:not(.mg-home) .btn-primary{background:var(--mg-tile);border:1px solid var(--mg-line);color:var(--mg-ink);}
body:not(.mg-home) .pkg-card .btn-primary,body:not(.mg-home) .modal .btn-primary,body:not(.mg-home) .video-item .btn-primary{background:var(--mg-bg);color:var(--mg-ink);}
body:not(.mg-home) .btn-outline{color:var(--mg-ink);border-color:var(--mg-line);}
body:not(.mg-home) .pay-box,body:not(.mg-home) .box{border-radius:8px;}
body:not(.mg-home) .crumb-btn{box-shadow:none;}
body:not(.mg-home) .title-row h1,body:not(.mg-home) .video-item .title{min-width:0;overflow-wrap:anywhere;}
body:not(.mg-home) .meta-row span,body:not(.mg-home) .meta-row strong,body:not(.mg-home) .free-hint,body:not(.mg-home) .info-row>span>span{color:var(--mg-muted)!important;}
body:not(.mg-home) .info-row button{background:var(--mg-tile)!important;color:var(--mg-ink)!important;border:1px solid var(--mg-line)!important;border-radius:6px!important;}
body:not(.mg-home) .video-player{background:#11181e;border:1px solid var(--mg-line);border-radius:6px;}
body:not(.mg-home) .video-locked h3,body:not(.mg-home) .video-locked p,body:not(.mg-home) .video-locked strong{color:#f3f6f8!important;}
body:not(.mg-home) .favorite-btn{background:var(--mg-tile)!important;color:var(--mg-ink)!important;border-color:var(--mg-line)!important;}
body:not(.mg-home) .favorite-btn.favorited{background:var(--mg-active)!important;border-color:var(--mg-ink)!important;}
body:not(.mg-home) .video-item{gap:12px;}
body:not(.mg-home) .video-item>div{min-width:0;overflow-wrap:anywhere;}
body:not(.mg-home) .video-item .btn{flex-shrink:0;}
body:not(.mg-home) .pkg-card{min-width:0;overflow-wrap:anywhere;}
body:not(.mg-home) .modal-mask{z-index:1100;}
body:not(.mg-home) .modal,body:not(.mg-home) .pay-box,body:not(.mg-home) .box{background:#fff!important;color:#24313e;border:1px solid #d4dae1!important;border-radius:8px!important;box-shadow:none!important;animation:none!important;transform:none!important;opacity:1;backdrop-filter:none;}
body:not(.mg-home) .modal{padding:24px!important;max-height:calc(100dvh - 40px);overflow:auto;}
body:not(.mg-home) .modal::before,body:not(.mg-home) .pay-box::before{display:none;}
body:not(.mg-home) .modal h2,body:not(.mg-home) .pay-box h1,body:not(.mg-home) .box h1,body:not(.mg-home) .box h2{color:#24313e!important;background:none;-webkit-text-fill-color:#24313e!important;font-size:20px;}
body:not(.mg-home) .modal .close-btn,body:not(.mg-home) .pay-box .close-btn{color:#24313e;background:#edf1f4;border-color:#d4dae1;box-shadow:none;}
body:not(.mg-home) .modal input{min-width:0;color:#24313e!important;background:#fff!important;border:1px solid #c1ccd6!important;}
body:not(.mg-home) .modal .btn,body:not(.mg-home) .box .btn,body:not(.mg-home) .pkg-buy-btn{background:var(--mg-bg)!important;color:var(--mg-ink)!important;border-radius:6px;box-shadow:none;}
body:not(.mg-home) .modal .btn-outline,body:not(.mg-home) .box .btn-outline{background:#edf1f4!important;color:#24313e!important;border-color:#c1ccd6;}
body:not(.mg-home) .pay-subtitle{color:#24313e;}
body:not(.mg-home) .pay-btn-pkg,body:not(.mg-home) .card-activate-btn{background:var(--mg-bg);color:var(--mg-ink)!important;border-radius:6px;}
body:not(.mg-home) .pay-btn-single,body:not(.mg-home) .pay-btn-pkg-card{background:#f5f7fa;color:#24313e;border:1px solid #d4dae1;border-radius:6px;}
body:not(.mg-home) .pay-btn-name{min-width:0;overflow-wrap:anywhere;}
body:not(.mg-home) .pay-box{padding:28px 22px;}
body:not(.mg-home) .pay-box h1{padding-right:30px;}
body:not(.mg-home) .pay-box .sub,body:not(.mg-home) .box p,body:not(.mg-home) .box .row{color:#4e5d6a;}
body:not(.mg-home) .pay-box .order-info{background:none;border:0;border-bottom:1px solid #d4dae1;border-radius:0;color:#24313e;padding:0 0 16px;}
body:not(.mg-home) .pay-box .row{gap:10px;align-items:baseline;}
body:not(.mg-home) .pay-box .row .label{color:#4e5d6a;flex:0 0 auto;}
body:not(.mg-home) .pay-box .row>span:last-child{min-width:0;overflow-wrap:anywhere;text-align:right;}
body:not(.mg-home) .pay-box .price,body:not(.mg-home) .box .row strong{color:#24313e;background:none;-webkit-text-fill-color:#24313e;}
body:not(.mg-home) .method{background:#f5f7fa;border:1px solid #d4dae1;border-radius:6px;padding:14px 12px;}
body:not(.mg-home) .method .icon{flex:0 0 36px;margin-right:10px;}
body:not(.mg-home) .method .info{min-width:0;}
body:not(.mg-home) .method .info .name,body:not(.mg-home) .method .arrow{color:#24313e;}
body:not(.mg-home) .method .info .desc{color:#4e5d6a;}
body:not(.mg-home) #referralModal .modal>div{background:none!important;border:0!important;box-shadow:none!important;}
body:not(.mg-home) #referralModal .modal>div{color:#4e5d6a!important;}
body:not(.mg-home) #referralModal p,body:not(.mg-home) #referralModal strong,body:not(.mg-home) #referralModal .modal>div>div:first-child{color:#4e5d6a!important;}
body:not(.mg-home) #referralModal button:not(.close-btn){background:var(--mg-bg)!important;color:var(--mg-ink)!important;}
body:not(.mg-home) #referralModal img{max-width:100%;height:auto!important;aspect-ratio:1;}
body:not(.mg-home) .modal h2{padding-right:18px;overflow-wrap:anywhere;}
@media(min-width:769px){.mg-main{padding:16px 20px 0;}.mg-search-row{margin-bottom:16px;}.mg-category{min-height:42px;font-size:18px;}.mg-video h2{font-size:16px;line-height:22px;height:44px;}.mg-play{width:48px;height:48px;}}
@media(max-width:360px){.mg-category-grid{gap:4px;}.mg-category{font-size:14px;padding-left:2px;padding-right:2px;}.mg-bookmark{padding:0 10px;}.mg-video-body{padding-left:4px;padding-right:4px;}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}

/* Member navigation stays in equal cells on narrow phones. */
body:not(.mg-home) .tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;align-items:stretch;}
body:not(.mg-home) .tabs .tab{margin:0!important;padding:12px 6px!important;min-width:0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px!important;white-space:nowrap;}
body:not(.mg-home) .tabs .tab-icon{width:17px;height:17px;flex-shrink:0;}
body:not(.mg-home) .tabs .tab:last-child:nth-child(odd){grid-column:1/-1;}
@media(min-width:700px){body:not(.mg-home) .tabs{grid-template-columns:repeat(4,minmax(0,1fr));}body:not(.mg-home) .tabs .tab:last-child:nth-child(odd){grid-column:auto;}}
video::-webkit-media-controls-download-button{display:none!important}

/* Category state on older Android browsers. */
.mg-home [hidden]{display:none!important}.mg-catalog-status{padding:12px 4px;color:var(--mg-ink);font-size:13px}.mg-catalog-status button{padding:6px 12px;background:var(--mg-tile);color:var(--mg-ink);border:1px solid var(--mg-line);border-radius:8px}.mg-videos[aria-busy="true"]{opacity:.7}


/* V3.5.3 mobile payment modal responsive fix */
body:not(.mg-home){overflow-x:hidden;}
body:not(.mg-home) .modal-mask{box-sizing:border-box;}
body:not(.mg-home) .modal-mask .modal,
body:not(.mg-home) .pay-box{box-sizing:border-box;}

/* Make every package choice use the exact single-item button appearance. */
body:not(.mg-home) .modal .pay-btn-pkg,
body:not(.mg-home) .modal .pay-btn-pkg:hover,
body:not(.mg-home) .modal .pay-btn-pkg:focus-visible{
  background:#f5f7fa!important;
  color:#24313e!important;
  border:1px solid #d4dae1!important;
  border-radius:6px!important;
}

@media (max-width:600px){
  body:not(.mg-home) .modal-mask{
    align-items:center;
    justify-content:center;
    overflow-y:auto;
    overflow-x:hidden;
    padding:10px;
    -webkit-overflow-scrolling:touch;
  }
  body:not(.mg-home) .modal-mask .modal{
    width:100%;
    max-width:400px;
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
    margin:0 auto;
    padding:16px 12px!important;
    border-radius:12px!important;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body:not(.mg-home) .modal h2{
    margin:0 28px 10px 0;
    font-size:18px;
    line-height:1.35;
    text-align:center;
  }
  body:not(.mg-home) .modal .close-btn{
    top:9px;
    right:9px;
    width:32px;
    height:32px;
    font-size:17px;
  }
  body:not(.mg-home) .modal .pay-video-cover{
    width:100%;
    max-height:160px;
    margin-bottom:11px;
    border-radius:9px;
    aspect-ratio:16/8.5;
  }
  body:not(.mg-home) .modal .pay-subtitle{
    margin-bottom:10px;
    font-size:16px;
    line-height:1.4;
    letter-spacing:0;
  }
  body:not(.mg-home) .modal .pay-btn-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
  }
  body:not(.mg-home) .modal .pay-btn-item{
    width:100%;
    min-width:0;
    min-height:56px;
    padding:8px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-radius:8px;
    text-align:center;
    line-height:1.2;
    font-size:13px;
  }
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    overflow-wrap:anywhere;
    font-size:13px;
    line-height:1.2;
  }
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name em{
    width:100%;
    margin-left:0!important;
    font-size:10px!important;
    line-height:1.15;
    text-align:center;
    white-space:normal;
  }
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-price{
    font-size:16px;
    line-height:1.2;
    white-space:nowrap;
  }

  body:not(.mg-home) .pay-box{
    width:100%;
    max-width:420px;
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
    margin:0 auto;
    padding:20px 14px!important;
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:12px!important;
  }
  body:not(.mg-home) .pay-box h1{
    padding-right:28px;
    font-size:20px;
    line-height:1.35;
  }
  body:not(.mg-home) .pay-box .sub{margin-bottom:14px;line-height:1.5;}
  body:not(.mg-home) .pay-box .order-info{padding:11px 12px;margin-bottom:14px;font-size:13px;}
  body:not(.mg-home) .pay-box .order-info .row{gap:8px;}
  body:not(.mg-home) .pay-box .order-info .row>span:last-child{
    min-width:0;
    max-width:70%;
    overflow-wrap:anywhere;
    word-break:break-all;
    text-align:right;
  }
  body:not(.mg-home) .pay-box .price{font-size:23px;}
  body:not(.mg-home) .pay-box .pay-methods{gap:8px;}
  body:not(.mg-home) .pay-box .method{min-width:0;padding:11px 10px;gap:7px;}
  body:not(.mg-home) .pay-box .method .icon{width:32px;height:32px;margin-right:4px;}
  body:not(.mg-home) .pay-box .method .info{min-width:0;}
  body:not(.mg-home) .pay-box .method .info .name{font-size:15px;}
  body:not(.mg-home) .pay-box .method .info .desc{
    font-size:11px;line-height:1.3;overflow-wrap:anywhere;
  }
  body:not(.mg-home) .pay-box .method .arrow{flex:0 0 auto;font-size:18px;}
}

@media (max-width:360px){
  body:not(.mg-home) .modal-mask{padding:7px;}
  body:not(.mg-home) .modal-mask .modal{
    max-height:calc(100vh - 14px);
    max-height:calc(100dvh - 14px);
    padding:13px 9px!important;
  }
  body:not(.mg-home) .modal .pay-video-cover{max-height:135px;margin-bottom:8px;}
  body:not(.mg-home) .modal .pay-btn-list{gap:6px;}
  body:not(.mg-home) .modal .pay-btn-item{min-height:52px;padding:7px 3px;font-size:12px;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name{font-size:12px;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-price{font-size:15px;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name em{font-size:9px!important;}
}


/* V3.5.4 compact two-column package modal */
/* Keep two columns on phones; compact each card instead of switching to one column. */
@media (max-width:600px){
  body:not(.mg-home) .modal-mask{
    align-items:center;
    justify-content:center;
    padding:8px;
  }
  body:not(.mg-home) .modal-mask .modal{
    width:100%;
    max-width:400px;
    max-height:calc(100dvh - 16px);
    padding:14px 10px!important;
  }
  body:not(.mg-home) .modal .pay-video-cover{
    max-height:170px;
    margin-bottom:9px;
  }
  body:not(.mg-home) .modal .pay-subtitle{
    margin-bottom:8px;
    font-size:15px;
    line-height:1.3;
  }
  body:not(.mg-home) .modal .pay-btn-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  body:not(.mg-home) .modal .pay-btn-item{
    min-width:0;
    min-height:52px;
    padding:6px 4px;
    gap:2px;
    border-radius:6px;
    line-height:1.15;
    font-size:12px;
  }
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name{
    min-width:0;
    font-size:12px;
    line-height:1.15;
    gap:1px;
  }
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name em{
    margin-left:0!important;
    font-size:9px!important;
    line-height:1.05;
  }
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-price{
    font-size:15px;
    line-height:1.1;
  }
}
@media (max-width:360px){
  body:not(.mg-home) .modal-mask .modal{
    max-width:360px;
    padding:12px 8px!important;
  }
  body:not(.mg-home) .modal .pay-video-cover{max-height:135px;}
  body:not(.mg-home) .modal .pay-btn-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
  }
  body:not(.mg-home) .modal .pay-btn-item{
    min-height:48px;
    padding:5px 2px;
  }
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name{font-size:11px;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name em{font-size:8px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-price{font-size:14px;}
}


/* V3.5.5 compact payment page sync */
/* Keep the standalone payment page consistent with the compact member modal. */
body.pay-page{overflow-x:hidden;}
body.pay-page .pay-page-box{width:100%;max-width:540px;max-height:calc(100dvh - 104px);margin:8px auto 0;padding:18px 16px!important;overflow-x:hidden;overflow-y:auto;}
body.pay-page .gateway-row{margin-top:13px;}
body.pay-page .pay-methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
body.pay-page .pay-methods form{min-width:0;margin:0;}
body.pay-page .method{min-width:0;min-height:54px;padding:9px 5px;border-radius:7px;font-size:14px;gap:6px;}
body.pay-page .pay-icon{width:28px;height:28px;flex-basis:28px;font-size:20px;border-radius:7px;}
@media(max-width:600px){
  body.pay-page{padding:14px 10px calc(86px + env(safe-area-inset-bottom));}
  body.pay-page .pay-page-box{max-width:400px;}
}
@media(max-width:360px){
  body.pay-page{padding-left:7px;padding-right:7px;}
  body.pay-page .pay-page-box{max-height:calc(100dvh - 98px);padding:14px 10px!important;border-radius:10px;}
  body.pay-page .pay-methods{gap:5px;}
  body.pay-page .method{min-height:48px;padding:7px 3px;font-size:12px;border-radius:6px;}
  body.pay-page .pay-icon{width:25px;height:25px;flex-basis:25px;font-size:18px;border-radius:6px;}
}


/* V3.5.6 final compact modal and complete-cover fix */

@media (max-width:600px){
  body:not(.mg-home) .modal-mask{align-items:center!important;justify-content:center!important;padding:16px!important;overflow:auto;}
  body:not(.mg-home) .modal-mask .modal{width:calc(100% - 12px)!important;max-width:360px!important;max-height:calc(100dvh - 32px)!important;margin:0 auto!important;padding:12px 10px!important;border-radius:10px!important;overflow-x:hidden!important;overflow-y:auto!important;}
  body:not(.mg-home) .modal h2{margin:0 26px 8px 0!important;font-size:17px!important;line-height:1.25!important;}
  body:not(.mg-home) .modal .close-btn{top:8px!important;right:8px!important;width:30px!important;height:30px!important;font-size:16px!important;}
  body:not(.mg-home) .modal .pay-video-cover{width:100%!important;height:clamp(130px,38vw,170px)!important;aspect-ratio:auto!important;margin:0 0 8px!important;border-radius:8px!important;overflow:hidden!important;background:#f1f3f5!important;}
  body:not(.mg-home) .modal .pay-video-cover img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;background:#f1f3f5!important;}
  body:not(.mg-home) .modal .pay-subtitle{margin:0 0 7px!important;font-size:15px!important;line-height:1.25!important;letter-spacing:0!important;}
  body:not(.mg-home) .modal .pay-btn-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;width:100%!important;}
  body:not(.mg-home) .modal .pay-btn-item,body:not(.mg-home) .modal .pay-btn-pkg,body:not(.mg-home) .modal .pay-btn-single{width:100%!important;min-width:0!important;min-height:46px!important;padding:5px 3px!important;gap:2px!important;border-radius:6px!important;line-height:1.1!important;font-size:12px!important;}
  body:not(.mg-home) .modal .pay-btn-pkg,body:not(.mg-home) .modal .pay-btn-pkg:hover,body:not(.mg-home) .modal .pay-btn-pkg:focus-visible{background:#f5f7fa!important;color:#24313e!important;border:1px solid #d4dae1!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name{width:100%!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;font-size:12px!important;line-height:1.1!important;overflow-wrap:anywhere!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name em{width:100%!important;margin-left:0!important;font-size:8px!important;line-height:1!important;white-space:normal!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-price{font-size:14px!important;line-height:1.05!important;white-space:nowrap!important;color:#ff0000!important;}
}
@media (max-width:360px){
  body:not(.mg-home) .modal-mask{padding:14px!important;}
  body:not(.mg-home) .modal-mask .modal{width:calc(100% - 8px)!important;max-width:340px!important;padding:10px 8px!important;}
  body:not(.mg-home) .modal .pay-video-cover{height:130px!important;}
  body:not(.mg-home) .modal .pay-btn-list{gap:4px!important;}
  body:not(.mg-home) .modal .pay-btn-item,body:not(.mg-home) .modal .pay-btn-pkg,body:not(.mg-home) .modal .pay-btn-single{min-height:44px!important;padding:4px 2px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name{font-size:11px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name em{font-size:7px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-price{font-size:13px!important;color:#ff0000!important;}
}


body.pay-page{padding:24px 12px calc(86px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important;}
body.pay-page .pay-page-box{width:calc(100% - 32px)!important;max-width:380px!important;max-height:calc(100dvh - 132px)!important;margin:12px auto!important;padding:14px 12px!important;border-radius:10px!important;overflow-x:hidden!important;overflow-y:auto!important;}
body.pay-page .pay-page-box h1{margin:0 24px 8px!important;font-size:18px!important;line-height:1.25!important;}
body.pay-page .pay-page-box .pay-price{margin:3px 0 6px!important;font-size:22px!important;color:#ff0000!important;}
body.pay-page .pay-page-box .pay-note{margin:6px 0 9px!important;font-size:12px!important;line-height:1.45!important;}
body.pay-page .pay-page-box .gateway-row{margin:10px 0 0!important;}
body.pay-page .pay-page-box .gateway-row h2{margin:0 0 5px!important;font-size:14px!important;line-height:1.25!important;}
body.pay-page .pay-page-box .pay-methods{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;}
body.pay-page .pay-page-box .method{min-width:0!important;min-height:46px!important;padding:6px 3px!important;gap:4px!important;border-radius:6px!important;font-size:12px!important;line-height:1.1!important;}
body.pay-page .pay-page-box .pay-icon{width:24px!important;height:24px!important;flex-basis:24px!important;border-radius:6px!important;font-size:17px!important;}
body.pay-page .pay-page-box .pay-back{margin-top:16px!important;padding:7px!important;font-size:13px!important;background:#f5f7fa!important;border:1px solid #d4dae1!important;border-radius:8px!important;font-weight:600!important;text-decoration:none!important;}
@media (max-width:360px){body.pay-page{padding-left:8px!important;padding-right:8px!important;}body.pay-page .pay-page-box{width:calc(100% - 20px)!important;max-width:340px!important;max-height:calc(100dvh - 120px)!important;padding:11px 9px!important;}body.pay-page .pay-page-box .pay-methods{gap:4px!important;}body.pay-page .pay-page-box .method{min-height:43px!important;padding:5px 2px!important;font-size:11px!important;}body.pay-page .pay-page-box .pay-icon{width:22px!important;height:22px!important;flex-basis:22px!important;font-size:15px!important;}}



/* V3.5.7 balanced modal sizing */

/* Slightly larger than V3.5.6, still centered with top/bottom breathing room. */
@media (max-width:600px){
  body:not(.mg-home) .modal-mask{padding:13px!important;}
  body:not(.mg-home) .modal-mask .modal{width:calc(100% - 6px)!important;max-width:380px!important;max-height:calc(100dvh - 26px)!important;padding:15px 12px!important;}
  body:not(.mg-home) .modal h2{font-size:18px!important;margin:0 28px 9px 0!important;}
  body:not(.mg-home) .modal .close-btn{width:31px!important;height:31px!important;}
  body:not(.mg-home) .modal .pay-video-cover{height:clamp(116px,32vw,145px)!important;margin-bottom:9px!important;}
  body:not(.mg-home) .modal .pay-subtitle{font-size:16px!important;margin-bottom:8px!important;}
  body:not(.mg-home) .modal .pay-btn-list{gap:6px!important;}
  body:not(.mg-home) .modal .pay-btn-item,body:not(.mg-home) .modal .pay-btn-pkg,body:not(.mg-home) .modal .pay-btn-single{min-height:51px!important;padding:6px 4px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name{font-size:13px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name em{font-size:9px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-price{font-size:15px!important;}
}
@media (max-width:360px){
  body:not(.mg-home) .modal-mask{padding:12px!important;}
  body:not(.mg-home) .modal-mask .modal{width:calc(100% - 4px)!important;max-width:350px!important;max-height:calc(100dvh - 24px)!important;padding:13px 10px!important;}
  body:not(.mg-home) .modal .pay-video-cover{height:114px!important;}
  body:not(.mg-home) .modal .pay-btn-list{gap:5px!important;}
  body:not(.mg-home) .modal .pay-btn-item,body:not(.mg-home) .modal .pay-btn-pkg,body:not(.mg-home) .modal .pay-btn-single{min-height:49px!important;padding:5px 3px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name{font-size:12px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-name em{font-size:8px!important;}
  body:not(.mg-home) .modal .pay-btn-item .pay-btn-price{font-size:14px!important;}
}


body.pay-page{padding:20px 10px calc(86px + env(safe-area-inset-bottom))!important;}
body.pay-page .pay-page-box{width:calc(100% - 22px)!important;max-width:400px!important;max-height:calc(100dvh - 118px)!important;margin:14px auto!important;padding:16px 14px!important;}
body.pay-page .pay-page-box h1{font-size:19px!important;margin:0 25px 9px!important;}
body.pay-page .pay-page-box .pay-price{font-size:23px!important;}
body.pay-page .pay-page-box .pay-note{font-size:12.5px!important;margin:7px 0 10px!important;}
body.pay-page .pay-page-box .gateway-row{margin-top:11px!important;}
body.pay-page .pay-page-box .gateway-row h2{font-size:14.5px!important;margin-bottom:6px!important;}
body.pay-page .pay-page-box .pay-methods{gap:6px!important;}
body.pay-page .pay-page-box .method{min-height:50px!important;padding:7px 4px!important;font-size:13px!important;gap:5px!important;}
body.pay-page .pay-page-box .pay-icon{width:26px!important;height:26px!important;flex-basis:26px!important;font-size:18px!important;}
@media (max-width:360px){
  body.pay-page{padding-left:7px!important;padding-right:7px!important;}
  body.pay-page .pay-page-box{width:calc(100% - 12px)!important;max-width:350px!important;max-height:calc(100dvh - 108px)!important;padding:13px 10px!important;}
  body.pay-page .pay-page-box .pay-methods{gap:5px!important;}
  body.pay-page .pay-page-box .method{min-height:48px!important;padding:6px 3px!important;font-size:12px!important;}
  body.pay-page .pay-page-box .pay-icon{width:24px!important;height:24px!important;flex-basis:24px!important;font-size:17px!important;}
}

/* V3.5.8: full cover, two columns, one screen; never crop or scroll. */
body:not(.mg-home) #memberModal.modal-mask{
  padding:0!important;overflow:hidden!important;perspective:none!important;
  box-sizing:border-box!important;overscroll-behavior:none;
}
body:not(.mg-home) #memberModal .modal{
  position:absolute!important;left:50%!important;top:50%!important;
  box-sizing:border-box!important;width:calc(100% - 28px)!important;max-width:500px!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:12px 10px!important;border-radius:12px!important;
  overflow:visible!important;animation:none!important;opacity:1!important;
  transform:translate(-50%,-50%)!important;transform-origin:center center!important;
  transform-style:flat!important;-webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body:not(.mg-home) #memberModal .modal h2{
  font-size:18px!important;line-height:1.4!important;text-align:center!important;
  margin:0 30px 10px!important;padding:0!important;
}
body:not(.mg-home) #memberModal .close-btn{
  top:9px!important;right:9px!important;width:32px!important;height:32px!important;
  font-size:20px!important;
}
body:not(.mg-home) #memberModal .pay-video-cover{
  display:block!important;width:100%!important;height:auto!important;
  min-height:0!important;max-height:none!important;aspect-ratio:auto!important;
  flex:none!important;padding:0!important;margin:0 0 10px!important;
  overflow:visible!important;background:transparent!important;border-radius:0!important;
  line-height:0!important;
}
body:not(.mg-home) #memberModal .pay-video-cover img{
  display:block!important;position:static!important;width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;
  aspect-ratio:auto!important;object-fit:cover!important;object-position:center!important;
  flex:none!important;margin:0!important;padding:0!important;
  transform:none!important;background:transparent!important;border-radius:0!important;
}
body:not(.mg-home) #memberModal .pay-video-cover .no-cover{
  display:block;line-height:100px;text-align:center;
}
body:not(.mg-home) #memberModal .pay-subtitle{
  font-size:15px!important;line-height:1.35!important;letter-spacing:0!important;margin:0 0 8px!important;
}
body:not(.mg-home) #memberModal .pay-btn-list{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;gap:6px!important;width:100%!important;
}
body:not(.mg-home) #memberModal .pay-btn-item{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;width:100%!important;min-width:0!important;
  min-height:50px!important;height:auto!important;max-height:none!important;
  padding:6px 4px!important;margin:0!important;gap:2px!important;
  border-radius:7px!important;text-align:center!important;line-height:1.2!important;
}
body:not(.mg-home) #memberModal .pay-btn-pkg,
body:not(.mg-home) #memberModal .pay-btn-pkg:hover,
body:not(.mg-home) #memberModal .pay-btn-pkg:focus-visible{
  background:#f5f7fa!important;color:#24313e!important;border:1px solid #d4dae1!important;
}
body:not(.mg-home) #memberModal .pay-btn-item .pay-btn-name{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;width:100%!important;min-width:0!important;
  font-size:13px!important;line-height:1.2!important;gap:2px!important;overflow-wrap:anywhere!important;
}
body:not(.mg-home) #memberModal .pay-btn-item .pay-btn-name em{
  display:block!important;width:100%!important;margin:0!important;font-size:9px!important;
  line-height:1.15!important;white-space:normal!important;
}
body:not(.mg-home) #memberModal .pay-btn-item .pay-btn-price{
  font-size:15px!important;line-height:1.1!important;white-space:nowrap!important;
}
body:not(.mg-home) #memberModal .member-back-btn{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;box-sizing:border-box!important;min-width:0!important;
  min-height:42px!important;padding:8px!important;margin:14px 0 0!important;
  background:#f5f7fa!important;color:#24313e!important;
  border:1px solid #d4dae1!important;border-radius:7px!important;
  font-size:14px!important;font-weight:600!important;line-height:1.2!important;
  text-align:center!important;text-decoration:none!important;cursor:pointer!important;
}

/* V3.5.8: matching payment choices; whole panel fits without inner scrolling. */
body.pay-page{
  padding:0!important;min-height:100vh;min-height:100dvh;
  overflow:hidden!important;overscroll-behavior:none;
}
body.pay-page .pay-page-box{
  position:fixed!important;left:50%;top:calc(50% - 38px);
  width:calc(100% - 28px)!important;max-width:500px!important;
  min-height:0!important;height:auto!important;max-height:none!important;
  box-sizing:border-box!important;margin:0!important;padding:18px 16px!important;
  overflow:visible!important;border-radius:12px!important;
  transform:translate(-50%,-50%)!important;transform-origin:center center!important;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body.pay-page .pay-page-box h1{font-size:19px!important;line-height:1.35!important;margin:0 25px 12px!important;padding:0!important;}
body.pay-page .pay-page-box .pay-price{font-size:24px!important;line-height:1.2!important;margin:6px 0 10px!important;color:#ff0000!important;}
body.pay-page .pay-page-box .pay-note{font-size:13px!important;line-height:1.5!important;margin:8px 0 12px!important;}
body.pay-page .pay-page-box .gateway-row{margin:12px 0 0!important;}
body.pay-page .pay-page-box .gateway-row h2{font-size:15px!important;line-height:1.3!important;margin:0 0 7px!important;}
body.pay-page .pay-page-box .pay-methods{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
body.pay-page .pay-page-box .method{min-height:60px!important;padding:10px 6px!important;font-size:14px!important;line-height:1.2!important;gap:6px!important;border-radius:8px!important;}
body.pay-page .pay-page-box .pay-icon{width:28px!important;height:28px!important;flex-basis:28px!important;font-size:20px!important;}
body.pay-page .pay-page-box .pay-back{font-size:14px!important;padding:10px!important;margin-top:16px!important;background:#f5f7fa!important;border:1px solid #d4dae1!important;border-radius:8px!important;font-weight:600!important;text-decoration:none!important;}
