body{
    font-family:Arial,sans-serif;
    background:linear-gradient(180deg,#fbf8ff,#f2ebff);
    margin:0;
    padding:15px;
}
.container{
    max-width:980px;
    margin:auto;
}
#modeTitle{
    margin-bottom:10px;
    font-weight:bold;
    font-size:22px;
    color:#5a32a3;
    text-align:center;
}
.filters-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin-bottom:15px;
}
.filters-grid select,
.basic-filters-grid select,
#horoSection select,
select{
    width:100%;
    padding:12px 44px 12px 14px;
    border-radius:10px;
    border:1px solid #bda2ff;
    font-size:15px;
    box-sizing:border-box;
    height:48px;
    color:#4f2ca0;
    font-weight:600;
    line-height:1.2;
    background-color:#efe6ff !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%237b4ed8' d='M5.5 7.5 10 12l4.5-4.5 1.5 1.5-6 6-6-6z'/%3E%3C/svg%3E"), linear-gradient(180deg,#f7f2ff 0%,#eadcff 100%) !important;
    background-repeat:no-repeat, no-repeat !important;
    background-position:right 14px center, 0 0 !important;
    background-size:16px 16px, 100% 100% !important;
    box-shadow:0 3px 10px rgba(123,78,216,0.12);
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.filters-grid select:focus,
.basic-filters-grid select:focus,
#horoSection select:focus,
select:focus{
    outline:none;
    border-color:#8f63ef;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%235a32a3' d='M5.5 7.5 10 12l4.5-4.5 1.5 1.5-6 6-6-6z'/%3E%3C/svg%3E"), linear-gradient(180deg,#fbf8ff 0%,#e6d6ff 100%) !important;
    box-shadow:0 0 0 3px rgba(123,78,216,0.16);
}
.filters-grid select option,
.basic-filters-grid select option,
#horoSection select option,
select option{
    color:#333;
    background:#fff;
}
select::-ms-expand{
    display:none;
}
.search-box button,
#horoSection button,
#normalSearchBtn button,
.member-login-btn,
.my-account-btn{
    padding:12px 20px;
    background:linear-gradient(90deg,#7b4ed8,#9b6dff);
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(123,78,216,0.22);
    text-decoration:none;
    display:inline-block;
}
.top-action-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:15px;
}
.right-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:250px;
}
#memberStatus{
    color:#4b2e83;
    font-weight:bold;
    font-size:14px;
}
#horoSection{
    display:none;
    background:#fff;
    padding:15px;
    border-radius:12px;
    margin-bottom:15px;
    box-shadow:0 6px 16px rgba(100,60,160,0.1);
    border-top:5px solid #7b4ed8;
}
#horoSection select{
    margin:5px 8px 5px 0;
}
#horoBanner{
    display:none;
    background:#e7dbff;
    color:#4b2e83;
    padding:12px;
    border-radius:8px;
    margin-bottom:15px;
    font-weight:bold;
}
.card{
    background:#fff;
    padding:15px;
    border-radius:12px;
    margin-bottom:15px;
    box-shadow:0 6px 16px rgba(100,60,160,0.1);
    border:2px solid #7b4ed8;   /* full border */
}
.profile-card{
    position:relative;
}
.profile-wrapper{
    display:flex;
    gap:15px;
}

.profile-info{
    flex:1;
    line-height:1.6;
    word-break:break-word;
    color:#333;
    padding-bottom:10px;
}

