/* =========================================================
   BrandiMark News Marquee — Frontend
   Scoped styles only. No global typography selectors.
========================================================= */

.bmnm-root,
.bmnm-root * {
    box-sizing: border-box;
}

.bmnm-root {
    --bmnm-speed: 58s;
    --bmnm-font-family: IRANYekanX, Tahoma, Arial, sans-serif;
    --bmnm-font-size-desktop: 17px;
    --bmnm-font-size-tablet: 15px;
    --bmnm-font-size-mobile: 14px;
    --bmnm-font-weight: 700;
    --bmnm-line-height: 1.5;
    --bmnm-height-desktop: 74px;
    --bmnm-height-tablet: 66px;
    --bmnm-height-mobile: 58px;
    --bmnm-item-gap: 80px;
    --bmnm-separator-size-desktop: 18px;
    --bmnm-separator-size-tablet: 16px;
    --bmnm-separator-size-mobile: 14px;
    --bmnm-radius: 0px;
    --bmnm-text: #f7fbff;
    --bmnm-accent: #72f7ff;
    --bmnm-bg-start: #252b38;
    --bmnm-bg-end: #080d16;
    --bmnm-label-bg: #5b5cff;
    --bmnm-label-text: #ffffff;
    --bmnm-border: #72f7ff;
    --bmnm-text-direction: rtl;

    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    height: var(--bmnm-height-desktop);
    min-height: var(--bmnm-height-desktop);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--bmnm-radius);
    font-family: var(--bmnm-font-family);
    font-size: var(--bmnm-font-size-desktop);
    font-weight: var(--bmnm-font-weight);
    line-height: var(--bmnm-line-height);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
    direction: ltr;
}


.bmnm-root::before,
.bmnm-root::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bmnm-root::before {
    z-index: 0;
}

.bmnm-root::after {
    z-index: 4;
}

.bmnm-viewport {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    direction: ltr;
}

.bmnm-viewport::before,
.bmnm-viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: clamp(24px, 7vw, 120px);
    pointer-events: none;
}

.bmnm-viewport::before {
    left: 0;
    background: linear-gradient(90deg, rgba(7, 12, 21, 0.94), rgba(7, 12, 21, 0));
}

.bmnm-viewport::after {
    right: 0;
    background: linear-gradient(270deg, rgba(7, 12, 21, 0.94), rgba(7, 12, 21, 0));
}

.bmnm-track {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: max-content;
    min-width: max-content;
    height: 100%;
    white-space: nowrap;
    animation-name: bmnm-marquee-left;
    animation-duration: var(--bmnm-speed);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.bmnm-direction-right .bmnm-track {
    animation-name: bmnm-marquee-right;
}

.bmnm-group {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
}

.bmnm-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 100%;
    direction: var(--bmnm-text-direction);
    white-space: nowrap;
    color: var(--bmnm-text);
    font: inherit;
    margin: 0;
    padding: 0 calc(var(--bmnm-item-gap) / 2);
}

.bmnm-text,
.bmnm-link,
.bmnm-meta,
.bmnm-date,
.bmnm-author,
.bmnm-separator,
.bmnm-news-label,
.bmnm-news-label-text,
.bmnm-news-arrows,
.bmnm-news-arrows > span {
    font: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.bmnm-text {
    display: inline-block;
    color: inherit;
    white-space: nowrap;
}

.bmnm-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    outline: none;
    transition: opacity 180ms ease, filter 180ms ease, text-shadow 180ms ease;
}

.bmnm-link:hover,
.bmnm-link:focus-visible {
    color: inherit;
    opacity: 0.92;
    text-decoration: none;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--bmnm-accent) 56%, transparent));
}

.bmnm-link:focus-visible {
    border-radius: 5px;
    box-shadow: 0 0 0 2px var(--bmnm-accent);
}

.bmnm-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-inline-start: 11px;
    opacity: 0.68;
    font-size: 0.78em;
    font-weight: 500;
}

.bmnm-meta-dot {
    opacity: 0.7;
}

.bmnm-separator {
    display: inline-block;
    margin-inline-start: calc(var(--bmnm-item-gap) / 2);
    color: var(--bmnm-accent);
    font-weight: 800;
    opacity: 1;
    text-shadow:
        0 0 7px color-mix(in srgb, var(--bmnm-accent) 88%, transparent),
        0 0 18px color-mix(in srgb, var(--bmnm-accent) 46%, transparent);
}

.bmnm-news-label {
    position: relative;
    z-index: 8;
    flex: 0 0 auto;
    min-width: max-content;
    height: 100%;
    padding: 0 clamp(16px, 2.4vw, 34px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    color: var(--bmnm-label-text);
    background: var(--bmnm-label-bg);
    box-shadow: 0 0 26px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    direction: rtl;
}

.bmnm-label-right {
    flex-direction: row;
}

.bmnm-label-right .bmnm-news-label {
    order: 2;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    padding-inline-start: clamp(28px, 3.4vw, 48px);
}

.bmnm-label-right .bmnm-viewport {
    order: 1;
}

.bmnm-label-left {
    flex-direction: row;
}

.bmnm-label-left .bmnm-news-label {
    order: 1;
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
    padding-inline-end: clamp(28px, 3.4vw, 48px);
}

.bmnm-label-left .bmnm-viewport {
    order: 2;
}

.bmnm-news-label-text {
    position: relative;
    z-index: 2;
    font-weight: 800;
}

.bmnm-news-icon {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.bmnm-icon-bolt::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    clip-path: polygon(56% 0, 18% 55%, 45% 55%, 34% 100%, 83% 40%, 55% 40%);
}

.bmnm-icon-live::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent), 0 0 12px currentColor;
    animation: bmnm-live-dot 1.2s ease-in-out infinite;
}

.bmnm-icon-siren::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 11px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 2px 2px;
    box-shadow: 0 0 9px currentColor;
}

.bmnm-icon-siren::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.bmnm-news-arrows {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    direction: ltr;
    gap: 0;
    font-size: 1.15em;
}

.bmnm-news-arrows > span {
    display: inline-block;
    animation: bmnm-arrow-flash 1.25s ease-in-out infinite;
}

.bmnm-news-arrows > span:nth-child(2) {
    animation-delay: 0.15s;
}

.bmnm-news-arrows > span:nth-child(3) {
    animation-delay: 0.3s;
}

.bmnm-label-blink .bmnm-news-label::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.24) 47%, transparent 72%);
    transform: translateX(-130%);
    animation: bmnm-label-shine 2.8s ease-in-out infinite;
}

.bmnm-toggle {
    position: absolute;
    z-index: 12;
    top: 50%;
    left: 12px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: #fff;
    background: rgba(5, 10, 18, 0.58);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(-50%);
    cursor: pointer;
}

.bmnm-toggle:hover,
.bmnm-toggle:focus-visible {
    border-color: var(--bmnm-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bmnm-accent) 30%, transparent);
    outline: none;
}

.bmnm-toggle-pause {
    display: inline-flex;
    gap: 4px;
}

.bmnm-toggle-pause > span {
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: currentColor;
}

.bmnm-toggle-play {
    display: none;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid currentColor;
}

.bmnm-is-paused .bmnm-track {
    animation-play-state: paused !important;
}

.bmnm-is-paused .bmnm-toggle-pause {
    display: none;
}

.bmnm-is-paused .bmnm-toggle-play {
    display: inline-block;
}

.bmnm-pause-hover:hover .bmnm-track {
    animation-play-state: paused;
}

