/* QUANT-X core — компоненты, которые qx.js вставляет в ЛЮБУЮ страницу (включая терминал).
   Все классы с префиксом qx-, токены --qx-*, чтобы не конфликтовать со стилями терминала.
   Палитра = терминал: светлая база, индиго/фиолетовый, зелёный/красный/янтарный. */
:root {
  /* Палитра A «Бумага и чернила»: тёплый светлый фон, чёрный текст, один акцент — тёмно-зелёный */
  --qx-bg: #f5f3ee; --qx-bg-2: #ebe8e0;
  --qx-surface: #ffffff; --qx-surface-2: #faf9f6;
  --qx-border: #e3e0d8; --qx-border-strong: #cfcbc0;
  --qx-text: #141414; --qx-muted: #5e5b55; --qx-faint: #8f8b82;
  --qx-accent: #0b6e4f; --qx-accent-2: #0b6e4f; --qx-accent-ink: #ffffff;
  --qx-up: #1b7f4b; --qx-down: #b3261e; --qx-warn: #a86400; --qx-info: #2f5fd0;
  --qx-core: #2f5fd0; --qx-pro: #6a4c93; --qx-level-r: #2f5fd0; --qx-level-s: #b3261e;
  --qx-shadow: none;
  --qx-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --qx-display: var(--qx-font); --qx-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
:root[data-theme="dark"] {
  --qx-bg: #0f1012; --qx-bg-2: #1a1b1f;
  --qx-surface: #16171a; --qx-surface-2: #1c1d21;
  --qx-border: #2a2b30; --qx-border-strong: #3a3b41;
  --qx-text: #ededed; --qx-muted: #a3a29e; --qx-faint: #6f6e6a;
  --qx-accent: #3fb68b; --qx-accent-2: #3fb68b; --qx-accent-ink: #0f1012;
  --qx-up: #3fb68b; --qx-down: #e5534b; --qx-warn: #d99a1e; --qx-info: #6b93ff;
  --qx-core: #6b93ff; --qx-pro: #b39ddb; --qx-level-r: #6b93ff; --qx-level-s: #e5534b;
  --qx-shadow: none;
}

/* кнопки */
.qx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--qx-border-strong); background: var(--qx-surface-2); color: var(--qx-text); font: 600 12px var(--qx-font);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color .15s, filter .15s; }
.qx-btn:hover { border-color: var(--qx-accent); text-decoration: none; }
.qx-btn.primary { background: var(--qx-accent); border-color: transparent; color: var(--qx-accent-ink); }
.qx-btn.primary:hover { filter: brightness(1.07); }
.qx-btn.ghost { background: transparent; border-color: transparent; color: var(--qx-muted); }
.qx-btn.ghost:hover { color: var(--qx-text); border-color: var(--qx-border); }

/* бейджи */
.qx-tier { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font: 700 10.5px var(--qx-mono);
  letter-spacing: .08em; border: 1px solid var(--qx-border-strong); color: var(--qx-muted); background: var(--qx-surface-2); }
.qx-tier.core { color: var(--qx-core); border-color: color-mix(in srgb, var(--qx-core) 45%, transparent); background: color-mix(in srgb, var(--qx-core) 9%, transparent); }
.qx-tier.pro  { color: var(--qx-pro);  border-color: color-mix(in srgb, var(--qx-pro) 45%, transparent);  background: color-mix(in srgb, var(--qx-pro) 9%, transparent); }
.qx-tier.soon { color: var(--qx-warn); border-color: color-mix(in srgb, var(--qx-warn) 45%, transparent); background: color-mix(in srgb, var(--qx-warn) 8%, transparent); }
.qx-pill { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 6px; font: 600 10.5px var(--qx-mono);
  background: var(--qx-surface-2); border: 1px solid var(--qx-border); color: var(--qx-muted); }
.qx-pill.bullish { color: var(--qx-up); } .qx-pill.bearish { color: var(--qx-down); } .qx-pill.neutral, .qx-pill.flat { color: var(--qx-warn); }
.qx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--qx-up); display: inline-block; animation: qx-pulse 2s infinite; }
.qx-dot.off { background: var(--qx-faint); animation: none; }
@keyframes qx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qx-up) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.qx-live { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--qx-mono); letter-spacing: .08em; color: var(--qx-muted); }

