:root{
    --bg: #0b0b0b;
    --card: rgba(255,255,255,0.03);
    --card-border: rgba(255,255,255,0.04);
    --accent: #f6c200;
    --muted: rgba(255,255,255,0.72);
    --muted-2: rgba(255,255,255,0.55);
    --danger: #ff8080;
    --radius: 14px;
    --gap: 14px;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background: linear-gradient(180deg, #070707 0%, #0b0b0b 100%);
    color:#fff;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
  }

  /* Center card, allow vertical scrolling on small devices */
  .page {
    width:100%;
    max-width:420px;
    margin: 18px auto;
  }

  .card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
  }

  .top {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
  }
  .logo {
    width:72px;
    height:72px;
    border-radius:12px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
    flex-shrink:0;
  }
  .logo img{ width:100%; height:100%; object-fit:contain; display:block; }

  .title {
    font-size:20px;
    font-weight:700;
    line-height:1;
    color:#fff;
  }
  .subtitle {
    font-size:13px;
    color:var(--muted-2);
    margin-top:6px;
  }

  form { margin-top:8px; }
  label {
    display:block;
    font-size:13px;
    color: var(--muted-2);
    margin-bottom:6px;
    margin-top:12px;
  }

  .field {
    position:relative;
  }

  input[type="text"],
  input[type="password"] {
    width:100%;
    padding:14px 44px 14px 14px;
    font-size:15px;
    color:#fff;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius:10px;
    outline:none;
    transition: box-shadow .12s ease, transform .06s ease;
  }
  input:focus {
    box-shadow: 0 6px 18px rgba(246,194,0,0.08);
    border-color: rgba(246,194,0,0.18);
  }

  /* password toggle */
  .toggle-pass {
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    background:transparent;
    border:0;
    color:var(--muted);
    font-weight:700;
    padding:8px;
    border-radius:8px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    user-select:none;
  }

  .actions {
    margin-top: var(--gap);
    display:flex;
    gap:12px;
    flex-direction:column;
  }

  button.btn {
    width:100%;
    padding:14px;
    border-radius:10px;
    border:0;
    font-weight:800;
    font-size:15px;
    cursor:pointer;
  }
  .btn-primary {
    background: var(--accent);
    color:#0b0b0b;
    box-shadow: 0 10px 22px rgba(246,194,0,0.12);
  }
  .link-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid rgba(246,194,0,0.08);
  }

  .register-links {
    margin-top:12px;
    display:flex;
    gap:10px;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
  }
  .register-links a {
    color:var(--accent);
    text-decoration:none;
    font-weight:700;
    font-size:14px;
  }

  .small {
    margin-top:10px;
    color:var(--muted-2);
    font-size:13px;
    text-align:center;
  }

  .error {
    background: rgba(255,128,128,0.06);
    color: var(--danger);
    border: 1px solid rgba(255,128,128,0.12);
    padding:10px 12px;
    border-radius:8px;
    margin-top:8px;
    font-size:14px;
  }

  /* make the container slightly narrower on small devices and add comfortable padding */
  @media (max-width:420px) {
    .card { padding:18px; border-radius:12px; }
    .logo { width:60px; height:60px; }
    .title { font-size:18px; }
    input { padding:12px 44px 12px 12px; font-size:15px; }
    .toggle-pass { right:6px; }
  }

  /* landscape phones and small tablets: center vertically with some margin */
  @media (min-height:700px) and (max-width:600px) {
    body { padding:28px; }
  }