/* SEE login: a quiet brand composition alongside the platform's sign-in form. */
.login-body { margin: 0; padding: 0; background: var(--panel); }
.login-layout { max-width: none; margin: 0; padding: 0; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(410px, .85fr); }
.login-layout > section { margin-bottom: 0; }
.login-showcase {
    display: flex; flex-direction: column; position: relative; isolation: isolate;
    overflow: hidden; padding: 36px 48px 28px; color: #f2f6f8;
    background: radial-gradient(ellipse at 32% 40%, #2b789e22, transparent 58%),
        radial-gradient(ellipse at 85% 75%, #24978318, transparent 45%),
        linear-gradient(160deg, #353535, #292929 80%);
    border-right: 1px solid #ffffff0e;
}
.login-showcase::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px);
    background-size: 56px 56px; mask-image: radial-gradient(ellipse, #000, transparent 75%);
}
.login-showcase-top, .login-showcase-bottom { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.login-showcase-top img { width: 88px; height: 54px; object-fit: contain; }
.login-showcase-top > span { font-size: 9px; line-height: 1.8; letter-spacing: .18em; color: #b9cbd3; text-align: right; }
.login-showcase-center { margin: auto 0; padding: 4px 0 36px; }
.login-network { width: min(100%, 540px); aspect-ratio: 1; position: relative; margin: 0 auto; }
.login-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.login-orbit-outer { inset: 14.5%; border: 1px solid #ffffff0d; box-shadow: 0 0 0 36px #ffffff02, 0 0 0 72px #ffffff01; }
.login-orbit-inner { inset: 27%; border: 1px dashed #80bdb425; animation: login-orbit 100s linear infinite; }
.login-connections { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-link-base { stroke: url(#login-link); stroke-opacity: .2; stroke-width: 1; }
.login-link-flow { stroke: url(#login-link); stroke-opacity: .65; stroke-width: 1.4; stroke-dasharray: 4 160; animation: login-flow 16s linear infinite; }
.login-see-core {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 39%; aspect-ratio: 1; display: grid; place-items: center;
    border-radius: 50%; background: radial-gradient(circle, #3b4648, #303739 80%);
    border: 1px solid #86b7c52a; box-shadow: 0 14px 65px #06151935, inset 0 1px 0 #ffffff0d;
}
.login-see-core img { width: 90%; height: 90%; object-fit: contain; filter: url(#see-logo-light-ink); }
.login-module {
    position: absolute; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 24%; display: grid; place-items: center;
    background: linear-gradient(145deg, #3a4142, #303536);
    border: 1px solid color-mix(in srgb, var(--node-color) 35%, #3c4547);
    box-shadow: 0 12px 34px #0e1b232b, inset 0 1px 0 #ffffff0b;
}
.login-module::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--node-color); right: 12%; top: 12%; box-shadow: 0 0 10px color-mix(in srgb, var(--node-color) 35%, transparent); }
.login-module img { width: 68%; height: 68%; object-fit: contain; filter: url(#see-logo-light-ink); }
.login-module-safety { left: 21%; top: 23%; --node-color: #79d8af; }
.login-module-supply { left: 79%; top: 23%; --node-color: #f6ad6b; }
.login-module-maintenance { left: 21%; top: 77%; --node-color: #80b4f7; }
.login-module-cyber { left: 79%; top: 77%; --node-color: #bf9be7; }
.login-showcase-copy { max-width: 450px; margin: -4px auto 0; text-align: center; }
.login-suite-label { color: #8bc8d0; font-size: 10px; letter-spacing: .23em; font-weight: 600; }
.login-showcase-copy h2 { margin: 15px 0 20px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.035em; line-height: 1.35; color: #f3f7f8; }
.login-spectrum { display: flex; justify-content: center; gap: 5px; }
.login-spectrum i { width: 22px; height: 3px; border-radius: 4px; background: #32a9df; }
.login-spectrum i:nth-child(2) { background: #59bf86; }
.login-spectrum i:nth-child(3) { background: #eed24c; }
.login-spectrum i:nth-child(4) { background: #eca14d; }
.login-spectrum i:nth-child(5) { background: #dd665d; }
.login-showcase-bottom { color: #9eafb6; font-size: 9px; letter-spacing: .16em; padding-top: 20px; border-top: 1px solid #ffffff10; }
.login-showcase-bottom > span:first-child { font-weight: 800; font-size: 13px; color: #d3e0e5; letter-spacing: .02em; }
.login-panel { display: flex; flex-direction: column; padding: 36px clamp(32px, 4.6vw, 80px) 28px; background: var(--panel); min-width: 0; }
.login-panel-top { display: flex; justify-content: flex-end; }
.login-panel-top .language-picker { display: block; }
.login-panel-top .language-trigger { min-width: 150px; justify-content: space-between; }
.login-form-content { width: 100%; max-width: 390px; margin: auto; padding: 56px 0; animation: login-arrive .5s ease-out both; }
.login-welcome-icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--skin-tint); color: var(--blue); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 30px; }
.login-welcome-icon svg { width: 25px; height: 25px; }
.login-form-content > .eyebrow { font-size: 9px; letter-spacing: .13em; line-height: 1.6; }
.login-form-content h1 { margin: 10px 0 36px; font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -.045em; color: var(--text); }
.login-field { margin-bottom: 24px; }
.login-field label { display: block; color: var(--text-soft); font-size: 12px; font-weight: 500; margin: 0 0 10px; }
.login-field input { width: 100%; min-height: 50px; margin: 0; padding: 13px 15px; font-size: 14px; border-radius: 9px; }
.login-password-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.login-password-label a { font-size: 11px; color: var(--blue); text-align: right; }
.login-password-input { position: relative; }
.login-password-input input { padding-right: 50px; }
.login-password-input .login-reveal { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; }
.login-reveal svg { width: 20px; height: 20px; }
.login-reveal:hover { color: var(--blue); }
.login-reveal[hidden] { display: none; }
.login-form .login-submit { width: 100%; min-height: 50px; justify-content: center; border-radius: 9px; margin-top: 6px; font-size: 14px; }
.login-form .errorlist { padding: 12px 14px; list-style: none; background: color-mix(in srgb, var(--skin-error) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--skin-error) 35%, var(--border)); border-radius: 8px; color: var(--skin-error); font-size: 12px; line-height: 1.6; }
.login-register { display: flex; align-items: center; gap: 18px; margin-top: 32px; }
.login-register span { flex: 1; height: 1px; background: var(--border); }
.login-register a { color: var(--blue); font-size: 12px; }
.login-panel-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; color: var(--text-muted); }
.login-panel-bottom a { color: var(--text-soft); }
.login-panel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-panel :is(a, button):focus-visible { outline: 2px solid var(--skin-focus); outline-offset: 4px; }
.d-none{ display: none; }
@keyframes login-orbit { to { transform: rotate(360deg); } }
@keyframes login-flow { to { stroke-dashoffset: -328; } }
@keyframes login-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) and (max-height: 800px) {
    .login-network { max-width: 420px; }
    .login-showcase-copy h2 { font-size: 24px; }
    .login-form-content { padding: 32px 0; }
}
@media (max-width: 900px) {
    .login-layout { grid-template-columns: 1fr; }
    .login-showcase { padding: 24px 28px; }
    .login-showcase-top img { width: 68px; height: 42px; }
    .login-showcase-center { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: 0; }
    .login-network { width: 100%; max-width: 300px; }
    .login-showcase-copy { margin: 0; }
    .login-showcase-copy h2 { font-size: 22px; }
    .login-showcase-bottom { display: none; }
    .login-panel { padding: 24px 32px; }
    .login-form-content { max-width: 440px; padding: 30px 0 44px; }
}
@media (max-width: 520px) {
    .login-showcase { padding: 20px 24px 26px; }
    .login-showcase-center { display: block; }
    .login-network { max-width: 260px; margin-top: -16px; }
    .login-showcase-copy { max-width: 290px; margin: -6px auto 0; }
    .login-suite-label { font-size: 8px; }
    .login-showcase-copy h2 { font-size: 20px; margin: 10px 0 14px; }
    .login-panel { padding: 24px; }
    .login-welcome-icon { display: none; }
    .login-form-content h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .login-orbit-inner, .login-link-flow, .login-form-content { animation: none; }
}

/* Registration shares the sign-in design, with the same left-hand artwork and right-hand form. */
.register-layout { grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr); }
.register-layout .login-showcase { border-right: 1px solid #ffffff0e; }
.register-layout .login-form-content { max-width: 440px; padding: 32px 0; }
.register-layout .login-welcome-icon { margin-bottom: 20px; }
.register-layout h1 { margin-bottom: 28px; }
.register-form > p { margin: 0 0 20px; }
.register-form label { display: block; color: var(--text-soft); font-size: 12px; font-weight: 500; margin-bottom: 8px; }
.register-form input { width: 100%; min-height: 50px; margin: 0; padding: 13px 15px; font-size: 14px; border-radius: 9px; }
.register-form .helptext { display: block; margin-top: 8px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.register-form ul:not(.errorlist) { padding-left: 18px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.register-layout .registration-errors { font-size: 12px; line-height: 1.6; margin-bottom: 24px; }
.register-layout .registration-errors ul { padding-left: 18px; }
@media (max-width: 900px) {
    .register-layout { grid-template-columns: 1fr; }
    .register-layout .login-showcase { border-right: 0; border-bottom: 1px solid #ffffff0e; }
}