:root {
  --bg: #0f1216;
  --panel: #171b21;
  --panel2: #1d232b;
  --line: #2a323c;
  --text: #e6e9ee;
  --muted: #8b95a3;
  --accent: #4c9ffe;
  --good: #3fb950;
  --bad: #f85149;
  --mono: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* The attribute means hidden, whatever display a class gives the element.
   Without this, .bulk-bar's flex beat it: the bulk buttons showed outside
   manage mode, over cards that could not be picked. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.brand { color: var(--text); text-decoration: none; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.navlink { color: var(--accent); text-decoration: none; font-size: 13px; }
.navlink:hover { text-decoration: underline; }

/* Login ------------------------------------------------------------------ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { display: flex; flex-direction: column; gap: 12px; width: 300px;
              background: var(--panel); border: 1px solid var(--line);
              border-radius: 12px; padding: 24px; }
.login-card h1 { text-align: center; font-size: 18px; margin: 0 0 4px; }
.login-error { color: var(--bad); font-size: 13px; text-align: center; }

/* Settings --------------------------------------------------------------- */
.settings-block { background: var(--panel); border: 1px solid var(--line);
                  border-radius: 10px; padding: 16px; margin: 14px 0; }
.settings-block .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.settings-block .time { width: 120px; }
.settings-msg { font-size: 13px; color: var(--good); margin-top: 10px; min-height: 16px;
                white-space: pre-wrap; }
.settings-msg.err { color: var(--bad); }
.warn-box { background: rgba(248,81,73,.1); border: 1px solid var(--bad);
            border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 10px 0; }
.danger-btn { background: var(--panel); color: var(--bad); border: 1px solid var(--bad);
              border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.danger-btn:hover { background: rgba(248,81,73,.12); }
.status { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.timer {
  color: var(--muted); font-size: 12px; font-family: var(--mono);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
  min-width: 130px; text-align: center; white-space: nowrap;
}

.container { max-width: 1100px; margin: 0 auto; padding: 18px; }
h1 { font-size: 20px; margin: 4px 0 12px; }
.page-head { display: flex; align-items: center; justify-content: space-between;
             gap: 16px; flex-wrap: wrap; }
.search {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; font-size: 14px; min-width: 240px;
  flex: 0 1 320px;
}
.search:focus { outline: none; border-color: var(--accent); }
.search::placeholder { color: var(--muted); }
h2 { font-size: 15px; margin: 22px 0 8px; color: var(--muted);
     text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted); }
h2.collapsible { cursor: pointer; user-select: none; }
h2.collapsible:hover { color: var(--text); }
h2.collapsible .collapse-ind { color: var(--accent); font-size: 12px; }
.seeds-hint { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; }
.back { color: var(--accent); text-decoration: none; font-size: 13px; }
.back:hover { text-decoration: underline; }

/* Filters + bulk bar ----------------------------------------------------- */
.filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
           margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.filters label { display: flex; align-items: center; gap: 6px; }
.num-input { width: 90px; }
.bulk-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
            background: var(--panel); border: 1px solid var(--line);
            border-radius: 10px; padding: 10px 12px; margin: 10px 0;
            font-size: 13px; }
.bulk-bar .btn { padding: 5px 10px; font-size: 12px; }
.bulk-sep { flex: 0 0 1px; height: 20px; background: var(--line); }
#bulk-count { font-family: var(--mono); color: var(--muted); margin-right: 4px; }

.card .pick { position: absolute; top: 8px; right: 8px; z-index: 2; }
.card .pick input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.card { position: relative; }
.card.is-hidden { opacity: .55; border-style: dashed; }

/* Load page: state banner ------------------------------------------------ */
.state-banner { padding: 10px 14px; border-radius: 10px; font-size: 14px;
                border: 1px solid var(--line); background: var(--panel);
                margin: 12px 0 4px; }
.state-banner.good { border-color: var(--good); color: var(--good); }
.state-banner.warn { border-color: #d0a53c; color: #d0a53c; }
.state-banner.bad  { border-color: var(--bad); color: var(--bad); }

/* Load / health tiles ---------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
         gap: 12px; margin: 12px 0 8px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
        padding: 14px 16px; }
.tile-val { font-size: 24px; font-weight: 700; font-family: var(--mono); }
.tile-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
.tile-sub { font-size: 11px; color: var(--muted); margin-top: 6px; opacity: .8; }
.tile.good .tile-val { color: var(--good); }
.tile.warn .tile-val { color: #d0a53c; }
.tile.bad  .tile-val { color: var(--bad); }

/* Folder navigation ------------------------------------------------------ */
.folders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 14px; margin-top: 8px; }
.folder-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.folder-tile:hover { border-color: var(--accent); }
.folder-tile.drop { border-color: var(--accent); background: var(--panel2); }
.folder-tile .ficon { font-size: 42px; line-height: 1; }
.folder-tile .fname { font-weight: 600; font-size: 14px; text-align: center;
                      word-break: break-word; }
.folder-tile .fcount { color: var(--muted); font-size: 11px; font-family: var(--mono); }

.items-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.items-head .back-link { color: var(--accent); cursor: pointer; font-size: 13px; }
.items-head .back-link:hover { text-decoration: underline; }
.items-head .crumb { font-weight: 600; font-size: 15px; }
.card[draggable="true"] { cursor: default; }

/* Cards ------------------------------------------------------------------ */
.cards { margin-top: 8px; }
.folder-head { font-size: 12px; color: var(--muted); text-transform: uppercase;
               letter-spacing: .05em; margin: 18px 0 8px; border-bottom: 1px solid var(--line);
               padding-bottom: 4px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
              gap: 14px; }
.card {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card.paused { opacity: .6; }
.card-main {
  display: flex; gap: 12px; padding: 12px; text-decoration: none; color: var(--text);
}
.card-main:active { transform: translateY(1px); }
.card img, .card .noimg {
  width: 84px; height: 64px; object-fit: contain; flex: 0 0 auto;
  background: var(--panel2); border-radius: 6px;
}
.card .noimg { display: flex; align-items: center; justify-content: center;
               color: var(--muted); font-size: 11px; }
.card .name { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.card .meta { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.card .meta b { color: var(--text); font-weight: 600; }
.card .inactive { color: var(--bad); font-size: 10px; font-weight: 600;
                  border: 1px solid var(--bad); border-radius: 4px; padding: 0 4px; }
.card .tag { color: var(--muted); font-size: 10px; border: 1px solid var(--line);
             border-radius: 4px; padding: 0 4px; }
.card-ctrls { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px;
              border-top: 1px solid var(--line); }
.cbtn {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer;
}
.cbtn:hover { border-color: var(--accent); }
.cbtn.danger:hover { border-color: var(--bad); color: var(--bad); }

/* Head tools + management panel ----------------------------------------- */
.head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.select, .input {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
.select:focus, .input:focus { outline: none; border-color: var(--accent); }
.btn {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.active, .btn-primary { background: var(--accent); border-color: var(--accent);
                            color: #06101c; font-weight: 600; }
.manage-panel { background: var(--panel); border: 1px solid var(--line);
                border-radius: 10px; padding: 12px; margin: 12px 0; }
.add-form { display: flex; flex-direction: column; gap: 8px; }
.add-form .add-names { width: 100%; resize: vertical; font-family: var(--mono);
                       font-size: 13px; }
.usage-table td:first-child { color: var(--muted); width: 45%; }
.usage-table td:nth-child(2) { font-family: var(--mono); font-weight: 600; }
.usage-table td:nth-child(3) { color: var(--muted); font-size: 12px; }
.poll-msg { font-size: 12px; color: var(--good); margin-top: 6px; min-height: 15px; }
.poll-msg.err { color: var(--bad); }
.orders td:first-child { font-family: var(--mono); font-weight: 600; }
.orders .scoped { color: var(--accent); font-size: 11px; }
.orders-hint { font-size: 11px; margin: 6px 0 18px; min-height: 14px; }

/* Сетка полей настроек */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
              gap: 16px; }
.field-grid > label { display: flex; flex-direction: column; gap: 6px;
                      font-size: 13px; color: var(--muted); }
.cur-select { flex: 0 0 auto; }
.good-val { color: var(--good); }
.bad-val { color: var(--bad); }
.cur-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line);
           border-radius: 999px; padding: 3px 12px; cursor: pointer; font-size: 12px;
           font-family: var(--mono); }
.cur-btn:hover { border-color: var(--accent); color: var(--accent); }
.badge { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
         border: 1px solid var(--line); border-radius: 999px;
         padding: 1px 7px; color: var(--muted); vertical-align: middle; }
.bulk-input { width: 100%; resize: vertical; font-family: var(--mono);
              font-size: 13px; }
.add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.add-form .folder-input { flex: 0 1 220px; }
.chk { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.token-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.manage-msg { font-size: 12px; color: var(--good); margin-top: 8px; min-height: 16px; }
.manage-msg.err { color: var(--bad); }
.daterange { margin: 8px 0 4px; font-size: 13px; color: var(--muted); }
.daterange input { background: var(--panel); color: var(--text);
                   border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.daterange button { background: var(--accent); border: none; color: #06101c;
                    border-radius: 6px; padding: 5px 12px; cursor: pointer; font-weight: 600; }

/* Item page two-column layout ------------------------------------------- */
.item-body { display: flex; gap: 18px; align-items: flex-start; }
.item-main { flex: 1 1 auto; min-width: 0; }
.item-side { flex: 0 0 340px; }
.item-side h2 { margin-top: 0; }
table.latest { font-size: 12px; }
table.latest th, table.latest td { padding: 5px 8px; }
.item-side .est { color: var(--muted); font-size: 10px; }
@media (max-width: 900px) {
  .item-body { flex-direction: column; }
  .item-side { flex: 1 1 auto; width: 100%; }
}

/* Item header ------------------------------------------------------------ */
.item-header { display: flex; gap: 16px; align-items: center; margin: 10px 0; }
.item-icon { width: 120px; height: 90px; object-fit: contain;
             background: var(--panel2); border-radius: 8px; }
.copy-btn {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; font-size: 13px; cursor: pointer;
  vertical-align: middle; margin-left: 8px;
}
.copy-btn:hover { border-color: var(--accent); }
.copy-btn.copied { color: var(--good); border-color: var(--good); }
.overall { font-family: var(--mono); color: var(--muted); font-size: 13px; }
.overall b { color: var(--text); }

/* Controls --------------------------------------------------------------- */
.controls { display: flex; align-items: center; justify-content: space-between;
            margin: 14px 0 4px; }
.periods button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.periods button:first-child { border-radius: 6px 0 0 6px; }
.periods button:last-child { border-radius: 0 6px 6px 0; }
.periods button + button { border-left: none; }
.periods button.active { background: var(--accent); border-color: var(--accent);
                         color: #06101c; font-weight: 600; }

/* Tables ----------------------------------------------------------------- */
table.stat { width: 100%; border-collapse: collapse; background: var(--panel);
             border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
table.stat th, table.stat td { padding: 7px 10px; text-align: left;
                               border-bottom: 1px solid var(--line); }
table.stat th { color: var(--muted); font-weight: 600; font-size: 12px;
                background: var(--panel2); }
table.stat td.num, table.stat th.num { text-align: right; font-family: var(--mono); }
tr.agg-row { cursor: pointer; }
tr.agg-row:hover { background: var(--panel2); }
tr.agg-row .caret { color: var(--muted); display: inline-block; width: 12px;
                    transition: transform .12s; }
tr.agg-row.open .caret { transform: rotate(90deg); color: var(--accent); }

/* highlight extremes */
td.hi-max { color: var(--good); }
td.hi-min { color: var(--bad); }
.poll-note { font-size: 12px; max-width: 420px; white-space: normal; overflow-wrap: anywhere; }

/* velocity column colouring (relative to item's own median) */
td.vel { font-weight: 600; }
td.vel.vel-fast { color: var(--good); }
td.vel.vel-mid  { color: #d0a53c; }
td.vel.vel-slow { color: var(--bad); }

/* sortable header */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sortable.sorted { color: var(--accent); }
th.sortable .sort-ind { font-size: 10px; }

/* Detail (expanded) rows ------------------------------------------------- */
tr.detail-row > td { padding: 0; background: var(--panel2); }
.detail-wrap { padding: 6px 10px 10px 26px; }
table.detail { width: 100%; border-collapse: collapse; }
table.detail th, table.detail td { padding: 4px 8px; font-size: 12px;
    border-bottom: 1px solid var(--line); }
table.detail th { color: var(--muted); text-align: left; }
table.detail td.num { text-align: right; font-family: var(--mono); }
.est { color: var(--muted); font-size: 10px; }
.loading { color: var(--muted); padding: 6px 0; font-size: 12px; }
.sticker { display: inline-block; background: var(--panel); border: 1px solid var(--line);
           border-radius: 4px; padding: 0 4px; margin: 0 2px 2px 0; font-size: 11px; }

/* --- Анализ ордеров ------------------------------------------------------ */
.analysis-add { display: flex; gap: 8px; margin-bottom: 10px; }
.analysis-add .input { flex: 1; min-width: 0; }
.analysis-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.analysis-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.analysis-params { margin: 10px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--chip-bg, #21262d); font-size: 13px;
}
.chip-x {
  border: 0; background: transparent; cursor: pointer;
  color: inherit; opacity: .6; font-size: 15px; line-height: 1; padding: 0 2px;
}
.chip-x:hover { opacity: 1; color: #f85149; }

/* The status line: the page used to work in silence, so a button that was
   fetching looked exactly like one that was broken. */
#an-note {
  margin-top: 10px; min-height: 1.3em; font-size: 13px;
  padding: 6px 10px; border-radius: 6px;
  border-left: 3px solid transparent;
}
#an-note:empty { padding: 0; }
#an-note.muted { border-left-color: var(--muted, #8b949e); }
#an-note.ok { color: var(--good, #3fb950); border-left-color: var(--good, #3fb950); }
#an-note.err { color: var(--bad, #f85149); border-left-color: var(--bad, #f85149); }
.analysis-actions .btn[disabled], #an-add[disabled] { opacity: .5; cursor: progress; }
.analysis-params label small { display: block; margin-top: 3px; line-height: 1.35; }
tr.band-take td { background: rgba(63, 185, 80, .07); }
tr.band-skip td { opacity: .65; }

.build { font-size: 11px; opacity: .5; }

.banner {
  margin: 12px auto; max-width: 1200px; padding: 10px 14px;
  border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.banner.warn {
  background: rgba(210, 153, 34, .12);
  border-left: 3px solid var(--warn, #d29922);
}
.banner code { font-size: 12px; }

.over { color: var(--warn, #d29922); font-size: 11px; }

tr.act-place td { background: rgba(63, 185, 80, .08); }
tr.act-raise td { background: rgba(210, 153, 34, .10); }
tr.act-cancel td { background: rgba(248, 81, 73, .08); }
tr.act-keep td { opacity: .6; }

.arm-line { display: block; margin: 8px 0; font-size: 13px; }

.input.inline-num { width: 5em; display: inline-block; padding: 2px 6px; }

.preview { font-size: 11px; opacity: .8; margin: 4px 0; white-space: pre-wrap; word-break: break-all; }

/* Журнал ордеров */
.journal-controls { display: flex; gap: 16px; align-items: flex-end;
                    flex-wrap: wrap; }
.journal-controls label { display: flex; flex-direction: column; gap: 6px;
                          font-size: 13px; color: var(--muted); }
.journal-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.journal-tile { background: var(--panel2); border: 1px solid var(--line);
                border-radius: 10px; padding: 10px 16px; min-width: 96px;
                display: flex; flex-direction: column; gap: 2px; }
.journal-tile b { font-size: 22px; font-family: var(--mono); }
.journal-tile span { font-size: 12px; color: var(--muted); }
.journal-tile.bad b { color: var(--bad); }
.journal-tile.muted-tile b { color: var(--muted); }
.journal td.mono { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.journal tr.row-dry { opacity: 0.55; }
.journal-controls label.grow { flex: 1 1 220px; }
.journal-controls label.arm-line { flex-direction: row; align-items: center; margin: 0 0 8px; }
details.hint { margin: 10px 0 4px; }
details.hint summary { cursor: pointer; font-size: 13px; }

/* Требует внимания */
ul.attention { list-style: none; margin: 0; padding: 0; display: flex;
               flex-direction: column; gap: 6px; }
ul.attention li { padding: 8px 12px; border-radius: 8px; border-left: 3px solid;
                  background: var(--panel2); word-break: break-word; }
ul.attention li.att-bad { border-color: var(--bad); }
ul.attention li.att-warn { border-color: #d29922; }
ul.attention li { display: flex; gap: 10px; align-items: flex-start; }
.att-text { flex: 1 1 auto; min-width: 0; }
.att-when { white-space: nowrap; }
.att-hide { flex: none; background: none; border: 1px solid var(--line);
            color: var(--muted); border-radius: 6px; width: 26px; height: 26px;
            cursor: pointer; font-size: 16px; line-height: 1; }
.att-hide:hover { color: var(--text, #e6edf3); border-color: var(--muted); }
td.drop-cell { width: 34px; text-align: right; }
td.warn-text { color: #d29922; }
.profit-settings { margin-top: 10px; }
.profit-settings input[type=number] { max-width: 120px; }
#f-excluded-box summary { cursor: pointer; }

/* Журнал: шапка, панель проблем с прокруткой */
.journal-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
               justify-content: space-between; margin: 4px 0 12px; }
.journal-bar-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.journal-bar-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.journal-tile.good b { color: var(--good); }
.journal-tile.warn b { color: #d29922; }
.weakest-line { font-size: 13px; margin: -4px 0 12px; }
.alt-note { color: #6a8fd8; }
.problems-block { padding-top: 12px; padding-bottom: 12px; }
.problems-head { display: flex; align-items: center; justify-content: space-between;
                 gap: 10px; margin-bottom: 8px; }
.problems-head h2 { margin: 0; }
.problems-scroll { max-height: 230px; overflow-y: auto; padding-right: 4px; }
.problems-scroll p { margin: 0; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.grow-title { margin: 0 auto 8px 0; align-self: center; flex: 1 1 100%; }
.inline-h2 { display: inline; margin: 0; }
#j-history-box > summary { cursor: pointer; list-style: none; }
#j-history-box > summary::-webkit-details-marker { display: none; }
#j-history-box > summary::before { content: "▸ "; color: var(--muted); }
#j-history-box[open] > summary::before { content: "▾ "; }
#j-history-box[open] > summary { margin-bottom: 12px; }
.order-group.og-manual { opacity: .7; }
.order-group > summary .og-next { margin: 6px 0 0; }

/* Журнал по ордерам: строка на ордер, история раскрывается */
.order-groups { display: flex; flex-direction: column; gap: 6px; }
.order-group { background: var(--panel2); border: 1px solid var(--line);
               border-radius: 10px; }
.order-group.og-bad { border-color: rgba(248, 81, 73, .5); }
.order-group > summary { cursor: pointer; padding: 10px 14px; list-style: none;
                         display: flex; flex-direction: column; gap: 4px; }
.order-group > summary::-webkit-details-marker { display: none; }
.order-group[open] > summary { border-bottom: 1px solid var(--line); }
.og-head { display: flex; justify-content: space-between; gap: 10px;
           align-items: baseline; }
.og-name { font-weight: 600; word-break: break-word; }
.og-state { font-size: 12px; white-space: nowrap; padding: 1px 8px;
            border-radius: 10px; border: 1px solid var(--line); }
.og-state.st-ok { color: var(--good); border-color: rgba(63, 185, 80, .5); }
.og-state.st-bad { color: var(--bad); border-color: rgba(248, 81, 73, .5); }
.og-state.st-muted { color: var(--muted); }
.og-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.og-meta .mono, .og-chain .mono { font-family: var(--mono); font-size: 12px; }
.og-price { font-family: var(--mono); }
.og-ceil { font-family: var(--mono); color: var(--muted); }
.og-next.og-muted { color: var(--muted); }
.og-next { margin: 6px 14px 0 34px; font-size: 13px; }
.og-next.og-ok { color: var(--good); }
.og-next.og-bad { color: var(--bad); }
.og-next.og-warn { color: #d29922; }
.og-chain { margin: 0; padding: 8px 14px 10px 34px; display: flex;
            flex-direction: column; gap: 4px; font-size: 13px; }
.og-chain li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 3px 6px;
               border-radius: 6px; }
.og-chain li.act-place { background: rgba(63, 185, 80, .08); }
.og-chain li.act-raise { background: rgba(210, 153, 34, .10); }
.og-chain li.act-cancel { background: rgba(248, 81, 73, .08); }
.og-chain li.row-dry { opacity: .55; }

/* Phone: a seven-column table does not fit, so each row becomes a card and
   each cell says what it is. */
@media (max-width: 640px) {
  .journal-controls { gap: 10px; }
  .journal-controls label { flex: 1 1 45%; }
  .journal-controls label.grow { flex-basis: 100%; }
  .journal-controls .btn { flex: 1 1 45%; }
  .journal-tile { min-width: 0; flex: 1 1 28%; padding: 8px 10px; }
  .journal-tile b { font-size: 18px; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border: 1px solid var(--line); border-radius: 10px;
                   margin-bottom: 8px; padding: 6px 10px; }
  table.stack td { border: none; padding: 2px 0; display: flex; gap: 10px;
                   justify-content: space-between; text-align: right; }
  table.stack td::before { content: attr(data-label); color: var(--muted);
                           text-align: left; flex: none; font: 13px/1.45 -apple-system,
                           "Segoe UI", Roboto, Arial, sans-serif; }
  table.stack td.mono { white-space: normal; }
  .og-chain { padding-left: 24px; }
}

/* Выбор предметов для анализа */
.picker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6);
                   display: flex; align-items: center; justify-content: center;
                   z-index: 50; padding: 24px; }
.picker { background: var(--panel); border: 1px solid var(--line);
          border-radius: 12px; width: min(760px, 100%); max-height: 84vh;
          display: flex; flex-direction: column; }
.picker header { display: flex; gap: 12px; align-items: center;
                 padding: 16px; border-bottom: 1px solid var(--line); }
.picker header .input { flex: 1 1 auto; }
.picker-body { overflow-y: auto; padding: 8px 16px; flex: 1 1 auto; }
.picker-row { display: flex; gap: 10px; align-items: center; padding: 6px 0;
              border-bottom: 1px solid var(--line); font-size: 13px; }
.picker-row:last-child { border-bottom: 0; }
.picker-row .grow { flex: 1 1 auto; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.picker-row .n { color: var(--muted); font-family: var(--mono); font-size: 12px;
                 white-space: nowrap; }
.picker-row.thin .n { color: var(--bad); }
.picker footer { display: flex; gap: 12px; align-items: center; padding: 16px;
                 border-top: 1px solid var(--line); }
.picker footer .grow { flex: 1 1 auto; color: var(--muted); font-size: 13px; }
.picker-group { color: var(--muted); font-size: 11px; text-transform: uppercase;
                letter-spacing: 0.06em; margin: 14px 0 4px; }

/* Разбор по предметам: по строке на предмет, пока не раскрыт */
.item-report { margin: 10px 0; }
.item-report > summary { cursor: pointer; font-weight: 600; }
.item-report > summary.ok-summary { color: var(--good); }
#an-detail > summary { font-size: 18px; font-weight: 700; cursor: pointer; }

/* Item filters ----------------------------------------------------------- */
.filter-panel { background: var(--panel); border: 1px solid var(--line);
                border-radius: 10px; padding: 10px 14px; margin: 8px 0 10px;
                font-size: 13px; }
.fp-hint { margin: 0 0 6px; font-size: 12px; }
.fgroup { display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line);
          align-items: flex-start; }
.fgroup:first-of-type { border-top: 0; }
.fgroup-title { flex: 0 0 150px; color: var(--muted); padding-top: 4px; }
.fgroup-body { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
               color: var(--muted); }
.fgap { flex: 0 0 18px; }
.chips-scroll { max-height: 150px; overflow-y: auto; }
.coll-search { display: block; margin-top: 6px; width: 140px; font-size: 12px; padding: 4px 6px; }
.chip { border: 1px solid var(--line); background: var(--panel2); color: var(--text);
        border-radius: 14px; padding: 3px 10px; font-size: 12px; cursor: pointer;
        white-space: nowrap; }
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.empty { opacity: .45; }
.chip .n { font-family: var(--mono); font-size: 11px; opacity: .75; margin-left: 4px; }
.chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
             margin-right: 5px; vertical-align: 0; }
#filters-count { font-family: var(--mono); color: var(--accent); }
#filters-toggle.active #filters-count { color: #fff; }
.more-btn { display: block; margin: 14px auto; }
.rar { display: inline-block; border-radius: 4px; padding: 0 5px; font-size: 11px;
       color: #fff; margin-right: 4px; }
.card .sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
@media (max-width: 640px) {
  .fgroup { flex-direction: column; gap: 4px; }
  .fgroup-title { flex: none; }
}
.card .tag.tag-an { color: var(--accent); border-color: var(--accent); }
.card.pickable { cursor: pointer; }
.card.pickable .card-main { pointer-events: none; }
.card.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset;
               background: var(--panel2); }
.card .pick { background: var(--panel); border-radius: 6px; padding: 3px; }
.card .pick input { width: 22px; height: 22px; }
.card.pickable .name { padding-right: 30px; }
a.cbtn { text-decoration: none; display: inline-flex; align-items: center; }
.cbtn.cbtn-an { border-color: var(--accent); color: var(--accent); }

/* Phone: the top bar scrolled with the page, ran off the right edge, and on
   every screen covered a third of it. It wraps and stays at the top of the
   page instead of over it. */
@media (max-width: 640px) {
  .topbar { position: static; flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  .topbar-right { flex-wrap: wrap; gap: 6px 12px; width: 100%; }
  .topbar .build, .topbar .timer { display: none; }
  .topbar .status { width: 100%; }
}

/* Placement queue -------------------------------------------------------- */
.stat.queue tr.queue-out td { opacity: .55; }
.stat.queue tr.queue-line td { text-align: center; color: var(--muted);
  font-size: 12px; border-top: 2px dashed var(--line); }

/* Заработок */
.pos { color: var(--good); }
.neg { color: var(--bad); }
.journal-tile b.pos { color: var(--good); }
.journal-tile b.neg { color: var(--bad); }

/* Item names on the profit page lead to the item's sales history. */
a.item-link { color: inherit; text-decoration: underline; text-decoration-color: var(--accent, #58a6ff); text-underline-offset: 3px; }
a.item-link:hover, a.item-link:focus-visible { color: var(--accent, #58a6ff); }

/* Bot status panel (status.js): one line per job, a dot for its state. */
.bot-status { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin: 12px 0; display: grid; gap: 6px; font-size: 14px; }
.bot-status:empty { display: none; }
.bs-head { font-weight: 600; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bs-row { display: grid; grid-template-columns: 10px minmax(150px, max-content) 1fr; gap: 10px; align-items: baseline; }
.bs-row b { font-weight: 600; }
.bs-text { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.bs-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); align-self: center; }
.bs-dot.on { background: var(--good); }
.bs-dot.busy { background: var(--accent); animation: bs-pulse 1.2s ease-in-out infinite; }
.bs-dot.wait { background: #d29922; }
.bs-dot.warn { background: var(--bad); }
.bs-dot.off, .bs-dot.idle { background: var(--muted); opacity: .6; }
@keyframes bs-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .bs-dot.busy { animation: none; } }
@media (max-width: 640px) { .bs-row { grid-template-columns: 10px 1fr; } .bs-row .bs-text { grid-column: 2; } }

/* Earnings: held skins in groups - sold and awaiting money, locked, free. */
.holding-group { margin-top: 14px; }
.holding-group h3 { margin: 0 0 4px; font-size: 15px; }
.holding-group > p { margin: 0 0 8px; }