/* screens/login.css */

            .pcrm-login-shell {
                color: var(--pcrm-text);
                display: flex;
                font-family: var(--pcrm-font);
                min-height: 100vh;
            }

            .pcrm-login-panel {
                align-items: center;
                background: var(--pcrm-surface);
                display: flex;
                flex: 1 1 100%;
                justify-content: center;
                overflow-y: auto;
                padding: var(--pcrm-space-8) var(--pcrm-space-4);
                position: relative;
            }

            .pcrm-login-strip {
                display: none;
            }

            .pcrm-login-panel-inner {
                display: flex;
                flex-direction: column;
                max-width: 420px;
                width: 100%;
            }

            .pcrm-login-logo {
                align-self: center;
                height: auto;
                margin-bottom: 72px;
                margin-top: -80px;
                max-width: 240px;
                width: 240px;
            }

            .pcrm-login-card {
                animation: pcrm-login-card-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
                background: transparent;
            }

            .pcrm-login-panel-inner [data-pcrm-login-reveal] {
                animation: pcrm-login-item-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
                animation-delay: var(--pcrm-login-delay, 120ms);
            }

            .pcrm-login-header {
                display: grid;
                gap: var(--pcrm-space-2);
                padding: 0 0 var(--pcrm-space-4);
                text-align: left;
            }

            .pcrm-login-title {
                color: var(--pcrm-text);
                font-size: var(--pcrm-text-3xl);
                font-weight: var(--pcrm-fw-bold);
                line-height: 34px;
                margin: 0;
            }

            .pcrm-login-title-accent {
                background: linear-gradient(135deg, var(--brand-color) 0%, color-mix(in srgb, var(--brand-color) 82%, #000) 100%);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                -webkit-text-fill-color: transparent;
            }

            .pcrm-login-copy {
                color: var(--pcrm-text-muted);
                font-size: var(--pcrm-text-base);
                font-weight: var(--pcrm-fw-regular);
                line-height: 21px;
                margin: 0;
            }

            .pcrm-login-form {
                display: grid;
                gap: var(--pcrm-space-4);
                padding: var(--pcrm-space-1) 0 0;
            }

            .pcrm-login-field {
                display: grid;
                gap: var(--pcrm-space-2);
                margin: 0;
            }

            .pcrm-login-required {
                color: #ef4444;
                margin-left: var(--pcrm-space-1);
            }

            .pcrm-login-password {
                position: relative;
            }

            .pcrm-login-password .pcrm-input {
                padding-right: var(--pcrm-space-10);
            }

            .pcrm-login-eye {
                align-items: center;
                border-radius: 8px;
                color: var(--pcrm-text-muted);
                cursor: pointer;
                display: inline-flex;
                font-size: var(--pcrm-text-2xl);
                height: 34px;
                justify-content: center;
                position: absolute;
                right: 5px;
                top: 5px;
                width: 34px;
            }

            .pcrm-login-eye:hover {
                background: var(--pcrm-info-soft);
                color: var(--brand-color);
            }

            .pcrm-login-remember {
                align-items: center;
                color: var(--pcrm-text-strong);
                cursor: pointer;
                display: flex;
                font-size: var(--pcrm-text-base);
                font-weight: var(--pcrm-fw-medium);
                gap: var(--pcrm-space-2);
                line-height: 21px;
                margin: 0;
                user-select: none;
            }

            .pcrm-login-remember-box {
                accent-color: var(--brand-color);
                cursor: pointer;
                flex-shrink: 0;
                height: 17px;
                margin: 0;
                width: 17px;
            }

            .pcrm-login-remember-row {
                align-items: center;
                display: flex;
                gap: var(--pcrm-space-2);
            }

            .pcrm-login-info {
                align-items: center;
                color: var(--pcrm-text-subtle);
                cursor: help;
                display: inline-flex;
                position: relative;
                transition: color 140ms ease;
            }

            .pcrm-login-info:hover,
            .pcrm-login-info:focus-visible {
                color: var(--brand-color);
                outline: none;
            }

            .pcrm-login-info-icon {
                height: 16px;
                width: 16px;
            }

            /* Tooltip — mesmo visual do padrão pcrm-ui-tooltip do app */
            .pcrm-login-info .pcrm-ui-tooltip {
                /* herda --pcrm-tooltip-bg/border/color de components/tooltip.css (mãe, dark-aware) */
                backdrop-filter: blur(10px);
                background: var(--pcrm-tooltip-bg);
                border: 1px solid var(--pcrm-tooltip-border);
                border-radius: 8px;
                bottom: calc(100% + 10px);
                box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(15, 23, 42, 0.08);
                color: var(--pcrm-tooltip-color);
                font-size: var(--pcrm-text-xs);
                font-weight: var(--pcrm-fw-bold);
                left: 50%;
                line-height: 1.45;
                opacity: 0;
                padding: var(--pcrm-space-2) var(--pcrm-space-3);
                pointer-events: none;
                position: absolute;
                text-align: left;
                transform: translate(-50%, 6px);
                transition: opacity 140ms ease, transform 140ms ease;
                visibility: hidden;
                width: 240px;
                z-index: 20;
            }

            .pcrm-login-info:hover .pcrm-ui-tooltip,
            .pcrm-login-info:focus-within .pcrm-ui-tooltip {
                opacity: 1;
                transform: translate(-50%, 0);
                visibility: visible;
            }

            .pcrm-login-info .pcrm-ui-tooltip::after {
                background: var(--pcrm-tooltip-bg);
                border-bottom: 1px solid var(--pcrm-tooltip-border);
                border-right: 1px solid var(--pcrm-tooltip-border);
                content: "";
                height: 8px;
                left: 50%;
                margin-left: -var(--pcrm-space-1);
                position: absolute;
                top: calc(100% - 4px);
                transform: rotate(45deg);
                width: 8px;
            }

            .pcrm-login-info-strong {
                color: var(--brand-color);
                font-weight: var(--pcrm-fw-bold);
            }

            .pcrm-login-actions {
                display: grid;
                gap: var(--pcrm-space-4);
                padding-top: var(--pcrm-space-0_5);
            }

            .pcrm-login-forgot {
                color: var(--brand-color);
                font-size: var(--pcrm-text-base);
                font-weight: var(--pcrm-fw-medium);
                line-height: 21px;
                text-align: center;
                text-decoration: none;
            }

            .pcrm-login-forgot:hover {
                color: color-mix(in srgb, var(--brand-color) 82%, #000);
                text-decoration: underline;
            }

            .pcrm-login-submit {
                align-items: center;
                background: linear-gradient(135deg, var(--brand-color) 0%, color-mix(in srgb, var(--brand-color) 82%, #000) 100%);
                border: 1px solid var(--brand-color);
                border-radius: 8px;
                color: var(--pcrm-text-on-brand);
                cursor: pointer;
                display: inline-flex;
                font-size: var(--pcrm-text-lg);
                font-weight: var(--pcrm-fw-semibold);
                gap: var(--pcrm-space-2);
                height: 44px;
                justify-content: center;
                padding: 0 var(--pcrm-space-4);
                transition: filter 140ms ease;
                width: 100%;
            }

            .pcrm-login-submit:hover {
                filter: brightness(1.25);
            }

            .pcrm-login-submit:focus-visible {
                outline: 3px solid color-mix(in srgb, var(--brand-color) 24%, transparent);
                outline-offset: 2px;
            }

            .pcrm-login-submit-arrow {
                flex-shrink: 0;
                height: 16px;
                width: 16px;
            }

            .pcrm-login-promo {
                background: color-mix(in srgb, var(--brand-color) 6%, transparent);
                border: 1px solid color-mix(in srgb, var(--brand-color) 18%, transparent);
                border-radius: 12px;
                display: grid;
                gap: var(--pcrm-space-3);
                margin-top: 60px;
                padding: var(--pcrm-space-4);
            }

            .pcrm-login-promo-header {
                align-items: flex-start;
                display: flex;
                gap: var(--pcrm-space-3);
            }

            .pcrm-login-promo-icon {
                flex-shrink: 0;
                height: 36px;
                width: 36px;
            }

            .pcrm-login-promo-text {
                display: grid;
                gap: var(--pcrm-space-1);
            }

            .pcrm-login-promo-title {
                color: var(--pcrm-text);
                font-size: var(--pcrm-text-base);
                font-weight: var(--pcrm-fw-bold);
                line-height: 18px;
                margin: 0;
            }

            .pcrm-login-promo-desc {
                color: var(--pcrm-text-muted);
                font-size: var(--pcrm-text-xs);
                font-weight: var(--pcrm-fw-medium);
                line-height: 17px;
                margin: 0;
            }

            .pcrm-login-promo-cta {
                align-items: center;
                background: linear-gradient(135deg, var(--brand-color) 0%, color-mix(in srgb, var(--brand-color) 82%, #000) 100%);
                border: 1px solid var(--brand-color);
                border-radius: 8px;
                color: var(--pcrm-text-on-brand);
                display: inline-flex;
                font-size: var(--pcrm-text-xs);
                font-weight: var(--pcrm-fw-bold);
                gap: var(--pcrm-space-2);
                height: 36px;
                justify-content: center;
                padding: 0 var(--pcrm-space-4);
                text-decoration: none;
                transition: filter 140ms ease;
                width: 100%;
            }

            .pcrm-login-promo-cta:hover {
                filter: brightness(1.25);
            }

            .pcrm-login-art {
                background-color: var(--pcrm-text);
                background-image: var(--pcrm-login-background-image);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                display: none;
            }

            @keyframes pcrm-login-card-in {
                from {
                    opacity: 0;
                    transform: translateY(18px) scale(0.975);
                }

                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            @keyframes pcrm-login-item-in {
                from {
                    opacity: 0;
                    transform: translateY(12px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .pcrm-login-card,
                .pcrm-login-panel-inner [data-pcrm-login-reveal] {
                    animation: none;
                }
            }

            @media (min-width: 992px) {
                .pcrm-login-panel {
                    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.10);
                    flex: 0 0 540px;
                    max-width: 540px;
                    z-index: 1;
                }

                .pcrm-login-strip {
                    background: var(--brand-color);
                    bottom: 0;
                    display: block;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 6px;
                    z-index: 2;
                }

                .pcrm-login-art {
                    display: block;
                    flex: 1 1 auto;
                }
            }

            @media (max-width: 991px) {
                .pcrm-login-shell {
                    align-items: center;
                    background-color: var(--brand-color);
                    background-image:
                        linear-gradient(120deg, rgba(8, 47, 116, 0.58), rgba(15, 23, 42, 0.18) 52%, rgba(8, 47, 116, 0.40)),
                        var(--pcrm-login-background-image);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    justify-content: center;
                }

                .pcrm-login-panel {
                    background: transparent;
                    flex: 0 1 auto;
                    max-width: 460px;
                }

                .pcrm-login-panel-inner {
                    background: rgba(255, 255, 255, 0.98);
                    border: 1px solid rgba(255, 255, 255, 0.70);
                    border-radius: 8px;
                    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
                    max-width: 420px;
                    padding: var(--pcrm-space-6);
                }

                .pcrm-login-logo {
                    align-self: center;
                    margin-bottom: var(--pcrm-space-6);
                    margin-top: 0;
                    max-width: 192px;
                    width: 192px;
                }
            }

            @media (max-width: 480px) {
                .pcrm-login-panel {
                    padding: var(--pcrm-space-6) var(--pcrm-space-4);
                }

                .pcrm-login-panel-inner {
                    padding: var(--pcrm-space-6) var(--pcrm-space-5);
                }

                .pcrm-login-title {
                    font-size: var(--pcrm-text-2xl);
                    line-height: 30px;
                }
            }