/* jBK - новый вид игры, вариант D2 «Холодный КК» (docs/design/README.md, раздел v4: D «Современный КК» + уточнение D2;
   макеты - mock_design/refresh4d.css + refresh4d2.css, снимки - docs/design/d2/).
   Как включается: engline/functions/class_UiView.php печатает ссылку на этот файл и класс rf у <html> только игрокам с новым видом
   (Настройки -> «Вид игры», по умолчанию - $config['ui'] / админка «Настройки игры» -> «Внешний вид»). Все правила - под html.rf:
   без класса файл ничего не делает. Классический вид не меняется.
   Раскладка, кукла, картинки, кадры, фон кадра #DEDEDE - прежние (как на КК сегодня). Цвета - только палитра D2 ниже
   и цвета кнопок КК (.btn_grey, .btn-success, .btn-danger); шрифты - прежние системные (Verdana), веб-шрифтов нет.
   Разметка, которую использует вид, выдаётся сервером всегда и в классическом виде выглядит как раньше:
     карточка вещи (Equip::showItem) - td.it-desc, span.it-name, b.it-price, b.it-sec, span.it-dot «•», span.it-req.ok|.bad;
     характеристики в инвентаре (Char::statRow) - span.st-row > span.st-k + span.st-v;
     главное действие («Вперёд!!!», «Подать заявку») - класс btn-main. */

/* ---------- палитра D2 ---------- */
html.rf {
  --rf-panel: #E0E0E2;     /* шапки, вкладки, ячейка картинки (как КК) */
  --rf-panel-2: #E6E6E8;   /* верх градиента ячейки картинки */
  --rf-panel-3: #DCDCDF;   /* низ градиента ячейки картинки */
  --rf-line: #D0D0D5;      /* разделители и рамки (холодные) */
  --rf-card: #F2F0EC;      /* карточки и блоки - «кость», не белые */
  --rf-card-2: #E9E8E5;    /* планка названия вещи, шапки внутри карточек */
  --rf-row: #E4E2DD;       /* строки внутри блока */
  --rf-hover: #EBE9E4;     /* строка под мышью */
  --rf-input: #FAF9F7;     /* поля ввода */
  --rf-title: #3A404A;     /* заголовки разделов (сине-серый графит) */
  --rf-mark: #0088CC;      /* метка активной вкладки (синий КК) */
  --rf-text: #222222;
  --rf-btn-top: #F7F7F7;   /* кнопки .btn_grey КК */
  --rf-btn: #E5E5E5;
  --rf-btn-edge: #EFEFEF;
  --rf-btn-bd: #D8D8D8;
  --rf-btn-tx: #494949;
  --rf-btn-hover: #ECECEC;
  --rf-field-bd: #B0B0B0;  /* рамка поля (.btn_white КК) */
  --rf-ok-1: #62C462;      /* главное действие .btn-success КК, ✓ */
  --rf-ok-2: #51A351;
  --rf-bad-1: #EE5F5B;     /* .btn-danger КК, ✗ */
  --rf-bad-2: #BD362F;
  --rf-hint: #FFF6DD;      /* плашка цены и подсказки */
  --rf-shadow: 0 1px 3px rgba(30,36,48,.16);
  --rf-inner: inset 0 0 0 1px rgba(255,255,255,.75);
  --rf-font: Verdana, Arial, Helvetica, Tahoma, sans-serif;
}

/* ---------- кнопки: .btn_grey КК - плоская серая, светлая кромка сверху ----------
   все кнопки страницы, кроме спрайтов строки чата (.cb) и вкладок мобильной оболочки (#mb-tabs, свой вид) */
