*{box-sizing:border-box}
html,body{margin:0;background:#031426;font-family:Vazirmatn,Vazir,IRANYekanX,IRANYekan,Tahoma,sans-serif;color:#fff}
button,input{font:inherit}
.screen{position:fixed;inset:0;display:none;overflow:auto;background:#061a2d}
.screen.active{display:block}
.logo{display:block;object-fit:contain;background:transparent}
.iconbtn{border:0;background:rgba(4,42,72,.12);color:#fff;border-radius:14px;width:46px;height:46px;font-size:24px}
/* SPLASH — three independent layers: clean background / transparent logo / HTML loader */
#splash{display:block;z-index:99;overflow:hidden}
.s-bg{position:absolute;inset:0;background:url('../assets/images/001-f05cc6a292fe.webp') center/cover no-repeat;filter:brightness(.54) saturate(.9);animation:bgIn 1.5s ease-out forwards}
.s-rays{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.s-rays i{position:absolute;top:-30%;width:2px;height:0;background:linear-gradient(180deg,transparent,#2cc8ff 35%,#42ef82 70%,transparent);box-shadow:0 0 18px #21c8ff;opacity:0;animation:ray 1.25s ease-out forwards}
.s-rays i:nth-child(1){left:18%;animation-delay:.22s} .s-rays i:nth-child(2){left:40%;animation-delay:.34s} .s-rays i:nth-child(3){left:63%;animation-delay:.46s} .s-rays i:nth-child(4){left:82%;animation-delay:.58s}
.s-logo{position:absolute;z-index:4;top:7%;left:2%;right:2%;display:flex;justify-content:center;opacity:0;transform:translateY(-16px);animation:logoIn .65s .25s ease-out forwards}
.s-logo img{width:min(590px,96vw);filter:brightness(1.12) contrast(1.06) saturate(1.05) drop-shadow(0 0 8px rgba(20,183,255,.46));animation:logoGlow 1.2s .65s ease-in-out forwards}
.loader{position:absolute;z-index:5;left:12%;right:12%;bottom:7%;height:7px;border:1px solid rgba(255,255,255,.9);border-radius:20px;background:rgba(0,15,30,.35);overflow:visible}
.loader span{display:block;width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#087dff,#20d6ee,#45eb75);box-shadow:0 0 13px #20c9ff;animation:load 1.28s .12s ease-out forwards}
.loader b{position:absolute;left:0;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 10px #fff,0 0 24px #23c9ff,0 0 30px #45eb75;animation:spark 1.28s .12s ease-out forwards}
@keyframes bgIn{to{filter:brightness(.92) saturate(1.03)}} @keyframes logoIn{to{opacity:1;transform:none}}
@keyframes logoGlow{50%{filter:brightness(1.3) contrast(1.07) saturate(1.08) drop-shadow(0 0 15px #22baff) drop-shadow(0 0 24px rgba(60,240,120,.45))}}
@keyframes ray{20%{opacity:.9}100%{height:135%;opacity:.12}} @keyframes load{to{width:100%}} @keyframes spark{to{left:100%}}
/* LOGIN — same visual language as reference; no duplicated tagline below logo */
#login{overflow:hidden;background:#041421}
.login-bg{position:absolute;inset:0;background:url('../assets/images/001-f05cc6a292fe.webp') center/cover no-repeat;filter:blur(9px) brightness(.36);transform:scale(1.08)}
.login-wrap{position:relative;z-index:2;min-height:100%;padding:8vh 6.5% 5%;display:flex;flex-direction:column;align-items:center}
.login-logo{width:min(390px,84vw);filter:brightness(1.16) contrast(1.07) saturate(1.05) drop-shadow(0 0 7px rgba(35,183,255,.35));margin-bottom:34px}
.login-card{width:min(100%,440px);padding:28px 22px;background:rgba(5,29,48,.82);border:1px solid rgba(255,255,255,.18);border-radius:27px;backdrop-filter:blur(16px);box-shadow:0 22px 60px rgba(0,0,0,.28);text-align:center}
.login-card h1{font-size:23px;margin:0 0 14px} .login-card p{font-size:12px;line-height:2;color:#b7c7d3;margin:0 0 20px}
.phone{height:58px;border:1px solid rgba(255,255,255,.26);border-radius:17px;display:flex;align-items:center;direction:ltr;padding:0 15px;gap:10px;background:rgba(255,255,255,.035)}
.phone input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:18px} .phone b{padding-right:11px;border-right:1px solid rgba(255,255,255,.2)}
.primary,.guest{width:100%;height:56px;border-radius:16px;margin-top:15px;font-weight:900} .primary{border:0;color:#fff;background:#159af6;box-shadow:0 8px 25px rgba(21,154,246,.27)} .guest{border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff}
.or{display:flex;align-items:center;gap:12px;color:#91a6b5;font-size:11px;margin:18px 0 0} .or i{height:1px;background:rgba(255,255,255,.15);flex:1}
.legal{font-size:9px;color:#8195a3;margin-top:22px} .legal b{color:#24b5f4}
/* HOME — appearance follows reference, contents follow Master Spec */
#home{background:linear-gradient(180deg,#0878d2 0,#0867b4 18%,#061f36 47%,#041726 100%);padding-bottom:82px}
.home-head{height:104px;display:grid;grid-template-columns:50px 1fr 50px;align-items:center;padding:12px 16px 0;position:relative;z-index:4}
.home-logo{width:min(300px,64vw);justify-self:center;filter:brightness(1.16) contrast(1.07) saturate(1.05)}
.bell{position:relative} .bell:after{content:"";position:absolute;right:6px;top:5px;width:9px;height:9px;border-radius:50%;background:#ff4f59}
.hero{margin-top:-3px;height:37vh;min-height:300px;max-height:430px;background:url('../assets/images/002-f12d84d0763e.webp') center 42%/cover no-repeat;position:relative;border-radius:0 0 25px 25px;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,93,175,.04),rgba(3,24,43,.12) 70%,rgba(3,24,43,.42))}
.search{position:relative;z-index:3;margin:-29px 14px 13px;height:58px;border-radius:18px;background:#fff;display:flex;align-items:center;padding:0 16px;box-shadow:0 12px 28px rgba(0,0,0,.2);direction:rtl}
.search input{border:0;outline:0;flex:1;font-size:13px;color:#17354c} .search button{border:0;background:transparent;font-size:21px}
.section{padding:7px 13px 5px} .section-title{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px} .section-title h2{font-size:15px;margin:0} .section-title small{color:#79c8ff}
.categories{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cat{border:1px solid rgba(100,190,245,.2);border-radius:17px;background:linear-gradient(145deg,rgba(12,65,102,.95),rgba(5,35,59,.97));min-height:91px;padding:13px;text-align:right;color:#fff;display:flex;align-items:center;gap:12px}
.cat strong{width:42px;height:42px;border-radius:13px;background:rgba(26,163,255,.13);display:grid;place-items:center;font-size:23px} .cat span{font-size:12px;font-weight:900;line-height:1.6}
.market-sign{text-align:center;color:#d9efff;font-size:11px;margin:7px 0 10px} .market-sign b.buy{color:#48a9ff} .market-sign b.sell{color:#45e879}
.scroller{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px;scrollbar-width:none} .scroller::-webkit-scrollbar{display:none}
.card{flex:0 0 74%;scroll-snap-align:start;border:1px solid rgba(95,184,240,.2);border-radius:17px;background:linear-gradient(150deg,#0b3a60,#061f35);padding:14px;min-height:112px}
.card .tag{font-size:10px;padding:5px 9px;border-radius:12px;background:rgba(255,255,255,.07)} .card h3{font-size:13px;margin:12px 0 5px} .card p{font-size:10px;color:#9eb5c5;margin:0;line-height:1.8}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:9px} .feature{border:1px solid rgba(100,190,245,.2);border-radius:17px;background:#082e4d;padding:15px;min-height:105px} .feature b{font-size:13px} .feature p{font-size:10px;color:#a7bbc9;line-height:1.7}
.chips{display:flex;gap:8px;overflow:auto;scrollbar-width:none} .chip{flex:0 0 auto;border:1px solid rgba(255,255,255,.15);background:#0a3557;color:#fff;border-radius:14px;padding:10px 14px;font-size:11px}
.ai-entry{margin:9px 13px 15px;border:1px solid rgba(72,220,165,.35);border-radius:18px;padding:14px;background:linear-gradient(100deg,rgba(12,78,113,.94),rgba(6,51,70,.96));display:flex;justify-content:space-between;align-items:center}
.ai-entry b{font-size:13px} .ai-entry small{display:block;color:#9fc9cf;margin-top:5px}
.bottom{position:fixed;z-index:20;bottom:0;left:0;right:0;height:72px;background:rgba(3,24,42,.97);border-top:1px solid rgba(255,255,255,.08);display:none;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.bottom.show{display:grid} .bottom button{border:0;background:transparent;color:#8fa8b9;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px} .bottom button b{font-size:20px;color:#d6eaff} .bottom button.active{color:#35c8ff}
.toast{position:fixed;z-index:200;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#071f33;color:#fff;border:1px solid rgba(255,255,255,.15);padding:11px 16px;border-radius:14px;opacity:0;transition:.2s;white-space:nowrap;font-size:11px} .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* v1.1 SPLASH FIX — preserve exact logo geometry */
.s-logo{top:6.5%!important;left:3%!important;right:3%!important}
.s-logo img{
  width:min(640px,94vw)!important;
  max-width:94vw!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  transform:none!important;
  background:transparent!important;
  mix-blend-mode:normal!important;
  image-rendering:auto!important;
  filter:brightness(1.10) contrast(1.04) saturate(1.03) drop-shadow(0 0 6px rgba(31,190,255,.42))!important;
}

/* v1.2 — visual shell locked to approved 3-screen composition */
.s-logo img{
  width:min(650px,95vw)!important;
  height:auto!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
  filter:brightness(1.14) contrast(1.055) saturate(1.04)
         drop-shadow(0 0 5px rgba(30,190,255,.34))!important;
}
#login .login-logo{
  width:min(405px,86vw)!important;
  height:auto!important;
  object-fit:contain!important;
  filter:brightness(1.13) contrast(1.05) saturate(1.04)
         drop-shadow(0 0 5px rgba(30,190,255,.28))!important;
}
#home .home-logo{
  width:min(310px,66vw)!important;
  height:auto!important;
  object-fit:contain!important;
  filter:brightness(1.14) contrast(1.055) saturate(1.04)!important;
}
#home .hero{
  height:39vh!important;
  min-height:320px!important;
  max-height:455px!important;
  background-size:cover!important;
  background-position:center 53%!important;
}
#home .hero:after{
  background:linear-gradient(180deg,rgba(0,92,175,.02),rgba(3,24,43,.04) 72%,rgba(3,24,43,.34))!important;
}
#home .home-head{
  background:linear-gradient(180deg,rgba(7,119,207,.98),rgba(7,111,193,.94))!important;
}
#home .search{
  border:1px solid rgba(0,110,190,.10);
  box-shadow:0 14px 32px rgba(0,0,0,.20)!important;
}
#home .cat,#home .card,#home .feature{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 20px rgba(0,0,0,.08);
}

/* v1.3 ONLY requested corrections: remove black logo halo + full-height hero header */
.s-logo img,.login-logo,.home-logo{
  background:transparent!important;
  mix-blend-mode:normal!important;
  box-shadow:none!important;
}
.s-logo img{
  filter:brightness(1.12) contrast(1.05) saturate(1.04)
         drop-shadow(0 0 5px rgba(28,190,255,.38))!important;
}
#home{
  position:relative!important;
  background:#041726!important;
}
#home .home-head{
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;
  z-index:8!important;
  height:112px!important;
  background:linear-gradient(180deg,rgba(2,31,55,.36),rgba(2,31,55,0))!important;
  backdrop-filter:none!important;
}
#home .hero{
  margin-top:0!important;
  height:52vh!important;
  min-height:430px!important;
  max-height:610px!important;
  border-radius:0 0 26px 26px!important;
  background-position:center 50%!important;
}
#home .hero:after{
  background:
    linear-gradient(180deg,rgba(2,20,36,.16) 0%,rgba(2,20,36,.015) 27%,rgba(2,20,36,.04) 70%,rgba(3,24,43,.42) 100%)!important;
}
#home .home-logo{
  width:min(315px,66vw)!important;
  filter:brightness(1.14) contrast(1.055) saturate(1.04)
         drop-shadow(0 0 4px rgba(25,185,255,.20))!important;
}
#home .iconbtn{
  background:rgba(2,31,53,.20)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(5px)!important;
}

/* v1.4 — Master Spec mobile-app header, exact transparent user logo */
.s-logo img,.login-logo,.home-logo{
 background:transparent!important;
 box-shadow:none!important;
 mix-blend-mode:normal!important;
 object-fit:contain!important;
 aspect-ratio:auto!important;
}
.s-logo img{
 width:min(680px,96vw)!important;
 filter:drop-shadow(0 0 5px rgba(32,193,255,.34))!important;
}
#login .login-logo{
 width:min(420px,88vw)!important;
 filter:drop-shadow(0 0 4px rgba(32,193,255,.24))!important;
}
#home .home-head{
 grid-template-columns:48px 1fr 48px!important;
 position:absolute!important;top:0!important;left:0!important;right:0!important;
 height:105px!important;padding:10px 14px 0!important;
 background:linear-gradient(180deg,rgba(2,24,42,.22),rgba(2,24,42,0))!important;
}
#home .head-spacer{width:46px;height:46px;display:block}
#home .home-logo{
 width:min(300px,64vw)!important;
 filter:drop-shadow(0 0 3px rgba(30,190,255,.18))!important;
}
#home .hero{
 margin:0!important;
 height:52vh!important;min-height:430px!important;max-height:610px!important;
 border-radius:0 0 26px 26px!important;
}
#home .iconbtn{
 width:44px!important;height:44px!important;
 background:rgba(4,35,57,.18)!important;
 border:1px solid rgba(255,255,255,.09)!important;
}

/* v1.5 — ONE exact user logo globally; zero shadow / zero glow / zero deformation */
.s-logo img,
#login .login-logo,
#home .home-logo,
img[alt="CNG360"]{
  filter:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  background:transparent!important;
  mix-blend-mode:normal!important;
  object-fit:contain!important;
  height:auto!important;
  aspect-ratio:auto!important;
  transform:none!important;
}

/* HOME BODY EDIT v1 — locked Splash/Login/Home header+hero untouched */
#home .search-v2{z-index:9;margin:-31px 16px 18px;height:66px;border-radius:22px;padding:0 11px;gap:8px;background:#fff;border:1px solid rgba(255,255,255,.96);box-shadow:0 14px 34px rgba(0,18,35,.27)}
#home .search-v2:after{content:"";position:absolute;inset:5px;border:1px solid rgba(8,113,188,.11);border-radius:17px;pointer-events:none}
#home .search-v2 input{position:relative;z-index:2;min-width:0;height:100%;font-family:Vazirmatn,Vazir,IRANYekanX,IRANYekan,Tahoma,sans-serif;font-size:15.5px!important;font-weight:600;color:#12354e;text-align:right;direction:rtl;background:transparent}
#home .search-v2 input::placeholder{color:#718493;opacity:1;font-weight:500}
#home .search-action{position:relative;z-index:3;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:14px;display:grid;place-items:center;padding:0}
#home .search-submit{background:linear-gradient(145deg,#0788e9,#045ca5);box-shadow:0 7px 16px rgba(4,105,184,.27)}
#home .search-camera{background:#edf6fb;border:1px solid #dcecf5}
#home .search-action svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#home .search-submit svg{color:#fff} #home .search-camera svg{color:#086995}
#home .search-divider{position:relative;z-index:2;width:1px;height:29px;background:#dbe5ec}
#home .section,#home .market,#home .brands,#home .tech,#home .ai-entry,#home .card,#home .cat{font-family:Vazirmatn,Vazir,IRANYekanX,IRANYekan,Tahoma,sans-serif}
#home h2{font-size:22px!important;font-weight:800!important;line-height:1.55!important}
#home h3{font-size:17px!important;font-weight:750!important;line-height:1.65!important}
#home p,#home small{font-size:14px!important;line-height:1.8!important}
#home .cat{font-size:16px!important;font-weight:700!important;line-height:1.7!important}


/* HOME BODY v2 — locked Splash/Login/Header/Hero untouched */
#home{background:#f4f9fc!important;color:#12344c!important}
#home .section{background:transparent!important}
#home .section-title h2{color:#12344c!important}
#home .section-title small{color:#3182b8!important}

/* Search interior explicitly white */
#home .search-v2,#home .search-v2 input{background:#fff!important}
#home .search-v2{border:1px solid #e3edf3!important;box-shadow:0 10px 28px rgba(22,76,108,.14)!important}

/* Approved real equipment images in category cards */
#home .categories-photo{gap:12px!important}
#home .categories-photo .cat{
 min-height:148px!important;padding:10px!important;
 display:flex!important;flex-direction:column!important;justify-content:space-between!important;
 background:#fff!important;border:1px solid #e1edf4!important;
 box-shadow:0 8px 22px rgba(30,83,113,.08)!important;color:#173a51!important
}
#home .categories-photo .cat img{
 width:100%!important;height:92px!important;object-fit:contain!important;
 border-radius:14px!important;background:#fff!important
}
#home .categories-photo .cat span{font-size:15px!important;font-weight:750!important;line-height:1.55!important}

/* Slow floating/rotating request and supplier rails */
#home .auto-rail{overflow:hidden!important;scrollbar-width:none;padding:4px 0 12px!important}
#home .auto-track{display:flex;width:max-content;gap:12px;animation:cngRail 34s linear infinite;will-change:transform}
#home .auto-track.reverse{animation-direction:reverse;animation-duration:38s}
#home .auto-track .card{
 width:255px!important;min-width:255px!important;
 background:#fff!important;color:#17384e!important;
 border:1px solid #dfebf2!important;
 box-shadow:0 8px 22px rgba(31,82,111,.09)!important
}
#home .auto-track .card p{color:#627b8c!important}
#home .auto-track:hover{animation-play-state:paused}
@keyframes cngRail{from{transform:translateX(0)}to{transform:translateX(-42%)}}

/* brighten remaining Home body surfaces */
#home .feature,#home .chip,#home .ai-entry{
 background:#fff!important;color:#17384e!important;border-color:#dfebf2!important;
 box-shadow:0 7px 20px rgba(31,82,111,.07)!important
}
#home .feature p,#home .ai-entry small{color:#60798a!important}


/* v3 requested adjustments — no change to locked Splash/Login/Hero */
#home .categories-photo .cat{
  background:#fff!important;
  border:1px solid #e5eef4!important;
  box-shadow:0 7px 18px rgba(31,82,111,.07)!important;
}
#home .categories-photo .cat img{
  background:transparent!important;
  mix-blend-mode:multiply;
  filter:contrast(1.035) saturate(1.03);
}

/* Guest login/register remains visible over Home hero until authenticated */
#guestAuthTop{
 position:absolute;top:18px;right:18px;z-index:40;
 display:flex;align-items:center;gap:8px;
 border:1px solid rgba(255,255,255,.38);
 background:rgba(12,80,145,.78);
 color:#fff;padding:10px 14px;border-radius:18px;
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
 box-shadow:0 8px 22px rgba(0,40,80,.18);
 font-weight:800;font-size:14px;cursor:pointer
}
#guestAuthTop svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}
body.member #guestAuthTop{display:none!important}


/* HOME v4 — coordinated top controls + white content cards */
#home .hero .home-logo,
#home .hero img[alt="CNG360"]{
  width:43%!important;
  max-width:220px!important;
  height:auto!important;
  left:18px!important;
  right:auto!important;
  top:20px!important;
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
}

/* Guest auth aligned to opposite side */
#guestAuthTop{
  top:22px!important;
  right:18px!important;
  left:auto!important;
  min-height:48px!important;
  padding:9px 13px!important;
  border-radius:16px!important;
  font-size:13.5px!important;
  background:rgba(8,103,181,.90)!important;
  box-shadow:0 7px 18px rgba(5,62,106,.18)!important;
}

