.tg { --tg-violet: #6d28d9; --tg-violet-2: #c4b5fd; }

.tg-hero { padding-bottom: 64px; }
.tg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px; }
.tg-hero__art { min-width: 0; }

.tg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tg-svg text { font-family: var(--dx-mono, ui-monospace, monospace); }
.tg-svg * { transform-box: fill-box; transform-origin: center; }

.tg-art { padding: 18px; border: 1px solid var(--dx-line); border-radius: 20px; background: linear-gradient(180deg, #faf8ff, #ffffff 60%); }
.tg-art--plain { background: #fff; }
.tg-wide { margin: 26px 0 8px; padding: 22px; border: 1px solid var(--dx-line); border-radius: 22px; background: linear-gradient(180deg, #faf8ff, #ffffff 70%); }

.tg-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.tg-legend__item { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--dx-line); border-radius: 14px; background: #fff; }
.tg-legend__item > span { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--tg-violet); font-size: 12px; font-weight: 700; color: #fff; }
.tg-legend__item strong { display: block; font-size: 14.5px; color: var(--dx-ink); }
.tg-legend__item p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--dx-text); }
.tg-legend__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tg-keys { max-width: 560px; }

.tg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--dx-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--dx-ink); }
.tg-pill--lock { background: var(--dx-soft); color: var(--dx-muted); }
.tg-pill__i { width: 13px; height: 13px; }
.tg-strong { font-size: 14px; font-weight: 700; color: var(--dx-ink); }

.tg-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.tg-swatch-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--dx-line); border-radius: 12px; background: #fff; }
.tg-swatch-dot { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .12); }
.tg-swatch-row strong { display: block; font-size: 13.5px; color: var(--dx-ink); }
.tg-swatch-row span { display: block; font-size: 12.5px; color: var(--dx-muted); }

.tg-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.tg-cat { margin-top: 22px; }
.tg-cat__bar { position: sticky; top: calc(var(--dx-top) - 8px); z-index: 5; display: flex; flex-direction: column; gap: 12px; padding: 14px 0; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); }
.tg-cat__search { position: relative; max-width: 420px; }
.tg-cat__search input { width: 100%; padding: 11px 14px 11px 40px; border: 1px solid var(--dx-line); border-radius: 12px; background: #fff; font-size: 14px; color: var(--dx-ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.tg-cat__search input:focus { border-color: var(--tg-violet); box-shadow: 0 0 0 3px rgba(109, 40, 217, .12); }
.tg-cat__search-i { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--dx-muted); pointer-events: none; }
.tg-cat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--dx-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: var(--dx-text); cursor: pointer; transition: all .2s ease; }
.tg-chip em { font-style: normal; font-size: 11.5px; color: var(--dx-muted); }
.tg-chip:hover { border-color: var(--dx-ink); }
.tg-chip.is-on { background: var(--dx-ink); border-color: var(--dx-ink); color: #fff; }
.tg-chip.is-on em { color: rgba(255, 255, 255, .6); }

.tg-cat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.tg-el { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--dx-line); border-radius: 16px; background: #fff; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; animation: tgFadeIn .35s ease both; }
.tg-el:hover { border-color: #d8d0f5; transform: translateY(-2px); box-shadow: 0 16px 30px -24px rgba(30, 27, 75, .45); }
.tg-el[hidden] { display: none; }
.tg-el__icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: var(--dx-violet-soft); color: var(--tg-violet); }
.tg-el__svg { width: 19px; height: 19px; }
.tg-el__body { min-width: 0; }
.tg-el__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tg-el__top strong { font-size: 14.5px; color: var(--dx-ink); }
.tg-el__cat { padding: 2px 7px; border-radius: 999px; background: var(--dx-soft); font-size: 11px; font-weight: 600; color: var(--dx-muted); }
.tg-el__body p { margin: 6px 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--dx-text); }
.tg-el__where { display: inline-block; font-size: 12px; font-weight: 600; color: var(--tg-violet); }
.tg-el[data-cat="system"] .tg-el__icon { background: var(--dx-soft); color: var(--dx-muted); }
.tg-cat__empty { padding: 28px; border: 1px dashed #d4d4dd; border-radius: 14px; text-align: center; font-size: 14px; color: var(--dx-muted); }

.tg-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tg-tip { padding: 16px; border: 1px solid var(--dx-line); border-radius: 14px; background: #fff; }
.tg-tip strong { display: block; font-size: 14.5px; color: var(--dx-ink); }
.tg-tip p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--dx-text); }

