/* Shared ETL entry screen. No styles escape the signed-out portal. */
@font-face { font-family: ETLAuthDisplay; src: url('/assets/fonts/bowler.woff2') format('woff2'); font-weight: 400; font-display: swap; }
.auth.etl-auth {
  --auth-bg:#f5f6f7; --auth-paper:#fff; --auth-ink:#141c24; --auth-muted:#626b74;
  --auth-ease-out:cubic-bezier(0.23,1,0.32,1); --auth-success:#276744; --auth-success-soft:#edf5f0;
  --auth-line:#dde1e5; --auth-red:#d9272e; --auth-soft:#eef0f2; --auth-shadow:0 20px 56px rgba(25,33,43,.07);
  display:flex; flex-direction:column; min-height:100dvh; height:auto;
  padding:28px clamp(20px,4vw,64px) 20px; background:var(--auth-bg); color:var(--auth-ink);
  font-family:Inter,system-ui,sans-serif; box-sizing:border-box;
}
html[data-theme="dark"] .auth.etl-auth {
  --auth-bg:#101316; --auth-paper:#191d21; --auth-ink:#f1f3f4; --auth-muted:#adb5bd;
  --auth-success:#8bd6ad; --auth-success-soft:#1d2b25;
  --auth-line:#363d44; --auth-red:#fa676c; --auth-soft:#22282e; --auth-shadow:0 20px 56px rgba(0,0,0,.16);
}
.etl-auth *, .etl-auth *::before, .etl-auth *::after { box-sizing:border-box; }
.etl-auth__header, .etl-auth__layout, .etl-auth__footer { width:100%; max-width:1280px; margin-inline:auto; }
.etl-auth__header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:54px; }
.etl-auth__tools { display:flex; width:100%; justify-content:space-between; align-items:center; gap:20px; }
.etl-auth__back { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--auth-muted); font-size:13px; text-decoration:none; }
.etl-auth__theme { display:grid; place-items:center; width:44px; min-height:44px; border:1px solid var(--auth-line); border-radius:12px; background:var(--auth-paper); color:var(--auth-ink); cursor:pointer; }
.etl-auth__layout { flex:1; display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); gap:clamp(32px,4vw,64px); align-items:center; padding-block:48px; }
.etl-auth--admin .etl-auth__layout { display:flex; justify-content:center; }
/* The illustration is decorative; only the form carries interface copy. */
.etl-auth__intro { min-width:0; display:flex; align-items:center; }
.etl-auth__graphic { width:calc(100% + 64px); margin:0 -32px; pointer-events:none; }
.etl-auth__graphic img { display:block; width:100%; height:auto; object-fit:contain; }
/* The original silhouette remains intact; only its optical finish changes. */
.etl-auth__graphic--satin {
  --auth-symbol-mask:url('/assets/img/auth-trailer-arc.webp');
  --auth-symbol-light:.08; --auth-symbol-shadow:rgba(25,33,43,.1);
  perspective:1200px; isolation:isolate;
}
html[data-theme="dark"] .etl-auth__graphic--satin {
  --auth-symbol-light:.04; --auth-symbol-shadow:rgba(0,0,0,.24);
}
.etl-auth__symbol { position:relative; transform:rotateX(2deg) rotateY(-4deg) rotateZ(-.6deg); transform-origin:50% 55%; }
.etl-auth__symbol img { opacity:1; filter:saturate(.92) drop-shadow(0 18px 24px var(--auth-symbol-shadow)); }
.etl-auth__symbol::before, .etl-auth__symbol-sheen {
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask:var(--auth-symbol-mask) center / contain no-repeat;
  mask:var(--auth-symbol-mask) center / contain no-repeat;
}
.etl-auth__symbol::before {
  content:''; opacity:var(--auth-symbol-light);
  background:linear-gradient(125deg,rgba(255,255,255,.9) 4%,rgba(255,255,255,.08) 32%,transparent 46%,rgba(255,255,255,.48) 72%,transparent 94%);
}
.etl-auth__symbol-sheen { overflow:hidden; }
.etl-auth__symbol-sheen::before {
  content:''; position:absolute; inset:-30%; opacity:0;
  background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.04) 42%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.04) 58%,transparent 68%);
  transform:translateX(-80%);
}
.etl-auth__main { min-width:0; width:100%; max-width:456px; justify-self:end; }
.etl-auth__card { position:relative; width:100%; padding:36px; background:var(--auth-paper); border:1px solid var(--auth-line); border-radius:20px; box-shadow:var(--auth-shadow); }
.etl-auth__card::before { content:''; position:absolute; top:-1px; left:36px; width:42px; height:3px; border-radius:0 0 2px 2px; background:var(--auth-red); }
.etl-auth__card h1 { margin:0 0 28px; color:var(--auth-ink); font:400 clamp(24px,2.2vw,29px)/1.2 ETLAuthDisplay,sans-serif; text-wrap:balance; }
.etl-auth__card h1:focus-visible { outline:2px solid var(--auth-red); outline-offset:5px; border-radius:3px; }
.etl-auth__card .lead { margin:0 0 26px; font:400 14px/1.6 Inter,system-ui,sans-serif; color:var(--auth-muted); }
.etl-auth__card fieldset { margin:0; padding:0; min-width:0; border:0; }
.etl-auth__card :is(.field,.fld) { display:flex; flex-direction:column; gap:0; margin:0 0 18px; }
.etl-auth__card :is(.field > span,.fld-lb,.etl-auth__password-field > label) { margin:0 0 8px; color:var(--auth-ink); font:500 13px/1.5 Inter,system-ui,sans-serif; }
.etl-auth__card :is(.field,.fld) input:not([type="checkbox"]) { width:100%; min-width:0; height:50px; min-height:50px; margin:0; padding:12px 14px; border:1px solid var(--auth-line); border-radius:9px; background:var(--auth-paper); color:var(--auth-ink); font:400 16px/1.4 Inter,system-ui,sans-serif; outline:none; box-shadow:none; transition:border-color .16s ease,box-shadow .16s ease; }
.etl-auth__card input::placeholder { color:var(--auth-muted); opacity:1; }
.etl-auth__card :is(.field,.fld) input:focus-visible { border-color:var(--auth-red); box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-red) 13%,transparent); }
.etl-auth__password { display:flex; align-items:center; border:1px solid var(--auth-line); border-radius:9px; background:var(--auth-paper); }
.etl-auth__password:focus-within { border-color:var(--auth-red); box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-red) 13%,transparent); }
.etl-auth__card .etl-auth__password input { border:0 !important; box-shadow:none !important; background:transparent !important; flex:1; }
.etl-auth__password button { display:grid; flex:none; place-items:center; width:44px; height:44px; padding:0; margin:0 3px 0 0; border:0; border-radius:7px; background:transparent; color:var(--auth-muted); cursor:pointer; }
.etl-auth__password button:hover { background:var(--auth-soft); color:var(--auth-ink); }
.etl-auth__password-field small { margin-top:6px; font:400 12px/1.5 Inter,system-ui,sans-serif; color:var(--auth-muted); }
.etl-auth__password-field .etl-auth__caps { color:var(--auth-red); }
.etl-auth__card :is(.hint,.fld-hi) { margin-top:7px; color:var(--auth-muted); font:400 12px/1.5 Inter,system-ui,sans-serif; }
.etl-auth .etl-auth__card .btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:50px; padding:13px 18px; margin:8px 0 0; border:1px solid #d9272e; border-radius:9px; background:#d9272e; color:#fff; font:600 15px/1.5 Inter,system-ui,sans-serif; cursor:pointer; transition:background .16s ease,transform .16s ease; }
.etl-auth .etl-auth__card .btn:hover:not(:disabled) { background:#bc1e25; border-color:#bc1e25; }
.etl-auth .etl-auth__card .btn:active:not(:disabled) { transform:translateY(1px); }
.etl-auth .etl-auth__card .btn:disabled { opacity:.6; cursor:wait; }
.etl-auth__card .auth-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 16px; margin-top:14px; }
.etl-auth__card :is(.linkbtn,.lnk) { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 0; border:0; border-radius:0; background:transparent; color:var(--auth-muted); font:500 13px/1.5 Inter,system-ui,sans-serif; text-align:left; cursor:pointer; text-decoration:none; }
.etl-auth__card :is(.linkbtn,.lnk):hover { color:var(--auth-red); }
/* Feedback stays within the current card, without an overlay or lost field values. */
.etl-auth__feedback { display:flex; align-items:flex-start; gap:12px; padding:15px; margin:0 0 22px; border:1px solid color-mix(in srgb,var(--auth-red) 35%,var(--auth-line)); border-radius:12px; background:color-mix(in srgb,var(--auth-red) 5%,var(--auth-paper)); color:var(--auth-ink); overflow-wrap:anywhere; }
.etl-auth__feedback-icon { display:grid; place-items:center; width:24px; height:24px; flex:none; color:var(--auth-red); }
.etl-auth__feedback strong { display:block; margin:1px 0 5px; font:600 13px/1.5 Inter,system-ui,sans-serif; }
.etl-auth__feedback p { margin:0; font:400 13px/1.6 Inter,system-ui,sans-serif; color:var(--auth-muted); }
.etl-auth__result { padding-block:10px 2px; }
.etl-auth__result-icon { display:grid; place-items:center; width:72px; height:72px; margin-bottom:26px; border:1px solid color-mix(in srgb,var(--auth-success) 18%,var(--auth-line)); border-radius:22px; background:var(--auth-success-soft); color:var(--auth-success); }
.etl-auth__result h1 { margin-bottom:18px; }
.etl-auth__result .lead { margin-bottom:28px; }
.etl-auth__result .auth-links { justify-content:center; }
.etl-auth__spinner { flex:none; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; }
.etl-auth .etl-auth__card .btn[data-busy="true"] { opacity:1; }
.etl-auth__card :is(.field,.fld) input:user-invalid { border-color:var(--auth-red); }
.etl-auth__password:has(input:user-invalid) { border-color:var(--auth-red); }
.etl-auth__card .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.etl-auth__card .etl-consent { display:flex; align-items:flex-start; gap:9px; margin:0 0 18px; color:var(--auth-muted); font-size:12px; line-height:1.6; }
.etl-auth__card .etl-consent input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:#d9272e; }
.etl-auth__card .etl-consent a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.etl-auth__support { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 24px; margin:16px 0 0; padding:0 8px; color:var(--auth-muted); font:400 12px/1.7 Inter,system-ui,sans-serif; }
.etl-auth__support a { display:inline-flex; align-items:center; min-height:44px; color:var(--auth-muted); text-decoration:none; }
.etl-auth__support a:hover { color:var(--auth-ink); }
.etl-auth__footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding-top:16px; border-top:1px solid var(--auth-line); color:var(--auth-muted); font-size:11px; line-height:1.6; }
.etl-auth__footer a { color:inherit; text-decoration:none; }
.etl-auth :is(button,a):focus-visible { outline:2px solid var(--auth-red); outline-offset:4px; }
.etl-auth [hidden] { display:none !important; }
.etl-auth .request-status { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
/* Keep the scene and card anchored when a longer entry form opens. */
@media (min-width:961px) {
  .auth.etl-auth--cabinet { height:100dvh; min-height:640px; }
  .etl-auth--cabinet :is(.etl-auth__header,.etl-auth__footer) { flex-shrink:0; }
  .etl-auth--cabinet .etl-auth__layout { flex:1 1 0; min-height:0; grid-template-rows:minmax(0,1fr); align-items:start; }
  .etl-auth--cabinet .etl-auth__intro { align-self:center; }
  .etl-auth--cabinet .etl-auth__graphic img { max-height:max(300px,calc(100dvh - 220px)); }
  .etl-auth--cabinet .etl-auth__main { display:flex; flex-direction:column; max-height:100%; min-height:0; }
  .etl-auth--cabinet .etl-auth__card { flex:0 1 auto; min-height:0; overflow-y:auto; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--auth-line) transparent; }
  .etl-auth--cabinet .etl-auth__support { flex-shrink:0; }
}
@media (max-width:1000px) {
  .etl-auth__layout { gap:32px; }
  .etl-auth__card { padding:28px; }
}
@media (max-width:960px) {
  .auth.etl-auth { padding:18px 20px 24px; }
  .etl-auth__tools { gap:0; }
  .etl-auth__layout { display:flex; flex-direction:column; justify-content:center; gap:28px; padding-block:32px; }
  .etl-auth__main { order:0; max-width:440px; }
  .etl-auth__card { padding:26px 24px; border-radius:16px; }
  .etl-auth__card h1 { font-size:27px; }
  .etl-auth__intro { display:none; }
  .etl-auth--cabinet .etl-auth__layout { justify-content:flex-start; gap:16px; padding-block:20px; }
  .etl-auth--cabinet .etl-auth__intro { display:flex; justify-content:center; flex:0 0 auto; width:100%; }
  .etl-auth--cabinet .etl-auth__graphic { width:clamp(160px,30vw,252px); margin:0; }
  .etl-auth__footer { margin-top:14px; }
  .etl-auth__card .grid2 { grid-template-columns:1fr; gap:0; }
}
@media (max-width:960px) and (max-height:700px) {
  .etl-auth--cabinet .etl-auth__layout { gap:12px; padding-block:12px; }
  .etl-auth--cabinet .etl-auth__graphic { width:128px; }
}
@media (max-width:360px) {
  .auth.etl-auth { padding-inline:14px; }
  .etl-auth__card { padding:24px 18px; }
  .etl-auth__card h1 { font-size:23px; }
}
/* Rare entry: spatial arrival. Mode/result changes: brief state indication. */
@media (prefers-reduced-motion:no-preference) {
  .etl-auth__intro { animation:etl-auth-scene-in 280ms var(--auth-ease-out) both; }
  .etl-auth__main { animation:etl-auth-enter 240ms var(--auth-ease-out) 50ms both; }
  .etl-auth__step { animation:etl-auth-fade-in 180ms var(--auth-ease-out) both; }
  .etl-auth__spinner { animation:etl-auth-spin 800ms linear infinite; }
  @starting-style { .etl-auth__feedback { opacity:0; } }
  .etl-auth__feedback { transition:opacity 160ms var(--auth-ease-out); }
  /* One quiet arrival, then rest: no endless movement beside the form. */
  .etl-auth__symbol { animation:etl-auth-symbol-arrive 4.8s cubic-bezier(.45,0,.55,1) both; }
  .etl-auth__symbol-sheen::before { animation:etl-auth-symbol-sheen 4.4s cubic-bezier(.45,0,.55,1) 200ms both; }
  @keyframes etl-auth-symbol-arrive {
    0% { transform:translateY(7px) rotateX(3deg) rotateY(-7deg) rotateZ(-1deg); }
    52% { transform:translateY(-7px) rotateX(1deg) rotateY(1deg) rotateZ(.2deg); }
    100% { transform:translateY(0) rotateX(2deg) rotateY(-4deg) rotateZ(-.6deg); }
  }
  @keyframes etl-auth-symbol-sheen {
    0% { opacity:0; transform:translateX(-80%); }
    25% { opacity:.28; }
    70% { opacity:.28; }
    100% { opacity:0; transform:translateX(80%); }
  }
  @keyframes etl-auth-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
  @keyframes etl-auth-scene-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  @keyframes etl-auth-fade-in { from { opacity:0; } to { opacity:1; } }
  @keyframes etl-auth-spin { to { transform:rotate(360deg); } }
}
@media (prefers-reduced-motion:reduce) {
  .etl-auth__intro, .etl-auth__main, .etl-auth__step { animation:etl-auth-soft-fade 80ms ease-out both; }
  .etl-auth__spinner { animation:none; }
  .etl-auth__symbol { animation:none; transition:none; transform:none; }
  .etl-auth__symbol-sheen { display:none; }
  .etl-auth .etl-auth__card .btn { transition:background 100ms ease; }
  .etl-auth .etl-auth__card .btn:active:not(:disabled) { transform:none; }
  @keyframes etl-auth-soft-fade { from { opacity:.85; } to { opacity:1; } }
}