/* =========================================================
   PROFILE SETTINGS MENU
   Ясно разделени теми, настройки и акаунт
   ========================================================= */

.profile-settings-menu {
  --profile-menu-text: #f8fafc;
  --profile-menu-muted: #aebdcb;
  --profile-menu-border: rgba(255, 255, 255, .10);
  --profile-menu-soft-border: rgba(255, 255, 255, .075);
  --profile-menu-card: rgba(255, 255, 255, .035);
  --profile-menu-card-hover: rgba(255, 255, 255, .075);
  --profile-menu-active: linear-gradient(
    135deg,
    rgba(59, 130, 246, .32),
    rgba(139, 92, 246, .24)
  );

  width: 382px !important;
  min-width: 382px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 90px) !important;

  padding: 12px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  color: var(--profile-menu-text) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(59, 130, 246, .13),
      transparent 31%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(139, 92, 246, .10),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(13, 29, 43, .985),
      rgba(5, 19, 32, .99)
    ) !important;

  border:
    1px solid rgba(130, 198, 239, .20) !important;

  border-radius:
    24px !important;

  box-shadow:
    0 28px 70px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .075) !important;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(117, 201, 245, .72)
    rgba(255, 255, 255, .035);
}


/* =========================================================
   USER CARD
   ========================================================= */

.profile-settings-menu .profile-menu-user-card {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(117, 201, 245, .14),
      rgba(255, 255, 255, .035)
    );

  border:
    1px solid rgba(169, 220, 248, .15);

  border-radius: 18px;
}

.profile-menu-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  min-width: 44px;

  color: #08213a;

  background:
    linear-gradient(
      135deg,
      #75c9f5,
      #d9f3ff 62%,
      #f3c85b
    );

  border:
    1px solid rgba(255, 255, 255, .58);

  border-radius: 15px;

  font-size: 1rem;
  font-weight: 950;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .75);
}

.profile-menu-user-info {
  min-width: 0;
}

.profile-menu-user-name {
  max-width: 265px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--profile-menu-text);

  font-size: .95rem;
  font-weight: 850;
}

.profile-menu-role {
  display: inline-flex;

  margin-top: 5px;
  padding: 3px 8px;

  color: #dcecff;

  background:
    rgba(255, 255, 255, .075);

  border:
    1px solid rgba(255, 255, 255, .12);

  border-radius: 999px;

  font-size: .68rem;
  font-weight: 750;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.profile-settings-menu .profile-menu-section {
  margin-top: 10px;
  padding: 10px;

  background:
    var(--profile-menu-card);

  border:
    1px solid var(--profile-menu-soft-border);

  border-radius: 18px;
}

.profile-section-heading {
  display: flex;
  align-items: center;
  gap: 9px;

  padding:
    1px 2px 9px;
}

.profile-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;
  min-width: 31px;

  color: #cfeeff;

  background:
    rgba(117, 201, 245, .11);

  border:
    1px solid rgba(169, 220, 248, .14);

  border-radius: 10px;
}

.profile-section-title {
  color: var(--profile-menu-text);

  font-size: .84rem;
  font-weight: 850;
  line-height: 1.15;
}

.profile-section-note {
  margin-top: 2px;

  color: var(--profile-menu-muted);

  font-size: .68rem;
  line-height: 1.2;
}


/* =========================================================
   THEME GRID
   ========================================================= */

.profile-theme-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

body .profile-settings-menu .profile-theme-option {
  position: relative;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  min-width: 0;
  min-height: 54px;

  padding:
    8px 30px 8px 9px !important;

  color:
    var(--profile-menu-text) !important;

  background:
    rgba(255, 255, 255, .035) !important;

  border:
    1px solid rgba(255, 255, 255, .075) !important;

  border-radius:
    14px !important;

  white-space:
    normal !important;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}

body .profile-settings-menu .profile-theme-option:hover {
  color:
    #ffffff !important;

  background:
    var(--profile-menu-card-hover) !important;

  border-color:
    rgba(169, 220, 248, .24) !important;

  transform:
    translateY(-1px) !important;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, .17) !important;
}

body .profile-settings-menu .profile-theme-option.active {
  color:
    #ffffff !important;

  background:
    var(--profile-menu-active) !important;

  border-color:
    rgba(147, 197, 253, .66) !important;

  box-shadow:
    0 8px 22px rgba(37, 99, 235, .20),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

body .profile-settings-menu
.profile-theme-option.active::after {
  content: "✓";

  position: absolute;
  top: 7px;
  right: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 19px;
  height: 19px;

  color: #08213a;

  background: #ffffff;

  border-radius: 50%;

  font-size: .68rem;
  font-weight: 950;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, .22);
}

