/* ============================================================================
   IMPERIAL SERVICE — brand skin
   Палитра снята с логотипа: глубокий чёрный + серебро/хром.
   Подключается последним — перекрывает штатную тему Continental.
   ========================================================================== */

/* ------------------------------------------------------------- fonts ----- */
@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/Prata-Cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/Prata-Latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../fonts/Cinzel-Latin.woff2") format("woff2");
}

/* ------------------------------------------------------------- tokens ---- */
:root {
  /* серебряная шкала (снята с бликов логотипа) */
  --silver-50: #f7f9fb;
  --silver-100: #e9edf2;
  --silver-200: #d5dae1;
  --silver-300: #b4bbc4;
  --silver-400: #8d949d;
  --silver-500: #6f767f;
  --silver-600: #545b63;

  /* чёрная шкала */
  --ink-900: #050506;
  --ink-800: #0a0b0d;
  --ink-700: #0f1114;
  --ink-600: #14161a;
  --ink-500: #1b1e23;
  --ink-400: #23272d;

  /* хром */
  --chrome: linear-gradient(
    152deg,
    #f2f5f8 0%,
    #ccd3db 18%,
    #98a0a9 42%,
    #e8edf2 58%,
    #b4bcc5 76%,
    #7d848d 100%
  );
  --chrome-line: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(233, 237, 242, 0.55) 22%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(233, 237, 242, 0.45) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.12);

  --font-display: "Prata", "Palatino Linotype", "Georgia", serif;
  --font-brand: "Cinzel", "Prata", "Palatino Linotype", serif;

  /* --- перекрытие штатных токенов темы --- */
  --scrollbar-track: #0a0b0d;
  --scrollbar-thumb: #2a2e35;
  --scrollbar-thumb-accent: #cfd5dc;
  --box-shadow: 0px 18px 40px -22px #000000, 0 1px 0 0 rgba(255, 255, 255, 0.04) inset;
  --color-backdrop: #050506e6;
  --color-stroke: #2a2e35;
  --color-dividers: #1a1d22;

  --color-neutral-white: #f7f9fb;
  --color-neutral-black: #000;
  --color-neutral-100: #0a0b0d;
  --color-neutral-200: #14161a;
  --color-neutral-300: #1f232a;
  --color-neutral-400: #6f767f;
  --color-neutral-500: #8d949d;
  --color-neutral-800: #d5dae1;
  --color-neutral-900: #f4f6f9;
  --color-neutral-900-rgb: 244, 246, 249;
  --color-shadow: #000000b3;

  --color-primary-300: #6f767f;
  --color-primary-400: #9aa2ab;
  --color-primary-500: #cfd5dc;
  --color-primary-500-rgb: 207, 213, 220;
  --color-primary-600: #aeb6bf;
  --color-primary-800: #d5dae1;

  --color-state-negative: #f0665f;
  --color-state-warning: #dea44a;
  --color-state-positive: #46b077;
  --color-state-info: #5a9fd4;
  --color-state-negative-light: #f0665f26;
  --color-state-warning-light: #dea44a26;
  --color-state-positive-light: #46b07726;
  --color-state-info-light: #5a9fd426;

  --color-admin: #e0524b;
  --color-admin-rgb: 224, 82, 75;
  --color-moder: #46b077;
  --color-moder-rgb: 70, 176, 119;
  --color-arbitrator: #5f7ee0;
  --color-arbitrator-rgb: 95, 126, 224;
  --color-guarantee: #9fd8e8;
  --color-guarantee-rgb: 159, 216, 232;
  --color-partner: #cfd5dc;
  --color-partner-rgb: 207, 213, 220;
  --color-super-user: #cfd5dc;
  --color-super-user-rgb: 207, 213, 220;

  --arbitration-active-color: #cfd5dc;
  --arbitration-aproved-color: #cfd5dc;
  --arbitration-declined-color: #f0665f;
  --arbitration-pending-color: #b4bbc4;
  --arbitration-cancelled-color: #6f767f;
  --deal-waiting-color: #e9edf2;
  --deal-active-color: #cfd5dc;
  --deal-finished-color: #6f767f;
  --deal-cancelled-color: #6f767f;
  --deal-debate-color: #f0665f;
  --deal-request-pending-color: #b4bbc4;
  --deal-request-approved-color: #cfd5dc;
  --deal-request-declined-color: #f0665f;

  --coin-default: #2a2e35;
  --coin-primary: #cfd5dc;
  --coin-secondary: #46b077;
  --coin-tertiary: #f7f9fb;
  --coin-other: #f0665f;

  --border-radius-elements: 0.75rem;
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
}

