Changes

web/wwwroot/css/myai.css

@@ -433,6 +433,34 @@ img {
     margin-top: 14px
 }
 
+.form-message:empty {
+    display: none
+}
+
+.form-message:not(:empty) {
+    padding: 10px 14px;
+    border-radius: 12px;
+    border: 1px solid rgba(255,255,255,.08);
+    background: rgba(0,0,0,.18);
+    font-weight: 700;
+    line-height: 1.4
+}
+
+.form-message.text-success:not(:empty) {
+    background: rgba(126,242,167,.08);
+    border-color: rgba(126,242,167,.35)
+}
+
+.form-message.text-danger:not(:empty) {
+    background: rgba(255,138,138,.08);
+    border-color: rgba(255,138,138,.35)
+}
+
+.form-message.text-warning:not(:empty) {
+    background: rgba(247,212,136,.08);
+    border-color: rgba(247,212,136,.35)
+}
+
 .text-success {
     color: #7ef2a7 !important
 }
@@ -441,6 +469,44 @@ img {
     color: #ff8a8a !important
 }
 
+.text-warning {
+    color: #f7d488 !important
+}
+
+.subscribe-form {
+    margin-top: 28px;
+    padding: 28px;
+    border-radius: 24px;
+    background: rgba(255,255,255,.03);
+    border: 1px solid rgba(255,255,255,.08)
+}
+
+.subscribe-form h3 {
+    margin: 0 0 6px;
+    font-size: 1.1rem
+}
+
+.subscribe-form p {
+    margin: 0 0 14px;
+    color: var(--muted);
+    font-size: .92rem
+}
+
+.subscribe-form .subscribe-row {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap
+}
+
+.subscribe-form .subscribe-row input[type="email"] {
+    flex: 1 1 220px;
+    min-width: 0
+}
+
+.subscribe-form .consent-inline {
+    margin-top: 12px
+}
+
 .footer {
     padding: 26px 0;
     border-top: 1px solid rgba(255,255,255,.08);
@@ -513,15 +579,47 @@ img {
     z-index: 80;
     background: rgba(0,0,0,.55);
     align-items: center;
-    justify-content: center
+    justify-content: center;
+    backdrop-filter: blur(2px)
 }
 
 .loader-box {
-    padding: 20px 30px;
+    max-width: 360px;
+    padding: 22px 28px;
     border-radius: 18px;
     background: #071326;
     border: 1px solid rgba(255,255,255,.16);
-    font-weight: 800
+    text-align: center;
+    box-shadow: var(--shadow)
+}
+
+.loader-box strong {
+    display: block;
+    font-weight: 800;
+    margin-bottom: 6px
+}
+
+.loader-box span {
+    display: block;
+    color: var(--muted);
+    font-weight: 500;
+    font-size: .92rem;
+    line-height: 1.5
+}
+
+.loader-spinner {
+    display: block;
+    width: 28px;
+    height: 28px;
+    margin: 0 auto 14px;
+    border-radius: 50%;
+    border: 3px solid rgba(255,255,255,.18);
+    border-top-color: #9cc5ff;
+    animation: loader-spin .8s linear infinite
+}
+
+@keyframes loader-spin {
+    to { transform: rotate(360deg) }
 }
 
 .shake {