.profile-theme-preview {
  display: block;

  width: 27px;
  height: 27px;
  min-width: 27px;

  border:
    2px solid rgba(255, 255, 255, .55);

  border-radius: 9px;

  box-shadow:
    0 5px 12px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .34);
}

.profile-theme-name {
  min-width: 0;

  color: inherit;

  font-size: .78rem;
  font-weight: 750;
  line-height: 1.16;

  overflow-wrap: anywhere;
}


/* Цветни миниатюри на темите */

.theme-preview-dark {
  background:
    linear-gradient(
      135deg,
      #0f172a,
      #334155
    );
}

.theme-preview-light {
  background:
    linear-gradient(
      135deg,
      #ffffff,
      #dbeafe
    );
}

.theme-preview-stranger {
  background:
    linear-gradient(
      135deg,
      #080609 0%,
      #7b1025 55%,
      #ed2547 100%
    );
}

.theme-preview-anime {
  background:
    linear-gradient(
      135deg,
      #ff72c6 0%,
      #a884ff 52%,
      #6ee7ff 100%
    );
}

.theme-preview-pink {
  background:
    linear-gradient(
      135deg,
      #ff5fa8 0%,
      #ffadd3 54%,
      #c8a7ff 100%
    );
}

.theme-preview-cr7 {
  background:
    linear-gradient(
      135deg,
      #111820 0%,
      #f2c94c 58%,
      #e6243f 100%
    );
}

.theme-preview-messi {
  background:
    linear-gradient(
      135deg,
      #75c9f5 0%,
      #ffffff 57%,
      #f3c85b 100%
    );
}

.theme-preview-bulgaria {
  background:
    linear-gradient(
      180deg,
      #ffffff 0% 33.33%,
      #2ea35a 33.33% 66.66%,
      #d0323a 66.66% 100%
    );
}


/* =========================================================
   ANSWER LABEL OPTIONS
   ========================================================= */

.profile-answer-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}

body .profile-settings-menu .profile-answer-option {
  position: relative;

  display: flex !important;
  align-items: center !important;
  gap: 9px !important;

  min-width: 0;
  min-height: 58px;

  padding:
    8px 28px 8px 9px !important;

  color:
    var(--profile-menu-text) !important;

  background:
    rgba(255, 255, 255, .035) !important;

  border:
    1px solid rgba(255, 255, 255, .075) !important;

  border-radius:
    14px !important;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease !important;
}

body .profile-settings-menu .profile-answer-option:hover {
  color:
    #ffffff !important;

  background:
    rgba(255, 255, 255, .075) !important;

  border-color:
    rgba(169, 220, 248, .25) !important;

  transform:
    translateY(-1px) !important;
}

body .profile-settings-menu .profile-answer-option.active {
  color:
    #ffffff !important;

  background:
    var(--profile-menu-active) !important;

  border-color:
    rgba(147, 197, 253, .66) !important;

  box-shadow:
    0 8px 22px rgba(37, 99, 235, .19),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

body .profile-settings-menu
.profile-answer-option.active::after {
  content: "✓";

  position: absolute;
  top: 7px;
  right: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  color: #08213a;

  background: #ffffff;

  border-radius: 50%;

  font-size: .65rem;
  font-weight: 950;
}

.profile-answer-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;
  min-width: 31px;

  color: #08213a;

  background:
    linear-gradient(
      135deg,
      #75c9f5,
      #d9f3ff
    );

  border:
    1px solid rgba(255, 255, 255, .60);

  border-radius: 10px;

  font-size: .85rem;
  font-weight: 950;
}

.profile-answer-copy {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.profile-answer-copy strong {
  color: inherit;

  font-size: .75rem;
  line-height: 1.1;
}

.profile-answer-copy small {
  margin-top: 3px;

  color: var(--profile-menu-muted) !important;

  font-size: .63rem;
  line-height: 1.1;
}


/* =========================================================
   PROFILE ACTIONS
   ========================================================= */

.profile-menu-action-list {
  display: grid;
  gap: 5px;
}

body .profile-settings-menu .profile-menu-action {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  min-height: 43px;

  padding:
    6px 8px !important;

  color:
    var(--profile-menu-text) !important;

  background:
    transparent !important;

  border:
    1px solid transparent !important;

  border-radius:
    12px !important;

  font-size:
    .80rem !important;

  font-weight:
    700 !important;

  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease !important;
}

body .profile-settings-menu .profile-menu-action:hover {
  color:
    #ffffff !important;

  background:
    rgba(255, 255, 255, .065) !important;

  border-color:
    rgba(255, 255, 255, .075) !important;

  transform:
    translateX(2px) !important;
}

.profile-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;
  min-width: 31px;

  border-radius:
    10px;

  font-size:
    .84rem;
}

.profile-action-icon-certificate {
  color: #3b2600;

  background:
    linear-gradient(
      135deg,
      #f3c85b,
      #ffe99f
    );
}

