/* ─── Hard reset: kill browser defaults + any app-wrapper padding ── */
html{box-sizing:border-box;overflow-x:hidden}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0 !important;padding:0 !important;overflow-x:hidden}
body{background:var(--surface-0,#fff)}
.app-public,.app-public .app-main{
  padding:0 !important;margin:0 !important;
  max-width:100% !important;overflow-x:hidden !important
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP — split layout
═══════════════════════════════════════════════════════════ */
.reg-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
  background:var(--surface-0);
  overflow-x:hidden
}

/* Left: navy brand panel */
.reg-brand-panel{
  background:linear-gradient(145deg,#0d1b35 0%,#0f2554 60%,#162d6b 100%);
  display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;
  padding:64px 56px;position:relative;overflow:hidden
}
.reg-brand-panel::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none
}
.reg-brand-panel::after{
  content:'';position:absolute;bottom:-80px;right:-80px;
  width:320px;height:320px;border-radius:50%;
  background:rgba(37,99,235,0.10);pointer-events:none
}
.reg-brand-logo{width:44px;height:44px;border-radius:var(--r-lg);margin-bottom:32px}
.reg-brand-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.reg-brand-tagline{font-size:10px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:0.12em;color:rgba(147,197,253,0.8);margin-bottom:0}
.reg-brand-beta{font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(37,99,235,0.15);border:1px solid rgba(37,99,235,0.3);color:rgba(147,197,253,0.85);line-height:1.6;flex-shrink:0}
.reg-brand-heading{font-size:34px;font-weight:var(--fw-bold);color:#fff;line-height:1.18;letter-spacing:-0.02em;margin:0 0 18px}
.reg-brand-sub{font-size:var(--fs-md);color:rgba(255,255,255,0.50);line-height:var(--lh-loose);max-width:340px;margin:0}
.reg-brand-features{margin-top:36px;display:flex;flex-direction:column;gap:12px}
.reg-brand-feature{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:rgba(255,255,255,0.55)}
.reg-brand-feature-icon{width:26px;height:26px;border-radius:var(--r-md);background:rgba(37,99,235,0.18);display:flex;align-items:center;justify-content:center;font-size:12px;color:#93c5fd;flex-shrink:0}
.reg-brand-disclaimer{position:absolute;bottom:28px;left:56px;right:56px;font-size:11px;color:rgba(255,255,255,0.22);line-height:1.5;margin:0}

/* Right: form panel */
.reg-form-panel{
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  background:var(--surface-0);
  padding:48px 40px;
  min-height:100vh
}
[data-theme="dark"] .reg-form-panel{background:var(--surface-1)}

/* Form area */
.reg-form-area{width:100%;max-width:440px}

/* Card & elements */
.reg-card{width:100%;background:var(--surface-0)}
.reg-card-header{margin-bottom:28px;text-align:left}
.reg-eyebrow{font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:0.08em;color:var(--brand-600);margin:0 0 8px}
.reg-title{font-size:26px;font-weight:var(--fw-bold);color:var(--text-primary);letter-spacing:-0.02em;margin:0 0 6px;line-height:1.2}
.reg-subtitle{font-size:var(--fs-sm);color:var(--text-tertiary);margin:0}
.reg-card-body{}
.reg-form{display:flex;flex-direction:column;gap:0}
.reg-field{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.reg-field:last-child{margin-bottom:0}
.reg-label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-secondary)}
.reg-input{
  width:100%;padding:10px 14px;
  border:1px solid var(--border-default);border-radius:var(--r-lg);
  font-family:var(--font-sans);font-size:var(--fs-md);
  color:var(--text-primary);background:var(--surface-0);
  outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
  box-sizing:border-box
}
.reg-input:focus{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.reg-input::placeholder{color:var(--text-muted)}
[data-theme="dark"] .reg-input{background:var(--surface-2);border-color:var(--border-default);color:var(--text-primary)}
.reg-input-wrap{position:relative;display:flex;align-items:center}
.reg-input-wrap .reg-input{padding-right:42px}
.reg-eye{position:absolute;right:12px;background:none;border:none;cursor:pointer;color:var(--text-muted);padding:0;font-size:14px;display:flex;align-items:center;transition:color var(--t-fast)}
.reg-eye:hover{color:var(--text-secondary)}
.reg-input--error{border-color:var(--danger-text)}
.reg-error{font-size:12px;color:var(--danger-text)}
.reg-hint{font-size:12px;color:var(--text-muted);margin:3px 0 0;line-height:1.5}
.reg-captcha{margin:8px 0 4px;display:flex;flex-direction:column;gap:6px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.reg-submit{
  width:100%;padding:12px 20px;
  background:var(--brand-600);color:#fff;border:none;border-radius:var(--r-lg);
  font-family:var(--font-sans);font-size:var(--fs-md);font-weight:var(--fw-semibold);
  cursor:pointer;
  transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
  box-shadow:0 4px 12px rgba(37,99,235,0.25);
  margin-top:20px
}
.reg-submit:hover{background:var(--brand-700);box-shadow:0 6px 16px rgba(37,99,235,0.30)}
.reg-submit:active{transform:scale(0.99)}
.reg-footer-text{text-align:center;font-size:var(--fs-sm);color:var(--text-muted);margin:16px 0 0}
.reg-footer-text a{color:var(--brand-600);text-decoration:none;font-weight:var(--fw-semibold)}
.reg-footer-text a:hover{color:var(--brand-700);text-decoration:underline}
.reg-legal{font-size:11px;color:var(--text-muted);text-align:center;line-height:1.6;margin:12px 0 0}
.reg-security{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;padding-top:18px;border-top:1px solid var(--border-subtle)}
.reg-security-badge{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-muted)}
.reg-security-badge i{color:var(--success-solid);font-size:11px}
.reg-flash{padding:12px 16px;font-size:var(--fs-sm);font-weight:var(--fw-medium);border-left:3px solid transparent;margin-bottom:16px;border-radius:var(--r-sm)}
.reg-flash--error{background:rgba(239,68,68,0.08);border-color:var(--danger-text);color:var(--danger-text)}
.reg-flash--success{background:rgba(34,197,94,0.08);border-color:#22c55e;color:#22c55e}

/* ─── Auth nav: desktop hidden ──────────────────────────── */
.auth-nav{display:none}

/* ═══════════════════════════════════════════════════════════
   MOBILE  ≤768px
═══════════════════════════════════════════════════════════ */
@media (max-width:768px){

  /* Container: stack vertically, clip all overflow */
  .reg-container{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow:hidden
  }
  .reg-brand-panel{display:none}

  /* Form panel fills remaining space after nav */
  .reg-form-panel{
    flex:1;
    display:flex;flex-direction:column;
    justify-content:flex-start;align-items:stretch;
    padding:0;
    min-height:0;
    overflow:hidden
  }

  /* ── Nav ── */
  .auth-nav{
    display:block;
    background:linear-gradient(135deg,#0d1b35,#0f2554);
    flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,0.07)
  }
  .auth-nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:52px;padding:0 16px
  }
  .auth-nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff}
  .auth-nav-logo{width:26px;height:26px;border-radius:6px;flex-shrink:0}
  .auth-nav-name{font-size:15px;font-weight:700;letter-spacing:-0.3px}
  .auth-nav-beta{
    font-size:8px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
    padding:2px 6px;border-radius:999px;
    background:rgba(37,99,235,0.2);border:1px solid rgba(37,99,235,0.4);
    color:rgba(147,197,253,0.9);line-height:1.6;flex-shrink:0
  }
  .auth-nav-hamburger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
    width:34px;height:34px;
    background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);
    border-radius:6px;cursor:pointer;padding:0;flex-shrink:0
  }
  .auth-nav-hamburger span{
    display:block;width:14px;height:1.5px;
    background:rgba(255,255,255,0.75);border-radius:2px;transition:all 0.2s
  }
  .auth-nav-hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .auth-nav-hamburger.open span:nth-child(2){opacity:0}
  .auth-nav-hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* ── Drawer ── */
  .auth-nav-drawer{
    display:none;flex-direction:column;
    background:#091424;
    border-top:1px solid rgba(255,255,255,0.04);
    padding:8px 16px 16px
  }
  .auth-nav-drawer.open{display:flex}
  .auth-drawer-link{
    font-size:14px;font-weight:500;color:rgba(255,255,255,0.6);
    text-decoration:none;padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);transition:color 0.15s
  }
  .auth-drawer-link:last-of-type{border-bottom:none}
  .auth-drawer-link:hover{color:#fff}
  .auth-drawer-actions{display:flex;gap:8px;margin-top:12px}
  .auth-drawer-signin,.auth-drawer-signup{
    flex:1;text-align:center;padding:9px 12px;border-radius:6px;
    font-size:13px;font-weight:600;text-decoration:none;transition:all 0.15s
  }
  .auth-drawer-signin{
    color:rgba(255,255,255,0.7);
    border:1px solid rgba(255,255,255,0.14)
  }
  .auth-drawer-signin:hover,.auth-drawer-signin.auth-drawer-btn--active{
    background:rgba(255,255,255,0.08);color:#fff
  }
  .auth-drawer-signup{background:#2563eb;color:#fff;border:1px solid transparent}
  .auth-drawer-signup:hover,.auth-drawer-signup.auth-drawer-btn--active{background:#1d4ed8}

  /* ── Form scroll area ── */
  .reg-form-area{
    flex:1;
    width:100%;
    max-width:100%;
    padding:24px 16px 40px;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch
  }

  /* ── Typography ── */
  .reg-title{font-size:20px}
  .reg-subtitle{font-size:13px}

  /* ── Inputs: 16px PREVENTS iOS Safari from zooming on focus ── */
  .reg-input{font-size:16px;padding:11px 12px;border-radius:10px}

  /* ── reCAPTCHA: scroll horizontally within its box ── */
  .reg-captcha{
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    margin:8px -2px 4px;padding:2px
  }

  /* ── Security badges ── */
  .reg-security{flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:14px}

  /* ── Submit button ── */
  .reg-submit{font-size:15px;padding:13px}
}

/* Very small phones */
@media (max-width:360px){
  .auth-nav-inner{height:48px}
  .reg-form-area{padding:20px 14px 36px}
}