.megi-spine-component {
            --megi-blue-1: #0864c6;
            --megi-blue-2: #0877ca;
            --megi-blue-3: #0d90bf;
            --megi-cyan-1: #08a8bd;
            --megi-cyan-2: #08bac2;
            --megi-outline: #168cff;
            --megi-line: #30343a;
            --megi-text: #15191f;
            --megi-muted: #66717d;
            width: 100%;
            max-width: 1220px;
            margin: 0 auto;
            padding: clamp(.35rem, 1.4vw, 1rem);
            box-sizing: border-box;
            container-type: inline-size;
        }

        .megi-spine-stage {
            --megi-diagram-min-width: 0px;
            position: relative;
            isolation: isolate;
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            border-radius: 28px;
            background:
                radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .34), transparent 28%),
                radial-gradient(circle at 52% 88%, rgba(255, 255, 255, .22), transparent 34%),
                linear-gradient(180deg,
                rgba(8, 186, 194, .14) 0%,
                rgba(8, 174, 192, .11) 18%,
                rgba(13, 144, 191, .08) 42%,
                rgba(8, 119, 202, .08) 72%,
                rgba(8, 100, 198, .12) 100%);
            box-shadow: 0 18px 55px rgba(8, 40, 76, .08);
            scrollbar-width: thin;
            scrollbar-color: rgba(8, 119, 202, .32) transparent;
            overscroll-behavior-inline: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y;
        }

        .megi-spine-stage::-webkit-scrollbar {
            height: 7px;
        }

        .megi-spine-stage::-webkit-scrollbar-track {
            background: transparent;
        }

        .megi-spine-stage::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgba(8, 119, 202, .28);
        }

        .megi-spine-svg {
            position: relative;
            z-index: 1;
            display: block;
            width: max(100%, var(--megi-diagram-min-width));
            min-width: 0;
            max-width: none;
            height: auto;
            font-family: Arial, Helvetica, sans-serif;
        }

        .megi-connector {
            fill: none;
            stroke: var(--megi-line);
            stroke-width: 1.35;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: .92;
            vector-effect: non-scaling-stroke;
            transition: opacity .25s ease, stroke-width .25s ease, filter .25s ease;
            animation: megiConnectorBreath 5.6s ease-in-out infinite;
        }

        .megi-hub {
            fill: #0b7fca;
            stroke: rgba(255,255,255,.70);
            stroke-width: 2;
            filter: url(#megiHubShadow);
            transform-box: fill-box;
            transform-origin: center;
            animation: megiHubPulse 1.7s ease-in-out infinite;
            will-change: transform, opacity;
        }

        .megi-hub.cyan {
            fill: #08aebd;
        }

        .megi-bubble,
        .megi-spine-node {
            cursor: pointer;
            outline: none;
            transform-box: fill-box;
            transform-origin: center;
            transition: transform .22s ease, filter .22s ease;
        }

        .megi-bubble circle {
            fill: #ffffff;
            stroke: var(--megi-outline);
            stroke-width: 1.55;
            filter: url(#megiBubbleShadow);
            vector-effect: non-scaling-stroke;
            transition: fill .22s ease, stroke-width .22s ease, filter .22s ease;
        }

        .megi-bubble text {
            fill: var(--megi-text);
            font-size: 15px;
            font-weight: 500;
            text-anchor: middle;
            pointer-events: none;
        }

        .megi-spine-node path,
        .megi-spine-node rect,
        .megi-spine-segment path {
            filter: url(#megiNodeShadow);
            transition: filter .22s ease, opacity .22s ease;
        }

        .megi-spine-node path,
        .megi-spine-node rect {
            stroke: rgba(255, 255, 255, .26);
            stroke-width: .75;
            vector-effect: non-scaling-stroke;
        }

        .megi-spine-node > g,
        .megi-spine-node > text {
            transform-box: fill-box;
            transform-origin: center;
            will-change: transform, filter;
        }

        .megi-spine-node text {
            fill: #ffffff;
            stroke: rgba(255, 255, 255, .12);
            stroke-width: .35px;
            paint-order: stroke fill;
            font-size: 17px;
            font-weight: 760;
            letter-spacing: .12px;
            text-anchor: middle;
            pointer-events: none;
            filter: drop-shadow(0 1px 1px rgba(0, 51, 92, .22));
        }

        .megi-spine-node:hover,
        .megi-spine-node:focus,
        .megi-bubble:hover,
        .megi-bubble:focus {
            transform: translateY(-4px) scale(1.035);
            filter: brightness(1.03);
        }

        .megi-bubble:hover circle,
        .megi-bubble:focus circle {
            fill: #f7fbff;
            stroke-width: 2.5;
            filter: url(#megiBubbleHoverShadow);
        }

        .megi-bubble:hover ~ .megi-connector,
        .megi-bubble:focus ~ .megi-connector {
            opacity: 1;
        }

        .megi-spine-node.node-customers > g,
        .megi-spine-node.node-customers > text {
            animation: megiSpineDrift 6.2s ease-in-out infinite;
        }

        .megi-spine-node.node-users > g,
        .megi-spine-node.node-users > text {
            animation: megiSpineDrift 6.6s ease-in-out infinite -.8s;
        }

        .megi-spine-node.node-m2m > g,
        .megi-spine-node.node-m2m > text {
            animation: megiSpineDrift 7s ease-in-out infinite -1.6s;
        }

        .megi-spine-node.node-billing > g,
        .megi-spine-node.node-billing > text {
            animation: megiSpineDrift 6.4s ease-in-out infinite -2.2s;
        }

        .megi-spine-node.node-manager > g,
        .megi-spine-node.node-manager > text {
            animation: megiSpineDrift 6.8s ease-in-out infinite -3s;
        }

        .megi-spine-node.node-customers > text,
        .megi-spine-node.node-users > text,
        .megi-spine-node.node-m2m > text,
        .megi-spine-node.node-billing > text,
        .megi-spine-node.node-manager > text {
            animation-name: megiSpineDrift, megiSpineTextGlow;
            animation-duration: 6.4s, 4.8s;
            animation-timing-function: ease-in-out, ease-in-out;
            animation-iteration-count: infinite, infinite;
        }

        .megi-service-dialog .ui-dialog-content {
            padding: 0 !important;
            overflow: hidden !important;
            border-radius: 0 !important;
        }

        .megi-dialog-content {
            min-height: 250px;
            padding: 1.75rem;
            background:
                radial-gradient(circle at 100% 0, rgba(22, 140, 255, .13), transparent 34%),
                linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
        }

        .megi-dialog-kicker {
            margin-bottom: .45rem;
            color: #0a7fc6;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .megi-dialog-title {
            margin: 0;
            color: #0b426f;
            font-size: clamp(1.4rem, 3vw, 2rem);
            line-height: 1.15;
        }

        .megi-dialog-description {
            margin: 1rem 0 0;
            color: #35414c;
            font-size: 1rem;
            line-height: 1.72;
            white-space: pre-line;
        }

        @keyframes megiSpineDrift {
            0%, 100% {
                transform: translate3d(0, 0, 0) rotate(-.18deg);
            }

            35% {
                transform: translate3d(1.5px, -3px, 0) rotate(.2deg);
            }

            68% {
                transform: translate3d(-1px, 1.5px, 0) rotate(-.1deg);
            }
        }

        @keyframes megiSpineTextGlow {
            0%, 100% {
                filter: drop-shadow(0 1px 1px rgba(0, 51, 92, .20));
            }

            50% {
                filter: drop-shadow(0 2px 3px rgba(220, 247, 255, .34));
            }
        }

        @keyframes megiConnectorBreath {
            0%, 100% {
                opacity: .78;
                filter: drop-shadow(0 0 0 rgba(22, 140, 255, 0));
            }

            50% {
                opacity: .98;
                filter: drop-shadow(0 0 2px rgba(22, 140, 255, .16));
            }
        }

        @keyframes megiHubPulse {
            0%, 100% {
                transform: scale(.92);
                opacity: .42;
            }

            50% {
                transform: scale(1.18);
                opacity: .76;
            }
        }

        /*
         * A rajz 1200 egység széles. Nagyobb méreten teljesen kitölti a rendelkezésre
         * álló helyet. Keskeny konténernél csak addig zsugorodik, amíg a buborékok és
         * a szövegek olvashatók maradnak; telefonon ezután finoman oldalra húzható.
         * Így az elemek nem csúsznak egymásra, és nem válnak használhatatlanul apróvá.
         */
        @container (max-width: 900px) {
            .megi-spine-stage {
                --megi-diagram-min-width: 820px;
                border-radius: 18px;
            }

            .megi-spine-stage .megi-bubble text {
                font-size: 16px;
            }

            .megi-spine-stage .megi-spine-node text {
                font-size: 18px;
            }

            .megi-spine-stage .megi-bubble:hover,
                .megi-spine-stage .megi-bubble:focus,
                .megi-spine-stage .megi-spine-node:hover,
                .megi-spine-stage .megi-spine-node:focus {
                transform: translateY(-3px) scale(1.025);
            }
        }

        @container (max-width: 640px) {
            .megi-spine-stage {
                --megi-diagram-min-width: 760px;
                border-radius: 14px;
                box-shadow: 0 12px 34px rgba(8, 40, 76, .07);
            }

            .megi-spine-stage .megi-bubble text {
                font-size: 17px;
                font-weight: 600;
            }

            .megi-spine-stage .megi-spine-node text {
                font-size: 19px;
            }

            .megi-spine-stage .megi-connector {
                stroke-width: 1.2;
            }
        }

        @container (max-width: 420px) {
            .megi-spine-stage {
                --megi-diagram-min-width: 720px;
            }
        }

        /* Fallback régebbi böngészőkhöz, amelyek még nem kezelik a container queryt. */
        @media (max-width: 900px) {
            .megi-spine-component {
                padding: .45rem;
            }

            .megi-spine-stage {
                --megi-diagram-min-width: 820px;
                border-radius: 18px;
            }

            .megi-spine-stage .megi-bubble text {
                font-size: 16px;
            }

            .megi-spine-stage .megi-spine-node text {
                font-size: 18px;
            }
        }

        @media (max-width: 640px) {
            .megi-spine-component {
                padding: .2rem;
            }

            .megi-spine-stage {
                --megi-diagram-min-width: 760px;
                border-radius: 14px;
                box-shadow: 0 12px 34px rgba(8, 40, 76, .07);
            }

            .megi-spine-stage .megi-bubble text {
                font-size: 17px;
                font-weight: 600;
            }

            .megi-spine-stage .megi-spine-node text {
                font-size: 19px;
            }

            .megi-spine-stage .megi-connector {
                stroke-width: 1.2;
            }

            body .megi-service-dialog {
                width: calc(100vw - 1rem) !important;
                max-width: 720px !important;
                margin: 0 !important;
            }

            body .megi-service-dialog .ui-dialog-content {
                max-height: calc(100vh - 5rem);
                overflow-y: auto !important;
            }

            .megi-dialog-content {
                min-height: 0;
                padding: 1.15rem;
            }

            .megi-dialog-description {
                font-size: .94rem;
                line-height: 1.58;
            }
        }

        @media (max-width: 420px) {
            .megi-spine-stage {
                --megi-diagram-min-width: 720px;
            }
        }

        /*
         * 576 px és alatta a teljes diagram belefér a rendelkezésre álló
         * szélességbe. Itt már nincs vízszintes görgetés: az SVG, a buborékok,
         * a gerincelemek és a feliratok együtt, arányosan méreteződnek.
         */
        @container (max-width: 576px) {
            .megi-spine-component {
                padding: 0;
            }

            .megi-spine-stage {
                --megi-diagram-min-width: 0px;
                width: 100%;
                overflow-x: hidden;
                border-radius: 12px;
                touch-action: pan-y;
            }

            .megi-spine-svg {
                width: 100%;
                min-width: 0;
                max-width: 100%;
            }

            .megi-spine-stage .megi-bubble {
                --mc-576: 1.14;
                --mfs-576: 15.9px;
            }

            .megi-spine-stage .megi-bubble circle {
                transform-box: fill-box;
                transform-origin: center;
                transform: scale(var(--mc-576));
            }

            .megi-spine-stage .megi-bubble text {
                font-size: var(--mfs-576);
                font-weight: 600;
                letter-spacing: 0px;
            }

            .megi-spine-stage .megi-spine-node text {
                font-size: 16.7px;
            }
        }

        @container (max-width: 420px) {
            .megi-spine-stage {
                --megi-diagram-min-width: 0px;
            }

            .megi-spine-stage .megi-bubble {
                --mc-420: 1.17;
                --mfs-420: 14.9px;
            }

            .megi-spine-stage .megi-bubble circle {
                transform: scale(var(--mc-420));
            }

            .megi-spine-stage .megi-bubble text {
                font-size: var(--mfs-420);
                letter-spacing: -.02px;
            }

            .megi-spine-stage .megi-spine-node text {
                font-size: 15.7px;
            }
        }

        @media (max-width: 576px) {
            .megi-spine-component {
                padding: 0;
            }

            .megi-spine-stage {
                --megi-diagram-min-width: 0px;
                width: 100%;
                overflow-x: hidden;
                border-radius: 12px;
                touch-action: pan-y;
            }

            .megi-spine-svg {
                width: 100%;
                min-width: 0;
                max-width: 100%;
            }

            .megi-spine-stage .megi-bubble {
                --mc-576: 1.14;
                --mfs-576: 15.9px;
            }

            .megi-spine-stage .megi-bubble circle {
                transform-box: fill-box;
                transform-origin: center;
                transform: scale(var(--mc-576));
            }

            .megi-spine-stage .megi-bubble text {
                font-size: var(--mfs-576);
                font-weight: 600;
                letter-spacing: 0px;
            }

            .megi-spine-stage .megi-spine-node text {
                font-size: 16.7px;
            }
        }

        @media (max-width: 420px) {
            .megi-spine-stage {
                --megi-diagram-min-width: 0px;
            }

            .megi-spine-stage .megi-bubble {
                --mc-420: 1.17;
                --mfs-420: 14.9px;
            }

            .megi-spine-stage .megi-bubble circle {
                transform: scale(var(--mc-420));
            }

            .megi-spine-stage .megi-bubble text {
                font-size: var(--mfs-420);
                letter-spacing: -.02px;
            }

            .megi-spine-stage .megi-spine-node text {
                font-size: 15.7px;
            }
        }

        /*
         * Mobilon is az eredeti gerincábra marad meg. Nem készül külön kártyás vagy
         * egymás alá tördelődő változat. A rajz függőlegesen kap több helyet, így a
         * nagyobb buborékok lefelé tudnak terjeszkedni, miközben a vonalak és a
         * gerincelemek eredeti kapcsolatrendszere megmarad.
         */
        .megi-spine-component.megi-readable-mobile {
            --megi-mobile-y-stretch: 1.35;
            --megi-mobile-y-inverse: .74074074;
        }

        .megi-spine-component.megi-readable-mobile.megi-readable-mobile-compact {
            --megi-mobile-y-stretch: 1.55;
            --megi-mobile-y-inverse: .64516129;
        }

        .megi-spine-component.megi-readable-mobile .megi-spine-stage {
            --megi-diagram-min-width: 0px;
            width: 100%;
            overflow-x: hidden;
            overflow-y: hidden;
            border-radius: 12px;
            touch-action: pan-y;
        }

        .megi-spine-component.megi-readable-mobile .megi-spine-svg {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            height: auto;
            overflow: hidden;
        }

        .megi-spine-component.megi-readable-mobile .megi-diagram-content {
            transform-box: view-box;
            transform-origin: 0 0;
            transform: scaleY(var(--megi-mobile-y-stretch));
        }

        .megi-spine-component.megi-readable-mobile .megi-spine-node,
        .megi-spine-component.megi-readable-mobile .megi-spine-segment,
        .megi-spine-component.megi-readable-mobile .megi-bubble,
        .megi-spine-component.megi-readable-mobile .megi-hub {
            animation: none !important;
            transform-box: fill-box;
            transform-origin: center;
        }

        .megi-spine-component.megi-readable-mobile .megi-spine-node,
        .megi-spine-component.megi-readable-mobile .megi-spine-segment {
            transform: scaleY(var(--megi-mobile-y-inverse));
        }

        .megi-spine-component.megi-readable-mobile .megi-hub {
            transform: scaleY(var(--megi-mobile-y-inverse));
        }

        .megi-spine-component.megi-readable-mobile .megi-bubble {
            transform: translateY(var(--my-576, 0px)) scaleY(var(--megi-mobile-y-inverse));
        }

        .megi-spine-component.megi-readable-mobile.megi-readable-mobile-compact .megi-bubble {
            transform: translateY(var(--my-420, 0px)) scaleY(var(--megi-mobile-y-inverse));
        }

        .megi-spine-component.megi-readable-mobile .megi-bubble:hover,
        .megi-spine-component.megi-readable-mobile .megi-bubble:focus {
            transform: translateY(var(--my-576, 0px)) scaleY(var(--megi-mobile-y-inverse));
            filter: brightness(1.03);
        }

        .megi-spine-component.megi-readable-mobile.megi-readable-mobile-compact .megi-bubble:hover,
        .megi-spine-component.megi-readable-mobile.megi-readable-mobile-compact .megi-bubble:focus {
            transform: translateY(var(--my-420, 0px)) scaleY(var(--megi-mobile-y-inverse));
        }

        .megi-spine-component.megi-readable-mobile .megi-bubble circle {
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(var(--mc-576, 1.36));
        }

        .megi-spine-component.megi-readable-mobile.megi-readable-mobile-compact .megi-bubble circle {
            transform: scale(var(--mc-420, 1.48));
        }

        .megi-spine-component.megi-readable-mobile .megi-bubble text {
            font-size: var(--mfs-576, 27px);
            font-weight: 650;
            letter-spacing: -.15px;
        }

        .megi-spine-component.megi-readable-mobile.megi-readable-mobile-compact .megi-bubble text {
            font-size: var(--mfs-420, 32px);
            letter-spacing: -.2px;
        }

        .megi-spine-component.megi-readable-mobile .megi-spine-node text {
            font-size: 27px;
        }

        .megi-spine-component.megi-readable-mobile.megi-readable-mobile-compact .megi-spine-node text {
            font-size: 33px;
        }

        @media (prefers-reduced-motion: reduce) {
            .megi-spine-node,
            .megi-spine-node > g,
            .megi-spine-node > text,
            .megi-hub,
            .megi-connector {
                animation: none !important;
            }

            .megi-bubble,
            .megi-spine-node,
            .megi-bubble circle {
                transition: none !important;
            }
        }

/* ==========================================================================\n   MeGi Gerinc - szolgaltatas info dialog UX\n   ========================================================================== */
body .megi-service-dialog {
    max-width: min(900px, calc(100vw - 2rem)) !important;
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(9, 40, 72, .24), 0 8px 28px rgba(9, 40, 72, .12);
}

body .megi-service-dialog .ui-dialog-titlebar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 54px;
    padding: .82rem 1rem .82rem 1.15rem !important;
    border: 0 !important;
    border-bottom: 1px solid #e8eff5 !important;
    border-radius: 24px 24px 0 0 !important;
    background: rgba(255, 255, 255, .97) !important;
}

body .megi-service-dialog .ui-dialog-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    color: #24475f;
    font-size: .92rem;
    font-weight: 750;
}

body .megi-service-dialog .ui-dialog-titlebar-close {
    position: static !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px;
    width: 36px !important;
    height: 36px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: #526b7c !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

body .megi-service-dialog .ui-dialog-titlebar-close:hover,
body .megi-service-dialog .ui-dialog-titlebar-close:focus,
body .megi-service-dialog .ui-dialog-titlebar-close:focus-visible {
    background: #edf6fd;
    color: #087ac1 !important;
    text-decoration: none !important;
    transform: scale(1.04);
}

body .megi-service-dialog .ui-dialog-titlebar-close .ui-icon,
body .megi-service-dialog .ui-dialog-titlebar-close .ui-dialog-titlebar-close-icon {
    margin: 0 !important;
    text-decoration: none !important;
}

body .megi-service-dialog .ui-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #fff;
}

.megi-dialog-content {
    --dialog-primary: #0b78c6;
    --dialog-secondary: #14b8a6;
    --dialog-soft: #eaf6ff;
    --dialog-glow: rgba(11, 120, 198, .20);
    position: relative;
    min-height: 430px;
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 0%, var(--dialog-glow), transparent 38%),
        linear-gradient(145deg, #ffffff 0%, #f8fbff 54%, #f4f9fd 100%);
}

.megi-dialog-content[data-theme="customers"] {
    --dialog-primary: #0b78c6;
    --dialog-secondary: #18a9ba;
    --dialog-soft: #eaf6ff;
    --dialog-glow: rgba(11, 120, 198, .20);
}

.megi-dialog-content[data-theme="users"] {
    --dialog-primary: #7258d9;
    --dialog-secondary: #2d8ad8;
    --dialog-soft: #f1efff;
    --dialog-glow: rgba(114, 88, 217, .20);
}

.megi-dialog-content[data-theme="terminal"] {
    --dialog-primary: #008e91;
    --dialog-secondary: #0a6fc2;
    --dialog-soft: #e6faf8;
    --dialog-glow: rgba(0, 142, 145, .20);
}

.megi-dialog-content[data-theme="billing"] {
    --dialog-primary: #087ac1;
    --dialog-secondary: #1aa37a;
    --dialog-soft: #eaf8f3;
    --dialog-glow: rgba(26, 163, 122, .18);
}

.megi-dialog-content[data-theme="manager"] {
    --dialog-primary: #5d55cf;
    --dialog-secondary: #d17b28;
    --dialog-soft: #f3f0ff;
    --dialog-glow: rgba(93, 85, 207, .19);
}


.megi-dialog-layout {
    display: grid;
    grid-template-columns: minmax(285px, .82fr) minmax(0, 1.35fr);
    min-height: 430px;
}

.megi-dialog-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 430px;
    padding: 2.1rem 1.4rem 6.2rem;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .25), transparent 28%),
        linear-gradient(145deg, var(--dialog-primary), var(--dialog-secondary));
    isolation: isolate;
}