/* Premium gold notification bell */
#home .guest-bell-v4{
  position:absolute;top:79px;right:20px;z-index:41;
  width:46px;height:46px;border:1px solid rgba(255,219,113,.55);
  border-radius:15px;background:rgba(13,54,87,.74);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  display:grid;place-items:center;padding:0;
  box-shadow:0 7px 18px rgba(0,38,67,.18)
}
#home .guest-bell-v4 svg{
  width:25px;height:25px;fill:none;stroke:#ffd45b;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(255,204,64,.28))
}
#home .guest-bell-v4:after{
  content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;
  border-radius:50%;background:#ff4d52;border:2px solid #fff
}

/* Every editable Home content box uses a clean white interior */
#home .categories-photo .cat,
#home .auto-track .card,
#home .feature,
#home .chip,
#home .ai-entry,
#home .market-card,
#home .request-card,
#home .product-card,
#home .brand-card,
#home .tech-card{
  background:#fff!important;
  color:#17384e!important;
  border:1px solid #e1ebf1!important;
  box-shadow:0 7px 20px rgba(31,82,111,.07)!important;
}
#home .categories-photo .cat img,
#home .auto-track .card img,
#home .product-card img{
  background:#fff!important;
  mix-blend-mode:multiply;
  object-fit:contain!important;
}
#home .categories-photo .cat span,
#home .auto-track .card h3,
#home .auto-track .card p{color:#17384e!important}