/* =========================
   Template: Glass Indigo
========================= */
.bmnm-template-glass-indigo {
    color: #f7fbff;
    background:
        radial-gradient(circle at 18% -80%, rgba(114, 247, 255, 0.31), transparent 42%),
        radial-gradient(circle at 78% -70%, rgba(91, 92, 255, 0.35), transparent 46%),
        linear-gradient(135deg, #252b38 0%, #151a28 42%, #080d16 100%);
    border-top: 1px solid rgba(114, 247, 255, 0.48);
    border-bottom: 1px solid rgba(230, 237, 247, 0.26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.62),
        0 0 18px rgba(114, 247, 255, 0.18),
        0 0 34px rgba(91, 92, 255, 0.17),
        0 12px 35px rgba(0, 0, 0, 0.44);
}

.bmnm-template-glass-indigo::before {
    background:
        linear-gradient(125deg,
            transparent 0%, transparent 14%,
            rgba(230, 237, 247, 0.08) 14%, rgba(230, 237, 247, 0.08) 24%,
            transparent 24%, transparent 42%,
            rgba(114, 247, 255, 0.10) 42%, rgba(114, 247, 255, 0.10) 52%,
            transparent 52%, transparent 68%,
            rgba(91, 92, 255, 0.13) 68%, rgba(91, 92, 255, 0.13) 78%,
            transparent 78%, transparent 100%);
    opacity: 0.95;
}

.bmnm-template-glass-indigo .bmnm-text {
    color: #f7fbff;
    text-shadow:
        0 0 8px rgba(230, 237, 247, 0.30),
        0 0 16px rgba(114, 247, 255, 0.22),
        0 8px 24px rgba(0, 0, 0, 0.48);
}

.bmnm-template-glass-indigo .bmnm-news-label {
    background: linear-gradient(135deg, #5658f2, #3538bd);
}

/* =========================
   Breaking News Templates
========================= */
.bmnm-template-breaking-red {
    color: #fff;
    background: linear-gradient(108deg, #16080b 0%, #27090f 46%, #0c0d13 100%);
    border-block: 1px solid rgba(255, 66, 87, 0.6);
    box-shadow: inset 0 0 42px rgba(255, 32, 58, 0.08), 0 8px 30px rgba(0, 0, 0, 0.34);
}

.bmnm-template-breaking-red::before {
    background: repeating-linear-gradient(120deg, transparent 0 56px, rgba(255, 255, 255, 0.035) 56px 96px);
}

.bmnm-template-breaking-red .bmnm-news-label {
    background: linear-gradient(135deg, #ff244d, #a70022);
    box-shadow: 0 0 30px rgba(255, 36, 77, 0.34);
}

.bmnm-template-breaking-red .bmnm-separator {
    color: #ff3f62;
}

.bmnm-template-breaking-indigo {
    color: #fff;
    background:
        radial-gradient(circle at 72% 0%, rgba(92, 90, 255, 0.28), transparent 40%),
        linear-gradient(110deg, #0a0b1b, #161845 50%, #090b18);
    border-block: 1px solid rgba(122, 124, 255, 0.56);
    box-shadow: inset 0 0 48px rgba(91, 92, 255, 0.11), 0 10px 30px rgba(0, 0, 0, 0.36);
}

.bmnm-template-breaking-indigo::before {
    background: linear-gradient(120deg, transparent 10%, rgba(132, 235, 255, 0.08) 10% 24%, transparent 24% 45%, rgba(91, 92, 255, 0.12) 45% 60%, transparent 60%);
}

.bmnm-template-breaking-indigo .bmnm-news-label {
    background: linear-gradient(135deg, #6768ff, #3437c6);
}

.bmnm-template-breaking-blue {
    color: #fff;
    background: linear-gradient(105deg, #06182d 0%, #0a2f59 47%, #07111f 100%);
    border-block: 1px solid rgba(42, 165, 255, 0.6);
    box-shadow: inset 0 0 46px rgba(0, 131, 255, 0.12), 0 8px 28px rgba(0, 0, 0, 0.34);
}

.bmnm-template-breaking-blue::before {
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(88, 190, 255, 0.08) 48% 51%, transparent 51%),
        repeating-linear-gradient(135deg, transparent 0 76px, rgba(255, 255, 255, 0.035) 76px 110px);
}

.bmnm-template-breaking-blue .bmnm-news-label {
    background: linear-gradient(135deg, #008cff, #0050a9);
}

.bmnm-template-breaking-amber {
    color: #fff7e4;
    background: linear-gradient(108deg, #201507 0%, #3e2705 46%, #15100a 100%);
    border-block: 1px solid rgba(255, 183, 50, 0.62);
    box-shadow: inset 0 0 44px rgba(255, 163, 18, 0.10), 0 8px 28px rgba(0, 0, 0, 0.34);
}

.bmnm-template-breaking-amber::before {
    background: repeating-linear-gradient(125deg, transparent 0 65px, rgba(255, 203, 93, 0.055) 65px 100px);
}

.bmnm-template-breaking-amber .bmnm-news-label {
    color: #211400;
    background: linear-gradient(135deg, #ffc94f, #ff9c0b);
}

.bmnm-template-breaking-amber .bmnm-separator {
    color: #ffc94f;
}

/* =========================
   Cyber Neon
========================= */
.bmnm-template-cyber-neon {
    color: #dbffff;
    background:
        radial-gradient(circle at 18% 50%, rgba(0, 255, 214, 0.12), transparent 35%),
        radial-gradient(circle at 82% 50%, rgba(132, 54, 255, 0.14), transparent 36%),
        linear-gradient(100deg, #03080d, #07131b 50%, #060710);
    border: 1px solid rgba(65, 255, 227, 0.46);
    box-shadow: inset 0 0 32px rgba(0, 255, 217, 0.08), 0 0 22px rgba(0, 255, 217, 0.12);
}

.bmnm-template-cyber-neon::before {
    background:
        linear-gradient(rgba(89, 255, 228, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(89, 255, 228, 0.025) 1px, transparent 1px);
    background-size: 18px 18px;
}

.bmnm-template-cyber-neon .bmnm-text {
    text-shadow: 0 0 9px rgba(78, 255, 228, 0.34);
}

.bmnm-template-cyber-neon .bmnm-news-label {
    color: #03110f;
    background: linear-gradient(135deg, #5effe3, #20bca8);
}

/* =========================
   Minimal Templates
========================= */
.bmnm-template-minimal-dark {
    color: #eef3f9;
    background: #111821;
    border-block: 1px solid rgba(169, 192, 223, 0.24);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.bmnm-template-minimal-dark::before {
    background: linear-gradient(90deg, rgba(169, 192, 223, 0.05), transparent 35%, rgba(169, 192, 223, 0.04));
}

.bmnm-template-minimal-dark .bmnm-news-label {
    background: #a9c0df;
    color: #111821;
}

.bmnm-template-minimal-light {
    color: #17202c;
    background: linear-gradient(180deg, #ffffff, #edf2f8);
    border: 1px solid #d7e1ed;
    box-shadow: 0 8px 24px rgba(27, 49, 76, 0.12);
}

.bmnm-template-minimal-light .bmnm-viewport::before {
    background: linear-gradient(90deg, rgba(237, 242, 248, 0.98), rgba(237, 242, 248, 0));
}

.bmnm-template-minimal-light .bmnm-viewport::after {
    background: linear-gradient(270deg, rgba(237, 242, 248, 0.98), rgba(237, 242, 248, 0));
}

.bmnm-template-minimal-light .bmnm-text,
.bmnm-template-minimal-light .bmnm-link {
    color: #17202c;
}

.bmnm-template-minimal-light .bmnm-news-label {
    color: #fff;
    background: #334865;
}

.bmnm-template-minimal-light .bmnm-toggle {
    color: #17202c;
    background: rgba(255, 255, 255, 0.82);
}

/* =========================
   Custom Colors
========================= */
.bmnm-custom-colors {
    color: var(--bmnm-text);
    background:
        radial-gradient(circle at 20% -70%, color-mix(in srgb, var(--bmnm-accent) 25%, transparent), transparent 42%),
        linear-gradient(135deg, var(--bmnm-bg-start), var(--bmnm-bg-end));
    border: 1px solid color-mix(in srgb, var(--bmnm-border) 64%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 22px color-mix(in srgb, var(--bmnm-accent) 17%, transparent),
        0 12px 30px rgba(0, 0, 0, 0.32);
}

.bmnm-custom-colors .bmnm-item,
.bmnm-custom-colors .bmnm-text,
.bmnm-custom-colors .bmnm-link {
    color: var(--bmnm-text);
}

.bmnm-custom-colors .bmnm-separator {
    color: var(--bmnm-accent);
}

.bmnm-custom-colors .bmnm-news-label {
    color: var(--bmnm-label-text);
    background: linear-gradient(135deg, var(--bmnm-label-bg), color-mix(in srgb, var(--bmnm-label-bg) 62%, #000));
}

/* =========================
   Effects
========================= */
.bmnm-effect-none::after {
    display: none;
}

.bmnm-effect-glass-shine::after {
    background: linear-gradient(112deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.17) 46%, color-mix(in srgb, var(--bmnm-accent) 24%, transparent) 50%, rgba(255, 255, 255, 0.10) 54%, transparent 62%, transparent 100%);
    background-size: 260% 100%;
    animation: bmnm-glass-shine 5.8s linear infinite;
}

.bmnm-effect-neon-pulse {
    animation: bmnm-neon-pulse 3.8s ease-in-out infinite;
}

.bmnm-effect-gradient-flow {
    background-size: 220% 220%;
    animation: bmnm-gradient-flow 9s ease-in-out infinite;
}

.bmnm-effect-scan-lines::after {
    opacity: 0.28;
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.06) 3px 4px);
    animation: bmnm-scan 8s linear infinite;
}

.bmnm-effect-soft-glitch .bmnm-text {
    animation: bmnm-soft-glitch 7s steps(1, end) infinite;
}

.bmnm-effect-floating-glow::after {
    inset: -50% -15%;
    background:
        radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--bmnm-accent) 26%, transparent), transparent 24%),
        radial-gradient(circle at 80% 50%, rgba(104, 88, 255, 0.20), transparent 25%);
    filter: blur(15px);
    animation: bmnm-floating-glow 8s ease-in-out infinite alternate;
}

/* =========================
   Responsive visibility
========================= */
@media (min-width: 1025px) {
    .bmnm-hide-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .bmnm-root {
        height: var(--bmnm-height-tablet);
        min-height: var(--bmnm-height-tablet);
        font-size: var(--bmnm-font-size-tablet);
    }

    .bmnm-hide-tablet {
        display: none !important;
    }

    .bmnm-news-label {
        padding-inline: 18px;
    }
}

@media (max-width: 767px) {
    .bmnm-root {
        height: var(--bmnm-height-mobile);
        min-height: var(--bmnm-height-mobile);
        font-size: var(--bmnm-font-size-mobile);
    }

    .bmnm-hide-mobile {
        display: none !important;
    }

    .bmnm-item {
        padding-inline: calc(var(--bmnm-item-gap) / 3.2);
    }

    .bmnm-separator {
        margin-inline-start: calc(var(--bmnm-item-gap) / 3.2);
    }

    .bmnm-news-label {
        gap: 6px;
        max-width: 46%;
        padding-inline: 13px;
        font-size: 0.88em;
    }

    .bmnm-label-right .bmnm-news-label {
        padding-inline-start: 22px;
    }

    .bmnm-label-left .bmnm-news-label {
        padding-inline-end: 22px;
    }

    .bmnm-news-icon {
        width: 13px;
        height: 13px;
    }

    .bmnm-news-arrows > span:nth-child(3) {
        display: none;
    }

    .bmnm-toggle {
        left: 8px;
        width: 28px;
        height: 28px;
    }
}

/* =========================
   Reduced motion
========================= */
@media (prefers-reduced-motion: reduce) {
    .bmnm-root,
    .bmnm-root::before,
    .bmnm-root::after,
    .bmnm-root *,
    .bmnm-root *::before,
    .bmnm-root *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .bmnm-track {
        transform: translate3d(0, 0, 0) !important;
    }
}

/* =========================
   Keyframes
========================= */
@keyframes bmnm-marquee-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes bmnm-marquee-right {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes bmnm-glass-shine {
    from { background-position: 180% 0; }
    to { background-position: -80% 0; }
}

@keyframes bmnm-neon-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bmnm-accent) 36%, transparent)); }
}

@keyframes bmnm-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes bmnm-scan {
    from { background-position: 0 0; }
    to { background-position: 0 80px; }
}

@keyframes bmnm-soft-glitch {
    0%, 92%, 100% { transform: translate(0, 0); text-shadow: none; }
    93% { transform: translate(0.4px, -0.3px); text-shadow: 1px 0 rgba(114, 247, 255, 0.28), -1px 0 rgba(91, 92, 255, 0.26); }
    94% { transform: translate(-0.4px, 0.2px); }
    95% { transform: translate(0, 0); text-shadow: none; }
}

@keyframes bmnm-floating-glow {
    from { transform: translate3d(-8%, -2%, 0) rotate(-2deg); }
    to { transform: translate3d(8%, 2%, 0) rotate(2deg); }
}

@keyframes bmnm-arrow-flash {
    0%, 100% { opacity: 0.18; transform: translateX(0); }
    48% { opacity: 1; transform: translateX(-2px); }
}

@keyframes bmnm-label-shine {
    0%, 46% { transform: translateX(-140%); }
    68%, 100% { transform: translateX(140%); }
}

@keyframes bmnm-live-dot {
    0%, 100% { transform: scale(0.86); opacity: 0.72; }
    50% { transform: scale(1); opacity: 1; }
}

/* =========================================================
   BrandiMark 1.1 — 3 separated libraries / 60 templates
   New template keys: normal-01..20, news-01..20, breaking-01..20
========================================================= */
.bmnm-style-normal,
.bmnm-style-news,
.bmnm-style-breaking {
    color: var(--bmnm-text);
    background:
        linear-gradient(112deg, var(--bmnm-bg-start) 0%, var(--bmnm-bg-end) 100%);
    border-top: 1px solid color-mix(in srgb, var(--bmnm-border) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--bmnm-border) 42%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        0 8px 28px rgba(0, 0, 0, 0.24),
        0 0 22px color-mix(in srgb, var(--bmnm-accent) 12%, transparent);
}

.bmnm-style-normal .bmnm-item,
.bmnm-style-normal .bmnm-text,
.bmnm-style-normal .bmnm-link,
.bmnm-style-news .bmnm-item,
.bmnm-style-news .bmnm-text,
.bmnm-style-news .bmnm-link,
.bmnm-style-breaking .bmnm-item,
.bmnm-style-breaking .bmnm-text,
.bmnm-style-breaking .bmnm-link {
    color: var(--bmnm-text);
}

.bmnm-style-normal .bmnm-separator,
.bmnm-style-news .bmnm-separator,
.bmnm-style-breaking .bmnm-separator {
    color: var(--bmnm-accent);
}

.bmnm-style-normal .bmnm-news-label,
.bmnm-style-news .bmnm-news-label,
.bmnm-style-breaking .bmnm-news-label {
    color: var(--bmnm-label-text);
    background: linear-gradient(135deg, var(--bmnm-label-bg), color-mix(in srgb, var(--bmnm-label-bg) 64%, #000));
    border-inline: 1px solid color-mix(in srgb, var(--bmnm-accent) 34%, transparent);
}

.bmnm-style-news .bmnm-news-label {
    box-shadow: 0 0 24px color-mix(in srgb, var(--bmnm-label-bg) 26%, transparent);
}

.bmnm-style-breaking .bmnm-news-label {
    font-weight: 800;
    box-shadow:
        0 0 20px color-mix(in srgb, var(--bmnm-label-bg) 34%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.bmnm-style-normal .bmnm-viewport::before,
.bmnm-style-news .bmnm-viewport::before,
.bmnm-style-breaking .bmnm-viewport::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bmnm-bg-start) 96%, transparent), transparent);
}

.bmnm-style-normal .bmnm-viewport::after,
.bmnm-style-news .bmnm-viewport::after,
.bmnm-style-breaking .bmnm-viewport::after {
    background: linear-gradient(270deg, color-mix(in srgb, var(--bmnm-bg-end) 96%, transparent), transparent);
}

/* ---------- 20 structural template variants ---------- */
.bmnm-variant-01::before {
    background:
        radial-gradient(circle at 16% -60%, color-mix(in srgb, var(--bmnm-accent) 32%, transparent), transparent 42%),
        radial-gradient(circle at 82% 150%, color-mix(in srgb, var(--bmnm-label-bg) 24%, transparent), transparent 44%);
}

.bmnm-variant-02::before {
    background: repeating-linear-gradient(125deg, transparent 0 68px, color-mix(in srgb, var(--bmnm-accent) 6%, transparent) 68px 104px);
}

.bmnm-variant-03 {
    background: linear-gradient(180deg, var(--bmnm-bg-start), var(--bmnm-bg-end));
}
.bmnm-variant-03::before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bmnm-accent) 11%, transparent), transparent);
}

.bmnm-variant-04::before {
    background:
        linear-gradient(90deg, transparent 0 18%, color-mix(in srgb, var(--bmnm-accent) 10%, transparent) 18% 19%, transparent 19% 81%, color-mix(in srgb, var(--bmnm-accent) 8%, transparent) 81% 82%, transparent 82%);
}

.bmnm-variant-05::before {
    background:
        radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--bmnm-accent) 20%, transparent), transparent 27%),
        radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--bmnm-accent) 13%, transparent), transparent 28%);
}

