/* ============================================================================
   MARKTEX — ЖИВОЙ КУРСОР (live-cursor.css)
   ------------------------------------------------------------------------
   Три слоя: свечение (медленное) → кольцо (инерция) → точка (мгновенно).
   Режимы: card / btn / row / link / text / off.
   Подсказка с ценой на строках таблицы. Вспышка при клике.
   ============================================================================ */

/* ---------- скрыть нативный курсор когда модуль активен ---------- */
html.mtc-on, html.mtc-on * { cursor: none !important; }
/* <select> из этого списка убран: это не поле ввода, а кнопка-выбор,
   текстовая каретка над ним выглядела чужеродно. Теперь над ним работает
   общий режим cursor:none (кольцо с иконкой галочки). */
html.mtc-on input,
html.mtc-on textarea,
html.mtc-on [contenteditable="true"] { cursor: text !important; }

/* Псевдоэлементы браузера не попадают под селектор «*», поэтому здесь
   правила для полос прокрутки и индикаторов выбора даты. Без этого
   вдоль правого края и снизу оставались нативные стрелки курсора. */
html.mtc-on ::-webkit-scrollbar-thumb,
html.mtc-on ::-webkit-scrollbar-thumb:hover {
    cursor: none !important;
}
html.mtc-on ::-webkit-calendar-picker-indicator {
    cursor: none !important;
}

/* ---------- Контейнер курсора ---------- */
#mtc {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.25s ease;
}
/* Показываем ТОЛЬКО после первого движения мыши — иначе на загрузке
   кольцо и свечение висят в левом верхнем углу (курсор «застрял»). */
html.mtc-on #mtc.mtc-active { opacity: 1; }
/* Ушли за окно — гасим всё, в т.ч. кольцо (иначе замирает на экране). */
html.mtc-on #mtc.mtc-off,
html.mtc-on #mtc.mtc-off #mtcRing,
html.mtc-on #mtc.mtc-off #mtcGlow,
html.mtc-on #mtc.mtc-off #mtcDot { opacity: 0 !important; }

/* ---------- Слой 1: свечение (самый медленный, самый большой) ---------- */
/* Центр задаёт JS через transform: translate3d(...) translate(-50%,-50%),
   поэтому здесь НЕТ margin-left/top — смена размера не требует правки отступов.
   filter: blur УБРАН: радиальный градиент уже мягкий, а blur по площадке
   220x220 пересчитывался на каждый кадр и был главным источником тормозов. */
#mtcGlow {
    position: absolute; left: 0; top: 0;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.20) 0%, rgba(212,175,55,0.07) 40%, transparent 68%);
    opacity: 0.4;
    transition: opacity 0.3s ease;
    will-change: transform;
}
.mtc-card #mtcGlow { opacity: 0.75; }
.mtc-row #mtcGlow { opacity: 0.6; }
body.light #mtcGlow {
    background: radial-gradient(circle, rgba(160,124,24,0.14) 0%, rgba(160,124,24,0.05) 40%, transparent 68%);
}

/* ---------- Слой 2: кольцо ---------- */
#mtcRing {
    position: absolute; left: 0; top: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.55);
    box-shadow: 0 0 10px rgba(212,175,55,0.15), inset 0 0 8px rgba(212,175,55,0.08);
    /* margin из transition убран: он вызывал layout на каждую смену режима */
    transition: width 0.18s ease, height 0.18s ease,
                border-color 0.18s ease, border-width 0.18s ease,
                box-shadow 0.18s ease, background 0.18s ease;
    will-change: transform;
}
body.light #mtcRing {
    border-color: rgba(160,124,24,0.5);
    box-shadow: 0 0 10px rgba(160,124,24,0.1);
}
/* Карточка: кольцо увеличивается */
.mtc-card #mtcRing {
    width: 44px; height: 44px;
    border-color: rgba(212,175,55,0.8);
    box-shadow: 0 0 20px rgba(212,175,55,0.35), inset 0 0 14px rgba(212,175,55,0.12);
}
body.light .mtc-card #mtcRing {
    border-color: rgba(160,124,24,0.6);
    box-shadow: 0 0 14px rgba(160,124,24,0.2);
}
/* Кнопка: кольцо сужается, заполняется золотым */
.mtc-btn #mtcRing {
    width: 26px; height: 26px;
    border-color: rgba(212,175,55,0.7);
    border-width: 2.5px;
    background: rgba(212,175,55,0.10);
}
body.light .mtc-btn #mtcRing {
    border-color: rgba(160,124,24,0.6);
    background: rgba(160,124,24,0.10);
}
/* Строка таблицы: средний размер */
.mtc-row #mtcRing {
    width: 38px; height: 38px;
    border-color: rgba(212,175,55,0.6);
}

/* ---------- Слой 3: точка (мгновенно, без инерции) ---------- */
#mtcDot {
    position: absolute; left: 0; top: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 6px rgba(212,175,55,0.5);
    transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease,
                background 0.18s ease, box-shadow 0.18s ease;
    will-change: transform;
}
body.light #mtcDot { background: #a07c18; box-shadow: 0 0 6px rgba(160,124,24,0.5); }
.mtc-btn #mtcDot, .mtc-text #mtcDot, .mtc-off #mtcDot { opacity: 0; }