/* HOME TOP v5 — explicit user correction */
#home .home-head-v5{
  position:absolute!important;
  top:0!important; left:0!important; right:0!important;
  z-index:50!important;
  height:112px!important;
  padding:18px 16px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  direction:ltr!important;
  pointer-events:none;
}

/* Approved logo: same exact asset, no shadow/filter/deformation */
#home .home-head-v5 .home-logo{
  position:static!important;
  flex:0 0 auto!important;
  width:38%!important;
  max-width:190px!important;
  min-width:135px!important;
  height:auto!important;
  margin:0!important;
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
  object-fit:contain!important;
  pointer-events:auto;
}

/* Login + notification are one group on the opposite side */
#home .home-top-actions{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  margin:0!important;
  pointer-events:auto;
  direction:rtl!important;
}
#home #guestAuthTop{
  position:static!important;
  inset:auto!important;
  height:48px!important;
  min-height:48px!important;
  width:auto!important;
  margin:0!important;
  padding:0 13px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  white-space:nowrap!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.42)!important;
  background:rgba(8,103,181,.90)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(4,52,91,.16)!important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-size:13px!important;
  font-weight:800!important;
}
#home #guestAuthTop .user-svg{
  width:21px!important;height:21px!important;
  fill:none!important;stroke:#fff!important;stroke-width:2!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}

