/* Страница героя (public/hero.html) — единственная страница с этой светлой
   темой, по присланному автором скрину (22.09.2026). Остальные страницы
   сайта (карта/магазин/клан/бой) держат прежнюю тёмную золотую тему
   public/style.css — редизайн просили только для этой страницы, поэтому
   здесь своя, полностью отдельная таблица стилей и свой префикс классов
   (hh-*), чтобы точно ничего не пересекалось с style.css. */

:root {
  --hh-bg: #eef1f6;
  --hh-card: #ffffff;
  --hh-border: #e3e7ef;
  --hh-text: #1a1f2b;
  --hh-muted: #7c8494;
  --hh-red: #dc2626;
  --hh-red-dark: #b91c1c;
  --hh-navy: #12172a;
  --hh-green: #16a34a;
  --hh-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hh-bg);
  color: var(--hh-text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
}

.hidden { display: none !important; }

/* Шапка сайта (лого/навигация/колокольчик/профиль) и тост теперь общие для
   всех страниц — вынесены в отдельный public/header.css, подключаемый в
   hero.html ПЕРЕД этим файлом (автор, 22.09.2026: "хедер на всех страницах
   сайта один и тот же"). Здесь остаётся только то, что специфично для самой
   страницы героя. */

/* ---------- Каркас ---------- */

.hh-main { max-width: 1280px; margin: 0 auto; padding: 22px 20px 90px; }

.hh-grid {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1000px) {
  .hh-grid { grid-template-columns: 1fr; }
}

.hh-col { display: flex; flex-direction: column; gap: 18px; }

.hh-card {
  background: var(--hh-card);
  border: 1px solid var(--hh-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--hh-shadow);
}
.hh-card-title { margin: 0 0 12px; font-size: 0.95rem; color: var(--hh-text); }
.hh-card-title-row { display: flex; align-items: center; justify-content: space-between; }
.hh-card-title-row .hh-card-title { margin: 0; }
.hh-muted { color: var(--hh-muted); font-size: 0.85rem; }
.hh-small-note { margin: 8px 0 0; }

/* ---------- Карточка героя ---------- */

