:root{
  --primary:#365CF5;
  --text:#5d657b;
  --bg:#f1f5f9;
  --radius:7px;
  --auth-max: 1200px;
  --auth-gutter: 24px;
}
html{scroll-behavior:smooth}
body.auth-page{
  font-family:"Plus Jakarta Sans",sans-serif;
  color:var(--text);
  margin:0;
}

/* Grid lite (enough for the split layout) */
.container-fluid{max-width:1200px;margin:0 auto;padding:0 24px}
.row{display:flex;flex-wrap:wrap;margin:0 -12px}
.col-lg-6{padding:0 12px;box-sizing:border-box;width:50%}
@media (max-width:991px){.col-lg-6{width:100%}}

/* Titles & type */
h1,h2,h3,h4,h5,h6{color:#1A2142;margin:0}
h2{font-size:28px;font-weight:600}
h6{font-size:16px;font-weight:600}
.text-sm{font-size:14px;line-height:22px}
.text-medium{font-weight:500}
.text-dark{color:#1A2142}
.text-primary{color:var(--primary)}
.text-gray{color:#5d657b}

/* Section layout (matches .signin-section look) */
.signin-section{padding:30px 0 60px}
.title-wrapper{margin-bottom:30px}
.pt-30{padding-top:30px}
.pt-4rm{padding-top:4rem}
.mb-10{margin-bottom:10px}
.mb-15{margin-bottom:15px}
.mb-20{margin-bottom:20px}
.mb-25{margin-bottom:25px}
.pt-40{padding-top:40px}
.pb-40{padding-bottom:40px}

/* Left illustration card */
.auth-cover-wrapper{
  background: rgba(54,92,245,.06);
  height:100%;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}
.auth-cover .title{margin-bottom:20px}
.auth-cover .cover-image img,
.auth-cover .shape-image img{max-width:100%}

/* Right form card */
.signin-wrapper{padding:20px}
.form-wrapper{
  background:#fff;
  box-shadow:0px 12px 24px -4px rgba(145,158,171,0.12), 0px 0px 2px rgba(145,158,171,0.2);
  border-radius:var(--radius);
  padding:30px;
  max-width:520px;
  margin:0 auto;
}

/* Inputs (matches .input-style-1) */
.input-style-1{margin-bottom:16px}
.input-style-1 label{display:block;margin-bottom:8px;font-weight:600}
.input-style-1 input{
  width:100%;
  padding:12px 14px;
  border:1px solid #DFE5EF;
  border-radius:3px;
  font-size:14px;
}
.input-style-1 input:focus{outline:none;box-shadow:none;border-color:#cbd6f9}

/* Checkbox row */
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.checkbox-style{display:flex;align-items:center;gap:8px}
.form-check-input{width:16px;height:16px}

/* Buttons (matches .main-btn + variants) */
.main-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 45px;border-radius:3px;font-size:14px;line-height:24px;
  border:1px solid transparent;cursor:pointer;transition:.2s ease-in-out;
}
.btn-hover{position:relative;overflow:hidden}
.btn-hover::after{
  content:"";position:absolute;inset:auto auto 50% 50%;width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,.05);transform:translate(-50%,-50%) scale(0);transition:.3s;
}
.btn-hover:hover::after{width:120%;height:120%;transform:translate(-50%,-50%) scale(1)}
.primary-btn{background:var(--primary);color:#fff}
.primary-btn:hover{filter:brightness(0.95)}
.primary-btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.primary-btn-outline:hover{background:var(--primary);color:#fff}
.danger-btn-outline{background:transparent;color:#d50100;border-color:#d50100}
.danger-btn-outline:hover{background:#d50100;color:#fff}
.w-100{width:100%}

/* Links */
a{color:inherit;text-decoration:none;transition:.15s}
a.hover-underline:hover{text-decoration:underline}

/* Dark theme adjustments (uses same class name as source) */
.darkTheme{color:#838C9A;}
.darkTheme h1, .darkTheme h2, .darkTheme h6, .darkTheme .text-dark{color:#fff}
.darkTheme .form-wrapper{background:#14142D;box-shadow:0 0 30px rgba(0,0,0,.2)}
.darkTheme .input-style-1 input{background:#0e0e1f !important;border-color:#3F4053 !important;color:#e8e8e8 !important;box-sizing:border-box !important;}
.darkTheme .text-gray{color:rgba(255,255,255,0.5)}

/* ===== Auth Form Wrapper ===== */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121212;
  padding: 20px;
}

.auth-container {
  background: #1c1c1c;
  padding: 30px;
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.auth-container h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

/* ===== Input Fields ===== */
.auth-form .form-group {
  margin-bottom: 20px;
}

.auth-form label {
  display: block;
  color: #ddd;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.auth-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #2a2a2a;
  color: #fff;
  font-size: 0.95rem;
}

.auth-form input:focus {
  outline: none;
  border-color: #4dabf7;
}

/* ===== Submit Button ===== */
.auth-form button {
  width: 100%;
  background: #4dabf7;
  color: #fff;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s;
}

.auth-form button:hover {
  background: #339af0;
}

/* ===== Links ===== */
.auth-links {
  margin-top: 15px;
  text-align: center;
}

.auth-links a {
  color: #4dabf7;
  text-decoration: none;
  font-size: 0.9rem;
}

.auth-links a:hover {
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
  .auth-container {
    padding: 20px;
  }
  .auth-container h2 {
    font-size: 1.5rem;
  }
}

/* =========================
   Auth Card (two-pane layout)
   ========================= */
.signin-section {
  padding-left: var(--auth-gutter);
  padding-right: var(--auth-gutter);
  padding-top: 0;
  padding-bottom: 24px;
}

/* The unified card */
.auth-card {
  max-width: var(--auth-max);
  width: 100%;
  margin: 24px auto;
  background: #14142d;
  border-radius: 6px;
  box-shadow: 0 12px 24px -6px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.25);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  overflow: hidden;
}

/* LEFT pane */
.auth-card__left {
  background: rgba(54, 92, 245, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.auth-left-inner {
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.auth-title {
  margin: 0 0 8px 0;
  color: #365CF5 !important;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .2px;
}

.auth-subtitle {
  margin: 0 0 28px 0;
  color: rgba(255,255,255,.65);
  font-size: 14px;
}

.auth-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-illustration img {
  /* Keep artwork inside the card and vertically balanced */
  max-width: 100%;
  height: 360px;
  object-fit: contain;
}

/* RIGHT pane */
.auth-card__right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  background: #121228; /* a touch darker to separate from left bg */
}

.auth-right-inner {
  width: 100%;
  max-width: 640px;     /* controls right-side content width so inputs never touch edges */
}

/* Form bits - rely on your existing tokens/classes but tighten spacing */
.input-style-1 { margin-bottom: 18px; }
.input-style-1 label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
}
.input-style-1 input {
  width: 100%;
  border: 1px solid #2b2d43;
  border-radius: 6px;
  background: #0e0f22;
  color: #e8e8e8;
  font-size: 14px;
}
.input-style-1 input:focus {
  outline: none;
  border-color: #365cf5;
  box-shadow: 0 0 0 3px rgba(54,92,245,.18);
}

.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.checkbox-style { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); }
.form-check-input { width: 16px; height: 16px; accent-color: #365cf5; }

/* Button (uses your existing button styles; just ensure full width here) */
.main-btn.w-100 { width: 100%; }

/* Link color to match the source */
.link-primary,
.auth-right-inner a.link-primary {
  color: #6ea8ff;
}
.link-primary:hover { text-decoration: underline; }

/* Bottom note spacing */
.auth-bottom-note { margin-top: 20px; }

/* Footer text tone consistency inside dark card */
.darkTheme .text-dark { color: rgba(255,255,255,.9); }

/* ==============
   Responsive
   ============== */
@media (max-width: 1024px) {
  .auth-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .auth-card__left, .auth-card__right {
    padding: 28px 22px;
  }
  .auth-illustration img { height: 260px; }
  .auth-right-inner { max-width: 560px; }
}

.page-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 500 !important;
  margin: 0;
}

.page-title-container{
  max-width: var(--auth-max);
  margin: 0 auto;
  padding-left: var(--auth-gutter);
  padding-right: var(--auth-gutter);
}