/* Gold bell, same height as login button */
#home .bell-gold{
  position:relative!important;
  inset:auto!important;
  flex:0 0 48px!important;
  width:48px!important;height:48px!important;
  margin:0!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border-radius:16px!important;
  border:1px solid rgba(255,216,92,.72)!important;
  background:rgba(10,57,92,.84)!important;
  color:#ffd65c!important;
  box-shadow:0 6px 16px rgba(4,52,91,.16)!important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
#home .bell-gold svg{
  width:25px!important;height:25px!important;
  fill:none!important;stroke:#ffd65c!important;stroke-width:1.9!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
  filter:none!important;
}
#home .bell-gold:after{display:none!important}
#home .bell-gold .notify-dot{
  position:absolute;top:6px;right:6px;
  width:9px;height:9px;border-radius:50%;
  background:#ff4d52;border:2px solid #fff;
}

/* Keep controls separated on narrow phones too */
@media (max-width:390px){
  #home .home-head-v5{padding:16px 12px!important;gap:10px!important}
  #home .home-head-v5 .home-logo{width:35%!important;min-width:118px!important}
  #home #guestAuthTop{height:44px!important;min-height:44px!important;padding:0 10px!important;font-size:12px!important}
  #home .bell-gold{width:44px!important;height:44px!important;flex-basis:44px!important}
}


