.project-detail-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000;padding:24px;visibility:hidden;opacity:0;transition:visibility 0s linear 0.3s,opacity 0.3s ease}.project-detail-overlay.is-open{visibility:visible;opacity:1;transition-delay:0s}.project-detail-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.6);backdrop-filter:blur(8px)}.project-detail-dialog{position:relative;width:min(96vw,1200px);height:min(88vh,580px);background:var(--surface-color);border:1px solid var(--panel-border);border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;z-index:1;transform:scale(0.96) translateY(16px);opacity:0;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),opacity 0.3s ease}.project-detail-overlay.is-open .project-detail-dialog{transform:scale(1) translateY(0);opacity:1}.project-detail-topbar{height:54px;padding:0 10px;border-bottom:1px solid var(--panel-border);background:var(--surface-strong);flex-shrink:0;display:flex;align-items:center;gap:8px}.project-detail-topbar::before{content:'';width:34px;flex-shrink:0}.project-detail-topbar h3{flex:1;margin:0;font-size:1.2rem;font-weight:700;color:var(--text-color);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-detail-close{width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1px solid var(--panel-border);background:var(--surface-color);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease,transform 0.2s ease}.project-detail-close:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:scale(1.08)}.project-detail-close .material-symbols-rounded{font-size:17px}.detail-slide-container{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.project-detail-sections{display:flex;flex-direction:row;flex:1;align-items:stretch;min-height:0;transition:transform 0.38s cubic-bezier(0.16,1,0.3,1);will-change:transform}.project-detail-section{flex:none;width:100%;height:100%;padding:24px 36px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}.project-detail-section.has-image{padding:0;flex-direction:row;overflow:hidden;gap:0}.section-slide-image{aspect-ratio:4 / 3;flex-shrink:0;background-size:cover;background-position:center;background-color:var(--surface-strong)}.section-slide-content{flex:1;min-width:0;padding:24px 28px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--panel-border)}.project-detail-section h4,.section-slide-content h4{margin:0;font-size:1rem;font-weight:700;color:var(--text-color);padding-bottom:10px;border-bottom:1px solid var(--panel-border)}.project-detail-section p,.project-detail-body,.section-slide-content p,.section-slide-content .project-detail-body{margin:0;color:var(--text-muted);line-height:1.7;font-size:0.9rem}.detail-slide-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-top:1px solid var(--panel-border);background:var(--surface-strong);flex-shrink:0;gap:12px}.detail-slide-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--panel-border);background:var(--surface-color);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease,transform 0.2s ease}.detail-slide-btn:hover:not(:disabled){background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:scale(1.08)}.detail-slide-btn:disabled{opacity:0.3;cursor:default}.detail-slide-btn .material-symbols-rounded{font-size:17px}.detail-slide-info{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0;overflow:hidden}.detail-slide-title{font-size:0.8rem;font-weight:600;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.detail-slide-indicator{font-size:0.72rem;color:var(--text-muted);font-variant-numeric:tabular-nums}@media (max-width:900px){.project-detail-overlay{padding:16px}.project-detail-dialog{width:100%;max-height:92vh}.project-detail-section.has-image{flex-direction:column}.section-slide-image{width:100%;aspect-ratio:16 / 9;flex:none}.section-slide-content{border-left:none;border-top:1px solid var(--panel-border)}}