/* VC Tools — Terminal Luxe visual layer */

/* ── Base & typography ─────────────────── */
body.vc-site-page {
  font-family: var(--font-ui);
  background: var(--vc-base);
  color: var(--vc-text-muted);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -25%, var(--vc-cta-glow), transparent 58%),
    radial-gradient(ellipse 45% 35% at 100% 0%, rgba(18, 209, 142, 0.04), transparent 50%),
    linear-gradient(180deg, var(--vc-base) 0%, #08090D 100%);
}

body.vc-site-page.light {
  background-image:
    radial-gradient(ellipse 85% 50% at 50% -18%, var(--vc-cta-bg), transparent 58%),
    radial-gradient(ellipse 42% 38% at 98% 2%, rgba(13, 159, 110, 0.05), transparent 52%);
}

h1, h2, h3, h4, .nav-logo-text, .vc-hero h1, .modal h2,
.lp-header h3, .vc-bundles-page-head h1, .vc-tariffs-head h1,
.vc-eyebrow, .factor-section-title, .s-section h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.price, .pos, .neg, .rate-val, .stat-val, .vc-cx-roi, .vc-cx-stat b,
.vc-hero-stats .n, .vc-card-s .n, .factor-badge .factor-score,
.factor-item-score, .upd-cell, .vc-dd-cur, .item-count,
.vc-plan-price, .vc-pay-amount, .vc-log-live,
.vc-period-btn, .vc-chat-time, .vc-logs .lg .lt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── Navbar — terminal bar ─────────────── */
body.vc-site-page .navbar {
  height: var(--nav-h);
  background: linear-gradient(180deg, rgba(26, 29, 38, 0.96), rgba(18, 20, 26, 0.94));
  border-bottom: 1px solid var(--vc-border);
  box-shadow: var(--vc-shadow-sm), 0 1px 0 var(--vc-cta-bg);
  backdrop-filter: blur(16px) saturate(1.2);
}

body.light .navbar {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 var(--vc-border), 0 8px 24px rgba(17, 24, 39, 0.05);
}

.nav-logo:hover {
  background: var(--vc-cta-bg);
}

.nav-logo-text {
  color: var(--vc-text);
  font-weight: 700;
}

.nav-game {
  background: var(--vc-elevated);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-sm);
  box-shadow: var(--vc-shadow-inset);
}

.nav-game .icon {
  color: var(--vc-cta-text);
}

.nav-tab {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav-tab.active {
  color: var(--vc-cta-text);
  border-bottom-color: var(--vc-cta);
  text-shadow: 0 0 20px var(--vc-cta-glow);
}

.nav-icon-btn {
  background: var(--vc-elevated);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-sm);
  box-shadow: var(--vc-shadow-inset);
}

.nav-icon-btn:hover {
  color: var(--vc-cta-text);
  border-color: var(--vc-border-hover);
  box-shadow: 0 0 0 1px var(--vc-cta-bg), var(--vc-shadow-inset);
}

.nav-icon-btn.green {
  background: var(--vc-profit-bg);
  border-color: rgba(18, 209, 142, 0.25);
  color: var(--vc-profit);
}

/* ── Sidebar / filters panel ───────────── */
.left-panel, .filter-bar, .lp-header {
  background: var(--vc-surface);
  border-color: var(--vc-border);
}

.lp-header {
  border-bottom: 1px solid var(--vc-border);
  box-shadow: var(--vc-shadow-inset);
}

.lp-header h3 .icon,
.lp-label .icon,
.lp-info .icon,
.item-count-ic {
  color: var(--vc-cta-text);
}

.sidebar-expand:hover {
  background: var(--vc-cta);
  color: var(--vc-on-cta);
  box-shadow: 0 4px 16px var(--vc-cta-glow);
}

/* ── Inputs & selects ──────────────────── */
input, select, textarea, .vc-dd-trigger, .currency-select {
  /* background-color, а не сокращённое background: сокращённая запись
     сбрасывает background-image в none, и стрелка селекта, заданная в
     app.css, пропадала. Цвет тот же. (Пункт 9, 08.08.2026.) */
  background-color: var(--vc-base);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-sm);
  color: var(--vc-text);
  box-shadow: var(--vc-shadow-inset);
  transition: border-color var(--vc-dur-fast), box-shadow var(--vc-dur-fast);
}

