{{> header}}
<style>
  .auth-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--gap-lg) var(--gap-md); background: var(--color-background); position: relative; overflow: hidden; }
  .auth-section::before { content: ''; position: absolute; top: -50%; left: -25%; width: 100%; height: 200%; background: radial-gradient(ellipse at center, rgba(99,102,241,0.08) 0%, transparent 60%); pointer-events: none; }
  .auth-section::after { content: ''; position: absolute; bottom: -50%; right: -25%; width: 100%; height: 200%; background: radial-gradient(ellipse at center, rgba(236,72,153,0.08) 0%, transparent 60%); pointer-events: none; }
  .auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); padding: 2.5rem; width: 100%; max-width: 420px; position: relative; z-index: 1; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
  .auth-header { text-align: center; margin-bottom: 2rem; }
  .auth-header .icon { font-size: 3rem; margin-bottom: 1rem; display: block; }
  .auth-header h1 { margin-bottom: 0.5rem; font-size: 1.75rem; }
  .auth-header p { color: var(--color-text-muted); margin: 0; }
  .form-group { margin-bottom: 1.25rem; }
  .form-label { display: block; font-weight: 500; margin-bottom: 0.5rem; color: var(--color-text); }
  .form-input { width: 100%; padding: 0.875rem 1rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); color: var(--color-text); font-size: 1rem; transition: all 0.2s; }
  .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
  .form-input::placeholder { color: var(--color-text-muted); }
  .submit-btn { width: 100%; justify-content: center; padding: 0.875rem; font-size: 1rem; }
  .submit-btn .loading { display: none; }
  .submit-btn.loading .text { display: none; }
  .submit-btn.loading .loading { display: inline; }
  .auth-footer { text-align: center; margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--color-border); }
  .auth-footer p { margin: 0; color: var(--color-text-muted); }
  .auth-footer a { color: var(--color-primary); font-weight: 500; }
  .auth-footer a:hover { color: var(--color-link-hover); }
  .alert { padding: 1rem; border-radius: var(--border-radius-sm); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
  .alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--color-error); color: var(--color-error); }
  .divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--color-text-muted); font-size: 0.875rem; }
  .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

  @media (max-width: 480px) {
    .auth-section { padding: 1.5rem 1rem; min-height: calc(100vh - 60px); }
    .auth-card { padding: 1.5rem; border-radius: 16px; }
    .auth-header .icon { font-size: 2.5rem; }
    .auth-header h1 { font-size: 1.5rem; }
    .auth-header p { font-size: 0.9rem; }
    .form-input { padding: 0.875rem 1rem; font-size: 16px; }
    .submit-btn { padding: 0.875rem; min-height: 48px; }
    .auth-footer { margin-top: 1.25rem; padding-top: 1.25rem; }
  }
</style>

<section class="auth-section">
  <div class="auth-card">
    <div class="auth-header">
      <span class="icon">👋</span>
      <h1>Welcome Back</h1>
      <p>Sign in to continue your learning journey</p>
    </div>

    {{#if error}}
    <div class="alert alert-error">⚠️ {{error}}</div>
    {{/if}}

    <form id="loginForm" method="POST" action="/login{{#if redirect}}?redirect={{redirect}}{{/if}}">
      <div class="form-group">
        <label class="form-label">Email Address</label>
        <input type="email" name="email" class="form-input" required placeholder="you@example.com" autocomplete="email">
      </div>
      <div class="form-group">
        <label class="form-label">Password</label>
        <input type="password" name="password" class="form-input" required placeholder="••••••••" autocomplete="current-password">
      </div>
      <button type="submit" class="btn btn-primary submit-btn" id="submitBtn">
        <span class="text">Sign In</span>
        <span class="loading">⏳ Signing in...</span>
      </button>
    </form>

    <div class="auth-footer">
      <p>Don't have an account? <a href="/register">Create one</a></p>
    </div>
  </div>
</section>
<script src="/themes/my-theme/assets/js/auth.js"></script>
{{> footer}}
