/*======================================================================
    ATLAS LOGIN
    Rojas Media
    Premium Glass Interface
======================================================================*/


/*======================================================================
    1. PAGE
======================================================================*/

body {

    min-height: 100vh;

    background: var(--background);

}

.login-wrapper {

    position: relative;

    display: grid;

    grid-template-columns: 58% 42%;

    min-height: 100vh;

    overflow: hidden;

}


/*======================================================================
    2. HERO
======================================================================*/

.login-hero {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    padding: 60px;

    overflow: hidden;

    background-image: url("../img/backgrounds/rentcar-login.jpg");

    background-size: cover;

    background-position: center;

}


/* Capa oscura sobre la fotografía */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 30% 35%,
            rgba(37, 99, 235, .25),
            transparent 38%
        ),
        linear-gradient(
            120deg,
            rgba(4, 12, 25, .88),
            rgba(8, 23, 44, .72),
            rgba(7, 17, 31, .60)
        );

}


/* Luz ambiental Atlas */

.login-hero::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(37, 99, 235, .15);

    filter: blur(120px);

    pointer-events: none;

}


/*======================================================================
    3. HERO GLASS PANEL
======================================================================*/

.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 610px;

    padding: 44px;

    border: 1px solid rgba(255, 255, 255, .13);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, .55),
            rgba(15, 23, 42, .30)
        );

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 0 80px rgba(37, 99, 235, .10);

}


/* Brillo fino sobre el cristal */

.hero-content::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .07),
            transparent 35%
        );

    pointer-events: none;

}

/*======================================================================
    4. HERO TOPBAR
======================================================================*/

.hero-topbar {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 34px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255, 255, 255, .09);

    color: var(--text-muted);

    font-size: .76rem;

    font-weight: 600;

    letter-spacing: .04em;

    text-transform: uppercase;

}

.hero-status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--success);

    box-shadow: 0 0 14px rgba(34, 197, 94, .75);

}

.hero-version {

    margin-left: auto;

    padding: 5px 9px;

    border: 1px solid rgba(255, 255, 255, .09);

    border-radius: 999px;

    background: rgba(255, 255, 255, .04);

    color: var(--text-secondary);

}

/*======================================================================
    4. HERO BRANDING
======================================================================*/

.hero-brand {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 150px 1fr;

    align-items: center;

    gap: 30px;

    margin-bottom: 38px;

}

.hero-logo {

    display: block;

    width: 150px;

    max-height: 145px;

    object-fit: contain;

    margin: 0;

    filter:
        drop-shadow(0 14px 28px rgba(0, 0, 0, .38))
        drop-shadow(0 0 32px rgba(37, 99, 235, .38));

    animation: atlasLogoFloat 5s ease-in-out infinite;

}

.hero-brand-copy {

    min-width: 0;

}

.hero-eyebrow {

    display: block;

    margin-bottom: 10px;

    color: var(--atlas-accent);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

}

.hero-brand-copy .atlas-title {

    max-width: 360px;

    margin-bottom: 14px;

    font-size: clamp(1.8rem, 2.4vw, 2.65rem);

    line-height: 1.08;

}

.hero-brand-copy .atlas-subtitle {

    max-width: 390px;

    margin: 0;

    color: rgba(203, 213, 225, .78);

    font-size: .92rem;

}


/*======================================================================
    5. HERO FEATURES
======================================================================*/

.hero-features {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

}

.hero-feature {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-height: 118px;

    padding: 17px;

    border: 1px solid rgba(255, 255, 255, .09);

    border-radius: var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .025)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .055);

    transition: var(--transition);

}

.hero-feature:hover {

    transform: translateY(-5px);

    border-color: rgba(6, 182, 212, .34);

    background: rgba(37, 99, 235, .10);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, .18),
        0 0 28px rgba(37, 99, 235, .10);

}

.hero-feature-icon {

    flex: 0 0 31px;

    display: grid;

    place-items: center;

    width: 31px;

    height: 31px;

    border: 1px solid rgba(96, 165, 250, .22);

    border-radius: 10px;

    background: rgba(37, 99, 235, .13);

    color: var(--atlas-accent);

    font-size: .78rem;

    font-weight: 800;

}

