/* ============================================================
   authx.css — Sign up, Log in, Welcome, Reset password (2026-11-05)
   Redesign from canvas CyJSDWXhCGtUuNk7KKx2ZN (Ren "go go").
   Phone first: one column, max 440px wide, centred on desktop.
   Same tones as the Home pastel theme and the ccDialog pop-ups.
   ============================================================ */
:root{
  --ax-bg:#F4F6F4; --ax-card:#FFFFFF; --ax-ink:#17201A; --ax-ink2:#3E4C42;
  --ax-mute:#4B5B50; --ax-mute2:#5B6B5F; --ax-line:#D5DDD7; --ax-line2:#E3E8E4;
  --ax-green:#1E7A33; --ax-green-d:#145522; --ax-green-bg:#E5F5E8;
  --ax-blue:#1F6FD1; --ax-blue-bg:#E6F0FC;
  --ax-amber:#A65A0A; --ax-amber-bg:#FDF0E1;
  --ax-red:#9E2346; --ax-red-bg:#FDE8EE;
  --ax-soft:#EEF1EE;
}
body.dark-mode{
  --ax-bg:#0C1410; --ax-card:#16201A; --ax-ink:#EEF3F0; --ax-ink2:#C9D4CD;
  --ax-mute:#A9B6AE; --ax-mute2:#94A39A; --ax-line:#2C3A31; --ax-line2:#243028;
  --ax-green:#2EA84A; --ax-green-d:#4ADE80; --ax-green-bg:#173322;
  --ax-blue:#7FB0F0; --ax-blue-bg:#16263A;
  --ax-amber:#F0B36A; --ax-amber-bg:#33240F;
  --ax-red:#F59AB2; --ax-red-bg:#3A1823;
  --ax-soft:#223027;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.ax{
  min-height:100vh;min-height:100dvh;background:var(--ax-bg);color:var(--ax-ink);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.ax a{color:var(--ax-green)}
.ax-page{
  max-width:440px;margin:0 auto;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;padding:0 20px;
}
.ax-top{display:flex;align-items:center;justify-content:space-between;padding:18px 0 0}
.ax-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ax-ink)}
.ax-brand svg{width:32px;height:32px;flex:none}
.ax-toplink{font-size:15px;font-weight:600;text-decoration:none;padding:12px 4px;min-height:44px;display:inline-flex;align-items:center}

.ax-head{padding:34px 0 0;display:flex;flex-direction:column;gap:6px}
.ax-h1{margin:0;font-family:Outfit,Inter,sans-serif;font-size:32px;font-weight:800;letter-spacing:-.6px;line-height:1.1}
.ax-sub{margin:0;font-size:15px;color:var(--ax-mute);line-height:1.45}
.ax-sub strong{color:var(--ax-ink)}

.ax-form{padding:26px 0 0;display:flex;flex-direction:column;gap:16px}
.ax-google{
  height:56px;border-radius:16px;border:1px solid var(--ax-line);background:var(--ax-card);
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  font:600 16px Inter,sans-serif;color:var(--ax-ink);cursor:pointer;
}
.ax-google svg{width:22px;height:22px;flex:none}
.ax-google:disabled{opacity:.7;cursor:default}
.ax-or{display:flex;align-items:center;gap:12px;color:var(--ax-mute2);font-size:13px}
.ax-or::before,.ax-or::after{content:"";flex:1;height:1px;background:var(--ax-line2)}