.bmnm-variant-06::before {
    background:
        linear-gradient(118deg, transparent 12%, color-mix(in srgb, var(--bmnm-accent) 9%, transparent) 12% 26%, transparent 26% 46%, color-mix(in srgb, var(--bmnm-label-bg) 12%, transparent) 46% 59%, transparent 59%);
}

.bmnm-variant-07::before {
    background:
        linear-gradient(color-mix(in srgb, var(--bmnm-accent) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--bmnm-accent) 4%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
}

.bmnm-variant-08::before {
    background: repeating-radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--bmnm-accent) 6%, transparent) 0 2px, transparent 2px 18px);
}

.bmnm-variant-09::before {
    background: linear-gradient(100deg, color-mix(in srgb, var(--bmnm-accent) 10%, transparent), transparent 27%, transparent 72%, color-mix(in srgb, var(--bmnm-label-bg) 9%, transparent));
}

.bmnm-variant-10::before {
    background: repeating-linear-gradient(90deg, transparent 0 110px, color-mix(in srgb, var(--bmnm-accent) 5%, transparent) 110px 111px);
}

.bmnm-variant-11::before {
    background: conic-gradient(from 210deg at 20% 50%, transparent, color-mix(in srgb, var(--bmnm-accent) 12%, transparent), transparent 25%);
}

