login in registracija

styles/main.css

@@ -12,6 +12,8 @@
     --toggle-track: #4a4a4a;
     --toggle-knob: #f4f4f4;
     --toggle-icon-color: #f5f5f5;
+    --nav-btn-primary-bg: #007acc;
+    --nav-btn-primary-hover-bg: #006bb3;
 }
 
 :root[data-theme="light"] {
@@ -26,6 +28,8 @@
     --toggle-track: #d3d3d3;
     --toggle-knob: #ffffff;
     --toggle-icon-color: #444;
+    --nav-btn-primary-bg: #007acc;
+    --nav-btn-primary-hover-bg: #006bb3;
 }
 
 * {
@@ -158,6 +162,26 @@ nav {
     margin-right: 23px;
 }
 
+.page-paragraph-error {
+    font-size: 0.9rem;
+    line-height: 1.3;
+    margin-bottom: 8px;
+    color: #e74c3c;
+
+    /* Smooth Theme Transition */
+    transition: color 0.25s ease;
+}
+
+.page-paragraph-success {
+    font-size: 0.9rem;
+    line-height: 1.3;
+    margin-bottom: 8px;
+    color: #27ae60;
+
+    /* Smooth Theme Transition */
+    transition: color 0.25s ease;
+}
+
 .page-input {
     padding: 8px 10px;
     border: 1px solid var(--nav-btn-border);
@@ -171,6 +195,40 @@ nav {
     transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
 }
 
+.page-login-form {
+    margin-top: 10px;
+    border: 1px solid var(--nav-btn-border);
+    border-radius: 8px;
+    background: var(--nav-btn-bg);
+    color: var(--text-color);
+    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+    padding-top: 12px;
+    width: max-content;
+    margin-left: 23px;
+}
+
+.form-group input {
+    padding: 8px 10px;
+    border: 1px solid var(--nav-btn-border);
+    border-radius: 4px;
+    background: var(--nav-btn-bg);
+    color: var(--text-color);
+    font-size: 0.92rem;
+    font-family: inherit;
+    margin-top: 10px;
+    width: 100%;
+
+    /* Smooth Theme Transition */
+    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+}
+
+.page-login-form .form-group {
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 12px;
+    padding: 0 23px;
+}
+
 .nav-left,
 .nav-right {
     display: flex;
@@ -224,6 +282,20 @@ nav {
     outline: none;
 }
 
+.nav-btn-primary {
+    background: var(--nav-btn-primary-bg);
+    border-color: var(--nav-btn-primary-bg);
+    color: #fff;
+}
+
+.nav-btn-primary:hover,
+.nav-btn-primary:focus-visible {
+    background: var(--nav-btn-primary-hover-bg);
+    border-color: var(--nav-btn-primary-hover-bg);
+    color: #fff;
+    outline: none;
+}
+
 @media (max-width: 720px) {
     header {
         padding: 6px 8px;