/* EXOLUN LUMINOUS INTERACTION / 2026-10-13
   Original pearl-and-sky design inspired by the *motion principle* of the
   user's clip, not a reproduction of its dark/yellow visual identity.
   Existing auth, privacy, language, submission and route handlers are retained. */

#auth.auth {
  background:
    radial-gradient(ellipse 35% 40% at 80% 9%,rgba(250,220,166,.23),transparent 90%),
    radial-gradient(ellipse 45% 45% at 9% 44%,rgba(134,188,247,.24),transparent 88%),
    linear-gradient(155deg,#f7fbff 3%,#fffefa 52%,#f1f8ff 100%)!important;
}
.auth-modal:not(.hidden) .auth-modal-backdrop {
  background:rgba(20,44,77,.26)!important;
  backdrop-filter:blur(13px) saturate(1.1)!important;
}
.auth-modal:not(.hidden) .auth-modal-card {
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(245px,.85fr) minmax(320px,1.08fr)!important;
  width:min(940px,calc(100vw - 36px))!important;
  max-width:940px!important;
  min-height:0!important;
  height:auto!important;
  max-height:calc(100dvh - 48px)!important;
  margin:auto!important;
  border:1px solid rgba(233,241,251,.98)!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 10% 14%,rgba(255,255,255,.98),transparent 38%),
    radial-gradient(circle at 90% 0,rgba(242,210,153,.19),transparent 42%),
    linear-gradient(130deg,#f2f8ff 0%,#fff 55%,#fffdf9 100%)!important;
  box-shadow:0 38px 130px rgba(28,68,119,.18),0 4px 30px rgba(28,67,114,.06),
    inset 0 1px 0 rgba(255,255,255,1)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scroll-behavior:auto!important;
  isolation:isolate;
}
.auth-modal:not(.hidden) .auth-modal-card:before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 48% 42% at 10% 89%,rgba(136,183,238,.10),transparent),
    radial-gradient(ellipse 38% 28% at 88% 17%,rgba(232,187,112,.10),transparent);
}
.auth-modal:not(.hidden) .trust-panel {
  min-height:0!important;
  height:auto!important;
  padding:52px clamp(23px,3.2vw,38px)!important;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(153deg,rgba(239,247,255,.7),rgba(255,255,255,.4) 80%)!important;
  border:0!important;
  border-right:1px solid rgba(129,166,202,.20)!important;
  text-align:left!important;
}
.auth-modal:not(.hidden) .trust-panel>p {
  font-size:13px!important;line-height:1.65!important;color:#5b748e!important;
  text-align:left!important;margin:0 0 14px!important;
}
.auth-modal:not(.hidden) .trust-panel h3 {
  font-size:clamp(22px,2.4vw,31px)!important;
  line-height:1.2!important;letter-spacing:-.04em;
  color:#1e4166!important;text-align:left!important;
}
.auth-modal:not(.hidden) .trust-panel .ey {color:#98743d!important;}
.auth-modal:not(.hidden) .trust-shield {
  width:53px!important;height:53px!important;margin:0 0 18px!important;
  border-radius:17px!important;
  background:linear-gradient(138deg,#f6fbff,#ffefd0)!important;
  box-shadow:0 8px 23px rgba(54,105,165,.10);
  color:#a66f2b!important;
}
.auth-modal:not(.hidden) .security-accordion {
  width:100%!important;margin:12px 0 0!important;
  clip-path:none!important;border-radius:16px!important;
  border:1px solid #d9e7f5!important;background:rgba(255,255,255,.76)!important;
  box-shadow:none!important;
}
.auth-modal:not(.hidden) .security-accordion summary {
  padding:13px 12px!important;min-height:48px!important;
  font-size:12px!important;color:#365b7f!important;
}
.auth-modal:not(.hidden) .security-accordion summary b {
  font-size:10px!important;white-space:nowrap!important;
}
.auth-modal:not(.hidden) .security-accordion summary::after {
  width:27px;height:27px;flex-basis:27px;border-radius:9px!important;
  color:#906e3b!important;background:#fffaf2!important;
}
.auth-modal:not(.hidden) .access-scroll {
  margin-top:16px!important;color:#315f90!important;
  border:1px solid #d3e5f4!important;background:#fff!important;
}
.auth-modal:not(.hidden) .modal-form-panel {
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0;
  min-height:480px!important;
  padding:46px clamp(25px,4vw,57px) 41px!important;
  overflow:visible!important;
  background:transparent!important;
  isolation:isolate;
}
.auth-modal:not(.hidden) .modal-form-panel>* {width:100%!important;max-width:100%!important;}
.auth-modal:not(.hidden) .modal-form-panel h2 {
  margin:4px 0 7px!important;font-size:clamp(25px,3vw,33px)!important;
  letter-spacing:-.045em;color:#183b61!important;
}
.auth-modal:not(.hidden) .modal-form-panel>#authModalText {
  margin:0 0 15px!important;line-height:1.55!important;
  font-size:13px!important;color:#5d7690!important;
}
.auth-modal:not(.hidden) .modal-form-panel .ey {
  color:#ad7e40!important;font-size:10px!important;letter-spacing:.17em!important;
}
.auth-modal:not(.hidden) .modal-form-panel .field {
  position:relative;
  margin:11px 0!important;
  display:grid;gap:5px;
}
.auth-modal:not(.hidden) .modal-form-panel .field:before,
.auth-modal:not(.hidden) .modal-form-panel .field:after {display:none!important;}
.auth-modal:not(.hidden) .modal-form-panel .field label {
  color:#56718d!important;font-size:11px!important;
  letter-spacing:.03em!important;padding-left:2px!important;font-weight:740!important;
}
.auth-modal:not(.hidden) .modal-form-panel .field input {
  width:100%;height:52px!important;
  border:1px solid #d3e2f0!important;
  border-radius:15px!important;
  padding:0 15px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 3px 14px rgba(29,69,116,.025)!important;
  color:#203f60!important;
  font-size:16px!important;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease!important;
}
.auth-modal:not(.hidden) .modal-form-panel .field:focus-within input {
  border-color:#77addd!important;
  background:#fff!important;
  box-shadow:0 0 0 3px rgba(103,166,227,.14),0 7px 21px rgba(43,102,166,.065)!important;
}
.auth-modal:not(.hidden) .modal-form-panel .field:has(.exolun-password-toggle) input {
  padding-right:54px!important;
}
.auth-modal:not(.hidden) .exolun-password-toggle {
  position:absolute;right:7px;bottom:4px;
  display:grid;place-items:center;
  width:44px;height:44px;
  border:0;border-radius:11px;
  color:#53779b;background:transparent;
  cursor:pointer;z-index:4;
}
.auth-modal:not(.hidden) .exolun-password-toggle:hover,
.auth-modal:not(.hidden) .exolun-password-toggle[aria-pressed="true"] {
  color:#275e94;background:#edf6ff;
}
.auth-modal:not(.hidden) .exolun-password-toggle svg {
  width:19px;height:19px;display:block;
}
.auth-modal:not(.hidden) .modal-submit {
  min-height:50px!important;width:100%!important;
  margin:19px 0 8px!important;
  border:1px solid #ddad65!important;border-radius:16px!important;
  color:#163653!important;font-size:14px!important;font-weight:850!important;
  background:linear-gradient(105deg,#fff3d7,#f0ce95 48%,#e5b56f)!important;
  box-shadow:0 9px 25px rgba(153,104,43,.14)!important;
  transition:filter .2s ease,transform .2s ease,box-shadow .2s ease!important;
}
.auth-modal:not(.hidden) .modal-submit:hover:not(:disabled) {
  filter:brightness(1.035)!important;transform:translateY(-1px);
  box-shadow:0 13px 28px rgba(153,104,43,.19)!important;
}
.auth-modal:not(.hidden) .modal-submit:disabled {position:relative;cursor:progress;opacity:.76!important;}
.auth-modal:not(.hidden) .modal-submit:disabled:after {
  content:"";display:inline-block;
  width:12px;height:12px;border:2px solid rgba(20,61,95,.25);
  border-top-color:#21496f;border-radius:50%;
  margin-left:9px;vertical-align:-2px;animation:exolunAuthSpin .7s linear infinite;
}
.auth-modal:not(.hidden) #switchAuthMode {
  min-height:44px!important;
  color:#2b689b!important;
  font-size:12px!important;
}
.auth-modal:not(.hidden) #switchAuthMode:hover {text-decoration:underline;}
.auth-modal:not(.hidden) .privacy-check {color:#536f89!important;}
.auth-modal:not(.hidden) .privacy-check a {color:#215c93!important;}
.auth-modal:not(.hidden) #modalMessage .msg {
  border:1px solid #f0d7ac;border-radius:13px;
  background:#fff9ee!important;color:#775223!important;
  font-size:12px!important;line-height:1.5;
}
.auth-modal:not(.hidden) .confirmation-state {
  border:1px solid #d9e7f4!important;border-radius:20px;
  background:linear-gradient(135deg,#f2f9ff,#fffaf0)!important;
}
.auth-modal:not(.hidden) .modal-close {
  z-index:20!important;
  color:#355b81!important;
  border:1px solid #d9e7f3!important;
  background:rgba(255,255,255,.95)!important;
  box-shadow:0 5px 17px rgba(24,59,99,.07)!important;
}
.auth-modal:not(.hidden) :is(button,input,summary):focus-visible {
  outline:3px solid #427fb9!important;outline-offset:3px!important;
}
/* Interstitial gold-blue microcrystal: visible only while changing modes. */
.auth-modal:not(.hidden) .modal-form-panel::after {
  content:"";position:absolute;top:50%;left:50%;width:59px;height:59px;
  transform:translate(-50%,-50%) scale(.5);
  pointer-events:none;opacity:0;
  background:url("/pilot/icon.svg") center/contain no-repeat;
  filter:drop-shadow(0 9px 20px rgba(34,79,138,.16))
         drop-shadow(0 0 18px rgba(216,158,71,.18));
  transition:opacity .16s ease,transform .32s cubic-bezier(.2,.8,.2,1);
  z-index:6;
}
.auth-modal:not(.hidden) .modal-form-panel[data-morph="closing"]::after,
.auth-modal:not(.hidden) .modal-form-panel[data-morph="opening"]::after {
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}
@keyframes exolunAuthSpin {to{transform:rotate(360deg)}}
@keyframes exolunAuthEnter {
  from{opacity:0;transform:translateY(16px) scale(.975)}
  to{opacity:1;transform:none}
}
@media(min-width:761px) and (prefers-reduced-motion:no-preference) {
  .auth-modal:not(.hidden) .auth-modal-card {
    animation:exolunAuthEnter .4s cubic-bezier(.2,.8,.25,1) both;
  }
}
@media(max-width:760px) {
  .auth-modal:not(.hidden) {
    padding:12px!important;
    display:grid!important;place-items:center!important;
    overflow:hidden!important;
  }
  .auth-modal:not(.hidden) .auth-modal-card {
    width:min(94vw,620px)!important;
    display:flex!important;flex-direction:column!important;
    grid-template-columns:none!important;
    max-height:calc(100dvh - 24px)!important;
    height:auto!important;min-height:0!important;
    margin:auto!important;border-radius:27px!important;
  }
  .auth-modal:not(.hidden) .modal-form-panel {
    order:1!important;
    padding:44px 21px 13px!important;
    min-height:0!important;
    flex:0 0 auto;
  }
  .auth-modal:not(.hidden) .trust-panel {
    order:2!important;display:block!important;
    padding:8px 21px 23px!important;
    background:transparent!important;
    border:0!important;text-align:left!important;
  }
  .auth-modal:not(.hidden) .trust-panel> :is(.trust-shield,.ey,h3,p,.access-scroll) {
    display:none!important;
  }
  .auth-modal:not(.hidden) .security-accordion {
    margin:6px 0 0!important;background:rgba(247,251,255,.94)!important;
  }
  .auth-modal:not(.hidden) .modal-close {
    position:absolute!important;float:none!important;
    right:13px!important;top:12px!important;
    margin:0!important;width:37px;height:37px;
  }
  .auth-modal:not(.hidden) .modal-form-panel h2 {font-size:27px!important;padding-right:20px;}
  .auth-modal:not(.hidden) .modal-form-panel .field input {height:50px!important;}
  .auth-modal:not(.hidden) .modal-form-panel .field {margin:9px 0!important;}
  .auth-modal:not(.hidden) .modal-submit {min-height:48px!important;margin-top:13px!important;}
}
@media(max-width:390px) {
  .auth-modal:not(.hidden) .modal-form-panel {padding:45px 16px 10px!important;}
  .auth-modal:not(.hidden) .trust-panel {padding:6px 16px 17px!important;}
  .auth-modal:not(.hidden) .modal-form-panel #authModalText {font-size:12px!important;}
}
@media (prefers-reduced-motion:reduce) {
  .auth-modal:not(.hidden) .auth-modal-card,
  .auth-modal:not(.hidden) .modal-form-panel,
  .auth-modal:not(.hidden) .modal-form-panel::after,
  .auth-modal:not(.hidden) .modal-submit,
  .auth-modal:not(.hidden) .modal-submit:disabled::after {
    animation:none!important;transition:none!important;
  }
}


/* COSMOS V2 harmonisation: the auth surface reuses the exact task-composer
   materials, palette and icon instead of introducing a competing theme. */
.auth-modal:not(.hidden) .auth-modal-card {
  border-color:var(--exolun-hairline,rgba(67,108,158,.19))!important;
  background:
    radial-gradient(ellipse 44% 55% at 85% 10%,rgba(244,210,153,.17),transparent),
    radial-gradient(ellipse 70% 60% at 12% 68%,rgba(110,179,240,.12),transparent),
    linear-gradient(163deg,#f4f9ff,#fffefd 56%,#f3f8ff)!important;
  animation:none!important; /* opening is coordinated from the task/button origin */
}
.auth-modal:not(.hidden) .auth-modal-backdrop {
  background:rgba(26,62,104,.18)!important;
  backdrop-filter:blur(12px) saturate(1.05)!important;
}
.auth-modal:not(.hidden) .trust-shield {
  font-size:0!important;
  border:0!important;
  background:url("/pilot/icon.svg") center/contain no-repeat!important;
  width:72px!important;height:72px!important;
  border-radius:20px!important;
  box-shadow:none!important;
  filter:drop-shadow(0 11px 15px rgba(27,69,121,.13))!important;
}
.auth-modal:not(.hidden) .modal-form-panel .field input {
  border-color:rgba(132,169,207,.45)!important;
  background:linear-gradient(125deg,#fff,#fdfefe 67%,#fffcf6)!important;
  border-radius:15px!important;
}
.auth-modal:not(.hidden) .modal-form-panel .field:focus-within input {
  border-color:#9abbdc!important;
  box-shadow:0 0 0 3px rgba(111,170,229,.16),0 8px 20px rgba(43,99,165,.09)!important;
}
.auth-modal:not(.hidden) .modal-submit {
  border:1px solid #d2a45e!important;
  background:linear-gradient(120deg,#ffe9ba 0%,#e9b96d 73%,#d89c4a 100%)!important;
  color:#143252!important;
  border-radius:15px!important;
  box-shadow:0 9px 23px rgba(161,104,40,.14)!important;
}
.auth-modal:not(.hidden) .modal-form-panel .ey {
  color:#9a712e!important;
}
.auth-modal:not(.hidden) .exolun-auth-companion {
  display:flex!important;align-items:center!important;gap:12px!important;
  width:100%!important;
  padding:10px 12px!important;
  margin:7px 0 10px!important;
  border:1px solid rgba(123,164,206,.24)!important;
  border-radius:17px!important;
  background:linear-gradient(115deg,rgba(237,246,255,.91),rgba(255,255,255,.92) 63%,rgba(255,248,235,.90))!important;
  box-shadow:0 6px 17px rgba(34,79,131,.035)!important;
  color:#3e6488!important;
  text-align:left!important;
}
.auth-modal:not(.hidden) .exolun-auth-companion img {
  display:block!important;width:39px!important;height:42px!important;
  flex:0 0 39px;object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(30,66,118,.12));
}
.auth-modal:not(.hidden) .exolun-auth-companion div {
  flex:1;min-width:0;
}
.auth-modal:not(.hidden) .exolun-auth-companion strong {
  font-size:12px!important;color:#254e73!important;font-weight:790!important;
  display:block;line-height:1.25!important;
}
.auth-modal:not(.hidden) .exolun-auth-companion p {
  font-size:11px!important;line-height:1.48!important;
  margin:3px 0 0!important;
  color:#5e7994!important;
}
.auth-modal:not(.hidden) .modal-form-panel[data-morph] .exolun-auth-companion,
.auth-modal:not(.hidden) .modal-form-panel[data-morph] .field {
  pointer-events:none;
}
.auth-modal:not(.hidden) .security-accordion:focus-within {
  outline:2px solid rgba(57,122,184,.28);
  outline-offset:2px;
}
@media(max-width:760px) {
  .auth-modal:not(.hidden) .modal-form-panel>.ey::before {
    content:"";display:inline-block;vertical-align:middle;
    width:29px;height:29px;margin:0 9px 2px 0;
    background:url("/pilot/icon.svg") center/contain no-repeat;
    filter:drop-shadow(0 5px 7px rgba(30,66,118,.10));
  }
  .auth-modal:not(.hidden) .exolun-auth-companion {padding:8px 10px!important;margin:5px 0 7px!important;}
  .auth-modal:not(.hidden) .exolun-auth-companion img {width:34px!important;height:36px!important;flex-basis:34px;}
  .auth-modal:not(.hidden) .exolun-auth-companion strong {font-size:11px!important;}
  .auth-modal:not(.hidden) .exolun-auth-companion p {font-size:10px!important;line-height:1.35!important;}
  .auth-modal:not(.hidden) .trust-panel .security-accordion summary {font-size:11px!important;}
}
@media(max-width:390px) and (max-height:700px) {
  .auth-modal:not(.hidden) .modal-form-panel {padding-top:42px!important;}
  .auth-modal:not(.hidden) .modal-form-panel h2 {font-size:23px!important;}
  .auth-modal:not(.hidden) .exolun-auth-companion {gap:8px!important;}
}