.project-detail-container{min-height:100vh;background:linear-gradient(135deg,var(--theme-backgroundDark,#0f0f23) 0,var(--theme-backgroundSecondary,#1a1a3e) 50%,var(--theme-backgroundDark,#0f0f23) 100%);padding:8rem 0 4rem;position:relative;transition:background .3s ease;width:100%;box-sizing:border-box;overflow-x:hidden}.project-detail-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(0,212,255,.05) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(124,58,237,.05) 0,transparent 50%)}.container{max-width:1400px;margin:0 auto;padding:0 2rem;position:relative;z-index:2;width:100%;box-sizing:border-box}.project-detail-header{margin-bottom:3rem}.btn-back{display:inline-flex;align-items:center;gap:.5rem;color:var(--theme-textSecondary,rgba(255,255,255,.7));text-decoration:none;font-weight:500;transition:all .3s ease;padding:.8rem 1.5rem;border-radius:25px;background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);border:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent)}.btn-back:hover{color:var(--theme-primary,#00d4ff);background:color-mix(in srgb,var(--theme-primary,#00d4ff) 10%,transparent);border-color:color-mix(in srgb,var(--theme-primary,#00d4ff) 30%,transparent);transform:translateX(-5px)}.project-detail-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:4rem;gap:4rem;align-items:start;width:100%;box-sizing:border-box}.project-screenshot-section{position:-webkit-sticky;position:sticky;top:2rem;width:100%;max-width:100%;box-sizing:border-box;min-width:0;overflow:hidden}.screenshot-container{background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;border:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent);overflow:hidden;transition:background .3s ease,border-color .3s ease;width:100%;box-sizing:border-box}.screenshot-placeholder{aspect-ratio:16/10;background:linear-gradient(135deg,var(--theme-backgroundSecondary,#1a1a3e) 0,var(--theme-backgroundTertiary,#2d1b69) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem;border-bottom:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent);transition:background .3s ease}.project-icon-large{font-size:4rem;margin-bottom:1rem;filter:drop-shadow(0 0 30px rgba(0,212,255,.5))}.screenshot-placeholder p{color:var(--theme-textPrimary,white);font-size:1.2rem;font-weight:600;margin-bottom:.5rem;transition:color .3s ease}.screenshot-placeholder small{color:var(--theme-textMuted,rgba(255,255,255,.6));transition:color .3s ease}.main-screenshot{width:100%;max-width:100%;aspect-ratio:16/10;position:relative;overflow:hidden;background:color-mix(in srgb,var(--theme-backgroundSecondary,#1a1a3e) 50%,transparent);display:flex;align-items:center;justify-content:center}.project-screenshot-image{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;object-position:center;transition:transform .3s ease;display:block}.main-screenshot:hover .project-screenshot-image{transform:scale(1.02)}.additional-screenshots{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,150px));grid-gap:1px;gap:1px;background:rgba(255,255,255,.1);padding:.5rem;justify-content:start}.screenshot-thumb{background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);padding:.5rem;text-align:center;transition:all .3s ease;cursor:pointer;border-radius:8px;overflow:hidden;position:relative;aspect-ratio:16/10}.screenshot-thumb:hover{background:color-mix(in srgb,var(--theme-primary,#00d4ff) 10%,transparent);transform:translateY(-2px)}.screenshot-thumb.active{background:color-mix(in srgb,var(--theme-primary,#00d4ff) 20%,transparent);border:2px solid var(--theme-primary,#00d4ff)}.thumb-image{width:100%;height:100%;object-fit:cover;border-radius:4px}.thumb-icon{font-size:1.5rem;margin-bottom:.5rem}.screenshot-thumb span{color:var(--theme-textSecondary,rgba(255,255,255,.7));font-size:.9rem;font-weight:500;transition:color .3s ease}.project-details-section{color:var(--theme-textPrimary,white);transition:color .3s ease;width:100%;box-sizing:border-box;min-width:0}.detail-header{margin-bottom:2rem;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}.detail-category{color:var(--theme-primary,#00d4ff);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:0;transition:color .3s ease;width:100%;text-align:left}.detail-title{font-size:2rem;font-weight:700;margin-bottom:0;background:linear-gradient(45deg,var(--theme-primary,#00d4ff),var(--theme-secondary,#7c3aed));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;word-wrap:break-word;overflow-wrap:break-word;max-width:100%;display:block;width:100%;text-align:left}.detail-status-badge{display:inline-block;padding:.5rem 1.5rem;border-radius:25px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;align-self:flex-start;width:-moz-fit-content;width:fit-content;text-align:left}.detail-status-badge.completed{background:rgba(34,197,94,.2);color:#22c55e;border:1px solid rgba(34,197,94,.3)}.detail-status-badge.in-progress{background:rgba(251,191,36,.2);color:#fbbf24;border:1px solid rgba(251,191,36,.3)}[data-theme=light] .detail-status-badge.in-progress{background:rgba(217,119,6,.15);color:#d97706;border:1px solid rgba(217,119,6,.4)}.detail-status-badge.ongoing{background:rgba(59,130,246,.2);color:#3b82f6;border:1px solid rgba(59,130,246,.3)}.detail-summary{font-size:1.2rem;line-height:1.7;color:var(--theme-textSecondary,rgba(255,255,255,.9));margin-top:1rem;margin-bottom:2rem;font-weight:500;transition:color .3s ease;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}.project-links-section{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.project-link{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;border-radius:12px;text-decoration:none;font-weight:600;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.project-link-live{background:linear-gradient(135deg,var(--theme-primary,#00d4ff),var(--theme-secondary,#7c3aed));color:white;box-shadow:0 4px 14px color-mix(in srgb,var(--theme-primary,#00d4ff) 35%,transparent),0 2px 4px color-mix(in srgb,var(--theme-textPrimary,black) 10%,transparent)}.project-link-live:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.project-link-live:hover:before{left:100%}.project-link-live:hover{transform:translateY(-3px);box-shadow:0 12px 28px color-mix(in srgb,var(--theme-primary,#00d4ff) 50%,transparent),0 4px 8px color-mix(in srgb,var(--theme-textPrimary,black) 15%,transparent);color:white}.project-link-source{background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);color:var(--theme-textPrimary,white);border:2px solid color-mix(in srgb,var(--theme-primary,#00d4ff) 50%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.project-link-source:hover{background:color-mix(in srgb,var(--theme-primary,#00d4ff) 20%,transparent);border-color:var(--theme-primary,#00d4ff);transform:translateY(-3px);box-shadow:0 12px 28px color-mix(in srgb,var(--theme-primary,#00d4ff) 30%,transparent),0 4px 8px color-mix(in srgb,var(--theme-textPrimary,black) 10%,transparent);color:var(--theme-textPrimary,white)}.project-link-icon{font-size:1.2rem;line-height:1}.project-link-text{flex:1 1}.project-link-arrow{font-size:1rem;opacity:.8;transition:transform .3s ease,opacity .3s ease}.project-link:hover .project-link-arrow{transform:translate(3px,-3px);opacity:1}.detail-section{margin-bottom:3rem;padding:2rem;background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);border-radius:20px;border:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent);transition:all .3s ease}.detail-section:hover{background:color-mix(in srgb,var(--theme-textPrimary,white) 8%,transparent);border-color:color-mix(in srgb,var(--theme-primary,#00d4ff) 20%,transparent)}.detail-section-heading{color:var(--theme-textPrimary,white);font-size:1.5rem;margin-bottom:1.25rem;font-weight:700;background:linear-gradient(135deg,var(--theme-primary,#00d4ff),var(--theme-secondary,#7c3aed));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:color .3s ease}.detail-section-text{font-size:1.1rem;line-height:1.8;color:var(--theme-textSecondary,rgba(255,255,255,.8));transition:color .3s ease;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}.problem-paragraph{margin:.75rem 0}.problem-bullet-point{margin:.5rem 0;padding-left:1rem;color:var(--theme-textPrimary,white);font-weight:500}.solution-paragraph{margin:.75rem 0}.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2rem;gap:2rem;margin-bottom:3rem;padding:2rem;background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);border-radius:15px;border:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent);transition:background .3s ease,border-color .3s ease}.detail-stat-item{text-align:center}.detail-stat-label{color:var(--theme-textMuted,rgba(255,255,255,.6));font-size:.85rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.detail-stat-label,.detail-stat-value{display:block;transition:color .3s ease}.detail-stat-value{color:var(--theme-primary,#00d4ff);font-size:1rem;font-weight:600}.detail-technologies{margin-bottom:3rem}.detail-section-title{color:var(--theme-textPrimary,white);font-size:1.15rem;margin-bottom:1.25rem;font-weight:600;transition:color .3s ease}.detail-tech-stack-grid{display:flex;flex-wrap:wrap;gap:1rem;width:100%;box-sizing:border-box}.detail-tech-badge{background:rgba(124,58,237,.2);color:#c084fc;padding:.7rem 1.25rem;border-radius:25px;font-size:.9rem;font-weight:500;border:1px solid rgba(124,58,237,.3);transition:all .3s ease}.detail-tech-badge:hover{background:rgba(124,58,237,.3);transform:translateY(-2px)}.detail-features{margin-bottom:3rem}.detail-features-list{list-style:none;padding:0;margin:0}.detail-feature-item{position:relative;padding:.75rem 0 .75rem 2rem;color:var(--theme-textPrimary,white);font-size:1rem;line-height:1.7;border-bottom:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent);transition:color .3s ease,border-color .3s ease}.detail-feature-item:before{content:"•";position:absolute;left:0;top:.75rem;color:var(--theme-primary,#00d4ff);font-weight:700;font-size:1.2rem;transition:color .3s ease}.detail-feature-item:last-child{border-bottom:none}.tech-categories{display:flex;flex-direction:column;gap:1rem}.tech-category{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}.tech-category-label{color:var(--theme-textPrimary,white);font-size:1rem;font-weight:600;min-width:100px;transition:color .3s ease}.tech-category-value{color:var(--theme-textSecondary,rgba(255,255,255,.8));font-size:1rem;line-height:1.6;transition:color .3s ease}.detail-results-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.detail-result-item{display:flex;align-items:flex-start;gap:.75rem;color:var(--theme-textPrimary,white);font-size:1rem;line-height:1.7;transition:color .3s ease}.detail-result-item .check-icon{color:var(--theme-primary,#00d4ff);font-weight:700;font-size:1.1rem;flex-shrink:0;margin-top:.1rem}.outcome-summary{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent);font-size:1.1rem;line-height:1.8;color:var(--theme-textSecondary,rgba(255,255,255,.8));font-style:italic;transition:color .3s ease}.detail-challenges{margin-bottom:3rem}.detail-challenge-item{background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);padding:1.75rem;border-radius:15px;margin-bottom:1.5rem;border:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent);transition:background .3s ease,border-color .3s ease}.detail-challenge-title{color:var(--theme-primary,#00d4ff);margin-bottom:1rem;font-size:1.05rem;font-weight:600;transition:color .3s ease}.detail-challenge-text{color:var(--theme-textSecondary,rgba(255,255,255,.8));font-size:.95rem;line-height:1.6;transition:color .3s ease}.project-cta{margin-top:3rem;padding:3rem;background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);border-radius:24px;border:1px solid color-mix(in srgb,var(--theme-textPrimary,white) 10%,transparent);text-align:center;transition:all .3s ease}.cta-heading{color:var(--theme-textPrimary,white);font-size:1.75rem;margin-bottom:1rem;font-weight:700;background:linear-gradient(135deg,var(--theme-primary,#00d4ff),var(--theme-secondary,#7c3aed));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:color .3s ease}.cta-subtitle{color:var(--theme-textSecondary,rgba(255,255,255,.8));font-size:1.1rem;margin-bottom:2rem;line-height:1.7;transition:color .3s ease}.cta-buttons{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}.project-detail-btn-primary,.project-detail-btn-secondary{padding:1.1rem 2.5rem;font-size:1rem;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-transform:none;letter-spacing:.02em;text-decoration:none;display:inline-block;text-align:center;position:relative;overflow:hidden}.project-detail-btn-primary{background:linear-gradient(135deg,var(--theme-primary,#00d4ff),var(--theme-secondary,#7c3aed));color:white;box-shadow:0 4px 14px color-mix(in srgb,var(--theme-primary,#00d4ff) 35%,transparent),0 2px 4px color-mix(in srgb,var(--theme-textPrimary,black) 10%,transparent)}.project-detail-btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.project-detail-btn-primary:hover:before{left:100%}.project-detail-btn-primary:hover{transform:translateY(-4px);box-shadow:0 12px 28px color-mix(in srgb,var(--theme-primary,#00d4ff) 50%,transparent),0 4px 8px color-mix(in srgb,var(--theme-textPrimary,black) 15%,transparent);color:white}.project-detail-btn-secondary{background:color-mix(in srgb,var(--theme-textPrimary,white) 5%,transparent);color:var(--theme-textPrimary,white);border:2px solid color-mix(in srgb,var(--theme-primary,#00d4ff) 50%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.project-detail-btn-secondary:hover{background:color-mix(in srgb,var(--theme-primary,#00d4ff) 20%,transparent);border-color:var(--theme-primary,#00d4ff);transform:translateY(-4px);box-shadow:0 12px 28px color-mix(in srgb,var(--theme-primary,#00d4ff) 30%,transparent),0 4px 8px color-mix(in srgb,var(--theme-textPrimary,black) 10%,transparent);color:var(--theme-textPrimary,white)}.project-detail-btn-secondary.project-detail-btn-disabled{opacity:.5;cursor:not-allowed}.project-detail-btn-secondary.project-detail-btn-disabled:hover{transform:none;background:transparent;border-color:rgba(255,255,255,.3)}@media (max-width:1024px){.project-detail-content{grid-template-columns:1fr;gap:3rem}.project-screenshot-section{position:static}.detail-stats{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.project-detail-container{padding:7rem 0 3rem;overflow-x:hidden}.project-detail-container .container{padding:0 1rem}.project-detail-content{gap:2rem}.detail-header{gap:.75rem}.detail-title{font-size:1.75rem;margin-bottom:0}.detail-status-badge{margin-top:0}.detail-summary{font-size:1.1rem}.project-links-section{flex-direction:column;gap:.75rem}.project-link{width:100%;justify-content:center;padding:.9rem 1.25rem;font-size:.95rem}.detail-section{padding:1.5rem}.detail-section-heading{font-size:1.3rem}.detail-section-text{font-size:1rem}.tech-category-label{min-width:80px;font-size:.9rem}.tech-category-value{font-size:.95rem}.project-cta{padding:2rem}.cta-heading{font-size:1.5rem;margin-bottom:1.5rem}.detail-stats{grid-template-columns:1fr;gap:1rem;padding:1.5rem}.screenshot-placeholder{padding:2rem 1.5rem}.project-icon-large{font-size:3rem}.detail-challenge-item{padding:1.5rem}.detail-section-title{font-size:1.05rem}.project-cta{flex-direction:column;gap:1rem}.project-detail-btn-primary,.project-detail-btn-secondary{width:100%;text-align:center}}@media (max-width:480px){.project-detail-container{padding:6rem 0 2.5rem;overflow-x:hidden}.project-detail-container .container{padding:0 .75rem}.project-detail-header{margin-bottom:2rem}.btn-back{padding:.6rem 1rem;font-size:.9rem}.project-detail-content{gap:1.5rem}.detail-header{gap:.5rem;margin-bottom:1.5rem}.detail-title{font-size:1.5rem;line-height:1.3;margin-bottom:0}.detail-status-badge{margin-top:0;padding:.4rem 1.2rem;font-size:.7rem}.detail-category{font-size:.75rem}.detail-description{margin-bottom:2rem}.detail-summary{font-size:1rem}.detail-section{padding:1.25rem}.detail-section-heading{font-size:1.2rem;margin-bottom:1rem}.detail-section-text{font-size:.95rem}.tech-category{flex-direction:column;align-items:flex-start;gap:.5rem}.tech-category-label{min-width:auto;font-size:.85rem}.tech-category-value{font-size:.9rem}.project-cta{padding:1.5rem;margin-top:2rem}.cta-heading{font-size:1.3rem;margin-bottom:1.25rem}.cta-buttons{flex-direction:column;align-items:stretch;gap:1rem}.project-detail-btn-primary,.project-detail-btn-secondary{width:100%}.detail-stats{padding:1rem;gap:.75rem}.detail-stat-label{font-size:.75rem}.detail-stat-value{font-size:.9rem}.detail-section-title{font-size:1rem;margin-bottom:1rem}.detail-tech-badge{padding:.6rem 1rem;font-size:.85rem}.screenshot-placeholder{padding:1.5rem 1rem}.project-icon-large{font-size:2.5rem;margin-bottom:.75rem}.screenshot-placeholder p{font-size:1rem}.screenshot-thumb{padding:1rem}.thumb-icon{font-size:1.2rem}.screenshot-thumb span{font-size:.8rem}.detail-challenge-item{padding:1rem}.detail-challenge-title{font-size:.95rem}.detail-challenge-text{font-size:.85rem}.project-detail-btn-primary,.project-detail-btn-secondary{padding:.9rem 1.5rem;font-size:.9rem}}.skeleton-loading{background:linear-gradient(90deg,color-mix(in srgb,var(--theme-textPrimary,white) 8%,transparent) 0,color-mix(in srgb,var(--theme-textPrimary,white) 12%,transparent) 50%,color-mix(in srgb,var(--theme-textPrimary,white) 8%,transparent) 100%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}