.bmnm-variant-12 {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--bmnm-border) 35%, transparent),
        0 5px 18px rgba(0, 0, 0, 0.18);
}
.bmnm-variant-12::before {
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%, rgba(0,0,0,.06));
}

.bmnm-variant-13::before {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--bmnm-accent) 18%, transparent) 0 1px, transparent 1.5px) 0 0 / 27px 27px;
    opacity: .55;
}

.bmnm-variant-14::before {
    background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--bmnm-accent) 3.5%, transparent) 9px 10px);
}

.bmnm-variant-15::before {
    background: linear-gradient(90deg, rgba(255,255,255,.04), transparent 38%, rgba(255,255,255,.03));
}

.bmnm-variant-16::before {
    background:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--bmnm-accent) 24%, transparent), transparent 55%);
}

.bmnm-variant-17::before {
    background:
        linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--bmnm-accent) 8%, transparent) 50%, transparent 80%),
        repeating-linear-gradient(120deg, transparent 0 80px, rgba(255,255,255,.025) 80px 118px);
}

.bmnm-variant-18::before {
    background: linear-gradient(105deg, color-mix(in srgb, var(--bmnm-label-bg) 15%, transparent), transparent 35% 65%, color-mix(in srgb, var(--bmnm-accent) 12%, transparent));
}

.bmnm-variant-19::before {
    background:
        radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--bmnm-accent) 15%, transparent), transparent 24%),
        radial-gradient(circle at 68% 70%, color-mix(in srgb, var(--bmnm-label-bg) 14%, transparent), transparent 25%);
}

.bmnm-variant-20 {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bmnm-border) 26%, transparent);
}
.bmnm-variant-20::before {
    background: none;
}

/* =========================================================
   30 lightweight visual effects (one active at a time)
========================================================= */
.bmnm-fx-01::after { display: none; }

.bmnm-fx-02::after {
    background: linear-gradient(112deg, transparent 0 39%, rgba(255,255,255,.17) 46%, color-mix(in srgb, var(--bmnm-accent) 22%, transparent) 50%, rgba(255,255,255,.08) 54%, transparent 62%);
    background-size: 260% 100%;
    animation: bmnm-fx-sweep 5.8s linear infinite;
}

.bmnm-fx-03 { animation: bmnm-fx-neon 3.9s ease-in-out infinite; }

.bmnm-fx-04 {
    background-size: 220% 220%;
    animation: bmnm-fx-gradient 9s ease-in-out infinite;
}

.bmnm-fx-05::after {
    opacity: .26;
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.055) 3px 4px);
    background-size: 100% 8px;
    animation: bmnm-fx-scan 8s linear infinite;
}

.bmnm-fx-06 .bmnm-text { animation: bmnm-fx-glitch 7s steps(1,end) infinite; }

.bmnm-fx-07::after {
    inset: -55% -18%;
    background:
        radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--bmnm-accent) 24%, transparent), transparent 23%),
        radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--bmnm-label-bg) 20%, transparent), transparent 24%);
    filter: blur(16px);
    animation: bmnm-fx-float 8s ease-in-out infinite alternate;
}

.bmnm-fx-08::after {
    opacity: .42;
    background: radial-gradient(circle, color-mix(in srgb, var(--bmnm-accent) 70%, transparent) 0 1px, transparent 1.7px) 0 0 / 38px 23px;
    animation: bmnm-fx-dots 12s linear infinite;
}

