/* BalBox Admin — pages d'authentification. Direction Apple ID / iCloud :
   fond gris neutre, carte blanche a bordure fine, police systeme (SF Pro
   sur Mac/iPhone), bouton plein en pilule, aucun degrade ni effet de verre. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --a-bg:      #F5F5F7;
  --a-card:    #FFFFFF;
  --a-ink:     #1D1D1F;
  --a-ink2:    #6E6E73;
  --a-ink3:    #AEAEB2;
  --a-border:  #D2D2D7;
  --a-divider: #E5E5E7;
  --a-teal:    #2A8A8A;
  --a-teal-deep: #1F6B6B;
  --a-gold:    #C8962A;
  --a-red:     #D70015;
  --a-red-bg:  #FCEBEC;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--a-bg);
  /* 100vh sur mobile inclut l'espace derriere la barre d'adresse : le
     bas de la carte (bouton) peut se retrouver masque sans que le
     navigateur ne pense qu'il faille pouvoir scroller. dvh (dynamic
     viewport height) suit la zone reellement visible ; vh reste en
     repli pour les navigateurs plus anciens qui ne le supportent pas. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
}

.auth-card {
  background: var(--a-card);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 30px rgba(0,0,0,0.05);
  padding: 44px 40px 36px;
  max-width: 380px;
  width: 100%;
}

.auth-crest { width: 40px; height: 40px; margin: 0 auto 20px; }
.auth-crest svg { width: 100%; height: 100%; }

.auth-logo {
  font-size: 22px; font-weight: 600; color: var(--a-ink);
  text-align: center; margin-bottom: 4px; letter-spacing: -0.3px;
}
.auth-logo em { color: var(--a-teal); font-style: normal; }
.auth-tag {
  text-align: center; color: var(--a-ink2);
  font-size: 13px; font-weight: 400; margin-bottom: 30px;
}

.auth-h2 {
  font-size: 19px; font-weight: 600; color: var(--a-ink);
  text-align: center; margin-bottom: 6px; letter-spacing: -0.2px;
}
.auth-sub {
  text-align: center; color: var(--a-ink2);
  font-size: 13px; margin-bottom: 26px; line-height: 1.55;
}
.auth-sub b { color: var(--a-ink); font-weight: 600; }

.auth-step { color: var(--a-ink2); font-size: 13px; margin-bottom: 10px; line-height: 1.55; }
.auth-step b { color: var(--a-ink); font-weight: 600; }

label, .auth-label {
  font-size: 12px; font-weight: 600; color: var(--a-ink2);
  margin-bottom: 7px; display: block;
}

input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 12px 14px;
  background: var(--a-card);
  border: 1px solid var(--a-border); border-radius: 10px;
  font-size: 15px; color: var(--a-ink); margin-bottom: 14px;
  outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #AEAEB2; }
input:focus { border-color: var(--a-teal); box-shadow: 0 0 0 4px rgba(42,138,138,0.12); }

.auth-btn, button[type=submit] {
  width: 100%;
  background: var(--a-ink); color: white;
  border: none; border-radius: 980px;
  padding: 13px; font-size: 15px; font-weight: 590; cursor: pointer;
  transition: background .15s;
  font-family: inherit;
  margin-top: 8px;
}
.auth-btn:hover, button[type=submit]:hover { background: var(--a-teal); }
.auth-btn:active, button[type=submit]:active { background: var(--a-teal-deep); }

.auth-error {
  background: var(--a-red-bg); border-radius: 10px;
  color: var(--a-red); padding: 12px 14px;
  font-size: 13px; margin-bottom: 18px; line-height: 1.5;
}

.auth-footer {
  text-align: center; color: var(--a-ink3);
  font-size: 11.5px; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--a-divider);
}

.auth-cancel {
  width: 100%; background: transparent; color: var(--a-ink2);
  border: none; font-size: 13px; cursor: pointer;
  font-family: inherit; padding: 12px; margin-top: 4px;
  transition: color .15s;
}
.auth-cancel:hover { color: var(--a-ink); }

.auth-rules {
  background: #F5F5F7; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 22px;
}
.auth-rules div {
  color: var(--a-ink2); font-size: 12.5px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px; line-height: 1.4;
}
.auth-rules div:last-child { margin-bottom: 0; }
.auth-rules div::before { content: '•'; color: var(--a-teal); flex-shrink: 0; }

.auth-code-input {
  font-size: 22px !important; letter-spacing: 7px !important;
  text-align: center; font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace !important;
}

.auth-secret-box {
  background: #F5F5F7; border-radius: 12px;
  padding: 16px; margin: 14px 0 22px; text-align: center;
}
.auth-secret-box code {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  font-size: 15px; letter-spacing: 1.5px; color: var(--a-teal-deep);
  word-break: break-all; line-height: 1.6;
}
.auth-uri {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  font-size: 9px; color: var(--a-ink3);
  word-break: break-all; margin-top: 10px; line-height: 1.5;
}

.auth-qr-wrap { display: flex; justify-content: center; margin: 18px 0; }
.auth-qr-wrap canvas { border-radius: 12px; border: 1px solid var(--a-divider); }

@media (prefers-reduced-motion: reduce) {
  .auth-btn, button[type=submit] { transition: none; }
}