.hh-hero-top { display: flex; gap: 14px; align-items: flex-start; }
.hh-hero-avatar {
  width: 84px; height: 84px; border-radius: 14px; background: linear-gradient(160deg, #1a2036, var(--hh-navy));
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem; flex-shrink: 0;
}
.hh-hero-name { font-size: 1.2rem; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hh-role-badge {
  font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: #fde8e8; color: var(--hh-red-dark); display: inline-flex; align-items: center; gap: 3px;
}
.hh-clan-row {
  display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.85rem; color: var(--hh-text);
  text-decoration: none;
}
.hh-clan-row:hover { text-decoration: underline; }
.hh-clan-crest {
  width: 22px; height: 22px; border-radius: 50%; background: #f4f5f8; border: 1px solid var(--hh-border);
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.hh-online-row { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--hh-muted); margin: 4px 0 10px; }
.hh-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hh-green); }
.hh-online-dot.off { background: #c7cbd4; }
.hh-level-row { font-size: 0.85rem; color: var(--hh-muted); margin: 2px 0 12px; }

.hh-bar-block { margin: 12px 0; }
.hh-bar-label { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; }
.hh-bar-bg { background: #eef0f4; border-radius: 8px; height: 10px; overflow: hidden; }
.hh-bar-fill { height: 100%; border-radius: 8px; transition: width 0.35s ease; }
.hh-bar-fill.hh-elo-fill { background: var(--hh-navy); }
.hh-bar-fill.hp-red { background: var(--hh-red); }
.hh-bar-fill.hp-yellow { background: #e0a83a; }
.hh-bar-fill.hp-green { background: var(--hh-green); }
.hh-bar-caption { font-size: 0.75rem; color: var(--hh-muted); margin-top: 4px; }

.hh-elixir-btn {
  margin-top: 8px; width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--hh-red);
  background: #fff; color: var(--hh-red); font-weight: 600; font-size: 0.82rem; cursor: pointer;
}
.hh-elixir-btn:hover { background: #fde8e8; }

/* ---------- Характеристики ---------- */

.hh-stat-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.hh-stat-icon { width: 20px; text-align: center; }
.hh-stat-label { width: 84px; font-size: 0.85rem; color: var(--hh-muted); flex-shrink: 0; }
.hh-stat-bar-wrap { flex: 1; }
.hh-stat-bar-bg { background: #eef0f4; border-radius: 6px; height: 7px; overflow: hidden; }
.hh-stat-bar-fill { height: 100%; background: var(--hh-red); border-radius: 6px; }
.hh-stat-value { width: 28px; text-align: right; font-weight: 700; font-size: 0.85rem; }
.hh-stat-upgrade {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--hh-red); background: #fff;
  color: var(--hh-red); font-size: 0.75rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.hh-stat-upgrade:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- Статус ---------- */
/* Редактирование статуса (бэклог п.4/п.21, автор, 21.09.2026) — клик по
   карандашу подменяет параграф статуса на textarea+кнопки, PATCH
   /api/members/me/status сохраняет (максимум 50 символов, проверяется и на
   бэкенде, см. src/routes/members.ts). */

.hh-status-text { margin: 0; font-size: 0.88rem; color: var(--hh-muted); font-style: italic; }
.hh-status-edit { display: flex; flex-direction: column; gap: 6px; }
.hh-status-edit textarea {
  font: inherit; font-size: 0.85rem; resize: none; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--hh-border); color: var(--hh-text); background: #fafbfc;
}
.hh-status-edit-row { display: flex; align-items: center; gap: 8px; }
.hh-status-edit-row .hh-muted { flex: 1; margin: 0; }
.hh-btn-small {
  font: inherit; font-size: 0.78rem; font-weight: 600; padding: 6px 12px; border-radius: 7px;
  border: 1px solid var(--hh-red); background: var(--hh-red); color: #fff; cursor: pointer;
}
.hh-btn-small.hh-btn-ghost { background: #fff; color: var(--hh-muted); border-color: var(--hh-border); }

/* ---------- Экипировка / портрет (заглушка) ---------- */

.hh-equip-card { display: flex; align-items: stretch; gap: 14px; min-height: 420px; }
.hh-equip-slots { display: flex; flex-direction: column; gap: 12px; width: 110px; flex-shrink: 0; }
.hh-equip-slot {
  border: 1px dashed var(--hh-border); border-radius: 10px; padding: 8px 6px; text-align: center;
  background: #fafbfc; cursor: pointer; color: var(--hh-muted); transition: border-color 0.15s, background 0.15s;
}
.hh-equip-slot .hh-equip-label { font-size: 0.68rem; display: block; margin-bottom: 4px; }
.hh-equip-slot .hh-equip-icon { font-size: 1.3rem; opacity: 0.35; }
/* Слот принимает перетащенную вещь из Гардероба (см. hero.js) — визуальная
   подсветка при наведении и после того, как что-то надето. */
.hh-equip-slot.drag-over { border-color: var(--hh-red); border-style: solid; background: #fde8e8; }
.hh-equip-slot.filled { border-style: solid; border-color: var(--hh-navy); background: #f4f5f8; cursor: pointer; }
.hh-equip-slot.filled .hh-equip-icon { opacity: 1; }
.hh-equip-slot.filled .hh-equip-label { color: var(--hh-text); font-weight: 600; }
.hh-portrait {
  flex: 1; border-radius: 12px; background: linear-gradient(180deg, #f4f5f8, #eceef2);
  display: flex; align-items: center; justify-content: center; font-size: 5.5rem;
  border: 1px solid var(--hh-border); overflow: hidden;
}
/* Выбранный/загруженный портрет героя (см. heroPortraitMarkup в shared.js) —
   картинка вместо эмодзи-заглушки, на обеих версиях (свой кабинет/чужая
   публичная страница) и на маленьком круглом аватаре карточки героя. */
.hh-portrait-img { width: 100%; height: 100%; object-fit: cover; }
.hh-hero-avatar { overflow: hidden; }
.hh-hero-avatar .hh-portrait-img { border-radius: 14px; }
.hh-equip-note { text-align: center; margin: 10px 0 0; }

.hh-edit-hero-btn {
  display: block; text-align: center; text-decoration: none; margin-top: 10px;
  padding: 9px; border-radius: 8px; border: 1px solid var(--hh-navy);
  background: #fff; color: var(--hh-navy); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.hh-edit-hero-btn:hover { background: #f4f5f8; }

/* ---------- Гардероб (правая колонка кабинета персонажа) ---------- */
/* Автор, 22.09.2026, четвёртое сообщение — переиспользует те же карточки/
   категории, что и магазин (public/shop.css), но в узкой колонке, поэтому
   свёрстано отдельно и компактнее. */

.hh-wardrobe-card { display: flex; flex-direction: column; gap: 10px; }
.wd-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-cat-btn {
  font: inherit; font-size: 0.72rem; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--hh-border); background: #fafbfc; color: var(--hh-muted); cursor: pointer;
}
.wd-cat-btn.active { background: var(--hh-navy); border-color: var(--hh-navy); color: #fff; }

.wd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.wd-item {
  border: 1px solid var(--hh-border); border-radius: 10px; padding: 8px 6px; text-align: center;
  background: #fafbfc; cursor: grab; user-select: none;
}
.wd-item:active { cursor: grabbing; }
.wd-item-icon { font-size: 1.4rem; }
.wd-item-name { font-size: 0.68rem; color: var(--hh-muted); margin-top: 3px; line-height: 1.2; }

/* ---------- Нижняя строка: Статистика / Рейтинг / Награды ---------- */
/* Перенесены сюда с прежнего места в правой колонке, чтобы освободить её под
   Гардероб выше (автор, 22.09.2026, четвёртое сообщение). */

.hh-bottom-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 800px) {
  .hh-bottom-row { grid-template-columns: 1fr; }
}

/* ---------- Статистика боёв ---------- */

.hh-stats-row { display: flex; justify-content: space-between; text-align: center; margin-bottom: 10px; }
.hh-stats-row .hh-stat-num-label { font-size: 0.72rem; color: var(--hh-muted); margin-bottom: 2px; }
.hh-stats-row .hh-stat-num { font-size: 1.3rem; font-weight: 800; }
.hh-stat-num.win { color: var(--hh-green); }
.hh-stat-num.loss { color: var(--hh-red); }
.hh-winbar-bg { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: #eef0f4; }
.hh-winbar-fill { background: var(--hh-green); height: 100%; }

/* ---------- Рейтинг / награды (заглушки) ---------- */

.hh-rating-row { display: flex; gap: 10px; justify-content: space-between; }
.hh-rating-tile { flex: 1; text-align: center; background: #fafbfc; border: 1px solid var(--hh-border); border-radius: 10px; padding: 10px 4px; }
.hh-rating-badge { font-size: 1.3rem; margin-bottom: 4px; opacity: 0.5; }
.hh-rating-label { font-size: 0.7rem; color: var(--hh-muted); }
.hh-rating-value { font-weight: 700; font-size: 0.9rem; color: var(--hh-muted); }

.hh-awards-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hh-award-badge {
  width: 42px; height: 42px; border-radius: 10px; background: #fafbfc; border: 1px solid var(--hh-border);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; opacity: 0.5;
}

/* ---------- Недавняя активность ---------- */

.hh-activity-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--hh-border); font-size: 0.82rem; }
.hh-activity-row:last-child { border-bottom: none; }
.hh-activity-outcome.win { color: var(--hh-green); font-weight: 700; }
.hh-activity-outcome.loss { color: var(--hh-red); font-weight: 700; }
.hh-activity-outcome.draw { color: var(--hh-muted); font-weight: 700; }
.hh-activity-time { color: var(--hh-muted); font-size: 0.75rem; white-space: nowrap; }

/* ---------- Онбординг: нет клана ---------- */

.hh-onboarding { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.hh-card-narrow { max-width: 380px; width: 100%; }
.hh-onboarding h2 { margin-top: 0; font-size: 1.05rem; }
.hh-onboarding form { display: flex; flex-direction: column; gap: 10px; }
.hh-onboarding input, .hh-onboarding select, .hh-onboarding button {
  font: inherit; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--hh-border);
}
.hh-onboarding button[type="submit"] { background: var(--hh-red); color: #fff; border: none; font-weight: 600; cursor: pointer; }

/* Кнопка "Создать свой клан" (item 8) — ведёт на public/clan-create.html. */
.hh-nc-create-btn {
  display: block; text-align: center; margin-top: 10px; padding: 11px; border-radius: 10px;
  background: var(--hh-red); color: #fff; font-weight: 700; text-decoration: none; font-size: 0.92rem;
}
.hh-nc-create-btn:hover { background: var(--hh-red-dark); }
.hh-error { color: var(--hh-red); min-height: 1.2em; margin: 0; font-size: 0.85rem; }
.hh-clan-cards { display: flex; flex-direction: column; gap: 8px; }
.hh-clan-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: #fafbfc; border: 1px solid var(--hh-border); border-radius: 10px; padding: 10px 12px;
}
.hh-clan-card .info { font-size: 0.85rem; }
.hh-clan-card .info .hh-muted { display: block; }
.hh-clan-card .btns { display: flex; gap: 6px; }
.hh-clan-card input, .hh-clan-card select { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--hh-border); }
.hh-clan-card button { padding: 6px 12px; border-radius: 6px; border: none; background: var(--hh-red); color: #fff; font-weight: 600; cursor: pointer; }

/* Плашка силы — переиспользуем ту же идею, что и на остальных страницах */
.power-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fafbfc; border: 1px solid var(--hh-red); color: var(--hh-red-dark);
  border-radius: 10px; padding: 1px 7px; font-size: 0.68rem; font-weight: 700;
}

/* ТЗ «Классик» №2: общая карточка героя, характеристики без шкал (п.13), «Редактировать персонажа» под «Статус» (п.3) */
.hh-herocard-slot { margin-bottom: 14px; }
html.embedded .hh-herocard-slot { break-inside: avoid; -webkit-column-break-inside: avoid; }
.hh-stat-row-plain { justify-content: flex-start; }
.hh-stat-row-plain .hh-stat-label { flex: 1; width: auto; font-size: 0.95rem; }
.hh-stat-row-plain .hh-stat-value { width: auto; min-width: 36px; font-size: 1.15rem; }
.hh-col-left .hh-edit-hero-btn { display: block; text-align: center; margin-top: 4px; }

/* Медальоны характеристик под карточкой героя на публичной странице (п.4, п.13 ТЗ «Классик» №2) */
.hh-medal-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
html.embedded .hh-medal-strip { break-inside: avoid; -webkit-column-break-inside: avoid; }
.hh-medal { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.hh-medal-disc {
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--mc) 50%, #1a0d07), #0b0504 75%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc) 75%, #000), 0 0 12px color-mix(in srgb, var(--mc) 45%, transparent);
}
.hh-medal-disc .ic { width: 32px; height: 32px; }
.hh-medal-name { font-size: 0.72rem; color: #efe3d3; white-space: nowrap; }
.hh-medal-val { font-size: 1.25rem; color: var(--mc); font-family: var(--f-num, inherit); }

/* ---------- ТЗ 09.10.2026, п.2–3: кабинет героя ---------- */
/* Гардероб и «Надето» — правая колонка, как в магазине: слева характеристики/статус, в центре герой. */
html.embedded main.hc-main { column-count: auto; column-gap: 0; padding-bottom: 60px; }
html.embedded main.hc-main > section#heroApp {
  display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) var(--hero-gap) minmax(0, 1fr);
}
html.embedded main.hc-main #heroApp > .hh-grid { display: contents; }
html.embedded main.hc-main #heroApp .hh-col { display: block; min-width: 0; }
html.embedded main.hc-main #heroApp .hh-col-left { grid-column: 1; }
html.embedded main.hc-main #heroApp .hh-col-right { grid-column: 3; }
html.embedded main.hc-main .hh-card { margin-bottom: 14px; }
@media (max-width: 900px) {
  html.embedded main.hc-main > section#heroApp { grid-template-columns: 1fr; }
  html.embedded main.hc-main #heroApp .hh-col-left, html.embedded main.hc-main #heroApp .hh-col-right { grid-column: 1; }
}

/* Кнопка «Редактировать персонажа»: крупная, объёмная, с бегущим градиентом и пульсацией. */
.hh-col-left a.hh-edit-hero-btn, a.hh-edit-hero-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
  min-height: 62px; margin-top: 8px; padding: 16px 20px; border-radius: 14px; text-decoration: none;
  font-size: 1.12rem; font-weight: 800; letter-spacing: 0.03em; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  background: linear-gradient(110deg, #ff5a1f 0%, #ffb02e 30%, #ff6a1f 55%, #e0341b 80%, #ff5a1f 100%); background-size: 240% 100%;
  border: 1px solid #ffd27a;
  box-shadow: 0 6px 0 #8f2410, 0 12px 26px rgba(255, 90, 30, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 8px rgba(120, 20, 0, 0.5);
  animation: heBtnFlow 4s linear infinite, heBtnPulse 2.4s ease-in-out infinite;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
a.hh-edit-hero-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg);
  animation: heBtnShine 3.2s ease-in-out infinite;
}
a.hh-edit-hero-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
a.hh-edit-hero-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #8f2410, 0 6px 16px rgba(255, 90, 30, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
@keyframes heBtnFlow { 0% { background-position: 0% 50%; } 100% { background-position: 240% 50%; } }
@keyframes heBtnPulse { 0%, 100% { box-shadow: 0 6px 0 #8f2410, 0 12px 26px rgba(255, 90, 30, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 8px rgba(120, 20, 0, 0.5); } 50% { box-shadow: 0 6px 0 #8f2410, 0 14px 38px rgba(255, 150, 40, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 8px rgba(120, 20, 0, 0.5); } }
@keyframes heBtnShine { 0%, 55% { left: -50%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { a.hh-edit-hero-btn, a.hh-edit-hero-btn::after { animation: none; } }

/* ---------- Публичная страница героя (ТЗ 09.10.2026, п.7): явная сетка вместо CSS-колонок ---------- */
html.embedded main.hp-main { column-count: auto; column-gap: 0; padding-bottom: 60px; }
html.embedded main.hp-main > section#publicHeroApp { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) var(--hero-gap) minmax(0, 1fr); }
html.embedded main.hp-main #publicHeroApp > .hh-grid { display: contents; }
html.embedded main.hp-main #publicHeroApp .hh-col { display: block; min-width: 0; }
html.embedded main.hp-main #publicHeroApp .hh-col-left { grid-column: 1; }
html.embedded main.hp-main #publicHeroApp .hh-col-right { grid-column: 3; }
html.embedded main.hp-main .hh-card { margin-bottom: 14px; }
@media (max-width: 900px) {
  html.embedded main.hp-main > section#publicHeroApp { grid-template-columns: 1fr; }
  html.embedded main.hp-main #publicHeroApp .hh-col-left, html.embedded main.hp-main #publicHeroApp .hh-col-right { grid-column: 1; }
}
/* Кнопки «Вызвать в бой» / «Вызвать клан» — раньше были почти не видны (тёмное стекло на тёмном) */
#heroActions { display: flex; flex-direction: column; gap: 10px; }
html.embedded #heroActions { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
#heroActions .hh-elixir-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin: 0 !important; padding: 12px 16px;
  border-radius: 12px; font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; color: #fff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #ff7a2a, #d4340f) !important; border: 1px solid #ffc94d !important;
  box-shadow: 0 4px 0 #8f2410, 0 8px 20px rgba(255, 90, 30, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.12s, filter 0.12s;
}
#heroActions .hh-elixir-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
#heroActions .hh-elixir-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f2410; }
#heroActions .hh-elixir-btn:disabled { filter: grayscale(0.7); opacity: 0.6; cursor: default; }
#heroActions #challengeBtn { background: linear-gradient(180deg, #4a3a60, #2a1f3a) !important; border-color: #b58aff !important; box-shadow: 0 4px 0 #1a1226, 0 8px 18px rgba(150, 90, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25); }