.bmnm-fx-09::after {
    background: repeating-linear-gradient(125deg, transparent 0 84px, color-mix(in srgb, var(--bmnm-accent) 8%, transparent) 84px 116px);
    background-size: 240px 100%;
    animation: bmnm-fx-diagonal 11s linear infinite;
}

.bmnm-fx-10 .bmnm-text {
    background: linear-gradient(100deg, var(--bmnm-text) 0 42%, #fff 49%, var(--bmnm-accent) 52%, var(--bmnm-text) 59% 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: bmnm-fx-text-shine 7s linear infinite;
}

.bmnm-fx-11::after {
    top: auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bmnm-accent), transparent);
    transform-origin: center;
    animation: bmnm-fx-line-pulse 3.6s ease-in-out infinite;
}

.bmnm-fx-12 { animation: bmnm-fx-border 4.2s ease-in-out infinite; }

.bmnm-fx-13::after {
    opacity: .55;
    background:
        radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 71px 47px,
        radial-gradient(circle, var(--bmnm-accent) 0 1px, transparent 1.6px) 25px 12px / 93px 59px;
    animation: bmnm-fx-stardust 18s linear infinite;
}

.bmnm-fx-14::after {
    background: radial-gradient(ellipse at 0 50%, color-mix(in srgb, var(--bmnm-accent) 28%, transparent), transparent 32%);
    transform: translateX(-70%);
    animation: bmnm-fx-wave 7.5s ease-in-out infinite;
}

.bmnm-fx-15::after {
    opacity: .32;
    background:
        linear-gradient(color-mix(in srgb, var(--bmnm-accent) 11%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--bmnm-accent) 11%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    animation: bmnm-fx-grid 13s linear infinite;
}

.bmnm-fx-16::after {
    width: 22%;
    left: -35%;
    right: auto;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.26), color-mix(in srgb, var(--bmnm-accent) 35%, transparent), transparent);
    filter: blur(2px);
    transform: skewX(-20deg);
    animation: bmnm-fx-flare 8s ease-in-out infinite;
}

.bmnm-fx-17 { animation: bmnm-fx-shadow 4.8s ease-in-out infinite; }

.bmnm-fx-18::after {
    background: color-mix(in srgb, var(--bmnm-accent) 16%, transparent);
    opacity: 0;
    animation: bmnm-fx-flash 5.6s ease-in-out infinite;
}

.bmnm-fx-19::after {
    background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.10) 35%, color-mix(in srgb, var(--bmnm-accent) 18%, transparent) 50%, rgba(255,255,255,.08) 65%, transparent 85%);
    background-size: 210% 100%;
    animation: bmnm-fx-wave-shine 8s ease-in-out infinite;
}

.bmnm-fx-20::after {
    opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.bmnm-fx-21::after {
    background:
        linear-gradient(105deg, transparent 0 18%, rgba(255,255,255,.10) 24%, transparent 31%),
        linear-gradient(105deg, transparent 0 61%, color-mix(in srgb, var(--bmnm-accent) 20%, transparent) 68%, transparent 76%);
    background-size: 220% 100%, 250% 100%;
    animation: bmnm-fx-dual-beam 9s linear infinite;
}

.bmnm-fx-22::after {
    top: 20%;
    bottom: 20%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bmnm-accent) 25%, transparent), transparent);
    filter: blur(9px);
    animation: bmnm-fx-horizon 6s ease-in-out infinite;
}

.bmnm-fx-23 .bmnm-separator {
    animation: bmnm-fx-ticker-dot 1.8s ease-in-out infinite;
}

.bmnm-fx-24 .bmnm-text {
    animation: bmnm-fx-chromatic 6.8s steps(1,end) infinite;
}

.bmnm-fx-25::after {
    padding: 1px;
    background: conic-gradient(from 0deg, transparent 0 32%, var(--bmnm-accent) 38%, transparent 44% 82%, color-mix(in srgb, var(--bmnm-label-bg) 70%, transparent) 88%, transparent 94%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: bmnm-fx-edge 6s linear infinite;
}

.bmnm-fx-26 {
    transform-origin: center;
    animation: bmnm-fx-depth 7s ease-in-out infinite;
}

.bmnm-fx-27::after {
    background: linear-gradient(112deg, transparent 28%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.19) 44%, color-mix(in srgb, var(--bmnm-accent) 16%, transparent) 49%, rgba(255,255,255,.04) 56%, transparent 67%);
    background-size: 280% 100%;
    filter: blur(.2px);
    animation: bmnm-fx-refraction 8.5s linear infinite;
}

.bmnm-fx-28::after {
    left: -20%;
    right: -20%;
    background: conic-gradient(from 260deg at 50% 110%, transparent 0 42%, color-mix(in srgb, var(--bmnm-accent) 20%, transparent) 49%, transparent 56%);
    animation: bmnm-fx-radar 9s linear infinite;
}

.bmnm-fx-29::after {
    opacity: 0;
    background:
        radial-gradient(circle at 21% 40%, var(--bmnm-accent) 0 1px, transparent 2px),
        radial-gradient(circle at 57% 65%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 81% 30%, var(--bmnm-accent) 0 1px, transparent 2px);
    animation: bmnm-fx-spark 4.7s steps(1,end) infinite;
}

.bmnm-fx-30::after {
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--bmnm-accent) 17%, transparent), transparent 38%);
    transform: translateX(-42%);
    animation: bmnm-fx-focus 7.2s ease-in-out infinite alternate;
}

