--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/.cms/css/base.css	Fri Oct 11 22:40:23 2024 +0000
@@ -0,0 +1,127 @@
+#base {
+    display: grid;
+    gap: 1rem;
+    overflow-y: auto;
+    max-height: 100%;
+}
+
+@media (max-width: 1023px) {
+#base {
+        padding: 1rem 0.4rem 1rem 0.4rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    #base {
+        grid-template-columns: 17rem 1fr;
+        grid-template-rows: auto;
+        padding: 1rem;
+    }
+}
+
+#base .db-settings {
+    grid-column: 1/2;
+    background-color: var(--windows);
+    background-image: var(--noise);
+    box-shadow: var(--shadows);
+    border-radius: 0.3rem;
+}
+@media (max-width: 1023px) {
+    #base .db-settings {
+        padding: 1rem 0.7rem 1rem 0.7rem;
+    }
+}
+@media (min-width: 1024px) {
+    #base .db-settings {
+        padding: 1rem;
+    }
+}
+
+#base form {
+    display: grid;
+    row-gap: 2rem;
+}
+
+#base form > div {
+    position: relative;
+    display: grid;
+    row-gap: 1rem;
+}
+#base .create {
+    font-size: 1rem;
+    color: var(--names);
+    text-align: center;
+    user-select: none;
+}
+
+
+#base form div > div div:not(.password-eye) {
+    font-size: 1rem;
+    margin-bottom: 3px;
+    color: var(--windows-font);
+}
+
+#base form .pro-btn {
+    cursor: pointer;
+    text-align: center;
+    padding: 0.3rem;
+    border: 1px solid var(--bg-3);
+    border-radius: 0.2rem;
+    color: var(--link);
+    user-select: none;
+}
+#base form .pro {
+    display: none;
+}
+#base form.show-pro .pro {
+    display: grid;
+}
+
+
+
+#base form .password-widget {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 5px;
+}
+#base form .password-widget input {
+    grid-column: 1/-1;
+    grid-row: 1/2;
+}
+
+#base form input {
+    border-radius: 4px;
+    font-size: 0.875rem;
+    font-family: var(--monospace);
+    padding: 0 0.54rem 3px 0.54rem;
+    min-height: 35px;
+    height: 35px;
+    width: 100%;
+    color: var(--input-font);
+    background-color: var(--input-bg);
+    border: 2px solid var(--input-border);
+}
+#base form input[name="password"] {
+    grid-column: 1 / -1;
+    grid-row: 1 / 2;
+    padding-right: 2.2rem;
+}
+
+#base form > div > div {
+    position: relative;
+}
+#base form .password-eye {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+    width: 34px;
+    height: 34px;
+    z-index: 1;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-size: 20px;
+    background-position: center;
+    background-image: var(--eye-off);
+}
+#base form .password-eye.showed {
+    background-image: var(--eye-on);
+}