/* ============================================================
   login.css - standalone styling til login-side
   Minimalistisk: ingen branding. Self-hosted fonts via @font-face.
   ============================================================ */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dmmono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dmmono-500-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: #FAFAFA;
  min-height: 100vh;
  margin: 0;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #0F1112;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 14px;
  padding: 36px 32px 32px;
  box-shadow: 0 1px 0 rgba(15,17,18,0.03), 0 8px 30px -12px rgba(15,17,18,0.08);
}

.login-sub {
  font-size: 13px;
  color: #6f7378;
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: center;
}

.field {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color .2s;
  margin-bottom: 10px;
}
.field:focus-within { border-color: #0F1112; }
.field label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6f7378;
  font-weight: 600;
  margin-bottom: 4px;
}
.field input {
  width: 100%;
  font-size: 15px;
  color: #0F1112;
  font-weight: 500;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  padding: 0;
}
.field input.code {
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-align: center;
  color: #0F1112;
}

.recipient {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #0F1112;
}

.err {
  background: #FDF2F4;
  border: 1px solid #FBE8EB;
  color: #8F1526;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.info {
  background: #E6F2EE;
  border: 1px solid #CCE0D6;
  color: #1f5d3a;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.submit-btn {
  width: 100%;
  background: #0F1112;
  color: #FFFFFF;
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
  letter-spacing: -0.005em;
  margin-top: 6px;
}
.submit-btn:hover { background: #000; }

.meta-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-size: 12px;
}
.meta-actions button {
  background: none;
  border: 0;
  color: #6f7378;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 4px 0;
}
.meta-actions button:hover { color: #0F1112; }