@keyframes bmnm-fx-sweep { from { background-position: 170% 0; } to { background-position: -90% 0; } }
@keyframes bmnm-fx-neon { 0%,100% { box-shadow: 0 8px 28px rgba(0,0,0,.24), 0 0 12px color-mix(in srgb, var(--bmnm-accent) 8%, transparent); } 50% { box-shadow: 0 8px 28px rgba(0,0,0,.24), 0 0 30px color-mix(in srgb, var(--bmnm-accent) 26%, transparent); } }
@keyframes bmnm-fx-gradient { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes bmnm-fx-scan { to { background-position: 0 80px; } }
@keyframes bmnm-fx-glitch { 0%,92%,100% { transform: none; text-shadow: inherit; } 93% { transform: translateX(1px); text-shadow: -1px 0 var(--bmnm-accent), 1px 0 var(--bmnm-label-bg); } 94% { transform: translateX(-1px); } 95% { transform: none; } }
@keyframes bmnm-fx-float { from { transform: translate3d(-5%,0,0); } to { transform: translate3d(5%,2%,0); } }
@keyframes bmnm-fx-dots { to { background-position: 76px 23px; } }
@keyframes bmnm-fx-diagonal { to { background-position: 240px 0; } }
@keyframes bmnm-fx-text-shine { from { background-position: 180% 0; } to { background-position: -80% 0; } }
@keyframes bmnm-fx-line-pulse { 0%,100% { opacity: .2; transform: scaleX(.35); } 50% { opacity: .9; transform: scaleX(1); } }
@keyframes bmnm-fx-border { 0%,100% { border-color: color-mix(in srgb, var(--bmnm-border) 42%, transparent); } 50% { border-color: var(--bmnm-border); } }
@keyframes bmnm-fx-stardust { to { background-position: 142px 0, -186px 0; } }
@keyframes bmnm-fx-wave { 0%,15% { transform: translateX(-75%); opacity: 0; } 35%,65% { opacity: 1; } 85%,100% { transform: translateX(75%); opacity: 0; } }
@keyframes bmnm-fx-grid { to { background-position: 48px 24px, 24px 48px; } }
@keyframes bmnm-fx-flare { 0%,70% { left: -35%; opacity: 0; } 78% { opacity: .8; } 94%,100% { left: 115%; opacity: 0; } }
@keyframes bmnm-fx-shadow { 0%,100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bmnm-accent) 28%, transparent)); } }
@keyframes bmnm-fx-flash { 0%,78%,100% { opacity: 0; } 82% { opacity: .42; } 88% { opacity: 0; } }
@keyframes bmnm-fx-wave-shine { 0%,100% { background-position: 150% 0; } 50% { background-position: -50% 0; } }
@keyframes bmnm-fx-dual-beam { from { background-position: 180% 0, -100% 0; } to { background-position: -80% 0, 170% 0; } }
@keyframes bmnm-fx-horizon { 0%,100% { transform: translateX(-45%) scaleX(.45); opacity: .15; } 50% { transform: translateX(45%) scaleX(1); opacity: .7; } }
@keyframes bmnm-fx-ticker-dot { 0%,100% { opacity: .35; transform: scale(.78); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes bmnm-fx-chromatic { 0%,91%,100% { text-shadow: inherit; transform: none; } 92% { text-shadow: -1px 0 color-mix(in srgb, var(--bmnm-accent) 68%, transparent), 1px 0 color-mix(in srgb, var(--bmnm-label-bg) 55%, transparent); } 94% { transform: translateX(.5px); } 96% { transform: none; } }
@keyframes bmnm-fx-edge { to { transform: rotate(360deg); } }
@keyframes bmnm-fx-depth { 0%,100% { transform: perspective(800px) rotateX(0deg); } 50% { transform: perspective(800px) rotateX(.7deg); } }
@keyframes bmnm-fx-refraction { from { background-position: 180% 0; } to { background-position: -90% 0; } }
@keyframes bmnm-fx-radar { to { transform: rotate(360deg); } }
@keyframes bmnm-fx-spark { 0%,72%,100% { opacity: 0; } 73% { opacity: .9; } 75% { opacity: .2; } 77% { opacity: .8; } 80% { opacity: 0; } }
@keyframes bmnm-fx-focus { from { transform: translateX(-42%); opacity: .22; } to { transform: translateX(42%); opacity: .62; } }


/* =========================================================
   BrandiMark 1.2 — structural template system
   Every variant now differs in shape, frame and visual elements,
   not only in color palette.
========================================================= */
.bmnm-root.bmnm-variant-01 {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 28px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--bmnm-border) 18%, transparent);
}
.bmnm-root.bmnm-variant-01::before {
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--bmnm-accent) 25%, transparent), transparent 28%),
        radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--bmnm-label-bg) 22%, transparent), transparent 30%);
}

.bmnm-root.bmnm-variant-02 {
    border-radius: 14px;
}
.bmnm-root.bmnm-variant-02::before {
    background: repeating-linear-gradient(125deg, transparent 0 36px, color-mix(in srgb, var(--bmnm-accent) 6%, transparent) 36px 58px);
}

.bmnm-root.bmnm-variant-03 {
    border-top-width: 2px;
    border-bottom-width: 2px;
}
.bmnm-root.bmnm-variant-03::before {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bmnm-accent) 14%, transparent), transparent);
}
.bmnm-root.bmnm-variant-03 .bmnm-news-label {
    border-radius: 10px;
}

.bmnm-root.bmnm-variant-04 {
    clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.bmnm-root.bmnm-variant-04::before {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bmnm-accent) 14%, transparent), transparent 24%), linear-gradient(315deg, color-mix(in srgb, var(--bmnm-label-bg) 12%, transparent), transparent 26%);
}
.bmnm-root.bmnm-variant-04 .bmnm-news-label {
    clip-path: polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
}

.bmnm-root.bmnm-variant-05 {
    border-radius: 999px;
    padding-inline: 4px;
}
.bmnm-root.bmnm-variant-05 .bmnm-news-label,
.bmnm-root.bmnm-variant-05 .bmnm-toggle {
    border-radius: 999px;
}
.bmnm-root.bmnm-variant-05 .bmnm-label-right .bmnm-news-label,
.bmnm-root.bmnm-variant-05 .bmnm-label-left .bmnm-news-label {
    clip-path: none;
    padding-inline: clamp(18px, 2.4vw, 26px);
}

.bmnm-root.bmnm-variant-06 {
    border-inline-start: 4px solid color-mix(in srgb, var(--bmnm-accent) 90%, transparent);
}
.bmnm-root.bmnm-variant-06::before {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--bmnm-accent) 14%, transparent), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 46%);
}
.bmnm-root.bmnm-variant-06 .bmnm-news-label {
    border-inline-start: 4px solid rgba(255,255,255,.3);
}

.bmnm-root.bmnm-variant-07::before {
    background:
        linear-gradient(color-mix(in srgb, var(--bmnm-accent) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--bmnm-accent) 4%, transparent) 1px, transparent 1px);
    background-size: 18px 18px;
}
.bmnm-root.bmnm-variant-07 .bmnm-news-label {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 16px color-mix(in srgb, var(--bmnm-label-bg) 22%, transparent);
}

.bmnm-root.bmnm-variant-08 {
    border-radius: 18px 6px 18px 6px;
}
.bmnm-root.bmnm-variant-08::before {
    background: radial-gradient(circle at 12px 50%, color-mix(in srgb, var(--bmnm-accent) 10%, transparent) 0 2px, transparent 3px) 0 0/24px 24px;
    opacity: .8;
}
.bmnm-root.bmnm-variant-08 .bmnm-news-label {
    border-radius: 8px 18px 18px 8px;
}

.bmnm-root.bmnm-variant-09 {
    box-shadow: inset 0 4px 0 color-mix(in srgb, var(--bmnm-accent) 38%, transparent), inset 0 -4px 0 color-mix(in srgb, var(--bmnm-label-bg) 34%, transparent), 0 8px 24px rgba(0,0,0,.26);
}
.bmnm-root.bmnm-variant-09::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
}

.bmnm-root.bmnm-variant-10 {
    border-style: dashed;
    border-width: 1px;
}
.bmnm-root.bmnm-variant-10::before {
    background: repeating-linear-gradient(90deg, transparent 0 84px, color-mix(in srgb, var(--bmnm-accent) 6%, transparent) 84px 86px);
}
.bmnm-root.bmnm-variant-10 .bmnm-news-label {
    border-radius: 6px;
}

.bmnm-root.bmnm-variant-11 {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bmnm-border) 28%, transparent), inset 0 0 0 6px rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.22);
    border-radius: 16px;
}
.bmnm-root.bmnm-variant-11::before {
    background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--bmnm-accent) 12%, transparent), transparent 22%), radial-gradient(circle at 80% 50%, color-mix(in srgb, var(--bmnm-label-bg) 12%, transparent), transparent 22%);
}

.bmnm-root.bmnm-variant-12 {
    clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}
.bmnm-root.bmnm-variant-12::before {
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%, rgba(0,0,0,.08));
}

.bmnm-root.bmnm-variant-13 {
    border-radius: 12px;
}
.bmnm-root.bmnm-variant-13::before {
    inset: 8px;
    border: 1px solid color-mix(in srgb, var(--bmnm-accent) 30%, transparent);
    border-radius: 8px;
    background: none;
}
.bmnm-root.bmnm-variant-13 .bmnm-viewport,
.bmnm-root.bmnm-variant-13 .bmnm-news-label { position: relative; z-index: 2; }

