/* WEB PANEL PROXY public CSS */
:root {
            --bg: #030914;
            --bg-2: #06111f;

            --panel: rgba(5, 15, 29, .76);
            --panel-2: rgba(7, 19, 35, .88);

            --border: rgba(94, 177, 255, .16);
            --border-light: rgba(255,255,255,.08);

            --text: #f5f8fc;
            --text-2: #b7c3d2;
            --text-3: #718095;

            --blue: #25b9ff;
            --blue-2: #38bdf8;

            --red: #ff3f3f;
            --red-2: #ef4444;

            --green: #24d39a;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            min-height: 100%;
            background: var(--bg);
        }

        body {
            min-height: 100vh;

            color: var(--text);

            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Helvetica,
                Arial,
                sans-serif;

            background:
                radial-gradient(
                    ellipse 55% 45% at 50% 15%,
                    rgba(0, 103, 173, .12),
                    transparent 70%
                ),
                radial-gradient(
                    ellipse 35% 35% at 90% 80%,
                    rgba(0, 84, 150, .07),
                    transparent 70%
                ),
                linear-gradient(
                    180deg,
                    #020711 0%,
                    #04101d 55%,
                    #020812 100%
                );

            overflow-x: hidden;
        }


        /* =========================================================
           TECHNOLOGY BACKGROUND
        ========================================================= */

        body::before {
            content: "";

            position: fixed;
            inset: 76px 0 70px;

            pointer-events: none;

            opacity: .42;

            background-image:
                linear-gradient(
                    rgba(45, 157, 225, .055) 1px,
                    transparent 1px
                ),
                linear-gradient(
                    90deg,
                    rgba(45, 157, 225, .055) 1px,
                    transparent 1px
                );

            background-size:
                72px 72px,
                72px 72px;

            mask-image:
                linear-gradient(
                    to bottom,
                    transparent,
                    black 15%,
                    black 80%,
                    transparent
                );

            -webkit-mask-image:
                linear-gradient(
                    to bottom,
                    transparent,
                    black 15%,
                    black 80%,
                    transparent
                );

            z-index: 0;
        }


        body::after {
            content: "";

            position: fixed;

            width: 900px;
            height: 900px;

            left: 50%;
            top: 50%;

            transform: translate(-50%, -50%);

            pointer-events: none;

            background:
                repeating-radial-gradient(
                    circle,
                    rgba(38, 174, 255, .045) 0,
                    rgba(38, 174, 255, .045) 1px,
                    transparent 1px,
                    transparent 80px
                );

            opacity: .5;

            z-index: 0;
        }


        /* =========================================================
           HEADER
        ========================================================= */

        header {
            position: relative;
            z-index: 10;

            height: 76px;

            border-bottom: 1px solid rgba(115, 190, 255, .12);

            background:
                rgba(2, 7, 17, .78);

            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .header-inner {
            width: min(1450px, calc(100% - 72px));
            height: 100%;

            margin: auto;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }


        /* ---------- BRAND ---------- */

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;

            color: white;
            text-decoration: none;
        }

        .brand-logo {
            width: 36px;
            height: 36px;

            filter:
                drop-shadow(0 0 12px rgba(56,189,248,.18));
        }

        .brand-name {
            font-size: 21px;
            font-weight: 700;

            letter-spacing: -.6px;
        }

        .brand-name span {
            color: var(--blue);
            font-weight: 400;
        }


        /* ---------- NAV ---------- */

        nav {
            display: flex;
            align-items: center;
            gap: 42px;
        }

        nav a {
            color: #aeb9c8;

            font-size: 12px;
            font-weight: 500;

            text-decoration: none;

            letter-spacing: .35px;

            transition:
                color .2s ease;
        }

        nav a:hover {
            color: white;
        }


        /* ---------- SYSTEM ---------- */

        .system-status {
            height: 34px;

            padding-left: 28px;

            border-left: 1px solid rgba(255,255,255,.12);

            display: flex;
            align-items: center;
            gap: 11px;

            color: #b7c2d0;

            font-size: 12px;
        }

        .system-dot {
            width: 8px;
            height: 8px;

            border-radius: 50%;

            background: var(--green);

            box-shadow:
                0 0 0 5px rgba(36,211,154,.08),
                0 0 15px rgba(36,211,154,.4);
        }


        /* =========================================================
           MAIN
        ========================================================= */

        main {
            position: relative;
            z-index: 2;

            width: min(1160px, calc(100% - 48px));

            min-height: calc(100vh - 146px);

            margin: auto;

            padding: 75px 0 85px;

            display: grid;

            grid-template-columns:
                minmax(0, 1.45fr)
                minmax(340px, .75fr);

            gap: 54px;

            align-items: center;
        }


        /* =========================================================
           LEFT SIDE
        ========================================================= */

        .hero {
            text-align: center;
        }


        /* ---------- SECURITY ICON ---------- */

        .security-icon {
            position: relative;

            width: 108px;
            height: 108px;

            margin: 0 auto 30px;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .security-icon::before,
        .security-icon::after {
            content: "";

            position: absolute;

            inset: 0;

            border-radius: 50%;

            border: 1px solid rgba(255, 63, 63, .23);

            animation:
                pulse 3s ease-in-out infinite;
        }

        .security-icon::after {
            inset: 12px;

            border-color: rgba(255, 63, 63, .18);

            animation-delay: 1s;
        }

        .shield {
            position: relative;
            z-index: 2;

            width: 70px;
            height: 70px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            color: var(--red);

            background:
                radial-gradient(
                    circle,
                    rgba(255,63,63,.13),
                    rgba(255,63,63,.02) 65%
                );

            box-shadow:
                0 0 45px rgba(255, 48, 48, .10);
        }

        .shield svg {
            width: 43px;
            height: 43px;
        }

        @keyframes pulse {

            0%, 100% {
                transform: scale(1);
                opacity: .65;
            }

            50% {
                transform: scale(1.08);
                opacity: .2;
            }

        }


        /* ---------- HERO TEXT ---------- */

        .eyebrow {
            color: #aebbd0;

            font-size: 14px;
            font-weight: 500;

            letter-spacing: 2.5px;

            margin-bottom: 17px;
        }

        h1 {
            font-size: clamp(42px, 5vw, 64px);

            line-height: 1.03;

            letter-spacing: -2.7px;

            font-weight: 750;

            margin-bottom: 23px;
        }

        .red-line {
            width: 30px;
            height: 3px;

            margin: 0 auto 23px;

            background: var(--red);

            box-shadow:
                0 0 15px rgba(255,63,63,.45);
        }

        .hero-description {
            max-width: 650px;

            margin: auto;

            color: var(--text-2);

            font-size: 17px;

            line-height: 1.7;
        }


        /* =========================================================
           SECURITY PIPELINE
        ========================================================= */

        .pipeline {
            margin-top: 39px;

            padding: 24px 30px;

            border:
                1px solid var(--border);

            border-radius: 13px;

            background:
                linear-gradient(
                    135deg,
                    rgba(5, 20, 36, .85),
                    rgba(3, 13, 25, .7)
                );

            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.025),
                0 25px 70px rgba(0,0,0,.18);
        }

        .pipeline-track {
            display: grid;

            grid-template-columns:
                1fr
                50px
                1fr
                50px
                1fr;

            align-items: center;
        }

        .stage {
            text-align: center;
        }

        .stage-icon {
            width: 50px;
            height: 50px;

            margin: auto auto 10px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            border: 1px solid rgba(0,175,255,.75);

            color: var(--blue);

            background: rgba(0, 128, 200, .06);

            box-shadow:
                0 0 20px rgba(0,165,255,.06);
        }

        .stage-icon svg {
            width: 23px;
            height: 23px;
        }

        .stage:last-child .stage-icon {
            border-color: rgba(255,63,63,.85);
            color: var(--red);

            background: rgba(255,63,63,.05);
        }

        .stage-title {
            color: var(--blue);

            font-size: 12px;
            font-weight: 600;

            letter-spacing: .7px;

            margin-bottom: 5px;
        }

        .stage:last-child .stage-title {
            color: var(--red);
        }

        .stage-description {
            color: var(--text-3);

            font-size: 11px;
        }

        .connector {
            height: 1px;

            position: relative;

            background:
                linear-gradient(
                    90deg,
                    rgba(37,185,255,.65),
                    rgba(37,185,255,.15)
                );
        }

        .connector::after {
            content: "";

            position: absolute;

            right: 0;
            top: -3px;

            width: 6px;
            height: 6px;

            border-top: 1px solid var(--blue);
            border-right: 1px solid var(--blue);

            transform: rotate(45deg);
        }

        .connector.denied {
            background:
                linear-gradient(
                    90deg,
                    rgba(37,185,255,.25),
                    rgba(255,63,63,.8)
                );
        }

        .connector.denied::after {
            border-color: var(--red);
        }


        /* =========================================================
           SUPPORT PANEL
        ========================================================= */

        .support {
            margin-top: 18px;

            padding: 20px 24px;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;

            border:
                1px solid var(--border);

            border-radius: 12px;

            background:
                rgba(5,17,31,.68);
        }

        .support-info {
            display: flex;
            align-items: center;
            gap: 15px;

            text-align: left;
        }

        .support-icon {
            width: 42px;
            height: 42px;

            flex: 0 0 auto;

            display: flex;
            align-items: center;
            justify-content: center;

            border:
                1px solid rgba(37,185,255,.65);

            border-radius: 50%;

            color: var(--blue);
        }

        .support-title {
            margin-bottom: 4px;

            color: white;

            font-size: 13px;
            font-weight: 600;
        }

        .support-text {
            color: var(--text-3);

            font-size: 11px;
            line-height: 1.5;
        }

        .retry {
            flex: 0 0 auto;

            min-height: 43px;

            padding: 0 20px;

            display: inline-flex;
            align-items: center;
            gap: 10px;

            border:
                1px solid rgba(37,185,255,.7);

            border-radius: 8px;

            background:
                rgba(0,130,200,.035);

            color: var(--blue);

            font-size: 11px;
            font-weight: 650;

            letter-spacing: .4px;

            cursor: pointer;

            transition:
                background .2s ease,
                box-shadow .2s ease,
                transform .2s ease;
        }

        .retry:hover {
            background: rgba(0,145,220,.10);

            box-shadow:
                0 0 25px rgba(37,185,255,.08);

            transform: translateY(-1px);
        }


        /* =========================================================
           EVENT CARD
        ========================================================= */

        .event-card {
            border:
                1px solid rgba(76, 160, 224, .2);

            border-radius: 14px;

            background:
                linear-gradient(
                    145deg,
                    rgba(7, 20, 36, .91),
                    rgba(3, 12, 23, .85)
                );

            overflow: hidden;

            box-shadow:
                0 35px 90px rgba(0,0,0,.32),
                inset 0 1px 0 rgba(255,255,255,.025);
        }

        .event-header {
            position: relative;

            padding: 28px 31px;

            border-bottom:
                1px solid var(--border-light);
        }

        .event-label {
            color: #aebbd0;

            font-size: 11px;
            font-weight: 600;

            letter-spacing: .7px;

            margin-bottom: 12px;
        }

        .event-code {
            color: var(--red);

            font-family:
                ui-monospace,
                SFMono-Regular,
                Menlo,
                Monaco,
                Consolas,
                monospace;

            font-size: 39px;
            font-weight: 700;

            line-height: 1;

            margin-bottom: 7px;
        }

        .event-name {
            color: var(--red);

            font-family:
                ui-monospace,
                SFMono-Regular,
                Menlo,
                Monaco,
                Consolas,
                monospace;

            font-size: 15px;
        }

        .event-globe {
            position: absolute;

            right: 28px;
            top: 25px;

            width: 80px;
            height: 80px;

            opacity: .27;
        }


        /* ---------- EVENT ROWS ---------- */

        .event-row {
            min-height: 82px;

            padding: 17px 31px;

            display: flex;
            align-items: center;

            gap: 16px;

            border-bottom:
                1px solid rgba(255,255,255,.055);
        }

        .event-row:last-child {
            border-bottom: none;
        }

        .event-row-icon {
            width: 25px;
            height: 25px;

            flex: 0 0 auto;

            color: var(--blue);
        }

        .event-row-content {
            flex: 1;

            min-width: 0;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .event-row-label {
            color: #8290a3;

            font-size: 10px;
            font-weight: 600;

            letter-spacing: .35px;

            text-transform: uppercase;
        }

        .event-row-value {
            color: #d4dce7;

            font-size: 12px;

            text-align: right;
        }

        .event-row-value.blue {
            color: var(--blue);

            font-family:
                ui-monospace,
                SFMono-Regular,
                Menlo,
                Monaco,
                Consolas,
                monospace;

            font-size: 13px;
            font-weight: 600;
        }

        .event-row-value.red {
            color: var(--red);
        }


        /* =========================================================
           FOOTER
        ========================================================= */

        footer {
            position: relative;
            z-index: 5;

            min-height: 70px;

            border-top:
                1px solid rgba(115,190,255,.10);

            background:
                rgba(2,7,17,.8);
        }

        .footer-inner {
            width: min(1450px, calc(100% - 72px));

            min-height: 70px;

            margin: auto;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 10px;

            color: #dce4ee;

            font-size: 13px;
            font-weight: 600;
        }

        .footer-brand svg {
            width: 27px;
            height: 27px;
        }

        .footer-links {
            display: flex;
            gap: 30px;
        }

        .footer-links a {
            color: #718095;

            font-size: 10px;

            text-decoration: none;

            transition: color .2s;
        }

        .footer-links a:hover {
            color: white;
        }

        .footer-meta {
            color: #68778b;

            font-size: 10px;
        }

        .footer-meta strong {
            color: var(--blue);

            font-family:
                ui-monospace,
                SFMono-Regular,
                Menlo,
                Monaco,
                Consolas,
                monospace;
        }


        /* =========================================================
           MOBILE
        ========================================================= */

        @media (max-width: 1050px) {

            nav {
                gap: 22px;
            }

            main {
                grid-template-columns: 1fr;

                max-width: 760px;

                gap: 45px;
            }

            .event-card {
                max-width: 620px;

                width: 100%;

                margin: auto;
            }

        }


        @media (max-width: 760px) {

            header {
                height: 66px;
            }

            .header-inner {
                width: calc(100% - 32px);
            }

            nav,
            .system-status {
                display: none;
            }

            .brand-name {
                font-size: 18px;
            }

            main {
                width: calc(100% - 30px);

                min-height: auto;

                padding: 52px 0 65px;
            }

            h1 {
                font-size: 42px;

                letter-spacing: -1.8px;
            }

            .hero-description {
                font-size: 15px;
            }

            .pipeline {
                padding: 20px 12px;
            }

            .pipeline-track {
                grid-template-columns:
                    1fr
                    28px
                    1fr
                    28px
                    1fr;
            }

            .stage-title {
                font-size: 9px;
            }

            .stage-description {
                font-size: 9px;
            }

            .stage-icon {
                width: 43px;
                height: 43px;
            }

            .support {
                flex-direction: column;

                align-items: stretch;
            }

            .retry {
                width: 100%;
            }

            .event-header {
                padding: 24px;
            }

            .event-row {
                padding: 17px 20px;
            }

            .event-row-content {
                flex-direction: column;

                align-items: flex-start;

                gap: 4px;
            }

            .event-row-value {
                text-align: left;
            }

            .footer-inner {
                width: calc(100% - 30px);

                padding: 20px 0;

                flex-direction: column;

                gap: 15px;
            }

            .footer-links {
                gap: 18px;

                flex-wrap: wrap;

                justify-content: center;
            }

            .footer-meta {
                text-align: center;
            }

        }


        @media (max-width: 430px) {

            .security-icon {
                width: 90px;
                height: 90px;
            }

            .shield {
                width: 60px;
                height: 60px;
            }

            .shield svg {
                width: 36px;
                height: 36px;
            }

            h1 {
                font-size: 37px;
            }

            .eyebrow {
                font-size: 11px;
                letter-spacing: 2px;
            }

            .pipeline-track {
                grid-template-columns:
                    1fr
                    15px
                    1fr
                    15px
                    1fr;
            }

            .stage-icon {
                width: 38px;
                height: 38px;
            }

            .stage-icon svg {
                width: 18px;
                height: 18px;
            }

            .stage-title {
                font-size: 8px;
                letter-spacing: .3px;
            }

        }


        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important;
            }

        }