/* ============================================================
   IL·LUKI celestial-gold theme for the Huly login experience
   (founders.illuki.com — injected via nginx sub_filter on </head>)

   KEYED TO HULY v0.7.426 DOM — re-verify these hooks after upgrades:
     .backd                (LoginApp theme wrapper — scopes all login rules)
     .bg-image             (login background container; picture>img.back-image)
     .bg-image .flex-row-center svg + .fs-title   (Huly logo + "Platform")
     .panel-base           (login glass panel)
     .form-content / form.container / .form-row   (login form)
     .caption a.title (.selected)                 (Sign Up / Log In tabs)
     .editbox              (input wrapper)
     .antiButton.contrast  (primary Log In button)
     .status .container    (validation status box)
     .footer / .actions    (Recover / Login with code / guest links)
   Only ::selection + scrollbar are global; everything else is
   scoped under .backd so the logged-in workbench is untouched.
   ============================================================ */

/* ---- safe global touches ---- */
::selection{background:rgba(217,184,106,.32); color:#fff5df}
html{scrollbar-width:thin; scrollbar-color:rgba(217,184,106,.42) transparent}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#b28b3c,#d9b86a); border-radius:999px; border:3px solid #05070f}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#d9b86a,#f3dc9a)}

/* ---- celestial sky (login only) ---- */
.backd{background:#05070f !important}
.backd .bg-image{position:relative;
  background:
    radial-gradient(70% 60% at 8% 4%, rgba(58,110,190,.16), transparent 55%),
    radial-gradient(60% 55% at 94% 8%, rgba(70,120,200,.14), transparent 55%),
    radial-gradient(50% 50% at 50% 120%, rgba(120,90,200,.10), transparent 60%),
    radial-gradient(130% 130% at 50% 30%, #0a0f1e, #05070f 70%) !important}
.backd .bg-image picture,.backd .bg-image img.back-image{display:none !important}
.backd .bg-image::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 60% 70%,#cfe3ff,transparent),
    radial-gradient(1px 1px at 80% 20%,#fff,transparent),radial-gradient(1.4px 1.4px at 35% 80%,#ffe9c4,transparent),
    radial-gradient(1px 1px at 90% 55%,#fff,transparent),radial-gradient(1px 1px at 12% 62%,#dcd0ff,transparent),
    radial-gradient(1.2px 1.2px at 47% 12%,#fff,transparent),radial-gradient(1px 1px at 72% 88%,#fff,transparent);
  background-size:540px 540px,420px 420px,320px 320px,600px 600px,360px 360px,480px 480px,440px 440px,520px 520px;
  opacity:.5; animation:ilk-twinkle 9s ease-in-out infinite}
.backd .bg-image::after{content:""; position:absolute; inset:-10%; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(36% 38% at 24% 22%, rgba(92,132,235,.20), transparent 62%),
    radial-gradient(42% 44% at 78% 80%, rgba(150,112,220,.16), transparent 64%);
  animation:ilk-aurora 60s ease-in-out infinite alternate}
@keyframes ilk-twinkle{0%,100%{opacity:.38} 50%{opacity:.6}}
@keyframes ilk-aurora{0%{transform:translate3d(-2%,1%,0)} 100%{transform:translate3d(2%,-2%,0)}}
@media(prefers-reduced-motion:reduce){.backd .bg-image::before,.backd .bg-image::after{animation:none}}

/* ---- IL·LUKI wordmark replaces Huly logo + "Platform" ---- */
.backd .bg-image > .flex-row-center svg{display:none !important}
.backd .bg-image > .flex-row-center .fs-title{font-size:0 !important; margin-left:0 !important}
.backd .bg-image > .flex-row-center .fs-title::after{content:"IL\00B7LUKI";
  font-family:"Cinzel",Georgia,serif; font-weight:700; font-size:1.35rem; letter-spacing:.14em;
  background:linear-gradient(180deg,#fbeeb8 0%,#e8c877 32%,#d4af5a 56%,#b8923f 76%,#eccb7d 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 14px rgba(212,180,102,.35))}

/* ---- glass panel ----
   Huly paints the panel via .panel::after (blue radial fill, z:-1) and
   .panel::before (conic border shine) — retint both, keep the structure. */
.backd .panel-base{background:rgba(10,14,26,.66) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(212,180,102,.22) !important; border-radius:20px !important;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05) !important}
.backd .panel-base::after{background:radial-gradient(161.92% 96.11% at 11.33% 3.89%,
  rgba(17,23,42,.94) 0%, rgba(8,11,22,.92) 100%) !important}
.backd .panel-base::before{opacity:.55 !important;
  background:conic-gradient(rgba(255,240,190,.35) 10%, rgba(178,139,60,.4), rgba(243,220,154,.55),
  rgba(230,224,207,.25), rgba(212,180,102,.45)) !important}

/* ---- typography ---- */
.backd .panel-base,.backd .form-content{font-family:"Cormorant Garamond",Georgia,serif}

/* ---- Sign Up / Log In tabs ---- */
.backd a.title{font-family:"Cinzel",Georgia,serif !important; text-transform:uppercase;
  letter-spacing:.14em; font-size:.92rem !important; font-weight:600 !important;
  color:#8f97ab !important; transition:color .2s}
.backd a.title:hover{color:#e6e0cf !important}
.backd a.title.selected{color:#f3dc9a !important; border-color:#d9b86a !important}

/* ---- inputs ---- */
.backd .editbox{background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(212,180,102,.22) !important; border-radius:12px !important;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease}
.backd .editbox:focus-within{border-color:#d9b86a !important; background:rgba(255,255,255,.06) !important;
  box-shadow:0 0 0 3px rgba(217,184,106,.16) !important}
.backd .editbox input{font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:1.06rem !important; color:#e6e0cf !important; caret-color:#d9b86a}
.backd .editbox input::placeholder{color:#8f97ab !important}
.backd .editbox label,.backd .editbox span{color:#8f97ab}

/* ---- validation / status box ---- */
.backd .status .container{background:rgba(10,14,26,.5) !important;
  border:1px solid rgba(212,180,102,.18) !important; border-radius:12px !important; color:#c9cfdd}

/* ---- primary gold button ---- */
.backd .antiButton.contrast{font-family:"Cinzel",Georgia,serif !important; font-weight:600 !important;
  text-transform:uppercase; letter-spacing:.16em; font-size:.78rem !important; color:#25190a !important;
  background:linear-gradient(180deg,#fbeeb8 0%,#e8c877 32%,#d4af5a 56%,#b8923f 76%,#eccb7d 100%) !important;
  border:1px solid rgba(255,240,190,.5) !important; border-radius:12px !important;
  box-shadow:0 10px 30px -10px rgba(212,180,102,.5), inset 0 1px 0 rgba(255,255,255,.4) !important;
  transition:transform .15s ease, filter .15s ease}
.backd .antiButton.contrast span{color:#25190a !important}
.backd .antiButton.contrast:hover{transform:translateY(-1px); filter:brightness(1.05)}
.backd .antiButton.contrast:disabled,.backd .antiButton.contrast[disabled]{
  filter:saturate(.35) brightness(.72) !important; transform:none; cursor:not-allowed}

/* ---- footer & action links ---- */
.backd .footer,.backd .actions{font-family:"Cormorant Garamond",Georgia,serif}
.backd .footer span,.backd .actions div{color:#8f97ab}
.backd .footer a,.backd .actions a{color:#f3dc9a !important; transition:color .2s}
.backd .footer a:hover,.backd .actions a:hover{color:#d9b86a !important}

/* ---- focus ring ---- */
.backd :focus-visible{outline:2px solid #f3dc9a; outline-offset:3px; border-radius:6px}