:root{
    --bg:#f3faf7;
    --bg-raised:#e6f3ee;
    --panel:#ffffff;
    --ink:#0c221c;
    --line: rgba(12,40,32,0.12);
    --line-strong: rgba(12,40,32,0.22);
    --text:#0c221c;
    --text-dim:#4f6b62;
    --text-on-dark:#c5d9d1;
    --accent:#ff3d71;
    --accent-hover:#ff6b94;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{ height:100%; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Space Grotesk', sans-serif;
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
  }
  a{ color:inherit; }

  .brand-panel{
    background:var(--ink);
    color:#fff;
    padding:48px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
  }
  .brand-panel::before{
    content:'';
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 60% 50% at 80% 10%, rgba(255,61,113,0.28), transparent 60%),
      radial-gradient(ellipse 50% 45% at 10% 90%, rgba(13,159,110,0.22), transparent 55%),
      url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M14 0l2 12h12l-10 6 4 12-8-8-8 8 4-12L0 12h12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: auto, auto, 28px 28px;
    pointer-events:none;
  }
  .brand-panel > *{ position:relative; z-index:1; }
  .logo{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    font-size:28px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
  }
  .logo em{
    font-style:normal;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    font-weight:500;
    letter-spacing:0.14em;
    color:var(--accent);
    margin-left:12px;
    vertical-align:middle;
  }
  .brand-copy{ max-width:420px; padding:40px 0; }
  .brand-copy h1{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    font-size:clamp(40px, 4.5vw, 64px);
    line-height:0.95;
    text-transform:uppercase;
    letter-spacing:0.01em;
  }
  .brand-copy p{
    margin-top:20px;
    color:var(--text-on-dark);
    font-size:16px;
    max-width:340px;
  }
  .brand-foot{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:rgba(197,217,209,0.55);
  }

  .form-panel{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:48px 56px;
    background:
      radial-gradient(ellipse 50% 40% at 90% 0%, rgba(255,61,113,0.08), transparent 60%),
      var(--bg);
  }
  .form-card{
    width:100%;
    max-width:400px;
    margin:0 auto;
  }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:12px;
  }
  .form-card h2{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800;
    font-size:36px;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:1;
    margin-bottom:8px;
  }
  .form-card .lead{
    color:var(--text-dim);
    margin-bottom:32px;
    font-size:14.5px;
  }

  .field{ margin-bottom:16px; }
  .field label{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-dim);
    margin-bottom:7px;
  }
  .field input{
    width:100%;
    background:var(--panel);
    border:1px solid var(--line-strong);
    border-radius:6px;
    padding:12px 14px;
    font-family:'Space Grotesk', sans-serif;
    font-size:15px;
    color:var(--text);
    outline:none;
    transition: border-color .15s;
  }
  .field input:focus{ border-color:var(--accent); }
  .field-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:8px 0 24px;
    font-size:13.5px;
  }
  .remember{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-dim);
    cursor:pointer;
    user-select:none;
  }
  .remember input{ accent-color:var(--accent); width:15px; height:15px; }
  .forgot{
    color:var(--accent);
    text-decoration:none;
    font-weight:500;
  }
  .forgot:hover{ color:var(--accent-hover); }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:14px 20px;
    border-radius:5px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:14.5px;
    border:none;
    cursor:pointer;
    text-decoration:none;
    transition: transform .15s, background .15s, border-color .15s;
  }
  .btn-primary{ background:var(--accent); color:#fff; }
  .btn-primary:hover{ transform:translateY(-1px); background:var(--accent-hover); }
  .btn-ghost{
    background:var(--panel);
    border:1px solid var(--line-strong);
    color:var(--text);
    margin-top:10px;
  }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

  .divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px 0;
    color:var(--text-dim);
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .divider::before, .divider::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--line);
  }

  .form-foot{
    margin-top:28px;
    text-align:center;
    font-size:13.5px;
    color:var(--text-dim);
  }
  .form-foot a{ color:var(--accent); font-weight:600; text-decoration:none; }
  .form-foot a:hover{ color:var(--accent-hover); }

  .demo-note{
    margin-top:20px;
    padding:12px 14px;
    background:rgba(255,61,113,0.06);
    border:1px solid rgba(255,61,113,0.2);
    border-radius:6px;
    font-size:12.5px;
    color:var(--text-dim);
  }
  .demo-note strong{ color:var(--accent); font-weight:600; }

  .toast{
    position:fixed;
    bottom:24px;
    right:24px;
    background:var(--ink);
    color:#fff;
    padding:14px 18px;
    border-radius:8px;
    font-size:13.5px;
    z-index:50;
    transform:translateY(80px);
    opacity:0;
    transition: transform .25s, opacity .25s;
  }
  .toast.show{ transform:none; opacity:1; }

  @media (max-width: 900px){
    body{ grid-template-columns:1fr; }
    .brand-panel{ min-height:280px; padding:32px; }
    .brand-copy{ padding:24px 0; }
    .brand-copy h1{ font-size:40px; }
    .form-panel{ padding:40px 24px 56px; }
  }

.alert {
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.alert-error {
  background: rgba(255,61,113,0.08);
  border: 1px solid rgba(255,61,113,0.25);
  color: var(--accent);
}
.alert-success {
  background: rgba(13,159,110,0.08);
  border: 1px solid rgba(13,159,110,0.25);
  color: var(--ok, #0d9f6e);
}
.alert ul { margin: 0; padding-left: 18px; }