/* ---------- Sliding sign in / create account ---------- */
.ax-page{--axbg:linear-gradient(115deg,#eef1f5 0%,#d6e3ee 100%);background:var(--axbg);position:relative;align-content:center;gap:18px}
[data-theme="dark"] .ax-page{--axbg:linear-gradient(115deg,#0c1216 0%,#132430 100%)}
.ax-theme{position:absolute;top:18px;right:18px}
.ax{position:relative;overflow:hidden;width:min(880px,100%);min-height:540px;background:var(--surface);border-radius:28px;box-shadow:0 20px 50px rgba(17,28,38,.16)}
[data-theme="dark"] .ax{box-shadow:0 20px 50px rgba(0,0,0,.45);border:1px solid var(--line)}
.ax-form{position:absolute;top:0;left:0;height:100%;width:50%;display:flex;align-items:center;justify-content:center;padding:0 46px;transition:transform .6s ease-in-out,opacity .6s ease-in-out}
.ax-form form{width:100%;display:flex;flex-direction:column;gap:10px}
.ax-in{z-index:2}
.ax.up .ax-in{transform:translateX(100%);opacity:0}
.ax-up{opacity:0;z-index:1}
.ax.up .ax-up{transform:translateX(100%);opacity:1;z-index:5;animation:axShow .6s}
@keyframes axShow{0%,49.99%{opacity:0;z-index:1}50%,100%{opacity:1;z-index:5}}
.ax-logo{margin-bottom:10px}
.ax-logo .bolt{height:34px}.ax-logo .wordmark{font-size:19px}.ax-logo .ar{font-size:15px}
.ax-h{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:4px 0 0}
.ax-sub{color:var(--muted);font-size:13.5px;margin:0 0 8px}
.ax-form .field{padding:12px 14px;background:var(--soft);border-color:transparent}
.ax-form .field:focus{border-color:var(--primary)}
.ax-btn{margin-top:8px;padding:12px 18px;justify-content:center;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:12.5px;border-radius:10px}
.ax-form .auth-msg{margin-top:4px}
.ax-mob{display:none;font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px}
.ax-mob button{border:0;background:none;color:var(--info);font-weight:600;cursor:pointer;padding:0;font:inherit;font-weight:600}
.ax-over{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;z-index:100;border-radius:150px 0 0 100px;transition:transform .6s ease-in-out,border-radius .6s ease-in-out}
.ax.up .ax-over{transform:translateX(-100%);border-radius:0 150px 100px 0}
.ax-panel{position:relative;left:-100%;width:200%;height:100%;color:#fff;background:linear-gradient(to right,#1f5f88,#0b2c44);transition:transform .6s ease-in-out}
.ax.up .ax-panel{transform:translateX(50%)}
.ax-side{position:absolute;top:0;width:50%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 48px;transition:transform .6s ease-in-out}
.ax-side h2{font-size:30px;font-weight:700;margin:0 0 12px;color:#fff}
.ax-side p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 26px;max-width:290px}
.ax-left{transform:translateX(-200%)}
.ax.up .ax-left{transform:translateX(0)}
.ax-right{right:0}
.ax.up .ax-right{transform:translateX(200%)}
.ax-ghost{background:transparent;border:1.5px solid #fff;color:#fff;border-radius:10px;padding:11px 34px;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ax-ghost:hover,.ax-ghost:focus-visible{background:#f2c230;border-color:#f2c230;color:#1a1400;outline:none}
.ax-powered{font-size:13px;color:var(--muted);text-align:center}
.ax-powered strong{color:var(--text)}
@media (max-width:760px){
  .ax{min-height:0;border-radius:20px}
  .ax-over{display:none}
  .ax-form{position:static;width:100%;padding:30px 24px;transform:none!important;opacity:1!important;animation:none!important}
  .ax-up,.ax.up .ax-in{display:none}
  .ax.up .ax-up{display:flex}
  .ax-mob{display:block}
}
@media (prefers-reduced-motion:reduce){.ax-form,.ax-over,.ax-panel,.ax-side{transition:none}.ax.up .ax-up{animation:none}}

/* ---------- Lamp: pull the cord, the light comes on, then sign in appears ---------- */
.ax-page{--axbg:radial-gradient(ellipse at 30% 40%,#16273a 0%,#0a121b 70%);color-scheme:dark;transition:background .6s}
[data-theme="dark"] .ax-page{--axbg:radial-gradient(ellipse at 30% 40%,#16273a 0%,#0a121b 70%)}
.ax-page .ax-theme{color:#cfd8e0;border-color:#2a3a48;background:transparent}
.ax-page .ax-powered{color:#8796a3}.ax-page .ax-powered strong{color:#e9eef2}
.ax-page.lit{--axbg:radial-gradient(ellipse at 30% 40%,#2a3b4e 0%,#0d1822 70%)}
[data-theme="light"] .ax-page.lit{--axbg:radial-gradient(ellipse at 30% 40%,#fdf6df 0%,#d6e3ee 75%)}
[data-theme="light"] .ax-page.lit .ax-powered{color:var(--muted)}[data-theme="light"] .ax-page.lit .ax-powered strong{color:var(--text)}
[data-theme="light"] .ax-page.lit .ax-theme{color:var(--text);border-color:var(--line)}
[data-theme="light"] .ax-page.lit .lamp-hint{color:var(--muted)}
.ax-wrap{display:flex;align-items:center;justify-content:center;gap:28px;width:100%;max-width:1220px}
.lamp-col{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.lamp{border:0;background:none;padding:0;cursor:pointer;width:240px;touch-action:none;-webkit-tap-highlight-color:transparent}
.lamp:focus-visible{outline:2px solid #f2c230;outline-offset:6px;border-radius:16px}
.lamp svg{display:block;width:100%;height:auto;overflow:visible}
.lamp-hint{margin:0;font-size:13.5px;color:#9fb0bd;letter-spacing:.02em;min-height:1.4em;transition:color .4s}
.lp-stem{fill:#4a545d;transition:fill .5s}.lp-base{fill:#4a545d;transition:fill .5s}
.lp-shade{fill:#3a434b;transition:fill .5s}
.lp-rim{stroke:transparent;stroke-width:4;transition:stroke .5s}
.lp-sleep path{stroke:#c9d2da}
.lp-z{fill:#9fb0bd;font:700 15px Inter,system-ui,sans-serif;animation:lpZ 2.4s ease-in-out infinite}
.lp-z.z2{font-size:11px;animation-delay:.6s}
@keyframes lpZ{0%{opacity:0;transform:translate(0,6px)}40%{opacity:1}100%{opacity:0;transform:translate(6px,-8px)}}
.lp-happy{opacity:0;transition:opacity .35s}
.lp-happy path{stroke:#3b2a00}.lp-mouth{fill:#3b2a00;stroke:none!important}
.lp-blush{fill:#ff8a7a;opacity:.55}
.lp-cord line{stroke:#9aa5ae}.lp-cord circle{fill:#c9d2da}
.lp-cord{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.lamp.pulling .lp-cord{transition:none}
.lp-cone,.lp-floor{opacity:0;transition:opacity .45s}
.lp-body{transform-origin:110px 276px}
.lamp.flick .lp-body{animation:lpSway .7s ease-out}
@keyframes lpSway{0%{transform:rotate(0)}25%{transform:rotate(-3deg)}55%{transform:rotate(2deg)}80%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
.lamp:not([aria-pressed="true"]):hover .lp-cord{transform:translateY(4px)}
.lamp[aria-pressed="true"] .lp-shade{fill:url(#lpShadeOn)}
.lamp[aria-pressed="true"] .lp-rim{stroke:#fff3c4}
.lamp[aria-pressed="true"] .lp-stem,.lamp[aria-pressed="true"] .lp-base{fill:#f4f1e8}
.lamp[aria-pressed="true"] .lp-sleep{opacity:0}
.lamp[aria-pressed="true"] .lp-happy{opacity:1}
.lamp[aria-pressed="true"] .lp-cone,.lamp[aria-pressed="true"] .lp-floor{opacity:1}
.lamp[aria-pressed="true"] .lp-cord line{stroke:#fff3c4}.lamp[aria-pressed="true"] .lp-cord circle{fill:#fff}
.lamp[aria-pressed="true"] svg{filter:drop-shadow(0 0 28px rgba(242,194,48,.35))}
.lp-sleep{transition:opacity .3s}
/* The sign in card waits until the light is on. On wide screens the lamp sits centred, then slides left as the card comes in. */
.ax-page .ax{flex:none;opacity:0;transform:translateX(40px) scale(.97);visibility:hidden;pointer-events:none;transition:opacity .55s ease .2s,transform .7s cubic-bezier(.2,.8,.2,1) .15s,visibility 0s linear .8s}
.ax-page.lit .ax{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .55s ease .2s,transform .7s cubic-bezier(.2,.8,.2,1) .15s,visibility 0s}
.ax-page:not(.lit) .lamp-col{transform:translateX(454px)}
@keyframes axUp{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:1180px){
  .ax-wrap{flex-direction:column;gap:4px}
  .ax-page:not(.lit) .lamp-col{transform:none}
  .ax-page .ax{display:none;transition:none}
  .ax-page.lit .ax{display:block;animation:axUp .6s cubic-bezier(.2,.8,.2,1) .1s both}
  .lamp{width:220px}
  .ax-page.lit .lamp{width:140px}
  .ax-page.lit .lamp-hint{display:none}
}
@media (max-width:760px){.ax-page.lit .lamp{width:110px}.ax{width:100%}}
@media (prefers-reduced-motion:reduce){.lp-z{animation:none}.lamp.flick .lp-body{animation:none}.ax-page .ax,.lamp-col,.lp-cord{transition:none!important;animation:none!important}}