#shoutouts-list{max-height:400px;overflow-y:auto;padding:12px;background:#0f172a;border-radius:12px;border:2px solid #334155;}.shoutout-item{background:linear-gradient(135deg,#1e293b 0%,#334155 100%);border:2px solid #334155;border-radius:12px;padding:16px;margin-bottom:12px;transition:all 0.3s ease;cursor:pointer;}.shoutout-item:hover{border-color:#3b82f6;box-shadow:0 4px 12px rgba(59,130,246,0.3);transform:translateX(4px);}.shoutout-item.my-shoutout{border-color:#22c55e;background:linear-gradient(135deg,#064e3b 0%,#065f46 100%);}.shoutout-item.my-shoutout:hover{border-color:#10b981;box-shadow:0 4px 12px rgba(34,197,94,0.3);}.shoutout-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}.shoutout-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3b82f6 0%,#1e3a8a 100%);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}.shoutout-info{flex:1;}.shoutout-name{font-size:14px;font-weight:bold;color:white;margin-bottom:2px;}.shoutout-time{font-size:11px;color:#64748b;}.shoutout-message{font-size:13px;color:#e2e8f0;line-height:1.5;padding:12px;background:rgba(0,0,0,0.3);border-radius:8px;border-left:3px solid #3b82f6;font-style:italic;}.my-shoutout .shoutout-message{border-left-color:#22c55e;}.emoji-btn{width:100%;aspect-ratio:1;font-size:20px;background:#1e293b;border:2px solid #334155;border-radius:8px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;padding:0;}@media(max-width:420px){.emoji-btn{font-size:16px;border-radius:6px;border-width:1.5px;}}.emoji-btn:hover{border-color:#3b82f6;background:rgba(59,130,246,0.1);transform:scale(1.1);}.emoji-btn:active{transform:scale(0.95);}.shoutout-btn{width:100%;padding:12px 20px;background:linear-gradient(135deg,#7c2d12 0%,#ea580c 100%);border:2px solid #ea580c;border-radius:8px;color:white;font-size:14px;font-weight:bold;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;}.shoutout-btn:hover{background:linear-gradient(135deg,#9a3412 0%,#f97316 100%);box-shadow:0 4px 12px rgba(234,88,12,0.4);transform:translateY(-2px);}.shoutout-btn i{font-size:16px;}@keyframes slideInRight{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}.shoutout-item{animation:slideInRight 0.3s ease-out;}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(234,88,12,0.7);}70%{box-shadow:0 0 0 10px rgba(234,88,12,0);}100%{box-shadow:0 0 0 0 rgba(234,88,12,0);}}.shoutout-btn.has-new{animation:pulse-ring 2s infinite;}#shoutouts-list::-webkit-scrollbar{width:8px;}#shoutouts-list::-webkit-scrollbar-track{background:#1e293b;border-radius:4px;}#shoutouts-list::-webkit-scrollbar-thumb{background:#334155;border-radius:4px;}#shoutouts-list::-webkit-scrollbar-thumb:hover{background:#475569;}.shoutout-item[title]:hover::after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.9);color:white;padding:8px 12px;border-radius:6px;font-size:12px;white-space:pre-wrap;max-width:300px;z-index:1000;pointer-events:none;margin-bottom:8px;}.shoutout-badge{position:relative;}.shoutout-badge::after{content:'';position:absolute;top:-4px;right:-4px;width:12px;height:12px;background:#ef4444;border:2px solid #0f172a;border-radius:50%;animation:pulse 2s infinite;}@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.7;transform:scale(1.1);}}.shoutout-delete-btn{background:none;border:none;font-size:12px;cursor:pointer;opacity:0.4;transition:opacity 0.2s;padding:2px 4px;margin-left:auto;}.shoutout-delete-btn:hover{opacity:1;}