/* --- General --- */
:root{
  --brand:#1877f2;
  --brand-dark:#0f63c6;
  --ink:#0a1a3f;
  --bg:#f4f6f8;
  --card:#ffffff;
  --muted:#6b7280;
  --ring:rgba(24,119,242,0.25);
  --shadow:0 10px 30px rgba(2,8,20,.08);
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(180deg,#f7f9fc 0,var(--bg) 100%);color:#111}
button{cursor:pointer;transition:.25s; border-radius:10px}
button:hover{transform:translateY(-1px)}
input,select,textarea{
  border-radius:10px;border:1px solid #e5e7eb;padding:10px 12px;margin:6px 0;width:100%;
  background:#fff; outline:none; transition:.25s;
}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--ring);border-color:var(--brand)}
h2[contenteditable], p[contenteditable]{display:inline-block;padding:2px 4px;border-radius:6px}
h2[contenteditable]:focus, p[contenteditable]:focus{outline:2px solid var(--brand);background:#eef3ff}

/* --- Layout --- */
.auth-container,.dashboard{display:none;min-height:100vh;justify-content:center;align-items:center;flex-direction:column;animation:fadeIn .5s ease}
.auth-container.active,.dashboard.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}
.tab-buttons{display:flex;margin-bottom:20px;background:var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.tab-buttons button{flex:1;padding:12px;border:none;background:transparent;color:#fff;font-weight:700}
.tab-buttons button.active{background:var(--brand)}
form{background:var(--card);padding:28px;border-radius:var(--radius);width:380px;box-shadow:var(--shadow);display:none}
form.active{display:block}
form h3{margin:0 0 8px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.helper{color:var(--muted);font-size:.85rem}

/* --- Primary Buttons --- */
.btn{background:var(--brand);color:#fff;border:none;padding:12px 16px;font-weight:700;border-radius:12px}
.btn:hover{background:var(--brand-dark)}
.btn-ghost{background:#eef2ff;color:#1d4ed8;border:1px solid #c7d2fe}
.btn-danger{background:crimson;color:#fff}
.btn-outline{background:#fff;border:1px solid #e5e7eb}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.8rem;border:1px solid #e5e7eb;background:#fff}

/* --- Dashboard --- */
.dashboard{flex-direction:column;width:100%;padding:20px}
.header-bar{width:100%;max-width:1400px;margin:0 auto 12px;display:flex;justify-content:space-between;align-items:center}
.header-bar h1{font-size:1.4rem;margin:0;color:var(--ink)}
.header-actions{display:flex;gap:10px;align-items:center}
.logout-btn{background:crimson;color:#fff;padding:10px 14px;border:none;border-radius:10px}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.quick-btn{background:#fff;border:none;padding:16px;border-radius:16px;box-shadow:var(--shadow);font-weight:700;cursor:pointer}
.quick-btn:hover{transform:translateY(-3px)}

/* Grid */
.dashboard-container{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;width:100%;max-width:1400px;margin:auto}

/* Profile Card */
.profile-container{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.cover-photo{
height:320px;
background:center/cover no-repeat;
position:relative;
overflow:hidden;
}
.edit-cover{position:absolute;bottom:12px;right:12px;padding:8px 12px;border:none;background:rgba(0,0,0,.55);color:#fff;border-radius:10px}
.profile-header{text-align:center;padding:18px;position:relative;margin-top:-70px;z-index:10}
.profile-pic-wrap{position:relative;display:inline-block}
#profile-pic{width:120px;height:120px;border-radius:50%;border:5px solid #fff;margin-top:-64px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.edit-pic{position:absolute;bottom:5px;right:5px;background:var(--brand);border:none;border-radius:50%;padding:7px;cursor:pointer;color:#fff}

/* Bio & chips */
#view-bio{background:#f8fafc;min-height:60px;padding:8px;border-radius:8px;margin-top:6px}
#categoryList{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
#categoryList span{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:#1d4ed8;padding:6px 10px;border-radius:999px;font-size:.85em;position:relative}
#categoryList span .remove-cat{position:absolute;top:-6px;right:-6px;background:red;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer}

/* Panels */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.products,.upload,.messages{background:#fff;padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px}
.upload{position:sticky;top:90px;z-index:20;}
.stats-panel{position:sticky;top:90px;}
position:sticky;
top:90px;
#productList{max-height:650px;overflow-y:auto;}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.product{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:12px;border:1px solid #eef1f5;border-radius:12px;transition:.25s;background:#fff}
.product:hover{background:#f9fbff;box-shadow:0 6px 14px rgba(2,8,20,.06)}
.product .meta{display:flex;align-items:center;gap:12px}
.product img.thumb{width:56px;height:56px;object-fit:cover;border-radius:10px}
.product .title{font-weight:700}
.product .sub{color:var(--muted);font-size:.9rem}
.product .actions{display:flex;gap:8px}
.product .seller-badge{margin-left:8px}

/* Stats */
.stats-panel{background:#fff;padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
position:sticky;
top:90px;
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.quick-btn{background:#fff;border:none;padding:16px;border-radius:16px;cursor:pointer;font-weight:700;box-shadow:var(--shadow);}
.quick-btn:hover{transform:translateY(-2px);}

.stat-card{background:linear-gradient(180deg,#f8fafc,#eef2ff);padding:16px;border-radius:14px;text-align:center;border:1px solid #e5e7eb;transition:transform .2s}
.stat-card:hover{transform:translateY(-4px)}
.stat-card h3{margin:0;font-size:1rem;color:var(--ink)}
.stat-card p{margin:6px 0 0;font-weight:800;font-size:1.2em;color:var(--brand)}

/* Trial ribbon */
.trial-banner{margin:10px 0;padding:10px 14px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;display:none}

/* Responsive */
@media(max-width:1200px){ .dashboard-container{grid-template-columns:1fr 2fr} }
@media(max-width:900px){

.cover-photo{
height:180px !important;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
border-radius:18px 18px 0 0 !important;
overflow:hidden !important;
display:block !important;
}
 .dashboard-container{grid-template-columns:1fr} .header-actions{flex-wrap:wrap} }

/* Notification */
.notification{position:fixed;top:20px;right:20px;padding:12px 18px;border-radius:10px;display:none;font-weight:700;box-shadow:var(--shadow)}
.notification.info{background:#0077cc;color:#fff}
.notification.success{background:#16a34a;color:#fff}
.notification.error{background:crimson;color:#fff}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal.active{display:flex}
.modal-card{background:#fff;border-radius:16px;max-width:920px;width:100%;box-shadow:var(--shadow);overflow:hidden}
.modal-header{padding:14px 18px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
.modal-body{padding:18px}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:800px){.plan-grid{grid-template-columns:1fr}}
.plan{border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.plan h4{margin:0 0 6px}
.plan small{color:var(--muted)}
.price{font-weight:800;font-size:1.2rem;margin:8px 0}
.perks{margin:8px 0 0;padding-left:18px}
.divider{height:1px;background:#e5e7eb;margin:14px 0}
.inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kicker{font-size:.85rem;color:var(--muted)}
.badge-xl{padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff}
/* Scrollable plans */
.plan-grid {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

.verified-badge {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  width: 18px;
  height: 18px;
}
.verified-badge svg {
  width: 100%;
  height: 100%;
}

/* Cart modal */
.cart-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.cart-modal.active { display: flex; }
.cart-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow);
}
.cart-card h3 { margin-top: 0; }
.cart-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
.cart-total { font-weight: bold; text-align: right; margin-top: 10px; }

.plan-grid { max-height: 320px; overflow-y: auto; }

.notification-item { border-bottom:1px solid #eee; padding:6px 0; }
.notification-item.info { color:#0a1a3f; }
.notification-item.success { color:green; }
.notification-item.error { color:red; }


/* Tiny icon-style badges */
.icon-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:.78rem;border:1px solid #e5e7eb;background:#fff}
.icon-badge .ic{font-size:1rem}

.profile-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}


.status-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
}

.status-fill {
  height: 100%;
  width: 0%;
  background: white;
}
#statusProgressBars {
  pointer-events: none;
}

#statusProgressBars div {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  overflow: hidden;
}

#statusProgressBars div div {
  height: 100%;
  width: 0%;
  background: white;
}
#statusProgressBars {
  pointer-events: none;
}
#statusProgressBars {
  pointer-events: none;
}

/* ===== NEXT INLINE STYLE BLOCK ===== */

:root{
--brand:#0b2a4a !important;
--brand-dark:#081d33 !important;
--accent:#ff8a00 !important;
--bg:#f4f7fb !important;
--card:#ffffff !important;
--muted:#6b7280 !important;
--shadow:0 14px 38px rgba(11,42,74,.08) !important;
--radius:18px !important;
}

/* Global */
body{
background:linear-gradient(180deg,#f8fbff 0%,#eef3f8 100%) !important;
font-family:Segoe UI,Tahoma,sans-serif !important;
color:#111 !important;
}

/* Header */
.header-bar{
background:#fff !important;
padding:18px 22px !important;
border-radius:18px !important;
box-shadow:var(--shadow) !important;
margin-bottom:18px !important;
position:sticky !important;
top:10px !important;
z-index:99 !important;
}

.header-bar h1{
font-size:26px !important;
font-weight:800 !important;
color:#0b2a4a !important;
}

/* Buttons */
.btn,.logout-btn,.btn-ghost{
border:none !important;
border-radius:14px !important;
padding:12px 16px !important;
font-weight:700 !important;
cursor:pointer !important;
transition:.25s !important;
}

.btn{
background:#ff8a00 !important;
color:#fff !important;
}

.btn:hover,.logout-btn:hover,.btn-ghost:hover{
transform:translateY(-2px) !important;
}

.btn-ghost{
background:#eef3fb !important;
color:#0b2a4a !important;
}


.logout-btn{
background:#dc2626 !important;
color:#fff !important;
}

/* Main Grid */
.dashboard-container{
gap:24px !important;
max-width:1500px !important;
}

/* Cards */
.profile-container,
.products,
.upload,
.messages,
.stats-panel,
.card{
border-radius:20px !important;
box-shadow:var(--shadow) !important;
border:none !important;
overflow:hidden !important;
}

/* Profile */
.cover-photo{
height:220px !important;
}

.profile-header{
padding:22px !important;
}

#profilePic,.profile-img{
width:130px !important;
height:130px !important;
border:5px solid #fff !important;
box-shadow:0 10px 25px rgba(0,0,0,.12) !important;
}

#view-username{
font-size:24px !important;
font-weight:800 !important;
color:#0b2a4a !important;
margin-top:10px !important;
}

/* Stats */
.stats-panel{
position:sticky;
top:90px;
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
}

.stat-card{
background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
border:1px solid #edf2f7 !important;
border-radius:18px !important;
padding:18px !important;
}

.stat-card h3{
font-size:28px !important;
font-weight:900 !important;
color:#0b2a4a !important;
}

.stat-card p{
font-size:14px !important;
color:#666 !important;
}

/* Product cards */
.product{
padding:16px !important;
border-radius:18px !important;
border:1px solid #eef2f7 !important;
margin-bottom:14px !important;
}

.product img.thumb{
width:72px !important;
height:72px !important;
border-radius:14px !important;
}

.product .title{
font-size:17px !important;
font-weight:800 !important;
color:#0b2a4a !important;
}

.product .actions button{
padding:10px 12px !important;
border-radius:12px !important;
}

/* Inputs */
input,select,textarea{
border-radius:14px !important;
padding:12px 14px !important;
border:1px solid #dbe3ec !important;
}

/* Section titles */
.section-title h3,
.products h3,
.upload h3,
.messages h3{
font-size:22px !important;
font-weight:800 !important;
color:#0b2a4a !important;
}

/* Mobile */
@media(max-width:900px){

.dashboard{
padding:12px !important;
}

.header-bar{
position:relative !important;
top:auto !important;
padding:14px !important;
}

.header-bar h1{
font-size:22px !important;
}

.dashboard-container{
grid-template-columns:1fr !important;
gap:16px !important;
}

.header-actions{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
width:100% !important;
margin-top:12px !important;
}

.header-actions button{
width:100% !important;
}

#sellerControls{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px !important;
width:100% !important;
margin-top:10px !important;
}

#sellerControls button{
width:100% !important;
padding:12px !important;
border-radius:12px !important;
}

.cover-photo{
height:140px !important;
overflow:hidden !important;
background-position:center center !important;
background-size:contain !important;
background-repeat:no-repeat !important;
background-color:#fff !important;
border-radius:18px 18px 0 0 !important;
}

.edit-cover{
right:10px !important;
bottom:10px !important;
padding:6px 10px !important;
z-index:20 !important;
}

.profile-header{
padding:12px 12px 18px !important;
}

.profile-pic-wrap{
margin-top:-55px !important;
}

.edit-pic{
right:0 !important;
bottom:0 !important;
z-index:25 !important;
}




.profile-header{
padding:16px !important;
text-align:center !important;
}

.cover-photo{
height:150px !important;
}

#profilePic,
.profile-img{
width:90px !important;
height:90px !important;
margin:-45px auto 10px !important;
display:block !important;
}

#view-username{
font-size:20px !important;
line-height:1.25 !important;
word-break:break-word !important;
}

.stats-panel{
position:static !important;
margin-top:18px !important;
}

}

/* ===== NEXT INLINE STYLE BLOCK ===== */

#openUpgradeBtn,
#openAdsBtn,
#trialBanner{
  display:none !important;
}


/* ========= NEW SELLER UI ========= */

.dashboard-container{
display:grid;
grid-template-columns:380px 1fr;
gap:24px;
align-items:start;
}

.seller-shell{
display:flex;
flex-direction:column;
gap:20px;
}

.seller-hero{
background:#fff;
border-radius:26px;
overflow:hidden;
box-shadow:0 15px 45px rgba(0,0,0,.08);
}

.hero-cover{
height:240px;
background:#dbeafe center/cover no-repeat;
position:relative;
}

.hero-cover::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.45));
}

.cover-btn{
position:absolute;
right:18px;
bottom:18px;
z-index:2;
background:#fff;
border:none;
padding:12px 18px;
border-radius:14px;
font-weight:700;
cursor:pointer;
}

.hero-card{
margin-top:-70px;
position:relative;
z-index:5;
padding:0 24px 24px;
}

.avatar-wrap{
width:150px;
height:150px;
margin:auto;
position:relative;
}

.profile-img{
width:150px;
height:150px;
border-radius:50%;
border:6px solid #fff;
object-fit:cover;
background:#eee;
}

.avatar-edit{
position:absolute;
right:5px;
bottom:5px;
width:42px;
height:42px;
border:none;
border-radius:50%;
background:#2563eb;
color:#fff;
font-size:18px;
cursor:pointer;
}

.seller-info{
text-align:center;
margin-top:18px;
}

#view-username{
font-size:30px;
font-weight:800;
margin:0;
}

#view-email{
margin-top:6px;
color:#64748b;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-top:24px;
}

.stats-grid>div{
background:#f8fafc;
border-radius:18px;
padding:16px;
text-align:center;
}

.stats-grid h2{
margin:0;
font-size:24px;
}

.stats-grid span{
font-size:13px;
color:#64748b;
}

.hero-actions{
display:flex;
gap:12px;
margin-top:20px;
}

.hero-actions button{
flex:1;
padding:14px;
border:none;
border-radius:14px;
background:#2563eb;
color:#fff;
font-weight:700;
cursor:pointer;
}

.bio-card,
.category-card{
margin-top:22px;
background:#f8fafc;
border-radius:18px;
padding:18px;
}

.bio-card h3,
.category-card h3{
margin:0 0 10px;
}

#view-bio{
min-height:90px;
outline:none;
}

#categoryList{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:14px;
}

.category-card input{
width:100%;
padding:12px;
border-radius:12px;
border:1px solid #ddd;
margin-bottom:10px;
}

.category-card button{
width:100%;
padding:12px;
border:none;
border-radius:12px;
background:#111827;
color:#fff;
cursor:pointer;
}

@media(max-width:768px){

.dashboard-container{
grid-template-columns:1fr;
}

.hero-cover{
height:180px;
}

.hero-card{
padding:0 16px 20px;
}

.avatar-wrap,
.profile-img{
width:110px;
height:110px;
}

#view-username{
font-size:22px;
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
}

.hero-actions{
flex-direction:column;
}

}


/* =========================
   STORIES
=========================*/


.story-launch{
display:flex;
justify-content:center;
margin:22px 0 14px;
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
transform:none;
width:100%;
z-index:5;
}

.story-launch-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 26px;
border:none;
border-radius:16px;
background:#ff8c00;
color:#fff;
font-size:17px;
font-weight:700;
cursor:pointer;
box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.story-launch-btn:hover{
transform:translateY(-2px);
}


.status-viewer{
position:fixed;
inset:0;
background:#000;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.status-bars{
position:absolute;
top:12px;
left:14px;
right:14px;
display:flex;
gap:6px;
z-index:30;
}

.status-bars div{
flex:1;
height:4px;
background:rgba(255,255,255,.25);
border-radius:999px;
}

.status-close{
position:absolute;
top:18px;
right:20px;
color:#fff;
font-size:32px;
cursor:pointer;
z-index:50;
}

.status-menu{
position:absolute;
top:18px;
left:20px;
z-index:50;
}

.status-menu button{
background:none;
border:none;
color:#fff;
font-size:28px;
cursor:pointer;
}

#statusDropdown{
margin-top:10px;
background:#1e293b;
border-radius:12px;
overflow:hidden;
min-width:160px;
}

#statusDropdown div{
padding:14px;
cursor:pointer;
color:#fff;
}

.status-nav{
position:absolute;
top:0;
width:40%;
height:100%;
cursor:pointer;
z-index:15;
}

.status-nav.left{
left:0;
}

.status-nav.right{
right:0;
}

#statusImage{
max-width:100%;
max-height:100%;
object-fit:contain;
}