.hero-feature div {

    min-width: 0;

}

.hero-feature strong {

    display: block;

    margin-bottom: 6px;

    color: var(--text-primary);

    font-size: .88rem;

}

.hero-feature small {

    display: block;

    color: var(--text-muted);

    font-size: .72rem;

    line-height: 1.45;

}

/*======================================================================
    HERO FOOTER
======================================================================*/

.hero-footer {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    margin-top: 28px;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    color: var(--text-muted);

    font-size: .72rem;

}

.hero-footer div {

    display: flex;

    gap: 6px;

}

.hero-footer strong {

    color: var(--text-secondary);

}

.hero-security {

    padding: 6px 10px;

    border: 1px solid rgba(34, 197, 94, .18);

    border-radius: 999px;

    background: rgba(34, 197, 94, .07);

    color: #86efac;

    font-weight: 600;

}

.hero-feature:hover {

    transform: translateY(-5px);

    border-color: rgba(6, 182, 212, .38);

    background: rgba(37, 99, 235, .13);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .22),
        0 0 30px rgba(37, 99, 235, .12);

}

.hero-feature span {

    color: var(--text-primary);

    font-size: .88rem;

    font-weight: 600;

}


/*======================================================================
    6. LOGIN PANEL
======================================================================*/

.login-panel {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    padding: 60px 70px 60px 35px;

    background:
        radial-gradient(
            circle at 10% 45%,
            rgba(37, 99, 235, .18),
            transparent 38%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(6, 182, 212, .08),
            transparent 30%
        ),
        #061224;

}


/* Glow detrás del formulario */

.login-panel::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .18);

    filter: blur(110px);

    pointer-events: none;

}


/* Línea luminosa que conecta ambos lados */

.login-panel::after {

    content: "";

    position: absolute;

    left: 0;

    top: 15%;

    width: 1px;

    height: 70%;

    background:
        linear-gradient(
            transparent,
            rgba(37, 99, 235, .45),
            rgba(6, 182, 212, .28),
            transparent
        );

}


/*======================================================================
    7. LOGIN GLASS CARD
======================================================================*/

.login-card {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 440px;

    padding: 38px;

    border: 1px solid rgba(255, 255, 255, .11);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(21, 35, 57, .74),
            rgba(12, 25, 44, .58)
        );

    backdrop-filter: blur(28px);

    -webkit-backdrop-filter: blur(28px);

    box-shadow:
        0 35px 90px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 70px rgba(37, 99, 235, .11);

    transform: translateX(-28px);

    overflow: hidden;

}

/* Rojas Media contact — URLs are controlled from config/branding.php. */
.login-contact-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
}

.login-contact-links a,
.login-contact-disabled {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(125, 160, 205, .22);
    border-radius: 10px;
    color: #8fa4bf;
    background: rgba(18, 40, 70, .42);
    transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}

.login-contact-links a:hover {
    transform: translateY(-2px);
    color: #42d9f5;
    border-color: rgba(66, 217, 245, .58);
    background: rgba(37, 99, 235, .16);
}

.login-contact-links svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.5;
}

.login-contact-links a:first-child svg { stroke: none; }
.login-contact-links .contact-dot { fill: currentColor; stroke: none; }
.login-contact-disabled { opacity: .36; cursor: not-allowed; }
.login-contact-links small { margin-left: 2px; color: #71839b; font-size: 11px; }


/* Reflejo superior del cristal */

.login-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .055),
            transparent 36%
        );

    pointer-events: none;

}

.login-card > * {

    position: relative;

    z-index: 1;

}

.login-card .atlas-title {

    margin-bottom: 8px;

    font-size: 1.85rem;

    letter-spacing: -.035em;

}

.login-card .atlas-subtitle {

    margin-bottom: 30px;

    color: var(--text-muted);

}


/*======================================================================
    8. FORM
======================================================================*/

