/* Fans254 v13.5.66 — auth theme correctness + single-line welcome headline.
   Uses the live Appearance palette with Facebook blue (#1877F2) as the fallback accent.
   Authentication form ids/names and backend flows are unchanged. */
:root{
  --f254-ref-accent:var(--f-primary,#1877f2);
  --f254-ref-accent-strong:color-mix(in srgb,var(--f254-ref-accent) 84%,#0b57d0);
  --f254-ref-bg:var(--f-bg,#f7faff);
  --f254-ref-surface:var(--f-surface,#ffffff);
  --f254-ref-surface-2:var(--f-surface-2,#f1f6fc);
  --f254-ref-text:var(--f-text,#101828);
  --f254-ref-muted:var(--f-muted,#667085);
  --f254-ref-border:var(--f-line,#dce3ec);
  --f254-ref-field:var(--f-input-bg,var(--f-surface,#ffffff));
  --f254-ref-field-border:var(--f-line-strong,#c7d2e0);
  --f254-ref-shadow:0 18px 54px color-mix(in srgb,var(--f254-ref-text) 10%,transparent);
  --f254-ref-control:54px;
  color-scheme:light;
}
html[data-theme="dark"]{color-scheme:dark;--f254-ref-shadow:0 24px 70px rgba(0,0,0,.40)}
html[data-theme="light"]{color-scheme:light}
html,body{min-height:100%}
body.f254-auth-reference-page,
body.f254-auth-reference-welcome{
  margin:0!important;min-height:100dvh!important;background:var(--f254-ref-bg)!important;color:var(--f254-ref-text)!important;
  font-family:var(--f254-font-family,Inter,"SF Pro Display","SF Pro Text",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)!important;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.f254-auth-reference-page *,body.f254-auth-reference-welcome *{box-sizing:border-box}
body.f254-auth-reference-page a,body.f254-auth-reference-welcome a{text-decoration:none}

/* Keep auth surfaces on one coherent palette. Avoid mixing a dark form surface with a light page (or vice versa). */
body.f254-auth-reference-page .f254-ref-auth-shell,
body.f254-auth-reference-welcome .f254-ref-welcome-shell{background-color:var(--f254-ref-bg)!important;color:var(--f254-ref-text)!important}
html[data-theme="dark"] body.f254-auth-reference-page .f254-ref-auth-panel{background:color-mix(in srgb,var(--f254-ref-surface) 97%,transparent);border-color:var(--f254-ref-border);color:var(--f254-ref-text)}
html[data-theme="light"] body.f254-auth-reference-page .f254-ref-auth-panel{background:color-mix(in srgb,var(--f254-ref-surface) 98%,transparent);border-color:var(--f254-ref-border);color:var(--f254-ref-text)}

/* Shared forms */
.f254-ref-auth-shell{min-height:100dvh;display:grid;place-items:center;padding:max(28px,env(safe-area-inset-top)) clamp(18px,4vw,44px) max(28px,env(safe-area-inset-bottom));overflow:hidden;position:relative;isolation:isolate}
.f254-ref-auth-shell::before,.f254-ref-auth-shell::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:999px;filter:blur(78px);opacity:.08}
.f254-ref-auth-shell::before{width:300px;height:300px;background:var(--f254-ref-accent);left:-165px;top:-170px}
.f254-ref-auth-shell::after{width:340px;height:340px;background:var(--f254-ref-accent);right:-210px;bottom:-230px;opacity:.06}
.f254-ref-auth-panel{width:min(100%,500px);margin:auto;padding:32px 34px 30px;border:1px solid var(--f254-ref-border);border-radius:28px;background:color-mix(in srgb,var(--f254-ref-surface) 97%,transparent);box-shadow:var(--f254-ref-shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.f254-ref-auth-panel.is-register{width:min(100%,540px)}
.f254-ref-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 28px;color:var(--f254-ref-text)!important;font-size:21px;font-weight:850;letter-spacing:-.035em}
.f254-ref-brand .f254-brand-mark{width:36px;height:36px;color:var(--f254-ref-accent)}
.f254-ref-title{margin:0;text-align:center;font-size:clamp(34px,4.8vw,44px)!important;line-height:1.04!important;letter-spacing:-.05em!important;font-weight:850!important;color:var(--f254-ref-text)!important}
.f254-ref-subtitle{margin:9px 0 0;text-align:center;color:var(--f254-ref-muted)!important;font-size:14px!important;line-height:1.4!important;font-weight:500!important}
.f254-ref-form{display:grid;gap:11px;margin-top:28px}
.f254-ref-field{position:relative;display:block;min-width:0}
.f254-ref-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.f254-ref-input-wrap{min-height:var(--f254-ref-control);display:grid;grid-template-columns:21px minmax(0,1fr) auto;align-items:center;gap:11px;padding:0 15px;background:var(--f254-ref-field);border:1px solid var(--f254-ref-field-border);border-radius:15px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.f254-ref-input-wrap:focus-within{border-color:var(--f254-ref-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--f254-ref-accent) 12%,transparent)}
.f254-ref-input-wrap>.f254-icon{width:19px;height:19px;color:var(--f254-ref-accent);stroke-width:1.8}
.f254-ref-input{width:100%;height:52px;padding:0!important;border:0!important;outline:0!important;background:transparent!important;color:var(--f254-ref-text)!important;font:inherit!important;font-size:15px!important;font-weight:540!important;line-height:1!important;box-shadow:none!important}
.f254-ref-input::placeholder{color:color-mix(in srgb,var(--f254-ref-muted) 90%,transparent);opacity:1}
.f254-ref-input-action{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:transparent;color:var(--f254-ref-muted);cursor:pointer;border-radius:9px}
.f254-ref-input-action svg{width:19px;height:19px}.f254-ref-input-action:focus-visible{outline:2px solid var(--f254-ref-accent);outline-offset:2px}
.f254-ref-inline-state{display:block;min-height:0;margin:5px 3px 0;color:var(--f254-ref-muted);font-size:11px;line-height:1.3}.f254-ref-inline-state:empty{display:none}.f254-ref-inline-state.is-ok{color:#24a35a}.f254-ref-inline-state.is-bad{color:#e05664}
.f254-ref-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:2px}
.f254-ref-check{display:inline-flex;align-items:center;gap:8px;color:var(--f254-ref-muted);font-size:13px;line-height:1.3;cursor:pointer;min-width:0}.f254-ref-check input{position:absolute;opacity:0;pointer-events:none}
.f254-ref-check-box{width:20px;height:20px;border:1px solid var(--f254-ref-field-border);border-radius:5px;background:var(--f254-ref-field);display:grid;place-items:center;flex:0 0 auto}
.f254-ref-check input:checked+.f254-ref-check-box{background:var(--f254-ref-accent);border-color:var(--f254-ref-accent)}.f254-ref-check input:checked+.f254-ref-check-box::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.f254-ref-link{color:var(--f254-ref-accent)!important;font-weight:680}
.f254-ref-primary{min-height:54px;border:0;border-radius:15px;background:linear-gradient(100deg,var(--f254-ref-accent),color-mix(in srgb,var(--f254-ref-accent) 82%,#69b1ff));color:#fff!important;display:flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-size:16px;font-weight:800;letter-spacing:-.02em;cursor:pointer;box-shadow:0 10px 26px color-mix(in srgb,var(--f254-ref-accent) 20%,transparent)}
.f254-ref-primary:hover{filter:brightness(.985)}.f254-ref-primary:active{transform:translateY(1px)}.f254-ref-primary:disabled{opacity:.56;cursor:not-allowed;transform:none}.f254-ref-primary svg{width:18px;height:18px}
.f254-ref-divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:20px 0;color:var(--f254-ref-muted);font-size:12px}.f254-ref-divider::before,.f254-ref-divider::after{content:"";height:1px;background:var(--f254-ref-border)}
.f254-ref-oauth{min-height:52px;border:1px solid var(--f254-ref-field-border);border-radius:15px;background:var(--f254-ref-field);color:var(--f254-ref-text)!important;display:flex;align-items:center;justify-content:center;gap:11px;font-size:14px;font-weight:720}.f254-ref-google-mark{display:inline-grid;place-items:center;font-size:21px;font-weight:900;line-height:1;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.f254-ref-footer{text-align:center;margin:22px 0 0;color:var(--f254-ref-muted);font-size:13px;line-height:1.4}.f254-ref-terms{margin-top:3px!important;align-items:flex-start;font-size:12px;line-height:1.45}.f254-ref-back{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;color:var(--f254-ref-muted)!important;font-size:12px;font-weight:650}.f254-ref-back svg{width:15px;height:15px}
.f254-ref-alert{margin:16px 0 0!important;border-radius:12px!important;font-size:12px!important;line-height:1.4!important}body.f254-auth-reference-page .f254-v2-info,body.f254-auth-reference-page .f254-alert{border-radius:12px!important}

/* Register is intentionally compact. */
.f254-ref-register .f254-ref-form{margin-top:25px;gap:10px}.f254-ref-register .f254-ref-title{font-size:clamp(33px,4.3vw,42px)!important}.f254-ref-register .f254-ref-input-wrap{min-height:50px;border-radius:14px}.f254-ref-register .f254-ref-input{height:48px}.f254-ref-register .f254-ref-primary{margin-top:3px}

/* Welcome/splash: photograph + site palette, no hard-coded green. */
body.f254-auth-reference-welcome{overflow-x:hidden}
.f254-ref-welcome-shell{position:relative;min-height:100dvh;max-width:920px;margin:0 auto;overflow:hidden;background:var(--f254-ref-bg);isolation:isolate}
.f254-ref-welcome-photo{position:absolute;inset:0 0 auto;height:65%;background-image:url('/assets/images/auth/welcome-social-reference.webp?v=13.5.66-auth1');background-position:center 22%;background-size:cover;background-repeat:no-repeat;z-index:-3}
.f254-ref-welcome-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,color-mix(in srgb,var(--f254-ref-bg) 12%,transparent) 53%,var(--f254-ref-bg) 99%)}
.f254-ref-welcome-glow{position:absolute;left:50%;bottom:19%;width:52%;height:14%;transform:translateX(-50%);background:radial-gradient(ellipse,var(--f254-ref-accent),transparent 70%);filter:blur(80px);opacity:.08;z-index:-2;pointer-events:none}
.f254-ref-welcome-content{min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:clamp(28px,5vw,58px) clamp(22px,5vw,60px) max(28px,env(safe-area-inset-bottom));text-align:center}
.f254-ref-welcome-title{margin:0;max-width:none;color:var(--f254-ref-text)!important;font-size:clamp(34px,5vw,54px)!important;line-height:1.03!important;letter-spacing:-.052em!important;font-weight:860!important;white-space:nowrap;text-wrap:nowrap}
.f254-ref-welcome-title strong{color:var(--f254-ref-accent)!important;font-weight:inherit;display:inline-block}
.f254-ref-welcome-connect{position:relative;display:inline-block;color:inherit}
/* Curved accent stroke belongs under Connect., while Belong. keeps the accent text color. */
.f254-ref-welcome-connect::after{content:"";position:absolute;left:7%;right:7%;bottom:-10px;height:10px;border-top:3px solid var(--f254-ref-accent);border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-2deg);opacity:.94;pointer-events:none}
.f254-ref-welcome-copy{margin:27px 0 0;max-width:520px;color:var(--f254-ref-muted)!important;font-size:15px!important;line-height:1.5!important;font-weight:500!important}.f254-ref-welcome-copy strong{color:var(--f254-ref-accent)!important;font-weight:650}
.f254-ref-welcome-actions{width:min(100%,620px);display:grid;gap:9px;margin-top:28px}.f254-ref-welcome-primary,.f254-ref-welcome-login{min-height:56px;border-radius:999px;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:10px}
.f254-ref-welcome-primary{background:linear-gradient(100deg,var(--f254-ref-accent),color-mix(in srgb,var(--f254-ref-accent) 78%,#74b7ff));color:#fff!important;box-shadow:0 13px 34px color-mix(in srgb,var(--f254-ref-accent) 18%,transparent)}
.f254-ref-welcome-login{color:var(--f254-ref-muted)!important;background:transparent;border:0}.f254-ref-welcome-login svg{width:17px;height:17px;color:var(--f254-ref-accent)}.f254-ref-welcome-primary svg{width:18px;height:18px;margin-left:auto;margin-right:17px}.f254-ref-welcome-primary span{margin-left:auto;transform:translateX(18px)}
.f254-ref-welcome-dots{display:flex;justify-content:center;gap:10px;margin-top:20px}.f254-ref-welcome-dots i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--f254-ref-muted) 30%,transparent)}.f254-ref-welcome-dots i:first-child{background:var(--f254-ref-accent);box-shadow:0 0 14px color-mix(in srgb,var(--f254-ref-accent) 30%,transparent)}

@media(max-width:767px){
  :root{--f254-ref-control:50px}
  .f254-ref-auth-shell{display:block;padding:0;background:var(--f254-ref-bg)}.f254-ref-auth-shell::before,.f254-ref-auth-shell::after{display:none}
  .f254-ref-auth-panel,.f254-ref-auth-panel.is-register{width:100%;min-height:100dvh;padding:max(42px,env(safe-area-inset-top)) 26px max(28px,env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .f254-ref-brand{margin-bottom:34px;font-size:19px}.f254-ref-brand .f254-brand-mark{width:34px;height:34px}
  .f254-ref-title{font-size:36px!important}.f254-ref-subtitle{font-size:14px!important;margin-top:8px}.f254-ref-form{margin-top:28px;gap:10px}
  .f254-ref-input-wrap{border-radius:14px;padding-inline:14px;gap:10px}.f254-ref-input-wrap>.f254-icon{width:18px;height:18px}.f254-ref-input{height:48px;font-size:14px!important}.f254-ref-input-action{width:30px;height:30px}.f254-ref-input-action svg{width:18px;height:18px}
  .f254-ref-row{margin-top:1px;gap:9px}.f254-ref-check,.f254-ref-footer,.f254-ref-link{font-size:12.5px}.f254-ref-check-box{width:19px;height:19px}
  .f254-ref-primary{min-height:52px;border-radius:14px;font-size:15px}.f254-ref-oauth{min-height:50px;border-radius:14px;font-size:14px}.f254-ref-divider{margin:18px 0}
  .f254-ref-register{padding-top:max(52px,env(safe-area-inset-top))}.f254-ref-register .f254-ref-title{font-size:35px!important}.f254-ref-register .f254-ref-subtitle{font-size:13px!important}.f254-ref-register .f254-ref-form{margin-top:26px}.f254-ref-register .f254-ref-input-wrap{min-height:48px}.f254-ref-register .f254-ref-input{height:46px}.f254-ref-terms{font-size:11.5px!important}
  .f254-ref-recovery{padding-top:max(64px,env(safe-area-inset-top))}
  .f254-ref-welcome-shell{width:100%;max-width:none}.f254-ref-welcome-photo{height:61%;background-position:center top}.f254-ref-welcome-content{padding:26px 24px max(24px,env(safe-area-inset-bottom))}
  .f254-ref-welcome-title{font-size:clamp(27px,7.35vw,33px)!important;max-width:100%}.f254-ref-welcome-connect::after{bottom:-8px;height:8px;border-top-width:2px}
  .f254-ref-welcome-copy{font-size:14px!important;line-height:1.45!important;margin-top:24px;max-width:350px}.f254-ref-welcome-actions{margin-top:24px;gap:7px}.f254-ref-welcome-primary,.f254-ref-welcome-login{min-height:52px;font-size:16px}.f254-ref-welcome-dots{margin-top:16px;gap:9px}.f254-ref-welcome-dots i{width:7px;height:7px}
}
@media(max-width:380px){
  .f254-ref-auth-panel,.f254-ref-auth-panel.is-register{padding-inline:20px}.f254-ref-title{font-size:33px!important}.f254-ref-register .f254-ref-title{font-size:32px!important}.f254-ref-row{gap:7px}.f254-ref-check,.f254-ref-link{font-size:11.5px!important}
  .f254-ref-welcome-content{padding-inline:16px}.f254-ref-welcome-title{font-size:clamp(25px,7.15vw,28px)!important}.f254-ref-welcome-copy{font-size:13px!important}
}
@media(min-width:768px) and (max-width:1199px){
  .f254-ref-auth-shell{padding:44px 32px}.f254-ref-auth-panel{width:min(100%,520px)}.f254-ref-auth-panel.is-register{width:min(100%,560px)}
  .f254-ref-welcome-shell{min-height:calc(100dvh - 48px);width:min(84vw,700px);margin-block:24px;border-radius:36px;box-shadow:0 30px 80px color-mix(in srgb,var(--f254-ref-text) 18%,transparent)}.f254-ref-welcome-content{min-height:calc(100dvh - 48px)}
}
@media(min-width:1200px){
  .f254-ref-auth-panel{width:min(100%,520px);padding:38px 42px 34px}.f254-ref-auth-panel.is-register{width:min(100%,570px)}
  .f254-ref-welcome-shell{width:min(540px,42vw);min-height:calc(100dvh - 48px);margin-block:24px;border-radius:40px;box-shadow:0 36px 105px color-mix(in srgb,var(--f254-ref-text) 22%,transparent)}.f254-ref-welcome-content{min-height:calc(100dvh - 48px)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.f254-ref-primary:active{transform:none}}

/* Fans254 v13.5.67 — responsive desktop auth composition.
   Desktop follows the modern X-style spatial idea: oversized brand mark on the left,
   focused authentication content on the right. Mobile markup/flows remain unchanged. */
.f254-ref-desktop-brand{display:none}

/* Welcome must be full-viewport on tablet and desktop, not a floating phone card. */
@media(min-width:768px){
  .f254-ref-welcome-shell{
    width:100%!important;
    max-width:none!important;
    min-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .f254-ref-welcome-content{min-height:100dvh!important}
  .f254-ref-welcome-photo{height:72%;background-position:center 24%}
}

@media(min-width:1200px){
  /* X-inspired desktop composition: giant brand on left, auth controls on right. */
  .f254-ref-auth-shell{
    width:100%;
    min-height:100dvh;
    display:grid;
    grid-template-columns:minmax(420px,1.08fr) minmax(440px,.92fr);
    align-items:center;
    justify-items:stretch;
    gap:clamp(48px,6vw,110px);
    padding:clamp(48px,6vh,80px) clamp(58px,7vw,130px);
    overflow:hidden;
  }
  .f254-ref-desktop-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:420px;
    color:var(--f254-ref-accent);
  }
  .f254-ref-desktop-brand-mark{
    display:block;
    width:clamp(300px,34vw,540px)!important;
    height:clamp(300px,34vw,540px)!important;
    max-width:100%;
    filter:drop-shadow(0 24px 60px color-mix(in srgb,var(--f254-ref-accent) 13%,transparent));
  }
  .f254-ref-auth-panel,
  .f254-ref-auth-panel.is-register{
    justify-self:end;
    width:min(100%,520px)!important;
    margin:0!important;
    padding:16px 0 20px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .f254-ref-auth-panel.is-register{width:min(100%,540px)!important}
  .f254-auth-login-page .f254-ref-brand,
  .f254-auth-recovery-page .f254-ref-brand{display:none}
  .f254-ref-title{text-align:left!important;font-size:clamp(42px,3.9vw,62px)!important;line-height:.99!important}
  .f254-ref-subtitle{text-align:left!important;font-size:16px!important;margin-top:12px}
  .f254-ref-form{margin-top:32px}
  .f254-ref-input-wrap{min-height:56px;border-radius:14px}
  .f254-ref-input{height:54px;font-size:15px!important}
  .f254-ref-primary{min-height:54px;border-radius:999px}
  .f254-ref-oauth{min-height:52px;border-radius:999px}
  .f254-ref-footer{text-align:left;margin-top:24px}
  .f254-ref-back{justify-content:flex-start}

  /* Desktop welcome stays full-width and uses the source photo as a true hero. */
  .f254-ref-welcome-photo{
    inset:0;
    height:100%;
    background-position:center 31%;
  }
  .f254-ref-welcome-photo::after{
    background:
      linear-gradient(90deg,color-mix(in srgb,var(--f254-ref-bg) 6%,transparent) 0%,transparent 44%,color-mix(in srgb,var(--f254-ref-bg) 22%,transparent) 66%,var(--f254-ref-bg) 100%),
      linear-gradient(180deg,transparent 0%,transparent 42%,color-mix(in srgb,var(--f254-ref-bg) 28%,transparent) 65%,var(--f254-ref-bg) 100%);
  }
  .f254-ref-welcome-content{
    width:100%;
    min-height:100dvh!important;
    align-items:flex-end;
    justify-content:flex-end;
    text-align:right;
    padding:clamp(56px,7vh,90px) clamp(70px,8vw,150px) clamp(54px,7vh,90px);
  }
  .f254-ref-welcome-title,
  .f254-ref-welcome-copy,
  .f254-ref-welcome-actions,
  .f254-ref-welcome-dots{width:min(100%,700px)}
  .f254-ref-welcome-title{font-size:clamp(42px,4.5vw,70px)!important;white-space:nowrap}
  .f254-ref-welcome-copy{margin-top:30px;font-size:17px!important}
  .f254-ref-welcome-actions{margin-top:32px}
  .f254-ref-welcome-dots{justify-content:flex-end;padding-right:12px}
}

/* Extra-wide desktops keep the right-hand form compact and balanced. */
@media(min-width:1600px){
  .f254-ref-auth-shell{grid-template-columns:minmax(560px,1.15fr) minmax(480px,.85fr);gap:clamp(80px,8vw,150px)}
  .f254-ref-desktop-brand-mark{width:min(36vw,620px)!important;height:min(36vw,620px)!important}
  .f254-ref-auth-panel,.f254-ref-auth-panel.is-register{width:560px!important}
}