/* v6 — Home-only darker transparent logo supplied by user */
#home .home-head-v5{
  direction:ltr!important;
}
#home .home-head-v5 .home-logo{
  order:0!important;
  align-self:flex-start!important;
  width:40%!important;
  max-width:198px!important;
  min-width:138px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:left top!important;
  filter:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  opacity:1!important;
}
#home .home-top-actions{
  order:1!important;
  margin-left:auto!important;
}


/* v7 — Categories only: clean white interior for transparent product images */
#home .categories-photo .cat{
  background:#ffffff!important;
  border:1px solid #e3ebf0!important;
  box-shadow:0 7px 18px rgba(22,65,91,.08)!important;
  color:#17384e!important;
}
#home .categories-photo .cat img{
  background:transparent!important;
  object-fit:contain!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}
#home .categories-photo .cat span,
#home .categories-photo .cat strong,
#home .categories-photo .cat p{
  color:#17384e!important;
}


/* v8 — exact category structure:
   CARD itself = white
   IMAGE layer = transparent (no white image wrapper/background) */
#home .categories-photo .cat{
  background:#fff!important;
  background-color:#fff!important;
  border:1px solid #e2ebf0!important;
  border-radius:22px!important;
  overflow:hidden!important;
  box-shadow:0 7px 18px rgba(25,70,98,.08)!important;
}
#home .categories-photo .cat picture,
#home .categories-photo .cat .img,
#home .categories-photo .cat .image,
#home .categories-photo .cat .thumb,
#home .categories-photo .cat .photo{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
#home .categories-photo .cat img{
  background:transparent!important;
  background-color:transparent!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  box-shadow:none!important;
  border:0!important;
  object-fit:contain!important;
}
/* text sits directly on the white category card */
#home .categories-photo .cat span,
#home .categories-photo .cat strong,
#home .categories-photo .cat p{
  background:transparent!important;
  color:#17384e!important;
}


