diff --git a/backend/static/styles.css b/backend/static/styles.css
index c335e47..9608a38 100644
--- a/backend/static/styles.css
+++ b/backend/static/styles.css
@@ -1,10 +1,11 @@
 :root {
-  --cream: #f8f2e8;
-  --beige: #efe3d3;
-  --forest: #274235;
-  --gold: #b8914c;
-  --ink: #1f1f1f;
-  --card: #fffdf9;
+  --cream: #f6efe2;
+  --beige: #e8dbc4;
+  --forest: #1f3a2f;
+  --gold: #b28946;
+  --burgundy: #6d2f3d;
+  --ink: #1f1a17;
+  --card: #fffbf5;
 }
 
 * {
@@ -15,7 +16,10 @@ body {
   margin: 0;
   color: var(--ink);
   font-family: "Source Sans 3", sans-serif;
-  background: radial-gradient(circle at top, #fff, var(--cream));
+  background:
+    radial-gradient(circle at 11% 8%, rgba(109, 47, 61, 0.06), transparent 28%),
+    radial-gradient(circle at 90% 16%, rgba(178, 137, 70, 0.11), transparent 34%),
+    linear-gradient(180deg, #faf6ef 0%, var(--cream) 36%, #f1ebde 100%);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -33,8 +37,9 @@ h3 {
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid rgba(39, 66, 53, 0.12);
-  background: rgba(255, 255, 255, 0.82);
+  border-bottom: 1px solid rgba(178, 137, 70, 0.24);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 244, 233, 0.9));
   backdrop-filter: blur(4px);
 }
 
@@ -102,9 +107,11 @@ h3 {
 
 .card {
   background: var(--card);
-  border: 1px solid rgba(39, 66, 53, 0.1);
+  border: 1px solid rgba(31, 58, 47, 0.11);
   border-radius: 18px;
-  box-shadow: 0 8px 22px rgba(39, 66, 53, 0.09);
+  box-shadow:
+    0 9px 26px rgba(31, 58, 47, 0.1),
+    0 1px 0 rgba(178, 137, 70, 0.22) inset;
   padding: 1.25rem;
   margin-bottom: 1rem;
 }
@@ -166,16 +173,20 @@ h3 {
   border-radius: 20px;
   padding: 1rem;
   position: relative;
-  background: #fffdf9;
-  border: 1px solid rgba(39, 66, 53, 0.11);
+  background: linear-gradient(180deg, #fffdf8 0%, #fdf6ea 100%);
+  border: 1px solid rgba(31, 58, 47, 0.12);
   letter-spacing: 0.01em;
-  box-shadow: 0 8px 22px rgba(39, 66, 53, 0.09);
+  box-shadow:
+    0 10px 24px rgba(31, 58, 47, 0.12),
+    0 1px 0 rgba(178, 137, 70, 0.22) inset;
   will-change: transform, opacity, filter;
 }
 
 .link-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 14px 30px rgba(39, 66, 53, 0.15);
+  box-shadow:
+    0 16px 32px rgba(31, 58, 47, 0.16),
+    0 1px 0 rgba(178, 137, 70, 0.34) inset;
 }
 
 .link-card:focus-visible {
@@ -190,20 +201,84 @@ h3 {
 .login-layout {
   display: grid;
   gap: 1rem;
+  max-width: 760px;
+  margin-inline: auto;
 }
 
-.login-layout .hero h1 {
-  margin-bottom: 1rem;
-  font-size: clamp(2.05rem, 4.1vw, 3.4rem);
-  line-height: 1.04;
+.login-shell {
+  padding: clamp(1.2rem, 2.6vw, 1.7rem);
 }
 
-.login-layout .hero p {
+.login-intro h1 {
+  margin-bottom: 0.75rem;
+  font-size: clamp(2rem, 4.2vw, 3.3rem);
+  line-height: 1.05;
+}
+
+.login-intro p {
   margin: 0;
-  font-size: 1.16rem;
+  font-size: clamp(1.05rem, 1.8vw, 1.18rem);
   color: rgba(31, 31, 31, 0.9);
 }
 
+.login-divider {
+  border: 0;
+  height: 1px;
+  margin: 1.2rem 0 1rem;
+  background: linear-gradient(90deg, rgba(122, 47, 63, 0.12), rgba(178, 137, 70, 0.42), rgba(122, 47, 63, 0.12));
+}
+
+.login-title {
+  margin-bottom: 0.8rem;
+}
+
+.login-shell .form-grid {
+  gap: 1rem;
+}
+
+.login-shell label {
+  display: grid;
+  gap: 0.32rem;
+  font-weight: 600;
+  color: rgba(31, 26, 23, 0.92);
+}
+
+.login-shell input[type="text"],
+.login-shell input[type="password"] {
+  margin-top: 0;
+  min-height: 3.05rem;
+  padding: 0.78rem 0.92rem;
+  border-radius: 14px;
+  border: 1px solid rgba(178, 137, 70, 0.45);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.login-shell input[type="text"]:focus,
+.login-shell input[type="password"]:focus {
+  border-color: rgba(122, 47, 63, 0.58);
+  box-shadow:
+    0 0 0 3px rgba(178, 137, 70, 0.2),
+    0 0 0 1px rgba(122, 47, 63, 0.14) inset;
+}
+
+.login-shell .btn {
+  margin-top: 0.2rem;
+  min-height: 3.05rem;
+  border-radius: 15px;
+  font-size: 1.06rem;
+  letter-spacing: 0.01em;
+  background: linear-gradient(180deg, #2f5948 0%, #1f3a2f 100%);
+  box-shadow:
+    0 10px 22px rgba(31, 58, 47, 0.26),
+    0 1px 0 rgba(178, 137, 70, 0.32) inset;
+}
+
+.login-shell .btn:hover {
+  box-shadow:
+    0 14px 28px rgba(31, 58, 47, 0.28),
+    0 1px 0 rgba(178, 137, 70, 0.4) inset;
+}
+
 .form-grid {
   display: grid;
   gap: 0.8rem;
@@ -214,7 +289,7 @@ input[type="password"],
 input[type="file"] {
   width: 100%;
   margin-top: 0.25rem;
-  border: 1px solid #d9ceb9;
+  border: 1px solid #d4c2a4;
   border-radius: 12px;
   padding: 0.65rem 0.75rem;
   background: #fff;
@@ -226,7 +301,7 @@ 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);
+  box-shadow: 0 0 0 3px rgba(178, 137, 70, 0.24);
 }
 
 .radio-row {
@@ -236,10 +311,13 @@ input[type="file"]:focus {
 }
 
 .member-card {
-  border: 1px solid rgba(39, 66, 53, 0.14);
+  border: 1px solid rgba(31, 58, 47, 0.12);
   border-radius: 14px;
   padding: 0.9rem;
-  background: #fff;
+  background: linear-gradient(180deg, #fffdf8 0%, #fdf6ea 100%);
+  box-shadow:
+    0 8px 20px rgba(31, 58, 47, 0.11),
+    0 1px 0 rgba(122, 47, 63, 0.18) inset;
 }
 
 .member-name {
@@ -279,7 +357,7 @@ input[type="file"]:focus {
 .upload-picker {
   display: grid;
   gap: 0.25rem;
-  border: 1px dashed rgba(39, 66, 53, 0.35);
+  border: 1px dashed rgba(109, 47, 61, 0.34);
   border-radius: 14px;
   padding: 0.9rem 1rem;
   background: rgba(255, 255, 255, 0.88);
@@ -288,7 +366,7 @@ input[type="file"]:focus {
 }
 
 .upload-picker:hover {
-  border-color: rgba(39, 66, 53, 0.55);
+  border-color: rgba(109, 47, 61, 0.55);
   background: #fff;
 }
 
@@ -400,15 +478,15 @@ input[type="file"]:focus {
   padding: 0.7rem 1rem;
   cursor: pointer;
   color: #fff;
-  background: var(--forest);
+  background: linear-gradient(180deg, #2a4a3b 0%, #1f3a2f 100%);
   text-decoration: none;
   transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .btn:hover {
-  filter: brightness(1.08);
+  filter: brightness(1.05);
   transform: translateY(-1px);
-  box-shadow: 0 10px 24px rgba(39, 66, 53, 0.2);
+  box-shadow: 0 10px 24px rgba(31, 58, 47, 0.26);
 }
 
 .btn:disabled {
@@ -421,8 +499,13 @@ input[type="file"]:focus {
 
 .btn-ghost {
   color: var(--forest);
-  background: transparent;
-  border: 1px solid rgba(39, 66, 53, 0.2);
+  background: rgba(255, 253, 248, 0.78);
+  border: 1px solid rgba(31, 58, 47, 0.2);
+}
+
+.btn-ghost:hover {
+  border-color: rgba(178, 137, 70, 0.45);
+  box-shadow: 0 6px 14px rgba(31, 58, 47, 0.12);
 }
 
 .form-grid .btn {
@@ -498,8 +581,8 @@ input[type="file"]:focus {
 }
 
 .toolbar-timer-unit {
-  background: rgba(39, 66, 53, 0.045);
-  border: 1px solid rgba(39, 66, 53, 0.09);
+  background: rgba(178, 137, 70, 0.09);
+  border: 1px solid rgba(31, 58, 47, 0.13);
   border-radius: 10px;
   padding: 0.38rem 0.18rem 0.3rem;
   display: grid;
@@ -552,8 +635,9 @@ input[type="file"]:focus {
 .flash {
   padding: 0.7rem 0.9rem;
   border-radius: 10px;
-  background: #f2f7f3;
-  border: 1px solid rgba(39, 66, 53, 0.2);
+  background: linear-gradient(180deg, #fff6f3 0%, #f9f0e7 100%);
+  border: 1px solid rgba(109, 47, 61, 0.25);
+  color: #4c2330;
 }
 
 .gallery-grid {
@@ -567,11 +651,13 @@ input[type="file"]:focus {
 }
 
 .gallery-card {
-  background: #fff;
-  border: 1px solid rgba(39, 66, 53, 0.12);
+  background: linear-gradient(180deg, #fffdf8 0%, #fdf6ea 100%);
+  border: 1px solid rgba(31, 58, 47, 0.12);
   border-radius: 14px;
   padding: 0.6rem;
-  box-shadow: 0 6px 20px rgba(39, 66, 53, 0.08);
+  box-shadow:
+    0 9px 22px rgba(31, 58, 47, 0.12),
+    0 1px 0 rgba(122, 47, 63, 0.18) inset;
 }
 
 .gallery-media {
@@ -596,7 +682,7 @@ input[type="file"]:focus {
 }
 
 .btn-danger {
-  background: #8a2f2f;
+  background: linear-gradient(180deg, #7f3240 0%, #6d2f3d 100%);
 }
 
 .gallery-delete-btn {
@@ -607,7 +693,7 @@ input[type="file"]:focus {
   height: 2rem;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.85);
-  background: rgba(138, 47, 47, 0.92);
+  background: rgba(109, 47, 61, 0.93);
   color: #fff;
   cursor: pointer;
   display: inline-flex;
@@ -623,7 +709,7 @@ input[type="file"]:focus {
 }
 
 .gallery-delete-btn:hover {
-  background: #7b2727;
+  background: #5e2733;
 }
 
 .lightbox {
@@ -804,9 +890,12 @@ input[type="file"]:focus {
   display: grid;
   gap: 0.7rem;
   padding: 0.9rem;
-  border: 1px solid rgba(39, 66, 53, 0.14);
+  border: 1px solid rgba(31, 58, 47, 0.12);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.7);
+  background: linear-gradient(180deg, #fffdf8 0%, #fdf6ea 100%);
+  box-shadow:
+    0 8px 20px rgba(31, 58, 47, 0.1),
+    0 1px 0 rgba(122, 47, 63, 0.16) inset;
 }
 
 .map-consent p {
@@ -905,8 +994,8 @@ input[type="file"]:focus {
 }
 
 .site-footer {
-  border-top: 1px solid rgba(39, 66, 53, 0.12);
-  background: rgba(255, 255, 255, 0.64);
+  border-top: 1px solid rgba(178, 137, 70, 0.26);
+  background: rgba(252, 246, 237, 0.82);
   backdrop-filter: blur(4px);
   padding: 0.72rem 1rem;
   display: flex;
@@ -915,7 +1004,7 @@ input[type="file"]:focus {
 }
 
 .site-footer a {
-  color: rgba(39, 66, 53, 0.85);
+  color: rgba(31, 58, 47, 0.88);
   text-decoration: none;
   font-size: 0.95rem;
   font-weight: 600;
@@ -949,27 +1038,7 @@ input[type="file"]:focus {
 
 @media (min-width: 1024px) {
   .login-layout {
-    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 {
-    margin-bottom: 0;
-  }
-
-  .login-layout .hero {
-    min-height: 88%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 2.2rem;
-  }
-
-  .login-layout .form-card {
-    max-width: none;
-    padding: 1.5rem;
+    max-width: 840px;
+    margin-top: 0.45rem;
   }
 }
diff --git a/backend/templates/login.html b/backend/templates/login.html
index a02c4a5..ade2942 100644
--- a/backend/templates/login.html
+++ b/backend/templates/login.html
@@ -1,13 +1,13 @@
 {% extends 'base.html' %}
 {% block content %}
 <div class="login-layout">
-  <section class="hero card">
-    <h1>{{ t('subtitle') }}</h1>
-    <p>{{ t('login_note') }}</p>
-  </section>
-
-  <section class="card form-card">
-    <h2>{{ t('login') }}</h2>
+  <section class="card login-shell">
+    <header class="login-intro">
+      <h1>{{ t('subtitle') }}</h1>
+      <p>{{ t('login_note') }}</p>
+    </header>
+    <hr class="login-divider" />
+    <h2 class="login-title">{{ t('login') }}</h2>
     <form method="post" action="{{ url_for('login') }}" class="form-grid">
       <label>
         {{ t('group_name') }}