{% extends "global/Page.html" %}
{% block title %}Study Complete{% endblock %}
{% block content %}
<style>
    .completion-container { max-width: 600px; margin: 0 auto; text-align: center; padding: 40px 20px; }
    .completion-message { background: #f0fdf4; border: 2px solid #86efac; border-radius: 8px; padding: 40px 30px; }
    .completion-message h1 { color: #16a34a; margin: 0 0 16px; font-size: 28px; }
    .completion-message p { color: #4b5563; font-size: 16px; line-height: 1.6; margin: 12px 0; }
    .completion-message .subtext { color: #6b7280; font-size: 14px; margin-top: 20px; }
</style>

<div class="completion-container">
  <div class="completion-message">
    <h1>✓ No More Rounds</h1>
    <p>You have completed all the study rounds!</p>
    <p class="subtext">We'd now like to ask you a few follow-up questions. Please click below to continue.</p>
  </div>
  <br>
  <form method="post">
    <button type="submit">Continue to Survey</button>
  </form>
</div>
{% endblock %}