.container{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;margin-bottom:40px;padding:40px 0}.header-content{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 20px 40px rgba(0,0,0,.1)}.logo{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:10px}.logo i{font-size:2.5rem;background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo h1{font-size:2.5rem;font-weight:700;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1.1rem;color:#666;font-weight:400}.search-section{margin-bottom:40px}.search-container{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;padding:30px;box-shadow:0 20px 40px rgba(0,0,0,.1)}.search-form{margin-bottom:15px}.input-group{display:flex;gap:15px;align-items:stretch}.input-wrapper{flex:1;position:relative}.input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#666;font-size:1.1rem;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.input-icon svg{width:20px;height:20px;fill:#666;transition:fill .3s ease}#usernameInput:focus ~ .input-icon, .input-wrapper:hover .input-icon {fill:#e4405f}#usernameInput{width:100%;padding:15px 15px 15px 45px;border:2px solid #e1e5e9;border-radius:12px;font-size:1rem;font-weight:500;transition:all .3s ease;background:#fff}#usernameInput:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}.search-btn{padding:15px 25px;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;min-width:150px;justify-content:center}.search-btn:hover:not(:disabled) {background:linear-gradient(135deg,#d6336c,#f56040);transform:translateY(-2px);box-shadow:0 8px 25px rgba(228,64,95,.3)}.search-btn:disabled{background:#ccc;opacity:.7;cursor:not-allowed;transform:none;box-shadow:none}.search-btn:disabled .icon svg{fill:#999}.search-info{display:flex;align-items:center;gap:8px;color:#666;font-size:.9rem;justify-content:center}.search-info i{color:#667eea}.loading-state{text-align:center;padding:60px 20px}.loading-spinner{display:flex;flex-direction:column;align-items:center;gap:20px}.spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.loading-spinner p{font-size:1.1rem;color:#666;font-weight:500}.error-state{text-align:center;padding:60px 20px}.error-content{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 20px 40px rgba(0,0,0,.1);max-width:500px;margin:0 auto}.error-content i{font-size:3rem;color:#e74c3c;margin-bottom:20px}.error-content h3{font-size:1.5rem;margin-bottom:15px;color:#333}.error-content p{color:#666;margin-bottom:25px;line-height:1.6}.retry-btn{padding:12px 25px;background:#e74c3c;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.retry-btn:hover{background:#c0392b;transform:translateY(-2px)}.results-section{flex:1}.user-info{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;padding:30px;margin-bottom:30px;box-shadow:0 20px 40px rgba(0,0,0,.1);display:flex;align-items:center;gap:20px}.user-avatar{width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid #667eea;flex-shrink:0}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-avatar.avatar-fallback{display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#e9ecef,#f8f9fa);color:#667eea;font-weight:700;font-size:1.2rem}.user-details h2{font-size:1.5rem;font-weight:700;color:#333;margin-bottom:5px}.user-details p{color:#666;font-weight:500}.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-bottom:40px}.story-card{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1);transition:all .3s ease;cursor:pointer;position:relative}.story-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.15)}.story-image,.story-video,.story-thumbnail{width:100%;aspect-ratio: 9/16;object-fit:cover;transition:transform .3s ease}.story-card:hover .story-image,.story-card:hover .story-video,.story-card:hover .story-thumbnail{transform:scale(1.05)}.skeleton{position:relative;overflow:hidden;background:#e9ecef}.skeleton::after{content:'';position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:skeleton-shimmer 1.2s infinite}@keyframes skeleton-shimmer { 0% { left: -150%; } 100% { left: 150%; } }.skeleton-circle{border-radius:50%}.skeleton-rect{border-radius:12px}.skeleton-text{border-radius:4px}.skeleton-card{pointer-events:none}.skeleton-card:hover{transform:none;box-shadow:0 10px 30px rgba(0,0,0,.1)}.avatar-skeleton{width:100%;height:100%}.media-skeleton{width:100%;aspect-ratio: 9/16}.hidden-visually{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important}.story-media-container{position:relative;width:100%;aspect-ratio: 9/16;overflow:hidden}.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);transition:opacity .3s ease;pointer-events:none}.play-button{width:60px;height:60px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#333;transition:all .3s ease}.video-duration{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.7);color:#fff;padding:4px 8px;border-radius:4px;font-size:.8rem;font-weight:500}.video-placeholder,.video-error{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio: 9/16;background:#f8f9fa;color:#666;text-align:center}.video-placeholder i,.video-error i{font-size:3rem;margin-bottom:10px;color:#ccc}.story-info{padding:15px;display:flex;justify-content:space-between;align-items:center}.story-timestamp{font-size:.9rem;color:#666;font-weight:500}.media-type-badge{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:4px 8px;border-radius:12px;font-size:.8rem;font-weight:600;align-items:center;gap:4px}.no-stories-state{text-align:center;padding:60px 20px}.no-stories-content{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;padding:40px;box-shadow:0 20px 40px rgba(0,0,0,.1);max-width:500px;margin:0 auto}.no-stories-content i{font-size:3rem;color:#95a5a6;margin-bottom:20px}.no-stories-content h3{font-size:1.5rem;margin-bottom:15px;color:#333}.no-stories-content p{color:#666;line-height:1.6}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);backdrop-filter:blur(5px)}.modal-content{position:relative;background:#fff;border-radius:20px;overflow:hidden;max-width:500px;max-height:90vh;box-shadow:0 25px 50px rgba(0,0,0,.3)}.modal-close{position:absolute;top:15px;right:15px;width:40px;height:40px;border:none;background:rgba(0,0,0,.5);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .3s ease}.modal-close:hover{background:rgba(0,0,0,.7)}.modal-body{display:flex;flex-direction:column}#modalImage{width:100%;max-height:70vh;object-fit:contain}.modal-info{padding:20px;display:flex;justify-content:space-between;align-items:center;background:#f8f9fa}.story-actions{display:flex;gap:10px}.action-btn{padding:8px 15px;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:5px}.download-btn{background:#667eea;color:#fff}.download-btn:hover{background:#5a6fd8}.share-btn{background:#2ecc71;color:#fff}.share-btn:hover{background:#27ae60}.footer{margin-top:auto;padding:30px 0;text-align:center}.footer-content{background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:15px;padding:25px;color:#fff}.footer-content p{margin-bottom:15px;font-weight:500}.footer-links{display:flex;justify-content:center;gap:20px}.footer-link{color:rgba(255,255,255,.8);text-decoration:none;font-weight:500;transition:color .3s ease}.footer-link:hover{color:#fff}.icon{display:inline-flex;align-items:center;justify-content:center}.icon svg{width:1em;height:1em;fill:currentColor}.spinner-svg{animation:spin 1s linear infinite}@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }.hidden{display:none!important}@media (max-width:768px){.container{padding:15px}.header-content{padding:30px 20px}.logo{flex-direction:column;gap:10px}.logo h1{font-size:2rem}.input-group{flex-direction:column}.search-btn{min-width:auto}.user-info{flex-direction:column;text-align:center}.stories-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px}.story-card{border-radius:12px}.modal-content{margin:10px;max-width:calc(100% - 20px)}.modal-info{flex-direction:column;gap:15px;align-items:stretch}.story-actions{justify-content:center}.footer-links{flex-wrap:wrap;gap:15px}}@media (max-width:480px){.stories-grid{grid-template-columns:1fr}.search-container{padding:20px}.header-content{padding:25px 15px}}