/* CreedForge Public UI — shared desktop/mobile navigation and page shell */
:root{--cf-accent:#e94560;--cf-accent-dark:#c92c48;--cf-bg:#f5f6fa;--cf-surface:#fff;--cf-border:#e5e7ee;--cf-text:#17182d;--cf-muted:#707488;--cf-shadow:0 10px 28px rgba(23,24,45,.06)}
*{box-sizing:border-box}
html,body{width:100%;min-height:100%;margin:0;overflow-x:hidden}
body{display:block!important;background:linear-gradient(180deg,#f7f8fb 0%,#f1f3f7 100%)!important;color:var(--cf-text)}
.app{width:100%!important;max-width:none!important;min-height:100vh!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;padding:0 0 30px!important;display:flex!important;flex-direction:column!important;background:transparent!important}
.top-bar{width:100%!important;height:76px!important;min-height:76px!important;position:sticky!important;top:0!important;left:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 max(24px,calc((100% - 1280px)/2))!important;background:rgba(255,255,255,.94)!important;border:0!important;border-bottom:1px solid rgba(225,227,235,.9)!important;box-shadow:0 2px 18px rgba(18,23,38,.035)!important;backdrop-filter:blur(18px)!important;z-index:1000!important}
.top-bar .logo{display:flex!important;align-items:center!important;gap:11px!important;text-decoration:none!important;min-width:0}
.top-bar .logo i{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:13px!important;background:linear-gradient(135deg,#fff0f3,#ffe2e8)!important;color:var(--cf-accent)!important;font-size:17px!important;box-shadow:inset 0 0 0 1px #f5d3da!important}
.top-bar .logo h2{font-family:Poppins,'Hind Siliguri',sans-serif!important;font-size:18px!important;line-height:1.1!important;font-weight:800!important;letter-spacing:-.4px!important;color:var(--cf-text)!important;margin:0!important}
.top-bar .logo h2 span{color:var(--cf-accent)!important}
.top-bar .logo small{display:block!important;margin-top:3px!important;font-size:9px!important;color:#969bab!important;line-height:1!important}
.top-bar .right-icons{display:flex!important;align-items:center!important;gap:8px!important}
.top-bar .right-icons a,.top-bar .right-icons>i{width:40px!important;height:40px!important;display:grid!important;place-items:center!important;border:1px solid var(--cf-border)!important;border-radius:12px!important;background:#fff!important;color:#70758a!important;text-decoration:none!important;transition:.2s!important;cursor:pointer!important}
.top-bar .right-icons a:hover,.top-bar .right-icons>i:hover{color:var(--cf-accent)!important;border-color:#efbcc6!important;background:#fff5f7!important;transform:translateY(-1px)}
.page-content{width:min(1180px,calc(100% - 48px))!important;max-width:1180px!important;min-height:0!important;margin:0 auto!important;padding:30px 0 30px!important;overflow:visible!important;background:transparent!important;flex:0 0 auto!important}
.header{width:100%!important;max-width:none!important;margin:0 0 20px!important;padding:0!important}
.navigation{position:fixed!important;top:88px!important;bottom:auto!important;left:50%!important;transform:translateX(-50%)!important;width:min(560px,calc(100% - 48px))!important;height:60px!important;padding:5px!important;display:flex!important;align-items:center!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(224,226,234,.95)!important;border-radius:17px!important;box-shadow:0 10px 28px rgba(18,23,38,.10)!important;backdrop-filter:blur(18px)!important;z-index:1100!important}
.navigation .nav-shell{width:100%!important;height:100%!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:5px!important;align-items:center!important}
.navigation .nav-item{position:relative!important;min-width:0!important;width:auto!important;height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;gap:8px!important;border-radius:12px!important;color:#74798b!important;text-decoration:none!important;font-size:11px!important;font-weight:700!important;transition:all .2s ease!important}
.navigation .nav-item .nav-icon{width:27px!important;height:27px!important;display:grid!important;place-items:center!important;font-size:15px!important;line-height:1!important;transform:none!important}
.navigation .nav-label{font-size:11px!important;line-height:1.1!important;font-weight:750!important;white-space:nowrap!important}
.navigation .nav-item:hover{color:var(--cf-accent)!important;background:#fff5f7!important;transform:translateY(-1px)}
.navigation .nav-item.active{color:var(--cf-accent)!important;background:linear-gradient(135deg,#fff0f3,#ffe7eb)!important;box-shadow:inset 0 0 0 1px #f3d0d8!important}
.navigation .nav-item.active:before{content:''!important;position:absolute!important;top:5px!important;left:50%!important;width:18px!important;height:3px!important;border-radius:99px!important;background:var(--cf-accent)!important;transform:translateX(-50%)!important}
.navigation .nav-item:focus-visible{outline:3px solid rgba(233,69,96,.16)!important;outline-offset:2px}
/* Desktop content is deliberately given room below the fixed navigation. */
@media(min-width:701px){
 .page-content{padding-top:96px!important}
 .page-content>.hero,.page-content>.category-layout,.page-content>.profile-wrap,.page-content>.card,.page-content>.category-shortcuts,.page-content>.search-bar,.page-content>.why-us,.page-content>.project-feed,.page-content>.custom-cta{max-width:1180px;margin-left:auto;margin-right:auto}
 .hero{min-height:260px!important;padding:32px 36px!important;border-radius:22px!important}
 .hero h1{font-size:32px!important;max-width:700px}
 .hero p{font-size:14px!important;max-width:620px}
 .hero-actions{margin-bottom:24px!important}
 .hero-btn{min-height:44px!important;padding:11px 20px!important;font-size:12px!important}
 .project-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
 .project-card{min-height:230px!important}
 .category-layout{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;gap:18px!important;height:auto!important}
 .category-sidebar{width:auto!important;max-height:none!important;position:sticky;top:164px!important}
 .subcategory-area{min-width:0!important;overflow:visible!important}
 .profile-wrap{max-width:1180px!important}
 .profile-hero{padding:28px!important;border-radius:22px!important}
 .profile-name h1{font-size:24px!important}
 .profile-card{padding:22px!important;border-radius:20px!important}
 .profile-actions{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}
}
@media(min-width:1050px){
 .project-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
/* Mobile: full-width real mobile layout, not a 390px simulated phone. */
@media(max-width:700px){
 body{background:#f6f7fa!important}
 .app{width:100%!important;max-width:none!important;min-height:100dvh!important;padding-bottom:84px!important}
 .top-bar{height:66px!important;min-height:66px!important;padding:0 13px!important}
 .top-bar .logo{gap:8px!important}
 .top-bar .logo i{width:36px!important;height:36px!important;border-radius:11px!important;font-size:15px!important}
 .top-bar .logo h2{font-size:16px!important}
 .top-bar .logo small{font-size:7.5px!important}
 .top-bar .right-icons{gap:5px!important}
 .top-bar .right-icons a,.top-bar .right-icons>i{width:34px!important;height:34px!important;border-radius:10px!important;font-size:13px!important}
 .page-content{width:100%!important;max-width:none!important;padding:16px 13px 20px!important}
 .navigation{top:auto!important;bottom:10px!important;left:12px!important;right:12px!important;transform:none!important;width:auto!important;height:66px!important;padding:6px 7px!important;border-radius:18px!important;box-shadow:0 12px 32px rgba(18,23,38,.14)!important}
 .navigation .nav-item{height:52px!important;flex-direction:column!important;gap:4px!important;border-radius:13px!important}
 .navigation .nav-item .nav-icon{width:auto!important;height:auto!important;font-size:16px!important}
 .navigation .nav-label{font-size:9px!important}
 .navigation .nav-item.active:before{top:4px!important;width:17px!important;height:3px!important}
 .header h2{font-size:19px!important}
 .hero{border-radius:18px!important;padding:20px 17px!important}
 .hero h1{font-size:21px!important}
 .hero p{font-size:11.5px!important}
 .category-layout{display:flex!important;flex-direction:column!important;height:auto!important;gap:10px!important}
 .category-sidebar{width:100%!important;max-height:none!important;display:flex!important;gap:6px!important;overflow-x:auto!important;padding:6px!important;position:static!important}
 .cat-main-item{flex:0 0 auto!important;border-left:0!important;border-radius:10px!important;padding:9px 12px!important}
 .subcategory-area{width:100%!important;overflow:visible!important}
 .profile-hero{padding:18px!important;border-radius:18px!important}
 .profile-name h1{font-size:18px!important}
 .profile-stats{grid-template-columns:repeat(2,1fr)!important}
 .profile-actions{grid-template-columns:repeat(2,1fr)!important}
 .profile-card{padding:14px!important}
 .project-item{min-width:0!important}
 .project-actions{display:flex!important;flex-wrap:wrap!important}
}
@media(max-width:380px){
 .page-content{padding-left:10px!important;padding-right:10px!important}
 .navigation{left:8px!important;right:8px!important}
 .navigation .nav-label{font-size:8px!important}
}


/* Final global responsive normalization — prevents legacy phone-shell CSS from affecting desktop */
html,body{width:100%!important;min-width:0!important;overflow-x:hidden!important}
@media(min-width:701px){
 body{background:linear-gradient(180deg,#f7f8fb 0%,#eef1f6 100%)!important}
 .app{width:100%!important;max-width:none!important;min-width:0!important;min-height:100vh!important;height:auto!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
 .top-bar{position:sticky!important;top:0!important}
 .page-content{width:min(1240px,calc(100% - 64px))!important;max-width:1240px!important;margin:0 auto!important;padding-top:104px!important}
 .navigation{top:92px!important;width:min(620px,calc(100% - 64px))!important;height:58px!important;border-radius:16px!important}
 .navigation .nav-item{height:46px!important;gap:7px!important}
 .navigation .nav-icon{width:26px!important;height:26px!important;font-size:15px!important}
 .navigation .nav-label{font-size:11px!important}
}
@media(min-width:1200px){
 .page-content{width:min(1240px,calc(100% - 80px))!important}
 .project-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
}
@media(max-width:700px){
 body{background:#f6f7fa!important}
 .app{width:100%!important;max-width:none!important;min-height:100dvh!important;height:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 .page-content{width:100%!important;max-width:none!important;margin:0!important;padding:16px 13px 96px!important}
 .navigation{left:10px!important;right:10px!important;bottom:9px!important;top:auto!important;width:auto!important;height:66px!important;border-radius:18px!important}
 .navigation .nav-shell{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .navigation .nav-item{height:52px!important;flex-direction:column!important;gap:3px!important}
 .navigation .nav-item .nav-icon{width:auto!important;height:auto!important;font-size:16px!important}
 .navigation .nav-label{font-size:9px!important}
}

/* ===== CreedForge unified premium-blue theme ===== */
:root{--cf-accent:#2563eb;--cf-accent-dark:#1d4ed8;--cf-blue:#2563eb;--cf-blue-2:#1d4ed8;--cf-navy:#0f2f72;--cf-bg:#f6f9ff;--cf-surface:#fff;--cf-border:#dfe7f3;--cf-text:#172033;--cf-muted:#64748b;--cf-shadow:0 14px 36px rgba(15,47,114,.08)}
body{font-family:'Hind Siliguri',Poppins,sans-serif!important;background:linear-gradient(180deg,#f8fbff 0%,#eef4fc 100%)!important;color:var(--cf-text)!important}
.top-bar .logo img{width:42px!important;height:42px!important;object-fit:contain!important;border-radius:12px!important;background:#fff!important;padding:4px!important;box-shadow:0 4px 14px rgba(37,99,235,.12)!important}
.top-bar .logo i{background:linear-gradient(135deg,#eff6ff,#dbeafe)!important;color:#2563eb!important}
.header h1,.header h2,.section-title,.section-heading,.card-head h2,.card-head h3,.profile-card-title{font-family:'Hind Siliguri',Poppins,sans-serif!important;color:#14213d!important}
.card,.box,.summary-card,.payment-main,.payment-history,.vault-card,.timeline-card,.success-card,.checkout-grid>*,.step1-project-card,.step1-demo-card,.price-box,.total-box,.search-box,.category-shortcuts,.profile-card,.profile-hero,.profile-stat,.project-item,.result-item,.wishlist-item,.auth-card{background:rgba(255,255,255,.96)!important;border:1px solid var(--cf-border)!important;border-radius:20px!important;box-shadow:var(--cf-shadow)!important}
.btn-primary,.primary,.auth-btn,.pd-submit,.hero-btn,.truck-button{background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;border:0!important;box-shadow:0 10px 22px rgba(37,99,235,.22)!important}
.btn-secondary,.secondary{background:#fff!important;color:#1d4ed8!important;border:1px solid #cbd9ef!important}
input,select,textarea,.select,.auth-input{border:1px solid #d9e2ef!important;background:#fff!important;color:#172033!important;border-radius:12px!important;outline:none!important}
input:focus,select:focus,textarea:focus,.auth-input:focus{border-color:#7da6ef!important;box-shadow:0 0 0 4px rgba(37,99,235,.10)!important}
.badge,.chip,.status-pill,.status-badge{border-radius:999px!important}
.blue,.active,.selected{color:#2563eb!important}
.tabs,.seg{border:1px solid #dfe7f3!important;background:#f7faff!important;border-radius:14px!important}
.tabs a.active,.seg .active{background:#2563eb!important;color:#fff!important;border-radius:11px!important}
.progress-track{background:#e7eef8!important}.progress-fill{background:linear-gradient(90deg,#2563eb,#60a5fa)!important}
.breadcrumb a,.back,.view-all,.auth-link,.see-all{color:#2563eb!important}
.auth-body{background:linear-gradient(135deg,#eef5ff,#f8fbff)!important}
.auth-wrap{min-height:100dvh!important}.auth-card{border-radius:24px!important}.auth-brand,.brand{color:#0f2f72!important}.auth-btn{border-radius:13px!important}
.action-row,.actions,.project-actions{gap:10px!important}
.status-badge,.status-pill{padding:6px 10px!important;font-weight:700!important}
@media(max-width:700px){.card,.box,.summary-card,.payment-main,.payment-history,.vault-card,.timeline-card,.success-card,.profile-card,.profile-hero{border-radius:17px!important}.top-bar .logo img{width:36px!important;height:36px!important}.page-content{padding-bottom:100px!important}}