*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e9edf5;color:var(--text);font-family:var(--app-font);line-height:1.75}a{color:inherit;text-decoration:none}img,video{max-width:100%;display:block}button,input,select,textarea{font:inherit}.phone-shell{width:min(100%,430px);min-height:100vh;margin:0 auto;background:linear-gradient(180deg,var(--bg),#fff);box-shadow:0 0 80px rgba(15,23,42,.12);position:relative;overflow-x:hidden}.app-main{padding:128px 14px 18px}.site-header{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:50;width:min(100%,430px);background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(17,24,39,.06);transition:transform .28s ease,opacity .22s ease}.site-header.is-hidden{transform:translate(-50%,-104%);opacity:.05}.brand-row{height:50px;padding:8px 14px;display:flex;align-items:center}.brand{display:flex;align-items:center;gap:9px;min-width:0}.brand-logo{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:900;flex:none}.brand-logo img{width:100%;height:100%;object-fit:cover}.brand-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}.brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}.brand-text small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-stories{display:flex;gap:8px;overflow-x:auto;padding:2px 12px 6px;scrollbar-width:none}.header-stories::-webkit-scrollbar,.main-nav::-webkit-scrollbar,.filter-strip::-webkit-scrollbar{display:none}.story-bubble{border:0;background:transparent;padding:0;width:56px;flex:0 0 56px;color:var(--text);cursor:pointer}.story-ring{width:46px;height:46px;margin:auto;border-radius:50%;padding:2px;display:grid;place-items:center;background:conic-gradient(var(--accent),#f59e0b,var(--primary),var(--accent));overflow:hidden}.story-ring img,.story-ring video{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff}.story-ring span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #fff;font-weight:900}.story-bubble small{display:block;margin-top:2px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main-nav{display:flex;gap:8px;overflow-x:auto;padding:0 12px 9px}.main-nav a{display:flex;align-items:center;gap:6px;flex:0 0 auto;background:rgba(255,255,255,.78);border:1px solid rgba(17,24,39,.06);border-radius:999px;padding:8px 11px;font-size:12px;box-shadow:0 10px 26px rgba(15,23,42,.06)}.nav-icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(123,203,200,.18);font-size:12px}.messages{position:fixed;z-index:90;top:12px;left:50%;transform:translateX(-50%);width:min(92%,390px)}.message{background:#ecfeff;border:1px solid #a5f3fc;border-radius:16px;padding:10px 12px;margin-bottom:8px}.message.error{background:#fff1f2;border-color:#fecdd3}.btn{border:1px solid rgba(17,24,39,.09);background:#fff;border-radius:16px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;box-shadow:0 12px 30px rgba(15,23,42,.07)}.btn.primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 70%,var(--accent)));color:#fff;border:0}.btn.danger-bg{background:#ef4444;color:#fff;border:0}.card-soft,.form-card,.detail-page,.table-card{background:rgba(255,255,255,.9);border:1px solid rgba(17,24,39,.07);border-radius:26px;box-shadow:0 20px 60px rgba(15,23,42,.08);padding:16px}.intro-page{padding:0;overflow:hidden}.intro-media{aspect-ratio:4/3;background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;color:#fff}.intro-media img,.intro-media video{width:100%;height:100%;object-fit:cover}.media-placeholder{height:100%;min-height:180px;width:100%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:900;text-align:center;padding:20px}.intro-copy{padding:18px}.intro-copy h1{margin:8px 0 8px;font-size:28px;line-height:1.3}.intro-copy p{margin:0;color:var(--muted);font-size:14px}.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(123,203,200,.16);color:var(--primary);font-weight:800;font-size:12px}.founders-section{display:grid;gap:12px;margin-top:14px}.founder-card{display:flex;gap:12px;align-items:flex-start}.founder-photo{width:74px;height:74px;border-radius:24px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:grid;place-items:center;flex:none;overflow:hidden;font-weight:900}.founder-photo img{width:100%;height:100%;object-fit:cover}.founder-card h2{margin:0 0 2px;font-size:18px}.founder-card b{color:var(--primary);font-size:13px}.founder-card p{margin:6px 0 0;font-size:13px}.muted{color:var(--muted)}.welcome-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(2,6,23,.58);backdrop-filter:blur(12px);padding:20px}.welcome-card{width:min(92%,370px);background:#fff;border-radius:30px;padding:16px;box-shadow:0 30px 100px rgba(0,0,0,.3);text-align:center}.welcome-card img,.welcome-card video{width:100%;max-height:240px;object-fit:cover;border-radius:22px}.welcome-card h1{margin:14px 0 4px}.welcome-card p{color:var(--muted);margin:0 0 12px}.filter-strip{display:flex;gap:8px;overflow-x:auto;padding:0 2px 12px;position:sticky;top:0;z-index:3;background:linear-gradient(var(--bg),rgba(255,255,255,0));}.filter-chip{flex:0 0 auto;padding:8px 13px;border-radius:999px;background:#fff;border:1px solid rgba(17,24,39,.07);font-size:12px}.filter-chip.active{background:var(--primary);color:#fff}.reels-stack{display:grid;gap:16px}.reel-card{position:relative;border-radius:28px;overflow:hidden;background:#050816;min-height:540px;box-shadow:0 24px 60px rgba(15,23,42,.18)}.reel-card video,.reel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.reel-card:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.75))}.sound-toggle{position:absolute;z-index:2;top:14px;left:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.85);cursor:pointer}.reel-caption{position:absolute;z-index:2;bottom:16px;right:16px;left:70px;color:#fff}.reel-caption h2{margin:0;font-size:20px}.reel-caption p{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.82)}.page-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.page-head h1{margin:0}.filter-bar{display:flex;gap:8px;margin:0 0 12px}.filter-bar input,.filter-bar select,.form-control,.app-form input,.app-form select,.app-form textarea,.dash-form input,.dash-form select,.dash-form textarea{width:100%;border:1px solid rgba(17,24,39,.1);border-radius:16px;padding:10px 12px;background:#fff}.grid-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.product-card{padding:10px;display:block}.product-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px;background:#eef}.product-card h2{font-size:14px;margin:8px 0 4px}.product-card p{font-size:12px;color:var(--muted)}.detail-page{overflow:hidden}.detail-page .hero-img,.detail-page video{width:100%;border-radius:22px;max-height:360px;object-fit:cover}.detail-page h1{font-size:24px}.price{font-size:18px;color:var(--primary);font-weight:900}.spec-list{display:grid;gap:8px}.spec-list span{display:flex;justify-content:space-between;background:rgba(17,24,39,.04);border-radius:14px;padding:9px}.form-card{margin-top:14px}.app-form,.dash-form{display:grid;gap:12px}.app-form label,.dash-form label{display:grid;gap:5px}.app-form label span,.dash-form label span{font-weight:800;font-size:13px}.field-error{color:#ef4444}.floating-chat{position:fixed;z-index:40;bottom:22px;left:calc(50% - 196px);width:52px;height:52px;border-radius:22px;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 18px 40px rgba(15,23,42,.22)}.site-footer{padding:16px 14px 26px;text-align:center}.footer-socials{display:flex;justify-content:center;gap:10px}.footer-socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 10px 26px rgba(15,23,42,.08);font-weight:900}.footer-contact{margin-top:10px;display:grid;gap:4px;color:var(--muted);font-size:12px}.story-modal[hidden],[hidden]{display:none!important}.story-modal{position:fixed;inset:0;z-index:200;background:rgba(2,6,23,.95);display:grid;place-items:center;padding:18px}.story-content{width:min(100%,420px);height:min(78vh,720px);border-radius:30px;overflow:hidden;background:#111;color:#fff;display:grid;place-items:center;text-align:center}.story-content img,.story-content video{width:100%;height:100%;object-fit:cover}.story-close,.story-next{position:fixed;z-index:201;border:0;background:rgba(255,255,255,.9);border-radius:999px;padding:10px 14px;cursor:pointer}.story-close{top:18px;right:18px}.story-next{bottom:22px;left:50%;transform:translateX(-50%)}.story-progress{position:fixed;top:10px;left:20px;right:20px;height:4px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden}.story-progress span{display:block;height:100%;width:0;background:#fff}.chat-list{display:grid;gap:10px;margin:12px 0}.chat-msg{border-radius:18px;padding:10px;background:#f1f5f9}.chat-msg.admin{background:#ecfeff}.empty-state{padding:30px;text-align:center;color:var(--muted)}.dashboard-body{background:#f1f5f9;display:flex;min-height:100vh}.dash-sidebar{width:250px;background:#0f172a;color:#fff;padding:18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:8px}.dash-sidebar a{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06)}.dash-main{flex:1;padding:22px;min-width:0}.dash-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.dash-head h1{margin:0}.dash-head p{margin:4px 0 0;color:#64748b}.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}.dash-card,.dash-resource-grid a{background:#fff;border-radius:20px;padding:16px;box-shadow:0 14px 38px rgba(15,23,42,.07);border:1px solid rgba(15,23,42,.06)}.dash-card{display:flex;justify-content:space-between}.dash-card b{font-size:24px;color:var(--primary)}.dash-resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.table-card{overflow:auto;padding:0}.data-table{width:100%;border-collapse:collapse;background:#fff}.data-table th,.data-table td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:right}.danger{color:#ef4444}@media(max-width:720px){.dashboard-body{display:block}.dash-sidebar{position:static;width:auto;height:auto;flex-direction:row;overflow:auto}.dash-main{padding:14px}.grid-cards{grid-template-columns:1fr}.floating-chat{left:18px}.app-main{padding-top:126px}}@media(min-width:431px){.phone-shell{border-left:1px solid #dce3ee;border-right:1px solid #dce3ee}.site-header{border-radius:0 0 22px 22px}.app-main{padding-top:126px}}
/* v1.5 refined fixed brand header + auto-hide stories/menu + floating social footer */
.site-header{
position:fixed;
top:0;
left:50%;
transform:translateX(-50%);
z-index:60;
width:min(100%,430px);
background:rgba(255,255,255,.9);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(17,24,39,.06);
box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.site-header.is-hidden{transform:translateX(-50%);opacity:1;}
.brand-row{height:48px;padding:7px 13px;}
.brand-logo{width:32px;height:32px;border-radius:13px;}
.brand-name{font-size:14px;}
.brand-text small{font-size:9.5px;}
.header-dynamic{
overflow:hidden;
max-height:108px;
opacity:1;
transform:translateY(0);
transition:max-height .26s ease,opacity .22s ease,transform .22s ease,padding .22s ease;
}
.header-dynamic.is-hidden{
max-height:0;
opacity:0;
transform:translateY(-8px);
pointer-events:none;
}
.header-stories{gap:7px;padding:2px 10px 5px;}
.story-bubble{width:50px;flex-basis:50px;}
.story-ring{width:40px;height:40px;padding:2px;}
.story-bubble small{font-size:9px;margin-top:1px;}
.main-nav{gap:6px;padding:0 10px 7px;}
.main-nav a{padding:7px 9px;font-size:11px;box-shadow:0 8px 20px rgba(15,23,42,.05);}
.nav-icon{width:20px;height:20px;font-size:11px;}
.app-main{padding:126px 14px 112px;transition:padding-top .26s ease;}
body.ui-compact .app-main{padding-top:62px;}
.floating-chat{bottom:84px;}
.footer-dock{
position:fixed;
bottom:0;
left:50%;
transform:translateX(-50%);
z-index:55;
width:min(100%,430px);
background:rgba(255,255,255,.92);
backdrop-filter:blur(18px);
border-top:1px solid rgba(17,24,39,.07);
box-shadow:0 -14px 38px rgba(15,23,42,.12);
padding:7px 9px 6px;
transition:transform .26s ease,opacity .22s ease;
}
.footer-dock.is-hidden{transform:translate(-50%,115%);opacity:.08;}
.footer-scroll-row{
display:flex;
align-items:center;
gap:8px;
overflow-x:auto;
overscroll-behavior-x:contain;
scroll-snap-type:x proximity;
scrollbar-width:none;
padding:0 2px 3px;
}
.footer-scroll-row::-webkit-scrollbar{display:none;}
.footer-call-pill{
min-width:max-content;
min-height:42px;
border-radius:999px;
padding:0 13px;
display:inline-flex;
align-items:center;
gap:8px;
flex:0 0 auto;
background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 72%,var(--accent)));
color:#fff;
font-weight:900;
box-shadow:0 10px 24px rgba(15,23,42,.14);
scroll-snap-align:start;
}
.call-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);}
.call-numbers{font-size:12px;direction:ltr;unicode-bidi:plaintext;}
.footer-social-bubble{
width:42px;
height:42px;
border-radius:50%;
display:grid;
place-items:center;
flex:0 0 42px;
background:#fff;
border:1px solid rgba(17,24,39,.07);
box-shadow:0 10px 24px rgba(15,23,42,.08);
font-weight:900;
scroll-snap-align:start;
}
.footer-social-bubble img{width:24px;height:24px;object-fit:contain;}
.footer-address-line{
margin-top:2px;
font-size:10.5px;
line-height:1.5;
color:var(--muted);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-align:center;
}
.site-footer.compact-footer{display:none;}
@media(max-width:720px){.app-main{padding-top:126px;padding-bottom:112px;}body.ui-compact .app-main{padding-top:62px;}.floating-chat{bottom:84px;}}
@media(min-width:431px){.site-header{border-radius:0 0 18px 18px}.footer-dock{border-radius:18px 18px 0 0}.app-main{padding-top:126px;padding-bottom:112px;}body.ui-compact .app-main{padding-top:62px;}}
/* v1.7 story seen state, admin hint, product/gallery refinements */
.story-ring{background:#ef4444!important;box-shadow:0 0 0 2px rgba(239,68,68,.16);}
.story-bubble.story-seen .story-ring{background:rgba(17,24,39,.12)!important;box-shadow:none;}
.story-bubble.story-seen .story-ring img,.story-bubble.story-seen .story-ring video,.story-bubble.story-seen .story-ring span{filter:saturate(.65);}
.secret-admin-dot{position:fixed;right:calc(50% - 208px);bottom:6px;width:12px;height:12px;border-radius:50%;z-index:70;background:rgba(15,23,42,.10);opacity:.35;transition:opacity .2s ease,transform .2s ease;}
.secret-admin-dot:hover{opacity:.9;transform:scale(1.6);background:var(--primary);}
.product-gallery-strip{display:flex;gap:8px;overflow-x:auto;margin:12px 0;padding-bottom:4px;scrollbar-width:none;}
.product-gallery-strip::-webkit-scrollbar{display:none;}
.product-gallery-strip img{width:86px;height:86px;border-radius:18px;object-fit:cover;flex:0 0 86px;border:1px solid rgba(17,24,39,.08);}
.required-star{color:#ef4444;font-style:normal;margin-inline-start:4px;}
.star-notes{display:grid;gap:6px;margin:10px 0 14px;padding:10px 12px;border-radius:18px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.18);font-size:13px;color:#92400e;}
.reel-caption small{display:inline-block;margin-top:8px;color:rgba(255,255,255,.75);font-size:11px;}
@media(max-width:430px){.secret-admin-dot{right:8px;}}
/* v1.7.1 header/content spacing + visible hidden admin lock */
.app-main{padding-top:152px!important;padding-bottom:116px!important;}
body.ui-compact .app-main{padding-top:72px!important;}
.filter-strip{position:relative!important;top:auto!important;margin-top:8px!important;padding-top:6px!important;z-index:1!important;background:transparent!important;}
.page-head{margin-top:8px!important;}
.secret-admin-dot{display:none!important;}
.secret-admin-lock{
position:fixed;
right:calc(50% - 205px);
bottom:8px;
width:24px;
height:24px;
border-radius:50%;
z-index:90;
display:grid;
place-items:center;
background:rgba(255,255,255,.78);
border:1px solid rgba(15,23,42,.10);
box-shadow:0 8px 18px rgba(15,23,42,.12);
font-size:12px;
opacity:.62;
transition:opacity .2s ease,transform .2s ease,background .2s ease;
}
.secret-admin-lock:hover{opacity:1;transform:scale(1.18);background:#fff;}
@media(max-width:430px){.secret-admin-lock{right:8px;bottom:8px;}}
@media(max-width:720px){.app-main{padding-top:152px!important;padding-bottom:116px!important;}body.ui-compact .app-main{padding-top:72px!important;}}
@media(min-width:431px){.app-main{padding-top:152px!important;padding-bottom:116px!important;}body.ui-compact .app-main{padding-top:72px!important;}}
/* v1.7.2 final header spacing fix: brand stays fixed; stories/menu never cover page content */
:root{
--fixed-brand-height: 50px;
--full-top-space: 188px;
--compact-top-space: 74px;
--bottom-dock-space: 124px;
}
.site-header{
top:0!important;
z-index:80!important;
overflow:visible!important;
}
.brand-row{
height:50px!important;
padding:7px 13px!important;
}
.header-dynamic{
max-height:118px!important;
overflow:hidden!important;
transition:max-height .24s ease, opacity .2s ease, transform .22s ease!important;
}
.header-dynamic.is-hidden{
max-height:0!important;
opacity:0!important;
transform:translateY(-12px)!important;
pointer-events:none!important;
}
body.ui-compact .app-main{
padding-top:var(--compact-top-space)!important;
}
.page-head,
.filter-strip,
.filter-bar{
position:relative!important;
z-index:1!important;
}
.filter-strip{
top:auto!important;
margin-top:18px!important;
margin-bottom:14px!important;
padding:8px 2px 14px!important;
background:transparent!important;
}
.reels-stack{
padding-top:4px!important;
}
.reel-card:first-child,
.grid-cards:first-child,
.card-soft:first-child,
.detail-page:first-child{
margin-top:0!important;
}
.footer-dock{
z-index:70!important;
}
.secret-admin-lock{
right:calc(50% - 205px)!important;
bottom:92px!important;
z-index:95!important;
width:28px!important;
height:28px!important;
font-size:13px!important;
background:rgba(255,255,255,.88)!important;
opacity:.72!important;
}
.secret-admin-lock:hover{opacity:1!important;transform:scale(1.14)!important;}
.floating-chat{bottom:92px!important;z-index:72!important;}
@media(max-width:430px){
.secret-admin-lock{right:10px!important;bottom:92px!important;}
.app-main{padding-top:var(--full-top-space)!important;padding-bottom:var(--bottom-dock-space)!important;}
body.ui-compact .app-main{padding-top:var(--compact-top-space)!important;}
}
@media(min-width:431px){
.app-main{padding-top:var(--full-top-space)!important;padding-bottom:var(--bottom-dock-space)!important;}
body.ui-compact .app-main{padding-top:var(--compact-top-space)!important;}
}
/* v1.7.2 safety override after malformed legacy-safe selector */
.app-main{padding-top:var(--full-top-space)!important;padding-bottom:var(--bottom-dock-space)!important;}
body.ui-compact .app-main{padding-top:var(--compact-top-space)!important;}
@media(max-width:720px){.app-main{padding-top:var(--full-top-space)!important;padding-bottom:var(--bottom-dock-space)!important;}body.ui-compact .app-main{padding-top:var(--compact-top-space)!important;}}
@media(min-width:431px){.app-main{padding-top:var(--full-top-space)!important;padding-bottom:var(--bottom-dock-space)!important;}body.ui-compact .app-main{padding-top:var(--compact-top-space)!important;}}
/* v1.7.3 desktop menu visibility + horizontal scroll fix */
.nav-scroll-wrap{
position:relative!important;
display:flex!important;
align-items:center!important;
gap:4px!important;
padding:0 7px 8px!important;
max-width:100%!important;
overflow:hidden!important;
}
.nav-scroll-wrap .main-nav{
flex:1 1 auto!important;
min-width:0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
display:flex!important;
flex-wrap:nowrap!important;
gap:7px!important;
padding:0 4px 5px!important;
scroll-behavior:smooth!important;
overscroll-behavior-x:contain!important;
scrollbar-width:thin!important;
scrollbar-color:rgba(15,23,42,.22) transparent!important;
}
.nav-scroll-wrap .main-nav::-webkit-scrollbar{display:block!important;height:4px!important;}
.nav-scroll-wrap .main-nav::-webkit-scrollbar-thumb{background:rgba(15,23,42,.22)!important;border-radius:999px!important;}
.nav-scroll-wrap .main-nav a{
flex:0 0 auto!important;
white-space:nowrap!important;
}
.nav-scroll-btn{
flex:0 0 24px!important;
width:24px!important;
height:24px!important;
border-radius:50%!important;
border:1px solid rgba(17,24,39,.08)!important;
background:rgba(255,255,255,.86)!important;
box-shadow:0 8px 20px rgba(15,23,42,.08)!important;
display:grid!important;
place-items:center!important;
cursor:pointer!important;
color:var(--text)!important;
font-size:18px!important;
line-height:1!important;
padding:0!important;
z-index:3!important;
}
.nav-scroll-btn:hover{background:#fff!important;transform:scale(1.05)!important;}
@media(max-width:430px){
.nav-scroll-btn{display:none!important;}
.nav-scroll-wrap{padding-inline:10px!important;}
.nav-scroll-wrap .main-nav{padding-inline:0!important;scrollbar-width:none!important;}
.nav-scroll-wrap .main-nav::-webkit-scrollbar{display:none!important;}
}
/* v1.7.4 FINAL FIX - fixed brand, scrollable desktop menu, visible hidden admin lock */
:root{
--full-top-space: 176px;
--compact-top-space: 68px;
--bottom-dock-space: 124px;
}
.site-header{
position: fixed !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: min(100%, 430px) !important;
z-index: 9990 !important;
overflow: visible !important;
}
.site-header.is-hidden{
transform: translateX(-50%) !important;
opacity: 1 !important;
}
.brand-row{height:50px!important;min-height:50px!important;}
.header-dynamic{
display:block!important;
max-height:124px!important;
overflow:hidden!important;
opacity:1!important;
transform:translateY(0)!important;
transition:max-height .24s ease, opacity .2s ease, transform .2s ease!important;
}
.header-dynamic.is-hidden{
max-height:0!important;
opacity:0!important;
transform:translateY(-10px)!important;
pointer-events:none!important;
}
.app-main{
padding-top: var(--full-top-space) !important;
padding-bottom: var(--bottom-dock-space) !important;
}
body.ui-compact .app-main{padding-top:var(--compact-top-space)!important;}
.page-head,.filter-strip,.filter-bar{position:relative!important;z-index:1!important;}
.filter-strip{
position:relative!important;
top:auto!important;
margin-top:10px!important;
margin-bottom:14px!important;
padding-top:6px!important;
background:transparent!important;
}
.nav-scroll-wrap{
width:100%!important;
max-width:100%!important;
display:flex!important;
align-items:center!important;
gap:5px!important;
padding:0 8px 9px!important;
overflow:hidden!important;
direction:ltr!important;
}
.nav-scroll-wrap .main-nav,
.main-nav[data-horizontal-scroll]{
direction:rtl!important;
flex:1 1 auto!important;
min-width:0!important;
width:100%!important;
display:flex!important;
flex-wrap:nowrap!important;
gap:8px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
white-space:nowrap!important;
scroll-behavior:smooth!important;
scrollbar-width:thin!important;
scrollbar-color:rgba(15,23,42,.35) transparent!important;
padding:0 4px 7px!important;
}
.nav-scroll-wrap .main-nav::-webkit-scrollbar,
.main-nav[data-horizontal-scroll]::-webkit-scrollbar{display:block!important;height:6px!important;}
.nav-scroll-wrap .main-nav::-webkit-scrollbar-thumb,
.main-nav[data-horizontal-scroll]::-webkit-scrollbar-thumb{background:rgba(15,23,42,.35)!important;border-radius:999px!important;}
.nav-scroll-wrap .main-nav a,
.main-nav[data-horizontal-scroll] a{flex:0 0 auto!important;white-space:nowrap!important;}
.nav-scroll-btn{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 26px!important;
width:26px!important;
height:26px!important;
border-radius:50%!important;
border:1px solid rgba(17,24,39,.12)!important;
background:rgba(255,255,255,.92)!important;
color:var(--primary)!important;
font-size:18px!important;
line-height:1!important;
cursor:pointer!important;
box-shadow:0 8px 18px rgba(15,23,42,.10)!important;
z-index:2!important;
}
.nav-scroll-btn:hover{background:#fff!important;transform:scale(1.05)!important;}
.header-stories,.filter-strip,.footer-scroll-row{overflow-x:auto!important;overflow-y:hidden!important;scroll-behavior:smooth!important;}
.story-bubble{flex:0 0 56px!important;}
.story-bubble.story-seen .story-ring{background:#d1d5db!important;}
.story-bubble:not(.story-seen) .story-ring{background:conic-gradient(#ef4444,#f97316,#ef4444)!important;}
.secret-admin-lock,.admin-lock{
position:fixed!important;
right:max(10px,calc(50% - 205px))!important;
bottom:92px!important;
width:30px!important;
height:30px!important;
border-radius:999px!important;
z-index:99999!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:rgba(0,0,0,.42)!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.34)!important;
box-shadow:0 12px 28px rgba(15,23,42,.22)!important;
font-size:14px!important;
text-decoration:none!important;
opacity:.68!important;
backdrop-filter:blur(8px)!important;
}
.secret-admin-lock:hover,.admin-lock:hover{opacity:1!important;transform:scale(1.12)!important;background:var(--primary)!important;}
.floating-chat{bottom:92px!important;z-index:9998!important;}
@media(max-width:430px){
:root{--full-top-space:170px;--compact-top-space:68px;--bottom-dock-space:124px;}
.nav-scroll-btn{display:none!important;}
.nav-scroll-wrap{padding-inline:10px!important;}
.secret-admin-lock,.admin-lock{right:10px!important;bottom:92px!important;}
}
/* v1.8 - admin lock attached to footer, smaller; welcome contact form; dashboard analytics */
.secret-admin-lock,
.admin-lock{
position:fixed!important;
left:50%!important;
right:auto!important;
transform:translateX(-50%)!important;
bottom:74px!important;
width:22px!important;
height:22px!important;
border-radius:999px!important;
z-index:9999!important;
display:grid!important;
place-items:center!important;
background:rgba(255,255,255,.86)!important;
border:1px solid rgba(15,23,42,.10)!important;
box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
color:var(--text)!important;
font-size:10px!important;
line-height:1!important;
opacity:.72!important;
transition:bottom .25s ease, opacity .2s ease, transform .2s ease!important;
}
.secret-admin-lock:hover,
.admin-lock:hover{opacity:1!important;transform:translateX(-50%) scale(1.08)!important;background:#fff!important;}
body.ui-compact .secret-admin-lock,
body.ui-compact .admin-lock{bottom:12px!important;opacity:.35!important;}
body.ui-compact .secret-admin-lock:hover,
body.ui-compact .admin-lock:hover{opacity:1!important;}
.welcome-contact-form{display:grid;gap:10px;margin-top:12px;}
.welcome-contact-form input{width:100%;border:1px solid rgba(17,24,39,.10);border-radius:16px;padding:11px 12px;background:#f8fafc;text-align:right;}
.analytics-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px;}
.analytics-card{background:linear-gradient(135deg,#fff,rgba(123,203,200,.12));border:1px solid rgba(15,23,42,.06);border-radius:20px;padding:14px;box-shadow:0 14px 34px rgba(15,23,42,.06);}
.analytics-card span{display:block;color:#64748b;font-size:12px;}
.analytics-card b{display:block;margin-top:4px;font-size:23px;color:var(--primary);}
@media(max-width:430px){.secret-admin-lock,.admin-lock{left:50%!important;right:auto!important;bottom:74px!important;width:21px!important;height:21px!important;font-size:9px!important;}body.ui-compact .secret-admin-lock,body.ui-compact .admin-lock{bottom:12px!important;}}
/* v1.9 FINAL - bottom-right subtle admin lock, minimal gate, history and contact gate refinements */
.secret-admin-lock,
.admin-lock{
position:fixed!important;
left:auto!important;
right:max(6px,calc(50% - 210px))!important;
bottom:73px!important;
width:18px!important;
height:18px!important;
border-radius:999px!important;
z-index:9999!important;
display:grid!important;
place-items:center!important;
background:rgba(15,23,42,.18)!important;
border:1px solid rgba(255,255,255,.28)!important;
box-shadow:0 5px 12px rgba(15,23,42,.08)!important;
color:rgba(255,255,255,.82)!important;
font-size:8px!important;
line-height:1!important;
opacity:.28!important;
transform:none!important;
transition:bottom .26s ease, opacity .2s ease, transform .2s ease, background .2s ease!important;
backdrop-filter:blur(6px)!important;
}
.secret-admin-lock:hover,
.admin-lock:hover{opacity:.75!important;transform:scale(1.08)!important;background:rgba(15,23,42,.36)!important;color:#fff!important;}
body.ui-compact .secret-admin-lock,
body.ui-compact .admin-lock{bottom:8px!important;opacity:.18!important;}
body.ui-compact .secret-admin-lock:hover,
body.ui-compact .admin-lock:hover{opacity:.7!important;}
@media(max-width:430px){.secret-admin-lock,.admin-lock{right:7px!important;bottom:73px!important;width:18px!important;height:18px!important;font-size:8px!important;}body.ui-compact .secret-admin-lock,body.ui-compact .admin-lock{bottom:8px!important;}}
.secret-gate-body{min-height:100vh;margin:0;display:grid;place-items:center;background:#050816;font-family:var(--app-font, Tahoma, Arial, sans-serif);}
.secret-gate-form{width:min(78vw,260px);}
.secret-gate-input{width:100%;border:0;outline:0;border-radius:18px;padding:13px 14px;text-align:center;background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);box-shadow:0 18px 50px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.12);}
.secret-gate-input:focus{background:rgba(255,255,255,.13);box-shadow:0 18px 50px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.32);}
.history-section{margin-top:14px;}
.history-section h2{margin:0 0 8px;font-size:21px;color:var(--primary);}
.history-section p{margin:0;color:var(--muted);font-size:14px;}
.welcome-contact-form + .btn{margin-top:10px;width:100%;}
.welcome-contact-form button{width:100%;}
/* SEO v2.0 */
.seo-pages-strip h2,
.related-seo-links h2 { margin: 0 0 12px; font-size: 1rem; }
.keyword-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.keyword-cloud span,
.keyword-cloud a { padding:8px 10px; border-radius:999px; background: color-mix(in srgb, var(--primary) 8%, #fff); color: var(--primary); text-decoration:none; font-size:.82rem; border:1px solid rgba(0,0,0,.06); }
.lead-text { font-size:1rem; color:var(--text); line-height:2; }
.seo-body { line-height:2.1; color:var(--text); }
.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.quick-grid a { display:flex; justify-content:center; align-items:center; min-height:44px; border-radius:16px; text-decoration:none; background:var(--surface); border:1px solid rgba(0,0,0,.07); color:var(--primary); font-weight:700; }
/* v2.4.0 - active main menu item */
.main-nav a.is-active,
.main-nav a[aria-current="page"]{
background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 68%,var(--accent)))!important;
color:#fff!important;
border-color:rgba(255,255,255,.18)!important;
box-shadow:0 14px 34px rgba(33,43,96,.28)!important;
font-weight:800!important;
}
.main-nav a.is-active .nav-icon,
.main-nav a[aria-current="page"] .nav-icon{
background:rgba(255,255,255,.22)!important;
color:#fff!important;
}
.main-nav a.is-active::after,
.main-nav a[aria-current="page"]::after{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:var(--accent);
box-shadow:0 0 0 4px rgba(255,255,255,.18);
margin-inline-start:2px;
}
/* v2.4.2 - strong active/connected menu state */
header nav a.is-active,
header .main-nav a.is-active,
.main-nav a.is-active,
nav a.is-active,
header nav a[aria-current="page"],
header .main-nav a[aria-current="page"],
.main-nav a[aria-current="page"],
nav a[aria-current="page"]{
position:relative!important;
background:linear-gradient(135deg,#212b60,#34408f)!important;
color:#fff!important;
border-color:rgba(255,255,255,.28)!important;
box-shadow:0 14px 34px rgba(33,43,96,.30)!important;
font-weight:900!important;
transform:translateY(-1px);
}
header nav a.is-active span,
header .main-nav a.is-active span,
.main-nav a.is-active span,
nav a.is-active span,
header nav a[aria-current="page"] span,
header .main-nav a[aria-current="page"] span,
.main-nav a[aria-current="page"] span,
nav a[aria-current="page"] span{
color:#fff!important;
}
header nav a.is-active .nav-icon,
header .main-nav a.is-active .nav-icon,
.main-nav a.is-active .nav-icon,
nav a.is-active .nav-icon,
header nav a[aria-current="page"] .nav-icon,
header .main-nav a[aria-current="page"] .nav-icon,
.main-nav a[aria-current="page"] .nav-icon,
nav a[aria-current="page"] .nav-icon{
background:rgba(255,255,255,.22)!important;
color:#fff!important;
}
header nav a.is-active::before,
header .main-nav a.is-active::before,
.main-nav a.is-active::before,
nav a.is-active::before,
header nav a[aria-current="page"]::before,
header .main-nav a[aria-current="page"]::before,
.main-nav a[aria-current="page"]::before,
nav a[aria-current="page"]::before{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:-9px!important;
width:44px!important;
height:3px!important;
border-radius:999px!important;
transform:translateX(-50%)!important;
background:#7bcbc8!important;
box-shadow:0 6px 16px rgba(123,203,200,.45)!important;
}
header nav a.is-active::after,
header .main-nav a.is-active::after,
.main-nav a.is-active::after,
nav a.is-active::after,
header nav a[aria-current="page"]::after,
header .main-nav a[aria-current="page"]::after,
.main-nav a[aria-current="page"]::after,
nav a[aria-current="page"]::after{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:-18px!important;
width:8px!important;
height:8px!important;
border-radius:50%!important;
transform:translateX(-50%)!important;
background:#7bcbc8!important;
border:2px solid #fff!important;
box-shadow:0 4px 12px rgba(33,43,96,.25)!important;
}
header nav,
header .main-nav,
.main-nav{
scroll-behavior:smooth;
}
/* v2.4.3 - story playback clean mode */
body.story-open{
overflow:hidden!important;
}
body.story-open .site-header,
body.story-open .footer-dock,
body.story-open .floating-chat,
body.story-open .secret-admin-lock,
body.story-open .admin-lock,
body.story-open .messages{
display:none!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
body.story-open .app-main{
padding-top:0!important;
padding-bottom:0!important;
}
.story-modal{
z-index:99999!important;
background:rgba(2,6,23,.98)!important;
}
.story-modal:not([hidden]){
display:grid!important;
}
.story-content{
width:min(100%,430px)!important;
height:100dvh!important;
max-height:100dvh!important;
border-radius:0!important;
background:#000!important;
}
.story-content img,
.story-content video{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
.story-close{
top:14px!important;
right:calc(50% - 200px)!important;
z-index:100001!important;
}
.story-progress{
top:8px!important;
left:calc(50% - 200px)!important;
right:calc(50% - 200px)!important;
z-index:100001!important;
}
.story-next{
bottom:22px!important;
z-index:100001!important;
}
@media(max-width:430px){
.story-close{right:14px!important;}
.story-progress{left:14px!important;right:14px!important;}
}
/* v2.4.4 - polished story bubble ring */
.header-stories{
align-items:flex-start!important;
gap:10px!important;
padding:4px 12px 8px!important;
}
.story-bubble{
width:64px!important;
flex:0 0 64px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
border:0!important;
background:transparent!important;
padding:0!important;
}
.story-ring{
width:54px!important;
height:54px!important;
min-width:54px!important;
min-height:54px!important;
aspect-ratio:1/1!important;
border-radius:999px!important;
padding:3px!important;
display:grid!important;
place-items:center!important;
overflow:visible!important;
background:conic-gradient(from 160deg,#ef4444,#f97316,#facc15,#ef4444)!important;
box-shadow:0 8px 22px rgba(239,68,68,.22),0 0 0 3px rgba(239,68,68,.08)!important;
}
.story-bubble.story-seen .story-ring{
background:linear-gradient(135deg,#cbd5e1,#e5e7eb)!important;
box-shadow:0 8px 20px rgba(15,23,42,.08),0 0 0 3px rgba(148,163,184,.14)!important;
}
.story-ring img,
.story-ring video,
.story-ring > span{
width:100%!important;
height:100%!important;
aspect-ratio:1/1!important;
border-radius:999px!important;
object-fit:cover!important;
border:3px solid #fff!important;
background:#fff!important;
overflow:hidden!important;
box-shadow:0 4px 12px rgba(15,23,42,.14)!important;
}
.story-bubble small{
width:64px!important;
max-width:64px!important;
margin-top:5px!important;
font-size:10px!important;
line-height:1.35!important;
text-align:center!important;
color:var(--text)!important;
}
/* v2.4.4 - story playback: no page chrome */
body.story-open{
overflow:hidden!important;
}
body.story-open .site-header,
body.story-open .footer-dock,
body.story-open .floating-chat,
body.story-open .secret-admin-lock,
body.story-open .admin-lock,
body.story-open .messages{
display:none!important;
}
.story-modal{
z-index:99999!important;
background:rgba(2,6,23,.98)!important;
}
.story-modal:not([hidden]){
display:grid!important;
}
.story-content{
width:min(100%,430px)!important;
height:100dvh!important;
max-height:100dvh!important;
border-radius:0!important;
overflow:hidden!important;
background:#000!important;
touch-action:none!important;
user-select:none!important;
}
.story-content img,
.story-content video{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
.story-content video{
pointer-events:none!important;
}
.story-next{
display:none!important;
}
.story-close{
top:14px!important;
right:calc(50% - 200px)!important;
z-index:100001!important;
}
.story-progress{
top:8px!important;
left:calc(50% - 200px)!important;
right:calc(50% - 200px)!important;
z-index:100001!important;
}
@media(max-width:430px){
.story-close{right:14px!important;}
.story-progress{left:14px!important;right:14px!important;}
}
/* v2.4.4 - welcome page: keep only fixed logo/company header */
body.welcome-active{
overflow:hidden!important;
}
body.welcome-active .site-header{
z-index:120!important;
background:rgba(255,255,255,.94)!important;
backdrop-filter:blur(18px)!important;
border-bottom:1px solid rgba(15,23,42,.06)!important;
box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}
body.welcome-active .site-header .header-dynamic{
display:none!important;
}
body.welcome-active .brand-row{
height:64px!important;
justify-content:center!important;
padding:10px 16px!important;
}
body.welcome-active .brand{
justify-content:center!important;
}
body.welcome-active .brand-logo{
width:42px!important;
height:42px!important;
border-radius:16px!important;
}
body.welcome-active .brand-name{
font-size:15px!important;
font-weight:900!important;
}
body.welcome-active .brand-text small{
max-width:260px!important;
text-align:right!important;
}
body.welcome-active .welcome-overlay{
z-index:80!important;
padding-top:88px!important;
align-items:flex-start!important;
background:rgba(2,6,23,.50)!important;
}
/* v2.4.5 - final story row position and perfect round story icons */
.site-header .header-stories,
.header-stories{
width:100%!important;
display:flex!important;
align-items:flex-start!important;
gap:12px!important;
padding:10px 16px 12px!important;
margin-top:4px!important;
margin-bottom:2px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-padding-inline:24px!important;
}
.site-header .story-bubble,
.story-bubble{
width:66px!important;
min-width:66px!important;
max-width:66px!important;
flex:0 0 66px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
gap:5px!important;
padding:0!important;
margin:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
transform:none!important;
}
.site-header .story-ring,
.story-ring{
width:58px!important;
height:58px!important;
min-width:58px!important;
min-height:58px!important;
max-width:58px!important;
max-height:58px!important;
aspect-ratio:1/1!important;
border-radius:50%!important;
padding:3px!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
background:conic-gradient(from 180deg,#ef4444,#f97316,#facc15,#ef4444)!important;
box-shadow:0 8px 22px rgba(239,68,68,.20),0 0 0 3px rgba(239,68,68,.08)!important;
}
.site-header .story-bubble.story-seen .story-ring,
.story-bubble.story-seen .story-ring{
background:linear-gradient(135deg,#cbd5e1,#e5e7eb)!important;
box-shadow:0 8px 18px rgba(15,23,42,.08),0 0 0 3px rgba(148,163,184,.12)!important;
}
.site-header .story-ring img,
.site-header .story-ring video,
.site-header .story-ring > span,
.story-ring img,
.story-ring video,
.story-ring > span{
width:100%!important;
height:100%!important;
min-width:100%!important;
min-height:100%!important;
aspect-ratio:1/1!important;
border-radius:50%!important;
object-fit:cover!important;
object-position:center center!important;
border:3px solid #fff!important;
background:#fff!important;
overflow:hidden!important;
display:block!important;
}
.site-header .story-bubble small,
.story-bubble small{
width:66px!important;
max-width:66px!important;
min-height:14px!important;
margin:0!important;
padding:0!important;
text-align:center!important;
font-size:10px!important;
line-height:1.35!important;
color:#0f172a!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
/* v2.4.5 - story playback should not be too high; centered clean player */
.story-modal{
align-items:center!important;
justify-items:center!important;
padding:0!important;
}
.story-content{
width:min(100vw,430px)!important;
height:min(100dvh,860px)!important;
max-height:100dvh!important;
margin:auto!important;
border-radius:0!important;
background:#000!important;
overflow:hidden!important;
touch-action:none!important;
}
.story-content img,
.story-content video{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:#000!important;
}
.story-progress{
top:12px!important;
}
.story-close{
top:20px!important;
}
/* v2.4.5 - welcome page image: always show full uploaded image, never half/cropped */
.welcome-overlay img,
[data-welcome-overlay] img,
.welcome-card img,
.welcome-media img,
.welcome-hero img,
.welcome-image img,
.welcome-slide img,
.welcome-cover img,
.welcome-overlay picture img,
[data-welcome-overlay] picture img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
display:block!important;
background:#fff!important;
border-radius:inherit!important;
}
.welcome-overlay .welcome-media,
[data-welcome-overlay] .welcome-media,
.welcome-overlay .welcome-image,
[data-welcome-overlay] .welcome-image,
.welcome-overlay .welcome-hero,
[data-welcome-overlay] .welcome-hero,
.welcome-overlay .welcome-cover,
[data-welcome-overlay] .welcome-cover{
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:#fff!important;
}
body.welcome-active .site-header .header-dynamic,
body.welcome-active .header-stories,
body.welcome-active .main-nav,
body.welcome-active nav{
display:none!important;
}
body.welcome-active .brand-row{
height:68px!important;
min-height:68px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
body.welcome-active .site-header{
min-height:68px!important;
max-height:76px!important;
overflow:hidden!important;
}
body.welcome-active .welcome-overlay,
body.welcome-active [data-welcome-overlay]{
padding-top:86px!important;
}
/* v2.4.6 - admin controlled header/footer background colors */
.site-header{
background:
linear-gradient(180deg, color-mix(in srgb, var(--admin-header-bg, #f6fbfb) 92%, #fff), var(--admin-header-bg, #f6fbfb))!important;
border-bottom:1px solid rgba(33,43,96,.07)!important;
}
.footer-dock,
.site-footer,
.footer,
.footer-bar{
background:
linear-gradient(180deg, color-mix(in srgb, var(--admin-footer-bg, #eef7f8) 88%, #fff), var(--admin-footer-bg, #eef7f8))!important;
border-top:1px solid rgba(33,43,96,.08)!important;
}
.footer-dock{
box-shadow:0 -18px 42px rgba(33,43,96,.08)!important;
}
.site-header .brand-row,
.site-header .header-dynamic{
background:transparent!important;
}
/* v2.4.7 - welcome page entrance button always visible */
body.welcome-active .welcome-overlay,
body.welcome-active [data-welcome-overlay]{
padding-top:82px!important;
padding-bottom:96px!important;
min-height:100dvh!important;
max-height:100dvh!important;
overflow:hidden!important;
}
body.welcome-active .welcome-card,
body.welcome-active .welcome-box,
body.welcome-active .welcome-content,
body.welcome-active [data-welcome-overlay] > *{
max-height:calc(100dvh - 190px)!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
padding-bottom:18px!important;
}
body.welcome-active .welcome-overlay img,
body.welcome-active [data-welcome-overlay] img{
max-height:min(42dvh, 330px)!important;
object-fit:contain!important;
object-position:center center!important;
}
/* keep the enter/continue button obvious and reachable */
body.welcome-active [data-close-welcome],
body.welcome-active .welcome-overlay button,
body.welcome-active [data-welcome-overlay] button,
body.welcome-active .welcome-overlay .btn,
body.welcome-active [data-welcome-overlay] .btn,
body.welcome-active .welcome-overlay a.btn,
body.welcome-active [data-welcome-overlay] a.btn{
position:fixed!important;
left:50%!important;
bottom:22px!important;
transform:translateX(-50%)!important;
z-index:9999!important;
width:min(360px, calc(100vw - 42px))!important;
min-height:52px!important;
border-radius:999px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:linear-gradient(135deg,#212b60,#34408f)!important;
color:#fff!important;
font-weight:900!important;
font-size:15px!important;
box-shadow:0 18px 42px rgba(33,43,96,.32)!important;
border:1px solid rgba(255,255,255,.18)!important;
}
body.welcome-active [data-close-welcome]::after,
body.welcome-active .welcome-overlay button::after,
body.welcome-active [data-welcome-overlay] button::after,
body.welcome-active .welcome-overlay .btn::after,
body.welcome-active [data-welcome-overlay] .btn::after{
content:""!important;
position:absolute!important;
inset:-7px!important;
border-radius:999px!important;
border:1px solid rgba(123,203,200,.42)!important;
pointer-events:none!important;
}
@media(max-height:720px){
body.welcome-active .welcome-overlay img,
body.welcome-active [data-welcome-overlay] img{
max-height:34dvh!important;
}
body.welcome-active .welcome-card,
body.welcome-active .welcome-box,
body.welcome-active .welcome-content,
body.welcome-active [data-welcome-overlay] > *{
max-height:calc(100dvh - 170px)!important;
}
}
/* v2.4.9 - mobile story white-screen fix */
.story-modal{
position:fixed!important;
inset:0!important;
z-index:99999!important;
background:#000!important;
align-items:center!important;
justify-items:center!important;
padding:0!important;
}
.story-modal:not([hidden]){
display:grid!important;
}
.story-content{
position:relative!important;
width:min(100vw,430px)!important;
height:100vh!important;
height:100svh!important;
max-height:100vh!important;
max-height:100svh!important;
background:#000!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:0!important;
touch-action:none!important;
user-select:none!important;
}
.story-content img,
.story-content video{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
display:block!important;
background:#000!important;
opacity:1!important;
visibility:visible!important;
}
.story-content.story-loading::before{
content:"در حال بارگذاری..."!important;
position:absolute!important;
inset:auto 0 46%!important;
color:#fff!important;
text-align:center!important;
z-index:2!important;
font-weight:800!important;
font-size:14px!important;
}
.story-fallback{
width:100%!important;
height:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
color:#fff!important;
background:#000!important;
padding:24px!important;
font-weight:800!important;
}
.story-progress{
position:fixed!important;
top:12px!important;
left:max(12px,calc(50vw - 203px))!important;
right:max(12px,calc(50vw - 203px))!important;
z-index:100001!important;
}
.story-close{
position:fixed!important;
top:22px!important;
right:max(16px,calc(50vw - 198px))!important;
z-index:100002!important;
}
body.story-open .site-header,
body.story-open .footer-dock,
body.story-open .floating-chat,
body.story-open .secret-admin-lock,
body.story-open .admin-lock,
body.story-open .messages{
display:none!important;
}
@media(max-width:768px){
.story-modal{
background:#000!important;
}
.story-content{
width:100vw!important;
max-width:100vw!important;
height:100vh!important;
height:100svh!important;
min-height:100svh!important;
background:#000!important;
}
.story-content img,
.story-content video{
object-fit:contain!important;
background:#000!important;
}
}
/* v2.5.0 - stop mobile scroll bounce/jitter and prevent header story clipping */
html{
overscroll-behavior:none!important;
background:#fff!important;
}
body{
overscroll-behavior:none!important;
background:#fff!important;
-webkit-overflow-scrolling:touch!important;
}
body:not(.welcome-active) .site-header{
overflow:visible!important;
max-height:none!important;
min-height:auto!important;
}
.site-header{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-header-bg, #dff3f2) 96%, #ffffff),
var(--admin-header-bg, #dff3f2)
)!important;
border-bottom:1px solid rgba(33,43,96,.12)!important;
box-shadow:0 12px 30px rgba(33,43,96,.10)!important;
transform:translateZ(0)!important;
backface-visibility:hidden!important;
-webkit-backface-visibility:hidden!important;
will-change:transform!important;
}
.footer-dock,
.site-footer,
.footer,
.footer-bar{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-footer-bg, #d2ecef) 94%, #ffffff),
var(--admin-footer-bg, #d2ecef)
)!important;
border-top:1px solid rgba(33,43,96,.12)!important;
box-shadow:0 -14px 34px rgba(33,43,96,.10)!important;
}
.site-header .header-dynamic,
.site-header .brand-row{
background:transparent!important;
overflow:visible!important;
}
.header-stories{
min-height:82px!important;
max-height:none!important;
height:auto!important;
overflow-x:auto!important;
overflow-y:visible!important;
padding-top:12px!important;
padding-bottom:14px!important;
margin-bottom:0!important;
transform:translateZ(0)!important;
backface-visibility:hidden!important;
-webkit-backface-visibility:hidden!important;
}
.story-bubble{
flex:0 0 68px!important;
min-width:68px!important;
max-width:68px!important;
height:auto!important;
overflow:visible!important;
transform:translateZ(0)!important;
}
.story-ring{
width:60px!important;
height:60px!important;
min-width:60px!important;
min-height:60px!important;
overflow:hidden!important;
border-radius:50%!important;
transform:translateZ(0)!important;
}
.story-bubble small{
display:block!important;
min-height:15px!important;
line-height:1.35!important;
}
/* When page reaches bottom/top, avoid visual shaking from fixed/sticky visual layers */
img,
video,
.site-header,
.footer-dock,
.welcome-overlay,
.story-modal{
-webkit-transform:translateZ(0);
transform:translateZ(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
/* v2.5.1 - emergency header layout fix */
html,
body{
background:#f5f8fb!important;
overscroll-behavior-y:none!important;
}
.site-header{
position:sticky!important;
top:0!important;
z-index:900!important;
width:min(100%,430px)!important;
max-width:430px!important;
margin:0 auto!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
border-radius:0 0 26px 26px!important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-header-bg, #c9efed) 96%, #ffffff),
var(--admin-header-bg, #c9efed)
)!important;
border-bottom:1px solid rgba(33,43,96,.14)!important;
box-shadow:0 12px 30px rgba(33,43,96,.12)!important;
}
.site-header .brand-row{
min-height:58px!important;
height:auto!important;
padding:10px 16px 6px!important;
margin:0!important;
background:transparent!important;
overflow:hidden!important;
}
.site-header .header-dynamic{
display:block!important;
height:auto!important;
max-height:none!important;
padding:0!important;
margin:0!important;
background:transparent!important;
overflow:hidden!important;
}
/* story row must stay fully visible, not half-cut */
.site-header .header-stories,
.header-stories{
height:78px!important;
min-height:78px!important;
max-height:78px!important;
padding:8px 14px 6px!important;
margin:0!important;
display:flex!important;
align-items:flex-start!important;
gap:10px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
}
.site-header .header-stories::-webkit-scrollbar,
.header-stories::-webkit-scrollbar{
display:none!important;
}
.story-bubble{
width:64px!important;
min-width:64px!important;
max-width:64px!important;
height:68px!important;
max-height:68px!important;
flex:0 0 64px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
gap:4px!important;
overflow:hidden!important;
margin:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
.story-ring{
width:54px!important;
height:54px!important;
min-width:54px!important;
min-height:54px!important;
max-width:54px!important;
max-height:54px!important;
border-radius:50%!important;
padding:3px!important;
overflow:hidden!important;
display:grid!important;
place-items:center!important;
background:conic-gradient(from 180deg,#ef4444,#f97316,#facc15,#ef4444)!important;
}
.story-ring img,
.story-ring video,
.story-ring > span{
width:100%!important;
height:100%!important;
border-radius:50%!important;
object-fit:cover!important;
object-position:center!important;
border:3px solid #fff!important;
display:block!important;
}
.story-bubble small{
width:64px!important;
max-width:64px!important;
height:14px!important;
line-height:14px!important;
font-size:10px!important;
text-align:center!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
/* main nav fixed compact row */
.main-nav,
.site-header nav{
height:58px!important;
min-height:58px!important;
max-height:58px!important;
padding:7px 14px 11px!important;
margin:0!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
background:transparent!important;
}
.main-nav::-webkit-scrollbar,
.site-header nav::-webkit-scrollbar{
display:none!important;
}
.main-nav a,
.site-header nav a{
flex:0 0 auto!important;
min-height:38px!important;
}
/* keep page content below header cleanly */
.app-main,
main{
padding-top:0!important;
padding-bottom:118px!important;
}
/* stronger footer color */
.footer-dock,
.site-footer,
.footer,
.footer-bar{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-footer-bg, #bfe5ea) 94%, #ffffff),
var(--admin-footer-bg, #bfe5ea)
)!important;
border-top:1px solid rgba(33,43,96,.14)!important;
box-shadow:0 -14px 34px rgba(33,43,96,.12)!important;
}
/* welcome mode should not break normal header after closing */
body:not(.welcome-active) .site-header{
max-height:none!important;
}
body.welcome-active .site-header{
height:68px!important;
min-height:68px!important;
max-height:68px!important;
overflow:hidden!important;
}
body.welcome-active .header-dynamic,
body.welcome-active .header-stories,
body.welcome-active .main-nav,
body.welcome-active nav{
display:none!important;
}
/* v2.5.2 - footer fixed bottom + softer header/footer colors */
.site-header{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-header-bg, #e4f6f5) 88%, #ffffff),
var(--admin-header-bg, #e4f6f5)
)!important;
box-shadow:0 10px 24px rgba(33,43,96,.08)!important;
border-bottom:1px solid rgba(33,43,96,.09)!important;
}
/* Footer must stay at the bottom of the viewport, not float inside page content */
.footer-dock{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:0!important;
transform:translateX(-50%)!important;
width:min(100%,430px)!important;
max-width:430px!important;
min-height:68px!important;
max-height:86px!important;
z-index:850!important;
margin:0!important;
padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
border-radius:24px 24px 0 0!important;
overflow:hidden!important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-footer-bg, #def1f3) 84%, #ffffff),
var(--admin-footer-bg, #def1f3)
)!important;
border-top:1px solid rgba(33,43,96,.09)!important;
box-shadow:0 -10px 26px rgba(33,43,96,.09)!important;
}
.footer-dock *,
.footer-dock a,
.footer-dock button{
max-height:100%!important;
}
/* Give pages enough bottom space so footer does not cover forms/content */
.app-main,
main,
.page-shell,
.content-shell{
padding-bottom:120px!important;
}
/* Keep footer hidden in story/welcome modes */
body.story-open .footer-dock,
body.welcome-active .footer-dock{
display:none!important;
}
/* Softer normal footer variants too */
.site-footer,
.footer,
.footer-bar{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-footer-bg, #def1f3) 84%, #ffffff),
var(--admin-footer-bg, #def1f3)
)!important;
border-top:1px solid rgba(33,43,96,.09)!important;
box-shadow:0 -10px 26px rgba(33,43,96,.08)!important;
}
/* v2.5.3 - mobile smooth scroll and non-white story covers */
html{
scroll-behavior:auto!important;
overflow-x:hidden!important;
background:#f5f8fb!important;
}
body{
overflow-x:hidden!important;
background:#f5f8fb!important;
-webkit-overflow-scrolling:touch!important;
touch-action:pan-y!important;
}
.phone-shell{
overflow-x:hidden!important;
overflow-y:visible!important;
}
.site-header,
.footer-dock,
.header-dynamic,
.header-stories,
.main-nav{
transition:none!important;
animation:none!important;
will-change:auto!important;
}
.header-dynamic.is-hidden,
.footer-dock.is-hidden,
.site-header.is-hidden{
transform:none!important;
opacity:1!important;
visibility:visible!important;
}
.header-stories,
.main-nav,
.footer-scroll-row{
-webkit-overflow-scrolling:touch!important;
scroll-behavior:auto!important;
overscroll-behavior-x:contain!important;
}
.story-bubble{
background:transparent!important;
-webkit-tap-highlight-color:transparent!important;
}
.story-ring{
background:conic-gradient(from 180deg,#ef4444,#f97316,#facc15,#ef4444)!important;
border-radius:50%!important;
overflow:hidden!important;
}
.story-ring img{
width:100%!important;
height:100%!important;
display:block!important;
object-fit:cover!important;
object-position:center center!important;
background:#212b60!important;
border-radius:50%!important;
opacity:1!important;
visibility:visible!important;
}
.story-ring .story-initial,
.story-ring > span{
width:100%!important;
height:100%!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
border:3px solid #fff!important;
background:linear-gradient(135deg,#212b60,#7bcbc8)!important;
color:#fff!important;
font-weight:900!important;
font-size:16px!important;
}
.story-modal{
position:fixed!important;
inset:0!important;
z-index:99999!important;
background:#000!important;
display:grid!important;
place-items:center!important;
padding:0!important;
}
.story-modal[hidden]{
display:none!important;
}
.story-content{
width:min(100vw,430px)!important;
height:100svh!important;
max-height:100svh!important;
background:#000!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
touch-action:none!important;
user-select:none!important;
}
.story-content img,
.story-content video{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:#000!important;
display:block!important;
}
.story-content.story-loading::before{
content:"در حال بارگذاری..."!important;
position:absolute!important;
color:#fff!important;
font-weight:800!important;
z-index:2!important;
}
.story-fallback{
width:100%!important;
height:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
padding:24px!important;
color:#fff!important;
background:#000!important;
font-weight:800!important;
}
body.story-open{
overflow:hidden!important;
}
body.story-open .site-header,
body.story-open .footer-dock,
body.story-open .floating-chat,
body.story-open .secret-admin-lock,
body.story-open .admin-lock,
body.story-open .messages{
display:none!important;
}
@media(max-width:768px){
html,
body{
overscroll-behavior-y:contain!important;
}
.site-header{
transform:translateX(-50%)!important;
}
.story-content{
width:100vw!important;
max-width:100vw!important;
height:100svh!important;
}
}
/* v2.5.4 - final mobile centering + native smooth scroll + story cover fix */
html,
body{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
overflow-x:hidden!important;
background:#f5f8fb!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:auto!important;
touch-action:auto!important;
}
.phone-shell{
width:100%!important;
max-width:430px!important;
min-height:100dvh!important;
margin-inline:auto!important;
overflow-x:hidden!important;
position:relative!important;
background:#fff!important;
}
.site-header{
position:sticky!important;
top:0!important;
left:auto!important;
right:auto!important;
transform:none!important;
width:100%!important;
max-width:430px!important;
margin:0 auto!important;
overflow:hidden!important;
z-index:900!important;
}
.footer-dock{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:0!important;
transform:translateX(-50%)!important;
width:min(100%,430px)!important;
max-width:430px!important;
margin:0!important;
z-index:850!important;
}
.app-main,
main{
width:100%!important;
max-width:430px!important;
margin:0 auto!important;
overflow-x:hidden!important;
padding-bottom:120px!important;
}
.header-dynamic,
.header-stories,
.main-nav,
.footer-scroll-row{
transform:none!important;
transition:none!important;
animation:none!important;
will-change:auto!important;
}
.header-dynamic.is-hidden,
.footer-dock.is-hidden,
.site-header.is-hidden,
body.ui-compact .header-dynamic,
body.ui-compact .footer-dock{
transform:none!important;
opacity:1!important;
visibility:visible!important;
display:block!important;
}
.header-stories{
height:78px!important;
min-height:78px!important;
max-height:78px!important;
padding:8px 14px 6px!important;
margin:0!important;
display:flex!important;
align-items:flex-start!important;
gap:10px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.header-stories::-webkit-scrollbar{
display:none!important;
}
.story-bubble{
width:64px!important;
min-width:64px!important;
max-width:64px!important;
height:68px!important;
max-height:68px!important;
flex:0 0 64px!important;
overflow:hidden!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
margin:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:4px!important;
-webkit-tap-highlight-color:transparent!important;
}
.story-ring{
width:54px!important;
height:54px!important;
min-width:54px!important;
min-height:54px!important;
border-radius:50%!important;
padding:3px!important;
overflow:hidden!important;
display:grid!important;
place-items:center!important;
background:conic-gradient(from 180deg,#ef4444,#f97316,#facc15,#ef4444)!important;
}
.story-bubble.story-seen .story-ring{
background:linear-gradient(135deg,#cbd5e1,#e5e7eb)!important;
}
.story-ring img{
width:100%!important;
height:100%!important;
border-radius:50%!important;
object-fit:cover!important;
object-position:center center!important;
border:3px solid #fff!important;
background:#212b60!important;
display:block!important;
opacity:1!important;
visibility:visible!important;
}
.story-ring video{
display:none!important;
}
.story-initial,
.story-ring > span{
width:100%!important;
height:100%!important;
border-radius:50%!important;
border:3px solid #fff!important;
display:grid!important;
place-items:center!important;
background:linear-gradient(135deg,#212b60,#7bcbc8)!important;
color:#fff!important;
font-weight:900!important;
font-size:16px!important;
}
.story-bubble small{
width:64px!important;
max-width:64px!important;
height:14px!important;
line-height:14px!important;
font-size:10px!important;
text-align:center!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.story-modal{
position:fixed!important;
inset:0!important;
z-index:99999!important;
background:#000!important;
display:grid!important;
place-items:center!important;
padding:0!important;
}
.story-modal[hidden]{
display:none!important;
}
.story-content{
width:min(100vw,430px)!important;
height:100svh!important;
max-height:100svh!important;
background:#000!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
touch-action:none!important;
user-select:none!important;
}
.story-content img,
.story-content video{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:#000!important;
display:block!important;
}
.story-content.story-loading::before{
content:"در حال بارگذاری..."!important;
position:absolute!important;
color:#fff!important;
font-weight:800!important;
z-index:2!important;
}
.story-fallback{
width:100%!important;
height:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
color:#fff!important;
background:#000!important;
padding:24px!important;
font-weight:800!important;
}
body.story-open{
overflow:hidden!important;
}
body.story-open .site-header,
body.story-open .footer-dock,
body.story-open .floating-chat,
body.story-open .secret-admin-lock,
body.story-open .admin-lock,
body.story-open .messages{
display:none!important;
}
@media(max-width:430px){
.phone-shell,
.site-header,
.app-main,
main{
width:100%!important;
max-width:100%!important;
margin:0!important;
left:auto!important;
right:auto!important;
transform:none!important;
}
.footer-dock{
left:0!important;
right:0!important;
transform:none!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
}
.story-content{
width:100vw!important;
max-width:100vw!important;
}
}
/* v2.5.5 - deep story cover reset and mobile center reset */
html,
body{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
overflow-x:hidden!important;
background:#f5f8fb!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:auto!important;
touch-action:auto!important;
}
.phone-shell{
width:100%!important;
max-width:430px!important;
min-height:100dvh!important;
margin-left:auto!important;
margin-right:auto!important;
overflow-x:hidden!important;
position:relative!important;
background:#fff!important;
}
.site-header{
position:sticky!important;
top:0!important;
left:auto!important;
right:auto!important;
transform:none!important;
width:100%!important;
max-width:430px!important;
margin:0 auto!important;
overflow:hidden!important;
z-index:900!important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-header-bg, #e4f6f5) 88%, #ffffff),
var(--admin-header-bg, #e4f6f5)
)!important;
}
.footer-dock{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:0!important;
transform:translateX(-50%)!important;
width:min(100%,430px)!important;
max-width:430px!important;
margin:0!important;
z-index:850!important;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--admin-footer-bg, #def1f3) 84%, #ffffff),
var(--admin-footer-bg, #def1f3)
)!important;
}
.app-main,
main{
width:100%!important;
max-width:430px!important;
margin-left:auto!important;
margin-right:auto!important;
overflow-x:hidden!important;
padding-bottom:120px!important;
}
.header-dynamic,
.header-stories,
.main-nav,
.footer-scroll-row{
transform:none!important;
transition:none!important;
animation:none!important;
will-change:auto!important;
}
.header-dynamic.is-hidden,
.footer-dock.is-hidden,
.site-header.is-hidden,
body.ui-compact .header-dynamic,
body.ui-compact .footer-dock{
transform:none!important;
opacity:1!important;
visibility:visible!important;
}
.header-stories{
height:78px!important;
min-height:78px!important;
max-height:78px!important;
padding:8px 14px 6px!important;
margin:0!important;
display:flex!important;
align-items:flex-start!important;
gap:10px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
background:transparent!important;
}
.header-stories::-webkit-scrollbar{
display:none!important;
}
.story-bubble{
width:64px!important;
min-width:64px!important;
max-width:64px!important;
height:68px!important;
max-height:68px!important;
flex:0 0 64px!important;
overflow:visible!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
margin:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:4px!important;
-webkit-tap-highlight-color:transparent!important;
}
.story-ring{
position:relative!important;
width:54px!important;
height:54px!important;
min-width:54px!important;
min-height:54px!important;
max-width:54px!important;
max-height:54px!important;
border-radius:50%!important;
padding:3px!important;
overflow:hidden!important;
display:block!important;
background:conic-gradient(from 180deg,#ef4444,#f97316,#facc15,#ef4444)!important;
box-shadow:0 8px 18px rgba(239,68,68,.18)!important;
}
.story-bubble.story-seen .story-ring{
background:linear-gradient(135deg,#cbd5e1,#e5e7eb)!important;
box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
}
.story-ring .story-initial{
position:absolute!important;
inset:3px!important;
width:auto!important;
height:auto!important;
border-radius:50%!important;
border:3px solid #fff!important;
display:grid!important;
place-items:center!important;
background:linear-gradient(135deg,#212b60,#7bcbc8)!important;
color:#fff!important;
font-weight:900!important;
font-size:16px!important;
opacity:1!important;
visibility:visible!important;
z-index:1!important;
}
.story-ring img{
position:absolute!important;
inset:3px!important;
width:calc(100% - 6px)!important;
height:calc(100% - 6px)!important;
border-radius:50%!important;
object-fit:cover!important;
object-position:center center!important;
border:3px solid #fff!important;
background:transparent!important;
display:block!important;
opacity:0!important;
visibility:hidden!important;
z-index:2!important;
}
.story-ring img.is-loaded{
opacity:1!important;
visibility:visible!important;
}
.story-ring video{
display:none!important;
}
.story-bubble small{
width:64px!important;
max-width:64px!important;
height:14px!important;
line-height:14px!important;
font-size:10px!important;
text-align:center!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
color:#0f172a!important;
}
.story-modal{
position:fixed!important;
inset:0!important;
z-index:99999!important;
background:#000!important;
display:grid!important;
place-items:center!important;
padding:0!important;
}
.story-modal[hidden]{
display:none!important;
}
.story-content{
width:min(100vw,430px)!important;
height:100svh!important;
max-height:100svh!important;
background:#000!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
touch-action:none!important;
user-select:none!important;
}
.story-content img,
.story-content video{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:#000!important;
display:block!important;
}
.story-content.story-loading::before{
content:"در حال بارگذاری..."!important;
position:absolute!important;
color:#fff!important;
font-weight:800!important;
z-index:2!important;
}
.story-fallback{
width:100%!important;
height:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
color:#fff!important;
background:#000!important;
padding:24px!important;
font-weight:800!important;
}
body.story-open{
overflow:hidden!important;
}
body.story-open .site-header,
body.story-open .footer-dock,
body.story-open .floating-chat,
body.story-open .secret-admin-lock,
body.story-open .admin-lock,
body.story-open .messages{
display:none!important;
}
@media(max-width:430px){
.phone-shell,
.site-header,
.app-main,
main{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
left:auto!important;
right:auto!important;
transform:none!important;
}
.footer-dock{
left:0!important;
right:0!important;
transform:none!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
}
.story-content{
width:100vw!important;
max-width:100vw!important;
}
}
/* v2.5.8 - short final fix for white story bubble */
body .site-header .header-stories button.story-bubble span.story-ring{
position:relative!important;
width:54px!important;
height:54px!important;
min-width:54px!important;
min-height:54px!important;
border-radius:999px!important;
padding:3px!important;
overflow:hidden!important;
display:block!important;
background:conic-gradient(from 180deg,#ef4444,#f97316,#facc15,#ef4444)!important;
box-shadow:0 8px 18px rgba(239,68,68,.22)!important;
}
body .site-header .header-stories button.story-bubble span.story-ring span.story-initial{
position:absolute!important;
inset:3px!important;
width:auto!important;
height:auto!important;
min-width:0!important;
min-height:0!important;
border-radius:999px!important;
border:3px solid #fff!important;
display:grid!important;
place-items:center!important;
background:linear-gradient(135deg,#212b60,#7bcbc8)!important;
background-color:#212b60!important;
color:#fff!important;
font-weight:900!important;
font-size:16px!important;
line-height:1!important;
opacity:1!important;
visibility:visible!important;
z-index:50!important;
}
body .site-header .header-stories button.story-bubble span.story-ring img{
position:absolute!important;
inset:3px!important;
width:calc(100% - 6px)!important;
height:calc(100% - 6px)!important;
border-radius:999px!important;
border:3px solid #fff!important;
object-fit:cover!important;
object-position:center!important;
z-index:60!important;
}
body .site-header .header-stories button.story-bubble.story-seen span.story-ring{
background:linear-gradient(135deg,#cbd5e1,#e5e7eb)!important;
}
/* v2.6.1 - desktop wide layout only; mobile unchanged */
@media (min-width: 900px){
.phone-shell,
.site-header,
.app-main,
main{
width:min(100%, 980px)!important;
max-width:980px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.footer-dock{
width:min(100%, 980px)!important;
max-width:980px!important;
left:50%!important;
right:auto!important;
transform:translateX(-50%)!important;
}
.page-card,
.card-soft,
.form-card,
.settings-card,
.dashboard-card{
max-width:760px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.header-stories,
.main-nav{
justify-content:center!important;
}
}
@media (min-width: 1200px){
.phone-shell,
.site-header,
.app-main,
main,
.footer-dock{
width:min(100%, 1120px)!important;
max-width:1120px!important;
}
.page-card,
.card-soft,
.form-card,
.settings-card,
.dashboard-card{
max-width:880px!important;
}
}
/* color inputs visual */
input[type="color"]{
width:92px!important;
height:46px!important;
padding:2px!important;
border-radius:12px!important;
cursor:pointer!important;
}
/* v2.6.2 - desktop wider layout only; mobile unchanged */
@media (min-width: 900px){
body:not(.dashboard-body) .phone-shell,
body:not(.dashboard-body) .site-header,
body:not(.dashboard-body) .app-main,
body:not(.dashboard-body) main,
body:not(.dashboard-body) .footer-dock{
width:min(100%, 980px)!important;
max-width:980px!important;
}
.dashboard-body{
display:flex!important;
min-height:100vh!important;
}
.dashboard-body .dash-sidebar{
width:270px!important;
flex:0 0 270px!important;
}
.dashboard-body .dash-main{
flex:1!important;
width:auto!important;
max-width:none!important;
padding:28px 34px!important;
}
.dashboard-body .form-card,
.dashboard-body .table-card{
max-width:980px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.dashboard-body .dash-form input,
.dashboard-body .dash-form select,
.dashboard-body .dash-form textarea{
max-width:100%!important;
}
.dashboard-body input[type="color"]{
width:92px!important;
height:46px!important;
min-width:92px!important;
padding:2px!important;
border-radius:12px!important;
cursor:pointer!important;
}
}
@media (min-width: 1200px){
body:not(.dashboard-body) .phone-shell,
body:not(.dashboard-body) .site-header,
body:not(.dashboard-body) .app-main,
body:not(.dashboard-body) main,
body:not(.dashboard-body) .footer-dock{
width:min(100%, 1120px)!important;
max-width:1120px!important;
}
.dashboard-body .form-card,
.dashboard-body .table-card{
max-width:1080px!important;
}
}
/* v2.6.4 explicit story seen/unseen ring - targeted only */
.header-stories .story-bubble .story-ring{
position:relative!important;
overflow:visible!important;
padding:3px!important;
border-radius:999px!important;
background:#ef4444!important;
box-shadow:0 0 0 2px rgba(239,68,68,.20)!important;
}
.header-stories .story-bubble:not(.story-seen) .story-ring{
background:conic-gradient(#ef4444,#f97316,#ef4444)!important;
box-shadow:0 0 0 2px rgba(239,68,68,.22)!important;
}
.header-stories .story-bubble.story-seen .story-ring{
background:#d1d5db!important;
box-shadow:0 0 0 1px rgba(17,24,39,.10)!important;
}
.header-stories .story-bubble .story-ring img,
.header-stories .story-bubble .story-ring video,
.header-stories .story-bubble .story-ring .story-initial{
width:100%!important;
height:100%!important;
border-radius:50%!important;
object-fit:cover!important;
border:2px solid #fff!important;
background:#fff!important;
}
.header-stories .story-bubble.story-seen .story-ring img,
.header-stories .story-bubble.story-seen .story-ring video,
.header-stories .story-bubble.story-seen .story-ring .story-initial{
filter:saturate(.55) opacity(.78)!important;
}
/* RAYMOND FILTER ACTIVE STRONG LIGHT BLUE V14 */
.filter-chip.active{
background:linear-gradient(135deg,#38bdf8,#7dd3fc)!important;
color:#073b5c!important;
border-color:#0284c7!important;
transform:scale(1.05);
box-shadow:0 14px 34px rgba(2,132,199,.28)!important;
}
/* RAYMOND SOUND BUTTON STRONG BLUE V14 */
.sound-toggle.is-sound-on{
background:#38bdf8!important;
color:#073b5c!important;
border-color:#0284c7!important;
box-shadow:0 10px 26px rgba(2,132,199,.28)!important;
}