.ax-field{display:flex;flex-direction:column;gap:6px}
.ax-lblrow{display:flex;justify-content:space-between;align-items:baseline}
.ax-lbl{font-size:13px;font-weight:600;color:var(--ax-ink2)}
.ax-inp{
  display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;
  background:var(--ax-card);border:1px solid var(--ax-line);border-radius:14px;color:var(--ax-mute2);
}
.ax-inp:focus-within{border-color:var(--ax-green);box-shadow:0 0 0 3px var(--ax-green-bg)}
.ax-inp input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:16px Inter,sans-serif;color:var(--ax-ink)}
.ax-inp input::placeholder{color:var(--ax-mute2);opacity:1}
.ax-field.error .ax-inp{border-color:#C22F56;box-shadow:0 0 0 3px var(--ax-red-bg)}
.ax-ferr{display:none;margin:0;font-size:13px;color:var(--ax-red);font-weight:500}
.ax-field.error .ax-ferr{display:block}
.ax-ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ax-eye{width:44px;height:44px;margin-right:-10px;border:none;background:none;color:var(--ax-mute2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ax-eye svg{width:20px;height:20px}

.ax-check{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--ax-ink2);line-height:1.45;min-height:44px;padding-top:2px;cursor:pointer}
.ax-check input{width:22px;height:22px;margin:0;accent-color:var(--ax-green);flex:none}
.ax-check.error span{color:var(--ax-red)}
.ax-link{font-weight:600;text-decoration:none}

.ax-btn{
  height:56px;border-radius:16px;border:none;background:var(--ax-green);color:#fff;width:100%;
  font:700 17px Inter,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;
}
body.dark-mode .ax-btn{background:#1F8A3A}
.ax-btn:disabled{opacity:.7;cursor:default}
.ax-btn2{
  height:52px;border-radius:16px;border:1px solid var(--ax-line);background:var(--ax-card);color:var(--ax-ink);width:100%;
  font:600 16px Inter,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;
}
.ax-btn2:disabled{opacity:.6;cursor:default}

.ax-msg{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.4}
.ax-msg svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ax-msg.err{background:var(--ax-red-bg);color:var(--ax-red)}
.ax-msg.ok{background:var(--ax-green-bg);color:var(--ax-green-d)}
body:not(.dark-mode) .ax-msg.ok{color:#1F4D2A}
.ax-msg.warn{background:var(--ax-amber-bg);color:var(--ax-amber)}
.ax-msg.info{background:var(--ax-blue-bg);color:var(--ax-blue)}
.ax-msg[hidden]{display:none}

.ax-grow{flex:1;min-height:24px}
.ax-foot{margin:0;padding:0 0 26px;text-align:center;font-size:15px;color:var(--ax-mute)}

/* Centre screens (Check inbox, link results) */
.ax-center{padding:56px 4px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ax-tile{width:84px;height:84px;border-radius:26px;display:flex;align-items:center;justify-content:center}
.ax-tile svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ax-tile.blue{background:var(--ax-blue-bg);color:var(--ax-blue)}
.ax-tile.green{background:var(--ax-green-bg);color:var(--ax-green)}
.ax-tile.red{background:var(--ax-red-bg);color:var(--ax-red)}
.ax-h2{margin:8px 0 0;font-family:Outfit,Inter,sans-serif;font-size:30px;font-weight:800;letter-spacing:-.5px}
.ax-steps{margin:28px 0 0;padding:16px;border-radius:16px;background:var(--ax-card);border:1px solid var(--ax-line2);display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--ax-ink2);line-height:1.45;text-align:left}
.ax-steps div{display:flex;gap:12px}
.ax-steps b{width:26px;height:26px;border-radius:13px;background:var(--ax-green-bg);color:var(--ax-green);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.ax-actions{padding:24px 0 0;display:flex;flex-direction:column;gap:12px}
.ax-small{margin:0;text-align:center;font-size:13px;color:var(--ax-mute2);min-height:18px}

/* Password rules (reset page) */
.ax-rules{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ax-mute2)}
.ax-rules span{display:flex;align-items:center;gap:8px}
.ax-rules span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ax-rules span.ok{color:var(--ax-green)}

/* Welcome choices */
.ax-pill{align-self:flex-start;padding:6px 12px;border-radius:14px;background:var(--ax-green-bg);color:var(--ax-green);font-size:13px;font-weight:700}
.ax-choices{padding:28px 0 0;display:flex;flex-direction:column;gap:12px}
.ax-choice{display:flex;align-items:center;gap:14px;padding:18px 16px;border-radius:18px;background:var(--ax-card);border:1px solid var(--ax-line2);text-decoration:none;color:var(--ax-ink);width:100%;text-align:left;font:inherit;cursor:pointer}
.ax-choice .t{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none}
.ax-choice .t svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ax-choice .c{flex:1;display:flex;flex-direction:column;gap:3px}
.ax-choice .c b{font-size:17px}
.ax-choice .c span{font-size:14px;color:var(--ax-mute);line-height:1.4}
.ax-choice > svg{width:20px;height:20px;color:var(--ax-mute2);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Bottom sheet (Forgot password) */
.ax-sheet-bg{position:fixed;inset:0;background:rgba(15,25,18,.45);z-index:1000;display:none;align-items:flex-end;justify-content:center}
.ax-sheet-bg.show{display:flex}
.ax-sheet{width:100%;max-width:440px;background:var(--ax-card);border-radius:26px 26px 0 0;padding:10px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;animation:axUp .2s ease-out}
@media (min-width:600px){.ax-sheet-bg{align-items:center}.ax-sheet{border-radius:26px}}
@keyframes axUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.ax-grab{align-self:center;width:40px;height:5px;border-radius:3px;background:var(--ax-line)}
.ax-sheet-head{display:flex;align-items:center;gap:14px}
.ax-sheet-head .t{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none}
.ax-sheet-head .t svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ax-sheet h2{margin:0;font-size:20px;font-weight:800}
.ax-sheet p{margin:0}
.ax-row{display:flex;gap:10px}
.ax-row .ax-btn,.ax-row .ax-gray{height:52px;border-radius:14px;font-size:16px}
.ax-gray{flex:1;border:none;background:var(--ax-soft);color:var(--ax-ink);font:600 16px Inter,sans-serif;cursor:pointer}
.ax-row .ax-btn{flex:1.4}

/* Spinner (link check) */
.ax-spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--ax-line);border-top-color:var(--ax-green);animation:axSpin .8s linear infinite}
@keyframes axSpin{to{transform:rotate(360deg)}}
[hidden]{display:none !important}
/* Link-buttons keep their own colours over the page link colour. */
.ax a.ax-btn{color:#fff}
.ax a.ax-btn2{color:var(--ax-ink)}