/* Four Color Comic v40.31.23 — signed-out hero art refinement.
   - Replace the left art with clearly decorative non-interactive brand art.
   - Add a right-side flowing collage with softened fade edges for large monitors.
   - Keep mobile behavior clean and focused on the real auth form. */

@media (min-width: 981px){
  .auth-gate{
    background:
      radial-gradient(circle at 14% 18%,rgba(29,120,147,.15),transparent 28rem),
      radial-gradient(circle at 84% 26%,rgba(139,109,255,.10),transparent 26rem),
      radial-gradient(circle at 78% 80%,rgba(234,190,82,.08),transparent 24rem),
      #04070e!important;
  }
  .auth-shell-v4011{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    display:grid!important;
    width:min(1380px,100%)!important;
    min-height:min(860px,calc(100vh - 44px))!important;
    grid-template-columns:minmax(0,1.15fr) minmax(430px,.74fr)!important;
    margin:0 auto!important;
    border:1px solid rgba(101,117,157,.24)!important;
    border-radius:28px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#060a11 0%,#04070d 100%)!important;
    box-shadow:0 38px 120px rgba(0,0,0,.56)!important;
  }
  .auth-showcase,.auth-showcase-v4011{
    display:flex!important;
    min-height:100%!important;
    padding:42px 38px 34px 42px!important;
    border-right:1px solid rgba(101,117,157,.18)!important;
    background:
      radial-gradient(circle at 18% 24%,rgba(244,210,28,.06),transparent 18rem),
      radial-gradient(circle at 70% 18%,rgba(19,185,235,.08),transparent 22rem),
      linear-gradient(180deg,#090d16 0%,#05080f 100%)!important;
    overflow:hidden!important;
  }
  .auth-showcase-v4011::before,
  .auth-showcase-v4011::after{display:none!important}
  .auth-showcase-v4011>*{display:block!important}
  .auth-showcase-panel-v4017{display:flex;flex-direction:column;min-height:100%;width:100%}
  .auth-brand-v4011{margin-bottom:28px!important}
  .auth-copy-v4017{max-width:720px!important;margin-top:0!important}
  .auth-copy-v4017 h2{font-size:clamp(38px,4.6vw,66px)!important;line-height:.98!important}
  .auth-copy-v4017 p{max-width:620px!important}

  .fcc-auth-art-v403123{
    margin-top:26px;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);
    gap:26px;
    align-items:stretch;
    min-height:430px;
    position:relative;
  }
  .fcc-auth-art-left-v403123,
  .fcc-auth-art-card-v403123{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background-color:#070b12;
    background-repeat:no-repeat;
    background-size:cover;
    box-shadow:0 18px 44px rgba(0,0,0,.34);
  }
  .fcc-auth-art-left-v403123{
    min-height:430px;
    border-radius:28px;
    background-image:
      linear-gradient(180deg,rgba(4,7,14,.10),rgba(4,7,14,.22)),
      url('/login-four-color-left-v403123.png');
    background-position:center center;
  }
  .fcc-auth-art-left-v403123::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.02) 40%,rgba(0,0,0,.18) 100%);
    pointer-events:none;
  }
  .fcc-auth-art-caption-v403123{
    position:absolute;
    left:18px;
    bottom:18px;
    z-index:2;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(5,9,16,.74);
    border:1px solid rgba(255,255,255,.10);
    color:#b8c4d8;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    backdrop-filter:blur(8px);
  }
  .fcc-auth-art-right-v403123{
    position:relative;
    min-height:430px;
    isolation:isolate;
  }
  .fcc-auth-art-right-v403123::before{
    content:'';
    position:absolute;
    inset:-16px -48px -22px 28%;
    background:linear-gradient(90deg,transparent 0%,rgba(4,7,14,.12) 18%,rgba(4,7,14,.48) 56%,#04070e 100%);
    z-index:3;
    pointer-events:none;
  }
  .fcc-auth-art-right-v403123::after{
    content:'';
    position:absolute;
    inset:-18px -26px -18px 0;
    background:radial-gradient(circle at 86% 26%,rgba(137,109,255,.14),transparent 12rem),radial-gradient(circle at 72% 70%,rgba(20,185,235,.10),transparent 16rem);
    z-index:0;
    pointer-events:none;
  }
  .fcc-auth-art-card-v403123{
    position:absolute;
    right:0;
    width:clamp(220px,24vw,320px);
    border-radius:24px;
    transform-origin:center;
    filter:saturate(.98) contrast(1.02);
  }
  .fcc-auth-art-card-v403123::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(4,7,14,.04) 0%,transparent 22%,transparent 68%,rgba(4,7,14,.22) 100%);
    pointer-events:none;
  }
  .fcc-auth-art-card-v403123.one{
    top:0;
    height:236px;
    transform:rotate(-6deg) translateX(-34px);
    background-image:linear-gradient(180deg,rgba(4,7,14,.06),rgba(4,7,14,.20)),url('/login-right-legends-v403123.png');
    background-position:center center;
    z-index:2;
  }
  .fcc-auth-art-card-v403123.two{
    top:108px;
    height:250px;
    transform:rotate(3.5deg) translateX(2px);
    background-image:linear-gradient(180deg,rgba(4,7,14,.05),rgba(4,7,14,.18)),url('/login-right-era-v403123.png');
    background-position:center center;
    z-index:1;
  }
  .fcc-auth-art-card-v403123.three{
    top:228px;
    height:218px;
    transform:rotate(-2.5deg) translateX(-14px);
    background-image:linear-gradient(180deg,rgba(4,7,14,.06),rgba(4,7,14,.24)),url('/login-right-lifestyle-v403123.png');
    background-position:center center;
    z-index:2;
  }
  .auth-footer-nav-v4017{margin-top:auto!important;padding-top:18px!important;opacity:.88}
  .auth-card,.auth-card-v4011{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:100%!important;
    padding:54px 44px!important;
    border-left:1px solid rgba(101,117,157,.18)!important;
    border-radius:0!important;
    background:linear-gradient(180deg,#0a0e17 0%,#070b13 100%)!important;
  }
}

@media (min-width: 981px) and (max-width: 1240px){
  .auth-shell-v4011{grid-template-columns:minmax(0,1fr) minmax(400px,.82fr)!important}
  .fcc-auth-art-v403123{grid-template-columns:minmax(0,1fr) minmax(270px,.9fr);gap:18px}
  .fcc-auth-art-card-v403123{width:240px}
}

@media (max-width: 980px){
  .fcc-auth-art-v403123{display:none!important}
  .auth-showcase,.auth-showcase-v4011{display:none!important}
}