/* v9 — approved direction: light Home body + full Hero.
   Locked Splash/Login and Hero assets/content are not redesigned. */
#home{
  background:
    linear-gradient(180deg,#dcecf5 0,#edf6fa 20rem,#f7fbfd 34rem,#ffffff 55rem)!important;
  color:#12354c!important;
}

/* Hero remains a complete visual block; do not crop it into a thin header */
#home .hero,
#home .home-hero,
#home .hero-wrap{
  width:100%!important;
  min-height:clamp(360px,56vh,620px)!important;
  border-radius:0 0 28px 28px!important;
  overflow:hidden!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* White search surface over/after Hero */
#home .search,
#home .search-box,
#home .searchbar,
#home .home-search{
  background:#fff!important;
  color:#17384e!important;
  border:1px solid #dce8ee!important;
  box-shadow:0 10px 28px rgba(19,75,109,.11)!important;
}
#home input{
  background:#fff!important;
  color:#17384e!important;
}

/* Home content: bright, calm, visually tied to blue Hero */
#home .home-content,
#home .content,
#home main{
  background:transparent!important;
}
#home .section-title,
#home h2,#home h3{
  color:#143c56!important;
}

/* Category CARD = white. Transparent equipment image remains transparent. */
#home .categories-photo .cat{
  background:#fff!important;
  border:1px solid #e0eaf0!important;
  box-shadow:0 8px 22px rgba(19,75,109,.08)!important;
}
#home .categories-photo .cat img{
  background:transparent!important;
  filter:none!important;
}

