@keyframes ap-spin {
  to {
    transform: rotate(360deg);
  }
}

#ff-account-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.55);
  font-family: Montserrat, "Noto Sans", "Segoe UI", sans-serif;
}

@media (min-width: 640px) {
  #ff-account-profile-modal {
    align-items: center;
    padding: 16px;
  }
}

#ff-account-profile-modal .ap-card {
  width: 100%;
  max-width: 440px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  color: #b4b4b4;
  border: 1px solid #2a2a2a;
  border-bottom: 0;
}

@media (min-width: 640px) {
  #ff-account-profile-modal .ap-card {
    max-height: 86vh;
    border-radius: 4px;
    border-bottom: 1px solid #2a2a2a;
  }
}

#ff-account-profile-modal .ap-head {
  background: #0a0a0a;
  border-bottom: 1px solid #2a2a2a;
  padding: 12px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

#ff-account-profile-modal .ap-head-title {
  font-size: 15px;
  font-weight: 700;
  color: #d6d6d6;
}

#ff-account-profile-modal .ap-head-sub {
  font-size: 11px;
  color: #8f8f8f;
  margin-top: 2px;
}

#ff-account-profile-modal .ap-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 2px;
  background: #161616;
  color: #cfcfcf;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

#ff-account-profile-modal .ap-scroll {
  padding: 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #0a0a0a;
  flex: 1 1 auto;
  min-height: 0;
}

#ff-account-profile-modal .ap-foot {
  flex-shrink: 0;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #2a2a2a;
  background: #0a0a0a;
}

#ff-account-profile-modal .ap-foot[hidden] {
  display: none !important;
}

#ff-account-profile-modal .ap-identity {
  position: relative;
  overflow: hidden;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid #2a2a2a;
  border-left: 3px solid #e60012;
  border-radius: 6px;
  background: linear-gradient(165deg, #141414 0%, #0a0a0a 72%);
}

#ff-account-profile-modal .ap-identity-banner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0.7;
  pointer-events: none;
}

#ff-account-profile-modal .ap-identity-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.88) 78%);
}

#ff-account-profile-modal .ap-hero {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: center;
}

#ff-account-profile-modal .ap-avatar {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 2px solid #e60012;
  background: #1a1a1a;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

#ff-account-profile-modal .ap-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#ff-account-profile-modal .ap-nick {
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  overflow-wrap: anywhere;
}

#ff-account-profile-modal .ap-id {
  font-size: 12px;
  color: #9a9a9a;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

#ff-account-profile-modal .ap-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

#ff-account-profile-modal .ap-metric {
  text-align: center;
  padding: 9px 6px;
  background: #000;
  border: 1px solid #262626;
  border-radius: 4px;
}

#ff-account-profile-modal .ap-metric span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8f8f8f;
  margin-bottom: 3px;
}

#ff-account-profile-modal .ap-metric b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

#ff-account-profile-modal .ap-metric.is-level b {
  color: #e60012;
}

#ff-account-profile-modal .ap-bio {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: #c4c4c4;
  margin: 12px 0 0;
  line-height: 1.45;
  padding-left: 10px;
  border-left: 2px solid #333;
}

#ff-account-profile-modal .ap-loadout-label {
  position: relative;
  z-index: 1;
  margin: 12px 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8f8f8f;
}

#ff-account-profile-modal .ap-loadout {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#ff-account-profile-modal .ap-loadout img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid #2f2f2f;
  border-radius: 6px;
  background: #000;
}

#ff-account-profile-modal .ap-more {
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  background: #000;
  margin: 12px 0 4px;
}

#ff-account-profile-modal .ap-more > summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #d0d0d0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#ff-account-profile-modal .ap-more > summary::-webkit-details-marker {
  display: none;
}

#ff-account-profile-modal .ap-more > summary::after {
  content: "+";
  color: #e60012;
  font-size: 16px;
  font-weight: 700;
}

#ff-account-profile-modal .ap-more[open] > summary {
  border-bottom: 1px solid #2a2a2a;
}

#ff-account-profile-modal .ap-more[open] > summary::after {
  content: "–";
}

#ff-account-profile-modal .ap-more-body {
  padding: 12px;
}

#ff-account-profile-modal .ap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

#ff-account-profile-modal .ap-cell {
  background: #000;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 8px 10px;
}

#ff-account-profile-modal .ap-cell span {
  display: block;
  font-size: 10px;
  color: #8f8f8f;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}

#ff-account-profile-modal .ap-cell b {
  font-size: 12px;
  color: #d0d0d0;
  font-weight: 700;
  word-break: break-word;
}

#ff-account-profile-modal .ap-sec {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #d0d0d0;
}

#ff-account-profile-modal .ap-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#ff-account-profile-modal .ap-item {
  width: 64px;
  text-align: center;
}

#ff-account-profile-modal .ap-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  background: #000;
  display: block;
}

#ff-account-profile-modal .ap-item small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: #8f8f8f;
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
}

#ff-account-profile-modal .ap-ban {
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  padding: 10px 12px;
  margin: 0 0 10px;
  background: #000;
}

#ff-account-profile-modal .ap-ban.is-ban {
  border-color: #e60012;
  background: #3a1214;
}

#ff-account-profile-modal .ap-ban span {
  display: block;
  font-size: 10px;
  color: #8f8f8f;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#ff-account-profile-modal .ap-ban strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
  color: #e60012;
}

#ff-account-profile-modal .ap-ban em {
  display: block;
  font-size: 12px;
  color: #b4b4b4;
  margin-top: 6px;
  font-style: normal;
  line-height: 1.45;
}

