/* ========== RESET & BASE ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;cursor:default;}
html{overscroll-behavior-y:none;overflow-x:hidden;max-width:100vw;}
input,textarea,select,[contenteditable="true"]{cursor:text;}
a,button,label,[role="button"],[onclick]{cursor:pointer;}
body{font-family:'Roboto',sans-serif;background:var(--light-bg);color:var(--dark);line-height:1.6;background-image:radial-gradient(ellipse at 20% 50%,rgba(139,92,246,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(92,189,185,.06) 0%,transparent 50%);background-attachment:fixed;}
body::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--nav-bg,#1a1a2e);z-index:10000;pointer-events:none;}
body[class*="premium-"]::before{background:var(--ps-bg,#1a1a2e);}
/* Pull-to-refresh */
.ptr-indicator{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-50px);z-index:9999;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;}
.ptr-spinner{width:40px;height:40px;border-radius:50%;background:var(--primary,#6ab0f3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 12px rgba(0,0,0,.2);}
.ptr-spinner i{transition:transform .1s linear;}
.ptr-loading .ptr-spinner i{animation:ptr-spin .8s linear infinite;}
.ptr-ready .ptr-spinner{background:#4caf50;}
@keyframes ptr-spin{to{transform:rotate(360deg);}}
#premiumBgLayer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;background-repeat:no-repeat;display:none;}
#premiumBgLayer.active{display:block;}
#premiumBgDarkness{position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0;pointer-events:none;}
#premiumBgOverlay{position:absolute;top:0;left:0;right:0;bottom:0;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);pointer-events:none;}
.app-shell,.login-page{position:relative;z-index:1;max-width:100vw;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;outline:none;font-family:inherit;}
img{display:block;}

:root{
    --primary:#8b5cf6;--primary-hover:#7c3aed;--nav-bg:#0f172a;--dark:#e2e8f0;--gray:#94a3b8;--light-bg:#0f172a;
    --card:#1e293b;--green:#2ecc71;--green-hover:#27ae60;--orange:#e67e22;--orange-hover:#d35400;
    --border:#334155;--shadow:0 2px 8px rgba(0,0,0,.25);--shadow-hover:0 4px 16px rgba(0,0,0,.35);
    --font-scale:1;
}

/* ========== DEFAULT DARK THEME (matches login) ========== */
.feed-post{border-left:3px solid var(--primary);}
.post-username,.msg-chat-header h4{color:var(--primary);}
.post-description p,.profile-about,.gv-about-body p,.gv-rules-body ol{color:var(--dark);}
.skill-tag{background:var(--border);color:var(--dark);}
.post-actions{border-color:var(--border);}
.inline-comment-bubble{background:var(--border);color:var(--dark);}
.inline-comment-bubble::before{border-color:transparent var(--border) transparent transparent;}
.inline-comment-bubble span{color:var(--gray)!important;}
.inline-comment-like{color:var(--gray)!important;}
.coin-rule{background:rgba(139,92,246,.15);color:#c4b5fd;}
.coin-rule i{color:var(--primary);}
.card-heading,.promo-title,.suggestion-name,.group-card-body h4,.group-name,.shop-section-title,.profile-card-item h4,.msg-sidebar-header h3,.msg-contact-name,.notif-text p,.post-menu-btn,.pv-posts-heading{color:var(--dark);}
.promo-subtitle,.suggestion-role,.group-desc,.group-members,.view-more-link,.group-card-body p,.profile-card-item p,.msg-contact-preview,.msg-contact-time,.post-time,.notif-text span,.page-subtitle{color:var(--gray);}
.action-btn,.search-tab,.page-search i,.msg-search i,.msg-chat-placeholder{color:var(--gray);}
.page-header h2{color:var(--dark);}
.view-more-link:hover,.suggestion-item:hover,.group-item:hover,.msg-contact:hover,.msg-contact.active{background:var(--border);}
.post-input-fake,.msg-bubble.received{background:var(--border);color:var(--dark);border-color:var(--border);}
.post-dropdown,.user-dropdown,.modal-content{background:var(--card);color:var(--dark);}
.post-dropdown a,.user-dropdown a{color:var(--dark);}
.post-dropdown a:hover,.user-dropdown a:hover{background:var(--border);}
.post-dropdown a i,.user-dropdown a i{color:var(--gray);}
.messages-layout{background:var(--card);}
.msg-sidebar{border-color:var(--border);}
.msg-contact{border-color:var(--border);}
.msg-chat-header,.msg-chat-input{border-color:var(--border);}
.msg-search input,.page-search input,.msg-chat-input input{background:var(--light-bg);border-color:var(--border);color:var(--dark);}
.search-tab:hover{background:var(--border);color:var(--dark);}
.search-tab .tab-count{background:var(--border);color:var(--gray);}
.badge-red{background:rgba(139,92,246,.15);color:#a78bfa;}
.badge-blue{background:rgba(96,165,250,.15);color:#60a5fa;}
.badge-purple{background:rgba(167,139,250,.15);color:#c4b5fd;}
.badge-green{background:rgba(74,222,128,.15);color:#4ade80;}
.badge-orange{background:rgba(245,158,11,.15);color:#f59e0b;}
.notif-item:hover{background:var(--border);}
.profile-stats,.pv-profile-card .profile-stats,.modal-profile-stats{border-color:var(--border);}
.group-icon{background:rgba(139,92,246,.15);color:var(--primary);}
.link-preview{border-color:var(--border);}
.link-preview:hover{background:var(--border);}
.link-preview-title{color:var(--dark);}
.link-preview-desc{color:var(--gray);}
.modal-header{border-color:var(--border);}
.cpm-textarea{background:var(--card);color:var(--dark);}
.cpm-media-zone{border-color:var(--border);color:var(--gray);}
.pv-profile-card .profile-name,.pv-posts-heading{color:var(--dark);}
.pv-profile-card .profile-title,.stat-label{color:var(--gray);}
.edit-profile-form label{color:var(--dark);}
.edit-profile-form input,.edit-profile-form textarea{background:var(--light-bg);border-color:var(--border);color:var(--dark);}
.follow-list-item{border-color:var(--border);}
.follow-list-info h4{color:var(--dark);}
.follow-list-info p{color:var(--gray);}
.skin-card-body{color:#333;}
.skin-card-body h4{color:#333;}
.skin-card-body p{color:#666;}
.skin-card .btn-primary{background:#5cbdb9!important;border-color:#5cbdb9!important;color:#fff!important;}
.skin-card .btn-primary:hover{background:#4aa8a4!important;border-color:#4aa8a4!important;}
.skin-card .btn-disabled{background:#ccc!important;border-color:#ccc!important;color:#fff!important;}
.skin-card .btn-outline{border-color:#ddd!important;color:#555!important;background:transparent!important;}
.shop-card-actions{display:flex;gap:6px;align-items:center;margin-top:4px;}
.try-on-btn{font-size:12px!important;padding:4px 12px!important;border-radius:6px!important;border:1px solid #bbb!important;color:#666!important;background:transparent!important;transition:all .2s;}
.try-on-btn:hover{border-color:var(--primary)!important;color:var(--primary)!important;}
.try-on-btn.trying{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;}
.skin-card{animation:none!important;}
.group-card{background:var(--card);color:var(--dark);}
.profile-card-item{background:var(--card);color:var(--dark);}
.notif-item{background:var(--card);color:var(--dark);}
.profile-card{background:var(--card);}
.profile-name,.stat-count{color:var(--primary);}
.profile-title{color:var(--gray);}
.profile-coins{background:rgba(139,92,246,.15);color:#a78bfa;}
.profile-stats{border-color:var(--border);}
.view-profile-link{color:var(--primary);}
.photos-empty,.photo-album-empty{color:var(--gray);}
::-webkit-scrollbar-track{background:var(--light-bg);}
::-webkit-scrollbar-thumb{background:var(--border);}

/* ========== LOGIN PAGE ========== */
/* Login Page — centered card on blue gradient */
.login-page{position:fixed;inset:0;background:url('../images/login-bg.webp') center center/cover no-repeat;z-index:9999;overflow:hidden;display:none;}
.login-page.visible{display:block;}
.login-page.hidden{display:none;}
.login-center{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;padding:20px;}
.login-logo-area{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;margin-bottom:-100px;}
.login-logo-img{width:400px;height:auto;object-fit:contain;filter:drop-shadow(0 8px 30px rgba(0,0,0,.2));}
.login-stats{display:flex;gap:48px;justify-content:center;padding-top:12px;flex-shrink:0;}
.login-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.login-stat strong{font-size:42px;font-weight:900;background:linear-gradient(180deg,#1a3a6e,#6ab0f3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));}
.login-stat span{font-size:11px;color:#1a3a6e;text-transform:uppercase;letter-spacing:2.5px;font-weight:700;text-shadow:0 1px 3px rgba(255,255,255,.3);}
.login-card{position:relative;z-index:1;width:100%;max-width:420px;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border-radius:16px;padding:28px 28px;box-shadow:0 20px 60px rgba(0,0,0,.15);}
.login-title{font-size:24px;font-weight:700;color:#1a1a2e;margin-bottom:24px;text-align:center;}
.login-field{margin-bottom:16px;}
.login-input-wrap{position:relative;overflow:hidden;border-radius:10px;}
.login-input-wrap i:first-child{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#aaa;font-size:14px;pointer-events:none;z-index:1;}
.login-input-wrap input{width:100%;padding:13px 46px 13px 42px;border:1px solid #ddd;border-radius:10px;font-size:14px;transition:border-color .2s;background:#f8f9fa;color:#333;box-sizing:border-box;}
.login-input-wrap input::placeholder{color:#aaa;}
.login-input-wrap input:focus{border-color:#3b8fe8;background:#fff;outline:none;}
.login-input-wrap input[type="date"]{color-scheme:light;}
.login-toggle-pw{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#aaa;font-size:14px;padding:8px;cursor:pointer;z-index:2;line-height:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;}
.login-toggle-pw:hover{color:#3b8fe8;}
.login-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:13px;}
.login-remember{display:flex;align-items:center;gap:6px;color:#777;cursor:pointer;}
.login-remember input{accent-color:#3b8fe8;}
.login-forgot{color:#3b8fe8;font-weight:500;font-size:13px;}
.login-forgot:hover{color:#2a6fc0;}
.login-btn{width:100%;padding:14px;font-size:15px;font-weight:600;border:none;border-radius:10px;background:linear-gradient(135deg,#3b8fe8,#2a6fc0);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .2s;margin-bottom:16px;}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(59,143,232,.4);}
.login-btn:active{transform:translateY(0);}
.login-terms{margin-bottom:16px;}
.login-terms-text{max-height:160px;overflow-y:auto;padding:12px 14px;background:#f4f6f8;border:1px solid #e0e4e8;border-radius:10px;font-size:12px;line-height:1.6;color:#666;margin-bottom:10px;scrollbar-width:thin;scrollbar-color:#ccc transparent;}
.login-terms-text::-webkit-scrollbar{width:5px;}
.login-terms-text::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px;}
.login-terms-text h4{font-size:13px;font-weight:700;color:#333;margin-bottom:6px;}
.login-terms-text h5{font-size:12px;font-weight:600;color:#444;margin:10px 0 4px;}
.login-terms-text p{margin-bottom:6px;}
.login-terms-text ul{margin:0 0 6px 18px;padding:0;}
.login-terms-text li{margin-bottom:3px;}

/* ========== TOS SPLASH MODAL (existing users) ========== */
.tos-splash-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;}
.tos-splash-modal{background:#fff;border-radius:14px;max-width:560px;width:100%;padding:24px;box-shadow:0 12px 40px rgba(0,0,0,.3);max-height:90vh;display:flex;flex-direction:column;}
.tos-splash-scroll{flex:1;overflow-y:auto;max-height:50vh;padding:12px 14px;background:#f4f6f8;border:1px solid #e0e4e8;border-radius:10px;font-size:12px;line-height:1.6;color:#666;margin-bottom:16px;scrollbar-width:thin;scrollbar-color:#ccc transparent;}
.tos-splash-scroll::-webkit-scrollbar{width:5px;}
.tos-splash-scroll::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px;}
.tos-splash-scroll h4{font-size:13px;font-weight:700;color:#333;margin-bottom:6px;}
.tos-splash-scroll h5{font-size:12px;font-weight:600;color:#444;margin:10px 0 4px;}
.tos-splash-scroll p{margin-bottom:6px;}
.tos-splash-scroll ul{margin:0 0 6px 18px;padding:0;}
.tos-splash-scroll li{margin-bottom:3px;}
.tos-splash-buttons{display:flex;gap:10px;justify-content:flex-end;}
.tos-splash-buttons .btn{padding:10px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;}

/* ========== COOKIE CONSENT BANNER ========== */
#cookieConsentBanner{position:fixed;bottom:0;left:0;right:0;z-index:99998;background:rgba(30,30,30,.97);color:#fff;padding:16px 20px;box-shadow:0 -2px 12px rgba(0,0,0,.3);backdrop-filter:blur(8px);}
.cookie-banner-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.cookie-banner-inner p{flex:1;margin:0;font-size:13px;line-height:1.5;min-width:200px;}
.cookie-banner-inner a{color:#6ab0f3;}
.cookie-banner-btns{display:flex;gap:8px;flex-shrink:0;}
.cookie-banner-btns .btn{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;}
@media(max-width:640px){.cookie-banner-inner{flex-direction:column;text-align:center;}.cookie-banner-btns{justify-content:center;}}

.login-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;cursor:pointer;}
.login-checkbox input{accent-color:#3b8fe8;width:16px;height:16px;flex-shrink:0;}
.login-error{background:rgba(231,76,60,.1);color:#d63031;padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;display:none;text-align:left;border:1px solid rgba(231,76,60,.15);}
.login-error.show{display:flex;align-items:center;gap:8px;}
.login-error::before{content:'\f06a';font-family:'Font Awesome 6 Free';font-weight:900;font-size:15px;flex-shrink:0;}
.login-footer{text-align:center;color:#888;font-size:14px;margin-top:16px;}
.login-create,.login-back{color:#3b8fe8;font-weight:600;cursor:pointer;}
.login-create:hover,.login-back:hover{color:#2a6fc0;}
/* Signup Modal Overlay */
.signup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);z-index:10000;display:none;align-items:center;justify-content:center;}
.signup-overlay.active{display:flex;}
.signup-modal{position:relative;width:100%;max-width:440px;max-height:90vh;background:rgba(255,255,255,.97);border-radius:16px;padding:32px 28px;box-shadow:0 24px 60px rgba(0,0,0,.25);overflow-y:auto;animation:signupSlideIn .3s ease;}
.signup-modal .login-title{color:#1a1a2e;}
.signup-modal .login-footer{color:#888;}
.signup-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:18px;color:#999;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .2s,color .2s;z-index:1;}
.signup-close:hover{background:rgba(0,0,0,.06);color:#333;}
@keyframes signupSlideIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.app-shell{display:none;}
.app-shell.active{display:block;}
.dq-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:#333;color:#fff;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:500;z-index:9999;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;}
.dq-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.dq-toast-undo{pointer-events:auto;display:flex;align-items:center;gap:14px;}
.dq-toast-undo-btn{background:none;color:var(--primary);font-weight:700;font-size:14px;padding:0;text-decoration:underline;cursor:pointer;}
@media(max-width:900px){
    .login-center{padding:30px 16px;}
    .login-logo-img{width:280px!important;}
    .login-logo-area{margin-bottom:-80px!important;}
    .login-stats{gap:32px!important;}
    .login-stat strong{font-size:34px!important;}
    .login-card{padding:28px 24px;}
}
@media(max-width:480px){
    .login-logo-img{width:220px!important;}
    .login-logo-area{margin-bottom:-60px!important;}
    .login-stats{gap:20px!important;}
    .login-stat strong{font-size:28px!important;}
}

/* ========== NAVBAR ========== */
.navbar{background:var(--nav-bg);position:fixed;top:0;left:0;right:0;height:calc(60px + env(safe-area-inset-top,0px));max-height:calc(60px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,.3);overflow:visible;}
.nav-container{max-width:1600px;margin:0 auto;height:100%;display:flex;align-items:center;padding:0 20px;gap:16px;}
.nav-left{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.nav-logo{font-size:calc(20px * var(--font-scale));font-weight:700;color:#fff;background:rgba(255,255,255,.2);padding:6px 14px;border-radius:8px;transition:background .3s;letter-spacing:.5px;}
.nav-logo:hover{background:rgba(255,255,255,.3);}
.nav-logo.nav-logo-image{background:none;padding:0;border-radius:0;}
.nav-logo.nav-logo-image:hover{background:none;}
.nav-logo-img{height:104px;width:auto;object-fit:contain;display:block;}
.search-bar{position:relative;width:200px;}
.search-bar i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.6);font-size:14px;}
.search-bar input{width:100%;padding:8px 12px 8px 36px;border:none;border-radius:20px;background:rgba(255,255,255,.2);color:#fff;font-size:calc(14px * var(--font-scale));outline:none;transition:background .3s;}
.search-bar input::placeholder{color:rgba(255,255,255,.6);}
.search-bar input:focus{background:rgba(255,255,255,.3);}
.nav-center{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;overflow:visible;}
.nav-link{color:rgba(255,255,255,.75);font-size:calc(11px * var(--font-scale));padding:6px 10px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .3s;white-space:nowrap;position:relative;overflow:visible;text-overflow:ellipsis;flex-shrink:1;min-width:0;}
.nav-link i{font-size:17px;}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.15);}
.nav-right{flex-shrink:0;display:flex;align-items:center;gap:10px;}
.nav-coins{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);padding:6px 14px;border-radius:20px;color:#ffd700;font-size:calc(14px * var(--font-scale));font-weight:600;cursor:pointer;transition:background .2s;}
.nav-coins:hover{background:rgba(255,255,255,.3);}
.nav-coins i{font-size:16px;}
.coin-count{color:#fff;}
.nav-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 10px;border-radius:20px;transition:background .3s;position:relative;}
.nav-user:hover{background:rgba(255,255,255,.15);}
.nav-avatar{width:32px;height:32px;border-radius:50%;border:none;object-fit:cover;}
.nav-username{color:#fff;font-size:calc(14px * var(--font-scale));font-weight:500;}
.nav-user .fa-chevron-down{color:rgba(255,255,255,.8);font-size:10px;}
.notif-badge{position:absolute;top:2px;right:2px;background:#ffd700;color:#333;font-size:calc(10px * var(--font-scale,1));font-weight:700;min-width:1.6em;height:1.6em;border-radius:1em;display:flex;align-items:center;justify-content:center;padding:0 .35em;box-sizing:border-box;line-height:1;text-align:center;z-index:2;}

/* User Dropdown */
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border-radius:8px;box-shadow:var(--shadow-hover);min-width:180px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s;z-index:100;}
.user-dropdown.show{opacity:1;visibility:visible;transform:translateY(0);}
.user-dropdown a{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:14px;color:var(--dark);transition:background .2s;}
.user-dropdown a:hover{background:var(--border);}
.user-dropdown a i{width:16px;color:var(--gray);}
.dropdown-saved-link{display:none;}
.mobile-search-btn{display:none;position:relative;color:rgba(255,255,255,.8);font-size:18px;padding:4px;text-decoration:none;}
.mobile-notif-btn{display:none;position:relative;color:rgba(255,255,255,.8);font-size:18px;padding:4px;text-decoration:none;}
.mobile-notif-btn .notif-badge{position:absolute;top:-4px;right:-6px;min-width:1.5em;height:1.5em;font-size:10px;display:flex;align-items:center;justify-content:center;}

/* ========== PAGES ========== */
.page{display:none;padding-top:calc(80px + env(safe-area-inset-top,0px));min-height:100vh;}
.page.active{display:block;}
#page-home{padding-top:calc(60px + env(safe-area-inset-top,0px));}
.page-container{max-width:1400px;margin:0 auto;padding:0 20px 40px;}
.page-header{margin-bottom:24px;}
.page-header h2{font-size:calc(24px * var(--font-scale));font-weight:700;color:var(--dark);display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.page-header h2 i{color:var(--primary);}
.page-subtitle{font-size:14px;color:var(--gray);}
.page-actions{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;}
.page-search{position:relative;flex:1;min-width:200px;}
.page-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gray);font-size:14px;}
.page-search input{width:100%;padding:10px 14px 10px 40px;border:1px solid var(--border);border-radius:25px;font-size:14px;outline:none;transition:border-color .2s;}
.page-search input:focus{border-color:var(--primary);}
.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--gray);}
.empty-state i{font-size:48px;margin-bottom:16px;display:block;}
.empty-state p{font-size:16px;margin-bottom:16px;}

/* ========== MAIN LAYOUT (HOME) ========== */
.main-container{max-width:1600px;margin:-60px auto 0;padding:0 20px;position:relative;z-index:1;display:grid;grid-template-columns:260px 1fr 300px;gap:24px;align-items:start;}
.main-container>*{min-width:0;}

/* ========== CARDS ========== */
.card{background:var(--card);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;}
.card-heading{font-size:calc(16px * var(--font-scale));font-weight:600;color:var(--dark);padding:16px 18px 12px;border-bottom:1px solid var(--border);word-wrap:break-word;overflow-wrap:anywhere;}

/* ========== LEFT SIDEBAR ========== */
.left-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:80px;}
.profile-card{text-align:center;overflow:visible;}
.profile-cover{height:70px;background:linear-gradient(135deg,var(--primary),var(--primary-hover));transition:background .4s;border-radius:10px 10px 0 0;}

/* Timeline Cover Banner */
.timeline-cover{max-width:1600px;margin:0 auto;height:350px;background:linear-gradient(135deg,var(--primary),var(--primary-hover));background-size:cover;background-position:center;position:relative;border-radius:0 0 10px 10px;}
.timeline-cover-btn{position:absolute;top:16px;right:20px;background:rgba(0,0,0,.55);color:#fff;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:6px;transition:background .2s;z-index:2;}
.timeline-cover-btn:hover{background:rgba(0,0,0,.75);}
.profile-info{padding:0 18px 18px;word-wrap:break-word;overflow-wrap:anywhere;}
.profile-avatar-wrap{position:relative;width:clamp(100px,80%,200px);margin:-50% auto 10px;margin-top:clamp(-100px,-50%,-60px);border-radius:16px;}
.profile-avatar-wrap:not(:has(.premium-border)){overflow:hidden;background:var(--card);}
.profile-avatar{width:100%;aspect-ratio:1;border-radius:16px;border:none;box-shadow:none;object-fit:cover;display:block;}
.avatar-edit-btn{position:absolute;bottom:2px;right:2px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;transition:background .2s;cursor:pointer;z-index:2;}
.avatar-edit-btn:hover{background:rgba(0,0,0,.75);}
.profile-name{font-size:calc(18px * var(--font-scale));font-weight:600;color:var(--dark);margin-bottom:2px;word-wrap:break-word;overflow-wrap:anywhere;white-space:normal;}
.profile-title{font-size:13px;color:var(--gray);margin-bottom:10px;word-wrap:break-word;overflow-wrap:anywhere;white-space:normal;}
.profile-about{font-size:12px;color:var(--gray);line-height:1.5;margin-bottom:12px;text-align:center;padding:0 10px;}
.profile-coins{display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(139,92,246,.15);color:#a78bfa;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:14px;}
.profile-coins i{font-size:14px;}
.profile-stats{display:flex;justify-content:center;gap:16px 30px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;align-items:center;}
.stat-clickable{cursor:pointer;padding:4px 12px;border-radius:10px;transition:background .2s;}
.stat-clickable:hover{background:var(--border);}
.stat-count{font-size:clamp(14px,3vw,16px);font-weight:700;color:var(--primary);white-space:normal;word-wrap:break-word;overflow-wrap:anywhere;}
.stat-label{font-size:12px;color:var(--gray);white-space:normal;word-wrap:break-word;overflow-wrap:anywhere;}
.follow-list{list-style:none;padding:0;margin:0;}
.follow-list-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.follow-list-item:last-child{border-bottom:none;}
.follow-list-item img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.follow-list-info{flex:1;min-width:0;}
.follow-list-info h4{font-size:14px;font-weight:600;color:var(--dark);margin:0;}
.follow-list-info p{font-size:12px;color:var(--gray);margin:2px 0 0;}
.follow-list-item .btn{padding:6px 14px;font-size:12px;}
.follow-list-item.fl-clickable:hover{background:var(--border);border-radius:10px;}
.fl-badge{font-size:11px;display:inline-block;margin-top:3px;}
.fl-mutual{color:var(--primary);}
.fl-follows-you{color:var(--gray);}
.fl-you-follow{color:var(--primary);}
.status-emoji-picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.status-emoji-btn{width:48px;height:48px;border-radius:10px;font-size:28px;background:var(--border);border:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s,background .15s;}
.status-emoji-btn:hover{transform:scale(1.15);border-color:var(--primary);}
.status-emoji-btn.active{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 2px var(--primary);}
.nfb-label{color:var(--gray)!important;border-color:var(--gray)!important;font-size:11px!important;}
.profile-links{display:flex;align-items:center;justify-content:center;gap:12px;}
.view-profile-link{font-size:13px;color:var(--primary);font-weight:500;transition:color .2s;}
.view-profile-link:hover{color:var(--primary-hover);}
.edit-profile-btn{color:var(--gray);font-size:13px;transition:color .2s;}
.edit-profile-btn:hover{color:var(--primary);}
.edit-profile-form label{display:block;font-size:13px;font-weight:500;color:var(--dark);margin-bottom:4px;}
.edit-profile-form input,.edit-profile-form textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;margin-bottom:12px;font-family:inherit;resize:vertical;}
.edit-profile-form textarea{min-height:60px;}

/* Suggestions */
.suggestions-card{overflow:hidden;}
.suggestion-list{padding:8px 12px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.suggestion-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;min-width:60px;max-width:80px;flex:0 1 80px;text-align:center;border-radius:8px;transition:background .2s;}
.suggestion-item:hover{background:var(--border);}
.suggestion-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;object-fit:cover;}
.suggestion-info{min-width:0;width:100%;overflow:hidden;}
.suggestion-info h4{font-size:calc(11px * var(--font-scale));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}
.suggestion-info p{font-size:calc(10px * var(--font-scale));color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}
.suggestion-name{display:block;font-size:calc(11px * var(--font-scale));font-weight:600;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.suggestion-name:hover{color:var(--primary);}
.suggestion-role{display:none;}
.suggestion-follow-btn{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background .3s,transform .2s;}
.suggestion-follow-btn:hover{background:var(--primary-hover);transform:scale(1.1);}
.follow-btn-small{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,transform .2s;}
.follow-btn-small:hover{background:var(--primary-hover);transform:scale(1.1);}
.follow-btn-small.followed{background:var(--gray);}
.view-more-link{display:block;text-align:center;padding:12px;font-size:13px;color:var(--primary);font-weight:500;border-top:1px solid var(--border);transition:background .2s;cursor:pointer;}
.view-more-link:hover{background:var(--border);}

/* ========== CENTER FEED ========== */
.center-feed{display:flex;flex-direction:column;gap:20px;min-width:0;}
#feedContainer,#pvPostsFeed,#gvPostsFeed{display:flex;flex-direction:column;gap:14px;}
.post-create-bar{display:flex;align-items:center;gap:14px;padding:16px 20px;}
.post-create-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;}
.post-input{flex:1;padding:10px 16px;border:1px solid var(--border);border-radius:25px;font-size:14px;color:var(--dark);background:var(--light-bg);outline:none;transition:border-color .2s,background .2s;font-family:inherit;}
.post-input:focus{border-color:var(--primary);background:var(--card);}
.post-input::placeholder{color:var(--gray);}
.post-input-fake{flex:1;padding:10px 16px;border:1px solid var(--border);border-radius:25px;font-size:14px;color:var(--gray);background:var(--light-bg);cursor:pointer;transition:background .2s;}
.post-input-fake:hover{background:var(--border);}
.post-image,.post-video{width:100%;max-width:100%;border-radius:8px;margin-bottom:14px;object-fit:contain;display:block;height:auto;}
.create-post-modal{display:flex;flex-direction:column;max-height:85vh;}
.create-post-modal .modal-header{flex-shrink:0;}
.cpm-scroll{flex:1;overflow-y:auto;min-height:0;}
.modal-content:has(.create-post-modal){overflow-y:hidden;}
.cpm-textarea{width:100%;min-height:100px;border:none;outline:none;resize:none;font-size:15px;font-family:inherit;padding:16px 20px;color:var(--dark);}
.cpm-textarea::placeholder{color:var(--gray);}
.cpm-media-zone{margin:0 16px;border:2px dashed var(--border);border-radius:10px;padding:40px 20px;text-align:center;color:var(--gray);font-size:14px;cursor:pointer;transition:border-color .2s,background .2s;position:relative;}
.cpm-media-zone:hover{border-color:var(--primary);background:var(--border);}
.cpm-media-zone i{font-size:28px;display:block;margin-bottom:8px;}
.cpm-media-zone.has-media{padding:0;border:none;}
.cpm-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:8px;}
.cpm-media-grid .cpm-thumb{position:relative;border-radius:8px;overflow:hidden;}
.cpm-media-grid .cpm-thumb img,.cpm-media-grid .cpm-thumb video{width:100%;height:120px;object-fit:cover;object-position:center;display:block;}
.cpm-media-grid .cpm-thumb .remove-thumb{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cpm-media-zone .remove-photo{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:1;}
.cpm-media-zone.has-media .remove-photo{display:flex;}
.cpm-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;flex-shrink:0;position:relative;}
.cpm-footer .btn{min-width:100px;}

/* Share Post */
.share-textarea{width:100%;min-height:60px;border:1px solid var(--border);border-radius:8px;padding:10px;font-size:14px;resize:vertical;margin-bottom:12px;font-family:inherit;background:var(--card);color:var(--dark);}
.share-preview{border:1px solid var(--border);border-radius:8px;padding:12px;background:var(--card);}
.share-preview-name{color:var(--dark);}
.share-preview-time{color:var(--gray);}
.share-preview-text{color:var(--gray);}

/* Toggle Switch */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:24px;transition:.3s;}
.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;}
.toggle-switch input:checked+.toggle-slider{background:var(--primary);}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);}

/* Hashtag Section in Create Post */
.cpm-tags-section{padding:8px 16px;}
.cpm-tags-section:empty{display:none;}
.cpm-tags-wrap{display:flex;flex-wrap:wrap;gap:6px;}
.cpm-tags-wrap:empty{display:none;}
.cpm-tag-chip{display:inline-flex;align-items:center;gap:4px;background:var(--border);color:var(--gray);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500;}
.cpm-tag-chip button{background:none;color:var(--gray);font-size:10px;padding:0 0 0 2px;display:flex;align-items:center;transition:color .2s;}
.cpm-tag-chip button:hover{color:var(--primary);}

/* Link Section in Create Post */
.cpm-link-section{padding:0 16px 12px;}

.btn{padding:10px 22px;border-radius:25px;font-size:calc(14px * var(--font-scale));font-weight:500;transition:all .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-hover);}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);}
.btn-outline:hover{background:var(--primary);color:#fff;}
.btn-block{display:block;width:100%;}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{background:var(--green-hover);}
.btn-disabled{background:#ccc!important;color:#999!important;cursor:not-allowed!important;}

/* Feed Post */
.feed-post{padding:20px;min-width:0;word-wrap:break-word;overflow-wrap:anywhere;overflow:hidden;max-width:100%;}
.post-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;position:relative;}
.post-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;cursor:pointer;object-fit:cover;}
.post-user-info{flex:1;min-width:0;}
.post-user-top{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.post-username{font-size:calc(15px * var(--font-scale));font-weight:600;color:var(--dark);cursor:pointer;word-wrap:break-word;overflow-wrap:anywhere;}
.post-username:hover{color:var(--primary);}
.post-time{font-size:12px;color:var(--gray);}
.post-badges{display:flex;gap:6px;flex-wrap:wrap;}
.badge{font-size:11px;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:4px;font-weight:500;}
.badge-red{background:rgba(139,92,246,.15);color:var(--primary);}
.badge-blue{background:rgba(96,165,250,.15);color:#60a5fa;}
.badge-purple{background:rgba(167,139,250,.15);color:#c4b5fd;}
.badge-green{background:rgba(74,222,128,.15);color:#4ade80;}
.badge-orange{background:rgba(245,158,11,.15);color:#f59e0b;}
.post-menu-btn{background:none;color:var(--gray);font-size:16px;padding:6px;border-radius:50%;transition:background .2s;flex-shrink:0;}
.post-menu-btn:hover{background:var(--border);}
.post-dropdown{position:absolute;top:36px;right:0;background:var(--card);border-radius:8px;box-shadow:var(--shadow-hover);min-width:160px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s;z-index:50;}
.post-dropdown.show{opacity:1;visibility:visible;transform:translateY(0);}
.post-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--dark);transition:background .2s;}
.post-dropdown a:hover{background:var(--border);}
.post-dropdown a i{width:14px;color:var(--gray);font-size:13px;}
.post-description{margin-bottom:14px;min-width:0;word-wrap:break-word;overflow-wrap:anywhere;}
.post-description p{font-size:calc(14px * var(--font-scale));color:var(--dark);line-height:1.7;}
.view-more-text.hidden{display:none;}
.view-more-btn{background:none;color:var(--primary);font-size:13px;font-weight:500;padding:0;margin:0;display:inline;text-decoration:underline;transition:color .2s;}
.view-more-btn:hover{color:var(--primary-hover);}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.skill-tag{padding:5px 14px;background:var(--border);border-radius:20px;font-size:12px;color:var(--gray);font-weight:500;transition:all .2s;cursor:pointer;}
.skill-tag:hover{background:rgba(139,92,246,.2);color:var(--primary);}
.post-actions{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border);}
.action-left{display:flex;gap:18px;}
.action-btn{display:flex;align-items:center;gap:6px;background:none;color:var(--gray);font-size:14px;padding:4px;transition:color .2s;}
.action-btn span{min-width:14px;text-align:center;}
.action-btn:hover{color:var(--dark);}
.action-btn i{font-size:16px;}
.like-btn.liked{color:var(--primary);}
.like-btn.liked i{font-weight:900;}
.dislike-btn.disliked{color:var(--primary);}
.dislike-btn.disliked i{font-weight:900;}
.liked-avatars{display:flex;}
.liked-avatars img{width:24px;height:24px;border-radius:50%;border:none;margin-left:-8px;}
.liked-avatars img:first-child{margin-left:0;}
.like-count{cursor:pointer;}
.like-count:hover{text-decoration:underline;}

/* Inline Comments */
.inline-comment{display:flex;gap:8px;align-items:flex-start;margin-bottom:14px;}
.post-comments{margin-top:12px;}
.post-comments:empty{margin-top:0;}
.inline-comment-avatar{width:24px;height:24px;border-radius:50%;flex-shrink:0;margin-top:2px;}
.inline-comment-bubble{position:relative;background:var(--border);border-radius:0 12px 12px 12px;padding:6px 10px;display:inline-block;max-width:100%;overflow-wrap:break-word;word-break:break-word;}
.inline-comment-bubble::before{content:'';position:absolute;top:0;left:-6px;border-width:0 6px 6px 0;border-style:solid;border-color:transparent var(--border) transparent transparent;}
.inline-comment-reply-row{margin-left:34px;}
/* Modal Comment Items */
.comment-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;}
.comment-reply{margin-left:42px;padding-left:10px;border-left:2px solid var(--border);}

/* Post Media Grid - Facebook style */
.post-media-grid{display:grid;gap:2px;border-radius:8px;overflow:hidden;margin-top:10px;max-width:100%;width:100%;}
.pm-thumb{position:relative;overflow:hidden;}
.pm-thumb img,.pm-thumb video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;cursor:pointer;}
.pm-more-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pm-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.pm-play-overlay i{font-size:32px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);opacity:.85;}
.pm-count-1{grid-template-columns:1fr;}
.pm-count-1 .pm-thumb{max-height:500px;}
.pm-count-1 .pm-thumb img,.pm-count-1 .pm-thumb video{object-fit:contain;object-position:center;background:#000;height:auto;max-height:500px;}
.pm-count-2{grid-template-columns:1fr 1fr;}
.pm-count-2 .pm-thumb{height:280px;}
.pm-count-3{grid-template-columns:1fr 1fr;}
.pm-count-3 .pm-thumb{height:200px;}
.pm-count-3 .pm-thumb:nth-child(3){grid-column:span 2;}
.pm-count-4{grid-template-columns:1fr 1fr;}
.pm-count-4 .pm-thumb{height:200px;}
.pm-count-5{grid-template-columns:repeat(6,1fr);}
.pm-count-5 .pm-thumb:nth-child(1),.pm-count-5 .pm-thumb:nth-child(2){grid-column:span 3;height:240px;}
.pm-count-5 .pm-thumb:nth-child(n+3){grid-column:span 2;height:160px;}

/* Link Preview Card */
.link-preview{display:block;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:10px;cursor:pointer;transition:background .2s;text-decoration:none;color:inherit;}
.link-preview:hover{background:var(--border);}
.link-preview-image{width:100%;max-height:300px;object-fit:contain;background:#000;display:block;}
.link-preview-info{padding:12px 16px;border-top:1px solid var(--border);}
.link-preview-title{font-size:16px;font-weight:600;color:var(--dark);margin-bottom:4px;}
.link-preview-url{font-size:12px;color:var(--gray);text-transform:uppercase;margin-bottom:2px;}
.link-preview-desc{font-size:13px;color:var(--gray);}

/* ========== INLINE VIDEO EMBEDS ========== */
.video-embed{position:relative;width:100%;max-width:560px;margin:10px auto 0;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/9;}
.video-embed iframe,.video-embed video{position:absolute;top:0;left:0;width:100%;height:100%;border:0;border-radius:8px;}
.video-embed-mini{max-width:360px;}
.post-description .video-embed{margin:10px auto 0;}
/* Social embeds (Instagram, TikTok, Twitter) — blockquote-based, must size naturally */
.social-embed{width:100%;margin:10px auto 0;border-radius:8px;overflow:visible;background:transparent;}
.social-embed iframe,.social-embed blockquote{max-width:100%!important;}
.social-embed-mini{max-width:360px;}

/* ========== MOBILE PILLS BAR ========== */
.mobile-pills-bar{display:none;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0;}
.mobile-pills-bar::-webkit-scrollbar{display:none;}
.mobile-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;background:var(--card);border:1px solid var(--border);color:var(--dark);font-size:13px;font-weight:500;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:background .2s,border-color .2s;}
.mobile-pill:hover,.mobile-pill:active{background:var(--border);border-color:var(--primary);}
.mobile-pill i{font-size:12px;color:var(--primary);}
.mobile-pill img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.pill-modal-scroll{max-height:60vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 0!important;}
.pill-modal-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .15s;border-radius:8px;}
.pill-modal-item:hover,.pill-modal-item:active{background:var(--border);}
.pill-modal-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.pill-modal-info{flex:1;min-width:0;}
.pill-modal-info strong{display:block;font-size:14px;margin-bottom:2px;}
.pill-modal-info p{font-size:12px;color:var(--gray);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pill-modal-follow{flex-shrink:0;}

/* ========== RIGHT SIDEBAR ========== */
.right-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:80px;align-self:start;min-width:0;word-wrap:break-word;overflow-wrap:anywhere;}
.promo-card{text-align:center;padding:24px 20px;overflow:visible;}
.promo-logo{width:50px;height:50px;background:var(--primary);color:#fff;font-size:26px;font-weight:700;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.promo-title{font-size:calc(17px * var(--font-scale));font-weight:600;color:var(--dark);margin-bottom:6px;word-wrap:break-word;overflow-wrap:anywhere;}
.promo-subtitle{font-size:13px;color:var(--gray);margin-bottom:18px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere;}
.promo-card .btn-primary{margin-bottom:10px;font-weight:600;letter-spacing:.5px;}
.coin-rules{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
.coin-rule{display:flex;align-items:center;gap:5px;background:rgba(139,92,246,.15);padding:5px 10px;border-radius:20px;font-size:12px;color:#c4b5fd;white-space:normal;word-wrap:break-word;overflow-wrap:anywhere;}
.coin-rule i{font-size:11px;color:var(--primary);}
.learn-more-link{font-size:13px;color:var(--primary);font-weight:500;cursor:pointer;}
.learn-more-link:hover{color:var(--primary-hover);}

/* Groups sidebar */
.groups-card{flex-shrink:0;}
.groups-card .group-list{padding:4px 0;max-height:280px;overflow-y:auto;}
.group-item{display:flex;align-items:flex-start;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);transition:background .2s;cursor:pointer;}
.group-item:last-child{border-bottom:none;}
.group-item:hover{background:var(--border);}
.group-icon{width:38px;height:38px;border-radius:10px;background:rgba(139,92,246,.15);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.group-info{flex:1;min-width:0;}
.group-name{font-size:calc(14px * var(--font-scale));font-weight:600;color:var(--dark);margin-bottom:2px;word-wrap:break-word;overflow-wrap:anywhere;}
.group-desc{font-size:12px;color:var(--gray);margin-bottom:4px;line-height:1.4;word-wrap:break-word;overflow-wrap:anywhere;}
.group-members{font-size:11px;font-weight:500;color:var(--green);}
.group-members i{font-size:10px;margin-right:2px;}

/* ========== PHOTOS CARD & ALBUM ========== */
.photos-preview{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.photos-preview::-webkit-scrollbar{display:none;}
.photos-preview img{flex:0 0 80px;width:80px;height:80px;object-fit:cover;object-position:center;border-radius:6px;cursor:pointer;transition:opacity .2s;}
.photos-preview img:hover{opacity:.8;}
.photos-empty{grid-column:1/-1;text-align:center;color:var(--gray);font-size:13px;padding:16px 0;}
.photo-album-section{margin-bottom:24px;}
.photo-album-section h3{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.photo-album-section h3 i{color:var(--primary);}
.photo-album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.photo-album-grid img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:8px;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;}
.photo-album-grid img:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.photo-album-grid .photo-wrap{position:relative;}
.photo-album-grid .photo-wrap img{aspect-ratio:1;}
.photo-album-empty{color:var(--gray);font-size:14px;padding:20px;text-align:center;background:var(--card);border-radius:8px;box-shadow:var(--shadow);}
.album-photo-scroll{display:grid!important;grid-template-rows:150px 150px;grid-auto-flow:column;grid-auto-columns:150px;gap:10px 12px;-webkit-overflow-scrolling:touch;}
.album-photo-scroll .photo-wrap{width:150px;height:150px;flex-shrink:0;}
.album-photo-scroll img{width:150px;height:150px;aspect-ratio:auto;object-fit:cover;border-radius:8px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;scroll-snap-align:start;cursor:pointer;}
.album-photo-scroll img:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.album-del-x{opacity:.4;font-size:10px;margin-left:4px;cursor:pointer;transition:opacity .2s,color .2s;}
.album-del-x:hover{opacity:1;color:#e74c3c;}
#albumTabContent,#savedTabContent{transition:opacity .25s ease,transform .25s ease;}
#savedTabContent{max-width:680px;}
.saved-tab-count{background:rgba(0,0,0,.1);color:var(--gray);font-size:10px;padding:1px 6px;border-radius:8px;font-weight:600;}
.search-tab.active .saved-tab-count{background:rgba(255,255,255,.25);color:#fff;}
body.skin-midnight .photos-empty,body.skin-midnight .photo-album-empty{color:#bbb;}

/* ========== TUTORIAL OVERLAY ========== */
.tut-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s ease;}
.tut-overlay.show{opacity:1;}
.tut-modal{background:var(--card);border-radius:16px;max-width:420px;width:100%;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.4);text-align:center;transform:translateY(20px);transition:transform .3s ease;color:var(--dark);}
.tut-overlay.show .tut-modal{transform:translateY(0);}
.tut-header{margin-bottom:16px;}
.tut-logo{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.tut-header h2{font-size:20px;font-weight:700;margin:0;}
.tut-intro{font-size:15px;color:var(--gray);margin-bottom:18px;}
.tut-rules{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:16px;}
.tut-rule{display:flex;align-items:center;gap:6px;background:rgba(139,92,246,.1);padding:8px 14px;border-radius:10px;font-size:13px;}
.tut-rule i{color:var(--primary);font-size:14px;}
.tut-rule strong{color:var(--primary);}
.tut-divider{height:1px;background:var(--border);margin:16px 0;}
.tut-modal h3{font-size:15px;font-weight:600;margin:0 0 10px;text-align:left;}
.tut-list{text-align:left;padding-left:20px;margin:0 0 4px;font-size:13px;color:var(--dark);}
.tut-list li{margin-bottom:6px;line-height:1.5;}
.tut-tip{font-size:13px;color:var(--gray);display:flex;align-items:center;gap:8px;text-align:left;}
.tut-tip i{font-size:16px;flex-shrink:0;}
.tut-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.tut-feat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:rgba(139,92,246,.08);border-radius:10px;font-size:12px;}
.tut-feat i{font-size:20px;color:var(--primary);}
.tut-feat strong{font-size:13px;}
.tut-feat span{color:var(--gray);font-size:11px;}
.tut-ok{margin-top:20px;min-width:140px;}

/* ========== @MENTION AUTOCOMPLETE ========== */
.mention-dropdown{position:fixed;max-height:240px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:9999;display:none;}
.mention-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background .15s;}
.mention-item:hover,.mention-item.active{background:var(--border);}
.mention-avatar{width:32px;height:32px;min-width:32px;aspect-ratio:1;border-radius:50%;object-fit:cover;flex-shrink:0;}
.mention-info{display:flex;flex-direction:column;min-width:0;}
.mention-name{font-size:13px;font-weight:600;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mention-uname{font-size:12px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mention-link{color:var(--primary);font-weight:600;cursor:pointer!important;}
.mention-link:hover{text-decoration:underline;}
.hashtag-link{color:var(--primary);font-weight:600;cursor:pointer!important;}
.hashtag-link:hover{text-decoration:underline;}

/* ========== POLLS ========== */
.poll-container{padding:10px 20px 6px;display:flex;flex-direction:column;gap:8px;}
.poll-option{position:relative;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px;overflow:hidden;transition:border-color .2s;}
.poll-vote-btn{background:var(--card);cursor:pointer;text-align:left;width:100%;display:block;}
.poll-vote-btn:hover{border-color:var(--primary);background:var(--light-bg);}
.poll-voted{cursor:default;}
.poll-bar{position:absolute;top:0;left:0;bottom:0;background:var(--primary);opacity:.12;border-radius:8px;transition:width .4s ease;}
.poll-my-vote{border-color:var(--primary);}
.poll-my-vote .poll-bar{opacity:.2;}
.poll-label{position:relative;z-index:1;font-weight:500;}
.poll-pct{position:relative;z-index:1;float:right;font-weight:600;font-size:13px;color:var(--dark);}
.poll-footer{font-size:12px;color:var(--gray);padding:2px 0;}
.cpm-poll-opt{margin-bottom:6px;}

/* ========== ONLINE STATUS ========== */
.online-dot{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#10b981;border:2px solid var(--card);z-index:1;}

/* ========== READ RECEIPTS ========== */
.msg-read-receipt{display:block;font-size:10px;color:rgba(255,255,255,.5);text-align:right;margin-top:2px;}

/* ========== TYPING INDICATOR ========== */
.msg-typing-indicator{display:flex;gap:4px;padding:8px 14px;align-items:center;}
.typing-dot{width:8px;height:8px;border-radius:50%;background:var(--gray);animation:typingBounce 1.4s infinite both;}
.typing-dot:nth-child(2){animation-delay:.2s;}
.typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes typingBounce{0%,80%,100%{transform:scale(0);opacity:.4;}40%{transform:scale(1);opacity:1;}}

/* ========== BADGES ========== */
.badge-row{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;}
.user-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#fff;font-size:10px;cursor:help;transition:transform .15s;}
.user-badge:hover{transform:scale(1.2);}

/* ========== STORIES BAR ========== */
.stories-bar{display:flex;gap:14px;padding:12px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.stories-bar::-webkit-scrollbar{display:none;}
.stories-bar:empty{display:none;}
.story-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;flex-shrink:0;width:68px;}
.story-ring{width:56px;height:56px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--primary),#f59e0b,#ec4899);position:relative;}
.story-ring.story-viewed{background:var(--border);}
.story-ring.story-has{background:linear-gradient(135deg,var(--primary),#f59e0b);}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--card);}
.story-name{font-size:11px;color:var(--dark);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68px;}
.story-plus{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--card);}
.story-add .story-ring{background:var(--border);}

/* Story Viewer */
.story-viewer-overlay{position:fixed;inset:0;background:#000;z-index:5000;display:flex;flex-direction:column;}
.story-progress{height:3px;background:rgba(255,255,255,.2);flex-shrink:0;}
.story-progress-fill{height:100%;background:#fff;border-radius:2px;}
.story-header{display:flex;align-items:center;gap:10px;padding:12px 16px;flex-shrink:0;}
.story-header-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;}
.story-header strong{color:#fff;font-size:14px;}
.story-close{margin-left:auto;background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:4px 8px;}
.story-content{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.story-media{max-width:100%;max-height:100%;object-fit:contain;}
.story-text{position:absolute;bottom:40px;left:20px;right:20px;color:#fff;font-size:18px;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6);padding:12px;background:rgba(0,0,0,.3);border-radius:12px;}
.story-nav{position:absolute;inset:0;display:flex;z-index:1;}
.story-nav-left,.story-nav-right{flex:1;cursor:pointer;}
.story-viewers{position:absolute;bottom:16px;left:16px;display:flex;gap:12px;z-index:2;}
.story-viewers-btn,.story-delete-btn{background:rgba(255,255,255,.15);border:none;color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;cursor:pointer;backdrop-filter:blur(4px);}
.story-view-list{position:absolute;bottom:60px;left:16px;background:rgba(0,0,0,.8);border-radius:12px;max-height:200px;overflow-y:auto;min-width:180px;z-index:3;}

/* Story Comments */
.story-input-bar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:10px 16px;background:linear-gradient(transparent,rgba(0,0,0,.8));z-index:4;}
.story-reactions-row{display:flex;gap:6px;margin-right:4px;flex-shrink:0;}
.story-react-btn{background:none;border:none;font-size:22px;cursor:pointer;padding:2px;transition:transform .15s;line-height:1;}
.story-react-btn:hover{transform:scale(1.3);}
.story-react-btn:active{transform:scale(0.9);}
.story-comment-input{flex:1;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:8px 14px;color:#fff;font-size:13px;outline:none;font-family:inherit;min-width:0;}
.story-comment-input::placeholder{color:rgba(255,255,255,.5);}
.story-send-btn,.story-emoji-btn{background:none;border:none;color:rgba(255,255,255,.7);font-size:16px;cursor:pointer;padding:4px;transition:color .15s;flex-shrink:0;}
.story-send-btn:hover,.story-emoji-btn:hover{color:var(--primary);}
.story-toggle-comments-btn{background:none;border:none;color:rgba(255,255,255,.7);font-size:13px;cursor:pointer;padding:4px 8px;flex-shrink:0;display:flex;align-items:center;gap:4px;}
.story-toggle-comments-btn:hover{color:#fff;}
.story-comment-count{font-size:12px;}
.story-comments-panel{position:absolute;bottom:52px;left:0;right:0;max-height:40vh;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:flex;flex-direction:column;z-index:3;border-radius:16px 16px 0 0;overflow:hidden;}
.story-comments-list{flex:1;overflow-y:auto;padding:12px 16px;-webkit-overflow-scrolling:touch;}
.story-comment{display:flex;gap:8px;padding:6px 0;align-items:flex-start;}
.story-comment+.story-comment{border-top:1px solid rgba(255,255,255,.1);}

/* ========== EMOJI REACTIONS ========== */
.reaction-picker{display:flex;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:6px 10px;box-shadow:0 4px 20px rgba(0,0,0,.25);z-index:9999;animation:fadeIn .15s ease;}
.reaction-emoji-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:4px;transition:transform .15s;line-height:1;}
.reaction-emoji-btn:hover{transform:scale(1.3);}

/* ========== MODAL ========== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:99990;display:none;align-items:center;justify-content:center;padding:20px;overscroll-behavior:none;}
.modal-overlay.show{display:flex;}
body.modal-open{overflow:hidden!important;position:fixed!important;width:100%!important;}
.modal-content{background:var(--card);border-radius:14px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:modalIn .25s ease;overflow-wrap:break-word;word-break:break-word;min-width:0;}
@keyframes modalIn{from{opacity:0;transform:scale(.9) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
.modal-header h3{font-size:calc(18px * var(--font-scale));font-weight:600;word-wrap:break-word;overflow-wrap:anywhere;min-width:0;}
.modal-close{background:none;font-size:20px;color:var(--gray);width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;transition:background .2s;flex-shrink:0;}
.modal-close:hover{background:var(--border);color:var(--dark);}
.modal-body{padding:24px;word-wrap:break-word;overflow-wrap:anywhere;}
.modal-profile-top{text-align:center;margin-bottom:20px;}
.modal-profile-top img{width:min(280px,100%);height:auto;aspect-ratio:1;border-radius:8px;margin:0 auto 12px;border:none;box-shadow:none;object-fit:cover;display:block;background:transparent;}

/* Comment Modal Layout */
.modal-content:has(.comment-modal-layout){overflow-y:hidden;}
.comment-modal-layout{display:flex;flex-direction:column;max-height:calc(85vh - 65px);overflow:hidden;}
.comment-post-embed{padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;max-height:45vh;overflow-y:auto;overscroll-behavior:contain;}
.comment-post-embed .post-media-grid{max-height:22vh;}
.comment-post-embed .post-media-grid .pm-thumb{max-height:22vh;}
.comment-post-embed .post-media-grid .pm-thumb img,.comment-post-embed .post-media-grid .pm-thumb video{max-height:22vh;object-fit:contain;background:#000;}
.comment-post-embed .post-actions{border-top:1px solid var(--border);padding-top:8px;pointer-events:none;opacity:.7;font-size:13px;}
.comment-post-embed .post-actions .action-btn{font-size:13px;padding:2px 6px;}
.comment-post-embed .post-description p{font-size:14px;line-height:1.6;}
.comment-modal-scroll{flex:1;overflow-y:auto;padding:12px 20px;min-height:80px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.comment-modal-input{padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;}

/* GIF Picker */
.comment-gif-btn{background:transparent;border:1.5px solid var(--border);color:var(--gray);font-size:12px;font-weight:700;padding:6px 10px;border-radius:6px;letter-spacing:.5px;transition:border-color .2s,color .2s;flex-shrink:0;}
.comment-gif-btn:hover{border-color:var(--primary);color:var(--primary);}
.comment-modal-input{position:relative;}
/* Emoji Picker */
.emoji-picker-panel{display:none;flex-direction:column;position:absolute;bottom:100%;left:0;width:320px;max-height:280px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.3);z-index:11;animation:gifPickerIn .2s ease;}
.emoji-picker-panel.open{display:flex;}
.emoji-picker-header{display:flex;gap:8px;align-items:center;padding:10px 14px;flex-shrink:0;border-bottom:1px solid var(--border);}
.emoji-picker-header input{flex:1;font-size:13px;}
.emoji-picker-cats{display:flex;gap:2px;padding:6px 14px;flex-shrink:0;overflow-x:auto;scrollbar-width:none;}
.emoji-picker-cats::-webkit-scrollbar{display:none;}
.emoji-picker-cats button{background:none;border:none;font-size:18px;padding:4px 6px;border-radius:8px;cursor:pointer;opacity:.5;transition:opacity .15s,background .15s;flex-shrink:0;}
.emoji-picker-cats button:hover,.emoji-picker-cats button.active{opacity:1;background:var(--border);}
.emoji-picker-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;padding:4px 10px 8px;overflow-y:auto;flex:1;min-height:0;}
.emoji-picker-grid span{font-size:20px;text-align:center;cursor:pointer;padding:3px;border-radius:6px;transition:background .12s;line-height:1.2;}
.emoji-picker-grid span:hover{background:var(--border);}
.cpm-emoji-btn,.comment-emoji-btn{background:transparent;border:1.5px solid var(--border);color:var(--gray);font-size:16px;padding:6px 10px;border-radius:6px;transition:border-color .2s,color .2s;flex-shrink:0;cursor:pointer;}
.cpm-emoji-btn:hover,.comment-emoji-btn:hover{border-color:var(--primary);color:var(--primary);}

/* Camera Menu */
.camera-menu{display:flex;flex-direction:column;position:absolute;bottom:100%;left:0;min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 -4px 16px rgba(0,0,0,.25);z-index:12;overflow:hidden;margin-bottom:6px;animation:gifPickerIn .2s ease;}
.camera-menu-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:none;border:none;color:var(--dark);font-size:14px;cursor:pointer;transition:background .15s;text-align:left;width:100%;}
.camera-menu-item:hover{background:var(--border);}
.camera-menu-item i{font-size:16px;width:20px;text-align:center;color:var(--primary);}
.camera-menu-item:not(:last-child){border-bottom:1px solid var(--border);}

.gif-picker-panel{display:none;flex-direction:column;position:absolute;bottom:100%;left:0;right:0;max-height:min(380px,50vh);background:var(--card);border:1px solid var(--border);border-bottom:none;border-radius:14px 14px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.25);z-index:10;animation:gifPickerIn .2s ease;}
.gif-picker-panel.comment-gif-flow{position:static;max-height:min(320px,40vh);border:none;border-top:1px solid var(--border);border-radius:0;box-shadow:none;flex-shrink:0;}
@keyframes gifPickerIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.gif-picker-header{display:flex;gap:8px;align-items:center;padding:10px 16px;flex-shrink:0;}
.gif-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 12px 8px;overflow-y:auto;flex:1;min-height:0;}
.gif-picker-grid img{width:100%;border-radius:4px;cursor:pointer;transition:transform .15s,opacity .15s;object-fit:contain;background:rgba(0,0,0,.05);}
.gif-picker-grid img:hover{transform:scale(1.05);opacity:.85;}
.gif-picker-footer{text-align:center;font-size:10px;color:var(--gray);padding:4px 0 8px;flex-shrink:0;letter-spacing:.5px;}
.comment-gif{max-width:180px;max-height:130px;border-radius:6px;display:block;margin-top:4px;}

/* Mini Link Preview (messages, comments) */
.link-preview-mini{margin-top:8px;max-width:260px;border-radius:8px;overflow:hidden;}
.link-preview-mini .link-preview-image{height:100px;width:100%;object-fit:cover;}
.link-preview-mini .link-preview-info{padding:6px 10px;}
.link-preview-mini .link-preview-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.link-preview-mini .link-preview-url{font-size:10px;}

/* Link preview inside message bubbles */
.msg-bubble .link-preview,.msg-bubble .link-preview-mini{max-width:100%;width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.15);border-radius:10px;overflow:hidden;margin-left:0;margin-right:0;}
.msg-bubble .link-preview-image{width:100%;height:auto;max-height:120px;object-fit:contain;background:#000;display:block;}
.msg-bubble .link-preview-info{padding:6px 10px;}
.msg-bubble .link-preview-title{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.msg-bubble .link-preview-url{font-size:10px;}
.msg-bubble.sent .link-preview,.msg-bubble.sent .link-preview-mini{border-color:rgba(255,255,255,.25);}
.msg-bubble.sent .link-preview-title{color:#fff;}
.msg-bubble.sent .link-preview-url{color:rgba(255,255,255,.7);}
.msg-bubble.sent .link-preview-info{border-top-color:rgba(255,255,255,.15);}
.msg-bubble.received .link-preview,.msg-bubble.received .link-preview-mini{border-color:var(--border);}

/* Crop Modal */
.crop-container{position:relative;display:inline-block;max-width:100%;max-height:400px;overflow:hidden;cursor:crosshair;}
.crop-container img{display:block;max-width:100%;max-height:400px;}
.crop-box{position:absolute;border:2px dashed #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.5);cursor:move;min-width:40px;min-height:40px;}
.crop-resize{position:absolute;bottom:-4px;right:-4px;width:12px;height:12px;background:#fff;border:1px solid #333;cursor:nwse-resize;}
.modal-profile-top h3{font-size:20px;font-weight:600;margin-bottom:4px;}
.modal-profile-top p{font-size:14px;color:var(--gray);}
.modal-profile-stats{display:flex;justify-content:center;gap:16px 30px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap;}
.modal-profile-stats .stat{max-width:45%;}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.modal-actions .btn{min-width:90px;overflow:visible;text-overflow:unset;}

/* ========== SKIN SHOP CARDS ========== */
#shopGrid,#mySkinsGrid{display:flex;flex-direction:column;}
.shop-scroll-row{display:flex;gap:16px;overflow-x:auto;padding:8px 4px 16px;scroll-snap-type:x mandatory;cursor:grab!important;user-select:none;}
.shop-scroll-row *{cursor:grab!important;}
.shop-scroll-row button,.shop-scroll-row a{cursor:pointer!important;}
.shop-scroll-row.dragging,.shop-scroll-row.dragging *{cursor:grabbing!important;scroll-snap-type:none;scroll-behavior:auto;}
.shop-scroll-row.dragging>*{pointer-events:none;}
.shop-scroll-row::-webkit-scrollbar{height:6px;}
.shop-scroll-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.shop-scroll-row .skin-card,.shop-scroll-row .group-card,.shop-scroll-row .profile-card-item{min-width:220px;max-width:220px;flex-shrink:0;scroll-snap-align:start;}
.scroll-2row{display:grid!important;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:220px;gap:12px 16px;}
.skin-card{background:#fff!important;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1)!important;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.skin-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.15)!important;}
.skin-preview{height:120px;position:relative;display:flex;align-items:center;justify-content:center;}
.skin-preview-inner{width:80%;height:80px;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:600;overflow:hidden;}
.skin-preview-inner .mini-cover{height:30px;width:100%;position:absolute;top:0;left:0;}
.skin-card-body{padding:16px;overflow:hidden;}
.skin-card-body h4{font-size:calc(16px * var(--font-scale));font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.skin-card-body p{font-size:calc(12px * var(--font-scale));color:#666;margin-bottom:12px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.skin-price{display:flex;align-items:center;gap:4px;font-size:calc(14px * var(--font-scale));font-weight:600;color:#f59e0b;margin-bottom:12px;}
.skin-card .btn{width:100%;text-align:center;}
.shop-section-title{font-size:calc(18px * var(--font-scale));font-weight:600;color:var(--dark);padding:16px 0 4px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shop-section-title i{color:var(--primary);}
.skin-active-badge{display:inline-block;background:var(--green);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;}

/* ========== GROUP CARDS ========== */
.group-card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer;}
.group-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.group-card-banner{height:80px;display:flex;align-items:center;justify-content:center;font-size:32px;color:rgba(255,255,255,.8);position:relative;}
.gc-icon-edit-btn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.4);border:none;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}
.group-card:hover .gc-icon-edit-btn{opacity:1;}
.gc-icon-edit-btn:hover{background:rgba(0,0,0,.6);}
.group-card-body{padding:16px;}
.group-card-body h4{font-size:calc(16px * var(--font-scale));font-weight:600;margin-bottom:4px;}
.group-card-body p{font-size:12px;color:var(--gray);margin-bottom:8px;}
.group-card-body .group-members{font-size:12px;}
.group-card-actions{padding:0 16px 16px;display:flex;gap:8px;}
.group-card-actions .btn{flex:1;text-align:center;padding:8px;font-size:13px;}
.gc-btn-icon{display:none;}

/* ========== PROFILE CARDS ========== */
.profile-card-item{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:20px;text-align:center;transition:transform .2s,box-shadow .2s;}
.profile-card-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.profile-card-item img{width:64px;height:64px;border-radius:50%;margin:0 auto 10px;border:none;}
.profile-card-item h4{font-size:calc(15px * var(--font-scale));font-weight:600;margin-bottom:2px;cursor:pointer;}
.profile-card-item h4:hover{color:var(--primary);}
.profile-card-item p{font-size:12px;color:var(--gray);margin-bottom:12px;}
.profile-card-item .btn{width:100%;text-align:center;padding:8px;font-size:13px;}

/* ========== MESSAGES ========== */
.messages-layout{display:flex;gap:0;max-width:1400px;height:calc(100vh - 100px);background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
.msg-sidebar{width:320px;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
.msg-sidebar-header{padding:20px;border-bottom:1px solid var(--border);}
.msg-sidebar-header h3{font-size:20px;font-weight:600;}
.msg-search{padding:12px 16px;border-bottom:1px solid var(--border);position:relative;}
.msg-search i{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--gray);font-size:13px;}
.msg-search input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--border);border-radius:20px;font-size:13px;outline:none;}
.msg-search input:focus{border-color:var(--primary);}
.msg-contact-list{flex:1;overflow-y:auto;}
.msg-contact{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .2s;border-bottom:1px solid var(--border);}
.msg-contact:hover,.msg-contact.active{background:var(--border);}
.msg-contact img{width:44px;height:44px;border-radius:50%;flex-shrink:0;}
.msg-contact-info{flex:1;min-width:0;}
.msg-contact-name{font-size:calc(14px * var(--font-scale));font-weight:600;color:var(--dark);}
.msg-contact-preview{font-size:12px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-contact-time{font-size:11px;color:var(--gray);flex-shrink:0;}
.msg-chat{flex:1;display:flex;flex-direction:column;}
.msg-chat-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray);}
.msg-chat-placeholder i{font-size:48px;margin-bottom:16px;}
.msg-back-btn{display:none;align-items:center;justify-content:center;background:none;border:none;color:var(--dark);font-size:18px;padding:4px;cursor:pointer;flex-shrink:0;}
.msg-chat-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.msg-chat-header img{width:40px;height:40px;border-radius:50%;}
.msg-chat-header h4{font-size:16px;font-weight:600;}
.msg-chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;}
.msg-bubble{max-width:70%;padding:10px 16px;border-radius:18px;font-size:14px;line-height:1.5;overflow-wrap:anywhere;word-break:normal;white-space:pre-wrap;min-width:0;}
.msg-bubble.sent{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px;}
.msg-bubble.received{align-self:flex-start;background:var(--border);color:var(--dark);border-bottom-left-radius:4px;}
.msg-chat-input{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;position:relative;}
.msg-chat-input input[type="text"]{flex:1;min-width:0;padding:10px 16px;border:1px solid var(--border);border-radius:25px;font-size:14px;outline:none;font-family:inherit;}
.msg-chat-input input[type="text"]:focus{border-color:var(--primary);}
.msg-chat-input #sendMsgBtn{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0;border:none;cursor:pointer;}
.msg-chat-input #sendMsgBtn:hover{background:var(--primary-hover);}
.msg-chat-input .msg-media-btn{background:none;border:none;color:var(--primary);font-size:18px;padding:6px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.msg-chat-input .msg-media-btn:hover{opacity:.7;}
.msg-gif-picker{position:absolute;bottom:100%;left:0;right:0;max-height:min(340px,45vh);display:none;flex-direction:column;background:var(--card);border:1px solid var(--border);border-bottom:none;border-radius:14px 14px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.25);z-index:10;}
.msg-gif-picker.open{display:flex;}
.msg-gif-picker .gif-picker-header{display:flex;gap:8px;align-items:center;padding:10px 14px;flex-shrink:0;}
.msg-gif-picker .gif-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 12px 8px;overflow-y:auto;flex:1;min-height:0;}
.msg-gif-picker .gif-picker-grid img{width:100%;border-radius:4px;cursor:pointer;transition:transform .15s;object-fit:contain;background:rgba(0,0,0,.05);}
.msg-gif-picker .gif-picker-grid img:hover{transform:scale(1.05);opacity:.85;}
.msg-gif-picker .gif-picker-footer{text-align:center;font-size:10px;color:var(--gray);padding:4px 0 8px;flex-shrink:0;}

/* Messages Following Sidebar */
.msg-following-bar{width:200px;border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.msg-following-header{padding:16px;border-bottom:1px solid var(--border);}
.msg-following-header h4{font-size:14px;font-weight:600;color:var(--dark);}
.msg-following-list{flex:1;overflow-y:auto;padding:8px;}
.msg-following-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .2s;}
.msg-following-item:hover{background:var(--light-bg);}
.msg-following-item img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.msg-following-item span{font-size:13px;font-weight:500;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ========== NOTIFICATIONS ========== */
.notif-item{background:var(--card);border-radius:10px;box-shadow:var(--shadow);padding:16px 20px;display:flex;align-items:center;gap:14px;margin-bottom:12px;transition:background .2s;}
.notif-item[data-post-id]:hover{background:var(--border);transform:translateX(4px);}
.notif-item[data-post-id]::after{content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;margin-left:auto;color:var(--gray);font-size:12px;flex-shrink:0;}
.notif-item.unread{border-left:3px solid var(--primary);}
.notif-new-badge{display:inline-block;background:var(--primary);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;margin-left:6px;vertical-align:middle;}
.notif-item:hover{background:var(--border);}
.notif-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.notif-icon.skin{background:rgba(139,92,246,.15);color:#8b5cf6;}
.notif-icon.coin{background:rgba(245,158,11,.15);color:#f59e0b;}
.notif-icon.follow{background:rgba(74,222,128,.15);color:var(--green);}
.notif-icon.group{background:rgba(96,165,250,.15);color:#3b82f6;}
.notif-text{flex:1;}
.notif-text p{font-size:14px;color:var(--dark);}
.notif-text span{font-size:12px;color:var(--gray);}

/* ========== SKIN THEMES ON PROFILE CARD ========== */
.profile-card.skin-classic{background:#fff;}
.profile-card.skin-classic .profile-cover{background:linear-gradient(135deg,#5cbdb9,#4aada9)!important;}
.profile-card.skin-classic .profile-name,.profile-card.skin-classic .stat-count{color:#5cbdb9;}
.profile-card.skin-classic .profile-coins{background:#e0f7f5;color:#5cbdb9;}
.profile-card.skin-classic .profile-stats{border-color:#e0f7f5;}
.profile-card.skin-classic .view-profile-link{color:#5cbdb9;}

.profile-card.skin-midnight{background:#2a2a4a;}
.profile-card.skin-midnight .profile-cover{background:linear-gradient(135deg,#1a1a2e,#16213e)!important;}
.profile-card.skin-midnight .profile-info{color:#eee;}
.profile-card.skin-midnight .profile-name,.profile-card.skin-midnight .stat-count{color:#e94560;}
.profile-card.skin-midnight .profile-title,.profile-card.skin-midnight .stat-label{color:#aaa;}
.profile-card.skin-midnight .profile-coins{background:#16213e;color:#e94560;}
.profile-card.skin-midnight .profile-stats{border-color:#2a2a4a;}
.profile-card.skin-midnight .view-profile-link{color:#e94560;}

.profile-card.skin-ocean{background:#fff;}
.profile-card.skin-ocean .profile-cover{background:linear-gradient(135deg,#1976d2,#0d47a1)!important;}
.profile-card.skin-ocean .profile-name,.profile-card.skin-ocean .stat-count{color:#1565c0;}
.profile-card.skin-ocean .profile-coins{background:#bbdefb;color:#1565c0;}
.profile-card.skin-ocean .profile-stats{border-color:#bbdefb;}
.profile-card.skin-ocean .view-profile-link{color:#1976d2;}

.profile-card.skin-forest{background:#fff;}
.profile-card.skin-forest .profile-cover{background:linear-gradient(135deg,#2e7d32,#1b5e20)!important;}
.profile-card.skin-forest .profile-name,.profile-card.skin-forest .stat-count{color:#2e7d32;}
.profile-card.skin-forest .profile-coins{background:#c8e6c9;color:#2e7d32;}
.profile-card.skin-forest .profile-stats{border-color:#c8e6c9;}
.profile-card.skin-forest .view-profile-link{color:#388e3c;}

.profile-card.skin-royal{background:#fff;}
.profile-card.skin-royal .profile-cover{background:linear-gradient(135deg,#7b1fa2,#4a148c)!important;}
.profile-card.skin-royal .profile-name,.profile-card.skin-royal .stat-count{color:#6a1b9a;}
.profile-card.skin-royal .profile-coins{background:#e1bee7;color:#6a1b9a;}
.profile-card.skin-royal .profile-stats{border-color:#e1bee7;}
.profile-card.skin-royal .view-profile-link{color:#7b1fa2;}

.profile-card.skin-sunset{background:#fff;}
.profile-card.skin-sunset .profile-cover{background:linear-gradient(135deg,#ef6c00,#e65100)!important;}
.profile-card.skin-sunset .profile-name,.profile-card.skin-sunset .stat-count{color:#e65100;}
.profile-card.skin-sunset .profile-coins{background:#ffe0b2;color:#e65100;}
.profile-card.skin-sunset .profile-stats{border-color:#ffe0b2;}
.profile-card.skin-sunset .view-profile-link{color:#ef6c00;}

/* ========== PROFILE VIEW PAGE ========== */
#page-profile-view{padding-top:calc(60px + env(safe-area-inset-top,0px));}
.pv-cover-banner{max-width:1600px;margin:0 auto;height:350px;background:linear-gradient(135deg,var(--primary),var(--primary-hover));background-size:cover;background-position:center;position:relative;border-radius:0 0 10px 10px;}
.pv-main-container{max-width:900px;margin:-60px auto 0;padding:0 20px 40px;position:relative;z-index:1;}
.pv-feed{display:flex;flex-direction:column;gap:16px;}
.pv-profile-card{text-align:center;overflow:visible;}
.pv-profile-card .profile-cover{height:70px;}
.pv-profile-card .profile-info{padding:0 18px 18px;word-wrap:break-word;overflow-wrap:anywhere;}
.pv-profile-card .profile-avatar-wrap{position:relative;width:clamp(100px,80%,200px);margin:clamp(-100px,-50%,-60px) auto 10px;}
.pv-profile-card .profile-avatar{width:100%;aspect-ratio:1;border-radius:16px;border:none;box-shadow:none;object-fit:cover;display:block;}
.pv-profile-card .profile-name{font-size:calc(18px * var(--font-scale));font-weight:600;color:var(--dark);margin-bottom:2px;word-wrap:break-word;overflow-wrap:anywhere;white-space:normal;}
.pv-profile-card .profile-title{font-size:13px;color:var(--gray);margin-bottom:10px;word-wrap:break-word;overflow-wrap:anywhere;white-space:normal;}
.pv-profile-card .profile-stats{display:flex;justify-content:center;gap:16px 30px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap;}
.pv-profile-card .pv-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:4px;}
.pv-profile-card .pv-back-link{font-size:13px;color:var(--primary);font-weight:500;cursor:pointer;display:inline-block;margin-top:10px;}
.pv-profile-card .pv-back-link:hover{color:var(--primary-hover);}
.pv-posts-heading{font-size:16px;font-weight:600;color:var(--dark);padding:16px 18px 12px;border-bottom:1px solid var(--border);margin:0;}

/* ========== SHARED SKIN HELPERS ========== */
/* Dark-bg skin helper: midnight uses dark cards, others use white cards with tinted bg */
/* Each skin defines: --sk (accent), --sk2 (accent-dark), --sk-bg (page bg), --sk-card (card bg), --sk-card2 (secondary bg), --sk-text (main text), --sk-muted (muted text), --sk-border (borders) */

/* ========== CLASSIC ========== */
body.skin-classic .coin-rule{background:#e0f7f5;color:#3a9e99;}
body.skin-classic .coin-rule i{color:#5cbdb9;}
body.skin-classic .group-icon{background:#e0f7f5;color:#5cbdb9;}
body.skin-classic .badge-red{background:#e0f7f5;color:#5cbdb9;}

/* ========== MIDNIGHT ========== */
body.skin-midnight{background:#1a1a2e;color:#ddd;}
body.skin-midnight .navbar{background:#16213e;}
body.skin-midnight .card,body.skin-midnight .group-card,body.skin-midnight .profile-card-item,body.skin-midnight .notif-item{background:#2a2a4a;color:#ddd;}
body.skin-midnight .feed-post{border-left:3px solid #e94560;}
body.skin-midnight .post-username,body.skin-midnight .msg-chat-header h4{color:#e94560;}
body.skin-midnight .post-description p,body.skin-midnight .profile-about,body.skin-midnight .gv-about-body p,body.skin-midnight .gv-rules-body ol{color:#ccc;}
body.skin-midnight .skill-tag{background:#3a3a5a;color:#ccc;}
body.skin-midnight .post-actions{border-color:#3a3a5a;}
body.skin-midnight .inline-comment-bubble{background:#3a3a5a;color:#ddd;}
body.skin-midnight .inline-comment-bubble::before{border-color:transparent #3a3a5a transparent transparent;}
body.skin-midnight .inline-comment-bubble span{color:#bbb!important;}
body.skin-midnight .inline-comment-like{color:#888!important;}
body.skin-midnight .coin-rule{background:#16213e;color:#e94560;}
body.skin-midnight .coin-rule i{color:#e94560;}
body.skin-midnight .card-heading,body.skin-midnight .promo-title,body.skin-midnight .suggestion-name,body.skin-midnight .group-card-body h4,body.skin-midnight .group-name,body.skin-midnight .shop-section-title,body.skin-midnight .profile-card-item h4,body.skin-midnight .msg-sidebar-header h3,body.skin-midnight .msg-contact-name,body.skin-midnight .notif-text p,body.skin-midnight .post-menu-btn,body.skin-midnight .pv-posts-heading{color:#eee;}
body.skin-midnight .promo-subtitle,body.skin-midnight .suggestion-role,body.skin-midnight .group-desc,body.skin-midnight .group-members,body.skin-midnight .view-more-link,body.skin-midnight .group-card-body p,body.skin-midnight .profile-card-item p,body.skin-midnight .msg-contact-preview,body.skin-midnight .msg-contact-time,body.skin-midnight .post-time,body.skin-midnight .notif-text span,body.skin-midnight .gv-about-meta span,body.skin-midnight .gv-members-more,body.skin-midnight .gv-staff-item strong{color:#bbb;}
body.skin-midnight .action-btn,body.skin-midnight .search-tab,body.skin-midnight .page-search i,body.skin-midnight .msg-search i,body.skin-midnight .msg-chat-placeholder{color:#bbb;}
body.skin-midnight .page-header h2,body.skin-midnight .page-subtitle{color:#ddd;}
body.skin-midnight .view-more-link:hover,body.skin-midnight .suggestion-item:hover,body.skin-midnight .group-item:hover,body.skin-midnight .msg-contact:hover,body.skin-midnight .msg-contact.active{background:#3a3a5a;}
body.skin-midnight .post-input-fake,body.skin-midnight .msg-bubble.received{background:#3a3a5a;color:#ddd;border-color:#3a3a5a;}
body.skin-midnight .post-dropdown,body.skin-midnight .user-dropdown,body.skin-midnight .modal-content{background:#2a2a4a;color:#ddd;}
body.skin-midnight .post-dropdown a,body.skin-midnight .user-dropdown a{color:#ddd;}
body.skin-midnight .post-dropdown a:hover,body.skin-midnight .user-dropdown a:hover{background:#3a3a5a;}
body.skin-midnight .post-dropdown a i,body.skin-midnight .user-dropdown a i{color:#bbb;}
body.skin-midnight .messages-layout{background:#2a2a4a;}
body.skin-midnight .msg-sidebar{border-color:#3a3a5a;}
body.skin-midnight .msg-following-bar{border-color:#3a3a5a;}body.skin-midnight .msg-following-header{border-color:#3a3a5a;}body.skin-midnight .msg-following-header h4,body.skin-midnight .msg-following-item span{color:#eee;}body.skin-midnight .msg-following-item:hover{background:#1a1a2e;}
body.skin-midnight .msg-contact{border-color:#3a3a5a;}
body.skin-midnight .msg-chat-header,.body.skin-midnight .msg-chat-input{border-color:#3a3a5a;}
body.skin-midnight .msg-search input,body.skin-midnight .page-search input,body.skin-midnight .msg-chat-input input{background:#1a1a2e;border-color:#3a3a5a;color:#ddd;}
body.skin-midnight .search-tab:hover{background:#3a3a5a;color:#ddd;}
body.skin-midnight .search-tab .tab-count{background:#3a3a5a;color:#bbb;}
body.skin-midnight .badge-red{background:#3a2030;color:#e94560;}
body.skin-midnight .badge-blue{background:#1a2a4a;color:#6ba4f5;}
body.skin-midnight .badge-purple{background:#2a1a4a;color:#b38cf6;}
body.skin-midnight .badge-green{background:#1a3a2a;color:#4ade80;}
body.skin-midnight .badge-orange{background:#3a2a1a;color:#f59e0b;}
body.skin-midnight .notif-item:hover{background:#3a3a5a;}
body.skin-midnight .profile-stats,body.skin-midnight .pv-profile-card .profile-stats,body.skin-midnight .modal-profile-stats{border-color:#3a3a5a;}
body.skin-midnight .group-icon{background:#16213e;}
body.skin-midnight .link-preview{border-color:#3a3a5a;}
body.skin-midnight .link-preview:hover{background:#3a3a5a;}
body.skin-midnight .link-preview-title{color:#eee;}
body.skin-midnight .link-preview-desc{color:#bbb;}
body.skin-midnight .modal-header{border-color:#3a3a5a;}
body.skin-midnight .cpm-textarea{background:#2a2a4a;color:#ddd;}
body.skin-midnight .cpm-media-zone{border-color:#3a3a5a;color:#bbb;}
body.skin-midnight .photo-album-empty{background:#2a2a4a;}
body.skin-midnight .cpm-tag-chip{background:#3a3a5a;color:#bbb;}
body.skin-midnight .share-textarea{background:#2a2a4a;border-color:#3a3a5a;color:#ddd;}
body.skin-midnight .share-preview{background:#2a2a4a;border-color:#3a3a5a;}
body.skin-midnight .pv-profile-card .profile-name,body.skin-midnight .pv-posts-heading{color:#eee;}
body.skin-midnight .pv-profile-card .profile-title,body.skin-midnight .stat-label{color:#bbb;}
body.skin-midnight .edit-profile-form label{color:#ddd;}
body.skin-midnight .edit-profile-form input,body.skin-midnight .edit-profile-form textarea{background:#1a1a2e;border-color:#3a3a5a;color:#ddd;}
body.skin-midnight .follow-list-item{border-color:#3a3a5a;}
body.skin-midnight .follow-list-item.fl-clickable:hover{background:#3a3a5a;}
body.skin-midnight .follow-list-info h4{color:#eee;}
body.skin-midnight .follow-list-info p{color:#bbb;}
body.skin-midnight .status-emoji-btn{background:#3a3a5a;}
body.skin-midnight .status-emoji-btn.active{background:#2a2a4a;}
body.skin-midnight ::-webkit-scrollbar-track{background:#1a1a2e;}
body.skin-midnight ::-webkit-scrollbar-thumb{background:#3a3a5a;}
body.skin-midnight.tpl-cinema .pv-col-photos .card-heading{background:#e94560;}
body.skin-midnight.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#e94560;}
body.skin-midnight.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-track{background:#1a1a2e;}

/* ========== OCEAN ========== */
body.skin-ocean{background:#e3f2fd;}
body.skin-ocean .navbar{background:#1565c0;}
body.skin-ocean .card,body.skin-ocean .group-card,body.skin-ocean .profile-card-item,body.skin-ocean .notif-item{background:#fff;color:#333;}
body.skin-ocean .feed-post{border-left:3px solid #1976d2;}
body.skin-ocean .skill-tag{background:#bbdefb;color:#1565c0;}
body.skin-ocean .inline-comment-bubble{background:#bbdefb;color:#1565c0;}
body.skin-ocean .inline-comment-bubble::before{border-color:transparent #bbdefb transparent transparent;}
body.skin-ocean .inline-comment-bubble span{color:#1565c0!important;}
body.skin-ocean .coin-rule{background:#bbdefb;color:#1565c0;}
body.skin-ocean .coin-rule i{color:#1565c0;}
body.skin-ocean .messages-layout{background:#fff;}
body.skin-ocean .group-icon{background:#bbdefb;color:#1565c0;}
body.skin-ocean .badge-red{background:#bbdefb;color:#1565c0;}
body.skin-ocean.tpl-cinema .pv-col-photos .card-heading{background:#1565c0;}
body.skin-ocean.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#1565c0;}

/* ========== FOREST ========== */
body.skin-forest{background:#e8f5e9;}
body.skin-forest .navbar{background:#2e7d32;}
body.skin-forest .card,body.skin-forest .group-card,body.skin-forest .profile-card-item,body.skin-forest .notif-item{background:#fff;color:#333;}
body.skin-forest .feed-post{border-left:3px solid #2e7d32;}
body.skin-forest .skill-tag{background:#c8e6c9;color:#2e7d32;}
body.skin-forest .inline-comment-bubble{background:#c8e6c9;color:#2e7d32;}
body.skin-forest .inline-comment-bubble::before{border-color:transparent #c8e6c9 transparent transparent;}
body.skin-forest .inline-comment-bubble span{color:#2e7d32!important;}
body.skin-forest .coin-rule{background:#c8e6c9;color:#2e7d32;}
body.skin-forest .coin-rule i{color:#2e7d32;}
body.skin-forest .messages-layout{background:#fff;}
body.skin-forest .group-icon{background:#c8e6c9;color:#2e7d32;}
body.skin-forest .badge-red{background:#c8e6c9;color:#2e7d32;}
body.skin-forest.tpl-cinema .pv-col-photos .card-heading{background:#2e7d32;}
body.skin-forest.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#2e7d32;}

/* ========== ROYAL ========== */
body.skin-royal{background:#f3e5f5;}
body.skin-royal .navbar{background:#6a1b9a;}
body.skin-royal .card,body.skin-royal .group-card,body.skin-royal .profile-card-item,body.skin-royal .notif-item{background:#fff;color:#333;}
body.skin-royal .feed-post{border-left:3px solid #7b1fa2;}
body.skin-royal .skill-tag{background:#e1bee7;color:#6a1b9a;}
body.skin-royal .inline-comment-bubble{background:#e1bee7;color:#6a1b9a;}
body.skin-royal .inline-comment-bubble::before{border-color:transparent #e1bee7 transparent transparent;}
body.skin-royal .inline-comment-bubble span{color:#6a1b9a!important;}
body.skin-royal .coin-rule{background:#e1bee7;color:#6a1b9a;}
body.skin-royal .coin-rule i{color:#6a1b9a;}
body.skin-royal .messages-layout{background:#fff;}
body.skin-royal .group-icon{background:#e1bee7;color:#6a1b9a;}
body.skin-royal .badge-red{background:#e1bee7;color:#6a1b9a;}
body.skin-royal.tpl-cinema .pv-col-photos .card-heading{background:#6a1b9a;}
body.skin-royal.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#6a1b9a;}

/* ========== SUNSET ========== */
body.skin-sunset{background:#fff8e1;}
body.skin-sunset .navbar{background:#e65100;}
body.skin-sunset .card,body.skin-sunset .group-card,body.skin-sunset .profile-card-item,body.skin-sunset .notif-item{background:#fff;color:#333;}
body.skin-sunset .feed-post{border-left:3px solid #ef6c00;}
body.skin-sunset .skill-tag{background:#ffe0b2;color:#e65100;}
body.skin-sunset .inline-comment-bubble{background:#ffe0b2;color:#e65100;}
body.skin-sunset .inline-comment-bubble::before{border-color:transparent #ffe0b2 transparent transparent;}
body.skin-sunset .inline-comment-bubble span{color:#e65100!important;}
body.skin-sunset .coin-rule{background:#ffe0b2;color:#e65100;}
body.skin-sunset .coin-rule i{color:#e65100;}
body.skin-sunset .messages-layout{background:#fff;}
body.skin-sunset .group-icon{background:#ffe0b2;color:#e65100;}
body.skin-sunset .badge-red{background:#ffe0b2;color:#e65100;}
body.skin-sunset.tpl-cinema .pv-col-photos .card-heading{background:#e65100;}
body.skin-sunset.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#e65100;}

/* ========== CHERRY ========== */
body.skin-cherry{background:#fce4ec;}
body.skin-cherry .navbar{background:#c2185b;}
body.skin-cherry .card,body.skin-cherry .group-card,body.skin-cherry .profile-card-item,body.skin-cherry .notif-item{background:#fff;color:#333;}
body.skin-cherry .feed-post{border-left:3px solid #d81b60;}
body.skin-cherry .skill-tag{background:#f8bbd0;color:#c2185b;}
body.skin-cherry .inline-comment-bubble{background:#f8bbd0;color:#c2185b;}
body.skin-cherry .inline-comment-bubble::before{border-color:transparent #f8bbd0 transparent transparent;}
body.skin-cherry .inline-comment-bubble span{color:#c2185b!important;}
body.skin-cherry .coin-rule{background:#f8bbd0;color:#c2185b;}
body.skin-cherry .coin-rule i{color:#c2185b;}
body.skin-cherry .messages-layout{background:#fff;}
body.skin-cherry .group-icon{background:#f8bbd0;color:#c2185b;}
body.skin-cherry .badge-red{background:#f8bbd0;color:#c2185b;}
body.skin-cherry.tpl-cinema .pv-col-photos .card-heading{background:#c2185b;}
body.skin-cherry.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#c2185b;}

/* ========== SLATE ========== */
body.skin-slate{background:#263238;color:#ddd;}
body.skin-slate .navbar{background:#37474f;}
body.skin-slate .card,body.skin-slate .group-card,body.skin-slate .profile-card-item,body.skin-slate .notif-item{background:#37474f;color:#ddd;}
body.skin-slate .feed-post{border-left:3px solid #78909c;}
body.skin-slate .post-username,body.skin-slate .msg-chat-header h4{color:#80cbc4;}
body.skin-slate .post-description p,body.skin-slate .profile-about,body.skin-slate .gv-about-body p,body.skin-slate .gv-rules-body ol{color:#b0bec5;}
body.skin-slate .skill-tag{background:#455a64;color:#b0bec5;}
body.skin-slate .post-actions{border-color:#455a64;}
body.skin-slate .inline-comment-bubble{background:#455a64;color:#ddd;}
body.skin-slate .inline-comment-bubble::before{border-color:transparent #455a64 transparent transparent;}
body.skin-slate .inline-comment-bubble span{color:#90a4ae!important;}
body.skin-slate .inline-comment-like{color:#78909c!important;}
body.skin-slate .coin-rule{background:#455a64;color:#80cbc4;}
body.skin-slate .coin-rule i{color:#80cbc4;}
body.skin-slate .card-heading,body.skin-slate .promo-title,body.skin-slate .suggestion-name,body.skin-slate .group-card-body h4,body.skin-slate .group-name,body.skin-slate .shop-section-title,body.skin-slate .profile-card-item h4,body.skin-slate .msg-sidebar-header h3,body.skin-slate .msg-contact-name,body.skin-slate .notif-text p,body.skin-slate .post-menu-btn,body.skin-slate .pv-posts-heading{color:#eceff1;}
body.skin-slate .promo-subtitle,body.skin-slate .suggestion-role,body.skin-slate .group-desc,body.skin-slate .group-members,body.skin-slate .view-more-link,body.skin-slate .group-card-body p,body.skin-slate .profile-card-item p,body.skin-slate .msg-contact-preview,body.skin-slate .msg-contact-time,body.skin-slate .post-time,body.skin-slate .notif-text span{color:#90a4ae;}
body.skin-slate .action-btn,body.skin-slate .search-tab,body.skin-slate .page-search i,body.skin-slate .msg-search i,body.skin-slate .msg-chat-placeholder{color:#90a4ae;}
body.skin-slate .page-header h2,body.skin-slate .page-subtitle{color:#ddd;}
body.skin-slate .view-more-link:hover,body.skin-slate .suggestion-item:hover,body.skin-slate .group-item:hover,body.skin-slate .msg-contact:hover,body.skin-slate .msg-contact.active{background:#455a64;}
body.skin-slate .post-input-fake,body.skin-slate .msg-bubble.received{background:#455a64;color:#ddd;border-color:#455a64;}
body.skin-slate .post-dropdown,body.skin-slate .user-dropdown,body.skin-slate .modal-content{background:#37474f;color:#ddd;}
body.skin-slate .post-dropdown a,body.skin-slate .user-dropdown a{color:#ddd;}
body.skin-slate .post-dropdown a:hover,body.skin-slate .user-dropdown a:hover{background:#455a64;}
body.skin-slate .post-dropdown a i,body.skin-slate .user-dropdown a i{color:#90a4ae;}
body.skin-slate .messages-layout{background:#37474f;}
body.skin-slate .msg-sidebar{border-color:#455a64;}
body.skin-slate .msg-following-bar{border-color:#455a64;}body.skin-slate .msg-following-header{border-color:#455a64;}body.skin-slate .msg-following-header h4,body.skin-slate .msg-following-item span{color:#eceff1;}body.skin-slate .msg-following-item:hover{background:#263238;}
body.skin-slate .msg-contact{border-color:#455a64;}
body.skin-slate .msg-search input,body.skin-slate .page-search input,body.skin-slate .msg-chat-input input{background:#263238;border-color:#455a64;color:#ddd;}
body.skin-slate .search-tab:hover{background:#455a64;color:#ddd;}
body.skin-slate .search-tab .tab-count{background:#455a64;color:#90a4ae;}
body.skin-slate .badge-red{background:#37303a;color:#ef9a9a;}
body.skin-slate .badge-blue{background:#263848;color:#81d4fa;}
body.skin-slate .profile-stats,body.skin-slate .pv-profile-card .profile-stats,body.skin-slate .modal-profile-stats{border-color:#455a64;}
body.skin-slate .group-icon{background:#263238;}
body.skin-slate .modal-header{border-color:#455a64;}
body.skin-slate .cpm-textarea{background:#37474f;color:#ddd;}
body.skin-slate .cpm-media-zone{border-color:#455a64;color:#90a4ae;}
body.skin-slate .photo-album-empty{background:#37474f;}
body.skin-slate .cpm-tag-chip{background:#455a64;color:#90a4ae;}
body.skin-slate .share-textarea{background:#37474f;border-color:#455a64;color:#ddd;}
body.skin-slate .share-preview{background:#37474f;border-color:#455a64;}
body.skin-slate .pv-profile-card .profile-name,body.skin-slate .pv-posts-heading{color:#eceff1;}
body.skin-slate .pv-profile-card .profile-title,body.skin-slate .stat-label{color:#90a4ae;}
body.skin-slate .edit-profile-form label{color:#ddd;}
body.skin-slate .edit-profile-form input,body.skin-slate .edit-profile-form textarea{background:#263238;border-color:#455a64;color:#ddd;}
body.skin-slate .follow-list-item{border-color:#455a64;}
body.skin-slate .follow-list-item.fl-clickable:hover{background:#455a64;}
body.skin-slate .follow-list-info h4{color:#eceff1;}
body.skin-slate .follow-list-info p{color:#90a4ae;}
body.skin-slate .status-emoji-btn{background:#455a64;}
body.skin-slate .status-emoji-btn.active{background:#37474f;}
body.skin-slate ::-webkit-scrollbar-track{background:#263238;}
body.skin-slate ::-webkit-scrollbar-thumb{background:#455a64;}
body.skin-slate.tpl-cinema .pv-col-photos .card-heading{background:#78909c;}
body.skin-slate.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#78909c;}
body.skin-slate.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-track{background:#263238;}

/* ========== EMBER ========== */
body.skin-ember{background:#fbe9e7;}
body.skin-ember .navbar{background:#bf360c;}
body.skin-ember .card,body.skin-ember .group-card,body.skin-ember .profile-card-item,body.skin-ember .notif-item{background:#fff;color:#333;}
body.skin-ember .feed-post{border-left:3px solid #e64a19;}
body.skin-ember .skill-tag{background:#ffccbc;color:#bf360c;}
body.skin-ember .inline-comment-bubble{background:#ffccbc;color:#bf360c;}
body.skin-ember .inline-comment-bubble::before{border-color:transparent #ffccbc transparent transparent;}
body.skin-ember .inline-comment-bubble span{color:#bf360c!important;}
body.skin-ember .coin-rule{background:#ffccbc;color:#bf360c;}
body.skin-ember .coin-rule i{color:#bf360c;}
body.skin-ember .messages-layout{background:#fff;}
body.skin-ember .group-icon{background:#ffccbc;color:#bf360c;}
body.skin-ember .badge-red{background:#ffccbc;color:#bf360c;}
body.skin-ember.tpl-cinema .pv-col-photos .card-heading{background:#bf360c;}
body.skin-ember.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#bf360c;}

/* ========== ARCTIC ========== */
body.skin-arctic{background:#e0f7fa;}
body.skin-arctic .navbar{background:#00838f;}
body.skin-arctic .card,body.skin-arctic .group-card,body.skin-arctic .profile-card-item,body.skin-arctic .notif-item{background:#fff;color:#333;}
body.skin-arctic .feed-post{border-left:3px solid #00acc1;}
body.skin-arctic .skill-tag{background:#b2ebf2;color:#00838f;}
body.skin-arctic .inline-comment-bubble{background:#b2ebf2;color:#00838f;}
body.skin-arctic .inline-comment-bubble::before{border-color:transparent #b2ebf2 transparent transparent;}
body.skin-arctic .inline-comment-bubble span{color:#00838f!important;}
body.skin-arctic .coin-rule{background:#b2ebf2;color:#00838f;}
body.skin-arctic .coin-rule i{color:#00838f;}
body.skin-arctic .messages-layout{background:#fff;}
body.skin-arctic .group-icon{background:#b2ebf2;color:#00838f;}
body.skin-arctic .badge-red{background:#b2ebf2;color:#00838f;}
body.skin-arctic.tpl-cinema .pv-col-photos .card-heading{background:#00838f;}
body.skin-arctic.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#00838f;}

/* ========== MOSS ========== */
body.skin-moss{background:#f1f8e9;}
body.skin-moss .navbar{background:#558b2f;}
body.skin-moss .card,body.skin-moss .group-card,body.skin-moss .profile-card-item,body.skin-moss .notif-item{background:#fff;color:#333;}
body.skin-moss .feed-post{border-left:3px solid #689f38;}
body.skin-moss .skill-tag{background:#dcedc8;color:#558b2f;}
body.skin-moss .inline-comment-bubble{background:#dcedc8;color:#558b2f;}
body.skin-moss .inline-comment-bubble::before{border-color:transparent #dcedc8 transparent transparent;}
body.skin-moss .inline-comment-bubble span{color:#558b2f!important;}
body.skin-moss .coin-rule{background:#dcedc8;color:#558b2f;}
body.skin-moss .coin-rule i{color:#558b2f;}
body.skin-moss .messages-layout{background:#fff;}
body.skin-moss .group-icon{background:#dcedc8;color:#558b2f;}
body.skin-moss .badge-red{background:#dcedc8;color:#558b2f;}
body.skin-moss.tpl-cinema .pv-col-photos .card-heading{background:#558b2f;}
body.skin-moss.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#558b2f;}

/* ========== PASTEL DREAM ========== */
.profile-card.skin-pastel{background:#fef5ff;}
.profile-card.skin-pastel .profile-cover{background:linear-gradient(135deg,#fbc2eb,#a6c1ee,#fdcbf1,#e6dee9)!important;background-size:300% 300%!important;animation:pastelShift 8s ease infinite!important;}
.profile-card.skin-pastel .profile-name,.profile-card.skin-pastel .stat-count{color:#9b72b0;}
.profile-card.skin-pastel .profile-coins{background:#f3e5f5;color:#9b72b0;}
.profile-card.skin-pastel .profile-stats{border-color:#f3e5f5;}
.profile-card.skin-pastel .view-profile-link{color:#9b72b0;}
body.skin-pastel{background:#faf5ff;}
body.skin-pastel .navbar{background:linear-gradient(135deg,#fbc2eb,#a6c1ee,#fdcbf1,#c3aed6);background-size:300% 300%;animation:pastelShift 8s ease infinite;}
body.skin-pastel .card,body.skin-pastel .group-card,body.skin-pastel .profile-card-item,body.skin-pastel .notif-item{background:#fff;color:#4a2040;}
body.skin-pastel .feed-post{border-left:3px solid #c3aed6;}
body.skin-pastel .skill-tag{background:#f3e5f5;color:#7b4a8e;}
body.skin-pastel .inline-comment-bubble{background:#f3e5f5;color:#7b4a8e;}
body.skin-pastel .inline-comment-bubble::before{border-color:transparent #f3e5f5 transparent transparent;}
body.skin-pastel .inline-comment-bubble span{color:#7b4a8e!important;}
body.skin-pastel .coin-rule{background:#f3e5f5;color:#7b4a8e;}
body.skin-pastel .coin-rule i{color:#9b72b0;}
body.skin-pastel .messages-layout{background:#fff;}
body.skin-pastel .group-icon{background:#f3e5f5;color:#9b72b0;}
body.skin-pastel .badge-red{background:#f3e5f5;color:#9b72b0;}
body.skin-pastel.tpl-cinema .pv-col-photos .card-heading{background:linear-gradient(135deg,#fbc2eb,#a6c1ee);background-size:300% 300%;animation:pastelShift 8s ease infinite;}
body.skin-pastel.tpl-cinema .pv-col-photos .photos-preview::-webkit-scrollbar-thumb{background:#c3aed6;}
@keyframes pastelShift{0%{background-position:0% 50%;}25%{background-position:100% 0%;}50%{background-position:100% 100%;}75%{background-position:0% 100%;}100%{background-position:0% 50%;}}

/* ========== GROUP CHAT ========== */
.gc-layout{display:flex;height:calc(100vh - 280px);min-height:400px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card);}
.gc-fullscreen-active{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;display:flex!important;flex-direction:column!important;background:var(--bg)!important;overflow:hidden!important;}
.gc-fullscreen-active .gc-layout{height:auto!important;flex:1!important;min-height:0!important;border:none!important;border-radius:0!important;overflow:hidden!important;}
.gc-fullscreen-active .gc-chat-area{flex:1!important;min-height:0!important;display:flex!important;flex-direction:column!important;}
.gc-fullscreen-active .gc-messages{flex:1!important;min-height:0!important;overflow-y:auto!important;}
.gc-fullscreen-active .gc-input-bar{flex-shrink:0!important;}
#gcBackBar{z-index:1;}
.gc-sidebar{width:220px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;background:color-mix(in srgb,var(--card) 95%,#000);}
.gc-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600;font-size:14px;}
.gc-sidebar-title{display:flex;align-items:center;gap:8px;}
.gc-add-btn{background:none;border:none;color:var(--gray);cursor:pointer;padding:4px 6px;border-radius:6px;font-size:12px;transition:all .2s;}
.gc-add-btn:hover{color:var(--primary);background:rgba(139,92,246,.1);}
.gc-section{margin-bottom:4px;}
.gc-section-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--gray);font-weight:600;}
.gc-section-actions{display:flex;gap:2px;opacity:0;transition:opacity .2s;}
.gc-section-header:hover .gc-section-actions{opacity:1;}
.gc-channel{display:flex;align-items:center;padding:6px 14px 6px 20px;cursor:pointer;font-size:14px;color:var(--gray);border-radius:6px;margin:1px 6px;transition:all .15s;position:relative;}
.gc-channel:hover{background:rgba(139,92,246,.08);color:var(--dark);}
.gc-channel.active{background:rgba(139,92,246,.15);color:var(--primary);font-weight:600;}
.gc-channel-hash{color:var(--gray);font-weight:700;margin-right:4px;font-size:16px;}
.gc-ch-actions{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .2s;}
.gc-channel:hover .gc-ch-actions{opacity:1;}
.gc-empty-sidebar{padding:20px 14px;text-align:center;color:var(--gray);font-size:13px;}
/* Chat area */
.gc-chat-area{flex:1;display:flex;flex-direction:column;min-width:0;}
.gc-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray);gap:12px;}
.gc-chat-header{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:15px;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.gc-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:4px;-webkit-overflow-scrolling:touch;}
.gc-welcome{text-align:center;padding:40px 20px;color:var(--gray);}
/* Messages — Discord-style */
.gc-msg{display:flex;gap:12px;padding:6px 0;border-radius:6px;}
.gc-msg:hover{background:rgba(0,0,0,.04);}
.gc-msg-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;cursor:pointer;}
.gc-msg-body{flex:1;min-width:0;}
.gc-msg-header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.gc-msg-name{font-weight:600;font-size:14px;color:var(--primary);cursor:pointer;}
.gc-msg-name:hover{text-decoration:underline;}
.gc-msg-time{font-size:11px;color:var(--gray);}
.gc-msg-del,.gc-msg-edit{background:none;border:none;color:var(--gray);cursor:pointer;font-size:11px;padding:2px 4px;opacity:.5;transition:opacity .2s,color .2s;}
.gc-msg-del:hover{opacity:1;color:#e74c3c;}
.gc-msg-edit:hover{opacity:1;color:var(--primary);}
.gc-inline-edit{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.gc-edit-textarea{width:100%;padding:10px 14px;border:1px solid var(--primary);border-radius:8px;font-size:14px;line-height:1.5;background:var(--light-bg);color:var(--dark);outline:none;font-family:inherit;resize:none;min-height:60px;max-height:50vh;overflow-y:auto;}
.gc-edit-actions{display:flex;gap:8px;justify-content:flex-end;}

/* Group chat members panel (right side) */
.gc-members-panel{width:200px;flex-shrink:0;border-left:1px solid var(--border);overflow-y:auto;background:color-mix(in srgb,var(--card) 95%,#000);display:flex;flex-direction:column;}
.gc-members-header{padding:12px 14px;font-weight:600;font-size:13px;color:var(--gray);border-bottom:1px solid var(--border);flex-shrink:0;}
.gc-members-group{padding:4px 0;}
.gc-members-label{padding:6px 14px 4px;font-size:11px;font-weight:600;text-transform:uppercase;color:var(--gray);letter-spacing:.5px;}
.gc-member-item{display:flex;align-items:center;gap:8px;padding:5px 14px;cursor:pointer;transition:background .15s;font-size:13px;color:var(--dark);}
.gc-member-item:hover{background:var(--border);}
.gc-member-item img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;}
@media(max-width:768px){
    .gc-members-panel{display:none!important;}
}
.gc-msg-content{margin-top:2px;word-wrap:break-word;overflow-wrap:anywhere;}
.gc-msg-content img,.gc-msg-content video{display:block;margin-top:4px;}
.gc-msg-text{font-size:14px;line-height:1.5;white-space:pre-wrap;}
.gc-msg-text a{color:var(--primary);text-decoration:underline;}
/* Input bar */
.gc-input-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0;position:relative;}
.gc-input-bar input[type="text"],.gc-input-bar textarea{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:20px;font-size:14px;background:var(--light-bg);color:var(--dark);outline:none;font-family:inherit;resize:none;min-height:20px;max-height:120px;line-height:1.4;overflow-y:auto;}
.gc-input-bar input[type="text"]:focus,.gc-input-bar textarea:focus{border-color:var(--primary);}
.gc-media-btn{background:none;border:none;color:var(--gray);font-size:18px;cursor:pointer;padding:6px;border-radius:8px;transition:all .2s;}
.gc-media-btn:hover{color:var(--primary);background:rgba(139,92,246,.1);}
#gcSendBtn{background:var(--primary);color:#fff;border:none;padding:8px 14px;border-radius:20px;cursor:pointer;font-size:14px;transition:background .2s;}
#gcSendBtn:hover{background:var(--primary-hover);}
/* GIF picker positioning */
.gc-input-bar .msg-gif-picker{position:absolute;bottom:100%;left:0;right:0;max-height:300px;}
.gc-input-bar .emoji-picker-panel{position:absolute;bottom:100%;left:0;right:0;}
.gc-input-bar #gcEmojiBtn{background:none;border:none;color:var(--gray);font-size:16px;cursor:pointer;padding:4px 8px;}
.gc-input-bar #gcEmojiBtn:hover{color:var(--primary);}

/* Mobile group chat — two-state: channel list OR chat view */
@media(max-width:768px){
    .gc-layout{height:auto;flex-direction:row;border-radius:0;border:none;}
    /* Default: show sidebar (channel list), hide chat area */
    .gc-fullscreen-active .gc-layout{flex-direction:row!important;}
    .gc-fullscreen-active .gc-sidebar{width:100%!important;max-height:none!important;flex:1!important;border-right:none!important;flex-direction:column!important;flex-wrap:nowrap!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0!important;}
    .gc-fullscreen-active .gc-chat-area{display:none!important;}
    .gc-fullscreen-active .gc-sidebar-header{padding:12px 14px;font-size:15px;}
    .gc-fullscreen-active .gc-section{display:block;margin:0;}
    .gc-fullscreen-active .gc-section-header{padding:8px 14px;font-size:11px;}
    .gc-fullscreen-active .gc-channel{padding:10px 14px;margin:0;border-radius:0;font-size:14px;border:none;border-bottom:1px solid var(--border);white-space:normal;display:block;}
    .gc-fullscreen-active .gc-channel.active{background:var(--primary);color:#fff;border-color:var(--primary);}
    .gc-fullscreen-active .gc-ch-actions,.gc-fullscreen-active .gc-section-actions{display:none;}
    /* When a channel is selected: hide sidebar, show chat */
    .gc-fullscreen-active.gc-chat-open .gc-sidebar{display:none!important;}
    .gc-fullscreen-active.gc-chat-open .gc-chat-area{display:flex!important;flex:1!important;flex-direction:column!important;min-height:0!important;}
    .gc-fullscreen-active.gc-chat-open .gc-messages{flex:1!important;min-height:0!important;overflow-y:auto!important;}
    .gc-fullscreen-active.gc-chat-open .gc-input-bar{flex-shrink:0!important;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;}
    /* Channel nav button in chat view */
    .gc-mobile-nav-btn{display:flex!important;}
    /* Safe areas */
    .gc-fullscreen-active{padding-top:env(safe-area-inset-top,0px)!important;padding-bottom:env(safe-area-inset-bottom,0px)!important;}
}
@media(min-width:769px){
    .gc-mobile-nav-btn{display:none!important;}
}
.gc-mobile-nav-btn{display:none;background:none;border:none;color:var(--text);font-size:16px;cursor:pointer;padding:4px 10px 4px 4px;margin-right:4px;}

/* Group chat context menu */
.gc-context-menu{background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.25);z-index:10000;min-width:180px;overflow:hidden;animation:fadeIn .1s ease;}
.gc-ctx-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:none;border:none;font-size:13px;color:var(--dark);cursor:pointer;text-align:left;transition:background .15s;font-family:inherit;}
.gc-ctx-item:hover{background:var(--border);}
.gc-ctx-item i{width:16px;text-align:center;color:var(--gray);}
.gc-ctx-danger{color:#e74c3c!important;}
.gc-ctx-danger i{color:#e74c3c!important;}

/* In-chat modal overlay (renders inside fullscreen chat) */
.gc-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;animation:fadeIn .15s ease;}
.gc-modal-content{background:var(--card);border-radius:14px;max-width:480px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:modalIn .2s ease;}

/* Drag and drop */
.gc-drag-handle{color:var(--gray);cursor:grab;padding:0 6px 0 0;font-size:11px;opacity:.5;transition:opacity .15s;}
.gc-drag-handle:hover{opacity:1;}
.gc-dragging{opacity:.4;}
.gc-drag-over{border-top:2px solid var(--primary)!important;}
.gc-drop-target{background:rgba(var(--primary-rgb,92,189,185),.1);border-radius:4px;}
.gc-channel-list{min-height:8px;} /* ensures empty sections have a drop zone */

/* ========== TEMPLATE: PANORAMA ========== */
body.tpl-panorama .main-container{grid-template-columns:280px 1fr 320px;grid-template-rows:auto 1fr;}
body.tpl-panorama .left-sidebar{display:contents;}
body.tpl-panorama .left-sidebar .profile-card{grid-column:1;grid-row:2;}
body.tpl-panorama .left-sidebar .photos-card{grid-column:1/-1;grid-row:1;}

body.tpl-panorama .center-feed{grid-column:2;grid-row:2;}
body.tpl-panorama .right-sidebar{grid-column:3;grid-row:2;position:sticky;top:80px;}
/* Panorama PV: photos wide banner on top, then profile+feed+skin in 3 cols below */
body.tpl-panorama .pv-layout{grid-template-columns:280px 1fr 320px;grid-template-rows:auto 1fr;}
body.tpl-panorama .pv-col-left{grid-column:1;grid-row:2;}
body.tpl-panorama .pv-col-photos{grid-column:1/-1;grid-row:1;}
body.tpl-panorama .pv-col-feed{grid-column:2;grid-row:2;}
body.tpl-panorama .pv-col-skin{grid-column:3;grid-row:2;position:sticky;top:80px;align-self:start;}

/* ========== TEMPLATE: COMPACT ========== */
body.tpl-compact .main-container{grid-template-columns:1fr 260px;max-width:1000px;grid-template-rows:auto auto 1fr;}
body.tpl-compact .left-sidebar{display:contents;}
body.tpl-compact .left-sidebar .profile-card{grid-column:1/-1;grid-row:1;}
body.tpl-compact .left-sidebar .photos-card{grid-column:1/-1;grid-row:2;}

body.tpl-compact .center-feed{grid-column:1;grid-row:3;}
body.tpl-compact .right-sidebar{grid-column:2;grid-row:3;position:static;}
/* Compact PV: narrower, profile full-width on top, photos below, then feed+skin */
body.tpl-compact .pv-layout{grid-template-columns:1fr 260px;max-width:1000px;grid-template-rows:auto auto 1fr;}
body.tpl-compact .pv-col-left{grid-column:1/-1;grid-row:1;position:static;}
body.tpl-compact .pv-col-photos{grid-column:1/-1;grid-row:2;}
body.tpl-compact .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-compact .pv-col-skin{grid-column:2;grid-row:3;align-self:start;}

/* ========== TEMPLATE: REVERSE ========== */
body.tpl-reverse .main-container{grid-template-columns:260px 1fr 300px;grid-template-rows:auto 1fr;}
body.tpl-reverse .left-sidebar{display:contents;}
body.tpl-reverse .left-sidebar .profile-card{grid-column:3;grid-row:1/3;position:sticky;top:80px;}
body.tpl-reverse .left-sidebar .photos-card{grid-column:1/3;grid-row:1;}

body.tpl-reverse .center-feed{grid-column:2;grid-row:2;}
body.tpl-reverse .right-sidebar{grid-column:1;grid-row:2;position:static;}
/* Reverse PV: mirrored — profile right, photos wide left, skin left of feed */
body.tpl-reverse .pv-layout{grid-template-columns:300px 1fr 260px;direction:rtl;}
body.tpl-reverse .pv-layout>*{direction:ltr;}

/* ========== TEMPLATE: DASHBOARD ========== */
body.tpl-dashboard .main-container{grid-template-columns:280px 1fr;grid-template-rows:auto auto 1fr;}
body.tpl-dashboard .left-sidebar{display:contents;}
body.tpl-dashboard .left-sidebar .profile-card{grid-column:1;grid-row:2;}
body.tpl-dashboard .left-sidebar .photos-card{grid-column:1/-1;grid-row:1;}

body.tpl-dashboard .center-feed{grid-column:2;grid-row:2/4;}
body.tpl-dashboard .right-sidebar{grid-column:1;grid-row:3;position:static;}
/* Dashboard PV: photos banner on top, profile+skin stacked left, feed spanning right */
body.tpl-dashboard .pv-layout{grid-template-columns:280px 1fr;grid-template-rows:auto auto 1fr;}
body.tpl-dashboard .pv-col-left{grid-column:1;grid-row:2;}
body.tpl-dashboard .pv-col-photos{grid-column:1/-1;grid-row:1;}
body.tpl-dashboard .pv-col-feed{grid-column:2;grid-row:2/4;}
body.tpl-dashboard .pv-col-skin{grid-column:1;grid-row:3;align-self:start;}

/* ========== TEMPLATE: CINEMA ========== */
body.tpl-cinema .main-container{grid-template-columns:280px 1fr 320px;grid-template-rows:auto 1fr;max-width:1400px;}
body.tpl-cinema .left-sidebar{display:contents;}
body.tpl-cinema .left-sidebar .profile-card{grid-column:1;grid-row:2;}
body.tpl-cinema .left-sidebar .photos-card{grid-column:1/-1;grid-row:1;}

body.tpl-cinema .center-feed{grid-column:2;grid-row:2;}
body.tpl-cinema .right-sidebar{grid-column:3;grid-row:2;position:static;}
/* Cinema PV: photos single scrollable row on top, then profile+feed+skin in 3 cols below */
body.tpl-cinema .pv-layout{grid-template-columns:280px 1fr 320px;grid-template-rows:auto 1fr;max-width:1400px;}
body.tpl-cinema .pv-col-left{grid-column:1;grid-row:2;}
body.tpl-cinema .pv-col-photos{grid-column:1/-1;grid-row:1;}
body.tpl-cinema .pv-col-photos .card-heading{background:var(--primary);color:#fff;border-radius:10px 10px 0 0;border-bottom:none;padding:14px 18px;font-size:18px;}
body.tpl-cinema .pv-col-photos .card-heading i{color:#fff!important;}
body.tpl-cinema .pv-col-photos .photos-preview{display:flex;gap:8px;padding:10px 14px;cursor:grab;user-select:none;}
body.tpl-cinema .pv-col-photos .photos-preview img{flex:0 0 calc(25% - 6px);min-width:200px;aspect-ratio:16/9;object-fit:cover;object-position:center;-webkit-user-drag:none;user-drag:none;}
body.tpl-cinema .pv-col-feed{grid-column:2;grid-row:2;}
body.tpl-cinema .pv-col-skin{grid-column:3;grid-row:2;align-self:start;}

/* ========== TEMPLATE: MAGAZINE ========== */
body.tpl-magazine .main-container{grid-template-columns:3fr 2fr;grid-template-rows:auto auto 1fr;max-width:1400px;}
body.tpl-magazine .left-sidebar{display:contents;}
body.tpl-magazine .left-sidebar .profile-card{grid-column:1;grid-row:2;max-width:100%;}
body.tpl-magazine .left-sidebar .photos-card{grid-column:1/-1;grid-row:1;}

body.tpl-magazine .center-feed{grid-column:2;grid-row:2/4;}
body.tpl-magazine .right-sidebar{grid-column:1;grid-row:3;position:static;}
/* Magazine PV: photos banner on top, profile+skin left, feed spanning right */
body.tpl-magazine .pv-layout{grid-template-columns:3fr 2fr;grid-template-rows:auto auto 1fr;max-width:1400px;}
body.tpl-magazine .pv-col-left{grid-column:1;grid-row:2;position:static;}
body.tpl-magazine .pv-col-photos{grid-column:1/-1;grid-row:1;}
body.tpl-magazine .pv-col-feed{grid-column:2;grid-row:2/4;}
body.tpl-magazine .pv-col-skin{grid-column:1;grid-row:3;align-self:start;}
body.tpl-magazine .pv-col-left .pv-profile-card{max-width:100%;}

/* ========== TEMPLATE: ZEN ========== */
body.tpl-zen .main-container{grid-template-columns:1fr;max-width:700px;}
body.tpl-zen .left-sidebar{display:contents;}
body.tpl-zen .left-sidebar .profile-card{grid-column:1;grid-row:1;max-width:300px;margin:0 auto;width:100%;}
body.tpl-zen .left-sidebar .photos-card{grid-column:1;grid-row:2;}

body.tpl-zen .center-feed{grid-column:1;grid-row:3;}
body.tpl-zen .right-sidebar{grid-column:1;grid-row:4;position:static;max-width:300px;margin:0 auto;width:100%;}
/* Zen PV: minimal centered — profile centered top, photos below, then narrow feed, no skin card */
body.tpl-zen .pv-layout{grid-template-columns:1fr;max-width:700px;grid-template-rows:auto auto auto auto;}
body.tpl-zen .pv-col-left{grid-column:1;grid-row:1;position:static;max-width:300px;margin:0 auto;}
body.tpl-zen .pv-col-photos{grid-column:1;grid-row:2;}
body.tpl-zen .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-zen .pv-col-skin{grid-column:1;grid-row:4;position:static;max-width:300px;margin:0 auto;}

/* ========== TEMPLATE: SPOTLIGHT ========== */
body.tpl-spotlight .main-container{grid-template-columns:240px 1fr 240px;grid-template-rows:auto 1fr;}
body.tpl-spotlight .left-sidebar{display:contents;}
body.tpl-spotlight .left-sidebar .profile-card{grid-column:1;grid-row:1/3;position:sticky;top:80px;}
body.tpl-spotlight .left-sidebar .photos-card{grid-column:2;grid-row:1;}

body.tpl-spotlight .center-feed{grid-column:2;grid-row:2;}
body.tpl-spotlight .right-sidebar{grid-column:3;grid-row:1/3;position:sticky;top:80px;}
body.tpl-spotlight .pv-layout{grid-template-columns:240px 1fr 240px;grid-template-rows:auto 1fr;}
body.tpl-spotlight .pv-col-left{grid-column:1;grid-row:1/3;position:sticky;top:80px;}
body.tpl-spotlight .pv-col-photos{grid-column:2;grid-row:1;}
body.tpl-spotlight .pv-col-feed{grid-column:2;grid-row:2;}
body.tpl-spotlight .pv-col-skin{grid-column:3;grid-row:1/3;position:sticky;top:80px;align-self:start;}

/* ========== TEMPLATE: WIDESCREEN ========== */
body.tpl-widescreen .main-container{grid-template-columns:1fr 320px;grid-template-rows:auto auto 1fr;}
body.tpl-widescreen .left-sidebar{display:contents;}
body.tpl-widescreen .left-sidebar .profile-card{grid-column:1/-1;grid-row:1;max-width:100%;}
body.tpl-widescreen .left-sidebar .photos-card{grid-column:1;grid-row:2;}

body.tpl-widescreen .center-feed{grid-column:1;grid-row:3;}
body.tpl-widescreen .right-sidebar{grid-column:2;grid-row:2/4;position:static;}
body.tpl-widescreen .pv-layout{grid-template-columns:1fr 320px;}
body.tpl-widescreen .pv-col-left{grid-column:1/-1;grid-row:1;position:static;}
body.tpl-widescreen .pv-col-left .pv-profile-card{max-width:100%;}
body.tpl-widescreen .pv-col-photos{grid-column:1;grid-row:2;}
body.tpl-widescreen .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-widescreen .pv-col-skin{grid-column:2;grid-row:2/4;align-self:start;}

/* ========== TEMPLATE: DUO ========== */
body.tpl-duo .main-container{grid-template-columns:280px 1fr;grid-template-rows:auto 1fr;}
body.tpl-duo .left-sidebar{display:contents;}
body.tpl-duo .left-sidebar .profile-card{grid-column:1;grid-row:1;}
body.tpl-duo .left-sidebar .photos-card{grid-column:1;grid-row:2;}

body.tpl-duo .center-feed{grid-column:2;grid-row:1/3;}
body.tpl-duo .right-sidebar{display:none;}
body.tpl-duo .pv-layout{grid-template-columns:280px 1fr;}
body.tpl-duo .pv-col-left{grid-column:1;grid-row:1;}
body.tpl-duo .pv-col-photos{grid-column:1;grid-row:2;}
body.tpl-duo .pv-col-feed{grid-column:2;grid-row:1/3;}
body.tpl-duo .pv-col-skin{display:none;}

/* ========== TEMPLATE: HEADLINE ========== */
body.tpl-headline .main-container{grid-template-columns:3fr 2fr;grid-template-rows:auto auto 1fr;}
body.tpl-headline .left-sidebar{display:contents;}
body.tpl-headline .left-sidebar .profile-card{grid-column:1/-1;grid-row:1;max-width:100%;}
body.tpl-headline .left-sidebar .photos-card{grid-column:1/-1;grid-row:2;}

body.tpl-headline .center-feed{grid-column:1;grid-row:3;}
body.tpl-headline .right-sidebar{grid-column:2;grid-row:3;position:static;}
body.tpl-headline .pv-layout{grid-template-columns:3fr 2fr;grid-template-rows:auto auto 1fr;}
body.tpl-headline .pv-col-left{grid-column:1/-1;grid-row:1;position:static;}
body.tpl-headline .pv-col-left .pv-profile-card{max-width:100%;}
body.tpl-headline .pv-col-photos{grid-column:1/-1;grid-row:2;}
body.tpl-headline .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-headline .pv-col-skin{grid-column:2;grid-row:3;align-self:start;}

/* ========== TEMPLATE: STACK ========== */
body.tpl-stack .main-container{grid-template-columns:1fr;max-width:780px;}
body.tpl-stack .left-sidebar{display:contents;}
body.tpl-stack .left-sidebar .profile-card{grid-column:1;grid-row:1;}
body.tpl-stack .left-sidebar .photos-card{grid-column:1;grid-row:2;}

body.tpl-stack .center-feed{grid-column:1;grid-row:3;}
body.tpl-stack .right-sidebar{grid-column:1;grid-row:4;position:static;}
body.tpl-stack .pv-layout{grid-template-columns:1fr;max-width:780px;grid-template-rows:auto auto auto auto;}
body.tpl-stack .pv-col-left{grid-column:1;grid-row:1;position:static;}
body.tpl-stack .pv-col-left .pv-profile-card{max-width:100%;}
body.tpl-stack .pv-col-photos{grid-column:1;grid-row:2;}
body.tpl-stack .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-stack .pv-col-skin{grid-column:1;grid-row:4;position:static;}

/* ========== TEMPLATE: FOCUS ========== */
body.tpl-focus .main-container{grid-template-columns:1fr;max-width:720px;}
body.tpl-focus .left-sidebar{display:contents;}
body.tpl-focus .left-sidebar .profile-card{grid-column:1;grid-row:1;max-width:350px;margin:0 auto;width:100%;}
body.tpl-focus .left-sidebar .photos-card{grid-column:1;grid-row:2;}

body.tpl-focus .center-feed{grid-column:1;grid-row:3;}
body.tpl-focus .right-sidebar{display:none;}
body.tpl-focus .pv-layout{grid-template-columns:1fr;max-width:720px;}
body.tpl-focus .pv-col-left{grid-column:1;grid-row:1;position:static;max-width:350px;margin:0 auto;}
body.tpl-focus .pv-col-photos{grid-column:1;grid-row:2;}
body.tpl-focus .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-focus .pv-col-skin{display:none;}

/* ========== TEMPLATE: GRID ========== */
body.tpl-grid .main-container{grid-template-columns:3fr 2fr;max-width:1200px;grid-template-rows:auto auto 1fr;}
body.tpl-grid .left-sidebar{display:contents;}
body.tpl-grid .left-sidebar .profile-card{grid-column:1/-1;grid-row:2;}
body.tpl-grid .left-sidebar .photos-card{grid-column:1/-1;grid-row:1;}

body.tpl-grid .center-feed{grid-column:1;grid-row:3;}
body.tpl-grid .right-sidebar{grid-column:2;grid-row:3;position:static;}
body.tpl-grid .pv-layout{grid-template-columns:3fr 2fr;max-width:1200px;grid-template-rows:auto auto 1fr;}
body.tpl-grid .pv-col-left{grid-column:1/-1;grid-row:2;position:static;}
body.tpl-grid .pv-col-left .pv-profile-card{max-width:100%;}
body.tpl-grid .pv-col-photos{grid-column:1/-1;grid-row:1;}
body.tpl-grid .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-grid .pv-col-skin{grid-column:2;grid-row:3;align-self:start;}

/* ========== TEMPLATE: JOURNAL ========== */
body.tpl-journal .main-container{grid-template-columns:1fr;max-width:560px;}
body.tpl-journal .left-sidebar{display:contents;}
body.tpl-journal .left-sidebar .profile-card{grid-column:1;grid-row:1;max-width:300px;margin:0 auto;width:100%;}
body.tpl-journal .left-sidebar .photos-card{grid-column:1;grid-row:2;}

body.tpl-journal .center-feed{grid-column:1;grid-row:3;}
body.tpl-journal .right-sidebar{grid-column:1;grid-row:4;position:static;max-width:300px;margin:0 auto;width:100%;}
body.tpl-journal .pv-layout{grid-template-columns:1fr;max-width:560px;}
body.tpl-journal .pv-col-left{grid-column:1;grid-row:1;position:static;max-width:300px;margin:0 auto;}
body.tpl-journal .pv-col-photos{grid-column:1;grid-row:2;}
body.tpl-journal .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-journal .pv-col-skin{grid-column:1;grid-row:4;position:static;max-width:300px;margin:0 auto;}

/* ========== TEMPLATE: WING ========== */
body.tpl-wing .main-container{grid-template-columns:340px 1fr;grid-template-rows:auto 1fr;}
body.tpl-wing .left-sidebar{display:contents;}
body.tpl-wing .left-sidebar .profile-card{grid-column:1;grid-row:1/3;position:sticky;top:80px;}
body.tpl-wing .left-sidebar .photos-card{grid-column:2;grid-row:1;}

body.tpl-wing .center-feed{grid-column:2;grid-row:2;}
body.tpl-wing .right-sidebar{display:none;}
body.tpl-wing .pv-layout{grid-template-columns:300px 1fr;}
body.tpl-wing .pv-col-left{grid-column:1;grid-row:1/3;}
body.tpl-wing .pv-col-photos{grid-column:2;grid-row:1;}
body.tpl-wing .pv-col-feed{grid-column:2;grid-row:2;}
body.tpl-wing .pv-col-skin{display:none;}

/* ========== TEMPLATE: HUB ========== */
body.tpl-hub .main-container{grid-template-columns:1fr 320px;max-width:1200px;grid-template-rows:auto auto 1fr;}
body.tpl-hub .left-sidebar{display:contents;}
body.tpl-hub .left-sidebar .profile-card{grid-column:1/-1;grid-row:1;max-width:100%;}
body.tpl-hub .left-sidebar .photos-card{grid-column:1;grid-row:2;}

body.tpl-hub .center-feed{grid-column:1;grid-row:3;}
body.tpl-hub .right-sidebar{grid-column:2;grid-row:2/4;position:sticky;top:80px;}
body.tpl-hub .pv-layout{grid-template-columns:1fr 280px;max-width:900px;}
body.tpl-hub .pv-col-left{grid-column:1/-1;grid-row:1;position:static;}
body.tpl-hub .pv-col-left .pv-profile-card{max-width:100%;}
body.tpl-hub .pv-col-photos{grid-column:1;grid-row:2;}
body.tpl-hub .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-hub .pv-col-skin{grid-column:2;grid-row:2/4;align-self:start;}

/* ========== TEMPLATE: STREAM ========== */
body.tpl-stream .main-container{display:grid;grid-template-columns:1fr;max-width:700px;margin:0 auto;gap:14px;}
body.tpl-stream .left-sidebar{display:contents;}
body.tpl-stream .right-sidebar{display:contents;}
body.tpl-stream .left-sidebar .profile-card{grid-column:1;grid-row:1;overflow:visible;}
/* Profile card: transparent shell so cover + about-me bar look separate */
body.tpl-stream .profile-card{background:none!important;box-shadow:none!important;border:none!important;overflow:visible;}
/* Big cover photo — fills top area */
body.tpl-stream .profile-card .profile-cover{height:200px;border-radius:12px 12px 0 0;}
/* About-me: full-width frosted strip below cover, avatar overlaps from left */
body.tpl-stream .profile-card .profile-info{position:relative;margin:0;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:16px 18px 14px 130px;border-radius:0 0 12px 12px;box-shadow:0 2px 8px rgba(0,0,0,.1);}
/* Circle avatar: large, overlaps cover bottom + about-me bar left */
body.tpl-stream .profile-card .profile-avatar-wrap{position:absolute!important;left:14px;top:-55px;width:110px!important;margin:0!important;border-radius:50%!important;z-index:3;box-shadow:0 3px 12px rgba(0,0,0,.25);border:4px solid var(--card)!important;}
body.tpl-stream .profile-card .profile-avatar{border-radius:50%!important;}
body.tpl-stream .profile-card .profile-avatar-wrap:has(.premium-border)::before{border-radius:50%!important;}
body.tpl-stream .profile-card .profile-avatar-wrap:has(.premium-border){border:none!important;}
body.tpl-stream .profile-card .profile-name{margin-top:0;font-size:17px;}
body.tpl-stream .profile-card .profile-stats{justify-content:flex-start;gap:16px;}
body.tpl-stream .profile-card .profile-links{display:flex;gap:10px;margin-top:6px;}
/* Premium bg compat */
body.has-premium-bg.tpl-stream .profile-card .profile-info{background:color-mix(in srgb,var(--ps-card,var(--card)) 90%,transparent)!important;}
body.tpl-stream .left-sidebar .photos-card{grid-column:1;grid-row:2;}
/* Suggestions + Groups side by side */
body.tpl-stream .right-sidebar .promo-card{display:none;}
body.tpl-stream .right-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:14px;grid-row:3;position:static;}
body.tpl-stream .center-feed{grid-column:1;grid-row:4;}
/* Profile view */
body.tpl-stream .pv-layout{grid-template-columns:1fr;max-width:700px;}
body.tpl-stream .pv-col-left{grid-column:1;grid-row:1;position:static;}
body.tpl-stream .pv-col-photos{grid-column:1;grid-row:2;}
body.tpl-stream .pv-col-feed{grid-column:1;grid-row:3;}
body.tpl-stream .pv-col-skin{grid-column:1;grid-row:4;position:static;max-width:400px;margin:0 auto;}

/* ========== MOBILE TEMPLATE PERSONALITIES ========== */
/* Give each template a distinct feel on mobile (single-column) */
@media(max-width:768px){
    /* COMPACT — tight spacing, rounded bubble cards, no border-left */
    body.tpl-compact .feed-post{border-left:none!important;border-radius:16px!important;margin:0 4px;}
    body.tpl-compact #feedContainer{gap:10px!important;}
    body.tpl-compact .feed-post .post-actions{border-top:none;padding-top:8px;}

    /* ZEN — ultra minimal, no shadows, thin separator lines, lots of whitespace */
    body.tpl-zen .card{box-shadow:none!important;border:none!important;border-radius:0!important;}
    body.tpl-zen .feed-post{border-left:none!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;padding:20px 16px!important;}
    body.tpl-zen #feedContainer{gap:0!important;}
    body.tpl-zen .feed-post .post-badges{display:none;}
    body.tpl-zen .profile-card{box-shadow:none!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;}

    /* CINEMA — edge-to-edge cards, no gaps, no border-radius, bold look */
    body.tpl-cinema .card{border-radius:0!important;margin:0 -12px!important;box-shadow:none!important;}
    body.tpl-cinema .feed-post{border-left:none!important;border-radius:0!important;border-bottom:2px solid var(--primary)!important;}
    body.tpl-cinema #feedContainer{gap:0!important;}
    body.tpl-cinema .feed-post .post-avatar{width:36px;height:36px;}
    body.tpl-cinema .feed-post .post-username{font-weight:700!important;}

    /* MAGAZINE — card with visible border, smaller text, newspaper feel */
    body.tpl-magazine .feed-post{border-left:none!important;border:1px solid var(--border)!important;border-radius:8px!important;}
    body.tpl-magazine .feed-post .post-description p{font-size:13px!important;line-height:1.7!important;}
    body.tpl-magazine .feed-post .post-username{text-transform:uppercase!important;font-size:11px!important;letter-spacing:.5px!important;}
    body.tpl-magazine .feed-post .post-time{font-style:italic;}

    /* FOCUS — wide padding, large text, reading-optimized */
    body.tpl-focus .feed-post{border-left:none!important;padding:24px 20px!important;border-radius:14px!important;}
    body.tpl-focus .feed-post .post-description p{font-size:16px!important;line-height:1.8!important;}
    body.tpl-focus .feed-post .post-avatar{width:40px;height:40px;}
    body.tpl-focus #feedContainer{gap:20px!important;}

    /* JOURNAL — narrow centered, handwritten vibe, extra round */
    body.tpl-journal .feed-post{border-left:none!important;border-radius:20px!important;padding:18px!important;}
    body.tpl-journal #feedContainer{max-width:380px;margin:0 auto;}
    body.tpl-journal .feed-post .post-description p{line-height:1.8!important;}
    body.tpl-journal .feed-post .post-actions{justify-content:center;}

    /* STACK — stacked full-width, no gaps between cards, divider lines */
    body.tpl-stack .card{border-radius:0!important;box-shadow:none!important;}
    body.tpl-stack .feed-post{border-left:none!important;border-radius:0!important;border-top:3px solid var(--primary)!important;padding:16px 14px!important;}
    body.tpl-stack #feedContainer{gap:0!important;}

    /* GRID — compact cards with accent left border thicker */
    body.tpl-grid .feed-post{border-left:5px solid var(--primary)!important;border-radius:0 10px 10px 0!important;}
    body.tpl-grid #feedContainer{gap:10px!important;}

    /* DUO — avatar on right side, flipped header */
    body.tpl-duo .feed-post{border-left:none!important;border-right:3px solid var(--primary)!important;border-radius:10px 0 0 10px!important;}
    body.tpl-duo .feed-post .post-header{flex-direction:row-reverse;}

    /* HEADLINE — large username, small avatar, editorial style */
    body.tpl-headline .feed-post{border-left:none!important;border-radius:4px!important;}
    body.tpl-headline .feed-post .post-username{font-size:17px!important;font-weight:700!important;}
    body.tpl-headline .feed-post .post-avatar{width:28px;height:28px;}
    body.tpl-headline .feed-post .post-badges{display:none;}

    /* PANORAMA — full-bleed images, card extends to edges */
    body.tpl-panorama .card{border-radius:0!important;margin-left:-8px!important;margin-right:-8px!important;}
    body.tpl-panorama .feed-post{border-left:none!important;border-radius:0!important;margin-left:-8px!important;margin-right:-8px!important;}
    body.tpl-panorama #feedContainer{gap:6px!important;}
    body.tpl-panorama .feed-post .post-media-grid{margin-left:-12px!important;margin-right:-12px!important;}

    /* REVERSE — right-aligned text, flipped feel */
    body.tpl-reverse .feed-post{border-left:none!important;border-right:3px solid var(--primary)!important;text-align:right;}
    body.tpl-reverse .feed-post .post-header{flex-direction:row-reverse;}
    body.tpl-reverse .feed-post .post-actions{justify-content:flex-end;}
    body.tpl-reverse .feed-post .action-left{flex-direction:row-reverse;}

    /* SPOTLIGHT — oversized avatar, centered header */
    body.tpl-spotlight .feed-post{border-left:none!important;text-align:center;border-radius:14px!important;}
    body.tpl-spotlight .feed-post .post-header{flex-direction:column;align-items:center;gap:6px;}
    body.tpl-spotlight .feed-post .post-avatar{width:48px;height:48px;}
    body.tpl-spotlight .feed-post .post-actions{justify-content:center;}

    /* DASHBOARD — compact list-style, small padding */
    body.tpl-dashboard .feed-post{border-left:none!important;padding:12px!important;border-radius:8px!important;}
    body.tpl-dashboard #feedContainer{gap:8px!important;}
    body.tpl-dashboard .feed-post .post-avatar{width:32px;height:32px;}
    body.tpl-dashboard .feed-post .post-description p{font-size:13px!important;}

    /* WIDESCREEN — no left border, subtle bottom shadow */
    body.tpl-widescreen .feed-post{border-left:none!important;box-shadow:0 2px 0 var(--border)!important;border-radius:12px 12px 0 0!important;}

    /* WING — bold left accent bar, extra padding */
    body.tpl-wing .feed-post{border-left:6px solid var(--primary)!important;padding-left:20px!important;border-radius:0!important;}

    /* HUB — pill-shaped cards */
    body.tpl-hub .feed-post{border-left:none!important;border-radius:24px!important;padding:18px 20px!important;}
    body.tpl-hub .feed-post .post-avatar{border-radius:8px!important;}

    /* STREAM — stacked stream, smaller avatar, suggestions stack on mobile */
    body.tpl-stream .profile-card .profile-cover{height:150px;}
    body.tpl-stream .profile-card .profile-avatar-wrap{width:90px!important;left:10px;top:-45px;}
    body.tpl-stream .profile-card .profile-info{padding-left:110px!important;}
    body.tpl-stream .right-sidebar{grid-template-columns:1fr!important;}
    body.tpl-stream .feed-post{border-left:none!important;border-radius:12px!important;}
    body.tpl-stream #feedContainer{gap:12px!important;}
}

/* ========== NAV STYLE: METRO ========== */
/* Navbar → vertical left sidebar */
body.nav-metro .navbar{position:fixed;top:0;left:0;right:auto;bottom:0;width:210px;height:100vh;max-height:100vh;box-shadow:2px 0 12px rgba(0,0,0,.15);overflow-y:auto;overflow-x:hidden;}
body.nav-metro .nav-container{flex-direction:column;align-items:stretch;height:100%;padding:14px 10px;gap:6px;max-width:none;}
body.nav-metro .nav-left{flex-direction:column;gap:10px;align-items:stretch;}
body.nav-metro .nav-logo{text-align:center;font-size:18px;padding:10px 8px;border-radius:8px;}
body.nav-metro .search-bar{width:100%;}
body.nav-metro .search-bar input{width:100%;font-size:13px;padding:8px 10px 8px 32px;}
body.nav-metro .search-bar i{left:10px;font-size:12px;}
body.nav-metro .nav-center{flex-direction:column;flex:1;justify-content:flex-start;gap:2px;padding:8px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);margin:6px 0;overflow-y:auto;}
body.nav-metro .nav-link{flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;width:100%;justify-content:flex-start;max-height:none;}
body.nav-metro .nav-link i{font-size:16px;width:20px;text-align:center;}
body.nav-metro .nav-link span:not(.notif-badge){display:inline!important;font-size:13px;}
body.nav-metro .nav-link.active{background:rgba(255,255,255,.18);}
body.nav-metro .notif-badge{position:static;margin-left:auto;min-width:1.6em;height:1.6em;font-size:calc(10px * var(--font-scale,1));}
body.nav-metro .nav-right{flex-direction:column;gap:8px;align-items:stretch;flex-shrink:0;}
body.nav-metro .nav-coins{justify-content:center;padding:8px 10px;font-size:13px;border-radius:8px;}
body.nav-metro .nav-user{padding:8px;border-radius:8px;gap:8px;}
body.nav-metro .nav-username{font-size:13px;}
body.nav-metro .nav-user .fa-chevron-down{margin-left:auto;}
body.nav-metro .user-dropdown{top:auto;bottom:0;left:100%;right:auto;margin-left:4px;}
/* Push all page content right */
body.nav-metro .page{padding-left:210px;padding-top:20px!important;}
body.nav-metro #page-home{padding-top:0!important;}
body.nav-metro .timeline-cover{border-radius:0 0 10px 10px;}
body.nav-metro .main-container{margin-top:-60px;padding-top:0;max-width:1400px;}
body.nav-metro .page-container{max-width:1400px;padding-top:20px;}
/* Profile view */
body.nav-metro #page-profile-view{padding-top:0!important;}
body.nav-metro .pv-cover-banner{margin:0 auto;}
body.nav-metro .pv-layout{max-width:1100px;}
/* Group view */
body.nav-metro #page-group-view{padding-top:0!important;}
body.nav-metro .gv-cover-banner,body.nav-metro .pv-cover-banner-group{margin:0 auto;}
body.nav-metro .gv-layout{max-width:1100px;grid-template-columns:200px 1fr 240px;}
/* Messages */
body.nav-metro .messages-layout{height:calc(100vh - 40px);}

/* ---------- Nav Style: Dock ---------- */
/* Thin top header bar */
body.nav-dock .navbar{height:48px;}
body.nav-dock .nav-container{padding:4px 16px;gap:10px;}
body.nav-dock .nav-logo{font-size:16px;padding:6px 8px;}
body.nav-dock .search-bar input{padding:6px 10px 6px 30px;font-size:13px;}
/* Nav links become a fixed bottom dock */
body.nav-dock .nav-center{position:fixed;bottom:0;left:0;right:0;top:auto;background:var(--nav-bg,var(--primary));justify-content:space-around;padding:6px 8px calc(env(safe-area-inset-bottom,0px) + 8px);gap:0;z-index:999;box-shadow:0 -4px 20px rgba(0,0,0,.15);border-top:1px solid rgba(255,255,255,.08);}
body.nav-dock .nav-link{flex-direction:column;gap:2px;padding:6px 10px;border-radius:12px;position:relative;}
body.nav-dock .nav-link i{font-size:19px;}
body.nav-dock .nav-link span:not(.notif-badge){display:inline!important;font-size:10px;opacity:.65;font-weight:500;letter-spacing:.3px;}
body.nav-dock .nav-link.active{background:rgba(255,255,255,.12);}
body.nav-dock .nav-link.active span{opacity:1;}
body.nav-dock .nav-link.active::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:20px;height:3px;border-radius:3px;background:var(--primary);}
body.nav-dock .notif-badge{position:absolute;top:0;right:2px;min-width:1.6em;height:1.6em;font-size:calc(9px * var(--font-scale,1));}
/* Right section compact */
body.nav-dock .nav-coins{padding:4px 8px;font-size:12px;border-radius:16px;}
body.nav-dock .nav-username{font-size:13px;}
body.nav-dock .user-dropdown{top:100%;margin-top:4px;}
/* Page adjustments - bottom padding for dock */
body.nav-dock .page{padding-bottom:80px!important;}
body.nav-dock #page-home{padding-top:0!important;}
body.nav-dock .timeline-cover{margin-top:0;}
body.nav-dock .main-container{max-width:1600px;}
body.nav-dock .page-container{max-width:1100px;}
/* Profile view */
body.nav-dock #page-profile-view{padding-top:0!important;}
body.nav-dock .pv-layout{max-width:1200px;}
/* Group view */
body.nav-dock #page-group-view{padding-top:0!important;}
body.nav-dock .gv-layout{max-width:1200px;}
/* Messages */
body.nav-dock .messages-layout{height:calc(100vh - 130px);}

/* ---------- Nav Style: Float ---------- */
/* Floating glass navbar */
body.nav-float .navbar{position:fixed;top:12px;left:12px;right:12px;border-radius:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.06);height:auto;max-height:none;}
body.nav-float .nav-container{padding:8px 14px;gap:10px;max-width:none;}
/* Logo small */
body.nav-float .nav-logo{font-size:15px;padding:4px 10px;border-radius:10px;}
/* Search compact rounded */
body.nav-float .search-bar{width:160px;transition:width .3s;}
body.nav-float .search-bar:focus-within{width:220px;}
body.nav-float .search-bar input{font-size:12px;padding:6px 8px 6px 28px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);}
body.nav-float .search-bar i{left:9px;font-size:11px;}
/* Nav links - icons only, rounded pills */
body.nav-float .nav-center{gap:2px;}
body.nav-float .nav-link{padding:8px 12px;border-radius:12px;transition:all .2s;}
body.nav-float .nav-link span:not(.notif-badge){display:none!important;}
body.nav-float .nav-link i{font-size:16px;}
body.nav-float .nav-link.active{background:rgba(255,255,255,.18);box-shadow:0 0 12px rgba(255,255,255,.08);}
body.nav-float .notif-badge{top:-3px;right:0;min-width:1.6em;height:1.6em;font-size:calc(8px * var(--font-scale,1));}
/* Right section - compact, avatar only */
body.nav-float .nav-right{gap:8px;}
body.nav-float .nav-coins{padding:4px 10px;font-size:12px;border-radius:20px;background:rgba(255,255,255,.08);}
body.nav-float .nav-username{display:none;}
body.nav-float .nav-user .fa-chevron-down{display:none;}
body.nav-float .nav-user{padding:3px;border-radius:50%;background:rgba(255,255,255,.1);}
body.nav-float .nav-avatar{width:30px;height:30px;}
body.nav-float .user-dropdown{top:calc(100% + 6px);right:0;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.3);}
/* Page adjustments - extra top padding for floating bar */
body.nav-float .page{padding-top:80px!important;}
body.nav-float #page-home{padding-top:80px!important;}
body.nav-float .timeline-cover{margin:66px auto 0;border-radius:16px 16px 12px 12px;}
body.nav-float .main-container{margin-top:-60px;max-width:1600px;}
body.nav-float .page-container{max-width:1100px;}
/* Profile view */
body.nav-float #page-profile-view{padding-top:0!important;}
body.nav-float .pv-cover-banner{margin:66px auto 0;border-radius:16px 16px 0 0;}
body.nav-float .pv-layout{max-width:1200px;}
/* Group view */
body.nav-float #page-group-view{padding-top:0!important;}
body.nav-float .gv-cover-banner,body.nav-float .pv-cover-banner-group{margin:66px auto 0;border-radius:16px 16px 0 0;}
body.nav-float .gv-layout{max-width:1200px;}
/* Messages */
body.nav-float .messages-layout{height:calc(100vh - 100px);}

/* ---------- Nav Style: Pill ---------- */
/* Nav links become a floating pill at bottom center */
body.nav-pill .navbar{height:48px;}
body.nav-pill .nav-container{padding:4px 16px;gap:10px;}
body.nav-pill .nav-logo{font-size:15px;}
body.nav-pill .nav-center{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--nav-bg,var(--primary));padding:8px 12px;border-radius:28px;gap:4px;box-shadow:0 8px 28px rgba(0,0,0,.28);z-index:999;width:auto;justify-content:center;}
body.nav-pill .nav-link{padding:10px 14px;border-radius:20px;position:relative;}
body.nav-pill .nav-link span:not(.notif-badge){display:none!important;}
body.nav-pill .nav-link i{font-size:18px;}
body.nav-pill .nav-link.active{background:rgba(255,255,255,.22);}
body.nav-pill .notif-badge{top:-2px;right:0;min-width:1.6em;height:1.6em;font-size:calc(8px * var(--font-scale,1));}
body.nav-pill .nav-coins{padding:4px 8px;font-size:12px;border-radius:16px;}
body.nav-pill .nav-username{font-size:13px;}
body.nav-pill .user-dropdown{top:100%;margin-top:4px;}
body.nav-pill .page{padding-bottom:84px!important;}
body.nav-pill #page-home{padding-top:0!important;}
body.nav-pill .main-container{max-width:1600px;}
body.nav-pill .messages-layout{height:calc(100vh - 140px);}

/* ---------- Nav Style: Rail ---------- */
/* Thin 60px icon-only left sidebar */
body.nav-rail .navbar{position:fixed;top:0;left:0;bottom:0;right:auto;width:60px;height:100vh;max-height:100vh;box-shadow:2px 0 10px rgba(0,0,0,.12);overflow-y:auto;overflow-x:hidden;}
body.nav-rail .nav-container{flex-direction:column;align-items:center;padding:10px 4px;gap:4px;height:100%;max-width:none;}
body.nav-rail .nav-left{flex-direction:column;align-items:center;gap:6px;}
body.nav-rail .nav-logo{font-size:14px;padding:6px 4px;text-align:center;letter-spacing:-1px;}
body.nav-rail .search-bar{display:none;}
body.nav-rail .nav-center{flex-direction:column;flex:1;gap:2px;padding:6px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);margin:4px 0;overflow-y:auto;justify-content:flex-start;}
body.nav-rail .nav-link{flex-direction:column;align-items:center;padding:8px 2px;border-radius:10px;gap:2px;width:100%;}
body.nav-rail .nav-link i{font-size:17px;}
body.nav-rail .nav-link span:not(.notif-badge){display:inline!important;font-size:9px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54px;text-align:center;}
body.nav-rail .nav-link.active{background:rgba(255,255,255,.18);}
body.nav-rail .nav-link.active span{opacity:1;}
body.nav-rail .notif-badge{position:static;min-width:1.6em;height:1.6em;font-size:calc(8px * var(--font-scale,1));margin-top:-2px;}
body.nav-rail .nav-right{flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
body.nav-rail .nav-coins{flex-direction:column;gap:1px;padding:4px;font-size:10px;border-radius:8px;}
body.nav-rail .nav-coins .coin-count{font-size:10px;}
body.nav-rail .nav-username{display:none;}
body.nav-rail .nav-user .fa-chevron-down{display:none;}
body.nav-rail .nav-user{padding:3px;border-radius:50%;}
body.nav-rail .nav-avatar{width:30px;height:30px;}
body.nav-rail .user-dropdown{top:auto;bottom:0;left:100%;right:auto;margin-left:4px;}
body.nav-rail .page{padding-left:60px;padding-top:20px!important;}
body.nav-rail #page-home{padding-top:0!important;}
body.nav-rail .timeline-cover{margin:0 auto;}
body.nav-rail .main-container{max-width:1600px;}
body.nav-rail .page-container{max-width:1100px;}
body.nav-rail #page-profile-view{padding-top:0!important;}
body.nav-rail .pv-cover-banner{margin:0 auto;}
body.nav-rail .pv-layout{max-width:1200px;}
body.nav-rail #page-group-view{padding-top:0!important;}
body.nav-rail .gv-cover-banner{margin:0 auto;}
body.nav-rail .gv-layout{max-width:1200px;}
body.nav-rail .messages-layout{height:calc(100vh - 40px);}

/* ---------- Nav Style: Shelf ---------- */
/* Two-row navbar: branding row on top, nav tabs below */
body.nav-shelf .navbar{height:auto;max-height:none;}
body.nav-shelf .nav-container{flex-wrap:wrap;padding:8px 16px 0;gap:0;}
body.nav-shelf .nav-left{flex:1;min-width:180px;padding-bottom:8px;}
body.nav-shelf .nav-right{padding-bottom:8px;}
body.nav-shelf .nav-center{width:100%;order:3;justify-content:center;gap:0;padding:0;margin:0;border-top:1px solid rgba(255,255,255,.12);}
body.nav-shelf .nav-link{padding:10px 20px;border-radius:0;border-bottom:3px solid transparent;transition:all .2s;}
body.nav-shelf .nav-link span:not(.notif-badge){display:inline!important;font-size:12px;}
body.nav-shelf .nav-link.active{border-bottom-color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);}
body.nav-shelf .notif-badge{top:4px;right:4px;}
body.nav-shelf .page{padding-top:106px!important;}
body.nav-shelf #page-home{padding-top:106px!important;}
body.nav-shelf #page-home .timeline-cover{margin-top:0;}
body.nav-shelf .pv-cover-banner{margin-top:0;}
body.nav-shelf .gv-cover-banner{margin-top:0;}
body.nav-shelf .messages-layout{height:calc(100vh - 126px);}

/* ---------- Nav Style: Slim ---------- */
/* Ultra-thin 36px bar */
body.nav-slim .navbar{height:36px;}
body.nav-slim .nav-container{padding:0 12px;gap:6px;}
body.nav-slim .nav-logo{font-size:13px;padding:4px 6px;}
body.nav-slim .search-bar{max-width:140px;}
body.nav-slim .search-bar input{padding:3px 8px 3px 26px;font-size:11px;height:24px;}
body.nav-slim .search-bar i{font-size:10px;top:50%;transform:translateY(-50%);}
body.nav-slim .nav-center{gap:0;}
body.nav-slim .nav-link{padding:6px 8px;border-radius:4px;}
body.nav-slim .nav-link i{font-size:13px;}
body.nav-slim .nav-link span:not(.notif-badge){display:none!important;}
body.nav-slim .nav-link.active{background:rgba(255,255,255,.15);}
body.nav-slim .notif-badge{min-width:1.6em;height:1.6em;font-size:calc(7px * var(--font-scale,1));top:-2px;right:-2px;}
body.nav-slim .nav-coins{padding:2px 6px;font-size:11px;border-radius:10px;}
body.nav-slim .nav-username{font-size:11px;}
body.nav-slim .nav-avatar{width:24px;height:24px;}
body.nav-slim .nav-user .fa-chevron-down{font-size:9px;}
body.nav-slim .page{padding-top:46px!important;}
body.nav-slim #page-home{padding-top:0!important;}
body.nav-slim .timeline-cover{margin-top:-24px;}
body.nav-slim .main-container{margin-top:-40px;}
body.nav-slim .pv-cover-banner{margin-top:-24px;}
body.nav-slim .gv-cover-banner{margin-top:-24px;}
body.nav-slim .messages-layout{height:calc(100vh - 56px);}

/* ---------- Nav Style: Horizon ---------- */
/* Entire navbar at the bottom */
body.nav-horizon .navbar{top:auto;bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -4px 18px rgba(0,0,0,.18);}
body.nav-horizon .nav-container{padding:8px 16px;}
body.nav-horizon .nav-link span:not(.notif-badge){display:inline!important;font-size:11px;}
body.nav-horizon .user-dropdown{top:auto;bottom:100%;margin-bottom:4px;}
body.nav-horizon .page{padding-top:10px!important;padding-bottom:74px!important;}
body.nav-horizon #page-home{padding-top:0!important;}
body.nav-horizon .timeline-cover{margin-top:0;border-radius:10px 10px 0 0;}
body.nav-horizon .main-container{margin-top:-60px;}
body.nav-horizon .pv-cover-banner{margin-top:0;}
body.nav-horizon .gv-cover-banner{margin-top:0;}
body.nav-horizon .messages-layout{height:calc(100vh - 80px);}

/* ---------- Nav Style: Mirror ---------- */
/* Right-side vertical sidebar (flipped Metro) */
body.nav-mirror .navbar{position:fixed;top:0;right:0;left:auto;bottom:0;width:210px;height:100vh;max-height:100vh;box-shadow:-2px 0 12px rgba(0,0,0,.15);overflow-y:auto;overflow-x:hidden;}
body.nav-mirror .nav-container{flex-direction:column;align-items:stretch;height:100%;padding:14px 10px;gap:6px;max-width:none;}
body.nav-mirror .nav-left{flex-direction:column;gap:10px;align-items:stretch;}
body.nav-mirror .nav-logo{text-align:center;font-size:18px;padding:10px 8px;border-radius:8px;}
body.nav-mirror .search-bar{width:100%;}
body.nav-mirror .search-bar input{width:100%;font-size:13px;padding:8px 10px 8px 32px;}
body.nav-mirror .search-bar i{left:10px;font-size:12px;}
body.nav-mirror .nav-center{flex-direction:column;flex:1;justify-content:flex-start;gap:2px;padding:8px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);margin:6px 0;overflow-y:auto;}
body.nav-mirror .nav-link{flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;width:100%;justify-content:flex-start;}
body.nav-mirror .nav-link i{font-size:16px;width:20px;text-align:center;}
body.nav-mirror .nav-link span:not(.notif-badge){display:inline!important;font-size:13px;}
body.nav-mirror .nav-link.active{background:rgba(255,255,255,.18);}
body.nav-mirror .notif-badge{position:static;margin-left:auto;min-width:1.6em;height:1.6em;font-size:calc(10px * var(--font-scale,1));}
body.nav-mirror .nav-right{flex-direction:column;gap:8px;align-items:stretch;flex-shrink:0;}
body.nav-mirror .nav-coins{justify-content:center;padding:8px 10px;font-size:13px;border-radius:8px;}
body.nav-mirror .nav-user{padding:8px;border-radius:8px;gap:8px;}
body.nav-mirror .nav-username{font-size:13px;}
body.nav-mirror .nav-user .fa-chevron-down{margin-left:auto;}
body.nav-mirror .user-dropdown{top:auto;bottom:0;right:100%;left:auto;margin-right:4px;}
body.nav-mirror .page{padding-right:210px;padding-top:20px!important;}
body.nav-mirror #page-home{padding-top:0!important;}
body.nav-mirror .timeline-cover{border-radius:0 0 10px 10px;}
body.nav-mirror .main-container{margin-top:-60px;max-width:1400px;}
body.nav-mirror .page-container{max-width:1400px;}
body.nav-mirror #page-profile-view{padding-top:0!important;}
body.nav-mirror .pv-cover-banner{margin:0 auto;}
body.nav-mirror .pv-layout{max-width:1100px;}
body.nav-mirror #page-group-view{padding-top:0!important;}
body.nav-mirror .gv-cover-banner{margin:0 auto;}
body.nav-mirror .gv-layout{max-width:1100px;}
body.nav-mirror .messages-layout{height:calc(100vh - 40px);}

/* ---------- Nav Style: Island ---------- */
/* Three floating islands with transparent navbar */
body.nav-island .navbar{background:transparent!important;box-shadow:none;height:auto;pointer-events:none;}
body.nav-island .nav-container{padding:12px 16px;gap:12px;pointer-events:none;}
body.nav-island .nav-left{background:var(--nav-bg,var(--primary));border-radius:14px;padding:8px 14px;box-shadow:0 4px 16px rgba(0,0,0,.2);pointer-events:auto;gap:8px;}
body.nav-island .nav-logo{font-size:15px;padding:2px 4px;}
body.nav-island .search-bar input{font-size:12px;padding:6px 8px 6px 28px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);}
body.nav-island .search-bar i{font-size:11px;}
body.nav-island .nav-center{background:var(--nav-bg,var(--primary));border-radius:14px;padding:6px 10px;box-shadow:0 4px 16px rgba(0,0,0,.2);pointer-events:auto;gap:2px;}
body.nav-island .nav-link{padding:8px 11px;border-radius:10px;}
body.nav-island .nav-link span:not(.notif-badge){display:none!important;}
body.nav-island .nav-link i{font-size:16px;}
body.nav-island .nav-link.active{background:rgba(255,255,255,.22);}
body.nav-island .notif-badge{top:-3px;right:-2px;min-width:1.6em;height:1.6em;font-size:calc(8px * var(--font-scale,1));}
body.nav-island .nav-right{background:var(--nav-bg,var(--primary));border-radius:14px;padding:6px 12px;box-shadow:0 4px 16px rgba(0,0,0,.2);pointer-events:auto;gap:8px;}
body.nav-island .nav-coins{padding:2px 8px;font-size:12px;border-radius:12px;}
body.nav-island .nav-username{display:none;}
body.nav-island .nav-user .fa-chevron-down{display:none;}
body.nav-island .nav-user{padding:3px;border-radius:50%;background:rgba(255,255,255,.1);}
body.nav-island .nav-avatar{width:28px;height:28px;}
body.nav-island .user-dropdown{pointer-events:auto;top:calc(100% + 6px);right:0;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);}
body.nav-island .page{padding-top:78px!important;}
body.nav-island #page-home{padding-top:78px!important;}
body.nav-island .timeline-cover{margin:68px auto 0;border-radius:12px 12px 0 0;}
body.nav-island .main-container{margin-top:-60px;max-width:1600px;}
body.nav-island .page-container{max-width:1100px;}
body.nav-island #page-profile-view{padding-top:0!important;}
body.nav-island .pv-cover-banner{margin:68px auto 0;border-radius:12px 12px 0 0;}
body.nav-island .pv-layout{max-width:1200px;}
body.nav-island #page-group-view{padding-top:0!important;}
body.nav-island .gv-cover-banner{margin:68px auto 0;border-radius:12px 12px 0 0;}
body.nav-island .gv-layout{max-width:1200px;}
body.nav-island .messages-layout{height:calc(100vh - 98px);}

/* ========== NAV STYLE: RIBBON ========== */
body.nav-ribbon .navbar{height:40px;}
body.nav-ribbon .nav-container{padding:0 16px;gap:8px;}
body.nav-ribbon .nav-logo{font-size:14px;padding:4px 6px;}
body.nav-ribbon .search-bar input{padding:5px 8px 5px 28px;font-size:12px;}
body.nav-ribbon .nav-link{padding:6px 10px;border-radius:8px;}
body.nav-ribbon .nav-link span:not(.notif-badge){display:none!important;}
body.nav-ribbon .nav-link i{font-size:14px;}
body.nav-ribbon .nav-coins{padding:2px 8px;font-size:11px;}
body.nav-ribbon .nav-avatar{width:26px;height:26px;}
body.nav-ribbon .nav-username{display:none;}
body.nav-ribbon .page{padding-top:40px!important;}
body.nav-ribbon #page-home{padding-top:40px!important;}
body.nav-ribbon .timeline-cover{margin-top:0;}
body.nav-ribbon .messages-layout{height:calc(100vh - 50px);}

/* ========== NAV STYLE: GLASS ========== */
body.nav-glass .navbar{background:rgba(255,255,255,.12)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.15);}
body.nav-glass .nav-link.active{background:rgba(255,255,255,.2);}
body.nav-glass .search-bar input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);}

/* ========== NAV STYLE: SPLIT ========== */
body.nav-split .nav-center{position:fixed;bottom:0;left:0;right:0;top:auto;background:var(--nav-bg,var(--primary));padding:8px 12px;justify-content:space-around;z-index:999;box-shadow:0 -4px 16px rgba(0,0,0,.15);}
body.nav-split .nav-link span:not(.notif-badge){display:none!important;}
body.nav-split .nav-link{padding:8px 12px;border-radius:10px;}
body.nav-split .nav-link.active{background:rgba(255,255,255,.15);}
body.nav-split .page{padding-bottom:56px;}

/* ========== NAV STYLE: MINIMAL ========== */
body.nav-minimal .navbar{background:transparent!important;box-shadow:none;}
body.nav-minimal .nav-link{opacity:.4;transition:opacity .2s;}
body.nav-minimal .nav-link:hover,body.nav-minimal .nav-link.active{opacity:1;background:rgba(139,92,246,.1);}
body.nav-minimal .nav-link span:not(.notif-badge){display:none!important;}
body.nav-minimal .search-bar input{background:rgba(0,0,0,.05);border:1px solid var(--border);}
body.nav-minimal .nav-coins{opacity:.5;}
body.nav-minimal .nav-coins:hover{opacity:1;}

/* ========== NAV STYLE: ARCADE ========== */
body.nav-arcade .navbar{height:56px;image-rendering:pixelated;border-bottom:4px solid rgba(0,0,0,.3);}
body.nav-arcade .navbar{font-family:'Press Start 2P',monospace!important;}
body.nav-arcade .nav-logo{font-size:11px;letter-spacing:1px;}
body.nav-arcade .nav-link{padding:6px 10px;border-radius:4px;border:2px solid transparent;}
body.nav-arcade .nav-link.active{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.15);}
body.nav-arcade .nav-link span:not(.notif-badge){font-size:8px!important;}
body.nav-arcade .nav-coins{font-size:10px;border-radius:4px;}
body.nav-arcade .page{padding-top:56px!important;}
body.nav-arcade #page-home{padding-top:56px!important;}

/* ========== NAV STYLE: WHEEL ========== */
body.nav-wheel .navbar{height:48px;}
body.nav-wheel .nav-container{padding:4px 16px;gap:10px;}
body.nav-wheel .nav-center{position:fixed;bottom:0;left:0;right:0;top:auto;background:var(--nav-bg,var(--primary));justify-content:space-around;padding:8px 8px calc(env(safe-area-inset-bottom,0px) + 8px);gap:0;z-index:999;box-shadow:0 -4px 20px rgba(0,0,0,.15);}
body.nav-wheel .nav-link{flex-direction:column;gap:2px;padding:6px 10px;border-radius:12px;}
body.nav-wheel .nav-link span:not(.notif-badge){display:inline!important;font-size:10px;opacity:.65;}
body.nav-wheel .nav-link.active{background:rgba(255,255,255,.12);}
body.nav-wheel .nav-link.active span{opacity:1;}
body.nav-wheel .page{padding-bottom:80px!important;}
body.nav-wheel #page-home{padding-top:0!important;}
body.nav-wheel .messages-layout{height:calc(100vh - 130px);}

/* ---------- Nav Tooltips (icon-only styles) ---------- */
body.nav-float .nav-link:hover span:not(.notif-badge),body.nav-slim .nav-link:hover span:not(.notif-badge),body.nav-island .nav-link:hover span:not(.notif-badge),body.nav-ribbon .nav-link:hover span:not(.notif-badge),body.nav-minimal .nav-link:hover span:not(.notif-badge){display:block!important;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:4px 10px;border-radius:6px;font-size:calc(11px * var(--font-scale));font-family:inherit;white-space:nowrap;pointer-events:none;z-index:1001;margin-top:6px;line-height:1.4;}
body.nav-pill .nav-link:hover span:not(.notif-badge),body.nav-split .nav-link:hover span:not(.notif-badge){display:block!important;position:absolute;bottom:100%;top:auto;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:4px 10px;border-radius:6px;font-size:calc(11px * var(--font-scale));font-family:inherit;white-space:nowrap;pointer-events:none;z-index:1001;margin-bottom:6px;line-height:1.4;}

/* ========== GROUP VIEW PAGE ========== */
#page-group-view{padding-top:calc(60px + env(safe-area-inset-top,0px));}
.gv-layout{max-width:1600px;margin:-60px auto 0;padding:0 20px 40px;position:relative;z-index:1;display:grid;grid-template-columns:260px 1fr 300px;gap:24px;align-items:start;}
.gv-center{display:flex;flex-direction:column;gap:16px;min-width:0;}
.gv-left,.gv-right{display:flex;flex-direction:column;gap:16px;position:sticky;top:80px;}
.gv-about-body{padding:16px;}
.gv-about-body p{font-size:14px;color:var(--dark);line-height:1.6;margin-bottom:12px;}
.gv-about-meta{display:flex;flex-direction:column;gap:8px;}
.gv-about-meta span{font-size:13px;color:var(--gray);display:flex;align-items:center;gap:8px;}
.gv-about-meta span i{width:16px;color:var(--primary);font-size:14px;}
.gv-staff-list{padding:8px 0;}
.gv-staff-item{display:flex;align-items:center;gap:10px;padding:10px 16px;}
.gv-staff-item img{width:36px;height:36px;border-radius:50%;flex-shrink:0;}
.gv-staff-item strong{font-size:13px;display:block;}
.gv-staff-role{font-size:11px;border-radius:4px;padding:2px 8px;display:inline-block;margin-top:2px;}
.gv-staff-role.admin{background:rgba(139,92,246,.15);color:var(--primary);}
.gv-staff-role.mod{background:rgba(96,165,250,.15);color:#60a5fa;}
.gv-staff-role.coadmin{background:rgba(167,139,250,.15);color:#c4b5fd;}
.gv-rules-body{padding:16px;}
.gv-rules-body ol{padding-left:18px;font-size:13px;color:var(--dark);line-height:2;}
.gv-members-preview{padding:12px 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.gv-members-preview img{width:36px;height:36px;border-radius:50%;border:none;box-shadow:none;}
.gv-members-more{font-size:12px;color:var(--gray);margin-left:4px;}
.gv-icon-wrap{width:200px;height:200px;border-radius:8px;border:none;box-shadow:none;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:72px;color:rgba(255,255,255,.9);position:relative;margin:0 auto;}
.gv-mobile-right{display:none;flex-direction:column;gap:14px;}
.gv-icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.gv-icon-pick{width:44px;height:44px;border-radius:8px;background:var(--border);border:2px solid transparent;color:var(--gray);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.gv-icon-pick:hover{background:rgba(139,92,246,.2);color:var(--dark);}
.gv-icon-pick.active{border-color:var(--primary);color:var(--primary);background:rgba(139,92,246,.15);}
.gv-edit-rules-btn{background:none;color:var(--gray);font-size:12px;margin-left:auto;padding:4px 8px;border-radius:4px;transition:color .2s;}
.gv-edit-rules-btn:hover{color:var(--primary);}

/* ========== GROUP SHOP ========== */
.gv-shop-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;flex-wrap:wrap;gap:10px;}
.gv-shop-title{font-size:18px;font-weight:700;color:var(--dark);display:flex;align-items:center;gap:8px;}
.gv-shop-title i{color:var(--primary);}
.gv-shop-coins{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#f59e0b;background:rgba(245,158,11,.1);padding:6px 14px;border-radius:20px;}
.gv-shop-coins i{font-size:16px;}
#gvShopSection{overflow:hidden;}
#gvShopContent .shop-scroll-row{padding:8px 4px 16px;}
#gvShopContent .skin-card{min-width:220px;max-width:220px;}
#gvModeTabs{margin-bottom:0;padding:0 4px;}
#gvModeTabs .search-tab{padding:10px 20px;font-size:14px;}

/* Group Skin Classes - scoped to #page-group-view */
#page-group-view.gskin-classic .gv-layout .card{background:#fff;color:#333;}
#page-group-view.gskin-classic .card-heading,#page-group-view.gskin-classic .profile-name{color:#5cbdb9;}
#page-group-view.gskin-midnight .gv-layout .card{background:#2a2a4a;color:#ddd;}
#page-group-view.gskin-midnight .card-heading,#page-group-view.gskin-midnight .profile-name,#page-group-view.gskin-midnight .gv-shop-title{color:#eee;}
#page-group-view.gskin-midnight .profile-title,#page-group-view.gskin-midnight .gv-about-meta span{color:#bbb;}
#page-group-view.gskin-midnight .post-username,#page-group-view.gskin-midnight .post-description p{color:#ddd;}
#page-group-view.gskin-ocean .gv-layout .card{background:#e3f2fd;color:#1565c0;}
#page-group-view.gskin-ocean .card-heading,#page-group-view.gskin-ocean .profile-name{color:#1565c0;}
#page-group-view.gskin-forest .gv-layout .card{background:#e8f5e9;color:#2e7d32;}
#page-group-view.gskin-forest .card-heading,#page-group-view.gskin-forest .profile-name{color:#2e7d32;}
#page-group-view.gskin-royal .gv-layout .card{background:#f3e5f5;color:#6a1b9a;}
#page-group-view.gskin-royal .card-heading,#page-group-view.gskin-royal .profile-name{color:#6a1b9a;}
#page-group-view.gskin-sunset .gv-layout .card{background:#fff8e1;color:#e65100;}
#page-group-view.gskin-sunset .card-heading,#page-group-view.gskin-sunset .profile-name{color:#e65100;}
#page-group-view.gskin-cherry .gv-layout .card{background:#fce4ec;color:#c2185b;}
#page-group-view.gskin-cherry .card-heading,#page-group-view.gskin-cherry .profile-name{color:#c2185b;}
#page-group-view.gskin-slate .gv-layout .card{background:#37474f;color:#eceff1;}
#page-group-view.gskin-slate .card-heading,#page-group-view.gskin-slate .profile-name{color:#eceff1;}
#page-group-view.gskin-slate .profile-title{color:#90a4ae;}
#page-group-view.gskin-slate .post-username,#page-group-view.gskin-slate .post-description p{color:#eceff1;}
#page-group-view.gskin-ember .gv-layout .card{background:#fbe9e7;color:#bf360c;}
#page-group-view.gskin-ember .card-heading,#page-group-view.gskin-ember .profile-name{color:#bf360c;}
#page-group-view.gskin-arctic .gv-layout .card{background:#e0f7fa;color:#00838f;}
#page-group-view.gskin-arctic .card-heading,#page-group-view.gskin-arctic .profile-name{color:#00838f;}
#page-group-view.gskin-moss .gv-layout .card{background:#f1f8e9;color:#558b2f;}
#page-group-view.gskin-moss .card-heading,#page-group-view.gskin-moss .profile-name{color:#558b2f;}
#page-group-view.gskin-pastel .gv-layout .card{background:#fef5ff;color:#7b4a8e;}
#page-group-view.gskin-pastel .card-heading,#page-group-view.gskin-pastel .profile-name{color:#7b4a8e;}

/* Guild Skin Overrides */
#page-group-view.gskin-guild-banner .gv-layout .card{background:#f5e6d0;color:#5c3310;}
#page-group-view.gskin-guild-banner .card-heading,#page-group-view.gskin-guild-banner .profile-name{color:#5c3310;}
#page-group-view.gskin-guild-fortress .gv-layout .card{background:#e8e8e8;color:#333;}
#page-group-view.gskin-guild-dragon .gv-layout .card{background:#2a0a0a;color:#ff6b35;}
#page-group-view.gskin-guild-dragon .card-heading,#page-group-view.gskin-guild-dragon .profile-name{color:#ff6b35;}
#page-group-view.gskin-guild-dragon .profile-title{color:#cc4400;}
#page-group-view.gskin-guild-dragon .post-username,#page-group-view.gskin-guild-dragon .post-description p{color:#ff6b35;}
#page-group-view.gskin-guild-enchanted .gv-layout .card{background:#e8f5e9;color:#1a472a;}
#page-group-view.gskin-guild-enchanted .card-heading,#page-group-view.gskin-guild-enchanted .profile-name{color:#1a472a;}
#page-group-view.gskin-guild-ocean .gv-layout .card{background:#e3f2fd;color:#1a3a5c;}
#page-group-view.gskin-guild-ocean .card-heading,#page-group-view.gskin-guild-ocean .profile-name{color:#1a3a5c;}
#page-group-view.gskin-guild-celestial .gv-layout .card{background:#1e1e3a;color:#e8d5ff;}
#page-group-view.gskin-guild-celestial .card-heading,#page-group-view.gskin-guild-celestial .profile-name{color:#e8d5ff;}
#page-group-view.gskin-guild-celestial .profile-title{color:#b388ff;}
#page-group-view.gskin-guild-celestial .post-username,#page-group-view.gskin-guild-celestial .post-description p{color:#e8d5ff;}
#page-group-view.gskin-guild-steampunk .gv-layout .card{background:#f5e6d0;color:#5c3a1e;}
#page-group-view.gskin-guild-steampunk .card-heading,#page-group-view.gskin-guild-steampunk .profile-name{color:#5c3a1e;}
#page-group-view.gskin-guild-frost .gv-layout .card{background:#e0f7fa;color:#006064;}
#page-group-view.gskin-guild-frost .card-heading,#page-group-view.gskin-guild-frost .profile-name{color:#006064;}

/* Premium Group Skins (dark) */
#page-group-view.gpremium-dark .gv-layout .card{background:color-mix(in srgb,#1e293b var(--card-opacity,90%),transparent);color:#e2e8f0;}
#page-group-view.gpremium-dark .card-heading,#page-group-view.gpremium-dark .profile-name,#page-group-view.gpremium-dark .gv-shop-title{color:#e2e8f0;}
#page-group-view.gpremium-dark .profile-title,#page-group-view.gpremium-dark .gv-about-meta span{color:#94a3b8;}
#page-group-view.gpremium-dark .post-username,#page-group-view.gpremium-dark .post-description p{color:#e2e8f0;}
#page-group-view.gpremium-dark .gv-staff-item strong{color:#e2e8f0;}
#page-group-view.gpremium-dark .gv-shop-coins{background:rgba(245,158,11,.15);}

/* Group skin transitions */
#page-group-view[class*="gskin-"] .gv-layout .card,
#page-group-view[class*="gpremium-"] .gv-layout .card{transition:background .3s,color .3s;}

.card-heading{display:flex;align-items:center;}
#groupsSections{display:flex;flex-direction:column;}
#groupsSections .shop-section-title{padding:20px 0 4px;}

/* ========== SEARCH RESULTS PAGE ========== */
.search-tabs{display:flex;gap:8px;margin-bottom:20px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0;}
.search-tabs::-webkit-scrollbar{display:none;}
.search-tab{background:rgba(128,128,128,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 18px;font-size:calc(13px * var(--font-scale));font-weight:500;color:var(--gray);border-radius:20px;display:flex;align-items:center;gap:8px;transition:all .2s;white-space:nowrap;flex-shrink:0;border:1px solid rgba(128,128,128,.12);}
.search-tab:hover{color:var(--dark);background:rgba(128,128,128,.25);}
.search-tab.active{color:#fff;background:var(--primary);border-color:var(--primary);backdrop-filter:none;-webkit-backdrop-filter:none;}
.search-tab .tab-count{background:rgba(0,0,0,.1);color:var(--gray);font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;}
.search-tab.active .tab-count{background:rgba(255,255,255,.25);color:#fff;}
.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
#page-profiles{min-height:auto!important;height:100vh;overflow:hidden;}
#page-profiles .page-container{padding-bottom:0;display:flex;flex-direction:column;height:calc(100vh - 80px);overflow:hidden;}
#page-profiles .page-header{flex-shrink:0;}
#page-profiles #profilesTabs{flex-shrink:0;}
#page-profiles #profilesSections{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.connections-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;overflow:hidden;}
.connections-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-height:0;}
.connections-col{display:flex;flex-direction:column;gap:10px;background:var(--card);border-radius:12px;padding:14px;box-shadow:var(--shadow);min-height:0;}
.connections-heading{font-size:14px;font-weight:600;color:var(--dark);display:flex;align-items:center;gap:8px;margin:0;flex-shrink:0;}
.connections-heading i{color:var(--primary);font-size:13px;}
.connections-count{font-size:11px;font-weight:500;color:var(--gray);background:var(--border);border-radius:10px;padding:2px 8px;margin-left:auto;}
.connections-empty{color:var(--gray);font-size:13px;text-align:center;padding:20px 0;}
.connections-dots{display:none;justify-content:center;gap:8px;padding:8px 0;flex-shrink:0;}
.connections-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s,transform .2s;}
.connections-dot.active{background:var(--primary);transform:scale(1.25);}
.connections-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) transparent;border-radius:8px;}
.connections-scroll::-webkit-scrollbar{width:5px;}
.connections-scroll::-webkit-scrollbar-track{background:transparent;}
.connections-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.connections-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.connections-grid .profile-card-item{min-width:0;max-width:none;width:100%;padding:12px;box-shadow:none;border:1px solid var(--border);}
.connections-grid .profile-card-item img{width:48px;height:48px;margin:0 auto 6px;}
.connections-grid .profile-card-item h4{font-size:calc(13px * var(--font-scale));}
.connections-grid .profile-card-item p{font-size:11px;margin-bottom:8px;}
.connections-grid .profile-card-item .btn{padding:5px 8px;font-size:11px;}
.connections-grid .profile-card-item:hover{transform:none;}
.connections-followers{flex-shrink:0;max-height:30%;overflow:hidden;display:flex;flex-direction:column;gap:8px;}
.connections-followers .connections-heading{flex-shrink:0;}
.connections-followers .connections-followers-scroll{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.connections-followers .connections-followers-scroll::-webkit-scrollbar{display:none;}
.connections-followers .connections-followers-row{display:flex;gap:10px;padding:4px 0;}
.connections-followers .profile-card-item{min-width:140px;max-width:140px;flex-shrink:0;padding:10px;box-shadow:none;border:1px solid var(--border);}
.connections-followers .profile-card-item img{width:40px;height:40px;margin:0 auto 4px;}
.connections-followers .profile-card-item h4{font-size:calc(12px * var(--font-scale));}
.connections-followers .profile-card-item p{font-size:10px;margin-bottom:6px;}
.connections-followers .profile-card-item .btn{padding:4px 6px;font-size:10px;}
.search-post-card{padding:16px 20px;}
.search-post-card .post-header{margin-bottom:10px;}
.search-post-card .post-tags{margin-bottom:0;}

/* ========== ANIMATIONS ========== */
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-4px);}40%{transform:translateX(4px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
.shake{animation:shake .4s ease;}
@keyframes coinPop{0%{transform:scale(1);}50%{transform:scale(1.3);}100%{transform:scale(1);}}
.coin-pop{animation:coinPop .3s ease;}

/* ========== RESPONSIVE ========== */
@media(max-width:1400px){
    .main-container{grid-template-columns:220px 1fr 240px;gap:16px;}
    .left-sidebar{gap:16px;}
    .right-sidebar{gap:16px;}
    .center-feed{gap:16px;}
    .gv-layout{grid-template-columns:220px 1fr 240px;gap:16px;}
    .pv-layout{grid-template-columns:220px 1fr 240px;gap:16px;}
    .nav-link span:not(.notif-badge){display:none;}
    .nav-link{padding:6px 8px;}

    /* Sidebar navs → slim rail at medium widths */
    body.nav-metro .navbar{width:60px!important;}
    body.nav-metro .nav-link{flex-direction:column!important;align-items:center!important;gap:2px!important;padding:8px 2px!important;}
    body.nav-metro .nav-link span:not(.notif-badge){display:none!important;}
    body.nav-metro .nav-link i{width:auto!important;}
    body.nav-metro .search-bar{display:none!important;}
    body.nav-metro .nav-username{display:none!important;}
    body.nav-metro .nav-user .fa-chevron-down{display:none!important;}
    body.nav-metro .nav-logo{font-size:12px!important;padding:6px 4px!important;letter-spacing:-1px!important;text-align:center!important;}
    body.nav-metro .page{padding-left:60px!important;}
    body.nav-metro .nav-coins{flex-direction:column!important;gap:1px!important;padding:4px!important;font-size:10px!important;border-radius:8px!important;}
    body.nav-metro .nav-user{padding:3px!important;border-radius:50%!important;justify-content:center!important;}
    body.nav-metro .nav-avatar{width:30px!important;height:30px!important;}
    body.nav-metro .notif-badge{position:static!important;min-width:1.6em!important;height:1.6em!important;font-size:calc(8px * var(--font-scale,1))!important;margin-top:-2px!important;}
    body.nav-metro .main-container{max-width:none!important;}
    body.nav-metro .page-container{max-width:none!important;}

    body.nav-mirror .navbar{width:60px!important;}
    body.nav-mirror .nav-link{flex-direction:column!important;align-items:center!important;gap:2px!important;padding:8px 2px!important;}
    body.nav-mirror .nav-link span:not(.notif-badge){display:none!important;}
    body.nav-mirror .nav-link i{width:auto!important;}
    body.nav-mirror .search-bar{display:none!important;}
    body.nav-mirror .nav-username{display:none!important;}
    body.nav-mirror .nav-user .fa-chevron-down{display:none!important;}
    body.nav-mirror .nav-logo{font-size:12px!important;padding:6px 4px!important;letter-spacing:-1px!important;text-align:center!important;}
    body.nav-mirror .page{padding-right:60px!important;}
    body.nav-mirror .nav-coins{flex-direction:column!important;gap:1px!important;padding:4px!important;font-size:10px!important;border-radius:8px!important;}
    body.nav-mirror .nav-user{padding:3px!important;border-radius:50%!important;justify-content:center!important;}
    body.nav-mirror .nav-avatar{width:30px!important;height:30px!important;}
    body.nav-mirror .notif-badge{position:static!important;min-width:1.6em!important;height:1.6em!important;font-size:calc(8px * var(--font-scale,1))!important;margin-top:-2px!important;}
    body.nav-mirror .main-container{max-width:none!important;}
    body.nav-mirror .page-container{max-width:none!important;}
}
@media(max-width:900px){
    .main-container{grid-template-columns:1fr 220px!important;grid-template-rows:auto!important;max-width:100%!important;}
    .left-sidebar{display:contents!important;}
    .left-sidebar .profile-card{grid-column:1/-1!important;grid-row:auto!important;position:static!important;max-width:none!important;margin:0!important;width:auto!important;}
    .left-sidebar .photos-card{grid-column:1/-1!important;grid-row:auto!important;max-width:none!important;margin:0!important;width:auto!important;}
    .left-sidebar .suggestions-card{grid-column:1/-1!important;grid-row:auto!important;}
    .center-feed{grid-column:1!important;grid-row:auto!important;}
    .right-sidebar{grid-column:2!important;grid-row:auto!important;position:static!important;max-width:none!important;margin:0!important;width:auto!important;}
    .gv-layout{grid-template-columns:1fr 220px!important;max-width:100%!important;}
    .gv-left{display:none!important;}
    .gv-right{position:static!important;}
    .pv-layout{grid-template-columns:1fr 220px!important;max-width:100%!important;grid-template-rows:auto!important;}
    .pv-col-left{grid-column:1/-1!important;grid-row:auto!important;position:static!important;}
    .pv-col-left>.card{position:static!important;}
    .pv-col-photos{grid-column:1/-1!important;grid-row:auto!important;}
    .pv-col-feed{grid-column:1!important;grid-row:auto!important;}
    .pv-col-skin{grid-column:2!important;grid-row:auto!important;position:static!important;}
    .nav-center{gap:0;}
    .nav-link span:not(.notif-badge){display:none;}
    .search-bar{width:140px;}
    .nav-username{display:none;}
    .messages-layout{flex-direction:column;height:calc(100vh - 80px);}
    .msg-sidebar{width:100%;border-right:none;border-bottom:none;max-height:none;flex:1;overflow-y:auto;}
    .msg-chat{display:none;}
    .messages-layout.chat-open .msg-sidebar{display:none;}
    .messages-layout.chat-open .msg-chat{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-direction:column;background:var(--card);}
    .msg-back-btn{display:flex;}
    .msg-following-bar{display:none;}
    .msg-chat-header{flex-shrink:0;background:var(--card);border-bottom:1px solid var(--border);padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));}
    .msg-chat-messages{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px;}
    .msg-chat-input{flex-shrink:0;background:var(--card);border-top:1px solid var(--border);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));}
}
@media(max-width:768px){
    /* --- Prevent horizontal scroll & iOS elastic swipe --- */
    html{overflow-x:hidden;overscroll-behavior-x:none;}
    body{overflow-x:hidden;max-width:100vw;overscroll-behavior-x:none;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;}
    /* Solid background behind bottom nav to prevent content showing through */
    .nav-center{background:var(--nav-bg,#0f172a)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}

    /* --- Prevent iOS auto-zoom on input focus (requires >=16px) --- */
    input,textarea,select{font-size:16px!important;}

    /* --- Navbar — top bar compact --- */
    .navbar{height:calc(48px + env(safe-area-inset-top,0px))!important;max-height:calc(48px + env(safe-area-inset-top,0px))!important;padding-top:env(safe-area-inset-top,0px)!important;}
    .nav-container{padding:0 10px!important;gap:6px!important;}
    .nav-logo{font-size:clamp(13px,3.5vw,18px)!important;padding:4px 10px!important;}
    .search-bar{display:none!important;}
    .mobile-search-btn{display:flex!important;align-items:center;}
    .nav-username{display:none!important;}
    .nav-coins{padding:4px 8px!important;font-size:12px!important;margin-left:auto!important;}
    .nav-user .fa-chevron-down{display:none!important;}
    .nav-saved-link{display:none!important;}
    .nav-notif-link{display:none!important;}
    .dropdown-saved-link{display:flex!important;}
    .mobile-notif-btn{display:flex!important;align-items:center;}

    /* --- Bottom nav bar — nav links pinned to bottom of screen --- */
    .nav-center{
        position:fixed!important;bottom:0!important;left:0!important;right:0!important;
        top:auto!important;transform:none!important;
        background:var(--nav-bg)!important;
        padding:6px 8px calc(env(safe-area-inset-bottom,0px) + 6px)!important;
        border-radius:0!important;gap:0!important;
        box-shadow:0 -2px 16px rgba(0,0,0,.25)!important;
        z-index:999!important;width:100%!important;
        justify-content:space-around!important;
        flex-direction:row!important;flex:none!important;
        height:auto!important;max-height:none!important;
        overflow:visible!important;border:none!important;margin:0!important;
        pointer-events:auto!important;
    }
    /* Extend nav background below viewport to prevent gap when mobile browser chrome hides */
    .nav-center::after{
        content:'';position:absolute;left:0;right:0;top:100%;
        height:env(safe-area-inset-bottom,34px);min-height:34px;
        background:var(--nav-bg,#0f172a);pointer-events:none;
    }
    .nav-link{
        flex-direction:column!important;align-items:center!important;
        gap:2px!important;padding:6px 4px!important;border-radius:8px!important;
        color:rgba(255,255,255,.7)!important;
        width:auto!important;justify-content:center!important;
        max-height:none!important;border-bottom:none!important;
        position:relative!important;flex:1 1 0!important;min-width:0!important;
    }
    .nav-link i{font-size:18px!important;width:auto!important;}
    .nav-link span:not(.notif-badge){
        display:block!important;font-size:9px!important;
        opacity:.7!important;white-space:nowrap!important;
        overflow:hidden!important;text-overflow:ellipsis!important;
        max-width:56px!important;text-align:center!important;
        position:static!important;transform:none!important;
        background:none!important;padding:0!important;
        margin:0!important;border-radius:0!important;
        color:inherit!important;pointer-events:auto!important;
        line-height:1.2!important;
    }
    .nav-link:hover span:not(.notif-badge),.nav-link:focus span:not(.notif-badge){
        position:static!important;transform:none!important;
        background:none!important;padding:0!important;margin:0!important;
        top:auto!important;bottom:auto!important;left:auto!important;
        font-size:9px!important;color:inherit!important;
        z-index:auto!important;border-radius:0!important;
        white-space:nowrap!important;pointer-events:auto!important;
        display:block!important;opacity:.7!important;
    }
    .nav-link.active:hover span:not(.notif-badge){opacity:1!important;}
    .nav-link.active{color:#fff!important;background:rgba(255,255,255,.12)!important;}
    .nav-link.active span{opacity:1!important;}
    .notif-badge{
        position:absolute!important;top:0!important;right:0!important;
        min-width:1.6em!important;height:1.6em!important;font-size:calc(8px * var(--font-scale,1))!important;
        margin:0!important;
    }
    #msgBadge{
        position:absolute!important;
        top:2px!important;right:2px!important;
        width:8px!important;height:8px!important;min-width:8px!important;
        max-width:8px!important;max-height:8px!important;
        padding:0!important;font-size:0!important;line-height:0!important;
        border-radius:50%!important;
        background:var(--primary)!important;
        z-index:10!important;
        pointer-events:none!important;
        flex:none!important;
        overflow:hidden!important;
        display:none!important;
    }
    #msgBadge.has-unread{display:block!important;opacity:1!important;}
    .nav-right{flex:1!important;justify-content:flex-end!important;}
    body[class*="premium-"] .nav-center{background:var(--ps-nav)!important;background-size:200% 200%!important;animation:gradientShift 6s ease infinite!important;}
    body.premium-neon-wave .nav-center{background:linear-gradient(135deg,#00f5a0,#00d9f5,#7b2ff7,#00f5a0,#005f40,#7b2ff7,#00d9f5,#00f5a0)!important;background-size:400% 400%!important;animation:neonWaveShift 8s linear infinite!important;}
    body.premium-deep-wave .nav-center{background:linear-gradient(135deg,#007a5e,#005a80,#4a1a8a,#007a5e,#003a28,#4a1a8a,#005a80,#007a5e)!important;background-size:400% 400%!important;animation:deepWaveFlow 8s linear infinite!important;}

    /* --- Main layout — force single column --- */
    .main-container{
        grid-template-columns:1fr!important;
        max-width:100%!important;width:100%!important;
        grid-template-rows:auto!important;
        padding:0 12px!important;
        gap:14px!important;
        margin:0 auto!important;
        box-sizing:border-box!important;
    }
    .left-sidebar{
        display:none!important;
    }
    .center-feed{
        grid-column:1!important;grid-row:auto!important;width:100%!important;min-width:0!important;
        gap:14px!important;margin:0 auto!important;max-width:100%!important;
    }
    .feed-post{border-left:none!important;border-right:none!important;margin-left:0!important;margin-right:0!important;}
    #feedContainer{width:100%!important;}
    #feedContainer .card{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;}
    [class*="tpl-"] #feedContainer{max-width:100%!important;margin:0!important;}
    body[class*="premium-"] .feed-post{border-left:none!important;}
    body[class*="skin-"] .feed-post{border-left:none!important;}
    .right-sidebar{
        grid-column:1!important;grid-row:auto!important;position:static!important;
        max-width:none!important;margin:0!important;width:auto!important;
        display:flex!important;flex-direction:column!important;gap:14px!important;
    }
    .right-sidebar .suggestions-card,
    .right-sidebar .groups-card{display:none!important;}
    .mobile-pills-bar{display:flex!important;}

    /* --- Group card buttons — icon-only on mobile --- */
    .gc-btn-icon{display:inline!important;}
    .gc-btn-text{display:none!important;}
    .group-card-actions .btn{flex:none!important;width:40px!important;height:40px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;font-size:15px!important;}

    /* --- Profile view — single column --- */
    .pv-layout{
        grid-template-columns:1fr!important;max-width:100%!important;
        grid-template-rows:auto!important;padding:0 12px 40px!important;gap:14px!important;
    }
    .pv-col-left{grid-column:1!important;grid-row:auto!important;position:static!important;}
    .pv-col-left>.card{position:static!important;}
    .pv-col-left .pv-profile-card{max-width:100%!important;}
    .pv-col-photos{grid-column:1!important;grid-row:auto!important;}
    .pv-col-feed{grid-column:1!important;grid-row:auto!important;}
    .pv-col-skin{grid-column:1!important;grid-row:auto!important;position:static!important;max-width:none!important;margin:0!important;}
    .pv-cover-banner{height:200px!important;}

    /* --- Follow button — skin-themed circle with + on mobile --- */
    #pvFollowBtn{width:40px!important;height:40px!important;border-radius:50%!important;padding:0!important;font-size:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
    #pvFollowBtn i{font-size:16px!important;}

    /* --- Cover edit button — camera icon only on mobile, on the cover --- */
    .timeline-cover-btn{top:auto!important;bottom:10px!important;right:10px!important;padding:0!important;width:36px;height:36px;border-radius:50%!important;font-size:0!important;justify-content:center;align-items:center;}
    .timeline-cover-btn i{font-size:14px!important;}

    /* --- Group view — single column --- */
    .gv-layout{
        grid-template-columns:1fr!important;max-width:100%!important;
        padding:0 12px 40px!important;gap:14px!important;
    }
    .gv-left,.gv-right{position:static!important;}
    .gv-right{display:none!important;}
    .gv-mobile-right{display:flex!important;}
    .gv-cover-banner,.pv-cover-banner-group{height:200px!important;}

    /* --- ALL templates → single column --- */
    [class*="tpl-"] .main-container{
        grid-template-columns:1fr!important;max-width:100%!important;grid-template-rows:auto!important;
    }
    [class*="tpl-"] .left-sidebar{display:flex!important;flex-direction:column!important;}
    [class*="tpl-"] .left-sidebar .profile-card{
        grid-column:1!important;grid-row:auto!important;position:static!important;
        max-width:none!important;margin:0!important;width:auto!important;
    }
    [class*="tpl-"] .left-sidebar .photos-card{grid-column:1!important;grid-row:auto!important;}
    [class*="tpl-"] .left-sidebar .suggestions-card{grid-column:1!important;grid-row:auto!important;display:block!important;}
    [class*="tpl-"] .center-feed{grid-column:1!important;grid-row:auto!important;}
    [class*="tpl-"] .right-sidebar{
        grid-column:1!important;grid-row:auto!important;position:static!important;
        display:flex!important;max-width:none!important;width:auto!important;margin:0!important;
    }
    [class*="tpl-"] .pv-layout{
        grid-template-columns:1fr!important;max-width:100%!important;
        grid-template-rows:auto!important;direction:ltr!important;
    }
    [class*="tpl-"] .pv-layout>*{direction:ltr!important;}
    [class*="tpl-"] .pv-col-left{
        grid-column:1!important;grid-row:auto!important;position:static!important;
        max-width:100%!important;margin:0!important;width:auto!important;
    }
    [class*="tpl-"] .pv-col-left .pv-profile-card{max-width:100%!important;}
    [class*="tpl-"] .pv-col-photos{grid-column:1!important;grid-row:auto!important;}
    [class*="tpl-"] .pv-col-feed{grid-column:1!important;grid-row:auto!important;}
    [class*="tpl-"] .pv-col-skin{
        grid-column:1!important;grid-row:auto!important;position:static!important;
        display:block!important;max-width:none!important;margin:0!important;
    }
    /* Zen/Focus/Journal — fill width on mobile */
    body.tpl-zen .left-sidebar .profile-card,
    body.tpl-focus .left-sidebar .profile-card,
    body.tpl-journal .left-sidebar .profile-card,
    body.tpl-zen .right-sidebar,
    body.tpl-journal .right-sidebar,
    body.tpl-zen .pv-col-left,body.tpl-focus .pv-col-left,body.tpl-journal .pv-col-left,
    body.tpl-zen .pv-col-skin,body.tpl-journal .pv-col-skin{
        max-width:100%!important;width:100%!important;
    }
    /* Cinema photos → grid on mobile */
    body.tpl-cinema .pv-col-photos .photos-preview{
        display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    }
    body.tpl-cinema .pv-col-photos .photos-preview img{
        flex:none!important;min-width:0!important;aspect-ratio:1!important;
    }

    /* --- Nav Metro → top bar on mobile (sidebar → horizontal) --- */
    body.nav-metro .navbar{
        position:fixed!important;top:0!important;left:0!important;right:0!important;
        bottom:auto!important;width:100%!important;height:48px!important;max-height:48px!important;overflow:visible!important;
    }
    body.nav-metro .nav-container{
        flex-direction:row!important;align-items:center!important;
        height:100%!important;padding:0 10px!important;gap:6px!important;
    }
    body.nav-metro .nav-left{flex-direction:row!important;align-items:center!important;gap:8px!important;}
    body.nav-metro .nav-right{flex-direction:row!important;align-items:center!important;gap:6px!important;}
    body.nav-metro .nav-coins{flex-direction:row!important;padding:4px 8px!important;font-size:12px!important;border-radius:16px!important;}
    body.nav-metro .page{padding-left:0!important;padding-top:58px!important;}
    body.nav-metro #page-home{padding-top:48px!important;}
    body.nav-metro .main-container{margin-top:-48px!important;}
    body.nav-metro .user-dropdown{top:100%!important;bottom:auto!important;left:auto!important;right:0!important;margin:4px 0 0!important;}
    body.nav-metro .nav-username{display:none!important;}
    body.nav-metro .search-bar{width:90px!important;}
    body.nav-metro .timeline-cover{margin-top:0!important;}
    body.nav-metro .pv-cover-banner{margin:0 auto!important;}

    /* --- Nav Rail → top bar on mobile --- */
    body.nav-rail .navbar{
        position:fixed!important;top:0!important;left:0!important;right:0!important;
        bottom:auto!important;width:100%!important;height:48px!important;overflow:visible!important;
    }
    body.nav-rail .nav-container{
        flex-direction:row!important;align-items:center!important;
        padding:0 10px!important;gap:6px!important;height:100%!important;
    }
    body.nav-rail .nav-left{flex-direction:row!important;align-items:center!important;gap:8px!important;}
    body.nav-rail .search-bar{display:block!important;width:90px!important;}
    body.nav-rail .nav-right{flex-direction:row!important;align-items:center!important;gap:6px!important;}
    body.nav-rail .nav-coins{flex-direction:row!important;padding:4px 8px!important;font-size:12px!important;border-radius:16px!important;}
    body.nav-rail .page{padding-left:0!important;padding-top:58px!important;}
    body.nav-rail #page-home{padding-top:48px!important;}
    body.nav-rail .user-dropdown{top:100%!important;bottom:auto!important;left:auto!important;right:0!important;margin:4px 0 0!important;}
    body.nav-rail .timeline-cover{margin:0 auto!important;}
    body.nav-rail .pv-cover-banner{margin:0 auto!important;}

    /* --- Nav Mirror → top bar on mobile --- */
    body.nav-mirror .navbar{
        position:fixed!important;top:0!important;left:0!important;right:0!important;
        bottom:auto!important;width:100%!important;height:48px!important;max-height:48px!important;overflow:visible!important;
    }
    body.nav-mirror .nav-container{
        flex-direction:row!important;align-items:center!important;
        height:100%!important;padding:0 10px!important;gap:6px!important;
    }
    body.nav-mirror .nav-left{flex-direction:row!important;align-items:center!important;gap:8px!important;}
    body.nav-mirror .nav-right{flex-direction:row!important;align-items:center!important;gap:6px!important;}
    body.nav-mirror .nav-coins{flex-direction:row!important;padding:4px 8px!important;font-size:12px!important;border-radius:16px!important;}
    body.nav-mirror .page{padding-right:0!important;padding-top:58px!important;}
    body.nav-mirror #page-home{padding-top:48px!important;}
    body.nav-mirror .main-container{margin-top:-48px!important;}
    body.nav-mirror .user-dropdown{top:100%!important;bottom:auto!important;right:0!important;left:auto!important;margin:4px 0 0!important;}
    body.nav-mirror .nav-username{display:none!important;}
    body.nav-mirror .search-bar{width:90px!important;}
    body.nav-mirror .timeline-cover{margin-top:0!important;}
    body.nav-mirror .pv-cover-banner{margin:0 auto!important;}

    /* --- Nav Dock — compact --- */
    body.nav-dock .navbar{height:48px!important;}

    /* --- Nav Pill — compact --- */
    body.nav-pill .navbar{height:48px!important;}

    /* --- Nav Horizon — compact top bar --- */
    body.nav-horizon .navbar{top:0!important;bottom:auto!important;border-radius:0!important;box-shadow:0 2px 10px rgba(0,0,0,.3)!important;height:48px!important;}
    body.nav-horizon .user-dropdown{top:100%!important;bottom:auto!important;margin-top:4px!important;margin-bottom:0!important;}
    body.nav-horizon .page{padding-top:58px!important;}
    body.nav-horizon #page-home{padding-top:48px!important;}
    body.nav-horizon .timeline-cover{margin-top:0!important;}
    body.nav-horizon .main-container{margin-top:-48px!important;}

    /* --- Nav Split — compact --- */

    /* --- Nav Shelf → compact single row on mobile --- */
    body.nav-shelf .navbar{height:48px!important;}
    body.nav-shelf .nav-container{flex-wrap:nowrap!important;padding:0 10px!important;}
    body.nav-shelf .nav-left{padding-bottom:0!important;}
    body.nav-shelf .nav-right{padding-bottom:0!important;}
    body.nav-shelf .page{padding-top:58px!important;}
    body.nav-shelf #page-home .timeline-cover{margin-top:0!important;}
    body.nav-shelf .pv-cover-banner{margin-top:0!important;}
    body.nav-shelf .gv-cover-banner{margin-top:0!important;}

    /* --- Nav Float/Island — compact top bar --- */
    body.nav-float .navbar{top:0!important;left:0!important;right:0!important;border-radius:0!important;border:none!important;}
    body.nav-float .search-bar{width:90px!important;}
    body.nav-float .search-bar:focus-within{width:120px!important;}
    body.nav-float .page{padding-top:58px!important;}
    body.nav-float #page-home{padding-top:58px!important;}
    body.nav-float .timeline-cover{margin:48px auto 0!important;border-radius:0!important;}
    body.nav-float .main-container{margin-top:-48px!important;}
    body.nav-float .pv-cover-banner{margin:48px auto 0!important;border-radius:0!important;}

    body.nav-island .navbar{pointer-events:auto!important;}
    body.nav-island .nav-container{pointer-events:auto!important;padding:4px 8px!important;}
    body.nav-island .nav-left{border-radius:8px!important;padding:4px 10px!important;}
    body.nav-island .nav-right{border-radius:8px!important;padding:4px 8px!important;}
    body.nav-island .search-bar{width:70px!important;}
    body.nav-island .search-bar input{font-size:11px!important;}
    body.nav-island .page{padding-top:58px!important;}
    body.nav-island #page-home{padding-top:58px!important;}
    body.nav-island .timeline-cover{margin:48px auto 0!important;border-radius:0!important;}
    body.nav-island .main-container{margin-top:-48px!important;}
    body.nav-island .pv-cover-banner{margin:48px auto 0!important;border-radius:0!important;}

    /* --- Image crop — prevent page scroll on touch --- */
    .crop-container,.crop-box,.crop-resize,
    #coverCropContainer,#coverCropBox,#coverCropResize{
        touch-action:none!important;
    }

    /* --- Modals — scale to screen --- */
    .modal-overlay{padding:10px!important;}
    .modal-content{
        max-width:95%!important;width:100%!important;max-height:90vh!important;
        margin:0 auto!important;border-radius:12px!important;
    }
    .modal-header{padding:14px 16px!important;}
    .modal-header h3{font-size:clamp(14px,4vw,18px)!important;}
    .modal-body{padding:16px!important;}
    .modal-profile-top img{width:min(200px,70%)!important;}
    .comment-modal-layout{max-height:calc(90vh - 55px)!important;}
    .comment-modal-scroll{padding:10px 14px!important;}
    .comment-modal-input{padding:10px 14px!important;}
    .comment-modal-input>div:last-child{gap:6px!important;}
    .comment-gif-btn{padding:5px 8px!important;font-size:11px!important;}
    .comment-modal-input .btn-primary{padding:6px 12px!important;font-size:12px!important;white-space:nowrap!important;}
    .comment-modal-input .post-input{min-width:0!important;font-size:16px!important;}
    .cpm-emoji-btn,.comment-emoji-btn,.emoji-picker-panel{display:none!important;}
    .gif-picker-panel{max-height:min(320px,45vh)!important;}
    .gif-picker-header{padding:8px 12px!important;}
    .gif-picker-grid{padding:0 10px 6px!important;gap:3px!important;}
    .comment-gif{max-width:140px!important;max-height:100px!important;}
    .comment-post-embed{padding:12px 14px!important;}

    /* --- Messages --- */
    .messages-layout{flex-direction:column!important;height:calc(100vh - 120px)!important;max-height:none!important;margin-bottom:0!important;overflow:hidden!important;}
    .msg-sidebar{width:100%!important;border-right:none!important;border-bottom:none!important;max-height:none!important;flex:1!important;overflow-y:auto!important;}
    .msg-chat{display:none!important;}
    .messages-layout.chat-open .msg-sidebar{display:none!important;}
    .messages-layout.chat-open .msg-chat{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:9999!important;display:flex!important;flex-direction:column!important;background:var(--card)!important;}
    .msg-back-btn{display:flex!important;}
    .msg-following-bar{display:none!important;}
    .msg-chat-header{flex-shrink:0!important;padding:12px 14px!important;padding-top:calc(12px + env(safe-area-inset-top,0px))!important;background:var(--card)!important;border-bottom:1px solid var(--border)!important;}
    .msg-chat-messages{flex:1!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding:10px!important;}
    .msg-chat-input{flex-shrink:0!important;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important;background:var(--card)!important;border-top:1px solid var(--border)!important;}
    .msg-bubble{max-width:85%;}

    /* --- Feed posts --- */
    .feed-post{padding:14px!important;}
    .post-avatar{width:38px;height:38px;}
    .post-header{gap:10px;}
    .post-username{font-size:clamp(13px,3.5vw,15px);}
    .post-description p{font-size:clamp(13px,3.5vw,14px);}
    .post-actions{flex-wrap:wrap;gap:8px;}
    .action-left{gap:10px;}
    .post-media-grid{border-radius:6px;}
    .pm-count-2 .pm-thumb,.pm-count-3 .pm-thumb,.pm-count-4 .pm-thumb{height:180px;}
    .pm-count-5 .pm-thumb:nth-child(1),.pm-count-5 .pm-thumb:nth-child(2){height:180px;}
    .pm-count-5 .pm-thumb:nth-child(n+3){height:120px;}
    .link-preview-image{max-height:200px;}

    /* --- Images --- */
    .post-image,.post-video{max-width:100%;height:auto;object-fit:contain;}
    .profile-avatar{object-fit:cover;}
    .photos-preview img{object-fit:cover;}
    .timeline-cover{height:200px!important;}

    /* --- Typography --- */
    .page-header h2{font-size:clamp(18px,5vw,24px)!important;}
    .card-heading{font-size:clamp(14px,3.5vw,16px)!important;}
    .promo-title{font-size:clamp(14px,4vw,17px);}
    .shop-section-title{font-size:clamp(15px,4vw,18px)!important;}
    .profile-name{font-size:clamp(15px,4vw,18px)!important;}

    /* --- Tabs — compact pills --- */
    .search-tab{padding:7px 14px;font-size:clamp(12px,3vw,13px);}
    .feed-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}

    /* --- Spacing — mobile (with bottom nav) --- */
    .page{padding-top:calc(58px + env(safe-area-inset-top,0px))!important;padding-bottom:72px!important;}
    #page-home{padding-top:calc(48px + env(safe-area-inset-top,0px))!important;}
    .page-container{padding:0 12px 40px!important;}
    .page-header{margin-bottom:16px;}
    .promo-card{padding:18px 14px;}
    .card-heading{padding:12px 14px 10px!important;}
    .profile-stats{gap:12px 20px;}
    .profile-coins{padding:5px 12px;font-size:12px;}
    .post-create-bar{padding:12px 14px;gap:10px;}
    .post-create-avatar{width:36px;height:36px;}
    .suggestion-list{padding:8px 10px;gap:8px;}

    /* --- Page grids --- */
    .page-grid{grid-template-columns:1fr!important;}
    .search-results-grid{grid-template-columns:1fr!important;}
    /* Connections — horizontal swipe on mobile */
    .connections-columns{
        display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;
        -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0!important;flex:1;min-height:0;
    }
    .connections-columns::-webkit-scrollbar{display:none;}
    .connections-col{
        flex:0 0 100%!important;width:100%!important;min-width:100%!important;max-width:100%!important;
        scroll-snap-align:start;scroll-snap-stop:always;border-radius:0!important;box-shadow:none!important;
        padding:10px 14px!important;
    }
    .connections-grid{grid-template-columns:1fr 1fr!important;}
    .connections-dots{display:flex!important;}

    /* --- Network page — unlock scroll on mobile --- */
    #page-profiles{height:auto!important;overflow:auto!important;-webkit-overflow-scrolling:touch;}
    #page-profiles .page-container{height:auto!important;overflow:visible!important;}
    #page-profiles #profilesSections{overflow:auto!important;-webkit-overflow-scrolling:touch;flex:none!important;}
    .connections-wrap{overflow:visible!important;flex:none!important;}
    .connections-col{min-height:auto!important;max-height:60vh;overflow-y:auto!important;-webkit-overflow-scrolling:touch;}

    /* --- Ensure all pages scroll on mobile --- */
    .page{overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;height:auto!important;}
    .page-container{overflow:visible!important;height:auto!important;}
    #gvShopSection{overflow:auto!important;-webkit-overflow-scrolling:touch;}

    .photo-album-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important;}
    .album-photo-scroll{grid-template-rows:130px 130px!important;grid-auto-columns:130px!important;}
    .album-photo-scroll .photo-wrap{width:130px!important;height:130px!important;}
    .album-photo-scroll img{width:130px!important;height:130px!important;}

    /* --- Scroll row cards --- */
    .shop-scroll-row .skin-card,
    .shop-scroll-row .group-card,
    .shop-scroll-row .profile-card-item{min-width:180px!important;max-width:180px!important;}
    .scroll-2row{grid-auto-columns:180px!important;}
    .skin-preview{height:100px;}

    /* --- Group view extras --- */
    .gv-icon-wrap{width:140px;height:140px;font-size:52px;}
    .gv-icon-grid{grid-template-columns:repeat(5,1fr);gap:6px;}
    .gv-icon-pick{width:38px;height:38px;font-size:16px;}

    /* --- Lightbox --- */
    .lightbox-layout{max-width:100vw;max-height:100vh;border-radius:0;}
    .lightbox-media img{max-width:96vw;max-height:85vh;}
    .lightbox-arrow{width:36px;height:36px;font-size:18px;}
    .lightbox-prev{left:6px;}
    .lightbox-next{right:6px;}
    .lightbox-close{top:10px;right:10px;font-size:24px;}
    .lightbox-comment-toggle{display:flex!important;}
    /* Comment panel: hidden by default, slides up */
    .lightbox-comments{
        position:fixed!important;bottom:0;left:0;right:0;
        width:100%!important;max-height:70vh!important;
        border-radius:16px 16px 0 0!important;
        transform:translateY(100%);transition:transform .3s ease;
        z-index:5;box-shadow:0 -4px 20px rgba(0,0,0,.3);
    }
    .lightbox-comments.lb-open{transform:translateY(0);}
    .lb-comments-close{display:block!important;}

    /* --- Create post modal --- */
    .cpm-media-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))!important;}
    .cpm-media-grid .cpm-thumb img,.cpm-media-grid .cpm-thumb video{height:90px!important;}

    /* --- Notifications --- */
    .notif-item{padding:12px 14px;gap:10px;}

    /* --- User dropdown --- */
    .user-dropdown{min-width:160px!important;}

    /* --- Login page --- */
    .login-center{padding:24px 16px!important;}
    .login-card{max-width:100%;padding:24px 20px!important;}
    .login-stats{gap:20px!important;}
    .login-stat strong{font-size:28px!important;}
    .login-title{font-size:22px;}

    /* --- Touch targets (Apple HIG 44px minimum) --- */
    .nav-link{min-height:44px;min-width:44px;}
    .action-btn{min-height:44px;}
    .btn{min-height:44px;}
    .suggestion-item,.group-item,.msg-contact{min-height:48px;}

    /* --- Wheel nav: mobile carousel --- */
    body.nav-wheel .nav-center{
        justify-content:flex-start!important;
        flex-wrap:nowrap!important;
        overflow-x:auto!important;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:10px 0 calc(env(safe-area-inset-bottom,0px) + 10px)!important;
    }
    body.nav-wheel .nav-center::-webkit-scrollbar{display:none;}
    body.nav-wheel .nav-link{
        flex:0 0 auto!important;
        min-width:60px!important;
        scroll-snap-align:center;
        transition:transform .15s ease,opacity .15s ease;
        will-change:transform,opacity;
    }
    body.nav-wheel .nav-center::before,
    body.nav-wheel .nav-center::after{
        content:'';flex:0 0 calc(50vw - 30px);
    }
}

/* --- Touch-device tablet landscape (iPads 769–1100px, no hover) --- */
@media(min-width:769px) and (max-width:1400px) and (hover:none){
    .nav-link{min-height:44px;padding:8px 12px;}
    .action-btn,.btn{min-height:44px;}
}

/* =========================================================
   PHONE — bottom nav + phone-only overrides (≤640px)
   ========================================================= */
@media(max-width:640px){
    /* --- Bottom nav — pill-style for ALL nav styles --- */
    .nav-center{
        position:fixed!important;bottom:0!important;left:0!important;right:0!important;
        top:auto!important;transform:none!important;
        background:var(--nav-bg)!important;
        padding:6px 8px calc(env(safe-area-inset-bottom,0px) + 6px)!important;
        border-radius:0!important;gap:0!important;
        box-shadow:0 -2px 16px rgba(0,0,0,.25)!important;
        z-index:999!important;width:100%!important;
        justify-content:space-around!important;
        flex-direction:row!important;flex:none!important;
        height:auto!important;max-height:none!important;
        overflow:visible!important;border:none!important;margin:0!important;
        pointer-events:auto!important;
    }
    .nav-link{
        flex-direction:column!important;align-items:center!important;
        gap:2px!important;padding:6px 4px!important;border-radius:8px!important;
        font-size:10px!important;color:rgba(255,255,255,.7)!important;
        width:auto!important;justify-content:center!important;
        max-height:none!important;border-bottom:none!important;
        position:relative!important;flex-shrink:1!important;
        min-width:0!important;
    }
    .nav-link i{font-size:18px!important;width:auto!important;}
    .nav-link span{
        display:block!important;font-size:9px!important;
        opacity:.7!important;white-space:nowrap!important;
        overflow:hidden!important;text-overflow:ellipsis!important;
        max-width:56px!important;text-align:center!important;
        position:static!important;transform:none!important;
        background:none!important;padding:0!important;
        margin:0!important;border-radius:0!important;
        color:inherit!important;pointer-events:auto!important;
        line-height:1.2!important;
    }
    .nav-link:hover span:not(.notif-badge),.nav-link:focus span:not(.notif-badge){
        position:static!important;transform:none!important;
        background:none!important;padding:0!important;margin:0!important;
        top:auto!important;bottom:auto!important;left:auto!important;
        font-size:9px!important;color:inherit!important;
        z-index:auto!important;border-radius:0!important;
        white-space:nowrap!important;pointer-events:auto!important;
        display:block!important;opacity:.7!important;
    }
    .nav-link.active:hover span:not(.notif-badge){opacity:1!important;}
    .nav-link.active{color:#fff!important;background:rgba(255,255,255,.12)!important;}
    .nav-link.active span{opacity:1!important;}
    .notif-badge{
        position:absolute!important;top:0!important;right:0!important;
        min-width:1.6em!important;height:1.6em!important;font-size:calc(8px * var(--font-scale,1))!important;
        margin:0!important;
    }
    /* Message badge → small themed dot on mobile (no number) */
    #msgBadge{
        position:absolute!important;
        top:2px!important;right:2px!important;
        width:8px!important;height:8px!important;min-width:8px!important;
        max-width:8px!important;max-height:8px!important;
        padding:0!important;font-size:0!important;line-height:0!important;
        border-radius:50%!important;
        background:var(--primary)!important;
        z-index:10!important;pointer-events:none!important;
        flex:none!important;overflow:hidden!important;
        display:none!important;
    }
    #msgBadge.has-unread{display:block!important;opacity:1!important;}

    /* --- Bottom nav clearance --- */
    .page{padding-bottom:72px!important;}

    /* --- Nav Dock — bottom clearance --- */
    body.nav-dock .page{padding-bottom:72px!important;}
    body.nav-dock .messages-layout{height:calc(100vh - 140px)!important;}

    /* --- Nav Pill — bottom nav unify --- */
    body.nav-pill .nav-center{border-radius:0!important;bottom:0!important;left:0!important;right:0!important;transform:none!important;width:100%!important;}
    body.nav-pill .page{padding-bottom:72px!important;}
    body.nav-pill .messages-layout{height:calc(100vh - 140px)!important;}

    /* --- Nav Horizon — bottom clearance --- */
    body.nav-horizon .page{padding-bottom:72px!important;}

    /* --- Nav Split — bottom clearance --- */
    body.nav-split .page{padding-bottom:72px!important;}

    /* --- Premium nav — bottom bar styling --- */
    body[class*="premium-"] .nav-center{background:var(--ps-nav)!important;background-size:200% 200%!important;animation:gradientShift 6s ease infinite!important;}
    body.premium-neon-wave .nav-center{background:linear-gradient(135deg,#00f5a0,#00d9f5,#7b2ff7,#00f5a0,#005f40,#7b2ff7,#00d9f5,#00f5a0)!important;background-size:400% 400%!important;animation:neonWaveShift 8s linear infinite!important;}
}

@media(max-width:480px){
    .nav-container{padding:0 6px!important;gap:4px!important;}
    .search-bar{width:70px!important;}
    .search-bar input{padding:5px 8px 5px 26px!important;font-size:11px!important;}
    .nav-coins{padding:3px 6px!important;font-size:11px!important;margin-left:auto!important;}
    .nav-avatar{width:28px!important;height:28px!important;}
    .main-container{padding:0 8px!important;width:100%!important;margin:0 auto!important;}
    .feed-post{padding:12px 10px!important;border-left:none!important;border-right:none!important;}
    body[class*="premium-"] .feed-post,body[class*="skin-"] .feed-post{border-left:none!important;border-right:none!important;}
    .post-avatar{width:34px!important;height:34px!important;}
    .post-header{gap:8px!important;}
    .pm-count-2{grid-template-columns:1fr!important;}
    .pm-count-2 .pm-thumb{height:200px!important;}
    .pm-count-3 .pm-thumb{height:140px!important;}
    .pm-count-5{grid-template-columns:1fr 1fr!important;}
    .pm-count-5 .pm-thumb:nth-child(1),.pm-count-5 .pm-thumb:nth-child(2){grid-column:span 1!important;height:140px!important;}
    .pm-count-5 .pm-thumb:nth-child(n+3){grid-column:span 1!important;height:140px!important;}
    .page-container{padding:0 8px 30px!important;}
    .modal-content{max-width:98%!important;border-radius:10px!important;}
    .modal-header{padding:12px!important;}
    .modal-body{padding:12px!important;}
    .profile-avatar-wrap{width:clamp(80px,60%,150px)!important;margin-top:clamp(-80px,-40%,-50px)!important;}
    .msg-sidebar{max-height:none!important;}
    .btn{padding:8px 16px!important;font-size:clamp(12px,3vw,14px)!important;}
    .shop-scroll-row .skin-card,
    .shop-scroll-row .group-card,
    .shop-scroll-row .profile-card-item{min-width:160px!important;max-width:160px!important;}
    .scroll-2row{grid-auto-columns:160px!important;}
    .album-photo-scroll{grid-template-rows:120px 120px!important;grid-auto-columns:120px!important;}
    .album-photo-scroll .photo-wrap{width:120px!important;height:120px!important;}
    .album-photo-scroll img{width:120px!important;height:120px!important;}
    .timeline-cover,.pv-cover-banner{height:160px!important;}
    .gv-cover-banner,.pv-cover-banner-group{height:160px!important;}
    .photo-album-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important;}
    .login-btn{padding:12px!important;font-size:14px!important;}
    .pv-layout,.gv-layout{padding:0 8px 30px!important;}
    .gv-icon-wrap{width:100px;height:100px;font-size:40px;}
}

::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--light-bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#aaa;}

/* ========== LIGHTBOX ========== */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:3000;display:none;align-items:center;justify-content:center;user-select:none;}
.lightbox-overlay.show{display:flex;}
.lightbox-close{position:absolute;top:16px;right:20px;background:none;color:#fff;font-size:28px;padding:8px;cursor:pointer;opacity:.7;transition:opacity .2s;z-index:10;}
.lightbox-close:hover{opacity:1;}
/* Layout: image + comment panel side by side */
.lightbox-layout{display:flex;max-width:95vw;max-height:90vh;gap:0;border-radius:8px;overflow:hidden;position:relative;}
.lightbox-media{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-width:0;}
.lightbox-media img{max-width:100%;max-height:90vh;object-fit:contain;transition:opacity .2s;}
.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;font-size:24px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.7;transition:opacity .2s,background .2s;border:none;z-index:2;}
.lightbox-arrow:hover{opacity:1;background:rgba(255,255,255,.25);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
/* Bottom bar: counter + reactions + comment toggle */
.lightbox-bar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 20px;z-index:2;background:linear-gradient(transparent,rgba(0,0,0,.6));}
.lightbox-counter{color:rgba(255,255,255,.7);font-size:14px;}
.lightbox-reactions{display:flex;gap:8px;}
.lb-like-btn,.lb-dislike-btn{background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:20px;padding:6px 14px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background .2s;}
.lb-like-btn:hover,.lb-dislike-btn:hover{background:rgba(255,255,255,.3);}
.lb-like-btn span,.lb-dislike-btn span{font-size:12px;}
/* Comment toggle button (mobile only) */
.lightbox-comment-toggle{display:none;background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:20px;padding:6px 14px;font-size:14px;cursor:pointer;gap:5px;align-items:center;transition:background .2s;}
.lightbox-comment-toggle:hover{background:rgba(255,255,255,.3);}
.lightbox-comment-toggle span{font-size:12px;}
/* Comment panel */
.lightbox-comments{width:380px;flex-shrink:0;background:var(--card);display:flex;flex-direction:column;max-height:90vh;}
.lb-comments-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.lb-comments-header h4{font-size:15px;font-weight:600;color:var(--dark);}
.lb-comments-close{display:none;background:none;color:var(--gray);font-size:18px;cursor:pointer;padding:4px;}
.lb-comments-scroll{flex:1;overflow-y:auto;padding:12px 16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.lb-comments-input{padding:10px 12px;border-top:1px solid var(--border);flex-shrink:0;position:relative;}
.lb-comments-input .post-input{min-width:0;font-size:13px;}
.lb-comments-input .btn-primary{padding:6px 12px;font-size:12px;white-space:nowrap;flex-shrink:0;}
.lb-comments-input .emoji-picker-panel{position:absolute;bottom:100%;left:0;right:0;}
.lb-emoji-btn{background:none;border:none;color:var(--gray);font-size:16px;cursor:pointer;padding:4px 6px;transition:color .15s;flex-shrink:0;display:inline-flex!important;}
.lb-emoji-btn:hover{color:var(--primary);}
.lb-gif-btn{background:transparent;border:1.5px solid var(--border);color:var(--gray);font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;letter-spacing:.5px;transition:border-color .2s,color .2s;flex-shrink:0;cursor:pointer;display:inline-flex!important;}
.lb-gif-btn:hover{border-color:var(--primary);color:var(--primary);}
.lb-comment{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.lb-comment:last-child{border-bottom:none;}
.lb-comment-reply{padding-left:20px;}

/* ========== PROFILE VIEW LAYOUT ========== */
.pv-layout{max-width:1600px;margin:-60px auto 0;padding:0 20px 40px;position:relative;z-index:1;display:grid;grid-template-columns:260px 1fr 300px;grid-template-rows:auto 1fr;gap:24px;align-items:start;}
.pv-col-left{grid-column:1;grid-row:1/3;align-self:stretch;overflow-x:clip;}
.pv-col-left>.card{position:sticky;top:80px;}
.pv-col-photos{grid-column:2/-1;grid-row:1;}
.pv-col-feed{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:16px;min-width:0;overflow-x:clip;}
.pv-col-skin{grid-column:3;grid-row:2;position:sticky;top:80px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:clip;}
.pv-col-photos .photos-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 14px;}
.pv-col-photos .photos-preview img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:6px;cursor:pointer;transition:opacity .2s;}
.pv-col-photos .photos-preview img:hover{opacity:.8;}
.pv-col-photos .photos-preview img[draggable="true"]{cursor:grab;}
.pv-col-photos .photos-preview img[draggable="true"]:active{cursor:grabbing;}
.photos-card .search-tabs{margin-bottom:0;padding:0 14px 8px;}
.pv-album-card{background:var(--card);border:2px solid var(--border);border-radius:10px;overflow:hidden;text-align:center;cursor:pointer!important;transition:border-color .2s,transform .2s,box-shadow .2s;min-width:150px;max-width:170px;flex-shrink:0;scroll-snap-align:start;position:relative;}
.pv-album-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.pv-album-card.drag-over{border-color:var(--primary);background:rgba(139,92,246,.08);border-style:solid;transform:scale(1.03);}
.pv-album-card h5{font-size:13px;font-weight:600;margin:0 8px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pv-album-card p{font-size:11px;color:var(--gray);margin:0 8px 8px;}
.pv-album-cover{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--border);}
.pv-album-cover img{width:100%;height:100%;object-fit:cover;}
.pv-album-cover.pv-album-placeholder{display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:28px;}
/* Photo wrap with "..." menu overlay */
.photo-wrap{position:relative;display:inline-block;}
.photos-preview .photo-wrap{width:100%;}
.photo-wrap img,.photo-wrap video{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:6px;cursor:pointer;transition:opacity .2s;display:block;}
.photo-wrap:hover img,.photo-wrap:hover video{opacity:.85;}
.photo-video-badge{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.65);color:#fff;border-radius:4px;padding:2px 6px;font-size:10px;pointer-events:none;display:flex;align-items:center;gap:3px;}
.photo-menu-btn{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:26px;height:26px;font-size:12px;cursor:pointer;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center;}
.photo-wrap:hover .photo-menu-btn{opacity:1;}
.photo-menu-btn:hover{background:rgba(0,0,0,.8);}
/* Photo delete button (top-left, hidden until hover) */
.photo-delete-btn{position:absolute;top:4px;left:4px;background:rgba(220,38,38,.85);color:#fff;border:none;border-radius:50%;width:26px;height:26px;font-size:11px;cursor:pointer;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center;z-index:2;}
.photo-wrap:hover .photo-delete-btn{opacity:1;}
.photo-delete-btn:hover{background:#dc2626;}
/* Photo context menu danger item */
.photo-ctx-danger{color:#e74c3c!important;}
.photo-ctx-danger i{color:#e74c3c!important;}
/* Photo multi-select mode */
.photo-select-mode .photo-delete-btn,.photo-select-mode .photo-menu-btn{display:none!important;}
.photo-select-mode .photo-wrap{cursor:pointer;user-select:none;}
.photo-select-mode .photo-wrap::after{content:'';position:absolute;inset:0;border:3px solid transparent;border-radius:6px;pointer-events:none;transition:border-color .15s;}
.photo-select-mode .photo-wrap.selected::after{border-color:var(--primary,#8b5cf6);}
.photo-select-mode .photo-wrap.selected::before{content:'\f058';font-family:'Font Awesome 5 Free';font-weight:900;position:absolute;top:6px;left:6px;color:var(--primary,#8b5cf6);font-size:18px;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.4);}
/* Floating select action bar */
.photo-select-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--card,#fff);border:1px solid var(--border,#e0e0e0);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.18);padding:10px 18px;display:flex;align-items:center;gap:12px;z-index:9999;font-size:13px;animation:fadeIn .2s ease;}
.photo-select-bar .photo-select-count{font-weight:600;min-width:80px;}
.photo-select-bar .btn-danger{background:#e74c3c;color:#fff;border:none;padding:6px 16px;border-radius:8px;font-size:13px;cursor:pointer;}
.photo-select-bar .btn-danger:disabled{opacity:.5;cursor:not-allowed;}
.photo-select-bar .btn-danger:hover:not(:disabled){background:#c0392b;}
/* Photo context menu */
.photo-context-menu{position:absolute;z-index:9999;background:var(--card,#fff);border:1px solid var(--border,#e0e0e0);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);min-width:170px;padding:4px 0;animation:fadeIn .15s ease;}
.photo-ctx-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;background:none;border:none;font-size:13px;cursor:pointer;color:inherit;font-family:inherit;}
.photo-ctx-item:hover{background:var(--border,#f0f0f0);}
.photo-ctx-item i{width:16px;color:var(--primary);}
/* Album delete button on card */
.album-delete-btn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:10px;cursor:pointer!important;transition:background .2s;display:flex;align-items:center;justify-content:center;z-index:2;}
.album-delete-btn:hover{background:#e74c3c;}
/* Album drop zone inside modal */
.album-drop-zone{padding:40px 20px;text-align:center;color:var(--gray);border:2px dashed var(--border);border-radius:10px;transition:border-color .2s,background .2s;}
.album-drop-zone.drag-over,.photo-album-grid.drag-over{border:2px dashed var(--primary);background:rgba(139,92,246,.06);}
.pv-skin-box .card{padding:20px;}

/* ========== PREMIUM SKINS — SHOP PREVIEW ========== */
.premium-preview-frame{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:4px;box-shadow:0 0 16px rgba(139,92,246,.4);}
.premium-preview-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;}

/* ========== PREMIUM SKINS — AVATAR BORDERS ========== */
.profile-avatar-wrap{position:relative;}
.profile-avatar-wrap:has(.premium-border){overflow:visible;}
.profile-avatar.premium-border{border:none!important;position:relative;z-index:1;}
.profile-avatar-wrap:has(.premium-border)::before{content:'';position:absolute;inset:-6px;border-radius:20px;z-index:0;animation:premiumGlow 3s linear infinite;}
.nav-avatar.premium-border{border:3px solid var(--primary)!important;box-shadow:0 0 8px currentColor;}

@keyframes premiumGlow{0%,100%{filter:brightness(1);}50%{filter:brightness(1.15);}}
@keyframes premiumSpin{to{transform:rotate(360deg);}}
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 10px var(--ps-glow);}50%{box-shadow:0 0 25px var(--ps-glow),0 0 50px var(--ps-glow);}}

/* ========== PREMIUM SKINS — PER-SKIN VARIABLES ========== */
body.premium-witchcraft{--ps-bg:#1a1030;--ps-nav:linear-gradient(135deg,#2d1b69,#11001c);--ps-card:#241845;--ps-text:#e8d5f5;--ps-muted:#b39ddb;--ps-border:#3d2a6e;--ps-tag:#2d1b69;--ps-input:#150d28;--ps-hover:#2d1b69;--ps-glow:rgba(139,92,246,.4);--ps-post-border:#8b5cf6;--ps-badge-bg:#2a1050;--ps-anim:pulseGlow 3s ease infinite;
--ps-pattern:url("../images/premium-witchcraft.svg");}
body.premium-anime-blaze{--ps-bg:#1a0808;--ps-nav:linear-gradient(135deg,#8b0000,#ff0844);--ps-card:#2d1212;--ps-text:#ffd5d5;--ps-muted:#ff9999;--ps-border:#4a1a1a;--ps-tag:#3a1515;--ps-input:#1a0808;--ps-hover:#3a1515;--ps-glow:rgba(255,8,68,.4);--ps-post-border:#ff4444;--ps-badge-bg:#3a1020;--ps-anim:blazePulse 2s ease infinite;
--ps-pattern:url("../images/premium-anime-blaze.svg");}
body.premium-kawaii-cats{--ps-bg:#fff0f6;--ps-nav:linear-gradient(135deg,#e91e8c,#f472b6);--ps-card:#fff;--ps-text:#4a2040;--ps-muted:#b05080;--ps-border:#fce4ec;--ps-tag:#fce4ec;--ps-input:#fff5f8;--ps-hover:#fce4ec;--ps-glow:rgba(233,30,140,.3);--ps-post-border:#e91e8c;--ps-badge-bg:#fce4ec;--ps-anim:none;
--ps-pattern:url("../images/premium-kawaii-cats.svg");}
body.premium-geo-prism{--ps-bg:#f0f4ff;--ps-nav:linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff0000);--ps-card:#fff;--ps-text:#1e293b;--ps-muted:#6b7280;--ps-border:#e0e7ff;--ps-tag:#e0e7ff;--ps-input:#f5f7ff;--ps-hover:#e0e7ff;--ps-glow:rgba(79,70,229,.3);--ps-post-border:#4f46e5;--ps-badge-bg:#e0e7ff;--ps-anim:none;
--ps-pattern:url("../images/premium-geo-prism.svg");}
body.premium-dark-prism{--ps-bg:#0a0a14;--ps-nav:linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff0000);--ps-card:#141422;--ps-text:#d8d8f0;--ps-muted:#8080a0;--ps-border:#2a2a42;--ps-tag:#1a1a30;--ps-input:#0c0c18;--ps-hover:#2a2a42;--ps-glow:rgba(100,100,255,.4);--ps-post-border:#6366f1;--ps-badge-bg:#1a1a30;--ps-anim:none;
--ps-pattern:url("../images/premium-geo-prism.svg");}
body.premium-autumn-leaves{--ps-bg:#fef7ed;--ps-nav:linear-gradient(135deg,#b45309,#f12711);--ps-card:#fff;--ps-text:#4a2c1a;--ps-muted:#92633a;--ps-border:#fed7aa;--ps-tag:#fed7aa;--ps-input:#fffaf5;--ps-hover:#fed7aa;--ps-glow:rgba(212,84,0,.3);--ps-post-border:#d35400;--ps-badge-bg:#fed7aa;--ps-anim:none;
--ps-pattern:url("../images/premium-autumn-leaves.svg");}
body.premium-neon-wave{--ps-bg:#0a0a1a;--ps-nav:linear-gradient(135deg,#00f5a0,#7b2ff7);--ps-card:#12122a;--ps-text:#c0ffd0;--ps-muted:#80d0a0;--ps-border:#1a2a30;--ps-tag:#0d1f1a;--ps-input:#080818;--ps-hover:#1a2a25;--ps-glow:rgba(0,245,160,.35);--ps-post-border:#00f5a0;--ps-badge-bg:#0d1f1a;--ps-anim:neonFlicker 4s ease infinite;
--ps-pattern:url("../images/premium-neon-wave.svg");}
@keyframes neonWaveShift{0%{background-position:0% 0%;}50%{background-position:100% 100%;}100%{background-position:0% 0%;}}
body.premium-sakura{--ps-bg:#fff5f7;--ps-nav:linear-gradient(135deg,#e11d73,#f472b6);--ps-card:#fff;--ps-text:#4a1942;--ps-muted:#a0607a;--ps-border:#ffe4e6;--ps-tag:#ffe4e6;--ps-input:#fff8f9;--ps-hover:#ffe4e6;--ps-glow:rgba(225,29,115,.3);--ps-post-border:#e11d73;--ps-badge-bg:#ffe4e6;--ps-anim:none;
--ps-pattern:url("../images/premium-sakura.svg");}
body.premium-galaxy{--ps-bg:#0c0020;--ps-nav:linear-gradient(135deg,#1a0040,#3500d3);--ps-card:#180038;--ps-text:#d4b5ff;--ps-muted:#9d7cd4;--ps-border:#2a1060;--ps-tag:#1a0040;--ps-input:#0c0020;--ps-hover:#2a1060;--ps-glow:rgba(110,13,208,.4);--ps-post-border:#a855f7;--ps-badge-bg:#1a0040;--ps-anim:pulseGlow 4s ease infinite;
--ps-pattern:url("../images/premium-galaxy.svg");}
body.premium-ocean-tide{--ps-bg:#f0fdfa;--ps-nav:linear-gradient(135deg,#0e7490,#0077b6);--ps-card:#fff;--ps-text:#164e63;--ps-muted:#4a8fa8;--ps-border:#ccfbf1;--ps-tag:#ccfbf1;--ps-input:#f5fffe;--ps-hover:#ccfbf1;--ps-glow:rgba(8,145,178,.3);--ps-post-border:#0891b2;--ps-badge-bg:#ccfbf1;--ps-anim:none;
--ps-pattern:url("../images/premium-ocean-tide.svg");}
body.premium-molten-gold{--ps-bg:#1a1400;--ps-nav:linear-gradient(135deg,#3d3000,#bf953f);--ps-card:#2a2000;--ps-text:#ffeaa7;--ps-muted:#d4a017;--ps-border:#4a3800;--ps-tag:#2d2200;--ps-input:#141000;--ps-hover:#3d3000;--ps-glow:rgba(191,149,63,.4);--ps-post-border:#f59e0b;--ps-badge-bg:#2d2200;--ps-anim:goldShimmer 3s ease infinite;
--ps-pattern:url("../images/premium-molten-gold.svg");}
body.premium-toxic-green{--ps-bg:#050a05;--ps-nav:linear-gradient(135deg,#0a1a0a,#003300);--ps-card:#0d1a0d;--ps-text:#b0ffb0;--ps-muted:#60c060;--ps-border:#1a3a1a;--ps-tag:#0a200a;--ps-input:#050a05;--ps-hover:#1a3a1a;--ps-glow:rgba(57,255,20,.4);--ps-post-border:#39ff14;--ps-badge-bg:#0a200a;--ps-anim:toxicPulse 2s ease infinite;--ps-pattern:none;}
body.premium-vaporwave{--ps-bg:#1a0a2e;--ps-nav:linear-gradient(135deg,#2d1b69,#ff71ce);--ps-card:#241845;--ps-text:#e0d0ff;--ps-muted:#b967ff;--ps-border:#3d2a6e;--ps-tag:#2d1b69;--ps-input:#150d28;--ps-hover:#3d2a6e;--ps-glow:rgba(185,103,255,.4);--ps-post-border:#ff71ce;--ps-badge-bg:#2d1050;--ps-anim:vaporShift 4s ease infinite;--ps-pattern:none;}
body.premium-blood-moon{--ps-bg:#0d0000;--ps-nav:linear-gradient(135deg,#1a0000,#660000);--ps-card:#1a0808;--ps-text:#ffcccc;--ps-muted:#cc6666;--ps-border:#3a1010;--ps-tag:#2a0808;--ps-input:#0d0000;--ps-hover:#3a1010;--ps-glow:rgba(139,0,0,.5);--ps-post-border:#cc0000;--ps-badge-bg:#2a0808;--ps-anim:bloodPulse 3s ease infinite;--ps-pattern:none;}
body.premium-cotton-candy{--ps-bg:#fff5f8;--ps-nav:linear-gradient(135deg,#ffa6c9,#b5e8ff);--ps-card:#fff;--ps-text:#4a2040;--ps-muted:#a07090;--ps-border:#ffe0ec;--ps-tag:#fff0f5;--ps-input:#fff8fa;--ps-hover:#ffe0ec;--ps-glow:rgba(233,30,140,.25);--ps-post-border:#e91e8c;--ps-badge-bg:#fff0f5;--ps-anim:none;--ps-pattern:none;}
body.premium-matrix{--ps-bg:#000000;--ps-nav:linear-gradient(135deg,#001a00,#003300);--ps-card:#0a0a0a;--ps-text:#00ff41;--ps-muted:#008f11;--ps-border:#003300;--ps-tag:#001a00;--ps-input:#000000;--ps-hover:#002200;--ps-glow:rgba(0,255,65,.4);--ps-post-border:#00ff41;--ps-badge-bg:#001a00;--ps-anim:matrixFlicker 3s step-end infinite;--ps-pattern:none;}

/* ========== PREMIUM SKINS — SHARED THEME RULES ========== */
body[class*="premium-"]{background-color:var(--ps-bg);background-image:var(--ps-pattern);background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;color:var(--ps-text);transition:background-color .4s;}
body[class*="premium-"] .navbar{background:var(--ps-nav);background-size:200% 200%;animation:gradientShift 6s ease infinite;}
body[class*="premium-"] .nav-center,body[class*="premium-"] .nav-left,body[class*="premium-"] .nav-right{background-color:transparent;}
/* Nav styles with separate bottom positioning need explicit premium backgrounds */
body[class*="premium-"].nav-dock .nav-center,
body[class*="premium-"].nav-pill .nav-center,
body[class*="premium-"].nav-split .nav-center{background:var(--ps-nav);background-size:200% 200%;animation:gradientShift 6s ease infinite;}
body[class*="premium-"].nav-island .nav-left,body[class*="premium-"].nav-island .nav-center,body[class*="premium-"].nav-island .nav-right{background:var(--ps-nav);background-size:200% 200%;animation:gradientShift 6s ease infinite;}
body[class*="premium-"] .card,body[class*="premium-"] .group-card,body[class*="premium-"] .profile-card-item,body[class*="premium-"] .notif-item{background:var(--ps-card);color:var(--ps-text);}
body[class*="premium-"] .feed-post{border-left:3px solid var(--ps-post-border);animation:var(--ps-anim);}
body[class*="premium-"] .post-username,body[class*="premium-"] .msg-chat-header h4{color:var(--primary);}
body[class*="premium-"] .post-description p,body[class*="premium-"] .profile-about{color:var(--ps-muted);}
body[class*="premium-"] .skill-tag{background:var(--ps-tag);color:var(--ps-muted);}
body[class*="premium-"] .post-actions{border-color:var(--ps-border);}
body[class*="premium-"] .inline-comment-bubble{background:var(--ps-tag);color:var(--ps-text);}
body[class*="premium-"] .inline-comment-bubble::before{border-color:transparent var(--ps-tag) transparent transparent;}
body[class*="premium-"] .coin-rule{background:var(--ps-tag);color:var(--ps-muted);}
body[class*="premium-"] .card-heading,body[class*="premium-"] .promo-title,body[class*="premium-"] .suggestion-name,body[class*="premium-"] .group-card-body h4,body[class*="premium-"] .group-name,body[class*="premium-"] .shop-section-title,body[class*="premium-"] .profile-card-item h4,body[class*="premium-"] .msg-sidebar-header h3,body[class*="premium-"] .msg-contact-name,body[class*="premium-"] .notif-text p,body[class*="premium-"] .pv-posts-heading,body[class*="premium-"] .page-header h2{color:var(--ps-text);}
body[class*="premium-"] .promo-subtitle,body[class*="premium-"] .group-desc,body[class*="premium-"] .view-more-link,body[class*="premium-"] .group-card-body p,body[class*="premium-"] .profile-card-item p,body[class*="premium-"] .msg-contact-preview,body[class*="premium-"] .post-time,body[class*="premium-"] .notif-text span,body[class*="premium-"] .page-subtitle,body[class*="premium-"] .stat-label{color:var(--ps-muted);}
body[class*="premium-"] .action-btn,body[class*="premium-"] .search-tab,body[class*="premium-"] .page-search i,body[class*="premium-"] .msg-search i,body[class*="premium-"] .msg-chat-placeholder,body[class*="premium-"] .post-menu-btn{color:var(--ps-muted);}
body[class*="premium-"] .profile-stats,body[class*="premium-"] .pv-profile-card .profile-stats,body[class*="premium-"] .modal-profile-stats{border-color:var(--ps-border);}
body[class*="premium-"] .view-more-link:hover,body[class*="premium-"] .suggestion-item:hover,body[class*="premium-"] .group-item:hover,body[class*="premium-"] .msg-contact:hover,body[class*="premium-"] .msg-contact.active,body[class*="premium-"] .notif-item:hover{background:var(--ps-hover);}
body[class*="premium-"] .post-input-fake,body[class*="premium-"] .msg-bubble.received{background:var(--ps-tag);color:var(--ps-text);border-color:var(--ps-border);}
body[class*="premium-"] .post-dropdown,body[class*="premium-"] .user-dropdown,body[class*="premium-"] .modal-content{background:var(--ps-card);color:var(--ps-text);}
body[class*="premium-"] .post-dropdown a,body[class*="premium-"] .user-dropdown a{color:var(--ps-text);}
body[class*="premium-"] .post-dropdown a:hover,body[class*="premium-"] .user-dropdown a:hover{background:var(--ps-hover);}
body[class*="premium-"] .post-dropdown a i,body[class*="premium-"] .user-dropdown a i{color:var(--ps-muted);}
body[class*="premium-"] .messages-layout{background:var(--ps-card);}
body[class*="premium-"] .msg-sidebar{border-color:var(--ps-border);}
body[class*="premium-"] .msg-following-bar{border-color:var(--ps-border);}
body[class*="premium-"] .msg-following-header{border-color:var(--ps-border);}
body[class*="premium-"] .msg-following-header h4{color:var(--ps-text);}
body[class*="premium-"] .msg-following-item span{color:var(--ps-text);}
body[class*="premium-"] .msg-following-item:hover{background:var(--ps-input);}
body[class*="premium-"] .msg-contact{border-color:var(--ps-border);}
body[class*="premium-"] .msg-search input,body[class*="premium-"] .page-search input,body[class*="premium-"] .msg-chat-input input{background:var(--ps-input);border-color:var(--ps-border);color:var(--ps-text);}
body[class*="premium-"] .badge-red{background:var(--ps-badge-bg);color:var(--primary);}
body[class*="premium-"] .group-icon{background:var(--ps-tag);color:var(--primary);}
body[class*="premium-"] .link-preview{border-color:var(--ps-border);}
body[class*="premium-"] .link-preview:hover{background:var(--ps-hover);}
body[class*="premium-"] .link-preview-title{color:var(--ps-text);}
body[class*="premium-"] .link-preview-desc{color:var(--ps-muted);}
body[class*="premium-"] .modal-header{border-color:var(--ps-border);}
body[class*="premium-"] .cpm-textarea{background:var(--ps-card);color:var(--ps-text);}
body[class*="premium-"] .cpm-media-zone{border-color:var(--ps-border);color:var(--ps-muted);}
body[class*="premium-"] .cpm-media-zone:hover{border-color:var(--primary);background:var(--ps-hover);}
body[class*="premium-"] .cpm-footer{border-color:var(--ps-border);}
body[class*="premium-"] .cpm-tag-chip{background:var(--ps-tag);color:var(--ps-muted);}
body[class*="premium-"] .photo-album-section h3{color:var(--ps-text);}
body[class*="premium-"] .photo-album-empty{background:var(--ps-card);color:var(--ps-muted);}
body[class*="premium-"] .photos-empty{color:var(--ps-muted);}
body[class*="premium-"] .share-textarea{background:var(--ps-input);border-color:var(--ps-border);color:var(--ps-text);}
body[class*="premium-"] .share-preview{background:var(--ps-tag);border-color:var(--ps-border);}
body[class*="premium-"] .share-preview-name{color:var(--ps-text);}
body[class*="premium-"] .share-preview-time,body[class*="premium-"] .share-preview-text{color:var(--ps-muted);}
body[class*="premium-"] .pv-profile-card .profile-name{color:var(--ps-text);}
body[class*="premium-"] .pv-profile-card .profile-title{color:var(--ps-muted);}
body[class*="premium-"] .edit-profile-form label{color:var(--ps-text);}
body[class*="premium-"] .edit-profile-form input,body[class*="premium-"] .edit-profile-form textarea{background:var(--ps-input);border-color:var(--ps-border);color:var(--ps-text);}
body[class*="premium-"] .follow-list-item{border-color:var(--ps-border);}
body[class*="premium-"] .follow-list-item.fl-clickable:hover{background:var(--ps-hover);}
body[class*="premium-"] .follow-list-info h4{color:var(--ps-text);}
body[class*="premium-"] .follow-list-info p{color:var(--ps-muted);}
body[class*="premium-"] .status-emoji-btn{background:var(--ps-input);border-color:transparent;}
body[class*="premium-"] .status-emoji-btn:hover{border-color:var(--primary);}
body[class*="premium-"] .status-emoji-btn.active{border-color:var(--primary);background:var(--ps-card);}
body[class*="premium-"] .search-tab:hover{background:var(--ps-hover);color:var(--ps-text);}
body[class*="premium-"] .search-tab .tab-count{background:var(--ps-tag);color:var(--ps-muted);}
body[class*="premium-"] .profile-card{background:var(--ps-card);}
body[class*="premium-"] .profile-card .profile-name,body[class*="premium-"] .stat-count{color:var(--primary);}
body[class*="premium-"] .profile-card .profile-cover{background:var(--ps-nav)!important;background-size:200% 200%!important;animation:gradientShift 6s ease infinite;}
body[class*="premium-"] .profile-card .profile-title{color:var(--ps-muted);}
body[class*="premium-"] .profile-card .profile-stats{border-color:var(--ps-border);}
body[class*="premium-"] .profile-coins{background:var(--ps-tag);color:var(--primary);}
body[class*="premium-"] ::-webkit-scrollbar-track{background:var(--ps-bg);}
body[class*="premium-"] ::-webkit-scrollbar-thumb{background:var(--ps-border);}

/* ========== PREMIUM BG — TEXT READABILITY ========== */
/* Themed frosted glass for premium background images */
body.has-premium-bg .page-header h2,
body.has-premium-bg .page-subtitle,
body.has-premium-bg .promo-title,
body.has-premium-bg .promo-subtitle,
body.has-premium-bg .stat-count,
body.has-premium-bg .stat-label,
body.has-premium-bg .profile-name,
body.has-premium-bg .profile-title,
body.has-premium-bg .nav-coins,
body.has-premium-bg .pv-posts-heading{text-shadow:0 1px 2px rgba(0,0,0,.35);color:var(--ps-text);}
body.has-premium-bg .search-tabs{padding:4px 0;}
body.has-premium-bg .search-tab{color:var(--ps-text,#fff);background:color-mix(in srgb,var(--ps-card,#000) 80%,transparent);border-color:var(--ps-border,rgba(255,255,255,.12));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
body.has-premium-bg .search-tab.active{color:#fff;background:var(--primary);border-color:var(--primary);backdrop-filter:none;-webkit-backdrop-filter:none;}
body.has-premium-bg .search-tab:hover{color:var(--ps-text,#fff);background:color-mix(in srgb,var(--ps-card,#000) 90%,transparent);}
body.has-premium-bg .btn-outline{background:color-mix(in srgb,var(--ps-card,#000) 70%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
body.has-premium-bg .page-header{background:color-mix(in srgb,var(--ps-card,rgba(0,0,0,.3)) var(--card-opacity,90%),transparent);border-radius:12px;padding:16px 20px;margin-left:-20px;margin-right:-20px;border:1px solid var(--ps-border,transparent);}
body.has-premium-bg .suggestion-name,
body.has-premium-bg .suggestion-info p,
body.has-premium-bg .group-name,
body.has-premium-bg .group-desc,
body.has-premium-bg .group-members,
body.has-premium-bg .view-more-link,
body.has-premium-bg .card-heading,
body.has-premium-bg .shop-section-title{color:var(--ps-text);text-shadow:0 1px 2px rgba(0,0,0,.25);}
body.has-premium-bg .post-input-fake{background:color-mix(in srgb,var(--ps-card,rgba(0,0,0,.3)) var(--card-opacity,90%),transparent);border:1px solid var(--ps-border,transparent);}
body.has-premium-bg .empty-state{background:color-mix(in srgb,var(--ps-card,rgba(0,0,0,.3)) var(--card-opacity,90%),transparent);border-radius:12px;padding:30px;border:1px solid var(--ps-border,transparent);}
body.has-premium-bg .empty-state i,
body.has-premium-bg .empty-state p{color:var(--ps-text);}
/* Photo album sections */
body.has-premium-bg .photo-album-section{background:color-mix(in srgb,var(--ps-card,rgba(0,0,0,.3)) var(--card-opacity,90%),transparent);border-radius:12px;padding:20px;margin-bottom:20px;border:1px solid var(--ps-border,transparent);}
body.has-premium-bg .photo-album-section h3{color:var(--ps-text);}
body.has-premium-bg .photo-album-empty{background:var(--ps-input,rgba(0,0,0,.2));color:var(--ps-muted);}
/* Cards, panels, and content items */
body.has-premium-bg .card,
body.has-premium-bg .feed-post,
body.has-premium-bg .profile-card-item,
body.has-premium-bg .group-card,
body.has-premium-bg .notif-item,
body.has-premium-bg .saved-folder-card{background:color-mix(in srgb,var(--ps-card,rgba(0,0,0,.3)) var(--card-opacity,90%),transparent);border:1px solid var(--ps-border,transparent);}
body.has-premium-bg .profile-card-item h4,
body.has-premium-bg .profile-card-item p,
body.has-premium-bg .notif-text p,
body.has-premium-bg .notif-text span{color:var(--ps-text);}
body.has-premium-bg .page-container{color:var(--ps-text);}
body.has-premium-bg .msg-following-bar,
body.has-premium-bg .msg-sidebar,
body.has-premium-bg .msg-chat,
body.has-premium-bg .messages-layout{background:color-mix(in srgb,var(--ps-card,rgba(0,0,0,.3)) var(--card-opacity,90%),transparent);}

/* ========== PREMIUM — AVATAR BORDER PER-SKIN ========== */
body.premium-witchcraft .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#8b5cf6,#c084fc,#a855f7,#7c3aed,#8b5cf6);box-shadow:0 0 20px var(--ps-glow);}
body.premium-anime-blaze .profile-avatar-wrap::before{background:conic-gradient(from 45deg,#ff0844,#ff6b6b,#ffb199,#ff0844);box-shadow:0 0 20px var(--ps-glow);animation:premiumGlow 2s ease infinite,blazePulse 2s ease infinite;}
body.premium-kawaii-cats .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#fbc2eb,#f8a4d2,#a6c1ee,#fbc2eb);box-shadow:0 0 20px var(--ps-glow);}
body.premium-geo-prism .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff0000);box-shadow:0 0 20px var(--ps-glow);animation:premiumSpin 4s linear infinite;}
body.premium-dark-prism .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff0000);box-shadow:0 0 24px rgba(100,100,255,.5),0 0 60px rgba(100,100,255,.2);animation:premiumSpin 4s linear infinite,darkPrismGlow 3s ease infinite;}
body.premium-autumn-leaves .profile-avatar-wrap::before{background:conic-gradient(from 30deg,#f5af19,#f12711,#c0392b,#e67e22,#f5af19);box-shadow:0 0 20px var(--ps-glow);}
body.premium-neon-wave .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#00f5a0,#00d9f5,#7b2ff7,#f500e5,#00f5a0);box-shadow:0 0 20px var(--ps-glow);animation:premiumSpin 3s linear infinite;}
body.premium-sakura .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#fcb69f,#ff9a9e,#ffecd2,#f8b4b4,#fcb69f);box-shadow:0 0 20px var(--ps-glow);}
body.premium-galaxy .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#6e0dd0,#240090,#0c0032,#3500d3,#6e0dd0);box-shadow:0 0 20px var(--ps-glow);animation:premiumSpin 8s linear infinite;}
body.premium-ocean-tide .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#0077b6,#00b4d8,#90e0ef,#caf0f8,#0077b6);box-shadow:0 0 20px var(--ps-glow);}
body.premium-molten-gold .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#bf953f,#fcf6ba,#b38728,#fbf5b7,#bf953f);box-shadow:0 0 20px var(--ps-glow);animation:premiumSpin 10s linear infinite;}
body.premium-toxic-green .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#39ff14,#00ff41,#32cd32,#00ff00,#39ff14);box-shadow:0 0 20px var(--ps-glow);animation:premiumSpin 3s linear infinite;}
body.premium-vaporwave .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#ff71ce,#01cdfe,#b967ff,#05ffa1,#ff71ce);box-shadow:0 0 20px var(--ps-glow);animation:premiumSpin 5s linear infinite;}
body.premium-blood-moon .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#8b0000,#cc0000,#660000,#990000,#8b0000);box-shadow:0 0 20px var(--ps-glow);animation:premiumGlow 2s ease infinite;}
body.premium-cotton-candy .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#ffd1dc,#b5e8ff,#e8d5f5,#ffd1dc);box-shadow:0 0 20px var(--ps-glow);}
body.premium-matrix .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#00ff41,#003300,#00ff41,#001a00,#00ff41);box-shadow:0 0 20px var(--ps-glow);animation:premiumSpin 4s linear infinite;}
body.premium-pastel-aurora{--ps-bg:#f8f4ff;--ps-nav:linear-gradient(135deg,#c3aed6,#b8e6d0,#ffd8be,#f5c6e0,#c3aed6);--ps-card:#fff;--ps-text:#5a3670;--ps-muted:#9b72b0;--ps-border:#e8d5f5;--ps-tag:#f3e5f5;--ps-input:#faf5ff;--ps-hover:#f0e0f8;--ps-glow:rgba(155,114,176,.3);--ps-post-border:#c3aed6;--ps-badge-bg:#f3e5f5;--ps-anim:pastelAuroraShift 10s ease infinite;--ps-pattern:none;}
body.premium-pastel-aurora .navbar{background-size:400% 400%!important;animation:pastelAuroraShift 10s ease infinite!important;}
body.premium-pastel-aurora .profile-card .profile-cover{background-size:400% 400%!important;animation:pastelAuroraShift 10s ease infinite!important;}
body.premium-pastel-aurora .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#c3aed6,#b8e6d0,#ffd8be,#f5c6e0,#c3aed6);box-shadow:0 0 20px var(--ps-glow);animation:premiumSpin 6s linear infinite;}
@keyframes pastelAuroraShift{0%{background-position:0% 50%;}20%{background-position:50% 0%;}40%{background-position:100% 50%;}60%{background-position:50% 100%;}80%{background-position:0% 80%;}100%{background-position:0% 50%;}}
/* ========== PREMIUM: DEEP WAVE ========== */
body.premium-deep-wave{--ps-bg:#0a0a1a;--ps-nav:linear-gradient(135deg,#007a5e,#005a80,#4a1a8a,#007a5e,#003a28,#4a1a8a,#005a80,#007a5e);--ps-card:#0d0a2a;--ps-text:#00f5a0;--ps-muted:#7b2ff7;--ps-border:#1a2a30;--ps-tag:#0d1f1a;--ps-input:#080818;--ps-hover:#1a2a25;--ps-glow:rgba(0,245,160,.35);--ps-post-border:#00c088;--ps-badge-bg:#0d1f1a;--ps-anim:deepWavePulse 4s ease infinite;--ps-pattern:none;}
body.premium-deep-wave .navbar,
body.premium-deep-wave .nav-center,
body.premium-deep-wave.nav-dock .nav-center,
body.premium-deep-wave.nav-pill .nav-center,
body.premium-deep-wave.nav-split .nav-center{background:linear-gradient(135deg,#007a5e,#005a80,#4a1a8a,#007a5e,#003a28,#4a1a8a,#005a80,#007a5e)!important;background-size:400% 400%!important;animation:deepWaveFlow 8s linear infinite!important;}
body.premium-deep-wave .profile-card .profile-cover{background:linear-gradient(135deg,#007a5e,#005a80,#4a1a8a,#007a5e,#003a28,#4a1a8a)!important;background-size:400% 400%!important;animation:deepWaveFlow 8s linear infinite!important;}
body.premium-deep-wave .profile-avatar-wrap::before{background:conic-gradient(from 0deg,#00f5a0,#00d9f5,#7b2ff7,#f500e5,#00f5a0);box-shadow:0 0 24px rgba(0,245,160,.5),0 0 60px rgba(123,47,247,.2);animation:premiumSpin 4s linear infinite,deepWaveGlow 3s ease infinite;}
@keyframes deepWaveFlow{0%{background-position:0% 0%;}50%{background-position:100% 100%;}100%{background-position:0% 0%;}}
@keyframes deepWavePulse{0%,100%{opacity:1;}50%{opacity:.95;}}
@keyframes deepWaveGlow{0%,100%{box-shadow:0 0 24px rgba(0,245,160,.5),0 0 60px rgba(123,47,247,.2);}50%{box-shadow:0 0 35px rgba(0,245,160,.7),0 0 80px rgba(123,47,247,.35);}}

/* ========== PREMIUM — UNIQUE EFFECTS ========== */
@keyframes blazePulse{0%,100%{box-shadow:0 0 10px rgba(255,8,68,.2);}50%{box-shadow:0 0 25px rgba(255,8,68,.4);}}
@keyframes neonFlicker{0%,95%,100%{opacity:1;}97%{opacity:.95;}}
@keyframes goldShimmer{0%,100%{box-shadow:0 2px 8px rgba(191,149,63,.15);}50%{box-shadow:0 2px 20px rgba(191,149,63,.35);}}
@keyframes toxicPulse{0%,100%{box-shadow:0 0 8px rgba(57,255,20,.15);}50%{box-shadow:0 0 20px rgba(57,255,20,.35);}}
@keyframes vaporShift{0%{border-color:#ff71ce;}33%{border-color:#01cdfe;}66%{border-color:#b967ff;}100%{border-color:#ff71ce;}}
@keyframes bloodPulse{0%,100%{box-shadow:0 0 8px rgba(139,0,0,.2);}50%{box-shadow:0 0 25px rgba(204,0,0,.4);}}
@keyframes matrixFlicker{0%,90%,100%{opacity:1;}92%{opacity:.85;}95%{opacity:.95;}97%{opacity:.9;}}

body.premium-anime-blaze .feed-post{animation:blazePulse 2s ease infinite;}
body.premium-geo-prism .navbar{background-size:auto,400% 100%;animation:gradientShift 4s linear infinite;}
body.premium-dark-prism .navbar{background-size:auto,400% 100%;animation:gradientShift 4s linear infinite;}
body.premium-dark-prism .card{box-shadow:0 0 12px rgba(100,100,255,.08),0 2px 8px rgba(0,0,0,.3);}
body.premium-dark-prism .feed-post{border-left:2px solid rgba(100,100,255,.15);}
@keyframes darkPrismGlow{0%,100%{box-shadow:0 0 20px rgba(100,100,255,.4),0 0 50px rgba(100,100,255,.15);}50%{box-shadow:0 0 30px rgba(130,80,255,.6),0 0 70px rgba(100,100,255,.3);}}
/* Neon Wave — vibrant gradient on all navbars */
body.premium-neon-wave .navbar,
body.premium-neon-wave .nav-center,
body.premium-neon-wave.nav-dock .nav-center,
body.premium-neon-wave.nav-pill .nav-center,
body.premium-neon-wave.nav-split .nav-center,
body.premium-neon-wave.nav-horizon .navbar{background:linear-gradient(135deg,#00f5a0,#00d9f5,#7b2ff7,#00f5a0,#005f40,#7b2ff7,#00d9f5,#00f5a0)!important;background-size:400% 400%!important;animation:neonWaveShift 8s linear infinite!important;}
body.premium-neon-wave .profile-card .profile-cover{background:linear-gradient(135deg,#00f5a0,#00d9f5,#7b2ff7,#00f5a0,#005f40,#7b2ff7,#00d9f5,#00f5a0)!important;background-size:400% 400%!important;animation:neonWaveShift 8s linear infinite!important;}
body.premium-neon-wave::after{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(transparent,transparent 2px,rgba(0,245,160,.015) 2px,rgba(0,245,160,.015) 4px);pointer-events:none;z-index:9999;}
body.premium-molten-gold .card{animation:goldShimmer 3s ease infinite;}

/* ========== SKELETON LOADING STATES ========== */
@keyframes skeletonPulse{0%{opacity:.6;}50%{opacity:1;}100%{opacity:.6;}}
.skeleton{animation:skeletonPulse 1.5s ease-in-out infinite;border-radius:8px;background:var(--border,#334155);}
.skeleton-post{padding:20px;margin-bottom:12px;border-radius:12px;background:var(--card,#1e293b);}
.skeleton-avatar{width:42px;height:42px;border-radius:50%;background:var(--border);display:inline-block;}
.skeleton-line{height:14px;border-radius:6px;background:var(--border);margin-bottom:8px;}
.skeleton-line.short{width:40%;}
.skeleton-line.medium{width:70%;}
.skeleton-line.long{width:95%;}
.skeleton-image{width:100%;height:200px;border-radius:8px;background:var(--border);margin-top:12px;}
.skeleton-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}

/* ========== LIGHT MODE ========== */
body.light-mode{--primary:#7c3aed;--primary-hover:#6d28d9;--nav-bg:#f8fafc;--dark:#1e293b;--gray:#64748b;--light-bg:#f1f5f9;--card:#ffffff;--green:#22c55e;--border:#e2e8f0;--shadow:0 2px 8px rgba(0,0,0,.08);--shadow-hover:0 4px 16px rgba(0,0,0,.12);background:#f1f5f9;color:#1e293b;}
body.light-mode .navbar{background:#ffffff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.05);}
body.light-mode .nav-logo-text{color:#1e293b;}
body.light-mode .card{background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.06);}
body.light-mode .search-bar input{background:rgba(0,0,0,.05);color:#1e293b;}
body.light-mode .search-bar input::placeholder{color:#94a3b8;}
body.light-mode .login-card{background:rgba(255,255,255,.95);color:#1e293b;}
body.light-mode .nav-link{color:#64748b;}
body.light-mode .nav-link.active{color:#7c3aed;}
body.light-mode .post-input-fake{background:rgba(0,0,0,.03);border-color:#e2e8f0;color:#64748b;}
body.light-mode .user-dropdown{background:#ffffff;border:1px solid #e2e8f0;}
body.light-mode .user-dropdown a{color:#334155;}
body.light-mode .user-dropdown a:hover{background:#f1f5f9;}
body.light-mode .modal-overlay .modal{background:#ffffff;color:#1e293b;}
body.light-mode::before{background:#f8fafc;}

/* ========== INFINITE SCROLL ========== */
.feed-load-more{text-align:center;padding:20px;color:var(--gray);}
.feed-load-more i{font-size:24px;}
.feed-end-msg{text-align:center;padding:16px;color:var(--gray);font-size:13px;}

/* ========== DRAFT INDICATOR ========== */
.draft-indicator{font-size:11px;color:var(--green);padding:2px 8px;display:none;align-items:center;gap:4px;}
.draft-indicator.visible{display:flex;}

/* ========== QUOTE POST ========== */
.quote-post-embed{border:1px solid var(--border);border-radius:10px;padding:12px;margin:0 20px 14px;background:rgba(139,92,246,.03);}
.quote-post-embed .quote-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.quote-post-embed .quote-header img{width:24px;height:24px;border-radius:50%;object-fit:cover;}
.quote-post-embed .quote-header strong{font-size:12px;}
.quote-post-embed .quote-header span{font-size:11px;color:var(--gray);}
.quote-post-embed .quote-text{font-size:13px;color:var(--gray);}

/* ========== POST ANALYTICS ========== */
.analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}
.analytics-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center;}
.analytics-card .stat-value{font-size:24px;font-weight:700;color:var(--primary);}
.analytics-card .stat-label{font-size:12px;color:var(--gray);margin-top:4px;}
.analytics-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:6px;}
.analytics-bar-fill{height:100%;border-radius:3px;background:var(--primary);transition:width .5s ease;}

/* ========== RICH TEXT TOOLBAR ========== */
.rich-text-toolbar{display:flex;gap:4px;padding:4px 8px;border-bottom:1px solid var(--border);}
.rich-text-toolbar button{background:none;font-size:13px;color:var(--gray);padding:4px 8px;border-radius:4px;transition:all .2s;}
.rich-text-toolbar button:hover{background:rgba(139,92,246,.1);color:var(--primary);}
.rich-text-toolbar button.active{color:var(--primary);background:rgba(139,92,246,.15);}

/* ========== COMMENT PIN ========== */
.pinned-comment{border-left:3px solid var(--primary);background:rgba(139,92,246,.05);padding-left:12px;margin-bottom:8px;}
.pinned-comment-badge{font-size:10px;color:var(--primary);font-weight:600;display:flex;align-items:center;gap:4px;margin-bottom:2px;}

/* ========== GROUP INVITE LINK ========== */
.invite-link-box{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin:12px 0;}
.invite-link-box input{flex:1;background:none;border:none;color:var(--dark);font-size:13px;outline:none;}
.invite-link-box button{background:var(--primary);color:#fff;padding:6px 14px;border-radius:6px;font-size:12px;}

/* ========== DAILY LOGIN REWARD ========== */
@keyframes coinBounce{0%{transform:scale(0);}60%{transform:scale(1.2);}100%{transform:scale(1);}}
.login-reward-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100000;background:var(--card);border-radius:16px;padding:32px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.4);animation:signupSlideIn .3s ease;}
.login-reward-popup .coin-icon{font-size:48px;color:#ffd700;animation:coinBounce .5s ease .2s both;}
.login-reward-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:rgba(0,0,0,.5);}

/* ========== SCROLL TO TOP BUTTON ========== */
#scrollToTopBtn{position:fixed;bottom:80px;right:20px;z-index:5000;width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(10px);}
#scrollToTopBtn.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
#scrollToTopBtn:hover{background:var(--primary-hover);transform:translateY(-2px);}

/* ========== CHARACTER COUNTER ========== */
.char-counter{font-size:11px;color:var(--gray);text-align:right;padding:0 4px;transition:color .2s;}
.char-counter.warn{color:#f59e0b;}
.char-counter.over{color:#e74c3c;font-weight:600;}

/* ========== LIKE ANIMATION ========== */
@keyframes likeBurst{0%{transform:scale(1);}25%{transform:scale(1.4);}50%{transform:scale(.9);}75%{transform:scale(1.1);}100%{transform:scale(1);}}
@keyframes likeFloat{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-60px) scale(1.5);}}
.like-btn.animating i{animation:likeBurst .4s ease;}
.like-float{position:absolute;font-size:24px;pointer-events:none;z-index:100;animation:likeFloat .8s ease forwards;}
.double-tap-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:80px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));pointer-events:none;z-index:10;opacity:0;}
@keyframes doubleTapHeart{0%{opacity:1;transform:translate(-50%,-50%) scale(0);}15%{opacity:1;transform:translate(-50%,-50%) scale(1.2);}30%{transform:translate(-50%,-50%) scale(1);}80%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4);}}
.double-tap-heart.active{animation:doubleTapHeart .9s ease forwards;}

/* ========== UNSEND MESSAGE ========== */
.msg-unsend-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;background:rgba(231,76,60,.1);border-radius:8px;margin-top:4px;font-size:12px;color:#e74c3c;animation:signupSlideIn .2s ease;}
.msg-unsend-bar button{background:#e74c3c;color:#fff;padding:3px 10px;border-radius:6px;font-size:11px;}

/* ========== SHARE PROFILE ========== */
.share-profile-btn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--primary);background:none;padding:4px 0;}

/* ========== SKIP TO CONTENT (accessibility) ========== */
.skip-to-content{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:10px 20px;border-radius:0 0 8px 8px;z-index:100001;font-size:14px;font-weight:600;transition:top .2s;}
.skip-to-content:focus{top:0;}

/* ========== ALT TEXT INPUT ========== */
.alt-text-btn{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;letter-spacing:.5px;}
.alt-text-btn:hover{background:rgba(0,0,0,.8);}
.alt-text-input{width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px;margin-top:6px;background:var(--card);color:var(--dark);resize:none;height:60px;}

/* ========== LINK IN BIO ========== */
.profile-website{font-size:13px;color:var(--primary);display:flex;align-items:center;gap:4px;margin-top:4px;}
.profile-website:hover{text-decoration:underline;}

/* ========== POST EDIT HISTORY ========== */
.edit-history-badge{font-size:11px;color:var(--gray);cursor:pointer;display:inline-flex;align-items:center;gap:3px;}
.edit-history-badge:hover{color:var(--primary);}

/* ========== SEEN BY ========== */
.seen-by-row{display:flex;align-items:center;gap:4px;padding:4px 0;font-size:11px;color:var(--gray);}
.seen-by-row img{width:18px;height:18px;border-radius:50%;object-fit:cover;}

/* ========== SCHEDULE CALENDAR ========== */
.sched-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:8px;}
.sched-day{text-align:center;padding:6px 2px;font-size:11px;border-radius:4px;position:relative;}
.sched-day.has-post{background:rgba(139,92,246,.15);color:var(--primary);font-weight:600;cursor:pointer;}
.sched-day.today{border:1px solid var(--primary);}
.sched-day-dot{width:4px;height:4px;border-radius:50%;background:var(--primary);margin:2px auto 0;}

/* ========== ADMIN REPORT QUEUE ========== */
.report-queue-item{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--border);align-items:flex-start;}
.report-queue-item .report-type{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600;text-transform:uppercase;}
.report-queue-item .report-type.spam{background:rgba(245,158,11,.15);color:#f59e0b;}
.report-queue-item .report-type.harassment{background:rgba(239,68,68,.15);color:#ef4444;}
.report-queue-item .report-type.inappropriate{background:rgba(168,85,247,.15);color:#a855f7;}
.report-queue-item .report-type.other{background:rgba(100,116,139,.15);color:#64748b;}

/* ========== 2FA SETUP ========== */
.totp-setup-code{font-family:monospace;font-size:14px;letter-spacing:2px;background:var(--card);border:1px solid var(--border);padding:8px 16px;border-radius:8px;text-align:center;word-break:break-all;}

/* ========== MESSAGE REACTIONS ========== */
.msg-reactions{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px;}
.msg-reaction-badge{font-size:14px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);border-radius:12px;padding:1px 6px;cursor:pointer;transition:all .15s;}
.msg-reaction-badge:hover{background:rgba(139,92,246,.25);}
.msg-reaction-badge.mine{background:rgba(139,92,246,.25);border-color:var(--primary);}
.msg-react-btn{background:none;font-size:12px;color:rgba(255,255,255,.3);padding:2px 4px;opacity:0;transition:opacity .15s;position:absolute;bottom:-2px;right:-8px;}
.msg-bubble:hover .msg-react-btn{opacity:1;}
.msg-bubble.received:hover .msg-react-btn{color:rgba(0,0,0,.3);}

/* ========== MESSAGE REPLY/QUOTE ========== */
.msg-reply-preview{background:rgba(139,92,246,.08);border-left:3px solid var(--primary);border-radius:0 8px 8px 0;padding:6px 10px;margin-bottom:6px;font-size:12px;display:flex;align-items:center;gap:8px;}
.msg-reply-preview .reply-text{flex:1;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-reply-preview .reply-close{background:none;color:var(--gray);font-size:14px;flex-shrink:0;}
.msg-quoted{background:rgba(139,92,246,.06);border-left:2px solid var(--primary);border-radius:0 6px 6px 0;padding:4px 8px;margin-bottom:4px;font-size:11px;color:var(--gray);}
.msg-reply-btn{background:none;font-size:12px;color:rgba(255,255,255,.3);padding:2px 4px;opacity:0;transition:opacity .15s;position:absolute;bottom:-2px;left:-8px;}
.msg-bubble:hover .msg-reply-btn{opacity:1;}
.msg-bubble.received:hover .msg-reply-btn{color:rgba(0,0,0,.3);}

/* ========== TRENDING HASHTAGS ========== */
.trending-tag{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.trending-tag:hover{background:rgba(139,92,246,.05);}
.trending-tag .tag-name{font-size:15px;font-weight:600;color:var(--primary);}
.trending-tag .tag-count{font-size:12px;color:var(--gray);}
.trending-tag .tag-rank{font-size:12px;color:var(--gray);font-weight:700;min-width:24px;}

/* ========== SEARCH HISTORY ========== */
.search-history-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.search-history-item:hover{background:rgba(139,92,246,.05);}
.search-history-item i{color:var(--gray);font-size:14px;}
.search-history-item span{flex:1;font-size:14px;}
.search-history-item .remove-history{background:none;color:var(--gray);font-size:12px;}

/* ========== MUTUAL FOLLOWERS ========== */
.mutual-followers{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;color:var(--gray);}
.mutual-followers img{width:20px;height:20px;border-radius:50%;object-fit:cover;margin-left:-6px;border:2px solid var(--card);}
.mutual-followers img:first-child{margin-left:0;}

/* ========== ADD TO HOME SCREEN BANNER ========== */
.pwa-install-banner{position:fixed;bottom:70px;left:12px;right:12px;z-index:5000;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 8px 32px rgba(0,0,0,.3);display:flex;align-items:center;gap:14px;animation:signupSlideIn .3s ease;}
.pwa-install-banner .pwa-icon{width:48px;height:48px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px;color:#fff;}
.pwa-install-banner .pwa-text{flex:1;}
.pwa-install-banner .pwa-text h4{font-size:14px;color:var(--dark);margin-bottom:2px;}
.pwa-install-banner .pwa-text p{font-size:12px;color:var(--gray);line-height:1.4;}
.pwa-install-banner .pwa-actions{display:flex;gap:8px;flex-shrink:0;}
.pwa-install-banner .pwa-actions button{padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;}
.pwa-install-dismiss{background:none;color:var(--gray);}
.pwa-install-instructions{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px;}
.pwa-install-instructions .pwa-modal{background:var(--card);border-radius:16px;padding:24px;max-width:360px;width:100%;text-align:center;}
.pwa-install-instructions .pwa-modal h3{font-size:18px;color:var(--dark);margin-bottom:12px;}
.pwa-install-instructions .pwa-modal p{font-size:14px;color:var(--gray);line-height:1.6;margin-bottom:8px;}
.pwa-install-instructions .pwa-modal .step{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 0;border-bottom:1px solid var(--border);}
.pwa-install-instructions .pwa-modal .step-num{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.pwa-install-instructions .pwa-modal .step span{font-size:14px;color:var(--dark);}