/* Product/request cards also white for clearer product photography */
#home .request-card,
#home .product-card,
#home .market-card,
#home .supplier-card,
#home .card{
  background:#fff!important;
  color:#17384e!important;
  border:1px solid #e2ebf0!important;
  box-shadow:0 7px 20px rgba(19,75,109,.075)!important;
}
#home .request-card img,
#home .product-card img,
#home .market-card img,
#home .supplier-card img{
  background:transparent!important;
}

/* Bottom nav: light, app-like */
#home .bottom-nav,
#home nav.bottom{
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid #dce8ee!important;
  box-shadow:0 -7px 22px rgba(19,75,109,.07)!important;
}


/* v10 — visible light Home correction */
#home{
  position:relative!important;
  background:#eef7fb!important;
  padding-bottom:0!important;
  color:#12384f!important;
}

/* Header floats ON the Hero so the Hero is complete from the very top */
#home .home-head{
  position:absolute!important;
  inset:0 0 auto 0!important;
  z-index:20!important;
  background:linear-gradient(180deg,rgba(3,45,79,.28),rgba(3,45,79,0))!important;
}
#home .hero{
  margin-top:0!important;
  height:58vh!important;
  min-height:430px!important;
  max-height:620px!important;
  width:100%!important;
  border-radius:0 0 28px 28px!important;
  background-position:center 48%!important;
  background-size:cover!important;
}

/* Search is a white floating card between Hero and content */
#home .search{
  position:relative!important;
  z-index:12!important;
  margin:-31px 16px 20px!important;
  background:#fff!important;
  border:1px solid #d9e8ef!important;
  box-shadow:0 12px 30px rgba(18,74,107,.15)!important;
}
#home .search input{
  background:#fff!important;
  color:#183b50!important;
}
#home .search input::placeholder{color:#8a9ba7!important}

/* Category area is genuinely light */
#home .section{
  background:transparent!important;
  color:#17384e!important;
}
#home .section-title h2,#home .section-title small{color:#17384e!important}
#home .categories-photo .cat{
  background:#fff!important;
  background-color:#fff!important;
  border:1px solid #dce8ee!important;
  box-shadow:0 8px 22px rgba(20,73,103,.09)!important;
}
#home .categories-photo .cat img{
  background:transparent!important;
  background-color:transparent!important;
  filter:none!important;
  box-shadow:none!important;
}
#home .categories-photo .cat span{color:#17384e!important}

/* In this prototype the later Home sections are sibling sections.
   Make those visibly light too, without touching Splash/Login. */
#home ~ .section{
  background:#f7fbfd!important;
  color:#17384e!important;
  margin:0!important;
  padding:18px 16px!important;
}
#home ~ .section .section-title h2,
#home ~ .section .section-title small{color:#17384e!important}
#home ~ .section .card,
#home ~ .section .feature{
  background:#fff!important;
  color:#17384e!important;
  border:1px solid #dfeaf0!important;
  box-shadow:0 7px 20px rgba(20,73,103,.08)!important;
}
#home ~ .section .card p,
#home ~ .section .feature p{color:#6d8290!important}

/* light bottom navigation */
.bottom-nav{
  background:rgba(255,255,255,.98)!important;
  border-top:1px solid #dce8ee!important;
  box-shadow:0 -7px 20px rgba(20,73,103,.08)!important;
  color:#31566d!important;
}


/* v11 — HEADER + HERO LOCKED. Do not alter them below this point.
   Only content below Hero is restyled. */

/* main surfaces BELOW hero: noticeably lighter */
#home .section,
#home ~ .section{
  background:#f3f9fc!important;
  color:#17384e!important;
}

/* outer section/card surfaces below header */
#home .section:not(:first-of-type),
#home ~ .section{
  border-color:#e4eef3!important;
}

/* ALL inner content boxes below Hero = pure white */
#home .categories-photo .cat,
#home ~ .section .card,
#home ~ .section .feature,
#home ~ .section .request-card,
#home ~ .section .product-card,
#home ~ .section .market-card,
#home ~ .section .supplier-card{
  background:#ffffff!important;
  background-color:#ffffff!important;
  border:1px solid #d8e6ed!important;
  border-radius:20px!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 8px 22px rgba(25,76,105,.085)!important;
  color:#17384e!important;
}

/* transparent equipment/product imagery stays transparent */
#home .categories-photo .cat img,
#home ~ .section .card img,
#home ~ .section .feature img,
#home ~ .section .request-card img,
#home ~ .section .product-card img,
#home ~ .section .market-card img,
#home ~ .section .supplier-card img{
  background:transparent!important;
  background-color:transparent!important;
  filter:none!important;
  box-shadow:none!important;
}

