/* ===== Профиль в новом оформлении (холодная палитра, ячейки-квадраты, панели и кнопки из пака Dark Templar). =====
   Подключается после reference.css и reference-surfaces.css: ломает только внешний вид, логику и разметку не трогает. */

/* ---- каркас страницы ---- */
html body .reference-app { max-width: 1280px; margin: 0 auto; padding: 12px 16px 24px; }
html body .reference-frame { border: 0; background: none; box-shadow: none; }
html body .reference-frame::before, html body .reference-frame::after { display: none; }

/* ---- шапка: портрет и имя слева, страницы по центру, виды профиля справа ---- */
html body .reference-header { background: none; }
html body .header-frame { display: grid !important; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; min-height: 0 !important; padding: 4px 2px 0; overflow: visible; }
html body .profile-summary { border: 0 !important; background: none !important; padding: 0 !important; min-height: 0 !important; display: flex; align-items: center; gap: 10px; }
html body .portrait-medallion { width: 42px !important; height: 42px !important; margin: 0 !important; flex: none; }
html body .portrait-medallion img[data-profile-avatar] { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; }
html body .profile-identity-name { font: 700 17px/22px var(--navia-serif) !important; color: var(--navia-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: block; }
html body .header-frame > .navia-page-navigation { justify-self: center; }
html body .reference-tabs { border: 0 !important; background: none !important; padding: 0 !important; min-height: 0 !important; display: flex !important; gap: 2px; align-items: center; }
html body .reference-tab { height: 34px; min-height: 0; min-width: 0; padding: 0 14px; display: inline-flex; flex-direction: row; align-items: center; gap: 7px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--navia-text-2); font: 700 14px/1 var(--navia-serif); letter-spacing: .02em; text-transform: none; position: relative; z-index: 1; transition: color .3s, transform .16s var(--navia-spring); }
html body .reference-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
html body .reference-tab span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
html body .reference-tab:hover { color: var(--navia-text); background: linear-gradient(rgba(150, 182, 202, 0), rgba(150, 182, 202, .1)); }
html body .reference-tab.is-active, html body .reference-tab[aria-selected="true"] { color: var(--navia-text); background: none; box-shadow: none; }
html body .reference-tab:active { transform: scale(.96); }
html body .resource-strip { border: 0 !important; background: none !important; padding: 0 !important; min-height: 0 !important; display: flex !important; gap: 8px; }
html body .resource-cell { position: relative; isolation: isolate; height: 34px; min-width: 0; padding: 0 16px; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--navia-text); text-shadow: 0 1px 2px #000; }
html body .resource-cell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#1d252c, #0a0e11); -webkit-mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; }
html body .resource-cell .resource-label { font: 700 12px/1 var(--navia-serif); color: var(--navia-text-2); text-transform: none; letter-spacing: .02em; }
html body .resource-cell strong { font: 700 14px/1 var(--navia-serif); color: var(--navia-text); }
html body .resource-icon { color: var(--navia-accent); }

html body .navia-page-navigation { background: none; padding: 0 !important; gap: 2px; }
html body .navia-page-navigation::after { display: none; }
html body .reference-header + .navia-page-navigation { display: none; }

/* ---- основная раскладка (≥1100 px): слева герой, в центре сумка, справа описание ---- */
@media (min-width: 900px) {
  html body .reference-main { grid-template-columns: 296px minmax(0, 1fr) 328px !important; gap: 16px; margin-top: 10px; min-height: 0; overflow: visible !important; align-items: start; }
  html body .reference-header::after { content: ""; display: block; height: 2px; margin-top: 8px; background: linear-gradient(90deg, transparent, rgba(150, 182, 202, .7) 18%, rgba(150, 182, 202, .7) 82%, transparent); }
}

/* ---- панели: рваная рамка пака ---- */
html body .equipment-rail, html body .inventory-board, html body .detail-panel, html body .bestiary-book {
  background: none !important; border: 0 solid transparent !important; border-width: 30px 22px 24px !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
  border-image: url("/assets/shared/ui/panel.webp") 125 60 60 60 fill / 34px 24px 28px 24px stretch !important; filter: drop-shadow(0 0 18px rgba(40, 72, 94, .35)); min-height: 0 !important;
}
html body .detail-panel { border-image: url("/assets/shared/ui/obj.webp") 70 fill / 30px 24px 26px 24px stretch !important; filter: none; }
html body .reference-borderline { display: none !important; }

