/* ===== Вкладка "Графики": список инструментов и график PocketOption =====
   Использует палитру и классы из style.css (.search-wrap, .charts-groups,
   .chg-tab, .symbol-row, ...). Здесь — только то, чего там нет. */

.q-meta{display:flex;justify-content:space-between;align-items:center;font:600 11px var(--font-label);color:var(--ink-faint);margin:2px 2px 12px;letter-spacing:.02em;}

/* сегментированный переключатель */
.q-seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px;flex-shrink:0;}
.q-seg button{border:0;background:transparent;color:var(--ink-faint);font:700 11px var(--font-label);padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,transform .15s var(--ease-spring);}
.q-seg button:active{transform:scale(.94);}
.q-seg button.active{background:var(--gilt);color:var(--gilt-ink);}

/* строки списка */
.q-row{opacity:1;animation:none;content-visibility:auto;contain-intrinsic-size:auto 66px;}
.q-row .symbol-icon{font-size:12px;letter-spacing:-.01em;}
.symbol-icon.t-cryptocurrency{background:rgba(247,147,26,.14);color:#f7a43a;}
.symbol-icon.t-stock{background:rgba(96,165,250,.14);color:#7db4fb;}
.symbol-icon.t-commodity{background:rgba(250,204,21,.13);color:#f2cc4b;}
.symbol-icon.t-index{background:rgba(167,139,250,.14);color:#b5a2fb;}
.q-row.is-closed{opacity:.6;}

.q-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.q-pay{font:800 11.5px var(--font-mono);padding:4px 9px;border-radius:999px;background:var(--emerald-dim);color:var(--emerald);}
.q-pay.mid{background:var(--gilt-dim);color:var(--gilt-bright);}
.q-pay.off{background:var(--surface-3);color:var(--ink-faint);}
.q-state{display:flex;align-items:center;gap:5px;font:700 10px var(--font-label);color:var(--ink-faint);}
.q-state i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);}
.q-state.open{color:var(--emerald);}
.q-state.open i{background:var(--emerald);animation:livePulse 1.8s infinite;}

.q-msg{text-align:center;padding:42px 20px;color:var(--ink-faint);font-size:13px;line-height:1.5;}
.q-msg .btn{margin-top:14px;padding:11px 20px;}

/* ---- график ---- */
.q-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;}
.q-name{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.15;}
.q-sub{font:600 11.5px var(--font-label);color:var(--ink-faint);margin-top:4px;}
.q-live{display:inline-flex;align-items:center;gap:6px;font:700 10.5px var(--font-label);letter-spacing:.03em;padding:6px 11px;border-radius:999px;flex-shrink:0;margin-top:2px;background:var(--surface-2);color:var(--ink-faint);transition:background .25s,color .25s;}
.q-live i{width:7px;height:7px;border-radius:50%;background:currentColor;}
.q-live.on{background:var(--emerald-dim);color:var(--emerald);}
.q-live.on i{animation:livePulse 1.4s infinite;}
.q-live.recon{background:var(--gilt-dim);color:var(--gilt-bright);}
.q-live.recon i{animation:livePulse .8s infinite;}
.q-live.stale,.q-live.off{background:var(--claret-dim);color:var(--claret);}

.q-price-row{display:flex;align-items:baseline;gap:12px;margin:10px 0 14px;}
.q-price{font:800 30px var(--font-mono);letter-spacing:-.02em;color:var(--ink);transition:color .25s;}
.q-price[data-dir="up"]{color:var(--emerald);}
.q-price[data-dir="down"]{color:var(--claret);}
.q-chg{font:700 13px var(--font-mono);color:var(--ink-faint);}
.q-chg.up{color:var(--emerald);}
.q-chg.down{color:var(--claret);}
.q-chg small{font:600 10px var(--font-label);color:var(--ink-faint);margin-left:6px;}

.q-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none;}
.q-tools::-webkit-scrollbar{display:none;}

.q-canvas-wrap{position:relative;width:100%;height:320px;border-radius:var(--radius-lg);overflow:hidden;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--hairline);box-shadow:var(--shadow-sm);margin-bottom:14px;}
#qCanvas{width:100%;height:100%;display:block;touch-action:pan-y;cursor:crosshair;}
.q-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--ink-faint);font:600 12.5px var(--font-label);background:var(--glass-bg);transition:opacity .25s;}
.q-status.hidden{opacity:0;pointer-events:none;}