.login-card .atlas-form-group {

    margin-bottom: 20px;

}

.login-card .atlas-label {

    font-size: .82rem;

    letter-spacing: .01em;

}

.login-card .atlas-input {

    min-height: 52px;

    padding: 14px 16px;

    border-color: rgba(148, 163, 184, .18);

    background: rgba(255, 255, 255, .045);

}

.login-card .atlas-input:hover {

    border-color: rgba(96, 165, 250, .42);

    background: rgba(255, 255, 255, .06);

}

.login-card .atlas-input:focus {

    border-color: var(--atlas-accent);

    background: rgba(255, 255, 255, .07);

    box-shadow:
        0 0 0 4px rgba(6, 182, 212, .10),
        0 0 30px rgba(37, 99, 235, .16);

}


/*======================================================================
    9. LOGIN BUTTON
======================================================================*/

.login-card .atlas-btn {

    width: 100%;

    min-height: 52px;

    margin-top: 8px;

    border: 1px solid rgba(255, 255, 255, .10);

    background:
        linear-gradient(
            135deg,
            var(--atlas-primary),
            #3b82f6
        );

    box-shadow:
        0 14px 32px rgba(37, 99, 235, .28),
        inset 0 1px 0 rgba(255, 255, 255, .20);

}

.login-card .atlas-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 42px rgba(37, 99, 235, .38),
        0 0 35px rgba(6, 182, 212, .12);

}

.login-card .atlas-btn:active {

    transform: translateY(-1px);

}


/*======================================================================
    10. ERROR
======================================================================*/

.login-error {

    margin-bottom: 20px;

    padding: 14px 16px;

    border: 1px solid rgba(239, 68, 68, .32);

    border-radius: var(--radius-md);

    background: rgba(239, 68, 68, .10);

    color: #fca5a5;

    font-size: .88rem;

    box-shadow:
        0 10px 25px rgba(127, 29, 29, .12);

}


/*======================================================================
    11. FOOTER
======================================================================*/

.login-card .atlas-small {

    display: block;

    margin-top: 28px;

    margin-bottom: 0;

    text-align: center;

    color: rgba(148, 163, 184, .78);

}

.login-card .atlas-small strong {

    color: var(--text-secondary);

}


/*======================================================================
    12. ANIMATIONS
======================================================================*/

@keyframes atlasLogoFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-7px);

    }

}


/* Respeta usuarios que desactivan animaciones */

@media (prefers-reduced-motion: reduce) {

    * {

        scroll-behavior: auto !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}


/*======================================================================
    13. RESPONSIVE
======================================================================*/

@media (max-width: 1180px) {

    .login-wrapper {

        grid-template-columns: 54% 46%;

    }

    .login-hero {

        padding: 40px;

    }

    .hero-content {

        padding: 36px;

    }

    .hero-features {

        grid-template-columns: 1fr;

    }

    .hero-feature {

        min-height: auto;

        flex-direction: row;

        align-items: center;

    }

    .login-panel {

        padding: 45px;

    }

    .login-card {

        transform: none;

    }

}


@media (max-width: 900px) {

    .login-wrapper {

        grid-template-columns: 1fr;

    }

    .login-hero {

        min-height: 520px;

        padding: 35px;

    }

    .login-panel {

        min-height: auto;

        padding: 70px 25px;

    }

    .login-panel::after {

        display: none;

    }

    .login-card {

        max-width: 520px;

    }

}


@media (max-width: 640px) {

    .login-hero {

        display: none;

    }

    .login-panel {

        min-height: 100vh;

        padding: 24px;

    }

    .login-card {

        max-width: 100%;

        padding: 30px 24px;

        border-radius: 20px;

    }

    .login-card .atlas-title {

        font-size: 1.65rem;

    }

}

/*======================================================================
    ATLAS LOGIN V1.0 — FINAL POLISH
======================================================================*/


/*======================================================================
    BACKGROUND DEPTH
======================================================================*/

.hero-grid-pattern {

    position: absolute;

    inset: 0;

    z-index: 1;

    opacity: .14;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

}

.hero-orb {

    position: absolute;

    z-index: 1;

    border-radius: 50%;

    filter: blur(95px);

    opacity: .28;

    pointer-events: none;

    animation: atlasOrbMovement 18s ease-in-out infinite alternate;

}

.hero-orb-one {

    width: 340px;

    height: 340px;

    top: 18%;

    left: 8%;

    background: rgba(37, 99, 235, .55);

}

.hero-orb-two {

    width: 270px;

    height: 270px;

    right: 10%;

    bottom: 10%;

    background: rgba(6, 182, 212, .30);

    animation-delay: -8s;

}

@keyframes atlasOrbMovement {

    from {

        transform: translate3d(-20px, -10px, 0) scale(.95);

    }

    to {

        transform: translate3d(45px, 30px, 0) scale(1.12);

    }

}


/*======================================================================
    SYSTEM STATUS
======================================================================*/

.hero-system-status {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.hero-status-label {

    color: rgba(148, 163, 184, .68);

    font-size: .63rem;

    letter-spacing: .13em;

}

.hero-online-status {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-secondary);

    font-size: .78rem;

    letter-spacing: .04em;

}

.hero-status-dot {

    animation: atlasStatusPulse 2.2s ease-in-out infinite;

}

@keyframes atlasStatusPulse {

    0%,
    100% {

        box-shadow: 0 0 0 0 rgba(34, 197, 94, .36);

    }

    50% {

        box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);

    }

}


