:root{
    --bg:#f6f8fa;
    --card:#ffffff;
    --primary:#0f766e; /* teal-ish */
    --muted:#64748b;
    --danger:#dc2626;
    --radius:12px;
    --max-width:440px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color-scheme: light;
  }

  html,body{height:100%;}
  body{
    margin:0;
    background:linear-gradient(180deg,#eef2f3 0%,var(--bg) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }

  .container{
    width:100%;
    max-width:var(--max-width);
    background:var(--card);
    border-radius:var(--radius);
    box-shadow: 0 6px 30px rgba(20,30,40,0.08);
    padding:28px;
    box-sizing:border-box;
  }

  header{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:18px;
  }
  .logo {
    width:48px;height:48px;border-radius:10px;
    background:linear-gradient(135deg,var(--primary), #145e57);
    display:flex; align-items:center; justify-content:center;
    color:white; font-weight:700; font-size:18px;
    box-shadow: 0 4px 12px rgba(15,118,110,0.18);
  }
  h1{font-size:1.125rem;margin:0;}
  p.lead{margin:6px 0 0;color:var(--muted);font-size:0.95rem}

  form{margin-top:12px;}
  .field{
    display:flex; flex-direction:column; gap:8px; margin-bottom:14px;
  }
  label{font-size:0.85rem;color:var(--muted);display:block}
  input[type="email"],
  input[type="password"]{
    width:100%;
    padding:12px 12px;
    border-radius:10px;
    border:1px solid #e6e9ee;
    font-size:1rem;
    box-sizing:border-box;
    outline:none;
    transition:box-shadow .15s, border-color .15s;
    background:linear-gradient(180deg,#fff,#fbfdff);
  }
  input:focus{ box-shadow: 0 6px 20px rgba(15,118,110,0.08); border-color:rgba(15,118,110,0.6) }

  .actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:6px;
  }

  .btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    padding:10px 14px;
    border-radius:10px;
    border:0;
    cursor:pointer;
    font-weight:600;
    font-size:1rem;
  }
  .btn-primary{
    background:var(--primary);
    color:white;
    box-shadow: 0 8px 20px rgba(15,118,110,0.15);
  }
  .btn-ghost{
    background:transparent;
    color:var(--primary);
    border:1px solid transparent;
  }

  .muted-link{ color:var(--muted); font-size:0.95rem; text-decoration:none }
  .muted-link:hover{ text-decoration:underline }

  .helper-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px }

  .message {
    padding:10px 12px;
    border-radius:8px;
    font-size:0.95rem;
    margin-bottom:12px;
  }
  .message.success{ background:#ecfdf5; color:#065f46; border:1px solid #bbf7d0; }
  .message.error{ background:#fff1f2; color:var(--danger); border:1px solid #fecaca; }

  /* small devices: compact */
  @media (max-width:480px){
    .container{ padding:18px; border-radius:10px; }
    .logo{width:44px;height:44px}
  }
  /* show/hide password toggle */
  .pw-row{ display:flex; align-items:center; gap:8px; }
  .pw-toggle{ background:transparent; border:0; cursor:pointer; color:var(--primary); font-weight:600; padding:8px; border-radius:8px }
  .small{ font-size:0.9rem; color:var(--muted) }