* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #202020; color: #f2f2f2; font: 16px/1.45 Lato, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: grid; place-items: center; min-height: 100vh; padding: 24px 16px;
}
main { width: min(380px, 100%); text-align: center; }
.logo { width: 120px; height: auto; margin-bottom: 6px; }
h1 { font-size: 22px; margin: 0 0 22px; font-weight: 700; }
form { text-align: left; }
label { display: block; font-size: 14px; color: #bdbdbd; margin: 0 0 6px; }
input {
  width: 100%; font: inherit; font-size: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid #3a3a3a;
  background: #2a2a2a; color: #fff; margin-bottom: 14px;
}
input#kod { letter-spacing: .5em; text-align: center; font-size: 24px; font-weight: 700; }
input:focus { outline: 2px solid #F0D627; border-color: transparent; }
button { width: 100%; font: inherit; font-weight: 700; padding: 12px; border: 0; border-radius: 12px; background: #F0D627; color: #202020; cursor: pointer; min-height: 48px; }
button:disabled { opacity: .6; }
button.link { background: none; color: #bdbdbd; font-weight: 400; text-decoration: underline; margin-top: 8px; }
.info { font-size: 14px; color: #d0d0d0; }
#greska { color: #ff8a80; min-height: 1.4em; margin-top: 12px; }
.napomena { font-size: 12px; color: #8a8a8a; margin-top: 24px; }