/* Auth pages — ocean glass style like main KitVPN page */

:root {
    color-scheme: dark;
}

html {
    background: #020608 !important;
}

html,
body,
#app,
#app > .flex,
#app > .flex > .nord-container,
.nord-container,
main,
footer,
form,
fieldset {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #e5e7eb !important;
}

body {
    min-height: 100vh;
}

/* Center card — glass, not solid */
html[data-theme='dark'] main.yokZVRsZdciOUIJdx1Xi,
main.yokZVRsZdciOUIJdx1Xi {
    max-width: 555px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(51, 187, 255, 0.22) !important;
    background: rgba(3, 14, 26, 0.45) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(103, 232, 249, 0.08) !important;
    padding: 1.5rem 1.25rem 2rem !important;
}

main.yokZVRsZdciOUIJdx1Xi .w555 {
    max-width: 555px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.nord-container.container {
    background: transparent !important;
}

/* Logo */
.auth-brand-logo,
.nord-image.auth-brand-logo,
img.nord-image {
    width: 120px !important;
    max-width: 140px !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem !important;
    filter: drop-shadow(0 0 24px rgba(51, 187, 255, 0.35));
    cursor: pointer;
}

.auth-page-title {
    margin: 0 auto 1.5rem;
    max-width: 28rem;
    padding: 0 1rem;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    color: #f0f9ff !important;
}

/* Headings / text */
main h1,
.nord-text.text-h4,
html[data-theme='dark'] main h1 {
    color: #f0f9ff !important;
}

.nord-text.text-grey-dark,
.nord-text .text-grey-dark,
html[data-theme='dark'] .nord-text,
html[data-theme='dark'] main p,
html[data-theme='dark'] main span {
    color: rgba(203, 213, 225, 0.85) !important;
}

main .nord-text[style],
main h1[style],
main p[style] {
    color: inherit !important;
}

html[data-theme='dark'] main h1[style] {
    color: #f0f9ff !important;
}

html[data-theme='dark'] main p[style] {
    color: rgba(203, 213, 225, 0.8) !important;
}

/* Links */
a.nord-link,
a.nord-link:visited,
a.nord-link:hover,
a.nord-link span,
body a.nord-link,
body a.nord-link:hover,
body a.nord-link span {
    color: #67e8f9 !important;
    background: transparent !important;
}

a.nord-link:hover {
    color: #a5f3fc !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Inputs — glass */
html[data-theme='dark'] input,
html[data-theme='dark'] textarea,
html[data-theme='dark'] select,
.nord-input,
input.nord-input {
    background: rgba(2, 12, 22, 0.45) !important;
    color: #e5e7eb !important;
    border-color: rgba(51, 187, 255, 0.28) !important;
    border-radius: 0.75rem !important;
}

.nord-input:focus,
input.nord-input:focus {
    border-color: rgba(103, 232, 249, 0.55) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 187, 255, 0.15);
}

.nord-input::placeholder {
    color: rgba(148, 163, 184, 0.75) !important;
}

/* Buttons — transparent cyan outline */
button[type="submit"],
.nord-button,
.nord-button.nord-button--c-blue,
.nord-button.nord-button--v-contained,
button.nord-button--c-blue,
.bg-blue.border-blue {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(51, 187, 255, 0.5) !important;
    color: #7dd3fc !important;
    box-shadow: none !important;
    border-radius: 0.85rem !important;
    font-weight: 700 !important;
}

button[type="submit"]:hover,
.nord-button:hover,
.nord-button.nord-button--c-blue:hover {
    background: rgba(51, 187, 255, 0.12) !important;
    border-color: rgba(103, 232, 249, 0.7) !important;
    color: #a5f3fc !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.18) !important;
    filter: none !important;
}

button[type="submit"]:active,
.nord-button:active {
    transform: translateY(0);
}

/* Footer glass strip */
footer,
html[data-theme='dark'] footer {
    background: transparent !important;
    border-top: 1px solid rgba(51, 187, 255, 0.1);
    color: rgba(148, 163, 184, 0.85) !important;
}

footer a,
footer .c-bw-9,
footer .text-grey {
    color: rgba(148, 163, 184, 0.9) !important;
}

footer a:hover {
    color: #67e8f9 !important;
}

/* Don't paint over ocean */
html[data-theme='dark'] body,
html[data-theme='dark'] #app,
html[data-theme='dark'] #app > .flex,
html[data-theme='dark'] #app > .flex > .nord-container,
html[data-theme='dark'] .nord-container,
html[data-theme='dark'] .flex,
html[data-theme='dark'] .bg-white,
html[data-theme='dark'] [style*='background: white'],
html[data-theme='dark'] [style*='background-color: white'],
html[data-theme='dark'] [style*='background: #fff'],
html[data-theme='dark'] [style*='background-color: #fff'] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #e5e7eb !important;
}

/* Layout */
html, body, #app {
    min-height: 100vh;
}

#app > .flex {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#app > .flex > .nord-container {
    flex: 1 0 auto;
}

#app > .flex > footer {
    margin-top: auto;
}

header.tw-fixed {
    display: none !important;
}