@charset "UTF-8";

/* ============================================================
   CSS ПЕРЕМЕННЫЕ — Нежно фиолетовая палитра
   ============================================================ */
:root {
  --purple-50:  #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7c3aed;
  --purple-800: #6d28d9;
  --purple-900: #4c1d95;

  --violet-400: #818cf8;
  --violet-500: #6366f1;
  --violet-600: #4f46e5;
  --violet-700: #4338ca;

  --lavender-bg:  #f5f0ff;
  --lavender-mid: #ede8ff;
  --lavender-card:#ffffff;

  --text-primary:   #2d1b69;
  --text-secondary: #5b4d8a;
  --text-muted:     #9585b8;
  --text-white:     #ffffff;

  --border-color:   #ddd6fe;
  --border-focus:   #a855f7;
  --border-hover:   #c084fc;

  --shadow-sm:  0 1px 3px rgba(109, 40, 217, 0.08), 0 1px 2px rgba(109, 40, 217, 0.05);
  --shadow-md:  0 4px 12px rgba(109, 40, 217, 0.12), 0 2px 6px rgba(109, 40, 217, 0.06);
  --shadow-lg:  0 8px 24px rgba(109, 40, 217, 0.15), 0 4px 10px rgba(109, 40, 217, 0.08);
  --shadow-xl:  0 16px 40px rgba(109, 40, 217, 0.18), 0 6px 14px rgba(109, 40, 217, 0.10);
  --shadow-glow:0 0 0 3px rgba(168, 85, 247, 0.20);

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full:9999px;

  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;

  --nav-bg: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #4f46e5 100%);
  --main-nav-color-hover: rgba(255,255,255,0.15);

  /* Шапка таблиц: градиент СТРОГО сверху вниз (180deg).
     Диагональный/горизонтальный градиент каждая ячейка th отрисовывает
     заново от своего левого края, из-за этого столбцы выглядели разными.
     При вертикальном градиенте все ячейки строки идентичны — шапка
     выглядит однотонной, но с градиентом. */
  --table-th-bg: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
}

/* ============================================================
   СБРОС И БАЗОВЫЕ СТИЛИ
   ============================================================ */
html, body {
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding: 0;
  margin: 0;
}

body {
  min-height: 100%;
  font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--lavender-bg);
  background-attachment: fixed;
  background-size: cover;
}

/* ============================================================
   ССЫЛКИ
   ============================================================ */
a {
  color: var(--purple-600);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--purple-400);
  text-decoration: none;
}

/* ============================================================
   ЗАГОЛОВКИ
   ============================================================ */
h1, h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
  text-shadow: none;
  letter-spacing: -0.01em;
}

/* ============================================================
   ПОЛЯ ВВОДА: input, select, textarea
   ============================================================ */
input, select, textarea {
  width: 100%;
  outline: none;
  text-align: left;
  font-size: 13px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-color);
  background-color: #ffffff;
  color: var(--text-primary);
  transition: var(--transition);
  font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: var(--shadow-sm);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-sm), var(--shadow-glow);
  background-color: var(--purple-50);
}

input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: var(--border-hover);
}

input:disabled, select:disabled, textarea:disabled {
  background-color: var(--lavender-mid);
  border-color: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

input::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
  transition: color 0.3s ease;
}

input:focus::placeholder,
select:focus::placeholder,
textarea:focus::placeholder {
  color: var(--purple-400);
}

/* Textarea */
textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

/* Select — кастомная стрелка */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23a855f7' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 8px 10px;
  padding-right: 34px;
}

select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%237c3aed' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
}

/* Валидация — ошибка */
input.error, select.error, textarea.error {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12);
}
input.error:focus, select.error:focus, textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25);
}

/* Валидация — успех */
input.success, select.success, textarea.success {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
input.success:focus, select.success:focus, textarea.success:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

/* Checkbox / Radio / File */
input[type="checkbox"], input[type="radio"], input[type="file"] {
  width: auto;
  vertical-align: top;
  margin-right: 6px;
  box-shadow: none;
}

/* ============================================================
   КАСТОМНЫЙ CHECKBOX
   ============================================================ */
input[type="checkbox"]:not([style]):not([class]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--border-focus);
  border-radius: var(--radius-sm);
  background-color: white;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: var(--transition);
}
input[type="checkbox"]:not([style]):not([class]):hover {
  border-color: var(--purple-700);
  box-shadow: var(--shadow-glow);
}
input[type="checkbox"]:not([style]):not([class]):checked {
  background: linear-gradient(135deg, var(--purple-500), var(--violet-600));
  border-color: var(--purple-600);
}
input[type="checkbox"]:not([style]):not([class]):checked::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Специальный checkbox tosaccept */
input[type="checkbox"][name="tosaccept"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--purple-600);
  border-radius: var(--radius-full);
  background-color: white;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
  margin-right: 6px;
  margin-bottom: 5px;
  vertical-align: middle;
  box-shadow: var(--shadow-sm);
}
input[type="checkbox"][name="tosaccept"]::before {
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--purple-500), var(--purple-700));
  top: 0;
  left: 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
input[type="checkbox"][name="tosaccept"]:checked::before {
  width: 100%;
}
input[type="checkbox"][name="tosaccept"]:checked::after {
  content: '✓';
  color: white;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* ============================================================
   КАСТОМНЫЙ RADIO
   ============================================================ */
input[type="radio"]:not([style]):not([class]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--border-focus);
  border-radius: 50%;
  background: white;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: var(--transition);
  box-shadow: none;
}
input[type="radio"]:not([style]):not([class]):hover {
  border-color: var(--purple-700);
  box-shadow: var(--shadow-glow);
}
input[type="radio"]:not([style]):not([class]):checked {
  border-color: var(--purple-600);
  background: white;
}
input[type="radio"]:not([style]):not([class]):checked::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-500), var(--violet-600));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ============================================================
   КНОПКИ
   ============================================================ */