#statusTextView{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
color:#fff;
font-size:34px;
font-weight:800;
text-align:center;
max-width:80%;
text-shadow:0 5px 25px rgba(0,0,0,.6);
}

.status-views{
position:absolute;
bottom:22px;
left:50%;
transform:translateX(-50%);
color:#fff;
font-size:14px;
}

.story-composer{
position:fixed;
inset:0;
background:#000;
z-index:999999;
overflow:hidden;
}

#statusPreview{
position:absolute;
inset:0;
background:#111 center/contain no-repeat;
}

#storyText{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
min-width:180px;
max-width:85%;
padding:10px 18px;
font-size:36px;
font-weight:800;
color:#fff;
text-align:center;
outline:none;
background:transparent;
text-shadow:0 5px 20px rgba(0,0,0,.7);
}

.story-toolbar{
position:absolute;
left:50%;
bottom:92px;
transform:translateX(-50%);
display:flex;
gap:10px;
background:rgba(20,20,20,.85);
padding:10px;
border-radius:20px;
backdrop-filter:blur(20px);
}

.story-toolbar button{
border:none;
background:#222;
color:#fff;
padding:12px 14px;
border-radius:12px;
cursor:pointer;
}


@media(max-width:768px){

.story-toolbar{
width:95%;
overflow:auto;
justify-content:flex-start;
}

#storyText{
font-size:28px;
max-width:90%;
}