/*======================================================================
    LOGO COMPOSITION
======================================================================*/

.hero-logo-wrap {

    position: relative;

    display: grid;

    place-items: center;

    min-height: 170px;

}

.hero-logo-glow {

    position: absolute;

    width: 145px;

    height: 145px;

    border-radius: 50%;

    background: rgba(37, 99, 235, .22);

    filter: blur(42px);

    animation: atlasLogoGlow 5s ease-in-out infinite;

}

@keyframes atlasLogoGlow {

    0%,
    100% {

        opacity: .55;

        transform: scale(.92);

    }

    50% {

        opacity: .95;

        transform: scale(1.08);

    }

}


/*======================================================================
    SVG ICONS
======================================================================*/

.hero-feature-icon svg,
.hero-security svg,
.login-input-icon svg,
.login-error svg,
.password-toggle svg {

    width: 19px;

    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.hero-feature-icon {

    color: #7dd3fc;

}


/*======================================================================
    LOGIN POSITION
======================================================================*/

.login-card {

    transform: none;

}

.login-heading {

    margin-bottom: 28px;

}

.login-eyebrow {

    display: block;

    margin-bottom: 10px;

    color: var(--atlas-accent);

    font-size: .67rem;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

}


/*======================================================================
    INPUT ICONS
======================================================================*/

.login-input-wrap {

    position: relative;

}

.login-input-icon {

    position: absolute;

    z-index: 2;

    top: 50%;

    left: 17px;

    display: grid;

    place-items: center;

    color: rgba(148, 163, 184, .72);

    transform: translateY(-50%);

    pointer-events: none;

    transition: var(--transition-fast);

}

.login-input {

    padding-left: 49px !important;

}

.login-password-input {

    padding-right: 52px !important;

}

.login-input-wrap:focus-within .login-input-icon {

    color: var(--atlas-accent);

    filter:
        drop-shadow(
            0 0 7px rgba(6, 182, 212, .38)
        );

}

.password-toggle {

    position: absolute;

    z-index: 3;

    top: 50%;

    right: 14px;

    display: grid;

    place-items: center;

    width: 34px;

    height: 34px;

    padding: 0;

    border: 0;

    border-radius: 9px;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    transform: translateY(-50%);

    transition: var(--transition-fast);

}

.password-toggle:hover {

    background: rgba(255, 255, 255, .055);

    color: var(--atlas-accent);

}


/*======================================================================
    LOGIN BUTTON SHIMMER
======================================================================*/

.login-submit {

    position: relative;

    overflow: hidden;

}

.login-submit::before {

    content: "";

    position: absolute;

    top: -60%;

    left: -45%;

    width: 38%;

    height: 220%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .36),
            transparent
        );

    transform: rotate(18deg);

    transition: left .75s ease;

}