.tg-faq { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.tg-faq__item { border: 1px solid var(--dx-line); border-radius: 14px; background: #fff; overflow: hidden; }
.tg-faq__item summary { position: relative; padding: 15px 44px 15px 16px; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--dx-ink); cursor: pointer; }
.tg-faq__item summary::-webkit-details-marker { display: none; }
.tg-faq__item summary::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--dx-muted); border-bottom: 2px solid var(--dx-muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.tg-faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.tg-faq__item.is-closing summary::after { transform: translateY(-70%) rotate(45deg); }
.tg-faq__item.is-closing { border-color: var(--dx-line); box-shadow: none; }
.tg-faq__item { transition: border-color .2s ease, box-shadow .2s ease; }
.tg-faq__item[open] { border-color: #ddd6fe; box-shadow: 0 14px 30px -26px rgba(30, 27, 75, .5); }
.tg-faq__item summary:hover { color: var(--dx-violet); }
.tg-faq__a { overflow: hidden; }
.tg-faq__a p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.65; color: var(--dx-text); }

.tg-sec:has(> .dx-sec__code:empty) { grid-template-columns: minmax(0, 1fr); }
.tg-sec:has(> .dx-sec__code:empty) > .dx-sec__body { max-width: 860px; }

.tg-cursor { animation: tgCursor 9s ease-in-out infinite; }
.tg-select { animation: tgSelect 9s ease-in-out infinite; }
.tg-tree-active { animation: tgSelect 9s ease-in-out infinite; }
.tg-hero-orb { animation: tgOrb 9s ease-in-out infinite; }
.tg-hero-btn { animation: tgHeroBtn 9s ease-in-out infinite; }
.tg-range { transform-origin: left center; animation: tgRange 9s ease-in-out infinite; }
.tg-range-knob { animation: tgKnob 9s ease-in-out infinite; }
.tg-hero-title { transform-origin: left center; animation: tgTitle 9s ease-in-out infinite; }
.tg-publish { animation: tgPublish 9s ease-in-out infinite; }
.tg-editor--numbered .tg-cursor { display: none; }
.tg-editor--numbered .tg-select,
.tg-editor--numbered .tg-tree-active,
.tg-editor--numbered .tg-hero-orb,
.tg-editor--numbered .tg-hero-btn,
.tg-editor--numbered .tg-range,
.tg-editor--numbered .tg-range-knob,
.tg-editor--numbered .tg-hero-title,
.tg-editor--numbered .tg-publish { animation: none; opacity: 1; }
.tg-callouts g { animation: tgPop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.tg-callouts g:nth-child(2) { animation-delay: .08s; }
.tg-callouts g:nth-child(3) { animation-delay: .16s; }
.tg-callouts g:nth-child(4) { animation-delay: .24s; }
.tg-callouts g:nth-child(5) { animation-delay: .32s; }

@keyframes tgCursor {
    0% { transform: translate(620px, 410px); }
    14%, 22% { transform: translate(330px, 150px); }
    18% { transform: translate(330px, 150px) scale(.85); }
    38%, 46% { transform: translate(560px, 252px); }
    42% { transform: translate(560px, 252px) scale(.85); }
    56% { transform: translate(628px, 292px); }
    70% { transform: translate(664px, 292px); }
    84%, 92% { transform: translate(650px, 30px); }
    88% { transform: translate(650px, 30px) scale(.85); }
    100% { transform: translate(620px, 410px); }
}
@keyframes tgSelect { 0%, 16% { opacity: 0; } 20%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tgOrb { 0%, 41% { fill: #c4b5fd; } 44%, 96% { fill: #fbbf24; } 100% { fill: #c4b5fd; } }
@keyframes tgHeroBtn { 0%, 41% { fill: #101014; } 44%, 96% { fill: #6d28d9; } 100% { fill: #101014; } }
@keyframes tgRange { 0%, 56% { transform: scaleX(1); } 70%, 96% { transform: scaleX(1.46); } 100% { transform: scaleX(1); } }
@keyframes tgKnob { 0%, 56% { transform: translateX(0); } 70%, 96% { transform: translateX(36px); } 100% { transform: translateX(0); } }
@keyframes tgTitle { 0%, 56% { transform: scaleX(1); } 70%, 96% { transform: scaleX(1.28); } 100% { transform: scaleX(1); } }
@keyframes tgPublish { 0%, 86% { fill: #6d28d9; } 88% { fill: #4c1d95; } 92%, 100% { fill: #6d28d9; } }
@keyframes tgPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes tgFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tg-click-cursor { animation: tgClickCursor 6s ease-in-out infinite; }
.tg-click-ring { animation: tgClickRing 6s ease-in-out infinite; }
.tg-click-panel { animation: tgClickPanel 6s ease-in-out infinite; }
.tg-typing { transform-origin: left center; animation: tgTyping 6s ease-in-out infinite; }
@keyframes tgClickCursor {
    0% { transform: translate(200px, 250px); }
    25%, 34% { transform: translate(110px, 70px); }
    29% { transform: translate(110px, 70px) scale(.85); }
    60%, 100% { transform: translate(330px, 90px); }
}
@keyframes tgClickRing { 0%, 27% { opacity: 0; } 31%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tgClickPanel { 0%, 30% { opacity: 0; transform: translateX(16px); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(16px); } }
@keyframes tgTyping { 0%, 52% { transform: scaleX(.05); } 74%, 100% { transform: scaleX(1); } }

.tg-pulse { animation: tgPulse 2.4s ease-in-out infinite; }
@keyframes tgPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.tg-pages-hover { animation: tgPagesHover 6s steps(1) infinite; mix-blend-mode: multiply; }
@keyframes tgPagesHover {
    0% { transform: translateY(0); }
    25% { transform: translateY(26px); }
    50% { transform: translateY(52px); }
    75% { transform: translateY(78px); }
}
.tg-pages-swap-a { animation: tgSwapA 6s ease-in-out infinite; }
.tg-pages-swap-b { animation: tgSwapB 6s ease-in-out infinite; }
@keyframes tgSwapA { 0%, 20% { fill: #ffffff; } 30%, 45% { fill: #f3efff; } 55%, 70% { fill: #ffffff; } 80%, 100% { fill: #ede9fe; } }
@keyframes tgSwapB { 0%, 20% { fill: #ffffff; } 30%, 45% { fill: #ffffff; } 55%, 70% { fill: #f3efff; } 80%, 100% { fill: #ffffff; } }

.tg-plus { animation: tgPlus 3s ease-in-out infinite; }
.tg-col-new { animation: tgColNew 6s ease-in-out infinite; }
@keyframes tgPlus { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes tgColNew { 0%, 30% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }

.tg-drag-moving { animation: tgDragMove 5s cubic-bezier(.6, 0, .3, 1) infinite; }
.tg-drag-b { animation: tgDragB 5s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tgDragMove {
    0%, 15% { transform: translate(0, 0); filter: none; }
    22% { transform: translate(6px, -4px); filter: drop-shadow(0 10px 14px rgba(109, 40, 217, .25)); }
    48% { transform: translate(6px, 50px); filter: drop-shadow(0 10px 14px rgba(109, 40, 217, .25)); }
    56%, 80% { transform: translate(0, 54px); filter: none; }
    92%, 100% { transform: translate(0, 0); }
}
@keyframes tgDragB { 0%, 30% { transform: translateY(0); } 45%, 80% { transform: translateY(-54px); } 92%, 100% { transform: translateY(0); } }

.tg-tab-ind { animation: tgTabs 8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tgTabs { 0%, 20% { transform: translateX(0); } 25%, 45% { transform: translateX(88px); } 50%, 70% { transform: translateX(176px); } 75%, 95% { transform: translateX(266px); } 100% { transform: translateX(0); } }
.tg-swatch-ring { animation: tgSwatchRing 6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tgSwatchRing { 0%, 15% { transform: translateX(0); } 20%, 35% { transform: translateX(32px); } 40%, 55% { transform: translateX(64px); } 60%, 75% { transform: translateX(96px); } 80%, 95% { transform: translateX(128px); } 100% { transform: translateX(0); } }
.tg-range2 { transform-origin: left center; animation: tgRange2 5s ease-in-out infinite; }
.tg-range2-knob { animation: tgRange2Knob 5s ease-in-out infinite; }
@keyframes tgRange2 { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.7); } }
@keyframes tgRange2Knob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(67px); } }
.tg-toggle { animation: tgToggle 4s steps(1) infinite; }
.tg-toggle-knob { animation: tgToggleKnob 4s ease-in-out infinite; }
@keyframes tgToggle { 0% { fill: #6d28d9; } 50% { fill: #d4d4dd; } }
@keyframes tgToggleKnob { 0%, 45% { transform: translateX(0); } 50%, 95% { transform: translateX(-20px); } 100% { transform: translateX(0); } }

.tg-dev { animation: tgDev 9s ease-in-out infinite; }
.tg-dev--tab { animation-delay: -6s; }
.tg-dev--mob { animation-delay: -3s; }
@keyframes tgDev { 0%, 30% { opacity: 1; } 36%, 94% { opacity: .32; } 100% { opacity: 1; } }
.tg-dev-ind { animation: tgDevInd 9s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tgDevInd { 0%, 30% { transform: translateX(0); } 36%, 63% { transform: translateX(53px); } 69%, 94% { transform: translateX(103px); } 100% { transform: translateX(0); } }
.tg-hidden-badge { animation: tgPlus 2s ease-in-out infinite; }

.tg-marquee-text { animation: tgMarquee 6s linear infinite; }
@keyframes tgMarquee { from { transform: translateX(-130px); } to { transform: translateX(130px); } }
.tg-badge { animation: tgPlus 1.6s ease-in-out infinite; }

.tg-pal-primary { animation: tgPalPrimary 8s ease-in-out infinite; }
.tg-pal-ink { animation: tgPalInk 8s ease-in-out infinite; }
.tg-pal-outline { animation: tgPalOutline 8s ease-in-out infinite; }
.tg-pal-font { animation: tgPalFont 8s steps(1) infinite, tgPalInk 8s ease-in-out infinite; }
@keyframes tgPalPrimary { 0%, 20% { fill: #101014; } 25%, 45% { fill: #6d28d9; } 50%, 70% { fill: #0f766e; } 75%, 95% { fill: #be123c; } 100% { fill: #101014; } }
@keyframes tgPalInk { 0%, 20% { fill: #101014; } 25%, 45% { fill: #2e1065; } 50%, 70% { fill: #134e4a; } 75%, 95% { fill: #4c0519; } 100% { fill: #101014; } }
@keyframes tgPalOutline { 0%, 20% { stroke: #101014; } 25%, 45% { stroke: #6d28d9; } 50%, 70% { stroke: #0f766e; } 75%, 95% { stroke: #be123c; } 100% { stroke: #101014; } }
@keyframes tgPalFont { 0% { font-family: Inter, sans-serif; } 25% { font-family: Georgia, serif; } 50% { font-family: ui-monospace, monospace; } 75% { font-family: 'Trebuchet MS', sans-serif; } }

.tg-serp-title { transform-origin: left center; animation: tgSerp 7s ease-in-out infinite; }
.tg-serp-type { transform-origin: left center; animation: tgSerp 7s ease-in-out infinite; }
@keyframes tgSerp { 0% { transform: scaleX(0); } 40%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

.tg-lang-ind { animation: tgLangInd 6s cubic-bezier(.6, 0, .3, 1) infinite; }
.tg-lang-tr { animation: tgLangTr 6s steps(1) infinite; }
.tg-lang-en { animation: tgLangEn 6s steps(1) infinite; }
.tg-lang-line1, .tg-lang-line2, .tg-lang-line3, .tg-lang-btntext { transform-origin: left center; }
.tg-lang-line1 { animation: tgLangW1 6s ease-in-out infinite; }
.tg-lang-line2 { animation: tgLangW2 6s ease-in-out infinite; }
.tg-lang-line3 { animation: tgLangW3 6s ease-in-out infinite; }
.tg-lang-btntext { animation: tgLangW3 6s ease-in-out infinite; }
@keyframes tgLangInd { 0%, 42% { transform: translateX(0); } 50%, 92% { transform: translateX(48px); } 100% { transform: translateX(0); } }
@keyframes tgLangTr { 0% { fill: #ffffff; } 46% { fill: #71717a; } 96% { fill: #ffffff; } }
@keyframes tgLangEn { 0% { fill: #71717a; } 46% { fill: #ffffff; } 96% { fill: #71717a; } }
@keyframes tgLangW1 { 0%, 42% { transform: scaleX(1); } 50%, 92% { transform: scaleX(.78); } 100% { transform: scaleX(1); } }
@keyframes tgLangW2 { 0%, 42% { transform: scaleX(1); } 50%, 92% { transform: scaleX(.86); } 100% { transform: scaleX(1); } }
@keyframes tgLangW3 { 0%, 42% { transform: scaleX(1); } 50%, 92% { transform: scaleX(1.14); } 100% { transform: scaleX(1); } }

.tg-snow circle { animation: tgSnow 4s linear infinite; }
.tg-snow circle:nth-child(2) { animation-delay: -1.2s; animation-duration: 5s; }
.tg-snow circle:nth-child(3) { animation-delay: -2.4s; }
.tg-snow circle:nth-child(4) { animation-delay: -.6s; animation-duration: 4.6s; }
.tg-snow circle:nth-child(5) { animation-delay: -3.1s; animation-duration: 5.4s; }
@keyframes tgSnow { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(8px, 200px); opacity: 0; } }
.tg-wa { animation: tgWa 3s ease-in-out infinite; }
@keyframes tgWa { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-6px); } 30% { transform: translateY(0); } }
.tg-wa-bubble { animation: tgBubble 6s ease-in-out infinite; }
@keyframes tgBubble { 0%, 20% { opacity: 0; transform: translateX(-10px); } 30%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateX(-10px); } }
.tg-wheel { animation: tgWheel 6s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes tgWheel { 0% { transform: rotate(0deg); } 70%, 100% { transform: rotate(1060deg); } }

.tg-file { animation: tgFile 5s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tgFile { 0% { transform: translateX(-60px); opacity: 0; } 12% { opacity: 1; } 55%, 70% { transform: translateX(60px); opacity: 1; } 80%, 100% { transform: translateX(60px); opacity: 0; } }
.tg-dst { animation: tgDst 5s ease-in-out infinite; }
@keyframes tgDst { 0%, 55% { opacity: .25; } 65%, 95% { opacity: 1; } 100% { opacity: .25; } }

.tg-flow-line { stroke-dasharray: 228; animation: tgFlow 4s ease-in-out infinite; }
@keyframes tgFlow { 0% { stroke-dashoffset: 228; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 228; } }
.tg-flow-mid { animation: tgPlus 4s ease-in-out infinite; }
.tg-flow-live { animation: tgLive 2s ease-out infinite; }
@keyframes tgLive { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

@media (max-width: 1199px) {
    .tg-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .tg-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
    .tg-cat__bar { top: 130px; }
}

@media (max-width: 639px) {
    .tg-legend, .tg-swatches, .tg-tips, .tg-cards-2 { grid-template-columns: minmax(0, 1fr); }
    .tg-cat__grid { grid-template-columns: minmax(0, 1fr); }
    .tg-wide { padding: 10px; }
    .tg-art { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tg *, .tg-svg * { animation: none !important; }
    .tg-select, .tg-click-ring, .tg-click-panel, .tg-col-new, .tg-wa-bubble, .tg-file { opacity: 1; }
}