/* V17.6.16: native male/female wardrobe composition, permanent gender lock, pinned phone preview + compact chat/effects. */

/* This card is intentionally outside the phone media query: it is the requested
   desktop Settings shortcut. Phones keep the existing "安装星语" control. */
.android-download-setting-card{
    position:relative;
    width:100%;
    min-height:62px;
    margin:0 0 11px;
    padding:9px 12px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    overflow:hidden;
    border:1px solid #76afe8;
    border-radius:12px;
    color:#174f87;
    background:linear-gradient(112deg,#eefaff 0%,#dcefff 45%,#e9e3ff 100%);
    box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(43,105,172,.13);
    text-decoration:none;
    cursor:pointer;
    transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.android-download-setting-card::after{
    content:"";
    position:absolute;
    top:-55%;
    bottom:-55%;
    left:-38px;
    width:25px;
    transform:rotate(20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
    animation:androidSettingSweep 4s ease-in-out infinite;
    pointer-events:none;
}
.android-download-setting-card:hover{
    transform:translateY(-1px);
    filter:brightness(1.035);
    box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(43,105,172,.18);
}
.android-download-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(145deg,#62c98e,#2e9a6f);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(29,119,79,.24);
    font-size:22px;
}
.android-download-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.android-download-copy b{font-size:15px;color:#205c96}
.android-download-copy small{font-size:10px;line-height:1.35;color:#6d8299}
.android-download-arrow{font-size:23px;font-weight:900;color:#3f82c7}
@keyframes androidSettingSweep{
    0%,30%{left:-38px;opacity:0}
    42%{opacity:.85}
    70%{left:calc(100% + 24px);opacity:.45}
    80%,100%{left:calc(100% + 24px);opacity:0}
}

@media (max-width:700px){
    /* Only the phone view changes below this point. */
    .android-download-setting-card{display:none!important}

    .profile-modal,
    .friend-modal,
    .setting-modal,
    .magic-modal,
    .rank-modal,
    .vip-guide-modal{
        box-sizing:border-box!important;
        border-radius:14px!important;
    }
    .profile-custom-head,
    .profile-modal-head,
    .friend-modal-head,
    .setting-modal-head,
    .magic-modal-head,
    .rank-modal-head,
    .vip-guide-head{
        min-height:43px!important;
        padding:9px 12px!important;
    }
    .profile-modal-title,
    .profile-custom-title,
    .friend-modal-title,
    .setting-modal-title,
    .magic-modal-title,
    .rank-modal-head{
        font-size:18px!important;
        line-height:1.2!important;
    }
    .profile-custom-title{padding-bottom:7px!important}
    .profile-custom-title::after{width:34px!important;height:3px!important}
    .profile-close-btn,
    .friend-close-btn,
    .setting-close-btn,
    .room-player-picker-close,
    .rank-modal-head button{
        min-width:32px!important;
        min-height:32px!important;
        padding:5px 7px!important;
        font-size:14px!important;
    }

    /* Personal card */
    #profileModal{
        width:min(88vw,360px)!important;
        height:min(80vh,590px)!important;
        height:min(80dvh,590px)!important;
        max-height:min(80dvh,590px)!important;
        border-width:2px!important;
    }
    #profileModal .profile-custom-body{padding:4px 12px 14px!important}
    #profileModal .profile-hero{padding:2px 0 7px!important}
    #profileModal .profile-avatar-circle{
        width:62px!important;
        height:62px!important;
        margin:0 auto 4px!important;
        border-width:4px!important;
    }
    #profileModal .profile-hero-name{margin:1px 0 6px!important;font-size:18px!important}
    #profileModal .profile-plan-pill{min-height:28px!important;padding:0 12px!important;font-size:12px!important;margin:0!important}
    #profileModal .profile-menu-card{
        min-height:38px!important;
        margin-top:6px!important;
        border-radius:11px!important;
        font-size:14px!important;
    }
    #profileModal .profile-stats-card{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:2px 8px!important;
        margin:9px 0 7px!important;
        padding:8px 9px!important;
        border-radius:11px!important;
    }
    #profileModal .profile-stats-card>div{font-size:11px!important;line-height:1.55!important;min-width:0!important}
    #profileModal .profile-section-title{font-size:14px!important;margin:10px 0 6px!important;padding-bottom:6px!important}
    #profileModal .avatar-scroll-shell{max-height:124px!important;padding:6px!important;border-radius:10px!important}
    #profileModal .avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:5px!important}
    #profileModal .avatar-item{min-height:38px!important;border-radius:8px!important}
    #profileModal .profile-input,
    #profileModal .profile-select{
        min-height:38px!important;
        padding:8px 10px!important;
        border-radius:10px!important;
        font-size:16px!important;
        margin-bottom:5px!important;
    }
    #profileModal .profile-sign-input{min-height:58px!important}
    #profileModal .profile-tip,
    #profileModal .profile-sign-count{font-size:10px!important;margin-bottom:6px!important}
    #profileModal .save-profile-btn{min-height:40px!important;margin-top:8px!important;border-radius:10px!important;font-size:14px!important}
    #profileModal .profile-timebook-grid{gap:5px!important}

    /* Player list and player details */
    .room-player-picker-modal{
        width:min(86vw,350px)!important;
        max-height:min(72vh,520px)!important;
        max-height:min(72dvh,520px)!important;
        border-width:2px!important;
    }
    .room-player-picker-head{padding:10px 12px 8px!important}
    .room-player-picker-title{font-size:17px!important;padding-bottom:6px!important}
    .room-player-picker-body{padding:8px 10px 11px!important}
    .room-player-picker-list{gap:6px!important}
    .room-player-picker-item{min-height:45px!important;padding:5px 8px!important;border-radius:11px!important;gap:7px!important}
    .room-player-picker-avatar{width:32px!important;height:32px!important;flex-basis:32px!important}
    .room-player-picker-name{font-size:13px!important}
    .room-player-picker-vip{min-width:38px!important;height:22px!important;padding:0 6px!important;font-size:10px!important}

    .player-sheet-modal{
        width:min(88vw,360px)!important;
        max-height:min(82vh,620px)!important;
        max-height:min(82dvh,620px)!important;
        border-width:2px!important;
    }
    .player-sheet-body{max-height:calc(min(82dvh,620px) - 45px)!important;padding:8px 11px 12px!important}
    .player-sheet-top{margin-bottom:8px!important}
    .player-sheet-avatar{width:60px!important;height:60px!important;margin:0 auto 5px!important;border-width:3px!important}
    .player-sheet-name-line{font-size:16px!important;margin-bottom:6px!important;gap:5px!important}
    .player-sheet-plan{min-width:135px!important;padding:6px 12px!important;font-size:12px!important}
    .player-outfit-public-card{padding:7px 8px!important;margin-bottom:7px!important;border-radius:10px!important}
    .player-outfit-public-title,.player-sheet-label{font-size:12px!important;margin-bottom:5px!important}
    .player-outfit-public-stage{height:128px!important;min-height:128px!important}
    .player-outfit-public-visual{width:78px!important;height:124px!important}
    .player-outfit-public-note{font-size:9px!important}
    .public-timebook-grid{gap:5px!important}
    .player-sheet-panel{padding:8px 9px!important;margin-bottom:7px!important;border-radius:11px!important}
    .player-sheet-value,.player-sheet-stat{font-size:12px!important;line-height:1.55!important}
    .player-sheet-panel.stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2px 8px!important}
    .player-sheet-action{height:38px!important;margin-top:6px!important;border-radius:10px!important;font-size:13px!important}
    .player-sheet-kick-top{height:29px!important;padding:0 8px!important;font-size:10px!important}

    /* Home and time book */
    .home-page-modal{
        width:min(92vw,430px)!important;
        max-height:min(84vh,650px)!important;
        max-height:min(84dvh,650px)!important;
        border-width:2px!important;
    }
    .home-page-body{max-height:calc(min(84dvh,650px) - 44px)!important;padding:9px 11px 13px!important}
    .home-page-hero{margin-bottom:8px!important}
    .home-page-avatar{width:60px!important;height:60px!important;margin:0 auto 5px!important;border-width:3px!important}
    .home-page-name-line{font-size:17px!important;margin-bottom:4px!important}
    .home-page-subline{font-size:11px!important}
    .home-page-section-title{font-size:13px!important;margin:9px 0 6px!important}
    .home-photo-grid,.home-outfit-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
    .home-photo-slot{border-radius:9px!important}
    .home-photo-slot span{font-size:10px!important;padding:0 4px!important}
    .home-outfit-card{padding:6px!important;border-radius:9px!important}
    .home-outfit-thumb{height:88px!important}
    .home-outfit-name{min-height:25px!important;font-size:10px!important}

    .timebook-modal{
        width:min(88vw,390px)!important;
        max-height:min(78vh,580px)!important;
        max-height:min(78dvh,580px)!important;
        border-width:2px!important;
    }
    .timebook-body{max-height:calc(min(78dvh,580px) - 44px)!important;overflow-y:auto!important;padding:10px 12px 13px!important}
    .timebook-tip{font-size:11px!important;line-height:1.45!important;margin-bottom:9px!important}
    .timebook-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin-bottom:10px!important}
    .timebook-slot{width:100%!important;max-width:none!important;border-radius:10px!important}
    .timebook-placeholder{font-size:12px!important}
    .timebook-placeholder small{font-size:9px!important;margin-top:3px!important}
    .timebook-modal .save-profile-btn{min-height:39px!important;margin-top:4px!important;font-size:14px!important}

    /* Settings */
    .setting-modal{
        width:min(88vw,360px)!important;
        max-height:min(82vh,620px)!important;
        max-height:min(82dvh,620px)!important;
    }
    .setting-body{max-height:calc(min(82dvh,620px) - 43px)!important;padding:9px 11px 12px!important;overflow-y:auto!important}
    .setting-item{min-height:48px!important;padding:7px 47px 7px 2px!important;margin-bottom:3px!important}
    .setting-item-label{font-size:13px!important;line-height:1.35!important}
    .setting-item-desc{font-size:10px!important;line-height:1.35!important;margin-top:2px!important}
    .setting-item .switch-wrap{margin-top:-23px!important;justify-content:flex-end!important}
    .switch-btn{width:36px!important;height:21px!important;min-width:36px!important}
    .switch-btn::after,.switch-btn::before{width:17px!important;height:17px!important}
    .switch-btn.active::after{left:17px!important}
    .music-control-card{padding:8px!important;margin-bottom:8px!important;border-radius:9px!important}
    .music-control-card .music-row{margin-bottom:6px!important}
    .music-label{font-size:13px!important}
    .music-play-btn{width:27px!important;height:27px!important;font-size:12px!important}
    .music-select{padding:7px 8px!important;font-size:12px!important}
    .music-volume-row{margin-top:6px!important;font-size:10px!important}
    .music-status{font-size:9px!important;margin-top:4px!important}
    .recharge-setting-card{min-height:52px!important;margin-bottom:8px!important;padding:6px 9px!important;grid-template-columns:37px 1fr auto!important}
    .recharge-setting-card .premium-diamond-icon{width:36px!important;height:32px!important}
    .recharge-setting-copy b{font-size:13px!important}
    .recharge-setting-copy small{font-size:9px!important}
    .install-row{min-height:48px!important;margin-bottom:8px!important;padding:7px 8px!important}
    .install-text{font-size:12px!important;line-height:1.35!important}
    .install-text span{font-size:9px!important}
    .install-btn{height:30px!important;padding:0 9px!important;font-size:11px!important}
    .setting-bottom-btn{min-height:38px!important;margin-top:6px!important;font-size:13px!important}
    .diagnose-result{padding:6px 8px!important;font-size:10px!important}

    /* Friends and interactions */
    .friend-modal{
        width:min(88vw,360px)!important;
        max-height:min(74vh,540px)!important;
        max-height:min(74dvh,540px)!important;
    }
    .friend-add-row{padding:8px 10px!important;gap:6px!important}
    .friend-add-input{min-width:0!important;height:36px!important;padding:0 9px!important;font-size:16px!important}
    .friend-add-btn{height:36px!important;padding:0 9px!important;font-size:11px!important}
    .friend-list-wrap{max-height:calc(min(74dvh,540px) - 96px)!important;padding:7px 10px 11px!important}
    .friend-item{min-height:43px!important;padding:6px 7px!important}

    .magic-modal{
        width:min(90vw,375px)!important;
        max-height:min(80vh,600px)!important;
        max-height:min(80dvh,600px)!important;
    }
    .magic-modal-body{max-height:calc(min(80dvh,600px) - 98px)!important;padding:8px 10px!important;overflow-y:auto!important}
    .magic-step-title{font-size:12px!important;margin:5px 0!important}
    .magic-target-box{min-height:38px!important;padding:7px!important;font-size:12px!important}
    .magic-target-list{gap:5px!important;margin:6px 0!important}
    .magic-target-chip{min-height:31px!important;padding:5px 7px!important;font-size:10px!important}
    .magic-spell-list{gap:6px!important}
    .magic-spell-item{min-height:50px!important;padding:7px 8px!important;border-radius:10px!important}
    .magic-spell-card-icon{width:34px!important;height:34px!important;font-size:18px!important}
    .magic-spell-copy{gap:2px!important}
    .magic-spell-name{font-size:12px!important}
    .magic-spell-tagline,.magic-spell-cost{font-size:9px!important}
    .magic-action-row{padding:8px 10px 10px!important;gap:7px!important}
    .magic-action-btn{height:37px!important;font-size:12px!important;border-radius:9px!important}

    /* VIP introduction */
    .vip-guide-modal.vip-guide-v2{
        width:min(92vw,430px)!important;
        max-height:min(84vh,660px)!important;
        max-height:min(84dvh,660px)!important;
        border-radius:14px!important;
    }
    .vip-guide-v2 .vip-guide-v2-head{padding:8px 10px!important}
    .vip-guide-head-copy b{font-size:13px!important}
    .vip-guide-head-kicker{font-size:6px!important;margin-bottom:2px!important}
    .vip-guide-v2 .vip-guide-head button{padding:5px 9px!important;font-size:10px!important}
    .vip-guide-v2 .vip-guide-v2-body{max-height:calc(min(84dvh,660px) - 46px)!important;padding:8px 9px 11px!important;overflow-y:auto!important}
    .vip-guide-v2-hero{grid-template-columns:52px minmax(0,1fr) 72px!important;gap:7px!important;padding:8px!important;border-radius:11px!important}
    .vip-guide-v2-emblem,.vip-guide-v2-emblem img{width:50px!important;height:50px!important}
    .vip-guide-v2 .vip-guide-main-title{font-size:17px!important;margin-bottom:2px!important}
    .vip-guide-v2 .vip-guide-subtitle{font-size:9px!important;line-height:1.35!important}
    .vip-guide-v2-tags{gap:3px!important;margin-top:4px!important}
    .vip-guide-v2-tags span{padding:2px 4px!important;font-size:7px!important}
    .vip-guide-v2-price{border-radius:9px!important}
    .vip-guide-v2-price small{font-size:7px!important}
    .vip-guide-v2-price b{font-size:20px!important;margin:1px 0!important}
    .vip-guide-v2-price span{font-size:7px!important}
    .vip-guide-v2-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;margin-top:6px!important}
    .vip-benefit-card{min-height:58px!important;padding:7px 6px 6px 29px!important;border-radius:9px!important}
    .vip-benefit-card i{left:6px!important;top:7px!important;width:18px!important;height:18px!important;font-size:10px!important}
    .vip-benefit-card b{font-size:9px!important;margin-bottom:2px!important}
    .vip-benefit-card span{font-size:7.5px!important;line-height:1.35!important}
    .vip-guide-v2-benefits .vip-benefit-card.fashion-primary{min-height:55px!important;padding:8px 8px 7px 38px!important}
    .vip-guide-v2-benefits .vip-benefit-card.fashion-primary i{left:7px!important;top:9px!important;width:25px!important;height:25px!important;font-size:13px!important}
    .vip-guide-v2-benefits .vip-benefit-card.fashion-primary b{font-size:10px!important}
    .vip-guide-v2-benefits .vip-benefit-card.fashion-primary span{font-size:8px!important}
    .vip-guide-v2-section{margin-top:6px!important;padding:7px!important;border-radius:10px!important}
    .vip-guide-v2-section-head{gap:5px!important;margin-bottom:6px!important}
    .vip-guide-v2-section-head>span{font-size:6px!important}
    .vip-guide-v2-section-head>b{font-size:10px!important}
    .vip-guide-v2-section-head>small{font-size:7px!important}
    .vip-level-track{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
    .vip-level-node{padding:5px 3px!important;border-radius:7px!important}
    .vip-level-node b{font-size:9px!important}
    .vip-level-node span{font-size:7px!important}
    .vip-guide-v2-note{font-size:7px!important;margin-top:4px!important}
    .vip-daily-rule-grid{grid-template-columns:1fr!important;gap:4px!important}
    .vip-daily-rule-grid>div{grid-template-columns:54px repeat(3,1fr)!important;padding:5px!important;gap:3px!important}
    .vip-daily-rule-grid b{font-size:9px!important}
    .vip-daily-rule-grid span{font-size:7px!important}
    .vip-guide-v2-footer{margin-top:6px!important;padding:7px 8px!important;gap:6px!important;border-radius:9px!important;align-items:center!important;flex-direction:row!important}
    .vip-guide-v2-footer span{font-size:6px!important}
    .vip-guide-v2-footer b{font-size:9px!important}
    .vip-guide-v2-footer small{font-size:7px!important}
    .vip-guide-v2 .vip-plan-open-btn.prime{height:29px!important;padding:0 9px!important;font-size:9px!important}

    /* Rank / daily reward */
    .rank-modal{
        width:min(88vw,350px)!important;
        height:min(84vh,650px)!important;
        height:min(84dvh,650px)!important;
        max-height:min(84dvh,650px)!important;
        border-width:2px!important;
    }
    .rank-modal-body{height:calc(100% - 43px)!important;padding:9px 11px 20px!important;overflow-y:auto!important}
    .rank-emblem-stage{width:92px!important;margin:0 auto 5px!important}
    .rank-emblem-stage .rank-big-emblem{width:78px!important;height:65px!important;min-height:65px!important;border-radius:14px!important}
    .rank-emblem-stage .rank-big-vip-icon{width:59px!important;height:59px!important;margin:1px auto 0!important}
    .rank-emblem-stage .rank-level-plate{min-width:62px!important;height:24px!important;margin-top:3px!important;padding:0 9px!important;font-size:11px!important}
    .rank-level-plate #rankModalLevel{font-size:14px!important}
    .rank-total-text{font-size:14px!important;margin:5px 0!important}
    .rank-vip-activation{margin:6px 0!important;padding:7px!important;gap:6px!important;border-radius:10px!important}
    .rank-vip-activation-copy b{font-size:10px!important}
    .rank-vip-activation-copy span{font-size:7px!important}
    .rank-vip-activation-actions .vip-activation-btn{width:82px!important;height:26px!important;font-size:8px!important;padding:0 5px!important}
    .rank-recharge-entry{min-height:46px!important;margin:7px 0 2px!important;padding:5px 7px!important;grid-template-columns:33px 1fr auto!important;gap:6px!important}
    .rank-recharge-diamond{width:31px!important;height:28px!important}
    .rank-recharge-copy b{font-size:11px!important}
    .rank-recharge-copy small,.rank-recharge-arrow{font-size:8px!important}
    .vip-daily-card{padding:9px!important;margin-top:7px!important;border-radius:12px!important}
    .vip-daily-title{font-size:13px!important}
    .vip-daily-sub{font-size:9px!important}
    .vip-daily-level{font-size:10px!important;padding:5px 7px!important}
    .vip-daily-level b{font-size:13px!important}
    .vip-reward-grid{gap:6px!important;margin-top:7px!important}
    .vip-reward-slot{min-height:82px!important;padding:7px 4px!important;border-radius:10px!important}
    .vip-reward-time{font-size:9px!important;margin-bottom:3px!important}
    .vip-reward-amount{font-size:14px!important}
    .vip-reward-btn{height:27px!important;margin-top:5px!important;font-size:9px!important}
    .vip-countdown-panel{gap:5px!important;margin-top:7px!important}
    .vip-countdown-row{padding:6px!important;border-radius:8px!important}
    .vip-countdown-row>span{font-size:8px!important;margin-bottom:3px!important}
    .vip-digital-time{min-width:0!important;padding:4px 5px!important;font-size:11px!important}
    .vip-daily-tip{font-size:8px!important;margin-top:5px!important}

    /* Dressing room */
    .dress-modal{
        width:min(92vw,440px)!important;
        max-height:min(86vh,680px)!important;
        max-height:min(86dvh,680px)!important;
        border-width:2px!important;
    }
    .dress-body{max-height:calc(min(86dvh,680px) - 44px)!important;padding:8px 9px 11px!important;overflow-y:auto!important}
    .dress-tip{font-size:9px!important;line-height:1.45!important;margin-bottom:7px!important}
    .dress-workspace{grid-template-columns:1fr!important;gap:7px!important}
    .dress-preview-panel{position:relative!important;top:auto!important;padding:7px!important;border-radius:10px!important}
    .dress-preview-title{font-size:11px!important;margin-bottom:4px!important}
    .dress-preview-stage{min-height:118px!important;height:118px!important;border-radius:9px!important}
    .dress-preview-visual{width:72px!important;height:114px!important}
    .dress-preview-status{min-height:24px!important;padding:4px!important;font-size:9px!important}
    .dress-preview-hint{font-size:8px!important;margin-top:3px!important}
    .vip-dress-gate-banner{grid-template-columns:30px minmax(0,1fr) auto!important;gap:6px!important;padding:6px!important;margin-bottom:6px!important;border-radius:9px!important}
    .vip-dress-gate-icon{width:28px!important;height:28px!important;font-size:16px!important;border-width:1px!important}
    .vip-dress-gate-banner b{font-size:10px!important}
    .vip-dress-gate-banner small{font-size:7px!important;line-height:1.3!important}
    .vip-dress-gate-banner button{min-height:27px!important;padding:0 7px!important;font-size:8px!important}
    .dress-library-panel .qq-dress-toolbar{top:-7px!important;padding:6px!important}
    .qq-dress-tier-tabs{gap:4px!important;margin-bottom:5px!important}
    .qq-dress-tier{min-height:29px!important;padding:0 7px!important;font-size:9px!important}
    .qq-dress-search-row{grid-template-columns:minmax(0,1fr) auto auto!important;gap:4px!important}
    .qq-dress-search{height:32px!important;padding:0 7px!important;font-size:16px!important}
    .qq-dress-tool-btn{height:32px!important;padding:0 7px!important;font-size:9px!important}
    .qq-dress-selected{padding:5px!important;font-size:8px!important}
    .qq-dress-category-bar{gap:4px!important;padding:5px 0!important}
    .qq-dress-category{height:27px!important;padding:0 7px!important;font-size:8px!important}
    .dress-library-panel .qq-dress-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;min-height:170px!important}
    .qq-dress-card{padding:6px!important;border-radius:9px!important}
    .qq-dress-thumb{height:92px!important;border-radius:7px!important}
    .qq-dress-name{font-size:9px!important;min-height:24px!important}
    .qq-dress-vip-line,.qq-dress-buy-btn{font-size:8px!important}
    .qq-dress-pager{padding:7px 0 2px!important;gap:7px!important}
    .qq-dress-pager button{height:27px!important;padding:0 8px!important;font-size:8px!important}
    .qq-dress-pager span{font-size:9px!important}
    .dress-save-bar{bottom:-11px!important;margin:8px -9px -11px!important;padding:8px 9px 10px!important;gap:6px!important}
    .dress-action-btn{height:36px!important;min-width:0!important;padding:0 8px!important;font-size:10px!important;border-radius:9px!important;flex:1!important}
}

