/* Upload + sign-in pages — mirrors the app.payaz.software sign-in screen:
 * green→teal gradient with hexagon texture, dark #212121 card, teal button, green links. */
body.auth-bg {
  min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px 16px;
  background-color: #2f9f86;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Cpath d='M56 0l56 32v65L56 129 0 97V32z'/%3E%3Cpath d='M56 129l56 32v65M56 129L0 161v65'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, #6cc07a 0%, #3aa386 40%, #1f7f99 75%, #245d86 100%);
  background-attachment: fixed;
}
.auth-card {
  width: 100%; max-width: 520px; background: #212121; color: #f3f4f6; border-radius: 6px;
  padding: 28px 28px 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.auth-card .logo { display: block; height: 40px; margin: 0 auto 14px; }
.auth-card h1 { text-align: center; font-size: 22px; font-weight: 500; margin: 0 0 6px; color: #fff; }
.auth-card .lead { text-align: center; color: #d1d5db; margin: 0 0 22px; font-size: 14px; line-height: 1.5; }
.auth-card .lead a, .auth-card a { color: #76b729; font-weight: 500; }
.auth-card label.f { display: block; font-size: 14px; font-weight: 500; margin: 0 0 6px; color: #f3f4f6; }
.auth-card .group { margin-bottom: 18px; }
.auth-card .input, .auth-card select.input { width: 100%; height: 40px; border-color: #d1d5db; color: #111827; }
.auth-card .btn.primary { width: 100%; height: 40px; justify-content: center; font-weight: 600; background: #009ba9; border-color: #009ba9; opacity: .92; }
.auth-card .btn.primary:hover { opacity: 1; background: #017883; border-color: #017883; }
.auth-card .btn.primary:disabled { opacity: .45; }
.auth-card .btn.link { background: none; border: 0; color: #76b729; padding: 0; height: auto; font-weight: 500; }
.auth-card .btn.secondary { width: 100%; height: 40px; justify-content: center; background: transparent; color: #e5e7eb; border-color: #4b5563; }
.auth-card .btn.secondary:hover { background: #2c2c2c; }
.auth-card .err { background: rgba(226, 76, 76, .14); border: 1px solid rgba(226, 76, 76, .5); color: #fecaca; padding: 10px 12px; border-radius: 6px; font-size: 13.5px; margin-bottom: 14px; line-height: 1.45; }
.auth-card .warn-box { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .45); color: #fde68a; padding: 10px 12px; border-radius: 6px; font-size: 13.5px; margin-bottom: 10px; line-height: 1.45; }
.auth-card .hint { color: #9ca3af; font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
.auth-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 13px; color: #9ca3af; gap: 12px; flex-wrap: wrap; }

.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-pick button {
  text-align: left; background: #2a2a2a; border: 1px solid #3f3f46; border-radius: 6px; padding: 12px; color: #d1d5db; cursor: pointer; font-size: 13px; line-height: 1.4;
}
.type-pick button strong { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; margin-bottom: 2px; }
.type-pick button svg { width: 18px; height: 18px; color: #76b729; }
.type-pick button:hover { border-color: #6b7280; }
.type-pick button.on { border-color: #009ba9; box-shadow: 0 0 0 1px #009ba9; background: rgba(0, 155, 169, .14); }

.auth-card .drop { background: #2a2a2a; border-color: #4b5563; color: #d1d5db; }
.auth-card .drop:hover, .auth-card .drop.over { background: rgba(0, 155, 169, .14); border-color: #009ba9; color: #fff; }
.auth-card .drop strong { color: #76b729; }
.auth-card .file-chip { display: flex; align-items: center; gap: 8px; background: #2a2a2a; border: 1px solid #3f3f46; border-radius: 6px; padding: 10px 12px; font-size: 13.5px; }
.auth-card .file-chip .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.summary { background: #2a2a2a; border: 1px solid #3f3f46; border-radius: 6px; padding: 14px; margin-bottom: 14px; }
.summary .head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 12px; }
.summary .head strong { color: #fff; font-size: 15px; }
.summary .head span { color: #9ca3af; font-size: 12.5px; }
.summary .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.summary .stat { background: #212121; border-radius: 6px; padding: 10px; }
.summary .stat b { display: block; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.summary .stat span { font-size: 12px; color: #9ca3af; }
.summary .stat.new b { color: #8fd14f; }
.summary .meta { margin-top: 10px; font-size: 12.5px; color: #9ca3af; line-height: 1.5; }

.done-mark { width: 56px; height: 56px; border-radius: 50%; background: rgba(118, 183, 41, .16); color: #8fd14f; display: grid; place-items: center; margin: 4px auto 12px; }
.done-mark svg { width: 28px; height: 28px; }
.steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.steps i { width: 26px; height: 4px; border-radius: 2px; background: #3f3f46; }
.steps i.on { background: #009ba9; }

@media (max-width: 480px) {
  .auth-card { padding: 22px 18px; }
  .type-pick { grid-template-columns: 1fr; }
  .summary .stats { grid-template-columns: repeat(3, 1fr); }
}

/* two-step sign-in */
.mfa-code { font-size: 22px; letter-spacing: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.mfa-steps { margin: 4px 0 14px; padding-left: 20px; color: inherit; font-size: 14px; line-height: 1.5; }
.mfa-steps li { margin-bottom: 10px; }
.mfa-qr { background: #fff; border-radius: 8px; padding: 8px; width: max-content; margin: 10px 0 6px; }
.mfa-qr svg { display: block; width: 220px; height: 220px; }
.mfa-secret { word-break: break-all; font-size: 13px; }
.mfa-recovery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 10px; }
.mfa-recovery code { background: rgba(255,255,255,.08); border-radius: 6px; padding: 8px; text-align: center; font-size: 15px; letter-spacing: 1px; }