.megi-dialog-visual::before,
.megi-dialog-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

.megi-dialog-visual::before {
    width: 230px;
    height: 230px;
    left: -110px;
    bottom: -95px;
}

.megi-dialog-visual::after {
    width: 160px;
    height: 160px;
    top: -72px;
    right: -60px;
}

.megi-dialog-flow-svg {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(115%, 360px);
    transform: translate(-50%, -53%);
    opacity: .92;
}

.megi-dialog-orbit {
    fill: none;
    stroke: rgba(255, 255, 255, .18);
    stroke-width: 1.4;
    stroke-dasharray: 5 8;
    transform-box: fill-box;
    transform-origin: center;
}

.megi-dialog-orbit.orbit-one {
    animation: megiDialogOrbit 18s linear infinite;
}

.megi-dialog-orbit.orbit-two {
    animation: megiDialogOrbit 12s linear infinite reverse;
}

.megi-dialog-flow-path {
    fill: none;
    stroke: rgba(255, 255, 255, .45);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 8 12;
    animation: megiDialogFlow 3.3s linear infinite;
}

.megi-dialog-flow-path.flow-two {
    opacity: .7;
    animation-duration: 4.2s;
    animation-direction: reverse;
}

.megi-dialog-flow-nodes circle {
    fill: rgba(255, 255, 255, .94);
    stroke: rgba(255, 255, 255, .30);
    stroke-width: 8;
    transform-box: fill-box;
    transform-origin: center;
    animation: megiDialogNodePulse 2.4s ease-in-out infinite;
}