#ff-account-profile-modal .ap-ask {
  font-size: 13px;
  color: #cfcfcf;
  line-height: 1.45;
  margin: 0 0 10px;
}

#ff-account-profile-modal .ap-agree-box {
  border: 1px solid #2a2a2a;
  background: #000;
  border-radius: 4px;
  margin: 0 0 10px;
}

#ff-account-profile-modal .ap-agree-box > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e60012;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#ff-account-profile-modal .ap-agree-box > summary::-webkit-details-marker {
  display: none;
}

#ff-account-profile-modal .ap-agree-box > summary::after {
  content: "+";
  color: #e60012;
  font-size: 16px;
  font-weight: 700;
}

#ff-account-profile-modal .ap-agree-box[open] > summary {
  border-bottom: 1px solid #2a2a2a;
}

#ff-account-profile-modal .ap-agree-box[open] > summary::after {
  content: "–";
}

#ff-account-profile-modal .ap-agree-body {
  padding: 10px 12px 12px;
}

#ff-account-profile-modal .ap-agree-body p {
  font-size: 12px;
  line-height: 1.5;
  color: #b4b4b4;
  margin: 0;
}

#ff-account-profile-modal .ap-agree {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  color: #cfcfcf;
  cursor: pointer;
  font-weight: 600;
  margin: 0 0 10px;
}

#ff-account-profile-modal .ap-agree input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: #e60012;
  width: 15px;
  height: 15px;
}

#ff-account-profile-modal .ap-actions {
  display: flex;
  gap: 8px;
}

#ff-account-profile-modal .ap-btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 2px;
  padding: 12px;
  background: #e60012;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

#ff-account-profile-modal .ap-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#ff-account-profile-modal .ap-btn-ghost {
  display: block;
  width: 100%;
  border: 1px solid #333;
  border-radius: 2px;
  padding: 11px;
  background: #161616;
  color: #d0d0d0;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

#ff-account-profile-modal .ap-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid #222;
  border-top-color: #e60012;
  border-radius: 50%;
  margin: 0 auto 10px;
  animation: ap-spin 0.7s linear infinite;
}

#ff-account-profile-modal .ap-scan {
  padding: 32px 20px 28px;
  text-align: center;
}

#ff-account-profile-modal .ap-scan-title {
  font-size: 14px;
  font-weight: 700;
  color: #d0d0d0;
  margin: 14px 0 18px;
}

#ff-account-profile-modal .ap-scan-list {
  text-align: left;
  max-width: 300px;
  margin: 0 auto;
}

#ff-account-profile-modal .ap-scan-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #8f8f8f;
  padding: 8px 0;
  border-bottom: 1px solid #222;
}

#ff-account-profile-modal .ap-scan-item .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #444;
  flex-shrink: 0;
}

#ff-account-profile-modal .ap-scan-item.is-on {
  color: #d0d0d0;
  font-weight: 600;
}

#ff-account-profile-modal .ap-scan-item.is-on .dot {
  background: #e60012;
}

#ff-account-profile-modal .ap-scan-item.is-ok {
  color: #1b7a3a;
  font-weight: 600;
}

#ff-account-profile-modal .ap-scan-item.is-ok .dot {
  background: #1b7a3a;
}

.ff-verify--done .ff-verify-hint {
  margin-bottom: 8px;
}

.ff-account-page {
  margin-top: 4px;
}

.ff-account-page[hidden] {
  display: none !important;
}

.ff-account-page__label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8f8f8f;
}

.ff-account-page__ban {
  margin-top: 12px;
}

.ff-account-page__btn {
  margin-top: 12px;
  width: 100%;
}

.ff-account-page .ap-identity {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 14px;
  border: 1px solid #2a2a2a;
  border-left: 3px solid #e60012;
  border-radius: 6px;
  background: linear-gradient(165deg, #141414 0%, #0a0a0a 72%);
}

.ff-account-page .ap-identity-banner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0.7;
  pointer-events: none;
}

.ff-account-page .ap-identity-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.88) 78%);
}

.ff-account-page .ap-hero,
.ff-account-page .ap-metrics,
.ff-account-page .ap-bio,
.ff-account-page .ap-loadout-label,
.ff-account-page .ap-loadout {
  position: relative;
  z-index: 1;
}

.ff-account-page .ap-hero {
  display: flex;
  gap: 14px;
  align-items: center;
}

.ff-account-page .ap-avatar {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  border: 2px solid #e60012;
  background: #1a1a1a;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
}

.ff-account-page .ap-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ff-account-page .ap-nick {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.ff-account-page .ap-id {
  font-size: 12px;
  color: #9a9a9a;
  margin-top: 4px;
}

.ff-account-page .ap-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.ff-account-page .ap-metric {
  text-align: center;
  padding: 9px 6px;
  background: #000;
  border: 1px solid #262626;
  border-radius: 4px;
}

.ff-account-page .ap-metric span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8f8f8f;
  margin-bottom: 3px;
}

.ff-account-page .ap-metric b {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.ff-account-page .ap-metric.is-level b {
  color: #e60012;
}

.ff-account-page .ap-bio {
  font-size: 12px;
  color: #c4c4c4;
  margin: 12px 0 0;
  padding-left: 10px;
  border-left: 2px solid #333;
}

.ff-account-page .ap-loadout-label {
  margin: 12px 0 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8f8f8f;
}

.ff-account-page .ap-loadout {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.ff-account-page .ap-loadout img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid #2f2f2f;
  border-radius: 6px;
  background: #000;
}