/*
 * login.css - embossed ("neumorphic") login page.
 * Idea: everything uses the SAME background colour; depth comes only from two shadows:
 *   a light one (top-left) and a dark one (bottom-right).
 *     raised  = outer shadows   (card, button, round badge)
 *     pressed = inset shadows   (text boxes)
 * Colours (--nm-*) are in theme.css, so the page follows Light / Dark / System automatically.
 */
body.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--nm-bg); color: var(--nm-text);
}

/* round theme button, top-right corner */
.nm-theme {
  position: fixed; top: 16px; right: 16px; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--nm-accent);
  background: var(--nm-bg); box-shadow: 6px 6px 12px var(--nm-lo), -6px -6px 12px var(--nm-hi);
}
.nm-theme:active { box-shadow: inset 4px 4px 8px var(--nm-lo), inset -4px -4px 8px var(--nm-hi); }

/* the big raised card */
.nm-card {
  position: relative; width: 100%; max-width: 380px; padding: 74px 28px 30px; margin-top: 40px; text-align: center;
  background: var(--nm-bg); border-radius: 30px;
  box-shadow: 14px 14px 30px var(--nm-lo), -14px -14px 30px var(--nm-hi);
}
/* round raised badge with the lock icon, sitting on the top edge of the card */
.nm-badge {
  position: absolute; left: 50%; top: -46px; transform: translateX(-50%);
  width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #e0a21a; background: var(--nm-bg); box-shadow: 8px 8px 16px var(--nm-lo), -8px -8px 16px var(--nm-hi);
}
.nm-card h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; color: var(--nm-text); }
.nm-sub { margin: 0 0 22px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.nm-card .alert { text-align: left; font-size: 14px; }

/* pressed-in text boxes */
.nm-field { position: relative; margin-bottom: 18px; }
.nm-input {
  width: 100%; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--nm-text);
  padding: 15px 46px 15px 20px; border-radius: 18px; background: var(--nm-bg);
  box-shadow: inset 6px 6px 12px var(--nm-lo), inset -6px -6px 12px var(--nm-hi);
}
.nm-input::placeholder { color: var(--muted); }
.nm-input:focus { box-shadow: inset 6px 6px 12px var(--nm-lo), inset -6px -6px 12px var(--nm-hi), 0 0 0 2px var(--nm-accent); }
.nm-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; color: var(--muted); padding: 6px; display: inline-flex; }

/* "Remember me" with an embossed checkbox */
.nm-check { display: flex; align-items: center; gap: 10px; margin: 2px 0 22px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.nm-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.nm-box { width: 20px; height: 20px; border-radius: 6px; background: var(--nm-bg); box-shadow: inset 3px 3px 6px var(--nm-lo), inset -3px -3px 6px var(--nm-hi); position: relative; }
.nm-check input:checked + .nm-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--nm-accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.nm-check input:focus-visible + .nm-box { outline: 2px solid var(--nm-accent); }

/* raised LOGIN button (pressed look while clicking) */
.nm-btn {
  width: 100%; border: 0; cursor: pointer; padding: 16px; border-radius: 18px; font: inherit; font-weight: 800; letter-spacing: .12em; font-size: 15px;
  color: var(--nm-accent); background: var(--nm-bg);
  box-shadow: 8px 8px 16px var(--nm-lo), -8px -8px 16px var(--nm-hi);
  transition: box-shadow .12s;
}
.nm-btn:active { box-shadow: inset 5px 5px 10px var(--nm-lo), inset -5px -5px 10px var(--nm-hi); }