diff --git a/src/client/styles.css b/src/client/styles.css
index 4b15738..56c622e 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -2,6 +2,7 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 @import 'shadcn/tailwind.css';
+@import './styles/LoginPage.css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -67,6 +68,11 @@ body {
 	min-width: 320px;
 	min-height: 100vh;
 	background: #fff;
+	color: var(--ink);
+}
+.dark body {
+	background: #090a0c;
+	color: #ededed;
 }
 button,
 input,
@@ -872,145 +878,6 @@ button {
 	color: #999;
 }
 
-.auth-page {
-	position: relative;
-	display: grid;
-	grid-template-rows: auto 1fr auto;
-	justify-items: center;
-	min-height: 100dvh;
-	padding: 32px 24px 24px;
-	background: radial-gradient(circle at 50% 38%, rgb(62 207 142 / 0.08), transparent 34%), linear-gradient(#fff, #fcfcfc);
-}
-.auth-theme-toggle {
-	position: absolute;
-	z-index: 1;
-	top: 28px;
-	right: 28px;
-}
-.auth-page::before {
-	position: fixed;
-	inset: 0;
-	z-index: 0;
-	pointer-events: none;
-	background-image: radial-gradient(#dcdcdc 0.65px, transparent 0.65px);
-	background-size: 16px 16px;
-	mask-image: linear-gradient(to bottom, transparent, black 24%, transparent 76%);
-	content: '';
-}
-.auth-brand {
-	position: relative;
-	z-index: 1;
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 20px;
-	font-weight: 600;
-	letter-spacing: -0.6px;
-}
-.auth-brand-mark {
-	width: 26px;
-	height: 26px;
-	color: var(--primary-deep);
-}
-.auth-card {
-	position: relative;
-	z-index: 1;
-	align-self: center;
-	width: min(100%, 420px);
-	padding: 36px;
-	border: 1px solid var(--hairline);
-	border-radius: 12px;
-	background: rgb(255 255 255 / 0.96);
-	box-shadow:
-		0 18px 55px rgb(24 74 52 / 0.08),
-		0 2px 8px rgb(0 0 0 / 0.04);
-	animation: enter 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-.auth-heading p {
-	margin: 0 0 12px;
-	font:
-		500 10px/1.4 'IBM Plex Mono',
-		monospace;
-	letter-spacing: 0.08em;
-	text-transform: uppercase;
-	color: #55816e;
-}
-.auth-heading h1 {
-	margin: 0;
-	font-size: 30px;
-	font-weight: 500;
-	line-height: 1.16;
-	letter-spacing: -1.2px;
-}
-.auth-heading > span {
-	display: block;
-	margin-top: 12px;
-	font-size: 19px;
-	line-height: 1.55;
-	color: #626262;
-}
-.auth-form {
-	display: grid;
-	gap: 20px;
-	margin-top: 30px;
-}
-.auth-field {
-	display: grid;
-	gap: 8px;
-}
-.auth-field label {
-	font-size: 13px;
-	font-weight: 500;
-	color: #353535;
-}
-.auth-error {
-	margin: -4px 0 0;
-	padding: 10px 12px;
-	border: 1px solid #efcaca;
-	border-radius: 6px;
-	font-size: 12px;
-	line-height: 1.45;
-	color: #9f2f2f;
-	background: #fff6f6;
-}
-.auth-submit {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	min-height: 42px;
-	padding: 8px 16px;
-	border: 1px solid #35c586;
-	border-radius: 6px;
-	font-size: 14px;
-	font-weight: 600;
-	color: var(--ink);
-	background: var(--primary);
-	box-shadow:
-		0 1px 2px rgb(0 0 0 / 0.08),
-		inset 0 1px rgb(255 255 255 / 0.2);
-	cursor: pointer;
-}
-.auth-submit:hover:not(:disabled) {
-	background: #36c487;
-	transform: translateY(-1px);
-}
-.auth-submit:active:not(:disabled) {
-	background: var(--primary-deep);
-	transform: translateY(1px);
-}
-.auth-submit:disabled {
-	cursor: wait;
-	opacity: 0.62;
-}
-.auth-footnote {
-	position: relative;
-	z-index: 1;
-	margin: 0;
-	font-size: 11px;
-	color: #858585;
-}
-
 .detail-main {
 	padding-top: 34px;
 }
@@ -3125,15 +2992,6 @@ button {
 	.channel-dialog-footer button {
 		flex: 1;
 	}
-	.auth-page {
-		padding: 24px 16px;
-	}
-	.auth-card {
-		padding: 28px 22px;
-	}
-	.auth-heading h1 {
-		font-size: 27px;
-	}
 	.dashboard-header-inner {
 		height: 62px;
 	}
diff --git a/src/client/styles/LoginPage.css b/src/client/styles/LoginPage.css
new file mode 100644
index 0000000..be2b920
--- /dev/null
+++ b/src/client/styles/LoginPage.css
@@ -0,0 +1,259 @@
+.auth-page {
+	position: relative;
+	display: grid;
+	grid-template-rows: auto 1fr auto;
+	justify-items: center;
+	min-height: 100dvh;
+	padding: 32px 24px 24px;
+	background: radial-gradient(circle at 50% 38%, rgb(62 207 142 / 0.08), transparent 34%), linear-gradient(#fff, #fcfcfc);
+	transition:
+		background 0.25s ease,
+		color 0.25s ease;
+}
+.dark .auth-page {
+	background:
+		radial-gradient(ellipse 75% 55% at 50% 30%, rgba(62, 207, 142, 0.12), transparent 65%),
+		radial-gradient(ellipse 40% 30% at 50% 12%, rgba(36, 180, 126, 0.07), transparent 50%),
+		linear-gradient(180deg, #0c0e10 0%, #070809 100%);
+}
+.auth-theme-toggle {
+	position: absolute;
+	z-index: 1;
+	top: 28px;
+	right: 28px;
+	transition:
+		color 0.15s ease,
+		background 0.15s ease,
+		border-color 0.15s ease;
+}
+.dark .auth-theme-toggle {
+	color: #9ca3af;
+	background: rgba(255, 255, 255, 0.03);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	border-radius: 8px;
+	backdrop-filter: blur(8px);
+}
+.dark .auth-theme-toggle:hover:not(:disabled) {
+	color: #3ecf8e;
+	background: rgba(62, 207, 142, 0.1);
+	border-color: rgba(62, 207, 142, 0.25);
+}
+.auth-page::before {
+	position: fixed;
+	inset: 0;
+	z-index: 0;
+	pointer-events: none;
+	background-image: radial-gradient(#dcdcdc 0.65px, transparent 0.65px);
+	background-size: 16px 16px;
+	mask-image: linear-gradient(to bottom, transparent, black 24%, transparent 76%);
+	content: '';
+}
+.dark .auth-page::before {
+	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
+	background-size: 20px 20px;
+	mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 25%, transparent 80%);
+}
+.auth-brand {
+	position: relative;
+	z-index: 1;
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 20px;
+	font-weight: 600;
+	letter-spacing: -0.6px;
+}
+.dark .auth-brand {
+	color: #ffffff;
+}
+.auth-brand-mark {
+	width: 26px;
+	height: 26px;
+	color: var(--primary-deep);
+}
+.dark .auth-brand-mark {
+	color: #3ecf8e;
+	filter: drop-shadow(0 0 12px rgba(62, 207, 142, 0.45));
+}
+.auth-card {
+	position: relative;
+	z-index: 1;
+	align-self: center;
+	width: min(100%, 420px);
+	padding: 36px;
+	border: 1px solid var(--hairline);
+	border-radius: 12px;
+	background: rgb(255 255 255 / 0.96);
+	box-shadow:
+		0 18px 55px rgb(24 74 52 / 0.08),
+		0 2px 8px rgb(0 0 0 / 0.04);
+	animation: enter 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.dark .auth-card {
+	background: rgba(17, 19, 23, 0.82);
+	backdrop-filter: blur(20px);
+	-webkit-backdrop-filter: blur(20px);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	box-shadow:
+		0 0 0 1px rgba(255, 255, 255, 0.05),
+		0 24px 64px -12px rgba(0, 0, 0, 0.8),
+		0 0 45px -10px rgba(62, 207, 142, 0.08),
+		inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
+}
+.auth-heading p {
+	margin: 0 0 12px;
+	font:
+		500 10px/1.4 'IBM Plex Mono',
+		monospace;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	color: #55816e;
+}
+.dark .auth-heading p {
+	color: #3ecf8e;
+}
+.auth-heading h1 {
+	margin: 0;
+	font-size: 30px;
+	font-weight: 500;
+	line-height: 1.16;
+	letter-spacing: -1.2px;
+}
+.dark .auth-heading h1 {
+	color: #f9fafb;
+}
+.auth-heading > span {
+	display: block;
+	margin-top: 12px;
+	font-size: 19px;
+	line-height: 1.55;
+	color: #626262;
+}
+.dark .auth-heading > span {
+	color: #9ca3af;
+}
+.auth-form {
+	display: grid;
+	gap: 20px;
+	margin-top: 30px;
+}
+.auth-field {
+	display: grid;
+	gap: 8px;
+}
+.auth-field label {
+	font-size: 13px;
+	font-weight: 500;
+	color: #353535;
+}
+.dark .auth-field label {
+	color: #d1d5db;
+}
+.dark .auth-field input {
+	background-color: rgba(11, 13, 15, 0.85);
+	border-color: rgba(255, 255, 255, 0.12);
+	color: #f9fafb;
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+	transition:
+		border-color 0.15s ease,
+		box-shadow 0.15s ease;
+}
+.dark .auth-field input:hover {
+	border-color: rgba(255, 255, 255, 0.24);
+}
+.dark .auth-field input:focus-visible {
+	border-color: #3ecf8e;
+	box-shadow:
+		0 0 0 3px rgba(62, 207, 142, 0.2),
+		inset 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+.auth-error {
+	margin: -4px 0 0;
+	padding: 10px 12px;
+	border: 1px solid #efcaca;
+	border-radius: 6px;
+	font-size: 12px;
+	line-height: 1.45;
+	color: #9f2f2f;
+	background: #fff6f6;
+}
+.dark .auth-error {
+	background: rgba(239, 68, 68, 0.12);
+	border-color: rgba(239, 68, 68, 0.28);
+	color: #fca5a5;
+}
+.auth-submit {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	min-height: 42px;
+	padding: 8px 16px;
+	border: 1px solid #35c586;
+	border-radius: 6px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--ink);
+	background: var(--primary);
+	box-shadow:
+		0 1px 2px rgb(0 0 0 / 0.08),
+		inset 0 1px rgb(255 255 255 / 0.2);
+	cursor: pointer;
+}
+.auth-submit:hover:not(:disabled) {
+	background: #36c487;
+	transform: translateY(-1px);
+}
+.auth-submit:active:not(:disabled) {
+	background: var(--primary-deep);
+	transform: translateY(1px);
+}
+.auth-submit:disabled {
+	cursor: wait;
+	opacity: 0.62;
+}
+.dark .auth-submit {
+	background: #3ecf8e;
+	border-color: #3ecf8e;
+	color: #090a0c;
+	font-weight: 600;
+	box-shadow:
+		0 1px 2px rgba(0, 0, 0, 0.3),
+		0 4px 14px rgba(62, 207, 142, 0.3),
+		inset 0 1px 0 rgba(255, 255, 255, 0.35);
+	transition: all 0.15s ease;
+}
+.dark .auth-submit:hover:not(:disabled) {
+	background: #4ae09e;
+	border-color: #4ae09e;
+	box-shadow:
+		0 4px 20px rgba(62, 207, 142, 0.45),
+		inset 0 1px 0 rgba(255, 255, 255, 0.4);
+	transform: translateY(-1px);
+}
+.dark .auth-submit:active:not(:disabled) {
+	background: #24b47e;
+	transform: translateY(1px);
+}
+.auth-footnote {
+	position: relative;
+	z-index: 1;
+	margin: 0;
+	font-size: 11px;
+	color: #858585;
+}
+.dark .auth-footnote {
+	color: #6b7280;
+}
+
+@media (max-width: 440px) {
+	.auth-page {
+		padding: 24px 16px;
+	}
+	.auth-card {
+		padding: 28px 22px;
+	}
+	.auth-heading h1 {
+		font-size: 27px;
+	}
+}