.story-bottom{
padding:0 12px;
}

}


/* ===========================
   STORY COMPOSER V2
===========================*/

.story-composer{
position:fixed;
inset:0;
background:#000;
display:flex;
flex-direction:column;
z-index:999999;
}

.story-header{
position:absolute;
top:0;
left:0;
right:0;
height:72px;
padding:16px 18px;
display:flex;
align-items:center;
justify-content:space-between;
background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);
backdrop-filter:blur(12px);
z-index:20;
}

.story-title{
color:#fff;
font-size:18px;
font-weight:700;
}

.story-close{
width:42px;
height:42px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.12);
color:#fff;
font-size:22px;
cursor:pointer;
}

.story-preview{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:#111 center/contain no-repeat;
overflow:hidden;
}

#storyText{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
min-width:180px;
max-width:88%;
padding:10px 18px;
font-size:38px;
font-weight:800;
color:#fff;
text-align:center;
background:transparent;
outline:none;
border:none;
text-shadow:0 5px 30px rgba(0,0,0,.8);
}

.story-tools{
position:absolute;
left:50%;
bottom:95px;
transform:translateX(-50%);
display:flex;
gap:10px;
padding:10px;
border-radius:22px;
background:rgba(18,18,18,.82);
backdrop-filter:blur(18px);
box-shadow:0 20px 45px rgba(0,0,0,.45);
z-index:30;
overflow-x:auto;
max-width:94%;
}

