*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#f0f0f0;background-color:#0d0d0d;max-width:480px;min-height:100vh;margin:0 auto;padding-bottom:80px;font-family:Segoe UI,sans-serif}h1{background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1.25rem;font-size:1.6rem;font-weight:800}h2{color:#ffd93d;margin:1.25rem 0 .75rem;font-size:1.1rem}h3{color:#f0f0f0;font-size:1rem}p{color:#aaa;font-size:.85rem;line-height:1.5}button{cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:10px;padding:10px 18px;font-size:.9rem;font-weight:700;transition:transform .1s,opacity .2s}button:active{transform:scale(.96)}input{color:#f0f0f0;-webkit-appearance:none;background:#1e1e1e;border:2px solid #333;border-radius:10px;outline:none;width:100%;padding:12px 14px;font-size:1rem;transition:border-color .2s}input:focus{border-color:#ff6b6b}.container{padding:1.25rem 1rem}.top-header{z-index:100;background:#111;border-bottom:2px solid #ff6b6b;justify-content:space-between;align-items:center;padding:1rem;display:flex;position:sticky;top:0}.top-header .logo{background:linear-gradient(90deg,#ff6b6b,#ffd93d);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.3rem;font-weight:900}.top-header .logout-btn{color:#aaa;background:0 0;border:1px solid #333;border-radius:8px;padding:6px 10px;font-size:.8rem}.bottom-nav{z-index:100;background:#111;border-top:2px solid #222;justify-content:space-around;width:100%;max-width:480px;padding:.5rem 0;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottom-nav a{color:#666;-webkit-tap-highlight-color:transparent;border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:4px 12px;font-size:.65rem;font-weight:600;text-decoration:none;transition:color .2s;display:flex}.bottom-nav a .icon{font-size:1.3rem}.bottom-nav a.router-link-active{color:#ffd93d}.search-bar{gap:.5rem;margin-bottom:1.25rem;display:flex}.search-bar input{flex:1}.search-bar button{color:#000;white-space:nowrap;background:linear-gradient(135deg,#ff6b6b,#ffd93d);padding:12px 16px;font-weight:700}.movie-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:14px;gap:.85rem;margin-bottom:.85rem;padding:.85rem;transition:border-color .2s;display:flex}.movie-card.watched{opacity:.45}.movie-card img{object-fit:cover;border-radius:8px;flex-shrink:0;width:65px;height:98px}.movie-card .movie-info{flex-direction:column;flex:1;gap:.3rem;min-width:0;display:flex}.movie-card h3{white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;overflow:hidden}.movie-card .movie-year{color:#666;font-size:.75rem}.movie-card .movie-actions{flex-wrap:wrap;gap:.5rem;margin-top:.4rem;display:flex}.btn-add{color:#000;background:linear-gradient(135deg,#ff6b6b,#ffd93d);border-radius:8px;padding:6px 12px;font-size:.8rem}.btn-watched{color:#000;background:#6bcb77;border-radius:8px;padding:6px 12px;font-size:.8rem}.rondo-wrap{margin-bottom:1.5rem}.rondo-wrap>button{color:#fff;letter-spacing:.3px;background:linear-gradient(135deg,#4d96ff,#6bcb77);border-radius:14px;width:100%;padding:16px;font-size:1rem}.rondo-pick{background:#1a1a1a;border:2px solid #4d96ff;border-radius:14px;align-items:center;gap:1rem;margin-top:.75rem;padding:1rem;display:flex}.rondo-pick img{border-radius:8px;flex-shrink:0;width:80px}.rondo-pick h3{color:#ffd93d;font-size:1.1rem}.rondo-pick .dismiss-btn{color:#aaa;background:#2a2a2a;margin-top:.5rem;padding:6px 12px;font-size:.8rem}.suggestion-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:14px;align-items:flex-start;gap:.85rem;margin-bottom:.85rem;padding:.85rem;display:flex}.suggestion-card .suggestion-info{flex-direction:column;flex:1;gap:.3rem;min-width:0;display:flex}.suggestion-card h3{color:#ffd93d;white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;overflow:hidden}.suggestion-card .genre{color:#4d96ff;font-size:.75rem}.suggestion-card img{object-fit:cover;border-radius:8px;flex-shrink:0;width:65px;height:98px}.suggestion-card .no-poster{background:#2a2a2a;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:65px;height:98px;font-size:1.5rem;display:flex}.friend-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding:.85rem 1rem;display:flex}.friend-card span{font-size:.95rem;font-weight:600}.friend-card button{color:#fff;background:#4d96ff;padding:6px 12px;font-size:.8rem}.add-friend{gap:.5rem;margin-bottom:.5rem;display:flex}.add-friend input{flex:1}.add-friend button{color:#000;white-space:nowrap;background:linear-gradient(135deg,#6bcb77,#4d96ff);padding:12px 14px;font-weight:700}.message{color:#6bcb77;background:#1a2a1a;border-left:4px solid #6bcb77;border-radius:8px;margin:.75rem 0;padding:.75rem 1rem;font-size:.85rem}.btn-toggle{color:#6bcb77;background:0 0;border:2px solid #6bcb77;border-radius:10px;width:100%;margin-bottom:1.25rem;padding:10px}.welcome{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:90vh;padding:2rem 1.5rem;display:flex}.welcome h1{margin-bottom:.75rem;font-size:2.5rem}.welcome p{color:#aaa;max-width:300px;margin-bottom:2.5rem;font-size:1rem}.welcome .btn-login{color:#000;background:linear-gradient(135deg,#ff6b6b,#ffd93d);border-radius:14px;width:100%;margin-bottom:.75rem;padding:16px;font-size:1.05rem}.welcome .btn-signup{color:#f0f0f0;background:0 0;border:2px solid #ff6b6b;border-radius:14px;width:100%;padding:16px;font-size:1.05rem}.feed{flex-direction:column;gap:1rem;display:flex}.feed-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:16px;overflow:hidden}.trending-card{flex-direction:column;display:flex}.feed-poster{object-fit:cover;width:100%;height:220px}.feed-movie-info{flex-direction:column;gap:.4rem;padding:.85rem;display:flex}.trending-badge{color:#ff6b6b;text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:700}.overview{color:#888;font-size:.8rem;line-height:1.4}.friend-activity{padding:.85rem}.activity-label{color:#aaa;margin-bottom:.75rem;font-size:.8rem}.activity-label .username{color:#4d96ff;font-weight:700}.feed-movie-row{align-items:center;gap:.75rem;display:flex}.feed-movie-row img{object-fit:cover;border-radius:8px;flex-shrink:0;width:55px;height:80px}.scroll-trigger{height:20px}.loading-text{text-align:center;color:#666;padding:1rem;font-size:.85rem}.modal-overlay{z-index:200;background:#000000d9;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal{background:#1a1a1a;border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:90vh;animation:.25s slideUp;position:relative;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-close{color:#aaa;z-index:10;background:#2a2a2a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:.85rem;display:flex;position:absolute;top:1rem;right:1rem}.modal-poster{object-fit:cover;border-radius:20px 20px 0 0;width:100%;height:280px}.modal-body{flex-direction:column;gap:.75rem;padding:1.25rem;display:flex}.modal-body h2{color:#f0f0f0;margin:0;font-size:1.3rem}.modal-meta{flex-wrap:wrap;gap:.75rem;display:flex}.modal-meta span{color:#aaa;background:#2a2a2a;border-radius:20px;padding:4px 10px;font-size:.8rem}.modal-overview{color:#bbb;font-size:.88rem;line-height:1.6}.modal-actions{padding-bottom:1rem}.modal-actions .btn-add{border-radius:12px;width:100%;padding:14px;font-size:1rem}