@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background-color:#000;min-height:100vh;font-family:Inter,sans-serif}.navbar{z-index:100;background:#000;align-items:center;gap:12px;padding:12px 16px;display:flex;position:sticky;top:0}.nav-icon{cursor:pointer;background:#1a1a1a;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.nav-icon img{object-fit:contain;width:18px;height:18px}.search-bar{background:#1a1a1a;border-radius:999px;flex:1;align-items:center;gap:8px;padding:10px 16px;display:flex}.search-bar img{object-fit:contain;opacity:.6;width:16px;height:16px}.search-bar input{color:#fff;background:0 0;border:none;outline:none;width:100%;font-family:Inter,sans-serif;font-size:14px;font-weight:400}.search-bar input::placeholder{color:#888}.nav-auth{align-items:center;gap:8px;display:flex}.nav-username{color:#ccc;font-size:13px;font-weight:400}.nav-new{color:#000;cursor:pointer;background:#00da5a;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;font-weight:800;line-height:1;display:flex}.nav-logout{color:#aaa;cursor:pointer;background:0 0;border:1px solid #444;border-radius:999px;padding:4px 10px;font-family:Inter,sans-serif;font-size:12px}.nav-login{color:#000;cursor:pointer;background:#00da5a;border:none;border-radius:999px;padding:8px 16px;font-family:Inter,sans-serif;font-size:13px;font-weight:800}.profile-banner{background:linear-gradient(135deg,#00da5a,#0fd15a,#1bb351);border-radius:20px 20px 0 0;align-items:center;gap:16px;margin:8px 12px 0;padding:24px 20px;display:flex}.profile-pic{object-fit:cover;border:2px solid #ffffff4d;border-radius:50%;width:72px;height:72px}.profile-label{color:#fffc;margin-bottom:2px;font-size:12px;font-weight:400;display:block}.app-title{color:#fff;font-size:32px;font-weight:800;line-height:1.1}.app-subtitle{color:#ffffffd9;margin-top:4px;font-size:13px;font-weight:400}.feed-section{background:linear-gradient(#199946 0%,#297744 40%,#343434 100%);border-radius:0;margin:0 12px 12px;padding:20px 16px 24px}.feed-header{margin-bottom:16px}.feed-title{color:#fff;font-size:20px;font-weight:800}.feed-count{color:#fffc;margin-top:2px;font-size:14px;font-weight:400}.card-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.empty-state{text-align:center;color:#ffffff80;grid-column:1/-1;padding:40px 0;font-size:14px;font-weight:400}.message-card{cursor:pointer;opacity:0;background:#1a1a1a;border-radius:12px;transition:opacity .5s,transform .5s;overflow:hidden;transform:translateY(24px)}.message-card.visible{opacity:1;transform:translateY(0)}.message-card:hover{transition:transform .2s;transform:translateY(-4px)scale(1.02)}.card-thumbnail{aspect-ratio:1;object-fit:cover;width:100%;display:block}.card-content{color:#fff;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:8px 8px 2px;font-size:12px;font-weight:800;line-height:1.3;display:-webkit-box;overflow:hidden}.card-to{color:#fff9;padding:0 8px 8px;font-size:11px;font-weight:400;display:block}.detail-card{background:linear-gradient(135deg,#c8a96e,#e8c97a,#1a1a1a);border-radius:16px;flex-direction:row;align-items:center;gap:30px;width:100%;max-width:1200px;min-height:280px;margin:20px auto;padding:30px;display:flex;position:relative;overflow:hidden}.detail-thumbnail-box{object-fit:cover;border-radius:12px;flex-shrink:0;width:250px;height:250px;box-shadow:0 4px 15px #0000004d}.detail-info{z-index:1;position:relative}.detail-to{color:#fffc;margin-bottom:6px;font-size:14px;font-weight:400;display:block}.detail-content{color:#fff;font-size:24px;font-weight:800;line-height:1.2}.player-section{width:calc(100% - 24px);max-width:1200px;margin:0 auto 20px}.player-label{color:#fff9;margin-bottom:8px;font-size:13px;font-weight:400}.yt-player,.spotify-preview{border:none;border-radius:12px;width:100%}.yt-player{height:200px}.submission-section{background:#1a1a1a;border-radius:16px;margin:0 12px 12px;padding:20px}.submission-title{color:#ffffff80;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;font-size:13px;font-weight:400}.submission-form .submission-title{color:#fff;text-transform:none;letter-spacing:0;font-size:22px;font-weight:800}.form-main{gap:12px;margin-bottom:16px;display:flex}.image-upload{cursor:pointer;flex-shrink:0}.image-placeholder{color:#fff6;background:#2a2a2a;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:120px;height:120px;font-size:12px;font-weight:400;display:flex}.image-placeholder span{font-size:28px}.image-preview{object-fit:cover;border-radius:12px;width:120px;height:120px;display:block}.form-fields{flex-direction:column;flex:1;gap:8px;display:flex}.input-to,.input-message,.auth-input{color:#fff;background:#2a2a2a;border:none;border-radius:10px;outline:none;padding:10px 14px;font-family:Inter,sans-serif;font-size:14px;font-weight:400}.input-to::placeholder,.input-message::placeholder{color:#ffffff59}.input-message{resize:none;flex:1;min-height:80px}.song-picker{background:#2a2a2a;border-radius:999px;align-items:center;gap:8px;margin-bottom:12px;padding:10px 16px;display:flex}.song-picker img{object-fit:contain;opacity:.6;width:16px;height:16px}.song-input{color:#fff;background:0 0;border:none;outline:none;flex:1;font-family:Inter,sans-serif;font-size:14px;font-weight:400}.song-input::placeholder{color:#ffffff59}.song-results{background:#2a2a2a;border-radius:12px;margin-bottom:12px;overflow:hidden}.song-result-item{cursor:pointer;border-bottom:1px solid #ffffff0d;align-items:center;gap:10px;padding:10px 14px;transition:background .15s;display:flex}.song-result-item:hover{background:#333}.song-result-item img{object-fit:cover;border-radius:6px;width:36px;height:36px}.song-result-item p{color:#fff;font-size:13px;font-weight:800}.song-result-item span{color:#ffffff80;font-size:12px;font-weight:400}.submit-btn{color:#000;cursor:pointer;background:#00da5a;border:none;border-radius:999px;width:100%;margin-top:8px;padding:14px;font-family:Inter,sans-serif;font-size:16px;font-weight:800;transition:opacity .2s}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{flex-direction:column;gap:12px;width:100%;max-width:400px;display:flex}.auth-title{color:#fff;text-align:center;font-size:36px;font-weight:800}.auth-subtitle{color:#ffffff80;text-align:center;margin-bottom:8px;font-size:14px;font-weight:400}.auth-input{width:100%;padding:14px 16px}.auth-input::placeholder{color:#ffffff59}.auth-btn{color:#000;cursor:pointer;background:#00da5a;border:none;border-radius:999px;width:100%;margin-top:4px;padding:14px;font-family:Inter,sans-serif;font-size:16px;font-weight:800;transition:opacity .2s}.auth-btn:disabled{opacity:.5}.auth-error{color:#ff6b6b;text-align:center;background:#ff505026;border:1px solid #ff50504d;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:400}.auth-switch{color:#fff6;text-align:center;font-size:13px;font-weight:400}.auth-switch a{color:#00da5a;font-weight:800;text-decoration:none}.camera-icon{object-fit:contain;opacity:.6;width:40px;height:40px}