/* readable typography on white cards */
#home .categories-photo .cat span,
#home ~ .section .card *,
#home ~ .section .feature *,
#home ~ .section .request-card *,
#home ~ .section .product-card *,
#home ~ .section .market-card *,
#home ~ .section .supplier-card *{
  text-shadow:none!important;
}


/* v12 — CONTENT REFINEMENT ONLY
   LOCKED: Splash, Login, Home Header and Home Hero. */

/* clearer section rhythm below locked Hero */
#home .section,
#home ~ .section{
  padding-top:22px!important;
  padding-bottom:22px!important;
}
#home .section-title,
#home ~ .section .section-title{
  margin-bottom:14px!important;
}
#home .section-title h2,
#home ~ .section .section-title h2{
  font-size:1.28rem!important;
  font-weight:800!important;
  letter-spacing:-.2px!important;
  color:#123d57!important;
}
#home .section-title small,
#home ~ .section .section-title small{
  color:#2377ad!important;
  font-weight:700!important;
}

/* category cards: clean white equipment showcase */
#home .categories-photo{
  gap:12px!important;
}
#home .categories-photo .cat{
  min-height:188px!important;
  padding:12px!important;
  justify-content:space-between!important;
}
#home .categories-photo .cat img{
  width:100%!important;
  height:118px!important;
  object-fit:contain!important;
  margin:auto!important;
}
#home .categories-photo .cat span{
  width:100%!important;
  text-align:center!important;
  line-height:1.65!important;
  font-size:1rem!important;
  font-weight:800!important;
  color:#153c54!important;
}

/* request/product horizontal cards: bright + compact + premium */
#home ~ .section .card,
#home ~ .section .request-card,
#home ~ .section .product-card,
#home ~ .section .market-card,
#home ~ .section .supplier-card{
  min-width:210px!important;
  overflow:hidden!important;
}
#home ~ .section .card img,
#home ~ .section .request-card img,
#home ~ .section .product-card img,
#home ~ .section .market-card img,
#home ~ .section .supplier-card img{
  object-fit:contain!important;
}

/* slow horizontal movement where an existing carousel/track exists */
#home ~ .section .track,
#home ~ .section .carousel-track,
#home ~ .section .ticker-track{
  animation-duration:34s!important;
  animation-timing-function:linear!important;
}

/* typography below Hero */
#home .section,
#home ~ .section,
.bottom-nav{
  font-family:Vazirmatn,Vazir,IRANYekanX,IRANYekan,Tahoma,sans-serif!important;
}

/* bottom nav stays light and clearer */
.bottom-nav{
  background:#fff!important;
  color:#49697d!important;
}
.bottom-nav .active,
.bottom-nav [aria-current="page"]{
  color:#087ee8!important;
}


/* v13 — HARD OVERRIDE BELOW LOCKED HERO
   Header/Hero remain untouched. */

/* Actual Home surface below Hero */
#home,
#home .home-content,
#home .content,
#home main,
#home .section,
#home ~ .section,
body:has(#home.active) .section {
  background-color:#f4f9fc!important;
  background-image:none!important;
  color:#153b52!important;
}

/* CATEGORY CARDS THEMSELVES — pure white, not the image */
#home .categories-photo .cat,
#home .categories .cat,
#home .category-card,
#home [class*="categor"] [class*="card"],
body:has(#home.active) .categories-photo .cat {
  background:#ffffff!important;
  background-color:#ffffff!important;
  background-image:none!important;
  border:1.5px solid #d7e4eb!important;
  box-shadow:0 8px 22px rgba(24,72,99,.10)!important;
  color:#163b51!important;
}

/* remove dark overlays/pseudo layers from category cards */
#home .categories-photo .cat::before,
#home .categories-photo .cat::after,
#home .category-card::before,
#home .category-card::after {
  background:transparent!important;
  opacity:0!important;
  box-shadow:none!important;
}

/* IMAGE stays transparent; never paint its own background white/gray */
#home .categories-photo .cat img,
#home .categories .cat img,
#home .category-card img {
  background:transparent!important;
  background-color:transparent!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  box-shadow:none!important;
  opacity:1!important;
}

/* labels readable on white card */
#home .categories-photo .cat span,
#home .categories .cat span,
#home .category-card span,
#home .category-card p,
#home .category-card strong {
  color:#163b51!important;
  background:transparent!important;
  text-shadow:none!important;
}

/* other cards below Hero also bright white */
#home ~ .section .card,
#home ~ .section .feature,
#home ~ .section .request-card,
#home ~ .section .product-card,
#home ~ .section .market-card,
#home ~ .section .supplier-card {
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  color:#163b51!important;
  border:1px solid #dce7ed!important;
}