/* Home page: the user's connected bots and the EDVI bot catalog.
   Satoshi (Webpixels) tokens underneath; every bot carries its own --bot-accent. */
.bot-catalog, .my-bots {
    --catalog-border: var(--x-border-color, #334155);
    --catalog-muted: var(--x-secondary-color, #94a3b8);
    --catalog-panel: rgba(128,145,178,.035);
    --catalog-surface: var(--x-body-bg, #0f172a);
}

/* Resolve derived colours on each card, where its bot accent is defined. */
.my-bot, .catalog-bot {
    --catalog-accent-soft: color-mix(in srgb, var(--bot-accent, #2fa89f) 12%, transparent);
    --catalog-accent-line: color-mix(in srgb, var(--bot-accent, #2fa89f) 45%, transparent);
}

/* ---------- my bots ---------- */
.my-bots { margin-bottom: 44px; }
.my-bots-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.my-bots-heading h1 { font-size: clamp(24px,3vw,32px); letter-spacing: -.045em; margin: 0; }
.my-bots-heading p { color: var(--catalog-muted); font-size: 13px; margin: 6px 0 0; }
.my-bots-total { font-size: 12px; color: var(--catalog-muted); white-space: nowrap; }
.my-bots-total strong { color: var(--x-heading-color, inherit); font-size: 15px; margin-right: 4px; }
.my-bots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.my-bot {
    position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 18px;
    padding: 20px 20px 18px; border: 1px solid var(--catalog-border); border-radius: 18px;
    background: linear-gradient(160deg, var(--catalog-accent-soft), transparent 40%) var(--catalog-surface);
    transition: border-color .25s ease, transform .25s ease;
}
.my-bot:hover, .my-bot:focus-within { border-color: var(--catalog-accent-line); transform: translateY(-2px); }
.my-bot-top { display: flex; align-items: center; gap: 14px; }
.my-bot-avatar {
    position: relative; width: 58px; height: 58px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bot-accent) 32%, transparent), transparent 70%);
    box-shadow: inset 0 0 0 1px var(--catalog-accent-line);
}
.my-bot-avatar img { max-width: 40px; max-height: 40px; object-fit: contain; }
.my-bot-name { min-width: 0; flex: 1; }
.my-bot-name strong { display: block; font-size: 16px; letter-spacing: -.02em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-bot-name small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--catalog-muted); }
.my-bot-name small img { height: 12px; width: auto; }
.my-bot-name small b { font-weight: 500; color: var(--bot-accent); }
.my-bot-status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--catalog-muted); }
.my-bot-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; }
.my-bot-status--on { color: #20b88c; }
.my-bot-status--on i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: .7; animation: my-bot-ping 2.2s ease-out infinite; }
@keyframes my-bot-ping { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.my-bot-status--off { color: #ec6a87; }
.my-bot-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--catalog-border); }
.my-bot-pnl span { display: block; font-size: 11px; color: var(--catalog-muted); margin-bottom: 4px; }
.my-bot-pnl strong { font-size: 26px; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.my-bot-pnl strong i { font-size: 14px; }
.my-bot-open { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--catalog-border); color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s; }
.my-bot-open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.my-bot:hover .my-bot-open { border-color: var(--bot-accent); background: var(--catalog-accent-soft); }
.my-bot-open:focus-visible { outline: 2px solid var(--bot-accent); outline-offset: 2px; }