/* -------------------------------------------------------------- canvas --- */
html {
  background: var(--ink-800);
}
body {
  background-color: var(--ink-800) !important;
  color: var(--silver-200);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 520px at 50% -16%, rgba(214, 222, 231, 0.09), transparent 62%),
    radial-gradient(760px 520px at 92% -6%, rgba(160, 172, 185, 0.06), transparent 60%),
    radial-gradient(900px 700px at 6% 108%, rgba(150, 162, 175, 0.045), transparent 62%);
}
#root,
.app {
  position: relative;
  z-index: 1;
}
::selection {
  background: rgba(207, 213, 220, 0.28);
  color: #fff;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--silver-500);
}

/* --------------------------------------------------------------- header -- */
[class*="_AppTopNav_"] {
  background: linear-gradient(180deg, #08090b 0%, #0b0c0f 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  position: relative;
}
[class*="_AppTopNav_"] .MuiButton-link {
  color: var(--silver-400) !important;
  letter-spacing: 0.06em;
  text-transform: none;
  transition: color var(--transition-base), opacity var(--transition-base);
}
[class*="_AppTopNav_"] .MuiButton-link:hover {
  color: var(--silver-100) !important;
}

header[class*="_AppHeader_"] {
  background:
    linear-gradient(180deg, rgba(22, 25, 30, 0.94) 0%, rgba(12, 14, 17, 0.96) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 44px -26px #000, 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
header[class*="_AppHeader_"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--chrome-line);
  opacity: 0.75;
  pointer-events: none;
}

/* ---------------------------------------------------------------- logo --- */
a[class*="_logoLink_"] {
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* старый Continental-знак убираем, вместо него — герб Imperial */
svg[class*="_logo_"] {
  width: 46px !important;
  height: 46px !important;
  background: url("../../brand/emblem.png") center/contain no-repeat;
  background-image: image-set(
    url("../../brand/emblem.webp") type("image/webp"),
    url("../../brand/emblem.png") type("image/png")
  );
  filter: brightness(1.22) contrast(1.04)
    drop-shadow(0 3px 12px rgba(196, 206, 217, 0.22));
  transition: filter var(--transition-base);
}
svg[class*="_logo_"] > * {
  opacity: 0;
}
a[class*="_logoLink_"]:hover svg[class*="_logo_"] {
  filter: brightness(1.36) contrast(1.05)
    drop-shadow(0 3px 16px rgba(214, 223, 232, 0.4));
}
a[class*="_logoLink_"]::after {
  content: "IMPERIAL";
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3em;
  line-height: 1;
  padding-left: 1px;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
@media (width <= 900px) {
  a[class*="_logoLink_"]::after {
    display: none;
  }
}
@media (width <= 600px) {
  svg[class*="_logo_"] {
    width: 38px !important;
    height: 38px !important;
  }
}

/* загрузочный экран */
[class*="_logo_1ilq0_"] {
  background: url("../../brand/emblem.png") center/contain no-repeat;
  background-image: image-set(
    url("../../brand/emblem.webp") type("image/webp"),
    url("../../brand/emblem.png") type("image/png")
  );
}
[class*="_logo_1ilq0_"] > * {
  opacity: 0;
}

/* -------------------------------------------------------------- buttons -- */
/* «Вход» и активный таб — раньше ядовито-жёлтые, теперь хром */
.MuiButtonBase-root.MuiButton-textPrimary,
.MuiTab-root.Mui-selected {
  background-color: transparent !important;
  background-image: var(--chrome) !important;
  color: #0a0c0f !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 6px rgba(0, 0, 0, 0.16),
    0 10px 24px -14px rgba(214, 223, 233, 0.85) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: filter var(--transition-base), transform var(--transition-base),
    box-shadow var(--transition-base);
}
.MuiButtonBase-root.MuiButton-textPrimary:hover,
.MuiTab-root.Mui-selected:hover {
  filter: brightness(1.07) saturate(0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 14px 28px -14px rgba(224, 231, 239, 0.95) !important;
}
.MuiButtonBase-root.MuiButton-textPrimary .MuiSvgIcon-root,
.MuiTab-root.Mui-selected svg {
  color: #0a0c0f !important;
}

/* вторичные кнопки (Каталог, Публикация, Зарегистрироваться) */
.MuiButtonBase-root.MuiButton-textSecondary,
.MuiButtonBase-root.MuiButton-containedSecondary {
  background-color: var(--ink-500) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
  color: var(--silver-100) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px -18px #000;
  letter-spacing: 0.02em;
  transition: border-color var(--transition-base), background-color var(--transition-base),
    color var(--transition-base);
}
.MuiButtonBase-root.MuiButton-textSecondary:hover,
.MuiButtonBase-root.MuiButton-containedSecondary:hover {
  background-color: var(--ink-400) !important;
  border-color: rgba(233, 237, 242, 0.22) !important;
  color: #fff !important;
}

/* «Публикация» с плюсом — акцентная рамка */
[class*="_floatingCreatePublication_"] {
  background-image: var(--chrome) !important;
  color: #0a0c0f !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  font-weight: 600;
}

/* ссылочные кнопки «Все статьи», «FAQ» */
.MuiButton-link {
  color: var(--silver-400) !important;
}
.MuiButton-link:hover {
  color: var(--silver-100) !important;
}

/* ------------------------------------------------------------------ tabs - */
.MuiTab-root.MuiButton-textSecondary:not(.Mui-selected) {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: var(--silver-300) !important;
  box-shadow: none !important;
}
.MuiTab-root.MuiButton-textSecondary:not(.Mui-selected):hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
/* активный таб — хром с тёмным текстом (перебивает правило выше) */
.MuiTab-root.Mui-selected,
.MuiTab-root.MuiButton-textSecondary.Mui-selected,
.MuiTab-root.MuiButton-textSecondary.Mui-selected:hover {
  background-color: transparent !important;
  background-image: var(--chrome) !important;
  color: #0a0c0f !important;
  -webkit-text-fill-color: #0a0c0f !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 6px rgba(0, 0, 0, 0.16),
    0 10px 24px -14px rgba(214, 223, 233, 0.7) !important;
}
.MuiTab-root.Mui-selected .MuiTab-wrapper,
.MuiTab-root.Mui-selected span {
  color: #0a0c0f !important;
  -webkit-text-fill-color: #0a0c0f !important;
}
.MuiTabs-indicator {
  background: var(--chrome) !important;
  height: 2px !important;
}

/* -------------------------------------------------------------- surfaces -- */
/* карточки, панели, баннеры */
.MuiPaper-root {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 42%);
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 44px -30px #000;
}
.MuiPaper-root.MuiDrawer-paper,
.MuiPaper-root.MuiMenu-paper,
.MuiPaper-root.MuiPopover-paper {
  background-color: var(--ink-600);
  background-image: none;
  border: 1px solid var(--hairline-strong);
}
.MuiMenuItem-root:hover,
.MuiMenuItem-root.Mui-selected {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* --------------------------------------------------------------- inputs -- */
.MuiOutlinedInput-root {
  background-color: rgba(5, 6, 8, 0.55);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.09) !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(233, 237, 242, 0.22) !important;
}
.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px rgba(207, 213, 220, 0.12);
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: rgba(233, 237, 242, 0.5) !important;
  border-width: 1px !important;
}
.MuiInputBase-input::placeholder {
  color: var(--silver-500);
  opacity: 0.85;
}

/* ------------------------------------------------------------ typography -- */
h1,
h2,
h3,
.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--silver-50);
  letter-spacing: 0.005em;
}
.MuiTypography-h1 {
  line-height: 1.12 !important;
}
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  color: var(--silver-100);
  letter-spacing: 0.012em;
}
.MuiTypography-body2,
.MuiTypography-caption {
  color: var(--silver-400);
}
a {
  color: var(--silver-200);
}
a:hover {
  color: #fff;
}

/* --------------------------------------------------------------- footer -- */
footer,
[class*="_AppFooter_"] {
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(10, 11, 13, 0) 0%, rgba(6, 7, 9, 0.9) 100%);
  color: var(--silver-400);
}

/* -------------------------------------------------------------- polish --- */
/* тонкая хромовая кромка у скруглённых блоков */
[class*="_PopularArticles_"],
[class*="_NoData_"],
[class*="_Banner"] {
  border-radius: var(--radius-m);
}

/* фокус с клавиатуры */
:focus-visible {
  outline: 2px solid rgba(214, 223, 233, 0.55);
  outline-offset: 2px;
}

/* убираем жёлтый «Не найдено» → благородный алый */
[class*="_error_"] span,
[class*="_error_"] {
  color: var(--color-state-negative) !important;
}