.story-tool{
width:74px;
height:74px;
border:none;
border-radius:18px;
background:#1f2937;
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:24px;
cursor:pointer;
flex-shrink:0;
transition:.2s;
}

.story-tool:hover{
transform:translateY(-2px);
background:#2563eb;
}

.story-tool span{
margin-top:6px;
font-size:11px;
font-weight:700;
}

.story-actions{
position:absolute;
left:16px;
right:16px;
bottom:18px;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
z-index:35;
}

@media (max-width:768px){

.story-header{
height:64px;
padding:12px 14px;
}

.story-title{
font-size:16px;
}

#storyText{
font-size:30px;
max-width:92%;
}

.story-tools{
left:12px;
right:12px;
transform:none;
bottom:88px;
justify-content:flex-start;
}

.story-tool{
width:68px;
height:68px;
font-size:22px;
}

.story-actions{
left:12px;
right:12px;
bottom:12px;
}

}



.story-fab{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
margin:18px 0;
padding:16px;
border:none;
border-radius:16px;
background:#ff8c00;
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.story-fab:hover{
transform:translateY(-2px);
}


/* =========================
   STORIES
=========================*/

.story-launch{
margin:20px 0;
display:flex;
justify-content:center;
}

.story-launch-btn{
padding:14px 22px;
border:none;
border-radius:16px;
background:#2563eb;
color:#fff;
font-size:15px;
font-weight:700;
cursor:pointer;
box-shadow:0 10px 30px rgba(37,99,235,.25);
}

.story-launch-btn:hover{
transform:translateY(-2px);
}

.status-viewer{
position:fixed;
inset:0;
background:#000;
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.status-bars{
position:absolute;
top:12px;
left:14px;
right:14px;
display:flex;
gap:6px;
z-index:30;
}

.status-bars div{
flex:1;
height:4px;
background:rgba(255,255,255,.25);
border-radius:999px;
}

.status-close{
position:absolute;
top:18px;
right:20px;
color:#fff;
font-size:32px;
cursor:pointer;
z-index:50;
}

.status-menu{
position:absolute;
top:18px;
left:20px;
z-index:50;
}

.status-menu button{
background:none;
border:none;
color:#fff;
font-size:28px;
cursor:pointer;
}

#statusDropdown{
margin-top:10px;
background:#1e293b;
border-radius:12px;
overflow:hidden;
min-width:160px;
}

#statusDropdown div{
padding:14px;
cursor:pointer;
color:#fff;
}

