:root{
    --bg-page:#F7F4EF;
    --brown-900:#241C19;
    --brown-800:#3A2C27;
    --teal:#3EC6D0;
    --teal-deep:#1F8E97;
    --pink:#D4527E;
    --pink-deep:#B23B64;
    --amber:#E8A650;
    --white:#FFFFFF;
    --text-muted:#8C8178;
    --border:#E7E1D8;
    --illus-bg:#D4527E;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg-page);
    color:var(--brown-900);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
  }

  .shell{
    width:100%;
    max-width:860px;
    min-height:520px;
    background:var(--white);
    border-radius:24px;
    display:grid;
    grid-template-columns:1.12fr 1fr;
    overflow:hidden;
    box-shadow:0 30px 80px -30px rgba(36,28,25,0.18);
  }

  /* ---------- Left panel: illustration ---------- */
  .illus-panel{
    background:var(--illus-bg);
    display:flex;
    flex-direction:column;
    padding:40px 36px 20px;
  }
  .illus-headline h2{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size:22px;
    line-height:1.3;
    margin:0;
    color:#FFFFFF;
  }
  .illus-headline h2 span{color:#FFE3EC;}
  .illus-headline p{
    font-size:13px;
    color:rgba(255,255,255,0.78);
    max-width:280px;
    margin:8px 0 0;
    line-height:1.6;
  }
  .illus-svg-wrap{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:6px;
  }
  .illus-svg-wrap svg{width:100%;height:100%;max-height:360px;}

  /* ---------- Right panel: form ---------- */
  .form-panel{
    padding:44px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .form-inner{
    width:100%;
    max-width:300px;
    margin:0 auto;
  }

  .logo-badge{
    width:120px;
    height:120px;
    margin:0 auto 18px;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .logo-badge img{width:100%;height:100%;object-fit:contain;display:block;}

  .form-inner h1{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-size:22px;
    margin:0 0 6px;
    color:var(--brown-900);
  }
  .form-inner .sub{
    font-size:13.5px;
    color:var(--text-muted);
    margin:0 0 26px;
  }

  .field{margin-bottom:14px;}
  .field label{
    display:block;
    font-size:12.5px;
    font-weight:500;
    color:var(--brown-800);
    margin-bottom:6px;
  }
  .field input{
    width:100%;
    height:42px;
    border-radius:10px;
    border:1.5px solid var(--border);
    background:#FCFBF9;
    padding:0 13px;
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    color:var(--brown-900);
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .field input::placeholder{color:#B7AEA4;}
  .field input:focus{
    border-color:var(--teal);
    background:var(--white);
    box-shadow:0 0 0 4px rgba(62,198,208,0.15);
  }

  .row-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:2px 0 24px;
  }
  .remember{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--brown-800);
  }
  .remember input{
    width:16px;height:16px;
    accent-color:var(--pink);
    margin:0;
  }
  .forgot{
    font-size:13px;
    color:var(--teal-deep);
    text-decoration:none;
    font-weight:500;
  }
  .forgot:hover{text-decoration:underline;}

  .btn-login{
    width:100%;
    height:44px;
    border:none;
    border-radius:10px;
    background:var(--pink);
    color:var(--white);
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:0.01em;
    cursor:pointer;
    transition:background .15s ease, transform .12s ease;
  }
  .btn-login:hover{background:var(--pink-deep);transform:translateY(-1px);}
  .btn-login:active{transform:translateY(0);}

  .hint{
    text-align:center;
    font-size:12.5px;
    color:var(--text-muted);
    margin-top:22px;
  }

  @media (max-width:860px){
    .shell{grid-template-columns:1fr;min-height:auto;}
    .illus-panel{display:none;}
    .form-panel{padding:44px 28px;}
  }

/* Laravel validation feedback */
.error {
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid #f2b9ca;
  border-radius: 10px;
  background: #fff1f5;
  color: #922645;
  font-size: 12.5px;
  line-height: 1.5;
}

.field input.is-invalid {
  border-color: var(--pink);
  background: #fffafb;
}

.field input.is-invalid:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(212, 82, 126, 0.14);
}

.forgot[aria-disabled="true"] {
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}

.btn-login:focus-visible,
.forgot:focus-visible,
.remember input:focus-visible {
  outline: 3px solid rgba(62, 198, 208, 0.35);
  outline-offset: 3px;
}

.btn-login:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  body { padding: 16px; }
  .shell { border-radius: 18px; }
  .form-panel { padding: 34px 22px; }
  .logo-badge { width: 104px; height: 104px; margin-bottom: 14px; }
  .row-between { align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .field input,
  .btn-login { transition: none; }
}