/* AI-HANDOFF-NOTICE: Before modifying this file, read C:\Users\BranQiu\Desktop\wwwroot\ORDERINFO3_PROJECT_HANDOFF.md. After modifying code, append/update that handoff log. */
.known-login{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px 14px 12px;
  margin:12px 0 14px;
  border-radius:18px;
  background: color-mix(in srgb, var(--btn) 8%, var(--bg-elevated-2));
  border:1px solid color-mix(in srgb, var(--btn) 20%, var(--line));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
}
.known-main{display:flex;align-items:center;gap:12px;min-width:0}
.login-avatar{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: color-mix(in srgb, var(--btn) 14%, var(--bg-elevated));
  color: var(--btn);
  font-size:20px;
  font-weight:850;
  flex:0 0 auto;
}
.login-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.known-name{font-size:16px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.known-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.known-login .btn{border-radius:14px}
.history-accounts{display:grid;gap:8px;margin:8px 0}
.history-account{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bg-elevated-2);
}
.history-account .mini{width:34px;height:34px;border-radius:12px;font-size:14px}
.history-account button{flex:0 0 auto}
.trust-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 0;
  color:var(--text);
  font-size:13px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--btn) 14%, var(--line));
  background: color-mix(in srgb, var(--bg-elevated-2) 84%, var(--btn) 5%);
  border-radius:14px;
}
.trust-row input{width:16px;height:16px}
.login-other{width:100%;margin-top:10px;border-radius:14px}
.hidden{display:none !important}
@media (max-width:480px){
  .known-login{align-items:stretch;flex-direction:column}
  .known-login .btn{width:100%}
}