input:focus, select:focus, textarea:focus, .vc-dd.open .vc-dd-trigger {
  border-color: var(--vc-cta);
  box-shadow: 0 0 0 3px var(--vc-cta-bg), var(--vc-shadow-inset);
  outline: none;
}

/* ── Buttons ───────────────────────────── */
.vc-btn, .btn, .mini-btn, .theme-btn, .stab, .vc-period-btn {
  font-family: var(--font-display);
  border-radius: var(--vc-radius-sm);
  transition: all var(--vc-dur-fast) var(--vc-ease-out);
}

.vc-btn, .btn {
  background: var(--vc-elevated);
  border: 1px solid var(--vc-border);
  color: var(--vc-text);
  box-shadow: var(--vc-shadow-inset);
}

.vc-btn:hover, .btn:hover {
  border-color: var(--vc-border-hover);
  background: var(--vc-overlay);
}

.vc-btn.primary, .btn.primary, .vc-plan-cta.primary {
  background: linear-gradient(180deg, var(--vc-cta-hover), var(--vc-cta));
  border-color: transparent;
  color: var(--vc-on-cta);
  font-weight: 700;
  box-shadow: 0 4px 20px var(--vc-cta-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vc-btn.primary:hover, .btn.primary:hover, .vc-plan-cta.primary:hover {
  background: linear-gradient(180deg, var(--vc-cta-hover), var(--vc-cta-hover));
  box-shadow: 0 8px 28px var(--vc-cta-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.theme-btn.active:not([data-accent]) {
  background: var(--vc-cta) !important;
  color: var(--vc-on-cta) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 12px var(--vc-cta-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

body.light .theme-btn.active:not([data-accent]) {
  color: var(--vc-on-cta) !important;
}

.btn-filter-toggle.active,
.vc-period-btn.active {
  background: var(--vc-cta-bg);
  border-color: var(--vc-cta-glow);
  color: var(--vc-cta-text);
}

.btn-reset:hover {
  color: var(--vc-cta-text);
  border-color: var(--vc-cta);
  background: var(--vc-cta-bg);
}

.rate-edit-btn, .swap button {
  color: var(--vc-cta-text);
}

.rate-editor .rate-save {
  background: var(--vc-cta);
  color: var(--vc-on-cta);
}

/* ── Table — trading terminal ──────────── */
.tbl-wrap {
  border-radius: var(--vc-radius-md);
  border: 1px solid var(--vc-border);
  box-shadow: var(--vc-shadow-md);
  background: var(--vc-surface);
  overflow: hidden;
}

table {
  background: transparent;
}

thead th {
  background: linear-gradient(180deg, var(--vc-overlay), var(--vc-elevated));
  color: var(--vc-text-faint);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--vc-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

thead th:hover {
  color: var(--vc-cta-text);
}

tbody tr.data-row:hover {
  background: var(--hover-surface);
  box-shadow: inset 3px 0 0 var(--vc-cta);
}

tbody tr.data-row.open {
  background: var(--vc-cta-bg);
}

.skin-name {
  color: var(--vc-text);
  font-family: var(--font-display);
}

.skin-img {
  background: var(--vc-base);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-sm);
}

.price {
  color: var(--vc-text);
  font-weight: 600;
}

.pos {
  color: var(--vc-profit);
  font-weight: 600;
}

.neg {
  color: var(--vc-loss);
  font-weight: 600;
}

body:not(.light) .pos {
  text-shadow: 0 0 14px var(--vc-profit-glow);
}

body:not(.light) .neg {
  text-shadow: 0 0 14px var(--vc-loss-glow);
}

.s-badge.ok {
  color: var(--vc-profit);
  border-color: rgba(18, 209, 142, 0.35);
  background: var(--vc-profit-bg);
}

.s-badge.error {
  color: var(--vc-loss);
  border-color: rgba(255, 77, 109, 0.35);
  background: var(--vc-loss-bg);
}

#progressBar {
  background: linear-gradient(90deg, var(--vc-cta), var(--vc-cta-hover));
}

/* ── Cards & modals ────────────────────── */
.modal, .vc-card, .vc-card-s, .vc-cx, .vc-authwrap .vc-card,
.vc-plan-card-inner, .vc-feat-card, .vc-t-compact, .factor-section,
.detail-panel, .vc-profile-card, .vc-404-card {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
  box-shadow: var(--vc-shadow-md);
}

.modal h2, .vc-pane-h {
  font-family: var(--font-display);
  color: var(--vc-text);
}

.detail-panel {
  border-top: 2px solid var(--vc-cta);
  background: linear-gradient(180deg, var(--vc-elevated), var(--vc-surface));
}

.stab.active {
  color: var(--vc-cta-text);
  border-bottom-color: var(--vc-cta);
}

/* ── Profit / bundles / stats ──────────── */
.vc-cx-roi.hot, .vc-cx-badge, .vc-bundles-head .icon {
  color: var(--vc-profit);
}

.vc-cx-badge {
  background: var(--vc-profit-bg);
  border: 1px solid rgba(18, 209, 142, 0.2);
}

.vc-card-s {
  background: var(--vc-elevated);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
  box-shadow: var(--vc-shadow-sm);
}

.stat-val, .vc-card-s .n {
  color: var(--vc-text);
}

/* ── Premium / Ultimate ────────────────── */
.vc-dd-plan.premium,
.vc-plan-nav--premium,
.vc-profile-plan-name.vc-plan-nav--premium {
  color: var(--vc-gold) !important;
  border-color: rgba(229, 180, 91, 0.35) !important;
}

.vc-chat-nick--premium {
  color: var(--vc-gold) !important;
}

.vc-chat-nick--ultimate {
  color: var(--vc-cta-text) !important;
  text-shadow: 0 0 12px var(--vc-cta-glow);
}

.vc-plan-card.featured .vc-plan-card-inner,
.vc-plan-card--popular .vc-plan-card-inner {
  border-color: rgba(229, 180, 91, 0.4);
  box-shadow: 0 0 0 1px rgba(229, 180, 91, 0.15), var(--vc-shadow-md);
}

/* ── Landing & marketing ───────────────── */
.vc-eyebrow {
  color: var(--vc-cta-text);
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
}

.vc-hero h1 {
  color: var(--vc-text);
}

.vc-hero h1 em {
  color: var(--vc-cta-text);
  font-style: normal;
}

.vc-hero p {
  color: var(--vc-text-muted);
}

.vc-feat-card:hover {
  border-color: var(--vc-border-hover);
  box-shadow: var(--vc-shadow-md), 0 0 0 1px var(--vc-cta-bg);
}

.vc-site-footer {
  border-top: 1px solid var(--vc-border);
  background: linear-gradient(180deg, transparent, var(--vc-base));
}

/* ── Dropdowns & toggles ───────────────── */
.vc-dd-menu {
  background-color: var(--dd-menu-bg);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
  box-shadow: var(--vc-shadow-lg);
  backdrop-filter: blur(20px);
}

.vc-dd-cur {
  color: var(--vc-cta-text);
}

/* Тумблер во включённом состоянии.
   Было var(--vc-profit) — зелёный «цвет прибыли». Этот файл грузится после
   app.css, поэтому правило перебивало там токен и тумблер горел зелёным при
   любом акценте (пункт 4 журнала багов, 08.08.2026). Цвет теперь один и тот
   же с app.css — из --vc-control-* в vc-tokens.css. */
.toggle input:checked {
  background-color: var(--vc-control-track-on);
}

.vc-switch input:checked + .vc-switch-track {
  background-color: var(--vc-cta);
}

/* ── Scrollbars ────────────────────────── */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 6px;
}

.vc-scroll::-webkit-scrollbar-thumb,
.vc-card::-webkit-scrollbar-thumb {
  background: var(--vc-cta-glow);
}

/* ── Row actions & fav ─────────────────── */
.row-actions a:hover, .row-actions .favbtn:hover {
  background: var(--vc-cta-bg);
  color: var(--vc-cta-text);
  border-color: var(--vc-cta-glow);
}

.row-actions .favbtn.on {
  color: var(--vc-cta-text);
  border-color: var(--vc-cta-glow);
  background: var(--vc-cta-bg);
}

.row-actions .favbtn.on .vc-ic {
  fill: var(--vc-cta-text);
}

/* ── Factor badges ─────────────────────── */
.factor-section-title .icon,
.factor-item-icon {
  color: var(--vc-cta-text);
}

.factor-item-icon {
  background: var(--vc-elevated);
  border: 1px solid var(--vc-border);
}

/* ── Admin overlay ─────────────────────── */
#vcAdminOv .vc-adm-head {
  background: var(--vc-elevated);
  border-bottom: 1px solid var(--vc-border);
}

#vcAdminOv .vc-pane {
  background: var(--vc-surface);
}

/* ── Auth / login ──────────────────────── */
.vc-authwrap .vc-card {
  background: linear-gradient(165deg, var(--vc-elevated), var(--vc-surface));
}

.vc-authwrap .vc-btn.steam {
  background: linear-gradient(180deg, #2a2d38, #1a1d26);
  border-color: var(--vc-border);
}

/* Переопределение ползунка убрано 09.08.2026: этот файл грузится после
   vc-motion.css и повторял тот же залитый градиент, только с обратным
   порядком стопов. Внешний вид ползунка задаётся в одном месте —
   vc-motion.css, блок «Period picker glider». */

/* ── Motion mode button colors fix ─────── */
html[data-motion="simple"] .vc-btn.primary,
html[data-motion="simple"] .vc-plan-cta.primary {
  background: var(--vc-cta) !important;
  border-color: var(--vc-cta) !important;
  color: var(--vc-on-cta) !important;
}

html[data-motion="simple"] .vc-btn.primary:hover,
html[data-motion="simple"] .vc-plan-cta.primary:hover {
  background: var(--vc-cta-hover) !important;
  border-color: var(--vc-cta-hover) !important;
}

/* ── Utility ───────────────────────────── */
.vc-muted { color: var(--vc-text-faint); }
.vc-text { color: var(--vc-text); }
.vc-profit { color: var(--vc-profit); }
.vc-loss { color: var(--vc-loss); }
.vc-gold { color: var(--vc-gold); }

/* ── Additional terminal overrides ─────── */
.settings-body .stab.active {
  background: var(--vc-cta) !important;
  box-shadow: 0 2px 8px var(--vc-cta-glow) !important;
  color: var(--vc-on-cta) !important;
}

.btn-main {
  background: linear-gradient(180deg, var(--vc-cta-hover), var(--vc-cta)) !important;
  box-shadow: 0 4px 20px var(--vc-cta-glow) !important;
  color: var(--vc-on-cta) !important;
}

.btn-main:hover {
  box-shadow: 0 6px 28px var(--vc-cta-glow) !important;
}

.chart-box {
  background: linear-gradient(165deg, var(--vc-surface) 0%, var(--vc-elevated) 55%, var(--vc-cta-bg) 100%) !important;
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
}

.nav-tab.active {
  text-shadow: 0 0 16px var(--vc-cta-glow) !important;
}

.plat-card.active {
  border-color: var(--vc-cta) !important;
  box-shadow: 0 0 0 1px var(--vc-cta-glow), 0 4px 16px var(--vc-cta-glow) !important;
}

.filter-bar {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
  box-shadow: var(--vc-shadow-sm);
}

.vc-bundles-page-head {
  border-bottom: 1px solid var(--vc-border);
}

.vc-cx {
  background: var(--vc-elevated);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
}

.vc-cx-link {
  color: var(--vc-cta-text) !important;
  border-bottom-color: var(--vc-cta-glow) !important;
}

.vc-lang-switch {
  background: var(--vc-elevated);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
  box-shadow: var(--vc-shadow-inset);
}

.vc-topbrand:hover {
  background: var(--vc-cta-bg);
}

.vc-plan-price {
  color: var(--vc-text);
}

.vc-home-t-card {
  background: var(--vc-elevated);
  border: 1px solid var(--vc-border);
}

.no-data .icon {
  color: var(--vc-cta-text);
  opacity: 0.4;
}

.modal h2 .close:hover,
.detail-close:hover {
  color: var(--vc-cta-text);
  border-color: var(--vc-cta);
  background: var(--vc-cta-bg);
}

.vc-prompt-box {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-md);
  box-shadow: var(--vc-shadow-lg);
}

#vcAdminOv {
  background: var(--overlay);
}

#vcAdminOv .vc-adm-panel {
  background: var(--vc-surface);
  border: 1px solid var(--vc-border);
  box-shadow: var(--vc-shadow-lg);
}

.vc-hero-stats .vc-stat{background:none;border:none;box-shadow:none;padding:0;border-radius:0;}