/* Authentication only: preserve the native Filament forms and their semantics. */
.fi-simple-layout:has(.studio-auth-scene) {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 8% 15%, #286c605c, transparent 48%),
        radial-gradient(ellipse at 85% 95%, #71854b38, transparent 45%),
        linear-gradient(125deg, #102b2a, #0a191c 70%);
    min-height: 100svh;
}
.fi-simple-layout:has(.studio-auth-scene)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(#b6ded908 1px, transparent 1px), linear-gradient(90deg, #b6ded908 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(120deg, #000, transparent 80%);
}
.studio-auth-scene {
    position: absolute;
    left: max(40px, calc((100% - 1120px) / 2));
    top: 50%;
    transform: translateY(-50%);
    width: 480px;
    color: #f1f5ec;
}
.studio-auth-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .2em; color: #bed1c9; font-weight: 600; }
.studio-auth-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #badd8b; box-shadow: 0 0 18px #badd8b55; }
.studio-auth-title { margin: 32px 0 24px; font-size: clamp(48px, 4.4vw, 60px); font-weight: 600; line-height: 1.06; letter-spacing: -.055em; }
.studio-auth-title em { font-style: normal; color: #c8e6a5; }
.studio-auth-description { color: #abc2bd; font-size: 15px; line-height: 1.8; }
.studio-auth-caption { margin-top: 20px; font-size: 10px; letter-spacing: .18em; color: #97b4ad; }
.studio-auth-caption span { padding: 0 12px; }
.studio-auth-timeline { position: relative; display: flex; gap: 6px; width: 320px; height: 58px; margin-top: 44px; padding: 7px 0; border-block: 1px solid #adc9bf26; }
.studio-auth-timeline > span { flex: 1; border-radius: 4px; background: linear-gradient(140deg, #4e8978, #224841); }
.studio-auth-timeline > span:nth-child(2) { background: linear-gradient(140deg, #9cae7c, #456a58); }
.studio-auth-timeline > span:nth-child(3) { background: linear-gradient(140deg, #b3c590, #6c8d69); }
.studio-auth-timeline > span:nth-child(4) { background: linear-gradient(140deg, #548977, #2e5a55); }
.studio-auth-timeline > i { position: absolute; left: 42%; top: -5px; bottom: -5px; width: 2px; background: #d9efbf; }
.studio-auth-timeline > i::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; background: #d9efbf; transform: rotate(45deg); border-radius: 1px; }
.fi-simple-layout:has(.studio-auth-scene) .fi-simple-main-ctn { width: calc(100% - 80px); max-width: 1120px; justify-content: flex-end; margin-inline: auto; padding-block: 40px; }
.fi-simple-layout:has(.studio-auth-scene) .fi-simple-main { width: 440px; max-width: 100%; margin: 0; padding: 36px; border: 1px solid #ffffff66; border-radius: 24px; background: #fafcfb; box-shadow: 0 24px 80px #0004; }
.fi-simple-layout:has(.studio-auth-scene) .fi-simple-header { align-items: flex-start; }
.fi-simple-layout:has(.studio-auth-scene) .fi-simple-header .fi-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; font-size: 16px; font-weight: 650; color: #163b35; }
.fi-simple-layout:has(.studio-auth-scene) .fi-simple-header .fi-logo::before { content: ""; width: 34px; height: 34px; flex-shrink: 0; background: url('/favicon.svg') center / contain no-repeat; }
.fi-simple-layout:has(.studio-auth-scene) .fi-simple-header-heading { font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: -.035em; text-align: left; color: #172d29; }
.fi-simple-layout:has(.studio-auth-scene) .fi-simple-header-subheading { text-align: left; color: #63736d; line-height: 1.6; }
.fi-simple-layout:has(.studio-auth-scene) .fi-input-wrp { border-radius: 10px; background: #fff; }
.fi-simple-layout:has(.studio-auth-scene) .fi-input { min-height: 44px; font-size: 16px; }
.fi-simple-layout:has(.studio-auth-scene) .fi-simple-main .fi-input.studio-auth-code { text-align: center; letter-spacing: .5em; font-size: 24px; font-variant-numeric: tabular-nums; min-height: 56px; padding-inline: 16px; }
.fi-simple-layout:has(.studio-auth-scene) .studio-auth-code::placeholder { color: #a1b4ad; opacity: .65; }
.fi-simple-layout:has(.studio-auth-scene) .fi-ac { display: flex; flex-direction: column; gap: 12px; }
.fi-simple-layout:has(.studio-auth-scene) .fi-ac > * { width: 100%; flex: initial; }
.fi-simple-layout:has(.studio-auth-scene) .fi-ac .fi-btn { min-height: 46px; border-radius: 10px; font-size: 14px; }
.fi-simple-layout:has(.studio-auth-scene) .fi-ac .fi-btn.fi-color-primary { background: #116e61; color: #fff; box-shadow: 0 3px 8px #116e611c; }
.fi-simple-layout:has(.studio-auth-scene) .fi-ac .fi-btn.fi-color-primary:hover { background: #0c594e; }
.fi-simple-layout:has(.studio-auth-scene) .fi-ac .fi-link { min-height: 40px; justify-content: center; }
.fi-simple-layout:has(.studio-auth-scene) .fi-ac .fi-btn.fi-color-gray { background: transparent; color: #365c52; box-shadow: inset 0 0 0 1px #ccdad3; }
.fi-simple-layout:has(.studio-auth-scene) .fi-link { color: #116e61; }
.fi-simple-layout:has(.studio-auth-scene) :is(button, a, input):focus-visible { outline: 3px solid #269787; outline-offset: 3px; }
.dark .fi-simple-layout:has(.studio-auth-scene) .fi-simple-main { background: #152824; border-color: #3b554b; }
.dark .fi-simple-layout:has(.studio-auth-scene) :is(.fi-simple-header-heading, .fi-simple-header .fi-logo) { color: #eef5ef; }
.dark .fi-simple-layout:has(.studio-auth-scene) .fi-simple-header-subheading { color: #b6c7bf; }
.dark .fi-simple-layout:has(.studio-auth-scene) .fi-input-wrp { background: #0f201c; }
.dark .fi-simple-layout:has(.studio-auth-scene) :is(.fi-link, .fi-ac .fi-btn.fi-color-gray) { color: #a7dece; }
@media (max-width: 1040px) {
    .studio-auth-scene { display: none; }
    .fi-simple-layout:has(.studio-auth-scene) .fi-simple-main-ctn { justify-content: center; }
}
@media (max-width: 540px) {
    .fi-simple-layout:has(.studio-auth-scene) .fi-simple-main-ctn { width: 100%; padding: 24px 16px; }
    .fi-simple-layout:has(.studio-auth-scene) .fi-simple-main { padding: 26px 22px; border-radius: 20px; }
    .fi-simple-layout:has(.studio-auth-scene) .fi-simple-header .fi-logo { margin-bottom: 26px; }
    .fi-simple-layout:has(.studio-auth-scene) .fi-simple-header-heading { font-size: 26px; }
}