.status-nav{
position:absolute;
top:0;
width:40%;
height:100%;
cursor:pointer;
z-index:15;
}

.status-nav.left{
left:0;
}

.status-nav.right{
right:0;
}

#statusImage{
max-width:100%;
max-height:100%;
object-fit:contain;
}

#statusTextView{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
color:#fff;
font-size:34px;
font-weight:800;
text-align:center;
max-width:80%;
text-shadow:0 5px 25px rgba(0,0,0,.6);
}

.status-views{
position:absolute;
bottom:22px;
left:50%;
transform:translateX(-50%);
color:#fff;
font-size:14px;
}

.story-composer{
position:fixed;
inset:0;
background:#000;
z-index:999999;
overflow:hidden;
}

#statusPreview{
position:absolute;
inset:0;
background:#111 center/contain no-repeat;
}

#storyText{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
min-width:180px;
max-width:85%;
padding:10px 18px;
font-size:36px;
font-weight:800;
color:#fff;
text-align:center;
outline:none;
background:transparent;
text-shadow:0 5px 20px rgba(0,0,0,.7);
}

.story-toolbar{
position:absolute;
left:50%;
bottom:92px;
transform:translateX(-50%);
display:flex;
gap:10px;
background:rgba(20,20,20,.85);
padding:10px;
border-radius:20px;
backdrop-filter:blur(20px);
}

.story-toolbar button{
border:none;
background:#222;
color:#fff;
padding:12px 14px;
border-radius:12px;
cursor:pointer;
}


@media(max-width:768px){

.story-toolbar{
width:95%;
overflow:auto;
justify-content:flex-start;
}

#storyText{
font-size:28px;
max-width:90%;
}

.story-bottom{
padding:0 12px;
}

}



/* STATUS BUTTON POSITION FIX */
.story-launch{
width:100%;
display:flex;
justify-content:center;
align-items:center;
margin:16px 0 24px;
position:relative;
}

.story-launch-btn{
width:90%;
max-width:320px;
height:52px;
padding:0;
border-radius:16px;
background:#2563eb;
color:white;
font-size:16px;
font-weight:700;
box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* keep it inside flow */
.hero-card .story-launch{
margin-top:20px;
margin-bottom:20px;
}



/* FINAL STORY BUTTON ALIGNMENT */
.story-launch{
display:flex;
justify-content:center;
width:100%;
margin:12px 0 18px !important;
position:relative;
z-index:2;
}

.story-launch-btn{
width:90%;
max-width:360px;
height:48px;
padding:0 !important;
border-radius:14px;
font-size:15px;
}

.hero-actions + .story-launch{
margin-top:14px !important;
margin-bottom:20px !important;
}


.story-launch{
margin:15px 0 25px;
display:flex;
justify-content:center;
position:relative;
z-index:2;
}

.story-launch-btn{
width:90%;
max-width:330px;
height:50px;
padding:0;
border:none;
border-radius:14px;
background:#ff8a00;
color:#fff;
font-size:15px;
font-weight:700;
cursor:pointer;
box-shadow:0 8px 20px rgba(0,0,0,.15);
}


.hero-cover{
position:relative;
z-index:10;
}

.cover-btn{
position:absolute;
z-index:50;
pointer-events:auto;
}

.hero-card{
position:relative;
z-index:5;
}


.hero-cover{
z-index:1;
}

.hero-card{
z-index:5;
}

.cover-btn{
z-index:20;
}

.avatar-wrap{
position:relative;
z-index:10;
}


.hero-cover::after{
pointer-events:none;
}

.cover-btn{
z-index:50;
pointer-events:auto;
}


.cover-btn{
pointer-events:auto !important;
position:absolute !important;
z-index:9999 !important;
}

.hero-cover::after{
pointer-events:none !important;
}


.hero-cover{
position:relative;
}

.cover-btn{
position:absolute;
right:18px;
bottom:18px;
z-index:99999 !important;
pointer-events:auto !important;
}

.hero-cover::after{
z-index:0;
pointer-events:none;
}


.hero-cover{
position:relative;
z-index:10;
}

.hero-card{
position:relative;
z-index:5;
}

.cover-btn{
position:absolute;
right:18px;
bottom:18px;
z-index:99999 !important;
pointer-events:auto !important;
}




/* FINAL HERO STACK FIX */

.hero-cover{
position:relative;
z-index:1;
}

.hero-cover::after{
z-index:0;
pointer-events:none;
}

.hero-card{
position:relative;
z-index:5;
pointer-events:auto;
}

.cover-btn{
position:absolute;
right:18px;
bottom:18px;
z-index:99999 !important;
pointer-events:auto !important;
}

.avatar-wrap{
position:relative;
z-index:10;
}


/* FIX COVER BUTTON CLICK */}

.cover-btn{
pointer-events:auto !important;
z-index:20 !important;
}

.hero-cover::after{
pointer-events:none !important;
}





/* CLEAN STATUS RING */
#profilePic.has-status{
    border:4px solid #00ff66 !important;
    outline:none !important;
    box-shadow:0 0 12px #00ff66 !important;
    animation:statusPulse 1.5s infinite;
}