.profile-action-icon-guide {
  color: #06374d;

  background:
    linear-gradient(
      135deg,
      #75c9f5,
      #ccefff
    );
}

.profile-action-icon-trash {
  color: #3c2800;

  background:
    linear-gradient(
      135deg,
      #f3c85b,
      #ffe9a5
    );
}

.profile-action-icon-delete {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #c24155,
      #ed657a
    );
}

.profile-action-icon-logout {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #dc2626,
      #f87171
    );
}

.profile-action-arrow {
  margin-left: auto;

  color:
    var(--profile-menu-muted);

  font-size:
    .70rem;
}

body .profile-settings-menu .profile-menu-danger {
  color:
    #ffc5ce !important;
}

body .profile-settings-menu .profile-menu-logout {
  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      rgba(220, 38, 38, .19),
      rgba(239, 68, 68, .10)
    ) !important;

  border-color:
    rgba(248, 113, 113, .19) !important;
}

body .profile-settings-menu .profile-menu-logout:hover {
  background:
    linear-gradient(
      135deg,
      rgba(220, 38, 38, .30),
      rgba(239, 68, 68, .17)
    ) !important;

  border-color:
    rgba(248, 113, 113, .31) !important;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

body.theme-light .profile-settings-menu {
  --profile-menu-text: #172033;
  --profile-menu-muted: #64748b;
  --profile-menu-border: rgba(15, 23, 42, .10);
  --profile-menu-soft-border: rgba(15, 23, 42, .075);
  --profile-menu-card: rgba(15, 23, 42, .025);
  --profile-menu-card-hover: rgba(37, 99, 235, .07);
  --profile-menu-active: linear-gradient(
    135deg,
    #dbeafe,
    #ede9fe
  );

  color:
    #172033 !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(59, 130, 246, .10),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      #f7fafc
    ) !important;

  border-color:
    rgba(15, 23, 42, .10) !important;

  box-shadow:
    0 28px 70px rgba(15, 23, 42, .18),
    inset 0 1px 0 #ffffff !important;
}

body.theme-light
.profile-settings-menu
.profile-menu-user-card {
  background:
    linear-gradient(
      135deg,
      #eff8ff,
      #ffffff
    );

  border-color:
    rgba(37, 99, 235, .10);
}

body.theme-light
.profile-settings-menu
.profile-menu-role {
  color: #334155;

  background:
    #eef2f7;

  border-color:
    rgba(15, 23, 42, .09);
}

body.theme-light
.profile-settings-menu
.profile-section-icon {
  color: #1d4ed8;

  background: #eaf3ff;

  border-color:
    rgba(37, 99, 235, .11);
}

body.theme-light
.profile-settings-menu
.profile-theme-option,

body.theme-light
.profile-settings-menu
.profile-answer-option {
  color:
    #172033 !important;

  background:
    rgba(15, 23, 42, .025) !important;

  border-color:
    rgba(15, 23, 42, .075) !important;
}

body.theme-light
.profile-settings-menu
.profile-theme-option:hover,

body.theme-light
.profile-settings-menu
.profile-answer-option:hover {
  color:
    #172033 !important;

  background:
    #eef6ff !important;

  border-color:
    rgba(37, 99, 235, .18) !important;
}

body.theme-light
.profile-settings-menu
.profile-theme-option.active,

body.theme-light
.profile-settings-menu
.profile-answer-option.active {
  color:
    #172033 !important;

  background:
    var(--profile-menu-active) !important;

  border-color:
    rgba(37, 99, 235, .36) !important;
}

body.theme-light
.profile-settings-menu
.profile-menu-action {
  color:
    #172033 !important;
}

body.theme-light
.profile-settings-menu
.profile-menu-action:hover {
  color:
    #172033 !important;

  background:
    #eef6ff !important;

  border-color:
    rgba(37, 99, 235, .10) !important;
}

body.theme-light
.profile-settings-menu
.profile-menu-danger {
  color:
    #b4233b !important;
}

body.theme-light
.profile-settings-menu
.profile-menu-logout {
  color:
    #b42318 !important;

  background:
    #fff1f2 !important;

  border-color:
    #fecdd3 !important;
}


/* =========================================================
   SMALL SCREENS
   ========================================================= */

@media (max-width: 420px) {
  .profile-settings-menu {
    width:
      calc(100vw - 20px) !important;

    min-width:
      0 !important;

    padding:
      10px !important;

    border-radius:
      20px !important;
  }

  .profile-theme-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .profile-theme-name {
    font-size:
      .73rem;
  }

  .profile-menu-user-name {
    max-width:
      230px;
  }
}

@media (max-width: 340px) {
  .profile-theme-grid,
  .profile-answer-grid {
    grid-template-columns:
      1fr;
  }
}