*{box-sizing:border-box}body{margin:0;background:#f1f6f8;color:#17243b;font:13px Inter,Arial,sans-serif}a{text-decoration:none;color:inherit}.wrap{max-width:1180px;margin:auto;padding:0 18px}.top{background:#162938;color:#dce7ed}.topin{height:48px;display:flex;align-items:center;gap:28px}.logo{font-size:20px;font-weight:800;white-space:nowrap}.logo span{color:#13a8ef}.logo b{color:#f3a623}.toplinks{display:flex;gap:20px;flex:1;font-size:10px}.actions{display:flex;gap:10px;align-items:center;font-size:11px}.actions i{font-style:normal;background:#ef4b55;border-radius:50%;font-size:8px;padding:2px 5px}.btn{display:inline-block;border:1px solid #d9e3e8;background:#fff;padding:9px 14px;border-radius:4px;font-weight:700;font-size:11px;cursor:pointer}.btn.blue{background:#138fe1;color:#fff;border-color:#138fe1}.btn.green{background:#25b875;color:#fff;border-color:#25b875}.btn.dark{background:#1d2e3e;color:#fff;border-color:#506273}.small{padding:7px 11px}nav{background:#fff;border-bottom:1px solid #dce5ea}.navin{display:flex;align-items:center;min-height:38px;gap:20px}.navlinks{display:flex;gap:21px;flex:1;font-size:10px;font-weight:600;white-space:nowrap;overflow:auto}.navsearch{display:flex;border:1px solid #dce5ea;border-radius:4px;overflow:hidden;width:220px}.navsearch input{border:0;outline:0;padding:7px;width:100%;font-size:10px}.navsearch button{border:0;background:#f3f7f9;padding:0 10px}.hero{background:linear-gradient(115deg,#28b8bb,#1bb7cf 52%,#1383ce);color:#fff}.hero .wrap{padding-top:35px;padding-bottom:30px}.heroIn{display:grid;grid-template-columns:1fr 350px;gap:20px;align-items:center}.hero h1{font-size:30px;line-height:1.15;margin:0 0 12px}.hero p{font-size:14px;margin:0 0 16px;max-width:650px}.search{display:flex;max-width:650px;background:#fff;border-radius:4px;overflow:hidden}.search select,.search input{border:0;padding:12px;outline:0;font-size:12px}.search select{width:115px;border-right:1px solid #ddd}.search input{flex:1}.search button{width:52px;border:0;background:#138fe1;color:#fff;font-size:19px}.ctas{display:flex;gap:10px;margin-top:16px}.heroArt{height:190px;border-radius:18px;background:linear-gradient(135deg,#0b4770,#0c78bb);display:flex;align-items:center;justify-content:center;font-size:90px;box-shadow:0 20px 45px #00406055}.promo{background:#202737;color:#fff;text-align:center;padding:11px;font-size:14px}.promo b{color:#18b9ef}.main{padding:25px 0}.section{margin-bottom:25px}.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.title{font-size:18px;font-weight:800}.browse{background:#fff;border:1px solid #dce6eb;padding:7px 10px;border-radius:4px;color:#126ea7;font-size:10px;font-weight:700}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.card{background:#fff;border:1px solid #dce5e9;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px #1d3a4a0c;transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #1d3a4a20}.thumb{height:132px;position:relative}.thumb img{width:100%;height:100%;object-fit:cover}.badge{position:absolute;bottom:0;right:0;background:#f04e55;color:#fff;padding:4px 7px;font-size:9px;font-weight:800}.body{padding:9px}.body h3{font-size:11px;line-height:1.35;min-height:30px;margin:0 0 6px}.meta{display:flex;justify-content:space-between;color:#8a97a2;font-size:9px;gap:5px}.stars{color:#ff9900}.price{color:#118be1;font-weight:800;font-size:12px}.newgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.new{background:#fff;border:1px solid #dce5e9;border-radius:4px;padding:8px;display:flex;gap:8px;align-items:center}.new img{width:42px;height:42px;border-radius:7px}.new strong{margin-left:auto}.blogs{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.blog{background:#fff;border:1px solid #dce5e9}.blog img{width:100%;height:95px;object-fit:cover}.blog div{padding:9px}.blog h3{font-size:11px;margin:5px 0}.layout{display:grid;grid-template-columns:220px 1fr;gap:16px}.side,.panel{background:#fff;border:1px solid #dce5e9;border-radius:5px;padding:14px}.side a{display:block;padding:8px;border-radius:4px;font-size:11px}.side a:hover{background:#edf9ff;color:#118be1}.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}.field input,.field select,.field textarea{border:1px solid #d8e2e7;padding:10px;border-radius:4px;font:inherit}.field textarea{min-height:130px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:9px;border-bottom:1px solid #e4eaed;text-align:left;font-size:10px}.table th{background:#f5f8fa}.tablewrap{overflow:auto}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:15px}.stat{background:#fff;border:1px solid #dce5e9;border-radius:5px;padding:14px}.stat strong{font-size:20px;color:#118be1;display:block}.notice{padding:10px;background:#eaf7ff;border-radius:4px;color:#0a6598;margin-bottom:12px}.success{background:#eafbf2;color:#0b7845}.danger{background:#fff0f0;color:#a63131}.empty{text-align:center;padding:50px;background:#fff;border:1px dashed #cad8df}footer{background:#152935;color:#b9c6ce;margin-top:25px}.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.4fr;gap:28px;padding:34px 18px}.footgrid h4{color:#fff;font-size:12px;margin:0 0 9px}.footgrid p,.footgrid a{font-size:10px;line-height:1.6}.footgrid a{display:block;margin:5px 0}.social{margin-top:12px;color:#fff;font-size:17px}.news{display:flex}.news input{flex:1;min-width:0;border:0;padding:9px}.news button{border:0;background:#118fe2;color:#fff;padding:0 12px}.bottom{border-top:1px solid #29404d;padding:13px 0;font-size:9px}.bottom span{float:right}.adminnav{background:#101f2b;color:#fff}.adminnav .wrap{display:flex;gap:15px;overflow:auto}.adminnav a{padding:10px;font-size:10px}.auth{max-width:430px;margin:35px auto}.center{text-align:center}@media(max-width:900px){.toplinks{display:none}.heroIn{grid-template-columns:1fr}.heroArt{display:none}.grid,.shopgrid{grid-template-columns:repeat(2,1fr)}.newgrid,.blogs{grid-template-columns:repeat(2,1fr)}.footgrid{grid-template-columns:repeat(2,1fr)}.layout{grid-template-columns:1fr}.side{display:none}}@media(max-width:560px){.topin{gap:8px}.logo{font-size:17px}.actions>a:not(.btn){display:none}.hero h1{font-size:23px}.grid,.shopgrid{grid-template-columns:1fr 1fr}.newgrid,.blogs{grid-template-columns:1fr 1fr}.thumb{height:105px}.formgrid{grid-template-columns:1fr}.field.full{grid-column:auto}.stats{grid-template-columns:1fr 1fr}.footgrid{grid-template-columns:1fr 1fr}.bottom span{float:none;display:block;margin-top:6px}}
.productLayout{grid-template-columns:1.35fr 1fr}.productImage{height:340px}.articleImage{width:100%;max-height:300px;object-fit:cover}.spaced{margin-top:12px}

/* =========================================================
   CODEPEOPLE INDIA — REFERENCE HOMEPAGE THEME
   Layout intentionally follows the supplied marketplace sketch:
   dark utility bar -> white category bar -> turquoise hero ->
   dark promo strip -> compact 4-column product sections ->
   dense new releases -> blog -> dark footer.
   ========================================================= */
body{background:#edf2f4;color:#44525b;font-family:'Open Sans',Arial,sans-serif}
.wrap{max-width:760px;padding-left:0;padding-right:0}
.site-header{width:100%}
.topbar{height:30px;background:#1e303c;color:#bfcbd1}
.topbar-inner{height:30px;display:flex;align-items:center}
.brand{font-size:14px;color:#f5f7f8;white-space:nowrap}
.brand span{color:#18a9dd;font-weight:800;margin-right:3px}.brand b{color:#f0a72c}.brand strong{font-weight:700}
.top-links{display:flex;gap:18px;margin-left:auto;font-size:8px}
.top-links a,.top-account a{color:#c6d0d5}.top-account{display:flex;align-items:center;gap:12px;margin-left:18px;font-size:8px}
.top-account i{background:#e84a49;color:#fff;border-radius:10px;padding:1px 4px;font-style:normal}
.top-account .signup{background:#1bb65b;color:#fff;padding:4px 8px}
.navrow{height:29px;background:#fff;border-bottom:1px solid #dce3e6}
.nav-inner{height:29px;display:flex;align-items:center}
.main-links{display:flex;gap:16px;white-space:nowrap;font-size:8px;flex:1}
.main-links a{color:#53616a}
.mini-search{width:108px;height:17px;border:1px solid #e2e7e9;display:flex;background:#fafcfc}
.mini-search input{width:100%;border:0;padding:2px 6px;font-size:7px;outline:0}.mini-search button{border:0;background:#f2f5f6;color:#60717a;width:20px}
.ref-hero{height:201px;background:linear-gradient(110deg,#49c6c2 0%,#54c9c4 48%,#a8d9c7 100%);position:relative;overflow:hidden}
.ref-hero:before{content:"</>   PHP   ◇   JS   ◉   ◆   HTML";position:absolute;inset:0;color:#fff;opacity:.08;font-size:45px;letter-spacing:16px;line-height:110px;transform:rotate(-4deg)}
.hero-inner{height:100%;position:relative;z-index:1;text-align:center;padding-top:31px}
.hero-inner h1{color:#fff;font-size:18px;line-height:1.22;margin:0 0 15px;font-weight:600}
.hero-search{height:28px;display:flex;width:445px;margin:auto;background:#fff;border:1px solid #dce8e8}
.hero-search select{width:86px;border:0;border-right:1px solid #dce4e5;font-size:8px;padding:0 8px;color:#58666d;background:#fff}
.hero-search input{flex:1;border:0;outline:0;font-size:8px;padding:0 10px;color:#809096}
.hero-search button{width:28px;border:0;background:#fff;color:#6d7b82;font-size:14px}
.hero-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}.hero-actions a{border:1px solid rgba(255,255,255,.7);color:#fff;padding:6px 11px;font-size:8px;border-radius:2px}.hero-actions a:first-child{background:#20b45b;border-color:#20b45b}
.ref-promo{height:29px;background:#222837;color:#fff;text-align:center;font-size:10px;padding-top:8px}.ref-promo b{color:#1ab1e8}.ref-promo strong{font-weight:700}
.ref-main{padding-top:18px;padding-bottom:10px}
.ref-section{margin-bottom:15px}
.ref-head{height:24px;display:flex;align-items:center;justify-content:space-between}
.ref-head h2{font-size:13px;color:#617079;font-weight:600;margin:0}.ref-head h2 span{color:#2aadd3;margin-right:4px;font-size:14px}.ref-head a{background:#fff;border:1px solid #e0e7e9;padding:4px 7px;font-size:7px;color:#637078}
.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ref-card{background:#fff;border:1px solid #dfe6e8;min-width:0}
.ref-thumb{height:78px;position:relative;background:#dfe8eb;overflow:hidden}.ref-thumb img{width:100%;height:100%;object-fit:cover}.ref-thumb em{position:absolute;bottom:0;right:0;background:#f0474d;color:#fff;font-size:6px;font-style:normal;padding:3px 5px;font-weight:700}
.ref-card-title{height:31px;padding:5px 6px 2px;font-size:8px;line-height:1.25;color:#394a53;text-align:center;font-weight:600}
.ref-icons{height:17px;border-top:1px solid #eef1f2;border-bottom:1px solid #eef1f2;display:flex;align-items:center;gap:5px;padding:0 6px;color:#7f8b91;font-size:7px}.ref-icons .stars{margin-left:auto;color:#c5c9ca;letter-spacing:0}
.ref-meta{height:20px;padding:0 6px;display:flex;align-items:center;justify-content:space-between;font-size:7px;color:#8a969b}.ref-meta b{border:1px solid #e0e6e8;padding:2px 5px;color:#5d6a70;font-weight:600}
.release-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.release{height:39px;background:#fff;border:1px solid #dfe6e8;display:flex;align-items:center;padding:4px;gap:5px;min-width:0}.release img{width:30px;height:30px;object-fit:cover;border-radius:5px}.release-info{min-width:0;display:flex;flex-direction:column;line-height:1.1}.release-info strong{font-size:7px;color:#52616a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.release-info small{font-size:6px;color:#98a2a6;margin-top:2px}.release-info .stars{font-size:6px;color:#c6cbcd;margin-top:1px}.release>b{margin-left:auto;font-size:7px;color:#66757c;white-space:nowrap}
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.ref-blog{background:#fff;border:1px solid #dfe6e8}.ref-blog img{width:100%;height:62px;object-fit:cover}.ref-blog div{padding:6px 7px}.ref-blog small,.ref-blog time{display:block;font-size:6px;color:#94a0a5}.ref-blog strong{display:block;color:#52616a;font-size:8px;line-height:1.25;margin:4px 0 8px}
.ref-footer{background:#1b2d39;color:#91a1a9;margin-top:15px}.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;padding-top:26px;padding-bottom:25px}.footer-brand{font-size:14px}.footer-main p{font-size:8px;line-height:1.5}.footer-main h4{font-size:9px;color:#fff;margin:0 0 8px}.footer-main a{display:block;font-size:7px;margin:4px 0}.social{color:#fff;font-size:12px}.footer-bottom{border-top:1px solid #30424c;padding:10px 0;font-size:6px}.footer-bottom .wrap{display:flex;justify-content:space-between}
@media(max-width:800px){.wrap{max-width:94%}.top-links{display:none}.main-links{gap:9px;overflow:auto}.mini-search{width:90px}.hero-search{width:70%}}
@media(max-width:600px){.top-account>a:not(.signup){display:none}.brand{font-size:12px}.navrow{overflow:hidden}.main-links{font-size:7px}.mini-search{display:none}.ref-hero{height:210px}.hero-inner h1{font-size:16px}.hero-search{width:90%}.ref-grid{grid-template-columns:repeat(2,1fr)}.release-grid{grid-template-columns:repeat(2,1fr)}.blog-grid{grid-template-columns:repeat(2,1fr)}.footer-main{grid-template-columns:repeat(2,1fr);gap:18px}.footer-bottom .wrap{display:block}.footer-bottom span{display:block;margin:3px 0}}

/* FINAL REFERENCE MATCH OVERRIDE — blue/teal marketplace sketch, NOT gold/black */
:root{--nav:#1d303d;--blue:#168de0;--cyan:#46c6c4;--bg:#edf2f4;--line:#dce5e8;--text:#516069}
body{background:var(--bg)!important;color:var(--text)!important;font-family:Arial,'Open Sans',sans-serif!important}
.wrap{max-width:760px!important;padding-left:0!important;padding-right:0!important}
.topbar{background:#1d303d!important}.topbar-inner{height:30px!important}.navrow{height:29px!important}
.ref-shell{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:start}
.category-rail{background:#fff;border:1px solid #dfe6e8;border-radius:0 0 5px 5px;overflow:hidden;position:sticky;top:0;z-index:2}
.category-rail a{display:flex;align-items:center;min-height:23px;padding:3px 7px;color:#53636d;font-size:7px;border-bottom:1px solid #f0f2f3;white-space:nowrap}
.category-rail a span{width:18px;color:#168bd7;font-size:9px}.category-rail a small{margin-left:auto;color:#a6afb3;font-size:6px}
.category-rail .rail-active{background:#edf8ff;color:#168bd7;font-weight:700;border-radius:4px;margin:3px}
.market-content{min-width:0}
.ref-hero{height:201px!important;background:linear-gradient(105deg,#2db7bd 0%,#58cbc5 55%,#b5ddc9 100%)!important;position:relative;overflow:hidden;border-radius:0 0 4px 4px}
.ref-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 30%,rgba(255,255,255,.15),transparent 25%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.13),transparent 28%);opacity:.8}
.hero-copy{position:relative;z-index:3;text-align:center;padding-top:30px}
.hero-copy h1{color:#fff;font-size:16px;line-height:1.3;font-weight:600;margin:0 0 15px}
.hero-search{height:27px!important;width:370px!important}.hero-search select{width:80px!important;font-size:7px!important}.hero-search input{font-size:7px!important}.hero-search button{font-size:12px!important}
.hero-actions{margin-top:15px!important}.hero-actions a{padding:6px 9px!important;font-size:7px!important}.hero-actions .hero-green{background:#24b55d;border-color:#24b55d}
.hero-device{position:absolute;right:10px;top:22px;width:155px;height:150px;z-index:2;opacity:.92;transform:rotate(-3deg)}
.hero-device:before{content:"";position:absolute;left:22px;top:28px;width:112px;height:82px;border-radius:8px 8px 4px 4px;background:linear-gradient(135deg,#172e49,#0b7fbe);border:2px solid rgba(255,255,255,.35);box-shadow:0 16px 25px rgba(0,68,90,.25)}
.hero-device:after{content:"";position:absolute;left:11px;top:108px;width:135px;height:9px;background:#b8e8e7;border-radius:50%;transform:skewX(-28deg);box-shadow:0 8px 10px rgba(0,50,60,.22)}
.hero-device .screen{position:absolute;left:47px;top:47px;z-index:2;color:#fff;font-size:34px;font-weight:700}.float{position:absolute;z-index:4;color:#fff;background:#168ee0;border-radius:6px;padding:6px;font-size:8px;font-weight:700;box-shadow:0 5px 15px #126d8a44}.f1{right:0;top:15px;background:#8b45d8}.f2{left:0;top:58px;background:#e95750}.f3{right:2px;bottom:26px;background:#1a9d9e}
.ref-promo{height:29px!important;padding-top:8px!important}
.ref-main{padding-top:0!important}
.ref-section{margin-bottom:13px!important}
.ref-head{height:25px!important}.ref-head h2{font-size:12px!important;color:#65747b!important}.ref-head a{font-size:6px!important;padding:4px 6px!important}
.ref-grid{grid-template-columns:repeat(4,1fr)!important;gap:9px!important}
.ref-card{border:1px solid #dce5e8!important;border-radius:0!important}
.ref-thumb{height:70px!important}.ref-card-title{height:29px!important;font-size:7px!important}.ref-icons{height:16px!important}.ref-meta{height:19px!important;font-size:6px!important}
.ref-thumb em{font-size:5px!important;padding:2px 4px!important}
.release-grid{grid-template-columns:repeat(4,1fr)!important;gap:5px!important}.release{height:39px!important}.release img{width:29px!important;height:29px!important}.release-info strong{font-size:6px!important}.release-info small,.release-info .stars{font-size:5px!important}.release>b{font-size:6px!important}
.blog-grid{grid-template-columns:repeat(4,1fr)!important;gap:9px!important}.ref-blog img{height:57px!important}.ref-blog div{padding:5px!important}.ref-blog strong{font-size:7px!important}
.ref-footer{margin-top:0!important}
.footer-main{grid-template-columns:1.25fr 1fr 1fr 1fr!important;padding-top:25px!important;padding-bottom:23px!important}
.footer-main p,.footer-main a{font-size:7px!important}.footer-main h4{font-size:8px!important}
@media(max-width:800px){.wrap{max-width:94%!important}.ref-shell{grid-template-columns:105px 1fr;gap:7px}.category-rail a{font-size:6px}.hero-device{opacity:.35;right:-20px}.hero-copy{padding-top:28px}.hero-copy h1{font-size:14px}.hero-search{width:80%!important}}
@media(max-width:600px){.ref-shell{display:block}.category-rail{position:relative;display:flex;overflow:auto;margin-bottom:7px}.category-rail a{min-width:max-content;border-right:1px solid #edf0f1}.market-content{width:100%}.ref-hero{height:190px!important}.hero-device{display:none}.hero-copy{padding-top:25px}.hero-copy h1{font-size:13px}.hero-search{width:92%!important}.ref-grid{grid-template-columns:repeat(2,1fr)!important}.release-grid{grid-template-columns:repeat(2,1fr)!important}.blog-grid{grid-template-columns:repeat(2,1fr)!important}.footer-main{grid-template-columns:repeat(2,1fr)!important}}