:root{--cf-primary:#1b3cff;--cf-secondary:#5b0ea6;--cf-accent:#7b3fe4;--cf-dark:#08081a;--cf-card:#10102a;--cf-border:#1e1e40;--cf-text-muted:#88a}body{background-color:var(--cf-dark);color:#e0e0f0;font-family:Space Grotesk,Segoe UI,system-ui,sans-serif}.navbar-codefreela{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--cf-border);background:#0f0f1af2}.navbar-brand-logo{background:linear-gradient(90deg,#1b3cff 0%,#7b3fe4 50%,#5b0ea6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.4rem;font-weight:700}.hero-section{background:linear-gradient(135deg,#0f0f1a 0%,#1a1a2e 50%,#0d1b2a 100%);align-items:center;min-height:90vh;display:flex;position:relative;overflow:hidden}.hero-section:before{content:"";background:radial-gradient(circle,#1b3cff2e 0%,#0000 70%);border-radius:50%;width:600px;height:600px;position:absolute;top:-100px;right:-100px}.hero-badge{color:#6b8fff;background:#1b3cff26;border:1px solid #1b3cff59;border-radius:20px;margin-bottom:1rem;padding:6px 16px;font-size:.85rem;font-weight:500;display:inline-block}.hero-title{color:#fff;font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.15}.gradient-text{background:linear-gradient(135deg,#1b3cff,#7b3fe4,#5b0ea6);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.card-codefreela{background:var(--cf-card);border:1px solid var(--cf-border);border-radius:12px;transition:all .3s}.card-codefreela:hover{border-color:#1b3cff66;transform:translateY(-4px);box-shadow:0 12px 40px #1b3cff26}.btn-cf-primary{color:#fff;background:linear-gradient(135deg,#1b3cff,#5b0ea6);border:none;border-radius:8px;padding:10px 24px;font-weight:600;transition:opacity .2s}.btn-cf-primary:hover{opacity:.88;color:#fff}.btn-cf-outline{border:1px solid var(--cf-primary);color:#6b8fff;background:0 0;border-radius:8px;padding:10px 24px;font-weight:600;transition:all .2s}.btn-cf-outline:hover{background:var(--cf-primary);color:#fff}.auth-container{background:var(--cf-dark);align-items:center;min-height:100vh;display:flex}.auth-card{background:var(--cf-card);border:1px solid var(--cf-border);border-radius:16px;width:100%;max-width:440px;margin:0 auto;padding:2.5rem}.form-control,.form-select{border:1px solid var(--cf-border);color:#e0e0e0;background:#0f0f1a;border-radius:8px;padding:10px 14px}.form-control:focus,.form-select:focus{border-color:var(--cf-primary);color:#e0e0f0;background:#08081a;box-shadow:0 0 0 3px #1b3cff33}.project-card{background:var(--cf-card);border:1px solid var(--cf-border);cursor:pointer;border-radius:12px;padding:1.5rem;transition:all .3s}.project-card:hover{border-color:#1b3cff66;box-shadow:0 8px 30px #1b3cff1f}.category-badge{border-radius:20px;padding:4px 12px;font-size:.75rem;font-weight:600;display:inline-block}.badge-system{color:#6b8fff;background:#1b3cff33}.badge-website{color:#a060f0;background:#5b0ea633}.badge-app{color:#b07fff;background:#7b3fe433}.badge-uxui{color:#ffce56;background:#ffce5633}.badge-design{color:#ff9f40;background:#ff9f4033}.badge-content{color:#36a2eb;background:#36a2eb33}.stat-card{background:var(--cf-card);border:1px solid var(--cf-border);text-align:center;border-radius:12px;padding:1.5rem}.stat-number{background:linear-gradient(135deg,#1b3cff,#7b3fe4);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.5rem;font-weight:700}.pricing-card{background:var(--cf-card);border:1px solid var(--cf-border);text-align:center;border-radius:16px;padding:2rem;transition:all .3s}.pricing-card.featured{border-color:var(--cf-primary);background:linear-gradient(135deg,#1b3cff1a,#5b0ea60d)}.pricing-price{color:#fff;font-size:3rem;font-weight:800}.sidebar{background:var(--cf-card);border-right:1px solid var(--cf-border);z-index:100;width:260px;min-height:100vh;padding:1.5rem 0;position:fixed;top:0;left:0}.sidebar-link{color:var(--cf-text-muted);align-items:center;gap:12px;padding:12px 1.5rem;text-decoration:none;transition:all .2s;display:flex}.sidebar-link:hover,.sidebar-link.active{color:#6b8fff;background:#1b3cff1a}.main-content{margin-left:260px;padding:2rem}.footer-codefreela{background:var(--cf-card);border-top:1px solid var(--cf-border);padding:3rem 0 1.5rem}[role=button]:hover .avatar-overlay{opacity:1!important}