/* ---- заголовки внутри панелей ---- */
html body .rail-heading, html body .inventory-heading, html body .character-stats-heading { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body .rail-heading h2, html body .inventory-heading h2, html body .character-stats-heading h2 { font: 700 18px/24px var(--navia-serif) !important; color: var(--navia-text) !important; text-shadow: 0 1px 3px #000; margin: 0; }
html body .section-kicker, html body .book-kicker { font: 700 11px/14px var(--navia-serif); color: var(--navia-accent); letter-spacing: .12em; }
html body .rail-count, html body .capacity-badge, html body .stats-level { color: var(--navia-text-2); font-size: 12px; }

/* ---- вкладки категорий ---- */
html body .inventory-toolbar { background: none !important; border: 0 !important; padding: 0 !important; display: grid; gap: 8px; }
html body .category-tabs { display: flex !important; gap: 2px; border: 0 !important; background: none !important; padding: 0 !important; overflow-x: auto; scrollbar-width: none; }
html body .category-tab, html body .category-next { height: 40px; min-width: 52px; padding: 0 10px; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--navia-text-2); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: color .3s, transform .16s var(--navia-spring); }
html body .category-tab svg, html body .category-next svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
html body .category-tab:hover { color: var(--navia-text); background: linear-gradient(rgba(150, 182, 202, 0), rgba(150, 182, 202, .1)) !important; }
html body .category-tab.is-active, html body .category-tab[aria-selected="true"] { color: var(--navia-text); }
html body .category-tab:active { transform: scale(.96); }

/* ---- сумка: ячейки-квадраты ---- */
html body .inventory-grid, html body[class] .inventory-grid { --inventory-cell-width: 72px !important; --inventory-cell-height: 72px !important;
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; grid-auto-rows: auto !important; gap: 6px !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: 4px 0 0 !important; justify-content: stretch !important; }
html[data-client-surface] .reference-app .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; grid-auto-rows: auto !important; }
html body .inventory-grid .hf-slot, html[data-client-surface] .reference-app .inventory-grid .hf-slot { position: relative; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1; padding: 0 !important; border: 1px solid rgba(190, 212, 226, .13) !important; border-radius: 9px !important; overflow: visible;
  background: radial-gradient(ellipse at 50% 42%, rgba(60, 40, 38, .55), rgba(9, 7, 7, .96) 78%), #0a0808 !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 -10px 16px -10px rgba(0, 0, 0, .9) !important; transform: none !important; display: block; transition: border-color .12s, filter .12s; }
html body .inventory-grid .hf-slot:hover { border-color: rgba(190, 212, 226, .38) !important; filter: brightness(1.2); }
html body .inventory-grid .hf-slot[aria-selected="true"] { border-color: var(--navia-accent) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 1px var(--navia-accent), 0 0 14px rgba(150, 182, 202, .45) !important; filter: brightness(1.2); }
html body .inventory-grid .hf-slot.is-empty { opacity: .35; box-shadow: none !important; }
html body .inventory-grid .item-card-visual, html body .inventory-grid .item-card-frame, html body .inventory-grid .rarity-icon, html body .inventory-grid .item-card-label-region, html body .inventory-grid .item-card-effects-region { display: none !important; }
html body .inventory-grid .item-card-art-region, html body .inventory-grid .item-card-region.item-card-art-region { position: absolute !important; inset: 8px !important; display: grid !important; place-items: center; width: auto !important; height: auto !important; }
html body .inventory-grid .slot-art, html body .inventory-grid .slot-art img { width: 100% !important; height: 100% !important; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.04) saturate(1.04) contrast(1.02); }
html body .inventory-grid .item-card-count-region, html body .inventory-grid .item-card-slot .slot-quantity { position: absolute; right: 5px; bottom: 3px; z-index: 3; left: auto; top: auto; font: 700 12px/14px var(--navia-serif); color: #eaf4fa; text-shadow: 0 1px 2px #000, 0 0 3px #000; background: none !important; padding: 0; }
html body .inventory-grid .item-card-visual { display: contents !important; }
html body .inventory-grid .item-card-visual .item-card-count-region { display: block !important; }
html body .inventory-grid .inventory-currency-card .currency-card-content { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; }
html body .inventory-grid .inventory-currency-card .currency-card-icon { font-size: 24px; }
html body .inventory-grid .inventory-currency-card .currency-card-amount { font: 700 13px/14px var(--navia-serif); color: #eaf4fa; }
html body .inventory-grid .inventory-currency-card .currency-card-label { display: none; }
/* подсказка с названием при наведении */
html body .inventory-grid .hf-slot[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 20; padding: 4px 9px; background: rgba(5, 8, 10, .94); box-shadow: 0 0 0 1px rgba(150, 182, 202, .3), 0 8px 18px rgba(0, 0, 0, .6); font: 700 12px/16px var(--navia-serif); color: #eaf4fa; white-space: nowrap; pointer-events: none; }
html body .inventory-footer { display: none; }

/* ---- шапка: колонки закреплены за блоками ---- */
html body .header-frame > .profile-summary { grid-column: 1; grid-row: 1; }
html body .header-frame > .navia-page-navigation { grid-column: 2; grid-row: 1; }
html body .header-frame > .reference-tabs { grid-column: 3; grid-row: 1; }
html body .header-frame > .resource-strip { grid-column: 4; grid-row: 1; }

/* ---- левая панель: характеристики ---- */
html body .equipment-rail { padding: 0 !important; }
html body .character-stats { padding: 0 0 12px !important; border: 0 !important; background: none !important; }
html body .character-stats-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
html body .stats-heading-meta { display: flex; gap: 8px; align-items: center; }
html body .character-stats-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; }
html body .character-stat, html body .derived-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px !important; min-height: 0 !important; border: 1px solid rgba(190, 212, 226, .12) !important; border-radius: 3px !important; background: #080b0d !important; box-shadow: none !important; }
html body .character-stat > span:first-child, html body .derived-stats > div > span { font: 700 12px/14px var(--navia-serif); color: var(--navia-text-2); text-transform: none; letter-spacing: .02em; }
html body .character-stat strong, html body .derived-stats strong { font: 700 17px/20px var(--navia-serif); color: var(--navia-text); }
html body .stat-value-control { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
html body .attribute-upgrade { width: 28px; height: 28px; border: 1px solid var(--navia-line-strong) !important; border-radius: 0 !important; background: none !important; color: var(--navia-accent) !important; font-size: 16px; line-height: 1; display: inline-grid; place-items: center; box-shadow: none !important; transition: transform .16s var(--navia-spring), border-color .15s; }
html body .attribute-upgrade:hover { border-color: var(--navia-accent) !important; }
html body .attribute-upgrade:active { transform: scale(.86); }
html body .derived-stats { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; margin-top: 6px; }
html body .attribute-reset-button { border: 1px solid var(--navia-line) !important; border-radius: 0 !important; background: none !important; color: var(--navia-text-2) !important; }
html body .attribute-points { color: var(--navia-accent); }

/* ---- снаряжение: ячейки-квадраты ---- */
html body .gear-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important; grid-auto-rows: auto !important; gap: 8px !important; padding: 8px 0 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
html body .gear-grid .gear-slot { position: relative; width: auto !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1; padding: 0 !important; border: 1px solid rgba(190, 212, 226, .13) !important; border-radius: 9px !important; overflow: visible;
  background: radial-gradient(ellipse at 50% 42%, rgba(60, 40, 38, .55), rgba(9, 7, 7, .96) 78%), #0a0808 !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 -3px 0 var(--rc, transparent) !important; transition: border-color .12s, filter .12s; display: block; }
html body .gear-grid .gear-slot:hover { border-color: rgba(190, 212, 226, .38) !important; filter: brightness(1.2); }
html body .gear-grid .gear-slot[aria-selected="true"] { border-color: var(--navia-accent) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 1px var(--navia-accent), 0 0 14px rgba(150, 182, 202, .45) !important; }
html body .gear-grid .gear-slot[data-rarity="uncommon"] { --rc: var(--hf-uncommon); } html body .gear-grid .gear-slot[data-rarity="rare"] { --rc: var(--hf-rare); }
html body .gear-grid .gear-slot[data-rarity="epic"] { --rc: var(--hf-epic); } html body .gear-grid .gear-slot[data-rarity="special"] { --rc: var(--hf-special); }
html body .gear-grid .slot-frame { display: none !important; }
html body .gear-grid .gear-art { position: absolute !important; inset: 8px !important; width: auto !important; height: auto !important; display: grid; place-items: center; }
html body .gear-grid .gear-art img { position: static !important; width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.04) saturate(1.04) contrast(1.02); }
html body .gear-grid .gear-label { position: absolute; left: 0; right: 0; top: 6px; text-align: center; font: 700 10px/12px var(--navia-serif); color: var(--navia-text-2); text-transform: none; letter-spacing: .02em; padding: 0 3px; }
html body .gear-grid .gear-state { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 400 10px/12px var(--hf-sans); color: var(--navia-muted); }
html body .gear-grid .gear-slot:not(.is-empty):not(.is-locked) .gear-label, html body .gear-grid .gear-slot:not(.is-empty):not(.is-locked) .gear-state { display: none; }
html body .gear-grid .gear-slot.is-empty, html body .gear-grid .gear-slot.is-locked { opacity: .55; }
html body .rail-heading { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 4px !important; }

/* ---- карточка предмета справа ---- */
html body .detail-panel { padding: 0 !important; }
html body .detail-stage { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; margin: 0 0 12px; padding: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important; height: auto !important; }
html body .detail-art { width: 76px !important; height: 76px !important; min-height: 0 !important; position: relative !important; inset: auto !important; border: 1px solid rgba(190, 212, 226, .22); border-radius: 9px; background: radial-gradient(circle at 50% 55%, #1e2a33, #080b0d 75%); box-shadow: none !important; display: grid; place-items: center; padding: 0 !important; overflow: hidden; }
html body .detail-art .detail-art-image, html body .detail-art img { position: static !important; width: 58px !important; height: 58px !important; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.04) saturate(1.04) contrast(1.02); }
html body .detail-nameplate { position: static !important; padding: 0 !important; background: none !important; border: 0 !important; transform: none !important; display: grid; gap: 2px; }
html body .detail-nameplate h2 { font: 700 17px/22px var(--navia-serif) !important; color: var(--navia-text); margin: 0; }
html body .detail-nameplate p, html body .detail-nameplate [data-detail-meta] { font: 400 12px/16px var(--hf-sans); color: var(--navia-text-2); text-transform: none; letter-spacing: 0; margin: 0; }
html body .rarity-mark { display: none; }
html body .detail-description { font: 400 13px/19px var(--hf-sans); color: var(--navia-text-2); margin: 0 0 10px; }
html body .detail-quantity { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 0 0; border-top: 1px solid var(--navia-line); background: none !important; }
html body .detail-quantity span { color: var(--navia-text-2); font-size: 12px; } html body .detail-quantity strong { font: 700 15px/18px var(--navia-serif); color: var(--navia-text); }
html body .detail-close { display: none; }
html body .detail-actions .detail-button, html body .detail-actions button { position: relative; isolation: isolate; min-height: 44px; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--navia-text); font: 700 15px/1.15 var(--navia-serif); letter-spacing: .02em; text-shadow: 0 1px 2px #000; box-shadow: none !important; transition: transform .16s var(--navia-spring); }
html body .detail-actions .detail-button::before, html body .detail-actions button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#1d252c, #0a0e11); -webkit-mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; }
html body .detail-actions .detail-button:hover::before, html body .detail-actions button:hover::before { filter: brightness(1.4); }
html body .detail-actions .detail-button.danger::before { background: linear-gradient(#5a3a30, #241410); }
html body .detail-actions .detail-button:active:not([disabled]), html body .detail-actions button:active:not([disabled]) { transform: scale(.96); }
html body .detail-actions .detail-button[disabled] { opacity: .5; }
html body .detail-nameplate { width: auto !important; max-width: none !important; min-width: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; margin: 0 !important; }
html body .detail-nameplate h2 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: auto !important; max-width: none !important; }
html body .detail-nameplate p { white-space: normal; overflow: visible; }
html body .detail-nameplate { grid-template-columns: 1fr !important; }
html body .detail-nameplate > * { grid-column: 1 !important; }

/* ---- несколько очков характеристик за раз ---- */
html body .attribute-planner { display: grid; gap: 6px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--navia-line); }
html body .attribute-planner[hidden] { display: none !important; }
html body .planner-rows { display: grid; gap: 4px; }
html body .planner-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; font: 700 12px/16px var(--navia-serif); color: var(--navia-text-2); }
html body .planner-row output { color: var(--navia-accent); font: 700 13px/16px var(--navia-serif); min-width: 28px; text-align: right; }
html body .planner-row input[type=range] { grid-column: 1 / -1; }
html body .planner-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
html body .planner-apply, html body .planner-clear { position: relative; isolation: isolate; min-height: 40px; padding: 6px 16px; border: 0; background: none; color: var(--navia-text); font: 700 14px/1.15 var(--navia-serif); letter-spacing: .02em; text-shadow: 0 1px 2px #000; transition: transform .16s var(--navia-spring); }
html body .planner-apply::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#46627a, #1f3040); -webkit-mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; }
html body .planner-clear { border: 1px solid var(--navia-line) !important; color: var(--navia-text-2); }
html body .planner-apply:active:not([disabled]), html body .planner-clear:active:not([disabled]) { transform: scale(.96); }
html body .planner-apply[disabled], html body .planner-clear[disabled] { opacity: .45; }
html body .planner-left { margin: 0; font: 400 12px/16px var(--hf-sans); color: var(--navia-text-2); }

/* ---- узкие экраны: шапка в две строки, виды профиля переключает нижняя панель ---- */
@media (max-width: 899px) {
  html body .header-frame { grid-template-columns: 1fr auto; row-gap: 6px; }
  html body .header-frame > .profile-summary { grid-column: 1; grid-row: 1; }
  html body .header-frame > .resource-strip { grid-column: 2; grid-row: 1; }
  html body .header-frame > .navia-page-navigation { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
  html body .header-frame > .reference-tabs { display: none !important; }
  html body .resource-cell { padding: 0 10px; } html body .resource-cell .resource-label { display: none; }
  html body .navia-nav-tab { min-width: 0; padding: 8px 10px; font-size: 13px; }
}
/* старая рамка ячеек рисовалась псевдоэлементами */
html body .inventory-grid .hf-slot::before, html body .inventory-grid .hf-slot::after, html body .gear-grid .gear-slot::before, html body .gear-grid .gear-slot::after { display: none !important; content: none !important; }
html body .inventory-grid .hf-slot[data-tip]:hover::after { display: block !important; content: attr(data-tip) !important; }

/* ===== левая панель как в макапе: силуэт героя с ячейками, здоровье, показатели, характеристики ===== */
@media (min-width: 761px) {
  html body .equipment-rail { display: flex !important; flex-direction: column; gap: 0; }
  html body .equipment-rail > .gear-grid { order: 1; }
  html body .equipment-rail > .character-stats { order: 2; }
  html body .equipment-rail > .rail-heading, html body .equipment-rail > .reference-borderline { display: none !important; }
  html body .gear-grid { display: grid !important; grid-template-columns: 58px 1fr 58px !important; grid-template-rows: repeat(4, 58px) !important; grid-auto-rows: 58px !important; gap: 8px !important; padding: 0 !important; margin: 0 0 14px; position: relative; }
  html body .gear-grid::before { content: ""; grid-column: 2; grid-row: 1 / span 4; pointer-events: none; align-self: stretch; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 240'%3E%3Ccircle cx='60' cy='28' r='16' fill='%23080b0d' stroke='%23cfe0ea' stroke-opacity='.24' stroke-width='1'/%3E%3Cpath d='M36 60c8-6 16-8 24-8s16 2 24 8l6 70-14 6-4 88H48l-4-88-14-6z' fill='%23080b0d' stroke='%23cfe0ea' stroke-opacity='.24' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 1; }
  html body .gear-grid .gear-slot { aspect-ratio: auto; width: 58px !important; height: 58px !important; }
  html body .gear-grid .gear-slot[data-gear-slot="weapon"] { grid-column: 1; grid-row: 1; }
  html body .gear-grid .gear-slot[data-gear-slot="offhand"] { grid-column: 3; grid-row: 1; }
  html body .gear-grid .gear-slot[data-gear-slot="armor"] { grid-column: 1; grid-row: 2; }
  html body .gear-grid .gear-slot[data-gear-slot="amulet"], html body .gear-grid .gear-slot[data-gear-slot="accessory"] { grid-column: 3; grid-row: 2; }
  html body .gear-grid .gear-slot[data-gear-slot="ring_1"], html body .gear-grid .gear-slot[data-gear-slot="ring"] { grid-column: 1; grid-row: 3; }
  html body .gear-grid .gear-slot[data-gear-slot="earring_1"] { grid-column: 3; grid-row: 3; }
  html body .gear-grid .gear-slot[data-gear-slot="ring_2"] { grid-column: 1; grid-row: 4; }
  html body .gear-grid .gear-slot[data-gear-slot="earring_2"] { grid-column: 3; grid-row: 4; }
  html body .gear-grid .gear-label, html body .gear-grid .gear-state { display: none !important; }
  html body .gear-grid .gear-slot.is-empty, html body .gear-grid .gear-slot.is-locked { opacity: .5; }
  html body .gear-grid .gear-slot[data-tip]:hover::after { content: attr(data-tip) !important; display: block !important; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 30; padding: 4px 9px; background: rgba(5, 8, 10, .94); box-shadow: 0 0 0 1px rgba(150, 182, 202, .3), 0 8px 18px rgba(0, 0, 0, .6); font: 700 12px/16px var(--navia-serif); color: #eaf4fa; white-space: nowrap; pointer-events: none; }
}
html body .character-stats { display: flex !important; flex-direction: column; gap: 0; padding: 0 !important; }
html body .hp-strip { order: 0; margin: 0 0 12px; }
html body .hp-row { display: flex; justify-content: space-between; align-items: baseline; font: 400 13px/18px var(--hf-sans); color: var(--navia-text-2); }
html body .hp-row b { color: var(--navia-text); font: 700 13px/18px var(--navia-serif); }
html body .hp-bar { height: 8px; margin-top: 6px; border-radius: 0; background: #080b0d; box-shadow: inset 0 0 0 1px var(--navia-line); overflow: hidden; }
html body .hp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#9fc0d2, #6f93a8); transition: width .4s var(--navia-spring); }
html body .character-stats .derived-stats { order: 1; margin: 0 0 12px !important; }
html body .character-stats .character-stats-grid { order: 2; display: flex !important; flex-direction: column; gap: 0 !important; }
html body .character-stats .attribute-planner { order: 3; }
html body .character-stats .character-stats-heading { order: 4; margin: 10px 0 0 !important; justify-content: flex-end; }
html body .character-stats-heading > div:first-child { display: none; }
html body .stats-heading-meta { width: 100%; justify-content: space-between; }
html body .attribute-points-text { color: var(--navia-text-2); font: 400 12px/16px var(--hf-sans); }
html body .attribute-points { display: none !important; }
html body .stats-level { display: none; }
html body .derived-stats > div { padding: 10px 12px !important; }
html body .derived-stats > div > span { font: 400 12px/14px var(--hf-sans); color: var(--navia-text-2); }
html body .derived-stats strong { font: 700 20px/22px var(--hf-sans); color: var(--navia-text); }
html body .character-stats-grid .character-stat { flex-direction: row !important; align-items: center; justify-content: space-between; height: 36px; padding: 0 !important; border: 0 !important; border-top: 1px solid rgba(150, 182, 202, .18) !important; border-radius: 0 !important; background: none !important; }
html body .character-stats-grid .character-stat > span:first-child { font: 400 14px/18px var(--hf-sans); color: var(--navia-text-2); }
html body .character-stats-grid .character-stat strong { font: 700 14px/18px var(--hf-sans); color: var(--navia-text); }
html body .character-stats-grid .character-stat.is-future { opacity: .6; }
html body .character-stats-grid .character-stat.is-future small { font: 400 11px/14px var(--hf-sans); color: var(--navia-muted); }
html body .stat-value-control { gap: 8px; }

/* ---- значки ограничений в карточке предмета ---- */
html body .detail-flags { display: flex; gap: 8px; margin-top: 6px; }
html body .detail-flags[hidden] { display: none !important; }
html body .detail-flag { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; outline: 0; }
html body .detail-flag img { width: 22px; height: 22px; object-fit: contain; opacity: .9; filter: drop-shadow(0 1px 2px #000); }
html body .detail-flag:hover img, html body .detail-flag:focus-visible img { opacity: 1; }
html body .detail-flag-tip { position: absolute; left: -6px; top: calc(100% + 6px); z-index: 30; display: none; width: 190px; padding: 8px 10px; background: rgba(5, 8, 10, .96); box-shadow: 0 0 0 1px rgba(150, 182, 202, .3), 0 10px 22px rgba(0, 0, 0, .6); font: 400 12px/16px var(--hf-sans); color: var(--navia-text-2); }
html body .detail-flag-tip b { display: block; margin-bottom: 2px; font: 700 12px/16px var(--navia-serif); color: var(--navia-text); }
html body .detail-flag:hover .detail-flag-tip, html body .detail-flag:focus-visible .detail-flag-tip { display: block; }

/* ===== бестиарий как в макапе: слева породы, в центре карточка, справа «Охотничья наука» ===== */
html body .reference-app[data-active-view="bestiary"] .reference-main { display: block !important; }
@media (min-width: 900px) {
  html body .reference-app[data-active-view="bestiary"] .bestiary-book { display: grid !important; grid-template-columns: 296px minmax(0, 1fr) 328px; grid-template-rows: auto auto auto 1fr; gap: 0 16px; align-items: start; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; overflow: visible !important; }
  html body .bestiary-book .book-page-right, html body .bestiary-book .bestiary-content-scroll, html body .bestiary-book .bestiary-content, html body .bestiary-book .subspecies-toolbar { display: contents; }
  html body .bestiary-book .book-spine { display: none; }
  html body .bestiary-book .book-page-left { grid-column: 1; grid-row: 1 / span 4; }
  html body .bestiary-book .creature-card-header { grid-column: 2; grid-row: 1; }
  html body .bestiary-book .subspecies-bookmarks { grid-column: 2; grid-row: 2; }
  html body .bestiary-book .book-lore-grid { grid-column: 2; grid-row: 3; }
  html body .bestiary-book .milestones-column { grid-column: 3; grid-row: 1 / span 4; align-self: start; }
  html body .bestiary-book .bestiary-back, html body .bestiary-book .book-page-right > .book-page-footer { display: none !important; }
}
html body .bestiary-book .book-page-left { background: none !important; border: 0 solid transparent !important; border-width: 30px 22px 24px !important; border-image: url("/assets/shared/ui/panel.webp") 125 60 60 60 fill / 34px 24px 28px 24px stretch !important; padding: 0 !important; filter: drop-shadow(0 0 18px rgba(40, 72, 94, .35)); display: flex; flex-direction: column; position: relative; }
html body .bestiary-book .book-page-header { padding: 0 0 8px; border: 0; }
html body .bestiary-book .book-kicker, html body .bestiary-book .book-subtitle { display: none; }
html body .bestiary-book .book-title { margin: 0; font: 700 18px/24px var(--navia-serif); color: var(--navia-text); }
html body .bestiary-book .book-page-left .book-page-footer { position: absolute; top: 4px; right: 0; padding: 0; border: 0; background: none; }
html body .bestiary-book .book-folio { display: none; }
html body .book-kill-summary { font: 400 12px/16px var(--hf-sans); color: var(--navia-text-2); }
html body .bestiary-species-list { display: grid; gap: 4px; padding: 0 !important; background: none !important; overflow: visible; max-height: none; }
html body .bestiary-species-item { display: grid !important; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 8px 10px !important; border: 1px solid transparent !important; border-radius: 12px !important; background: none !important; box-shadow: none !important; text-align: left; transition: border-color .15s, transform .16s var(--navia-spring); }
html body .bestiary-species-item:hover { border-color: rgba(190, 212, 226, .25) !important; }
html body .bestiary-species-item.is-active { border-color: var(--navia-accent) !important; background: rgba(150, 182, 202, .06) !important; }
html body .bestiary-species-item:active { transform: scale(.98); }
html body .species-icon-frame { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 1px solid rgba(190, 212, 226, .25) !important; background: #080b0d !important; display: grid; place-items: center; overflow: hidden; color: var(--navia-muted); font: 700 16px/1 var(--navia-serif); }
html body .species-icon-frame img { width: 100%; height: 100%; object-fit: cover; }
html body .species-details { display: grid; gap: 1px; min-width: 0; }
html body .species-name { font: 700 14px/18px var(--navia-serif); color: var(--navia-text); }
html body .species-kind { font: 400 12px/16px var(--hf-sans); color: var(--navia-text-2); }
html body .species-kill-badge { position: static !important; display: block; padding: 0 !important; border: 0 !important; background: none !important; font: 400 12px/16px var(--hf-sans); color: var(--navia-muted); }
html body .species-kill-badge.has-kills { color: var(--navia-text); font-weight: 600; }
html body .creature-card-header { display: block !important; margin: 0 0 14px; padding: 0 !important; border: 0 !important; background: none !important; }
html body .creature-visual-frame { position: relative; width: 100% !important; height: 240px !important; border: 1px solid rgba(190, 212, 226, .22) !important; border-radius: 12px !important; background: #06080a !important; overflow: hidden; margin: 0 0 14px; }
html body .creature-visual-frame .creature-art { width: 100% !important; height: 100% !important; object-fit: cover; }
html body .creature-art-fallback { display: none !important; }
html body .creature-meta-block { display: grid; gap: 4px; }
html body .creature-full-name { margin: 0; font: 700 22px/28px var(--navia-serif); color: var(--navia-text); }
html body .creature-affix-tag { display: block; padding: 0 !important; border: 0 !important; background: none !important; font: 400 13px/18px var(--hf-sans); color: var(--navia-text-2); text-transform: none; letter-spacing: 0; }
html body .creature-kills-stat { display: flex; gap: 6px; font: 400 14px/20px var(--hf-sans); color: var(--navia-text); }
html body .creature-kills-stat strong { font-weight: 700; }
html body .subspecies-bookmarks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 !important; margin: 0 0 14px; border: 0 !important; background: none !important; }
html body .subspecies-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px !important; border: 1px solid rgba(190, 212, 226, .22) !important; border-radius: 9px !important; background: none !important; color: var(--navia-text-2); font: 700 13px/1 var(--navia-serif); text-transform: none; letter-spacing: .02em; box-shadow: none !important; transition: color .2s, border-color .2s, transform .16s var(--navia-spring); }
html body .subspecies-tab.is-active { color: var(--navia-text); border-color: var(--navia-accent) !important; background: rgba(150, 182, 202, .08) !important; }
html body .subspecies-tab:active { transform: scale(.96); }
html body .subspecies-kill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--navia-muted); }
html body .subspecies-kill-dot.has-kills { background: var(--navia-accent); }
html body .book-lore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
html body .lore-section.full-width { grid-column: 1 / -1; }
html body .lore-title { margin: 0 0 4px; font: 400 12px/16px var(--hf-sans); color: var(--navia-muted); text-transform: none; letter-spacing: 0; }
html body .lore-text { margin: 0; font: 400 14px/20px var(--hf-sans); color: var(--navia-text); }
html body .lore-text em { color: var(--navia-muted); font-style: normal; }
html body .lore-text.is-locked { color: var(--navia-text-2); font-style: normal; }
html body .milestones-ladder-heading { display: grid; gap: 2px; margin: 0 0 4px; padding: 0 !important; border: 0 !important; background: none !important; }
html body .milestones-ladder-heading span:first-child { font: 700 18px/24px var(--navia-serif); color: var(--navia-text); text-transform: none; letter-spacing: .02em; }
html body .milestones-ladder-heading span:last-child { font: 400 12px/16px var(--hf-sans); color: var(--navia-text-2); text-transform: none; letter-spacing: 0; }
html body .milestones-ladder-list { display: grid; gap: 0; align-content: start; padding: 0 !important; background: none !important; max-height: none !important; overflow: visible !important; }
html body .milestone-item { display: grid !important; grid-template-columns: 44px 1fr; grid-template-areas: "num info" "num act"; gap: 2px 10px; padding: 12px 0 !important; border: 0 !important; border-top: 1px solid rgba(150, 182, 202, .18) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html body .milestone-thresh { grid-area: num; display: grid; place-items: center; align-content: start; width: auto !important; height: auto !important; border: 0 !important; background: none !important; }
html body .milestone-thresh-num { font: 700 17px/20px var(--navia-serif); color: var(--navia-text-2); }
html body .milestone-thresh-label { font: 400 11px/14px var(--hf-sans); color: var(--navia-muted); text-transform: none; }
html body .milestone-info { grid-area: info; }
html body .milestone-name-row { display: grid; gap: 1px; }
html body .milestone-name { font: 700 14px/18px var(--hf-sans); color: var(--navia-text); }
html body .milestone-rewards-preview { font: 400 12px/16px var(--hf-sans); color: var(--navia-accent); }
html body .milestone-perk-desc { font: 400 13px/18px var(--hf-sans); color: var(--navia-text-2); margin-top: 2px; }
html body .milestone-action-cell { grid-area: act; justify-self: start; margin-top: 4px; }
html body .milestone-claimed-badge, html body .milestone-locked-badge { font: 400 12px/16px var(--hf-sans); color: var(--navia-muted); padding: 0 !important; border: 0 !important; background: none !important; }
html body .milestone-claim-btn { min-height: 36px; padding: 0 20px !important; border: 0 !important; border-radius: 9px !important; background: var(--navia-accent) !important; color: var(--navia-accent-ink) !important; font: 700 14px/1 var(--hf-sans) !important; box-shadow: none !important; transition: transform .16s var(--navia-spring), filter .15s; }
html body .milestone-claim-btn:hover { filter: brightness(1.12); }
html body .milestone-claim-btn:active { transform: scale(.96); }
@media (max-width: 899px) {
  html body .reference-app[data-active-view="bestiary"] .bestiary-book { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 14px; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; overflow: visible !important; }
  html body .bestiary-book .book-spine { display: none; }
  html body .bestiary-book .book-page-right { border: 0; background: none; padding: 0; }
  html body .bestiary-book .bestiary-content-scroll { overflow: visible; max-height: none; }
  html body .bestiary-book .book-lore-grid { grid-template-columns: 1fr; }
  html body .creature-visual-frame { height: 200px !important; }
}

html body .milestones-column { display: block; }
html body .book-kill-summary { text-transform: none; letter-spacing: 0; }

/* ---- окна передачи, продажи и подтверждения: плашка пака, шрифты и кнопки как у остальных окон ---- */
html body [data-transfer-dialog] { border: 0 !important; border-radius: 0 !important; background: url("/assets/shared/ui/obj.webp") center / 100% 100% no-repeat !important; box-shadow: none !important; padding: 34px 34px 28px !important; gap: 12px !important; color: var(--navia-text) !important; }
html body [data-transfer-dialog] h3 { font: 700 18px/24px var(--navia-serif) !important; letter-spacing: .02em; color: var(--navia-text); }
html body [data-transfer-dialog] p, html body [data-transfer-dialog] label { font: 400 13px/19px var(--hf-sans) !important; color: var(--navia-text-2); }
html body [data-transfer-dialog] input { min-height: 40px; border: 1px solid rgba(190, 212, 226, .22) !important; border-radius: 3px !important; background: #080b0d !important; color: var(--navia-text) !important; }
html body [data-transfer-dialog] input:focus-visible { outline: 2px solid var(--navia-accent); outline-offset: 1px; }
html body [data-transfer-dialog] .trade-error { color: var(--navia-danger) !important; }
html body [data-trade-actions] { border-top-color: var(--navia-line) !important; }
html body [data-trade-actions] p { color: var(--navia-text-2); font: 400 13px/19px var(--hf-sans); }
html body [data-trade-actions] input { border: 1px solid rgba(190, 212, 226, .22) !important; border-radius: 3px !important; background: #080b0d !important; color: var(--navia-text) !important; }
html body .transfer-hover-plate, html body .inventory-currency-card .currency-transfer { border: 0 !important; border-radius: 0 !important; background: rgba(5, 8, 10, .92) !important; box-shadow: 0 0 0 1px rgba(150, 182, 202, .3); color: var(--navia-text) !important; font: 700 12px/16px var(--navia-serif) !important; }

/* ===================== точное совпадение с макапом (эталон) ===================== */
html body .resource-strip .resource-cell[data-hf-resource="items"] { display: none !important; }
html body .reference-tab[data-hf-view="profile"] { display: none !important; }
@media (max-width: 899px) { html body .reference-tab[data-hf-view="profile"] { display: inline-flex !important; } }
html body .profile-identity { display: grid; gap: 0; }
html body .profile-identity::after { content: attr(data-level); font: 400 12px/16px var(--hf-sans); color: var(--navia-muted); }

html body .derived-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin: 0 0 12px !important; }
html body .derived-stats > div { display: grid !important; flex-direction: unset; gap: 2px !important; padding: 8px 10px !important; border: 1px solid var(--navia-line) !important; border-radius: 2px !important; background: rgba(0, 0, 0, .35) !important; }
html body .derived-stats > div > span { font: 400 12px/16px var(--hf-sans) !important; color: var(--navia-muted) !important; text-transform: none; letter-spacing: 0; }
html body .derived-stats strong { font: 500 16px/20px var(--hf-sans) !important; color: var(--navia-text) !important; }
html body .hp-row { color: var(--navia-text-2); font: 400 14px/20px var(--hf-sans); margin-bottom: 6px; }
html body .hp-row b { color: var(--navia-text); font: 500 14px/20px var(--hf-sans); }
html body .hp-bar { height: 8px; border-radius: 4px !important; background: #080b0d; box-shadow: inset 0 0 0 1px var(--navia-line); }
html body .hp-bar i { background: #86a9bd; border-radius: 0; }
html body .character-stats-grid .character-stat { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 36px; height: auto !important; border-top: 1px solid var(--navia-line) !important; color: var(--navia-text-2); }
html body .character-stats-grid .character-stat > span:first-child { font: 400 14px/20px var(--hf-sans); color: var(--navia-text-2); text-transform: none; letter-spacing: 0; }
html body .character-stats-grid .character-stat strong { font: 500 14px/20px var(--hf-sans); color: var(--navia-text); }
html body .attribute-upgrade { width: 28px !important; height: 28px !important; border: 1px solid rgba(159, 192, 210, .55) !important; border-radius: 0 !important; color: var(--navia-accent) !important; font-size: 16px; background: none !important; }
html body .attribute-upgrade[disabled] { opacity: .3; }
html body .character-stat.is-future { opacity: .55; gap: 8px; }
html body .character-stat.is-future > span:first-child { flex: 1; }
html body .character-stat.is-future strong { display: none; }
html body .character-stat.is-future small { padding: 1px 8px; border: 1px solid var(--navia-line); border-radius: 2px; background: rgba(0, 0, 0, .35); font: 400 11px/16px var(--hf-sans); color: var(--navia-text-2); text-transform: none; }
html body .planner-slider { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 0 0 8px; }
html body .planner-slider output { font: 700 13px/16px var(--navia-serif); color: var(--navia-accent); min-width: 28px; text-align: right; }
html body .attribute-planner { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; }
html body .attribute-planner .planner-rows { display: none; }
html body .stats-heading-meta { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 8px; }
html body .attribute-reset-button { height: 24px; padding: 0 8px; font: 400 12px/1 var(--hf-sans); color: var(--navia-muted) !important; border: 1px solid var(--navia-line) !important; border-radius: 2px !important; background: none !important; }
html body .attribute-reset-button:hover { color: var(--navia-text) !important; border-color: var(--navia-line-strong) !important; }
html body .attribute-points-text { font: 400 12px/16px var(--hf-sans); color: var(--navia-muted); }

html body .inventory-board { border-width: 52px 22px 24px !important; border-image-width: 52px 24px 28px 24px !important; }
html body .inventory-heading { position: absolute; left: 0; right: 0; top: -44px; margin: 0 !important; display: block; }
html body .inventory-heading h2 { font: 700 18px/24px var(--navia-serif) !important; }
html body .capacity-badge, html body .inventory-heading .section-kicker { display: none !important; }
html body .inventory-toolbar { position: relative; margin: 0 0 8px; }
html body .category-next { display: none !important; }
html body .category-tab { flex: none; display: grid !important; justify-items: center; align-content: center; gap: 2px; width: 56px; min-width: 56px !important; height: auto !important; padding: 6px 0 4px !important; }
html body .category-tab svg { width: 18px; height: 18px; }
html body .category-tab .tab-count { font: 600 11px/14px var(--hf-sans); color: var(--navia-muted); }
html body .category-tab.is-active .tab-count, html body .category-tab:hover .tab-count { color: var(--navia-text); }
html body .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important; gap: 6px !important; padding: 0 !important; }
html body .inventory-grid .hf-slot { border-radius: 9px !important; }
html body .inventory-grid .hf-slot::before { content: "" !important; display: block !important; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--rc, transparent); box-shadow: 0 0 6px var(--rc, transparent); z-index: 3; }
html body .inventory-grid .hf-slot[data-rarity="uncommon"] { --rc: var(--hf-uncommon); } html body .inventory-grid .hf-slot[data-rarity="rare"] { --rc: var(--hf-rare); }
html body .inventory-grid .hf-slot[data-rarity="epic"] { --rc: var(--hf-epic); } html body .inventory-grid .hf-slot[data-rarity="special"] { --rc: var(--hf-special); }
html body .inventory-grid .inventory-currency-card::before { display: none !important; }
html body .inventory-grid .inventory-currency-card .currency-card-icon { position: absolute; inset: 8px; display: grid; place-items: center; font-size: 0; }
html body .inventory-grid .inventory-currency-card .currency-card-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.04) saturate(1.04) contrast(1.02); }
html body .inventory-grid .inventory-currency-card .currency-card-content { display: block; }
html body .inventory-grid .inventory-currency-card .currency-card-amount { position: absolute; right: 5px; bottom: 3px; font: 700 12px/14px var(--navia-serif); color: #eaf4fa; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
html body .inventory-grid img[src$="art-scroll.webp"], html body .detail-art img[src$="art-scroll.webp"] { filter: sepia(.55) hue-rotate(150deg) saturate(1.5) brightness(1.15) contrast(1.05) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) !important; }
html body .inventory-footer { display: none !important; }

html body .detail-panel { border-width: 40px 24px 28px !important; }
html body .detail-stage { display: grid !important; grid-template-columns: 72px 1fr !important; gap: 12px !important; align-items: center; margin: 0 0 12px !important; padding: 0 !important; }
html body .detail-stage::before, html body .detail-stage::after, html body .detail-panel::before, html body .detail-panel::after { display: none !important; }
html body .detail-art { width: 72px !important; height: 72px !important; border-radius: 9px !important; background: radial-gradient(circle at 50% 55%, #1e2a33, #080b0d 75%) !important; border: 1px solid rgba(150, 182, 202, .25) !important; }
html body .detail-art .detail-art-image, html body .detail-art img { width: 52px !important; height: 52px !important; }
html body .detail-nameplate { display: grid !important; gap: 2px !important; text-align: left !important; align-content: center; border: 0 !important; background: none !important; box-shadow: none !important; }
html body .detail-nameplate::before, html body .detail-nameplate::after { display: none !important; }
html body .detail-nameplate h2 { font: 700 18px/24px var(--navia-serif) !important; text-align: left; text-transform: none; }
html body .detail-nameplate [data-detail-meta] { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px var(--hf-sans) !important; color: var(--navia-text-2); }
html body .detail-nameplate [data-detail-meta]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #7b8a94); }
html body .detail-nameplate[data-rarity="uncommon"] { --dot: var(--hf-uncommon); } html body .detail-nameplate[data-rarity="rare"] { --dot: var(--hf-rare); }
html body .detail-nameplate[data-rarity="epic"] { --dot: var(--hf-epic); } html body .detail-nameplate[data-rarity="special"] { --dot: var(--hf-special); }
html body .detail-description { margin: 0 0 12px !important; font: 400 14px/20px var(--hf-sans); color: var(--navia-text-2); }
html body .detail-quantity { display: flex !important; justify-content: space-between; align-items: center; height: 32px; padding: 0 !important; border-top: 1px solid var(--navia-line); }
html body .detail-quantity > span:first-child { color: var(--navia-text-2); font: 400 14px/20px var(--hf-sans); }
html body .detail-quantity strong { font: 500 14px/20px var(--hf-sans); color: var(--navia-text); }
html body .detail-quantity .trade-state { display: none; }
html body .detail-actions { display: grid !important; gap: 8px; margin-top: 12px; }
html body [data-trade-actions] { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
html body [data-trade-actions] p { color: var(--navia-muted); font: 400 12px/16px var(--hf-sans); text-align: left; }
html body .detail-button { height: 40px; min-height: 40px !important; display: inline-flex; align-items: center; justify-content: center; }
html body .detail-button svg { display: none; }

/* поля панелей как в макапе: тонкая рамка, отступ внутри, рваный край уходит за границы */
html body .equipment-rail, html body .inventory-board, html body .detail-panel { border-width: 30px 1px 1px !important; padding: 0 15px 15px !important; border-image-outset: 0 12px 14px 12px !important; }
html body .inventory-board { border-width: 44px 1px 1px !important; }
html body .detail-panel { border-width: 24px 1px 1px !important; }
html body .inventory-toolbar { overflow: visible !important; }
html body .inventory-heading { top: -36px !important; }
html body .inventory-board .inventory-toolbar::before, html body .inventory-board .inventory-toolbar::after { display: none !important; }
html body .derived-stats > div { padding: 8px 8px !important; }
html body .derived-stats > div > span { font-size: 11.5px !important; }
html body .inventory-board, html body .equipment-rail, html body .detail-panel { overflow: visible !important; }
html body .inventory-heading h2 { color: var(--navia-text); text-shadow: 0 1px 3px #000; }

/* ===== меню надетой вещи: обвесы строками, руны в квадратных гнёздах (как в макапе) ===== */
html body [data-equipment-panel] h3, html body .detail-runes h3 { margin: 14px 0 8px; font: 700 14px/18px var(--navia-serif); letter-spacing: .02em; text-transform: none; color: var(--navia-text); }
html body [data-equipment-panel] p, html body .detail-runes p { font: 400 12px/16px var(--hf-sans); color: var(--navia-text-2); }
html body [data-equipment-panel] p strong { color: var(--navia-text); font-weight: 600; }
html body .equipment-place-list { display: grid; gap: 6px; }
html body .equipment-place-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name act" "info act"; align-items: center; gap: 0 10px; padding: 10px 12px; border: 1px solid var(--navia-line); border-radius: 3px; background: rgba(0, 0, 0, .35); }
html body .equipment-place-row > span:first-child { grid-area: name; font: 700 14px/18px var(--hf-sans); color: var(--navia-text); }
html body .equipment-place-row > span:nth-child(2) { grid-area: info; font: 400 12px/16px var(--hf-sans); color: var(--navia-muted); }
html body .equipment-place-row > .rune-option:nth-child(2) { grid-area: info; padding: 0; border: 0; background: none; justify-content: flex-start; font: 400 12px/16px var(--hf-sans); color: var(--navia-text-2); }
html body .equipment-place-row > .rune-option:last-child { grid-area: act; width: auto; padding: 0 0 0 8px; border: 0; background: none; color: var(--navia-text-2); font: 400 12px/16px var(--hf-sans); }
html body .equipment-place-row > .rune-option:last-child:hover:not(:disabled) { color: var(--navia-text); }
html body .equipment-choice-list .rune-option { border-radius: 3px; }
html body .rune-option { border: 1px solid var(--navia-line); border-radius: 3px; background: rgba(0, 0, 0, .35); color: var(--navia-text); font: 700 13px/18px var(--hf-sans); transition: border-color .15s, transform .16s var(--navia-spring); }
html body .rune-option:hover:not(:disabled) { border-color: var(--navia-line-strong); }
html body .rune-option:active:not(:disabled) { transform: scale(.98); }
html body .rune-option small { color: var(--navia-muted); font: 400 12px/16px var(--hf-sans); }
html body .rune-option.is-danger { border-color: rgba(232, 160, 112, .45); }
html body .detail-runes { border-top: 0; padding-top: 0; margin-top: 12px; }
html body .rune-chain { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
html body .rune-socket { width: 52px; height: 52px; padding: 3px; border: 1px solid rgba(150, 182, 202, .35); border-radius: 9px; background: radial-gradient(circle at 50% 40%, #1e2a33, #080b0d 80%); transition: border-color .15s, transform .16s var(--navia-spring); }
html body .rune-socket:active { transform: scale(.94); }
html body .rune-socket.is-empty { border-style: dashed; border-color: rgba(150, 182, 202, .3); color: var(--navia-muted); }
html body .rune-socket.is-selected { box-shadow: 0 0 0 2px var(--navia-accent); }
html body .rune-socket[data-rune-rarity="moon"] { border-color: var(--hf-rare); }
html body .rune-socket[data-rune-rarity="witch"] { border-color: var(--hf-epic); }
html body .rune-socket[data-rune-rarity="nav"] { border-color: var(--hf-special); }
html body .rune-link { width: 14px; border-top: 2px dotted rgba(150, 182, 202, .25); }
html body .rune-link.is-linked { border-top: 2px solid var(--navia-accent); box-shadow: 0 0 6px rgba(159, 192, 210, .5); }
html body .rune-kind-letter { border: 1px solid var(--navia-accent); background: #0c1013; color: var(--navia-accent); }
html body .rune-term { border-bottom-color: var(--navia-muted); }
html body .rune-num { color: var(--navia-accent); }
html body .rune-row.is-current { border-left-color: var(--navia-accent); background: rgba(150, 182, 202, .08); }
html body .rune-popup { border: 0; border-radius: 0; background: rgba(5, 8, 10, .96); box-shadow: 0 0 0 1px rgba(150, 182, 202, .3), 0 10px 22px rgba(0, 0, 0, .6); }
html body .rune-popup button { color: var(--navia-text); font: 700 13px/18px var(--navia-serif); }
html body .rune-tip { border: 0; border-radius: 0; background: rgba(5, 8, 10, .96); box-shadow: 0 0 0 1px rgba(150, 182, 202, .3), 0 10px 22px rgba(0, 0, 0, .6); color: var(--navia-text); font: 400 13px/18px var(--hf-sans); }
html body .rune-spend-row input[type="number"] { border: 1px solid rgba(190, 212, 226, .22); border-radius: 3px; background: #080b0d; color: var(--navia-text); }
html body .detail-actions .rune-option, html body .detail-actions .rune-socket, html body .detail-runes .rune-option { min-height: 0 !important; isolation: auto; text-shadow: none; box-shadow: none !important; }
html body .detail-actions .rune-option::before, html body .detail-actions .rune-socket::before, html body .detail-runes .rune-option::before { display: none !important; content: none !important; }
html body .detail-actions .rune-option { background: rgba(0, 0, 0, .35) !important; border: 1px solid var(--navia-line) !important; border-radius: 3px !important; padding: 8px 12px; }
html body .detail-actions .equipment-place-row > .rune-option:nth-child(2), html body .detail-actions .equipment-place-row > .rune-option:last-child { background: none !important; border: 0 !important; padding: 0; }
html body .detail-actions .equipment-place-row > .rune-option:last-child { padding-left: 8px; }
html body .detail-actions .rune-socket { background: radial-gradient(circle at 50% 40%, #1e2a33, #080b0d 80%) !important; border: 1px solid rgba(150, 182, 202, .35) !important; border-radius: 9px !important; min-height: 52px !important; padding: 3px; }
html body .detail-actions .rune-socket.is-empty { border-style: dashed !important; }
html body .detail-actions .rune-socket[data-rune-rarity="moon"] { border-color: var(--hf-rare) !important; } html body .detail-actions .rune-socket[data-rune-rarity="witch"] { border-color: var(--hf-epic) !important; } html body .detail-actions .rune-socket[data-rune-rarity="nav"] { border-color: var(--hf-special) !important; }
html body .detail-actions .rune-buttons .rune-option { flex: 1 1 auto; justify-content: center; }

/* ---- мешочек пыли: три ячейки с пылью разных редкостей ---- */
html body .dust-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 10px; }
html body .dust-cell { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid rgba(190, 212, 226, .13); border-radius: 9px; background: radial-gradient(ellipse at 50% 42%, rgba(60, 40, 38, .55), rgba(9, 7, 7, .96) 78%), #0a0808; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75); }
html body .dust-cell img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(1.04) saturate(1.04) contrast(1.02); }
html body .dust-cell[data-dust="moon"] img { filter: hue-rotate(-65deg) saturate(.7) brightness(1.15) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)); }
html body .dust-cell[data-dust="witch"] img { filter: hue-rotate(-62deg) saturate(.6) brightness(1.3) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)); }
html body .dust-cell b { font: 700 14px/16px var(--navia-serif); color: var(--navia-text); }
html body .dust-cell span { font: 400 11px/14px var(--hf-sans); color: var(--navia-text-2); text-align: center; }
html body .dust-cell[data-dust="nav"] img { filter: hue-rotate(205deg) saturate(1.1) brightness(1.1) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)); }

/* ===== окно VK на ПК и обычный браузер: оболочка не ограничивает высоту, колонки как в макапе ===== */
@media (min-width: 630px) {
  html[data-client-surface] body .reference-app { height: auto !important; max-height: none !important; overflow: visible !important; display: block !important; max-width: 1280px; margin: 0 auto; padding: 12px 16px 24px !important; }
  html[data-client-surface] body .reference-header { position: static !important; height: auto !important; }
  html[data-client-surface] body .header-frame { display: grid !important; grid-template-columns: auto 1fr auto auto !important; min-height: 0 !important; height: auto !important; }
  html[data-client-surface] body .reference-main { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; height: auto !important; min-height: 0 !important; overflow: visible !important; margin-top: 10px !important; align-items: start; }
  html[data-client-surface] body .equipment-rail, html[data-client-surface] body .inventory-board, html[data-client-surface] body .detail-panel { height: auto !important; max-height: none !important; overflow: visible !important; position: relative !important; width: auto !important; inset: auto !important; transform: none !important; }
  html[data-client-surface] body .detail-panel { display: block !important; opacity: 1 !important; visibility: visible !important; }
  html[data-client-surface] body .detail-close { display: none !important; }
  html[data-client-surface] body .detail-stage { display: grid !important; }
  html[data-client-surface] body .inventory-grid { height: auto !important; max-height: none !important; overflow: visible !important; }
  html[data-client-surface] body .detail-scrim { display: none !important; }
}
@media (min-width: 1100px) { html[data-client-surface] body .reference-main { grid-template-columns: 296px minmax(0, 1fr) 328px !important; } }
@media (min-width: 900px) {
  html[data-client-surface] body .reference-main > .equipment-rail { grid-column: 1 !important; grid-row: 1 !important; }
  html[data-client-surface] body .reference-main > .inventory-board { grid-column: 2 !important; grid-row: 1 !important; }
  html[data-client-surface] body .reference-main > .detail-panel { grid-column: 3 !important; grid-row: 1 !important; }
  html[data-client-surface] body .reference-main > .bestiary-book { grid-column: 1 / -1 !important; grid-row: 1 !important; }
}

@media (min-width: 630px) and (max-width: 899px) {
  html[data-client-surface] body .reference-main > .equipment-rail, html[data-client-surface] body .reference-main > .inventory-board, html[data-client-surface] body .reference-main > .detail-panel { grid-column: 1 !important; grid-row: auto !important; }
  html[data-client-surface] body .mobile-reference-nav { display: none !important; }
  html[data-client-surface] body .header-frame > .reference-tabs { display: none !important; }
}
@media (min-width: 900px) {
  html[data-client-surface] body .reference-main { grid-template-columns: 280px minmax(0, 1fr) 300px !important; }
}

/* ---- уже надетые руны: зелёная окантовка вместо надписи поверх арта ---- */
html body .inventory-grid .hf-slot .rune-card-worn { display: none !important; }
html body .inventory-grid .hf-slot.is-rune-worn { border-color: #6fbf8a !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 1px #6fbf8a, 0 0 10px rgba(111, 191, 138, .35) !important; }
html body .inventory-grid .hf-slot.is-rune-worn::after { content: ""; position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #6fbf8a; box-shadow: 0 0 6px #6fbf8a; z-index: 3; }
html body .inventory-grid .hf-slot .rune-card-kind { z-index: 3; }
/* ---- ползунки количества ---- */
html body .qty-slider { display: grid; gap: 4px; margin: 4px 0 2px; }
html body .qty-slider input[type=range] { width: 100%; }

html body .inventory-grid .hf-slot.is-rune-worn[aria-selected="true"] { border-color: var(--navia-accent) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 2px var(--navia-accent), 0 0 0 4px #6fbf8a, 0 0 14px rgba(150, 182, 202, .45) !important; }
html body .inventory-grid .hf-slot:hover, html body .inventory-grid .hf-slot[aria-selected="true"] { filter: brightness(1.08); }

/* ===== прокрутка страницы профиля и шапка в той же сетке, что на остальных страницах ===== */
html, body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; }
html[data-client-surface] body .reference-app { padding-top: 12px !important; }
@media (min-width: 900px) {
  html body .header-frame, html[data-client-surface] body .header-frame { grid-template-columns: 300px auto minmax(0, 1fr) !important; column-gap: 12px !important; height: 44px !important; min-height: 44px !important; padding: 0 0 8px !important; align-items: center !important; box-sizing: content-box; }
  html body .header-frame > .profile-summary { grid-column: 1 !important; }
  html body .header-frame > .navia-page-navigation { grid-column: 2 !important; justify-self: start !important; }
  html body .header-frame > .reference-tabs { grid-column: 3 !important; justify-self: end !important; }
  html body .header-frame > .resource-strip { position: absolute; right: 16px; top: 12px; }
  html body .navia-page-navigation .navia-nav-tab { height: 32px; line-height: 32px; padding: 0 12px !important; font-size: 13px !important; }
  html body .reference-header::after { margin-top: 0 !important; }
}

/* ================= правки по замечаниям: полностью как в макапе ================= */
/* чип очков навыков не перекрывает переключатель видов */
@media (min-width: 900px) {
  html body .header-frame > .reference-tabs { margin-right: 74px; }
  html body .resource-strip { top: 14px !important; }
}
/* блок «Передать» при наведении на ячейки валюты убран: передача только кнопкой в карточке */
html body .transfer-hover-plate, html body .inventory-currency-card .currency-transfer { display: none !important; }
/* «Свободных очков» одной строкой со сбросом, без дубля «Останется» */
html body .planner-left { display: none !important; }
html body .character-stats .character-stats-heading { margin: 8px 0 0 !important; }
html body .stats-heading-meta { margin-top: 0 !important; }
html body .attribute-points-text { font: 400 12px/16px var(--hf-sans); color: var(--navia-muted); }
html body .attribute-planner { margin: 6px 0 0; }
html body .planner-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
html body .planner-slider { padding: 0 0 6px; }
/* ряд категорий как в макапе: шесть иконок по 56 px подряд, внизу линия активной */
html body .category-tabs { gap: 4px !important; justify-content: flex-start !important; }
html body .category-tab { width: 56px !important; min-width: 56px !important; padding: 6px 0 4px !important; justify-items: center; }
html body .category-tab[aria-selected="true"], html body .category-tab.is-active { background: linear-gradient(rgba(150, 182, 202, 0), rgba(150, 182, 202, .22)) !important; box-shadow: inset 0 -2px 0 var(--navia-accent) !important; }
/* выделенная ячейка сумки как в макапе: рамка, свечение и подсветка */
html body .inventory-grid .hf-slot[aria-selected="true"] { border-color: var(--navia-accent) !important; filter: brightness(1.12) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 1px var(--navia-accent), 0 0 14px rgba(150, 182, 202, .45) !important; transform: none !important; }
html body .gear-grid .gear-slot[aria-selected="true"] { border-color: var(--navia-accent) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 1px var(--navia-accent), 0 0 14px rgba(150, 182, 202, .45) !important; }
/* карточка предмета: без лишних значков под названием, ровные отступы */
html body .detail-nameplate > .rarity-mark, html body .detail-stage .detail-sockets, html body .detail-stage .rune-mini-row { display: none !important; }
html body .detail-nameplate img.rarity-icon { display: none !important; }
html body .detail-panel .detail-stat-list, html body .detail-panel .detail-rank { font: 400 13px/18px var(--hf-sans); color: var(--navia-text-2); }
/* поля ввода чисел и текста в стиле профиля */
html body .trade-qty { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 0 0 4px; }
html body .trade-qty label { display: contents; font: 400 13px/18px var(--hf-sans); color: var(--navia-text-2); }
html body input[type=number], html body input[type=text], html body input[type=search] { height: 36px; padding: 0 10px; border: 1px solid rgba(190, 212, 226, .22) !important; border-radius: 3px !important; background: #080b0d !important; color: var(--navia-text) !important; font: 500 14px/20px var(--hf-sans) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); transition: border-color .15s; -moz-appearance: textfield; }
html body input[type=number]::-webkit-outer-spin-button, html body input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html body input[type=number]:focus, html body input[type=text]:focus, html body input[type=search]:focus { outline: none; border-color: var(--navia-accent) !important; box-shadow: 0 0 0 1px var(--navia-accent), 0 0 10px rgba(150, 182, 202, .3); }
html body [data-trade-actions] .detail-button[data-trade-all] { height: 36px; min-height: 36px !important; padding: 0 16px; }
html body [data-transfer-dialog] .detail-button { min-height: 40px !important; }
/* карточка руны компактнее: меньше текста и отступов */
html body .rune-sec { margin-top: 6px; gap: 0; }
html body .rune-sec-title { font: 700 11px/14px var(--navia-serif); letter-spacing: .04em; margin: 0 0 2px; text-transform: none; color: var(--navia-text); }
html body .rune-row { grid-template-columns: 78px 1fr; gap: 6px; padding: 3px 6px; font: 400 12px/16px var(--hf-sans); }
html body .rune-row-label { font-size: 11px; }
html body .rune-lines { font-size: 11px; line-height: 15px; padding-left: 14px; }
html body .detail-runes h3, html body [data-equipment-panel] h3 { margin: 8px 0 4px; font-size: 13px; }
html body .detail-runes p, html body [data-equipment-panel] p { font-size: 11.5px; line-height: 15px; }
html body .detail-panel .rune-card, html body .detail-runes .rune-card { gap: 2px; }
html body .rune-spend { margin-top: 6px; gap: 4px; }
html body .rune-spend p { font-size: 11.5px; }

/* выделение ячейки сумки (усиленная специфичность, чтобы не перебивалось правилами поверхностей VK) */
html[data-client-surface] body .reference-app .inventory-grid .hf-slot[aria-selected="true"], html body .reference-app .inventory-grid .hf-slot[aria-selected="true"] {
  border-color: var(--navia-accent) !important; filter: brightness(1.12) !important; transform: none !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 1px var(--navia-accent), 0 0 14px rgba(150, 182, 202, .45) !important; background-color: #0e1417 !important;
}
html[data-client-surface] body .reference-app .inventory-grid .hf-slot:hover:not([aria-selected="true"]) { border-color: rgba(190, 212, 226, .38) !important; filter: brightness(1.08) !important; }
html[data-client-surface] body .reference-app .inventory-grid .hf-slot.is-rune-worn[aria-selected="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 2px var(--navia-accent), 0 0 0 4px #6fbf8a, 0 0 14px rgba(150, 182, 202, .45) !important; }

/* ===== персонаж и ячейки как в макете: 56 px, арт 40 px, подчёркивание редкости ===== */
@media (min-width: 761px) {
  html body .gear-grid { grid-template-columns: 56px minmax(0, 1fr) 56px !important; grid-template-rows: repeat(4, 56px) !important; grid-auto-rows: 56px !important; gap: 8px !important; margin: 0 0 16px !important; }
  html body .gear-grid .gear-slot { width: 56px !important; height: 56px !important; border-radius: 9px !important; }
  html body .gear-grid .gear-art { inset: 8px !important; }
  html body .gear-grid .gear-slot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75), inset 0 -3px 0 var(--rc, transparent), inset 0 -18px 18px -16px color-mix(in srgb, var(--rc, transparent) 40%, transparent) !important; }
  html body .gear-grid .gear-slot.is-empty, html body .gear-grid .gear-slot.is-locked { border-style: dashed !important; opacity: .55; }
  html body .gear-grid .gear-slot[data-rarity="common"] { --rc: var(--hf-common); }
}
/* строки обвесов как в макете: слева отметка, название и подпись, справа действие */
html body .equipment-place-row { position: relative; grid-template-columns: 24px 1fr auto; grid-template-areas: "mark name act" "mark info act"; padding: 10px 12px 10px 10px; column-gap: 10px; }
html body .equipment-place-row::before { content: "+"; grid-area: mark; align-self: center; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(150, 182, 202, .4); font: 400 14px/1 var(--hf-sans); color: var(--navia-muted); }
html body .equipment-place-row.is-filled::before { content: "✓"; color: var(--navia-text); border-color: var(--navia-accent); }
html body .equipment-place-row > span:first-child { font: 500 13px/18px var(--hf-sans) !important; }

/* пустые ячейки как в макете: сплошная рамка, контурная иконка по типу места */
@media (min-width: 761px) {
  html body .gear-grid .gear-slot.is-empty, html body .gear-grid .gear-slot.is-locked { border-style: solid !important; opacity: .5; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px, auto !important; }
  html body .gear-grid .gear-slot.is-empty[data-gear-slot^="ring"], html body .gear-grid .gear-slot.is-locked[data-gear-slot^="ring"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7c86' stroke-width='1.6'%3E%3Ccircle cx='12' cy='14' r='6'/%3E%3Cpath d='M9 6l3-3 3 3'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 42%, rgba(60, 40, 38, .55), rgba(9, 7, 7, .96) 78%) !important; }
  html body .gear-grid .gear-slot.is-empty[data-gear-slot^="earring"], html body .gear-grid .gear-slot.is-locked[data-gear-slot^="earring"], html body .gear-grid .gear-slot.is-empty[data-gear-slot="amulet"], html body .gear-grid .gear-slot.is-locked[data-gear-slot="amulet"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7c86' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M12 10v5'/%3E%3Ccircle cx='12' cy='18' r='2.5'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 42%, rgba(60, 40, 38, .55), rgba(9, 7, 7, .96) 78%) !important; }
}
html body .hp-bar { border-radius: 2px !important; height: 8px; }
html body .hp-bar i { border-radius: 0 !important; }
/* строки обвесов компактнее, как в макете: одна строка подписи, мелкое действие справа */
html body .equipment-place-row { padding: 7px 10px !important; column-gap: 10px !important; min-height: 48px; }
html body .equipment-place-row::before { width: 18px; height: 18px; font-size: 13px; }
html body .equipment-place-row > span:first-child { font: 700 13px/17px var(--hf-sans) !important; color: var(--navia-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .equipment-place-row > span:nth-child(2), html body .equipment-place-row > .rune-option:nth-child(2) { font: 400 12px/16px var(--hf-sans) !important; color: var(--navia-muted) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; text-align: left; }
html body .equipment-place-row > .rune-option:last-child { font: 400 12px/16px var(--hf-sans) !important; color: var(--navia-text-2) !important; white-space: nowrap; }
html body .equipment-place-row > .rune-option > span { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
html body .equipment-place-row > .rune-option:nth-child(2) { min-width: 0; }

/* ===== кнопки как в макете: мазок из пака (btndark), градиент, Alegreya SC 15 px, высота 44 px ===== */
html body .detail-button, html body .rune-buttons .rune-option, html body .planner-apply, html body [data-transfer-dialog] .detail-button, html body [data-trade-actions] .detail-button, html body .detail-actions .detail-button, html body .detail-actions .rune-buttons .rune-option {
  position: relative !important; isolation: isolate; display: inline-flex !important; align-items: center; justify-content: center; text-align: center;
  min-height: 44px !important; height: auto !important; padding: 8px 22px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; filter: none !important;
  color: var(--navia-text) !important; font: 700 15px/1.15 var(--navia-serif) !important; letter-spacing: .02em !important; text-transform: none !important; text-shadow: 0 1px 2px #000;
  cursor: pointer; transition: transform .16s var(--navia-spring), color .15s;
}
html body .detail-button > span, html body .rune-buttons .rune-option > span, html body .planner-apply > span { font: inherit !important; letter-spacing: inherit !important; text-transform: none !important; color: inherit !important; display: inline !important; white-space: normal; }
html body .detail-button::before, html body .rune-buttons .rune-option::before, html body .planner-apply::before { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#1d252c, #0a0e11);
  -webkit-mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; transition: filter .15s; }
html body .detail-button:hover:not([disabled])::before, html body .rune-buttons .rune-option:hover:not([disabled])::before, html body .planner-apply:hover:not([disabled])::before { filter: brightness(1.4); }
html body .detail-button:active:not([disabled]), html body .rune-buttons .rune-option:active:not([disabled]), html body .planner-apply:active:not([disabled]) { transform: scale(.96); }
html body .detail-button[disabled], html body .rune-buttons .rune-option[disabled], html body .planner-apply[disabled] { opacity: .5; cursor: default; }
/* основное и опасное действие: как .btn.primary / .btn.warn в макете */
html body .planner-apply::before, html body .detail-button[data-transfer-check]::before, html body .detail-button[data-equipment-mutation="equip"]::before { background: linear-gradient(#46627a, #1f3040); }
html body .detail-button.danger::before, html body .rune-buttons .rune-option.is-danger::before { background: linear-gradient(#35495a, #16212b) !important; }
html body .detail-button.danger, html body .rune-buttons .rune-option.is-danger { color: #f0f8fc !important; }
html body [data-transfer-confirm]::before { background: linear-gradient(#6b8fa8, #2d4558) !important; }
html body [data-trade-actions] .detail-button[data-trade-all] { min-height: 36px !important; padding: 4px 16px !important; font-size: 13px !important; }
/* кнопка «Сбросить выбор» и малые действия — тонкая рамка как «Сброс» в макете */
html body .planner-clear { min-height: 44px; border: 1px solid var(--navia-line) !important; background: none !important; color: var(--navia-text-2) !important; font: 700 14px/1.15 var(--navia-serif) !important; padding: 8px 16px; }

/* ===== правая панель и окна без мыла: рамка из пака только по краям, середина чистая (без растяжения картинки 272 px) ===== */
html body .detail-panel { border-image: url("/assets/shared/ui/obj.webp") 70 / 30px 24px 26px 24px stretch !important; background: linear-gradient(#0e1418, #090c0f) !important; background-clip: padding-box !important; border-width: 30px 24px 26px 24px !important; border-image-outset: 0 !important; padding: 0 0 4px !important; margin: 0 !important; filter: none !important; }
html[data-client-surface] body .reference-main > .detail-panel { border-width: 30px 24px 26px 24px !important; }
html body [data-transfer-dialog] { background: linear-gradient(#0e1418, #090c0f) !important; border: 30px solid transparent !important; border-width: 30px 24px 26px 24px !important; border-image: url("/assets/shared/ui/obj.webp") 70 / 30px 24px 26px 24px stretch !important; padding: 4px 6px 6px !important; background-clip: padding-box !important; }

/* ===== шаблон макета: ячейки .cell/.slot/.card берутся из mock-ui.css, здесь только каркас страницы ===== */
html body .gear-grid::before { content: none !important; display: none !important; }
html body .reference-main > .card { display: block !important; position: relative !important; top: auto !important; right: auto !important; width: auto !important; max-height: none !important; overflow: visible !important; align-self: start; grid-row: 1; }
@media (min-width: 900px) { html body .reference-main > .card { grid-column: 3 !important; position: sticky !important; top: 12px !important; } .card-x { display: none !important; } }
@media (max-width: 899px) { html body .reference-main > .card { grid-column: 1 !important; grid-row: auto !important; } }
html body .cell-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 700 18px/1 var(--navia-serif); color: var(--navia-text-2); }
html body .cell .rune-card-kind { position: absolute; z-index: 3; left: 4px; bottom: 3px; }
html body .cell .rune-card-worn { display: none !important; }
html body .cell.is-rune-worn { border-color: #6fbf8a !important; box-shadow: 0 0 0 1px #6fbf8a, 0 0 10px rgba(111, 191, 138, .35); }
html body .cell.is-rune-worn[aria-selected="true"] { box-shadow: 0 0 0 2px var(--brass), 0 0 0 4px #6fbf8a, 0 0 14px rgba(150, 182, 202, .45); }
@media (min-width: 900px) and (max-width: 1099px) {
  html body .reference-tab span { display: none !important; }
  html body .reference-tab { padding: 0 10px !important; }
  html body .header-frame > .reference-tabs { margin-right: 56px !important; }
  html body .header-frame, html[data-client-surface] body .header-frame { grid-template-columns: 260px auto minmax(0, 1fr) !important; }
}
@media (min-width: 900px) and (max-width: 1099px) { html body .resource-strip { display: none !important; } html body .header-frame > .reference-tabs { margin-right: 0 !important; } }

/* ===== руна в сумке: маленький квадратик с буквой А/П/Д; надетая руна — квадратик зелёный ===== */
html body .cell .rune-card-kind { position: absolute; z-index: 3; left: 4px; bottom: 4px; display: grid; place-items: center; min-width: 13px; width: 13px; height: 13px; padding: 0; border: 1px solid #a5bfd2; border-radius: 3px; background: rgba(8, 11, 13, .88); color: #a5bfd2; font: 700 8.5px/1 var(--hf-sans); text-transform: uppercase; }
html body .cell.is-rune-worn .rune-card-kind { border-color: #6fbf8a; background: #1d4a31; color: #c9f2d6; box-shadow: 0 0 6px rgba(111, 191, 138, .55); }
html body .cell.is-rune-worn { border-color: var(--navia-line) !important; box-shadow: none; }
html body .cell.is-rune-worn[aria-selected="true"] { border-color: var(--brass) !important; box-shadow: 0 0 0 1px var(--brass), 0 0 14px rgba(150, 182, 202, .45); }
html body .cell .rune-card-worn { display: none !important; }

/* ===== фильтр арта как в макете, но яркость считается по самой картинке (--bri): тёмные как раньше, светлые темнее ===== */
html body .cell img, html body .slot img, html body .card .well img { filter: var(--cc, none) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(var(--bri, 1.22)) saturate(1.12) contrast(1.05); }
html body .cell:hover img, html body .cell[aria-selected="true"] img, html body .slot:hover img, html body .slot[aria-selected="true"] img { filter: var(--cc, none) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(calc(var(--bri, 1.22) + .08)) saturate(1.15) contrast(1.05); }
html body .cell.rune img, html body .cell.is-rune-card img { filter: var(--cc, none) drop-shadow(0 2px 3px rgba(0, 0, 0, .65)) brightness(calc(var(--bri, 1.12) - .06)) saturate(1.08); }

/* руна: кружок редкости не нужен, по арту видно, что это за руна */
html body .cell.is-rune-card::after, html body .cell.is-rune-card::before { display: none !important; }

/* название руны наверху ячейки, чтобы руны различались без открытия карточки */
html body .cell .rune-card-name { position: absolute; z-index: 3; left: 3px; right: 3px; top: 3px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/12px var(--navia-serif); letter-spacing: .01em; color: var(--navia-text); text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }

/* причина, по которой снаряжение сейчас нельзя менять (бой, лаз, восстановление), заметна сразу */
html body [data-equipment-panel] p[role="status"]:not(:empty) { margin: 0 0 10px; padding: 8px 10px; border: 1px solid rgba(214, 160, 96, .55); border-radius: 6px; background: rgba(214, 160, 96, .1); color: #f0d4a8; font: 600 12px/16px var(--hf-sans); }

/* ===== телефон: карточка предмета снова выезжает снизу «шторкой» поверх затемнения ===== */
html[data-client-surface="vk-mobile"] body .reference-main > .card,
html[data-client-surface="mobile-web"] body .reference-main > .card { position: fixed !important; z-index: 71; left: 8px; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto !important; max-height: min(78dvh, 640px) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; grid-column: auto !important; transform: translateY(calc(100% + 90px)); visibility: hidden; pointer-events: none; transition: transform .26s cubic-bezier(.2, .75, .2, 1), visibility 0s linear .26s; }
html[data-client-surface="vk-mobile"] body .reference-app[data-detail-open="true"] .reference-main > .card,
html[data-client-surface="mobile-web"] body .reference-app[data-detail-open="true"] .reference-main > .card { transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
html[data-client-surface="vk-mobile"] body .card-x, html[data-client-surface="mobile-web"] body .card-x { display: grid !important; position: sticky; top: 0; margin: 0 0 -28px auto; z-index: 3; }
html body .card .actions > [data-equipment-panel] { grid-column: 1 / -1; min-width: 0; }

/* ===== телефон: прокручивается сама область раздела, а не внутренние блоки ===== */
html[data-client-surface="vk-mobile"] body .reference-main,
html[data-client-surface="mobile-web"] body .reference-main { overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; padding-bottom: 12px; }
html[data-client-surface="vk-mobile"] body .equipment-rail, html[data-client-surface="vk-mobile"] body .inventory-board,
html[data-client-surface="mobile-web"] body .equipment-rail, html[data-client-surface="mobile-web"] body .inventory-board { height: auto !important; overflow: visible !important; }

/* ===== бестиарий: карточка предмета не показывается поверх книги ===== */
html body .reference-app[data-active-view="bestiary"] .reference-main > .card { display: none !important; }

/* ===== телефон: нижнее меню убрано, разделы «Персонаж / Инвентарь / Бестиарий» вынесены в шапку ===== */
@media (max-width: 899px) {
  html[data-client-surface] body .mobile-reference-nav, html body .mobile-reference-nav { display: none !important; }
  html body .header-frame > .reference-tabs, html[data-client-surface] body .header-frame > .reference-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1 / -1; grid-row: 3; justify-self: stretch; width: 100%; margin: 0 !important; gap: 0; border-bottom: 1px solid var(--navia-line) !important; }
  html body .reference-tabs .reference-tab { justify-content: center; padding: 0 6px !important; min-width: 0; }
  html body .reference-tabs .reference-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 630px) and (max-width: 899px) {
  html body .reference-tabs .reference-tab[data-hf-view="profile"] { display: none !important; }
  html body .header-frame > .reference-tabs, html[data-client-surface] body .header-frame > .reference-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  html body .reference-tabs .reference-tab { font-size: 11.5px !important; letter-spacing: 0 !important; gap: 4px !important; padding: 0 3px !important; }
  html body .reference-tabs .reference-tab svg { width: 14px !important; height: 14px !important; flex: none; }
}