.photo-slider{
    width:200px;
    height:469px;
    min-width:200px;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    background:#ddd;
}
.slide-photo{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 0.6s ease;
    cursor:pointer;
    pointer-events:none;
}
.slide-photo.active{
    opacity:1;
    pointer-events:auto;
}
.photo-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(123,78,216,0.82);
    color:#fff;
    padding:5px 8px;
    cursor:pointer;
    border-radius:5px;
    z-index:10;
    user-select:none;
}
.photo-arrow.left{ left:5px; }
.photo-arrow.right{ right:5px; }
.hidden-phone{
    color:#7b4ed8;
    font-weight:bold;
}
.hidden-phone.locked{
    color:#999;
    cursor:not-allowed;
    pointer-events:none;
}
.hidden-phone.revealable{
    cursor:pointer;
    text-decoration:underline;
}
.modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:10000;
    align-items:center;
    justify-content:center;
}
.modal-box{
    background:#fff;
    width:min(420px, 92vw);
    border-radius:14px;
    padding:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.18);
}
.modal-box h3{
    margin-top:0;
    color:#4b2e83;
}
.modal-box input{
    width:100%;
    padding:12px;
    margin-bottom:10px;
    border:1px solid #d5c9ff;
    border-radius:8px;
    box-sizing:border-box;
}
.modal-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
}
.modal-actions button{
    padding:10px 14px;
}
.secondary-btn{
    background:#eee !important;
    color:#333 !important;
    box-shadow:none !important;
}
#photoPopup{
    display:none;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.9);
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.close-btn{
    position:absolute;
    top:20px;
    right:20px;
    font-size:30px;
    color:#fff;
    cursor:pointer;
    z-index:20;
}
#photoPopup img{
    max-width:90%;
    max-height:90%;
    border-radius:8px;
    transition:opacity 0.45s ease, transform 0.25s ease;
    transform:scale(1);
    transform-origin:center center;
    cursor:zoom-in;
}
#photoPopup img.zoom-area-active{
    cursor:crosshair;
}
#photoPopup img.fade-out{
    opacity:0;
}
.popup-zoom-controls{
    position:absolute;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:25;
}
.popup-zoom-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:rgba(123,78,216,0.92);
    color:#fff;
    font-size:24px;
    font-weight:bold;
    cursor:pointer;
    line-height:42px;
    text-align:center;
}
.popup-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
    color:#fff;
    cursor:pointer;
    user-select:none;
    z-index:20;
}
.popup-arrow.left{ left:20px; }
.popup-arrow.right{ right:20px; }
#pagination{
    text-align:center;
    margin-top:20px;
}
#pagination button{
    margin:3px;
    padding:8px 12px;
    border-radius:5px;
    border:1px solid #d5c9ff;
    cursor:pointer;
    background:#fff;
}
#pagination button.active{
    background:#7b4ed8;
    color:#fff;
    border-color:#7b4ed8;
}
.search-results-toolbar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    margin:0 0 12px;
}
.info-btn{
    padding:12px 20px;
    background:linear-gradient(90deg,#7b4ed8,#9b6dff);
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:bold;
    box-shadow:0 6px 16px rgba(123,78,216,0.22);
}
.info-btn:hover{
    transform:translateY(-1px);
}
.content-modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.60);
    z-index:11000;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.content-modal-box{
    background:#fff;
    width:min(760px, 96vw);
    max-height:88vh;
    overflow:auto;
    border-radius:18px;
    padding:22px;
    box-shadow:0 18px 50px rgba(0,0,0,0.22);
    border:1px solid #ece3ff;
}
.content-modal-box h3{
    margin:0 0 14px;
    color:#4b2e83;
    font-size:24px;
}
.content-modal-box h4{
    color:#5a32a3;
    margin:18px 0 8px;
}
.content-modal-box p,
.content-modal-box li{
    line-height:1.75;
    color:#333;
}
.content-modal-box ul{
    margin:8px 0 0 18px;
    padding:0;
}
.content-card{
    background:#faf7ff;
    border:1px solid #e8ddff;
    border-radius:14px;
    padding:14px;
    margin:12px 0;
}
.price-highlight{
    font-size:18px;
    font-weight:bold;
    color:#4b2e83;
}
.chat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.chat-tile{
    background:linear-gradient(180deg,#fbf8ff 0%, #f4eeff 100%);
    border:1px solid #ded0ff;
    border-radius:14px;
    padding:16px;
}
.chat-tile-title{
    color:#4b2e83;
    font-weight:bold;
    font-size:18px;
    margin-bottom:8px;
}
.chat-link{
    display:inline-block;
    margin-top:10px;
    text-decoration:none;
    background:linear-gradient(90deg,#7b4ed8 0%, #9a6eff 100%);
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    font-weight:bold;
}
.top-filter-row{
    display:none;
    justify-content:flex-start;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
    flex-wrap:wrap;
}
.top-filter-btn{
    padding:10px 16px;
    background:linear-gradient(90deg,#7b4ed8,#9b6dff);
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(123,78,216,0.22);
    font-weight:bold;
}
.top-filter-btn.active{
    outline:2px solid #5a32a3;
}
.count-badge{
    display:inline-block;
    min-width:18px;
    padding:1px 6px;
    margin-left:6px;
    border-radius:999px;
    background:#fff;
    color:#7b4ed8;
    font-size:12px;
    font-weight:bold;
}
.new-badge{
    display:inline-block;
    margin-left:8px;
    padding:2px 7px;
    border-radius:999px;
    background:#ff5a84;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    vertical-align:middle;
}
.complaint-box{
    width:180px;
    border:1px solid #90ee90;
    border-radius:10px;
    background:rgba(144,238,144,0.1);


    position:absolute;
    right:15px;
    bottom:15px;
    margin-left:0;
    padding:8px 10px;
    border:1px solid #e0d3ff;
    border-radius:10px;
    background:#faf7ff;
    min-width:220px;
}
.complaint-title{
    font-size:12px;
    font-weight:bold;
    color:#6a40b8;
    margin-bottom:6px;
}
.complaint-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:#333;
    margin:4px 0;
    cursor:pointer;
}
.complaint-item input[type="radio"]{
    margin:0;
}
.complaint-count{
    margin-top:6px;
    font-size:12px;
    color:#6a5b8d;
    font-weight:bold;
}

.profile-actions{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-left:auto;
}
.complaint-top-right{
    align-self:flex-start;
}
.profile-action-btn{
    border:none;
    background:transparent;
    padding:0 2px;
    cursor:pointer;
    font-size:28px;
    line-height:1;
    box-shadow:none;
}
.profile-action-btn:hover{
    transform:translateY(-1px);
}
.like-btn{
    color:#1ea34a;
}
.like-btn.active{
    color:#13853a;
}
.dislike-btn{
    color:#f28c28;
}
.dislike-btn.active{
    color:#de7412;
}
.profile-action-btn.active{
    opacity:1 !important;
    outline:2px solid #7b4ed8;
}

.basic-filters-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:10px;
    margin-bottom:12px;
}
.advanced-search-toggle{
    margin-bottom:12px;
}
.advanced-search-toggle button{
    padding:12px 20px;
    background:linear-gradient(90deg,#7b4ed8,#9b6dff);
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(123,78,216,0.22);
    font-weight:bold;
}
#advancedSearchSection{
    display:none;
}
#advancedSearchSection.open{
    display:block;
}
@media(max-width:900px){
    .basic-filters-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}