html.rf :where(input[type=button], input[type=submit], input[type=reset], button):where(:not(#mb-tabs *, .mb-grid > *, .cb, .mb-send *, .mb-bbar *, .mb-zones *, .mb-dg-pad *)) {
  box-sizing: border-box; min-height: 24px; padding: 2px 10px; vertical-align: middle;
  font: 11px/1.2 var(--rf-font); color: var(--rf-btn-tx); text-shadow: none;
  background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border: 1px solid var(--rf-btn-bd); border-top-color: var(--rf-btn-edge);
  border-radius: 0; box-shadow: none;
}
html.rf :where(input[type=button], input[type=submit], input[type=reset], button):where(:not(#mb-tabs *, .mb-grid > *, .cb, .mb-send *, .mb-bbar *, .mb-zones *, .mb-dg-pad *)):hover {
  background: linear-gradient(#FFFFFF, var(--rf-btn-hover)); color: var(--rf-text); border-color: var(--rf-btn-bd);
}
html.rf :where(input[type=button], input[type=submit], input[type=reset], button):where(:not(#mb-tabs *, .mb-grid > *, .cb, .mb-send *, .mb-bbar *, .mb-zones *, .mb-dg-pad *)):active {
  border-top-color: var(--rf-btn-bd); border-bottom-color: var(--rf-btn-edge); box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
html.rf :where(input[type=button], input[type=submit], button)[disabled],
html.rf :where(input[type=button], input[type=submit], button)[disabled]:hover {color: #8A8A8A; background: var(--rf-btn); border-color: var(--rf-btn-bd); box-shadow: none; opacity: .7; cursor: default;}
/* главное действие - .btn-success КК: «Вперёд!!!», «Подать заявку» */
html.rf .btn-main, html.rf .btn-main:hover {
  min-width: 110px; min-height: 26px; padding: 3px 14px; font-weight: bold; color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  background: linear-gradient(var(--rf-ok-1), var(--rf-ok-2)); border: 1px solid; border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
  border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
html.rf .btn-main:hover {background: var(--rf-ok-2); color: #FFFFFF;}
html.rf .btn-main:active {box-shadow: inset 0 2px 4px rgba(0,0,0,.15);}
html.rf .kk-btn-primary {color: var(--rf-btn-tx); font-weight: bold; border-radius: 0;}
html.rf .kk-btn, html.rf .kk-btn-dark, html.rf .ks-btn, html.rf .wm-btn {
  color: var(--rf-btn-tx); background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border: 1px solid var(--rf-btn-bd); border-top-color: var(--rf-btn-edge); border-radius: 0;
}
html.rf .kk-btn:hover, html.rf .kk-btn-dark:hover {background: linear-gradient(#FFFFFF, var(--rf-btn-hover)); color: var(--rf-text);}

/* поля ввода: светлые, рамка .btn_white КК */
html.rf :is(input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea):where(:not(#text)) {
  box-sizing: border-box; border: 1px solid var(--rf-field-bd); border-radius: 2px; background-color: var(--rf-input); color: var(--rf-text);
}
html.rf :is(input[type=text], input[type=password], input[type=number], select):where(:not(#text)) {min-height: 22px;}
html.rf :is(input[type=text], input[type=password], input[type=number], textarea):focus {outline: 0; border-color: var(--rf-mark); background-color: #FFFFFF;}
html.rf fieldset {margin: 6px 0; padding: 6px 10px 8px; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner);}
html.rf legend {padding: 0 4px; color: var(--rf-title);}
html.rf legend b {color: var(--rf-title);}

/* ---------- вкладки: светлые, активная - цвета карточки с синей меткой сверху ---------- */
html.rf td.m, html.rf td.s {padding: 5px 4px; background: var(--rf-panel); border: 1px solid var(--rf-line);}
html.rf td.m:hover {background: var(--rf-card-2);}
html.rf td.s {background: var(--rf-card); border-bottom-color: var(--rf-card); box-shadow: inset 0 2px 0 var(--rf-mark);}
html.rf td.s a {color: var(--rf-text);}
html.rf .kk-tabs {border-bottom-color: var(--rf-line);}
html.rf .kk-tabs a, html.rf .kk-tabs a:visited {background: var(--rf-panel); border-color: var(--rf-line);}
html.rf .kk-tabs a:hover {background: var(--rf-card-2);}
html.rf .kk-tabs a.on, html.rf .kk-tabs a.on:hover {background: var(--rf-card); border-bottom-color: var(--rf-card); box-shadow: inset 0 2px 0 var(--rf-mark);}

/* таблицы-списки kk-table */
html.rf .kk-table {border-color: var(--rf-line);}
html.rf .kk-table th {background: var(--rf-panel); color: var(--rf-title);}
html.rf .kk-table td {background: var(--rf-card); border-bottom: 1px solid var(--rf-row);}
html.rf .kk-table tr:nth-child(even) td {background: var(--rf-card-2);}

/* окна kk-win (диалоги kkConfirm / kkPrompt) - карточка D2 */
html.rf .kk-win {background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 4px; box-shadow: 0 4px 16px rgba(30,36,48,.28), var(--rf-inner);}
html.rf .kk-win-t {background: var(--rf-panel); border-bottom: 1px solid var(--rf-line); color: var(--rf-title); border-radius: 4px 4px 0 0;}
html.rf .kk-win-x {color: var(--rf-btn-tx);}
html.rf .kk-win-x:hover {color: var(--rf-bad-2);}
html.rf .kk-shade {background: rgba(30,36,48,.25);}
html.rf .kk-hint, html.rf #mmoves {border-radius: 5px; box-shadow: 0 0 1px #888;}

/* ---------- персонаж: блоки характеристик - шапка #E0E0E2, тело карточкой, строки «название … значение» ---------- */
html.rf :is(#bar_stat, #bar_mod, #bar_power, #bar_def, #bar_set, #bar_btn) > table {margin-top: 4px; background: var(--rf-panel); border: 1px solid var(--rf-line);}
html.rf :is(#bar_stat, #bar_mod, #bar_power, #bar_def, #bar_set, #bar_btn) > table td[bgcolor] {background: transparent;}
html.rf :is(#bar_stat, #bar_mod, #bar_power, #bar_def, #bar_set, #bar_btn) > table b {color: var(--rf-title);}
html.rf :is(#statc, #modc, #powerc, #defc, #setc, #btnc) {padding: 2px 0 4px; background: var(--rf-card); border: 1px solid var(--rf-line); border-top: 0; box-shadow: var(--rf-inner);}
html.rf :is(#statc, #modc, #powerc, #defc) > small {display: block;}
html.rf .st-row {display: flex; justify-content: space-between; align-items: baseline; gap: 6px; max-width: 420px; padding: 2px 6px; border-bottom: 1px solid var(--rf-row);}
html.rf .st-row + br {display: none;}
html.rf .st-v {font-weight: bold; white-space: nowrap; text-align: right;}
html.rf :is(#statc, #modc, #powerc, #defc) a.nick {display: inline-block; margin: 3px 0 0 6px;}

/* вкладки рюкзака и шапка «Рюкзак (масса…)» */
html.rf table.inv-tabs {background: var(--rf-panel); border: 1px solid var(--rf-line);}
html.rf table.inv-tabs td {background: var(--rf-panel); border-right: 1px solid var(--rf-line); padding: 6px 4px;}
html.rf table.inv-tabs td:not([bgcolor="#a5a5a5" i]):hover {background: var(--rf-card-2);}
html.rf table.inv-tabs td[bgcolor="#a5a5a5" i] {background: var(--rf-card); box-shadow: inset 0 2px 0 var(--rf-mark);}
html.rf table.inv-tabs td[bgcolor="#a5a5a5" i] a {color: var(--rf-text);}
html.rf .inv-packh {background: var(--rf-panel) !important; border: 1px solid var(--rf-line); border-top: 0; padding: 5px 8px;}   /* !important - перебить инлайн-фон #a5a5a5 */
html.rf .inv-search #inv_search {background: var(--rf-input); border-color: var(--rf-field-bd); border-radius: 2px;}
html.rf .inv-found {background: var(--rf-card-2); border: 1px solid var(--rf-line);}

/* ---------- карточка вещи (рюкзак, магазины, комок, почта, передачи, карточка предмета) ----------
   «кость» с холодной тенью, ячейка картинки #E0E0E2, картинка по центру, планка названия, цена на плашке #FFF6DD,
   требования: ✓ (выполнено, сверху) / ✗ (не хватает) цветами кнопок КК */
html.rf :is(div[name^="item_entry"], div.it-info) {margin: 0 0 8px;}
html.rf :is(div[name^="item_entry"], div.it-info) > table {margin: 0 !important; border-spacing: 0; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner); overflow: hidden;}
html.rf :is(div[name^="item_entry"], div.it-info) > table > tbody > tr[bgcolor] {background: transparent;}
html.rf :is(div[name^="item_entry"], div.it-info) td.it-cell {vertical-align: middle; text-align: center; padding: 10px 8px; background: linear-gradient(var(--rf-panel-2), var(--rf-panel-3)); border-right: 1px solid var(--rf-line);}
html.rf :is(div[name^="item_entry"], div.it-info) td.it-cell > img:first-child {padding: 3px; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 3px; box-shadow: inset 0 0 0 1px #FFFFFF;}
html.rf .it-acts a.nick {background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border: 1px solid var(--rf-btn-bd); border-top-color: var(--rf-btn-edge); border-radius: 0; color: var(--rf-btn-tx);}
html.rf .it-acts a.nick:hover {background: linear-gradient(#FFFFFF, var(--rf-btn-hover)); color: var(--rf-text);}
/* рюкзак: кнопки действий - ровной колонкой одной ширины; значки «в панель быстрого доступа» и «выбросить» - в правом верхнем углу ячейки
   картинки (классика: по бокам первой кнопки, колонка из-за них выглядела кривой). Телефон (mb-main) - свои правила mobile.css */
html.rf:not(.mb-main) .it-acts {gap: 4px;}
html.rf:not(.mb-main) .it-row {position: static;}
html.rf:not(.mb-main) .it-row > a.it-drop {left: auto; right: 3px; top: 3px; transform: none; margin: 0;}
html.rf:not(.mb-main) .it-row > a.it-fp {left: auto; right: 23px; top: 2px; transform: none; margin: 0;}
html.rf:not(.mb-main) .it-row > a.it-fp:last-child {right: 3px;}
html.rf td.it-desc {padding: 0 12px 8px !important; line-height: 1.45;}   /* !important - перебить инлайн padding: 2px карточки */
html.rf .it-name {display: block; margin: 0 -12px 4px; padding: 6px 12px; background: var(--rf-card-2); border-bottom: 1px solid var(--rf-line);}
html.rf .it-name + br {display: none;}
html.rf .it-price {display: inline-block; margin: 2px 0; padding: 1px 8px; background: var(--rf-hint); border-radius: 5px; box-shadow: 0 0 1px #888;}
html.rf .it-sec {display: block; margin: 8px 0 3px; padding-bottom: 2px; border-bottom: 1px solid var(--rf-line); color: var(--rf-title);}
html.rf .it-sec + br {display: none;}
html.rf .it-desc .it-dot {display: inline-block; width: 14px; margin-left: 10px; color: #888888;}
html.rf .it-req .it-dot {font-size: 0;}
html.rf .it-req .it-dot::before {content: '•'; font-size: 13px;}
html.rf .it-req.ok .it-dot::before {content: '\2713'; font-weight: bold; color: var(--rf-ok-2);}
html.rf .it-req.bad .it-dot::before {content: '\2717'; font-weight: bold; color: var(--rf-bad-2);}
html.rf .it-req.bad font[color] {color: var(--rf-bad-2);}

/* ---------- бой: панель зон - карточка, «Атака / Защита» на #E0E0E2, «Вперёд!!!» - зелёная ---------- */
html.rf #moveform {display: block; width: max-content; margin: 2px auto 0 !important; padding: 0 0 6px; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner);}   /* !important - инлайн margin: 0 формы */
html.rf #moveform.mf-end {background: none; border: 0; box-shadow: none;}   /* бой закончен: рамки блока ударов нет, на его месте картинка боя */
html.rf #moveform td[bgcolor="#a7a7a7" i] {background: var(--rf-panel); padding: 4px 0; border-bottom: 1px solid var(--rf-line); color: var(--rf-title);}
html.rf #moveform td[bgcolor="#a7a7a7" i] div[style*="color: #A7A7A7" i] {color: transparent !important;}   /* «тень» надписи на сером фоне КК */
html.rf #moveform table td {background-color: transparent;}
html.rf #mainpanel {border-spacing: 0;}
html.rf #mainpanel td {padding: 3px 4px; border-bottom: 1px solid var(--rf-row);}
html.rf #mainpanel tr:hover td {background: var(--rf-hover);}
html.rf .zoneCh_yes {background-color: var(--rf-panel);}
html.rf #battle_logg {padding: 6px 10px; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 4px; line-height: 1.45; box-shadow: var(--rf-shadow), var(--rf-inner);}
html.rf #battle_logg .logline {display: block; padding: 1px 0; border-bottom: 1px solid var(--rf-row);}
html.rf #battle_logg .logline > br {display: none;}
html.rf .btn-on {background: var(--rf-card); box-shadow: inset 0 2px 0 var(--rf-mark);}
html.rf #tpick {background: var(--rf-card); border-color: var(--rf-line); border-radius: 4px; box-shadow: 0 4px 16px rgba(30,36,48,.28);}
html.rf #tpick .tp_head {background: var(--rf-panel); color: var(--rf-title); border-bottom: 1px solid var(--rf-line);}
html.rf #tpick .tp_row {border-bottom-color: var(--rf-row);}
html.rf #tpick .tp_row:hover, html.rf #tpick .tp_row.on {background: var(--rf-hover);}

/* ---------- чат (msg.php), онлайн (users.php), строка чата (talk.php) ---------- */
html.rf #chtabs .zbtn1c {background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border-color: var(--rf-btn-bd); border-radius: 0;}
html.rf #chtabs .zbtn1c:hover {background: linear-gradient(#FFFFFF, var(--rf-btn-hover));}
html.rf #chtabs .zbtn2c {border-radius: 0; border-color: var(--rf-btn-bd); box-shadow: inset 0 2px 0 var(--rf-mark);}
html.rf #chtabs a.but-cd {background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border-color: var(--rf-btn-bd); border-radius: 0;}
html.rf #mes .cm {line-height: 1.4;}
html.rf div.menu {background-color: var(--rf-card); border: 1px solid var(--rf-line); box-shadow: var(--rf-shadow);}
html.rf a.menuItem:hover {background-color: var(--rf-panel);}
html.rf .nm_sep {background-color: var(--rf-line); border-bottom-color: #FFFFFF;}
html.rf .nm_note, html.rf .chconfig, html.rf .bbtasks {background-color: var(--rf-card); border-color: var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow);}
html.rf .bb_ttl {background-color: var(--rf-hint); border-color: var(--rf-line); box-shadow: 0 0 1px #888; border-radius: 5px;}

/* ---------- окна кнопок нижней панели (bbpop: Друзья, Премиум, Блокнот, Задания...) - палитра D2 вместо бежевой ---------- */
html.rf #bbpop {background: rgba(30,36,48,.35);}
html.rf #bbpop .bbwin {background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 4px; box-shadow: 0 6px 24px rgba(30,36,48,.35), var(--rf-inner);}
html.rf #bbpop .bbwin_h {background: var(--rf-panel); border-bottom: 1px solid var(--rf-line); border-radius: 4px 4px 0 0; box-shadow: inset 0 -2px 0 var(--rf-mark);}
html.rf #bbpop .bbwin_t {color: var(--rf-title);}
html.rf #bbpop .bbwin a.bbwin_x {color: var(--rf-btn-tx);}
html.rf #bbpop .bbwin a.bbwin_x:hover {color: var(--rf-bad-2); background: var(--rf-card);}
html.rf #bbpop .bbwin_b {background: var(--rf-card);}
html.rf #bbpop .bbwin fieldset, html.rf .fr_form {background: var(--rf-card-2); border-color: var(--rf-line);}
html.rf #bbpop .bbwin input[type=button] {color: var(--rf-btn-tx); background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border: 1px solid var(--rf-btn-bd); border-top-color: var(--rf-btn-edge); border-radius: 0;}
html.rf #bbpop .bbwin input[type=button]:hover {background: linear-gradient(#FFFFFF, var(--rf-btn-hover)); color: var(--rf-text);}
html.rf #bbpop .bbwin :is(input[type=text], select, textarea) {background: var(--rf-input); border-color: var(--rf-field-bd);}
html.rf .bbwin .tq_h {color: var(--rf-title); border-bottom-color: var(--rf-line);}
html.rf .bbwin .tq {background-color: var(--rf-card); border-color: var(--rf-line);}
html.rf .bbwin .tq td {border-bottom-color: var(--rf-row);}
html.rf .bbwin .tq tr:nth-child(even) td {background-color: var(--rf-card-2);}
html.rf .bbwin .tq_q {background-color: var(--rf-card-2); border-color: var(--rf-line);}
html.rf .fb_note {border-left-color: var(--rf-mark); background-color: var(--rf-card-2);}

/* ---------- комната / ЦП (module/char_map.php, module/club.php, улицы): характеристики персонажа - карточка рядами,
   описание комнаты - карточка, разделитель - линия D2 ---------- */
/* панель персонажа в комнате (module/char_map.php) - как в классике: строки «Сила: 3» без карточки и рядов (владелец 13.10.2026: в новом виде смотрелось плохо) */
html.rf td.cm-info .st-row {display: inline; max-width: none; padding: 0; border: 0; background: none;}
html.rf td.cm-info .st-row + br {display: inline;}
html.rf td.cm-info .st-v {font-weight: bold; text-align: left;}
html.rf .discrp {margin: 4px 0; padding: 6px 10px; text-align: left; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner);}
html.rf hr {height: 0; border: 0; border-top: 1px solid var(--rf-line);}

/* кадр чата и список онлайн: фон - карточка D2 (был #F2F0F0 и розоватый #FAF2F2), полоса между ними - линиями D2 */
html.rf body[bgcolor="#f2f0f0" i] {background-color: var(--rf-card);}
html.rf #chtabs .xbtn, html.rf #chtabs .xbtn_e {background-color: var(--rf-card); border-bottom-color: var(--rf-line);}
html.rf #chtabs .zbtn2c {background: var(--rf-card); border-bottom-color: var(--rf-card);}
html.rf body.users {background-color: var(--rf-card);}
html.rf:not(.mb) body.users {background: var(--rf-card) linear-gradient(to right, var(--rf-line) 1px, var(--rf-panel) 1px, var(--rf-panel) 2px, var(--rf-line) 2px) 0 0 / 3px 100% repeat-y fixed;}
html.rf body.users input.nav {color: var(--rf-btn-tx); background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border: 1px solid var(--rf-btn-bd); border-top-color: var(--rf-btn-edge);}

/* ---------- анкета (info.php): рамка, логотип и вкладки - прежние картинки ---------- */
html.rf table.align0 td.middlecenterarea {background-color: var(--rf-panel);}
/* характеристики анкеты - как в классике: строки «Сила: 54 (27 + 27)» без карточки (владелец 18.10.2026, как и панель в комнате) */
html.rf td.inf-stats .st-row {display: inline; max-width: none; padding: 0; border: 0; background: none;}
html.rf td.inf-stats .st-row + br {display: inline;}
html.rf td.inf-stats .st-v {font-weight: bold; text-align: left;}
html.rf h3.anketa-h {color: var(--rf-title); border-bottom: 1px solid var(--rf-line); padding-bottom: 4px;}
html.rf .cf-body, html.rf .cf-rep {background: var(--rf-card); border-color: var(--rf-line);}
html.rf .gifin {background-color: var(--rf-hint); border-color: var(--rf-line); border-radius: 5px; box-shadow: 0 0 1px #888;}

/* ---------- информация о клане (clan_inf.php): лист - карточка, таблицы и линии - палитра D2 ---------- */
html.rf .cx-page {background-color: var(--rf-panel) !important;}   /* !important - инлайн фон body */
html.rf .cx table.cx-t {background: var(--rf-card);}
html.rf .cx table.cx-t th, html.rf .cx table.cx-t td {border-color: var(--rf-line);}
html.rf .cx table.cx-t th {background: var(--rf-panel); color: var(--rf-title);}
html.rf .cx h3.cx-h, html.rf .cx hr.cx-hr {border-color: var(--rf-line);}
html.rf .cl-card {max-width: 820px; margin: 0 0 10px; padding: 8px 14px 10px; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner);}
html.rf .cl-card > br:first-child {display: none;}
html.rf .cl-card h3 {margin: 4px 0 8px; color: var(--rf-title);}

/* ---------- форум (forum/index.php): бежевый лист КК -> карточки D2; шапка и подвал сайта - прежние картинки ---------- */
html.rf .fr-page {background: var(--rf-panel); border-left: 1px solid var(--rf-line); border-right: 1px solid var(--rf-line);}
html.rf .fr h1, html.rf .fr h2, html.rf .fr-navbox summary, html.rf .fr-newbox > summary {color: var(--rf-title);}
html.rf .fr-muted, html.rf .fr-note, html.rf .fr-tauth, html.rf .fr-dt, html.rf .fr-pe, html.rf .fr-qa {color: #606060;}
html.rf .fr-user {border-bottom-color: var(--rf-line);}
html.rf .fr-navbox {background: var(--rf-card); border-color: var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner);}
html.rf .fr-navbox li a.fr-on {background: var(--rf-card-2); color: var(--rf-text); box-shadow: inset 2px 0 0 var(--rf-mark);}
html.rf .fr-navfoot {border-top-color: var(--rf-line);}
html.rf .fr-crumbs span {color: var(--rf-title);}
html.rf .fr-crumbs .fr-sep {color: #888888;}
html.rf .fr-list {background: var(--rf-card); border-color: var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner); overflow: hidden;}
html.rf .fr-lh {background: var(--rf-panel); color: var(--rf-title); border-bottom: 1px solid var(--rf-line);}
html.rf .fr-row {border-top-color: var(--rf-row);}
html.rf .fr-row:nth-child(odd) {background: var(--rf-card-2);}
html.rf .fr-row.fr-pinned {background: var(--rf-hint);}
html.rf .fr-sdesc {color: var(--rf-title);}
html.rf .fr-sdtop, html.rf .fr-q {background: var(--rf-card); border-left-color: var(--rf-mark);}
html.rf .fr-q {color: var(--rf-title);}
html.rf .fr-badge {background: var(--rf-panel); color: var(--rf-title);}
html.rf .fr-bclosed {background: #606060; color: #FFFFFF;}
html.rf .fr-pages a, html.rf .fr-pages b {background: var(--rf-card); border-color: var(--rf-line);}
html.rf .fr-pages b {background: var(--rf-mark); border-color: var(--rf-mark); color: #FFFFFF;}
html.rf .fr-gap {color: #888888;}
html.rf .fr-post {background: var(--rf-card); border-color: var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner); overflow: hidden;}
html.rf .fr-ph {background: var(--rf-card-2); border-bottom-color: var(--rf-line);}
html.rf .fr-pa {border-top-color: var(--rf-row);}
html.rf .fr-mod {background: var(--rf-hint); border-color: var(--rf-line);}
html.rf .fr-form, html.rf .fr-nopost {background: var(--rf-card); border-color: var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner);}
html.rf .fr-nopost {color: #606060;}
html.rf .fr-smlist {background: var(--rf-input); border-color: var(--rf-line);}
html.rf .fr-smtable div {background: var(--rf-card-2);}
html.rf .fr button.fr-lnk, html.rf .fr button.fr-lnk:hover {min-height: 0; padding: 0; border: 0; background: none; color: #003388; font: inherit; font-size: 12px;}

/* ---------- мобильная версия (abk_view=m: engline/mobile_shell.php, scripts/mobile.js, styles/mobile.css) ----------
   раскладка и размеры под палец - прежние (mobile.css), здесь только палитра D2 */
/* оболочка: вкладки внизу - прежняя тёмная полоса, метка активной - синяя КК; меню - кнопки .btn_grey */
html.rf.mb-shell .mb-panel {background: var(--rf-card);}
html.rf.mb-shell #mb-tabs button[aria-selected=true] {box-shadow: inset 0 3px 0 var(--rf-mark);}
html.rf.mb-shell #mb-tabs button[aria-selected=true] .mb-ico {color: #FFFFFF;}
html.rf.mb-shell #mb-menu h3 {color: var(--rf-title);}
html.rf.mb-shell .mb-grid button, html.rf.mb-shell .mb-grid a {background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border-color: var(--rf-btn-bd); border-top-color: var(--rf-btn-edge); color: #003388;}
html.rf.mb-shell .mb-grid button:active, html.rf.mb-shell .mb-grid a:active {background: var(--rf-btn);}
html.rf.mb-shell .mb-note {background: var(--rf-hint); border-color: var(--rf-line);}
/* кадры игры */
html.rf.mb-main .mb-card, html.rf.mb-main .mb-bars > div[id^=bar_], html.rf.mb-main .mb-dg-sec {background: var(--rf-card); border-color: var(--rf-line); border-radius: 4px; box-shadow: var(--rf-shadow), var(--rf-inner);}
html.rf.mb-main .mb-card-h, html.rf.mb-main .mb-bars > div[id^=bar_] > table {background: var(--rf-panel) !important; border-bottom: 1px solid var(--rf-line);}   /* !important - как в mobile.css */
html.rf.mb-main .mb-card-h {color: var(--rf-title);}
html.rf.mb-main table.mb-kv td, html.rf.mb-main table.mb-kv th {border-bottom-color: var(--rf-row);}
html.rf.mb-main table.mb-kv tr:nth-child(even) {background: var(--rf-card-2);}
html.rf.mb-main .mb-bars .st-row {max-width: none; padding: 5px 10px;}
html.rf.mb-main :is(.mb-btns input, .mb-btnrow > input) {border-radius: 4px;}
html.rf.mb-main table.mb-wrap > tbody > tr > td, html.rf.mb-main table.mb-tabs > tbody > tr > td {border-color: var(--rf-line);}
html.rf.mb-main table.inv-tabs td {border-right-color: var(--rf-line);}
html.rf.mb-main .mb-scroll {border-right-color: var(--rf-line);}
html.rf.mb-main .mb-dg-exit {background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border-color: var(--rf-btn-bd);}
html.rf.mb-main .mb-dg-pad button:not(.mb-dg-atk), html.rf.mb-battle .mb-zones button:not(.on) {background: linear-gradient(var(--rf-btn-top), var(--rf-btn)); border-color: var(--rf-btn-bd);}
html.rf .mb-zones .mb-zh b {background: var(--rf-panel); color: var(--rf-title); border-bottom: 1px solid var(--rf-line);}
/* бой на телефоне: «Вперёд!!!» нижней панели - зелёная, как .btn-main */
html.rf .mb-bbar .mb-go {background: linear-gradient(var(--rf-ok-1), var(--rf-ok-2)); border-color: rgba(0,0,0,.25); color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0,0,0,.25);}
html.rf .mb-bbar :is(.mb-ref, .mb-rnd) {background: linear-gradient(var(--rf-btn-top), var(--rf-btn));}
html.rf.mb-msg #chtabs {background: var(--rf-panel);}
html.rf.mb #mmoves.mb-tip {background: var(--rf-hint);}

/* ---------- магазины (Гос. магазин, Березка, Артефакты, комок, цветочный, сезонный, турнирный, таверна, Излом, казна) ----------
   шапка отдела с фильтром и заголовок «Отделы магазина» - #E0E0E2, выбранный отдел - карточка с синей меткой */
html.rf table.shop-head {background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 4px 4px 0 0; margin-bottom: 6px;}
html.rf table.shop-head td {color: var(--rf-title);}
html.rf .shop-mh {background: var(--rf-panel) !important; border: 1px solid var(--rf-line); color: var(--rf-title); padding: 3px 1px !important;}   /* !important - инлайн фон заголовка */
html.rf div[id^="section_shop_"] {padding: 1px 4px; border-left: 2px solid transparent;}
html.rf div[id^="section_shop_"][style*="background"] {background: var(--rf-card) !important; border-left-color: var(--rf-mark);}   /* выбранный отдел: фон ставит scripts/shop.js */
/* бой на телефоне: панель зон - во всю ширину кадра (на компьютере - по содержимому) */
html.rf.mb-battle #moveform {width: auto; margin: 2px 0 0 !important;}
html.rf .logtabs {border-bottom-color: var(--rf-line);}
html.rf .logtabs .logtab {background: var(--rf-panel); border-color: var(--rf-line); color: var(--rf-title);}
html.rf .logtabs .logtab.btn-on {background: var(--rf-card); color: var(--rf-title); box-shadow: inset 0 2px 0 #0088CC;}