* { box-sizing: border-box; }
body {
  margin: 0; font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #131722; color: #d1d4dc;
}
header { padding: 8px 12px; border-bottom: 1px solid #2a2e39; }
form#controls, #layers { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#layers { margin-top: 6px; color: #9598a1; }
input, select, button {
  background: #1e222d; color: #d1d4dc; border: 1px solid #363a45; border-radius: 4px; padding: 3px 6px;
}
input[type=checkbox] { padding: 0; }
button { cursor: pointer; background: #2962ff; border-color: #2962ff; color: #fff; }
details { position: relative; }
details summary { cursor: pointer; color: #9598a1; }
details .params {
  position: absolute; z-index: 10; top: 22px; left: 0; background: #1e222d; border: 1px solid #363a45;
  padding: 10px; display: grid; gap: 6px; min-width: 280px;
}
#status { color: #9598a1; }
#status.error { color: #ef5350; }
main { display: flex; height: 68vh; }
#chart-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#chart { flex: 1; position: relative; min-height: 0; }  /* иначе не сжимается под строку сделки и прячет шкалу времени */
#toolbar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid #2a2e39; }
#toolbar .sep { width: 1px; height: 20px; background: #2a2e39; margin: 0 4px; }
#toolbar button { background: #1e222d; border-color: #363a45; color: #d1d4dc; min-width: 30px; }
#toolbar button:hover { border-color: #2962ff; }
#toolbar button.active { background: #2962ff; border-color: #2962ff; color: #fff; }
#tf-buttons, #draw-tools { display: flex; gap: 4px; align-items: center; }
#draw-color { width: 30px; height: 24px; padding: 0 2px; }
#draw-state { margin-left: 6px; color: #9598a1; }
#side { width: 300px; border-left: 1px solid #2a2e39; padding: 8px 12px; overflow-y: auto; }
#side h3, #trades-section h3 { margin: 6px 0; font-size: 13px; color: #fff; }
.kv { display: flex; justify-content: space-between; padding: 1px 0; }
.kv b { color: #fff; font-weight: 500; }
.pos { color: #26a69a; } .neg { color: #ef5350; }
.sw { display: inline-block; width: 18px; height: 10px; margin-right: 6px; vertical-align: middle; }
.sw.dashed { border: 1px dashed #d1d4dc; }
.ln { display: inline-block; width: 22px; height: 0; vertical-align: middle; border-top: 2px solid #d1d4dc; }
.ln.dotted { border-top-style: dotted; }
.ln.green { border-top-color: #4caf50; }
#legend div { margin: 3px 0; }
#trades-section { padding: 8px 12px; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 3px 6px; border-bottom: 1px solid #2a2e39; text-align: right; white-space: nowrap; }
th { color: #9598a1; font-weight: 500; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #1e222d; }
#trades-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 8px; }
#trades-summary .item { color: #9598a1; }
#trades-summary .item b { color: #fff; font-weight: 500; margin-left: 4px; }
#focus-chip { margin-left: auto; background: #2962ff; color: #fff; border-radius: 4px; padding: 2px 4px 2px 10px; display: flex; align-items: center; gap: 6px; }
#focus-chip button { background: transparent; border: none; color: #fff; min-width: 20px; }
tbody tr.focused { background: #1e2a4a; }
#screener { position: absolute; z-index: 20; top: 44px; left: 12px; background: #1e222d; border: 1px solid #363a45;
  padding: 8px 10px; max-height: 70vh; overflow-y: auto; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
#screener .head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
#screener tbody tr:hover { background: #2a2e39; }
#screener td.off { color: #787b86; }
#screener-btn { background: #ff6d00; border-color: #ff6d00; color: #fff; }
.copy-trade { background: transparent; border: 1px solid #363a45; padding: 0 5px; color: #d1d4dc; }
.copy-trade:hover { border-color: #2962ff; }
#focus-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 6px 10px;
  background: #1a2235; border-bottom: 1px solid #2962ff; font-size: 12.5px; }
#focus-bar .f-title { font-weight: 600; color: #fff; }
#focus-bar .f-item { color: #9598a1; white-space: nowrap; }
#focus-bar .f-item b { color: #d1d4dc; font-weight: 500; margin-left: 3px; }
#focus-bar .f-actions { margin-left: auto; display: flex; gap: 6px; }
#focus-bar button { background: #1e222d; border: 1px solid #363a45; color: #d1d4dc; padding: 1px 8px; }
#focus-bar button:hover { border-color: #2962ff; }

/* встраивание в review.html: только график и строка сделки */
body.embed header, body.embed #side, body.embed #trades-section, body.embed #toolbar { display: none !important; }
body.embed main { height: 100vh; }
body.embed #focus-bar .f-actions { display: none; }
body.embed { overflow: hidden; }

/* верхняя панель вкладок (nav.js) – одна на всех страницах */
.sitenav { display: flex; align-items: stretch; gap: 18px; height: 40px; padding: 0 16px; background: #0f121a;
  border-bottom: 1px solid #2a2e39; position: relative; z-index: 30; font-size: 13.5px; }
.sitenav a { text-decoration: none; }
.sitenav .sn-brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; white-space: nowrap; margin-right: 6px; }
.sitenav .sn-logo { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #2962ff, #26a69a);
  display: grid; place-items: center; font-size: 12px; color: #fff; }
.sitenav .sn-tabs { display: flex; align-items: stretch; gap: 2px; }
.sitenav .sn-tab { display: flex; align-items: center; padding: 0 12px; color: #9598a1; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sitenav .sn-tab:hover { color: #d1d4dc; background: #161a25; }
.sitenav .sn-tab.active { color: #fff; font-weight: 600; border-bottom-color: #2962ff; }
.sitenav .sn-user { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #9598a1; white-space: nowrap; }
.sitenav .sn-user b { color: #d1d4dc; font-weight: 500; }
.sitenav .sn-user a { color: #9598a1; }
.sitenav .sn-user a:hover { color: #fff; }
body.embed .sitenav { display: none; }
/* страницы со списками: отступы и ширина контента под панелью вкладок */
.page { padding: 12px 16px 40px; }
.page.narrow { max-width: 1600px; margin: 0 auto; }
.page h1 { font-size: 17px; color: #fff; margin: 4px 0 6px; }
.warn-banner { background: #3a3000; color: #ffd54f; border: 1px solid #5d4a00; border-radius: 4px; padding: 6px 10px; margin: 0 0 10px; }
.warn-banner a { color: #ffe082; }
.login-box { width: 320px; margin: 14vh auto 0; background: #161a25; border: 1px solid #2a2e39; border-radius: 6px; padding: 22px 24px; }
.login-box h1 { font-size: 16px; color: #fff; margin: 0 0 4px; }
.login-box label { display: block; margin: 12px 0 0; color: #9598a1; }
.login-box input { display: block; width: 100%; margin-top: 4px; padding: 6px 8px; font-size: 14px; }
.login-box button { width: 100%; margin-top: 18px; padding: 7px; font-size: 14px; }
.login-box .err { color: #ef5350; min-height: 18px; margin-top: 10px; }

/* таблица сделок бэктеста: длинные текстовые колонки переносятся, числа – в одну строку */
#trades th.wrap, #trades td.wrap { white-space: normal; text-align: left; }
#trades td.wrap { min-width: 96px; max-width: 220px; line-height: 1.3; }
#trades th { white-space: normal; vertical-align: bottom; }
#trades th, #trades td { padding: 3px 5px; }
#trades-section { overflow-x: auto; }   /* очень узкое окно – прокручивается только таблица, не страница */

/* статус и управление демо (demo_ctl.js) */
#demo-ctl { margin: 6px 0 12px; }
#demo-ctl .dc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px;
  background: #161a25; border: 1px solid #2a2e39; border-radius: 6px; }
#demo-ctl .dc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #787b86; }
#demo-ctl .dc-dot.on { background: #26a69a; box-shadow: 0 0 6px #26a69a; }
#demo-ctl .dc-ctl { display: flex; gap: 6px; align-items: center; margin-left: auto; }
#demo-ctl .dc-btn { background: #1e222d; border-color: #363a45; color: #d1d4dc; }
#demo-ctl .dc-btn.primary { background: #2962ff; border-color: #2962ff; color: #fff; }
#demo-ctl .dc-btn.danger { background: #3a1717; border-color: #e53935; color: #ffb4b0; }
#demo-ctl .dc-msg { color: #ffd54f; }
#demo-ctl .dc-pre { margin: 6px 0 0; padding: 8px 10px; background: #0f121a; border: 1px solid #2a2e39; border-radius: 6px;
  font-size: 11.5px; color: #9598a1; white-space: pre-wrap; max-height: 160px; overflow: auto; }

/* панель параметров бэктеста: разделы, пояснения, подсветка отличий от умолчаний */
#params-panel > summary { cursor: pointer; }
#params-changed { color: #ffb300; margin-left: 4px; }
#params-panel .params {
  position: fixed; z-index: 30; top: 92px; left: 50%; transform: translateX(-50%); display: block; padding: 12px 14px;
  width: min(1240px, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow-y: auto;
  background: #161a25; border: 1px solid #363a45; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
#params-panel .params-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#params-panel .params-head b { color: #fff; font-size: 14px; }
#params-panel .params-head .muted { color: #787b86; }
#params-panel .params-head button { margin-left: auto; background: #1e222d; border-color: #363a45; color: #d1d4dc; }
#params-panel .params-grid { column-width: 360px; column-gap: 10px; }
#params-panel .psec { background: #1a1e2a; border: 1px solid #2a2e39; border-radius: 6px; padding: 8px 10px;
  break-inside: avoid; margin-bottom: 10px; }
#params-panel .psec h4 { margin: 0 0 6px; font-size: 12.5px; color: #fff; text-transform: none; }
#params-panel .prow { padding: 3px 4px; border-radius: 4px; }
#params-panel .prow label { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
#params-panel .prow .pl { color: #d1d4dc; }
#params-panel .prow .pc { flex: none; }
#params-panel .prow select { max-width: 210px; }
#params-panel .prow .ph { color: #787b86; font-size: 11.5px; margin-top: 1px; }
#params-panel .prow.changed { background: rgba(255,179,0,.10); box-shadow: inset 2px 0 0 #ffb300; }
#params-panel .prow.changed .pl::after { content: ' ●'; color: #ffb300; font-size: 10px; }
#params-panel .params-exp { margin-top: 10px; }
#params-panel .params-exp > summary { color: #9598a1; margin-bottom: 8px; }
#params-panel .params-exp .psec h4 { color: #9598a1; }
#params-panel #params-close { margin-left: 4px; min-width: 28px; }