@keyframes statusPulse{
    0%{
        box-shadow:0 0 5px #00ff66;
    }
    50%{
        box-shadow:0 0 18px #00ff66;
    }
    100%{
        box-shadow:0 0 5px #00ff66;
    }
}


#profilePic{
    position:relative;
    z-index:10;
    cursor:pointer;
}

#profileWrapper{
    position:relative;
    z-index:10;
}

.avatar-edit{
    z-index:20 !important;
}


#profileWrapper{
position:relative;
z-index:10;
}

#profilePic{
position:relative;
z-index:5;
cursor:pointer;
}

.avatar-edit{
position:absolute;
z-index:20;
}


/* FINAL PROFILE STATUS CLICK FIX */

.hero-cover{
    position:relative;
    z-index:1;
}

.hero-card{
    position:relative;
    z-index:20;
}

.avatar-wrap,
#profileWrapper{
    position:relative;
    z-index:30;
    pointer-events:auto !important;
}

#profilePic{
    position:relative;
    z-index:40;
    pointer-events:auto !important;
    cursor:pointer;
}

.avatar-edit{
    z-index:50;
    pointer-events:auto !important;
}


/* CLEAN PROFILE / STATUS LAYER */

.hero-card{
position:relative;
z-index:20;
pointer-events:auto;
}

.avatar-wrap,
#profileWrapper{
position:relative;
z-index:30;
pointer-events:auto;
}

#profilePic{
position:relative;
z-index:31;
pointer-events:auto;
cursor:pointer;
}

.avatar-edit{
position:absolute;
z-index:40;
pointer-events:auto;
}


/* FINAL PROFILE/COVER LAYER */

.hero-cover{
position:relative;
z-index:1;
}

.hero-cover::after{
pointer-events:none !important;
}

.hero-card{
position:relative;
z-index:10;
pointer-events:auto;
}

.avatar-wrap,
#profileWrapper{
position:relative;
z-index:30;
pointer-events:auto;
}

#profilePic{
position:relative;
z-index:40;
pointer-events:auto;
}

.avatar-edit{
position:absolute;
z-index:50;
pointer-events:auto;
}


/* Keep camera button above status image */

.avatar-wrap{
position:relative !important;
}

.avatar-edit{
position:absolute !important;
right:5px;
bottom:5px;
z-index:100 !important;
pointer-events:auto !important;
}

#profilePic{
z-index:40 !important;
}


/* Keep camera button above status image */

.avatar-wrap{
position:relative !important;
}

.avatar-edit{
position:absolute !important;
right:5px;
bottom:5px;
z-index:100 !important;
pointer-events:auto !important;
}

#profilePic{
z-index:40 !important;
}



/* STATUS VIEWER UPGRADE */

#statusViewer{
position:fixed !important;
inset:0;
background:#000;
z-index:999999 !important;
display:none;
flex-direction:column;
overflow:hidden;
}


.status-top{
position:absolute;
top:0;
left:0;
right:0;
z-index:20;
padding:15px;
}


.status-bars{
display:flex;
gap:5px;
}


.status-actions{
position:absolute;
right:15px;
top:25px;
display:flex;
gap:15px;
}


.status-actions button{
background:rgba(0,0,0,.5);
color:white;
border:0;
font-size:25px;
cursor:pointer;
}


#statusImage{
width:100%;
height:100%;
object-fit:contain;
}


#statusTextView{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:white;
font-size:30px;
font-weight:700;
text-align:center;
max-width:85%;
}


#statusViews{
position:absolute;
bottom:25px;
left:50%;
transform:translateX(-50%);
color:white;
}


.status-left,
.status-right{
position:absolute;
top:0;
bottom:0;
width:35%;
z-index:10;
}


.status-left{
left:0;
}


.status-right{
right:0;
}


#statusDropdown{
display:none;
position:absolute;
right:70px;
top:65px;
background:#222;
color:white;
border-radius:12px;
padding:12px;
z-index:100;
}


#statusDropdown div{
cursor:pointer;
padding:10px;
}



/* FINAL STATUS VIEWER ISOLATION */
#statusViewer.status-viewer{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;

width:100vw !important;
height:100vh !important;

background:#000 !important;

z-index:2147483647 !important;

display:none;

overflow:hidden !important;

isolation:isolate !important;
}


#statusViewer.status-viewer.active{
display:flex !important;
}


#statusViewer *{
z-index:auto;
}


#statusViewer .status-bars,
#statusViewer .status-actions{
position:absolute;
z-index:999999 !important;
}


#statusViewer img,
#statusViewer #statusTextView{
position:relative;
z-index:99999 !important;
}


body.status-open{
overflow:hidden !important;
}


/* CLEAN STORY BUTTONS */
.cancel-story,
.publish-story{
    background:#111 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.25) !important;
    border-radius:14px !important;
    padding:12px 22px !important;
    font-weight:700 !important;
    box-shadow:none !important;
}


.publish-story{
    background:#2563eb !important;
}


.cancel-story:hover,
.publish-story:hover{
    transform:translateY(-1px);
}



#statusViewer{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
background:#000 !important;
z-index:999999999 !important;
}



/* ===== PREMIUM STORY ACTION BUTTONS ===== */

.story-bottom{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding:18px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(15px);
    border-top:1px solid rgba(255,255,255,.1);
}


.story-bottom button{
    height:44px;
    padding:0 24px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.2px;
    cursor:pointer;
    transition:.25s ease;
}


/* Cancel */
.cancel-story{
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.25) !important;
}


