/* Login-only theme. Brand colors sampled from the existing Trident logo. */
.brand-login {
    --login-blue: #0d9ad6;
    --login-green: #0c8643;
    --login-red: #b72d26;
    --login-ink: #243b50;
    --login-header-height: 68px;
    --login-footer-height: 38px;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--login-header-height) 28px var(--login-footer-height);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    color: var(--login-ink);
    background: radial-gradient(ellipse at 5% 8%, #d9f0fb, transparent 45%), radial-gradient(ellipse at 94% 85%, #e1f2e9, transparent 45%), #f3f6fb;
}
.brand-login *, .brand-login *::before, .brand-login *::after { box-sizing: border-box; }
.brand-login :focus-visible { outline: 3px solid #0d9ad6; outline-offset: 4px; }
.login-skip-link { position: fixed; left: 16px; top: -80px; z-index: 1100; padding: 12px; background: white; color: #126b91; }
.login-skip-link:focus { top: 8px; }
.login-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--login-header-height); padding: 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #ffffffed; border-bottom: 1px solid #dae6ee; }
.login-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--login-blue) 0 45%, var(--login-green) 45% 74%, var(--login-red) 74%); }
.login-brand { display: flex; align-items: center; gap: 10px; color: #233748; text-decoration: none !important; }
.login-brand:hover { color: #233748; }
.login-brand img { width: 42px; height: 42px; object-fit: contain; }
.login-brand > span { display: flex; flex-direction: column; gap: 3px; }
.login-brand strong { font-size: 14px; letter-spacing: .085em; line-height: 1.1; }
.login-brand strong b { color: #087eae; font-weight: 500; }
.login-brand small { color: #748698; font-size: 9px; letter-spacing: .055em; }
.login-access-badge { display: flex; align-items: center; gap: 7px; border: 1px solid #c9e7da; background: #eef8f3; color: #297353; border-radius: 20px; padding: 6px 11px; font-size: 10px; }
.login-main { min-height: calc(100vh - var(--login-header-height) - var(--login-footer-height)); min-height: calc(100dvh - var(--login-header-height) - var(--login-footer-height)); display: flex; align-items: center; justify-content: center; padding: 26px 0; }
.login-shell { display: grid; grid-template-columns: 1.15fr 1fr; width: 100%; max-width: 1040px; border: 1px solid #d5e2ed; border-radius: 18px; background: white; box-shadow: 0 18px 60px #173a5912; overflow: hidden; animation: login-arrive .65s ease-out both; }
.login-story { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 36px 38px 30px; color: white; isolation: isolate; background: radial-gradient(ellipse at 0% 5%, #0d71966b, transparent 55%), radial-gradient(ellipse at 100% 100%, #0984544d, transparent 65%), #14314c; }
.login-story::before { content: ""; position: absolute; width: 300px; height: 300px; top: -150px; right: -145px; border: 45px solid #0d9ad610; border-radius: 50%; z-index: -1; }
.login-story::after { content: ""; position: absolute; width: 200px; height: 200px; left: -115px; bottom: -105px; border: 30px solid #b72d261c; border-radius: 50%; z-index: -1; }
.login-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .14em; font-weight: 600; color: #add7e4; }
.login-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #61d7a2; box-shadow: 0 0 0 4px #61d7a213; }
.login-story h1 { font-size: clamp(31px, 3.5vw, 44px); font-weight: 650; line-height: 1.18; letter-spacing: -1.5px; margin: 17px 0 15px; }
.login-story h1 em { color: #6bd5e7; font-style: normal; }
.login-story-copy > p { color: #b5c9d9; font-size: 12px; line-height: 1.8; max-width: 360px; margin: 0; }
.login-transfer-art { padding: 16px 18px 13px; margin: 25px 0 22px; background: #ffffff06; border: 1px solid #ffffff15; border-radius: 12px; }
.login-art-caption { display: flex; align-items: center; gap: 6px; color: #96b5c9; font-size: 7px; letter-spacing: .09em; }
.art-status-dot { width: 4px; height: 4px; border-radius: 50%; background: #51c89f; }
.login-transfer-flow { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 24px 0 20px; }
.login-flow-node { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; position: relative; }
.file-node { width: 57px; height: 74px; border: 1px solid #69b8d763; border-radius: 8px; color: #82d5ef; background: #24536c; animation: login-file-float 5s ease-in-out infinite; }
.file-node > i { font-size: 23px; }
.login-flow-node > span { font-size: 6px; letter-spacing: .1em; }
.file-node > b { height: 2px; width: 20px; background: #89c6db66; }
.file-node > b:last-child { width: 14px; margin-top: -5px; }
.login-flow-hub { width: 79px; height: 79px; flex-shrink: 0; border-radius: 18px; display: grid; place-items: center; position: relative; background: #fff; box-shadow: 0 6px 24px #00162926; }
.login-flow-hub::before { content: ""; position: absolute; inset: -6px; border: 1px solid #83c9e049; border-radius: 23px; animation: login-hub-pulse 5s ease-in-out infinite; }
.login-flow-hub img { width: 58px; height: 58px; object-fit: contain; }
.recipient-node { width: 61px; height: 61px; border-radius: 12px; background: #296a5b; border: 1px solid #73cfad73; color: #a4efd0; animation: login-file-float 5s 1s ease-in-out infinite reverse; }
.recipient-node > i { font-size: 23px; }
.recipient-tick { width: 18px; height: 18px; position: absolute; right: -5px; bottom: -5px; border-radius: 50%; background: #cf5148; border: 2px solid #234b52; display: grid; place-items: center; color: white; font-size: 7px; }
.flow-connector { position: relative; flex: 1; border-top: 1px dashed #7db6cb7a; min-width: 12px; }
.flow-connector > span { position: absolute; left: 0; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #79d5ef; box-shadow: 0 0 6px #4dc9f18c; animation: login-packet 5s ease-in-out infinite; }
.connector-out > span { background: #77dcac; animation-delay: 1.3s; }
.login-flow-steps { display: flex; justify-content: space-between; color: #b4cddc; font-size: 9px; padding: 0 2px; }
.login-flow-steps b { color: #72cfe5; font-size: 8px; margin-right: 5px; font-weight: 500; }
.login-flow-steps > span:last-child b { color: #84d9b2; }
.login-features { display: flex; flex-direction: column; gap: 12px; }
.login-features > div { display: flex; align-items: center; gap: 10px; }
.feature-icon { width: 29px; height: 29px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; font-size: 12px; }
.feature-blue { background: #0d9ad626; color: #81d5f5; }
.feature-green { background: #37bd7526; color: #83ddac; }
.login-features strong { display: block; color: #e6f0f7; font-size: 11px; font-weight: 500; }
.login-features small { display: block; color: #9dbacb; font-size: 9px; margin-top: 3px; }
.motion-toggle { align-self: flex-start; display: flex; gap: 6px; align-items: center; padding: 4px 0; margin-top: 20px; background: transparent; border: 0; color: #abc5d4; font-size: 9px; }
.motion-toggle:hover { color: white; }
.motion-toggle i { width: 10px; font-size: 8px; }
.login-panel { position: relative; padding: 39px 42px 30px; display: flex; flex-direction: column; justify-content: center; min-width: 0; background: #fff; }
.login-panel-heading { margin-bottom: 24px; }
.login-account-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--login-red); background: #fbece9; border: 1px solid #f1d9d5; margin-bottom: 20px; font-size: 17px; }
.login-panel-kicker { font-size: 8px; letter-spacing: .13em; color: #7b91a2; font-weight: 650; }
.login-panel h2 { font-size: 29px; letter-spacing: -.8px; font-weight: 650; margin: 6px 0 8px; color: #263e52; }
.login-panel h2 > span { color: var(--login-red); }
.login-panel-heading > p { color: #6b7f90; font-size: 12px; margin: 0; }
.brand-login .form-group { margin-bottom: 18px; }
.brand-login label { color: #3d566a; font-size: 11px; font-weight: 600; margin-bottom: 7px; }
.brand-login .input-with-icon { position: relative; }
.brand-login .field-icon { position: absolute; top: 15px; left: 14px; color: #328fb8; pointer-events: none; font-size: 13px; }
.brand-login .password-field .field-icon { color: #c55c53; }
.brand-login .form-control { background: #f8fbfd; border: 1px solid #d7e2eb; border-radius: 7px; padding: 10px 13px 10px 38px; height: 44px; color: #263e52; font-size: 12px; box-shadow: none; }
.brand-login .form-control::placeholder { color: #8497a8; font-size: 11px; }
.brand-login .form-control:focus { background: white; border-color: #55aed2; box-shadow: 0 0 0 3px #0d9ad612; }
.brand-login .form-control.error { border-color: #cf6e68; }
.brand-login .password-field .form-control { padding-right: 43px; }
.password-toggle { position: absolute; top: 3px; right: 3px; width: 38px; height: 38px; border: 0; border-radius: 5px; color: #8293a4; background: transparent; font-size: 13px; }
.password-toggle:hover { color: #a23c35; background: #f6ecea; }
.brand-login span.error { display: block; font-size: 11px; color: #a52c26; margin: 6px 0 0; line-height: 1.5; }
.brand-login .error-message:not(:empty) { font-size: 11px; line-height: 1.5; color: #9d352d; padding: 9px 11px; background: #fff0ed; border: 1px solid #f0d5d0; border-radius: 6px; margin-bottom: 13px; overflow-wrap: anywhere; }
.brand-login .login-submit { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; height: 43px; border-radius: 7px; color: white; background: linear-gradient(110deg, #b72d26, #c74135); border: 1px solid #b7332b; font-size: 12px; font-weight: 600; box-shadow: 0 4px 10px #b72d2621; transition: background .2s, box-shadow .2s; }
.brand-login .login-submit:hover { background: #a72822; box-shadow: 0 5px 15px #b72d2633; }
.brand-login .login-submit:disabled { opacity: .7; }
.submit-arrow { font-size: 11px; }
.login-submit-spinner { display: none; width: 13px; height: 13px; border: 2px solid #ffffff70; border-top-color: white; border-radius: 50%; animation: login-spin .8s linear infinite; }
.is-submitting .login-submit-spinner { display: block; }
.is-submitting .submit-arrow { display: none; }
.login-busy { height: 21px; padding-top: 6px; text-align: center; font-size: 10px; color: #577787; }
.login-help { display: flex; align-items: center; gap: 11px; border-top: 1px solid #e6edf2; padding-top: 19px; margin-top: 8px; }
.login-help > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: #eaf6ef; color: #348662; font-size: 13px; }
.login-help p { color: #6f8293; font-size: 10px; line-height: 1.7; margin: 0; }
.login-help strong { display: block; color: #486578; font-size: 10px; font-weight: 600; }
.login-brand-colors { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; display: flex; }
.login-brand-colors > span { flex: 1; background: var(--login-blue); }
.login-brand-colors > span:nth-child(2) { background: var(--login-green); }
.login-brand-colors > span:nth-child(3) { background: var(--login-red); }
.login-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; height: var(--login-footer-height); background: #f9fcfef5; border-top: 1px solid #dce7ed; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #698092; font-size: 10px; }
.login-footer i { color: #1b91b5; margin-right: 5px; }
.is-motion-paused .login-transfer-art *, .is-motion-paused .login-transfer-art *::before,
.login-tab-hidden .login-transfer-art *, .login-tab-hidden .login-transfer-art *::before { animation-play-state: paused !important; }
@keyframes login-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes login-file-float { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
@keyframes login-hub-pulse { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes login-packet { 0%, 10% { left: 0; opacity: 0; } 25%, 70% { opacity: 1; } 90%, 100% { left: calc(100% - 5px); opacity: 0; } }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
    .login-shell { max-width: 920px; }
    .login-story { padding: 30px; }
    .login-panel { padding: 30px 32px; }
    .login-transfer-art { padding-left: 14px; padding-right: 14px; }
}
@media (max-height: 760px) and (min-width: 768px) {
    .brand-login { --login-header-height: 60px; --login-footer-height: 32px; }
    .login-main { padding: 18px 0; }
    .login-story { padding: 26px 30px; }
    .login-story h1 { font-size: 35px; margin: 13px 0 10px; }
    .login-transfer-art { margin: 18px 0; padding: 12px 15px; }
    .login-transfer-flow { padding: 18px 0; }
    .login-features { gap: 10px; }
    .motion-toggle { margin-top: 14px; }
    .login-panel { padding: 27px 32px; }
    .login-account-icon { margin-bottom: 14px; width: 36px; height: 36px; font-size: 15px; }
    .login-panel-heading { margin-bottom: 20px; }
    .login-panel h2 { font-size: 26px; }
    .login-help { padding-top: 14px; }
}
@media (min-width: 768px) and (max-width: 900px) {
    .brand-login { padding-left: 18px; padding-right: 18px; }
    .login-shell { grid-template-columns: 1fr 1fr; }
    .login-story { padding: 26px 22px; }
    .login-story h1 { font-size: 31px; }
    .login-panel { padding-left: 26px; padding-right: 26px; }
    .login-transfer-flow { gap: 6px; }
    .login-flow-hub { width: 61px; height: 61px; border-radius: 14px; }
    .login-flow-hub img { width: 46px; height: 46px; }
    .file-node { width: 47px; height: 65px; }
    .recipient-node { width: 49px; height: 54px; }
    .login-art-caption { font-size: 6px; letter-spacing: .04em; }
}
@media (max-width: 767px) {
    .brand-login { --login-header-height: 60px; --login-footer-height: 32px; padding-left: 16px; padding-right: 16px; }
    .login-header { padding: 0 17px; gap: 10px; }
    .login-brand { gap: 7px; }
    .login-brand img { width: 35px; height: 35px; }
    .login-brand strong { font-size: 12px; }
    .login-brand small { font-size: 8px; }
    .login-access-badge { padding: 5px 8px; font-size: 9px; }
    .login-main { padding: 18px 0; }
    .login-shell { grid-template-columns: 1fr; max-width: 440px; border-radius: 13px; }
    .login-story { padding: 23px 25px; }
    .login-eyebrow { font-size: 7px; letter-spacing: .1em; }
    .login-story h1 { font-size: 30px; line-height: 1.12; margin: 11px 0 9px; letter-spacing: -.8px; }
    .login-story-copy > p { font-size: 11px; line-height: 1.6; max-width: none; }
    .login-transfer-art, .login-features, .motion-toggle { display: none; }
    .login-panel { padding: 24px 25px; }
    .login-panel-heading { position: relative; margin-bottom: 19px; padding-left: 47px; }
    .login-account-icon { position: absolute; top: 4px; left: 0; margin: 0; width: 34px; height: 34px; border-radius: 8px; font-size: 14px; }
    .login-panel-kicker { font-size: 7px; }
    .login-panel h2 { font-size: 24px; margin: 3px 0 4px; }
    .login-panel-heading > p { font-size: 10px; }
    .brand-login .form-control { font-size: 16px; }
    .brand-login .form-group { margin-bottom: 15px; }
    .login-help { padding-top: 13px; margin-top: 3px; }
    .login-footer { padding: 0 17px; justify-content: center; font-size: 9px; }
    .login-footer > span:last-child { display: none; }
}
@media (max-width: 767px) and (max-height: 700px) {
    .brand-login { --login-header-height: 54px; --login-footer-height: 28px; padding-left: 12px; padding-right: 12px; }
    .login-main { padding: 12px 0; }
    .login-story { padding: 14px 22px; }
    .login-story h1 { font-size: 24px; margin: 9px 0 0; }
    .login-story-copy > p { display: none; }
    .login-panel { padding: 16px 22px; }
    .login-panel-heading { margin-bottom: 12px; }
    .login-panel h2 { font-size: 23px; }
    .brand-login .form-group { margin-bottom: 10px; }
    .brand-login label { margin-bottom: 5px; }
    .brand-login .form-control { height: 40px; }
    .brand-login .field-icon { top: 13px; }
    .password-toggle { height: 34px; }
    .brand-login .login-submit { height: 40px; }
    .login-busy { height: 14px; }
    .login-help { padding-top: 8px; }
    .login-help p { line-height: 1.5; }
    .login-access-badge { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-login *, .brand-login *::before, .brand-login *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .motion-toggle { display: none; }
}