/* ==========================================================================
   1. MODERN EXTENDED GLOBAL ARCHITECTURE & PROPERTY VARIABLES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg-primary: #030214;
    --accent-blue: #00aeef;
    --accent-green: #00a651;
    --accent-yellow: #f9a01b;
    --accent-red: #de1c22;
    --brand-purple: #4f46e5;
    --brand-purple-hover: #3730a3;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --card-light: rgba(255, 255, 255, 0.98);
    --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    /* FIX: Force absolute viewport containment on desktop zoom */
    height: 100vh;
    width: 100vw;
    background-color: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent all scaling/zoom scrolling on base desktop view */
    position: relative;
    padding: 2vmax; /* Adaptive padding relative to viewport max size */
}

/* Ambient Fluid Vector Graphic Light System */
.wave-bg-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 0% 0%, #0d0b3a 0%, var(--bg-primary) 70%);
    z-index: 1;
}

.vector-wave-bottom {
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 120%;
    height: 70vh;
    background: radial-gradient(circle at 30% 100%, rgba(79, 70, 229, 0.15) 0%, transparent 60%);
    z-index: 2;
    filter: blur(60px);
}

.vector-wave-overlay {
    position: absolute;
    bottom: 0;
    right: -10%;
    width: 60%;
    height: 50vh;
    background: radial-gradient(circle at 80% 80%, rgba(0, 174, 239, 0.1) 0%, transparent 50%);
    z-index: 3;
    filter: blur(40px);
}

.vector-wave-top-glow {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 50%;
    height: 50vh;
    background: radial-gradient(circle at 90% 10%, rgba(79, 70, 229, 0.2) 0%, transparent 50%);
    z-index: 2;
    pointer-events: none;
    filter: blur(50px);
}

.viewport-container {
    width: 100%;
    max-width: 1200px;
    max-height: 90vh; /* FIX: Restricts container from pushing outside viewport boundary */
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 5vw; /* FIX: Dynamic gap scaling prevents structural breakage during zoom */
    position: relative;
    z-index: 5;
}

/* ==========================================================================
   2. BRAND PRESENTATION & DESCRIPTIVE HERO LAYER
   ========================================================================== */
.brand-presentation-side {
    color: var(--text-main);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.company-logo-area {
    margin-bottom: 3vh; /* FIX: Scalable margins */
    display: flex;
    justify-content: flex-start;
}

    .company-logo-area img {
        height: 44px;
        object-fit: contain;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    }

.fallback-logo-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-bar-container {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 32px;
    margin-bottom: 8px;
}

.logo-bar {
    width: 8px;
    border-radius: 4px;
}

.bar-blue {
    height: 40%;
    background-color: var(--accent-blue);
}

.bar-green {
    height: 65%;
    background-color: var(--accent-green);
}

.bar-yellow {
    height: 85%;
    background-color: var(--accent-yellow);
}

.bar-red {
    height: 100%;
    background-color: var(--accent-red);
}

.fallback-logo-text {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    letter-spacing: 4px;
}

.fallback-logo-tagline {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-top: 8px;
    text-transform: uppercase;
}

.hero-title-block .welcome-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-blue);
    background: rgba(0, 174, 239, 0.1);
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 15px;
    display: inline-block;
    border: 1px solid rgba(0, 174, 239, 0.15);
}

.hero-title-block h1 {
    font-size: clamp(2rem, 4vw, 3.25rem); /* FIX: Uses fluid typography to auto-shrink on zoom/scaling */
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 15px;
    line-height: 1.1;
    background: linear-gradient(180deg, #ffffff 30%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.color-accent-line {
    width: 100%;
    max-width: 320px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-green) 25%, var(--accent-yellow) 50%, var(--accent-red) 100%);
    border-radius: 2px;
    margin-bottom: 24px;
    opacity: 0.8;
}

.hero-title-block h3 {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 8px;
}

.hero-title-block p {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 3vh;
}

/* Feature Stacks Layer */
.feature-rows-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 3vh;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: var(--transition-smooth);
}

    .feature-row:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
        transform: translateX(4px);
    }

.feature-icon-box {
    width: 38px;
    height: 38px;
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #818cf8;
    flex-shrink: 0;
}

.feature-info h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #f1f5f9;
}

.feature-info p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* Persistent Action Hub Launcher Component */
.launcher-card-trigger {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 380px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

    .launcher-card-trigger:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

.launcher-left-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.launcher-meta h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 2px 0;
}