/* Publish */
.publish-story{
    background:linear-gradient(135deg,#ff8a00,#ff5e00) !important;
    color:white !important;
    border:none !important;
    box-shadow:0 8px 25px rgba(255,138,0,.35) !important;
}


.story-bottom button:hover{
    transform:translateY(-2px);
}


.publish-story:active,
.cancel-story:active{
    transform:scale(.96);
}




/* STATUS TAP NAVIGATION */

.status-nav{
position:absolute;
top:0;
height:100%;
width:35%;
z-index:20;
cursor:pointer;
}

.status-nav.left{
left:0;
}

.status-nav.right{
right:0;
}



.status-nav{
position:absolute;
top:0;
height:100%;
width:35%;
z-index:40;
cursor:pointer;
}

.status-nav.left{
left:0;
}

.status-nav.right{
right:0;
}

#statusImage,
#statusTextView{
z-index:10;
}


/* ===== FINAL STATUS NAVIGATION (DO NOT REMOVE) ===== */

#statusViewer .status-nav{
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:auto;
right:auto;
width:35vw !important;
height:100vh !important;
display:block !important;
pointer-events:auto !important;
z-index:2147483646 !important;
background:transparent !important;
}

#statusViewer .status-nav.left{
left:0 !important;
}

#statusViewer .status-nav.right{
right:0 !important;
}



/* ===== FINAL STATUS TAP AREAS ===== */

.status-nav,
.status-left,
.status-right{
    position:absolute !important;
    top:70px !important;      /* leave header free */
    bottom:0 !important;
    width:35% !important;
    z-index:20 !important;
    pointer-events:auto !important;
}

.status-nav.left,
.status-left{
    left:0 !important;
}

.status-nav.right,
.status-right{
    right:0 !important;
}

/* Header always above tap areas */

.status-top,
.status-actions,
.status-menu-btn,
.status-close-btn,
#statusDropdown{
    position:relative !important;
    z-index:9999999 !important;
    pointer-events:auto !important;
}


/* ===== FINAL STATUS HEADER LAYOUT ===== */

.status-top{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:70px !important;
    padding:12px 16px !important;
    box-sizing:border-box !important;
    z-index:2147483646 !important;
}

#statusProgressBars{
    position:absolute !important;
    left:16px !important;
    right:16px !important;
    top:12px !important;
    display:flex !important;
    gap:6px !important;
}

.status-actions{
    position:absolute !important;
    top:26px !important;
    right:16px !important;
    display:flex !important;
    gap:10px !important;
    z-index:2147483647 !important;
}

.status-actions button{
    width:38px !important;
    height:38px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(0,0,0,.45) !important;
    backdrop-filter:blur(10px) !important;
    border:1px solid rgba(255,255,255,.15) !important;
    color:#fff !important;
    font-size:20px !important;
    padding:0 !important;
}


/* ===== PREMIUM STATUS HEADER ===== */

.status-top{
    background:linear-gradient(to bottom,
        rgba(0,0,0,.65),
        rgba(0,0,0,.18),
        transparent) !important;
}

#statusProgressBars{
    top:10px !important;
}

#statusProgressBars > div{
    height:4px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.25) !important;
    overflow:hidden;
}

#statusProgressBars > div > div{
    background:#fff !important;
    border-radius:999px;
}

.status-actions{
    top:22px !important;
}

.status-actions button{
    width:42px !important;
    height:42px !important;
    border-radius:50%;
    background:rgba(20,20,20,.45) !important;
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12);
    transition:.25s;
}

.status-actions button:hover{
    transform:scale(1.08);
    background:rgba(35,35,35,.65) !important;
}

.status-menu-btn{
    font-size:22px !important;
}

.status-close-btn{
    font-size:24px !important;
}



/* =====================================================
   FINAL PREMIUM STATUS UI
===================================================== */

#statusViewer{
background:#000 !important;
font-family:Segoe UI,sans-serif;
}

#statusViewer .status-top{
position:absolute;
top:0;
left:0;
right:0;
padding:12px 14px 0;
z-index:9999999;
display:flex;
flex-direction:column;
gap:12px;
background:linear-gradient(to bottom,
rgba(0,0,0,.65),
rgba(0,0,0,.15),
transparent);
}

/* Progress */

#statusProgressBars{
display:flex;
gap:5px;
width:100%;
}

#statusProgressBars>div{
height:5px;
border-radius:999px;
background:rgba(255,255,255,.22);
overflow:hidden;
}

#statusProgressBars>div>div{
background:#fff;
}

/* Header */

.status-actions{
display:flex;
justify-content:flex-end;
align-items:center;
gap:10px;
position:static !important;
}

/* Buttons */

.status-menu-btn,
.status-close-btn{
width:42px;
height:42px;
border-radius:50%;
border:none;
background:rgba(255,255,255,.12);
backdrop-filter:blur(14px);
color:#fff;
font-size:20px;
cursor:pointer;
transition:.18s;
}

.status-menu-btn:hover,
.status-close-btn:hover{
background:rgba(255,255,255,.22);
transform:scale(1.05);
}

/* Image */

#statusImage{
width:100%;
height:100%;
object-fit:contain;
animation:statusFade .18s ease;
}

/* Text */

#statusTextView{
font-size:30px;
font-weight:700;
line-height:1.35;
padding:24px;
animation:statusFade .18s ease;
}

/* Views */

#statusViews{
position:absolute;
left:50%;
bottom:28px;
transform:translateX(-50%);
padding:9px 16px;
border-radius:999px;
background:rgba(0,0,0,.45);
backdrop-filter:blur(16px);
color:#fff;
font-size:14px;
font-weight:600;
display:flex;
align-items:center;
gap:8px;
z-index:9999999;
}

#statusViews::before{
content:"👁";
}

/* Tap areas */

.status-nav.left,
.status-left{
left:0;
width:35%;
}

