:root{
  --green-900:#063d1b;
  --green-800:#075322;
  --green-700:#0b6a2b;
  --green-600:#11863a;
  --green-500:#1b9e49;
  --ink:#101722;
  --muted:#667085;
  --line:#dce3df;
  --card:#ffffffee;
  --danger:#b42318;
  --danger-bg:#fef3f2;
  --warn:#8a5a00;
  --warn-bg:#fff8e6;
  --swap-dur:620ms;
  --swap-ease:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#edf2ef;
}
.page{
  min-height:100%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 23% 26%, rgba(28,158,73,.08), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f9fbfa 56%,#e6eee9 100%);
}
.page::after{
  content:"";position:absolute;left:0;right:0;bottom:-9%;height:43%;z-index:0;
  background:
    linear-gradient(to top,rgba(4,48,23,.25),transparent 70%),
    radial-gradient(ellipse at 22% 100%,#315e43 0 16%,transparent 17%),
    radial-gradient(ellipse at 48% 105%,#406b50 0 20%,transparent 21%),
    radial-gradient(ellipse at 74% 103%,#294f3a 0 23%,transparent 24%),
    radial-gradient(ellipse at 99% 100%,#487158 0 19%,transparent 20%);
  filter:blur(2px);
}

/* Shell is now flex so the two panels can trade sides via row-reverse.
   Flex ratios reproduce the original 1.2fr / .8fr grid. */
.shell{
  position:relative;z-index:1;min-height:100vh;
  display:flex;align-items:center;
  gap:48px;padding:38px 5vw 34px;
}
.shell.swapped{flex-direction:row-reverse}
.visual{flex:1.2 1 0;align-self:stretch;position:relative;min-height:100px;min-width:0}
.auth-panel{flex:.8 1 0;min-width:420px;display:flex;justify-content:flex-end}
.shell.swapped .auth-panel{justify-content:flex-start}

.brand{width:min(620px,50%);display:block;object-fit:contain;margin-bottom:24px}
.title-wrap{position:relative;z-index:3;margin-top:16px}
h1{font-size:clamp(64px,7vw,116px);line-height:.9;letter-spacing:.03em;margin:0;color:var(--green-900);font-weight:900}
.rule{width:min(500px,72%);height:3px;background:linear-gradient(90deg,var(--green-700),var(--green-500));margin:18px 0 12px;position:relative}
.rule::after{content:"";position:absolute;right:-1px;top:-4px;width:11px;height:11px;background:var(--green-700);border-radius:50%}
.subtitle{font-size:clamp(16px,1.25vw,24px);font-weight:700;letter-spacing:.08em;color:var(--green-900)}
.rings{position:absolute;left:4%;top:13%;width:64%;aspect-ratio:1;border:1px solid rgba(11,106,43,.14);border-radius:50%;box-shadow:0 0 0 55px rgba(11,106,43,.035),0 0 0 110px rgba(11,106,43,.025)}
.drone-one{position:absolute;z-index:2;width:min(54%,570px);left:38%;top:28%;filter:drop-shadow(0 18px 18px rgba(25,45,34,.16));mix-blend-mode:multiply}
.drone-two{position:absolute;z-index:2;width:min(66%,700px);left:18%;bottom:7%;filter:hue-rotate(55deg) saturate(1.15) brightness(.78) drop-shadow(0 20px 18px rgba(13,61,29,.22));mix-blend-mode:multiply}

.auth-card{
  width:min(100%,590px);background:var(--card);border:1px solid rgba(255,255,255,.9);
  border-radius:38px;padding:54px 48px 42px;box-shadow:0 30px 80px rgba(24,53,36,.16);backdrop-filter:blur(12px);
  transition:opacity .18s ease;
}
.auth-card[hidden]{display:none}
/* Single card: only the active view (sign in OR register) shows. */
.auth-view[hidden]{display:none}
.auth-view{animation:viewfade .18s ease}
@keyframes viewfade{from{opacity:.35}to{opacity:1}}
.muted-note{color:var(--muted);font-weight:400}
#registerPanel h2{font-size:36px}
#registerPanel .lead{font-size:17px;margin-bottom:24px}
#registerPanel .field{margin-bottom:16px}
.auth-card.signup{padding:44px 48px 36px}
.mini-logo{width:92px;height:92px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:#fff;box-shadow:0 10px 28px rgba(16,24,40,.12);overflow:hidden;padding:12px}
.mini-logo img{width:100%;height:100%;object-fit:contain;display:block}
.mini-logo span{font-size:36px;filter:grayscale(1) sepia(1) saturate(6) hue-rotate(80deg)}
h2{font-size:42px;text-align:center;margin:0 0 6px;letter-spacing:-.03em}
.auth-card.signup h2{font-size:36px}
.lead{text-align:center;color:var(--muted);font-size:19px;margin:0 0 38px}
.auth-card.signup .lead{font-size:17px;margin-bottom:26px}
label{display:block;font-size:15px;font-weight:700;margin:0 0 10px}
.field{position:relative;margin-bottom:22px}
.auth-card.signup .field{margin-bottom:16px}
.field input,.field textarea,.field select{
  width:100%;height:66px;border:1px solid #ccd5d0;border-radius:13px;padding:0 52px 0 54px;
  font-size:17px;outline:none;background:#fff;transition:.2s;font-family:inherit;color:var(--ink);
}
.auth-card.signup .field input,.auth-card.signup .field select{height:58px;font-size:16px}
.field textarea{height:88px;padding:18px 18px 18px 54px;resize:vertical;line-height:1.45}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green-600);box-shadow:0 0 0 4px rgba(17,134,58,.12)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row .field{margin-bottom:16px}
.icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:22px;color:#667085;pointer-events:none}
.field textarea~.icon{top:30px;transform:none}
.toggle{position:absolute;right:16px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:21px;cursor:pointer;color:#52606d}
.hint{font-size:13px;color:var(--muted);margin:-6px 0 14px}
.meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 28px;color:#5f6b75}
.remember{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:400}
.remember input{accent-color:var(--green-700);width:19px;height:19px}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
.submit{width:100%;height:66px;border:0;border-radius:14px;background:linear-gradient(90deg,var(--green-600),var(--green-800));color:white;font-size:19px;font-weight:800;cursor:pointer;box-shadow:0 12px 24px rgba(11,106,43,.23);display:flex;align-items:center;justify-content:center;gap:12px}
.auth-card.signup .submit{height:60px;font-size:18px}
.submit:hover{filter:brightness(1.05)}
.submit:disabled{opacity:.62;cursor:not-allowed;filter:none}
.spinner{width:19px;height:19px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:none;animation:spin .7s linear infinite}
.submit.busy .spinner{display:block}
.submit.busy .arrow{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.divider{display:flex;align-items:center;gap:20px;color:#8a949e;margin:28px 0}
.divider::before,.divider::after{content:"";height:1px;background:#dbe2de;flex:1}
.auth-card.signup .divider{margin:20px 0}
.create{text-align:center;font-size:16px}
.create button{border:0;background:transparent;color:var(--green-700);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:none}
.create button:hover{text-decoration:underline}
.property{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);color:white;letter-spacing:.24em;font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.65);white-space:nowrap}

.notice{display:none;margin-top:18px;padding:13px 15px;border-radius:10px;font-weight:650;text-align:center;font-size:15px;line-height:1.45}
.notice.show{display:block}
.notice.ok{background:#e9f7ee;color:var(--green-900)}
.notice.err{background:var(--danger-bg);color:var(--danger)}
.notice.pending{background:var(--warn-bg);color:var(--warn)}

/* ---------- social providers ---------- */
.providers{display:flex;gap:12px;margin:4px 0 2px}
.provider-btn{
  flex:1 1 0;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:56px;border:1px solid #d3dbd6;border-radius:13px;background:#fff;
  font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;transition:.18s;
}
.provider-btn:hover{border-color:var(--green-600);box-shadow:0 6px 18px rgba(11,106,43,.10);transform:translateY(-1px)}
.provider-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.provider-btn svg{width:22px;height:22px;flex:0 0 auto}
.provider-btn.github{background:#111722;color:#fff;border-color:#111722}
.provider-btn.github:hover{background:#1c2432}

@media (max-width:1050px){
  .shell{flex-direction:column;padding:28px 24px 80px}
  .shell.swapped{flex-direction:column}
  .visual{min-height:620px;width:100%}
  .auth-panel{min-width:0;width:100%;justify-content:center}
  .shell.swapped .auth-panel{justify-content:center}
  .auth-card{width:min(100%,620px)}
  .property{color:var(--green-900);text-shadow:none;bottom:24px}
}
@media (max-width:640px){
  .shell{padding:22px 14px 72px;gap:18px}
  .visual{min-height:520px}
  .brand{width:100%;margin-bottom:14px}
  h1{font-size:54px}
  .subtitle{font-size:14px}
  .drone-one{width:62%;left:33%;top:34%}
  .drone-two{width:84%;left:8%;bottom:5%}
  .auth-card{padding:38px 22px 30px;border-radius:28px}
  .auth-card.signup{padding:32px 20px 26px}
  h2{font-size:34px}
  .auth-card.signup h2{font-size:29px}
  .field-row{grid-template-columns:1fr;gap:0}
  .property{font-size:10px;letter-spacing:.13em;width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .auth-card{transition:none}
}