final looks changes

nonpacks/static/css/style.css

@@ -3678,6 +3678,37 @@ a.deletelink {
     background: var(--md-sys-color-surface, #1e1e2e);
     color: var(--md-sys-color-on-surface, #cdd6f4);
 }
+.gate-card form p {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    text-align: left;
+}
+.gate-card form label {
+    color: var(--md-sys-color-on-surface-variant, #a6adc8);
+    font-size: 0.8rem;
+}
+.gate-card form input[type="text"],
+.gate-card form input[type="email"],
+.gate-card form input[type="password"] {
+    width: 100%;
+    padding: 0.55rem 0.7rem;
+    border-radius: 8px;
+    border: 1px solid var(--md-sys-color-outline-variant, #45475a);
+    background: var(--md-sys-color-surface, #1e1e2e);
+    color: var(--md-sys-color-on-surface, #cdd6f4);
+    box-sizing: border-box;
+}
+.gate-card form .errorlist {
+    list-style: none;
+    margin: 0.1rem 0 0;
+    padding: 0;
+    color: #f38ba8;
+    font-size: 0.75rem;
+}
+.gate-card-alt { margin-top: 0.9rem; }
+.gate-card-wide { max-width: 600px; }
 .gate-card button {
     padding: 0.55rem;
     border-radius: 8px;
@@ -3938,3 +3969,14 @@ a.deletelink {
 .pack-card-row-author { margin: 0.1rem 0 0; color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.72rem; }
 .pack-card-row-meta { display: flex; gap: 0.6rem; margin: 0.15rem 0 0; color: var(--md-sys-color-on-surface-variant, #a6adc8); font-size: 0.72rem; flex-wrap: wrap; }
 .pack-card-row-meta span { white-space: nowrap; }
+
+/* Distinct accent button for auth-page cross links (differs from primary). */
+.btn-accent {
+    background: var(--ctp-mocha-blue, #1e66f5);
+    color: #fff;
+    border: none;
+}
+.btn-accent:hover {
+    background: var(--ctp-mocha-sapphire, #209fb5);
+    color: #fff;
+}

nonpacks/templates/profiles/login.html

@@ -3,11 +3,19 @@
 {% block title %}Login - Packs{% endblock %}
 
 {% block content %}
-    <h1>Login</h1>
+<div class="gate-main">
-    <form method="post" action="{% url 'profiles:login' %}">
+    <div class="gate-card">
-        {% csrf_token %}
+        <h1><i class="fas fa-sign-in-alt"></i> Log in</h1>
-        {{ form.as_p }}
+        <p>Enter your account details to continue.</p>
-        <button type="submit">Log in</button>
+        {% if form.non_field_errors %}
-    </form>
+            {% for error in form.non_field_errors %}<p class="gate-error">{{ error }}</p>{% endfor %}
-    <p>No account? <a href="{% url 'profiles:register' %}">Register</a></p>
+        {% endif %}
-{% endblock %}
+        <form method="post" action="{% url 'profiles:login' %}">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <button type="submit"><i class="fas fa-sign-in-alt"></i> Log in</button>
+        </form>
+        <p class="gate-card-alt">No account? <a href="{% url 'profiles:register' %}" class="btn btn-sm btn-accent">Register</a></p>
+    </div>
+</div>
+{% endblock %}

nonpacks/templates/profiles/register.html

@@ -3,11 +3,19 @@
 {% block title %}Register - Packs{% endblock %}
 
 {% block content %}
-    <h1>Register</h1>
+<div class="gate-main">
-    <form method="post" action="{% url 'profiles:register' %}">
+    <div class="gate-card gate-card-wide">
-        {% csrf_token %}
+        <h1><i class="fas fa-user-plus"></i> Register</h1>
-        {{ form.as_p }}
+        <p>Create an account to upload and manage packs.</p>
-        <button type="submit">Register</button>
+        {% if form.non_field_errors %}
-    </form>
+            {% for error in form.non_field_errors %}<p class="gate-error">{{ error }}</p>{% endfor %}
-    <p>Already have an account? <a href="{% url 'profiles:login' %}">Log in</a></p>
+        {% endif %}
-{% endblock %}
+        <form method="post" action="{% url 'profiles:register' %}">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <button type="submit"><i class="fas fa-user-plus"></i> Register</button>
+        </form>
+        <p class="gate-card-alt">Already have an account? <a href="{% url 'profiles:login' %}" class="btn btn-sm btn-accent">Log in</a></p>
+    </div>
+</div>
+{% endblock %}