.ff-sign-in {
  width: min(100%, 440px);
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px;
  background: #10131a;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .24);
  color: #f5f5f7;
}
.ff-sign-in-mark { display: grid; gap: 4px; width: 28px; margin-bottom: 20px; transform: skew(-20deg); }
.ff-sign-in-mark span { height: 4px; border-radius: 8px; background: linear-gradient(90deg, #9a31ff, #ff49b1); }
.ff-sign-in-mark span:nth-child(2) { width: 70%; }
.ff-sign-in-mark span:nth-child(3) { width: 40%; }
.ff-sign-in h3 { margin: 8px 0; font-size: 28px; letter-spacing: -.04em; }
.ff-sign-in .sub { margin: 0 0 25px; }
.ff-sign-in form { display: grid; gap: 12px; }
.ff-sign-in form.hidden { display: none; }
.ff-sign-in label { color: #e8e8ec; font-size: 14px; font-weight: 700; }
.ff-sign-in input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .19); border-radius: 12px; background: #0b0e13; color: #fff; font: inherit; }
.ff-sign-in input:focus { outline: 2px solid #b7ff00; outline-offset: 2px; }
.ff-sign-in .btn { width: 100%; justify-content: center; margin-top: 8px; }
.ff-auth-restart, .ff-auth-resend { justify-self: start; min-height: 44px; border: 0; background: none; color: #b7ff00; font: inherit; cursor: pointer; }
.ff-sign-in button:disabled { opacity: .6; cursor: wait; }
.ff-sign-in input { box-sizing: border-box; font-size: 16px; }
.ff-auth-status { min-height: 22px; margin: 16px 0 0; color: #b8baca; font-size: 13px; }
.ff-account-button { padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: #10131a; color: #f5f5f7; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ff-account-button:hover { border-color: #b7ff00; }
@media (max-width: 540px) { .ff-sign-in { padding: 22px; } }
.artist-share-panel { display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 24px; align-items: center; padding: 28px; }
.artist-share-panel.hidden { display: none; }
.artist-share-panel h2 { margin: 8px 0; }
.artist-share-panel img { display: block; width: 256px; max-width: 100%; height: auto; background: #fff; border-radius: 8px; }
.artist-share-panel img.hidden { display: none; }
.artist-share-link { display: inline-block; overflow-wrap: anywhere; margin: 8px 0 16px; color: #b7ff00; }
.artist-share-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.artist-share-actions .hidden { display: none; }
@media (max-width: 760px) { .artist-share-panel { grid-template-columns: minmax(0, 1fr); padding: 20px; } .artist-share-panel img { grid-row: 1; justify-self: center; } }