.launcher-meta p {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

.launcher-popover {
    position: absolute;
    bottom: 75px;
    left: 0;
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

    .launcher-popover.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.menu-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition-smooth);
}

    .menu-item-link i {
        font-size: 14px;
        color: var(--brand-purple);
        width: 22px;
        text-align: center;
    }

    .menu-item-link:hover {
        background: #f1f5f9;
        color: var(--brand-purple);
        transform: translateX(4px);
    }

/* ==========================================================================
   3. SECURE AUTHENTICATION CAPSULE CONTEXT (RIGHT COLUMN)
   ========================================================================== */
.auth-capsule-card {
    width: 100%;
    max-width: 420px;
    background: var(--card-light);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    /* FIX: Used container vertical runtime evaluation padding to fit inside compressed viewports */
    padding: clamp(30px, 5vh, 48px) 36px 32px 36px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.8);
    justify-self: end;
}

.ribbon-shield-badge {
    position: absolute;
    top: -1px;
    right: 44px;
    width: 44px;
    height: 52px;
    background: linear-gradient(180deg, var(--brand-purple) 0%, #312e81 100%);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
    z-index: 10;
}

    .ribbon-shield-badge .shield-vector {
        width: 18px;
        height: 18px;
        border: 2px solid #ffffff;
        border-radius: 4px;
        border-top-left-radius: 50% 20%;
        border-top-right-radius: 50% 20%;
        border-bottom-left-radius: 50% 80%;
        border-bottom-right-radius: 50% 80%;
        position: relative;
    }

        .ribbon-shield-badge .shield-vector::after {
            content: '';
            position: absolute;
            width: 4px;
            height: 7px;
            border: solid #ffffff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            top: 1px;
            left: 5px;
        }

.inner-slider-viewport {
    position: relative;
    width: 100%;
}

.auth-view-pane {
    width: 100%;
}

.pane-microsoft {
    display: block;
    opacity: 1;
}

.pane-internal {
    display: none;
    opacity: 0;
}

.auth-capsule-card.internal-mode-active .pane-microsoft {
    display: none;
    opacity: 0;
}

.auth-capsule-card.internal-mode-active .pane-internal {
    display: block;
    opacity: 1;
    animation: paneEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-capsule-card h2 {
    font-size: clamp(20px, 2.5vh, 24px);
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}

.auth-capsule-card .sub-hint {
    font-size: 12px;
    color: #64748b;
    text-align: center;
    font-weight: 500;
}

/* 3D Microsoft Dynamic Orbital Track Module */
.sphere-outer-environment {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: clamp(15px, 3vh, 28px) 0; /* FIX: Restricts extreme canvas spaces during high dynamic zoom */
    position: relative;
    height: clamp(140px, 22vh, 180px);
}

    .sphere-outer-environment::before {
        content: '';
        position: absolute;
        width: 130px;
        height: 130px;
        border: 1px dashed rgba(79, 70, 229, 0.25);
        border-radius: 50%;
        z-index: 1;
        animation: coreRotate 30s linear infinite;
    }

.orbit-pulse-track {
    position: absolute;
    width: 170px;
    height: 170px;
    border: 2px solid rgba(79, 70, 229, 0.05);
    border-top-color: rgba(242, 80, 34, 0.4);
    border-right-color: rgba(0, 164, 239, 0.4);
    border-bottom-color: rgba(127, 186, 0, 0.4);
    border-left-color: rgba(255, 185, 0, 0.4);
    border-radius: 50%;
    z-index: 2;
    animation: coreRotate 16s linear infinite;
}

.sphere-centerpiece {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 0 0 12px rgba(79, 70, 229, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: var(--transition-bounce);
}

.sphere-glow-backplate {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.12) 0%, transparent 70%);
    z-index: 3;
    animation: breathPulse 3s ease-in-out infinite alternate;
}

.orbit-node-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 0 12px currentcolor;
}

.node-orange {
    background-color: #f25022;
    top: -5px;
    left: calc(50% - 4px);
    color: #f25022;
}

.node-green {
    background-color: #7fba00;
    bottom: -5px;
    left: calc(50% - 4px);
    color: #7fba00;
}

.node-blue {
    background-color: #00a4ef;
    left: -5px;
    top: calc(50% - 4px);
    color: #00a4ef;
}

.node-yellow {
    background-color: #ffb900;
    right: -5px;
    top: calc(50% - 4px);
    color: #ffb900;
}

.ms-quadrant-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    width: 32px;
    height: 32px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.q-tile {
    width: 100%;
    height: 100%;
    border-radius: 1px;
}

    .q-tile.orange {
        background-color: #f25022;
    }

    .q-tile.green {
        background-color: #7fba00;
    }

    .q-tile.blue {
        background-color: #00a4ef;
    }

    .q-tile.yellow {
        background-color: #ffb900;
    }

