diff --git a/src/main/resources/static/css/password.css b/src/main/resources/static/css/password.css
index e48f06a..e70d734 100644
--- a/src/main/resources/static/css/password.css
+++ b/src/main/resources/static/css/password.css
@@ -181,3 +181,27 @@ input[type="password"]:focus {
         color: #fca5a5;
     }
 }
+
+#strengthBarContainer {
+    width: min(92vw, 480px);
+    margin: 10px auto 0;
+    height: 10px;
+    background: #e2e8f0;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+#strengthBarFill {
+    height: 100%;
+    width: 0;
+    background: var(--bad);
+    transition: width 200ms ease, background-color 200ms ease;
+}
+
+ul#tipsList {
+    width: min(92vw, 480px);
+    margin: 10px auto 0;
+    padding-left: 20px;
+    font-size: 14px;
+    color: var(--text);
+}
diff --git a/src/main/resources/templates/password.html b/src/main/resources/templates/password.html
index 49acbb8..a52c609 100644
--- a/src/main/resources/templates/password.html
+++ b/src/main/resources/templates/password.html
@@ -5,32 +5,6 @@
     <title>PassMetric</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" th:href="@{/css/password.css}">
-    <style>
-        /* Pasek siły hasła – dopasowany do Twojego stylu */
-        #strengthBarContainer {
-            width: min(92vw, 480px);
-            margin: 10px auto 0;
-            height: 10px;
-            background: #e2e8f0;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-
-        #strengthBarFill {
-            height: 100%;
-            width: 0%;
-            background: var(--bad);
-            transition: width 200ms ease, background-color 200ms ease;
-        }
-
-        ul#tipsList {
-            width: min(92vw, 480px);
-            margin: 10px auto 0;
-            padding-left: 20px;
-            font-size: 14px;
-            color: var(--text);
-        }
-    </style>
 </head>
 <body>
 <h1>Sprawdź siłę hasła</h1>