/* замок */
.qx-lockable { position: relative; }
.qx-locked > :not(.qx-lock) { filter: blur(5px) saturate(.5); opacity: .5; pointer-events: none; user-select: none; }
.qx-lock { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center; padding: 16px; border-radius: inherit;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--qx-bg) 55%, transparent)); }
.qx-lock-inner { display: grid; gap: 7px; justify-items: center; max-width: 280px; font-family: var(--qx-font); }
.qx-lock-ico { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--qx-surface-2); border: 1px solid var(--qx-border-strong); color: var(--qx-accent); box-shadow: var(--qx-shadow); }
.qx-lock-t { font: 700 13.5px var(--qx-display); color: var(--qx-text); }
.qx-lock-s { font-size: 12px; color: var(--qx-muted); line-height: 1.45; }

/* сигналы H1 / M15 / VIEW */
.qx-sig { padding: 12px 2px; border-bottom: 1px solid var(--qx-border); display: grid; gap: 8px; font-family: var(--qx-font); color: var(--qx-text); }
.qx-sig:last-child { border-bottom: 0; }
.qx-sig.fresh { animation: qx-fresh 2.4s ease-out; }
@keyframes qx-fresh { from { background: color-mix(in srgb, var(--qx-accent) 14%, transparent); } to { background: transparent; } }
.qx-sig-h { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.qx-sig-t { margin-left: auto; font: 500 11px var(--qx-mono); color: var(--qx-faint); }
.qx-sig-title { font: 600 14px var(--qx-display); }
.qx-sig-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.6; }
.qx-sig-text.clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.qx-sig.locked .qx-sig-text { color: var(--qx-faint); letter-spacing: 1px; filter: blur(3px); user-select: none; }
.qx-lockline { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--qx-muted); padding: 8px 10px; border-radius: 6px;
  background: var(--qx-surface-2); border: 1px dashed var(--qx-border-strong); }
.qx-lockline svg { color: var(--qx-accent); flex: none; }
.qx-lockline .qx-btn { margin-left: auto; }
.qx-lvls { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.qx-lvl { padding: 6px 8px; border-radius: 8px; background: var(--qx-surface-2); border: 1px solid var(--qx-border); display: grid; gap: 1px; }
.qx-lvl span { font: 700 9.5px var(--qx-mono); letter-spacing: .08em; color: var(--qx-muted); }
.qx-lvl b { font: 600 13px var(--qx-mono); }
.qx-lvl.up b { color: var(--qx-up); } .qx-lvl.down b { color: var(--qx-down); }
.qx-empty { padding: 20px 10px; text-align: center; font: 12px var(--qx-mono); color: var(--qx-faint); }

/* пользовательский чип в шапке терминала */
.qx-userchip { display: flex; align-items: center; gap: 8px; font: 500 12px var(--qx-font); color: var(--qx-muted); }
.qx-userchip .qx-days { font: 600 11px var(--qx-mono); }
.qx-userchip .qx-days.warn { color: var(--qx-warn); }
.qx-iconbtn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 6px; border: 1px solid var(--qx-border); background: var(--qx-surface); color: var(--qx-muted); cursor: pointer; text-decoration: none; }
.qx-iconbtn:hover { color: var(--qx-text); border-color: var(--qx-border-strong); }
.qx-banner { display: flex; align-items: center; gap: 12px; padding: 9px 20px; font: 500 13px var(--qx-font); border-bottom: 1px solid var(--qx-border);
  background: color-mix(in srgb, var(--qx-warn) 12%, transparent); color: color-mix(in srgb, var(--qx-warn) 70%, var(--qx-text)); }
.qx-banner .qx-btn { margin-left: auto; }

/* toast */
#qx-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: grid; gap: 8px; }
.qx-toast { padding: 11px 14px; border-radius: 8px; background: var(--qx-surface-2); color: var(--qx-text); border: 1px solid var(--qx-border-strong);
  box-shadow: var(--qx-shadow); font: 13px var(--qx-font); max-width: 340px; animation: qx-tin .2s ease-out; }
.qx-toast.err { border-color: color-mix(in srgb, var(--qx-down) 50%, transparent); }
.qx-toast.ok { border-color: color-mix(in srgb, var(--qx-up) 50%, transparent); }
@keyframes qx-tin { from { transform: translateY(8px); opacity: 0; } }

/* переключатель языка */
.qx-langs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--qx-surface); border: 1px solid var(--qx-border); }
.qx-langs button { height: 26px; min-width: 32px; padding: 0 7px; border: 0; border-radius: 7px; background: transparent; color: var(--qx-muted);
  font: 700 11px var(--qx-mono); letter-spacing: .04em; cursor: pointer; }
.qx-langs button:hover { color: var(--qx-text); }
.qx-langs button.on { background: var(--qx-surface-2); color: var(--qx-accent); box-shadow: 0 1px 0 var(--qx-border-strong); }