.status-nav.right,
.status-right{
right:0;
width:35%;
}

.status-nav,
.status-left,
.status-right{
position:absolute;
top:70px;
bottom:0;
z-index:99998;
background:transparent;
cursor:pointer;
}

/* Fade */

@keyframes statusFade{
from{
opacity:.15;
transform:scale(.985);
}
to{
opacity:1;
transform:scale(1);
}
}



/* ===== WhatsApp Header Layout ===== */

#statusViewer .status-top{
display:block !important;
position:absolute !important;
top:0;
left:0;
right:0;
padding:14px;
z-index:9999999;
}

.status-actions{
position:absolute !important;
top:16px !important;
left:14px !important;
right:14px !important;
display:block !important;
height:44px !important;
}

.status-menu-btn{
position:absolute !important;
left:0 !important;
top:0 !important;
}

.status-close-btn{
position:absolute !important;
right:0 !important;
top:0 !important;
}

#statusProgressBars{
margin-top:54px !important;
}



/* ===== KEEP ORIGINAL BUTTON POSITIONS ===== */

.status-actions{
    position:absolute !important;
    top:25px !important;
    right:15px !important;
    display:flex !important;
    gap:10px !important;
    z-index:9999999 !important;
}

.status-menu-btn,
.status-close-btn{
    width:38px !important;
    height:38px !important;
    border-radius:50% !important;
    border:none !important;
    background:rgba(0,0,0,.45) !important;
    backdrop-filter:blur(12px) !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:20px !important;
    cursor:pointer !important;
    transition:.2s !important;
}

.status-menu-btn:hover,
.status-close-btn:hover{
    background:rgba(0,0,0,.65) !important;
}

#statusProgressBars{
    margin-top:0 !important;
}



/* ===== GROUP STATUS ACTION BUTTONS ===== */

.status-actions{
    position:absolute !important;
    top:18px !important;
    right:18px !important;
    left:auto !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;

    z-index:2147483647 !important;
}

.status-menu-btn,
.status-close-btn{
    position:relative !important;
    inset:auto !important;

    width:38px !important;
    height:38px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:none !important;
    border-radius:50% !important;

    background:rgba(0,0,0,.45) !important;
    color:#fff !important;
    backdrop-filter:blur(12px) !important;

    cursor:pointer !important;
}



/* ===== MY STATUS HEADER ===== */

.status-header{
position:absolute;
top:26px;
left:16px;
display:flex;
align-items:center;
gap:10px;
z-index:2147483646;
pointer-events:none;
}

#statusAvatar{
width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
border:2px solid rgba(255,255,255,.9);
background:#333;
}

.status-header-info{
display:flex;
flex-direction:column;
}

#statusOwner{
color:#fff;
font-size:15px;
font-weight:700;
line-height:1.2;
}

#statusTime{
color:rgba(255,255,255,.8);
font-size:12px;
margin-top:2px;
}

/* keep bars above header */
#statusProgressBars{
margin-bottom:58px !important;
}


/* ===== MOBILE STATUS VIEWS FIX ===== */

#statusViews{
position:absolute !important;
left:50% !important;
bottom:22px !important;
transform:translateX(-50%) !important;

display:flex !important;
align-items:center !important;
justify-content:center !important;

padding:8px 14px !important;
border-radius:999px !important;

background:rgba(0,0,0,.45) !important;
backdrop-filter:blur(10px) !important;

color:#fff !important;
font-size:13px !important;
font-weight:600 !important;

z-index:2147483647 !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:none !important;
}



/* ===== FORCE STATUS VIEWS MOBILE VISIBILITY ===== */

#statusViewer #statusViews{

position:fixed !important;

left:50% !important;
bottom:35px !important;

transform:translateX(-50%) !important;

display:block !important;

width:max-content !important;

padding:8px 16px !important;

background:rgba(0,0,0,.65) !important;

border-radius:20px !important;

color:#fff !important;

font-size:14px !important;

font-weight:700 !important;

z-index:2147483647 !important;

opacity:1 !important;

visibility:visible !important;

}

@media(max-width:768px){

#statusViewer #statusViews{

bottom:45px !important;

}

}



/* ==================================================
   PRODUCT MINI SLIDER
================================================== */

#productList{

display:flex !important;

gap:14px !important;

overflow-x:auto !important;

overflow-y:hidden !important;

scroll-snap-type:x mandatory !important;

-webkit-overflow-scrolling:touch !important;

padding:10px 4px 15px !important;

max-height:none !important;

scrollbar-width:none !important;

}

#productList::-webkit-scrollbar{
display:none !important;
}


/* Product Cards */

#productList .product{

flex:0 0 280px !important;

height:120px !important;

display:flex !important;

align-items:center !important;

scroll-snap-align:start !important;

border-radius:18px !important;

padding:15px !important;

background:#fff !important;

box-shadow:0 8px 25px rgba(0,0,0,.08) !important;

}


/* Mobile */

@media(max-width:768px){

#productList .product{

flex:0 0 85% !important;

min-width:85% !important;

}

.products{

overflow:hidden !important;

}

}


/* Smooth drag feeling */

#productList{
cursor:grab;
}

#productList:active{
cursor:grabbing;
}



/* ===== PRODUCT SLIDER SIZE UPGRADE ===== */

#productList .product{

flex:0 0 330px !important;

height:145px !important;

padding:18px !important;

border-radius:20px !important;

}


#productList .product img.thumb{

width:75px !important;

height:75px !important;

border-radius:14px !important;

}


#productList .product .title{

font-size:16px !important;

}


#productList .product .sub{

font-size:14px !important;

}


@media(max-width:768px){

#productList .product{

flex:0 0 90% !important;

min-width:90% !important;

height:150px !important;

}

}