/* ============================================================
   DGTechQA — Mobile ACCOUNT tab redesign + unified type scale
   Loaded after whatsapp-mobile.css. Uses the same theme variables
   (light / dark) and the same compact font sizes as Home & Community.
   ============================================================ */

/* ---------- Hero / profile card ---------- */
html[data-mobile-app] #tab-account .acct-hero{
  position:relative;overflow:hidden;padding:0!important;margin-bottom:6px;border-radius:20px!important;
  background:var(--surface)!important;
  box-shadow:0 1px 2px rgba(11,20,26,.10),0 14px 30px -16px rgba(0,128,105,.45)!important;
}
#tab-account.active .acct-hero{animation:acctUp .55s cubic-bezier(.22,1,.36,1) both}

.acct-banner{
  position:relative;overflow:hidden;height:88px;padding:14px 16px 0;text-align:center;
  background:linear-gradient(120deg,#064e46,#0b8f74,#25d366,#0b8f74,#064e46);background-size:300% 100%;
  animation:acctFlow 9s ease-in-out infinite alternate;
}
.acct-banner::after{ /* light sweep */
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%);animation:acctSweep 5s ease-in-out 1s infinite;
}
.acct-banner i.b1,.acct-banner i.b2{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.acct-banner i.b1{width:90px;height:90px;right:-24px;top:-34px;animation:acctFloat 6s ease-in-out infinite}
.acct-banner i.b2{width:56px;height:56px;left:-14px;bottom:-26px;animation:acctFloat 7s ease-in-out -2s infinite}
html[data-mobile-app] #tab-account .acct-banner .auth-logo{color:#fff!important;font-size:19px!important;margin:2px 0 3px;position:relative;z-index:1}
html[data-mobile-app] #tab-account .acct-banner .auth-logo span{color:#b9ffd3!important}
html[data-mobile-app] #tab-account .acct-banner .auth-sub{color:rgba(255,255,255,.9)!important;font-size:11.5px!important;margin:0;position:relative;z-index:1}

.acct-body{padding:0 16px 16px;text-align:center}
.acct-avatar{
  position:relative;width:68px;height:68px;margin:-34px auto 8px;border-radius:50%;padding:3px;
  background:conic-gradient(from 0deg,#25d366,#53bdeb,#7f66ff,#25d366);animation:acctSpin 6s linear infinite;
}
.acct-avatar span{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;
  background:linear-gradient(135deg,#075E54,#25d366);color:#fff;font-size:22px;font-weight:800;letter-spacing:.5px;
  border:3px solid var(--surface);animation:acctSpinBack 6s linear infinite;
}
.acct-avatar .acct-on{
  position:absolute;right:2px;bottom:3px;width:15px;height:15px;border-radius:50%;
  background:#25d366;border:3px solid var(--surface);
}
.acct-avatar .acct-on::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #25d366;animation:acctPing 1.9s ease-out infinite}
.acct-name{font-size:16px;font-weight:800;color:var(--text);line-height:1.25}
.acct-mail{font-size:12px;color:var(--muted);margin-top:2px;word-break:break-all}
.acct-chip{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:4px 11px;border-radius:999px;
  background:var(--tint-soft);color:var(--tint);font-size:10.5px;font-weight:800;letter-spacing:.3px;
}
.acct-chip .acct-dot{width:6px;height:6px;border-radius:50%;background:#25d366;animation:acctBlink 1.6s ease-in-out infinite}

.acct-actions{display:flex;gap:10px;margin-top:14px}
.acct-btn{
  position:relative;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 10px;border-radius:14px;font-size:12.5px;font-weight:800;text-decoration:none;
  transition:transform .15s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent;
}
.acct-btn i{font-size:12px}
.acct-btn.primary{flex:1.5;background:linear-gradient(135deg,#128C7E,#25d366);color:#fff;box-shadow:0 8px 16px -8px rgba(18,140,126,.7)}
.acct-btn.ghost{background:rgba(234,0,56,.08);color:var(--red)}
.acct-btn:active{transform:scale(.95)}

.acct-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.acct-sc{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:14px;text-decoration:none;
  background:var(--surface2);color:var(--text);font-size:10.5px;font-weight:700;transition:transform .15s,background .2s;
}
.acct-sc i{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff}
.acct-sc:nth-child(1) i{background:linear-gradient(135deg,#027eb5,#53bdeb)}
.acct-sc:nth-child(2) i{background:linear-gradient(135deg,#128C7E,#25d366)}
.acct-sc:nth-child(3) i{background:linear-gradient(135deg,#7f66ff,#a58dff)}
.acct-sc:active{transform:scale(.93)}

/* guest form inside the hero */
html[data-mobile-app] #tab-account .acct-body .form-group{text-align:left}
html[data-mobile-app] #tab-account .acct-hero .form-group input{background:var(--surface2)!important;border:1px solid var(--border)!important;border-radius:12px!important;transition:border-color .2s,box-shadow .2s}
html[data-mobile-app] #tab-account .acct-hero .form-group input:focus{border-color:#25d366!important;box-shadow:0 0 0 3px rgba(37,211,102,.18)!important}
html[data-mobile-app] #tab-account .acct-body .btn-auth{border-radius:14px!important;background:linear-gradient(135deg,#128C7E,#25d366)!important}

/* ---------- Quick access list ---------- */
html[data-mobile-app] #tab-account .sec-label{margin:18px 0 8px 4px!important}
html[data-mobile-app] #tab-account .auth-links-row{gap:9px!important}
html[data-mobile-app] #tab-account .auth-link-item{
  position:relative;overflow:hidden;gap:12px!important;padding:11px 12px!important;border-radius:16px!important;
  background:var(--surface)!important;box-shadow:0 1px 2px rgba(11,20,26,.10)!important;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s!important;-webkit-tap-highlight-color:transparent;
}
#tab-account.active .auth-link-item{animation:acctSlide .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.14s + var(--i,0)*.07s)}
html[data-mobile-app] #tab-account .auth-link-item:active{transform:scale(.97);background:var(--surface2)!important}
html[data-mobile-app] #tab-account .ali-icon{
  width:38px!important;height:38px!important;border-radius:12px!important;font-size:15px!important;color:#fff!important;
  box-shadow:0 6px 12px -6px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
html[data-mobile-app] #tab-account .auth-link-item:active .ali-icon{transform:rotate(-8deg) scale(1.1)}
.ali-icon.a-blue{background:linear-gradient(135deg,#027eb5,#53bdeb)!important}
.ali-icon.a-green{background:linear-gradient(135deg,#128C7E,#25d366)!important}
.ali-icon.a-red{background:linear-gradient(135deg,#d6153f,#ff6b81)!important}
.ali-icon.a-amber{background:linear-gradient(135deg,#f59e0b,#ffc94d)!important}
.ali-icon.a-grey{background:linear-gradient(135deg,#566573,#8696a0)!important}
html[data-mobile-app] #tab-account .ali-label{font-size:13px!important;font-weight:800!important;color:var(--text)!important;line-height:1.25}
html[data-mobile-app] #tab-account .ali-sub{font-size:11px!important;color:var(--muted)!important;margin-top:1px!important}
html[data-mobile-app] #tab-account .ali-arrow{font-size:10px!important;color:var(--dim)!important;transition:transform .2s}
html[data-mobile-app] #tab-account .auth-link-item:active .ali-arrow{transform:translateX(4px)}

/* ripple (added by JS) */
.acct-rip{position:absolute;border-radius:50%;background:rgba(37,211,102,.28);transform:scale(0);pointer-events:none;animation:acctRip .6s ease-out forwards}
.acct-btn.primary .acct-rip{background:rgba(255,255,255,.4)}

/* ---------- Keyframes ---------- */
@keyframes acctUp{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes acctSlide{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes acctFlow{to{background-position:100% 0}}
@keyframes acctSweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes acctFloat{50%{transform:translate(8px,10px) scale(1.08)}}
@keyframes acctSpin{to{transform:rotate(360deg)}}
@keyframes acctSpinBack{to{transform:rotate(-360deg)}}
@keyframes acctPing{from{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.9)}}
@keyframes acctBlink{50%{opacity:.35}}
@keyframes acctRip{to{transform:scale(3.2);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .acct-banner,.acct-banner::after,.acct-banner i,.acct-avatar,.acct-avatar span,.acct-avatar .acct-on::after,.acct-chip .acct-dot,
  #tab-account.active .acct-hero,#tab-account.active .auth-link-item{animation:none!important}
}
@media (max-width:360px){.acct-actions{flex-direction:column}}