@media(max-width:700px){
    .basic-filters-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width:700px){
    .profile-wrapper{
        flex-direction:column;
    }
    .photo-slider{
        width:100%;
        height:548px;
        min-width:100%;
    }
    .filters-grid{
        grid-template-columns:1fr;
    }
    .top-action-row{
        flex-direction:column;
        align-items:stretch;
    }
    .right-actions{
        min-width:auto;
    }
    .chat-grid{
        grid-template-columns:1fr;
    }
}



.profile-top-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    width:100%;
}

.profile-top-row strong{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.profile-actions{
    display:flex !important;
    align-items:center;
    gap:8px;
    margin-left:auto !important;
    width:auto;
    flex-shrink:0;
    position:static !important;
}

.complaint-box{
    position:absolute;
    right:15px;
    bottom:15px;
}


.complaint-box{
    width:180px !important;
    border:2px solid #90ee90 !important;
    border-radius:14px !important;
    background:#eefbea !important;
}


.complaint-box{
    width:160px !important;
    max-width:160px !important;
    min-width:160px !important;
    box-sizing:border-box !important;
}


.likes-heart{
    color:#ff4d6d;
    -webkit-text-stroke:1px white;
    font-size:22px;
    line-height:1;
    display:inline-block;
    transform-origin:center;
    text-shadow:0 0 8px rgba(255,77,109,0.9);
}
.likes-heart.vibrate{
    animation:likesHeartShake 0.22s ease-in-out infinite;
}
.likes-heart.stop{
    animation:none !important;
}
@keyframes likesHeartShake{
    0%{ margin-left:0; }
    25%{ margin-left:1px; }
    50%{ margin-left:-1px; }
    75%{ margin-left:1px; }
    100%{ margin-left:0; }
}


/* Improve yellow banner edge */
[style*="#fff3cd"]{
    border:2px solid #856404 !important;
    border-radius:10px !important;
}

/* Back banner */
.back-banner{
    background:#f5f0ff;
    border:2px solid #7b4ed8;
    border-radius:10px;
    padding:10px;
    margin:10px 0 15px 0;
    text-align:center;
}
.back-banner a{
    text-decoration:none;
    color:#7b4ed8;
    font-weight:bold;
}


.back-banner button{
    background:linear-gradient(90deg,#7b4ed8,#9a6eff);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 18px;
    font-weight:bold;
    cursor:pointer;
}
.back-banner button:hover{
    opacity:0.95;
}


.show-my-number-box{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    width:92px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    z-index:5;
}
.show-my-number-btn{
    width:92px;
    min-height:78px;
    padding:8px 6px;
    border:4px solid #8bd36b;
    background:#c9f4b8;
    color:#2f5d1f;
    border-radius:6px;
    font-weight:bold;
    font-size:14px;
    line-height:1.15;
    cursor:pointer;
    text-align:center;
    box-shadow:none;
}
.show-my-number-box.showed .show-my-number-btn{
    background:#ffe066;
    border-color:#d6b53c;
    color:#5c4a00;
}
.show-my-number-btn:disabled{
    opacity:0.85;
    cursor:default;
}
.show-my-number-count{
    font-size:22px;
    line-height:1;
    color:#000;
    font-weight:bold;
    text-align:center;
}
@media(max-width:700px){
    .show-my-number-box{
        position:static;
        transform:none;
        width:100%;
        margin:8px 0 12px;
        align-items:flex-end;
    }
}


.showed-me-btn{
    background:#c9f4b8 !important;
    color:#2f5d1f !important;
    box-shadow:0 6px 16px rgba(84,146,48,0.20) !important;
    border:2px solid #8bd36b !important;   /* thinner border */
}

.showed-me-btn .showed-me-count-badge{
    background:#fff !important;
    color:#2f5d1f !important;
}
.showed-me-btn.active{
    background:#ffe066 !important;         /* yellow after click */
    border:2px solid #d6b53c !important;   /* keep same thickness */
    color:#5c4a00 !important;
}



/* Show banner on all sizes */
.show-my-number-mobile-banner{
    display:block;
    position:relative;
}
.show-my-number-mobile-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin:0 0 12px 0;
}
.show-my-number-mobile-banner{
    flex:1;
    background:#fff3cd;
    border:2px solid #d4a017;
    border-radius:10px;
    color:#000;
    font-weight:600;
    padding:10px 12px;
    line-height:1.35;
    box-sizing:border-box;
    text-align:left;
    min-height:78px;
}
.show-my-number-mobile-banner::after{
    content:"";
    position:absolute;
    top:50%;
    right:-12px;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:12px solid #d4a017;
}
.show-my-number-mobile-banner::before{
    content:"";
    position:absolute;
    top:50%;
    right:-10px;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-left:11px solid #fff3cd;
}
@media(max-width:700px){
    .profile-card .show-my-number-mobile-row .show-my-number-box{
        position:static;
        transform:translateY(-4px);
        width:92px;
        min-width:92px;
        margin:0;
        align-items:center;
    }
}
@media(min-width:701px){
    .profile-card .show-my-number-mobile-row .show-my-number-box{
        position:static;
        transform:translateY(-4px);
        width:92px;
        min-width:92px;
        margin:0;
        align-items:center;
    }
}

/* === SEARCH BUTTON COLOR FIX === */
#normalBtn{
    background:#27e808 !important;
    background-image:none !important;
    color:#000 !important;
}
#memberDirectSearchBtn{
    background:#0cd1e8 !important;
    background-image:none !important;
    color:#000 !important;
}
#normalBtn:hover{
    background:#1fd107 !important;
}
#memberDirectSearchBtn:hover{
    background:#09bcd1 !important;
}