.megi-dialog-flow-nodes circle:nth-child(2n) { animation-delay: .35s; }
.megi-dialog-flow-nodes circle:nth-child(3n) { animation-delay: .7s; }

.megi-dialog-service-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 28px;
    background: rgba(255, 255, 255, .17);
    box-shadow: 0 22px 50px rgba(0, 28, 60, .20), inset 0 1px rgba(255,255,255,.30);
    backdrop-filter: blur(8px);
    animation: megiDialogIconFloat 4.8s ease-in-out infinite;
}

.megi-dialog-service-icon i {
    font-size: 2.7rem;
    color: #fff;
    filter: drop-shadow(0 5px 10px rgba(0, 35, 65, .20));
}

.megi-dialog-visual-caption {
    position: absolute;
    z-index: 2;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.55rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: rgba(5, 38, 68, .18);
    backdrop-filter: blur(8px);
}

.megi-dialog-context-label {
    display: block;
    margin-bottom: .22rem;
    color: rgba(255, 255, 255, .76);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.megi-dialog-visual-title {
    display: block;
    color: #fff;
    font-size: .98rem;
    line-height: 1.35;
}

.megi-dialog-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 3.2rem 3rem 2.3rem;
}

.megi-dialog-kicker-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .65rem;
}

.megi-dialog-kicker-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dialog-secondary);
    box-shadow: 0 0 0 5px var(--dialog-soft);
}

