:root{
    --bg:#0f0f0f; --panel:#181818; --panel-2:#141414; --muted:#a4a4a4;
    --accent:#ffffff;
}
body{
    background: radial-gradient(1200px 600px at 50% -200px, #111111 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(204,204,204,0.030) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(204,204,204,0.030) 0 1px, transparent 1px 40px),
    var(--bg);
    min-height:100dvh;

    background-attachment: fixed, fixed, fixed, fixed;
}
.hero{
    background: linear-gradient(180deg, rgba(204,204,204,0.030), rgba(204,204,204,0.023));
    border:1px solid rgba(204,204,204,0.080);
    border-radius:0px;
    padding:28px 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.402);
}
.logo-box{
    width: 110px;height: 110px;border-radius:0px;
    background:transparent; display:grid; place-items:center;
    color:#d0d0d0; font-weight:700; letter-spacing:.5px;
    margin-inline:auto;
}
.social .btn{
    width:60px;height:60px; padding:0; font-weight:700;
    background:#141414; border:1px solid rgba(204,204,204,0.080)
}
.social .btn:hover{ background:#1e1e1e; }
.ghost-card{
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid rgba(204,204,204,0.080);
    border-radius:0px;
}
.mini-logo{
    width:46px;height:46px;border-radius:0px;
    background:transparent; display:grid; place-items:center;
    color:#d0d0d0; font-weight:700;
    flex: 0 0 auto;
}
.list-card{
    transition: transform .08s ease, background .2s ease;
}
.list-card:hover{ transform: translateY(-2px); }
.muted{ color:var(--muted); }
.divider{
    height:1px;background:rgba(204,204,204,0.092);
    margin:22px 0;
}

.hero { position: relative; }
.info-btn{position:absolute; top:10px; right:10px;display:inline-flex; align-items:center; gap:.375rem;padding:4px 9px; height:auto; width:auto;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03);color:#ddd; font-weight:600; cursor:pointer;border-radius:0; user-select:none;font-size:.72rem;}
.info-btn:hover{ background:rgba(255,255,255,.06); }
.popover.popover-dark{
    background:#121212; border:1px solid rgba(255,255,255,.15); border-radius:0px;
    color:#d2d2d2;
}
.popover.popover-dark .popover-header{
    background:#151515; color:#e5e5e5; border-bottom:1px solid rgba(255,255,255,.12); border-top-left-radius:0; border-top-right-radius:0;
}
.popover.popover-dark .popover-body{
    color:#cfcfcf;
}
.popover-arrow::before, .popover-arrow::after { display:none; }
.info-list{ padding-left:16px; margin:0; }
.info-list li{ margin:6px 0; }


.popover.popover-dark .popover-header {
    text-align:center;
}


.popover.popover-dark {
    max-width: 420px; /* wider popover for readability */
}


/* Info overlay panel */
.info-panel{
    position:absolute; inset:0; /* cover the hero block */
    background:#121212;
    border:1px solid rgba(255,255,255,.15);
    border-radius:0;
    display:none;
    z-index:5;
    overflow:auto;
}
.info-panel-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px;
    background:#151515;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.info-title{ font-weight:700; }
.info-close{
    background:transparent; border:1px solid rgba(255,255,255,.25);
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    color:#e5e5e5; cursor:pointer;
}
.info-panel-body{
    padding:16px 18px 22px;
    color:#d2d2d2;
    text-align:left;
}
.info-panel-body ul{ padding-left:20px; }
.info-panel-body li{ margin:8px 0; }


/* Monochrome links (no blue) */
a { color:#e6e6e6; text-decoration:none; }
a:hover, a:focus { color:#ffffff; text-decoration:underline; }
.list-card .fw-semibold { color:#eaeaea; }


.logo-box img{
    width:100%; height:100%; object-fit:contain; display:block;
}


.mini-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }


/* Social icons inherit currentColor to keep hover animation */
.social .btn{ color:#e6e6e6; border-radius:0; display:flex; align-items:center; justify-content:center; }
.social .btn:hover{ color:#ffffff; }



.social .btn{ color:#e6e6e6; border-radius:0; display:flex; align-items:center; justify-content:center; }
.social .btn:hover{ color:#ffffff; }

.social .btn svg *{ vector-effect: non-scaling-stroke; }


.social .btn{ color:#e6e6e6; border-radius:0; display:flex; align-items:center; justify-content:center; }
.social .btn:hover{ color:#ffffff; }
.social .btn .icon{ width:24px; height:24px; display:block; }
.social .btn .icon.icon--22{ width:22px; height:22px; }
.social .btn .icon.icon--23{ width:23px; height:23px; }
.social .btn .icon.icon--26{ width:26px; height:26px; }
.social .btn svg *{ vector-effect: non-scaling-stroke; }


/* Tabler icons sizing & alignment */
.social .btn { color:#e6e6e6; border-radius:0; }
.social .btn:hover { color:#ffffff; }
.social .btn .ti { font-size:22px; line-height:1; display:inline-block; vertical-align:middle; }


.social .btn svg{ width:40px; height:40px; display:block; }

/* === Design tokens & unified interaction language === */
:root{
    --text:#e6e6e6;
    --muted:#b3b3b3;              /* +контраст vs былого #a4a4a4 */
    --border:rgba(204,204,204,.095);   /* +~15% к текущим бордерам */
    --border-strong:rgba(255,255,255,.16);
    --elev-1:rgba(255,255,255,.04);
    --elev-2:rgba(255,255,255,.06);
}
body{ color:var(--text); }
.muted{ color:var(--muted) !important; }
.divider{ background: var(--border) !important; }

/* Бордеры через токены */
.hero, .ghost-card, .social .btn{ border-color: var(--border) !important; }

/* Единый ховер-язык для кликабельных */
.list-card, .social .btn, .info-btn, a.btn{
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
    will-change: transform;
}
.list-card:hover, .list-card:focus-visible{
    transform: translateY(-0.7px);
    background-color: var(--elev-1);
    box-shadow: inset 0 0 0 0.5px var(--border-strong);
}
.social .btn:hover, .social .btn:focus-visible, .info-btn:hover, .info-btn:focus-visible, a.btn:hover, a.btn:focus-visible{
    transform: translateY(-0.7px);
    background-color: var(--elev-2);
    box-shadow: inset 0 0 0 0.5px var(--border-strong);
    outline: none;
}


/* Keyboard focus ring for social buttons */
.social .btn:focus-visible{
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* Variant B: accent left edge (soft gradient + micro pattern, very subtle) */
.list-card.edge{
    position: relative;
    overflow: hidden;
}
/* Soft gradient from the left (about 16% width) */
.list-card.edge::before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(90deg,
    rgba(var(--edge-r),var(--edge-g),var(--edge-b), .12) 0%,
    rgba(var(--edge-r),var(--edge-g),var(--edge-b), .06) 16%,
    transparent 44%);
    pointer-events:none;
}
/* Micro-pattern masked to the left area */
.list-card.edge::after{
    content:"";
    position:absolute; inset:0;
    background:
            repeating-linear-gradient(45deg,
            rgba(var(--edge-r),var(--edge-g),var(--edge-b), .04) 0 1px,
            transparent 1px 9px), linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 48%);
    opacity:.6;
    pointer-events:none;
}
/* Slight border tint & stronger on hover for readability */
.list-card.edge{ border-color: rgba(var(--edge-r),var(--edge-g),var(--edge-b), .16) !important; }
.list-card.edge:hover{ border-color: rgba(var(--edge-r),var(--edge-g),var(--edge-b), .22) !important; }

/* Brand tokens */
.edge-binance{ --edge-r:243; --edge-g:186; --edge-b:47; }   /* yellow */
.edge-okx    { --edge-r:255; --edge-g:255; --edge-b:255; }  /* white accents */
.edge-bybit  { --edge-r:139; --edge-g:92;  --edge-b:246; }  /* purple */
.edge-gate   { --edge-r:59;  --edge-g:130; --edge-b:246; }  /* blue */


/* Micro-anim: social icons get slightly brighter and thicker stroke on hover */
.social .btn svg *{ transition: stroke-width .14s ease, filter .14s ease, opacity .14s ease; }
.social .btn:hover svg{ filter: brightness(1.15); }
.social .btn:hover svg *{ stroke-width: 2.4; opacity: .95; }


/* Shine sweep layered into ::after (second background) */
.list-card.edge::after{
    background-size: auto, 220% 100%;
    background-position: left top, -160% 0;
    transition: background-position 380ms ease;
}
.list-card.edge:hover::after{
    background-position: left top, 160% 0;
}


/* Micro-anim: info overlay fade/scale */
.info-panel{
    opacity: 0;
    transform: scale(.95);
    transition: opacity 150ms ease, transform 150ms ease;
    transform-origin: top right;
}
.info-panel[aria-hidden="false"]{
    opacity: 1;
    transform: scale(1);
}


/* Remove shine sweep: keep only subtle micro-pattern on the left */
.list-card.edge::after{
    background: repeating-linear-gradient(45deg,
    rgba(var(--edge-r),var(--edge-g),var(--edge-b), .04) 0 1px,
    transparent 1px 9px) !important;
    mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 48%) !important;
    background-size: auto !important;
    background-position: left top !important;
    transition: none !important;
}
.list-card.edge:hover::after{
    background-position: left top !important;
}


/* Tighter top spacing for the accounts hero */
.hero.hero-accounts{ padding-top: 14px; }
.hero.hero-accounts h5{ margin-top: 0; }


.info-btn svg{ width:12px; height:12px; display:block; }
.info-btn:focus-visible{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px; }


.mini-logo{ overflow:hidden; }



.mini-logo.logo-wide{
    width:110px; height:46px; padding:0 6px; overflow:visible;
    display:flex; align-items:center; justify-content:flex-start;
}



/* Keep center text block visually centered between logo and CTA */
.vstack .list-card{ justify-content:flex-start !important; }



/* Center text block between logo and CTA using CSS Grid */
.vstack .list-card{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
}





/* True horizontal centering for account text within the whole card */
.vstack .list-card{ position: relative !important; }
.vstack .list-card .flex-grow-1{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin: 0 !important;
    pointer-events: none; /* keep whole card clickable */
    width: max-content;
}
/* Keep logo & CTA in the normal flow */
.vstack .list-card .mini-logo{ position: static; }
.vstack .list-card > span:not(.lock-badge){ position: static; }


/* Keep CTA pinned to the right edge even when center block is absolutely positioned */
.vstack .list-card > span{ margin-left: auto; }



/* Refined visual alignment to OKX boundaries */
.mini-logo{ overflow: visible; }
.mini-logo.logo-wide{ width:110px; height:46px; padding:0 6px; display:flex; align-items:center; justify-content:flex-start; }
.mini-logo.logo-okx img{ transform: translateX(0) scale(1); transform-origin: left center; }

/* Slightly reduce Binance width and nudge left a hair */
.mini-logo.logo-binance img{ transform: translateX(-2px) scale(1.10); transform-origin: left center; }

/* BYBIT: compensate left transparent padding and match width */
.mini-logo.logo-bybit img{ transform: translateX(-6px) scale(1.28); transform-origin: left center; }

/* Gate.io: increase width and nudge left a bit */
.mini-logo.logo-gate img{ transform: translateX(-3px) scale(1.58); transform-origin: left center; }


/* Brand-colored CTA on card hover */
.edge:hover .small.muted.d-inline-flex.align-items-center.gap-1{
    color: rgba(var(--edge-r),var(--edge-g),var(--edge-b), .92);
}
.edge:hover .small.muted.d-inline-flex.align-items-center.gap-1 svg{
    stroke: rgba(var(--edge-r),var(--edge-g),var(--edge-b), .92);
}
/* Keyboard focus parity */
.edge:focus-visible .small.muted.d-inline-flex.align-items-center.gap-1{
    color: rgba(var(--edge-r),var(--edge-g),var(--edge-b), .92);
}
.edge:focus-visible .small.muted.d-inline-flex.align-items-center.gap-1 svg{
    stroke: rgba(var(--edge-r),var(--edge-g),var(--edge-b), .92);
}


/* Softer hover for Risk disclaimer button */
.info-btn:hover, .info-btn:focus-visible{
    transform: translateY(-0.5px);
    box-shadow: inset 0 0 0 0.5px var(--border-strong);
}


/* --- Risk button periodic shimmer (every 3s), more noticeable --- */
.hero { position: relative; } /* ensure absolute child anchors correctly */
.info-btn{ overflow: hidden; } /* do NOT override absolute positioning */
.info-btn::after{
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -120%;
    width: 240%;
    pointer-events: none;
    background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 44%,
    rgba(255,255,255,0.36) 50%,
    rgba(255,255,255,0.10) 56%,
    rgba(255,255,255,0) 100%);
    transform: translateX(0);
    animation: riskShimmer 3.6s ease-out infinite;
    will-change: transform, opacity;
    opacity: 0;
}
@keyframes riskShimmer{
    0%   { transform: translateX(0); opacity: 0; }
    8%   { opacity: .38; }
    50%  { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(100%); opacity: 0; }
}
12%  { opacity: .36; }
52%  { transform: translateX(165%); opacity: 0; }
100% { transform: translateX(165%); opacity: 0; }
}


/* Center disclaimer header title; align close button and add hover like risk button */
.info-panel-header{ position:relative; justify-content:center; }
.info-panel-header .info-title{ text-align:center; width:100%; pointer-events:none; }
.info-panel-header .info-close{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    width:34px; height:34px; font-size:18px; line-height:1; border-radius:2px;
    transition: transform .12s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
}
.info-panel-header .info-close:hover,
.info-panel-header .info-close:focus-visible{
    transform: translateY(-calc(50% + 0.5px)); /* small lift like risk button */
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 0.5px var(--border-strong);
    outline: none;
}


/* Pin the close button back to the top-right corner inside the header */
.info-panel-header{ position: relative; }
.info-panel-header .info-close{
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    transform: none !important;
}
.info-panel-header .info-close:hover,
.info-panel-header .info-close:focus-visible{
    transform: translateY(-1px) !important;
}


/* Tweak: slightly smaller close square and vertical centering */
.info-panel-header{ position: relative; }
.info-panel-header .info-close{
    width: 30px !important;
    height: 30px !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.info-panel-header .info-close:hover,
.info-panel-header .info-close:focus-visible{
    transform: translateY(calc(-50% - 0.5px)) !important; /* tiny lift on hover */
}


/* Brand-colored arrow on hover for top cards */
.list-card--diary:hover > span.opacity-50{ color:#7AF2A2; }
.list-card--contact:hover > span.opacity-50{ color:#5FCBFF; }
.list-card--diary > span.opacity-50,
.list-card--contact > span.opacity-50{ transition: color .18s ease; }


/* Top cards: brand-colored border on hover/focus */

/* Top cards: brand-colored border on hover/focus — thinner/softer */
.list-card--diary:hover,
.list-card--diary:focus-visible{
    border-color: rgba(122,242,162,0.55) !important; /* softer green */
    box-shadow: 0 0 0 0.5px rgba(122,242,162,0.16) inset; /* thinner highlight */
}
.list-card--contact:hover,
.list-card--contact:focus-visible{
    border-color: rgba(95,203,255,0.55) !important;  /* softer blue */
    box-shadow: 0 0 0 0.5px rgba(95,203,255,0.16) inset; /* thinner highlight */
}

/* --- Lock badge on Polaris Binance --- */
.list-card{ position: relative; }
.lock-badge{
    position:absolute; top:10px; right:50px;
    width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
    border-radius:4px; color:#ddd; cursor:pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.lock-badge:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26); transform: translateY(-0.7px); }
.lock-badge svg{ width:14px; height:14px; opacity:.9; }

/* Dark popover look (reuse if already defined) */
.popover.popover-dark{
    background:#121212; border:1px solid rgba(255,255,255,.15); border-radius:0px; color:#d2d2d2;
}
.popover.popover-dark .popover-header{
    background:#151515; color:#e5e5e5; border-bottom:1px solid rgba(255,255,255,.12);
}
.popover.popover-dark .popover-body{ color:#cfcfcf; }


/* Brand-colored variant (Binance yellow) */
.lock-badge.lock--brand-yellow{
    color:#F5C84B;
    border-color: rgba(245,200,75,.38);
    background: rgba(245,200,75,.08);
}
.lock-badge.lock--brand-yellow:hover{
    background: rgba(245,200,75,.15);
    border-color: rgba(245,200,75,.6);
}

.lock-badge.lock--brand-purple{
    color:#8b5cf6;
    border-color: rgba(139,92,246,.38);
    background: rgba(139,92,246,.08);
}
.lock-badge.lock--brand-purple:hover{
    background: rgba(139,92,246,.15);
    border-color: rgba(139,92,246,.60);
}



/* === Mobile optimizations (≤576px) — compact, uncluttered, safe === */
@media (max-width: 576px){
    .container{ padding-left:12px; padding-right:12px; }
    .hero{ padding:18px 14px; }
    .logo-box{ width:88px; height:88px; margin-bottom:10px; }
    h1.fw-bold{ font-size:1.8rem; margin-bottom:.25rem; }
    .hero p.muted{ font-size:.9rem; margin-bottom:1rem; }

    /* Social row: one line with horizontal scroll on very narrow screens */
    .social{ gap:.5rem !important; overflow-x:auto; white-space:nowrap; padding-bottom:4px; }
    .social .btn{ width:48px; height:48px; padding:0; flex: 0 0 auto; }
    .social .btn .icon{ width:22px; height:22px; }

    /* Diary / Contact cards: full width, tighter spacing */
    .row.g-3.mt-2 > .col-12{ padding-left:0; padding-right:0; }
    .ghost-card.list-card{ padding:10px 12px !important; }

    /* Accounts list: disable absolute-centering hack on mobile to avoid overlaps */
    .vstack .list-card .flex-grow-1{
        position: static !important;
        left: auto !important;
        transform: none !important;
        text-align: left !important;
        width: auto !important;
        pointer-events: auto !important;
        margin: 0 !important;
    }
    .vstack .list-card{ column-gap:10px; }
    .vstack{ gap:.65rem !important; }

    /* Compact logos */
    .mini-logo{ width:38px; height:38px; }
    .mini-logo.logo-wide{ width:90px; height:38px; }

    /* Typography inside cards */
    .fw-semibold{ font-size: .98rem; }
    .small{ font-size: .78rem; }
    .hero-accounts h5{ font-size:1.05rem; margin-bottom:.75rem; }

    /* CTA arrow spacing */
    .vstack .list-card > span{ margin-left:8px; }

    /* Lock badge & risk button tweaks */
    .lock-badge{ top:8px; right:28px; width:24px; height:24px; }
    .info-btn{ top:8px; right:8px; font-size:.68rem; padding:3px 8px; }

    /* Disclaimer panel body slightly smaller */
    .info-panel-body{ font-size:.9rem; }

    /* Popover width on small screens */
    .popover.popover-dark{ max-width: calc(100vw - 24px); }

    /* Footer disclaimer smaller and full width */
    .text-center.mt-4.small.muted{ font-size:.72rem !important; max-width: 100% !important; padding: 0 4px; }
}

/* === Extra-tight mobile sizing so two buttons & cards fit nicely === */
@media (max-width: 576px){
    /* Two-up layout for Diary/Contact even on very small screens */
    .row.g-3.mt-2{ margin-left:-6px; margin-right:-6px; }
    .row.g-3.mt-2 > [class*="col-"]{ padding-left:6px; padding-right:6px; }
    .list-card.list-card--diary, .list-card.list-card--contact{ padding:8px 10px !important; }

    /* Shrink logos a bit more */
    .mini-logo{ width:32px; height:32px; }
    .mini-logo.logo-wide{ width:80px; height:32px; }

    /* Typography scale-down */
    h1.fw-bold{ font-size:1.6rem; }
    .hero p.muted{ font-size:.86rem; }
    .fw-semibold{ font-size:.9rem; }         /* titles in cards */
    .small{ font-size:.7rem; }               /* subtitles & "Перейти" */
    .hero-accounts h5{ font-size:.98rem; }

    /* Account cards: reduce padding so long names fit */
    .vstack .list-card{ column-gap:8px; }
    .ghost-card.list-card{ padding:8px 10px !important; }

    /* Prevent overflow of right CTA */
    .vstack .list-card > span{ white-space:nowrap; }
}

/* === Hide CTA "Перейти" + chevron only on locked Polaris cards === */
/* Polaris BINANCE (lead-details id 4400100360175361536) */
a[href*="4400100360175361536"] > span.small.muted{ display:none !important; }
/* Polaris BYBIT (one-link id rthlkgtj) */
a[href*="rthlkgtj"] > span.small.muted{ display:none !important; }

/* === Language toggle (top-left, same spot as before) === */
.lang-switch{ cursor:pointer;
    position:absolute; top:10px; left:10px; z-index:6;
    display:inline-flex; align-items:center;
    padding:5.082px 11.4345px;               /* match .info-btn */
    border:1px solid var(--border-strong);
    background:rgba(255,255,255,.03);
    box-shadow: inset 0 0 0 0.5px var(--border);
    color:#ddd; font-weight:600; font-size:.9135rem; line-height:1;
    border-radius:0;
}
.lang-switch:hover{ background:rgba(255,255,255,.06); box-shadow: inset 0 0 0 0.5px var(--border-strong);  transform: translateY(-0.7px);}
.lang-toggle{
    background:transparent; border:none; color:inherit; cursor:pointer;
    padding:0; margin:0; font: inherit; letter-spacing:.02em;
}
@media (max-width:576px){
    .lang-switch{ cursor:pointer; top:8px; left:8px; font-size:.68rem; padding:3px 8px; }
}


@media (max-width: 576px){
    /* Reduce Risk Disclaimer button size on mobile by ~18% */
    .info-btn{
        font-size: 0.56rem;  /* was ~0.68-0.72rem, reduce */
        padding: 2.5px 7px;  /* proportionally smaller */
    }
    /* Reduce gap between tagline and social icons / buttons */
    #tagline{
        margin-bottom: 1.2rem !important; /* doubled for mobile */
    }
    .social-icons{
        margin-bottom: 0.6rem !important;
    }
}


@media (max-width: 576px){
    .social.mb-3{ margin-bottom: 0.21rem !important; }
    .row.g-3.mt-2{ margin-top: 0.21rem !important; }
}

/* Вертикальная центровка кнопки-замка относительно карточки */
.vstack .list-card{ position: relative; } /* на всякий случай */
.vstack .list-card > span.lock-badge{
    position: absolute !important;
    top: 50% !important;
    right: 50px !important;
    transform: translateY(-50%) !important;
}
@media (max-width: 576px){
    .vstack .list-card > span.lock-badge{
        right: 36px !important;
    }
}
/* лёгкий ховер без потери центровки */
.vstack .list-card > span.lock-badge:hover{
    transform: translateY(calc(-50% - 1px)) !important;
}

@media (max-width: 576px){
    .vstack .list-card > span.lock-badge{
        right: 32px !important; /* чуть правее (было 36px) */
        transform: translateY(-50%) !important;
    }
}

/* Animated risk-disclaimer panel */
.info-panel{
    display:block !important;            /* allow animation */
    opacity:0;
    transform: translateY(-8px);
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
}
.info-panel.show{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
}

.popover.popover-dark a{ color: inherit; text-decoration: underline; }
.popover.popover-dark a:hover{ opacity:.9; }

.exchange-logo {
    justify-content: center!important;
}
.exchange-logo img {
    width: 80%;
}