.horoscope-link-banner{
    display:none;
    text-align:center;
    margin:8px 0 10px;
}
.horoscope-link-banner a{
    display:block;
    background:#2F539B;
    color:#ffffff;
    padding:12px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
    line-height:1.35;
    box-shadow:0 6px 16px rgba(47,83,155,0.22);
}
.horoscope-link-banner a:hover{
    opacity:0.95;
}


.member-account-dropdown{
    display:none;
    width:100%;
    padding:12px 44px 12px 14px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(123,78,216,0.22);
    color:#fff;
    font-weight:bold;
    background-color:#7b4ed8 !important;
    background-image:linear-gradient(90deg,#7b4ed8,#9b6dff) !important;
    appearance:auto !important;
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;
}
.member-account-dropdown option{
    color:#333;
    background:#fff;
}


/* === MAIN SEARCH FULL WIDTH LAYOUT FIX === */
#mainSearchNumberArea{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:8px !important;
    margin-bottom:0 !important;
}
#mainSearchNumberArea .member-number-row{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    gap:8px !important;
}
#mainSearchNumberArea #normalBtn{
    display:block !important;
    width:100% !important;
    margin:0 !important;
}
#mainSearchNumberArea #memberSearchBox{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:48px !important;
    padding:12px 14px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}
#mainSearchNumberArea #memberDirectSearchBtn{
    flex:0 0 auto !important;
    width:auto !important;
    height:48px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}