.megi-dialog-kicker {
    margin: 0;
    color: var(--dialog-primary);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.megi-dialog-title {
    margin: 0;
    max-width: 520px;
    color: #102f46;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.megi-dialog-context-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .9rem;
}

.megi-dialog-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .28rem .65rem;
    border: 1px solid color-mix(in srgb, var(--dialog-primary) 18%, transparent);
    border-radius: 999px;
    background: var(--dialog-soft);
    color: color-mix(in srgb, var(--dialog-primary) 82%, #17364d);
    font-size: .72rem;
    font-weight: 750;
}

.megi-dialog-description {
    flex: 1;
    margin: 1.2rem 0 0;
    color: #415565;
    font-size: .98rem;
    line-height: 1.75;
    white-space: pre-line;
}

.megi-dialog-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid #e7eef4;
}

.megi-dialog-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 42px;
    padding: .65rem 1rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--dialog-primary), var(--dialog-secondary));
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px var(--dialog-glow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.megi-dialog-action:hover,
.megi-dialog-action:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px var(--dialog-glow);
    outline: none;
}

.megi-dialog-content.is-active .megi-dialog-copy {
    animation: megiDialogCopyIn .38s ease-out both;
}

.megi-dialog-content.is-active .megi-dialog-visual {
    animation: megiDialogVisualIn .46s cubic-bezier(.2,.78,.22,1) both;
}

