/* MOTRIX — camada visual de marca e componentes de interface */
:root {
    --motrix-ink: #07111f;
    --motrix-panel: #0b1728;
    --motrix-panel-2: #101f34;
    --motrix-blue: #2f7bff;
    --motrix-cyan: #48d6ff;
    --motrix-line: rgba(132, 175, 255, .18);
    --motrix-glow: 0 0 34px rgba(47, 123, 255, .28);
}

/* Marca */
.brand-mark {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #4c91ff 0%, #2867f0 58%, #1d4ed8 100%);
    box-shadow: 0 10px 30px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255,255,255,.22);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: inherit;
    pointer-events: none;
}

.login-brand strong,
.sidebar-brand strong {
    letter-spacing: .08em;
    font-weight: 900;
}

.sidebar-brand strong {
    font-size: 16px;
}

.sidebar-brand span,
.login-brand span {
    letter-spacing: .025em;
}

/* Login / apresentação */
.login-view {
    min-height: 100vh;
    grid-template-columns: minmax(390px, 520px) minmax(0, 1fr);
    background: #07111f;
    isolation: isolate;
}

.login-view::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 16% 10%, rgba(47,123,255,.16), transparent 28%),
        linear-gradient(180deg, #081321 0%, #07111f 100%);
}

.login-brand {
    top: 30px;
    left: 34px;
    color: #f8fbff;
}

.login-brand span {
    color: #8fa5c3;
}

.login-card {
    position: relative;
    width: min(410px, calc(100% - 46px));
    margin: auto;
    padding: 118px 0 58px;
    color: #eef5ff;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 86px -28px 24px;
    z-index: -1;
    border: 1px solid rgba(126, 164, 220, .13);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(18,34,55,.70), rgba(8,19,33,.54));
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
    backdrop-filter: blur(16px);
}

.login-heading .eyebrow {
    color: #6ee1ff;
}

.login-heading h1 {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 40px;
    letter-spacing: -.045em;
}

.login-heading p {
    color: #95a9c5;
}

.login-card .field > span {
    color: #c7d4e6;
}

.login-card .field input,
.login-card .password-field {
    border-color: rgba(134,164,207,.18);
    background: rgba(6,17,31,.72);
    color: #f7fbff;
}

.login-card .field input::placeholder {
    color: #60758f;
}

.login-card .field input:focus,
.login-card .password-field:focus-within {
    border-color: rgba(72,214,255,.65);
    box-shadow: 0 0 0 3px rgba(72,214,255,.08), 0 0 24px rgba(47,123,255,.12);
}

.login-card .icon-button {
    color: #73ddff;
}

.login-card .primary-button {
    background: linear-gradient(135deg, #2f7bff, #235ce5);
    box-shadow: 0 12px 30px rgba(47,123,255,.25);
}

.login-card .primary-button:hover {
    background: linear-gradient(135deg, #4088ff, #2867f0);
    transform: translateY(-1px);
}

.login-footer {
    color: #8296b1;
}

.login-art {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: clamp(48px, 6vw, 92px);
    place-items: center;
    background:
        radial-gradient(circle at 66% 32%, rgba(51,134,255,.22), transparent 28%),
        radial-gradient(circle at 36% 72%, rgba(72,214,255,.10), transparent 25%),
        linear-gradient(135deg, #0b1728 0%, #0a1321 58%, #07111f 100%);
    border-left: 1px solid rgba(125,164,219,.10);
}

.login-art-grid {
    opacity: .13;
    background-image:
        linear-gradient(rgba(122,170,240,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,170,240,.16) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to right, transparent, #000 18%, #000 100%);
}

.login-art::before {
    content: "";
    position: absolute;
    width: min(52vw, 720px);
    aspect-ratio: 1;
    right: -13%;
    top: 5%;
    border: 1px solid rgba(89,155,255,.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(65,125,235,.025),
        0 0 0 90px rgba(65,125,235,.018),
        inset 0 0 90px rgba(47,123,255,.05);
}

.login-art::after {
    content: "";
    position: absolute;
    width: 38%;
    height: 1px;
    right: 8%;
    top: 27%;
    background: linear-gradient(90deg, transparent, rgba(72,214,255,.62), transparent);
    box-shadow: 0 120px 0 rgba(72,214,255,.16), 0 240px 0 rgba(72,214,255,.10);
    transform: rotate(-18deg);
}

.login-art-content {
    position: relative;
    z-index: 2;
    width: min(780px, 100%);
    max-width: 780px;
}

.art-badge {
    gap: 8px;
    align-items: center;
    border-color: rgba(90,194,255,.25);
    background: rgba(40,112,223,.09);
    color: #8fe8ff;
    box-shadow: inset 0 0 22px rgba(46,123,255,.06);
}

.art-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #62e4ff;
    box-shadow: 0 0 12px #62e4ff;
}

.login-art h2 {
    max-width: 720px;
    margin: 26px 0 20px;
    font-size: clamp(44px, 5.6vw, 82px);
    color: #f8fbff;
    line-height: .98;
}

.login-art p {
    max-width: 650px;
    color: #a8b9ce;
    font-size: 17px;
}

.motrix-spectrum {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 28px;
}

.motrix-spectrum span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(119,166,228,.18);
    border-radius: 999px;
    background: rgba(7,18,32,.48);
    color: #9db2ce;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
}

.motrix-spectrum span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3e8cff;
    box-shadow: 0 0 8px rgba(62,140,255,.8);
}

.motrix-schematic {
    position: relative;
    height: 142px;
    margin-top: 40px;
    border: 1px solid rgba(121,163,220,.16);
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(82,151,255,.12) 50%, transparent 50.2%),
        linear-gradient(0deg, transparent 49.8%, rgba(82,151,255,.12) 50%, transparent 50.2%),
        rgba(5,14,26,.40);
}

.motrix-schematic .motrix-engine-core {
    position: absolute;
    width: 84px;
    height: 84px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(72,214,255,.36);
    border-radius: 50%;
    box-shadow: 0 0 32px rgba(47,123,255,.14), inset 0 0 24px rgba(72,214,255,.06);
}

.motrix-engine-core::before,
.motrix-engine-core::after {
    content: "";
    position: absolute;
    inset: 13px;
    border: 1px dashed rgba(119,166,228,.32);
    border-radius: 50%;
}

.motrix-engine-core::after {
    inset: 29px;
    border-style: solid;
    background: radial-gradient(circle, rgba(72,214,255,.45), rgba(47,123,255,.05) 55%, transparent 60%);
}

.motrix-schematic .trace {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(78,160,255,.62), transparent);
}

