/* V30 — modern user status dialog + login skeleton */

.confirm-dialog-v31{display:flex;flex-direction:column;gap:14px}
.confirm-hero-v31{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg,#f9fceb 0%,#ffffff 58%,#f5f8ef 100%);
  border:1px solid #e1e9cf;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.confirm-icon-v31{
  width:64px;height:64px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8eb936 0%,#6c9725 100%);color:#fff;font-size:22px;
  box-shadow:0 16px 28px rgba(109,150,36,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.confirm-copy-v31 strong{display:block;font-size:18px;font-weight:900;color:#4b2b23;margin-bottom:5px}
.confirm-copy-v31 p{margin:0;font-size:13px;line-height:1.9;color:#6d6258}
.confirm-note-v31{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:16px;
  background:#f7fbe9;border:1px solid #e3ebcf;color:#5e6b36;font-size:12px;line-height:1.8;
}
.confirm-note-v31 i{margin-top:2px;color:#7ca52d}
.confirm-actions-v31{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.confirm-actions-v31 .ghost-btn,.confirm-actions-v31 .primary-btn{min-width:132px;border-radius:16px}
.confirm-accept-v31{background:linear-gradient(135deg,#87b331 0%,#6f9a28 100%)!important;border-color:#87b331!important;box-shadow:0 14px 26px rgba(111,154,40,.2)!important}
.confirm-cancel-v31{background:#fff!important;border:1px solid #e7dece!important;color:#5d443a!important}

.login-mobile-card-v20{position:relative;overflow:hidden}
.login-skeleton-v31{
  position:absolute;inset:0;z-index:5;padding:28px 24px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,251,244,.985));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  transition:opacity .38s ease, visibility .38s ease, transform .38s ease;
}
.login-skeleton-v31.hide{opacity:0;visibility:hidden;transform:translateY(8px)}
.login-skeleton-logo-v31,.login-skeleton-title-v31,.login-skeleton-line-v31,.login-skeleton-field-v31,.login-skeleton-button-v31{
  position:relative;overflow:hidden;background:#eef3df;border-radius:18px;
}
.login-skeleton-logo-v31::after,.login-skeleton-title-v31::after,.login-skeleton-line-v31::after,.login-skeleton-field-v31::after,.login-skeleton-button-v31::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
  animation:loginShimmerV31 1.3s infinite;
}
.login-skeleton-logo-v31{width:190px;height:60px;border-radius:24px}
.login-skeleton-title-v31{width:132px;height:18px}
.login-skeleton-line-v31{width:210px;height:11px}
.login-skeleton-line-v31.short{width:155px}
.login-skeleton-field-v31{width:min(100%,340px);height:72px;border-radius:24px}
.login-skeleton-button-v31{width:min(100%,340px);height:56px;border-radius:18px;background:#dfe9c3}
@keyframes loginShimmerV31{100%{transform:translateX(100%)}}

@media (max-width:640px){
  .confirm-hero-v31{grid-template-columns:56px minmax(0,1fr);padding:14px}
  .confirm-icon-v31{width:56px;height:56px;border-radius:18px;font-size:20px}
  .confirm-copy-v31 strong{font-size:16px}
  .confirm-copy-v31 p{font-size:12px}
  .confirm-actions-v31{flex-direction:column-reverse}
  .confirm-actions-v31 .ghost-btn,.confirm-actions-v31 .primary-btn{width:100%}
  .login-skeleton-v31{padding:24px 18px}
  .login-skeleton-field-v31,.login-skeleton-button-v31{width:100%}
}