@keyframes megiDialogOrbit {
    to { transform: rotate(360deg); }
}

@keyframes megiDialogFlow {
    to { stroke-dashoffset: -40; }
}

@keyframes megiDialogNodePulse {
    0%, 100% { transform: scale(.82); opacity: .70; }
    50% { transform: scale(1.12); opacity: 1; }
}

@keyframes megiDialogIconFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes megiDialogCopyIn {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes megiDialogVisualIn {
    from { opacity: .6; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 760px) {
    body .megi-service-dialog {
        width: calc(100vw - 1rem) !important;
        max-width: 720px !important;
        margin: 0 !important;
    }

    body .megi-service-dialog .ui-dialog-content {
        max-height: calc(100vh - 2rem);
        overflow-y: auto !important;
    }

    .megi-dialog-layout {
        grid-template-columns: 1fr;
    }

    .megi-dialog-visual {
        min-height: 210px;
        padding: 1.2rem 1rem 4.6rem;
    }

    .megi-dialog-flow-svg {
        width: 310px;
        transform: translate(-50%, -57%);
    }

    .megi-dialog-service-icon {
        width: 82px;
        height: 82px;
        border-radius: 22px;
    }

    .megi-dialog-service-icon i {
        font-size: 2.15rem;
    }

    .megi-dialog-visual-caption {
        left: 1rem;
        right: 1rem;
        bottom: .8rem;
        padding: .65rem .8rem;
    }

    .megi-dialog-copy {
        padding: 1.55rem 1.25rem 1.25rem;
    }

    .megi-dialog-description {
        font-size: .94rem;
        line-height: 1.62;
    }

    .megi-dialog-actions {
        margin-top: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .megi-dialog-orbit,
    .megi-dialog-flow-path,
    .megi-dialog-flow-nodes circle,
    .megi-dialog-service-icon,
    .megi-dialog-content.is-active .megi-dialog-copy,
    .megi-dialog-content.is-active .megi-dialog-visual {
        animation: none !important;
    }
}