* { scroll-behavior: smooth; box-sizing: border-box; }
html { font-family: 'Poppins', sans-serif; }
body { overflow-x: hidden; }

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes popIn { 0%{opacity:0;transform:scale(.8)} 100%{opacity:1;transform:scale(1)} }
@keyframes checkmark { 0%{stroke-dashoffset:50} 100%{stroke-dashoffset:0} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes toastIn { from{opacity:0;transform:translateX(100px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(100px)} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 0 rgba(227,24,55,.4)} 50%{box-shadow:0 0 0 10px rgba(227,24,55,0)} }
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.anim-float { animation: float 6s ease-in-out infinite; }
.anim-slide-up { animation: slideUp .6s ease-out forwards; }
.anim-fade-in { animation: fadeIn .5s ease-out forwards; }
.anim-scale-in { animation: scaleIn .4s ease-out forwards; }
.anim-spin { animation: spin 1s linear infinite; }
.anim-pop-in { animation: popIn .4s ease-out forwards; }
.anim-check { stroke-dasharray: 50; stroke-dashoffset: 50; animation: checkmark .6s ease-out forwards; }
.anim-shake { animation: shake .4s ease-in-out; }
.anim-toast-in { animation: toastIn .4s ease-out forwards; }
.anim-toast-out { animation: toastOut .4s ease-in forwards; }

.text-grad { background: linear-gradient(135deg, #FFD100, #E31837); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.progress-fill { background: linear-gradient(90deg, #FFD100, #F5A623, #E31837); background-size: 200% 100%; animation: shimmer 3s linear infinite; }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transition: left .6s; }
.btn-shine:hover::before { left: 100%; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #002A73; }
::-webkit-scrollbar-thumb { background: #E31837; border-radius: 4px; }

.logo-ring { background: conic-gradient(from 0deg, #E31837, #FFD100, #E31837); padding: 3px; border-radius: 50%; }

/* ===== AUTH PAGE ===== */
.auth-bg {
  background: linear-gradient(135deg, #003DA5 0%, #002A73 30%, #E31837 70%, #B8132C 100%);
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}

.auth-card {
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,.98);
}

.auth-tab { transition: all .3s ease; }
.auth-tab.active { background: #E31837; color: white; }

.input-auth { transition: all .2s ease; }
.input-auth:focus { border-color: #003DA5; box-shadow: 0 0 0 3px rgba(0,61,165,.15); outline: none; }

/* ===== SIDEBAR ===== */
.sidebar { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.sidebar-link { transition: all .2s ease; border-left: 3px solid transparent; }
.sidebar-link:hover { background: rgba(255,255,255,.05); border-left-color: #FFD100; }
.sidebar-link.active { background: rgba(227,24,55,.15); border-left-color: #E31837; color: #FFD100; }
.sidebar-link.active svg { color: #FFD100; }

/* ===== TOAST ===== */
.toast-container { position: fixed; top: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 320px; max-width: 420px; animation: toastIn .4s ease-out forwards; }
.toast.removing { animation: toastOut .4s ease-in forwards; }

/* ===== MODAL ===== */
.modal-overlay { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-content { transform: scale(.85) translateY(20px); transition: transform .35s cubic-bezier(.175,.885,.32,1.275); }
.modal-overlay.open .modal-content { transform: scale(1) translateY(0); }

.step-dot { transition: all .3s ease; }
.step-dot.active { background: #E31837; transform: scale(1.2); }
.step-dot.done { background: #003DA5; }
.step-line { transition: background .4s ease; }
.step-line.active { background: #003DA5; }

.input-sy:focus { border-color: #003DA5; box-shadow: 0 0 0 3px rgba(0,61,165,.15); outline: none; }
.loader-ring { border: 4px solid rgba(227,24,55,.2); border-top-color: #E31837; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }

/* ===== BADGES ===== */
.badge-kyc-approved { background: #003DA5; color: white; }
.badge-project-published { background: #003DA5; color: white; }
.badge-project-review { background: #FFD100; color: #002A73; }
.badge-project-draft { background: #FFD100; color: #002A73; }
.badge-contrib-confirmed { background: #003DA5; color: white; }
.badge-contrib-failed { background: #E31837; color: white; }
.badge-contrib-pending { background: #FFD100; color: #002A73; }

/* ===== UPLOAD ZONE ===== */
.upload-zone {
  border: 2px dashed #003DA5;
  transition: all .3s ease;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: #E31837;
  background: rgba(227,24,55,.05);
}

/* ===== PROGRESS STEPS ===== */
.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn .4s ease-out; }

/* ===== MOBILE OVERLAY ===== */
.mobile-overlay { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

@media (min-width: 2560px) { html { font-size: 20px; } }
@media (min-width: 3840px) { html { font-size: 28px; } }