html[data-ui-style="precision"] body.login-active {
--login-bg: #edf3fa;
--login-grid: rgba(9, 80, 189, .06);
--login-glow-primary: rgba(9, 80, 189, .2);
--login-shell: rgba(255, 255, 255, .92);
--login-shell-line: #c5cfdb;
--login-panel: #0d2b4f;
--login-panel-text: #eef6ff;
--login-panel-muted: #9ab3ca;
--login-panel-soft: rgba(9, 80, 189, .16);
--login-card: #ffffff;
--login-text: #121825;
--login-muted: #626e82;
--login-line: #d1d9e3;
--login-input: #ffffff;
--login-placeholder: #626e82;
--login-accent: #0950bd;
--login-accent-hover: #06449f;
--login-button-text: #ffffff;
}
html[data-ui-style="nocturne"] body.login-active {
--login-bg: #07111f;
--login-grid: rgba(37, 217, 232, .08);
--login-glow-primary: rgba(37, 217, 232, .2);
--login-shell: #091624;
--login-shell-line: #24475b;
--login-panel: #050b14;
--login-panel-text: #eafcff;
--login-panel-muted: #90aebc;
--login-panel-soft: rgba(37, 217, 232, .13);
--login-card: #0d1b2b;
--login-text: #eafcff;
--login-muted: #9bb4c0;
--login-line: #31586b;
--login-input: #10263a;
--login-placeholder: #88a6b5;
--login-accent: #25d9e8;
--login-accent-hover: #18afbd;
--login-button-text: #06131d;
color-scheme: dark;
}
html[data-ui-style="minimalist"] body.login-active {
--login-bg: #f5f5f5;
--login-grid: rgba(33, 33, 33, .035);
--login-glow-primary: transparent;
--login-shell: #ffffff;
--login-shell-line: #dbdbdb;
--login-panel: #fafafa;
--login-panel-text: #212121;
--login-panel-muted: #666666;
--login-panel-soft: #eeeeee;
--login-card: #ffffff;
--login-text: #212121;
--login-muted: #666666;
--login-line: #d8d8d8;
--login-input: #ffffff;
--login-placeholder: #737373;
--login-accent: #212121;
--login-accent-hover: #000000;
--login-button-text: #ffffff;
}
html[data-ui-style="cyberpunk"] body.login-active {
--login-bg: #edf2f8;
--login-grid: rgba(108, 131, 255, .035);
--login-glow-primary: rgba(108, 131, 255, .2);
--login-shell: #f3f6fb;
--login-shell-line: #cbd5e3;
--login-panel: #edf2f8;
--login-panel-text: #11213b;
--login-panel-muted: #586a84;
--login-panel-soft: #e7edf5;
--login-card: #f3f6fb;
--login-text: #11213b;
--login-muted: #586a84;
--login-line: #cbd5e3;
--login-input: #edf2f8;
--login-placeholder: #5c6d85;
--login-accent: #3f51bd;
--login-accent-hover: #33439f;
--login-button-text: #ffffff;
color-scheme: light;
}
html[data-ui-style="glass"] body.login-active {
--login-bg: #0b1f4a;
--login-grid: rgba(215, 227, 247, .08);
--login-glow-primary: rgba(67, 137, 245, .48);
--login-shell: rgba(11, 31, 74, .4);
--login-shell-line: rgba(215, 227, 247, .3);
--login-panel: rgba(11, 31, 74, .44);
--login-panel-text: #f7faff;
--login-panel-muted: #d7e3f7;
--login-panel-soft: rgba(118, 168, 255, .2);
--login-card: rgba(20, 48, 96, .7);
--login-text: #f7faff;
--login-muted: #d7e3f7;
--login-line: rgba(215, 227, 247, .3);
--login-input: rgba(11, 31, 74, .58);
--login-placeholder: #b9c9e3;
--login-accent: #76a8ff;
--login-accent-hover: #8b78f6;
--login-button-text: #071a3d;
color-scheme: dark;
}
html[data-ui-style="precision"] body.login-active #login-guard .login-card {
border-radius: 14px;
box-shadow: 0 28px 64px rgba(9, 80, 189, .14);
}
html[data-ui-style="nocturne"] body.login-active #login-guard {
background-image: radial-gradient(circle at 16% 8%, rgba(37, 217, 232, .14), transparent 30%), linear-gradient(145deg, #07111f, #0d1b2b);
background-repeat: no-repeat;
background-size: auto;
}
html[data-ui-style="nocturne"] body.login-active #login-guard .login-card { box-shadow: 0 28px 72px rgba(0, 0, 0, .42); }
html[data-ui-style="minimalist"] body.login-active #login-guard { background: #f5f5f5; }
html[data-ui-style="minimalist"] body.login-active #login-guard .login-capabilities { border-right: 1px solid #212121; background: #fafafa; }
html[data-ui-style="minimalist"] body.login-active #login-guard .login-card { border: 0; box-shadow: none; }
html[data-ui-style="minimalist"] body.login-active #login-guard .login-coordinate-copy h2 { font-size: clamp(40px, 3.5vw, 52px); font-weight: 500; }
html[data-ui-style="cyberpunk"] body.login-active #login-guard {
background-image:
radial-gradient(circle at 12% 10%, rgba(56, 207, 211, .13), transparent 28%),
radial-gradient(circle at 88% 16%, rgba(150, 119, 243, .13), transparent 30%),
linear-gradient(145deg, #f3f6fb, #e9eef6);
background-repeat: no-repeat;
background-size: auto;
}
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-shell,
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-card {
border-color: transparent;
border-radius: 24px;
background: #f3f6fb;
box-shadow: 10px 10px 24px rgba(159, 173, 194, .34), -10px -10px 24px rgba(255, 255, 255, .86);
}
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-input-frame {
border-color: transparent;
border-radius: 14px;
background: #edf2f8;
box-shadow: inset 4px 4px 9px rgba(159, 173, 194, .24), inset -4px -4px 9px rgba(255, 255, 255, .82);
}
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-input-frame .text-input {
background: transparent;
color: #11213b;
}
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-input-frame .text-input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #edf2f8 inset;
-webkit-text-fill-color: #11213b;
}
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-card::before {
width: 7px;
border-radius: 999px;
background: linear-gradient(180deg, #38cfd3, #6c83ff 55%, #9677f3);
}
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-brand-mark,
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-coordinate-icon {
border-color: transparent;
background: #f3f6fb;
color: #5d73ef;
box-shadow: 5px 5px 12px rgba(159, 173, 194, .3), -5px -5px 12px rgba(255, 255, 255, .9);
}
html[data-ui-style="cyberpunk"] body.login-active #login-guard .primary-button {
border-color: transparent;
border-radius: 14px;
background: linear-gradient(135deg, #3f51bd, #6445b8);
box-shadow: 6px 6px 14px rgba(159, 173, 194, .34), -6px -6px 14px rgba(255, 255, 255, .9);
text-transform: none;
}
html[data-ui-style="cyberpunk"] body.login-active #login-guard .primary-button:hover:not(:disabled) {
background: linear-gradient(135deg, #33439f, #5739a3);
box-shadow: 4px 4px 10px rgba(159, 173, 194, .3), -4px -4px 10px rgba(255, 255, 255, .88);
}
html[data-ui-style="glass"] body.login-active #login-guard {
background-image: radial-gradient(circle at 10% 12%, rgba(67, 137, 245, .82), transparent 36%), radial-gradient(circle at 88% 18%, rgba(139, 120, 246, .7), transparent 34%), radial-gradient(circle at 66% 100%, rgba(242, 167, 186, .48), transparent 34%), linear-gradient(145deg, #0b1f4a, #193f7c 54%, #273f7d);
background-repeat: no-repeat;
background-size: auto;
}
html[data-ui-style="glass"] body.login-active #login-guard .login-shell,
html[data-ui-style="glass"] body.login-active #login-guard .login-card,
html[data-ui-style="glass"] body.login-active #login-guard .login-input-frame {
border-color: rgba(215, 227, 247, .3);
background-color: rgba(11, 31, 74, .48);
box-shadow: 0 28px 80px rgba(4, 15, 39, .3), inset 0 1px rgba(255, 255, 255, .12);
-webkit-backdrop-filter: blur(24px) saturate(135%);
backdrop-filter: blur(24px) saturate(135%);
}
html[data-ui-style="glass"] body.login-active #login-guard .login-shell { border: 1px solid rgba(215, 227, 247, .28); border-radius: 22px; margin: 24px; min-height: calc(100% - 48px); overflow: hidden; }
html[data-ui-style="glass"] body.login-active #login-guard .login-card { border-radius: 18px; }
html[data-ui-style="glass"] body.login-active #login-guard .primary-button { background: linear-gradient(135deg, #76a8ff, #4389f5 58%, #8b78f6); box-shadow: 0 14px 34px rgba(11, 31, 74, .34), inset 0 1px rgba(255, 255, 255, .28); }
@media (min-width: 1200px) and (max-width: 1600px) {
html[data-ui-style="glass"] body.login-active #login-guard :is(.login-coordinate-label.is-client, .login-coordinate-label.is-project) {
right: 24px;
left: auto;
}
}
html[data-ui-style="precision"] body.login-active,
html[data-ui-style="nocturne"] body.login-active,
html[data-ui-style="minimalist"] body.login-active,
html[data-ui-style="cyberpunk"] body.login-active,
html[data-ui-style="glass"] body.login-active {
--login-focus: var(--login-accent);
}
html[data-ui-style="precision"] body.login-active #login-guard :is(.login-coordinate-meta, .login-capabilities-kicker, .login-card-kicker, .login-access-state, .login-message),
html[data-ui-style="nocturne"] body.login-active #login-guard :is(.login-coordinate-meta, .login-capabilities-kicker, .login-card-kicker, .login-access-state, .login-message),
html[data-ui-style="minimalist"] body.login-active #login-guard :is(.login-coordinate-meta, .login-capabilities-kicker, .login-card-kicker, .login-access-state, .login-message),
html[data-ui-style="cyberpunk"] body.login-active #login-guard :is(.login-coordinate-meta, .login-capabilities-kicker, .login-card-kicker, .login-access-state, .login-message),
html[data-ui-style="glass"] body.login-active #login-guard :is(.login-coordinate-meta, .login-capabilities-kicker, .login-card-kicker, .login-access-state, .login-message) {
font-variant-numeric: tabular-nums;
}
html[data-ui-style="precision"] body.login-active #login-guard .login-card,
html[data-ui-style="nocturne"] body.login-active #login-guard .login-card,
html[data-ui-style="minimalist"] body.login-active #login-guard .login-card,
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-card,
html[data-ui-style="glass"] body.login-active #login-guard .login-card {
line-height: 1.5;
}
html[data-ui-style="precision"] body.login-active #login-guard .login-input-frame:focus-within,
html[data-ui-style="nocturne"] body.login-active #login-guard .login-input-frame:focus-within,
html[data-ui-style="minimalist"] body.login-active #login-guard .login-input-frame:focus-within,
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-input-frame:focus-within,
html[data-ui-style="glass"] body.login-active #login-guard .login-input-frame:focus-within {
border-color: var(--login-focus);
outline: 2px solid var(--login-focus);
outline-offset: 2px;
}
html[data-ui-style="precision"] body.login-active #login-guard .login-message--error,
html[data-ui-style="nocturne"] body.login-active #login-guard .login-message--error,
html[data-ui-style="minimalist"] body.login-active #login-guard .login-message--error,
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-message--error,
html[data-ui-style="glass"] body.login-active #login-guard .login-message--error {
border-inline-start: 3px solid var(--ui-danger, #b42318);
font-weight: 600;
padding-inline-start: 10px;
}
@supports not ((backdrop-filter: blur(1px))) {
html[data-ui-style="glass"] body.login-active #login-guard .login-shell,
html[data-ui-style="glass"] body.login-active #login-guard .login-card,
html[data-ui-style="glass"] body.login-active #login-guard .login-input-frame { background: rgba(11, 31, 74, .96); }
}
@media (max-width: 900px) {
html[data-ui-style="precision"] body.login-active #login-guard .login-shell,
html[data-ui-style="nocturne"] body.login-active #login-guard .login-shell,
html[data-ui-style="minimalist"] body.login-active #login-guard .login-shell,
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-shell,
html[data-ui-style="glass"] body.login-active #login-guard .login-shell { min-height: 0; }
html[data-ui-style="glass"] body.login-active #login-guard .login-shell { margin: 12px; min-height: calc(100% - 24px); }
}
@media (max-width: 560px) {
html[data-ui-style="precision"] body.login-active #login-guard .login-card,
html[data-ui-style="nocturne"] body.login-active #login-guard .login-card,
html[data-ui-style="minimalist"] body.login-active #login-guard .login-card,
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-card,
html[data-ui-style="glass"] body.login-active #login-guard .login-card {
min-width: 0;
padding: 42px 20px 24px;
}
html[data-ui-style="precision"] body.login-active #login-guard .login-message,
html[data-ui-style="nocturne"] body.login-active #login-guard .login-message,
html[data-ui-style="minimalist"] body.login-active #login-guard .login-message,
html[data-ui-style="cyberpunk"] body.login-active #login-guard .login-message,
html[data-ui-style="glass"] body.login-active #login-guard .login-message {
overflow-wrap: anywhere;
}
}
@media (prefers-reduced-motion: reduce) {
html[data-ui-style="precision"] body.login-active #login-guard *,
html[data-ui-style="nocturne"] body.login-active #login-guard *,
html[data-ui-style="minimalist"] body.login-active #login-guard *,
html[data-ui-style="cyberpunk"] body.login-active #login-guard *,
html[data-ui-style="glass"] body.login-active #login-guard * { animation: none; transition: none; }
}