/* === Complaint box full-width tight layout under planetary positions === */
.profile-card .profile-info > .complaint-box-under-planets,
.profile-card .complaint-box-under-planets,
.complaint-box-under-planets{
    position:static !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    top:auto !important;
    display:block !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:12px 0 0 0 !important;
    padding:12px 14px !important;
    box-sizing:border-box !important;
    border:2px solid #90ee90 !important;
    border-radius:14px !important;
    background:#eefbea !important;
}
.complaint-box-under-planets .complaint-title{
    font-size:13px !important;
    font-weight:bold !important;
    color:#4b2e83 !important;
    margin:0 0 7px 0 !important;
    text-align:left !important;
}
.complaint-box-under-planets .complaint-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    column-gap:22px !important;
    row-gap:3px !important;
    align-items:center !important;
}
.complaint-box-under-planets .complaint-item{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
    font-size:13px !important;
    line-height:1.12 !important;
    color:#333 !important;
    white-space:nowrap !important;
}
.complaint-box-under-planets .complaint-item input[type="radio"]{
    flex:0 0 auto !important;
    margin:0 !important;
}

.complaint-box-under-planets .complaint-cancel-item{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:6px !important;
    margin:4px 0 0 0 !important;
    padding-left:0 !important;
    width:100% !important;
}

    margin:6px 0 0 0 !important;
    padding:0 !important;
    text-align:left !important;
    white-space:nowrap !important;
}
.complaint-box-under-planets .complaint-count{
    margin-top:7px !important;
    font-size:13px !important;
    color:#6a5b8d !important;
    font-weight:bold !important;
}
@media(max-width:700px){
    .complaint-box-under-planets{
        max-width:100% !important;
    }
    .complaint-box-under-planets .complaint-grid{
        column-gap:14px !important;
        row-gap:3px !important;
    }
}



/* === Member Chat button + quick message popup === */
.member-chat-top-btn{
    background:#1D4EC2 !important;
    color:#fff !important;
    border-color:#1D4EC2 !important;
}
.member-chat-top-btn:hover{
    opacity:.95;
}
.quick-message-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:13000;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.quick-message-box{
    width:min(430px,94vw);
    background:#fff;
    border-radius:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.25);
    overflow:hidden;
    border:1px solid #dce6ff;
}
.quick-message-head{
    background:#1D4EC2;
    color:#fff;
    padding:14px 16px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.quick-message-close{
    border:none;
    background:rgba(255,255,255,.18);
    color:#fff;
    border-radius:999px;
    padding:6px 10px;
    cursor:pointer;
    font-weight:bold;
}
.quick-message-body{
    padding:16px;
}
.quick-message-body textarea{
    width:100%;
    min-height:110px;
    resize:vertical;
    border:1px solid #c9d6ff;
    border-radius:12px;
    padding:12px;
    font-family:Arial,sans-serif;
    font-size:15px;
    line-height:1.45;
    box-sizing:border-box;
}
.quick-message-count{
    margin-top:8px;
    color:#5a6380;
    font-size:13px;
    text-align:right;
}
.quick-message-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:14px;
}
.quick-message-actions button{
    border:none;
    border-radius:10px;
    padding:10px 14px;
    font-weight:bold;
    cursor:pointer;
}
.quick-message-cancel{
    background:#eeeeee;
    color:#333;
}
.quick-message-send{
    background:#1D4EC2;
    color:#fff;
}