.app-detail-hero{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 50%,var(--accent-color) 100%);padding:120px 0 60px;color:#fff}
.app-detail-header{display:flex;gap:30px;align-items:flex-start;margin-bottom:30px}
.app-detail-icon{width:120px;height:120px;border-radius:25px;background-size:cover;background-position:center;background-color:rgba(255,255,255,.1);flex-shrink:0;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.app-detail-info h1{font-size:2.5rem;font-weight:700;margin-bottom:15px}
.app-detail-meta{display:flex;flex-wrap:wrap;gap:20px;font-size:1rem;color:#fff}
.app-detail-meta span{display:inline-flex;align-items:center;gap:8px}
.app-detail-summary{margin-top:20px;font-size:1rem;line-height:1.6;opacity:.95}
.app-page-content{background:#fff;padding:60px 0}
.app-detail-layout{display:grid;grid-template-columns:380px 1fr;gap:40px;width:100%;align-items:start}
.app-detail-left{width:100%}
.app-detail-right{display:flex;flex-direction:column;gap:30px;width:100%;height:100%}
.app-detail-right .app-detail-section,.app-detail-right .screenshots-container{width:100%!important;max-width:none!important}
.app-detail-section{background:#fff;border-radius:15px;padding:30px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.screenshots-container{background:#fff;border-radius:15px;padding:30px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.screenshots-container h2{font-size:1.5rem;font-weight:600;margin-bottom:20px;color:#222}
.screenshot-thumbs{display:flex;gap:15px;margin-bottom:20px;overflow-x:auto;padding-bottom:10px}
.screenshot-thumb-item{flex-shrink:0;width:120px;height:120px;border-radius:12px;overflow:hidden;cursor:pointer;border:3px solid transparent;transition:all .3s}
.screenshot-thumb-item.active{border-color:#e74c3c}
.screenshot-thumb-item img{width:100%;height:100%;object-fit:cover}
.screenshot-preview{background:#f0f5f9;border-radius:12px;padding:40px;display:flex;align-items:center;justify-content:center;min-height:400px;position:relative}
.screenshot-preview img{max-width:100%;max-height:500px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.15);cursor:pointer}
.screenshot-preview video{max-width:100%;max-height:1000px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.screenshot-thumb-item.video-thumb{position:relative;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center}
.screenshot-thumb-item.video-thumb i{font-size:50px;color:#fff}
.preview-nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#333;transition:all .3s;box-shadow:0 2px 10px rgba(0,0,0,.1);z-index:10}
.preview-nav-btn:hover{background:#e74c3c;color:#fff;box-shadow:0 4px 15px rgba(231,76,60,.3)}
.preview-nav-btn.prev{left:20px}
.preview-nav-btn.next{right:20px}
.preview-nav-btn:disabled{opacity:.3;cursor:not-allowed}
.preview-nav-btn:disabled:hover{background:rgba(255,255,255,.9);color:#333}
.app-detail-section h2{font-size:1.5rem;font-weight:600;margin-bottom:20px;color:#222}
.app-detail-section p{color:#666;line-height:1.8;margin:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}
.related-apps{display:flex;flex-direction:column;gap:15px}
.related-app-card{background:#f8f9fa;border-radius:12px;padding:15px;display:flex;gap:12px;text-decoration:none;color:inherit;transition:all .3s}
.related-app-card:hover{transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.1);text-decoration:none;color:inherit}
.related-app-icon{width:60px;height:60px;border-radius:12px;background-size:cover;background-position:center;background-color:#e9ecef;flex-shrink:0}
.related-app-info{flex:1;min-width:0}
.related-app-name{font-weight:600;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.related-app-meta{font-size:13px;color:#666;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:5px}
.related-app-meta span{display:inline-flex;align-items:center}
.related-app-rating{display:flex;align-items:center;gap:6px;font-size:13px}
.related-app-rating .rating-stars{display:inline-flex;gap:2px;color:#ffc107}
.related-app-rating .rating-stars i{font-size:14px}
.related-app-rating .rating-text{font-weight:600;color:#333}
.screenshot-viewer{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;background:rgba(0,0,0,.95)!important;z-index:999999!important;display:flex!important;align-items:center!important;justify-content:center!important;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;margin:0!important;padding:0!important}
.screenshot-viewer.active{opacity:1!important;visibility:visible!important}
.screenshot-viewer .viewer-container{position:relative;max-width:90%;max-height:90%;display:flex;align-items:center;justify-content:center}
.screenshot-viewer .viewer-img{max-width:100%;max-height:90vh;object-fit:contain;cursor:move;user-select:none}
.screenshot-viewer .viewer-close{position:fixed;top:20px;right:30px;font-size:50px;color:#fff;cursor:pointer;z-index:10000;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border-radius:50%;transition:all .3s}
.screenshot-viewer .viewer-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.screenshot-viewer .viewer-nav{position:fixed;top:50%;transform:translateY(-50%);width:60px;height:60px;background:rgba(255,255,255,.1);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;z-index:10000;transition:all .3s;padding:0}
.screenshot-viewer .viewer-nav:hover{background:rgba(255,255,255,.2)}
.screenshot-viewer .viewer-nav.prev{left:30px}
.screenshot-viewer .viewer-nav.next{right:30px}
.screenshot-viewer .viewer-nav:disabled{opacity:.3;cursor:not-allowed}
.screenshot-viewer .viewer-nav:disabled:hover{background:rgba(255,255,255,.1)}
@media (max-width:768px){
.app-detail-header{flex-direction:column;align-items:center;text-align:center}
.app-detail-info h1{font-size:2rem}
.related-apps{grid-template-columns:1fr}
}