/* AdsLogic SMS — sign-in screens */
.auth-body { background: #f6f7fb; margin: 0; min-height: 100vh; }
[data-bs-theme="dark"] .auth-body { background: #0b0f19; }
.auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }

/* Left art panel */
.auth-art { position: relative; overflow: hidden; background: #0b0f19; color: #fff; display: flex; align-items: center; padding: 56px; }
.art-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 75%); }
.art-inner { position: relative; max-width: 560px; }
.art-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 56px; }
.art-brand img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(254, 88, 2, .45)); }
.art-brand strong { display: block; font-size: 1.35rem; letter-spacing: -.02em; }
.art-brand em, .auth-mobile-brand em { font-style: normal; color: #fe5802; }
.art-brand span { color: #9aa3b5; font-size: .85rem; }
.auth-art h1 { color: #fff; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; margin-bottom: 16px; }
.auth-art h1 span { color: #fe5802; }
.auth-art > .art-inner > p { color: #aab3c5; font-size: 1.05rem; margin-bottom: 36px; max-width: 460px; }
.art-points { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 18px; }
.art-points li { display: flex; gap: 14px; align-items: flex-start; }
.art-points i { width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(254, 88, 2, .14); color: #fe5802; font-size: 1.15rem; border: 1px solid rgba(254, 88, 2, .25); }
.art-points strong { display: block; font-size: .96rem; }
.art-points span { color: #8f99ac; font-size: .85rem; }
.art-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.art-stats div { flex: 1; min-width: 120px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 14px 16px; }
.art-stats strong { display: block; font-size: 1.3rem; color: #fff; }
.art-stats span { color: #8f99ac; font-size: .78rem; }

/* Right form panel */
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; position: relative; }
.auth-card { width: 100%; max-width: 410px; }
.auth-mobile-brand { display: none; }
.auth-head h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; }
.auth-head p { color: #667085; margin-bottom: 28px; }
.auth-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: .88rem; margin-bottom: 16px; }
.auth-alert-danger { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.auth-alert-warning { background: #fffaeb; color: #93370d; border: 1px solid #fedf89; }
.auth-alert-success, .auth-alert-info { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 7px; color: #344054; }
[data-bs-theme="dark"] .field label { color: #cfd6e3; }
.field-input { position: relative; display: flex; align-items: center; }
.field-input > i { position: absolute; left: 15px; color: #98a2b3; font-size: 1.05rem; pointer-events: none; }
.field-input input { width: 100%; height: 52px; border: 1.5px solid #e4e7ec; border-radius: 14px; padding: 0 48px 0 44px; font-size: 16px; background: #fff; color: #101828; transition: border-color .15s, box-shadow .15s; outline: none; font-family: inherit; }
[data-bs-theme="dark"] .field-input input { background: #121826; border-color: #2a3346; color: #eef1f6; }
.field-input input:focus { border-color: #fe5802; box-shadow: 0 0 0 4px rgba(254, 88, 2, .14); }
.pw-toggle { position: absolute; right: 6px; width: 40px; height: 40px; border: 0; background: transparent; color: #98a2b3; border-radius: 10px; font-size: 1.05rem; }
.pw-toggle:hover { color: #fe5802; background: rgba(254, 88, 2, .08); }
.auth-btn { width: 100%; height: 52px; border: 0; border-radius: 14px; margin-top: 6px; background: #fe5802; color: #fff; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 14px 28px -12px rgba(254, 88, 2, .75); transition: transform .12s, box-shadow .12s, filter .12s; font-family: inherit; }
.auth-btn:hover { background: #e44d00; box-shadow: 0 18px 32px -12px rgba(254, 88, 2, .85); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn i { transition: transform .15s; }
.auth-btn:hover i { transform: translateX(3px); }
.auth-help { color: #667085; font-size: .84rem; margin-top: 22px; text-align: center; }
.auth-help a { color: #e44d00; font-weight: 600; }
.auth-foot { position: absolute; bottom: 18px; color: #98a2b3; font-size: .78rem; }
.auth-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(122, 90, 248, .12); color: #7a5af8; padding: 5px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; margin-bottom: 14px; }

@media (max-width: 991.98px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-body { background: #0b0f19; }
  .auth-panel { justify-content: flex-start; padding: 0; min-height: 100vh; background: #0b0f19; }
  .auth-mobile-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; color: #fff; padding: 52px 24px 64px; margin: 0 -24px; background: #0b0f19; }
  .auth-mobile-brand img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(254, 88, 2, .5)); }
  .auth-mobile-brand strong { display: block; font-size: 1.35rem; }
  .auth-mobile-brand span { color: #9aa3b5; font-size: .85rem; }
  .auth-card { max-width: none; padding: 0 24px; }
  .auth-card > :not(.auth-mobile-brand) { position: relative; }
  .auth-head, .auth-form, .auth-alert, .auth-help { background: transparent; }
  .auth-card { background: #f6f7fb; flex: 1; }
  [data-bs-theme="dark"] .auth-card { background: #0b0f19; }
  .auth-head { margin-top: -30px; background: #f6f7fb; border-radius: 24px 24px 0 0; padding-top: 28px; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  [data-bs-theme="dark"] .auth-head { background: #0b0f19; }
  .auth-head h2 { font-size: 1.5rem; }
  .auth-head p { margin-bottom: 22px; }
  .auth-foot { position: static; padding: 24px 0 calc(24px + env(safe-area-inset-bottom)); background: #f6f7fb; width: 100%; text-align: center; }
  [data-bs-theme="dark"] .auth-foot { background: #0b0f19; }
}