/* ==========================================================================
   CryptoCard Insider — UI v2 · Dark Fintech Design System
   Layer 2 (loaded after guide.css) · Scope: body.v2
   Inspired by: Motion / React Bits / Uiverse / Aceternity UI / Anime.js
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — dark redefinition
   -------------------------------------------------------------------------- */
body.v2 {
  /* Lab light sheet — keep v2 motion, drop dark/red shell */
  --bg: #dde4ee;
  --bg-soft: #e8eef6;
  --surface: rgba(166,124,0,0.06);
  --surface-strong: rgba(166,124,0,0.10);
  --border: #b8c4d4;
  --border-bright: #9aabbf;
  --text: #0f1419;
  --text-dim: #4a5568;
  --text-faint: #6b7788;
  --rp-red: #a67c00;
  --rp-red-dark: #8a6800;
  --rp-red-light: #c9a227;
  --rp-red-soft: rgba(166,124,0,0.12);
  --accent: #a67c00;
  --accent-2: #c9a227;
  --grad: linear-gradient(135deg, #a67c00 0%, #c9a227 45%, #e8b020 100%);
  --grad-btn: linear-gradient(135deg, #a67c00, #c9a227);
  --grad-hot: linear-gradient(135deg, #8a6800, #a67c00);
  --green: #157a4f;
  --amber: #b45309;
  --red: #c43d22;
  --shadow-lg: 0 24px 60px rgba(15,20,25,0.10);
  --shadow-glow: 0 0 44px rgba(166,124,0,0.18);
  --card-bg: #ffffff;
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body.v2 { background: var(--bg); color: var(--text); }
body.v2 ::selection { background: rgba(229, 48, 39, 0.4); color: #fff; }

html:has(body.v2) { scrollbar-color: #2a2a35 #06060A; }
html:has(body.v2)::-webkit-scrollbar { width: 10px; background: #06060A; }
html:has(body.v2)::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2E2E3A, #1B1B24); border-radius: 8px; border: 2px solid #06060A; }
html:has(body.v2)::-webkit-scrollbar-thumb:hover { background: #E53027; }

/* subtle film grain over the whole page */
body.v2::after {
  content: "";
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: 0.028; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.v2 a { color: var(--rp-red); }
body.v2 img { filter: saturate(1.02); }
body.v2 .wrap, body.v2 .container { color: inherit; }

/* --------------------------------------------------------------------------
   3. NAVIGATION — site-nav (5 pages) + guide-nav (others)
   -------------------------------------------------------------------------- */
body.v2 .site-nav {
  background: rgba(8, 8, 14, 0.72);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.v2 .site-nav nav a { color: var(--text-dim); }
body.v2 .site-nav nav a:hover { color: var(--text); }
body.v2 .site-nav .brand, body.v2 .brand { color: var(--text); }
body.v2 .site-nav .brand .logo-dot { box-shadow: 0 0 18px rgba(229, 48, 39, 0.6); }

body.v2 .guide-nav {
  background: rgba(8, 8, 14, 0.72);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body.v2 .guide-nav .nav-links a { color: var(--text-dim); }
body.v2 .guide-nav .nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
body.v2 .guide-nav .nav-links a.active {
  color: #fff; background: var(--grad-btn);
  box-shadow: 0 4px 20px rgba(229, 48, 39, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
body.v2 .nav-menu-btn { color: var(--text); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); }

/* mobile hamburger sheet */
body.v2 .site-nav .nav-links,
body.v2 .guide-nav .nav-links { background: rgba(10, 10, 16, 0.96); border-color: rgba(255, 255, 255, 0.08); }
@media (max-width: 720px) {
  body.v2 .site-nav .nav-links, body.v2 .guide-nav .nav-links {
    background: rgba(10, 10, 16, 0.97);
    backdrop-filter: saturate(160%) blur(24px);
    -webkit-backdrop-filter: saturate(160%) blur(24px);
  }
}

/* --------------------------------------------------------------------------
   4. HERO — aurora + grid backdrop
   -------------------------------------------------------------------------- */
body.v2 .guide-hero, body.v2 .hero, body.v2 .steps-section {
  position: relative; color: var(--text);
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(229, 48, 39, 0.14), transparent 60%),
    radial-gradient(700px 380px at 8% 8%, rgba(124, 58, 237, 0.10), transparent 55%),
    var(--bg);
  overflow: hidden;
}
body.v2 .guide-hero::before, body.v2 .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 0%, #000 30%, transparent 75%);
}
body.v2 .hero-eyebrow, body.v2 .kicker {
  color: var(--rp-red);
  background: rgba(229, 48, 39, 0.10);
  border: 1px solid rgba(229, 48, 39, 0.28);
  box-shadow: 0 0 24px rgba(229, 48, 39, 0.12);
}
body.v2 .guide-hero h1, body.v2 .hero h1 { color: var(--text); letter-spacing: -0.03em; }
body.v2 .hero-sub, body.v2 .sub, body.v2 .guide-hero .sub { color: var(--text-dim); }
body.v2 .grad-text {
  background: linear-gradient(92deg, #FF6B5C 0%, #FF4B3E 38%, #FFB088 72%, #FF6B5C 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: v2GradFlow 7s linear infinite;
}
@keyframes v2GradFlow { to { background-position: 220% 0; } }

/* --------------------------------------------------------------------------
   5. SECTIONS / TYPOGRAPHY
   -------------------------------------------------------------------------- */
body.v2 .section { background: transparent; }
body.v2 .section-head h2, body.v2 h2, body.v2 h3 { color: var(--text); letter-spacing: -0.02em; }
body.v2 .section-head .sub { color: var(--text-dim); }
body.v2 p { color: var(--text-dim); }
body.v2 strong { color: var(--text); }
body.v2 .tag {
  background: rgba(229, 48, 39, 0.10); color: var(--rp-red-light);
  border: 1px solid rgba(229, 48, 39, 0.30);
}
body.v2 .label { color: var(--text-faint); }
body.v2 .note, body.v2 .small-note { color: var(--text-faint); }
body.v2 .old { color: var(--text-faint); text-decoration-color: rgba(255, 75, 62, 0.7); }
body.v2 .win { color: var(--green); }
body.v2 .hint-chip { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); border: 1px solid var(--border); }
body.v2 .divider { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); }
body.v2 .mono { color: var(--rp-red-light); }

/* --------------------------------------------------------------------------
   6. CARDS — step / fee / hub / tilt / glass
   -------------------------------------------------------------------------- */
body.v2 .step-card, body.v2 .fee-card, body.v2 .hub-card, body.v2 .trust-card,
body.v2 .tilt-card, body.v2 .panel, body.v2 .glass, body.v2 .calc {
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 44px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.v2 .step-card:hover, body.v2 .fee-card:hover, body.v2 .hub-card:hover, body.v2 .tilt-card:hover {
  border-color: rgba(229, 48, 39, 0.38);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 54px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(229, 48, 39, 0.14), 0 0 42px rgba(229, 48, 39, 0.12);
}
body.v2 .step-num {
  background: var(--grad-btn); color: #fff;
  box-shadow: 0 0 0 6px rgba(229, 48, 39, 0.12), 0 8px 22px rgba(229, 48, 39, 0.4);
}
body.v2 .step-card h2, body.v2 .step-card h3, body.v2 .fee-name { color: var(--text); }
body.v2 .fee-val { color: var(--text); }
body.v2 .step-time { color: var(--text-faint); }
body.v2 .step-tip { background: rgba(52, 211, 153, 0.07); border: 1px solid rgba(52, 211, 153, 0.22); color: #A7F3D0; }
body.v2 .step-warning { background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.24); color: #FDE68A; }
body.v2 .ico { filter: drop-shadow(0 6px 16px rgba(229, 48, 39, 0.35)); }
body.v2 .more { color: var(--rp-red); }

/* Quick Answer — glass + beam ring */
body.v2 .quick-answer {
  background: linear-gradient(165deg, rgba(229, 48, 39, 0.07), rgba(255, 255, 255, 0.02) 55%, rgba(124, 58, 237, 0.05));
  border: 1px solid rgba(229, 48, 39, 0.30);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 28px 60px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(229, 48, 39, 0.10);
}
body.v2 .qa-label { color: var(--rp-red); letter-spacing: 0.14em; }

/* spotlight wash on tilt cards (mouse-follow radial) */
body.v2 .tilt-card::before, body.v2 .step-card::before, body.v2 .hub-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.065) 0%, transparent 62%);
  opacity: 0; transition: opacity 0.35s var(--ease-out);
}
body.v2 .tilt-card:hover::before, body.v2 .step-card:hover::before, body.v2 .hub-card:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   7. FAQ
   -------------------------------------------------------------------------- */
body.v2 .faq-item {
  background: var(--card-bg); border: 1px solid var(--border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.v2 .faq-item summary { color: var(--text); list-style: none; }
body.v2 .faq-item summary::-webkit-details-marker { display: none; }
body.v2 .faq-item summary::after { background: rgba(255, 255, 255, 0.10); color: var(--text); }
body.v2 .faq-item[open] summary::after { background: var(--grad-btn); color: #fff; }
body.v2 .faq-item[open] { border-color: rgba(229, 48, 39, 0.32); box-shadow: 0 0 34px rgba(229, 48, 39, 0.10); }
body.v2 .faq-body { color: var(--text-dim); }

/* --------------------------------------------------------------------------
   8. TABLES
   -------------------------------------------------------------------------- */
body.v2 .tbl-wrap {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4); overflow: hidden;
}
body.v2 table.guide-table { color: var(--text-dim); }
body.v2 .guide-table th {
  background: rgba(255, 255, 255, 0.045); color: var(--text);
  border-bottom: 1px solid var(--border-bright);
}
body.v2 .guide-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
body.v2 .guide-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.014); }
body.v2 .guide-table tbody tr { transition: background 0.2s; }
body.v2 .guide-table tbody tr:hover td { background: rgba(229, 48, 39, 0.055); }

/* --------------------------------------------------------------------------
   9. TOC — sticky glass rail
   -------------------------------------------------------------------------- */
body.v2 .toc-bar {
  background: rgba(12, 12, 18, 0.72);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--border);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}
body.v2 .toc-bar a { color: var(--text-faint); }
body.v2 .toc-bar a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
body.v2 .toc-bar a.on {
  color: #fff; background: var(--grad-btn); border-color: transparent;
  box-shadow: 0 6px 20px rgba(229, 48, 39, 0.4);
}

/* --------------------------------------------------------------------------
   10. TABS
   -------------------------------------------------------------------------- */
body.v2 .tab-btn {
  background: rgba(255, 255, 255, 0.03); color: var(--text-dim);
  border: 1px solid var(--border);
}
body.v2 .tab-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
body.v2 .tab-btn.active {
  background: var(--grad-btn); color: #fff;
  box-shadow: 0 6px 22px rgba(229, 48, 39, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}
body.v2 .tab-pane { color: var(--text-dim); }

/* --------------------------------------------------------------------------
   11. BUTTONS
   -------------------------------------------------------------------------- */
body.v2 .btn { border-radius: 14px; }
body.v2 .btn-primary, body.v2 .btn-hot {
  background: var(--grad-btn); color: #fff;
  box-shadow: 0 10px 30px rgba(229, 48, 39, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
body.v2 .btn-primary:hover, body.v2 .btn-hot:hover {
  box-shadow: 0 14px 40px rgba(229, 48, 39, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  filter: brightness(1.06);
}
body.v2 .btn-ghost {
  background: rgba(255, 255, 255, 0.04); color: var(--text);
  border: 1px solid var(--border-bright);
}
body.v2 .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(229, 48, 39, 0.45); }

/* --------------------------------------------------------------------------
   12. CODE PILL — neon
   -------------------------------------------------------------------------- */
body.v2 .code-pill {
  background: rgba(255, 75, 62, 0.07);
  border: 1px solid rgba(255, 75, 62, 0.35);
  box-shadow: 0 0 0 4px rgba(229, 48, 39, 0.06), 0 0 30px rgba(229, 48, 39, 0.15);
}
body.v2 .code-pill .v { color: #FF8A73; text-shadow: 0 0 18px rgba(255, 75, 62, 0.55); }
body.v2 .code-row .arrow { color: var(--text-faint); }

/* --------------------------------------------------------------------------
   13. PANELS / CHECKLIST
   -------------------------------------------------------------------------- */
body.v2 .panel-info { background: rgba(59, 130, 246, 0.07); border: 1px solid rgba(59, 130, 246, 0.25); color: #BFDBFE; }
body.v2 .panel-tip { background: rgba(52, 211, 153, 0.07); border: 1px solid rgba(52, 211, 153, 0.24); color: #A7F3D0; }
body.v2 .panel-warn { background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.26); color: #FDE68A; }
body.v2 .panel-danger { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.30); color: #FECACA; }
body.v2 .checklist li { color: var(--text-dim); }
body.v2 .checklist li::before { color: var(--green); }

/* --------------------------------------------------------------------------
   14. SEARCH BOARD
   -------------------------------------------------------------------------- */
body.v2 .search-board { background: var(--card-bg); border: 1px solid var(--border); }
body.v2 .sb-chip {
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border); color: var(--text-dim);
}
body.v2 .sb-chip:hover { border-color: rgba(229, 48, 39, 0.4); color: var(--text); }
body.v2 .sb-chip.on { background: var(--grad-btn); color: #fff; border-color: transparent; }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
body.v2 .site-footer, body.v2 .guide-footer {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.018));
  border-top: 1px solid var(--border); color: var(--text-faint);
}
body.v2 .footer-col h4 { color: var(--text); }
body.v2 .footer-col a, body.v2 .foot-links a { color: var(--text-faint); }
body.v2 .footer-col a:hover, body.v2 .foot-links a:hover { color: var(--rp-red-light); }
body.v2 .foot-note, body.v2 .footer-region { color: var(--text-faint); }

/* --------------------------------------------------------------------------
   16. STICKY / MOBILE CTA
   -------------------------------------------------------------------------- */
body.v2 .sticky-mobile-cta {
  background: rgba(10, 10, 16, 0.82);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   17. PROMO / CALC / COUNTDOWN
   -------------------------------------------------------------------------- */
body.v2 .promo-box {
  background: linear-gradient(165deg, rgba(229, 48, 39, 0.09), rgba(124, 58, 237, 0.06));
  border: 1px solid rgba(229, 48, 39, 0.30);
}
body.v2 .promo-tag { background: rgba(229, 48, 39, 0.14); color: var(--rp-red-light); border: 1px solid rgba(229, 48, 39, 0.3); }
body.v2 .calc { background: var(--card-bg); border: 1px solid var(--border); }
body.v2 .cd-cell { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); }
body.v2 .cd-cell .v { color: var(--text); text-shadow: 0 0 22px rgba(229, 48, 39, 0.4); }
body.v2 .price { color: var(--text); }
body.v2 .best { color: var(--green); }

/* --------------------------------------------------------------------------
   18. FLOW / MUM / INLINE #fff SURVIVORS
   -------------------------------------------------------------------------- */
body.v2 .mum-banner {
  background: linear-gradient(135deg, rgba(229, 48, 39, 0.10), rgba(124, 58, 237, 0.06));
  border: 1px solid rgba(229, 48, 39, 0.26);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
body.v2 .flow-cta {
  background: rgba(255, 255, 255, 0.04) !important; color: var(--rp-red) !important;
  border: 2px solid var(--rp-red) !important;
}
body.v2 [style*="background:#fff"], body.v2 [style*="background: #fff"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   19. INDEX-SPECIFIC
   -------------------------------------------------------------------------- */
body.v2 .top-bar { background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--border); color: var(--text-faint); }
body.v2 .country-chip { background: rgba(255, 255, 255, 0.035); border: 1px solid var(--border); color: var(--text-dim); }
body.v2 .country-chip:hover { border-color: rgba(229, 48, 39, 0.45); color: var(--text); }
body.v2 .step-mini { background: var(--card-bg); border: 1px solid var(--border); }
body.v2 .step-mini .num { background: var(--grad-btn); color: #fff; box-shadow: 0 6px 18px rgba(229, 48, 39, 0.4); }
body.v2 .trust-section { background: radial-gradient(800px 400px at 50% 0%, rgba(229, 48, 39, 0.07), transparent 65%), var(--bg); }
body.v2 .trust-portrait { border-color: rgba(229, 48, 39, 0.5); box-shadow: 0 0 0 5px rgba(229, 48, 39, 0.12), 0 0 44px rgba(229, 48, 39, 0.25); }

/* --------------------------------------------------------------------------
   20. CTA SECTION — aurora wash (engine adds meteors)
   -------------------------------------------------------------------------- */
body.v2 .cta-box {
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(229, 48, 39, 0.16), transparent 60%),
    radial-gradient(520px 240px at 85% 100%, rgba(124, 58, 237, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(229, 48, 39, 0.32);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 70px rgba(229, 48, 39, 0.12);
}

/* --------------------------------------------------------------------------
   21. FX SWITCH (floating toggle, bottom-right)
   -------------------------------------------------------------------------- */
#fx-switch {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(12, 12, 18, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-bright); color: var(--text-dim);
  font: 600 0.78rem/1 var(--font); user-select: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: all 0.25s var(--ease-out);
}
#fx-switch:hover { color: var(--text); border-color: rgba(229, 48, 39, 0.5); }
#fx-switch .fx-track {
  width: 34px; height: 19px; border-radius: 999px; position: relative;
  background: linear-gradient(135deg, #E53027, #FF6B5C);
  box-shadow: 0 0 16px rgba(229, 48, 39, 0.45);
  transition: background 0.3s;
}
#fx-switch .fx-knob {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease-spring);
}
#fx-switch.off .fx-track { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
#fx-switch.off .fx-knob { transform: translateX(15px); }
@media (max-width: 720px) { #fx-switch { right: 12px; bottom: 12px; padding: 8px 12px; } }

/* scroll progress beam */
#fx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9995;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #E53027, #FF6B5C, #FFB088);
  box-shadow: 0 0 14px rgba(229, 48, 39, 0.7);
}

/* --------------------------------------------------------------------------
   22. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.v2 *, body.v2 *::before, body.v2 *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}