/* Dynamic Microsoft Orbital Triggers */
.auth-view-pane:hover .sphere-centerpiece {
    transform: scale(1.06);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12), 0 0 0 16px rgba(79, 70, 229, 0.05);
}

.auth-view-pane:hover .ms-quadrant-box {
    transform: rotate(90deg);
}

@keyframes coreRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes breathPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes paneEntrance {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* Primary Action Targets & Core UI CTAs */
.action-button-primary {
    width: 100%;
    background: linear-gradient(135deg, var(--brand-purple) 0%, #3730a3 100%);
    color: #ffffff;
    border: none;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25);
    transition: var(--transition-smooth);
}

    .action-button-primary:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(79, 70, 229, 0.35);
        filter: brightness(1.05);
    }

    .action-button-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .action-button-primary .icon-arrow-wrapper {
        margin-left: auto;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 9px;
        transition: var(--transition-smooth);
    }

    .action-button-primary:hover:not(:disabled) .icon-arrow-wrapper {
        transform: translateX(3px);
        background: rgba(255, 255, 255, 0.25);
    }

.divider-row-block {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 18px 0;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    .divider-row-block::before, .divider-row-block::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e2e8f0;
    }

    .divider-row-block:not(:empty)::before {
        margin-right: 16px;
    }

    .divider-row-block:not(:empty)::after {
        margin-left: 16px;
    }

.action-button-secondary {
    width: 100%;
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 13px 24px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

    .action-button-secondary i {
        color: var(--text-muted);
        transition: var(--transition-smooth);
    }

    .action-button-secondary:hover {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #0f172a;
    }

        .action-button-secondary:hover i {
            color: var(--brand-purple);
        }

/* Form Layout Architecture & Advanced Real Estate Fields */
.form-fields-wrapper {
    margin-top: 20px;
}

.floating-input-group {
    position: relative;
    margin-bottom: 16px;
}

    .floating-input-group input {
        width: 100%;
        padding: 16px 14px 12px 14px;
        font-size: 14px;
        font-family: inherit;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        outline: none;
        background: #ffffff;
        color: #0f172a;
        transition: var(--transition-smooth);
    }

    .floating-input-group label {
        position: absolute;
        top: 15px;
        left: 14px;
        color: #64748b;
        font-size: 14px;
        font-weight: 500;
        pointer-events: none;
        transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) all;
        background: #ffffff;
        padding: 0 6px;
    }

    .floating-input-group input:focus + label,
    .floating-input-group input:not(:placeholder-shown) + label {
        top: -10px;
        left: 10px;
        font-size: 11px;
        color: var(--brand-purple);
        font-weight: 700;
    }

    .floating-input-group input:focus {
        border-color: var(--brand-purple);
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    }

.alert-danger {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-weight: 500;
    padding: 10px 14px !important;
    border-radius: 10px;
}

.bottom-card-badges-array {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    border-top: 1px solid #e2e8f0;
    padding-top: 18px;
    margin-top: 20px;
}

.badge-pill-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

    .badge-pill-item i {
        font-size: 13px;
        color: var(--accent-green);
    }

.absolute-page-footer {
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    z-index: 6;
}

/* ==========================================================================
   4. ADAPTIVE MEDIA MATRIX RESPONSIVENESS (BREAKPOINTS)
   ========================================================================== */
@media (max-width: 1024px) {
    .viewport-container {
        gap: 3vw;
    }

    .hero-title-block h1 {
        font-size: 38px;
    }
}

@media (max-width: 992px) {
    body {
        overflow-y: auto; /* FIX: Allows standard, clean mobile scrolling when split layout collapses into a single column */
        height: auto;
        padding: 40px 20px;
    }

    .viewport-container {
        grid-template-columns: 1fr;
        gap: 40px;
        max-height: none;
    }

    .brand-presentation-side {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-height: none;
    }

    .company-logo-area {
        justify-content: center;
        margin-bottom: 24px;
    }

    .fallback-logo-box {
        align-items: center;
    }

    .color-accent-line {
        margin: 0 auto 24px auto;
    }

    .feature-row {
        text-align: left;
        max-width: 500px;
        width: 100%;
    }

    .launcher-card-trigger, .launcher-popover {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
    }

    .auth-capsule-card {
        justify-self: center;
        max-width: 500px;
    }

    .absolute-page-footer {
        position: relative;
        bottom: 0;
        margin-top: 40px;
    }
}