@font-face {
  font-family: 'Canela';
  src: url('/assets/fonts/Canela-Regular-Trial.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { min-height:100vh; background:#1a1a2e; color:#ffffff; font-family:'DM Sans',sans-serif; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:100%; max-width:380px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.06); border-radius:24px; padding:40px 28px; text-align:center; box-shadow:0 2px 40px rgba(0,0,0,0.3); }
.logo-img { height:32px; margin-bottom:8px; filter:brightness(0) invert(1); }
.subtitle { font-size:13px; color:rgba(255,255,255,0.45); margin-bottom:32px; }
.field { margin-bottom:16px; text-align:left; }
.field label { display:block; font-size:12px; color:rgba(255,255,255,0.45); margin-bottom:6px; font-weight:500; }
.field input { width:100%; padding:14px 16px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.06); border-radius:14px; color:#ffffff; font-size:15px; font-family:inherit; outline:none; transition:border-color 0.2s; }
.field input:focus { border-color:rgba(232,115,74,0.5); }
.field input::placeholder { color:rgba(255,255,255,0.25); }
.code-input { text-align:center; font-size:24px; font-weight:700; letter-spacing:4px; font-family:'SF Mono','Fira Code',monospace; }
.btn { width:100%; padding:16px; background:linear-gradient(135deg,#e8734a,#d4623b); color:white; border:none; border-radius:14px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; margin-top:8px; transition:all 0.2s; }
.btn:active { transform:scale(0.97); }
.btn:disabled { opacity:0.5; }
.btn-secondary { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.06); color:rgba(255,255,255,0.5); margin-top:12px; }
.error { color:#f07070; font-size:12px; margin-top:12px; display:none; }
.success { color:#6bcf8e; font-size:12px; margin-top:12px; display:none; }
.footer { margin-top:24px; font-size:12px; color:rgba(255,255,255,0.25); }
.footer a { color:#e8734a; text-decoration:none; }
.hidden { display:none; }

/* Fade out */
body.fade-out .login-card {
  opacity:0; transform:scale(0.96);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
body { transition:opacity 0.4s ease; }
body.fade-out { opacity:0; }