/* Post-Upload Actions Styles */
.state-screen {
display: none; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 40px 20px;
}
.state-screen.active { display: flex; }
.success-icon {
width: 80px; height: 80px;
background: rgba(16,185,129,.2);
color: var(--success-color);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 40px; margin-bottom: 20px;
animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.processing-icon {
color: var(--warm-gold);
animation: spin 2s linear infinite;
}
.state-title {
font-family: 'Orbitron', sans-serif;
font-size: 24px; margin-bottom: 15px; color: var(--soft-white);
}
.state-message {
color: var(--slate-grey); margin-bottom: 30px;
max-width: 500px; line-height: 1.6;
}
.post-upload-actions {
display: grid; grid-template-columns: 1fr 1fr;
gap: 15px; width: 100%; max-width: 500px;
}
.action-card {
background: rgba(255,255,255,.05);
border: 1px solid var(--card-border);
border-radius: 12px; padding: 15px;
cursor: pointer; transition: all .3s ease;
display: flex; flex-direction: column;
align-items: center; gap: 10px;
}
.action-card:hover {
background: rgba(245,158,11,.1);
border-color: var(--warm-gold);
transform: translateY(-2px);
}
.action-card i { font-size: 24px; color: var(--warm-gold); }
.action-card span { font-size: 14px; font-weight: 500; }
.confetti {
position: fixed; width: 10px; height: 10px;
background-color: #f00; animation: fall linear forwards;
z-index: 9999;
}
@keyframes fall { to { transform: translateY(100vh) rotate(720deg); } }