/* subscription card: closes the "my bots" grid */
.my-bot--plan { --bot-accent: #2fa89f; }
.my-bot-avatar--plan { font-size: 22px; color: var(--bot-accent); }
.my-bot-plan-meter { min-width: 0; flex: 1; }
.my-bot-plan-meter > span { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--catalog-muted); margin-bottom: 8px; }
.my-bot-plan-meter > span b { color: var(--x-heading-color, inherit); font-weight: 600; font-variant-numeric: tabular-nums; }
.my-bot-plan-meter .progress { height: 4px; background: color-mix(in srgb, var(--bot-accent) 18%, transparent); border-radius: 999px; }
.my-bot-plan-meter .progress-bar { background: var(--bot-accent); border-radius: 999px; }
.my-bot--empty { --bot-accent: var(--catalog-muted); text-decoration: none; color: inherit; border-style: dashed; background: transparent; justify-content: center; }
.my-bot--empty:hover { --bot-accent: #2fa89f; }
.my-bot--empty .my-bot-name strong { white-space: normal; }

/* ---------- catalog ---------- */
.catalog-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.catalog-heading h1, .catalog-heading h2 { font-size: clamp(25px,3vw,34px); letter-spacing: -.045em; margin: 0; }
.catalog-heading p, .catalog-description { color: var(--catalog-muted); font-size: 13px; line-height: 1.7; margin: 0; }
.catalog-heading p { margin-top: 6px; }
.catalog-bot { position: relative; border: 1px solid var(--catalog-border); border-radius: 22px; margin-bottom: 48px; overflow: hidden; background: var(--catalog-surface); }

/* the hero band: core stage on the left, identity on the right */
.catalog-hero { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: stretch; background: linear-gradient(90deg, var(--catalog-accent-soft), transparent 45%); }
.catalog-stage { position: relative; display: grid; place-items: center; min-height: 250px; overflow: hidden; }
.catalog-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bot-accent) 16%, transparent), transparent 62%); }
.bot-core { position: relative; width: 230px; height: 230px; display: grid; place-items: center; }
.bot-core-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.bot-core-portrait { position: relative; z-index: 1; width: 47%; pointer-events: none; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--bot-accent) 55%, transparent)); animation: bot-core-breathe 5.4s ease-in-out infinite; }
.bot-core-portrait img { width: 100%; height: auto; display: block; }
@keyframes bot-core-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.025); } }
/* custom assembly card: icon instead of a portrait */
.bot-core-portrait--icon { display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bot-accent) 55%, transparent), transparent 72%); color: #fff; font-size: 38px; }
.catalog-bot--custom .catalog-hero { background: linear-gradient(90deg, var(--catalog-accent-soft), transparent 45%); }
.catalog-bot--custom .catalog-signal span { color: var(--catalog-muted); }

