new style

backend/static/styles.css

@@ -32,7 +32,7 @@ h3 {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem;
+  padding: 0.75rem 1rem;
   border-bottom: 1px solid rgba(39, 66, 53, 0.12);
   background: rgba(255, 255, 255, 0.82);
   backdrop-filter: blur(4px);
@@ -41,8 +41,10 @@ h3 {
 .brand {
   color: var(--forest);
   text-decoration: none;
-  font-size: 1.2rem;
+  font-size: 2rem;
   font-weight: 700;
+  font-family: "Playfair Display", serif;
+  letter-spacing: 0.01em;
 }
 
 .host {
@@ -56,8 +58,8 @@ h3 {
 }
 
 .container {
-  width: min(960px, 92vw);
+  width: min(1120px, 92vw);
-  margin: 1.5rem auto 3rem;
+  margin: 1.25rem auto 2.4rem;
   flex: 1;
 }
 
@@ -105,7 +107,9 @@ h3 {
 }
 
 .hero {
-  background: linear-gradient(145deg, #fff, var(--beige));
+  background:
+    radial-gradient(circle at 12% 16%, rgba(184, 145, 76, 0.16), transparent 44%),
+    linear-gradient(145deg, #fff, var(--beige));
 }
 
 .card-grid {
@@ -138,6 +142,18 @@ h3 {
   gap: 1rem;
 }
 
+.login-layout .hero h1 {
+  margin-bottom: 1rem;
+  font-size: clamp(2.05rem, 4.1vw, 3.4rem);
+  line-height: 1.04;
+}
+
+.login-layout .hero p {
+  margin: 0;
+  font-size: 1.16rem;
+  color: rgba(31, 31, 31, 0.9);
+}
+
 .form-grid {
   display: grid;
   gap: 0.8rem;
@@ -152,6 +168,15 @@ input[type="file"] {
   border-radius: 12px;
   padding: 0.65rem 0.75rem;
   background: #fff;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="file"]:focus {
+  outline: none;
+  border-color: rgba(184, 145, 76, 0.88);
+  box-shadow: 0 0 0 3px rgba(184, 145, 76, 0.18);
 }
 
 .radio-row {
@@ -189,19 +214,23 @@ input[type="file"] {
 }
 
 .btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 0;
   border-radius: 12px;
-  padding: 0.6rem 0.9rem;
+  padding: 0.7rem 1rem;
   cursor: pointer;
   color: #fff;
   background: var(--forest);
   text-decoration: none;
-  transition: filter 0.2s ease;
+  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .btn:hover {
   filter: brightness(1.08);
+  transform: translateY(-1px);
+  box-shadow: 0 10px 24px rgba(39, 66, 53, 0.2);
 }
 
 .btn-ghost {
@@ -210,6 +239,17 @@ input[type="file"] {
   border: 1px solid rgba(39, 66, 53, 0.2);
 }
 
+.form-grid .btn {
+  width: 100%;
+}
+
+.topbar .btn-ghost {
+  border-radius: 999px;
+  padding: 0.42rem 0.78rem;
+  font-size: 0.98rem;
+  font-weight: 600;
+}
+
 .flash {
   padding: 0.7rem 0.9rem;
   border-radius: 10px;
@@ -463,17 +503,18 @@ input[type="file"] {
 
 .site-footer {
   border-top: 1px solid rgba(39, 66, 53, 0.12);
-  background: rgba(255, 255, 255, 0.78);
+  background: rgba(255, 255, 255, 0.64);
   backdrop-filter: blur(4px);
-  padding: 0.9rem 1rem;
+  padding: 0.72rem 1rem;
   display: flex;
-  gap: 1rem;
+  gap: 1.25rem;
   justify-content: center;
 }
 
 .site-footer a {
-  color: var(--forest);
+  color: rgba(39, 66, 53, 0.85);
   text-decoration: none;
+  font-size: 0.95rem;
   font-weight: 600;
 }
 
@@ -497,10 +538,19 @@ input[type="file"] {
   }
 }
 
+@media (max-width: 640px) {
+  .brand {
+    font-size: 1.72rem;
+  }
+}
+
 @media (min-width: 1024px) {
   .login-layout {
-    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 560px);
+    grid-template-columns: minmax(0, 1fr) minmax(420px, 1.2fr);
     align-items: start;
+    min-height: min(74vh, 780px);
+    align-content: center;
+    margin-top: 0.4rem;
   }
 
   .login-layout .card {
@@ -508,13 +558,15 @@ input[type="file"] {
   }
 
   .login-layout .hero {
-    min-height: 100%;
+    min-height: 88%;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    padding: 2.2rem;
   }
 
   .login-layout .form-card {
     max-width: none;
+    padding: 1.5rem;
   }
 }