{% extends "base.html" %}
{% block content %}
<style>
.error-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.error-card{max-width:720px;width:100%;background:#fff;border-radius:24px;padding:2.5rem;box-shadow:0 20px 60px rgba(15,23,42,.12);border:1px solid rgba(148,163,184,.25);text-align:center}
.error-code{font-size:4rem;font-weight:900;letter-spacing:-.06em;background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;color:transparent;margin-bottom:.5rem}
.error-title{font-size:1.6rem;font-weight:800;color:#1e293b;margin-bottom:.75rem}
.error-text{color:#64748b;font-size:1rem;margin-bottom:1.5rem}
.error-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.error-actions a{padding:.8rem 1.2rem;border-radius:12px;text-decoration:none;font-weight:700}
.btn-main{background:linear-gradient(135deg,#667eea,#764ba2);color:white}
.btn-soft{background:#f1f5f9;color:#334155}
</style>

<div class="error-wrap">
  <div class="error-card">
    <div class="error-code">503</div>
    <div class="error-title">Service Temporarily Unavailable</div>
    <p class="error-text">
      The server is temporarily busy or under maintenance.<br>
      Please try again in a few minutes.
    </p>

    {% if error %}
    <div style="margin:1rem 0;padding:1rem;background:#f8fafc;border-radius:12px;color:#475569;font-size:.95rem;">
      {{ error }}
    </div>
    {% endif %}

    <div class="error-actions">
      <a class="btn-main" href="{{ url_for('login') }}">Back to Login</a>
      <a class="btn-soft" href="javascript:location.reload()">Retry</a>
    </div>
  </div>
</div>
{% endblock %}