:root{
    --pink:#f5476e;
    --pink-light:#ff7d96;
    --pink-dark:#ea2d5c;
    --white:#ffffff;
    --bg:#fafafa;
    --text:#222;
    --text-light:#777;
    --border:#ececec;
    --shadow:0 15px 35px rgba(245,71,110,.12);
    --radius:22px;
    --pink-1:#fd2f6f;
    --pink-2:#ff5164;
    --pink-3:#ff7a4d;
    --wine-1:#3a0f1e;
    --wine-2:#5c1830;
    --wine-3:#7a1530;
    --gold:#ffd54a;
    --white-95: rgba(255,255,255,.95);
    --white-85: rgba(255,255,255,.85);
    --white-70: rgba(255,255,255,.70);
    --white-55: rgba(255,255,255,.55);}
    .profile-page{width:100%;padding:28px 28px 40px;}
.profile-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:38px;}
.profile-header-left{flex:1;min-width:0;}
.profile-header-left h1{font-size:28px;font-weight:800;color:#1b1b1b;margin:0 0 10px;letter-spacing:-0.4px;}
.profile-header-left p{max-width:520px;font-size:14px;line-height:1.6;color:#888;margin:0;}
.profile-header-right{display:flex;align-items:center;gap:14px;}
.profile-settings-btn{width:52px;height:52px;border:none;border-radius:16px;background:#fff;border:1px solid #ffb1ca;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s ease;box-shadow:0 2px 15px rgba(246, 51, 93, 0.168);}
.profile-settings-btn i{font-size:20px;color:#f5476e;transition:.25s;}
.profile-settings-btn:hover{transform:translateY(-3px);border-color:#f5476e;box-shadow:0 14px 28px rgba(245,71,110,.16);}
.profile-settings-btn:hover i{color:#f5476e;}
.account-hero{position: relative;width: 100%;max-width: min(92vw, 1500px);min-height: 380px;height: auto;padding: clamp(20px,2vw,32px);margin: 40px auto;overflow: hidden;border-radius: clamp(24px,2vw,34px);background: linear-gradient(135deg,#fe5283 0%,#f75c92 45%,#ff2d74 100%);box-shadow: 0 5px 20px rgba(255,70,120,.18);}
.hero-container{display:grid;grid-template-columns:minmax(520px,1fr) minmax(360px,460px);gap:clamp(20px,2vw,36px);height:100%;}
.hero-left{height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:clamp(0px,2vw,10px);}
.profile-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2vw,36px);align-items:center;    }
.avatar-wrap{position:relative;flex-shrink:0;width:clamp(140px,10vw,160px);height:clamp(140px,10vw,160px);padding:6px;border-radius:50%;background:#fff;box-shadow:0 15px 40px rgba(0,0,0,.18);    }
#profileAvatar{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.camera-btn{position:absolute;right:-10px;bottom:12px;width:clamp(52px,4vw,60px);height:clamp(52px,4vw,60px);border:none;border-radius:50%;background:#fff;border: 3px solid #f5476e;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.15);}
.camera-btn svg{width:30px;}
.profile-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
.name-row{display:flex;align-items:center;gap:10px;}
#profileName{font-size:clamp(28px,2.4vw,38px);font-weight:800;color:#fff;line-height:1.1;margin:0;}
.verified-badge{width:34px;height:34px;display:flex;justify-content:center;align-items:center;}
.verified-badge svg{width: 35px;}
.profile-username{margin-top:10px;font-size:clamp(16px,1.4vw,20px);font-weight:600;color:rgba(255,255,255,.92);}
.profile-bio{margin-top:15px;max-width:320px;font-size:clamp(14px,1vw,16px);line-height:1.6;color:#fff;min-height:54px;}
.profile-buttons{display:flex;flex-wrap:wrap;gap:22px;margin-top:36px;margin-left: 10px;}
.hero-btn{border:none;outline:none;cursor:pointer;width:clamp(165px,13vw,190px);height:clamp(60px,5vw,70px);font-size:clamp(15px,1vw,18px);display:flex;align-items:center;justify-content:center;gap:10px;border-radius:15px;background:rgb(255, 244, 247);border:1px solid #ffe5ee;color:#ff4d86;box-shadow:inset 0 2px 3px rgba(255, 191, 212, 0.95),inset 0 -3px 8px rgba(255, 40, 140, 0.06),inset 2px 0 3px rgba(255, 175, 211, 0.5),0 12px 30px rgba(255,95,145,.20);transition:.25s;font-family:inherit;font-weight:700;transition:.25s;}
.hero-btn svg{width:28px;height:24px;flex:none;}
.hero-btn-light svg{width: 32px;height: 32px;}
.hero-btn-light:hover{transform:translateY(-1px);box-shadow:0 24px 40px rgb(254, 75, 123);}
.hero-btn-icon:hover{transform:translateY(-1px);box-shadow:0 24px 40px rgb(254, 75, 123);}
.hero-star{position:absolute;color:#fff;font-size:26px;opacity:.4;}
.star1{top:10px;left:150px;font-size: 25px;}
.star2{top:40px;left:540px;}
.star3{left:15px;top:130px;font-size: 20px;}
.hero-circle{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);}
.hero-circle-1{width:300px;height:300px;left:-120px;top:-120px;}
.hero-circle-2{width:320px;height:320px;right:-180px;bottom:-170px;}
.hero-right{display:flex;justify-content:center;align-items:center;}
.activity-card{width:100%;padding:clamp(22px,2vw,28px);background:#fff5f7;border-radius:28px;box-shadow:0 20px 60px rgba(0,0,0,.08);}
.activity-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.activity-header h2{font-size:clamp(18px,1.5vw,22px);color:#ff4f87;margin-bottom:15px;}
.activity-header h2 span{background: rgb(255, 223, 232);border-radius: 50%;padding: 6px 10px;margin-right: 5px;}
.activity-header p{font-size:clamp(12px,.9vw,14px);color:#666;}
.activity-trend{width:40px;height:40px;border-radius:14px;background: rgb(255, 223, 232);display:flex;justify-content:center;align-items:center;}
.activity-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:0px;}
.activity-item{border-radius:18px;padding:10px;border:1px solid #ffe5ee;background: rgb(255, 251, 251);display:flex;align-items:center;gap:18px;}
.activity-icon{width:45px;height:45px;border-radius:25%;display:flex;justify-content:center;align-items:center;background: rgb(255, 223, 232);}
.orange{background: hsl(286, 100%, 93%);}
.activity-item h3{font-size:clamp(18px,1.5vw,22px);font-weight:600;color:#222222;margin-bottom:0px;}
.activity-item span{font-size:11px;color:#777;}
.activity-bottom{margin-top:22px;min-height:90px;height:auto;display:grid;grid-template-columns:100px minmax(0,1fr) 80px;align-items:center;gap:12px;padding:8px 14px 8px 2px;border-radius:24px;border:1px solid #ffe5ee;background:linear-gradient(135deg,#fff5f8,#fffdfd);}
.activity-bot{display:flex;justify-content:center;align-items:center;}
.activity-bot img{width:105px;max-width:100%;height:auto;}
.activity-time{min-width:0;}
.time-title{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:#5a5a5a;font-size:12px;font-weight:600;}
.time-title svg{width:16px;height:16px;flex:none;}
.time-title span{white-space:nowrap;}
.activity-time h2{margin:0 0 6px;font-size:14px;color:#ff4d86;line-height:1.2;}
.activity-time p{margin:0;font-size:12px;color:#5a5a5a;font-weight:600;}
.activity-progress{width:100%;display:flex;justify-content:center;align-items:center;border-left:2px dashed #ffd4df;padding-left:12px;flex-shrink:0;}
.progress-circle{width:clamp(58px,4vw,65px);height:clamp(58px,4vw,65px);border-radius:50%;background:conic-gradient( #ff4d86 0 260deg, #ffd4e1 260deg 360deg);display:flex;justify-content:center;align-items:center;}
.progress-circle span{width:80%;height:80%;border-radius:50%;background:#fff;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:700;}
.profile-overview-section{margin-bottom:35px;}
.section-heading h2{font-size:22px;font-weight:700;color:#222;margin-bottom:30px;}
.overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px;}
.overview-card{background:#fff;border-radius:24px;padding:26px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow);transition:.35s;cursor:pointer;border:1px solid #ffd4e1;}
.overview-card:hover{transform:translateY(-6px);}
.overview-icon{width:55px;height:55px;border-radius:18px;display:flex;justify-content:center;align-items:center;color:#fff;background:linear-gradient(135deg,#f5476e,#ff8ba4);flex-shrink:0;}
.overview-icon svg{fill: white;width: 35px;}
.overview-content{flex:1;}
.overview-content span{color:#656565;font-size:14px;}
.overview-content h2{margin-top:5px;font-size:30px;color:#222;font-weight:700;}
.premium-membership-section{position:relative;display:grid;grid-template-columns:140px 1fr;gap:36px;align-items:center;padding:36px 42px;margin:40px 0;border-radius:30px;background:rgba(255,255,255,.96);border:1px solid rgba(255,180,205,.35);overflow:hidden;box-shadow:0 15px 45px rgba(255,80,140,.08),inset 0 1px 0 rgba(255,255,255,.9);}
.premium-membership-section::before{content:"";position:absolute;width:420px;height:420px;right:-220px;top:-220px;border-radius:50%;background:rgba(245,71,110,.04);}
.premium-membership-section::after{content:"";position:absolute;width:260px;height:260px;left:-120px;bottom:-150px;border-radius:50%;background:rgba(245,71,110,.03);}
.premium-left{position:relative;z-index:2;}
.premium-crown{position:relative;border-radius:28px;display:flex;justify-content:center;align-items:center;color:#fff;overflow:visible;}
.premium-crown img{width: 180px;filter:drop-shadow(0 14px 30px rgba(255, 60, 129, 0.707));}
.premium-center{position:relative;z-index:2;}
.premium-heading{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.premium-heading h2{margin:0;font-size:26px;font-weight:800;color:#222;}
.premium-title-row p{margin-top:8px;color:#777;font-size:14px;}
.premium-status{padding:7px 16px;border-radius:40px;background:#ffe8f1;color:#ff4d86;font-size:13px;font-weight:700;}
.premium-status.active{background:rgb(255, 223, 232);color:#f5476e;}
.premium-info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin:34px 0 20px;}
.premium-info span{display:block;margin-bottom:8px;color:#888;font-size:14px;}
.premium-info h4{margin:0;font-size:18px;font-weight:700;color:#222;}
.days-left{color:#ff4d86;}
/*===== PROGRESS BAR=========*/
.premium-progress{width:100%;height:10px;background:#f3dce4;border-radius:30px;overflow:hidden;margin-bottom:18px;}
.premium-progress-fill{width:72%;height:100%;border-radius:30px;background:linear-gradient(90deg,#ff3d84,#ff78a6);}
.premium-footer{font-size:14px;color:#777;}
.premium-footer strong{color:#444;font-weight:700;}
.manage-premium-btn:hover{background:#ff4d86;color:#fff;transform:translateY(-2px);}
.manage-premium-btn{position:absolute;top:30px;right:36px;height:45px;padding:0 24px;border-radius:14px;border:2px solid #ff5a8d;background:#fff;color:#ff4d86;font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px;cursor:pointer;transition:.3s;box-shadow:0 8px 20px rgba(255,90,140,.08);}
.manage-premium-btn:hover{background:#ff4d86;color:#fff;transform:translateY(-2px);}
.manage-premium-btn i{margin:0;}
/*========== GALLERY ==========*/
.profile-gallery-section{margin-bottom:60px;}
.section-heading p{font-size: 14px;color: #888;margin-top: -20px;margin-bottom: 40px;}
.profile-gallery-tabs{display:flex;width:100%;gap:16px;margin:25px 0 30px;}
.gallery-tab{flex:1;display:flex;justify-content:center;align-items:center;gap:5px;padding:15px 20px;border:none;background:#f0eeee00;cursor:pointer;font-size:16px;font-weight:600;transition:.3s;}
.gallery-tab svg{fill: #f5476e;width: 20px;height: 20px;}
.gallery-tab.active{border-bottom: 4px solid rgb(255, 62, 94);color:#f5476e;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.gallery-grid.active-gallery{display:grid;}
.gallery-item{aspect-ratio:1/1;border-radius:18px;overflow:hidden;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.45s;}
.gallery-overlay{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));display:flex;justify-content:space-between;align-items:center;color:#030303;font-size:14px;font-weight:600;opacity:0;transition:.35s;}
.gallery-overlay span{display:flex;align-items:center;gap:8px;}
.gallery-overlay i{color:#ff8ba4;}
.gallery-button-area{text-align:center;margin-top:35px;}
.view-gallery-btn{border:none;padding:15px 34px;border-radius:15px;background:linear-gradient(135deg,#f5476e,#f82956);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:.35s;}
.view-gallery-btn:hover{transform:translateY(-4px);box-shadow:0 18px 35px rgba(245,71,110,.28);}
/* Empty Gallery */
.gallery-empty{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:80px 20px;border:2px dashed #f2d6de;border-radius:25px;background:#fff;}
.gallery-empty i{font-size:55px;color:#f5476e;margin-bottom:18px;}
.gallery-empty h3{font-size:22px;color:#333;margin-bottom:8px;}
.gallery-empty p{color:#888;font-size:15px;text-align:center;max-width:320px;}
/*========== ACCOUNT & SECURITY ==========*/
.account-security-section{margin-bottom:40px;}
.security-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.security-card{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;background:#fff;border-radius:22px; border:1px solid #ffd4e1; box-shadow:var(--shadow);cursor:pointer;transition:.35s;}
.security-card:hover{border-color:#f5476e;box-shadow:0 18px 35px rgba(245,71,110,.15);}
.security-card-left{display:flex;align-items:center;gap:18px;}
.security-icon{width:58px;height:58px;border-radius:18px;display:flex;justify-content:center;align-items:center;color:#fff;flex-shrink:0;}
.security-icon svg{width: 35px; height: 35px;}
.security-icon.pink{background:linear-gradient(135deg,#f5476e,#ff8ba4);}
.security-icon.blue{background:linear-gradient(135deg,#4d9fff,#6fc7ff);}
.security-icon.purple{background:linear-gradient(135deg,#8a5cff,#b288ff);}
.security-icon.green{background:linear-gradient(135deg,#2fc56d,#62df93);}
.security-icon.orange{background:linear-gradient(135deg,#ff9933,#ffc14d);}
.security-icon.red{background:linear-gradient(135deg,#ff4d4d,#ff7878);}
.security-card h3{font-size:16px;color:#222;margin-bottom:5px;}
.security-card p{font-size:12px;color:#888;}
.security-card>i{font-size:18px;color:#aaa;transition:.3s;}
.security-card:hover>i{transform:translateX(6px);color:#f5476e;}
.security-card.danger:hover{border-color:#ff4d6d;background:#fff8f9;}
.security-card.danger:hover h3{color:#ff4d6d;}
/*========== SCROLLBAR ==========*/
.profile-gallery-tabs::-webkit-scrollbar{height:6px;}
.profile-gallery-tabs::-webkit-scrollbar-thumb{background:#f5476e;border-radius:20px;}
.profile-gallery-tabs::-webkit-scrollbar-track{background:#f2f2f2;}
/*========== ANIMATIONS ==========*/
@keyframes floatCard{0%{transform:translateY(0);}50%{transform:translateY(-6px);}100%{transform:translateY(0);}}
.premium-crown{animation:floatCard 3s ease-in-out infinite;}
.profile-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:9999;}
.profile-modal.show{display:flex;}
.profile-modal-box{width:100%;max-width:480px;background:#fff;border-radius:20px;padding:25px;box-shadow:0 20px 50px rgba(0,0,0,.15);animation:popup .25s ease;}
@keyframes popup{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.profile-modal-header{display:flex;justify-content:space-between;align-items:cente;margin-bottom:20px;}
.profile-modal-header h2{margin:0;}
.profile-modal-header button{border:none;background:none;font-size:22px;cursor:pointer;}
.profile-modal-body{display:flex;flex-direction:column;gap:15px;}
.profile-modal-body input,
.profile-modal-body textarea{padding:12px;border:1px solid #ddd;border-radius:12px;font-size:15px;outline:none;}
.profile-modal-body textarea{resize:none;}
#saveProfileBtn{height:46px;border:none;border-radius:12px;background:#ff3f7f;color:#fff;font-size:15px;cursor:pointer;}
/*========== FULL GALLERY ==========*/
.gallery-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:99999;display:none;overflow-y:auto;padding:35px;}
.gallery-viewer.show{display:block;}
.gallery-viewer-top{display:flex;align-items:center;gap:18px;margin-bottom:30px;}
.gallery-back-btn{width:48px;height:48px;border:none;border-radius:50%;background:#f5f5f5;cursor:pointer;font-size:18px;}
.gallery-back-btn:hover{background:#ffe4ea;}
.gallery-viewer h2{font-size:28px;font-weight:700;}
.photo-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);display:none;justify-content:center;align-items:center;z-index:100000;}
.viewer-image{max-width:90%;max-height:90%;object-fit:contain;border-radius:12px;}
.photo-close{position:absolute;top:20px;right:25px;width:45px;height:45px;border:none;background:none;color:#fff;font-size:40px;cursor:pointer;}
.viewer-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);width:55px;height:55px;border:none;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:32px;cursor:pointer;z-index:100001;}
.viewer-prev{left:25px;}
.viewer-next{right:25px;}
/* =========================================
LARGE SCREENS — 1920px+
   ========================================= */
@media (min-width:1920px){
    .profile-page{padding-left:40px;padding-right:40px;}
    .profile-header{padding-left:2px;padding-right:20px;margin-bottom:40px;}
    .account-hero{max-width:1500px;}}
    @media (min-width:1441px) and (max-width:1919px){
    .profile-page{padding-left:32px;padding-right:32px;padding-top: 40px;}
    .profile-header{padding-left:0;padding-right:0;margin-bottom:36px;}
    .profile-header-left h1{font-size: 26px;}
    .account-hero{max-width:1500px;}
    .activity-bottom{margin-top:22px;min-height:90px;height:auto;display:grid;grid-template-columns:100px minmax(0,1fr) 80px;align-items:center;gap:12px;padding:8px 14px 8px 2px;border-radius:24px;border:1px solid #ffe5ee;background:linear-gradient(135deg,#fff5f8,#fffdfd);}}
    @media (min-width:1361px) and (max-width:1440px){
    .profile-page{padding-left:28px;padding-right:28px;padding-top: 34px;}
      .account-hero{min-height: 360px;}
      .hero-container{grid-template-columns:minmax(0,1fr) 400px;gap:24px;}
      .profile-header-left h1{font-size: 24px;}
      .activity-bottom{margin-top:22px;min-height:90px;height:auto;display:grid;grid-template-columns:98px minmax(0,1fr) 80px;align-items:center;gap:12px;padding:8px 14px 8px 2px;border-radius:24px;border:1px solid #ffe5ee;background:linear-gradient(135deg,#fff5f8,#fffdfd);}
      .overview-card{padding:16px 16px !important;gap:12px !important;min-height:0 !important;box-sizing:border-box;}
      .overview-icon{width:44px !important;height:44px !important;flex:0 0 45px !important;border-radius:11px;}
      .overview-icon svg{width:30px !important;height:30px !important;}
      .overview-content{min-width:0;overflow:hidden;}
      .overview-content span{font-size:14px !important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
      .overview-content h2{font-size:21px !important;line-height:1.2;margin:2px 0 0;white-space:nowrap;}}
      @media (min-width:1281px) and (max-width:1360px){
    .profile-page{padding-left:24px;padding-right:24px;padding-top: 32px;}
    .hero-container{grid-template-columns:minmax(0,1fr) 370px;gap:22px;}
    .account-hero{min-height: 360px;}
    .profile-header-left h1{font-size: 22px;}
    .activity-bottom{margin-top:22px;min-height:90px;height:auto;display:grid;grid-template-columns:80px minmax(0,1fr) 70px;align-items:center;gap:12px;padding:8px 14px 8px 2px;border-radius:24px;border:1px solid #ffe5ee;background:linear-gradient(135deg,#fff5f8,#fffdfd);}
    .overview-card{padding:16px 16px !important;gap:12px !important;min-height:0 !important;box-sizing:border-box;}
    .overview-icon{width:44px !important;height:44px !important;flex:0 0 45px !important;border-radius:11px;}
    .overview-icon svg{width:30px !important;height:30px !important;}
    .overview-content{min-width:0;overflow:hidden;}
    .overview-content span{font-size:14px !important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .overview-content h2{font-size:21px !important;line-height:1.2;margin:5px 0 0;white-space:nowrap;}}
    @media (min-width:1201px) and (max-width:1280px){
    .profile-page{padding-left:22px;padding-right:22px;padding-top: 34px;}
    .hero-container{grid-template-columns:minmax(0,1fr) 350px;gap:20px;}
    .account-hero{min-height: 320px;}
    .activity-bottom{width:100%;min-width:0;display:grid;grid-template-columns:75px minmax(0,1fr) 70px;gap:3px;min-height:60px;margin-top:8px;padding:6px;box-sizing:border-box;border-radius:13px;}
    .time-title{display:flex;align-items:center;gap:8px;margin-bottom:1px;color:#5a5a5a;font-size:11px;font-weight:600;}
    
    .activity-time h2{margin:0 0 1px;font-size:13px;color:#ff4d86;line-height:1.2;}
     .activity-time p{
        font-size: 11px;
     }
    .progress-circle{width:clamp(40px,3vw,40px);height:clamp(40px,3vw,40px);border-radius:50%;background:conic-gradient(#ff4d86 0 260deg,#ffd4e1 260deg 360deg);display:flex;justify-content:center;align-items:center;}
    .progress-circle span{width:80%;height:80%;border-radius:50%;background:#fff;display:flex;justify-content:center;align-items:center;font-size:10px;font-weight:700;}
    .profile-header-left h1{font-size: 22px;}
    .overview-card{padding:16px 16px !important;gap:12px !important;min-height:0 !important;box-sizing:border-box;}
    .overview-icon{width:44px !important;height:44px !important;flex:0 0 45px !important;border-radius:11px;}
    .overview-icon svg{width:30px !important;height:30px !important;}
    .overview-content{min-width:0;overflow:hidden;}
    .overview-content span{font-size:14px !important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .overview-content h2{font-size:21px !important;line-height:1.2;margin:2px 0 0;white-space:nowrap;}}
    @media (min-width:1151px) and (max-width:1200px){
    .profile-page{padding-left:24px;padding-right:24px;}
    .account-hero{min-height: 350px;}
    .hero-container{grid-template-columns:minmax(0,1fr) 340px;gap:20px;}
    .activity-bottom{margin-top:22px;min-height:90px; display:grid;grid-template-columns:70px minmax(0,1fr) 55px;align-items:center;gap:10px;padding:8px 14px 8px 2px;border-radius:24px;}
    .progress-circle{width:clamp(40px,4vw,40px);height:clamp(40px,4vw,40px);}
    .progress-circle span{font-size: 10px;}
    .time-title{margin-bottom:2px;}
    .activity-time h2{margin:0 0 2px;font-size:14px;color:#ff4d86;line-height:1.2;}
    .overview-card{padding:16px 16px !important;gap:12px !important;min-height:0 !important;box-sizing:border-box;}
    .overview-icon{width:44px !important;height:44px !important;flex:0 0 45px !important;border-radius:11px;}
    .overview-icon svg{width:30px !important;height:30px !important;}
    .overview-content{min-width:0;overflow:hidden;}
    .overview-content span{font-size:14px !important;line-height:1.2;}
    .overview-content h2{font-size:21px !important;line-height:1.2;margin:5px 0 0;white-space:nowrap;}}
    @media (min-width:1101px) and (max-width:1150px){
    .profile-page{padding-left:22px;padding-right:22px;}
    .account-hero{width:100%;max-width:100%;min-height:320px;box-sizing:border-box;}
    .hero-container{grid-template-columns:minmax(0,1fr)320px;gap:18px;}
    .hero-left{width:100%;min-width:0;box-sizing:border-box;}
    .profile-top{width:100%;min-width:0;display:flex;align-items:center;gap:16px;}
    .profile-content{min-width:0;flex:1;overflow:hidden;}
    .name-row{min-width:0;width:100%;}
    #profileName{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .profile-bio{max-width:100%;overflow-wrap:anywhere;}
    .profile-buttons{width:100%;display:flex;gap:10px;margin-top:20px;}
    .hero-btn{min-width:0;flex:1;box-sizing:border-box;}
    .hero-right{width:320px;min-width:0;box-sizing:border-box;}
    .activity-card{width:100%;min-width:0;box-sizing:border-box;padding:16px;}
    .activity-bottom{grid-template-columns: 62px minmax(0,1fr)48px;gap:8px;min-height:84px;padding:7px 10px 7px 2px;border-radius:21px;}
    .activity-bot img{width:62px;max-width:100%;}
    .progress-circle{width:38px;height:38px;flex:0 0 38px;}
    .progress-circle span{font-size:9px;}
    .activity-time h2{font-size:13px;}
    .overview-card{padding:16px 16px !important;gap:12px !important;min-height:0 !important;box-sizing:border-box;}
    .overview-icon{width:44px !important;height:44px !important;flex:0 0 45px !important;border-radius:11px;}
    .overview-icon svg{width:30px !important;height:30px !important;}
    .overview-content{min-width:0;overflow:hidden;}
    .overview-content span{font-size:14px !important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .overview-content h2{margin:5px 0 0;font-size:21px !important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .manage-premium-btn{top:10px;right:16px;height:35px;padding:0 14px;}}
    @media (min-width:1025px) and (max-width:1100px){
    .profile-header-left h1{font-size: 24px;}
    .account-hero{max-width:700px;margin:30px auto;padding:24px;}
    .hero-container{display:flex;flex-direction:column;gap:24px;}
    .hero-left{width:100%;padding-left:0;}
    .profile-top{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;text-align:left;}
    .profile-content{align-items:flex-start;min-width:0;margin-left: 40px;}
    .name-row{justify-content:flex-start;}
    .profile-bio{max-width:420px;text-align:left;}
    .profile-buttons{width:100%;margin-left:0;gap:14px;margin-top: 45px;}
    .hero-btn{flex:1;width:auto;}
    .hero-right{width:100%;}
    .profile-overview-section{max-width:700px;margin-left:auto;margin-right:auto;}
    .section-heading h2{margin-bottom:22px;}
    .overview-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
    .overview-card{padding:20px;gap:14px;border-radius:20px;}
    .profile-gallery-section{max-width:700px;margin-left:auto;margin-right:auto;}
    .gallery-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
    .gallery-item{border-radius:16px;}
    .premium-membership-section{max-width:700px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding:30px 24px;}
    .premium-left{width:100%;}
    .premium-crown img{width:130px;}
    .premium-center{width:100%;}
    .premium-heading{justify-content:center;flex-wrap:wrap;}
    .premium-heading h2{font-size:22px;}
    .premium-title-row p{font-size:13px;}
    .premium-info-row{grid-template-columns:repeat(3,1fr);gap:20px;margin:25px 0 18px;}
    .premium-info span{font-size:12px;}
    .premium-info h4{font-size:16px;}
    .manage-premium-btn{top:10px;right:16px;height:35px;padding:0 14px;}}
    @media (min-width:801px) and (max-width:1024px){
    .profile-page{padding-left:20px;padding-right:20px;}
    .profile-header{padding-left:0;padding-right:0;margin-bottom:30px;}
    .account-hero{margin:30px auto;padding:24px;}
    .hero-container{display:flex;flex-direction:column;gap:24px;}
    .hero-left{width:100%;min-width:0;}
    .profile-top{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;text-align:left;}
    .profile-content{align-items:flex-start;min-width:0;margin-left: 40px;}
    .name-row{justify-content:flex-start;}
    .profile-bio{max-width:460px;text-align:left;font-size: 14px;}
    .profile-buttons{width:100%;margin-left:0;gap:14px;}
    .hero-btn{flex:1;width:auto;}
    .hero-right{width:100%;}
    .profile-overview-section{ margin-left:auto;margin-right:auto;}
    .overview-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
    .profile-gallery-section{margin-left:auto;margin-right:auto;}
    .gallery-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
    .premium-membership-section{margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding:30px 24px;}
    .premium-left{width:100%;}
    .premium-crown img{width:130px;}
    .premium-center{width:100%;}
    .premium-heading{justify-content:center;flex-wrap:wrap;}
    .premium-heading h2{font-size:22px;}
    .premium-title-row p{font-size:13px;}
    .premium-info-row{grid-template-columns:repeat(3,1fr);gap:20px;margin:25px 0 18px;}
    .premium-info span{font-size:12px;}
    .premium-info h4{font-size:16px; }
    .manage-premium-btn{top:10px;right:16px;height:35px;padding:0 14px;}}
    @media (min-width:701px) and (max-width:800px){
    .profile-page{padding-left:18px;padding-right:18px; padding-top: 10px;}
    .profile-header{padding-left:0;padding-right:0;margin-bottom:28px;}
    .account-hero{max-width:680px;margin:26px auto;padding:22px; }
    .hero-container{display:flex;flex-direction:column;gap:22px;}
    .profile-top{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;text-align:left;}
    .profile-content{min-width:0;align-items:flex-start; margin-left: 20px;}
    .name-row{justify-content:flex-start;} 
    .profile-bio{max-width:400px;text-align:left;}
    .profile-buttons{width:100%;margin-left:0;gap:12px;}
    .hero-btn{flex:1;width:auto;}
    .hero-right{width:100%;}
    .profile-overview-section{max-width:680px;margin-left:auto;margin-right:auto;}
    .overview-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .profile-gallery-section{max-width:680px;margin-left:auto;margin-right:auto;}
    .gallery-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
    .gallery-item{border-radius:15px;}
    .premium-membership-section{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:680px;box-sizing:border-box;padding:26px 22px;margin:30px auto;text-align:center;}
    .premium-left{width:100%;}
    .premium-crown img{width:120px;}
    .premium-center{width:100%;}
    .premium-heading{justify-content:center;flex-wrap:wrap;gap:18px;margin-bottom: 20px;}
    .premium-heading h2{font-size:22px;}
    .premium-title-row p{font-size:16px;margin-bottom: 20px;}
    .premium-info-row{width:100%;grid-template-columns:repeat(3,1fr);gap:14px;}
    .premium-info span{font-size:14px;}
    .premium-info h4{font-size:16px;}
    .premium-progress{width:100%;}
    .premium-footer{font-size:14px;}
    .manage-premium-btn{margin:1px auto 0;height:42px;padding:0 20px;}}
    @media (min-width:501px) and (max-width:700px){
    .profile-page{padding-left:16px;padding-right:16px;padding-top: 10px;}
    .profile-header{padding-left:0;padding-right:0;margin-bottom:26px;}
    .profile-header-left h1{font-size: 24px;}
    .account-hero{max-width:100%;margin:24px auto;padding:20px;border-radius:24px;}
    .hero-container{display:flex;flex-direction:column;gap:22px;}
    .profile-top{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:15px;text-align:left;}
    .profile-content{min-width:0;align-items:flex-start; margin-left: 15px;}
    .name-row{justify-content:flex-start;}
    .profile-bio{max-width:100%;text-align:left;}
    .profile-buttons{width:100%;margin-left:0;gap:10px;}
    .hero-btn{flex:1;width:auto;box-shadow: none;}
    .hero-right{width:100%;}
    .profile-overview-section{width:100%;margin-left:auto;margin-right:auto;}
    .section-heading h2{font-size:20px;margin-bottom:25px;}
    .overview-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .overview-card{padding:18px;gap:12px;border-radius:18px;}
    .overview-icon{width:48px;height:48px;border-radius:15px;}
    .overview-content h2{font-size:24px;}
    .profile-gallery-section{width:100%;}
    .gallery-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
    .gallery-item{border-radius:14px;}
    .premium-membership-section{display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;gap:18px;padding:24px 18px;margin:30px 0;text-align:center;border-radius:24px;}
    .premium-left{width:100%;}
    .premium-crown img{width:105px;}
    .premium-center{width:100%;}
    .premium-heading{justify-content:center;flex-wrap:wrap;gap:8px;}
    .premium-heading h2{font-size:20px;}
    .premium-title-row p{font-size:12px;}
    .premium-info-row{width:100%;grid-template-columns:repeat(3,1fr);gap:10px;}
    .premium-info span{font-size:11px;}
    .premium-info h4{font-size:15px;}
    .premium-progress{width:100%;}
    .premium-footer{font-size:11px;}
    .manage-premium-btn{margin:1px auto 0;height:40px;padding:0 18px;}
    .account-security-section{width:100%;margin-bottom:30px;}
    .security-grid{grid-template-columns:1fr;gap:12px;}
    .security-card{width:100%;box-sizing:border-box;padding:18px;border-radius:18px;}
    .security-card-left{gap:14px;min-width:0;}
    .security-icon{width:48px;height:48px;border-radius:15px;flex-shrink:0;}
    .security-icon svg{width:28px;height:28px;}
    .security-card h3{font-size:14px;}
    .security-card p{font-size:11px; }
    .security-card > i{flex-shrink:0;font-size:16px;}}
    @media (max-width:500px){
        
    .profile-page{
        padding:18px 18px 1px;
        box-sizing:border-box;
        overflow-x:hidden;
    }
    .profile-header{
        padding:0;
        margin-bottom:22px;
    }
    .profile-header-left h1{
            font-size: 24px;
    }
    .account-hero{
        position:relative;
        width:100%;
        max-width:none;
        min-width:0;
        margin:20px 0;
        padding:16px 12px;
        box-sizing:border-box;
        border-radius:22px;
        overflow:hidden;
    }
    .hero-container{
        position:relative;
        z-index:2;
        width:100%;
        max-width:none;
        min-width:0;
        display:flex !important;
        flex-direction:column !important;
        gap:18px;
        height:auto !important;
        box-sizing:border-box;
    }
    .hero-left{
        width:100%;
        max-width:none;
        min-width:0;
        height:auto;
        padding:0 !important;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        box-sizing:border-box;
    }
    .profile-top{
        width:100%;
        max-width:none;
        min-width:0;
        display:grid !important;
        grid-template-columns:62px minmax(0,1fr) !important;
        gap:10px !important;
        align-items:center;
        box-sizing:border-box;
    }
    .avatar-wrap{
        position:relative;
        width:80px !important;
        height:80px !important;
        min-width:80px !important;
        max-width:80px !important;
        padding:3px;
        box-sizing:border-box;
        flex-shrink:0;
    }
    #profileAvatar{
        width:100%;
        height:100%;
        display:block;
        object-fit:cover;
    }
    .camera-btn{
        right:-3px;
        bottom:2px;
        width:24px !important;
        height:24px !important;
        min-width:24px;
        padding:0;
        border-width:2px;
    }
    .camera-btn svg{
        width:14px !important;
        height:14px !important;
    }
    .profile-content{
        width:100%;
        max-width:none;
        min-width:0;
        margin-left:30px !important;
        margin-right:0 !important;
        padding:0;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        box-sizing:border-box;
        overflow:hidden;
    }
    .name-row{
        width:100%;
        max-width:100%;
        min-width:0;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:4px;
        overflow:hidden;
    }
    #profileName{
        min-width:0;
        max-width:calc(100% - 22px);
        margin:0;
        font-size:20px !important;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .verified-badge{
        width:17px !important;
        height:17px !important;
        min-width:17px;
        flex:0 0 17px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .verified-badge svg{
        width:17px !important;
        height:17px !important;
    }
    .profile-username{
        width:100%;
        max-width:100%;
        min-width:0;
        margin-top:3px;
        font-size:12px;
        line-height:1.3;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .profile-bio{
        width:100%;
        max-width:100%;
        min-width:0;
        min-height:0;
        margin-top:5px !important;
        font-size:12px;
        line-height:1.4;
        overflow-wrap:anywhere;
    }
    .profile-buttons{
        width:100% !important;
        max-width:none !important;
        min-width:0;
        display:grid !important;
        grid-template-columns:
        minmax(0,1fr)
            minmax(0,1fr) !important;
            gap:8px;
        margin:16px 0 0 !important;
        padding:0;
        box-sizing:border-box;
    }
    .hero-btn{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        height:42px;
        margin:0 !important;
        padding:0 6px;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:4px;
        font-size:10px;
        overflow:hidden;
    }
    .hero-btn svg{
        width:18px !important;
        height:18px !important;
        flex:0 0 auto;
    }
    .hero-btn-light svg{
        width:20px !important;
        height:20px !important;
    }
    .hero-right{
        width:100%;
        max-width:none;
        min-width:0;
        display:flex;
        align-items:stretch;
        justify-content:center;
        box-sizing:border-box;
    }
    .activity-card{
        width:100%;
        max-width:none;
        min-width:0;
        padding:13px;
        box-sizing:border-box;
        border-radius:18px;
        overflow:hidden;
    }
    .activity-header{
        width:100%;
        min-width:0;
        margin-bottom:12px;
    }
    .activity-header h2{
        font-size:16px;
        margin-bottom:8px;
    }
    .activity-header p{
        font-size:9px;
    }
    .activity-trend{
        width:32px;
        height:32px;
        min-width:32px;
        border-radius:10px;
    }
    .activity-trend svg{
        width:16px;
        height:16px;
    }
    .activity-stats{
        width:100%;
        min-width:0;
        grid-template-columns:
        minmax(0,1fr)
            minmax(0,1fr);
            gap:7px;
        box-sizing:border-box;
    }
    .activity-item{
        width:100%;
        min-width:0;
        padding:8px;
        gap:7px;
        box-sizing:border-box;
        overflow:hidden;
    }
    .activity-icon{
        width:32px;
        height:32px;
        min-width:32px;
        flex:0 0 32px;
        border-radius:10px;
    }
    .activity-icon svg{
        width:20px;
        height:20px;
    }
    .activity-item h3{
        font-size:13px;
        line-height:1.2;
        white-space:nowrap;
    }
    .activity-item span{
        font-size:8px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .activity-bottom{
        width:100%;
        max-width:none;
        min-width:0;
        display:grid;
        grid-template-columns:
        60px
            minmax(0,1fr)
            62px;
            gap:5px;
        min-height:64px;
        margin-top:10px;
        padding:5px;
        box-sizing:border-box;
        border-radius:14px;
        overflow:hidden;
    }
    .activity-bot{
        width:60px;
        min-width:0;
    }
    .activity-bot img{
        width:60px;
        max-width:100%;
        height:auto;
    }
    .activity-time{
        min-width:0;
        overflow:hidden;
    }
    .time-title{
        gap:3px;
        margin-bottom:3px;
        font-size:8px;
        white-space:nowrap;
        overflow:hidden;
    }
    .time-title svg{
        width:11px;
        height:11px;
    }
    .activity-time h2{
        margin:1px 0 2px;
        font-size:10px;
        white-space:nowrap;
    }
    .activity-time p{
        font-size:7px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .activity-progress{
        min-width:0;
        padding-left:5px;
        border-left:1px dashed #ffd4df;
    }
    .progress-circle{
        width:38px;
        height:38px;
        min-width:38px;
        min-height:38px;
    }
    .progress-circle span{
        font-size:8px;
    }
.profile-overview-section{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 26px;
    box-sizing:border-box;
}
.profile-overview-section .section-heading{
    width:100%;
    min-width:0;
    margin:0 0 18px;
}
.profile-overview-section .section-heading h2{
    margin:0 0 8px;
    font-size:18px;
    line-height:1.25;
}
.profile-overview-section .section-heading p{
    margin:0;
    font-size:10px;
    line-height:1.45;
    color:#888;
}
.overview-grid{
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:
    minmax(0,1fr)
        minmax(0,1fr);
        gap:8px;
    box-sizing:border-box;
}
.overview-card{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 9px !important;
    min-height:62px;
    box-sizing:border-box;
    border-radius:15px;
    overflow:hidden;
}
.overview-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    flex:0 0 34px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
}
.overview-icon svg{
    width:21px !important;
    height:21px !important;
}
.overview-content{
    flex:1;
    width:auto;
    max-width:100%;
    min-width:0;
    overflow:hidden;
}
.overview-content span{
    display:block;
    margin:0;
    font-size:9px !important;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.overview-content h2{
    margin:3px 0 0;
    font-size:17px !important;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.profile-gallery-section{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-bottom:30px;
    box-sizing:border-box;
}
.profile-gallery-section .section-heading{
    width:100%;
    min-width:0;
    margin-bottom:18px;
}
.profile-gallery-section .section-heading h2{
    margin:0 0 8px;
    font-size:18px;
    line-height:1.25;
}
.profile-gallery-section .section-heading p{
    margin:0;
    font-size:10px;
    line-height:1.45;
}
/* =========================
GALLERY TABS
   ========================= */
.profile-gallery-tabs{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    gap:4px;
    margin:16px 0 18px;
    padding:0;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    box-sizing:border-box;
}
.profile-gallery-tabs::-webkit-scrollbar{
    display:none;
}
.gallery-tab{
    flex:1 1 0;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:10px 5px;
    font-size:11px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
    border-bottom:3px solid transparent;
    box-sizing:border-box;
}
.gallery-tab svg{
    width:15px;
    height:15px;
    min-width:15px;
    flex-shrink:0;
}
.gallery-tab.active{
    border-bottom:3px solid #ff3e5e;
    color:#f5476e;
}
.gallery-grid{
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:
    repeat(3,minmax(0,1fr));
        gap:6px;
    box-sizing:border-box;
}
.gallery-item{
    width:100%;
    min-width:0;
    aspect-ratio:1 / 1;
    border-radius:10px;
    overflow:hidden;
    box-sizing:border-box;
}
.gallery-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.view-gallery-btn{
    width:auto;
    max-width:100%;
    margin-top:12px;
    padding:9px 12px;
    font-size:10px;
    border-radius:10px;
}
.gallery-empty{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:42px 14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:1.5px dashed #f2d6de;
    border-radius:18px;
    background:#fff;
    text-align:center;
    overflow:hidden;
}
.gallery-empty i{
    font-size:38px;
    color:#f5476e;
    margin-bottom:12px;
}
.gallery-empty h3{
    margin:0 0 6px;
    font-size:17px;
    line-height:1.3;
    color:#333;
}
.gallery-empty p{
    width:100%;
    max-width:260px;
    margin:0;
    color:#888;
    font-size:11px;
    line-height:1.55;
}
.premium-membership-section{
    position:relative;
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:18px 12px;
    margin:24px 0 28px;
    box-sizing:border-box;
    border-radius:19px;
    text-align:center;
    overflow:hidden;
}
.premium-left{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.premium-crown{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.premium-crown img{
    width:75px;
    max-width:100%;
    height:auto;
}
.premium-center{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}
.premium-heading{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
}
.premium-heading h2{
    margin:0;
    font-size:18px;
    line-height:1.3;
}
.premium-status{
    padding:4px 9px;
    font-size:10px;
    line-height:1.2;
    white-space:nowrap;
    border-radius:30px;
}
.premium-title-row{
    width:100%;
    min-width:0;
}
.premium-title-row p{
    width:100%;
    margin:5px 0 0;
    font-size:10px;
    line-height:1.45;
    text-align:center;
}
.premium-info-row{
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:
    minmax(0,1fr)
        minmax(0,1fr)
        minmax(0,1fr);
        gap:5px;
    margin:13px 0 11px;
    box-sizing:border-box;
}
.premium-info{
    min-width:0;
    text-align:center;
    overflow:hidden;
}
.premium-info span{
    display:block;
    font-size:10px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.premium-info h4{
    margin:3px 0 0;
    font-size:13px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.premium-progress{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}
.premium-footer{
    width:100%;
    max-width:100%;
    margin-top:5px;
    font-size:10px;
    line-height:1.4;
    text-align:center;
}
.manage-premium-btn{
    position:absolute;
    top:7px;
    right:7px;
    width:auto;
    max-width:90px;
    height:27px;
    padding:0 9px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    font-size:9px;
    border-radius:10px;
    white-space:nowrap;
}
.premium-membership-section::before{
    width:180px;
    height:180px;
    right:-100px;
    top:-100px;
}
.account-security-section{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-bottom:24px;
    box-sizing:border-box;
}
.account-security-section .section-heading{
    width:100%;
    min-width:0;
    margin-bottom:18px;
}
.account-security-section .section-heading h2{
    margin:0 0 8px;
    font-size:18px;
    line-height:1.25;
}
.account-security-section .section-heading p{
    margin:0;
    font-size:10px;
    line-height:1.45;
}
.security-grid{
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:
    minmax(0,1fr);
        gap:8px;
    box-sizing:border-box;
}
.security-card{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px;
    box-sizing:border-box;
    border-radius:15px;
    overflow:hidden;
}
.security-card-left{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    overflow:hidden;
}
.security-icon{
    width:40px;
    height:40px;
    min-width:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
}
.security-icon svg{
    width:22px;
    height:22px;
}
.security-card h3{
    margin:0;
    font-size:12px;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.security-card p{
    margin:3px 0 0;
    font-size:9px;
    line-height:1.4;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.security-card > i{
    flex:0 0 auto;
    font-size:14px;
}
}
@media (min-width:401px) and (max-width:455px){
    .profile-page{
        padding:16px 16px 30px;
        width:100%;
        box-sizing:border-box;
    }
    .profile-header{
        padding:0;
        margin-bottom:20px;
    }

    .profile-header-left h1{
        font-size: 22px;
    }
    .profile-header-right{
        gap:8px;
    }
    .profile-settings-btn{
        width:44px;
        height:44px;
        border-radius:13px;
    }
    .account-hero{
        width:100%;
        max-width:100%;
        min-height:auto;
        height:auto;
        padding:18px 14px;
        margin:20px 0 26px;
        border-radius:22px;
        box-sizing:border-box;
    }
    .hero-container{
        width:100%;
        height:auto;
        display:flex;
        flex-direction:column;
        gap:20px;
    }
    .hero-left{
        width:100%;
        height:auto;
        min-width:0;
        padding-left:0;
        box-sizing:border-box;
    }
    .profile-top{
        width:100%;
        display:grid;
        grid-template-columns:72px minmax(0,1fr);
        gap:13px;
        align-items:center;
    }
    .avatar-wrap{
        width:100px;
        height:100px;
        padding:4px;
    }
    .camera-btn{
        width:30px;
        height:30px;
        right:-6px;
        bottom:3px;
        border-width:2px;
    }
    .camera-btn svg{
        width:17px;
    }
    .profile-content{
        min-width:0;
        width:100%;
        align-items:flex-start;
        margin-top:0px;
        margin-left: 40px;
    }
    .name-row{
        width:100%;
        min-width:0;
        gap:6px;
    }
    #profileName{
        min-width:0;
        max-width:100%;
        font-size:18px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .verified-badge{
        width:18px;
        height:18px;
        flex-shrink:0;
    }
    .verified-badge svg{
        width:22px;
    }
    .profile-username{
        margin-top:5px;
        font-size:12px;
    }
    .profile-bio{
        margin-top:5px;
        font-size:12px;
        line-height:1.45;
        overflow-wrap:anywhere;
    }
    .profile-buttons{
        width:100%;
        margin-left:0;
        margin-top:12px;
        gap:9px;
        display:flex;
    }
    .hero-btn{
        flex:1 1 0;
        width:auto;
        min-width:0;
        max-width:none;
        box-sizing:border-box;
    }
    .hero-btn{width:clamp(165px,13vw,170px);height:clamp(50px,5vw,60px);font-size:clamp(13px,1vw,16px);}
    .hero-btn svg{width:20px;height:20px;}
    .hero-right{
        width:100%;
        min-width:0;
    }
    .activity-bottom{
        margin-top:10px;
    grid-template-columns:80px minmax(0,1fr) 60px;
}
  .activity-bot img{
        width:80px;
}
.time-title{
    font-size:10px;
}
.activity-time h2{
    font-size:12px;
    line-height:1.2;
}
.activity-time p{
    font-size:10px;
}
.progress-circle{
    width:clamp(40px,3vw,55px);
    height:clamp(40px,3vw,55px);
}
.progress-circle span{
    width:80%;
    height:80%;
    font-size:12px;
}
.profile-overview-section{
        width:100%;
        margin-bottom:28px;
    }
    .section-heading h2{
        font-size:19px;
        margin-bottom:18px;
        margin-left: 10px;
    }
    .section-heading p{
    margin-left: 10px;
}
   .overview-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
        margin-top:15px;
    }
    .overview-card{
        padding:15px 12px;
        gap:10px;
        border-radius:18px;
    }
    .overview-icon{
        width:42px;
        height:42px;
        border-radius:14px;
    }
    .overview-icon svg{
        width:26px;
    }
    .overview-content{
        min-width:0;
    }
    .overview-content span{
        font-size:10px;
    }
    .overview-content h2{
        font-size:21px;
    }
    .profile-gallery-section{
        width:100%;
        max-width:100%;
        margin-bottom:40px;
        box-sizing:border-box;
        overflow:hidden;
    }
    .section-heading p{
        font-size:11px;
        margin-top:-10px;
        margin-bottom:22px;
    }
    .profile-gallery-tabs{
        width:100%;
        display:flex;
        gap:5px;
        margin:16px 0 20px;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .profile-gallery-tabs::-webkit-scrollbar{
        display:none;
    }
    .gallery-tab{
        flex:1 1 0;
        min-width:0;
        padding:10px 7px;
        gap:4px;
        font-size:11px;
        white-space:nowrap;
    }
    .gallery-tab svg{
        width:15px;
        height:15px;
        flex-shrink:0;
    }
    .gallery-tab.active{
        border-bottom-width:3px;
    }
    .gallery-grid{
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }
    .gallery-item{
        border-radius:11px;
    }
    .view-gallery-btn{
        padding: 10px 20px;
        font-size: 12px;
    }
    .gallery-empty{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        padding:45px 15px;
        border-radius:19px;
    }
    .gallery-empty i{
        font-size:40px;
        margin-bottom:13px;
    }
    .gallery-empty h3{
        font-size:17px;
        margin-bottom:6px;
    }
    .gallery-empty p{
        max-width:270px;
        font-size:11px;
        line-height:1.55;
    }
    .premium-membership-section{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
        padding:22px 15px;
        margin:28px 0;
        border-radius:22px;
        text-align:center;
    }
    .premium-left{
        width:100%;
    }
    .premium-crown img{
        width:92px;
    }
    .premium-center{
        width:100%;
        min-width:0;
    }
    .premium-heading{
        justify-content:center;
        flex-wrap:wrap;
        gap:7px;
    }
    .premium-heading h2{
        font-size:19px;
    }
    .premium-status{
        padding:5px 10px;
        font-size:10px;
    }
    .premium-title-row p{
        font-size:11px;
        line-height:1.5;
    }
    .premium-info-row{
        width:100%;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
    }
    .premium-info{
        min-width:0;
    }
    .premium-info span{
        font-size:9px;
    }
    .premium-info h4{
        font-size:14px;
    }
    .premium-progress{
        width:100%;
    }
    .premium-footer{
        font-size:10px;
        line-height:1.5;
    }
    .manage-premium-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:auto;
        min-width:105px;
        height:30px;
        top: 5px ;
right: 5px;
padding:0 10px;
    }
    .account-security-section{
        width:100%;
        margin-bottom:25px;
    }
    .security-grid{
        grid-template-columns:1fr;
        gap:10px;
    }
    .security-card{
        width:100%;
        box-sizing:border-box;
        padding:15px;
        border-radius:17px;
    }
    .security-card-left{
        min-width:0;
        gap:12px;
    }
    .security-icon{
        width:44px;
        height:44px;
        border-radius:14px;
    }
    .security-icon svg{
        width:25px;
        height:25px;
    }
    .security-card h3{
        font-size:13px;
        margin-bottom:4px;
    }
    .security-card p{
        font-size:10px;
        line-height:1.4;
    }
    .security-card > i{
        flex-shrink:0;
        font-size:15px;
    }
}
@media (min-width:376px) and (max-width:400px){
    .profile-page{
        padding:20px 11px 28px;
        width:100%;
        box-sizing:border-box;
    }
    .profile-header{
        padding:0;
        margin-bottom:18px;
    }
    .profile-header-right{
        gap:7px;
    }
    .profile-settings-btn{
        width:42px;
        height:42px;
        border-radius:12px;
    }
    .account-hero{
        width:100%;
        max-width:100%;
        min-height:auto;
        height:auto;
        padding:17px 13px;
        margin:18px 0 24px;
        border-radius:21px;
        box-sizing:border-box;
    }
    .hero-container{
        width:100%;
        height:auto;
        display:flex;
        flex-direction:column;
        gap:18px;
    }
    .hero-left{
        width:100%;
        height:auto;
        min-width:0;
        padding-left:0;
    }
    .profile-top{
        width:100%;
        display:grid;
        grid-template-columns:68px minmax(0,1fr);
        gap:12px;
        align-items:center;
    }
    .avatar-wrap{
        width:100px;
        height:100px;
        padding:4px;
    }
    .camera-btn{
        width:29px;
        height:29px;
        right:-5px;
        bottom:3px;
        border-width:2px;
    }
    .camera-btn svg{
        width:16px;
    }
    .profile-content{
        min-width:0;
        width:100%;
        align-items:flex-start;
        margin-top: 0px;
        margin-left: 40px;
    }
    .name-row{
        width:100%;
        gap:5px;
    }
    #profileName{
        min-width:0;
        max-width:100%;
        font-size:24px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .verified-badge{
        width:21px;
        height:21px;
        flex-shrink:0;
    }
    .verified-badge svg{
        width:21px;
    }
    .profile-username{
        margin-top:4px;
        font-size:12px;
    }
    .profile-bio{
        width:100%;
        max-width:100%;
        margin-top:8px;
        font-size:11px;
        line-height:1.45;
        overflow-wrap:anywhere;
    }
    .profile-buttons{
        width:100%;
        margin:16px 0 0;
        gap:8px;
    }
    .hero-btn{    height:clamp(50px,5vw,60px);font-size:clamp(13px,0.8vw,14px);}
    .hero-btn svg{width: 20px;}
    .hero-right{
        width:100%;
        min-width:0;
    }
    .activity-bottom{
        margin-top:10px;
    grid-template-columns:80px minmax(0,1fr) 60px;
}
  .activity-bot img{
        width:80px;
}
.time-title{
    font-size:10px;
}
.activity-time h2{
    font-size:12px;
    line-height:1.2;
}
.activity-time p{
    font-size:10px;
}
.progress-circle{
    width:clamp(40px,3vw,55px);
    height:clamp(40px,3vw,55px);
}
.progress-circle span{
    width:80%;
    height:80%;
    font-size:12px;
}
.profile-overview-section{
        width:100%;
        margin-bottom:26px;
    }
    .section-heading h2{
        font-size:18px;
        margin-bottom:16px;
    }
    .overview-grid{
        grid-template-columns:1fr 1fr;
        gap:9px;
        margin-top:13px;
    }
    .overview-card{
        padding:14px 10px;
        gap:8px;
        border-radius:17px;
    }
    .overview-icon{
        width:40px;
        height:40px;
        border-radius:13px;
    }
    .overview-icon svg{
        width:24px;
    }
    .overview-content{
        min-width:0;
    }
    .overview-content span{
        font-size:9.5px;
    }
    .overview-content h2{
        font-size:20px;
    }
    .profile-gallery-section{
        width:100%;
        max-width:100%;
        margin-bottom:36px;
        box-sizing:border-box;
        overflow:hidden;
    }
    .section-heading p{
        font-size:10.5px;
        margin-top:-9px;
        margin-bottom:20px;
    }
    .profile-gallery-tabs{
        width:100%;
        gap:4px;
        margin:15px 0 18px;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .profile-gallery-tabs::-webkit-scrollbar{
        display:none;
    }
    .gallery-tab{
        flex:1 1 0;
        min-width:0;
        padding:9px 6px;
        gap:4px;
        font-size:10.5px;
        white-space:nowrap;
    }
    .gallery-tab svg{
        width:14px;
        height:14px;
    }
    .gallery-tab.active{
        border-bottom-width:3px;
    }
    .gallery-grid{
        grid-template-columns:repeat(3,1fr);
        gap:7px;
    }
    .gallery-item{
        border-radius:10px;
    }
    .gallery-empty{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        padding:42px 14px;
        border-radius:18px;
    }
    .gallery-empty i{
        font-size:38px;
        margin-bottom:12px;
    }
    .gallery-empty h3{
        font-size:16px;
        margin-bottom:6px;
    }
    .gallery-empty p{
        max-width:260px;
        font-size:10.5px;
        line-height:1.5;
    }
    .premium-membership-section{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:13px;
        padding:20px 13px;
        margin:26px 0;
        border-radius:21px;
        text-align:center;
    }
    .premium-left{
        width:100%;
    }
    .premium-crown img{
        width:86px;
    }
    .premium-center{
        width:100%;
        min-width:0;
    }
    .premium-heading{
        justify-content:center;
        flex-wrap:wrap;
        gap:6px;
    }
    .premium-heading h2{
        font-size:18px;
    }
    .premium-status{
        padding:5px 9px;
        font-size:9.5px;
    }
    .premium-title-row p{
        font-size:10.5px;
        line-height:1.45;
    }
    .premium-info-row{
        width:100%;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:5px;
    }
    .premium-info{
        min-width:0;
    }
    .premium-info span{
        font-size:12px;
    }
    .premium-info h4{
        font-size:13px;
    }
    .premium-progress{
        width:100%;
    }
    .premium-footer{
        font-size:10px;
        line-height:1.45;
    }
    .manage-premium-btn{
        width:auto;
        min-width:80px;
        height:25px;
        padding:0 10px;
    }
    .account-security-section{
        width:100%;
        margin-bottom:23px;
    }
    .security-grid{
        grid-template-columns:1fr;
        gap:9px;
    }
    .security-card{
        width:100%;
        box-sizing:border-box;
        padding:14px;
        border-radius:16px;
    }
    .security-card-left{
        min-width:0;
        gap:11px;
    }
    .security-icon{
        width:42px;
        height:42px;
        border-radius:13px;
    }
    .security-icon svg{
        width:24px;
        height:24px;
    }
    .security-card h3{
        font-size:12.5px;
        margin-bottom:3px;
    }
    .security-card p{
        font-size:9.5px;
        line-height:1.35;
    }
    .security-card > i{
        flex-shrink:0;
        font-size:14px;
    }
}
@media (min-width:351px) and (max-width:375px){
    .account-hero{
        width:100%;
        max-width:100%;
        min-height:0;
        height:auto;
        margin:16px 0 24px;
        padding:16px 12px;
        box-sizing:border-box;
        border-radius:20px;
        overflow:hidden;
    }
    .hero-container{
        width:100%;
        height:auto;
        display:flex;
        flex-direction:column;
        gap:20px;
    }
    .hero-left{
        width:100%;
        height:auto;
        min-width:0;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        padding:0;
        box-sizing:border-box;
    }
    .profile-top{
        width:100%;
        display:flex;
        align-items:center;
        gap:11px;
        box-sizing:border-box;
    }
    .avatar-wrap{
        flex:0 0 70px;
        width:70px;
        height:70px;
        padding:4px;
        box-sizing:border-box;
        border-radius:50%;
    }
    .camera-btn{
        width:27px;
        height:27px;
        right:-5px;
        bottom:2px;
        border-width:2px;
    }
    .camera-btn svg{
        width:14px;
        height:14px;
    }
    .profile-content{
        margin-top: 0px;
    }
    .name-row{
        width:100%;
        min-width:0;
        display:flex;
        align-items:center;
        gap:5px;
    }
    #profileName{
        min-width:0;
        max-width:100%;
        font-size:14px;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .verified-badge{
        width:14px;
        height:14px;
        flex:0 0 19px;
    }
    .verified-badge svg{
        width:19px;
        height:19px;
    }
    .profile-username{
        margin-top:4px;
        font-size:10px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .profile-bio{
        margin-top:4px;
        font-size:9px;
        line-height:1.4;
        min-height:0;
        overflow-wrap:anywhere;
    }
    .profile-buttons{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin:16px 0 0;
    }
    .hero-btn{
        width:100%;
        min-width:0;
        height:35px;
        padding:0 6px;
        font-size:10px;
        gap:5px;
        box-sizing:border-box;
        margin-top: 5px;
    }
    .hero-btn svg{
        width:18px;
        height:18px;
        flex:none;
    }
    .hero-btn-light svg{
        width:22px;
        height:22px;
    }
    .star1{top:7px;left:80px;font-size: 14px;}
    .star3{left:255px;top:30px;font-size: 14px;}
.hero-circle-1{width:150px;height:150px;left:-60px;top:-60px;}
.hero-right{
        width:100%;
        min-width:0;
        display:block;
        box-sizing:border-box;
    }
    .activity-card{
        width:100%;
        padding:14px;
        box-sizing:border-box;
        border-radius:20px;
    }
    .activity-header{
        margin-bottom:13px;
    }
    .activity-header h2{
        font-size:17px;
        margin-bottom:8px;
    }
    .activity-header p{
        font-size:10px;
    }
    .activity-trend{
        width:34px;
        height:34px;
        flex-shrink:0;
    }
    .activity-stats{
        width:100%;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }
    .activity-item{
        min-width:0;
        padding:8px;
        gap:7px;
        border-radius:14px;
        box-sizing:border-box;
    }
    .activity-icon{
        width:33px;
        height:33px;
        flex:0 0 33px;
    }
    .activity-icon svg{
        width: 22px;
    }
    .activity-item h3{
        font-size:15px;
    }
    .activity-item span{
        font-size:9px;
    }
    .activity-bottom{
        width:100%;
        display:grid;
        grid-template-columns:64px minmax(0,1fr) 58px;
        gap:5px;
        min-height:65px;
        margin-top:11px;
        padding:5px 6px;
        box-sizing:border-box;
        border-radius:16px;
    }
    .activity-bot img{
        width:58px;
        max-width:100%;
    }
    .time-title{
        gap:3px;
        margin-bottom:3px;
        font-size:8px;
    }
    .time-title svg{
        width:11px;
        height:11px;
    }
    .activity-time{
        min-width:0;
    }
    .activity-time h2{
        font-size:10px;
        margin-bottom:2px;
    }
    .activity-time p{
        font-size:8px;
    }
    .activity-progress{
        padding-left:3px;
    }
    .progress-circle{
        width:44px;
        height:44px;
    }
    .progress-circle span{
        font-size:9px;
    }
    .premium-membership-section{
            width:100%;
        max-width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:13px;
        padding:20px 12px;
        margin:26px 0;
        overflow:hidden;
    }
    .premium-crown{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .premium-crown img{
        width:78px;
        max-width:100%;
        height:auto;
    }
    .premium-heading{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap;
        gap:6px;
        margin-bottom:5px;
    }
    .premium-heading h2{
        margin:0;
        font-size:17px;
        line-height:1.3;
        white-space:normal;
    }
    .premium-status{
        padding:4px 8px;
        font-size:9px;
        white-space:nowrap;
        border-radius:30px;
    }
    .premium-title-row{
        width:100%;
    }
    .premium-title-row p{
        margin:5px 0 0;
        font-size:10px;
        line-height:1.45;
        text-align:center;
    }
    .premium-info-row{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:5px;
        margin:16px 0 12px;
        box-sizing:border-box;
    }
    .premium-info{
        min-width:0;
        text-align:center;
        overflow:hidden;
    }
    .premium-info span{
        display:block;
        margin-bottom:4px;
        font-size:8px;
        line-height:1.2;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .premium-info h4{
        margin:0;
        font-size:12px;
        line-height:1.25;
        white-space:nowrap;
    }
    .premium-progress{
        width:100%;
        height:7px;
        margin:0 0 11px;
        box-sizing:border-box;
    }
    .premium-progress-fill{
        height:100%;
    }
    .premium-footer{
        width:100%;
        font-size:9px;
        line-height:1.4;
        text-align:center;
    }
    .manage-premium-btn{
        max-width:84px;
        height:28px;
        top: 5px;
        right: 5px;
        padding:0 12px;
        font-size:9px;
    }
  .profile-overview-section{
        width:100%;
        margin:0 0 26px;
        box-sizing:border-box;
    }
    .section-heading h2{
        font-size:18px;
        line-height:1.25;
        margin-bottom: 30px;
        margin-left: 6px;
    }
    .section-heading p{
    font-size:12px;
        line-height:1;
        margin-left: 6px;
       margin-bottom: 25px;
    }
    .overview-grid{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin:0;
        box-sizing:border-box;
    }
    .overview-card{
        width:100%;
        min-width:0;
        display:flex;
        align-items:center;
        gap:8px;
        padding:12px 9px;
        box-sizing:border-box;
        border-radius:16px;
    }
    .overview-icon{
        width:36px;
        height:36px;
        flex:0 0 36px;
        border-radius:11px;
    }
    .overview-icon svg{
        width:21px;
        height:21px;
    }
    .overview-content{
        flex:1;
        min-width:0;
        overflow:hidden;
    }
    .overview-content span{
        display:block;
        font-size:9px;
        line-height:1.2;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .overview-content h2{
        margin:2px 0 0;
        font-size:16px;
        line-height:1.2;
        white-space:nowrap;
    }
    .view-gallery-btn{
        font-size: 12px;
        padding: 8px 10px;
        border-radius: 10px;
    }
}
@media (min-width:326px) and (max-width:350px){
    .profile-page{
        padding:13px 9px 28px;
        width:100%;
        box-sizing:border-box;
    }
    .account-hero{
        width:100%;
        max-width:100%;
        padding:15px 10px;
        margin:15px 0 22px;
        border-radius:19px;
        box-sizing:border-box;
        overflow:hidden;
    }
    .hero-container{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:17px;
    }
    .hero-left{
        width:100%;
        min-width:0;
        padding:0;
    }
    .profile-top{
        width:100%;
        display:flex;
        align-items:center;
        gap:9px;
    }
    .avatar-wrap{
        flex:0 0 70px;
        width:70px;
        height:70px;
        padding:3px;
    }
    #profileAvatar{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .camera-btn{
        width:25px;
        height:25px;
        right:-5px;
        bottom:1px;
    }
    .camera-btn svg{
        width:13px;
        height:13px;
    }
    .profile-content{
        flex:1;
        width:auto;
        min-width:0;
        overflow:hidden;
        margin-top: 0px;
        margin-left: 10px;
    }
    .name-row{
        width:100%;
        min-width:0;
        gap:4px;
    }
    #profileName{
        min-width:0;
        max-width:100%;
        font-size:16px;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .verified-badge{
        width:18px;
        height:18px;
        flex:0 0 18px;
    }
    .profile-username{
        margin-top:3px;
        font-size:9.5px;
    }
    .profile-bio{
        width:100%;
        max-width:100%;
        margin-top:3px;
        font-size:9px;
        line-height:1.35;
        overflow-wrap:anywhere;
    }
    .profile-buttons{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:6px;
        margin:14px 0 0;
    }
    .hero-btn{
        width:100%;
        min-width:0;
        height:36px;
        padding:0 5px;
        font-size:10px;
        gap:8px;
        box-sizing:border-box;
    }
    .hero-btn svg{
        width:18px;
        height:18px;
    }
    .hero-btn-light svg{
        width:20px;
        height:20px;
    }
    /* =========================
    ACTIVITY CARD
       ========================= */
    .hero-right{
        width:100%;
        min-width:0;
    }
    .activity-card{
        width:100%;
        padding:12px;
        border-radius:18px;
        box-sizing:border-box;
    }
    .activity-header{
        margin-bottom:11px;
    }
    .activity-header h2{
        font-size:16px;
        margin-bottom:6px;
    }
    .activity-header p{
        font-size:9px;
    }
    .activity-trend{
        width:31px;
        height:31px;
        border-radius:10px;
    }
    .activity-stats{
        width:100%;
        grid-template-columns:1fr 1fr;
        gap:6px;
    }
    .activity-item{
        min-width:0;
        padding:7px;
        gap:6px;
        border-radius:13px;
    }
    .activity-icon{
        width:30px;
        height:30px;
        flex:0 0 30px;
    }
    .activity-item h3{
        font-size:14px;
    }
    .activity-item span{
        font-size:8px;
    }
    .activity-bottom{
        width:100%;
        grid-template-columns:52px minmax(0,1fr) 60px;
        gap:4px;
        min-height:60px;
        margin-top:9px;
        padding:4px 5px;
        border-radius:14px;
    }
    .activity-bot img{
        width:52px;
        max-width:100%;
    }
    .time-title{
        gap:2px;
        margin-bottom:2px;
        font-size:7.5px;
    }
    .time-title svg{
        width:10px;
        height:10px;
    }
    .activity-time{
        min-width:0;
    }
    .activity-time h2{
        font-size:9px;
        margin-bottom:2px;
    }
    .activity-time p{
        font-size:7.5px;
    }
    .progress-circle{
        width:40px;
        height:40px;
    }
    .progress-circle span{
        font-size:8px;
    }
    .profile-overview-section{
        width:100%;
        margin-top: 30px;
    }
    .section-heading h2{
    font-size:16px;
        margin-left:8px;
    }
    .section-heading p{
        font-size:9px;
        margin-left:8px;
        margin-bottom: 15px;
    }
    .overview-grid{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }
    .overview-card{
        width:100%;
        min-width:0;
        padding:11px 8px;
        gap:7px;
        border-radius:15px;
        box-sizing:border-box;
    }
    .overview-icon{
        width:34px;
        height:34px;
        flex:0 0 34px;
        border-radius:10px;
    }
    .overview-icon svg{
        width:20px;
        height:20px;
    }
    .overview-content{
        min-width:0;
        overflow:hidden;
    }
    .overview-content span{
        display:block;
        font-size:8px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .overview-content h2{
        font-size:17px;
        line-height:1.2;
    }
    .premium-membership-section{
        position:relative;
        width:100%;
        max-width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:11px;
        padding:18px 10px;
        margin:23px 0;
        box-sizing:border-box;
        border-radius:19px;
        text-align:center;
        overflow:hidden;
    }
    .premium-left{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .premium-crown{
        width:100%;
        display:flex;
        justify-content:center;
    }
    .premium-crown img{
        width:70px;
        max-width:100%;
        height:auto;
    }
    .premium-center{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }
    .premium-heading{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap;
        gap:5px;
    }
    .premium-heading h2{
        font-size:16px;
        line-height:1.25;
    }
    .premium-status{
        padding:4px 7px;
        font-size:8px;
    }
    .premium-title-row p{
        margin:4px 0 0;
        font-size:9px;
        line-height:1.4;
    }
    .premium-info-row{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:3px;
        margin:14px 0 10px;
    }
    .premium-info{
        min-width:0;
        overflow:hidden;
    }
    .premium-info span{
        display:block;
        font-size:7px;
        margin-bottom:3px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .premium-info h4{
        font-size:11px;
        line-height:1.2;
        white-space:nowrap;
    }
    .premium-progress{
        width:100%;
        height:6px;
        margin-bottom:9px;
    }
    .premium-footer{
        width:100%;
        font-size:8px;
        line-height:1.35;
    }
    .manage-premium-btn{
        top: 5px;
        right: 5px;
        width:100%;
        max-width:80px;
        min-width:0;
        height:26px;
        padding:0 6px;
        display:flex;
        align-items:center;
        justify-content:center;
        box-sizing:border-box;
        font-size:9px;
        border-radius:11px;
    }
}
@media (max-width:325px){
    .profile-page{
        width:100%;
        padding:12px 12px 25px;
        box-sizing:border-box;
    }
    .profile-header{
        width:100%;
        padding:0;
        margin-bottom:18px;
    }
    .account-hero{
        width:100%;
        max-width:100%;
        min-width:0;
        margin:14px 0 20px;
        padding:20px 14px;
        box-sizing:border-box;
        border-radius:18px;
        overflow:hidden;
    }
    .hero-container{
        width:100%;
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:15px;
    }
    .hero-left{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }
    .profile-top{
        width:100%;
        min-width:0;
        display:flex;
        align-items:center;
        gap:8px;
    }
    .avatar-wrap{
        width:90px;
        height:90px;
        flex:0 0 90px;
        padding:3px;
        box-sizing:border-box;
    }
    .camera-btn{
        width:20px;
        height:20px;
        right:0px;
        bottom:5px;
        border-width:2px;
    }
    .camera-btn svg{
        width:11px;
        height:11px;
    }
    .profile-content{
        width:auto;
        flex:1;
        min-width:0;
        overflow:hidden;
        margin-top:1px;
        margin-left: 15px;
    }
    .name-row{
        width:100%;
        min-width:0;
        display:flex;
        align-items:center;
        gap:4px;
    }
    #profileName{
        min-width:0;
        max-width:100%;
        font-size:18px;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .verified-badge{
        width:17px;
        height:17px;
        flex:0 0 17px;
    }
    .verified-badge svg{
        width:17px;
        height:17px;
    }
    .profile-username{
        margin-top:3px;
        font-size:12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .profile-bio{
        width:100%;
        max-width:100%;
        margin-top:3px;
        font-size:11px;
        line-height:1.35;
        overflow-wrap:anywhere;
    }
    .profile-buttons{
        width:100%;
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:6px;
        margin:5px 0 0;
    }
    .hero-btn{
        width:100%;
        min-width:0;
        max-width:none;
        height:39px;
        padding:0 4px;
        font-size:9.5px;
        gap:4px;
        box-sizing:border-box;
        white-space:nowrap;
    }
    .hero-btn svg{
        width:17px;
        height:17px;
        flex-shrink:0;
    }
    .hero-btn-light svg{
        width:19px;
        height:19px;
    }
    .hero-right{
        width:100%;
        min-width:0;
    }
    .activity-card{
        width:100%;
        min-width:0;
        padding:11px;
        box-sizing:border-box;
        border-radius:17px;
        overflow:hidden;
    }
    .activity-header{
        margin-bottom:9px;
    }
    .activity-header h2{
        font-size:15px;
        margin-bottom:10px;
    }
    .activity-header p{
        font-size:8px;
    }
    .activity-trend{
        width:28px;
        height:28px;
        flex-shrink:0;
    }
    .activity-stats{
        width:100%;
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:5px;
    }
    .activity-item{
        width:100%;
        min-width:0;
        padding:6px;
        gap:5px;
        border-radius:12px;
        box-sizing:border-box;
    }
    .activity-icon{
        width:27px;
        height:27px;
        flex:0 0 27px;
    }
    .activity-icon svg{
        width: 16px;
    }
      .activity-item h3{
        font-size:13px;
        margin-bottom: 0px;
    }
    .activity-item span{
        font-size:8px;
    }
    .activity-bottom{
        width:100%;
        min-width:0;
        display:grid;
        grid-template-columns:70px minmax(0,1fr) 60px;
        gap:3px;
        min-height:55px;
        margin-top:8px;
        padding:4px;
        box-sizing:border-box;
        border-radius:13px;
    }
    .activity-bot img{
        width:52px;
        max-width:100%;
    }
    .activity-time{
        min-width:0;
        overflow:hidden;
    }
    .time-title{
        gap:2px;
        margin-bottom:2px;
        font-size:7px;
    }
    .time-title svg{
        width:9px;
        height:9px;
    }
    .activity-time h2{
        font-size:8.5px;
        margin-bottom:2px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .activity-time p{
        font-size:7px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .activity-progress{
        min-width:0;
        padding-left:1px;
    }
    .progress-circle{
        width:36px;
        height:36px;
    }
    .progress-circle span{
        font-size:7.5px;
    }
    .profile-overview-section{
        width:100%;
        min-width:0;
        margin-bottom:21px;
    }
    .section-heading h2{
        font-size:14px;
        line-height:1.2;margin:30px 0 5px;}
    .section-heading p{font-size:9px;line-height:1.4;margin:0 0 14px;}
    .overview-grid{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;box-sizing:border-box;}
    .overview-card{width:100%;min-width:0;display:flex;align-items:center;gap:6px;padding:9px 7px;box-sizing:border-box;border-radius:14px;}
    .overview-icon{width:31px;height:31px;flex:0 0 31px;border-radius:9px;}
    .overview-icon svg{width:18px;height:18px;}
    .overview-content{min-width:0;flex:1;overflow:hidden;}
    .overview-content span{display:block;font-size:1px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .overview-content h2{margin:2px 0 0;font-size:1px;line-height:1.15;white-space:nowrap;}
    .premium-membership-section{position:relative;width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px;margin:21px 0;box-sizing:border-box;border-radius:18px;text-align:center;overflow:hidden;}
    .premium-left{width:100%;display:flex;justify-content:center;align-items:center;}
    .premium-crown{width:100%;display:flex;justify-content:center;}
    .premium-crown img{width:62px;max-width:100%;height:auto;}
    .premium-center{width:100%;min-width:0;box-sizing:border-box;}
    .premium-heading{width:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin-bottom:4px;}
    .premium-heading h2{margin:0;font-size:14px;line-height:1.25;}
    .premium-status{padding:3px 7px;font-size:7.5px;white-space:nowrap;border-radius:20px;}
    .premium-title-row{width:100%;min-width:0;}
    .premium-title-row p{margin:4px 0 0;font-size:8px;line-height:1.35;text-align:center;}
    .premium-info-row{width:100%;min-width:0;display:grid;grid-template-columns: minmax(0,1fr) minmax(0,1fr)minmax(0,1fr);gap:2px;margin:24px 0 9px;box-sizing:border-box;}
    .premium-info{min-width:0;overflow:hidden;}
    .premium-info span{display:block;font-size:9px;line-height:1.2;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .premium-info h4{margin:0;font-size:10px;line-height:1.2;white-space:nowrap;}
    .premium-progress{width:100%;height:5px;margin-bottom:8px;}
    .premium-footer{width:100%;font-size:8px;line-height:1.35;text-align:center;}
    .manage-premium-btn{top:5px;right:5px;width:100%;max-width:70px;min-width:0;height:24px;margin:7px auto 0;padding:0 8px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:8px;border-radius:10px;}
    .profile-gallery-section{width:100%;min-width:0;}
    .profile-gallery-tabs{width:100%;gap:4px;margin:15px 0 18px;}
    .gallery-tab{min-width:0;padding:9px 5px;gap:3px;font-size:10px;}
    .gallery-tab svg{width:14px;height:14px;}
    .gallery-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;}
    .gallery-item{min-width:0;border-radius:9px;}
    .gallery-empty{width:100%;max-width:100%;padding:40px 12px;box-sizing:border-box;border-radius:18px;}
    .gallery-empty i{font-size:38px;margin-bottom:12px;}
    .gallery-empty h3{font-size:16px;}
    .gallery-empty p{max-width:250px;font-size:10px;line-height:1.5;}
    .view-gallery-btn{padding: 6px 10px;font-size: 12px;border-radius: 10px;}
    .account-security-section{width:100%;min-width:0;margin-bottom:21px;}
    .security-grid{width:100%;grid-template-columns:1fr;gap:8px;}
    .security-card{width:100%;min-width:0;padding:12px;border-radius:15px;box-sizing:border-box;}
    .security-card-left{min-width:0;gap:9px;}
    .security-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;}
    .security-icon svg{width:21px;height:21px;}
    .security-card h3{font-size:11px;}
    .security-card p{font-size:8.5px;}
    .security-card > i{font-size:13px;flex-shrink:0; }
    .star1{top:10px;left:150px;font-size: 12px;}
    .star2{top:60px;left:250px; font-size: 12px;}
.star3{top: 100px;left: 10px;font-size: 12px;}
.hero-circle-1{width:150px;height:150px; left:-40px; top:-40px;}}