/* Sign in / sign up window (glass-card design), header avatar menu and account settings.
   Same palette as the rest of the shop (DMarket's colours, #ffc950 accent). */
.au-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); }
.au-overlay.open { display: flex; }
.au-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px 24px 24px;
  border: 1px solid #222;
  border-radius: 18px;
  background: #121212;
  color: #e5e5e5;
  font-family: Montserrat, Arial, sans-serif;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.au-dialog h2 { margin: 0; font-size: 22px; font-weight: 800; color: #fff; }
.au-dialog code { padding: 1px 5px; border-radius: 4px; background: #1e1e1e; font-size: 12px; }
.au-sub { margin: 8px 0 18px; font-size: 13px; line-height: 1.55; color: #8a8a8a; }
.au-sub b { color: #e5e5e5; }
.au-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: #8a8a8a; cursor: pointer; }
.au-close:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }



.au-field { display: flex; flex-direction: column; gap: 6px; }
.au-field > span { font-size: 12px; font-weight: 600; color: #cfcfcf; }
.au-input { display: flex; align-items: center; height: 46px; border: 1px solid #2a2a2a; border-radius: 10px; background: #0b0b0b; transition: border-color 0.15s; }
.au-input:focus-within { border-color: #ffc950; }
.au-input input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: 0; background: none; color: #fff; font: 500 14px Montserrat, Arial, sans-serif; }
.au-input input::placeholder { color: #5a5a5a; }
.au-error, .au-info { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.au-error { background: rgba(255, 90, 110, 0.1); color: #ff7a8a; }
.au-info { background: rgba(255, 201, 80, 0.1); color: #ffc950; }

.au-ava-letter { display: inline-grid; place-items: center; background: #ffc950; color: #0b0b0b; font-size: 13px; font-weight: 800; }
.au-menu { position: fixed; z-index: 190; width: 260px; padding: 8px; border: 1px solid #262626; border-radius: 12px; background: #171717; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); font-family: Montserrat, Arial, sans-serif; }
.au-menu[hidden] { display: none; }
.au-menu-head { display: flex; align-items: center; gap: 10px; padding: 6px 6px 12px; margin-bottom: 4px; border-bottom: 1px solid #232323; }
.au-menu-head span { min-width: 0; }
.au-menu-head b { display: block; overflow: hidden; font-size: 14px; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.au-menu-head small { display: block; overflow: hidden; font-size: 12px; color: #6a6a6a; text-overflow: ellipsis; white-space: nowrap; }
.au-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: #d4d4d4; font: 500 13px Montserrat, Arial, sans-serif; text-align: left; cursor: pointer; }
.au-menu button:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.au-menu button svg { color: #6a6a6a; }
.au-menu-out { margin-top: 4px; border-top: 1px solid #232323 !important; border-radius: 0 0 8px 8px !important; color: #ff7a8a !important; }
.au-menu-out svg { color: #ff7a8a !important; }

.au-toast { position: fixed; left: 50%; bottom: 110px; z-index: 210; transform: translateX(-50%); padding: 12px 16px; border: 1px solid #262626; border-radius: 10px; background: #1e1e1e; color: #e5e5e5; font: 500 13px Montserrat, Arial, sans-serif; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); white-space: nowrap; }

@media (max-width: 767px) {
  .au-overlay { align-items: flex-end; padding: 0; }
  .au-dialog { max-height: 92vh; padding: 24px 16px 28px; border-radius: 18px 18px 0 0; }
}

/* Profile picture inside the account sidebar (purchases.js .am-ava). */
.am-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ---------- Account settings ---------- */
.au-settings-overlay { z-index: 205; }
.au-dialog.au-settings { width: min(560px, 100%); padding: 26px 24px 20px; }
.au-sec { padding: 18px 0; border-top: 1px solid #1f1f1f; }
.au-sec:first-of-type { border-top: 0; padding-top: 4px; }
.au-sec h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #fff; }
.au-pic { display: flex; align-items: center; gap: 16px; }
.au-pic .au-ava { width: 72px; height: 72px; font-size: 28px; }
.au-pic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.au-pic-actions small { flex-basis: 100%; font-size: 12px; color: #6a6a6a; }
.au-row { display: flex; align-items: center; gap: 8px; }
.au-row .au-input { flex: 1; }
.au-row .au-hint { flex: 1; }
.au-stack { display: flex; flex-direction: column; gap: 8px; }
.au-stack .au-btn { align-self: flex-start; }
.au-hint { display: block; margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #6a6a6a; }
.au-sec .au-error, .au-sec .au-info { margin-top: 10px; }
.au-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: #ffc950; color: #0b0b0b; font: 700 13px Montserrat, Arial, sans-serif; white-space: nowrap; cursor: pointer; }
.au-btn:hover { filter: brightness(1.08); }
.au-btn:disabled, .au-btn.disabled { opacity: 0.55; cursor: wait; }
.au-btn.ghost { border: 1px solid #2a2a2a; background: none; color: #e5e5e5; }
.au-btn.ghost:hover { border-color: #3a3a3a; filter: none; }
.au-btn.danger { background: #e5484d; color: #fff; }
.au-btn.danger-ghost { margin-top: 10px; border: 1px solid rgba(229, 72, 77, 0.4); background: none; color: #ff7a8a; }
.au-btn.danger-ghost:hover { background: rgba(229, 72, 77, 0.08); filter: none; }
.au-danger h3 { color: #ff7a8a; }
.au-danger .au-row { margin-top: 4px; }
@media (max-width: 767px) {
  .au-dialog.au-settings { padding: 22px 16px 28px; }
  .au-row { flex-wrap: wrap; }
  .au-row .au-btn { flex: 1; }
}

/* ---------- Sign in / sign up card (SignIn1 design) ---------- */
.au-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 384px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(to right, #ffffff10, #121212);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: Inter, Montserrat, Arial, sans-serif;
}
.au-card .au-close { top: 16px; right: 16px; color: #9ca3af; }
.au-logo { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 9999px; background: #0b0b0b; border: 1px solid #262626; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); color: #fff; }
.au-logo img { width: 44px; height: 44px; object-fit: contain; }
.au-logo-letter { font-size: 20px; font-weight: 700; }
.au-title { margin: 0 0 24px; font-size: 24px; line-height: 32px; font-weight: 600; color: #fff; text-align: center; }
.au-text { margin: -12px 0 20px; font-size: 14px; line-height: 1.5; color: #9ca3af; text-align: center; }
.au-text b { color: #fff; font-weight: 500; }
.au-text code { padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); font-size: 12px; }
.au-form { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.au-fields { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.au-in { width: 100%; padding: 12px 20px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: 14px; line-height: 20px; outline: none; }
.au-in::placeholder { color: #d1d5db; }
.au-in:focus { box-shadow: 0 0 0 2px #9ca3af; }
.au-err { font-size: 14px; line-height: 20px; color: #f87171; text-align: left; }
.au-ok { font-size: 14px; line-height: 20px; color: #fce7b6; text-align: left; }
.au-hr { width: 100%; margin: 0; border: 0; border-top: 1px solid currentColor; opacity: 0.1; }
.au-primary { width: 100%; margin-bottom: 12px; padding: 12px 20px; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); cursor: pointer; transition: background-color 0.15s; }
.au-primary:hover { background: rgba(255, 255, 255, 0.2); }
.au-primary:disabled { opacity: 0.6; cursor: wait; }
.au-oauth-buttons { display: flex; gap: 8px; margin-top: 12px; }
.au-google, .au-discord { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 12px 20px; border: 0; border-radius: 9999px; background: linear-gradient(to bottom, #232526, #2d2e30); color: #fff; font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); cursor: pointer; transition: filter 0.15s; }
.au-google:hover, .au-discord:hover { filter: brightness(1.1); }
.au-google svg, .au-discord svg { width: 20px; height: 20px; }
.au-foot { width: 100%; margin-top: 8px; text-align: center; }
.au-foot span { font-size: 12px; line-height: 16px; color: #9ca3af; }
.au-a { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.8); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.au-a:hover { color: #fff; }
.au-fine { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: #6b7280; text-align: center; }
@media (max-width: 767px) {
  .au-card { max-width: none; max-height: 92vh; padding: 28px 20px 32px; border-radius: 24px 24px 0 0; background: linear-gradient(to right, #1d1d1d, #121212); }
}