/* =========================
     KLMIS Auth Page (scoped)
  ========================== */
  .klmis-auth-wrap{
    position: relative;
    padding: 64px 0;
    background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(220,53,69,.05) 55%, rgba(255,255,255,1));
    overflow: hidden;
  }
  .klmis-auth-wrap:before{
    content:"";
    position:absolute;
    inset:-140px -80px auto -80px;
    height: 300px;
    background:
      radial-gradient(circle at 18% 40%, rgba(13,110,253,.22), transparent 55%),
      radial-gradient(circle at 75% 25%, rgba(220,53,69,.16), transparent 50%);
    filter: blur(2px);
    pointer-events:none;
  }

  .klmis-auth-card{
    position: relative;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,.10);
    overflow: hidden;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(6px);
  }
  .klmis-auth-card .card-header{
    border: 0;
    padding: 18px 18px 12px;
    background: linear-gradient(90deg, rgba(13,110,253,.10), rgba(220,53,69,.08));
  }
  .klmis-auth-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.35rem .65rem;
    border-radius:999px;
    font-size:.82rem;
    background: rgba(220,53,69,.12);
    color: #b02a37;
    border: 1px solid rgba(220,53,69,.18);
  }
  .klmis-auth-title{
    margin: 10px 0 2px;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1.6rem;
    color:#0b2239;
  }
  .klmis-auth-sub{
    margin: 0;
    color: rgba(11,34,57,.72);
    font-size: .95rem;
  }

  .klmis-auth-body{ padding: 18px; }

  /* =========================
     Fix Allauth fields layout
     (works across common renderers)
  ========================== */

  /* 1) Space between field blocks */
  .klmis-auth-body form > * { max-width: 100%; }
  .klmis-auth-body .field,
  .klmis-auth-body .form-group,
  .klmis-auth-body .control-group,
  .klmis-auth-body p,
  .klmis-auth-body .row{
    margin-bottom: 12px;
  }

  /* 2) Labels look consistent */
  .klmis-auth-body label{
    display: inline-block;
    font-weight: 800;
    font-size: .92rem;
    color: rgba(11,34,57,.80);
    margin-bottom: .35rem;
  }

  /* 3) Inputs look premium */
  .klmis-auth-body input[type="text"],
  .klmis-auth-body input[type="email"],
  .klmis-auth-body input[type="password"],
  .klmis-auth-body input[type="tel"],
  .klmis-auth-body input[type="number"],
  .klmis-auth-body select,
  .klmis-auth-body textarea{
    width: 100%;
    border-radius: 14px !important;
    border: 1px solid rgba(11,34,57,.16) !important;
    padding: .78rem .95rem !important;
    background: rgba(255,255,255,.96) !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
    box-shadow: 0 8px 22px rgba(0,0,0,.04);
  }
  .klmis-auth-body input:focus,
  .klmis-auth-body select:focus,
  .klmis-auth-body textarea:focus{
    border-color: rgba(13,110,253,.55) !important;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.12) !important;
    outline: none !important;
  }

  /* 4) If allauth outputs "required" star or suffix */
  .klmis-auth-body label span,
  .klmis-auth-body label small{
    font-weight: 700;
    color: rgba(220,53,69,.95);
  }

  /* 5) Help text */
  .klmis-auth-body .helptext,
  .klmis-auth-body .form-text,
  .klmis-auth-body small{
    display: block;
    margin-top: .35rem;
    font-size: .86rem;
    color: rgba(11,34,57,.62);
  }

  /* 6) Error lists look clean */
  .klmis-auth-body ul.errorlist{
    list-style: none;
    padding: 0;
    margin: .45rem 0 .15rem;
  }
  .klmis-auth-body ul.errorlist li{
    padding: .55rem .75rem;
    border-radius: 12px;
    background: rgba(220,53,69,.10);
    border: 1px solid rgba(220,53,69,.18);
    color: #b02a37;
    font-weight: 700;
    font-size: .88rem;
  }

  /* 7) Highlight invalid inputs (common Django class or aria) */
  .klmis-auth-body input.is-invalid,
  .klmis-auth-body select.is-invalid,
  .klmis-auth-body textarea.is-invalid,
  .klmis-auth-body input[aria-invalid="true"],
  .klmis-auth-body select[aria-invalid="true"],
  .klmis-auth-body textarea[aria-invalid="true"]{
    border-color: rgba(220,53,69,.55) !important;
    box-shadow: 0 0 0 .22rem rgba(220,53,69,.10) !important;
  }

  /* 8) Buttons */
  .klmis-auth-actions{
    display:flex;
    gap: .75rem;
    align-items:center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 14px;
  }
  .klmis-auth-primary-btn{
    border-radius: 999px !important;
    padding: .78rem 1.1rem !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
    box-shadow: 0 12px 26px rgba(220,53,69,.20);
  }

  .klmis-auth-link a{
    color: #0d6efd;
    text-decoration: none;
    font-weight: 800;
  }
  .klmis-auth-link a:hover{ text-decoration: underline; }

  .klmis-auth-divider{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin: 16px 0;
    color: rgba(11,34,57,.55);
    font-size: .85rem;
  }
  .klmis-auth-divider:before,
  .klmis-auth-divider:after{
    content:"";
    height:1px;
    flex:1;
    background: rgba(11,34,57,.14);
  }

  /* =========================
     Redesigned "Why register?"
  ========================== */
  .klmis-side{
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    background: linear-gradient(180deg, rgba(11,34,57,.94), rgba(11,34,57,.88));
    position: relative;
  }
  .klmis-side:before{
    content:"";
    position:absolute;
    inset:-80px -80px auto -80px;
    height: 220px;
    background:
      radial-gradient(circle at 25% 55%, rgba(13,110,253,.35), transparent 55%),
      radial-gradient(circle at 78% 20%, rgba(220,53,69,.28), transparent 52%);
    filter: blur(1px);
    opacity: .95;
    pointer-events:none;
  }
  .klmis-side-inner{
    position: relative;
    padding: 20px;
    color: rgba(255,255,255,.92);
  }
  .klmis-side-title{
    display:flex;
    align-items:center;
    gap:.6rem;
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 1.05rem;
  }
  .klmis-side-kicker{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.82rem;
    padding:.35rem .6rem;
    border-radius:999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.90);
    margin-bottom: 12px;
  }
  .klmis-side-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }
  .klmis-side-item{
    display:flex;
    gap:.75rem;
    align-items:flex-start;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
  }
  .klmis-side-ico{
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.12);
    flex: 0 0 auto;
  }
  .klmis-side-item h6{
    margin: 0 0 2px;
    font-weight: 900;
    font-size: .95rem;
  }
  .klmis-side-item p{
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: .9rem;
    line-height: 1.35;
  }

  .klmis-side-chips{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
  }
  .klmis-chip{
    font-size: .78rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.88);
    display:inline-flex;
    align-items:center;
    gap:.4rem;
  }