button {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

/* Базовый .btn */
.btn {
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 8px 10px;
  margin: 4px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  border: none;
  transition: var(--transition);
  background: var(--purple-600);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.01em;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  opacity: 0.92;
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  filter: brightness(0.92);
}

.btn.green  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.btn.green:hover  { background: linear-gradient(135deg, #4ade80, #22c55e); }
.btn.blue   { background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); }
.btn.blue:hover   { background: linear-gradient(135deg, var(--violet-400), var(--violet-600)); }
.btn.red    { background: linear-gradient(135deg, #f87171, #ef4444); }
.btn.red:hover    { background: linear-gradient(135deg, #fca5a5, #f87171); }
.btn.gray   { background: linear-gradient(135deg, #a1a1aa, #71717a); }
.btn.gray:hover   { background: linear-gradient(135deg, #d4d4d8, #a1a1aa); }
.btn.orange { background: linear-gradient(135deg, #fb923c, #ea580c); }
.btn.orange:hover { background: linear-gradient(135deg, #fdba74, #fb923c); }
.btn.black  { background: linear-gradient(135deg, #3f3f46, #18181b); }
.btn.black:hover  { background: linear-gradient(135deg, #52525b, #3f3f46); }

/* sf_button семейство */
.sf_button, .sf_button_red, .sf_button_green, .sf_button_blue,
.sf_button_10, .sf_button_bitcoin, .sf_button_purple,
.sf_button_orange, .sf_button_gray {
  display: inline-block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: #fff;
  cursor: pointer;
  margin: 3px;
  padding: 7px 14px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  transition: var(--transition);
  border: none;
}
.sf_button         { background: linear-gradient(135deg, #8b9dc3, #6b7fa0); }
.sf_button_red     { background: linear-gradient(135deg, #f87171, #dc2626); }
.sf_button_green   { background: linear-gradient(135deg, #4ade80, #16a34a); }
.sf_button_blue    { background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); }
.sf_button_10      { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.sf_button_bitcoin { background: linear-gradient(135deg, #fbbf24, #d97706); }
.sf_button_purple  { background: linear-gradient(135deg, var(--purple-400), var(--purple-700)); }
.sf_button_orange  { background: linear-gradient(135deg, #fb923c, #c2410c); }
.sf_button_gray    { background: linear-gradient(135deg, #a1a1aa, #52525b); }

.sf_button:hover, .sf_button:active         { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sf_button_red:hover, .sf_button_red:active { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sf_button_green:hover, .sf_button_green:active { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sf_button_blue:hover, .sf_button_blue:active { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sf_button_10:hover, .sf_button_10:active   { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sf_button_bitcoin:hover, .sf_button_bitcoin:active { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sf_button_purple:hover, .sf_button_purple:active { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sf_button_orange:hover, .sf_button_orange:active { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sf_button_gray:hover, .sf_button_gray:active { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* btn_sp семейство */
.btn_sp, .btn_sp_green, .btn_sp_blue, .btn_sp_red, .btn_sp_gray, .btn_sp_orange {
  display: inline-block;
  color: #fff;
  margin: 0 7px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  border: none;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.btn_sp        { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); }
.btn_sp_green  { background: linear-gradient(135deg, #86efac, #22c55e); }
.btn_sp_blue   { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.btn_sp_red    { background: linear-gradient(135deg, #fca5a5, #ef4444); }
.btn_sp_gray   { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: var(--text-primary); }
.btn_sp_orange { background: linear-gradient(135deg, #fed7aa, #f97316); }

/* btn_big семейство */
.btn_big_green, .btn_big_red, .btn_big_orange, .btn_big_blue {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  padding: 10px 14px;
  cursor: pointer;
  outline: none;
  border: none;
  margin: 3px 0;
  width: 100%;
  border-radius: var(--radius-lg);
  transition: var(--transition);
  box-shadow: var(--shadow-md);
  letter-spacing: 0.02em;
}
.btn_big_green  { background: linear-gradient(135deg, #4ade80, #16a34a); }
.btn_big_red    { background: linear-gradient(135deg, #f87171, #dc2626); }
.btn_big_orange { background: linear-gradient(135deg, #fb923c, #ea580c); }
.btn_big_blue   { background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); }
.btn_big_green:hover, .btn_big_red:hover,
.btn_big_orange:hover, .btn_big_blue:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* button2 / button_theme */
.button2 {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  outline: none;
  margin: 0;
  padding: 8px 16px;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  transition: var(--transition);
  line-height: normal;
  font-family: inherit;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.button_size_xs { font-size: 12px; padding: 5px 10px; }
.button_size_s  { font-size: 13px; padding: 7px 14px; }
.button_size_m  { font-size: 15px; padding: 10px 20px; }
.button_size_l  { font-size: 17px; padding: 12px 24px; }

.button__title {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  pointer-events: none;
}
.button_size_xs .button__title { margin: 0 4px; }
.button_size_s  .button__title { margin: 0 8px; }
.button_size_m  .button__title { margin: 0 16px; }
.button_size_l  .button__title { margin: 0 24px; }

.button_theme_blue  { color: #fff; background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); }
.button_theme_green { color: #fff; background: linear-gradient(135deg, var(--purple-500), var(--purple-700)); border-radius: var(--radius-lg); padding: 17px 20px; }
.button_theme_white { color: var(--text-primary); background: transparent; border: 1.5px solid var(--purple-500); border-radius: var(--radius-lg); padding: 15px 20px; }
.button_theme_red   { color: #fff; background: linear-gradient(135deg, #f87171, #dc2626); }
.button_theme_sale  {
  color: #fff;
  background: linear-gradient(135deg, #f43f5e, #dc2626);
  -webkit-animation: button_sale 1.7s infinite;
  animation: button_sale 1.7s infinite;
}

.button_theme_blue:hover  { background: linear-gradient(135deg, var(--violet-400), var(--violet-600)); }
.button_theme_green:hover { background: linear-gradient(135deg, var(--purple-400), var(--purple-600)); }
.button_theme_white:hover { background: var(--purple-50); color: var(--purple-700); }
.button_theme_red:hover   { background: linear-gradient(135deg, #fca5a5, #f87171); }
.button_theme_sale:hover  { box-shadow: 0 0 12px 4px rgba(244,63,94,0.4); }

.button_margin_bottom { margin-bottom: 10px; }
.button_margin_tb     { margin: 10px 0; }
.button_margin_right  { margin-right: 10px; }
.button_border_transparent { border: 1px solid transparent; }
.button_border_blue   { border: 1.5px solid var(--violet-500); }
.button_display_block { display: block; }
.button_width_100, .mt__btn { width: 100%; text-align: center; }
.button_style_big { transition: var(--transition); box-shadow: var(--shadow-md); }

button.button_active, button:active,
.button.button_active, .button:active { filter: brightness(85%); }

/* bugtnew */
.bugtnew {
  text-decoration: none;
  text-align: center;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  transition: var(--transition);
  box-shadow: var(--shadow-md);
  display: inline-block;
  cursor: pointer;
}
.bugtnew:hover {
  background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  color: #fff;
}
.bugtnew:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  color: #fff;
}

/* rb_money_box, rb_happy_us */
.rb_money_box, .rb_happy_us {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: #fff;
  cursor: pointer;
  margin: 3px;
  padding: 9px 14px;
  text-align: center;
  width: 185px;
  font-weight: 600;
  transition: var(--transition);
}
.rb_money_box { background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); }
.rb_happy_us  { background: linear-gradient(135deg, var(--purple-400), var(--purple-600)); }
.rb_money_box:hover, .rb_happy_us:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: var(--shadow-lg); }

/* da-del / net-del */
.da-del, .net-del {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 26px;
  border: none;
  padding: 0 14px;
  margin: 5px 6px;
  text-align: center;
  width: 70px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  color: #fff;
}
.da-del  { background: linear-gradient(135deg, #4ade80, #16a34a); }
.net-del { background: linear-gradient(135deg, #f87171, #dc2626); }
.da-del:hover  { background: linear-gradient(135deg, #86efac, #4ade80); transform: translateY(-1px); }
.net-del:hover { background: linear-gradient(135deg, #fca5a5, #f87171); transform: translateY(-1px); }

/* start-yes/error serf */
.start-yes-serf, .start-error-serf {
  display: block;
  width: 220px;
  padding: 10px 0px;
  color: #fff;
  font-weight: 700;
  margin: 0 auto;
  text-align: center;
  margin-top: 4px;
  border-radius: var(--radius-lg);
  transition: var(--transition);
  box-shadow: var(--shadow-md);
  border: none;
  font-size: 14px;
}
.start-yes-serf   { background: linear-gradient(135deg, #34d399, #059669); }
.start-error-serf { background: linear-gradient(135deg, #f87171, #dc2626); }
.start-yes-serf:hover { opacity: 0.85; transform: translateY(-2px); }

/* ============================================================
   ОСНОВНОЙ КОНТЕЙНЕР
   ============================================================ */
.main {
    display: block;
    width: 100%; /* Вместо фиксированной ширины */
    max-width: 1200px; /* Максимальная ширина */
    margin: 0 auto;
    margin-top: 50px;
    min-height: 100vh;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: var(--shadow-xl), 0 0 0 1px rgba(168, 85, 247, 0.06);
    background-color: #fff;
    border-radius: var(--radius-xl);
}

@media (max-width: 1200px) {
    .main {
        padding: 16px;
    }
}

@media (max-width: 992px) {
    .main {
        padding: 14px;
    }
}

@media (max-width: 768px) {
    .main {
        padding: 12px;
        margin: 0px;
    }
}

@media (max-width: 576px) {
    .main {
        padding: 10px;
        margin: 0px;
    }
}


/* ============================================================
   НАВИГАЦИЯ
   ============================================================ */
.main-navigation {
  background: var(--nav-bg);
  border-radius: var(--radius-lg);
  padding: 0;
  margin-bottom: 0;
  box-shadow: var(--shadow-md);
}

.main-navigation__link {
  display: block;
  padding: 11px 12px;
  color: rgba(255,255,255,0.92);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  transition: var(--transition);
  border-radius: var(--radius-md);
}
.main-navigation__link:hover,
.main-navigation__link_active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.main-navigation__link_regard { background-color: rgba(158, 0, 100, 0.6); }
.main-navigation__link_regard:hover,
.main-navigation__link_active.main-navigation__link_regard {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: translateY(-1px);
}
.main-navigation__link_bf { background-color: rgba(0, 0, 0, 0.3); }
.main-navigation__link_bf:hover,
.main-navigation__link_active.main-navigation__link_bf {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: translateY(-1px);
}

.flex-container {
  display: flex;
  text-align: center;
  justify-content: center;
  text-decoration: none;
}
.flex-item {
  flex: 1 0 auto;
  text-decoration: none;
}

/* Unread indicator */
.unread-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #f43f5e;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 4px;
  animation: blink 2s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ============================================================
   МЕНЮ ПОЛЬЗОВАТЕЛЯ
   ============================================================ */
ul.usermenu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
ul.usermenu li a,
ul.usermenu li.active a {
  text-decoration: none;
  display: block;
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  padding: 6px 0 6px 14px;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}
ul.usermenu li a:hover {
  text-decoration: none;
  background: var(--purple-50);
  border-bottom: 1px solid var(--border-color);
  width: 100%;
  padding: 6px 0 6px 14px;
  color: var(--purple-700);
}
ul.usermenu li.active a {
  background: var(--lavender-mid);
  color: var(--purple-700);
  font-weight: 600;
}

.usermnublock { text-align: left; }

.usermnutitle-g {
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: left;
  padding: 9px 0 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1);
  transition: var(--transition);
}
.usermnutitle-g:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.usermnutitle-g:first-of-type {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.usermnutitle-g:last-of-type {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border: 0;
}
.usermnutitle-g::before {
  content: "";
  background-image: url(img/menuico2.png);
  background-size: 20px 18px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 18px;
  width: 20px;
  transition: all 300ms ease;
  vertical-align: top;
}

.usermnutitle-z {
  line-height: 1.5;
  color: var(--purple-800);
  text-decoration: none;
  display: block;
  text-align: left;
  padding: 9px 0 9px 16px;
  font-size: 14px;
  font-weight: 600;
    border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  cursor: pointer;
      background: var(--purple-100);
  transition: var(--transition);
}
.usermnutitle-z:hover {

}
.usermnutitle-z:first-of-type {

}
.usermnutitle-z:last-of-type {

}
.usermnutitle-z::before {
  content: "▼";
  background-size: 20px 18px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 18px;
  width: 20px;
  transition: all 300ms ease;
  vertical-align: top;
}

.usermnutitle-c::before { transform: rotate(180deg); }

.usermnuline {
  color: var(--text-secondary);
  text-decoration: none;
  display: block;
  padding: 5px 0 5px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid transparent;
  transition: var(--transition-fast);
}
.usermnuline:hover {
  color: var(--purple-700);
  background: var(--purple-50);
  padding: 5px 0 5px 16px;
  border-bottom: 1px solid var(--border-color);
}

.user_menuline {
  color: var(--text-secondary);
  display: block;
  padding: 5px 0 5px 10px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: var(--transition-fast);
}
.user_menuline:hover {
  background: var(--purple-50);
  border-color: var(--purple-500);
  color: var(--purple-700);
}

.usermnuline-act, .usermnuline-act:hover {
  padding: 6px 0 6px 7px;
  background: var(--lavender-mid);
  cursor: pointer;
  display: block;
  border-left: 3px solid var(--purple-600);
  color: var(--purple-800);
  font-weight: 600;
}

/* ============================================================
   ЗАГОЛОВКИ СЕКЦИЙ (.titles, .titles2)
   ============================================================ */
.title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.titles {
  color: #fff;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  box-shadow: var(--shadow-md);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-lg);
  padding: 11px 0;
  width: 100%;
  margin-top: 0;
  margin-bottom: 18px;
}

.titles2 {
  color: #fff;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  box-shadow: var(--shadow-md);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-md);
  text-align: center;
  padding: 9px 0;
  margin-bottom: 18px;
}

.titles333 {
  color: #fff;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-md);
  padding: 8px 0;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  background: var(--table-th-bg);
  padding: 9px 10px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
}
.table th:first-child { border-radius: var(--radius-md) 0 0 0; }
.table th:last-child  { border-radius: 0 var(--radius-md) 0 0; }
.table td {
  border-bottom: 1px solid var(--border-color);
  padding: 7px 10px;
  color: var(--text-primary);
}
.table tr:hover td { background: var(--purple-50); }

table.new-class { border-collapse: separate; border-spacing: 8px 8px; border: 0; box-shadow: none; }
table.new-class tr { box-shadow: var(--shadow-sm); border-radius: var(--radius-md); }

/* ============================================================
   СООБЩЕНИЯ (msg-warning, msg-error, msg-ok)
   ============================================================ */
.msg-warning {
  display: block;
  text-align: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.msg-error {
  display: block;
  text-align: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fecdd3, #fda4af);
  color: #9f1239;
  font-weight: 600;
  border: 1px solid #fda4af;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.msg-ok {
  display: block;
  text-align: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #bbf7d0, #4ade80);
  color: #14532d;
  font-weight: 600;
  border: 1px solid #86efac;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   КАРТОЧКИ
   ============================================================ */
.card-points {
  font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  margin: 10px auto;
  padding: 0 10px;
}

.card-item {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 0 16px;
  margin-bottom: 7px;
  box-shadow: 0 4px 6px rgba(109, 40, 217, 0.12), 0 2px 3px rgba(109, 40, 217, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
  cursor: default;
  border: 1px solid var(--border-color);
}
.card-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-hover);
}
.card-title {
  flex: 1;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
.card-points {
  font-weight: 700;
  font-size: 11px;
  padding: 4px 0;
  border-radius: var(--radius-full);
  min-width: 100px;
  text-align: center;
}
.card-item.positive .card-points {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.card-item.negative .card-points {
  background: #ffe4e6;
  color: #9f1239;
  border: 1px solid #fda4af;
}
.card-description {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-right: 20px;
  font-weight: 400;
}

/* ============================================================
   БЕЙДЖ circle-badge
   ============================================================ */
.circle-badge.outline {
  display: inline-block;
  width: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  vertical-align: top;
  border: none;
  background: var(--purple-400);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;

  margin-top: -1px;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   ПОПАП (#popup)
   ============================================================ */
#popup {
  background: #fff;
  min-width: 400px;
  display: none;
  position: absolute;
  z-index: 999;
  top: -700px;
  left: 0;
  font-size: 12px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
#popup table { font-size: 12px; }
#popup .title-popup {
  background: var(--nav-bg);
  color: #fff;
  line-height: 42px;
  padding: 0 12px;
  cursor: move;
  font-size: 14px;
  font-weight: 700;
}
#popup .closed-popup {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 13px;
  line-height: 42px;
  text-align: center;
  display: inline-block;
  width: 60px;
  cursor: pointer;
  color: #fff;
  opacity: 0.7;
  transition: var(--transition-fast);
}
#popup .closed-popup:hover { opacity: 1; }
#popup .text-popup { overflow: hidden; overflow-y: auto; }
#popup .text-popup .load-popup { display: block; width: 128px; height: 15px; margin: 20px auto; }

.pop-up-footer {
  background: var(--lavender-mid);
  padding: 6px 0;
  text-align: center;
  border-top: 1px solid var(--border-color);
}
td.pop-up-footer { border-bottom: 0; }

/* ============================================================
   TOOLTIP (tiptip)
   ============================================================ */
#tiptip_holder { display: none; position: absolute; top: 0; left: 0; z-index: 99999; }
#tiptip_holder.tip_top    { padding-bottom: 6px; }
#tiptip_holder.tip_bottom { padding-top: 6px; }
#tiptip_holder.tip_right  { padding-left: 6px; }
#tiptip_holder.tip_left   { padding-right: 6px; }
#tiptip_content {
  font-size: 12px;
  color: #fff;
  padding: 6px 10px;
  background: rgba(49, 10, 82, 0.92);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(4px);;
}
#tiptip_arrow, #tiptip_arrow_inner { position: absolute; border-color: transparent; border-style: solid; border-width: 6px; height: 0; width: 0; }
#tiptip_holder.tip_top    #tiptip_arrow { border-top-color: rgba(49, 10, 82, 0.92); }
#tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: rgba(49, 10, 82, 0.92); }
#tiptip_holder.tip_right  #tiptip_arrow { border-right-color: rgba(49, 10, 82, 0.92); }
#tiptip_holder.tip_left   #tiptip_arrow { border-left-color: rgba(49, 10, 82, 0.92); }
#tiptip_holder.tip_top    #tiptip_arrow_inner { margin-top: -7px;  margin-left: -6px; border-top-color:    rgba(49, 10, 82, 0.92); }
#tiptip_holder.tip_bottom #tiptip_arrow_inner { margin-top: -5px;  margin-left: -6px; border-bottom-color: rgba(49, 10, 82, 0.92); }
#tiptip_holder.tip_right  #tiptip_arrow_inner { margin-top: -6px;  margin-left: -5px; border-right-color:  rgba(49, 10, 82, 0.92); }
#tiptip_holder.tip_left   #tiptip_arrow_inner { margin-top: -6px;  margin-left: -7px; border-left-color:   rgba(49, 10, 82, 0.92); }

/* ============================================================
   КАРТОЧКА ПОЛЬЗОВАТЕЛЯ В ЛЕВОМ МЕНЮ (.usr-card)
   Разметка — templates/menu/menu-left.tpl, блок «Пользователь».
   Колонка узкая (~200px), поэтому всё выстроено в одну вертикаль.
   ============================================================ */
.usr-card {
  /* .work-serf задаёт width:100%, а box-sizing глобально не переопределён —
     без border-box карточка вылезала за левую колонку на ширину падингов */
  box-sizing: border-box;
  padding: 12px 11px 10px;
  margin-bottom: 0;
  text-align: center;
}

/* Эмодзи-иконки подписей */
.usr-ico {
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
  line-height: 1;
  vertical-align: -1px;
}

/* Аватар — во всю ширину карточки.
   border-box обязателен: у img.avatar-akk есть padding 2px и border 2px,
   без него width:100% давало бы вылет на 8px. Квадрат через aspect-ratio,
   чтобы карточка не прыгала по высоте от пропорций загруженной картинки. */
.usr-ava { display: block; line-height: 0; margin-bottom: 10px; }
.usr-card img.avatar-akk {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0;
  display: block;
  object-fit: cover;
}

/* Ник и ID — в одну строку, ID переносится, если не влез */
.usr-ident {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 8px;
  margin-bottom: 10px;
}
.usr-nick {
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usr-id {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Название статуса */
.usr-status {
  display: block;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 7px 8px;
  font-size: 13px;
  color: var(--text-primary) !important;
  margin-bottom: 9px;
  transition: var(--transition-fast);
}
.usr-status:hover { border-color: var(--border-hover); background: var(--purple-50, #faf5ff); }

/* Рейтинг с полосой прогресса до следующего статуса */
.usr-rate {
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 9px 10px 10px;
  margin-bottom: 9px;
  text-align: left;
}
.usr-rate__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
}
.usr-rate__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
a.usr-rate__val {
  font-size: 17px;
  font-weight: 800;
  color: var(--purple-700) !important;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
a.usr-rate__val:hover { color: var(--purple-600) !important; }
.usr-rate__bar {
  height: 7px;
  border-radius: 999px;
  background: var(--lavender-mid, #ede8ff);
  overflow: hidden;
}
.usr-rate__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-500), var(--purple-700));
  transition: width .4s ease;
}
.usr-rate__next {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.usr-rate__next b { color: var(--purple-700); }

/* Кнопка ежедневного бонуса: снимаем отрицательные отступы старой вёрстки */
.usr-bonus { margin-bottom: 9px; }
.usr-card .e_bonus,
.usr-card .e_bonus_z {
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 8px 8px 9px !important;
  font-size: 12px !important;
}

/* Счета */
.usr-money__h {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
  margin-bottom: 6px;
}
.usr-bal {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 7px 8px;
  margin-bottom: 6px;
  text-align: left;
  transition: var(--transition-fast);
}
.usr-bal:last-child { margin-bottom: 0; }
.usr-bal:hover {
  border-color: var(--border-hover);
  background: var(--purple-50, #faf5ff);
  transform: translateY(-1px);
}
.usr-bal__ico { font-size: 14px; line-height: 1; flex-shrink: 0; }
/* Подпись счёта: крупнее и контрастнее, чем было (11.5px приглушённым цветом).
   min-width + ellipsis нужны, чтобы при большом балансе подпись поджималась,
   а не выдавливала сумму за пределы строки. */
.usr-bal__lbl {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Сумму красим на внешнем span: ajax-обработчики заменяют содержимое
   #new-money-rekl / #new-money-ballans целиком, и внутреннее оформление терялось */
.usr-bal__sum {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  /* #16a34a давал контраст всего 3.3:1 на белом — ниже минимума 4.5:1
     для текста такого размера. Этот оттенок даёт 5.0:1. */
  color: #15803d;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Бан */
.usr-ban {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #b91c1c;
}
.usr-ban__ico { display: block; font-size: 18px; margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .usr-rate__bar i, .usr-bal, .usr-status { transition: none; }
  .usr-bal:hover { transform: none; }
}

/* ============================================================
   ПУНКТЫ МЕНЮ ПОЛЬЗОВАТЕЛЯ (.usermenu)
   Скоуп именно .usermenu, а не .usermnublock: модераторский блок лежит
   выше, вне .usermenu, и его вид эти правила не задевают.
   ============================================================ */
.usermenu .user_menuline,
.usermenu .usermnuline-act {
  display: flex;
  align-items: center;
  /* Базовые правила задают активному пункту padding-left 7px против 10px у
     обычного — из-за этого активная строка съезжала влево на 3px и колонка
     иконок ломалась. Выравниваем. */
  padding: 6px 0 6px 10px;
}
/* Иконка в фиксированной колонке — тогда подписи выстраиваются ровно,
   несмотря на разную ширину эмодзи */
.usermenu .mi {
  flex: 0 0 20px;
  width: 20px;
  margin-right: 7px;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
}
.usermenu .ml {
  flex: 1 1 auto;
  min-width: 0;
}
/* Счётчики прижаты к правому краю колонкой */
.usermenu .circle-badge {
  flex: 0 0 auto;
  margin-left: 6px;
}
/* Отметка активной PRO-подписки */
.usermenu .mi-on {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: #dcfce7;
  color: #15803d;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
/* Разделители внутри блоков меню */
.usermenu .usermnublock hr {
  height: 0;
  border: 0;
  border-top: 1px dashed var(--border-color);
  margin: 7px 10px;
}
.usermenu .usermnublock { padding-bottom: 4px; }

/* ============================================================
   БОНУС (.e_bonus)
   ============================================================ */
.e_bonus {
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  display: block;
  width: auto;
  padding: 5px 10px 7px 10px;
  color: #fff;
  font-weight: 600;
  font-size:12px;
  margin-bottom: 35px;
  margin-left: -5px;
  margin-top: -15px;
  border-radius: var(--radius-lg);
  animation: glowPulse 2s infinite;
  text-align: center;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(168, 85, 247, 0.4); }
  50%       { box-shadow: 0 0 20px rgba(168, 85, 247, 0.75); }
}
.e_bonus:before { content: 'Получить бонус рейтинга'; color: #fff; }

.e_bonus_z {
  background: linear-gradient(135deg, #4ade80, #16a34a);
  display: block;
  width: auto;
  padding: 5px 10px 7px 10px;
  color: #fff;
  font-weight: 600;
  font-size:12px;
  margin-bottom: 35px;
  margin-left: -5px;
  margin-top: -15px;
  border-radius: var(--radius-lg);
  animation: glowPulse 2s infinite;
  text-align: center;
}
.e_bonus_z:before { content: 'Бонус получен'; color: #fff; }

/* ============================================================
   СТАТУСЫ ПОЛЬЗОВАТЕЛЕЙ
   ============================================================ */
.highlight  { background-color: #fef9c3 !important; color: #713f12 !important; font-weight: bold !important; }
.oligarch   { background-color: #7e22ce !important; color: white !important; }
.deputy     { background-color: #4f46e5 !important; color: white !important; }
.businessman{ background-color: #059669 !important; color: white !important; }
.foreman    { background-color: #b45309 !important; color: white !important; }
.master     { background-color: #16a34a !important; color: white !important; }
.brigadier  { background-color: #2563eb !important; color: white !important; }
.worker     { background-color: #ea580c !important; color: white !important; }
.trainee    { background-color: #6b7280 !important; color: white !important; }

/* ============================================================
   ИКОНКА .tocg22
   ============================================================ */
.tocg22 {
  background: url(img/blue-pixel.png);
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-top;
}

/* ============================================================
   АВАТАР
   ============================================================ */
img.avatar-akk {
    margin-top: 0;
    border-radius: var(--radius-lg);
    width: 170px;
    border: 2px solid var(--border-color);
    padding: 2px;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
    transition: var(--transition), width 0.3s ease, transform 0.3s ease;
    
    /* Добавляем начальные размеры */
    max-width: 100%;
    height: auto;
}

img.avatar-akk:hover {
    border-color: var(--purple-400);
    box-shadow: var(--shadow-md);
    transform: translateY(-10px) scale(1.1);
    /* Настройки для увеличения */
    width: 100%;
    z-index: 1;
    position: relative;
}


/* ============================================================
   СТАТУСНЫЕ ССЫЛКИ (звёзды, рейтинг)
   ============================================================ */
a.s_staj, a.s_rab, a.s_brig, a.s_mast, a.s_pror,
a.s_biz, a.s_dep, a.s_olig, a.vip {
  background: url(img/star_status.png);
  display: block;
  margin-bottom: 2px;
  width: 156px;
  height: 16px;
}
a.s_rab  { background-position: 0 -16px; }
a.s_brig { background-position: 0 -32px; }
a.s_mast { background-position: 0 -48px; }
a.s_pror { background-position: 0 -64px; }
a.s_biz  { background-position: 0 -80px; }
a.s_dep  { background-position: 0 -96px; }
a.s_olig { background-position: 0 -112px; }

a.star_gold   { background: url(img/01m.png); display: block; margin-top: 0; width: 24px; height: 32px; }
a.star_silver { background: url(img/02m.png); display: block; margin-top: 0; width: 24px; height: 32px; }
a.star_bronze { background: url(img/03m.png); display: block; margin-top: 0; width: 24px; height: 32px; }

a.rating {
  width: 68px;
  display: block;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 15px;
  margin-right: 0;
  line-height: 3.6;
  color: #fff;
  text-shadow: 0px 1px 2px #000;
  font-weight: 600;
  background: url(img/rating.png) no-repeat;
}

/* ============================================================
   ПАНЕЛЬ ОНЛАЙН / ЧАТ
   ============================================================ */
.on_line {
  box-sizing: border-box;
  background-color: #fff;
  color: var(--purple-600);
  width: 74px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 2px solid var(--purple-400);
  opacity: 0.85;
  border-bottom: none;
  position: fixed;
  z-index: 998;
  right: -21px;
  top: 250px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  cursor: help;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.onpovorot { font-size: 18px; }
.onpovorot img { display: inline-block; }
.on_chat { top: 330px; cursor: default; }

/* Поддержка */
.support_panel {
  height: 12px;
  top: 385px;
  z-index: 998;
  position: fixed;
  left: -78px;
  width: 153px;
  padding: 0px 15px 25px 20px;
  opacity: 0.75;
  font-size: 18px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  text-align: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 2px solid var(--purple-400);
  background: var(--purple-50);
  color: var(--purple-700);
  font-weight: 600;
  transition: var(--transition-fast);
}
.support_panel:hover { opacity: 0.95; }

/* ============================================================
   ХЛЕБНЫЕ КРОШКИ / СКРОЛ
   ============================================================ */
hr {
  clear: both;
  border: none;
  height: 1px;
  background: var(--border-color);
  margin-bottom: 6px;
}

#text-rab-time {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 999;
  display: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  opacity: 0.95;
  background: linear-gradient(135deg, var(--purple-600), var(--violet-700));
  margin-top: 0;
  padding: 12px 0;
  box-shadow: var(--shadow-md);
}

/* ============================================================
   LOAD PAGES
   ============================================================ */
#load-pages, #load-pages-dop {
  background: var(--lavender-mid);
  border: 1.5px solid var(--border-color);
  color: var(--text-secondary);
  padding: 7px 0;
  text-align: center;
  margin: 12px auto;
  width: 420px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
#load-pages:hover, #load-pages-dop:hover {
  background: var(--purple-100);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.load-pages {
  background: var(--lavender-mid);
  border: 1.5px solid var(--purple-400);
  color: var(--purple-700);
  padding: 7px 0;
  text-align: center;
  margin: 12px auto;
  width: 420px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.load-pages:hover { background: var(--purple-100); box-shadow: var(--shadow-md); }

/* ============================================================
   ОВЕРЛЕЙ ЗАГРУЗКИ
   ============================================================ */
#load {
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  background: rgba(49, 10, 82, 0.6);
  backdrop-filter: blur(3px);
  z-index: 999;
  display: none;
}

/* ============================================================
   СЁРФИНГ
   ============================================================ */
.work-serf {
  width: 100%;
  margin-bottom: 12px;
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  transition: var(--transition);
}
.work-serf:hover { box-shadow: var(--shadow-lg); border-color: var(--border-hover); }
.work-serf td { padding: 10px 5px 10px 10px; }

.serf-text        { color: var(--text-secondary); }
.serf-text-ob {
  border: 1.5px dashed var(--purple-300);
  padding: 12px;
  position: relative;
  border-radius: var(--radius-md);
  background: var(--purple-50);
}
.serf-text-ob-title {
  text-decoration: none;
  color: var(--purple-800);
  font-weight: 700;
  font-size: 13px;
}
.serf-text-ob-title:hover { text-decoration: underline; }
.serf-text-ob-url-pars { color: #16a34a; }
.serf-text-ob-ico { position: absolute; top: 4px; right: 4px; }
.serf-text-ob-add { position: absolute; right: 4px; bottom: 4px; font-size: 11px; color: var(--text-muted); text-decoration: none; }

.serf-stat { background: var(--lavender-mid); border-radius: var(--radius-md); overflow: hidden; }
.serf-stat a { display: block; font-size: 12px; padding: 6px 12px; color: var(--text-secondary); transition: var(--transition-fast); }
.serf-stat a:hover { background: var(--purple-100); border-bottom: 1px solid var(--border-color); color: var(--purple-700); }

/* ============================================================
   МЕНЮ КАБИНЕТА
   ============================================================ */
.menu-kabinet { text-align: center; margin: 12px 0; }
.menu-kabinet a {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 0 5px;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  vertical-align: top;
  background-position: center;
  transition: var(--transition);
}
.menu-kabinet a:hover, .menu-kabinet a.active {
  background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.menu-kabinet a.menu-serf   { background-image: url('img/ico/menu/serf_kab.png'); }
.menu-kabinet a.menu-mail   { background-image: url('img/ico/menu/mail_kab.png'); }
.menu-kabinet a.menu-youtube{ background-image: url('img/ico/menu/youtube_kab.png'); }
.menu-kabinet a.menu-vk     { background-image: url('img/ico/menu/vk_kab.png'); }
.menu-kabinet a.menu-task   { background-image: url('img/ico/menu/task_kab.png'); }
.menu-kabinet a.menu-test   { background-image: url('img/ico/menu/test_kab.png'); }
.menu-kabinet a.menu-banner { background-image: url('img/ico/menu/banner_kab.png'); }
.menu-kabinet a.menu-text   { background-image: url('img/ico/menu/text_kab.png'); }
.menu-kabinet a.menu-kontext{ background-image: url('img/ico/menu/kontext_kab.png'); }
.menu-kabinet a.menu-statlink{ background-image: url('img/ico/menu/statlink_kab.png'); }
.menu-kabinet a.menu-fraim  { background-image: url('img/ico/menu/fraim_kab.png'); }

.menu-earnings { text-align: center; margin: 12px 0; }
.menu-earnings a {
  display: inline-block;
  width: 58px;
  height: 58px;
  margin: 0 5px;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  vertical-align: top;
  background-position: center;
  transition: var(--transition);
}
.menu-earnings a:hover, .menu-earnings a.active {
  background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.menu-earnings a.menu-serf   { background-image: url('img/ico/menu/serf.png'); }
.menu-earnings a.menu-mail   { background-image: url('img/ico/menu/mail.png'); }
.menu-earnings a.menu-youtube{ background-image: url('img/ico/menu/youtube.png'); }
.menu-earnings a.menu-vk     { background-image: url('img/ico/menu/vk.png'); }
.menu-earnings a.menu-task   { background-image: url('img/ico/menu/task.png'); }
.menu-earnings a.menu-test   { background-image: url('img/ico/menu/test.png'); }

/* ============================================================
   ADD-INFA, COMM-REPLACE
   ============================================================ */
.add-infa {
  padding: 16px;
  background: var(--lavender-mid);
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.infa-red {
  background: #fdf2ff;
  border: 1.5px dashed var(--purple-400);
}
.comm-replace {
  padding: 12px;
  font-size: 12px;
  border: 1.5px dashed var(--purple-300);
  background: var(--purple-50);
  margin-top: 12px;
  border-radius: var(--radius-md);
}

/* ============================================================
   МЕНЮ ДОП (menu-add, menu-zacaz-dop)
   ============================================================ */
.menu-add { width: auto; margin: 0 auto; }
.menu-add a {
  display: inline-block;
  width: 190px;
  text-align: left;
  vertical-align: top;
  background: #fff;
  padding: 9px 12px;
  margin: 5px 3px;
  border: 1.5px solid var(--purple-300);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  font-weight:600;
}
.menu-add a span { font-size: 12px; color: var(--text-muted);font-weight:normal; }
.menu-add a:hover,
.menu-zacaz-dop a:hover,
.menu-zacaz-dop a.active {
  background: var(--lavender-mid);
  border-color: var(--purple-400);
  box-shadow: var(--shadow-md);
  color: var(--purple-700);
}

.menu-zacaz-dop { text-align: center; margin-bottom: 22px; }
.menu-zacaz-dop a {
  display: inline-block;
  min-width: 130px;
  vertical-align: top;
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  padding: 0 10px;
  margin: 2px 0;
  border-radius: var(--radius-md);
  color: #fff;
  font-weight: 600;
  line-height: 32px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   ССЫЛКИ СТАТУС: active_red, online/offline
   ============================================================ */
a.active_red { color: #f43f5e !important; text-shadow: none; }
.online-friends  { color: #22c55e; font-weight: 600; }
.offline-friends { color: #d1d5db; }
.status {
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  float: center;
}

/* ============================================================
   SMALL GRAY LINK
   ============================================================ */
.small-gray-link {
  color: var(--text-muted);
  font-size: 11px;
  text-decoration: none;
  letter-spacing: 0;
  transition: var(--transition-fast);
}
.small-gray-link:hover { color: var(--purple-700); }

/* ============================================================
   DROPDOWN LANGUAGE
   ============================================================ */
.block_language {}
.link_language {
  color: #fff;
  font-size: 13px;
  position: relative;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  align-content: center;
  flex-wrap: wrap;
  padding: 13px 0 0 7px;
}
.link_language:hover { background-color: var(--main-nav-color-hover); color: #fff; }
.link_language span  { margin-top: 4px; }
.flags { color: #fff; }
.flags::after {
  content: "";
  background-image: url(/statica/img/menu-arrow.svg);
  filter: invert(100%) sepia(0%) saturate(7499%) hue-rotate(94deg) brightness(105%) contrast(101%);
  background-size: 10px 18px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 18px;
  width: 10px;
  transition: all 300ms ease;
  vertical-align: top;
}
.dropdown-toggle { display: block; cursor: pointer; }
.dropdown-toggle:hover .dropdown-menu { display: block; }
.dropdown-toggle__avatar { position: relative; filter: invert(100%) sepia(0%) saturate(7499%) hue-rotate(94deg) brightness(105%) contrast(101%); }
.link_language_dropdown { top: 37px; right: 15px; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  display: none;
  list-style: none;
  padding: 6px 0;
  margin: 0;
  background: #fff;
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 14px;
  min-width: 160px;
  overflow: hidden;
}
.dropdown-menu li > a {
  padding: 7px 14px;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  text-align: left;
  transition: var(--transition-fast);
}
.dropdown-menu li > a:hover {
  text-decoration: none;
  background: var(--purple-50);
  color: var(--purple-700);
}

/* ============================================================
   CASHBACK
   ============================================================ */
.cashback-money-add {
  text-align: center;
  border-radius: var(--radius-lg);
  padding: 12px 24px;
  margin-bottom: 22px;
  color: var(--text-primary);
  background: #f7fff0;
  border: 1.5px solid #bbf7d0;
  box-shadow: var(--shadow-sm);
}
.cashback-gift {
  background: url(img/gift2.png);
  width: 170px;
  height: 170px;
  opacity: 1;
  background-size: 170px 170px;
  background-repeat: no-repeat;
}
.cashback-text { text-align: left; display: flex; align-items: center; font-size: 14px; margin-bottom: 10px; }
.cashback-list { text-align: left; }
.cashback-info { padding-left: 32px; }

/* ============================================================
   МОДЕРАТОР
   ============================================================ */
#moder-ob-num {
	width:auto;
	margin-top:0px;
  padding: 4px 0;
  text-align: center;
  background: var(--purple-100);
  border-bottom: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}
#moder-ob-num a {
  display: inline-block;
  padding: 3px 8px;
  background: #fff;
  color: var(--purple-800);
  font-weight: 700;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin: 2px;
}
.moderimgm {
  background: url(img/ico/kabinet/lupa.png) no-repeat 2px 1px;
  width: 39px;
  height: 38px;
  display: block;
  margin-bottom: -2px;
}

/* ============================================================
   БЛОКИ КОНТЕНТА
   ============================================================ */
#info { text-align: left; }
#contentwrapper { padding: 0 8px 120px 8px; width: 100%; }

.block1 { float: left; width: 49%; }
.block1 h3 { width: 88%; border-bottom: 2px solid var(--border-color); }
.block1 .img1 { float: left; background: url(img/youtobe-icon.png); width: 65px; height: 65px; margin-right: 20px; }
ul.bl1 { padding-top: 22px; }
ul.bl2 { margin-top: -5px; }

.block2 { float: right; width: 49%; }
.block2 h3 { width: 88%; border-bottom: 2px solid var(--border-color); }
.block2 .img2 { float: left; background: url(img/vk-icon.png); width: 65px; height: 65px; margin-right: 20px; }

.block3 { line-height: 1.5; margin-top: 10px; text-align: justify; }
.block3 .img3 { background: url(img/users3.png) no-repeat; width: 170px; height: 170px; float: right; }

.block4 { line-height: 1.5; margin-top: 10px; text-align: justify; }
.block4 .img4 { background: url(img/reklamon.png) no-repeat; width: 158px; height: 128px; float: left; }
.block4 h3 { text-align: center; }
.block4 ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 2; padding-top: 10px; }
.block4 ul li { padding-left: 105px; }
.block4 ul img { width: 13px; margin-right: 8px; margin-bottom: 3px; }

.block5 { line-height: 1.5; margin-top: 10px; text-align: justify; }
.block5 .img5 { background: url(img/users3.png) no-repeat; width: 128px; height: 128px; float: right; }
.block5 h3 { text-align: center; }
.block5 ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 2; padding-top: 10px; }
.block5 ul li { padding-left: 105px; }
.block5 ul img { width: 13px; margin-right: 8px; margin-bottom: 3px; }

.block1 ul img, .block2 ul img, .block3 ul img, .block4 ul img, .block5 ul img { width: 13px; margin-right: 8px; margin-bottom: 3px; }

/* ============================================================
   ИКОНКИ
   ============================================================ */
.ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.ico:hover { opacity: 1; }
.ico-vir       { background: url('img/ico/vir.png')       no-repeat; }
.ico-act       { background: url('img/ico/act.png')       no-repeat; }
.ico-abuse     { background: url('img/ico/abuse.png')     no-repeat; }
.ico-error1    { background: url('img/error1.png')        no-repeat; }
.ico-search    { background: url('img/ico/search.png')    no-repeat; }
.ico-help      { background: url('img/ico/help.png')      no-repeat; }
.ico-ok, .task-del-act   { background: url('img/ico/ok.png')   no-repeat; }
.ico-del, .task-del      { background: url('img/ico/del.png')  no-repeat; }
.ico-edit      { background: url('img/ico/edit.png')      no-repeat; }
.ico-replace   { background: url('img/ico/replace.png')   no-repeat; }
.ico-while     { background: url('img/ico/while.png')     no-repeat; }
.ico-lock      { background: url('img/ico/kabinet/lock_16.png') no-repeat; }
.task-favorite    { background: url('img/ico/pin.png')          no-repeat; }
.task-favoriteout { background: url('img/ico/pin-disable.png')  no-repeat; }

/* ============================================================
   ТЕКСТОВЫЕ БЛОКИ rb-title/rb-text
   ============================================================ */
.rb-title span { font-size: 14px; }
.rb-text { margin-top: 2px; margin-bottom: 1px; color: var(--text-primary); font-size: 12px; overflow-wrap: break-word; }
.rb-title a { color: var(--purple-700); }
.rb-title a:hover { border-bottom: 1px dashed var(--purple-500); }

/* ============================================================
   КОНТЕКСТНЫЕ ССЫЛКИ
   ============================================================ */
.contextlink {
  border: 1.5px dashed var(--purple-400);
  padding: 4px 8px;
  margin: 5px 0 7px 0;
  border-radius: var(--radius-sm);
  background: var(--purple-50);
}
.contextlink1 { border: 0; }

/* ============================================================
   ПРОЧЕЕ
   ============================================================ */
ul { list-style: none; margin: 0; padding: 0; }

.t1 {
  background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
  display: inline-block;
  padding: 5px 8px 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--radius-sm);
}
.t2 { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.t3 { font-size: 15px; margin-top: 5px; display: inline-block; color: var(--text-secondary); }

.bord { background: var(--purple-300); height: 1px; }

.button-left { display: block; margin: 12px auto; }
.i-button { background-image: url('img/reg-on.png'); background-repeat: no-repeat; width: 193px; height: 43px; border: none; transition: 0.2s ease; cursor: pointer; }
.i-button:hover { background-image: url('img/reg-off.png'); }

.kont23 {}

#velik505 {
  display: none;
  z-index: 999;
  opacity: 0.85;
  position: fixed;
  top: 2%;
  width: 50px;
  line-height: 11px;
  height: 11px;
  padding: 10px;
  background: var(--lavender-mid);
  font-size: 12px;
  text-align: center;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

#load-site-img { position: fixed; right: 5px; top: 120px; display: none; }
#load-site-img img { width: 120px; }

.аllbaner { text-align: center; display: block; margin-top: 10px; }
.аllbaner a { border: none; outline: none; text-decoration: none; }
.аllbaner img { padding: 3px; border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); }

/* ============================================================
   ЗАГЛУШКА СВОБОДНОГО РЕКЛАМНОГО МЕСТА
   Показывается вместо картинок-заглушек sn468.gif / sn100.gif / ST200.gif,
   когда реклама на место не куплена. Оформление взято из шапки сайта:
   тот же градиент --nav-bg, что у .main-navigation, скругление и тень.
   Разметку отдаёт adEmptyHtml() из /statica/js/site_main.js и
   templates/banners-all.tpl.
   ============================================================ */
.ad-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  line-height: 1.15;
  text-decoration: none;
  color: #fff;
  background: var(--nav-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: var(--transition);
  /* Блок flex-уровня не центрируется text-align родителя — центрируем сами */
  margin-left: auto;
  margin-right: auto;
}
.ad-empty:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff;
}
.ad-empty__label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.1;
}
.ad-empty__size {
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* 468x60 — шапка сайта и низ рабочих страниц.
   Ширина именно фиксированная: min-width позволял flex-блоку растянуться
   на всю ширину контейнера (#baner внизу рабочих страниц — во всю колонку). */
.ad-empty--468 { width: 468px; max-width: 100%; min-height: 60px; padding: 6px 14px; }
.ad-empty--468 .ad-empty__size { font-size: 22px; }

/* 200x300 — правая колонка */
.ad-empty--200 { width: 198px; max-width: 100%; min-height: 250px; padding: 16px 12px; }
.ad-empty--200 .ad-empty__size { font-size: 20px; }

/* 100x100 — места мало, подпись сокращаем */
.ad-empty--100 { width: 100px; height: 100px; padding: 8px 6px; gap: 3px; }
.ad-empty--100 .ad-empty__label { font-size: 8px; letter-spacing: 0.5px; }
.ad-empty--100 .ad-empty__size { font-size: 13px; }

@media (max-width: 600px) {
  .ad-empty--468 .ad-empty__size { font-size: 18px; }
  .ad-empty__label { letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-empty:hover { transform: none; }
}

.menu-panellang { position: absolute; top: 70px; right: 0; padding: 3px; }

#error-footer { position: fixed; left: 0; bottom: 0; right: 0; display: none; z-index: 9999; }

/* ============================================================
   HEADER / ТОП-МЕНЮ
   ============================================================ */
#header   { height: 90px;}
#top-menu { height: 60px; }

#menu {
  display: inline-block;
  background: url(img/menu_bg.png) no-repeat;
  width: 855px;
  -webkit-background-size: 100%;
  background-size: 100%;
  white-space: nowrap;
  height: 40px;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 3px;
}
#menu .li {
  display: inline-block;
  vertical-align: middle;
  margin-top: 7px;
  color: #fff;
  text-decoration: none;
  padding: 2px 9px 5px 0;
  line-height: 14px;
}
#menu .li b { padding: 2px 0 8px 10px; margin-top: 7px; }
#menu .li:hover, #menu .active { color: #ddd6fe; text-decoration: none; background: url(img/menu_h2.png) right top no-repeat; }
#menu .li:hover b, #menu .active b { color: var(--purple-200); text-decoration: none; background: url(img/menu_h.png) left top no-repeat; }
#menu-control { display: none; }

.button-login { display: inline-block; vertical-align: middle; margin-top: 7px; }
.button-login .button {
  background: url(img/login-bg.png) no-repeat;
  width: 129px;
  height: 26px;
  cursor: pointer;
  line-height: 26px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  transition: 0.2s ease;
}
.button-login .button:hover { opacity: 0.82; }

.logo-wrapper { display: block; background: url(img/logonew.png) no-repeat; width: 350px; height: 109px; position: absolute; top: -5px; }
.top-text { position: absolute; top: 9px; left: 172px; font-size: 25px; line-height: 1.4; color: var(--text-primary); }
#baner-serf { width: 500px; height: 70px; overflow: hidden; float: right; margin-top: -10px; }
#main-navigation-wrapper {}

/* ============================================================
   БАННЕРЫ
   ============================================================ */
.banners {
  width: 210px;
  border-radius: var(--radius-md);
  padding-left: 2px;
  
}
.banners2 {
  width: 198px;
  border-radius: var(--radius-md);
  padding: 6px;
  margin-top: -11px;
  border: 1.5px solid var(--purple-400);
}
.left-banner {
  width: 198px;
  height: 146px;
  background: url("img/ba100.png") center no-repeat;
}
.left-banner .img-banner-left { display: block; margin: auto; padding-top: 52px; }

/* ============================================================
   ФУТЕР
   ============================================================ */
.footer {
  margin: 0 auto;
  margin-top: -100px;

  height: 1px;
  position: relative;
  background: var(--border-color);
  width: 1200px;
}
.footer__container { width: 1160px; margin: 0 auto;}

.foot-left { float: left;}
.foot-left span { color: var(--purple-600); display: block; padding-left: 10px; padding-top: 16px; font-weight: 600; }
.foot-left ul { padding-left: 30px; padding-top: 5px; }
.foot-left ul li { display: inline-block; padding-left: 2px; opacity: 0.7; transition: opacity 0.2s; }
.foot-left ul li:hover { opacity: 1; }

.foot-right { float: right; }
.foot-right span { padding-top: 20px; }
.foot-right img { width: 100px; }
.foot-right ul li { position: absolute; }
.foot-right .copyr { padding-top: 8px; font-size: 14px; padding-right: 20px; color: var(--purple-500); }

.wm1 { right: 20px; top: 35px; opacity: 0.55; }
.wm1:hover { opacity: 1; }
.wm2 { right: 140px; top: 35px; opacity: 0.55; }
.wm2:hover { opacity: 1; }

.f01  { background: url(img/1yf.png);  display: inline-block; width: 32px; height: 32px; }
.f02  { background: url(img/2yf.png);  display: inline-block; width: 32px; height: 32px; }
.f03  { background: url(img/3yf.png);  display: inline-block; width: 32px; height: 32px; }
.f04  { background: url(img/4yf.png);  display: inline-block; width: 32px; height: 32px; }
.f05  { background: url(img/5yf.png);  display: inline-block; width: 32px; height: 32px; }
.f06  { background: url(img/6yf.png);  display: inline-block; width: 32px; height: 32px; }
.f07  { background: url(img/7yf.png);  display: inline-block; width: 32px; height: 32px; }
.f08  { background: url(img/8yf.png);  display: inline-block; width: 32px; height: 32px; }
.f09  { background: url(img/9yf.png);  display: inline-block; width: 32px; height: 32px; }
.f010 { background: url(img/10yf.png); display: inline-block; width: 32px; height: 32px; }
.f011 { background: url(img/11yf.png); display: inline-block; width: 32px; height: 32px; }

.foot-center { color: var(--purple-600); margin: 5px; padding-top: 16px; text-align: center;}
.foot-center .str { padding: 0 10px; }
.foot-center a { color: var(--purple-500); text-decoration: underline; }
.foot-center a:hover { color: var(--purple-700); }

/* ============================================================
   PIN TASK / BLOCK UP TOP
   ============================================================ */
.task-premium-pin-tab { max-width: 582px; width: 582px; padding: 0; margin: 0; }
.task-premium-pin-tab__content { height: 69px; max-height: 69px; overflow: hidden; }
.task-premium-pin-tab__inner_position_fixed { position: fixed !important; top: 55px; z-index: 100; width: 582px; background: #fff; box-shadow: var(--shadow-md); border-radius: 0 0 var(--radius-md) var(--radius-md); }

.premium-pin-control__arrow-up,
.premium-pin-control__arrow-down {
  background-image: url('img/arrow-black.png');
  background-size: 16px;
  width: 16px; height: 16px;
  cursor: pointer;
}
.premium-pin-control__arrow-up { transform: rotate(180deg); }
.premium-pin-control { display: flex; justify-content: space-around; padding: 4px 44%; }
.pin-task-service__info       { padding-bottom: 10px; }
.pin-task-service__input      { padding: 4px; text-align: center; }
.pin-task-service__input-output{ padding: 10px 0; }
.pin-task-service__price-output{ padding-top: 10px; }
.company-pin { background: url(img/ico/kabinet/push-pin.png) no-repeat left top; margin-right: 5px; }

.block-up-top {
  display: inline-block;
  width: 140px;
  vertical-align: top;
  border: 1.5px solid var(--border-color);
  margin: 10px;
  border-radius: var(--radius-md);
  padding: 10px 10px 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.block-up-top:hover { box-shadow: var(--shadow-md); border-color: var(--border-hover); }
.block-up-top a, .a_up_top a { cursor: pointer; }
.block-up-top .up-top-text { margin: 5px 0 15px; font-weight: 700; color: var(--text-primary); }

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
@keyframes gradientShift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-5px); }
}
@keyframes button_sale {
  0%, 100% { box-shadow: 0 0 20px 8px rgba(244, 63, 94, 0.4); }
  50%       { box-shadow: 0 0 6px 0 rgba(244, 63, 94, 0.2); }
}

/* ============================================================
   ИСТОРИЯ / ГРАФИК
   ============================================================ */
.history-grafik {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url('img/ico/grafik.png') center center no-repeat;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.history-grafik:hover { opacity: 1; }

/* ============================================================
   РАЗНОЕ
   ============================================================ */
#tiptip_holder {display:none;position:absolute;top:0;left:0;z-index:99999;}
span.select {
  background: url(img/select_bg.png) no-repeat;
  display: inline-block;
  position: relative;
  width: 100px;
  height: 19px;
  padding: 1px 0 0 5px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 4px;
  z-index: 998;
}
span.select:hover .options { display: block; }
span.select .options {
  background: url(img/select_options_bg.png) no-repeat;
  display: none;
  position: absolute;
  width: 100px;
  height: 40px;
  font-size: 13px;
  cursor: pointer;
  top: 15px;
  left: 0;
  z-index: 998 !important;
  padding-top: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
span.select .options .option {
  display: block;
  padding: 0 0 0 5px;
  line-height: 17px;
  text-decoration: none;
  color: var(--text-primary);
  transition: 0.2s ease;
}
span.select .options .option:hover {
  background: var(--purple-500);
  color: #fff;
}
span.select .options .active { background: var(--purple-500); color: #fff; }

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 1220px) {
  .main { width: 100%; border-radius: 0; }
  .footer { width: 100%; }
  .footer__container { width: 100%; padding: 0 16px; }
}

@media (max-width: 768px) {
  input, select, textarea { font-size: 14px; padding: 12px 14px; }
  .main { padding-left: 8px; padding-right: 8px; }
  .menu-add { width: 100%; }
  .menu-add a { width: 100%; box-sizing: border-box; }
  #load-pages, #load-pages-dop, .load-pages { width: 90%; }
  .block1, .block2 { float: none; width: 100%; }
}

.td-chain {
    text-align: center;
    padding-bottom: 5px;
}

.link-chain {
    display: inline-flex;
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Выравнивание по горизонтали */
    width: 222px;
    height: 50px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 15px;
    font-size: 12px;
    font-weight: normal;
    color: var(--text-primary);
    background-color: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-decoration: none;
    box-sizing: border-box;
    
    /* Решение проблемы выравнивания */
    position: relative;
    
    /* Обертка для текста */
    &::before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    
    /* Сам текст */
    &:not(:empty):after {
        content: '';
        display: inline-block;
        vertical-align: middle;
    }
}

/* Если текст многострочный */
.link-chain:has(> *:not(:only-child)) {
    align-items: stretch;
    padding: 10px 15px; /* Больше отступов для многострочного текста */
}

/* Медиа-запрос для маленьких экранов */
@media (max-width: 768px) {
    .link-chain {
        height: auto; /* Высота по содержимому */
        padding: 10px 15px; /* Меньше отступы на мобильных */
    }
}


.link-chain:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
  color: var(--purple-700);
}

.add-chain {
  vertical-align:top;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  
  /* ИСПРАВЛЕНИЯ ТУТ */
  font-size: 22px;        /* Размер чуть меньше круга, чтобы не ломать центр */
  line-height: 1;         /* Убираем высоту строки */
  padding-bottom: 5px;    /* Визуальная компенсация: символ "+" часто смещен вверх в шрифтах */
  padding-right:2px;
  padding-left:2px;
  
  color: #ffffff;
  background: var(--nav-bg);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
}

.add-chain:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-glow);
}

.color-chain-red { 
  border-color: #fca5a5; 
  background-color: #fff1f2; 
  color: #be123c; 
}
.color-chain-red:hover { border-color: #f43f5e; background-color: #ffe4e6; }

.color-chain-green { 
  border-color: #86efac; 
  background-color: #f0fdf4; 
  color: #15803d; 
}
.color-chain-green:hover { border-color: #22c55e; background-color: #dcfce7; }

.color-chain-blue { 
  border-color: #a5b4fc; 
  background-color: #f5f7ff; 
  color: var(--violet-700); 
}
.color-chain-blue:hover { border-color: var(--violet-500); background-color: #eef2ff; }

.color-chain-black { 
  border-color: #d4d4d8; 
  background-color: #fafafa; 
  color: #27272a; 
}
.color-chain-black:hover { border-color: #71717a; background-color: #f4f4f5; }

.color-chain-orange { 
  border-color: #fdba74; 
  background-color: #fffaf5; 
  color: #c2410c; 
}
.color-chain-orange:hover { border-color: #fb923c; background-color: #fff7ed; }

.color-chain-aqua { 
  border-color: #a5f3fc; 
  background-color: #f0fdfa; 
  color: #0e7490; 
}
.color-chain-aqua:hover { border-color: #22d3ee; background-color: #ecfeff; }

.color-chain-brown { 
  border-color: #d6d3d1; 
  background-color: #fafaf9; 
  color: #78350f; 
}
.color-chain-brown:hover { border-color: #a8a29e; background-color: #f5f5f4; }

.menu-balance {
    display: block;
    margin: 9px auto 0 auto;
    border-radius: 4px;
    padding: 0 5px;
    position: relative;
    height: 35px;
    width: 188px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
    line-height: 35px;
    font-weight: 500;
    color: #000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    user-select: none;
    transition: all 0.3s ease;
}

.menu-balance a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 35px;
    color: #424242;
    text-shadow: 0 0 0px #000;
}

.hint-quest {background: url(img/ico/help-add.png) no-repeat center center; height: 16px; width: 16px; display: inline-block; margin:0 3px 0 3px; border: none; outline: none; cursor: help;border-radius: 2px;vertical-align: middle;}
.hint-quest:hover div{position: absolute; display: inherit;}
.tooltip {
    position: absolute;
    padding: 10px 13px;
    z-index: 2;
    background-color: rgb(20%,20%,20%);
    color: #f7f7f7;
    border-radius: 2px;
    font: 12px/1.46 arial, sans-serif;
    text-align: left;
    width: 450px;
}

.go2_ajaxchat {
box-sizing: border-box;
    background-color: #fff;
    color: var(--purple-600);
    width: 74px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 2px solid var(--purple-400);
    opacity: 0.85;
    border-bottom: none;
    position: fixed;
    z-index: 998;
    right: -21px;
    top: 330px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    cursor: help;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
	font-size:16px;
}

/* Индикатор новых сообщений чата.
   Класс .has-new-mess ставит funcjs['chat-badge'] из /statica/js/site_main.js.
   Кружок круглый, поэтому поворот вкладки на 270deg на него не влияет. */
.go2_ajaxchat .chat-new-dot {
    display: none;
    width: 9px;
    height: 9px;
    margin-left: 6px;
    border-radius: 50%;
    background: #ef4444;
    vertical-align: middle;
}
.go2_ajaxchat.has-new-mess {
    opacity: 1;
}
.go2_ajaxchat.has-new-mess .chat-new-dot {
    display: inline-block;
    animation: chat-dot-blink 1.1s ease-in-out infinite;
}
@keyframes chat-dot-blink {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35); }
    50%      { opacity: 0.3; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
/* Уважаем системную настройку «уменьшить анимацию» — кружок просто горит */
@media (prefers-reduced-motion: reduce) {
    .go2_ajaxchat.has-new-mess .chat-new-dot { animation: none; }
}

/* ============================================================
   КАРТОЧКА РЕФЕРАЛА (.goodref)
   ============================================================ */
.goodref {
  display: inline-block;
  text-align: center;
  margin: 8px;
  padding: 16px;
  cursor: pointer;

  /* Фон и границы */
  background-color: var(--lavender-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  
  /* Типографика */
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  
  /* Эффекты */
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  box-sizing: border-box;
}

.goodref:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
  color: var(--purple-700);
}

/* ============================================================
   АВАТАР РЕФЕРАЛА (.ava-goodref)
   ============================================================ */
.ava-goodref {
  width: 162px;
  height: 162px;
  object-fit: cover;
  
  /* Заменяем старый double border на чистый современный стиль */
  border: 3px solid #ffffff;
  outline: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  
  margin-top: -15px;
  margin-bottom: 7px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.goodref:hover .ava-goodref {
  outline-color: var(--purple-400);
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   КОНТЕЙНЕР ВКЛАДОК (.menu-task-work)
   ============================================================ */
.menu-task-work {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;         /* Ссылки перенесутся на новую строку, если не влезут */
  gap: 4px;
  background: #ffffff;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  padding: 0 8px;          /* Внутренние отступы */
  box-sizing: border-box;  /* Важно: заставляет border и padding входить в ширину */
  width: 100%;             /* Строго по ширине родителя */
  max-width: 100%;         /* Защита от вылета за экран */
  box-shadow: var(--shadow-sm);
  overflow: hidden;        /* Обрезаем всё, что пытается вылезти */
}

/* ============================================================
   ССЫЛКИ-ВКЛАДКИ (.menu-task-work__link)
   ============================================================ */
.menu-task-work__link {
  display: inline-block;
  color: var(--text-secondary);
  text-align: center;
  padding: 12px 14px;      /* Увеличил зону клика */
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-fast);
  border-bottom: 3px solid transparent; /* Более заметная линия */
  margin-bottom: -1.5px;   /* Прижимаем линию к границе контейнера */
  box-sizing: border-box;
}

/* Состояние при наведении */
.menu-task-work__link:hover {
  color: var(--purple-700);
  background-color: var(--purple-50);
  border-bottom-color: var(--purple-300);
}

/* Активная вкладка (если есть такой класс в HTML) */
.menu-task-work__link.active,
.menu-task-work__link_active {
  color: var(--purple-700);
  border-bottom-color: var(--purple-600);
}

/* ============================================================
   КАРТОЧКИ ПЛАТЕЖНЫХ СИСТЕМ (ОСНОВНОЙ КОНТЕЙНЕР)
   ============================================================ */
.cash-wm1, .cash-mb1, .cash-pm1, .cash-yd1, .cash-qw1, .cash-os1, .cash-volet1, .cash-platega1, .cash-rs1, .cash-vs1, .cash-rb1, .cash-pr1, .cash-az1, .cash-ik1, .cash-lp1, .cash-mg1, .cash-mt1, .cash-bl1, .cash-ok1, .cash-sb1, .cash-zp1, .cash-pv1, .cash-wo1, .cash-ak1, .cash-bt1, .cash-lt1, .cash-ah1, .cash-fr1, .cash-pp1, .cash-tl1, .cash-unpayl, .cash-fkwallet1 {
    display: inline-block;
    margin: 8px 5px;
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
    vertical-align: top;
    width: 160px; /* Фиксированная ширина */
    box-sizing: border-box;
}

/* Сброс старых рамок */
[class^="cash-"] div, [class^="cash-"] div div {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* КОНТЕЙНЕР ДЛЯ ЛОГОТИПА И ПОЛОСКИ */
.cash-wm1 div div div, .cash-az1 div div div, .cash-mb1 div div div, .cash-pm1 div div div, .cash-volet1 div div div, .cash-platega1 div div div, .cash-yd1 div div div, .cash-qw1 div div div, .cash-os1 div div div, .cash-rs1 div div div, .cash-vs1 div div div, .cash-rb1 div div div, .cash-pr1 div div div, .cash-ik1 div div div, .cash-lp1 div div div, .cash-mg1 div div div, .cash-mt1 div div div, .cash-bl1 div div div, .cash-ok1 div div div, .cash-sb1 div div div, .cash-zp1 div div div, .cash-pv1 div div div, .cash-wo1 div div div, .cash-ak1 div div div, .cash-bt1 div div div, .cash-lt1 div div div, .cash-ah1 div div div, .cash-fr1 div div div, .cash-pp1 div div div, .cash-tl1 div div div, .cash-unpayl div div div, .cash-fkwallet1 div div div {
    position: relative; /* Чтобы полоска могла прилипнуть к низу */
    height: 105px !important; /* Увеличил общую высоту карточки */
    background-size: 105px auto !important;
    background-position: center 20px !important; /* Логотип чуть выше центра */
    display: block;
}

/* ПУТИ К КАРТИНКАМ (БЕЗ ИЗМЕНЕНИЙ) */
.cash-wm1 div div div { background:url(img/eps/icon-wm.png) no-repeat; }
.cash-volet1 div div div { background:url(img/eps/icon-volet.png) no-repeat; }
.cash-platega1 div div div { background:url(imgk/eps/icon-platega.png) no-repeat; }
}
.cash-platega1 div div div:before {
    content: "PLATEGA";
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.08em;
}
.cash-mb1 div div div { background:url(img/eps/icon-mb.png) no-repeat; }
.cash-pm1 div div div { background:url(img/eps/icon-pm.png) no-repeat; }
.cash-qw1 div div div { background:url(img/eps/icon-qw.png) no-repeat; }
.cash-yd1 div div div { background:url(img/eps/icon-yd.png) no-repeat; }
.cash-os1 div div div { background:url(img/eps/icon-os.jpg) no-repeat; }
.cash-az1 div div div { background:url(img/eps/icon-az.png) no-repeat; }
.cash-rs1 div div div { background:url(img/eps/icon-rs.jpg) no-repeat; }
.cash-vs1 div div div { background:url(img/eps/icon-vs.png) no-repeat; }
.cash-rb1 div div div { background:url(img/eps/icon-rb.png) no-repeat; }
.cash-pr1 div div div { background:url(img/eps/icon-pr.png) no-repeat; }
.cash-ik1 div div div { background:url(img/eps/icon-ik.png) no-repeat; }
.cash-lp1 div div div { background:url(img/eps/icon-lp.png) no-repeat; }
.cash-unpayl div div div { background:url(img/eps/icon-unpay.png) no-repeat; }
.cash-fkwallet1 div div div { background:url(img/eps/icon-fkw.jpg) no-repeat; }
.cash-mg1 div div div { background:url(img/eps/icon-mg.png) no-repeat; }
.cash-mt1 div div div { background:url(img/eps/icon-mt.png) no-repeat; }
.cash-bl1 div div div { background:url(img/eps/icon-bl.png) no-repeat; }
.cash-ok1 div div div { background:url(img/eps/icon-ok.png) no-repeat; }
.cash-sb1 div div div { background:url(img/eps/icon-sb.png) no-repeat; }
.cash-zp1 div div div { background:url(img/eps/icon-zp.png) no-repeat; }
.cash-pv1 div div div { background:url(img/eps/icon-pv.png) no-repeat; }
.cash-wo1 div div div { background:url(img/eps/icon-wo.png) no-repeat; }
.cash-ak1 div div div { background:url(img/eps/icon-ak.png) no-repeat; }
.cash-fr1 div div div { background:url(img/eps/icon-fr.png) no-repeat; }
.cash-bt1 div div div { background:url(img/eps/icon-bt.png) no-repeat; }
.cash-lt1 div div div { background:url(img/eps/icon-lt.png) no-repeat; }
.cash-ah1 div div div { background:url(img/eps/icon-ah.png) no-repeat; }
.cash-pp1 div div div { background:url(img/eps/icon-pp.png) no-repeat; }
.cash-tl1 div div div { background:url(img/eps/icon-tl.png) no-repeat; }

/* ИНФОРМАЦИОННЫЕ ПОЛОСКИ (ТЕПЕРЬ СТРОГО ВНИЗУ) */
.line-blue, .line-gray, .line-green, .line-red, .line-orange {
    position: absolute; /* Ключевое изменение */
    bottom: 0;          /* Прижать к самому низу */
    left: 0;
    right: 0;
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    padding: 8px 2px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.line-blue   { background: linear-gradient(135deg, var(--purple-500), var(--purple-700)); }
.line-gray   { background: linear-gradient(135deg, #94a3b8, #64748b); }
.line-green  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.line-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.line-red    { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ */
[class^="cash-"]:hover {
    transform: translateY(-4px);
    border-color: var(--purple-400);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.taskimg-vip {
    background: url(img/ico/ad-vip.png) no-repeat 2px 1px;
}

.taskimg1, .taskimg-ok, .taskimg-work, .taskimg-work2, .taskimg-fail, .serfimggo, .taskimg-vip, .img_top_1, .img_top_2, .img_top_3
 {
    width: 40px;
    height: 40px;
    display: block;
    margin-bottom: -2px;
}

.taskimg1
 {
  /*  background: url(img/ico/ad-taskstatushigh1.png) no-repeat 2px 1px; */
}

/* ============================================================
   НАВИГАЦИЯ В ТЕСТАХ (.task-navi-test)
   ============================================================ */
.task-navi-test {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--border-color); /* Линия-разделитель под всем меню */
    margin-bottom: 15px;
	float:right;
}

.task-navi-test a {
    color: var(--text-secondary); /* Используем ваш мягкий фиолетово-серый */
    display: inline-block;
    padding: 10px 16px;
    margin: 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 3px solid transparent; /* Резервируем место под линию */
    transition: var(--transition-fast);
    border-radius: var(--radius-md) var(--radius-md) 0 0; /* Скругляем только верхние углы */
}

/* Эффект при наведении */
.task-navi-test a:hover {
    color: var(--purple-700);
    background-color: var(--purple-50);
    border-bottom-color: var(--purple-200);
}

/* АКТИВНАЯ ВКЛАДКА */
.task-navi-test .activ {
    color: var(--purple-800) !important;
    border-bottom-color: var(--purple-600) !important; /* Яркая линия подчеркивания */
    background-color: var(--purple-100);
    font-weight: 700 !important;
}

.taskimg,
.taskimg-ok, .taskimg-work,.taskimg-work2, .taskimg-fail, .serfimggo, .taskimg-vip, .img_top_1, .img_top_2, .img_top_3 {
    width: 40px; 
    height: 40px;
    display: block;
    margin-bottom: -2px; 
}

.taskimg1,
.taskimg-ok, .taskimg-work,.taskimg-work2, .taskimg-fail, .serfimggo, .taskimg-vip, .img_top_1, .img_top_2, .img_top_3 {
    width: 40px; 
    height: 40px;
    display: block;
    margin-bottom: -2px; 
}

.taskimg2,
.taskimg-ok, .taskimg-work,.taskimg-work2, .taskimg-fail, .serfimggo, .taskimg-vip, .img_top_1, .img_top_2, .img_top_3 {
    width: 40px; 
    height: 40px;
    display: block;
    margin-bottom: -2px; 
}

.img_top_1{ background: url(img/ico/ad_task_one.png) no-repeat 2px 1px; }
.img_top_2{ background: url(img/ico/ad_task_two.png) no-repeat 2px 1px; }
.img_top_3{ background: url(img/ico/ad_task_three.png) no-repeat 2px 1px; }
.taskimg2 { background: url(img/ico/ad-taskstatushigh.png) no-repeat 2px 1px; } 
.taskimg1 { background: url(img/ico/ad-taskstatushigh1.png) no-repeat 2px 1px; } 
.taskimg-ok { background: url(img/ico/ad-task-ok.png) no-repeat 2px 1px; }
.taskimg-work { background: url(img/ico/ad-task-work.png) no-repeat 2px 1px; }
.taskimg-work2 { background: url(img/ico/ad-task-work2.png) no-repeat 2px 1px; }
.taskimg-vip { background: url(img/ico/ad-vip.png) no-repeat 2px 1px; }
.taskimg-fail { background: url(img/ico/ad-task-fail.png) no-repeat 2px 1px; }
.serfimggo { background: url(img/ico/ad-task-hod.png) no-repeat 2px 1px; }

.rating0, .rating1, .rating2, .rating3, .rating4, .rating5 {
    width: 82px;
    height: 16px;
    display: block;
	float:right;
}
.rating0 { background: url(img/ico/rating0.png) no-repeat right top; }
.rating1 { background: url(img/ico/rating1.png) no-repeat right top; }
.rating2 { background: url(img/ico/rating2.png) no-repeat right top; }
.rating3 { background: url(img/ico/rating3.png) no-repeat right top; }
.rating4 { background: url(img/ico/rating4.png) no-repeat right top; }
.rating5 { background: url(img/ico/rating5.png) no-repeat right top; }

#task-navi{float:right;}
.task-navi-test{font-size:13px;margin-top:4px;display:inline-block;margin-right:10px;}
.task-navi-test a{color:#000064;display:inline-block;border-bottom:3px solid #FFF;padding:0 5px;margin:0 2px;}
.task-navi-test .activ{border-bottom:3px solid #006699;font-weight:bold;color:#006699;}
a#navi-start, a#navi-end{border:0;display:none;}

#task-navi .scroll-menu{background: rgba(0, 0, 0, 0.8);padding:10px;position: fixed;top:10px;left:50%;border-radius:3px;z-index:99;margin:0;}
#task-navi .scroll-menu a{color:#CFCFCF;border:0;}
#task-navi .scroll-menu a:hover{color:#FFF;}
#task-navi .scroll-menu .activ{border-bottom:3px solid #FFF;color:#FFF;}

#load-scrin{position: relative;height: 40px;border:3px solid #B1C3CA;border-top:0;width: 570px;padding:7px 5px 5px 5px;background: #eee;margin-top:-3px;}
.act-scrin{cursor:pointer;}

#load-scrin .text-scrin{padding-top:8px;text-align: center;position: absolute;right:0;top:0;left:0;bottom:0;z-index:0;}

.act-scrin .text-scrin{padding-top:11px;}

#contenteditable{margin:0;padding:0;resize: none;overflow: hidden;}
#img-loag-scrin{display:none;}

.vkgrvel{background: url(img/ico/vk-groups.png);width:32px;height:32px;cursor:help}
.vklkvel{background: url(img/ico/vk-like.png);width:32px;height:32px;cursor:help}
.vkrepvel{background: url(img/ico/vk-repost.png);width:32px;height:32px;cursor:help}
.ybrvel{background: url(img/ico/youtube-podp.png);width:32px;height:32px;cursor:help}
.yblkvel{background: url(img/ico/youtube-like.png);width:32px;height:32px;cursor:help}
.ybprosm{background: url(img/ico/youtube-ads.png);width:32px;height:32px;cursor:help}
.rutube{background: url(img/ico/rutube-ads.png);width:32px;height:32px;cursor:help}
.refpodvelg{background: url(img/ico/gift_ref.png);width:40px;height:40px;cursor:pointer}
.ratingvelm{background: url(img/ico/rating16.png);width:16px;height:16px;border:none;margin:0;padding:0;vertical-align:middle;cursor:help}
.wallvels{background: url(img/ico/wall.png);width:22px;height:13px;border:none;vertical-align:middle}
.wallvelgift{background: url(img/ico/gift.png);width:21px;height:21px;vertical-align:middle;border:none}

.scrin-img{width: 300px;margin:10px auto;position: relative;}
.scrin-img .view-scrin{position: absolute;right:0;top:0;left:0;bottom:0;display:none;background: rgba(0, 0, 0, 0.6);text-align:center;color:#FFF;padding-top:55px;	}
#img-loag-scrin .scrin-img .view-scrin a, #img-loag-scrin .scrin-img .view-scrin span{display:block;color:#000;cursor:pointer;text-align:center;width: 150px;padding:3px 0;margin:5px auto;background: rgba(255, 255, 255, 0.9);border-radius:3px;}
#img-loag-scrin .scrin-img .view-scrin a{color:#3e9f28;}
#img-loag-scrin .scrin-img .view-scrin a:hover{background: #3e9f28;color:#FFF;}
#img-loag-scrin .scrin-img .view-scrin span{color:#c80000;}
#img-loag-scrin .scrin-img .view-scrin span:hover{background: #c80000;color:#FFF;}

.scrin-img:hover .view-scrin{display:block;	}

.block-task-read{
    font-size: 14px;
    display: block;
    padding-left: 60px;
    width: 400px;
    margin: 40px auto;
    color: #00649E;
    min-height: 45px;
}

.task-read-wait{background: url(img/ico/task-wait.png) no-repeat left center;}
.task-read-good{background: url(img/ico/task-good.png) no-repeat left center;}
.task-read-no{background: url(img/ico/task-no.png) no-repeat left center;}

.block-vopros{text-align:left;margin:5px 10px;}
.block-vopros .vopros{border:1px dashed #AE5151;padding:5px 10px;margin:15px 0 5px 0;background:#F9F2F2;}
.block-vopros .otvet span{margin:3px 0 3px 20px;color:#006699;display:block;width: 300px;padding:5px 10px;background:#fff;margin:4px 0;cursor:pointer;border:1px solid #CCC;border-radius:3px;}
.block-vopros .otvet span:hover, .block-vopros .otvet span.active{background:#eee;border:1px solid #006699;}

.youtube-load{
  background: url('img/load-offers1.gif') center center no-repeat;
  height: 35px;
}

.youtube-button{
  min-height: 35px;
  text-align:center;
}

.youtube-button .go-link-youtube, .youtube-button .status-link-youtube, .youtube-button .youtube-error
{display: inline-block;padding:5px 10px;margin:5px auto;text-align:center;border-radius: 2px;color:#FFF;text-shadow:1px 1px 3px #000;cursor:pointer;}

.youtube-button .go-link-youtube{background: #569170;}
.youtube-button .go-link-youtube:hover{opacity: 0.8;}
.youtube-button .status-link-youtube{background: #FA8072;}
.youtube-button .youtube-error{background: #cc0000;}

.youtube-help{color:#C80000;cursor: pointer;float:right;}
.youtube-help:hover{color:#ff0000;}

.serfcontrol-play, .serfcontrol-pause, .serfcontrol-block, .serfcontrol-moder, .serfcontrol-postmoder, .refkonkurs-play, .refkonkurs-stop  {
    height: 32px;
    width: 32px;
    display: block;
    border: none;
    outline: none;
    margin: 2px 0px 2px 3px;
}
.serfcontrol-play { background: url(img/ico/kabinet/kab-pause.png) no-repeat left top; cursor: pointer;}
.serfcontrol-pause { background: url(img/ico/kabinet/kab-play.png) no-repeat left top; cursor: pointer;}
.serfcontrol-block { background: url(img/ico/kabinet/kab-block.png) no-repeat left top; cursor: defalt;}
.serfcontrol-moder { background: url(img/ico/kabinet/kab-moder.png) no-repeat left top; cursor: defalt;}
.serfcontrol-postmoder { background: url(img/ico/kabinet/kab-postmoder.png) no-repeat left top; cursor: defalt;}

.job-not {
    font-size: 12px;
    color: #cdcbb7;
    line-height: 2.2;
    margin-left: 5px;
}
a.job-exist {
    display: block;
    float: left;
    font-size: 12px;
    line-height: 2.2;
    color: #028ac1;
    background: url(img/ico/kabinet/w.gif) no-repeat 5px 6px;
    padding-left: 24px;
    height: 24px;
}
a.job-exist:hover {
    color: #E57C00;
}

.job-reply {
    background-color: ##ede8ff;
    border: 1.5px dashed var(--purple-400);
    color: #6d28d9;
    padding: 10px;
    margin: 5px;
    display: block;
}
.job-reply-btns {
    display: block; 
    margin-top: 2px;
    margin-bottom: 5px;
    padding: 6px 6px 0px;
    height: 50px;
    background-color: #fff;
}
.ip_reply {
    background:url(img/info-ip.png) no-repeat 0 0;
    color: #4a7191;
    font-size: 11px;
    display: block;
    padding-left: 20px;
    text-align: left;
    height: 16px;
    margin-bottom: 5px;
    cursor: help;
}

a.scon-edit, a.scon-view, a.scon-delete,a.scon-backmoney2, a.scon-pay, a.scon-backmoney, a.scon-lock, a.scon-ulock, a.scon-editno, a.scon-url, a.scon-money, a.scon-stat, .scon-upok,.scon-up, .scon-down, .scon-gray , .scon-vip, .scon-vipno, .scon-color, .scon-colorno, .scon-upno, .scon-erase, .scon-delete, .scon-erase, .scon-speed-1, .scon-speed-2, .scon-speed-3, .scon-speed-4, .scon-speed-5, .scon-speed-6, .scon-speed-7, .scon-top {
    height: 16px;
    width: 16px;
    display: block;
    border: none;
    outline: none;
    cursor: pointer;
    float: right;
    margin-right: 3px;
    margin-top: 3px;
}
a.scon-url{
    height: 16px;
    width: 24px;
    display: block;
    border: none;
    outline: none;
    cursor: pointer;
    float: right;
    margin-right: 3px;
    margin-top: 3px;
}
a.scon-edit { background: url(img/ico/kabinet/edit.png) no-repeat left top; margin-right: 5px; }
a.scon-money { background: url(img/ico/kabinet/many.gif) no-repeat left top; margin-right: 5px; }
a.scon-editno { background: url(img/ico/kabinet/editno.png) no-repeat left top; margin-right: 5px; }
a.scon-view { background: url(img/ico/kabinet/taskyes.png) no-repeat left top; margin-right: 5px;}
a.scon-url { background: url(img/ico/kabinet/url_task.png) no-repeat left top; margin-right: 5px;}
a.scon-lock { background: url(img/ico/kabinet/lock_16.png) no-repeat left top; margin-right: 5px;}
a.scon-ulock { background: url(img/ico/kabinet/ulock_16.png) no-repeat left top; margin-right: 5px;}
.scon-up { background: url(img/ico/kabinet/taskup.png) no-repeat left top; margin-right: 5px; }
.scon-top { background: url(img/ico/kabinet/taskup_top.png) no-repeat left top; margin-right: 5px; }
.scon-upno { background: url(img/ico/kabinet/taskupno.png) no-repeat left top; margin-right: 5px; }
.scon-vip { background: url(img/ico/kabinet/viptask.png) no-repeat left top; margin-right: 5px; }
.scon-vipno { background: url(img/ico/kabinet/viptaskno.png) no-repeat left top; margin-right: 5px; }
.scon-color { background: url(img/ico/kabinet/colortask.png) no-repeat left top; margin-right: 5px; }
.scon-colorno { background: url(img/ico/kabinet/colortaskno.png) no-repeat left top; margin-right: 5px; }
.scon-delete { background: url(img/ico/kabinet/cross.png) no-repeat left top;}
.scon-erase { background: url(img/ico/kabinet/switch.png) no-repeat left top; margin-right: 5px; }
a.scon-delete { background: url(img/ico/kabinet/cross.png) no-repeat left top;}
a.scon-backmoney { background: url(img/ico/kabinet/mbudget.png) no-repeat left top;}
a.scon-stat { background: url(img/ico/kabinet/stat.png) no-repeat left top; margin-right: 5px;}
a.scon-backmoney2 { background: url(img/ico/kabinet/movebudget2.png) no-repeat left top; }

.scon-erase { background: url(img/ico/kabinet/switch.png) no-repeat left top; }
.budget{
	text-align: center;
}
.add-budget, a.add-budgetnone {
    text-align: center;
    display: block;
    border: none;
    background: url(img/ico/kabinet/gold.png) no-repeat top center;
	cursor: pointer;
    font-size: 12px;
    padding-top: 30px;
    color: #5B9F00;
}
#verx {display: none;position: fixed;bottom:30px;width: 50px;height: 50px;right: 20px;z-index: 997;background: url(ico/verx.png);transition:all 0.3s ease;opacity: 0.6;cursor:pointer;}
#verx:hover {opacity: 1;outline:0;}

.scon-speed-1 { background: url(img/ico/kabinet/advspeed.png) no-repeat 0 0; margin-right: 5px; }
.scon-speed-2 { background: url(img/ico/kabinet/advspeed.png) no-repeat 0 -16px; margin-right: 5px; }
.scon-speed-3 { background: url(img/ico/kabinet/advspeed.png) no-repeat 0 -32px; margin-right: 5px; }
.scon-speed-4 { background: url(img/ico/kabinet/advspeed.png) no-repeat 0 -48px; margin-right: 5px; }
.scon-speed-5 { background: url(img/ico/kabinet/advspeed.png) no-repeat 0 -64px; margin-right: 5px; }
.scon-speed-6 { background: url(img/ico/kabinet/advspeed.png) no-repeat 0 -80px; margin-right: 5px; }
.scon-speed-7 { background: url(img/ico/kabinet/advspeed.png) no-repeat 0 -96px; margin-right: 5px; }

.expanding {
    font: 12px tahoma, arial, sans-serif;
    width: 90%;
    height: 150px;
    padding: 2px 6px;
    margin: 5px 0;
    border: 3px solid #B1C3CA;
}

.go-task-start{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2e853a;
  width: 100%;
  height: 100%; 
}

.task-blok-error{
  text-align: center;
  position: absolute;
  border:1px solid #8e0000;
  background: #d70000;
  padding:15px;
  color:#FFF;
  font: 16px tahoma, arial, sans-serif;
  top: 30%;
  left: 50%;
  width: 450px;
  margin: 0 0 0 -225px;
  box-shadow: 1px 1px 10px  rgba(0,0,0,0.7) 
}

a.add-budget:hover {
    border: none;
    background: #F5F5F5 url(img/ico/kabinet/gold-act.png) no-repeat top center;
    outline: none;
    color: #EF6A00;
	cursor: pointer;
}
.transport-go_moder {
    text-align: center;
    display: block;
    border: none;
    background: url(img/ico/kabinet/gomoder.png) no-repeat top center;
    font-size: 11px;
    padding-top: 25px;
    color: #5B9F00;
    cursor: pointer;
}
.transport-go_moder:hover {
    border: none;
    background: url(img/ico/kabinet/gomoder-act.png) no-repeat top center;
    outline: none;
    color: #EF6A00;
}
.transport-moder {
    text-align: center;
    display: block;
    border: none;
    background: url(img/ico/kabinet/gomoder-act.png) no-repeat top center;
    font-size: 11px;
    padding-top: 25px;
    color: #EF6A00;
}

.refdel, .refdel_no, .ref_birj, .ref_birj_es, .ref_birj_no{
    float: right;
    display: block;
    height: 16px;
    width: 16px;
    outline: none;
    border: none;
    margin: 0 3px;
    cursor: pointer;
}
.refdel { background: url(img/ico/icon-comp.png) no-repeat left top; }
.refdel_no { background: url(img/ico/icon-comp.png) no-repeat left bottom; }
.ref_birj { background: url(img/ico/ref_birj.png) no-repeat left top; }
.ref_birj_es { background: url(img/ico/box.png) no-repeat left top;}
.ref_birj_no { background: url(img/ico/ref_birj.png) no-repeat left bottom; }
.refdel:hover, .refdel_no:hover, .ref_birj:hover, .ref_birj_es:hover, .ref_birj_no:hover{border: none;}

.refbonus{font-size:11px;text-align:center;color:#fff;line-height:2;display:block;background:url(img/rbonus.png) no-repeat left top;width:40px;height:23px;border:none;text-shadow:1px 1px 1px #438216;cursor:pointer;margin-top:1px;margin-bottom:-1px;}
.refbonus-no{font-size:11px;text-align:center;color:#fff;line-height:2;display:block;background:url(img/rbonus-no.png) no-repeat left top;width:40px;height:23px;border:none;text-shadow:1px 1px 1px #438216;cursor:pointer;margin-top:1px;margin-bottom:-1px;}
.refdel{float: right; display: block; height: 16px; width: 16px; outline: none; border: none; margin: 0 1px; cursor: pointer; background: url(img/ico/icon-comp.png) no-repeat left top;}
.refdel_no{float: right; display: block; height: 16px; width: 16px; outline: none; border: none; margin: 0 1px; cursor: help; background: url(img/ico/icon-comp.png) no-repeat left bottom;}
.refdel:hover, .refdel_no:hover{border: none;}

#referals-new th span{cursor: pointer;font-size:11px;}
#referals-new th span.active-ASC, th span.active-DESC{font-weight: bold;border-bottom: 1px dashed #fff;}
#referals-new th span.active-ASC:after, #referals-new th span.active-DESC:after {font-size:10px;vertical-align: top;}
#referals-new th span.active-ASC:after { content:' \2191';}
#referals-new th span.active-DESC:after { content: ' \2193';}

.kab-text{
  color: #555;
  font-size: 11px;	
}

.bb-code{
	display: inline-block;
	min-width: 10px;
	font: 12px Arial;
	line-height: 20px;
	background: #6936fc;
	border-radius: 3px;
	color:#FFF;
	text-align: center;
	padding:0 5px;
	cursor: pointer; 
}
.bb-code:hover{
  background: #0099CC;	
}
.bb-code.bold{font-weight: bold;}
.bb-code.italic{font-style: italic;}
.bb-code.uline{text-decoration: underline;}

.dialog-smail{vertical-align: middle;margin-bottom: 1px; display:inline-block;width: 20px;height: 20px;border-radius:3px;cursor:pointer;line-height: 20px;background: #ff5722 url(img/ico/smail.png) center center no-repeat;position:relative;}
.dialog-smail div{display:none;width:450px;position: absolute;top:10px;left:-110px;background:rgba(255,255,255, 0.8);z-index:2;border:2px solid #CCC;text-align:left;}
.dialog-smail div img{cursor:pointer;margin:2px;}
.dialog-smail:hover div{display:block;opacity:0.7}

.scount {
    border: 0;
    width: auto;
    font-size: 11px;
    color: #555;
    float: right;
}

.p_block {
    border-bottom: 1px solid #CCC;
    margin: 10px 0;
}

.menu-arr{float:right;display:block;width:150px;border:1px dotted #000;margin-top:10px;border-top:0;text-align:center;background:#DCDCDC;margin-bottom:5px;padding:3px 0;cursor:pointer;margin-right:10px;}
#block-friends-menu{display:none;}
#us-friends-wall{position: relative;}
.us-friends-wall{position: absolute;top:auto;left:auto;width: 100%;display:none;}
.us-friends-wall div{border-bottom:1px solid #CCC;font-size:11px;height: 30px;padding:3px 0px 3px 0px;margin:0 3px;}
.us-friends-wall div .name{color:#019FB6;cursor:pointer;}
.us-friends-wall div .name_0{color:#696969;cursor:pointer;}
.us-friends-wall div .name_1{color:#019FB6;cursor:pointer;}
.us-friends-wall div .name_2{color:#F5A9A9;cursor:pointer;}
.us-friends-wall div .mod{color:#088A08;font-weight: normal;}
.us-friends-wall div .fio{color:#019FB6;font-size: 11px;}
.us-friends-wall div .fio_0{color:#696969;font-size: 11px;}
.us-friends-wall div .fio_1{color:#019FB6;font-size: 11px;}
.us-friends-wall div .fio_2{color:#F5A9A9;font-size: 11px;}
.us-friends-wall .avatar_chat{float:left;width:30px;height:30px;vertical-align:middle;margin-right:5px;border:1px solid #CCC;border-radius:30px;}

.butt-friends-next{display:none;margin:10px auto;text-align:center;background:#eee;border:1px solid #ccc;width: 130px;font-size:11px;border-radius:3px;padding:4px 10px;cursor:pointer;color:#585858;}
.butt-friends-next:hover{background:#DADADA;}
.tables-refkon{font-size:12px;}
.block_podarok{display:inline-block;padding:5px;position: relative;}
.block_podarok .infa_podarok{display: none;width:250px;position: absolute;top: 69px;left: 50%;margin-left:-125px;background: rgba(0, 0, 0, 0.9);color:#FFF;text-align:left;z-index:1;border-radius: 5px; font-size:11px;}
.block_podarok .infa_podarok .user_w_podarok{background:rgba(0, 0, 0, 0.4);padding:4px 10px;}
.block_podarok .infa_podarok .comm_w_podarok{padding:5px 10px;}
.block_podarok:hover .infa_podarok{display: block;}
.block_podarok img{cursor:pointer;width:64px;height: 64px;}
.all-forma-new-p{background: #EEE;padding:12px 10px;text-align:right;}
#all-podarok{width:600px;max-height:600px;overflow-y:auto;}
.pluspodarok:hover{opacity:0.8}
.all-block-podarok{border-bottom:1px solid #CCC;padding:10px 10px 10px 10px;text-align:center;position: relative;}
.all-block-podarok .all-name{float:left;width:100%;text-align:left;}
.all-block-podarok .all-name img{float:left;width:45px;height: 45px;margin:0 10px;border-radius:45px;border: 1px solid #CCC;}
.all-block-podarok .all-name b{color:#546873;}
.all-block-podarok .all-name .all-date{float:right;color:#CCC;}
.all-block-podarok .all-name .all-date{float:right;color:#CCC;}
.all-block-podarok .im-pod{margin:10px 0;}
.all-block-podarok .all-text{margin-bottom:10px;}
#vse-podarki{display:block;width:700px;}
#user-podarki{text-align:center;line-height: 16px;}
#user-podarki img{display:block;width:128px;height: 128px;margin:40px auto 30px auto;}
.p-mess{width:300px;margin:20px auto;text-align:left;}
.p-mess b{display:block;}
.p-mess textarea{width:290px;height: 90px;padding:5px;resize: none;}
.p-ser{background: #C0C0C0;padding:10px 0;}

.p_block{border-bottom:1px solid #CCC;margin:10px 0;}
.p_block .p_name_cat{padding:10px 10px;color:#546873;font-size:12px;}
.p_block .p_name_cat b{display:inline-block;width:250px;}

.p_scroll{margin-bottom:10px;height: 172px;}
.p_img{display:inline-block;margin:3px 7px;position: relative;width:80px;height: 80px;cursor:pointer;}
.p_img .p_cena{position: absolute;bottom: 0;left: 50%;margin-left:-35px;width:70px;background:rgba(0, 0, 0, 0.5);text-align:center;padding:3px 0;color:#FFF;display:none;border-radius:3px;}
.p_img .p_cena b{color:#fff;}
.p_img img{width:80px;height: 80px;position: absolute;top: 0;left: 0;}
.p_img:hover .p_cena{display:block;}
.p_plaginat{margin-left:0px;}
.p_plaginat span{display:inline-block;color:#569170;margin:0 2px;border:1px solid #CCC;padding:2px 5px;border-radius:3px;cursor:pointer;}
.p_plaginat span.activ, .p_plaginat span:hover{background: #569170;color:#FFF;border:1px solid #569170;}
.scrol_page{display:none;height: 172px;}
#offers-menu a.filterlineactive{color:#ff8000;}
.offers-img-butt{width:16px;height:16px;border:0;vertical-align: middle;cursor: pointer;}
.mail-sample{position: relative;}
.mail-sample .uved{position: absolute;top: 11px;right: 30px;color:red;}
.mail-sample:hover .inp-del{display:block;}
.avatar-mail{width: 60px;height: 60px;border-radius: 60px;box-shadow: 0px 0px 1px 1px #f5f5f5;margin: -20px 0px 0px -8px;object-fit: cover;border: 3px solid var(--border-color);}
.mail_mess{overflow: auto;max-height:500px;}
.mess_dial{padding: 0 0 0 5px;min-height:60px;border:1px solid #F5F5F5;margin:20px 2px 0 15px;color:#8a6d3b;border-radius: 5px;background: #F0FFFF;}
.data-us{background:#f3e8ff;padding:3px 15px;border:1px solid #F5F5F5;border-top:0;border-right:0;font-size:11px;border-radius: 0px 5px 0px 5px;margin-left:40px;}

.people_cell {width: 69px;overflow: hidden;padding: 2px 4px;text-align: center;float: left;}
.name_field {width: 300px;margin: 0px -117px;}

.tiket{
   height: 38px;
   margin:10px 0;
    background: #6D6C9B;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 38px;
    display: block;
    cursor: default;
    border-radius: 7px;
	
}

.mail-sample, .mail-sample-active {
    font-size: 11px;
    color: #135566;
    display: block;
    border-bottom: solid 1px #DAE2E6;
    margin: 1px 0;
    height: 39px;
    outline: none;
    cursor: pointer;
}
.mail-sample:hover {
    background: #F5F5F5;
}
.mail-sample-active {
    background: #E0FFFF;
    color: #fff;
}
.mail-sample .mail-mailer, .mail-sample-active .mail-mailer {
    display: block;
    width: 170px;
    margin-top: 3px;
    padding-top: 1px;
    float: left;
}
.mail-mailer img {
    background:url(img/avbg-36.png) no-repeat left top;
    padding:4px;
    border: none;
    width: 28px;
    height: 28px;
    display: inline-block;
    margin: -3px 8px -3px 0;
    float: left;
}

#support-scrin{
	text-align: center;
}
#support-scrin .img-scrin-support{
  display: inline-block;
  width: 130px;
  height: 130px;
  position: relative;
  opacity: 0.7;
  margin:5px 10px;	
}	

#support-scrin .img-scrin-support:hover{
  opacity: 1;	
}

#support-scrin .img-scrin-support:hover .del-scrin-support{
  display: block;
}
	
#support-scrin .img-scrin-support .scrin-img{
  width: 130px;
  height: 130px;
  box-shadow: 1px 1px 2px #000;	
}	
#support-scrin .img-scrin-support .del-scrin-support{
  display: none;
  position: absolute;
  right:0;
  top:0;
  cursor:pointer;	
}
#support-scrin .img-scrin-support .del-scrin-support img{
  width: 20px;
  height: 20px;	
}

.scrin-support-users{
	text-align: center;
	padding: 5px;
}
.scrin-support-users img{
	width: 50px;
	height: 50px;
	margin:0 10px;
	box-shadow: 0 0 5px #000;	
}

.supp-title {
    display: block;
    margin-top: 3px;
    margin-left: 14px;
    padding-top: 1px;
    float: left;
}

.supp-title .d-a-p{
	padding: 4px;
    border: none;
    width: 28px;
    height: 28px;
    display: inline-block;
    margin: -3px 8px -3px 0;
    float: left;
}
.taskcut {color: #fff; text-shadow: 1px 1px 1px #608630; font-size: 11px; margin-top: -15px; padding: 0px 4px 2px 10px; border-right: 1px solid #8fbd54; display: block; float: right; background: #abd378 url(imgk/cut.png) no-repeat left center;}


.mess_autor{border:1px solid #D3D3D3;background: #F5F5F5;}
.mess_autor .data-us{border-color:#D3D3D3;background:#F2F2F2; color:#8a6d3b;}

.mess_autor .text-us{background: #fff;}

.status-mess{font-size:11px;color:#D50000;}
.date_mail{font-size:11px;color:#999999;float:right;}

.text-us{padding:10px;width:auto;word-wrap:break-word;color:#555555;background: #faf5ff;margin-left:40px;}
.dop-m-tite .supp-title{width:320px;display:inline-block; line-height:27px;}
.inp-del{float:right;margin-top:10px;margin-right:5px;display:none;}

.block-users{padding:5px 10px;border-bottom:1px dashed #eee;}

.people_cell {width: 69px;overflow: hidden;padding: 2px 4px;text-align: center;float: left;}
.name_field {width: 300px;margin: 0px -117px;}

.dialog-del {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(img/ico/del.png) no-repeat;
    opacity:0.3;
    cursor:pointer;
}
.dialog-del:hover{opacity:1;}

.mail-sample .mail-postcount, .mail-sample .mail-postcount-read, .mail-sample .mail-postcount-send, .mail-sample-active .mail-postcount, .mail-sample-active .mail-postcount-read, .mail-sample .mail-postcount-send, .mail-sample-active .mail-postcount-send {
    color: #fff;
    background: #FDF5E6;
    text-shadow:1px 1px 1px #569170;
    text-align: center;
    display: block;
    float: left;
    padding: 1px 0 2px;
    margin-top: 10px;
    width: 23px;
}
.mail-sample-active .mail-postcount, .mail-sample-active .mail-postcount-read, .mail-sample-active .mail-postcount-send { border: 1px solid #fff; }

.mail-sample .mail-postcount-read {
    background: #9333ea;
    text-shadow:1px 1px 1px #958753;
	border-radius:4px;
}
.mail-sample .mail-postcount-send, .mail-sample-active .mail-postcount-send { 
    background: #7995BC;
    text-shadow:1px 1px 1px #4C6688;
}

.mail-sample .mail-title, .mail-sample-active .mail-title {
    line-height: 3.4;
    margin-left: 180px;
    display: block;
}

/* ============================================================
   ДОПОЛНЕНИЕ: ЧАТ, ПОЧТА И СТАТУСЫ (АДАПТАЦИЯ ПОД НОВЫЙ СТИЛЬ)
   ============================================================ */

/* Статусы заданий */
.taskimg, .taskimg-ok, .taskimg-work, .taskimg-work2, .taskimg-fail, .serfimggo, .img_top_1, .img_top_2, .img_top_3 {
    width: 40px; height: 40px; display: block; margin-bottom: -2px;
}
/*.taskimg     { background: url(img/ico/ad-taskstatushigh.png) no-repeat 2px 1px; }*/
.taskimg-ok  { background: url(img/ico/ad-task-ok.png) no-repeat 2px 1px; }
.taskimg-work { background: url(img/ico/ad-task-work.png) no-repeat 2px 1px; }
.taskimg-fail { background: url(img/ico/ad-task-fail.png) no-repeat 2px 1px; }

/* Сообщения в почте и чате (Облачка) */
.mess_dial {
    padding: 10px;
    border: 1px solid var(--border-color);
    margin: 15px 0;
    border-radius: var(--radius-md);
    background: var(--purple-50);
    color: var(--text-primary);
    position: relative;
}
.mess_autor {
    background: #fff;
    border-color: var(--purple-200);
}
.date_mail { font-size: 11px; color: var(--text-muted); float: right; }

/* Чат */
.ajaxchat .message .chat-text {
    border-bottom: 1px solid var(--purple-50);
    padding: 6px 0;
    font-size: 13px;
    transition: var(--transition-fast);
}
.ajaxchat .message .chat-text:hover { background: var(--purple-50); }
.ajaxchat .message .chat-text .time { color: var(--text-muted); margin-right: 5px; }
.ajaxchat .message .chat-text .name { color: var(--purple-700); font-weight: 700; cursor: pointer; }

/* Панель управления чатом */
.chat-panel-mess .panel {
    background: var(--nav-bg);
    padding: 8px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    gap: 10px;
}
.chat-panel-mess .mess textarea {
    border: 1.5px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 10px;
    resize: none;
}

/* FAQ */
.activ-title-faq {
    background: var(--nav-bg) !important;
    color: #fff !important;
    border-radius: var(--radius-md);
    padding: 12px !important;
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ КЛАССЫ (РЕФЕРАЛЫ, КОНКУРСЫ, НАСТРОЙКИ)
   ============================================================ */

/* Сетка рефералов и заданий */
.ref-item, .adv-item {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition-fast);
}
.ref-item:hover { border-color: var(--purple-400); box-shadow: var(--shadow-sm); }

/* Конкурсы и Прогресс-бары */
.progress-bg {
    background: var(--purple-100);
    border-radius: var(--radius-full);
    height: 12px;
    width: 100%;
    overflow: hidden;
    margin: 10px 0;
}
.progress-bar {
    background: var(--nav-bg);
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* Статусы оплаты/кошельков */
.status-yes { color: #16a34a; font-weight: 700; font-size: 12px; }
.status-no  { color: #dc2626; font-weight: 700; font-size: 12px; }

/* Биржа рефералов (цена) */
.price-box {
    background: var(--purple-50);
    color: var(--purple-800);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    border: 1px solid var(--purple-200);
}

/* Оформление Капчи */
.captcha-wrapper {
    display: inline-block;
    padding: 5px;
    border: 2px solid var(--purple-100);
    border-radius: var(--radius-md);
    background: #fff;
}

/* ============================================================
   ОСТАТКИ: ПАГИНАЦИЯ, ТАЙМЕР И СОЦСЕТИ
   ============================================================ */

/* Пагинация (Номера страниц) */
.nav-pages { margin: 20px 0; text-align: center; }
.nav-pages a, .nav-pages b {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: 13px;
    text-decoration: none;
    transition: var(--transition-fast);
}
.nav-pages a { background: #fff; color: var(--purple-700); }
.nav-pages a:hover { background: var(--purple-50); border-color: var(--purple-400); }
.nav-pages b { background: var(--nav-bg); color: #fff; border-color: var(--purple-700); }

/* Таймер серфинга */
.timer-serf {
    font-size: 24px;
    font-weight: 800;
    color: var(--purple-700);
    text-shadow: 1px 1px 0px #fff;
    background: var(--purple-50);
    padding: 5px 15px;
    border-radius: var(--radius-md);
    border: 2px solid var(--purple-200);
}

/* Кнопки соцсетей (YouTube/VK) */
.btn-youtube { background: #ff0000; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 12px; }
.btn-vk      { background: #4c75a3; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 12px; }

/* Таблицы статистики (Тонкие линии) */
.stat-table { width: 100%; border-spacing: 0; }
.stat-table td {
    padding: 8px;
    border-bottom: 1px solid var(--purple-50);
    font-size: 13px;
}
.stat-table tr:nth-child(even) { background: #fafafa; }

/* ============================================================
   ФИНАЛЬНЫЕ КЛАССЫ: СТЕНА, НОВОСТИ И ФОРМЫ
   ============================================================ */

/* Блоки новостей и комментариев */
.news-item, .wall-msg {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Красивые цитаты/ответы */
blockquote, .answer-quote {
    border-left: 4px solid var(--purple-400);
    padding: 10px 15px;
    background: var(--purple-50);
    margin: 10px 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* Таблицы выплат и списков */
.payout-table, .list-table {
    width: 100%;
}
.payout-table td {
    padding: 10px;
    border-bottom: 1px solid var(--purple-50);
}
.payout-table tr:hover { background: var(--purple-50); }

/* Маленькие ярлыки (например, 'New', 'Hot') */
.badge-new { background: #f43f5e; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 10px; text-transform: uppercase; }
.badge-hot { background: #fb923c; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 10px; }

/* Подсказки и ошибки форм */
.form-help { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.form-error { color: #dc2626; font-size: 12px; font-weight: 600; margin-top: 5px; }

/* Блок поиска заданий */
.task-find {
    background: var(--purple-50);
    padding: 15px;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border-color);
    margin-bottom: 20px;
}

/* Выпадающие списки и поля внутри поиска */
.task-find select, .task-find input[type="text"] {
    margin-bottom: 10px;
    background-color: #fff;
}

/* Кнопки категорий (Клики, Регистрация, YouTube и т.д.) */
.task-category-link {
    display: inline-block;
    padding: 8px 12px;
    margin: 3px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.task-category-link:hover, .task-category-link.active {
    background: var(--nav-bg);
    color: #fff;
    border-color: var(--purple-700);
    box-shadow: var(--shadow-sm);
}
.user-info-mini {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #fff;
    border-radius: var(--radius-md);
}

.user-info-mini img {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--purple-100);
}

.user-status-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--purple-600);
}
.work-row {
    border-left: 4px solid var(--purple-300);
    background: #fff;
    margin-bottom: 5px;
    transition: var(--transition-fast);
}

.work-row:hover {
    border-left-color: var(--purple-600);
    background: var(--purple-50);
}

.work-price {
    font-size: 16px;
    font-weight: 800;
    color: #16a34a; /* Зеленый для денег */
}
.breadcrumb {
    padding: 10px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: var(--purple-50);
    border-radius: var(--radius-md);
    font-size: 13px;
}
.breadcrumb a { color: var(--purple-600); font-weight: 600; }
.breadcrumb span { color: var(--text-muted); padding: 0 5px; }

.text-content ol { padding-left: 20px; counter-reset: item; }
.text-content ol li { display: block; margin-bottom: 10px; }
.text-content ol li:before {
    content: counter(item) ". ";
    counter-increment: item;
    color: var(--purple-700);
    font-weight: 800;
}
.text-content p { margin-bottom: 15px; line-height: 1.7; }

/* Таблицы истории и логов */
.history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px; /* Разделение строк для эффекта карточек */
}

.history-table tr {
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.history-table tr:hover {
    transform: translateX(5px); /* Легкий сдвиг при наведении */
    box-shadow: var(--shadow-md);
}

.history-table td {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-left: none;
    border-right: none;
}

.history-table td:first-child {
    border-left: 1px solid var(--border-color);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.history-table td:last-child {
    border-right: 1px solid var(--border-color);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Улучшение для Tippy / TipTip (если используется) */
#tiptip_content {
    background: rgba(45, 27, 105, 0.95) !important; /* Глубокий фиолетовый */
    border: 0px solid var(--purple-400) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-lg) !important;
    color: #fff !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
	margin-top:-55px;
}

/* Оформление страниц ошибок */
.error-page-wrapper {
    text-align: center;
    padding: 50px 20px;
}

.error-code {
    font-size: 80px;
    font-weight: 900;
    color: var(--purple-200);
    line-height: 1;
}

.error-text {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.ajaxchat{width:100%;position:relative;}
.ajaxchat .height-chat{height: 500px;}
.ajaxchat .message{overflow-y:auto;height: 500px;padding:0 5px;position: absolute;top:0;left:0;right:0;}
.ajaxchat .message .chat-text{border-bottom:1px solid #F5F5F5;padding:4px 0;font-size:12px;word-wrap: break-word;}
.ajaxchat .message .red{color:#FF0000;}
.ajaxchat .message .chat-text .time{color:#A8A8A8;}
.ajaxchat .message .chat-text .name{color:#7A7876;cursor:pointer;}
.ajaxchat .message .chat-text .komu b{color:#F7942A;font-weight: normal;}
/* Плашка правил чата. Показывается поверх области сообщений до согласия
   (chat.js -> funcjs['chat-start']). Внутри — карточка .ctos из
   templates/tos/tos-chat.tpl: шапка, прокручиваемое тело, кнопка внизу.
   Прокрутка обязательна: текст правил выше 500px области чата и раньше обрезался. */
.ajaxchat .tos-chat{
  position: absolute; top:0; left:0; right:0; bottom:0; z-index:998;
  display:none; box-sizing:border-box; padding:8px; overflow:hidden;
  background: rgba(45,27,105,.5);
}
.ctos{
  display:flex; flex-direction:column; height:100%; box-sizing:border-box;
  background:#fff; border-radius:var(--radius-lg,14px); overflow:hidden;
  box-shadow:0 18px 44px rgba(45,27,105,.32);
}
.ctos__head{
  flex:0 0 auto; display:flex; align-items:center; gap:9px;
  background:var(--nav-bg); color:#fff; padding:12px 16px;
}
.ctos__head-ico{font-size:17px;line-height:1;}
.ctos__head-t{font-size:15px;font-weight:700;}

.ctos__body{
  flex:1 1 auto; overflow-y:auto; padding:14px 16px;
  font-size:12.5px; line-height:1.6; color:var(--text-secondary,#5b4d8a);
}
.ctos__lead{margin-bottom:10px;color:var(--text-primary,#2d1b69);font-size:13px;}
.ctos__list{margin:0 0 12px;padding-left:20px;}
.ctos__list li{margin-bottom:8px;}
.ctos__list li:last-child{margin-bottom:0;}

.ctos__warn{
  display:flex; align-items:flex-start; gap:9px;
  background:#fff7ed; border:1px solid #fed7aa; border-radius:var(--radius-md,10px);
  padding:10px 12px; margin-bottom:11px; color:#9a3412; font-size:12px; line-height:1.5;
}
.ctos__warn-ico{font-size:15px;line-height:1.2;flex-shrink:0;}

.ctos__hosts{
  background:var(--lavender-bg,#f7f4ff); border:1px solid var(--border-color,#ddd6fe);
  border-radius:var(--radius-md,10px); padding:9px 12px; margin-bottom:11px;
  font-size:11.5px; line-height:1.6; word-break:break-word;
}
.ctos__hosts-t{
  display:block; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase;
  font-weight:700; color:var(--text-muted,#9585b8); margin-bottom:3px;
}
.ctos__final{
  text-align:center; font-weight:700; font-size:13px;
  color:var(--purple-700,#7c3aed); line-height:1.45;
}

.ctos__foot{
  flex:0 0 auto; padding:11px 16px; text-align:center;
  border-top:1px solid var(--border-color,#ddd6fe); background:var(--lavender-bg,#f7f4ff);
}
.ctos__btn{
  display:inline-block; cursor:pointer; user-select:none;
  padding:10px 26px; border-radius:999px; font-size:13.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#7c3aed,#6366f1);
  box-shadow:0 4px 14px rgba(109,40,217,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ctos__btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 7px 20px rgba(109,40,217,.36);}
.ctos__btn:active{transform:translateY(0);}

/* Те же правила во всплывающем окне (блок CHAT_TOS, ссылка «Правила» в чате).
   Шапку, рамку и кнопку закрытия рисует сам поп-ап (#popup .title-popup),
   поэтому здесь только начинка. max-height нужен потому, что popup_w высоту
   не ограничивает — без него окно с правилами уезжало далеко за экран. */
.ctos-pop{
  padding:14px 16px;
  max-height:70vh;
  overflow-y:auto;
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-secondary,#5b4d8a);
}
.ctos-pop__help{
  margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--border-color,#ddd6fe);
  text-align:center;
}
.ctos-pop__help-t{
  display:block; margin-bottom:7px;
  font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; font-weight:700;
  color:var(--text-muted,#9585b8);
}
.ctos-pop__help img{
  display:block; margin:0 auto; max-width:100%;
  border:1px solid var(--border-color,#ddd6fe);
  border-radius:var(--radius-md,10px);
}

@media(max-width:600px){
  .ctos__body{padding:12px 13px;font-size:12px;}
  .ctos__head{padding:10px 13px;}
  .ctos-pop{padding:12px 13px;font-size:12px;max-height:75vh;}
}
@media(prefers-reduced-motion:reduce){
  .ctos__btn{transition:none;}
  .ctos__btn:hover{transform:none;}
}

.ajaxchat .message .chat-text .del-chat-mess{position: relative;cursor:pointer; color:#A4A4A4;}
.ajaxchat .message .chat-text .del-chat-mess .menu-chat-mess{display: none;position: absolute;top:0;left:0;padding-top:20px;width: 140px;z-index: 1;}
.ajaxchat .message .chat-text .del-chat-mess .menu-chat-mess .ahref-chat{display: block;background-color: #505050;padding:3px 5px;color:#fff;font-size: 10px;margin-top: -34px;}
.ajaxchat .message .chat-text .del-chat-mess .menu-chat-mess .ahref-chat:hover{background-color: #6c6c6c;}
.ajaxchat .message .chat-text .del-chat-mess:hover .menu-chat-mess{display: block;}

.chat-panel-mess .panel{background:#AFAFD8;padding:5px;height: 20px;}
.chat-panel-mess .panel span{display:inline-block;width: 18px;height: 18px;margin:0 4px;cursor:pointer;line-height: 18px;}
.chat-panel-mess .panel .c-b{background: url(chat/b.png) 0 0 no-repeat;}
.chat-panel-mess .panel .c-i{background: url(chat/i.png) 0 0 no-repeat;}
.chat-panel-mess .panel .c-u{background: url(chat/u.png) 0 0 no-repeat;}
.chat-panel-mess .panel .sound{background: url(chat/sound_on.png) 0 0 no-repeat;}
.chat-panel-mess .panel .so_active{background: url(chat/sound_off.png) 0 0 no-repeat;}
.chat-panel-mess .panel .smail{background: url(chat/simple1.gif) 0 0 no-repeat;position:relative;}
.chat-panel-mess .panel .smail div{display:none;width:710px;position: absolute;top:-310px;left:-110px;background-color:rgba(255,255,255, 0.8);z-index:2;border:2px solid #CCC;text-align:left;}
.chat-panel-mess .panel .smail div img{cursor:pointer;margin:2px;}
.chat-panel-mess .panel .smail:hover div{display:block;}
.chat-panel-mess .panel .scroll{background: url(chat/scroll.png) 0 0 no-repeat;}
.chat-panel-mess .panel .s_active{opacity: 0.6;}
.chat-panel-mess .panel span.len{float:right;width: 40px;text-align:right;color:#FFF;}
.chat-panel-mess .mess textarea{height: 50px;width: 97%;border:1px solid #CCC;resize: none;}
.chat-panel-mess .chat-users{font-size:12px;display:none;color:#FFF;text-shadow: 0 1px 1px rgba(0,0,0,0.56);}
.chat-panel-mess .chat-users #delit{display:inline-block;background:#585858;cursor:pointer; padding: 0px 3px 2px 2px; line-height: 18px; border-radius: 5px;}

#message_moder{display:none;}

.block-online{width: 190px;border:0px solid #CCC;}
.block-online .title{background:#4Eb056;padding:5px; margin:0px;color:#FFF;}
.block-online .title span{float:right;}
.block-online #us-online{overflow-y:auto;height: auto;min-height: 200px;max-height: 700px;}
.block-online #us-online div{border-bottom:1px solid #CCC;font-size:11px;height: 30px;padding:3px 0px 3px 0px;}
.block-online #us-online div .name{color:#019FB6;cursor:pointer;}
.block-online #us-online div .name_0{color:#CCCCCC;cursor:pointer;}
.block-online #us-online div .name_1{color:#019FB6;cursor:pointer;}
.block-online #us-online div .name_2{color:#FF637A;cursor:pointer;}
.block-online #us-online div .mod{color:#088A08;font-weight: normal;}
.block-online #us-online div .fio{color:#019FB6;font-size: 11px;}
.block-online #us-online div .fio_0{color:#CCCCCC;font-size: 11px;}
.block-online #us-online div .fio_1{color:#019FB6;font-size: 11px;}
.block-online #us-online div .fio_2{color:#FF637A;font-size: 11px;}
.block-online .avatar_chat{float:left;width:30px;height:30px;vertical-align:middle;margin-right:5px;border:1px solid #CCC;border-radius:30px;}

a.chat-mail {background: url(chat/chat-mail.png); display: block; width: 15px; height: 11px;float:right;}
a.chat-mail:hover {background-position: 0 -11px;}

.li-bb{position:relative;width:50px;}
.li-bb .v-color{display:none;position: absolute;bottom:10px;left:-60px;border:2px solid #CCC;width: 180px;background-color:rgba(255,255,255, 0.8);}
.li-bb .v-color span{display:inline-block;border:1px solid #CCC;width: 15px;height: 15px;float:left;margin:1px;}
.li-bb:hover div{display:block;}

.cvet-vid{width: 12px;height: 12px;background-color:#128720;border:1px solid #4E4E4E;}

#bg-color-aj{width: 15px;height: 15px;background-color:#128720;display:inline-block;border:1px solid #414141;}

#tabs-chat{border-bottom:1px solid #CCC;padding-top:4px;}
#tabs-chat span{border:1px solid #CCC;border-bottom:0;padding:3px;text-align:center;display:inline-block;width: 150px;margin:0 0 0 10px;font-size:12px;border-radius:5px 5px 0 0;cursor:pointer;}
#tabs-chat span.active{background-color:#FE9A2E;color:#FFF;}

#menu-moder {border:1px solid rgba(255,0,0,1); -webkit-animation: menu-moder 1s linear infinite; animation: menu-moder 1s linear infinite;}
@-webkit-keyframes menu-moder { 100% { border:1px solid rgba(255,0,0,1);background-color:#FE9A2E;} }
@keyframes menu-moder{ 100% { border:1px solid rgba(255,0,0,1);background-color:#FE9A2E;} }

#user-bann-chat{height: 100%;width: 100%;background: url(chat/ban_gerl.jpg) center center no-repeat;background-size: auto;position:relative;}
.ban-chat-block{position: absolute;top:20px;left:21%;width:220px;border:5px solid rgba(204,204,204,0.5);background-color:rgba(255,255,255,0.7);}
.ban-chat-block .title{text-align:center;font-size:17px;font-weight: bold;}
.ban-chat-block .text{text-align:center;font-size:12px;color:red;}
.ban-chat-block .clock-ban{font-size:20px;width: 200px;margin:0 auto;}
.ban-chat-block .clock-ban .block-clock{display:inline-block;width: 40px;line-height: 40px;background:#000;text-align:center;border-radius:60px;color:#FFF;font-weight: 700;box-shadow: 0 0 7px 5px rgba(255, 255, 255, 0.4);position: relative;margin:10px 0;}
.ban-chat-block .clock-ban .block-clock .line{display: none;top:52%;left:2px;width: 90%;height: 1px;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);background: #000;}

#chat-text-reklama{position:relative;margin:3px 0px 5px 0px;height: 17px; background:#895B9E;border-radius:10px;padding:5px 0px 5px 10px;}
#chat-text-reklama a.text-norm{color:#FFFFFF;text-shadow: 1px 1px 1px #206704;font-weight: bold;}
#chat-text-reklama a.text-norm:hover{color:#FFE419;text-shadow: 1px 1px 1px #206704;font-weight: bold;}
#chat-text-reklama a.text-active{color:#FFE419;text-shadow: 1px 1px 1px #206704;font-weight: bold;}
#chat-text-reklama a.text-active:hover{color:#FFFFFF;text-shadow: 1px 1px 1px #206704;font-weight: bold;}
#chat-text-reklama .chat-panel-reklama{position: absolute;top:3px;right:2px;width: 40px;}
#chat-text-reklama .ico_rek{background: url(chat/ico_rek3.png) 0px 0px no-repeat;display:inline-block;width: 16px;height: 16px; cursor:pointer;margin:3px 0;opacity:0.9;}
#chat-text-reklama .ico_rek:hover{opacity:1;}
#chat-text-reklama .ico_edit_c{background: url(chat/ico_rek2.png) -0px 0px no-repeat;display:inline-block;width: 18px;height: 16px; cursor:pointer;margin:3px 0;opacity:0.9;}
#chat-text-reklama .ico_info_c{background-position: -22px 0px;}

.dop_panel .dop_title{background:#9696BA;padding:5px 10px;height: 17px;color:#FFF;text-align:left;}
.dop_panel span{float:left;width: 50%;padding:5px 0 5px 0px;text-align:left;border-bottom:1px dashed #CCC;cursor:pointer;background: url(chat/left-menu.png) no-repeat 5px 8px;color:#135b11;}
.dop_panel span:hover{background-color: #F3F3F3;}
.dop_panel span:before {content: ' ';margin:0 10px;color:#CCC;}

.exit-chat{float:right;}

/* banners-all */

.banners-all {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding: 20px 0px;
}
.banner-item {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding-bottom: 4px;
}
.banner-item_200-300, .banner-item_200-200 {
    width: 192px;
}
.banner-item_100-100 {
    width: 100px;
}
.banner-item_468-60 {
    width: 292px;
}
.banner-item__info {
    text-align: center;
    font-size: 11px;
}
.tooltipgo {
    color: #000000;
    outline: none;
    font-size: 13px;
    line-height: 18px;
    cursor: help;
    text-decoration: none;
    position: relative;
}


.tooltipgo span {margin-left: -999em;position: absolute;}
.tooltipgo:hover span {text-decoration: none; border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);font-family: Calibri, Tahoma, Geneva, sans-serif;position: absolute; right: 1em; top: 2em;; z-index: 99;margin-left: 0; width: 250px;}
.classicgo {padding: 0.8em 1em; }
.classicgo {background: #d8b4fe; border: 1px dotted #569170;}
.tooltipgo_dop {font-size:14px;line-height: 18px;text-align:left;}
.tooltipgo_dop:hover span {width: 450px;}
.reyt-goodref{width:15px;height:15px;vertical-align:top;margin:2px}

.avatar-purple-glow {
    border: 3px solid transparent !important;
    display: block;
    border-radius: 10px !important;
    
    /* Добавили: Фиолетовый, Синий, Голубой, Зеленый (лайм), Золотой, Розовый */
    background: 
        linear-gradient(#fff, #fff) padding-box, 
        linear-gradient(45deg, 
            #a855f7, #6366f1, #06b6d4, #22c55e, 
            #eab308, #ec4899, #a855f7) border-box;
    
    background-size: 400% 400%; /* Увеличили размер для плавности 7 цветов */
    animation: purple-border-move 6s linear infinite; /* Немного замедлили, чтобы цвета читались */
}

@keyframes purple-border-move {
    0% { background-position: 0% 50%, 0% 50%; }
    50% { background-position: 100% 50%, 100% 50%; }
    100% { background-position: 0% 50%, 0% 50%; }
}

@keyframes border-glow {
  0%   { border-color: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); }
  20%  { border-color: #6366f1; box-shadow: 0 0 12px rgba(99, 102, 241, 0.6); }
  40%  { border-color: #06b6d4; box-shadow: 0 0 12px rgba(6, 182, 212, 0.6); }
  60%  { border-color: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, 0.6); }
  80%  { border-color: #ec4899; box-shadow: 0 0 12px rgba(236, 72, 153, 0.6); }
  100% { border-color: #a855f7; box-shadow: 0 0 8px rgba(168, 85, 247, 0.5); }
}

.avatar-shimmer {
    animation: border-glow 5s ease-in-out infinite;
    background-color: #fff;
    border-radius: 10px; /* Убедитесь, что радиус совпадает */
}

.avatar-akk.purple-border-fix {
    /* 1. Делаем саму рамку прозрачной, чтобы сквозь неё был виден градиент */
    border: 3px solid transparent !important;
    
    /* 2. Создаем два слоя фона:
       Первый (linear-gradient(#fff, #fff)) — белый фон под картинкой.
       Второй (градиент) — сама переливающаяся рамка. */
    background-image: 
        linear-gradient(#fff, #fff), 
        linear-gradient(45deg, #a855f7, #6366f1, #ec4899, #06b6d4, #a855f7);
    
    /* 3. Магия распределения: 
       padding-box - первый слой только внутри рамки.
       border-box - второй слой заходит под саму рамку. */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    
    /* 4. Анимация */
    background-size: 200% 200%;
    animation: move-purple-gradient 2s linear infinite !important;
    
    /* Убираем конфликты */
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); /* Мягкое статичное свечение */
}

@keyframes move-purple-gradient {
    0% { background-position: 0% 50%, 0% 50%; }
    50% { background-position: 100% 50%, 100% 50%; }
    100% { background-position: 0% 50%, 0% 50%; }
}

.menu-dop-site {
    text-align: center;
}

.menu-dop-site a {
display: inline-block;
    color: #fff;
    text-align: center;
    padding: 8px 10px;
    margin: 4px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    border: none;
    transition: var(--transition);
    background: var(--purple-600);
    box-shadow: var(--shadow-sm);
    letter-spacing: 0.01em;
}

.supptext0 {
    background: #F5F5F5;
    border: 1px solid #D3D3D3;
    color: #114C5B;
}

.supptext1 {
    background: #F0FFFF;
    border: 1px solid #A9A9A9;
    color: #114C5B;
}

.supptext0, .supptext1 {
    text-align: left;
    font-size: 12px;
    display: block;
    margin: -40px 0 10px 36px;
    padding: 1px;
}

.avatar-smoll {
    margin-top: 5px;
    background: url(img/avbg.png) no-repeat right bottom;
    padding: 2px 9px 9px 2px;
    border: none;
    width: 40px;
    height: 40px;
}

.suppcontent
 {
    padding: 10px 15px 10px 22px;
    display: block;
}

.supptitle0, .supptitle1 {
    text-align: right;
    font-size: 11px;
    display: block;
    margin-top: 10px;
    padding: 3px 4px;
}

.job-note input.fbtn-red, .job-note input.fbtn-black, .job-note input.fbtn-org, .job-note input.fbtn-blue160 {
    font-size: 14px;
    text-align: center;
    line-height: 1.5em;
    border-radius:10px;
    width: 180px;
	margin:10px;
    color: #fff;
    outline: none;
    border: none;
    display: block;
    float: right;
    cursor: pointer;
background:#BC002C;	
}

.job-note input.fbtn-green {background:#60C600;}
a.workstatus-yes, a.workstatus-no, a.workstatus-wait, a.workstatus-otziv, a.workstatus-izbr {
    color: #ffffff;
    text-shadow: 1px 1px 1px #555555;
    float: left;
    font-size: 11px;
    text-align: center;
    display: block;
    outline: none;
    padding: 3px 6px 3px 6px;
	margin: 3px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 4px;	
}
a.task-ballans {
    color: #ffffff;
	background: #22A82c;
    text-shadow: 1px 1px 1px #555555;
    float: left;
    font-size: 11px;
    text-align: center;
    display: block;
    outline: none;
    padding: 3px 7px 3px 7px;
	margin: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
}
a.task-ballans:hover { background: #fe8710; }

a.workstatus-yes { background: #22A82c; }
a.workstatus-no { background: #c80000; }
a.workstatus-wait { background: #BFBFBF; }
a.workstatus-otziv { background: #2c7fb8; }
a.workstatus-izbr { background: #B200FF; }

.signature {
    font-size:11px;
    display:block;
    color: #A06150;
    text-shadow:0px 1px 0px #fff;
    padding:5px 10px;
    margin:10px 30px 0 0;
    background: #F5F5F5;
}

.search-history {
    background-color: #e2e2e2;
    text-align: center;
    padding: 5px 0;
}

.new-task-stata {
    padding: 10px 10px;
    text-align: left;
    border-bottom: 1px solid #CCC;
    font-size: 11px;
    color: #114c5b;
}

.new-task-stata .line-b {
    display: inline-block;
    width: 130px;
}

.new-task-stata .line-b1 {
    display: inline-block;
    width: 40px;
    text-align: right;
}

.new-task-stata .text-otchet {
    margin-top: 10px;
    width: 580px;
    word-wrap: break-word;
}

.search-history .inp-ser-arch {
    width: 150px;
    padding: 2px 5px;
}

.mesto span{
	display:inline-block;
	text-align:center;
	width:25px;
	height:25px;
	border:2px solid #FFF;
	border-radius:5px;
	background: #cbb7a1;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
	line-height:25px;
	color:#FFF;
	box-shadow: 0 1px 8px rgba(0,0,0,0.7);
	margin:5px 10px 5px 0;
}
.mesto .priz1{ background: #02b258; }
.mesto .priz2{ background: #9bce55; }
.mesto .priz3{ background: #96cc4e; }

a.konkurs-start{
	background: url(img/ico/cont-start.png) no-repeat top center;
	text-align: center;
    display: block;
    border: none;
    font-size: 11px;
    padding-top: 30px;
    cursor:pointer;
    color:#C80000;
}
a.konkurs-start:hover {color:#FF7979;}
a.konkurs-start-1{background: url(img/ico/finish.png) no-repeat top center;cursor:default;}
.period{
  color: #0079B8;
  padding: 1px 4px;
  border: 1px solid #BEE8EB;
  background: #D5EFF1;
  cursor: pointer;
  display:inline-block;
  margin:0 5px;
}
.mnogo{background: #F7E4DA;color: #E66900;border: 1px solid #F7DACB;}
.top-mesto{background: url(img/ico/trophys.png) no-repeat top left;display: inline-block;padding-left:30px;width: 70px;}
.top-mesto-no{display: inline-block;padding-left:30px;width: 70px;}
.top-priz{color:#909090;}

.mnogo {
    background: #F7E4DA;
    color: #E66900;
    border: 1px solid #F7DACB;
}
.period {
    color: #0079B8;
    padding: 1px 4px;
    border: 1px solid #BEE8EB;
    background: #D5EFF1;
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
}

.cash-moneyadd
 {
    font-size: 13px;
    margin: 20px auto;
    width: 550px;
    text-align: left;
    line-height: 18px;
}
.cash-moneyadd div
Specificity: (0,1,1)
 {
    border-bottom: 1px solid #CCC;
    padding: 5px 10px;
}
.cash-moneyadd div span {
    display: inline-block;
    width: 150px;
    margin-left: 10px;
    font-size: 13px;
}

.cash-pred {
    font-size: 15px;
    margin: 20px auto;
    width: 300px;
    text-align: left;
    line-height: 18px;
}

.cash-pred div {
    border-bottom: 1px solid #CCC;
    padding: 5px 10px;
}

.cash-pred div span {
    display: inline-block;
    width: 100px;
    margin-left: 30px;
    font-size: 13px;
}
#aj-content input[type=range] {
    -webkit-appearance: none;
    outline: 1px solid #333333;
}

#aj-content input[type=range]::-webkit-slider-thumb {
  height:20px;
  width:39px;
  background: #7c3aed;
  -webkit-appearance: none;
  cursor:pointer
}

#load-new-mess .mew-mail-mess, #load-new-mess-s .mew-mail-mess {
    border-radius: 3px;
    width: 280px;
    height: 85px;
    padding: 5px;
    background: #2D2D2D;
    color: #FFFFFF;
    margin-bottom: 5px;
    font-size: 12px;
    opacity: 0.8;
}

#load-new-mess{position:fixed;z-index:998;left:7px;bottom:2px;overflow: hidden;max-height:300px;}
#load-new-mess-s{position:fixed;z-index:998;right:7px;bottom:2px;overflow: hidden;max-height:300px;}
#load-new-mess .mew-mail-mess, #load-new-mess-s .mew-mail-mess{border-radius:3px;width:280px;height:110px;padding:5px;background:#2D2D2D;color:#FFFFFF;margin-bottom:5px;font-size:12px;opacity:0.8}
#load-new-mess .mew-mail-mess a, #load-new-mess-s .mew-mail-mess a{color:#FFFFFF;text-decoration:none;}
#load-new-mess .mail-users, #load-new-mess-s .mail-users{padding:0 0 5px 10px;font-size:12px;}
#load-new-mess .mail-users .closed, #load-new-mess-s .mail-users .closed{float:right;color:#FF0000;cursor:pointer;}
#load-new-mess .mail-ava, #load-new-mess-s .mail-ava{float:left;margin-right:10px;}
#load-new-mess .mail-ava img, #load-new-mess-s .mail-ava img{width:60px;height:60px;}
#load-new-mess .mail-text, #load-new-mess-s .mail-text{margin-top:10px;}
#load-new-mess .mail-text b, #load-new-mess-s .mail-text b{color:#00FF00;}

/* Контейнер логотипа */
.header-logo__img {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Прячем блик, когда он выходит за границы */
    vertical-align: middle;
}

/* Сам эффект блика */
.header-logo__img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Начальная позиция далеко слева */
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Наклон луча */
    pointer-events: none; /* Чтобы луч не мешал кликать по ссылке */
}

/* Класс, который запускает анимацию */
.logo-animate::after {
    animation: shine-move 2.5s ease-in-out;
}

@keyframes shine-move {
    0% { left: -150%; }
    100% { left: 150%; }
}

.moder-test {
    display: inline-block;
    background: url(img/ico/kabinet/gomoder.png) center center no-repeat;
    height: 75px;
    width: 37px;
    cursor: pointer;
}
.moder-test, .moder-test-u, .moder-test-o {
    display: inline-block;
    background: url(img/ico/kabinet/gomoder.png) center center no-repeat;
    height: 75px;
    width: 37px;
    cursor: pointer;
}

.wall-chs-green .wall-chs-button {
    background: #e91e63;
    border-radius: 14px;
}
.wall-chs-button {
    width: 30px;
    text-align: center;
    border: 0px;
    display: inline-block;
    padding: 2px;
    margin: -2px 5px -2px 0px;
    color: #fff;
}

.wall-chs-gray .wall-chs-button
 {
    background: #999999;
    border-radius: 14px;
}

.wall-chs-green .wall-chs-t
 {
    color: #007F0E;
}

.wall-chs-t {
    cursor: pointer;
}

.wall-chs-gray .wall-chs-t {
    color: #999999;
}

.wall-chs-t {
    cursor: pointer;
}

.wall-chs-red .wall-chs-button
 {
    background: #C80000;
    border-radius: 14px;
}

.cattitle-open, .cattitle-close{
display: block;
width:250px;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    border: none;
    transition: var(--transition);
    background: var(--purple-600);
    box-shadow: var(--shadow-sm);
    letter-spacing: 0.01em;
}
.cattitle-close{
  background: url(img/ud.png) no-repeat right #38abef;	
}
/* ============================================================
   СТРАНИЦА СЕРФИНГА (work-serf)
   Разметка: templates/work-serf.tpl и блок SERF_FOR
   в templates/foreach/foreach-earnings.tpl
   ============================================================ */
.sf-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

/* Сводка сверху */
.sf-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.sf-stat {
  background: var(--lavender-card, #fff);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 11px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.sf-stat--accent { border-color: var(--purple-400); background: var(--lavender-bg, #f7f4ff); }
.sf-stat__lbl {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); line-height: 1.25;
}
.sf-stat__val { display: block; font-size: 19px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.sf-stat--accent .sf-stat__val { color: var(--purple-700); }
.sf-stat__unit { font-size: 11px; font-weight: 600; color: var(--text-muted); }

.sf-hint {
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius-md);
  padding: 9px 13px; margin-bottom: 10px;
  font-size: 12.5px; line-height: 1.5; color: #9a3412;
}

/* Легенда иконок */
.sf-legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 8px 12px; margin-bottom: 14px;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 11.5px; color: var(--text-secondary);
}
.sf-legend__i { display: inline-flex; align-items: center; gap: 5px; }
.sf-legend .taskimg-vip { width: 22px; height: 22px; background-size: 20px; background-position: 0 0; }
.sf-legend .sf-act { cursor: default; }

/* Карточка ссылки */
.sf-item {
  display: flex; align-items: stretch; gap: 11px;
  background: #fff; border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 11px 13px; margin-bottom: 9px;
  transition: var(--transition-fast);
}
.sf-item:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.sf-cat { flex: 0 0 40px; }
.sf-main { flex: 1 1 auto; min-width: 0; }
.sf-side { flex: 0 0 128px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.sf-link {
  font-size: 14px; font-weight: 700; color: var(--purple-700);
  cursor: pointer; word-break: break-word;
}
.sf-link:hover { text-decoration: underline; }
/* Выделенная (платно подсвеченная) ссылка. Раньше цвет терялся: у <a> было
   два атрибута style, второй браузер игнорировал. */
.sf-link--hot { color: #C80000; }
.sf-desc { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }

/* Раскрываемые подробности */
.sf-info {
  display: none; margin-top: 9px; padding: 9px 11px;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 11.5px;
}
.sf-info__row { display: flex; gap: 8px; padding: 2px 0; }
.sf-info__k { flex: 0 0 128px; color: var(--text-muted); }
.sf-info__v { flex: 1 1 auto; min-width: 0; color: var(--text-primary); word-break: break-all; }

/* Правая колонка карточки */
.sf-price { font-size: 17px; font-weight: 800; color: #15803d; line-height: 1; white-space: nowrap; }
.sf-price span { font-size: 11px; font-weight: 600; margin-left: 2px; }
.sf-meta { display: flex; gap: 7px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.sf-timer { font-variant-numeric: tabular-nums; }
.sf-left { font-variant-numeric: tabular-nums; }

.sf-acts { display: flex; gap: 5px; margin-top: 1px; }
.sf-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 7px; cursor: pointer;
  color: var(--purple-700); background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color);
  transition: var(--transition-fast);
}
.sf-act svg { width: 14px; height: 14px; display: block; }
.sf-act:hover { background: var(--purple-600); color: #fff; border-color: transparent; }
.sf-act--warn { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
.sf-act--warn:hover { background: #b45309; color: #fff; }
.sf-act--abuse:hover { background: #dc2626; color: #fff; }

/* Пусто */
.sf-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--lavender-card, #fff); border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg); padding: 26px 18px; text-align: center;
  font-size: 13px; color: var(--text-muted);
}
.sf-empty b { color: var(--text-primary); font-size: 14px; }
.sf-empty__ico { font-size: 24px; line-height: 1; margin-bottom: 2px; }

/* Статические ссылки */
.sf-static { margin-top: 18px; }
.sf-static__h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.sf-static__add { font-size: 11.5px; font-weight: 600; color: var(--purple-700); }

@media (max-width: 600px) {
  .sf-top { grid-template-columns: 1fr; }
  .sf-item { flex-wrap: wrap; }
  .sf-side { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .sf-info__k { flex: 0 0 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-item, .sf-act { transition: none; }
}

/* ============================================================
   ЗАДАНИЯ ВКОНТАКТЕ (work-vk) — карточки берутся из .sf-* выше
   ============================================================ */
.vk-link {
  text-align: center; background: var(--lavender-card, #fff);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 22px 18px; box-shadow: var(--shadow-sm);
}
.vk-link__ico { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.vk-link__t { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.vk-link__s { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 13px; }
.vk-link__btn {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff !important;
  font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow-md);
}
.vk-link__btn:hover { filter: brightness(1.07); }

.vk-sec { margin-bottom: 16px; }
.vk-sec__h {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 9px;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.vk-sec__ico { flex: 0 0 auto; background-size: 22px 22px !important; width: 22px !important; height: 22px !important; cursor: default !important; }
.vk-sec__t { flex: 1 1 auto; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.vk-sec__n {
  flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
  background: var(--purple-400); color: #fff; font-size: 11.5px; font-weight: 700;
}
.vk-sec__help {
  flex: 0 0 auto; cursor: pointer; font-size: 11.5px; font-weight: 600;
  color: var(--purple-700); border-bottom: 1px dotted var(--purple-400);
}
.vk-sec__help:hover { color: var(--purple-600); }

/* VIP-метка в карточке (раньше <span class="vip"> не имел стилей вообще) */
.sf-vip {
  padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 800;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; letter-spacing: .4px;
}
.sf-stat__val--sm { font-size: 15px; }

/* ============================================================
   СТРАНИЦА ЗАДАНИЙ (work-task)
   ============================================================ */
.tk-filters {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.tk-fold {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  cursor: pointer; padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--nav-bg); color: #fff; font-size: 13px; font-weight: 600;
  margin-bottom: 9px;
}
.tk-fold b { font-weight: 700; color: #fde68a; font-size: 12.5px; }
.tk-fold:hover { filter: brightness(1.06); }
.tk-fold__body {
  background: var(--lavender-bg, #f7f4ff); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 9px 11px; margin-bottom: 9px;
}

.tk-frow { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
.tk-frow__lbl {
  flex: 0 0 82px; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; padding-top: 3px;
}
.tk-frow .menu-task-work { flex: 1 1 auto; margin: 0; }

/* Поиск */
.tk-search { padding: 11px 12px; }
.tk-srow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.tk-srow:last-child { margin-bottom: 0; }
.tk-srow__lbl { flex: 0 0 170px; font-size: 12px; color: var(--text-secondary); }
.tk-srow__pair { display: flex; gap: 6px; }
.tk-input {
  flex: 1 1 130px; min-width: 90px; box-sizing: border-box;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 7px 11px !important; font-size: 13px !important; background: #fff !important;
  color: var(--text-primary) !important; outline: none;
}
.tk-input:focus { border-color: var(--border-focus, #a855f7) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.13) !important; }
.tk-input--sm { flex: 0 0 74px; }
.tk-sbtn {
  flex: 0 0 auto; width: 32px; height: 32px; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: #fff; color: var(--purple-700); font-size: 15px; line-height: 1;
  transition: var(--transition-fast);
}
.tk-sbtn:hover { background: var(--purple-600); color: #fff; border-color: transparent; }

.tk-fbtns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 11px; }
.tk-fbtn { flex: 1 1 170px; text-align: center; cursor: pointer; }

.tk-found { padding: 9px 2px; font-size: 13px; color: var(--text-secondary); }
.tk-found b { color: var(--purple-700); font-size: 15px; }
.tk-found__sum { color: #15803d; font-weight: 600; }

/* Строка задания */
.tk-row { background: #fff; }
.tk-row--white > td { background: #ecfdf5 !important; }
.tk-avacell { width: 72px; vertical-align: top; }
.tk-ava {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--purple-400); padding: 2px; display: block;
}
.tk-body { vertical-align: top; }
.tk-titlewrap { display: inline-block; }
.tk-title { font-size: 14px; font-weight: 700; }
.tk-title:hover { text-decoration: underline; }
.tk-url { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; word-break: break-all; }
.tk-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11.5px; color: var(--text-muted);
}
.tk-num { font-variant-numeric: tabular-nums; }
.tk-categ { color: var(--text-secondary); }
.tk-author { color: var(--purple-700) !important; border-bottom: 1px dotted var(--purple-400); }
.tk-tag {
  padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
  letter-spacing: .3px;
}
.tk-tag--auto  { background: #dbeafe; color: #1d4ed8; }
/* Метка многоразового задания: класс .polytask в CSS отсутствовал вообще,
   поэтому маркер был невидимым пустым span */
.tk-tag--multi { background: #ede8ff; color: var(--purple-700); }

.tk-note { margin-top: 6px; }
.tk-badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--radius-sm, 6px);
  font-size: 11.5px; line-height: 1.35;
}
.tk-badge--ok   { background: #dcfce7; color: #15803d; }
.tk-badge--bad  { background: #fee2e2; color: #b91c1c; }
.tk-badge--work { background: #f3e8ff; color: #7e22ce; }
.tk-badge--wait { background: #dbeafe; color: #1d4ed8; }

.tk-vipcell { width: 44px; vertical-align: top; text-align: center; }
.tk-side { width: 118px; vertical-align: top; text-align: right; white-space: nowrap; }
/* Цена задания приходит уже готовой строкой «N руб. NN коп» ({DONATE}),
   поэтому знак рубля тут не добавляется — в отличие от серфинга и ВК,
   где в подстановку идёт голое число. */
.tk-price { font-size: 15px; font-weight: 400; color: #15803d; line-height: 1.2; }
/* Спрайт .rating0..5 имеет float:right, поэтому иконки действий встают
   слева от звёзд на той же строке. margin-left разводит их. */
.tk-rate { margin: 6px 0 6px 12px; }
.tk-acts { display: flex; gap: 5px; justify-content: flex-end; margin-top: 4px; }
/* Кнопки — тот же вид, что на серфинге */
.tk-act {
  display: inline-flex; align-items: center; justify-content: center;
  /* flex:0 0 25px обязателен: контейнер .tk-acts сужается плавающим спрайтом
     рейтинга, и без запрета сжатия кнопки расплющивались с 25px до 16px */
  flex: 0 0 25px;
  width: 25px; height: 25px; border-radius: 7px; cursor: pointer;
  color: var(--purple-700); background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); transition: var(--transition-fast);
}
.tk-act svg { width: 14px; height: 14px; display: block; }
.tk-act:hover { background: var(--purple-600); color: #fff; border-color: transparent; }
.tk-act--fav { color: #f59e0b; background: #fffbeb; border-color: #fde68a; }
.tk-act--fav:hover { background: #f59e0b; color: #fff; }
.tk-act--white { color: #15803d; background: #dcfce7; border-color: #86efac; cursor: default; }
.tk-act--abuse:hover { background: #dc2626; color: #fff; }

@media (max-width: 600px) {
  .tk-frow__lbl { flex: 1 1 100%; }
  .tk-srow__lbl { flex: 1 1 100%; }
  .tk-avacell { width: 54px; }
  .tk-ava { width: 44px; height: 44px; }
  .tk-side { width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-act, .tk-sbtn { transition: none; }
}

/* ============================================================
   РАЗДЕЛ «АДМИНИСТРИРОВАНИЕ» (кабинет рекламодателя)
   Страницы templates/advm-*.tpl, меню templates/menu/menu-kabinet.tpl,
   строки templates/foreach/foreach-kabinet.tpl
   ============================================================ */
.kb-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

/* Меню раздела */
.kb-nav {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 9px 10px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.kb-nav__i {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: var(--text-secondary) !important;
  border: 1px solid transparent; transition: var(--transition-fast);
}
.kb-nav__i:hover { background: var(--purple-50, #faf5ff); color: var(--purple-700) !important; border-color: var(--border-color); }
.kb-nav__i--act {
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff !important;
  border-color: transparent; box-shadow: var(--shadow-sm);
}
.kb-nav__ico { font-size: 13px; line-height: 1; }

/* Шапка страницы */
.kb-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; margin-bottom: 12px;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.kb-head__t { flex: 1 1 auto; font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.kb-head__n {
  flex: 0 0 auto; padding: 2px 10px; border-radius: 999px;
  background: var(--purple-400); color: #fff; font-size: 11.5px; font-weight: 700;
}
.kb-head__add {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff !important;
  font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.kb-head__add:hover { filter: brightness(1.07); }

/* Счётчики выполнений */
.kb-stats { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.kb-stat {
  flex: 1 1 140px; text-align: center; padding: 9px 11px;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.kb-stat__lbl {
  display: block; margin-bottom: 3px; font-size: 10.5px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted); font-weight: 700;
}
.kb-stat__val { display: block; font-size: 19px; font-weight: 800; line-height: 1; }
.kb-stat--ok   { border-color: #86efac; } .kb-stat--ok   .kb-stat__val { color: #15803d; }
.kb-stat--wait { border-color: #fde68a; } .kb-stat--wait .kb-stat__val { color: #b45309; }
.kb-stat--bad  { border-color: #fecaca; } .kb-stat--bad  .kb-stat__val { color: #b91c1c; }

/* Кнопки-инструменты (БС / ЧС исполнителей) */
.kb-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.kb-tool {
  cursor: pointer; padding: 8px 15px; border-radius: var(--radius-md);
  font-size: 12.5px; font-weight: 600;
  background: #fff; border: 1.5px solid var(--border-color);
  color: var(--purple-700) !important; transition: var(--transition-fast);
}
.kb-tool:hover { border-color: var(--border-hover); background: var(--purple-50, #faf5ff); }
.kb-tool--dark { color: var(--text-secondary) !important; }
.kb-tool--dark:hover { border-color: #cbd5e1; background: #f8fafc; }

/* Ссылка «на все ваши задания» */
.kb-share {
  padding: 9px 13px; margin-bottom: 12px;
  background: var(--lavender-card, #fff); border: 1px dashed var(--border-color);
  border-radius: var(--radius-md); font-size: 12px;
}
.kb-share__lbl { display: block; margin-bottom: 3px; color: var(--text-muted); }
.kb-share__url { color: var(--purple-700); word-break: break-all; }

/* Заголовок подраздела внутри страницы (VK/RuTube/YouTube) */
.kb-sec {
  margin: 16px 0 9px; padding: 7px 12px;
  background: var(--lavender-bg, #f7f4ff); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); font-size: 13px; font-weight: 700;
  color: var(--text-primary);
}

/* Пусто и призыв к действию */
.kb-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 18px; text-align: center; font-size: 13px; color: var(--text-muted);
  background: var(--lavender-card, #fff); border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}
.kb-empty b { color: var(--text-primary); font-size: 14px; }
.kb-empty__ico { font-size: 24px; line-height: 1; margin-bottom: 2px; }
.kb-cta { text-align: center; margin: 18px 0 6px; }
.kb-cta__btn { display: inline-block; color: #fff !important; }

/* ---- Классы из foreach-kabinet.tpl, для которых в теме не было правил ---- */
/* Раскрываемая ячейка с подробностями (36 вхождений в шаблонах) */
.ext-viptask, .ext-comp {
  background: var(--lavender-bg, #f7f4ff) !important;
  padding: 10px 13px !important; font-size: 12px; line-height: 1.55;
  color: var(--text-secondary); border-top: 1px solid var(--border-color) !important;
}
/* Кликабельные пункты: активировать VIP, удалить из списка, отчёты */
.adv-company__vip, .workcomp, .stata-user {
  display: inline-block; cursor: pointer; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; border: 1px solid var(--border-color);
  background: #fff; color: var(--purple-700);
  transition: var(--transition-fast);
}
.adv-company__vip:hover, .workcomp:hover, .stata-user:hover {
  background: var(--purple-600); color: #fff; border-color: transparent;
}
.adv-company__vip_active {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.workcomp { color: #b91c1c; }
.workcomp:hover { background: #dc2626; border-color: transparent; }
/* Пометки статусов */
.otcaz-moder, .kb-need {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm, 6px);
  background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 600; line-height: 1.3;
}
.teni { font-weight: 600; }
.letter-subtitle { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Блоки статистики по IP и отчётов */
.nach-ip, .closed-ip, .user-otchet {
  padding: 8px 11px; margin: 6px 0; border-radius: var(--radius-md);
  background: #fff; border: 1px solid var(--border-color); font-size: 12px; line-height: 1.5;
}
.closed-ip { border-color: #fecaca; background: #fef2f2; }
.otchet-new > td { background: var(--lavender-bg, #f7f4ff) !important; }
/* Поле ввода суммы в формах пополнения бюджета */
input.summ, input.sum {
  box-sizing: border-box; width: 110px;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 7px 10px !important; font-size: 13px !important; text-align: center;
  background: #fff !important; color: var(--text-primary) !important; outline: none;
}
input.summ:focus, input.sum:focus {
  border-color: var(--border-focus, #a855f7) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,.13) !important;
}

@media (max-width: 600px) {
  .kb-nav { padding: 7px; gap: 4px; }
  .kb-nav__i { padding: 6px 9px; font-size: 11.5px; }
  .kb-nav__t { display: none; }
  .kb-nav__i--act .kb-nav__t { display: inline; }
  .kb-stat { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-nav__i, .kb-tool, .adv-company__vip, .workcomp, .stata-user { transition: none; }
}

/* ============================================================
   СТРАНИЦА ЗАКАЗА РЕКЛАМЫ (advertise)
   Разметка: templates/advertise.tpl, формы — templates/zacaz/*.tpl
   ============================================================ */
.adv-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

.adv-intro {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.adv-intro a { color: var(--purple-700); font-weight: 600; }

/* Напоминание про авторизацию */
.adv-auth {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius-lg);
  padding: 13px 16px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5; color: #9a3412;
}
.adv-auth__ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.adv-auth > div { flex: 1 1 240px; }
.adv-auth b { display: block; }
.adv-auth__btn {
  flex: 0 0 auto; padding: 8px 20px; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff !important;
  font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.adv-auth__btn:hover { filter: brightness(1.07); }
.adv-auth--err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Сетка видов рекламы */
.adv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px; margin-bottom: 8px;
}
.adv-card {
  display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px 14px;
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.adv-card:hover {
  border-color: var(--border-hover); box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.adv-card__ico { font-size: 20px; line-height: 1; margin-bottom: 3px; }
.adv-card__name { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.adv-card__desc { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.adv-card__price {
  margin-top: 5px; padding-top: 6px; border-top: 1px dashed var(--border-color);
  font-size: 12px; font-weight: 700; color: #15803d;
}

/* Кнопка оформления заказа в формах.
   Раньше на ней было два атрибута style (200px и 150px) — браузер брал первый,
   поэтому заданная ширина 150px не работала. */
.zk-order { width: 200px; display: inline-block; text-align: center; }

/* Заголовок-плашка внутри форм заказа: раньше центрирование делал <center>,
   который в ряде блоков не закрывался */
.blok > .zk-note, .zk-note { text-align: center; }

@media (max-width: 600px) {
  .adv-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .adv-card { padding: 11px; }
  .adv-card__name { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .adv-card { transition: none; }
  .adv-card:hover { transform: none; }
}

/* ============================================================
   СЧАСТЛИВЫЙ БИЛЕТ (ticket)
   Разметка: templates/ticket.tpl; состояние раунда рисует
   блок get-lotto в ajax/ajax-lotto.php
   ============================================================ */
.tk-skin2 { max-width: 900px; margin: 0 auto; padding: 0 7px; }

/* Закрытый доступ / гость */
.lt-closed {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 24px 18px;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  font-size: 13px; line-height: 1.55; color: var(--text-secondary);
}
.lt-closed b { color: var(--text-primary); font-size: 15px; }
.lt-closed__ico { font-size: 26px; line-height: 1; }
.lt-closed__btn {
  margin-top: 6px; padding: 9px 20px; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff !important;
  font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.lt-closed__btn:hover { filter: brightness(1.07); }
.lt-closed--warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.lt-closed--warn b { color: #9a3412; }

/* Верх: покупка + правила */
.lt-top { display: flex; gap: 12px; align-items: stretch; margin-bottom: 14px; flex-wrap: wrap; }

.lt-buy {
  flex: 1 1 250px; text-align: center;
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff;
  border-radius: var(--radius-lg); padding: 18px 16px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.lt-buy__lbl {
  font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.lt-buy__price { font-size: 26px; font-weight: 800; line-height: 1.1; }
.lt-buy__price span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); }
.lt-buy__btn {
  margin-top: 10px; cursor: pointer; border: 0;
  padding: 12px 26px; border-radius: 999px;
  background: #fff; color: var(--purple-700);
  font-size: 15px; font-weight: 800; font-family: inherit;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: var(--transition-fast);
}
.lt-buy__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.24); }
.lt-buy__btn:active { transform: translateY(0); }
.lt-buy__mine { margin-top: 9px; font-size: 12px; color: rgba(255,255,255,.9); }
.lt-buy__mine b { color: #fde68a; }

.lt-rules {
  flex: 1 1 320px;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 15px 17px; box-shadow: var(--shadow-sm);
}
.lt-rules__t { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.lt-rules__list {
  margin: 0 0 10px; padding-left: 19px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
}
.lt-rules__list li { margin-bottom: 5px; }
.lt-rules__list li:last-child { margin-bottom: 0; }
.lt-rules__note {
  padding: 8px 11px; border-radius: var(--radius-md);
  background: #dcfce7; color: #15803d; font-size: 11.5px; line-height: 1.5; font-weight: 600;
}

/* Состояние раунда */
.lt-state { margin-bottom: 6px; }
.lt-load { text-align: center; padding: 20px; font-size: 13px; color: var(--text-muted); }
.lt-round {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.lt-round__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 9px;
}
.lt-round__t { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.lt-round__cnt {
  font-size: 17px; font-weight: 800; color: var(--purple-700);
  font-variant-numeric: tabular-nums;
}
.lt-bar { height: 10px; border-radius: 999px; background: var(--lavender-mid, #ede8ff); overflow: hidden; }
.lt-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #a855f7, #7c3aed);
  transition: width .5s ease;
}
.lt-round__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 9px; font-size: 12px; color: var(--text-secondary);
}
.lt-round__foot b { color: var(--purple-700); }
.lt-mine {
  padding: 3px 10px; border-radius: 999px;
  background: #dcfce7; color: #15803d; font-weight: 700; font-size: 11.5px;
}
.lt-mine b { color: #15803d; }
.lt-mine--no { background: var(--lavender-bg, #f7f4ff); color: var(--text-muted); font-weight: 600; }

/* История победителей */
.lt-hist {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.lt-hist__t { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 9px; }
.lt-hist__empty { font-size: 12.5px; color: var(--text-muted); }
.lt-hist__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.lt-win {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; border-radius: var(--radius-md);
  background: var(--lavender-bg, #f7f4ff); border: 1px solid var(--border-color);
  font-size: 12.5px;
}
.lt-win__ico { font-size: 14px; line-height: 1; flex: 0 0 auto; }
.lt-win__name {
  flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lt-win__sum { flex: 0 0 auto; font-weight: 800; color: #15803d; }

@media (max-width: 600px) {
  .lt-buy { flex: 1 1 100%; }
  .lt-rules { flex: 1 1 100%; }
  .lt-hist__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-bar i, .lt-buy__btn { transition: none; }
  .lt-buy__btn:hover { transform: none; }
}

/* ============================================================
   РАНДОМНЫЙ РЕЙТИНГ — КОЛЕСО (wheel)
   Разметка: templates/wheel.tpl, история — api/wheel.php
   ============================================================ */
.wh-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

.wh-intro {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px 16px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

/* Таймер до следующей попытки */
.wh-timer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; text-align: center;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius-lg);
  padding: 14px 16px; margin-top: 14px;
}
.wh-timer__lbl {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #9a3412; font-weight: 700;
}
.wh-timer__val {
  font-size: 24px; font-weight: 800; color: #b45309;
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* Сцена и само колесо.
   Размер колеса жёстко 300px: подписи секторов позиционируются из JS
   через transform-origin 15px/110px, рассчитанный на этот диаметр.
   Поэтому на узких экранах колесо не пересчитывается, а масштабируется
   целиком через scale у .wh-area — математика подписей остаётся верной. */
.wh-stage { display: flex; justify-content: center; margin-top: 30px; }
.wh-area { position: relative; width: 300px; height: 300px; }

/* Указатель */
.wh-pointer {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 5;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 26px solid #ef4444;
  filter: drop-shadow(0 3px 4px rgba(45, 27, 105, .35));
}

.wh-wheel {
  width: 300px; height: 300px; border-radius: 50%; position: relative;
  border: 8px solid #fff;
  box-sizing: border-box;
  /* Верхний слой — тонкие белые разделители секторов, под ним сами сектора.
     Десятый сектор (1.0) золотой — это максимальный выигрыш. */
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0deg 0.7deg, transparent 0.7deg 36deg),
    conic-gradient(
      #a78bfa   0deg  36deg, #7c3aed  36deg  72deg,
      #a78bfa  72deg 108deg, #7c3aed 108deg 144deg,
      #a78bfa 144deg 180deg, #7c3aed 180deg 216deg,
      #a78bfa 216deg 252deg, #7c3aed 252deg 288deg,
      #a78bfa 288deg 324deg, #f59e0b 324deg 360deg);
  box-shadow:
    0 0 0 5px var(--purple-700, #7c3aed),
    0 0 0 9px rgba(124, 58, 237, .18),
    0 16px 34px rgba(45, 27, 105, .3),
    inset 0 0 26px rgba(45, 27, 105, .22);
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.wh-labels { position: absolute; inset: 0; }
/* Подписи секторов: угол задаётся из JS, остальное здесь */
.wh-label {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; margin-left: -15px; margin-top: -110px;
  transform-origin: 15px 110px;
  text-align: center; line-height: 30px;
  font-size: 15px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 3px rgba(45, 27, 105, .55);
}

/* Колпак в центре — поверх колеса, не вращается */
.wh-hub {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 4px 14px rgba(45, 27, 105, .3), inset 0 0 0 6px var(--purple-700, #7c3aed);
}
.wh-hub::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

/* Кнопка «Крутить» */
.wh-btnrow { text-align: center; margin-top: 32px; }
.wh-btn {
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; border: 0; font-family: inherit;
  padding: 14px 38px; border-radius: 999px;
  font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: 0 8px 20px rgba(21, 128, 61, .35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.wh-btn:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(21, 128, 61, .42);
}
.wh-btn:active:not(:disabled) { transform: translateY(0); }
.wh-btn:disabled {
  cursor: default; filter: none; transform: none;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  box-shadow: none;
}
.wh-btn__ico { font-size: 19px; line-height: 1; }
/* Пока колесо крутится — иконка вращается */
.wh-btn.is-spin .wh-btn__ico { animation: wh-rot 1.1s linear infinite; }
@keyframes wh-rot { to { transform: rotate(360deg); } }

/* Результат */
.wh-result {
  margin-top: 16px; text-align: center; min-height: 22px;
  font-size: 15px; font-weight: 700; color: var(--purple-700, #7c3aed);
}

/* История */
.wh-hist {
  margin-top: 34px; padding: 14px 16px;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.wh-hist__t {
  font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 9px;
}
#wheel-history-table table { width: 100%; }
#wheel-history-table td { font-size: 12.5px; }
.wh-win { color: #15803d; font-weight: 700; }

@media (max-width: 600px) {
  .wh-area { transform: scale(.82); }
  .wh-stage { margin-top: 14px; height: 250px; align-items: flex-start; }
  .wh-btn { padding: 13px 30px; font-size: 16px; }
  .wh-timer__val { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .wh-btn { transition: none; }
  .wh-btn:hover:not(:disabled) { transform: none; }
  .wh-btn.is-spin .wh-btn__ico { animation: none; }
}

/* ============================================================
   РЕКЛАМНЫЕ МАТЕРИАЛЫ (reflinks)
   Классы .reflink-mat / .refcode-mat / .pages-mat в теме не были
   оформлены вообще — поля выглядели браузерными «по умолчанию».
   ============================================================ */
.rl-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

.rl-intro {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

/* Блок своих ссылок */
.rl-links {
  background: var(--lavender-bg, #f7f4ff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 14px;
}
.rl-links__t { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }

/* Поле + кнопка копирования */
.rl-field { margin-bottom: 11px; }
.rl-field:last-child { margin-bottom: 0; }
.rl-field__lbl {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; color: var(--text-muted); font-weight: 600;
}
.rl-field__row { display: flex; gap: 7px; align-items: stretch; }
.rl-field__in {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 8px 11px !important; font-size: 12.5px !important;
  background: #fff !important; color: var(--text-primary) !important;
  outline: none; font-family: inherit;
}
.rl-field__in:focus { border-color: var(--border-focus, #a855f7) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.13) !important; }
.rl-field__in--code {
  font-family: Consolas, "Courier New", monospace; font-size: 11.5px !important;
  line-height: 1.5; resize: vertical;
  /* pre-wrap, а не pre: код виден целиком без горизонтальной прокрутки,
     копируется он всё равно кнопкой */
  white-space: pre-wrap; word-break: break-all; overflow-x: hidden;
}
.rl-copy {
  flex: 0 0 auto; cursor: pointer; border: 0; font-family: inherit;
  padding: 0 16px; border-radius: var(--radius-md);
  font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.rl-copy:hover { filter: brightness(1.08); }
.rl-copy.is-ok { background: linear-gradient(135deg, #22c55e, #15803d); }

/* Вкладки размеров */
.rl-tabs {
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 14px;
}
.rl-tab {
  padding: 8px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  color: var(--text-secondary) !important; transition: var(--transition-fast);
}
.rl-tab:hover { border-color: var(--purple-400); color: var(--purple-700) !important; }
.rl-tab.active {
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff !important;
  border-color: transparent; box-shadow: var(--shadow-sm);
}

/* Заголовок группы материалов */
.rl-sec {
  margin: 16px 0 9px; padding: 8px 13px;
  background: var(--lavender-bg, #f7f4ff); border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.rl-page > .rl-sec:first-child { margin-top: 0; }

/* Карточка материала */
.rl-card {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.rl-card__prev { flex: 0 0 auto; position: relative; line-height: 0; }
/* ссылка блочная — иначе на узком экране инлайновый <a> не сжимался
   вместе с картинкой и превью вылезало за карточку */
.rl-card__prev a { display: block; }
.rl-card__prev img {
  /* border-box: без него рамка 1px прибавлялась к max-width:100%
     и превью вылезало из карточки на 2px */
  box-sizing: border-box;
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.rl-card__tag {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(124, 58, 237, .92); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.rl-card__body { flex: 1 1 300px; min-width: 0; }

@media (max-width: 600px) {
  .rl-card { gap: 10px; padding: 12px; }
  /* min-width:0 нужен, иначе flex-элемент не сжимается ниже собственной
     ширины картинки, и превью 468px вылезало за карточку */
  .rl-card__prev { flex: 1 1 100%; min-width: 0; max-width: 100% !important; }
  .rl-field__row { flex-wrap: wrap; }
  .rl-copy { flex: 1 1 100%; padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-copy, .rl-tab { transition: none; }
}

/* ============================================================
   ЛИДЕР РЕФЕРАЛОВ (ref_lider)
   Раньше страница тащила свой <style> с общими именами
   (.blocklinks/.linklist) и использовала классы, которых в теме нет:
   text-success, text-danger, title3-hr, n_butt, tablev2, setup,
   bylnkzag, bylnklabel — последние два вообще не встречались в разметке.
   ============================================================ */
.rd-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

.rd-intro {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

/* Блок покупки */
.rd-buy {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 6px;
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff;
  border-radius: var(--radius-lg); padding: 15px 18px;
  box-shadow: var(--shadow-md);
}
.rd-buy__txt { display: flex; flex-direction: column; gap: 1px; }
.rd-buy__lbl {
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.rd-buy__price { font-size: 26px; font-weight: 800; line-height: 1.1; }
.rd-buy__price span { font-size: 13px; font-weight: 600; }
.rd-buy__note { font-size: 11.5px; color: rgba(255,255,255,.85); }
.rd-buy__btn {
  flex: 0 0 auto; cursor: pointer;
  padding: 12px 26px; border-radius: 999px;
  background: #fff; color: var(--purple-700);
  font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: var(--transition-fast);
}
.rd-buy__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.24); }
.rd-buy__btn:active { transform: translateY(0); }

/* Заголовок секции */
.rd-sec {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 18px 0 9px; padding: 8px 13px;
  background: var(--lavender-bg, #f7f4ff); border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 700; color: var(--text-primary);
}
.rd-sec--admin { margin-top: 26px; }
.rd-badge {
  padding: 2px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  background: var(--lavender-mid, #ede8ff); color: var(--text-muted);
}
.rd-badge--live { background: #dcfce7; color: #15803d; }
.rd-badge--over { background: #fee2e2; color: #b91c1c; }

.rd-note {
  margin: -4px 0 10px; padding: 7px 13px;
  font-size: 12px; color: var(--text-muted);
  background: var(--lavender-card, #fff);
  border: 1px dashed var(--border-color); border-radius: var(--radius-md);
}

/* Пять мест. Была таблица с width:15% на ячейку — пять по 15% давали 75%,
   строка не заполнялась. Теперь сетка, места делят ширину поровну. */
.rd-slots {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 4px;
}
.rd-slot {
  position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 12px 8px 11px;
  box-shadow: var(--shadow-sm);
}
.rd-slot__num {
  position: absolute; top: 6px; left: 8px;
  font-size: 10.5px; font-weight: 800; color: var(--text-muted);
}
.rd-slot__name {
  font-size: 13.5px; font-weight: 800; color: var(--purple-700);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-slot__got { font-size: 10.5px; color: var(--text-muted); }
.rd-slot__val { font-size: 15px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.rd-slot__val span { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.rd-slot--free { border-style: dashed; box-shadow: none; background: var(--lavender-bg, #f7f4ff); }
.rd-slot__free { font-size: 11.5px; color: var(--text-muted); padding: 8px 0; }

/* Карточка конкурса */
.rd-cont {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.rd-cont__rules { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 12px; }
.rd-cont__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.rd-stat {
  text-align: center; padding: 10px 11px;
  background: var(--lavender-bg, #f7f4ff); border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.rd-stat__lbl {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; line-height: 1.3;
}
.rd-stat__val { display: block; font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.rd-stat__val span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.rd-stat__val--sm { font-size: 12.5px; font-weight: 700; }
.rd-stat--accent { border-color: var(--purple-400); }
.rd-stat--accent .rd-stat__val { color: var(--purple-700); }
.rd-stat--win { border-color: #86efac; background: #f0fdf4; }
.rd-stat--win .rd-stat__val { color: #15803d; }

/* Таблица пятёрки */
.rd-table th, .rd-table td { text-align: center !important; }
.rd-table td { font-size: 13px; padding: 9px 8px !important; }
.rd-table__first td { background: rgba(124, 58, 237, .05); }
.rd-medal { margin-right: 5px; }
.rd-prize { font-weight: 800; color: #15803d; }
.rd-dash { color: var(--text-muted); }

/* Пусто */
.rd-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 24px 18px; text-align: center; font-size: 13px; color: var(--text-muted);
  background: var(--lavender-card, #fff); border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}
.rd-empty b { color: var(--text-primary); font-size: 14px; }
.rd-empty__ico { font-size: 24px; line-height: 1; }

/* Форма создания конкурса (только админ/модератор) */
.rd-form {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.rd-form__row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.rd-form__lbl { flex: 0 0 190px; font-size: 12.5px; color: var(--text-secondary); }
.rd-form__lbl span { display: block; font-size: 10.5px; color: #b91c1c; }
.rd-form__in {
  flex: 0 1 170px; box-sizing: border-box;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 8px 11px !important; font-size: 13px !important;
  background: #fff !important; color: var(--text-primary) !important; outline: none;
}
.rd-form__in:focus { border-color: var(--border-focus, #a855f7) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.13) !important; }
/* Раньше было <button><span class="btn orange">…</span></button> — кнопка
   в кнопке, с двойной рамкой от браузера */
.rd-form__btn {
  margin-top: 4px; cursor: pointer; border: 0; font-family: inherit;
  padding: 10px 22px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.rd-form__btn:hover { filter: brightness(1.07); }

@media (max-width: 760px) {
  .rd-slots { grid-template-columns: repeat(2, 1fr); }
  .rd-cont__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .rd-buy { flex-direction: column; align-items: stretch; text-align: center; }
  .rd-buy__btn { text-align: center; }
  .rd-form__lbl { flex: 1 1 100%; }
  .rd-form__in { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-buy__btn, .rd-form__btn { transition: none; }
  .rd-buy__btn:hover { transform: none; }
}

/* ============================================================
   МОИ РЕФЕРАЛЫ (referals)
   Классы .desctext и .del-all использовались, но правил в теме не имели.
   ============================================================ */
.rf-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

.rf-intro {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.rf-intro a { color: var(--purple-700); font-weight: 600; }

/* Панель кнопок. Были четыре .btn разных цветов с width в инлайне —
   красный, зелёный, серый и синий рядом. */
.rf-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rf-tool {
  cursor: pointer; padding: 9px 16px; border-radius: var(--radius-md);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: #fff; border: 1.5px solid var(--border-color);
  color: var(--text-secondary); transition: var(--transition-fast);
}
.rf-tool:hover { border-color: var(--border-hover); background: var(--purple-50, #faf5ff); color: var(--purple-700); }
.rf-tool--main {
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff;
  border-color: transparent; box-shadow: var(--shadow-sm);
}
.rf-tool--main:hover { filter: brightness(1.07); background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; }

/* Раскрываемые панели: поиск и рефбэк */
.rf-panel {
  background: var(--lavender-bg, #f7f4ff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px;
}
.rf-panel__lbl { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-secondary); }
.rf-panel__row { display: flex; gap: 8px; flex-wrap: wrap; }
.rf-input {
  flex: 1 1 200px; min-width: 0; box-sizing: border-box;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 8px 12px !important; font-size: 13px !important;
  background: #fff !important; color: var(--text-primary) !important; outline: none;
}
.rf-input:focus { border-color: var(--border-focus, #a855f7) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.13) !important; }
.rf-btn {
  flex: 0 0 auto; cursor: pointer; border: 0; font-family: inherit;
  padding: 9px 20px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.rf-btn:hover { filter: brightness(1.07); }
.rf-btn--wide { min-width: 210px; }

.rf-form { margin-bottom: 12px; }
.rf-form:last-child { margin-bottom: 0; }
.rf-form__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rf-select {
  flex: 0 0 110px; box-sizing: border-box;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 8px 10px !important; font-size: 13px !important;
  background: #fff !important; color: var(--text-primary) !important; outline: none;
}
.rf-form__note, .desctext {
  display: block; margin-top: 6px;
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}

/* Фильтры и счётчик */
.rf-filters { margin: 14px 0 10px; text-align: center; }
.rf-count {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 13px; margin-bottom: 10px;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); font-size: 13px; color: var(--text-secondary);
}
.rf-count b { color: var(--purple-700); font-size: 15px; }
.rf-count__ico { font-size: 15px; line-height: 1; }
.rf-count__bd { margin-left: auto; color: var(--purple-700) !important; font-weight: 600; cursor: pointer; }

/* Таблица */
.rf-tablewrap { overflow-x: auto; }
.rf-table th { padding: 8px 6px !important; }
.rf-table td { font-size: 12.5px; }
/* Сортировка. Внимание: базовые правила для этих заголовков уже есть в теме
   выше — #referals-new th span задаёт курсор, размер и стрелки ↑/↓ у
   .active-ASC / .active-DESC. Здесь только то, чего там не было: отбивка
   между заголовками и подсветка при наведении. Селектор с #referals-new,
   иначе правила темы (с id) перебьют по специфичности. */
#referals-new th .rf-sort {
  display: inline-block; margin: 1px 6px 1px 0;
  padding: 1px 4px; border-radius: var(--radius-sm, 6px);
  white-space: nowrap;
}
#referals-new th .rf-sort:hover { background: rgba(255, 255, 255, .22); }

/* Пустой список */
.rf-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 16px; text-align: center; font-size: 13px; color: var(--text-muted);
}
.rf-empty b { color: var(--text-primary); font-size: 14px; }
.rf-empty__ico { font-size: 24px; line-height: 1; }
.rf-empty a { color: var(--purple-700); font-weight: 600; }
.del-all > td { background: var(--lavender-bg, #f7f4ff) !important; }

@media (max-width: 600px) {
  .rf-tool { flex: 1 1 calc(50% - 4px); text-align: center; }
  .rf-btn--wide { flex: 1 1 100%; min-width: 0; }
  .rf-select { flex: 1 1 100%; }
  .rf-count__bd { margin-left: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-tool, .rf-btn { transition: none; }
}

/* ============================================================
   БИРЖА РЕФЕРАЛОВ (refbirj)
   Страница переведена на классы .rf-* от «Моих рефералов»;
   здесь только своё: блок условий продажи и строки поиска.
   ============================================================ */
.bj-cond {
  background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radius-lg);
  padding: 13px 16px; margin-bottom: 10px;
}
.bj-cond__t { font-size: 13.5px; font-weight: 700; color: #15803d; margin-bottom: 7px; }
.bj-cond__list {
  margin: 0 0 8px; padding-left: 20px;
  font-size: 12.5px; line-height: 1.6; color: #166534;
}
.bj-cond__list li { margin-bottom: 3px; }
.bj-cond__note { font-size: 11.5px; color: var(--text-muted); }
.bj-cond__note a { color: var(--purple-700); font-weight: 600; }

.bj-srow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bj-srow:last-child { margin-bottom: 0; }
.bj-srow__lbl { flex: 0 0 170px; font-size: 12.5px; color: var(--text-secondary); }
.bj-srow__pair { display: flex; gap: 6px; flex: 1 1 auto; }
.rf-input--sm { flex: 0 1 90px; text-align: center; }

@media (max-width: 600px) {
  .bj-srow__lbl { flex: 1 1 100%; }
  .bj-srow .rf-btn { flex: 1 1 100%; }
}

/* ============================================================
   ПРИВЕТСТВИЕ ДЛЯ РЕФЕРАЛОВ (mess_new_ref)
   ============================================================ */
.mr-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

.mr-intro {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px 16px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.mr-intro a { color: var(--purple-700); font-weight: 600; }

/* Предпросмотр текущего письма */
.mr-preview {
  background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radius-lg);
  padding: 13px 16px; margin-bottom: 12px;
}
.mr-preview__h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
  font-size: 13px; font-weight: 700; color: #15803d;
}
.mr-preview__ico { font-size: 15px; line-height: 1; }
.mr-preview__tema { font-size: 12px; color: #166534; margin-bottom: 6px; }
.mr-preview__body {
  background: #fff; border: 1px solid #bbf7d0; border-radius: var(--radius-md);
  padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--text-primary);
  word-break: break-word;
}

/* Карточка формы */
.mr-card {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 15px 17px; box-shadow: var(--shadow-sm);
}
.mr-card__h { font-size: 14.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }

.mr-field { margin-bottom: 14px; }
.mr-field__lbl { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.mr-field__hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.mr-field__foot { margin-top: 5px; text-align: right; font-size: 11.5px; color: var(--text-muted); }

.mr-input, .mr-textarea {
  width: 100%; box-sizing: border-box; font-family: inherit;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 9px 12px !important; font-size: 13px !important;
  background: #fff !important; color: var(--text-primary) !important; outline: none;
}
.mr-input[readonly] { background: var(--lavender-bg, #f7f4ff) !important; color: var(--text-muted) !important; }
.mr-textarea { min-height: 180px; line-height: 1.6; resize: vertical; }
.mr-textarea:focus { border-color: var(--border-focus, #a855f7) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.13) !important; }

/* Панель форматирования */
.mr-bar {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 6px 8px; margin-bottom: 6px;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.mr-bar__sep { width: 1px; height: 18px; background: var(--border-color); margin: 0 3px; }
.mr-bar__smile {
  cursor: pointer; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--purple-700);
  background: #fff; border: 1px solid var(--border-color);
  transition: var(--transition-fast);
}
.mr-bar__smile:hover { background: var(--purple-600); color: #fff; border-color: transparent; }

/* Набор смайлов — разметку отдаёт smile_panel() из class/funciones.php */
.mr-smiles {
  padding: 7px 9px; margin-bottom: 6px;
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  line-height: 1;
}
.mr-smiles .emo-pick { border-radius: 6px; transition: background .12s ease; }
.mr-smiles .emo-pick:hover { background: var(--lavender-mid, #ede8ff); }

.mr-btns { text-align: center; margin-top: 4px; }
.mr-btn {
  cursor: pointer; border: 0; font-family: inherit;
  padding: 11px 30px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.mr-btn:hover { filter: brightness(1.07); }
.mr-btn--del { background: linear-gradient(135deg, #f87171, #dc2626); margin-top: 8px; }

@media (max-width: 600px) {
  .mr-card { padding: 12px 13px; }
  .mr-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-bar__smile, .mr-btn, .mr-smiles .emo-pick { transition: none; }
}

/* ============================================================
   МАССОВАЯ РАССЫЛКА (new_mail?s=rass)
   ============================================================ */
.rs-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--nav-bg); color: #fff;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.rs-head__ico { font-size: 16px; line-height: 1; }
.rs-head__t { font-size: 14px; font-weight: 700; }

/* Варианты получателей */
.rs-opts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.rs-opt {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: var(--lavender-card, #fff); border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md); padding: 10px 13px;
  transition: var(--transition-fast);
}
.rs-opt:hover { border-color: var(--border-hover); background: var(--purple-50, #faf5ff); }
.rs-opt__radio { flex: 0 0 auto; margin: 0; cursor: pointer; }
/* Выбранный вариант видно сразу — раньше это была обычная строка таблицы */
.rs-opt:has(.rs-opt__radio:checked) {
  border-color: var(--purple-600); background: var(--lavender-bg, #f7f4ff);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .12);
}
.rs-opt__body { flex: 1 1 auto; min-width: 0; }
.rs-opt__t { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.rs-opt__d { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.rs-opt__k {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--purple-700);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rs-opt__k span { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.rs-opt__p {
  flex: 0 0 108px; text-align: right; white-space: nowrap;
  font-size: 15px; font-weight: 800; color: #15803d;
}
.rs-opt__p span { font-size: 11px; font-weight: 600; }
.rs-opt__free { font-size: 12px; font-weight: 800; color: #15803d; }
.rs-opt__no { font-size: 11px; font-weight: 600; color: var(--text-muted); }
/* Недоступный вариант: получателей нет, платить незачем */
.rs-opt--off { cursor: default; opacity: .6; background: var(--lavender-bg, #f7f4ff); border-style: dashed; }
.rs-opt--off:hover { border-color: var(--border-color); background: var(--lavender-bg, #f7f4ff); }
.rs-opt--adm { border-color: #fed7aa; background: #fff7ed; }

/* Редактор письма */
.rs-editor {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 12px;
}
.rs-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 9px;
  border-bottom: 1px solid var(--border-color);
}
.rs-bar__sep { width: 1px; height: 18px; background: var(--border-color); margin: 0 2px; }
.rs-bar__cnt { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.rs-textarea {
  width: 100%; box-sizing: border-box; min-height: 180px; font-family: inherit;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 10px 12px !important; font-size: 13px !important; line-height: 1.6;
  background: #fff !important; color: var(--text-primary) !important;
  outline: none; resize: vertical;
}
.rs-textarea:focus { border-color: var(--border-focus, #a855f7) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.13) !important; }

/* Оплата */
.rs-pay {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 13px 16px;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
}
.rs-pay__sum { font-size: 14px; color: var(--text-secondary); }
.rs-pay__sum b { font-size: 22px; font-weight: 800; color: var(--purple-700); }
.rs-pay__sum span { font-size: 13px; color: var(--text-muted); }
.rs-pay__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-pay__btn {
  cursor: pointer; border: 0; font-family: inherit;
  padding: 11px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.rs-pay__btn:hover { filter: brightness(1.07); }
.rs-pay__btn--alt { background: linear-gradient(135deg, #22c55e, #15803d); }

.rs-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 18px; text-align: center; font-size: 13px; color: var(--text-muted);
  background: var(--lavender-card, #fff); border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}
.rs-empty b { color: var(--text-primary); font-size: 14px; }
.rs-empty__ico { font-size: 24px; line-height: 1; }
.rs-empty a { color: var(--purple-700); font-weight: 600; }

@media (max-width: 700px) {
  .rs-opt { flex-wrap: wrap; }
  .rs-opt__body { flex: 1 1 calc(100% - 40px); }
  .rs-opt__k { margin-left: 26px; }
  .rs-opt__p { flex: 1 1 auto; text-align: right; }
  .rs-pay { flex-direction: column; align-items: stretch; text-align: center; }
  .rs-pay__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-opt, .rs-pay__btn { transition: none; }
}

/* ============================================================
   ПОЧТА, ВКЛАДКА «МОИ ДИАЛОГИ» (new_mail?s=all)
   Класс .scan-faq (обёртка поля поиска) в теме правил не имел.
   ============================================================ */
.nm-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--nav-bg); color: #fff;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.nm-head__ico { font-size: 16px; line-height: 1; }
.nm-head__t { flex: 1 1 auto; font-size: 14px; font-weight: 700; }
.nm-head__new {
  flex: 0 0 auto; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff !important; font-size: 12.5px; font-weight: 700;
  transition: var(--transition-fast);
}
.nm-head__new:hover { background: #fff; color: var(--purple-700) !important; border-color: transparent; }

/* Поиск по логину */
.nm-search { margin-bottom: 10px; }
.nm-search input {
  width: 100%; box-sizing: border-box;
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  padding: 9px 13px !important; font-size: 13px !important;
  background: #fff !important; color: var(--text-primary) !important; outline: none;
}
.nm-search input:focus { border-color: var(--border-focus, #a855f7) !important; box-shadow: 0 0 0 3px rgba(168,85,247,.13) !important; }

/* Список диалогов: карточкам .mail-sample добавляем ховер и отбивку */
.nm-list .mail-sample {
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}
.nm-list .mail-sample:hover { background: var(--purple-50, #faf5ff); }

/* Кнопка удаления диалога.
   Раньше на ней стоял класс .task-favorite — это спрайт pin.png со страницы
   заданий, то есть «в избранное». Для удаления диалога иконка была неверная.
   Теперь SVG-корзина, цвет наследуется. */
.nm-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  color: var(--text-muted); background: transparent;
  border: 1px solid transparent; transition: var(--transition-fast);
}
.nm-del svg { width: 14px; height: 14px; display: block; }
.nm-del:hover { color: #fff; background: #dc2626; border-color: transparent; }

.nm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 28px 18px; text-align: center; font-size: 13px; color: var(--text-muted);
  background: var(--lavender-card, #fff); border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}
.nm-empty b { color: var(--text-primary); font-size: 14px; }
.nm-empty__ico { font-size: 26px; line-height: 1; }
.nm-empty a { color: var(--purple-700); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .nm-head__new, .nm-list .mail-sample, .nm-del { transition: none; }
}

/* ============================================================
   PRO-ПОДПИСКА (subscribe) — блок тарифов
   ============================================================ */
.sb-plans {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  max-width: 900px; margin: 0 auto; text-align: left;
}
.sb-plan {
  position: relative; text-align: center;
  background: var(--lavender-card, #fff); border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 26px 12px 14px;
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.sb-plan:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sb-plan--best { border-color: var(--purple-600); box-shadow: 0 0 0 3px rgba(168, 85, 247, .13), var(--shadow-md); }
.sb-plan__flag {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  padding: 2px 12px; border-radius: 0 0 8px 8px;
  background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  white-space: nowrap;
}
.sb-plan__save {
  position: absolute; top: 8px; right: 8px;
  padding: 2px 8px; border-radius: 999px;
  background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 800;
}
.sb-plan__term { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.sb-plan__price { font-size: 30px; font-weight: 800; color: var(--purple-700); line-height: 1; }
.sb-plan__price span { font-size: 15px; font-weight: 600; margin-left: 2px; }
.sb-plan__per { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.sb-plan__ball { font-size: 11.5px; color: #15803d; margin: 7px 0 11px; }
.sb-plan__ball b { font-weight: 800; }
.sb-plan__btn {
  width: 100%; cursor: pointer; border: 0; font-family: inherit;
  padding: 10px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.sb-plan__btn:hover { filter: brightness(1.07); }
.sb-plan--best .sb-plan__btn { background: linear-gradient(135deg, #7c3aed, #6366f1); }

.sb-note {
  max-width: 900px; margin: 12px auto 0;
  font-size: 11.5px; color: var(--text-muted); text-align: center;
}

@media (max-width: 760px) { .sb-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sb-plans { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .sb-plan, .sb-plan__btn { transition: none; }
  .sb-plan:hover { transform: none; }
}

/* ============================================================
   БЕЙДЖ VIP НА АВАТАРКЕ
   Разметку отдаёт vip_badge() из class/funciones.php — она проверяет,
   что подписка активна (subscribe = 1 и subscribe_time не истёк).
   Родителю нужен position:relative.
   ============================================================ */
.vip-badge {
  position: absolute; right: -4px; bottom: -4px; z-index: 3;
  padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  color: #7a3d00; line-height: 1.25; white-space: nowrap;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(120, 53, 15, .35);
}
/* Демо-бейдж в списке преимуществ — в потоке, не поверх аватарки */
.vip-badge--demo { position: static; right: auto; bottom: auto; font-size: 12px; padding: 3px 10px; }

.usr-ava { position: relative; }
/* Метка VIP в пункте меню «Подписка» */
.mi-vip {
  padding: 1px 6px; border-radius: 999px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #7a3d00; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
}

/* ============================================================
   ПРЕИМУЩЕСТВА VIP (subscribe)
   ============================================================ */
.vp-benefits { max-width: 900px; margin: 0 auto 18px; text-align: left; }
.vp-benefits__t {
  text-align: center; font-size: 16px; line-height: 1.45;
  color: var(--text-primary); margin-bottom: 14px;
}
.vp-word {
  padding: 1px 9px; border-radius: 999px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #7a3d00; font-weight: 800;
}
.vp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.vp-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 13px 15px;
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.vp-item:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.vp-item__ico { flex: 0 0 34px; font-size: 24px; line-height: 1; text-align: center; }
.vp-item__val {
  flex: 0 0 auto; font-size: 19px; font-weight: 800; color: var(--purple-700);
  line-height: 1.1; white-space: nowrap;
}
.vp-item__txt { flex: 1 1 auto; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.vp-item--badge { grid-column: 1 / -1; border-color: #fcd34d; background: #fffbeb; }
.vp-item--badge .vp-item__val { color: #b45309; }

@media (max-width: 700px) {
  .vp-grid { grid-template-columns: 1fr; }
  .vp-item__val { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .vp-item { transition: none; } }

/* правило .wall-skin .avatar-akk + .vip-badge удалено: оно было
   специфичнее общего и перебивало отступы бейджа */

/* Аватарки в блоке «Выберем реферера?» на регистрации.
   Было 54x54 фиксированно. Теперь размер в процентах от строки: девять
   рефереров (LIMIT 9 в include/register.php) занимают ровно один ряд и
   становятся тем крупнее, чем шире экран. */
.rg-ava { display: block; width: 100%; }
.rg-ava img.avatar-akk {
  width: 100%; height: auto; box-sizing: border-box;
  aspect-ratio: 1 / 1; object-fit: cover; display: block; cursor: pointer;
}
/* Бейдж на мелких аватарках — компактнее */
/* На мелких аватарках (регистрация) бейдж компактнее */
.rg-ava .vip-badge { right: -3px; bottom: -3px; padding: 1px 5px; font-size: 8.5px; border-width: 1.5px; }
/* Бейдж считает координаты от .ava-wrap — обёртки вокруг самой картинки.
   Раньше здесь висел список селекторов-предков (#block-top100 a, .goodref a
   и т.п.); они не совпадали с реальной вёрсткой, и бейдж уезжал к правому
   краю страницы. Теперь обёртка ставится в разметке рядом с <img>, и от
   структуры страницы ничего не зависит. */
.ava-wrap { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.ava-wrap > img { display: block; max-width: 100%; }

/* Блок выбора реферера на регистрации построен на .tooltipgo, а в теме для
   него есть два правила, которые ловят ЛЮБОЙ <span> внутри:
     .tooltipgo span        { margin-left:-999em; position:absolute; }
     .tooltipgo:hover span  { position:absolute; right:1em; top:2em; width:250px; ... }
   Первое уносило нашу обёртку с аватаркой за экран, второе при наведении
   растягивало бейдж VIP в жёлтый прямоугольник 250px. Поэтому и обёртку,
   и бейдж выводим из-под этих правил — в обоих состояниях. */
.tooltipgo span.ava-wrap,
.tooltipgo:hover span.ava-wrap {
  position: relative; left: auto; top: auto; right: auto;
  margin-left: 0; width: 100%;
  box-shadow: none; z-index: auto;
}
.tooltipgo span.vip-badge,
.tooltipgo:hover span.vip-badge {
  position: absolute; right: -3px; bottom: -3px; left: auto; top: auto;
  width: auto; margin-left: 0; z-index: 3;
  padding: 1px 5px; font-size: 8.5px;
  box-shadow: 0 2px 6px rgba(60, 30, 0, .4);
}

/* Сами карточки рефереров. Раньше размер задавался на внутреннем span, из-за
   чего ширину определял инлайн-элемент <a>, и девять аватарок не всегда
   умещались в ряд. Теперь ширину держит сама ссылка. */
.tooltipgo.rg-item {
  display: inline-block; vertical-align: top;
  box-sizing: border-box;
  /* 11.11% = 1/9 ширины строки. Вычитаем с запасом: между inline-block
     элементами браузер добавляет пробел из переноса строки в разметке
     (~4px на стык), и без этого запаса девятая карточка уезжала на вторую
     строку. Отступ справа минимальный по той же причине. */
  width: calc(11.11% - 13px);
  /* min-width 34px — чтобы ряд не разрывался даже на узких телефонах
     (9 x 34px + отступы влезают в ~380px). На таких экранах аватарки
     получаются мелкими, но ряд один, как и просили. */
  min-width: 34px; max-width: 104px;
  margin: 0 1px 4px 0;
}
.tooltipgo.rg-item:last-child { margin-right: 0; }

/* Доска почёта в правом меню: у картинки инлайновая width:80%, поэтому
   обёртка получалась шире неё и бейдж вставал правее края аватарки.
   Задаём обёртке те же 80%, а картинке внутри — 100% от обёртки:
   визуальный размер тот же, но бейдж считается от самой картинки. */
#chec-doska .ava-wrap { width: 80%; }
/* border-box: без него рамка 2px и отступ 4px прибавлялись к width:100%,
   картинка вылезала за обёртку на 6px с каждой стороны и бейдж вставал
   не в угол фотографии. */
#chec-doska .ava-wrap > img { width: 100% !important; box-sizing: border-box; }
/* Бейдж прижат к правому нижнему углу самой фотографии: у img.avatar-akk
   рамка 2px и внутренний отступ 2px, поэтому 5px кладут его в угол снимка
   с минимальным зазором. Чуть меньше общего. */
/* Доска почёта: у картинки класс purple-border-fix с `border: 3px solid
   transparent` (сквозь неё видно градиентную рамку) плюс инлайновый
   `padding: 4px`. Значит фотография начинается в 7px от края элемента —
   прежние 6px оставляли бейдж на рамке. Берём 10px: бейдж внутри фото с
   зазором 3px. Обводка — как у всех остальных бейджей, 2px белая. */
#chec-doska .vip-badge {
  /* right: 7px рамки (border 3px + padding 4px) + 3px зазора.
     bottom больше на 5px, потому что у картинки инлайновый margin-bottom:5px,
     а он входит в высоту inline-block обёртки — без компенсации зазор снизу
     съедался и бейдж прилипал к краю фотографии. */
  right: 10px; bottom: 15px;
  padding: 2px 8px; font-size: 10px;
}

/* ТОП 100: аватарка лежит в <div class="top-ava-box"> с overflow:hidden —
   этот контейнер срезал выступающий за край бейдж. Здесь единственное место,
   где бейдж приходится сдвинуть внутрь снимка: у img.avatar-akk рамка 2px и
   отступ 2px, поэтому 6px кладут его внутрь с небольшим зазором. */
.top-ava-box .vip-badge {
  right: 6px; bottom: 6px;
  padding: 2px 7px; font-size: 9.5px;
}

/* ============================================================
   ДИАЛОГИ: крупные аватарки и галочки прочтения
   ============================================================ */
/* .mail-mailer в теме — float:left с фиксированной шириной 170px, а строка
   .mail-sample float не схлопывает (у неё только position:relative). С прежней
   аватаркой 28px высота float укладывалась в строку, а с крупной он вылезал
   и сдвигал следующие строки — они шли «лестницей». Замыкаем float в строке
   и задаём минимальную высоту под аватарку. */
.nm-list .mail-sample,
#dialog-load .mail-sample {
  overflow: hidden;
  min-height: 62px;
}

/* Аватарка в строке диалога была ~28px. Крупнее и с рамкой. */
.nm-list .mail-mailer img,
#dialog-load .mail-mailer img {
  width: 54px !important; height: 54px !important;
  object-fit: cover; border-radius: 12px;
  border: 2px solid var(--lavender-mid, #ede8ff);
  box-sizing: border-box;
}
#dialog-load .mail-mailer { min-width: 132px; }

/* Пометка прочтения — как в мессенджерах: одна галочка «отправлено»,
   две «прочитано». Разметку отдаёт $row['read_mark'] из
   include/users/new_mail.php. */
.nm-check {
  display: inline-block; margin-left: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: -3px;
  color: var(--text-muted); vertical-align: middle;
}
.nm-check--read { color: #15803d; }

/* Кнопка «Прочитать все» в шапке вкладки */
.nm-head__read {
  flex: 0 0 auto; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: var(--transition-fast);
}
.nm-head__read:hover { background: #fff; color: var(--purple-700); border-color: transparent; }

@media (max-width: 520px) {
  .nm-list .mail-mailer img, #dialog-load .mail-mailer img { width: 44px !important; height: 44px !important; }
  .nm-head__read, .nm-head__new { flex: 1 1 calc(50% - 5px); text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .nm-head__read { transition: none; } }

/* Списки в таблицах (ТОП 100, реферальная стена): строка обрезает всё, что
   выходит за её пределы, и бейдж, висящий на рамке аватарки, срезался снизу.
   Поэтому здесь он внутри фотографии: у .avatar-akk рамка 2px + padding 2px,
   плюс 3px зазора. Обводка — та же белая 2px, как во всех остальных местах. */
.table .ava-wrap .vip-badge,
td .ava-wrap .vip-badge {
  right: 7px; bottom: 7px;
  padding: 2px 7px; font-size: 9.5px;
}

/* ============================================================
   ОКНО ПОДТВЕРЖДЕНИЯ НА ДОСКЕ ПОЧЁТА (.dk-modal)
   Разметка в templates/add_to_desck.tpl. Своё, а не серверное:
   запрос func=buy-first-desc возвращал пустой ответ, и пользователь
   видел затемнение без окна.
   ============================================================ */
.dk-ov {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(45, 27, 105, .55);
}
.dk-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10001; width: 420px; max-width: calc(100% - 24px);
  background: #fff; border-radius: var(--radius-lg, 14px); overflow: hidden;
  box-shadow: 0 20px 48px rgba(45, 27, 105, .38);
}
.dk-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; background: var(--nav-bg); color: #fff;
  font-size: 14.5px; font-weight: 700;
}
.dk-modal__x { cursor: pointer; font-size: 22px; line-height: 1; opacity: .85; }
.dk-modal__x:hover { opacity: 1; }
.dk-modal__body {
  padding: 16px; font-size: 13.5px; line-height: 1.65;
  color: var(--text-secondary); text-align: center;
}
.dk-modal__body b { color: var(--text-primary); }
.dk-modal__foot {
  display: flex; gap: 9px; justify-content: center;
  padding: 0 16px 16px;
}
.dk-btn {
  cursor: pointer; border: 1.5px solid var(--border-color); font-family: inherit;
  padding: 10px 22px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  background: #fff; color: var(--text-secondary);
  transition: var(--transition-fast);
}
.dk-btn:hover { border-color: var(--border-hover); background: var(--purple-50, #faf5ff); }
.dk-btn--yes {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: var(--shadow-sm);
}
.dk-btn--yes:hover { filter: brightness(1.07); background: linear-gradient(135deg, #22c55e, #15803d); }

@media (prefers-reduced-motion: reduce) { .dk-btn { transition: none; } }

/* ============================================================
   РЕЙТИНГ И СТАТУСЫ (rating)
   Локальный <style> в шаблоне ограничен селектором .rt-skin — до этого
   там были голые label / button / input[type=number], и после посещения
   страницы они применялись ко всему сайту (например button получал
   width:100%), потому что страница грузится в общий каркас.
   ============================================================ */
.rt-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

.rt-intro {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 14px 17px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.65; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

/* Заголовки разделов: были <h3> + <hr> */
.rt-sec {
  margin: 20px 0 10px; padding: 9px 14px;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.rt-skin > .rt-sec:first-of-type { margin-top: 0; }

/* Сетка карточек «за что начисляется рейтинг».
   Класс переименован: card-points был одновременно и обёрткой-сеткой,
   и значением баллов внутри карточки — правила конфликтовали. */
.rt-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px;
  margin-bottom: 6px;
}
.rt-cards .card-item {
  display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1.5px solid var(--border-color);
  border-left-width: 4px;
  border-radius: var(--radius-md); padding: 11px 13px;
  transition: var(--transition-fast);
}
.rt-cards .card-item:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.rt-cards .card-item.positive { border-left-color: #22c55e; }
.rt-cards .card-item.negative { border-left-color: #dc2626; }
.rt-cards .card-title { font-size: 12.5px; line-height: 1.45; color: var(--text-primary); }
.rt-cards .card-description { font-size: 11px; color: var(--text-muted); }
.rt-cards .card-points { font-size: 14px; font-weight: 800; margin-top: 2px; }
.rt-cards .positive .card-points { color: #15803d; }
.rt-cards .negative .card-points { color: #b91c1c; }

/* Таблицы статусов */
.rt-skin .table { margin-bottom: 14px; }

@media (max-width: 700px) { .rt-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rt-cards .card-item { transition: none; } }

/* ---- Блок покупки рейтинга и таблицы статусов ---- */
.rt-buy {
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 15px 17px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
/* Текущий рейтинг и баланс */
.rt-skin .balance {
  display: flex; gap: 10px 22px; flex-wrap: wrap; justify-content: center;
  padding: 11px 14px; margin-bottom: 14px;
  background: var(--lavender-bg, #f7f4ff);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 13px; color: var(--text-secondary);
}
.rt-skin .balance strong { font-size: 16px; font-weight: 800; color: var(--purple-700); }

.rt-skin .input-group { margin-bottom: 14px !important; }
.rt-skin label { font-size: 12.5px !important; font-weight: 600 !important; color: var(--text-secondary) !important; }
.rt-skin input[type="number"] {
  border: 2px solid var(--border-color) !important; border-radius: var(--radius-md) !important;
  font-size: 15px !important; text-align: center; font-weight: 700;
  color: var(--text-primary) !important;
}
.rt-skin input[type="number"]:focus {
  border-color: var(--border-focus, #a855f7) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .13) !important;
}
.rt-skin .calculation-info { margin-top: 5px; font-size: 11.5px; color: var(--text-muted); }

.rt-skin .price-info {
  background: var(--lavender-bg, #f7f4ff) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important; margin: 0 0 14px 0 !important; text-align: center;
}
.rt-skin .price-info p { margin: 0; font-size: 14px; color: var(--text-secondary); }
.rt-skin .price-info strong { color: var(--text-primary); }
.rt-skin #total-price { font-weight: 800; color: #15803d; }

.rt-skin button#buy-button {
  background: linear-gradient(135deg, #22c55e, #15803d) !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 13px 20px !important; font-size: 15px !important; font-weight: 700;
  color: #fff !important; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.rt-skin button#buy-button:hover { filter: brightness(1.07); background: linear-gradient(135deg, #22c55e, #15803d) !important; }
.rt-skin button#buy-button:disabled { background: linear-gradient(135deg, #cbd5e1, #94a3b8) !important; cursor: default; filter: none; }

/* Сообщение о результате покупки */
.rt-skin .message1 {
  padding: 11px 14px; margin-bottom: 14px; border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.6;
}
.rt-skin .message1.success { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; }
.rt-skin .message1.error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.rt-skin .label1 { font-weight: 800; color: #b45309; }

/* Таблицы статусов: 5 колонок, на узких экранах нужна прокрутка,
   иначе они рвут раскладку страницы */
.rt-tablewrap { overflow-x: auto; margin-bottom: 14px; }
.rt-tablewrap .table { margin-bottom: 0; min-width: 560px; }

@media (max-width: 600px) {
  .rt-skin .balance { flex-direction: column; gap: 4px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .rt-skin button#buy-button { transition: none; } }

/* ============================================================
   МОЯ СТАТИСТИКА (members)
   Внешняя обёртка страницы не закрывалась, а внутри была вторая такая же
   с теми же отступами — обе заменены одной .mb-skin.
   ============================================================ */
.mb-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

/* График активности */
.mb-chart {
  text-align: center; padding: 14px;
  background: var(--lavender-card, #fff); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); margin-bottom: 14px;
  box-shadow: var(--shadow-sm); overflow-x: auto;
}
.mb-chart img { max-width: 100%; height: auto; }

/* Таблица «Мой аккаунт»: две колонки, но значения бывают длинными */
.mb-tablewrap { overflow-x: auto; }
.mb-tablewrap .table { min-width: 460px; margin-bottom: 14px; }
.mb-skin .table td { font-size: 13px; }
/* Строки-подзаголовки внутри таблицы (жёлтая подложка в инлайне) */
.mb-skin .table td[colspan="2"] { font-weight: 700; }

/* ============================================================
   МОИ ДРУЗЬЯ (friends, friends_user)
   Разметка: templates/friends.tpl, templates/friends_user.tpl,
   строки списка — templates/foreach/foreach-friends.tpl (6 блоков,
   их же отдаёт поиск из ajax/users/ajax-friends.php и постраничная
   загрузка через ajax/load_pages.php).
   ============================================================ */
.fr-skin { max-width: 900px; margin: 0 auto; padding: 0 7px; }

/* Подвкладки «Заявки ко мне» / «Я прошусь» — на полступени тише основных */
.fr-subtabs { margin-top: -2px; }
.fr-subtabs .menu-task-work__link { padding: 10px 12px; font-size: 12px; }

/* ------------------------------------------------------------
   ПОИСК ПО СПИСКУ
   .scan-friends правил в теме не имело — поле стояло голым.
   Класс используется ещё в templates/black-list.tpl (поиск по URL),
   там разметка такая же, поэтому базовые правила общие.
   ------------------------------------------------------------ */
.scan-friends { position: relative; margin: 0 0 12px; }
.scan-friends input {
  padding-left: 38px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239585b8' stroke-width='1.6' stroke-linecap='round' d='M6.9 1.9a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm3.7 8.7 3.4 3.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
}

/* Крестик очистки: показывается только когда в поле что-то есть */
.fr-search__clear {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 24px;
  text-align: center;
  transition: var(--transition-fast);
}
.fr-search__clear_on { display: block; }
.fr-search__clear:hover { color: var(--purple-700); background: var(--purple-50); }

/* Индикатор ожидания ответа поиска. На время запроса крестик убираем,
   иначе он и вертушка встают на одно место. */
.fr-search_load .fr-search__clear { display: none; }
.fr-search_load::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--purple-200);
  border-top-color: var(--purple-600);
  border-radius: 50%;
  animation: fr-spin 0.7s linear infinite;
}
@keyframes fr-spin { to { transform: rotate(360deg); } }

/* Сообщение «не найдено» лежит над таблицей результатов, а не внутри неё */
#scan-friends-msg { margin-bottom: 10px; }
#scan-friends-msg:empty { margin-bottom: 0; }

/* ------------------------------------------------------------
   КАРТОЧКА СЧЁТЧИКА
   Была строка с инлайн-стилями (color: green) между двумя <hr>.
   Цифра остаётся в #new-z-friends — её обновляет ajax-friends.php.
   ------------------------------------------------------------ */
.fr-count {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin: 0 0 12px;
  background: var(--lavender-card, #fff);
  border: 1.5px solid var(--border-color);
  border-left: 4px solid var(--purple-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  color: var(--text-secondary);
}
.fr-count__ico { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.fr-count__num { font-size: 17px; font-weight: 800; color: var(--purple-700); }
.fr-count_online { border-left-color: #22c55e; }
.fr-count_online .fr-count__num { color: #15803d; }
.fr-count_new { border-left-color: #f59e0b; }
.fr-count_new .fr-count__num { color: #b45309; }
.fr-count_out { border-left-color: var(--violet-500); }
.fr-count_out .fr-count__num { color: var(--violet-700); }

/* ------------------------------------------------------------
   ТАБЛИЦА СПИСКА
   Строки уже оформлены как карточки правилом table.new-class tr,
   но фон белый шёл от самой таблицы, и промежутки 8px сливались
   со строками. Здесь фон отдан ячейкам — промежутки стали видимыми.
   ------------------------------------------------------------ */
.fr-tablewrap { overflow-x: auto; }
.fr-table { min-width: 560px; background: transparent; border: 0; box-shadow: none; }
.fr-table .fr-cell {
  padding: 8px 10px;
  vertical-align: top;
  background: var(--lavender-card, #fff);
  transition: var(--transition-fast);
}
.fr-table .fr-cell:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.fr-table .fr-cell:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.fr-table .fr-row:hover .fr-cell { background: var(--purple-50); }
.fr-table .fr-cell_ava  { width: 96px; }
.fr-table .fr-cell_acts { width: 200px; text-align: right; }

/* Аватар. Размеры были в инлайне у каждого из шести блоков.
   Ховер img.avatar-akk со страницы профиля тянет width:100% и
   translateY(-10px) scale(1.1) — в строке списка это выглядело
   прыжком, поэтому здесь эффект свой, сдержанный. */
.fr-ava { line-height: 0; }
.fr-ava img.avatar-akk {
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  margin: 0;
  padding: 2px;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.fr-ava img.avatar-akk:hover {
  width: 76px;
  transform: scale(1.04);
  border-color: var(--purple-400);
  box-shadow: var(--shadow-md);
}

/* Логин, имя, кнопка статистики */
.fr-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.fr-name__link { font-size: 14px; font-weight: 700; }
.fr-name__fio  { font-size: 12px; color: var(--text-muted); }
/* Имя в профиле заполнено не у всех — пустой span не должен давать зазор */
.fr-name__fio:empty { display: none; }

/* Кнопка расширенной статистики.
   Класс .pchart в разметке был, а правил для него не существовало
   ни в одной теме проекта — кнопка выходила нулевого размера,
   то есть невидимой и некликабельной. */
.pchart {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--lavender-card, #fff) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%237c3aed' d='M1 7h2.2v4H1zm3.9-3h2.2v7H4.9zM8.8 1H11v10H8.8z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  cursor: pointer;
  vertical-align: middle;
  transition: var(--transition-fast);
}
.pchart:hover {
  border-color: var(--border-hover);
  background-color: var(--purple-50);
  box-shadow: var(--shadow-sm);
}

/* Online / Offline с точкой. Серый #d1d5db у .offline-friends на белом
   фоне почти не читался — внутри строки берём цвет подписей темы. */
.fr-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.fr-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.fr-status.offline-friends { color: var(--text-muted); }

/* Действия в строке. Были четыре ссылки через <br> в ячейке
   с инлайновой шириной 170px и nowrap. */
.fr-acts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.fr-act {
  display: inline-block;
  padding: 3px 9px;
  line-height: 1.45;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--lavender-card, #fff);
  color: var(--purple-700);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-fast);
}
.fr-act:hover {
  background: var(--purple-50);
  border-color: var(--border-hover);
  text-decoration: none;
}
.fr-act_primary {
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  border-color: transparent;
  color: var(--text-white);
}
.fr-act_primary:hover {
  background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
  color: var(--text-white);
  filter: brightness(1.07);
}
.fr-act_danger { color: #b91c1c; border-color: #fecaca; }
.fr-act_danger:hover { background: #fef2f2; border-color: #fca5a5; }

/* ------------------------------------------------------------
   ИМЕНИННИКИ: три блока (сегодня / завтра / послезавтра)
   ------------------------------------------------------------ */
.fr-day { margin-bottom: 16px; }
.fr-day__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--purple-50), var(--lavender-mid));
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
}
.fr-day__ico  { font-size: 18px; line-height: 1; }
.fr-day__when { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.fr-day__date {
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--lavender-card, #fff);
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-700);
}
.fr-day__num { margin-left: auto; }
.fr-day__num b { color: var(--text-primary); }

/* ------------------------------------------------------------
   ПУСТЫЕ СОСТОЯНИЯ
   Раньше — одна строка .msg-warning (сплошная фиолетовая плашка).
   ------------------------------------------------------------ */
.fr-empty {
  text-align: center;
  padding: 26px 18px;
  margin-bottom: 12px;
  background: var(--lavender-card, #fff);
  border: 1.5px dashed var(--purple-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.fr-empty__ico   { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.fr-empty__title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.fr-empty__text  { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.fr-empty__text a { font-weight: 600; }

/* ------------------------------------------------------------
   УЗКИЙ ЭКРАН
   Вместо горизонтальной прокрутки строки раскладываются в карточки:
   аватар прижат к левому краю, данные и действия — под ним.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .fr-tablewrap { overflow-x: visible; }
  .fr-table { min-width: 0; border-spacing: 0; }
  .fr-table tbody, .fr-table tr, .fr-table td { display: block; }
  .fr-table .fr-row {
    position: relative;
    min-height: 76px;
    padding: 12px 12px 12px 88px;
    margin-bottom: 10px;
    background: var(--lavender-card, #fff);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .fr-table .fr-cell { padding: 0; background: transparent; border-radius: 0; }
  .fr-table .fr-row:hover .fr-cell { background: transparent; }
  .fr-table .fr-cell_ava {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 64px;
  }
  .fr-ava img.avatar-akk,
  .fr-ava img.avatar-akk:hover { width: 64px; height: 64px; }
  .fr-table .fr-cell_acts { width: auto; text-align: left; margin-top: 8px; }
  .fr-acts {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
  }
  .fr-act { white-space: normal; }
  .fr-day__num { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-search_load::after { animation: none; }
  .fr-act, .pchart, .fr-table .fr-cell { transition: none; }
  .fr-ava img.avatar-akk:hover { transform: none; }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ — КАРКАС САЙТА (шаг 1)
   Разметка: templates/main.tpl (таблица .main),
   templates/menu/menu-top.tpl, menu-left.tpl, menu-right.tpl.

   Что было: каркас — таблица из трёх колонок, у боковых стоит
   инлайновая ширина 194px, а верхнее меню — flex без переноса
   (.flex-container без flex-wrap, .flex-item с flex:1 0 auto).
   На экране 390px документ получался шириной 970px: страница
   уезжала в горизонтальную прокрутку, колонка контента оставалась
   472px и не сжималась.

   Здесь ячейки каркаса переводятся в блоки, порядок задаётся flex-ом
   (контент выше боковых меню), верхнее меню становится прокручиваемой
   лентой. Ниже 900px — то же для планшетов: там переполнение было 272px.
   Правила ограничены медиазапросом, вид на широких экранах не меняется.
   ============================================================ */
@media (max-width: 900px) {

  /* --- 1. Каркас: ячейки таблицы .main становятся блоками ---------
     !important нужен: ширина 194px и padding-bottom стоят в инлайне
     у <td> в main.tpl, а инлайн иначе не перебить.
     Селектор строго через > tbody > tr: внутри страниц 132 шаблона
     со своими таблицами, их трогать нельзя. tbody браузер добавляет
     сам, в исходном html его нет. */
  .main {
    margin-top: 0;
    padding: 10px;
    border-radius: 0;
    min-height: 0;
  }
  /* tbody тоже обязателен: если оставить ему table-row-group, браузер
     построит вокруг него анонимную таблицу, а она считает ширину по
     содержимому — каркас так и остаётся шириной 1049px вместо 390px */
  .main > tbody,
  .main > tbody > tr,
  .main > tbody > tr > td {
    display: block !important;
    width: auto !important;
  }
  /* у строки шапки в main.tpl инлайновая height:100px */
  .main > tbody > tr[style] { height: auto !important; }

  /* Строка с тремя колонками: контент поднимаем над боковыми меню */
  .main > tbody > tr:last-child {
    display: flex !important;
    flex-direction: column;
  }
  .main > tbody > tr:last-child > td { padding-bottom: 0 !important; }
  #contentwrapper {
    order: -1;
    padding: 0 0 14px 0 !important;
    overflow-wrap: break-word;
  }
  /* обёртка левого меню имеет инлайновый margin-left:-8px — компенсируем */
  #leftcolumn { margin-left: 8px; }
  #leftcolumn, #rightcolumn { width: auto; }

  /* --- 2. Шапка --------------------------------------------------- */
  #header {
    height: auto !important;
    text-align: center;
  }
  #header .header-logo__img img {
    height: 48px !important;
    margin: 6px 0 0 0 !important;
  }
  /* Баннер 468×60 в шапке шире телефона — даём ему прокрутку внутри
     своего блока, чтобы он не растягивал всю страницу */
  #baner-serf {
    margin-top: 6px !important;
    max-width: 100%;
    overflow-x: auto;
  }
  #baner-serf img { max-width: none; height: auto; }

  /* --- 3. Верхнее меню: лента с горизонтальной прокруткой ---------
     Переносом строк 12 пунктов дают четыре ряда и 240px высоты,
     поэтому лента: высота одной строки, листается пальцем. */
  #top-menu { height: auto !important; }
  .main-navigation .flex-container {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .main-navigation .flex-container::-webkit-scrollbar { height: 0; width: 0; }
  .main-navigation__link { white-space: nowrap; }

  /* --- 4. Строка рекламных ссылок под меню ------------------------ */
  .td-chain {
    white-space: normal !important;
    text-align: center;
  }

  /* --- 5. Плавающие ярлыки «онлайн» и «ЧАТ» -----------------------
     На широком экране это вертикальные закладки у правого края
     (position:fixed, right:-21px, rotate(270deg)). На телефоне они
     ложатся поверх контента, поэтому разворачиваем и убираем
     в правый нижний угол. */
  .on_line,
  .go2_ajaxchat {
    transform: none !important;
    right: 10px !important;
    top: auto !important;
    border-bottom: 2px solid var(--purple-400) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: var(--shadow-md);
    opacity: 0.96;
  }
  .on_line     { bottom: 58px !important; }
  .go2_ajaxchat { bottom: 14px !important; }

  /* --- 6. Страховка от вылета за экран ----------------------------
     Специально низкая специфичность (.main img, а не #contentwrapper img):
     правила страниц с точными размерами картинок должны оставаться сильнее. */
  .main img,
  .main iframe,
  .main embed,
  .main video,
  .main object { max-width: 100%; }
  .main pre { overflow-x: auto; }

  /* Карточки .work-serf и таблицы .table имеют width:100%, а box-sizing
     глобально не переопределён: как только у блока появляется padding
     или рамка, он вылезает за родителя на их сумму (та же причина, по
     которой .usr-card в левом меню пришлось переводить на border-box).
     На узких экранах это стоит нескольких десятков пикселей прокрутки. */
  .main .work-serf,
  .main .table { box-sizing: border-box; }
}

@media (max-width: 600px) {
  .main { padding: 6px; }
  /* Боковые меню под контентом: заголовки секций чуть плотнее */
  #leftcolumn .usermnutitle-g,
  #leftcolumn .usermnutitle-z { padding: 8px 0 8px 12px; }
  #header .header-logo__img img { height: 42px !important; }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ — ШАГ 1.1: блоки за пределами каркаса
   Найдено на живой копии test.paymer.fun при замерах в браузере.
   Правила каркаса (.main ...) до этих блоков не достают: подвал,
   cookie-баннер, виджет Google Translate и баннер в шапке лежат
   вне таблицы .main либо позиционированы фиксированно.
   ============================================================ */
@media (max-width: 900px) {

  /* Баннер 468×60 в шапке шире любого телефона (плюс рамка .ad-frame — 486px).
     Обрезать его нельзя: в шаблоне есть отдельный блок <style> с
     #baner-serf{height:auto !important;overflow:visible !important}, снятый
     специально, чтобы не срезалась надпись РЕКЛАМА и иконки под баннером.
     Поэтому прокрутку берёт на себя сама ячейка шапки: баннер виден целиком,
     страница по ширине не растёт. */
  #header {
    overflow-x: auto;
    overflow-y: hidden;
  }
  #baner-serf {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 6px 0 0 0 !important;
  }

  /* Подвал: у .footer__container ширина задаётся без border-box,
     поэтому падинги добавляются к 100% и дают прокрутку
     (на 768px замер показывал 800px при экране 768). */
  .footer__container,
  .foot-center,
  .footer__container * { box-sizing: border-box; }
  .footer__container { max-width: 100% !important; }

  /* Cookie-баннер: position: fixed с width: 457px — шире экрана. */
  #cookie-consent {
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    box-sizing: border-box;
  }

  /* Виджет Google Translate вставляет свой iframe шириной под
     содержимое страницы. */
  .skiptranslate,
  .skiptranslate iframe,
  iframe.goog-te-banner-frame,
  #goog-gt-tt { max-width: 100% !important; }

  /* Полоса языков в шапке — выпадающий список уезжал правым краем */
  .block_language,
  .block_language .dropdown-toggle { max-width: 100%; }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ — ШАГ 2: МЕНЮ РАЗДЕЛОВ И СТРАНИЦЫ
   Разметка: templates/menu/menu-left.tpl (личное меню, #leftcolumn),
   menu-top.tpl (публичные разделы, лента), main.tpl (каркас).
   Скрипт: statica/js/site_main.js — funcjs['mobile-nav'] и
   funcjs['mobile-fit'] (кнопка, затемнение, обёртки таблиц).

   Личное меню на телефоне уезжало под контент простынёй на 4 секции.
   Здесь #leftcolumn становится выезжающей панелью: сам элемент остаётся
   на месте в DOM — это важно, потому что load_site() при переходах
   меняет только его содержимое, а обработчики секций навешены
   делегированием на #leftcolumn. Ни клонов, ни переносов узлов.
   ============================================================ */
@media (max-width: 900px) {

  /* --- 1. Кнопка меню -------------------------------------------- */
  /* Кнопка внизу слева — под большим пальцем. z-index выше 99999:
     столько стоит у #cookie-consent, а он на телефоне занимает всю
     нижнюю полосу (проверено elementFromPoint — клик уходил баннеру).
     Сверху занято тоже: там висит панель Google Translate. */
  .m-nav-btn {
    position: fixed;
    z-index: 100000;
    left: 10px;
    bottom: 14px;
    width: 52px;
    height: 52px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--nav-bg);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
  }
  .m-nav-btn span {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 2px;
    background: #fff;
    transition: var(--transition-fast);
  }
  .m-nav-btn:active { filter: brightness(1.1); }
  /* Крестик из тех же трёх полосок, когда панель открыта */
  .m-nav-open .m-nav-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .m-nav-open .m-nav-btn span:nth-child(2) { opacity: 0; }
  .m-nav-open .m-nav-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* --- 2. Затемнение --------------------------------------------- */
  .m-nav-back {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(45, 27, 105, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .m-nav-open .m-nav-back { opacity: 1; visibility: visible; }

  /* --- 3. Сама панель --------------------------------------------
     Позиционируется #leftcolumn — тот самый элемент, который
     load_site() переписывает изнутри, но не удаляет. */
  #leftcolumn {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    bottom: 0;
    /* 80%, а не во весь экран: полоса справа остаётся тапабельной
       для закрытия по затемнению */
    width: 80%;
    max-width: 300px;
    margin: 0 !important;
    padding: 12px 10px 90px;
    box-sizing: border-box;
    background: var(--lavender-card, #fff);
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(-102%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .m-nav-open #leftcolumn { transform: translateX(0); }
  /* Обёртка левого меню в шаблоне имеет инлайновую тень и отрицательный
     margin — в панели они не нужны */
  #leftcolumn > div[id],
  #leftcolumn > div { margin-left: 0 !important; }
  /* Ячейка, в которой панель лежала, больше не занимает места */
  .main > tbody > tr:last-child > td:first-child { padding: 0 !important; }
  /* Пока панель открыта — страница под ней не прокручивается */
  .m-nav-open { overflow: hidden; }

  /* Заголовки секций в панели — плотнее и с указателем раскрытия */
  #leftcolumn .usermnutitle-g,
  #leftcolumn .usermnutitle-z {
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    padding: 11px 12px;
  }
  #leftcolumn .user_menuline { padding: 9px 0 9px 12px; }

  /* --- 4. Верхнее меню: подсказка, что лента листается ------------ */
  #top-menu { position: relative; }
  #top-menu::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.92));
  }

  /* --- 5. Длинный хвост страниц ----------------------------------
     Обёртки .m-scrollwrap ставит funcjs['mobile-fit'] — только тем
     таблицам, которые реально шире экрана. */
  .m-scrollwrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
  }
  .m-scrollwrap > table { margin-bottom: 0; }

  /* Поля ввода с атрибутами size/cols шире экрана */
  #contentwrapper input:not([type="checkbox"]):not([type="radio"]),
  #contentwrapper select,
  #contentwrapper textarea { max-width: 100%; }

  /* Всплывающие окна: popup_w() ставит инлайновую ширину до 700px,
     а в теме у #popup ещё и min-width: 400px */
  #popup {
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    max-height: 88vh;
  }
  #popup .text-popup { max-height: 68vh; }
  #popup .title-popup { line-height: 1.35; padding: 10px 12px; }

  /* Длинные ссылки и слова в контенте */
  #contentwrapper a, #contentwrapper td { overflow-wrap: break-word; }
}

/* Кнопка и затемнение существуют только на узких экранах */
@media (min-width: 901px) {
  .m-nav-btn, .m-nav-back { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #leftcolumn, .m-nav-back, .m-nav-btn span { transition: none; }
}