.motrix-schematic .trace.t1 { width: 46%; left: 4%; top: 35%; }
.motrix-schematic .trace.t2 { width: 48%; right: 3%; top: 67%; }
.motrix-schematic .trace.t3 { width: 35%; right: 5%; top: 27%; transform: rotate(-13deg); }

.art-metrics {
    margin-top: 18px;
}

.art-metrics div {
    border-color: rgba(117,164,228,.14);
    background: rgba(6,17,31,.46);
}

.art-metrics strong {
    color: #f5f9ff;
}

.art-metrics span {
    color: #8fa5c3;
}

/* Confirmação MOTRIX */
.motrix-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3, 10, 18, .42);
    backdrop-filter: blur(4px);
    animation: motrixFade .16s ease-out;
}

.motrix-confirm {
    width: min(390px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid rgba(105,151,215,.20);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f9fbff);
    color: #142033;
    box-shadow: 0 24px 70px rgba(4, 14, 29, .28);
    transform-origin: center;
    animation: motrixPop .18s cubic-bezier(.2,.8,.2,1);
}

.motrix-confirm-head {
    display: flex;
    gap: 13px;
    padding: 18px 18px 10px;
}

.motrix-confirm-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf2ff;
    color: #2563eb;
    font-size: 18px;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.10);
}

.motrix-confirm-copy strong {
    display: block;
    margin-top: 1px;
    font-size: 15px;
    letter-spacing: -.015em;
}

.motrix-confirm-copy p {
    margin: 5px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}

.motrix-confirm-detail {
    margin: 4px 18px 0 69px;
    padding: 10px 12px;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    background: #f6f9fd;
    color: #4c5b70;
    font-size: 11px;
    line-height: 1.45;
}

.motrix-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 15px 18px 18px;
}

.motrix-confirm-actions button {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #dbe3ee;
    background: #fff;
    color: #4b5a6e;
    font-weight: 750;
    font-size: 12px;
}

.motrix-confirm-actions .motrix-confirm-primary {
    border-color: #2f7bff;
    background: #2f7bff;
    color: #fff;
    box-shadow: 0 8px 18px rgba(47,123,255,.20);
}

.motrix-confirm-actions .motrix-confirm-primary:hover {
    background: #286fe9;
}

@keyframes motrixFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes motrixPop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .login-view {
        grid-template-columns: 1fr;
        background: #07111f;
    }

    .login-brand {
        left: 22px;
        top: 22px;
    }

    .login-card {
        padding-top: 110px;
        padding-bottom: 44px;
    }

    .login-card::before {
        inset: 82px -12px 16px;
    }

    .login-art {
        min-height: auto;
        padding: 42px 22px 54px;
        border-left: 0;
        border-top: 1px solid rgba(125,164,219,.10);
    }

    .login-art h2 {
        font-size: clamp(38px, 11vw, 58px);
    }

    .motrix-schematic {
        height: 116px;
    }

    .art-metrics {
        grid-template-columns: 1fr;
    }

    .art-metrics div {
        min-height: 78px;
    }
}

@media (max-width: 520px) {
    .login-brand span { display: none; }
    .login-heading h1 { font-size: 34px; }
    .login-art p { font-size: 15px; }
    .motrix-confirm-detail { margin-left: 18px; }
}