* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #14161a;
  color: #e6e6e6;
  margin: 0;
  padding: 0 16px 40px;
}
header {
  position: sticky;
  top: 0;
  background: #14161a;
  padding: 16px 0 10px;
  z-index: 5;
  border-bottom: 1px solid #2a2d33;
}
h1 { font-size: 20px; margin: 0 0 12px; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input[type="text"] {
  flex: 1; min-width: 200px; padding: 8px 10px;
  background: #1e2126; border: 1px solid #333740; color: #e6e6e6; border-radius: 6px;
}
select, input[type="number"] {
  padding: 8px 10px; background: #1e2126; border: 1px solid #333740;
  color: #e6e6e6; border-radius: 6px; color-scheme: dark; font: inherit;
}
input[type="number"] { width: 90px; }
input[type="number"]:focus, input[type="text"]:focus, select:focus { outline: 1px solid #3a6df0; border-color: #3a6df0; }
button {
  padding: 8px 14px; background: #3a6df0; border: none; color: white;
  border-radius: 6px; cursor: pointer; font-size: 14px;
}
button:hover { background: #4c7cf5; }
button:disabled { opacity: 0.5; cursor: default; }
.auto-refresh { font-size: 13px; color: #9aa0aa; display: flex; align-items: center; gap: 4px; }
.city-toggles { display: flex; gap: 10px; font-size: 13px; color: #9aa0aa; align-items: center; }
.city-toggles label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

.suggestions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.suggestion-item {
  background: #1e2126; border: 1px solid #333740; padding: 4px 8px; border-radius: 4px;
  font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.suggestion-item:hover { background: #2a2d33; }
.suggestion-item.selected { background: #244a2c; border-color: #3f8a4e; }
.item-icon-sm { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

.status { margin: 10px 0; font-size: 13px; color: #9aa0aa; }

table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid #23262b; }
th:first-child, td:first-child { text-align: left; }
th { cursor: pointer; color: #9aa0aa; font-weight: 600; user-select: none; }
th:hover { color: #e6e6e6; }
tbody tr:hover { background: #1a1d22; }
.cell-min { color: #7ee787; }
.cell-max { color: #ff9b7a; }
.cell-best-buy { background: rgba(126,231,135,0.12); font-weight: 700; }
.cell-best-sell { background: rgba(255,155,122,0.12); font-weight: 700; }
.cell-empty { color: #555; }
.remove-btn { background: transparent; color: #999; border: none; cursor: pointer; font-size: 16px; padding: 0 4px; }
.remove-btn:hover { color: #ff6b6b; }

.name-cell { white-space: nowrap; }
.item-icon { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: 8px; }

.chart-btn { background: transparent; border: none; color: #7aa2f7; cursor: pointer; font-size: 15px; padding: 0 4px; }
.chart-btn:hover { color: #a9c2fb; }
.chart-row td { background: #16181c; padding: 10px; }
.chart-panel { display: flex; flex-direction: column; gap: 6px; }
.chart-panel-controls { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #9aa0aa; }
.chart-panel-controls select { background: #1e2126; border: 1px solid #333740; color: #e6e6e6; border-radius: 4px; padding: 3px 6px; }
.sparkline-wrap { display: flex; align-items: flex-end; gap: 2px; height: 60px; padding: 4px 0; }
.spark-bar { flex: 1; background: #3a6df0; min-width: 2px; border-radius: 1px 1px 0 0; }
.spark-bar.zero { background: #2a2d33; height: 1px !important; }
.chart-summary { font-size: 12px; color: #9aa0aa; }
.chart-empty { font-size: 12px; color: #666; padding: 8px 0; }

.spark-tooltip {
  position: fixed; display: none; background: #0d0f12; border: 1px solid #3a6df0;
  border-radius: 6px; padding: 6px 10px; font-size: 12px; line-height: 1.5; color: #e6e6e6;
  pointer-events: none; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.4); white-space: nowrap;
}

.calc-panel { margin-top: 16px; padding: 14px; background: #1a1d22; border: 1px solid #2a2d33; border-radius: 8px; }
.calc-panel h2 { font-size: 16px; margin: 0 0 6px; }
.calc-note { font-size: 12px; color: #9aa0aa; margin: 0 0 10px; }
.calc-controls { display: flex; gap: 8px; flex-wrap: wrap; }
#calc-result { margin-top: 12px; font-size: 13px; }
.calc-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.calc-table th, .calc-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid #23262b; }
.calc-table th:first-child, .calc-table td:first-child { text-align: left; }
.calc-profit-pos { color: #7ee787; font-weight: 700; }
.calc-profit-neg { color: #ff6b6b; }
.calc-best-row { background: rgba(126,231,135,0.08); }

.scanner-panel { border-color: #3a6df0; }
#scan-result, #bm-scan-result, #craft-scan-result, #refine-scan-result { margin-top: 12px; font-size: 13px; }
.scan-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.scan-table th, .scan-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid #23262b; }
.scan-table th:first-child, .scan-table td:first-child { text-align: left; }
.scan-spread-hot { color: #7ee787; font-weight: 700; }
.scan-stale { color: #cc8844; }
.scan-add-btn {
  background: #244a2c; border: 1px solid #3f8a4e; color: #7ee787;
  border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer;
}
.scan-add-btn:hover { background: #2d5a36; }
.scan-add-btn:disabled { opacity: 0.4; cursor: default; }

.craft-selected { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.craft-selected img { width: 32px; height: 32px; object-fit: contain; }
.craft-controls-row { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.craft-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #9aa0aa; }
.craft-field select, .craft-field input { padding: 7px 8px; background: #1e2126; border: 1px solid #333740; color: #e6e6e6; border-radius: 6px; font-size: 13px; }
.craft-field input { width: 90px; }
.craft-recipe-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.craft-recipe-table th, .craft-recipe-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid #23262b; font-size: 13px; }
.craft-recipe-table th:first-child, .craft-recipe-table td:first-child { text-align: left; }
.craft-recipe-table .missing { color: #ff6b6b; }
.ench-tag { color: #b98aff; font-size: 11px; border: 1px solid #6a4a9e; border-radius: 3px; padding: 1px 5px; margin-left: 6px; }
.craft-summary { margin-top: 12px; padding: 10px; background: #1a1d22; border-radius: 6px; font-size: 14px; }
.craft-summary .profit-pos { color: #7ee787; font-weight: 700; }
.craft-summary .profit-neg { color: #ff6b6b; font-weight: 700; }
.craft-summary-row { display: flex; justify-content: space-between; padding: 3px 0; }

/* Сортировка по клику на заголовок */
th.sortable { cursor: pointer; }
th.sortable:hover { color: #e6e6e6; }
.sort-arrow { color: #7ee787; font-size: 11px; }

/* Примерочная */
.fit-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
.fit-slot-label { font-size: 12px; color: #9aa0aa; margin-bottom: 4px; }
.fit-slot input { width: 100%; box-sizing: border-box; }
.scan-table td small { color: #9aa0aa; }

/* Мастерки */
.mastery-list { margin-top: 8px; }
.mastery-cat { border: 1px solid #2a2d33; border-radius: 6px; margin-bottom: 6px; background: #17191d; }
.mastery-cat summary { cursor: pointer; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mastery-cat summary input { width: 70px; }
.mastery-specs { padding: 4px 10px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; }
.mastery-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.mastery-row input { width: 70px; }

/* --- Навигация и панель настроек (общие для всех страниц) --- */
.site-nav {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid #2a2d33;
}
.site-title { font-size: 16px; font-weight: 700; color: #e6e6e6; text-decoration: none; margin-right: auto; }
.nav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-links a {
  padding: 7px 12px; border-radius: 6px; color: #9aa0aa; text-decoration: none; font-size: 14px;
}
.nav-links a:hover { background: #1e2126; color: #e6e6e6; }
.nav-links a.active { background: #244a2c; color: #7ee787; }
.nav-toggle { display: none; padding: 6px 12px; font-size: 18px; background: #1e2126; border: 1px solid #333740; }
.nav-toggle:hover { background: #2a2d33; }
.settings-bar {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 8px 0; font-size: 13px; color: #9aa0aa; border-bottom: 1px solid #23262b;
}
.premium-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.source-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; font-size: 13px; color: #9aa0aa; background: #1e2126; border: 1px solid #333740; border-radius: 999px; cursor: pointer; }
.source-toggle b { color: #7ee787; }
.source-toggle.is-live { border-color: #8a6d2a; }
.source-toggle.is-live b { color: #d8b45a; }
main { padding-top: 4px; }
.page-header { position: static; border-bottom: none; padding-top: 12px; }
.sub-title { font-size: 14px; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid #2a2d33; }
.sub-title:first-of-type { border-top: none; padding-top: 0; }

/* Таблицы прокручиваются внутри своей обёртки, а не всей страницей */
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* --- Смартфоны --- */
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; width: 100%; flex-direction: column; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 12px; }
}
@media (max-width: 640px) {
  body { padding: 0 10px 32px; }
  .controls, .calc-controls, .craft-controls-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .controls input[type="text"], .controls select, .controls button,
  .calc-controls select, .calc-controls button, .calc-controls input,
  .craft-field, .craft-field input, .craft-field select { width: 100%; min-width: 0; }
  button, select, input[type="text"], input[type="number"] { min-height: 40px; font-size: 15px; }
  .calc-panel { padding: 10px; }
  .fit-slots { grid-template-columns: 1fr; }
  .mastery-specs { grid-template-columns: 1fr; }
  .settings-bar { gap: 10px; }
  th, td { padding: 8px 8px; }
}

/* --- Таблицы на смартфонах: строка превращается в карточку "подпись: значение" --- */
@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; } /* подписи колонок берутся из data-label каждой ячейки */
  table { margin-top: 8px; }
  tbody tr {
    margin-bottom: 10px; padding: 6px 12px; border: 1px solid #2a2d33;
    border-radius: 8px; background: #1a1d22;
  }
  tbody tr:hover { background: #1a1d22; }
  td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 6px 0; text-align: right; white-space: normal; border-bottom: 1px dashed #23262b;
  }
  td:last-child { border-bottom: none; }
  td::before { content: attr(data-label); color: #9aa0aa; font-size: 12px; text-align: left; flex-shrink: 0; }
  td:not([data-label])::before { content: none; }
  /* первая ячейка (название предмета) — заголовок карточки */
  td:first-child { justify-content: flex-start; font-weight: 700; font-size: 14px; text-align: left; }
  td:first-child::before { content: none; }
  td:empty { display: none; }
  .chart-row { padding: 0; border: none; background: none; }
  .chart-row td { display: block; }
}

/* Панель сортировки для карточного режима таблиц (на десктопе скрыта — там работает клик по заголовку) */
.mobile-sort { display: none; }
@media (max-width: 640px) {
  .mobile-sort { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; color: #9aa0aa; }
  .mobile-sort label { display: flex; align-items: center; gap: 8px; flex: 1; }
  .mobile-sort select { flex: 1; min-width: 0; }
  .mobile-sort button { padding: 8px 14px; }
}

/* Компактная ширина: на широких экранах контент не растягивается на весь монитор */
#site-chrome, main, .page-header { max-width: 1400px; margin-left: auto; margin-right: auto; }
.mastery-cat summary input, .mastery-row input { width: 76px; padding: 5px 8px; }

/* Галочка внутри строки полей калькулятора */
.craft-check .check-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #e6e6e6; height: 34px; cursor: pointer; }
.craft-check .check-inline input { width: auto; }
.teleport-plan { margin-top: 12px; }

/* Разбивка терпеливой продажи и сравнение качеств */
.by-city summary, .quality-comparison summary { cursor: pointer; font-size: 13px; color: #9aa0aa; margin: 10px 0 4px; }
tr.below-threshold td { opacity: 0.45; }

/* Переключатель тира и сравнение по тирам */
.tier-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; font-size: 12px; color: #9aa0aa; }
.tier-comparison summary { cursor: pointer; font-size: 13px; color: #9aa0aa; margin: 10px 0 4px; }
tr.tier-row { cursor: pointer; }
tr.tier-row:hover td { background: #22262d; }

/* Цены материала по городам (сворачиваемый список) */
details.city-prices summary { cursor: pointer; }
details.city-prices ul { margin: 4px 0 0; padding-left: 16px; text-align: left; font-size: 12px; color: #9aa0aa; }
details.city-prices small { color: #cc8844; }

/* Всплывающие уведомления и диалог подтверждения (вместо alert/confirm) */
#toast-box { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: #1e2126; border: 1px solid #333740; border-left: 4px solid #3a6df0; color: #e6e6e6; padding: 10px 14px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.toast-error { border-left-color: #ff6b6b; }
.toast-ok { border-left-color: #7ee787; }
.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }
.dialog { background: #1a1d22; border: 1px solid #333740; border-radius: 10px; padding: 18px 20px; max-width: 420px; width: 100%; }
.dialog p { margin: 0 0 16px; font-size: 14px; line-height: 1.45; }
.dialog-buttons { display: flex; gap: 10px; justify-content: flex-end; }
.dialog-cancel { background: #2a2d33; }
.dialog-cancel:hover { background: #363a42; }

/* Аккордеон инструментов на странице «Крафт» (экспериментально, ★ бета): калькулятор всегда на виду, сканеры — по клику */
.beta-star { font-size: 11px; font-weight: 600; color: #cc8844; border: 1px solid #6b4a25; border-radius: 4px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; }
details.tool-accordion { border: 1px solid #2a2d33; border-radius: 8px; margin-top: 12px; background: #17191d; }
details.tool-accordion > summary { cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
details.tool-accordion > summary::before { content: '▸'; color: #9aa0aa; transition: transform .15s; }
details.tool-accordion[open] > summary::before { transform: rotate(90deg); }
details.tool-accordion > summary:hover { color: #7ee787; }
details.tool-accordion > *:not(summary) { margin-left: 14px; margin-right: 14px; }
details.tool-accordion[open] { padding-bottom: 14px; }

.inline-field { flex-direction: row; align-items: center; gap: 6px; }

/* Лучшая находка сканера */
tr.top-find td { background: rgba(126, 231, 135, 0.08); }
tr.top-find td:first-child { box-shadow: inset 3px 0 0 #7ee787; }
.top-badge { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #14161a; background: #7ee787; border-radius: 4px; padding: 1px 6px; vertical-align: middle; }

/* Широкие таблицы сканеров (7–9 колонок) помещаются без вечной горизонтальной прокрутки */
.calc-panel { max-width: 100%; }
.fit-slot .craft-selected img { width: 40px; height: 40px; }
#fit-result .item-icon-sm { width: 32px; height: 32px; }

/* Материалы: невозвращаемые и итог закупки */
.no-return { font-size: 10px; color: #cc8844; border: 1px solid #6b4a25; border-radius: 3px; padding: 0 4px; margin-left: 6px; white-space: nowrap; }
.refine-source { color: #7ecba1; cursor: help; }
tr.materials-total td { font-weight: 700; border-top: 2px solid #333740; }

/* План закупки по городам в ячейке материала */
details.acquire-plan { margin-top: 4px; }
details.acquire-plan summary { cursor: pointer; font-size: 11px; color: #9aa0aa; }
details.acquire-plan ul { margin: 4px 0 0; padding-left: 14px; text-align: left; font-size: 12px; }
details.acquire-plan small, .plan-skipped { color: #9aa0aa; }

/* «Своё…» значение рядом с выпадающим списком (доля рынка, период истории) */
.custom-value { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #9aa0aa; }
.custom-value input { width: 80px; }
.craft-field .custom-value { margin-top: 4px; }

/* Ручной план продажи */
input.plan-qty { width: 90px; padding: 4px 6px; background: transparent; border: 1px dashed #333740; text-align: right; }
input.plan-qty:hover, input.plan-qty:focus { background: #1e2126; border-style: solid; }
input.plan-qty.is-manual { border-color: #cc8844; color: #ffd8a8; }
.plan-summary { margin-top: 8px; font-size: 13px; display: grid; gap: 4px; }
.plan-reset { margin-left: 10px; padding: 3px 10px; font-size: 12px; background: #2a2d33; }

td.plan-check { width: 1%; text-align: center; }
td.plan-check input { width: auto; }

/* Атрибут hidden должен скрывать и flex/grid-элементы (поля формы скана прячутся в зависимости от режима) */
[hidden] { display: none !important; }
.custom-value input.invalid { border-color: #ff6b6b; outline: none; }
.city-bonus { color: #7ee787; font-weight: 700; font-size: 12px; white-space: nowrap; }
.city-prices .city-out { color: #7d8791; }
.manual-price { width: 110px; margin-top: 4px; }
.manual-price.is-manual { border-color: #7ee787; }
.lot-log { margin-top: 4px; min-width: 190px; }
.lot-row { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.lot-row input { width: 72px; }
.lot-row .lot-price { width: 82px; }
.lot-del, .lot-add { padding: 2px 8px; }
.lot-sum { margin-top: 2px; }

/* --- Калькулятор крафта: карточки ввода, сводка цикла и хронология «Сырьё → Продажа» (только внутри .craft-calc-shell) --- */
.craft-calc-shell { --cc-accent: #3a6df0; --cc-accent-2: #6d94f7; --cc-panel: #1e2126; --cc-line: #2f333b; --cc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.craft-calc-shell .craft-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.craft-calc-shell .craft-card { background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 10px; padding: 12px 14px 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.craft-calc-shell .craft-card h3 { margin: 0; font: 600 12px/1 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa0aa; }
.craft-calc-shell .craft-card .craft-controls-row { margin-top: 10px; gap: 12px; }
.craft-calc-shell .craft-run-row { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.craft-calc-shell #craft-run { padding: 10px 28px; font-weight: 700; border: 1px solid #2c54b8; border-radius: 8px; color: #fff; cursor: pointer; background: linear-gradient(180deg, var(--cc-accent-2), var(--cc-accent)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 3px 10px rgba(58, 109, 240, 0.35); }
.craft-calc-shell #craft-run:hover { filter: brightness(1.08); }
.craft-calc-shell .craft-extra { margin-top: 12px; }
.craft-calc-shell .craft-extra > summary { cursor: pointer; color: #9aa0aa; font-size: 13px; }

.craft-calc-shell .craft-scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 6px; }
.craft-calc-shell .sb-cell { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.craft-calc-shell .sb-cost { border-color: #35508f; background: linear-gradient(160deg, rgba(58, 109, 240, 0.14), var(--cc-panel) 70%); }
.craft-calc-shell .sb-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa0aa; }
.craft-calc-shell .sb-value { font-family: var(--cc-serif); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.craft-calc-shell .sb-value.profit-pos { color: #7ee787; }
.craft-calc-shell .sb-value.profit-neg { color: #ff6b6b; }
.craft-calc-shell .sb-cell small { color: #8b919c; font-size: 12px; }

.craft-calc-shell .craft-flow { list-style: none; margin: 14px 0 0; padding: 0; }
.craft-calc-shell .craft-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding-bottom: 18px; }
.craft-calc-shell .craft-step::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--cc-accent), rgba(58, 109, 240, 0)); }
.craft-calc-shell .craft-step:last-child { padding-bottom: 0; }
.craft-calc-shell .craft-step:last-child::before { display: none; }
.craft-calc-shell .step-badge { width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; font: 700 18px var(--cc-serif); color: #fff; background: linear-gradient(160deg, var(--cc-accent-2), var(--cc-accent) 60%, #2a4fb5); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.craft-calc-shell .step-title { margin: 0 0 4px; font: 700 20px var(--cc-serif); }
.craft-calc-shell .step-title small { font: 400 12px system-ui, sans-serif; color: #8b919c; margin-left: 8px; }
.craft-calc-shell .step-body { min-width: 0; }
.craft-calc-shell .craft-recipe-table thead th { text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; color: #9aa0aa; }
.craft-calc-shell .craft-summary { background: var(--cc-panel); border: 1px solid var(--cc-line); border-radius: 8px; }

.craft-calc-shell .craft-whatif { margin-top: 22px; padding: 12px 14px; border: 1px dashed #3a3f48; border-radius: 10px; }
.craft-calc-shell .whatif-title { margin: 0 0 4px; font: 700 16px var(--cc-serif); }
.craft-calc-shell .whatif-title small { font: 400 12px system-ui, sans-serif; color: #8b919c; margin-left: 8px; }

@media (max-width: 640px) {
  .craft-calc-shell .craft-step { grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; }
  .craft-calc-shell .step-badge { width: 30px; height: 34px; font-size: 14px; }
  .craft-calc-shell .craft-step::before { left: 14px; top: 36px; }
  .craft-calc-shell .sb-value { font-size: 24px; }
  .craft-calc-shell .craft-run-row { justify-content: stretch; }
  .craft-calc-shell #craft-run { width: 100%; }
}
.craft-calc-shell .craft-card .craft-field { min-width: 0; max-width: 100%; }
.craft-calc-shell .craft-card .craft-field select { max-width: 100%; }

/* Выбор предмета по категории: ровные колонки по подкатегориям */
.suggestions.as-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.suggestion-column { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; padding: 8px; background: #1a1d22; border: 1px solid #2a2d33; border-radius: 8px; }
.suggestion-column h4 { position: sticky; top: -8px; margin: -8px -8px 4px; padding: 8px; background: #1e2126; border-bottom: 1px solid #2a2d33; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #9aa0aa; }
.suggestion-column h4 small { color: #6f7682; margin-left: 4px; }

/* Иконки крупнее: рамка и фон в игре показывают тир, зачарование и качество — гир узнаётся по иконке */
.item-icon-sm { width: 28px; height: 28px; }
.craft-selected img { width: 64px; height: 64px; }
.craft-selected { gap: 12px; font-size: 15px; }
.item-icon-lg { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.scan-item { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.scan-item-sub { color: #8b919c; }
.suggestion-item .item-icon-sm { width: 32px; height: 32px; }
.craft-calc-shell .plan-title { margin: 14px 0 0; font: 700 15px var(--cc-serif, Georgia, serif); }
.craft-calc-shell .plan-title small { font: 400 12px system-ui, sans-serif; color: #8b919c; margin-left: 6px; }
.plan-cities { text-align: left; font-size: 12px; }
.is-manual-note { color: #7ecba1; }
.gear-bonus-hint { color: #7ecba1; font-size: 11px; }
.copyable { cursor: copy; }
.copyable:hover { text-decoration: underline dotted; }

/* Экспериментальный функционал — свой голубой цвет (не путать с жёлтым «устарело» и красным «убыток») */
.exp-group { margin: 10px 0 0; padding: 8px 12px; border: 1px dashed #2f5f9e; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.exp-group legend { font-size: 12px; padding: 0 6px; }
.exp-label { color: #79b8ff; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.exp-badge { display: inline-block; font-size: 9px; letter-spacing: 0.06em; color: #79b8ff; border: 1px solid #2f5f9e; border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.exp-value { color: #79b8ff; }
.exp-value.scan-stale { color: #cc8844; }

/* Страница «Рефайн»: пикер полуфабриката */
.refine-picker { margin: 10px 0; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pk-col { background: #1a1d22; border: 1px solid #2a2d33; border-radius: 8px; padding: 8px; }
.pk-col h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #9aa0aa; }
.pk-col h4 small { color: #7ecba1; text-transform: none; letter-spacing: 0; }
.pk-row { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.pk-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; background: #1e2126; border: 1px solid #333740; color: #c8ccd4; border-radius: 6px; cursor: pointer; font-size: 11px; }
.pk-btn img { width: 30px; height: 30px; object-fit: contain; }
.pk-btn:hover { background: #2a2d33; }
.pk-btn.active { border-color: #3a6df0; background: rgba(58, 109, 240, 0.18); color: #fff; }
.pk-ench { padding: 2px 4px; }
.pk-plain { margin-top: 8px; }
.pk-plain summary { cursor: pointer; color: #9aa0aa; font-size: 13px; }
.refine-head { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 16px; }
.refine-head .item-icon-sm { width: 40px; height: 40px; vertical-align: middle; }
.refine-score { margin-bottom: 6px; }
.own-sell, .own-buy { width: 90px; }

/* Фракционные очки: режим скана и калькулятора (свой золотистый акцент — не путать с «экспериментом» и «устарело») */
.faction-group { margin: 10px 0 0; padding: 8px 12px; border: 1px dashed #8a6d2a; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: end; }
.faction-group legend { font-size: 12px; padding: 0 6px; color: #d8b45a; }
.faction-note { color: #8b919c; }
.faction-check { display: inline-flex; align-items: center; gap: 6px; color: #d8b45a; font-size: 13px; cursor: pointer; }
.faction-badge { margin-top: 8px; padding: 6px 12px; border: 1px solid #8a6d2a; border-radius: 8px; background: rgba(216, 180, 90, 0.08); color: #d8b45a; font-size: 13px; }
.faction-badge button { margin-left: 8px; }
.faction-plan { margin: 10px 0 16px; padding: 10px 12px; border: 1px solid #8a6d2a; border-radius: 8px; }
.faction-plan h4 { margin: 0 0 6px; color: #d8b45a; }
.faction-plan h4 small { color: #8b919c; font-weight: 400; margin-left: 6px; }
.faction-points { color: #d8b45a; }
.faction-tile { border-color: #8a6d2a; background: linear-gradient(160deg, rgba(216, 180, 90, 0.12), var(--cc-panel, #1e2126) 70%); }

/* План трат фракционных очков в калькуляторе: зелёные строки — в плане, серые — нет данных или менее выгодно */
.fp-shell { margin: 12px 0 18px; }
.fp-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 8px; }
.fp-head h4 { flex: 1 1 100%; margin: 0; }
.fp-add { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fp-add select, .fp-add button, #fp-mode { padding: 6px 8px; }
.fp-close { margin-left: auto; padding: 4px 10px; }
.fp-table td, .fp-table th { vertical-align: top; }
.fp-table tr.fp-off > td { color: #8b919c; }
.fp-table tr.fp-on > td { background: rgba(60, 170, 90, 0.16); }
.fp-table tr.fp-on > td:first-child { box-shadow: inset 3px 0 0 #3caa5a; }
.fp-qty b { color: #6fdc8c; }
.fp-input { width: 96px; padding: 4px 6px; border: 1px dashed #555c68; background: transparent; color: inherit; border-radius: 4px; }
.fp-input.is-manual { border-style: solid; border-color: #d8b45a; }
.fp-limit { width: 84px; margin-top: 3px; }
.fp-warn { color: #d8b45a; }
.fp-missing-row > td { background: rgba(216, 180, 90, 0.07); padding: 6px 10px; }
.fp-missing-title { color: #d8b45a; margin-right: 6px; }
.fp-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 3px 12px 3px 0; }
.fp-chip small { color: #8b919c; }
.fp-remove { margin-left: 6px; padding: 0 6px; }

/* Стек фракционных плащей в калькуляторе */
.stack-shell { margin: 12px 0 16px; }
.stack-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.stack-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 10px; border: 1px solid #333740; border-radius: 8px; }
.stack-card.is-on { border-color: #3caa5a; background: rgba(60, 170, 90, 0.12); }
.stack-card.is-off { opacity: 0.55; }
.stack-card.is-off:hover { opacity: 0.85; }
.stack-all { margin-left: 10px; padding: 3px 10px; font-size: 12px; }
.stack-scoreboard { margin-bottom: 10px; }
.stack-pick { display: inline-flex; align-items: center; gap: 8px; text-align: left; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 2px 4px; flex: 1 1 220px; }
.stack-qty-label, .stack-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #9aa0aa; }
.stack-qty { width: 80px; padding: 4px 6px; }
.stack-line { flex: 1 1 100%; font-size: 13px; color: #c9ced6; }
.stack-remove { margin-left: auto; padding: 2px 10px; background: transparent; border: 1px solid #555c68; color: #ff8a8a; }
.stack-buy summary { cursor: pointer; margin-top: 6px; color: #9aa0aa; }
.fp-send { margin: 8px 0; }
.fp-send button { padding: 8px 14px; font-weight: 600; }
.stack-missing:empty { display: none; }
.stack-missing { flex: 1 1 100%; padding-top: 4px; }
.stack-auto { margin: 4px 0 8px; color: #e6e6e6; }
.stack-sale { width: 96px; padding: 4px 6px; }