.bmnm-root.bmnm-variant-14 {
    border-radius: 22px 22px 4px 4px;
}
.bmnm-root.bmnm-variant-14::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--bmnm-label-bg) 26%, transparent) 0 10%, transparent 10% 100%);
}
.bmnm-root.bmnm-variant-14 .bmnm-news-label {
    border-radius: 4px 14px 14px 4px;
}

.bmnm-root.bmnm-variant-15 {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bmnm-border) 34%, transparent), 0 12px 22px rgba(0,0,0,.25);
}
.bmnm-root.bmnm-variant-15::before {
    background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 35%, rgba(255,255,255,.03) 65%, transparent), linear-gradient(180deg, transparent 0 64%, color-mix(in srgb, var(--bmnm-accent) 8%, transparent));
}

.bmnm-root.bmnm-variant-16 {
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px color-mix(in srgb, var(--bmnm-border) 14%, transparent), 0 14px 28px rgba(0,0,0,.25);
}
.bmnm-root.bmnm-variant-16::before {
    background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--bmnm-accent) 22%, transparent), transparent 48%);
}

.bmnm-root.bmnm-variant-17 {
    border-top-width: 0;
    box-shadow: inset 0 3px 0 var(--bmnm-accent), 0 8px 24px rgba(0,0,0,.24);
}
.bmnm-root.bmnm-variant-17::before {
    background: repeating-linear-gradient(120deg, transparent 0 64px, rgba(255,255,255,.03) 64px 94px);
}
.bmnm-root.bmnm-variant-17 .bmnm-news-label {
    box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}

.bmnm-root.bmnm-variant-18 {
    border-radius: 10px;
}
.bmnm-root.bmnm-variant-18::before {
    background: linear-gradient(105deg, color-mix(in srgb, var(--bmnm-label-bg) 14%, transparent), transparent 26%, transparent 74%, color-mix(in srgb, var(--bmnm-accent) 12%, transparent));
}
.bmnm-root.bmnm-variant-18 .bmnm-news-label {
    position: relative;
    padding-inline-end: clamp(22px, 2.8vw, 36px);
}
.bmnm-root.bmnm-variant-18 .bmnm-news-label::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
    opacity: .75;
}

.bmnm-root.bmnm-variant-19 {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--bmnm-label-bg) 32%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--bmnm-border) 20%, transparent), 0 8px 24px rgba(0,0,0,.25);
    border-radius: 16px 16px 10px 10px;
}
.bmnm-root.bmnm-variant-19::before {
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), transparent 20%), radial-gradient(circle at 74% 72%, color-mix(in srgb, var(--bmnm-accent) 12%, transparent), transparent 22%);
}

.bmnm-root.bmnm-variant-20 {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bmnm-border) 25%, transparent), 0 5px 16px rgba(0,0,0,.18);
}
.bmnm-root.bmnm-variant-20::before {
    background: linear-gradient(90deg, rgba(255,255,255,.04), transparent 34%, rgba(255,255,255,.03) 66%, transparent);
}
.bmnm-root.bmnm-variant-20 .bmnm-news-label {
    border-radius: 999px;
    box-shadow: none;
}

/* category-sensitive accents */
.bmnm-style-news .bmnm-item { position: relative; }
.bmnm-style-news .bmnm-item::after {
    content: "";
    position: absolute;
    inset-inline-end: calc(var(--bmnm-item-gap) / 4);
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--bmnm-accent) 72%, transparent);
    opacity: .55;
}
.bmnm-style-news .bmnm-item:last-child::after,
.bmnm-style-normal .bmnm-item::after,
.bmnm-style-breaking .bmnm-item::after { display: none; }

.bmnm-style-breaking .bmnm-news-label {
    text-transform: none;
    letter-spacing: .01em;
}
.bmnm-style-breaking .bmnm-news-label::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.16) 48%, transparent 76%);
    transform: translateX(-140%);
    animation: bmnm-label-shine 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.bmnm-style-breaking .bmnm-news-label > * { position: relative; z-index: 2; }

@media (max-width: 767px) {
    .bmnm-root.bmnm-variant-04,
    .bmnm-root.bmnm-variant-12 {
        clip-path: none;
        border-radius: 12px;
    }
    .bmnm-root.bmnm-variant-05 {
        border-radius: 14px;
        padding-inline: 0;
    }
    .bmnm-root.bmnm-variant-05 .bmnm-news-label,
    .bmnm-root.bmnm-variant-20 .bmnm-news-label { border-radius: 12px; }
}


/* =========================================================
   BrandiMark 1.3 — responsive separator icons
   Auto mode uses a different icon for every structural template.
========================================================= */
.bmnm-separator {
    position: relative;
    flex: 0 0 auto;
    width: var(--bmnm-separator-size-desktop);
    height: var(--bmnm-separator-size-desktop);
    min-width: 6px;
    min-height: 6px;
    max-width: min(80px, 1.75em);
    max-height: min(80px, 1.75em);
    margin-inline-start: calc(var(--bmnm-item-gap) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: var(--bmnm-accent);
    font-size: min(var(--bmnm-separator-size-desktop), 1.25em);
    font-weight: 700;
    line-height: 1;
    opacity: 1;
    text-shadow: 0 0 7px color-mix(in srgb, var(--bmnm-accent) 84%, transparent), 0 0 15px color-mix(in srgb, var(--bmnm-accent) 34%, transparent);
}

.bmnm-separator-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    border: 0;
    margin: 0;
    padding: 0;
    transform: translateZ(0);
}

.bmnm-separator-mode-none .bmnm-separator { display: none !important; }
.bmnm-separator-mode-text .bmnm-separator { width: auto; max-width: none; height: auto; max-height: none; min-width: 0; min-height: 0; }
.bmnm-separator-mode-svg .bmnm-separator { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bmnm-accent) 28%, transparent)); }
.bmnm-separator-mode-auto .bmnm-separator { font-size: 0; }
.bmnm-separator-mode-auto .bmnm-separator::before,
.bmnm-separator-mode-auto .bmnm-separator::after {
    content: "";
    display: block;
    box-sizing: border-box;
}