@media (max-width:380px){
    #profileModal{width:90vw!important}
    .vip-guide-modal.vip-guide-v2,.dress-modal{width:94vw!important}
    .vip-guide-v2-benefits{grid-template-columns:1fr!important}
    .vip-guide-v2-hero{grid-template-columns:46px minmax(0,1fr) 66px!important}
    .vip-guide-v2-emblem,.vip-guide-v2-emblem img{width:44px!important;height:44px!important}
}

/* V17.6.8: phone-only compact interaction surfaces and polished header. */
.qq-dress-gender-label{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    margin:0 0 8px;
    padding:5px 10px;
    border:1px solid #ef9fc8;
    border-radius:9px;
    color:#a92f6d;
    background:linear-gradient(180deg,#fff7fb,#ffe7f3);
    box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(181,56,120,.10);
    font-size:12px;
    font-weight:900;
}
.qq-dress-gender-label.male{
    border-color:#79b9ef;
    color:#1267aa;
    background:linear-gradient(180deg,#f2fbff,#ddecff);
    box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(37,117,184,.12);
}

@media (max-width:700px){
    /* 顶部蓝色功能区：更短、更整齐，保留原按钮功能和 ID。 */
    .ui-reference-v9 .top-blue-bar.classic-side-panel{
        gap:3px!important;
        padding:3px!important;
        border-bottom:1px solid #9dcbfa!important;
        background:
            radial-gradient(circle at 78% 8%,rgba(111,203,255,.28),transparent 33%),
            linear-gradient(180deg,#137edb 0%,#0961bb 48%,#064c9b 100%)!important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 18px rgba(0,39,103,.18),0 3px 10px rgba(0,55,128,.16)!important;
    }
    .ui-reference-v9 .side-brand{
        min-height:34px!important;
        height:34px!important;
        padding:1px 5px 3px!important;
        border-bottom:1px solid rgba(199,232,255,.36)!important;
    }
    .ui-reference-v9 .side-brand-mark{
        width:30px!important;height:29px!important;flex-basis:30px!important;
        border-radius:8px!important;font-size:12px!important;
        box-shadow:inset 0 1px 0 #fff5bd,0 2px 5px rgba(43,25,0,.22)!important;
    }
    .ui-reference-v9 .side-brand-copy{gap:0!important}
    .ui-reference-v9 .side-brand-copy b{font-size:14px!important;line-height:15px!important}
    .ui-reference-v9 .side-brand-copy small{font-size:7px!important;line-height:8px!important;opacity:.88!important}
    .ui-reference-v9 .side-nav-item:not(.side-vip-entry),
    .ui-reference-v9 .top-blue-btn.side-nav-item:not(.side-vip-entry),
    .ui-reference-v9 .top-right-btn.side-nav-item:not(.side-vip-entry),
    .ui-reference-v9 .sub-btn.side-nav-item:not(.side-vip-entry),
    .ui-reference-v9 .chat-small-btn.side-nav-item:not(.side-vip-entry){
        height:33px!important;
        min-height:33px!important;
        padding:2px 5px!important;
        gap:4px!important;
        border-radius:9px!important;
        font-size:10.5px!important;
        border-width:1px!important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 2px 4px rgba(0,30,90,.20)!important;
        touch-action:manipulation!important;
    }
    .ui-reference-v9 .side-nav-item:not(.side-vip-entry)>span:last-child,
    .ui-reference-v9 .side-nav-label{font-size:10.5px!important;line-height:1.05!important}
    .ui-reference-v9 .side-nav-item:not(.side-vip-entry) .side-nav-icon:not(.side-nav-vip-icon){
        width:21px!important;height:21px!important;flex-basis:21px!important;font-size:12px!important;
    }
    .ui-reference-v9 .vip-badge.side-vip-entry,
    .ui-reference-v9 .vip-rank-badge.side-vip-entry,
    .ui-reference-v9 .vip-rank-badge.side-vip-entry.elite,
    .ui-reference-v9 .vip-rank-badge.side-vip-entry.empty{
        min-height:48px!important;
        height:48px!important;
        border-radius:10px!important;
        touch-action:manipulation!important;
    }
    html body .main-container.ui-reference-v9 .vip-rank-badge.side-vip-entry .side-vip-copy{
        left:47px!important;right:2px!important;top:7px!important;height:38px!important;gap:2px!important;
    }
    html body .main-container.ui-reference-v9 .vip-rank-badge.side-vip-entry .side-vip-copy .side-nav-label{
        font-size:11px!important;line-height:14px!important;
    }
    html body .main-container.ui-reference-v9 .vip-rank-badge.side-vip-entry .side-vip-copy #vipRankNumber.vip-rank-number,
    html body .main-container.ui-reference-v9 .vip-rank-badge.side-vip-entry .side-vip-copy #vipRankNumber.vip-rank-number.show{
        min-width:29px!important;height:14px!important;padding:0 4px!important;font-size:8px!important;line-height:14px!important;
    }
    .ui-reference-v9 .side-vip-entry .side-nav-vip-icon{left:4px!important;width:43px!important;height:43px!important}
    .ui-reference-v9 .side-vip-entry .side-nav-vip-icon img{width:42px!important;height:42px!important}
    .ui-reference-v9 .room-map-panel{height:50px!important;padding:4px 3px 3px!important}
    .ui-reference-v9 .room-tab-bar{height:43px!important;gap:3px!important}
    .ui-reference-v9 .room-tab,.ui-reference-v10 .room-tab{
        height:40px!important;min-height:40px!important;padding-left:27px!important;border-radius:9px!important;
    }

    /* 所有点击后的弹窗统一缩小，内容超出时在弹窗内滚动。 */
    .profile-modal,
    .friend-modal,
    .setting-modal,
    .magic-modal,
    .rank-modal,
    .vip-guide-modal,
    .room-player-picker-modal,
    .timebook-modal{
        border-radius:12px!important;
        border-width:1px!important;
        box-shadow:0 12px 28px rgba(8,27,70,.30),inset 0 1px 0 rgba(255,255,255,.72)!important;
    }
    .profile-custom-head,
    .profile-modal-head,
    .friend-modal-head,
    .setting-modal-head,
    .magic-modal-head,
    .rank-modal-head,
    .vip-guide-head{
        min-height:36px!important;
        height:auto!important;
        padding:6px 9px!important;
    }
    .profile-modal-title,
    .profile-custom-title,
    .friend-modal-title,
    .setting-modal-title,
    .magic-modal-title,
    .rank-modal-head{font-size:15px!important}
    .profile-close-btn,.friend-close-btn,.setting-close-btn,.room-player-picker-close,.rank-modal-head button{
        min-width:28px!important;min-height:28px!important;padding:3px 6px!important;font-size:12px!important;touch-action:manipulation!important;
    }

    #profileModal{width:min(78vw,310px)!important;height:min(69dvh,510px)!important;max-height:min(69dvh,510px)!important}
    #profileModal .profile-custom-body{padding:3px 9px 10px!important}
    #profileModal .profile-avatar-circle{width:50px!important;height:50px!important;border-width:3px!important}
    #profileModal .profile-hero-name{font-size:15px!important;margin-bottom:4px!important}
    #profileModal .profile-plan-pill{min-height:24px!important;font-size:10px!important}
    #profileModal .profile-menu-card{min-height:32px!important;margin-top:4px!important;font-size:11px!important}
    #profileModal .profile-stats-card{margin:6px 0 5px!important;padding:6px 7px!important;gap:1px 6px!important}
    #profileModal .profile-stats-card>div{font-size:9px!important}
    #profileModal .profile-section-title{font-size:11px!important;margin:7px 0 4px!important;padding-bottom:4px!important}
    #profileModal .avatar-scroll-shell{max-height:92px!important;padding:4px!important}
    #profileModal .profile-input,#profileModal .profile-select{min-height:33px!important;padding:6px 8px!important;margin-bottom:4px!important}
    #profileModal .profile-sign-input{min-height:48px!important}
    #profileModal .save-profile-btn{min-height:34px!important;margin-top:5px!important;font-size:11px!important}

    .room-player-picker-modal{width:min(78vw,310px)!important;max-height:min(62dvh,430px)!important}
    .room-player-picker-head{padding:6px 9px!important}.room-player-picker-title{font-size:14px!important;padding-bottom:4px!important}
    .room-player-picker-body{padding:6px 8px 8px!important}.room-player-picker-item{min-height:38px!important;padding:4px 6px!important}
    .room-player-picker-avatar{width:27px!important;height:27px!important;flex-basis:27px!important}.room-player-picker-name{font-size:11px!important}

    .player-sheet-modal{width:min(79vw,315px)!important;max-height:min(70dvh,520px)!important}
    .player-sheet-body{max-height:calc(min(70dvh,520px) - 36px)!important;padding:6px 8px 9px!important}
    .player-sheet-avatar{width:49px!important;height:49px!important;margin-bottom:3px!important}
    .player-sheet-name-line{font-size:13px!important;margin-bottom:4px!important}.player-sheet-plan{min-width:112px!important;padding:4px 8px!important;font-size:10px!important}
    .player-outfit-public-card,.player-sheet-panel{padding:5px 6px!important;margin-bottom:5px!important;border-radius:8px!important}
    .player-outfit-public-stage{height:96px!important;min-height:96px!important}.player-outfit-public-visual{width:60px!important;height:94px!important}
    .player-sheet-label,.player-outfit-public-title{font-size:10px!important}.player-sheet-value,.player-sheet-stat{font-size:9.5px!important}
    .player-sheet-action{height:32px!important;margin-top:4px!important;font-size:10px!important}

    .home-page-modal{width:min(82vw,340px)!important;max-height:min(72dvh,545px)!important}
    .home-page-body{max-height:calc(min(72dvh,545px) - 36px)!important;padding:6px 8px 9px!important}
    .home-page-avatar{width:49px!important;height:49px!important;margin-bottom:3px!important}.home-page-name-line{font-size:14px!important;margin-bottom:2px!important}
    .home-page-section-title{font-size:11px!important;margin:6px 0 4px!important}.home-photo-grid,.home-outfit-grid{gap:4px!important}
    .home-outfit-card{padding:4px!important}.home-outfit-thumb{height:66px!important}.home-outfit-name{min-height:20px!important;font-size:8px!important}

    .timebook-modal{width:min(80vw,330px)!important;max-height:min(66dvh,480px)!important}
    .timebook-body{max-height:calc(min(66dvh,480px) - 36px)!important;padding:7px 9px 9px!important}
    .timebook-tip{font-size:9px!important;margin-bottom:6px!important}.timebook-grid{gap:5px!important;margin-bottom:7px!important}
    .timebook-placeholder{font-size:10px!important}.timebook-modal .save-profile-btn{min-height:33px!important;font-size:11px!important}

    .setting-modal{width:min(80vw,320px)!important;max-height:min(70dvh,520px)!important}
    .setting-body{max-height:calc(min(70dvh,520px) - 36px)!important;padding:6px 8px 9px!important}
    .setting-item{min-height:40px!important;padding:5px 42px 5px 2px!important}.setting-item-label{font-size:11px!important}.setting-item-desc{font-size:8px!important}
    .music-control-card{padding:6px!important;margin-bottom:5px!important}.music-label{font-size:11px!important}.music-select{padding:5px 6px!important;font-size:10px!important}
    .recharge-setting-card{min-height:44px!important;margin-bottom:5px!important}.install-row{min-height:40px!important;margin-bottom:5px!important;padding:5px 6px!important}
    .setting-bottom-btn{min-height:32px!important;margin-top:4px!important;font-size:10px!important}

    .friend-modal{width:min(79vw,315px)!important;max-height:min(64dvh,455px)!important}
    .friend-add-row{padding:6px 8px!important}.friend-add-input,.friend-add-btn{height:33px!important}.friend-list-wrap{max-height:calc(min(64dvh,455px) - 82px)!important;padding:5px 8px 8px!important}
    .friend-item{min-height:37px!important;padding:4px 5px!important}

    .magic-modal{width:min(80vw,325px)!important;max-height:min(69dvh,510px)!important}
    .magic-modal-body{max-height:calc(min(69dvh,510px) - 82px)!important;padding:6px 8px!important}.magic-spell-item{min-height:42px!important;padding:5px 6px!important}
    .magic-action-row{padding:6px 8px 8px!important}.magic-action-btn{height:32px!important;font-size:10px!important}

    .vip-guide-modal.vip-guide-v2{width:min(84vw,355px)!important;max-height:min(72dvh,550px)!important}
    .vip-guide-v2 .vip-guide-v2-body{max-height:calc(min(72dvh,550px) - 36px)!important;padding:6px 7px 8px!important}
    .vip-guide-v2-hero{grid-template-columns:42px minmax(0,1fr) 62px!important;padding:6px!important}.vip-guide-v2-emblem,.vip-guide-v2-emblem img{width:40px!important;height:40px!important}
    .vip-guide-v2 .vip-guide-main-title{font-size:14px!important}.vip-guide-v2-price b{font-size:16px!important}.vip-benefit-card{min-height:49px!important;padding-top:5px!important;padding-bottom:5px!important}

    .rank-modal{width:min(79vw,315px)!important;height:min(72dvh,545px)!important;max-height:min(72dvh,545px)!important}
    .rank-modal-body{height:calc(100% - 36px)!important;padding:6px 8px 12px!important}.rank-emblem-stage{width:74px!important}.rank-emblem-stage .rank-big-emblem{width:64px!important;height:53px!important;min-height:53px!important}
    .rank-emblem-stage .rank-big-vip-icon{width:48px!important;height:48px!important}.rank-total-text{font-size:11px!important}.vip-daily-card{padding:6px!important;margin-top:5px!important}
    .vip-reward-slot{min-height:68px!important;padding:5px 3px!important}.vip-reward-amount{font-size:11px!important}

    /* 换装页有更多内容，但宽高仍明显小于屏幕。 */
    .dress-modal{width:min(84vw,350px)!important;max-height:min(76dvh,570px)!important}
    .dress-body{max-height:calc(min(76dvh,570px) - 36px)!important;padding:5px 7px 8px!important}
    .dress-tip{display:none!important}
    .dress-workspace{gap:5px!important}
    .dress-preview-panel{
        display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;grid-template-rows:auto auto!important;
        column-gap:6px!important;padding:4px!important;
    }
    .dress-preview-title{grid-column:2!important;margin:5px 0 2px!important;font-size:9px!important;text-align:left!important}
    .dress-preview-stage{grid-column:1!important;grid-row:1/3!important;min-height:82px!important;height:82px!important}
    .dress-preview-visual{width:50px!important;height:80px!important}
    .dress-preview-status{grid-column:2!important;min-height:38px!important;margin-top:0!important;padding:4px!important;font-size:7.5px!important;text-align:left!important}
    .dress-preview-hint{display:none!important}
    .vip-dress-gate-banner{grid-template-columns:24px minmax(0,1fr) auto!important;gap:4px!important;padding:4px!important;margin-bottom:4px!important}
    .vip-dress-gate-icon{width:22px!important;height:22px!important;font-size:12px!important}.vip-dress-gate-banner b{font-size:8px!important}.vip-dress-gate-banner small{display:none!important}
    .vip-dress-gate-banner button{min-height:24px!important;padding:0 5px!important;font-size:7px!important}
    .qq-dress-gender-label{min-height:23px!important;margin-bottom:4px!important;padding:3px 6px!important;font-size:8px!important}
    .dress-library-panel .qq-dress-toolbar{top:-5px!important;padding:4px!important}
    .qq-dress-tier-tabs{gap:3px!important;margin-bottom:4px!important}.qq-dress-tier{min-height:25px!important;padding:0 4px!important;font-size:7.5px!important}.qq-dress-tier.vip::after{display:none!important}
    .qq-dress-search-row{grid-template-columns:minmax(0,1fr) auto!important;gap:3px!important}.qq-dress-search{height:29px!important;padding:0 6px!important}.qq-dress-tool-btn{height:29px!important;padding:0 5px!important;font-size:7px!important}
    #qqDressClearAll{display:none!important}.qq-dress-selected{padding:4px!important;font-size:7px!important}.qq-dress-category-bar{gap:3px!important;padding:3px 0!important}.qq-dress-category{height:24px!important;padding:0 5px!important;font-size:7px!important}
    .dress-library-panel .qq-dress-grid{gap:4px!important;min-height:130px!important}.qq-dress-card{padding:4px!important}.qq-dress-thumb{height:68px!important}.qq-dress-name{font-size:8px!important;min-height:19px!important}.qq-dress-vip-line,.qq-dress-buy-btn{font-size:7px!important}
    .qq-dress-pager{padding:5px 0 1px!important}.qq-dress-pager button{height:24px!important}.dress-save-bar{margin:6px -7px -8px!important;padding:6px 7px 7px!important}.dress-action-btn{height:31px!important;font-size:9px!important}

    button,a,[role="button"]{-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation}
}

@media (max-width:380px){
    #profileModal,.player-sheet-modal,.setting-modal,.friend-modal,.room-player-picker-modal{width:82vw!important}
    .vip-guide-modal.vip-guide-v2,.dress-modal,.home-page-modal{width:87vw!important}
}

/* V17.6.8: the following changes are phone-only; desktop remains unchanged. */
@media (max-width:700px){
    /* 换装预览固定在弹窗滚动区顶部，选衣服时始终能看到人物。 */
    .dress-preview-panel{
        position:sticky!important;
        top:0!important;
        z-index:80!important;
        display:grid!important;
        grid-template-columns:64px minmax(0,1fr)!important;
        grid-template-rows:auto auto!important;
        column-gap:7px!important;
        min-height:94px!important;
        padding:5px!important;
        border:1px solid #8db7e8!important;
        border-radius:10px!important;
        background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(235,244,255,.98))!important;
        box-shadow:0 5px 12px rgba(28,68,127,.18),inset 0 1px 0 #fff!important;
    }
    .dress-preview-title{
        grid-column:2!important;
        grid-row:1!important;
        align-self:end!important;
        margin:3px 0 2px!important;
        font-size:10px!important;
        text-align:left!important;
    }
    .dress-preview-stage{
        grid-column:1!important;
        grid-row:1/3!important;
        min-height:82px!important;
        height:82px!important;
        border-radius:8px!important;
    }
    .dress-preview-visual{width:50px!important;height:80px!important}
    .dress-preview-status{
        grid-column:2!important;
        grid-row:2!important;
        align-self:start!important;
        min-height:38px!important;
        margin:0!important;
        padding:4px 6px!important;
        font-size:8px!important;
        line-height:1.35!important;
        text-align:left!important;
    }
    .dress-preview-hint{display:none!important}
    .dress-library-panel .qq-dress-toolbar{
        position:relative!important;
        top:auto!important;
        z-index:10!important;
    }

    /* 输入框单独一行；喊话/VIP/表情与“发送”同一行，发送固定在最右侧。 */
    .ui-reference-v9 .chat-input-row{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 70px!important;
        grid-template-rows:38px 38px!important;
        gap:5px!important;
        min-height:81px!important;
        align-items:stretch!important;
    }
    .ui-reference-v9 .chat-input{
        grid-column:1/-1!important;
        grid-row:1!important;
        width:100%!important;
        min-width:0!important;
        height:38px!important;
    }
    .ui-reference-v9 .mini-tool-group{
        grid-column:1!important;
        grid-row:2!important;
        width:auto!important;
        min-width:0!important;
        height:38px!important;
        padding:2px 3px!important;
        overflow:hidden!important;
    }
    .ui-reference-v9 .mini-tool{
        width:54px!important;
        min-width:54px!important;
        height:32px!important;
    }
    .ui-reference-v9 .send-button{
        grid-column:2!important;
        grid-row:2!important;
        justify-self:stretch!important;
        align-self:stretch!important;
        width:70px!important;
        min-width:70px!important;
        height:38px!important;
        margin:0!important;
    }

    /* 互动后的卡片与光圈缩小，只影响手机大厅。 */
    .magic-cast-effect{
        top:-62px!important;
        min-width:124px!important;
        max-width:158px!important;
        padding:6px 8px 7px!important;
        border-radius:12px!important;
        box-shadow:0 7px 16px rgba(23,43,80,.22),inset 0 1px 0 rgba(255,255,255,.8)!important;
    }
    .magic-cast-effect .magic-effect-icon{font-size:22px!important;margin-bottom:1px!important}
    .magic-cast-effect .magic-effect-title{font-size:12px!important;line-height:1.15!important}
    .magic-cast-effect .magic-effect-pair{margin:2px 0!important;font-size:7.5px!important}
    .magic-cast-effect .magic-effect-line{font-size:8px!important;line-height:1.35!important}
    .magic-player-aura{
        transform:translate(-50%,-50%) scale(.62)!important;
        transform-origin:50% 50%!important;
    }
    .magic-target-burst{
        transform:translate(-50%,-50%) scale(.62)!important;
        transform-origin:50% 50%!important;
    }
    .magic-scene-caption{
        min-width:126px!important;
        max-width:168px!important;
        padding:5px 9px!important;
        font-size:8px!important;
    }
    .magic-link-beam{height:5px!important;top:-2px!important}
    .magic-link-particle{font-size:14px!important}
}

@media (max-width:380px){
    .dress-preview-panel{
        grid-template-columns:56px minmax(0,1fr)!important;
        min-height:88px!important;
        padding:4px!important;
    }
    .ui-reference-v9 .chat-input-row{grid-template-columns:minmax(0,1fr) 64px!important}
    .ui-reference-v9 .mini-tool{width:48px!important;min-width:48px!important}
    .ui-reference-v9 .send-button{width:64px!important;min-width:64px!important;font-size:12px!important}
}
