@if(session('success') || session('error') || (isset($errors) && $errors->any()))
  <div id="top-flash" style="position:fixed;left:50%;transform:translateX(-50%);top:20px;z-index:1050;min-width:300px;max-width:90%;">
    @if(session('success'))
      <div style="background:#155724;color:#d4edda;padding:14px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.12);">
        {{ session('success') }}
      </div>
    @endif

    @if(session('error'))
      <div style="background:#721c24;color:#f8d7da;padding:14px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.12);">
        {{ session('error') }}
      </div>
    @endif

    @if(isset($errors) && $errors->any())
      <div style="background:#856404;color:#fff3cd;padding:14px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.12);">
        <ul style="margin:0;padding-left:18px;">
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif
  </div>

  <script>
    (function(){
      const el = document.getElementById('top-flash');
      if(!el) return;
      // simple show animation
      el.style.opacity = 0;
      el.style.transition = 'transform 300ms ease, opacity 300ms ease';
      el.style.transform = 'translateX(-50%) translateY(-10px)';
      setTimeout(()=>{ el.style.opacity = 1; el.style.transform = 'translateX(-50%) translateY(0)'; }, 10);
      // hide after 3s
      setTimeout(()=>{
        el.style.opacity = 0;
        el.style.transform = 'translateX(-50%) translateY(-10px)';
        setTimeout(()=> el.remove(), 350);
      }, 3000);
    })();
  </script>
@endif