/* 01 slash */
.bmnm-separator-mode-auto.bmnm-variant-01 .bmnm-separator::before {
    width: 2px; height: 82%; border-radius: 99px; background: currentColor; transform: rotate(18deg); box-shadow: 0 0 8px currentColor;
}
/* 02 double slash */
.bmnm-separator-mode-auto.bmnm-variant-02 .bmnm-separator::before,
.bmnm-separator-mode-auto.bmnm-variant-02 .bmnm-separator::after {
    width: 2px; height: 72%; border-radius: 99px; background: currentColor; transform: rotate(20deg); box-shadow: 0 0 7px currentColor;
}
.bmnm-separator-mode-auto.bmnm-variant-02 .bmnm-separator::after { margin-inline-start: 4px; opacity: .55; }
/* 03 diamond */
.bmnm-separator-mode-auto.bmnm-variant-03 .bmnm-separator::before {
    width: 48%; height: 48%; background: currentColor; transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 8px currentColor;
}
/* 04 chevron */
.bmnm-separator-mode-auto.bmnm-variant-04 .bmnm-separator::before {
    width: 48%; height: 48%; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); filter: drop-shadow(0 0 5px currentColor);
}
/* 05 ring */
.bmnm-separator-mode-auto.bmnm-variant-05 .bmnm-separator::before {
    width: 52%; height: 52%; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 7px currentColor, inset 0 0 5px color-mix(in srgb, currentColor 60%, transparent);
}
/* 06 plus */
.bmnm-separator-mode-auto.bmnm-variant-06 .bmnm-separator::before {
    width: 70%; height: 2px; border-radius: 99px; background: currentColor; box-shadow: 0 0 7px currentColor;
}
.bmnm-separator-mode-auto.bmnm-variant-06 .bmnm-separator::after {
    position: absolute; width: 2px; height: 70%; border-radius: 99px; background: currentColor; box-shadow: 0 0 7px currentColor;
}
/* 07 spark */
.bmnm-separator-mode-auto.bmnm-variant-07 .bmnm-separator::before {
    width: 72%; height: 72%; background: currentColor; clip-path: polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%); box-shadow: 0 0 8px currentColor;
}
/* 08 hollow diamond */
.bmnm-separator-mode-auto.bmnm-variant-08 .bmnm-separator::before {
    width: 52%; height: 52%; border: 2px solid currentColor; transform: rotate(45deg); border-radius: 2px; filter: drop-shadow(0 0 5px currentColor);
}
/* 09 vertical bar */
.bmnm-separator-mode-auto.bmnm-variant-09 .bmnm-separator::before {
    width: 3px; height: 72%; border-radius: 99px; background: linear-gradient(180deg, transparent, currentColor 22% 78%, transparent); box-shadow: 0 0 8px currentColor;
}
/* 10 cross */
.bmnm-separator-mode-auto.bmnm-variant-10 .bmnm-separator::before,
.bmnm-separator-mode-auto.bmnm-variant-10 .bmnm-separator::after {
    position: absolute; width: 70%; height: 2px; border-radius: 99px; background: currentColor; box-shadow: 0 0 6px currentColor;
}
.bmnm-separator-mode-auto.bmnm-variant-10 .bmnm-separator::before { transform: rotate(45deg); }
.bmnm-separator-mode-auto.bmnm-variant-10 .bmnm-separator::after { transform: rotate(-45deg); }
/* 11 triangle */
.bmnm-separator-mode-auto.bmnm-variant-11 .bmnm-separator::before {
    width: 58%; height: 58%; background: currentColor; clip-path: polygon(20% 0,100% 50%,20% 100%); filter: drop-shadow(0 0 5px currentColor);
}
/* 12 square */
.bmnm-separator-mode-auto.bmnm-variant-12 .bmnm-separator::before {
    width: 46%; height: 46%; background: currentColor; border-radius: 3px; box-shadow: 0 0 7px currentColor;
}
/* 13 target */
.bmnm-separator-mode-auto.bmnm-variant-13 .bmnm-separator::before {
    width: 64%; height: 64%; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 0 0 7px currentColor;
}
.bmnm-separator-mode-auto.bmnm-variant-13 .bmnm-separator::after {
    position: absolute; width: 22%; height: 22%; border-radius: 50%; background: currentColor;
}
/* 14 twin dots */
.bmnm-separator-mode-auto.bmnm-variant-14 .bmnm-separator::before,
.bmnm-separator-mode-auto.bmnm-variant-14 .bmnm-separator::after {
    width: 28%; height: 28%; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor;
}
.bmnm-separator-mode-auto.bmnm-variant-14 .bmnm-separator::after { margin-inline-start: 4px; opacity: .55; }
/* 15 wave */
.bmnm-separator-mode-auto.bmnm-variant-15 .bmnm-separator::before {
    width: 80%; height: 38%; border-top: 2px solid currentColor; border-radius: 50%; transform: rotate(-12deg); filter: drop-shadow(0 0 4px currentColor);
}
.bmnm-separator-mode-auto.bmnm-variant-15 .bmnm-separator::after {
    position: absolute; width: 80%; height: 38%; border-bottom: 2px solid currentColor; border-radius: 50%; transform: rotate(-12deg); filter: drop-shadow(0 0 4px currentColor);
}
/* 16 code brackets */
.bmnm-separator-mode-auto.bmnm-variant-16 .bmnm-separator::before {
    width: 42%; height: 42%; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: 1px;
}
.bmnm-separator-mode-auto.bmnm-variant-16 .bmnm-separator::after {
    width: 42%; height: 42%; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-inline-start: 1px;
}
/* 17 lightning */
.bmnm-separator-mode-auto.bmnm-variant-17 .bmnm-separator::before {
    width: 56%; height: 82%; background: currentColor; clip-path: polygon(58% 0,18% 54%,46% 54%,35% 100%,84% 40%,56% 40%); filter: drop-shadow(0 0 5px currentColor);
}
/* 18 pill */
.bmnm-separator-mode-auto.bmnm-variant-18 .bmnm-separator::before {
    width: 78%; height: 28%; border-radius: 999px; background: currentColor; box-shadow: 0 0 8px currentColor;
}
/* 19 hexagon */
.bmnm-separator-mode-auto.bmnm-variant-19 .bmnm-separator::before {
    width: 62%; height: 62%; background: currentColor; clip-path: polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%); box-shadow: 0 0 8px currentColor;
}
/* 20 orbit */
.bmnm-separator-mode-auto.bmnm-variant-20 .bmnm-separator::before {
    width: 62%; height: 62%; border: 1.5px solid currentColor; border-radius: 50% 42% 50% 42%; transform: rotate(25deg); filter: drop-shadow(0 0 5px currentColor);
}
.bmnm-separator-mode-auto.bmnm-variant-20 .bmnm-separator::after {
    position: absolute; width: 20%; height: 20%; border-radius: 50%; background: currentColor; transform: translate(42%,-42%); box-shadow: 0 0 6px currentColor;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .bmnm-separator {
        width: var(--bmnm-separator-size-tablet);
        height: var(--bmnm-separator-size-tablet);
        font-size: min(var(--bmnm-separator-size-tablet), 1.2em);
        max-width: min(80px, 1.6em);
        max-height: min(80px, 1.6em);
    }
}

@media (max-width: 767px) {
    .bmnm-separator {
        width: var(--bmnm-separator-size-mobile);
        height: var(--bmnm-separator-size-mobile);
        font-size: min(var(--bmnm-separator-size-mobile), 1.1em);
        max-width: min(80px, 1.45em);
        max-height: min(80px, 1.45em);
        margin-inline-start: calc(var(--bmnm-item-gap) / 3.2);
    }
}

/* Category-specific treatment makes the same structural number visibly distinct
   across Normal, News and Breaking libraries. */
.bmnm-style-news.bmnm-separator-mode-auto .bmnm-separator {
    border: 1px solid color-mix(in srgb, var(--bmnm-accent) 48%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bmnm-accent) 7%, transparent);
    box-shadow: inset 0 0 8px color-mix(in srgb, var(--bmnm-accent) 8%, transparent);
}
.bmnm-style-breaking.bmnm-separator-mode-auto .bmnm-separator {
    color: var(--bmnm-label-text);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bmnm-label-bg) 82%, #000 18%);
    box-shadow: 0 0 11px color-mix(in srgb, var(--bmnm-label-bg) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
    transform: scale(.92);
}
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-04 .bmnm-separator,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-08 .bmnm-separator,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-12 .bmnm-separator,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-16 .bmnm-separator,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-20 .bmnm-separator {
    border-radius: 5px;
    transform: rotate(45deg) scale(.78);
}
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-04 .bmnm-separator::before,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-08 .bmnm-separator::before,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-12 .bmnm-separator::before,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-16 .bmnm-separator::before,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-20 .bmnm-separator::before,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-16 .bmnm-separator::after,
.bmnm-style-breaking.bmnm-separator-mode-auto.bmnm-variant-20 .bmnm-separator::after {
    transform: rotate(-45deg);
}