/* no WebGL: a CSS glow stands in for the nucleus */
.bot-core--fallback::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bot-accent) 85%, #fff) 0%, var(--bot-accent) 35%, transparent 72%); filter: blur(6px); animation: bot-core-pulse 3.2s ease-in-out infinite; }
.bot-core--fallback::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--bot-accent) 60%, transparent); animation: bot-core-spin 28s linear infinite; }
@keyframes bot-core-pulse { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes bot-core-spin { to { transform: rotate(360deg); } }

/* identity (2026-10-16): text in the left column, the connect button in the right one, bottom-aligned with the description's last line */
.catalog-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 28px; row-gap: 14px; padding: 28px 28px 26px 12px; min-width: 0; }
.catalog-identity-top { display: contents; }
.catalog-identity > *, .catalog-identity-top > * { grid-column: 1; min-width: 0; }
.catalog-identity-top > .catalog-actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.catalog-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.catalog-title-row h2 { margin: 0; font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -.045em; line-height: 1; }
.catalog-side { font-size: 10px; font-weight: 650; letter-spacing: .05em; border: 1px solid var(--catalog-accent-line); border-radius: 6px; padding: 5px 7px; color: var(--bot-accent); }
.catalog-tagline { color: var(--bot-accent); margin: 8px 0 0; font-size: 14px; font-weight: 500; }
.catalog-description { max-width: 620px; }
.catalog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-shrink: 0; }
.catalog-actions .btn { font-size: 12px; border-radius: 10px; padding: 11px 16px; display: inline-flex; align-items: center; gap: 12px; }
.catalog-external { font-size: 11px; color: var(--catalog-muted); white-space: nowrap; }
.catalog-external:hover { color: var(--bot-accent); }
.catalog-signal { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 11px; color: var(--catalog-muted); }
.catalog-signal span { display: inline-flex; align-items: center; gap: 7px; }
.catalog-signal i.bi { color: var(--bot-accent); font-size: 12px; }
.catalog-demo { margin: 0 28px 20px; display: flex; gap: 8px; align-items: flex-start; font-size: 11px; line-height: 1.6; color: #bc903f; }

/* data: metrics, chart, pairs, trades */
.catalog-overview { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(220px, 1fr); border-top: 1px solid var(--catalog-border); }
.catalog-performance { min-width: 0; padding: 24px 18px 0 28px; container: catalog-performance / inline-size; }
.catalog-tip { font-size: 11px; color: var(--catalog-muted); cursor: help; transition: color .15s; }
.catalog-tip:hover { color: var(--bot-accent, #2fa89f); }
.catalog-chart-wrap { position: relative; height: 340px; margin-top: 12px; }
/* zoom toolbar (zoom + reset) always visible, muted icons, accent when the zoom tool is active; hint under the chart */
.catalog-chart .apexcharts-toolbar { opacity: 1; z-index: 3; }
.catalog-chart .apexcharts-toolbar svg { fill: var(--catalog-muted); }
.catalog-chart .apexcharts-toolbar > div:hover svg { fill: var(--x-heading-color, #fff); }
.catalog-chart .apexcharts-zoom-icon.apexcharts-selected svg { fill: var(--bot-accent); }
.catalog-chart-last { margin: 4px 0 0; text-align: right; font-size: 10px; color: var(--catalog-muted); }
.catalog-chart-last b { color: var(--bot-accent, #2fa89f); font-weight: 600; }
.catalog-chart-hint { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 11px; color: var(--catalog-muted); }
.catalog-chart { width: 100%; height: 340px; }
.catalog-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--catalog-muted); font-size: 12px; pointer-events: none; }
.catalog-monthly { display: flex; align-items: center; gap: 8px; min-width: 0; border-top: 1px solid var(--catalog-border); margin-top: 18px; padding: 18px 0 22px; }
.catalog-monthly-list { display: flex; flex: 1; min-width: 0; gap: 8px; margin: 0; padding: 2px 0 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--catalog-border) transparent; }
.catalog-month { flex: 1 0 120px; min-width: 0; scroll-snap-align: start; border: 1px solid var(--catalog-border); border-radius: 10px; padding: 12px; background: var(--catalog-panel); }
.catalog-monthly-arrow { flex: 0 0 28px; width: 28px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--catalog-border); border-radius: 8px; background: var(--catalog-panel); color: var(--catalog-muted); cursor: pointer; }
.catalog-monthly-arrow:hover:not(:disabled) { color: var(--bot-accent); border-color: var(--bot-accent); }
.catalog-monthly-arrow:disabled { opacity: .3; cursor: default; }
.catalog-monthly-arrow:focus-visible, .catalog-monthly-list:focus-visible { outline: 2px solid var(--bot-accent); outline-offset: 2px; }
@media (hover: none), (max-width: 767px) { .catalog-monthly-arrow { display: none !important; } } /* touch / phone: swipe only */
.catalog-month dt { font-size: 10px; font-weight: 500; color: var(--catalog-muted); margin-bottom: 8px; }
.catalog-month dd { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin: 0; }
.catalog-pairs-panel { padding: 24px; border-left: 1px solid var(--catalog-border); background: var(--catalog-panel); min-width: 0; display: flex; flex-direction: column; }
.catalog-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-section-title h3 { font-size: 13px; margin: 0; }
.catalog-section-title i { color: var(--catalog-muted); font-size: 13px; }
.catalog-pairs-panel > p { color: var(--catalog-muted); font-size: 10px; line-height: 1.7; margin: 8px 0 16px; }
/* pair search inside the strategies panel */
.catalog-pairs-tools { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.catalog-pairs-tools .catalog-pairs-search { flex: 1; min-width: 0; margin: 0; }
.catalog-pairs-tools .catalog-pairs-reset { flex: none; margin-left: auto; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 11.5px; white-space: nowrap; }
.catalog-pairs-sort { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--catalog-border); border-radius: 10px; background: rgba(8, 20, 34, .45); color: var(--catalog-muted); font-size: 14px; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.catalog-pairs-sort:hover { color: var(--x-heading-color, #fff); border-color: color-mix(in srgb, var(--bot-accent) 55%, var(--catalog-border)); }
.catalog-pairs-sort.is-active { color: var(--bot-accent); border-color: var(--bot-accent); background: color-mix(in srgb, var(--bot-accent) 14%, transparent); }
.catalog-pairs-search { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 0 10px; height: 34px; border: 1px solid var(--catalog-border); border-radius: 10px; background: rgba(8, 20, 34, .45); color: var(--catalog-muted); transition: border-color .2s; }
.catalog-pairs-search:focus-within { border-color: var(--bot-accent); }
.catalog-pairs-search > i { font-size: 12px; }
.catalog-pairs-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--x-heading-color, #fff); font: inherit; font-size: 12px; outline: none; text-transform: uppercase; }
.catalog-pairs-search input::placeholder { text-transform: none; color: var(--catalog-muted); }
.catalog-pairs-search input::-webkit-search-cancel-button { display: none; }
.catalog-pairs-search-clear { border: 0; background: transparent; color: var(--catalog-muted); padding: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; border-radius: 6px; }
.catalog-pairs-search-clear:hover { color: var(--x-heading-color, #fff); }
.catalog-pairs-nomatch { font-size: 12px; margin: 8px 0 0; }
.catalog-pair.is-filtered { display: none; }
.catalog-pairs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; flex: 1 1 0; min-height: 160px; align-content: start; overflow-y: auto; padding: 1px; } /* fills the panel down to the bottom of the chart column; basis 0 keeps the list from stretching the row */
.catalog-pair { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 9px 8px; border: 1px solid var(--catalog-border); border-radius: 9px; font-size: 10px; font-weight: 600; }
.catalog-pair img { width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0; }
.catalog-pair span { overflow: hidden; text-overflow: ellipsis; }
.catalog-muted { color: var(--catalog-muted); font-size: 12px; grid-column: 1/-1; }
.catalog-trades { border-top: 1px solid var(--catalog-border); }
.catalog-trades summary { list-style: none; padding: 19px 28px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 12px; font-weight: 600; }
.catalog-trades summary::-webkit-details-marker { display: none; }
.catalog-trades summary > span { display: flex; align-items: center; gap: 10px; }
.catalog-trades summary:focus-visible { outline: 2px solid var(--bot-accent); outline-offset: -3px; }
.catalog-trade-count { background: var(--catalog-panel); border: 1px solid var(--catalog-border); border-radius: 6px; font-size: 10px; padding: 2px 7px; }
.catalog-chevron { transition: transform .2s; color: var(--catalog-muted); }
.catalog-trades[open] .catalog-chevron { transform: rotate(180deg); }
.catalog-trades-note { padding: 0 28px; color: var(--catalog-muted); font-size: 11px; margin: 0 0 14px; }
.catalog-table-scroll { overflow: auto; max-height: 390px; }
.catalog-table { font-size: 11px; width: 100%; margin: 0; white-space: nowrap; }
.catalog-table thead th { background: var(--catalog-surface); position: sticky; top: 0; z-index: 1; font-size: 10px; text-transform: none; color: var(--catalog-muted); }
.catalog-table th, .catalog-table td { padding: 12px 18px; border-color: var(--catalog-border); }
.catalog-table th:first-child, .catalog-table td:first-child { padding-left: 28px; }
.catalog-table th:last-child, .catalog-table td:last-child { padding-right: 28px; text-align: right; }
.catalog-table .catalog-table-empty { text-align: center; padding: 24px; color: var(--catalog-muted); }
.catalog-trade-side { font-size: 9px; font-weight: 650; }
.catalog-positive { color: #20b88c !important; }
.catalog-negative { color: #ec6a87 !important; }
.catalog-bot-footer { padding: 12px 28px; border-top: 1px solid var(--catalog-border); display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--catalog-muted); background: var(--catalog-panel); }
.catalog-bot-footer i { margin-right: 5px; }
.catalog-alert { border: 1px solid var(--catalog-border); border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 12px; }

@media(max-width:1199px) {
    .catalog-hero { grid-template-columns: 220px minmax(0, 1fr); }
    .bot-core { width: 200px; height: 200px; }
    .catalog-overview { grid-template-columns: minmax(0,1.5fr) minmax(210px,1fr); }
    .catalog-pairs-panel { padding: 20px 16px; } .catalog-pairs { gap: 6px; } .catalog-pair { font-size: 9px; }
}
@media(max-width:767px) {
    .my-bots { margin-bottom: 36px; } .my-bots-grid { grid-template-columns: 1fr; }
    .catalog-heading { margin-bottom: 20px; }
    .catalog-hero { grid-template-columns: 1fr; background: linear-gradient(180deg, var(--catalog-accent-soft), transparent 60%); }
    .catalog-stage { min-height: 210px; } .bot-core { width: 190px; height: 190px; }
    .catalog-identity { display: flex; flex-direction: column; justify-content: center; padding: 0 18px 22px; gap: 12px; text-align: center; align-items: center; }
    .catalog-identity-top { display: flex; flex-direction: column; align-items: center; gap: 14px; }
    .catalog-title-row { justify-content: center; }
    .catalog-actions { width: 100%; justify-content: center; }
    .catalog-signal { justify-content: center; }
    .catalog-description { font-size: 12px; }
    .catalog-demo { margin: 0 18px 18px; }
    .catalog-overview { grid-template-columns: 1fr; }
    .catalog-performance { padding: 20px 14px 0 18px; }
    .catalog-pairs-panel { border-left: 0; border-top: 1px solid var(--catalog-border); padding: 18px; }
    .catalog-pairs { grid-template-columns: repeat(3,minmax(0,1fr)); flex: none; min-height: 0; max-height: 300px; } .catalog-pair { padding: 8px 5px; gap: 4px; } .catalog-pair img { width: 17px; height: 17px; }
    .catalog-trades summary { padding: 18px; } .catalog-trades-note { padding: 0 18px; } .catalog-bot-footer { padding: 12px 18px; flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) {
    .catalog-chevron, .my-bot { transition: none; }
    .my-bot-status--on i::after, .bot-core-portrait, .bot-core--fallback::before, .bot-core--fallback::after { animation: none; }
}

/* chart range switcher (1W / 1M default / 3M / all) */
.catalog-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 14px; }
.catalog-chart-range-note { margin: 0; min-width: 0; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--x-heading-color, #fff); }
.catalog-range { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid var(--catalog-border); border-radius: 10px; background: rgba(128,145,178,.04); margin-left: auto; }
.catalog-range-btn { border: 0; background: transparent; padding: 5px 11px; border-radius: 7px; font: inherit; font-size: 11px; font-weight: 600; color: var(--catalog-muted); cursor: pointer; transition: color .15s, background-color .15s; }
.catalog-range-btn:hover { color: var(--x-heading-color, #fff); }
.catalog-range-btn.is-active { color: var(--x-heading-color, #fff); background: color-mix(in srgb, var(--bot-accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bot-accent) 45%, transparent); }
.catalog-range-btn:disabled { opacity: .4; cursor: default; }
.catalog-chart-wrap { margin-top: 8px; }

/* strategies panel: clickable pair chips (click = chart and trades of that pair only) */
.catalog-pairs-reset { border: 1px solid var(--catalog-border); background: transparent; color: var(--x-heading-color, #fff); font: inherit; font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.catalog-pairs-reset:hover { border-color: var(--bot-accent); }
.catalog-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* chips sit on the dim strategies panel: give them a lighter surface and white pair names so they read as active controls */
.catalog-pair { background: rgba(128, 145, 178, .07); border-color: rgba(128, 145, 178, .28); color: var(--x-heading-color, #fff); }
button.catalog-pair { font: inherit; cursor: pointer; text-align: left; transition: border-color .15s, background-color .15s; }
button.catalog-pair:hover { background: rgba(128, 145, 178, .12); border-color: color-mix(in srgb, var(--bot-accent) 55%, var(--catalog-border)); }
.catalog-pair { flex-wrap: wrap; row-gap: 3px; }
.catalog-pair.is-active { border-color: var(--bot-accent); background: color-mix(in srgb, var(--bot-accent) 14%, transparent); box-shadow: inset 0 0 0 1px var(--bot-accent); }
.catalog-pair-name { flex: 1; min-width: 0; font-size: 11px; color: var(--x-heading-color, #fff); }
.catalog-pair-details { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; flex-basis: 100%; padding-left: 28px; }
.catalog-pair-timeframe { font-size: 10px; font-weight: 650; padding: 1px 5px; border-radius: 5px; background: rgba(128,145,178,.12); color: var(--x-heading-color, #fff); white-space: nowrap; }
.catalog-pair-side { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--catalog-border); color: var(--catalog-muted); flex-shrink: 0; }
.catalog-pair-side--long { color: #20b88c; border-color: rgba(32,184,140,.45); }
.catalog-pair-side--short { color: #ec6a87; border-color: rgba(236,106,135,.45); }
.catalog-pair-side--dual { color: var(--bot-accent); border-color: color-mix(in srgb, var(--bot-accent) 50%, transparent); }
.catalog-pair-pnl { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- statistics (2026-10-13) ----------
   Left: result for the chosen period. The heading + range switch drive the P&L hero tile, the trades tile and the chart.
   Right panel: what the strategy is made of (does not depend on the period).
   Gain/loss use the catalog's polarity pair (#20b88c / #ec6a87); identity never rests on colour alone:
   the sign is in the number, wins sit left / losses right on the meter, and the legend carries up/down carets and labels. */
.catalog-kpis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.12fr); gap: 12px; }
.catalog-kpi { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 15px; border: 1px solid var(--catalog-border); border-radius: 14px; background: rgba(128,145,178,.045); }
.catalog-kpi span { font-size: 11px; color: var(--catalog-muted); }
.catalog-kpi strong { display: block; font-weight: 650; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--x-heading-color, #fff); overflow-wrap: anywhere; }
.catalog-kpi--pnl { border-color: color-mix(in srgb, var(--bot-accent) 30%, var(--catalog-border)); background: radial-gradient(140% 120% at 0% 0%, var(--catalog-accent-soft), transparent 62%), rgba(128,145,178,.045); }
.catalog-kpi--pnl strong { font-size: 34px; letter-spacing: -.05em; }
.catalog-kpi--pnl strong.is-up { color: #20b88c; }
.catalog-kpi--pnl strong.is-down { color: #ec6a87; }
.catalog-kpi--pnl small { margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--catalog-muted); }
.catalog-kpi--pnl small i { color: var(--bot-accent); font-size: 11px; }
.catalog-kpi--pnl small span { font-size: inherit; }
/* max drawdown tile (2026-10-16): worst fall of the period from its peak; the value is white, the violet icon = the chart's drawdown series */
.catalog-kpi--drawdown strong { font-size: 24px; }
.catalog-kpi--drawdown small { margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--catalog-muted); }
.catalog-kpi--drawdown small span { min-width: 0; }
.catalog-kpi--drawdown small i { color: #c084fc; font-size: 11px; }
.catalog-kpi--drawdown small span { font-size: inherit; }
.catalog-kpi-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.catalog-kpi-row > div { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.catalog-kpi-row strong { font-size: 24px; }
.catalog-kpi-rate { align-items: flex-end; text-align: right; }
/* win/loss meter: wins grow from the left, losses from the right, break-even trades leave the track in between */
.catalog-winbar { --wins: 0%; --losses: 0%; display: flex; gap: 2px; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(128,145,178,.14); overflow: hidden; }
.catalog-winbar i { display: block; height: 100%; border-radius: 3px; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.catalog-winbar-wins { width: max(0px, calc(var(--wins) - 1px)); background: #20b88c; }
.catalog-winbar-losses { width: max(0px, calc(var(--losses) - 1px)); margin-left: auto; background: #ec6a87; }
.catalog-winbar.is-empty i { width: 0; }
.catalog-winbar-legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--catalog-muted); }
.catalog-kpi .catalog-winbar-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: inherit; }
.catalog-winbar-legend b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--x-heading-color, #fff); }
.catalog-winbar-legend i { font-size: 9px; line-height: 1; }
.catalog-winbar-legend .is-win { color: #20b88c; }
.catalog-winbar-legend .is-loss { color: #ec6a87; }
.catalog-kpis + .catalog-chart-wrap { margin-top: 14px; }
/* chart tooltip (2026-10-16): compact, semi-transparent, white text, values first — the bot page balance chart look (.bal-tip in bot-page.css) */
.catalog-chart .apexcharts-tooltip { background: rgba(11, 18, 34, .55) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .12) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); border-radius: 8px; }
.cat-tip { padding: 6px 9px; color: #fff; font-size: 11px; line-height: 1.25; }
.cat-tip time { display: block; margin-bottom: 4px; font-size: 10px; color: rgba(255, 255, 255, .65); }
.cat-tip-row { display: flex; align-items: flex-start; gap: 6px; }
.cat-tip-row + .cat-tip-row { margin-top: 4px; }
.cat-tip-row i { flex: 0 0 7px; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; }
.cat-tip-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-tip-row span { display: block; font-size: 9.5px; color: rgba(255, 255, 255, .65); }

/* composition box at the top of the strategies panel: two counts side by side, average risk as a full-width row */
.catalog-composition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 0; border: 1px solid var(--catalog-border); border-radius: 14px; background: rgba(128,145,178,.05); }
.catalog-composition-item { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 13px 14px 14px; }
.catalog-composition-item + .catalog-composition-item { border-left: 1px solid var(--catalog-border); }
.catalog-composition dt { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; line-height: 1.3; color: var(--catalog-muted); }
.catalog-composition dd { margin: 0; }
.catalog-composition-value { font-size: 24px; font-weight: 650; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--x-heading-color, #fff); }
.catalog-composition-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.catalog-side-tag { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--catalog-border); color: var(--catalog-muted); }
.catalog-side-tag b { font-weight: 650; color: var(--x-heading-color, #fff); font-variant-numeric: tabular-nums; }
.catalog-side-tag.is-long { color: #20b88c; border-color: rgba(32,184,140,.45); }
.catalog-side-tag.is-short { color: #ec6a87; border-color: rgba(236,106,135,.45); }
.catalog-side-tag.is-zero { opacity: .45; }
.catalog-composition-item--risk { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-block: 12px; border-left: 0 !important; border-top: 1px solid var(--catalog-border); }
.catalog-composition-risk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.catalog-risk-line { display: inline-flex; align-items: center; gap: 7px; }
.catalog-risk-line b { font-size: 15px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--x-heading-color, #fff); }
.catalog-composition + p { margin-top: 14px; }
/* compact composition tile (home page, same lines as "My assembly"): label left, value + tags right */
.catalog-composition--compact { display: flex; flex-direction: column; padding: 2px 14px; margin: 12px 0 0; }
.catalog-kpi-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; padding: 2px 0; }
.catalog-kpi-line + .catalog-kpi-line { border-top: 1px solid var(--catalog-border); }
.catalog-kpi-line dt { font-size: 11px; font-weight: 400; color: var(--catalog-muted); min-width: 0; }
.catalog-kpi-line dd { margin: 0; display: flex; align-items: center; gap: 6px; }
.catalog-kpi-line strong { font-size: 16px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--x-heading-color, #fff); }
.catalog-kpi-tags { display: inline-flex; gap: 4px; }
.catalog-kpi-line .catalog-side-tag { font-size: 9.5px; }
.catalog-kpi-line--risk .catalog-composition-risk { gap: 6px 10px; }
.catalog-kpi-line--risk .catalog-risk-line b { font-size: 14px; }
.catalog-risk-mult { color: var(--bot-accent); border-color: color-mix(in srgb, var(--bot-accent) 50%, transparent); }
.catalog-panel-tip { margin-left: 4px; font-size: 12px; vertical-align: 1px; }
/* home catalog: the three composition items sit side by side as columns (label above, value below) */
.catalog-composition--compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 0; }
.catalog-composition--compact .catalog-kpi-line { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; min-height: 0; padding: 2px 12px; }
.catalog-composition--compact .catalog-kpi-line + .catalog-kpi-line { border-top: 0; border-left: 1px solid var(--catalog-border); }
.catalog-composition--compact .catalog-kpi-line dd { flex-wrap: wrap; row-gap: 4px; }
.catalog-composition--compact .catalog-kpi-line--risk .catalog-composition-risk { gap: 4px 8px; }
@container (max-width: 360px) { .catalog-composition--compact .catalog-kpi-line { padding: 2px 8px; } }
/* per-pair risk multiplier (home page only): the chip holds a button plus a stepper row, same control as "My assembly" */
.catalog-risk-bulk.rbk { margin: 12px 0 10px; }
.catalog-pair--risk { padding: 0; flex-direction: column; align-items: stretch; gap: 0; row-gap: 0; }
.catalog-pair-main { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; row-gap: 3px; width: 100%; padding: 9px 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.catalog-pair-main:focus-visible { outline: 2px solid var(--bot-accent); outline-offset: 2px; }
.catalog-pair-main .catalog-pair-name { flex: 1; }
.catalog-pair-risk { display: flex; align-items: center; gap: 4px; padding: 6px 9px 8px; border-top: 1px dashed color-mix(in srgb, var(--bot-accent) 45%, transparent); font-size: 10px; color: var(--catalog-muted); }
.catalog-risk-label { font-weight: 600; margin-right: auto; }
.catalog-step { width: 22px; height: 22px; flex-shrink: 0; padding: 0; border-radius: 6px; border: 1px solid rgba(128,145,178,.35); background: transparent; color: var(--catalog-muted); font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.catalog-step:hover { color: #fff; border-color: var(--bot-accent); }
.catalog-risk-input { width: 42px; height: 22px; padding: 0 2px; border-radius: 6px; border: 1px solid rgba(128,145,178,.35); background: rgba(8,20,34,.45); color: var(--bot-accent); font-size: 11px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.catalog-risk-input::-webkit-outer-spin-button, .catalog-risk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.catalog-risk-input:focus { outline: none; border-color: var(--bot-accent); }
.catalog-pair-risk.is-high .catalog-risk-input { color: #e0a94a; }

@container catalog-performance (max-width: 720px) {
    .catalog-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-kpi--trades { grid-column: 1 / -1; }
}
@container catalog-performance (max-width: 500px) {
    .catalog-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media(max-width:575px) {
    .catalog-chart-head { margin-bottom: 12px; }
    .catalog-range { width: 100%; margin-left: 0; }
    .catalog-range-btn { flex: 1; }
    .catalog-kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .catalog-kpi { padding: 14px 15px; }
    .catalog-kpi--pnl strong { font-size: 30px; }
}
@media(prefers-reduced-motion:reduce) {
    .catalog-winbar i { transition: none; }
}
/* phone: picking a pair scrolls to its chart (bot-catalog.js scrollToChart); keep it clear of the sticky top bar */
.catalog-performance { scroll-margin-top: 76px; }

/* "?" next to the chart heading + backtest explanation popup (native <dialog>, works on the public page without bootstrap js) */
.catalog-chart-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; }
.catalog-info-btn { position: relative; flex-shrink: 0; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(47,168,159,.65); background: rgba(16,99,94,.35); color: #2fa89f; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 0 0 3px rgba(47,168,159,.12); transition: color .15s, border-color .15s, background .15s; }
.catalog-info-btn::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; } /* larger tap area */
@media (max-width: 767px) { .catalog-info-btn { width: 32px; height: 32px; font-size: 17px; } .catalog-info-btn::after { inset: -6px; } }
.catalog-info-btn:hover, .catalog-info-btn:focus-visible { color: #fff; border-color: #2fa89f; background: #10635e; outline: none; }
.catalog-info-dialog { --info-accent: #2fa89f; width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 820px); padding: 0; border: 1px solid color-mix(in srgb, var(--info-accent) 40%, rgba(128,145,178,.3)); border-radius: 16px; background: #0f1626; color: #c9d2e3; box-shadow: 0 24px 80px rgba(0,0,0,.6); overflow: hidden; }
.catalog-info-dialog[open] { display: flex; flex-direction: column; }
.catalog-info-dialog::backdrop { background: rgba(4,8,16,.72); backdrop-filter: blur(3px); }
.catalog-info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(128,145,178,.18); }
.catalog-info-head h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; color: #fff; }
.catalog-info-head h3 i { color: var(--info-accent); }
.catalog-info-close { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8a96ad; cursor: pointer; }
.catalog-info-close:hover { color: #fff; background: rgba(128,145,178,.15); }
.catalog-info-body { overflow-y: auto; padding: 6px 20px 8px; }
.catalog-info-item { padding: 12px 0; }
.catalog-info-item + .catalog-info-item { border-top: 1px solid rgba(128,145,178,.12); }
.catalog-info-item h4 { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: #fff; }
.catalog-info-item p { margin: 0; font-size: 13px; line-height: 1.6; color: #aab4c8; }
.catalog-info-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px 16px; border-top: 1px solid rgba(128,145,178,.18); }
.catalog-info-foot a { font-size: 12.5px; color: var(--info-accent); text-decoration: none; }
.catalog-info-foot a:hover { text-decoration: underline; }

/* phone: floating "View chart" while pairs are picked and the chart is out of view (bot-catalog.js, 2026-10-20) */
.catalog-chart-fab { display: none; }
@media (max-width: 767px) {
    .catalog-chart-fab { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1040; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--bot-accent, #2fa89f); color: #0b1222; font-size: 14px; font-weight: 650; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
    .catalog-chart-fab.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
    .catalog-chart-fab b { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: rgba(11, 18, 34, .85); color: #fff; font-size: 12px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .catalog-chart-fab { transition: none; } }

/* "Trading bots by pair" column: one vertical step between title, composition, bulk risk, search and the list (2026-10-20) */
.catalog-pairs-panel { gap: 12px; }
.catalog-pairs-panel > .catalog-section-title,
.catalog-pairs-panel > .catalog-composition,
.catalog-pairs-panel > .catalog-risk-bulk,
.catalog-pairs-panel > .catalog-risk-bulk.rbk,
.catalog-pairs-panel > .catalog-pairs-tools,
.catalog-pairs-panel > .catalog-pairs,
.catalog-pairs-panel > .catalog-pairs-nomatch { margin-top: 0; margin-bottom: 0; }
.catalog-pairs-panel > .catalog-pairs-tools .catalog-pairs-search { margin: 0; }

/* custom date range of the chart (between the title and 1W/1M/3M/All) and the date of the max drawdown, 2026-10-24 */
.catalog-dates { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; margin-left: auto; padding: 3px 6px; border: 1px solid var(--catalog-border); border-radius: 10px; background: rgba(128,145,178,.04); }
.catalog-dates + .catalog-range { margin-left: 0; }
.catalog-dates label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 11px; font-weight: 600; color: var(--catalog-muted); }
.catalog-dates-sep { color: var(--catalog-muted); font-size: 11px; }
.catalog-date { color-scheme: dark; width: 124px; height: 26px; padding: 2px 6px; border: 1px solid transparent; border-radius: 7px; background: rgba(128,145,178,.08); color: var(--x-heading-color, #fff); font: inherit; font-size: 11px; font-weight: 600; }
.catalog-date:focus { outline: none; border-color: color-mix(in srgb, var(--bot-accent) 55%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bot-accent) 18%, transparent); }
.catalog-date:disabled { opacity: .45; }
.catalog-date::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
@media (max-width: 575px) {
    .catalog-dates { width: 100%; margin-left: 0; justify-content: space-between; }
    .catalog-dates label { flex: 1; }
    .catalog-date { width: 100%; flex: 1; min-width: 0; }
}

/* drawdown tile (2026-10-25): realized drawdown is the main value with its date; the one with open positions is one quiet line below; chart 340px (280px on phones) */
.catalog-kpi--drawdown small.catalog-dd-note { margin-top: 0; gap: 6px; flex-wrap: wrap; }
.catalog-dd-date { color: var(--catalog-muted); opacity: .8; }
.catalog-dd-date:not(:empty)::before { content: "·"; margin-right: 6px; }
.catalog-dd-open { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; padding-top: 8px; border-top: 1px dashed var(--catalog-border); font-size: 10.5px; color: var(--catalog-muted); }
.catalog-dd-open[hidden] { display: none; }
.catalog-dd-open b { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; color: #c084fc; }
.catalog-dd-open span { font-size: inherit; }
@media (max-width: 767px) {
    .catalog-chart-wrap, .catalog-chart { height: 280px; }
}