/* ---------- Иконка внутри кольца ---------- */
#mtcIco {
    position: absolute; left: 50%; top: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    color: rgba(212,175,55,0.75);
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mtc-btn #mtcIco, .mtc-row #mtcIco, .mtc-link #mtcIco {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    color: rgba(212,175,55,0.85);
}
body.light #mtcIco { color: rgba(160,124,24,0.85); }
body.light .mtc-btn #mtcIco,
body.light .mtc-row #mtcIco,
body.light .mtc-link #mtcIco { color: rgba(160,124,24,0.9); }

/* ---------- Вспышка при клике ---------- */
#mtcRipple {
    position: absolute;
    left: 50%; top: 50%;
    width: 48px; height: 48px;
    margin-left: -24px; margin-top: -24px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.7);
    opacity: 0;
    pointer-events: none;
}
#mtcRipple.go {
    animation: mtcRippleAnim 0.55s ease-out forwards;
}
@keyframes mtcRippleAnim {
    0% { transform: scale(0.3); opacity: 1; border-color: rgba(212,175,55,0.9); }
    100% { transform: scale(2.8); opacity: 0; border-color: rgba(212,175,55,0); }
}
body.light #mtcRipple { border-color: rgba(160,124,24,0.6); }

/* ---------- Подсказка с ценой ---------- */
/* Позиция задаётся JS-ом через transform: translate3d(...), поэтому
   базовый transform здесь = none, а left/top зафиксированы в 0.
   backdrop-filter УБРАН: размытие фона пересчитывалось на каждый кадр
   движения мыши. Фон стал плотнее, чтобы текст читался без blur. */
#mtcHint {
    position: fixed;
    left: 0; top: 0;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px; font-weight: 700;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100001;
    opacity: 0;
    transform: translate3d(-9999px,-9999px,0);
    transition: opacity 0.15s ease;
    background: linear-gradient(145deg, rgba(22,22,22,0.98), rgba(12,12,12,0.98));
    border: 1px solid rgba(212,175,55,0.3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 10px rgba(212,175,55,0.12);
    color: #ccc;
    will-change: transform;
}
#mtcHint.visible { opacity: 1; }
#mtcHint .mtc-hint-main { display: flex; align-items: center; gap: 6px; }
#mtcHint .mtc-hint-sym { color: #d4af37; font-weight: 800; }
#mtcHint .mtc-hint-price { color: #fff; font-variant-numeric: tabular-nums; }
#mtcHint .mtc-hint-chg { font-weight: 600; }
#mtcHint .mtc-hint-chg.up { color: #4ade80; }
#mtcHint .mtc-hint-chg.down { color: #f87171; }
body.light #mtcHint {
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(244,245,247,0.96));
    border-color: rgba(160,124,24,0.35);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    color: #333;
}
body.light #mtcHint .mtc-hint-sym { color: #8a6d1f; }
body.light #mtcHint .mtc-hint-price { color: #141414; }
body.light #mtcHint .mtc-hint-chg.up { color: #15803d; }
body.light #mtcHint .mtc-hint-chg.down { color: #b91c1c; }

/* ---------- Свечение карточки (spotlight) ---------- */
.mtc-lit { position: relative; }
/*
   overflow:hidden УБРАН — раньше он обрезал выпадающие элементы
   внутри карточек (дропдауны сетей, всплывающие подсказки).
   ::after-наложение затухает к 65% радиуса — визуально не выходит
   за пределы карточки, но content не режет.
*/
.mtc-lit::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(120px circle at var(--mtc-x, 50%) var(--mtc-y, 50%),
        rgba(212,175,55,0.18), transparent 65%);
    opacity: 1;
    transition: opacity 0.2s;
}
body.light .mtc-lit::after {
    background: radial-gradient(120px circle at var(--mtc-x, 50%) var(--mtc-y, 50%),
        rgba(160,124,24,0.10), transparent 65%);
}

/* ---------- Приподнимание карточки ---------- */
/* -2px: совпадает с .top-card:hover{translateY(-2px)} — без !important */
html.mtc-on .mtc-lift {
    transform: translateY(-2px);
}

/* ---------- Подсветка строки таблицы ---------- */
html.mtc-on .market-table tbody tr.mtc-row-hot {
    background: rgba(212,175,55,0.10) !important;
}
html.mtc-on .market-table tbody tr.mtc-row-hot td:first-child {
    box-shadow: inset 3px 0 0 var(--gold);
}
html.mtc-on .market-table tbody tr.mtc-row-hot .asset-symbol {
    color: #f5d97a;
}
html.mtc-on body.light .market-table tbody tr.mtc-row-hot {
    background: rgba(212,175,55,0.12) !important;
}
html.mtc-on body.light .market-table tbody tr.mtc-row-hot td:first-child {
    box-shadow: inset 3px 0 0 #a07c18;
}
html.mtc-on body.light .market-table tbody tr.mtc-row-hot .asset-symbol {
    color: #8a6d1f;
}

/* ---------- Адаптив ---------- */
@media (max-width: 1100px), (hover: none), (pointer: coarse) {
    #mtc, #mtcHint { display: none !important; }
}

/* ---------- Уменьшенное движение ----------
   JS в этом режиме обнуляет tau и MAXGAP (слои приклеены к курсору), но
   собственные CSS-переходы размеров/цветов и анимация вспышки живут своей
   жизнью и продолжали двигаться. Без этого блока настройка системы
   «уменьшить движение» соблюдалась только наполовину. */
@media (prefers-reduced-motion: reduce) {
    #mtc,
    #mtcGlow,
    #mtcRing,
    #mtcDot,
    #mtcIco,
    #mtcHint,
    .mtc-lit::after {
        transition: none !important;
    }
    #mtcRipple.go { animation: none !important; }
}