.login-submit:hover::before {

    left: 115%;

}

.login-submit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}

.login-button-text,
.login-button-arrow {

    position: relative;

    z-index: 1;

}

.login-button-arrow {

    transition: transform var(--transition-fast);

}

.login-submit:hover .login-button-arrow {

    transform: translateX(5px);

}


/*======================================================================
    LOGIN ERROR
======================================================================*/

.login-error {

    display: flex;

    align-items: center;

    gap: 11px;

}

.login-error svg {

    flex: 0 0 auto;

    color: #f87171;

}


/*======================================================================
    SECURITY BADGE
======================================================================*/

.hero-security {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}

.hero-security svg {

    width: 15px;

    height: 15px;

}


/*======================================================================
    LOADING SCREEN
======================================================================*/

.atlas-loading-screen {

    position: fixed;

    z-index: 9999;

    inset: 0;

    display: grid;

    place-items: center;

    visibility: hidden;

    opacity: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(37, 99, 235, .16),
            transparent 34%
        ),
        #061224;

    transition:
        opacity .28s ease,
        visibility .28s ease;

}

.atlas-loading-screen.is-active {

    visibility: visible;

    opacity: 1;

}

.atlas-loading-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: min(280px, 80vw);

}

.atlas-loading-logo {

    width: 120px;

    margin-bottom: 28px;

    filter:
        drop-shadow(
            0 0 30px rgba(37, 99, 235, .44)
        );

    animation:
        atlasLoadingLogo 1.4s ease-in-out infinite;

}

.atlas-loading-label {

    margin-bottom: 18px;

    color: var(--text-secondary);

    font-size: .82rem;

    font-weight: 600;

    letter-spacing: .10em;

    text-transform: uppercase;

}

.atlas-loading-bar {

    width: 100%;

    height: 3px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, .075);

}

.atlas-loading-bar span {

    display: block;

    width: 42%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--atlas-primary),
            var(--atlas-accent)
        );

    animation:
        atlasLoadingBar 1s ease-in-out infinite;

}

@keyframes atlasLoadingLogo {

    0%,
    100% {

        transform: translateY(0) scale(.98);

        opacity: .82;

    }

    50% {

        transform: translateY(-6px) scale(1.02);

        opacity: 1;

    }

}

@keyframes atlasLoadingBar {

    from {

        transform: translateX(-110%);

    }

    to {

        transform: translateX(245%);

    }

}


/*======================================================================
    RESPONSIVE POLISH
======================================================================*/

@media (max-width: 1180px) {

    .login-card {

        transform: translateY(-12px);

    }

}

@media (max-width: 900px) {

    .login-card {

        transform: none;

    }

    .hero-grid-pattern {

        opacity: .09;

    }

}

@media (max-width: 640px) {

    .login-card {

        transform: none;

    }

}

@keyframes atlasLoginCardEnter {

    from {

        opacity: 0;

        transform: translateY(100px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.login-card {

    animation: atlasLoginCardEnter .75s cubic-bezier(.22, 1, .36, 1) both;

}


/* V68 — Optional PWA installation from the login screen. */
.atlas-install-app {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, .18);
    text-align: center;
}
.atlas-install-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(37, 99, 235, .25);
    border-radius: 12px;
    background: rgba(37, 99, 235, .06);
    color: #2563eb;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}
.atlas-install-button:hover,
.atlas-install-button:focus-visible {
    background: rgba(37, 99, 235, .12);
    border-color: rgba(37, 99, 235, .45);
    transform: translateY(-1px);
}
.atlas-install-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.atlas-install-app small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted, #64748b);
    font-size: .72rem;
    line-height: 1.45;
}
.atlas-install-app.is-installed .atlas-install-button {
    color: #059669;
    border-color: rgba(5, 150, 105, .25);
    background: rgba(5, 150, 105, .08);
    cursor: default;
}