{% extends 'accounts/base_auth.html' %}

{% block extra_css %}
<style>
body { font-family: 'Quicksand', sans-serif; background: #f0f4f8; color: #1a2332; margin: 0; }
a { color: #2c3e50; text-decoration: none; font-weight: 600; }
a:hover { color: #d1cf0a; }
.auth-panel-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-panel { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; padding: 40px; border: 1px solid #dde3ea; box-shadow: 0 8px 32px rgba(44,62,80,0.08); }
.auth-panel h1 { font-size: 1.75rem; font-weight: 700; color: #2c3e50; margin: 16px 0 8px; }
.auth-panel p { color: #4a5568; font-size: 0.92rem; line-height: 1.6; margin-bottom: 24px; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #8896a6; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; color: #2c3e50; }
.form-group input { width: 100%; padding: 12px 14px; border: 1.5px solid #dde3ea; border-radius: 10px; font-size: 0.92rem; }
.form-group input:focus { outline: none; border-color: #d1cf0a; }
.btn-primary { width: 100%; padding: 14px; background: #2c3e50; color: #fff; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; }
.btn-primary:hover { background: #34495e; }
.field-error, .errorlist { color: #c0392b; font-size: 0.82rem; margin-top: 6px; list-style: none; padding: 0; }
.messages { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; padding: 12px 14px; border-radius: 10px; font-size: 0.88rem; margin-bottom: 16px; }
</style>
{% endblock %}

{% block body %}
<div class="auth-panel-wrap">
  <div class="auth-panel">
    <a href="{% url 'accounts:login' %}" class="auth-back"><i class="fas fa-arrow-left"></i> Back to Sign In</a>
    {% block panel_content %}{% endblock %}
  </div>
</div>
{% endblock %}