/* =============================================
   LINKO INTERACTIVE NGFW DEMO
   Isolated from global navigation
============================================= */

.linko-fw-demo{
    margin-top:30px;
    padding:24px;
    border:1px solid rgba(85,174,235,.25);
    border-radius:18px;
    background:
        radial-gradient(circle at 50% 35%,rgba(24,112,165,.16),transparent 45%),
        #041722;
    color:#fff;
    overflow:hidden;
}

.linko-fw-demo *{
    box-sizing:border-box;
}

.linko-fw-demo-header{
    text-align:center;
    margin-bottom:24px;
}

.linko-fw-demo-header small{
    display:block;
    color:#55b9f3;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
    margin-bottom:7px;
}

.linko-fw-demo-header h4{
    margin:0 0 7px;
    font-size:24px;
}

.linko-fw-demo-header p{
    margin:0;
    color:#91aaba;
    font-size:13px;
}

/* Scenario buttons */

.linko-fw-scenarios{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:28px;
}

.linko-fw-scenario{
    appearance:none;
    border:1px solid rgba(255,255,255,.18);
    background:#082538;
    color:#b9cfdd;
    border-radius:20px;
    padding:9px 14px;
    font:inherit;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
    transition:.2s ease;
}

.linko-fw-scenario:hover,
.linko-fw-scenario.active{
    border-color:#42b6ff;
    color:#fff;
    background:#0a3854;
}

/* Flow */

.linko-fw-network{
    max-width:720px;
    margin:auto;
}

.linko-fw-node{
    position:relative;
    padding:17px;
    border:1px solid rgba(89,183,239,.3);
    border-radius:12px;
    background:#071e2d;
    text-align:center;
    transition:.25s ease;
}

.linko-fw-node-label{
    display:block;
    color:#70c6fa;
    font-size:9px;
    letter-spacing:.15em;
    font-weight:800;
    margin-bottom:5px;
}

.linko-fw-node strong{
    display:block;
    font-size:15px;
}

.linko-fw-node small{
    display:block;
    margin-top:5px;
    color:#7793a5;
}

/* Traffic wire */

.linko-fw-wire{
    position:relative;
    width:2px;
    height:45px;
    margin:auto;
    background:#174d69;
    overflow:visible;
}

.linko-fw-packet{
    position:absolute;
    width:9px;
    height:9px;
    left:50%;
    top:-5px;
    transform:translateX(-50%);
    border-radius:50%;
    background:#54c5ff;
    box-shadow:0 0 14px #54c5ff;
    animation:linkoPacket 1.35s linear infinite;
}

@keyframes linkoPacket{
    0%{top:-5px;opacity:0}
    15%{opacity:1}
    85%{opacity:1}
    100%{top:42px;opacity:0}
}

/* NGFW */

.linko-fw-firewall{
    border-color:#238dcc;
    background:linear-gradient(180deg,#082b41,#061c2b);
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.linko-fw-firewall-title{
    margin-bottom:15px;
}

.linko-fw-firewall-title small{
    color:#64c5ff;
    letter-spacing:.13em;
    font-size:9px;
}

.linko-fw-firewall-title strong{
    margin-top:4px;
    font-size:17px;
}

/* Inspection engines */

.linko-fw-engines{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
}

.linko-fw-engine{
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    padding:11px 5px;
    background:#051823;
    cursor:pointer;
    transition:.2s ease;
}

.linko-fw-engine small{
    margin:0 0 3px;
    font-size:7px;
    color:#64879c;
}

.linko-fw-engine strong{
    font-size:10px;
}

.linko-fw-engine.active{
    border-color:#58c7ff;
    background:#0a3851;
    box-shadow:0 0 18px rgba(67,190,255,.18);
}

/* Security engines */

.linko-fw-security-engines{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    margin-top:12px;
}

.linko-fw-security-engines span{
    border:1px solid rgba(83,181,235,.22);
    border-radius:12px;
    padding:5px 9px;
    color:#7bbbe0;
    font-size:8px;
    font-weight:800;
}

/* Decision */

.linko-fw-decision{
    margin:18px auto 0;
    max-width:420px;
    padding:15px;
    border-radius:10px;
    text-align:center;
    transition:.25s ease;
}

.linko-fw-decision strong{
    display:block;
    font-size:18px;
    letter-spacing:.08em;
}

.linko-fw-decision span{
    display:block;
    margin-top:4px;
    font-size:10px;
}

.linko-fw-decision.allow{
    background:rgba(32,178,112,.12);
    border:1px solid rgba(54,214,139,.4);
    color:#65e2a4;
}

.linko-fw-decision.block{
    background:rgba(219,62,75,.12);
    border:1px solid rgba(240,82,94,.45);
    color:#ff7782;
}

/* Destination */

.linko-fw-destinations{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.linko-fw-destinations div{
    border:1px solid rgba(255,255,255,.1);
    background:#061a27;
    padding:13px 6px;
    border-radius:8px;
    text-align:center;
}

.linko-fw-destinations strong{
    display:block;
    font-size:10px;
}

.linko-fw-destinations small{
    display:block;
    color:#66879a;
    margin-top:4px;
    font-size:8px;
}

/* Explanation */

.linko-fw-explanation{
    margin-top:22px;
    padding:16px;
    border-left:3px solid #2d8cff;
    background:rgba(45,140,255,.07);
    border-radius:0 8px 8px 0;
}

.linko-fw-explanation strong{
    display:block;
    color:#70c7ff;
    font-size:12px;
    margin-bottom:5px;
}

.linko-fw-explanation p{
    margin:0;
    color:#9ab1bf;
    font-size:11px;
    line-height:1.6;
}

/* Block malicious packet */

.linko-fw-demo.is-blocked .linko-fw-wire.after-firewall .linko-fw-packet{
    display:none;
}

.linko-fw-demo.is-blocked .linko-fw-destinations{
    opacity:.4;
}

/* Mobile */

@media(max-width:600px){

    .linko-fw-demo{
        padding:18px 12px;
    }

    .linko-fw-demo-header h4{
        font-size:20px;
    }

    .linko-fw-scenarios{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .linko-fw-scenario{
        width:100%;
        padding:10px 6px;
    }

    .linko-fw-engines{
        grid-template-columns:1fr 1fr;
    }

    .linko-fw-destinations{
        grid-template-columns:1fr 1fr 1fr;
    }
}

@media(prefers-reduced-motion:reduce){
    .linko-fw-packet{
        animation:none;
    }
}

/* =====================================================
   LINKO NGFW LIVE INSPECTION ENHANCEMENTS
===================================================== */

.linko-fw-console{
    max-width:720px;
    margin:22px auto;
    border:1px solid rgba(80,181,239,.24);
    border-radius:10px;
    overflow:hidden;
    background:#020f17;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,.3),
        0 12px 30px rgba(0,0,0,.16);
}

.linko-fw-console-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:10px 13px;
    background:#071d2a;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#7897aa;
    font-size:8px;
    font-weight:800;
    letter-spacing:.13em;
}

.linko-fw-console-status{
    padding:4px 8px;
    border-radius:10px;
    background:#102b3a;
    color:#8bb2c7;
}

.linko-fw-console-status.inspecting{
    color:#65c8ff;
    background:rgba(50,166,231,.12);
}

.linko-fw-console-status.allowed{
    color:#61e4a4;
    background:rgba(41,195,124,.12);
}

.linko-fw-console-status.blocked{
    color:#ff7782;
    background:rgba(230,70,84,.13);
}

.linko-fw-console-lines{
    height:145px;
    overflow-y:auto;
    padding:12px 14px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
}

.linko-fw-log-line{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:0 0 7px;
    color:#7893a3;
    font-size:9px;
    line-height:1.5;
    animation:linkoLogAppear .25s ease;
}

.linko-fw-log-indicator{
    flex:0 0 5px;
    width:5px;
    height:5px;
    margin-top:4px;
    border-radius:50%;
    background:#4788ac;
    box-shadow:0 0 7px rgba(71,136,172,.6);
}

.linko-fw-log-line.processing{
    color:#82c9f2;
}

.linko-fw-log-line.processing
.linko-fw-log-indicator{
    background:#58c6ff;
    box-shadow:0 0 9px #58c6ff;
}

.linko-fw-log-line.allowed{
    color:#61dda0;
}

.linko-fw-log-line.allowed
.linko-fw-log-indicator{
    background:#42dc92;
    box-shadow:0 0 9px #42dc92;
}

.linko-fw-log-line.blocked{
    color:#ff7580;
}

.linko-fw-log-line.blocked
.linko-fw-log-indicator{
    background:#ff5362;
    box-shadow:0 0 10px #ff5362;
}

@keyframes linkoLogAppear{
    from{
        opacity:0;
        transform:translateY(4px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* Inspection stages */

.linko-fw-engine.active{
    transform:translateY(-2px);
    border-color:#61caff;
    background:#0b405e;
    box-shadow:
        0 0 0 1px rgba(92,199,255,.12),
        0 0 22px rgba(67,190,255,.28);
}

.linko-fw-engine.passed{
    border-color:rgba(69,216,145,.5);
    background:rgba(32,142,93,.13);
}

.linko-fw-engine.passed strong{
    color:#64dca3;
}

.linko-fw-engine.blocked-stage{
    border-color:#ef5362;
    background:rgba(213,54,69,.16);
    box-shadow:0 0 22px rgba(239,83,98,.28);
}

.linko-fw-engine.blocked-stage strong{
    color:#ff7883;
}


/* Firewall decision glow */

.linko-fw-firewall.firewall-allow{
    border-color:rgba(66,220,146,.6);
    box-shadow:
        0 15px 35px rgba(0,0,0,.25),
        0 0 35px rgba(45,210,135,.10);
}

.linko-fw-firewall.firewall-block{
    border-color:rgba(239,83,98,.7);
    box-shadow:
        0 15px 35px rgba(0,0,0,.25),
        0 0 38px rgba(239,83,98,.14);
}


/* Incoming packet while inspecting */

.linko-fw-demo.inspection-running
.linko-fw-wire:not(.after-firewall)
.linko-fw-packet{
    animation-duration:.8s;
}


/* ALLOW traffic */

.linko-fw-demo.is-allowed
.linko-fw-wire.after-firewall{
    background:linear-gradient(
        #1b6d50,
        #3edc91
    );
}

.linko-fw-demo.is-allowed
.linko-fw-wire.after-firewall
.linko-fw-packet{
    background:#4ee39a;
    box-shadow:0 0 15px #4ee39a;
}


/* BLOCK traffic */

.linko-fw-demo.is-blocked
.linko-fw-wire.after-firewall{
    background:#3d2027;
}

.linko-fw-demo.is-blocked
.linko-fw-wire.after-firewall:before{
    content:"×";
    position:absolute;
    left:50%;
    top:8px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#a92836;
    border:1px solid #ff6674;
    color:#fff;
    font-size:15px;
    font-weight:900;
    box-shadow:0 0 15px rgba(255,80,95,.45);
    z-index:3;
}

.linko-fw-demo.is-blocked
.linko-fw-destinations{
    opacity:.32;
    filter:saturate(.45);
}


/* Scenario button running state */

.linko-fw-scenario:disabled{
    cursor:wait;
    opacity:.65;
}


/* Mobile */

@media(max-width:600px){

    .linko-fw-console{
        margin-top:18px;
    }

    .linko-fw-console-lines{
        height:160px;
    }

    .linko-fw-log-line{
        font-size:8px;
    }

    .linko-fw-console-head{
        font-size:7px;
    }
}


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

    .linko-fw-log-line{
        animation:none;
    }

    .linko-fw-engine{
        transition:none;
    }
}
/* =====================================================
   LINKO NGFW DEMO V3
   Session telemetry + enhanced packet visualization
===================================================== */

.linko-fw-session-panel{
    max-width:760px;
    margin:18px auto 22px;
    border:1px solid rgba(86,178,232,.22);
    border-radius:12px;
    overflow:hidden;
    background:linear-gradient(180deg,#061d2b,#03131d);
    box-shadow:0 16px 35px rgba(0,0,0,.16);
}

.linko-fw-session-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,.07);
    color:#7fa5ba;
    font-size:8px;
    font-weight:800;
    letter-spacing:.14em;
}

.linko-fw-session-live{
    display:flex;
    align-items:center;
    gap:6px;
    color:#65c8ff;
}

.linko-fw-session-live:before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:#58c6ff;
    box-shadow:0 0 9px #58c6ff;
    animation:linkoLivePulse 1.3s infinite;
}

@keyframes linkoLivePulse{
    50%{
        opacity:.35;
        transform:scale(.75);
    }
}

.linko-fw-session-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.linko-fw-session-item{
    padding:12px 14px;
    border-right:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    min-width:0;
}

.linko-fw-session-item:nth-child(4n){
    border-right:0;
}

.linko-fw-session-item small{
    display:block;
    margin-bottom:5px;
    color:#54778a;
    font-size:7px;
    font-weight:800;
    letter-spacing:.12em;
}

.linko-fw-session-item strong{
    display:block;
    overflow:hidden;
    color:#c6e0ed;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size:9px;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.linko-fw-session-item.application strong{
    color:#63c9ff;
}

.linko-fw-session-item.policy strong{
    color:#b3d3e4;
}


/* Enhanced packet */

.linko-fw-packet{
    width:10px !important;
    height:10px !important;
    border:2px solid rgba(255,255,255,.55);
    box-shadow:
        0 0 8px currentColor,
        0 0 16px currentColor;
}

.linko-fw-demo.inspection-running
.linko-fw-wire:not(.after-firewall)
.linko-fw-packet{
    box-shadow:
        0 0 8px #58c6ff,
        0 0 18px #58c6ff;
}


/* Traffic direction marker */

.linko-fw-wire{
    position:relative;
}

.linko-fw-wire:not(.after-firewall):after{
    content:"▼";
    position:absolute;
    left:50%;
    bottom:2px;
    transform:translateX(-50%);
    color:#4ca9d9;
    font-size:7px;
}


/* Firewall scanning effect */

.linko-fw-firewall{
    position:relative;
    overflow:hidden;
}

.linko-fw-firewall:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-4px;
    height:2px;
    opacity:0;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        transparent,
        #5acaff,
        transparent
    );
    box-shadow:0 0 12px #5acaff;
}

.linko-fw-demo.inspection-running
.linko-fw-firewall:after{
    opacity:1;
    animation:linkoFirewallScan 1.2s linear infinite;
}

@keyframes linkoFirewallScan{
    from{
        top:4px;
    }

    to{
        top:calc(100% - 4px);
    }
}


/* ALLOW indicator */

.linko-fw-demo.is-allowed
.linko-fw-session-live{
    color:#5de19e;
}

.linko-fw-demo.is-allowed
.linko-fw-session-live:before{
    background:#43dc92;
    box-shadow:0 0 9px #43dc92;
}


/* BLOCK indicator */

.linko-fw-demo.is-blocked
.linko-fw-session-live{
    color:#ff7480;
}

.linko-fw-demo.is-blocked
.linko-fw-session-live:before{
    background:#ff5362;
    box-shadow:0 0 10px #ff5362;
}


/* Make destination recovery obvious */

.linko-fw-destinations{
    transition:
        opacity .35s ease,
        filter .35s ease,
        transform .35s ease;
}

.linko-fw-demo.is-allowed
.linko-fw-destinations{
    opacity:1;
    filter:none;
}


/* Mobile */

@media(max-width:700px){

    .linko-fw-session-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .linko-fw-session-item:nth-child(4n){
        border-right:1px solid rgba(255,255,255,.06);
    }

    .linko-fw-session-item:nth-child(2n){
        border-right:0;
    }

    .linko-fw-session-item strong{
        font-size:8px;
    }
}

@media(max-width:430px){

    .linko-fw-session-panel{
        border-radius:9px;
    }

    .linko-fw-session-item{
        padding:10px;
    }
}

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

    .linko-fw-session-live:before,
    .linko-fw-demo.inspection-running
    .linko-fw-firewall:after{
        animation:none;
    }
}
/* =====================================================
   LINKO NGFW DEMO V4
   Threat Details / Security Event
===================================================== */

.linko-fw-threat-panel{
    max-width:760px;
    margin:18px auto 22px;
    overflow:hidden;

    border:1px solid rgba(85,178,230,.22);
    border-radius:12px;

    background:
        linear-gradient(180deg,#071d2a,#03131d);

    box-shadow:
        0 16px 38px rgba(0,0,0,.18);
}

.linko-fw-threat-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    padding:11px 14px;

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

.linko-fw-threat-head > span:first-child{
    color:#7799ac;
    font-size:8px;
    font-weight:800;
    letter-spacing:.14em;
}

.linko-fw-verdict{
    padding:5px 9px;

    border-radius:12px;

    background:rgba(71,161,211,.12);

    color:#70c8f5;

    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.linko-fw-threat-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.linko-fw-threat-item{
    min-width:0;

    padding:13px 14px;

    border-right:
        1px solid rgba(255,255,255,.06);

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

.linko-fw-threat-item:nth-child(3n){
    border-right:0;
}

.linko-fw-threat-item small{
    display:block;

    margin-bottom:6px;

    color:#52758a;

    font-size:7px;
    font-weight:800;
    letter-spacing:.12em;
}

.linko-fw-threat-item strong{
    display:block;

    color:#c7e0ed;

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

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

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* Severity */

.linko-fw-severity{
    display:inline-flex !important;
    align-items:center;
    width:auto;

    padding:4px 8px;

    border-radius:10px;
}

.linko-fw-severity:before{
    content:"";

    width:6px;
    height:6px;

    margin-right:6px;

    border-radius:50%;

    background:currentColor;

    box-shadow:0 0 8px currentColor;
}

.linko-fw-severity.informational{
    color:#69c7f5;
    background:rgba(73,174,226,.10);
}

.linko-fw-severity.medium{
    color:#ffc65b;
    background:rgba(226,164,49,.11);
}

.linko-fw-severity.high{
    color:#ff8a5f;
    background:rgba(236,105,57,.12);
}

.linko-fw-severity.critical{
    color:#ff5c6a;
    background:rgba(229,61,76,.14);
}


/* Allowed event */

.linko-fw-threat-panel.allowed{
    border-color:rgba(63,211,139,.27);
}

.linko-fw-threat-panel.allowed
.linko-fw-verdict{
    color:#62dfa1;

    background:
        rgba(47,193,124,.12);
}


/* Blocked event */

.linko-fw-threat-panel.blocked{
    border-color:rgba(239,83,98,.38);
}

.linko-fw-threat-panel.blocked
.linko-fw-verdict{
    color:#ff7580;

    background:
        rgba(226,65,80,.14);
}


/* Detection reason */

.linko-fw-threat-reason{
    padding:13px 14px 15px;
}

.linko-fw-threat-reason small{
    display:block;

    margin-bottom:6px;

    color:#52758a;

    font-size:7px;
    font-weight:800;
    letter-spacing:.12em;
}

.linko-fw-threat-reason p{
    margin:0;

    color:#91adbd;

    font-size:10px;
    line-height:1.6;
}


/* Mobile */

@media(max-width:700px){

    .linko-fw-threat-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .linko-fw-threat-item:nth-child(3n){
        border-right:
            1px solid rgba(255,255,255,.06);
    }

    .linko-fw-threat-item:nth-child(2n){
        border-right:0;
    }
}

@media(max-width:430px){

    .linko-fw-threat-panel{
        border-radius:9px;
    }

    .linko-fw-threat-item{
        padding:11px 10px;
    }

    .linko-fw-threat-item strong{
        font-size:8px;
    }
}


/* =====================================================
   CYBERSECURITY FIXED COPYRIGHT BAR FIX
===================================================== */

#linko-fw-demo ~ .linko-global-copyright,
.linko-global-copyright{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;

    width:100% !important;
    height:auto !important;

    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    z-index:2147483647 !important;

    margin:0 !important;
    padding:8px 15px !important;

    background:#03141f !important;
    color:#8fa5b3 !important;

    font-size:11px !important;
    line-height:1.4 !important;
    text-align:center !important;

    transform:none !important;
    filter:none !important;
    pointer-events:none;
}

@media(max-width:600px){

    .linko-global-copyright{
        padding:7px 10px !important;
        font-size:9px !important;
    }

}

/* =====================================================
   LINKO NGFW DEMO - WIDE COMPACT DESKTOP V2
   Desktop only. Mobile layout remains unchanged.
===================================================== */

@media (min-width: 901px) {

    /* Main interactive console */
    .linko-fw-demo {
        width: min(1100px, calc(100vw - 70px)) !important;
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 26px 32px !important;
    }

    /* Compact title area */
    .linko-fw-demo-header {
        margin-bottom: 14px !important;
    }

    .linko-fw-demo-header h4 {
        margin-top: 4px !important;
        margin-bottom: 5px !important;
        font-size: 28px !important;
    }

    .linko-fw-demo-header p {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    /* Scenario buttons stay in one row */
    .linko-fw-scenarios {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        margin: 12px 0 20px !important;
    }

    .linko-fw-scenario {
        padding: 10px 18px !important;
        white-space: nowrap !important;
    }


    /* =================================================
       MAIN NETWORK FLOW
       SOURCE -> FIREWALL -> DESTINATIONS
    ================================================= */

    .linko-fw-network {
        display: grid !important;

        grid-template-columns:
            minmax(150px, .75fr)
            48px
            minmax(500px, 2.6fr)
            48px
            minmax(170px, .9fr) !important;

        grid-template-rows: auto !important;

        align-items: center !important;
        gap: 0 !important;

        width: 100% !important;
    }


    /* SOURCE */

    .linko-fw-network > .linko-fw-node:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;

        min-height: 105px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        padding: 16px 12px !important;
        margin: 0 !important;
    }


    /* FIRST WIRE */

    .linko-fw-network > .linko-fw-wire:not(.after-firewall) {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 48px !important;
        height: 3px !important;
        min-height: 3px !important;

        margin: 0 !important;
        align-self: center !important;
    }


    /* FIREWALL */

    .linko-fw-firewall {
        grid-column: 3 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-height: 0 !important;

        padding: 18px 20px !important;
        margin: 0 !important;
    }

    .linko-fw-firewall-title {
        margin-bottom: 11px !important;
    }

    .linko-fw-firewall-title strong {
        font-size: 18px !important;
    }


    /* APP-ID / USER-ID / THREATS / POLICY */

    .linko-fw-engines {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;

        margin: 10px 0 8px !important;
    }

    .linko-fw-engine {
        min-height: 58px !important;
        padding: 9px 7px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }


    /* IPS / URL / DNS / SSL / MALWARE */

    .linko-fw-security-engines {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;

        gap: 7px !important;
        margin: 8px 0 !important;
    }

    .linko-fw-security-engines span {
        padding: 5px 10px !important;
    }


    /* ALLOW / BLOCK */

    .linko-fw-decision {
        margin-top: 9px !important;
        padding: 10px 14px !important;
        min-height: 0 !important;
    }

    .linko-fw-decision strong {
        font-size: 19px !important;
    }


    /* SECOND WIRE */

    .linko-fw-network > .after-firewall {
        grid-column: 4 !important;
        grid-row: 1 !important;

        width: 48px !important;
        height: 3px !important;
        min-height: 3px !important;

        margin: 0 !important;
        align-self: center !important;
    }


    /* DESTINATIONS */

    .linko-fw-destinations {
        grid-column: 5 !important;
        grid-row: 1 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;

        width: 100% !important;
        margin: 0 !important;
    }

    .linko-fw-destinations > div {
        min-height: 0 !important;
        padding: 10px 8px !important;
    }


    /* =================================================
       EXPLANATION
    ================================================= */

    .linko-fw-explanation {
        margin-top: 16px !important;
        padding: 13px 18px !important;
    }

    .linko-fw-explanation p {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        line-height: 1.45 !important;
    }

}


/* =====================================================
   FIREWALL CARD + INTERACTIVE DEMO FULL WIDTH
   Desktop only
===================================================== */

@media (min-width: 901px) {

    #firewall-vpn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
    }

    #firewall-vpn .linko-fw-demo {
        width: 100% !important;
        max-width: 1100px !important;
        margin: 28px auto 20px !important;
        box-sizing: border-box !important;
    }

}

/* =====================================================
   LINKO NGFW DEMO - DESKTOP DASHBOARD V3
   Uses available width and reduces vertical scrolling
===================================================== */

@media (min-width: 901px) {

    /* Full-width firewall card */
    #firewall-vpn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* Wider overall dashboard */
    #firewall-vpn .linko-fw-demo {
        width: calc(100vw - 48px) !important;
        max-width: 1480px !important;

        margin: 24px auto 18px !important;
        padding: 22px 28px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        column-gap: 18px !important;
        row-gap: 14px !important;
    }


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

    .linko-fw-demo-header {
        grid-column: 1 / -1 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .linko-fw-demo-header small {
        margin-bottom: 3px !important;
    }

    .linko-fw-demo-header h4 {
        margin: 2px 0 3px !important;
        font-size: 27px !important;
        line-height: 1.1 !important;
    }

    .linko-fw-demo-header p {
        margin: 0 !important;
        font-size: 12px !important;
    }


    /* =============================================
       SCENARIO BUTTONS
    ============================================= */

    .linko-fw-scenarios {
        grid-column: 1 / -1 !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        gap: 10px !important;

        margin: 0 !important;
    }

    .linko-fw-scenario {
        padding: 8px 17px !important;
        white-space: nowrap !important;
    }


    /* =============================================
       MAIN FLOW
       SOURCE -> FIREWALL -> DESTINATIONS
    ============================================= */

    .linko-fw-network {
        grid-column: 1 / -1 !important;

        display: grid !important;

        grid-template-columns:
            minmax(145px, .7fr)
            44px
            minmax(500px, 2.8fr)
            44px
            minmax(160px, .8fr) !important;

        align-items: center !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        gap: 0 !important;
    }


    /* Source */

    .linko-fw-network > .linko-fw-node:first-child {
        grid-column: 1 !important;

        min-height: 92px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 13px 10px !important;
    }


    /* Incoming horizontal wire */

    .linko-fw-network > .linko-fw-wire:not(.after-firewall) {
        grid-column: 2 !important;

        width: 44px !important;
        height: 3px !important;
        min-height: 3px !important;

        margin: 0 !important;
    }


    /* Main firewall */

    .linko-fw-firewall {
        grid-column: 3 !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 14px 18px !important;
    }

    .linko-fw-firewall-title {
        margin-bottom: 8px !important;
    }

    .linko-fw-firewall-title strong {
        font-size: 17px !important;
    }


    /* App-ID / User-ID / Threat / Policy */

    .linko-fw-engines {
        display: grid !important;
        grid-template-columns: repeat(4,1fr) !important;

        gap: 7px !important;
        margin: 7px 0 !important;
    }

    .linko-fw-engine {
        min-height: 50px !important;

        padding: 7px 6px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }


    /* IPS / URL / DNS / SSL / Malware */

    .linko-fw-security-engines {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;

        gap: 6px !important;

        margin: 6px 0 !important;
    }

    .linko-fw-security-engines span {
        padding: 4px 9px !important;
    }


    /* Allow / Block */

    .linko-fw-decision {
        margin-top: 7px !important;
        padding: 8px 12px !important;
    }

    .linko-fw-decision strong {
        font-size: 18px !important;
    }


    /* Outbound horizontal wire */

    .linko-fw-network > .after-firewall {
        grid-column: 4 !important;

        width: 44px !important;
        height: 3px !important;
        min-height: 3px !important;

        margin: 0 !important;
    }


    /* Destination stack */

    .linko-fw-destinations {
        grid-column: 5 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 5px !important;

        margin: 0 !important;
        width: 100% !important;
    }

    .linko-fw-destinations > div {
        padding: 8px 7px !important;
    }


    /* =============================================
       LOWER DASHBOARD
       Telemetry + Security Event side-by-side
    ============================================= */

    .linko-fw-session-panel {
        grid-column: 1 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }

    .linko-fw-threat-panel {
        grid-column: 2 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }


    /* Make telemetry compact */

    .linko-fw-session-grid {
        grid-template-columns: repeat(4,1fr) !important;
    }

    .linko-fw-session-item {
        padding: 8px 10px !important;
    }

    .linko-fw-session-item small {
        margin-bottom: 3px !important;
    }


    /* Make threat panel compact */

    .linko-fw-threat-grid {
        grid-template-columns: repeat(3,1fr) !important;
    }

    .linko-fw-threat-item {
        padding: 8px 10px !important;
    }

    .linko-fw-threat-item small {
        margin-bottom: 3px !important;
    }

    .linko-fw-threat-reason {
        padding: 8px 10px 9px !important;
    }

    .linko-fw-threat-reason p {
        line-height: 1.35 !important;
    }


    /* =============================================
       LIVE INSPECTION
    ============================================= */

    .linko-fw-console {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
    }

    .linko-fw-console-lines {
        height: 82px !important;

        display: grid !important;
        grid-template-columns: repeat(3,1fr) !important;

        column-gap: 18px !important;
        row-gap: 3px !important;

        padding: 9px 14px !important;
    }

    .linko-fw-log-line {
        margin: 0 !important;
        font-size: 8px !important;
    }


    /* =============================================
       EXPLANATION
    ============================================= */

    .linko-fw-explanation {
        grid-column: 1 / -1 !important;

        margin: 0 !important;
        padding: 8px 14px !important;
    }

    .linko-fw-explanation strong,
    .linko-fw-explanation p {
        display: inline !important;
    }

    .linko-fw-explanation strong {
        margin-right: 7px !important;
    }

    .linko-fw-explanation p {
        line-height: 1.35 !important;
    }

}


/* =====================================================
   LINKO NGFW DEMO - COMPACT MOBILE V4
===================================================== */

@media (max-width: 900px) {

    .linko-fw-demo{
        padding:16px 12px !important;
        margin-top:20px !important;
    }

    .linko-fw-demo-header{
        margin-bottom:12px !important;
    }

    .linko-fw-demo-header h4{
        font-size:19px !important;
        margin:2px 0 4px !important;
        line-height:1.15 !important;
    }

    .linko-fw-demo-header p{
        font-size:11px !important;
        line-height:1.4 !important;
        margin:0 !important;
    }

    /* 2 x 2 scenario buttons */
    .linko-fw-scenarios{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:7px !important;
        margin:12px 0 15px !important;
    }

    .linko-fw-scenario{
        width:100% !important;
        padding:9px 6px !important;
        font-size:10px !important;
    }

    /* Compact source */
    .linko-fw-node{
        padding:11px !important;
    }

    .linko-fw-node-label{
        margin-bottom:3px !important;
    }

    /* Shorten vertical wires */
    .linko-fw-wire{
        height:27px !important;
        min-height:27px !important;
    }

    @keyframes linkoPacket{
        0%{top:-4px;opacity:0}
        15%{opacity:1}
        85%{opacity:1}
        100%{top:24px;opacity:0}
    }

    /* Compact firewall */
    .linko-fw-firewall{
        padding:13px 11px !important;
    }

    .linko-fw-firewall-title{
        margin-bottom:9px !important;
    }

    .linko-fw-firewall-title strong{
        font-size:14px !important;
    }

    /* APP-ID etc 2 x 2 */
    .linko-fw-engines{
        grid-template-columns:1fr 1fr !important;
        gap:6px !important;
        margin:7px 0 !important;
    }

    .linko-fw-engine{
        padding:8px 5px !important;
        min-height:46px !important;
    }

    .linko-fw-security-engines{
        gap:4px !important;
        margin-top:7px !important;
    }

    .linko-fw-security-engines span{
        padding:4px 7px !important;
        font-size:7px !important;
    }

    .linko-fw-decision{
        margin-top:8px !important;
        padding:9px !important;
    }

    .linko-fw-decision strong{
        font-size:16px !important;
    }

    /* Destinations remain one horizontal row */
    .linko-fw-destinations{
        grid-template-columns:repeat(3,1fr) !important;
        gap:5px !important;
    }

    .linko-fw-destinations div{
        padding:8px 3px !important;
    }

    .linko-fw-destinations strong{
        font-size:8px !important;
    }

    .linko-fw-destinations small{
        font-size:7px !important;
    }

    /* Explanation compressed */
    .linko-fw-explanation{
        margin-top:12px !important;
        padding:10px 11px !important;
    }

    .linko-fw-explanation strong{
        font-size:10px !important;
    }

    .linko-fw-explanation p{
        font-size:9px !important;
        line-height:1.45 !important;
    }

    /* Telemetry shows only first 4 useful items initially */
    .linko-fw-session-panel{
        margin:12px 0 !important;
    }

    .linko-fw-session-grid{
        grid-template-columns:1fr 1fr !important;
    }

    .linko-fw-session-item{
        padding:8px !important;
    }

    .linko-fw-session-item:nth-child(n+5){
        display:none;
    }

    /* Security event and inspection collapsed on mobile */
    .linko-fw-threat-panel,
    .linko-fw-console{
        display:none;
        margin:10px 0 0 !important;
    }

    .linko-fw-threat-panel.mobile-open,
    .linko-fw-console.mobile-open{
        display:block;
    }

    .linko-fw-mobile-toggle{
        width:100%;
        margin:7px 0 0;
        padding:10px 12px;
        border:1px solid rgba(87,181,235,.25);
        border-radius:8px;
        background:#071e2d;
        color:#9fc7df;
        font:inherit;
        font-size:10px;
        font-weight:800;
        text-align:left;
        cursor:pointer;
    }

    .linko-fw-mobile-toggle span{
        float:right;
        color:#65c8ff;
    }

    .linko-fw-console-lines{
        height:125px !important;
    }

    .linko-fw-threat-grid{
        grid-template-columns:1fr 1fr !important;
    }

}

/* =====================================================
   MOBILE TOGGLE DESKTOP PROTECTION
   Toggle controls must NEVER participate in desktop grid
===================================================== */

.linko-fw-mobile-toggle{
    display:none;
}

@media (max-width:900px){

    .linko-fw-mobile-toggle{
        display:block;
        width:100%;
        margin:7px 0 0;
        padding:10px 12px;
        border:1px solid rgba(87,181,235,.25);
        border-radius:8px;
        background:#071e2d;
        color:#9fc7df;
        font:inherit;
        font-size:10px;
        font-weight:800;
        text-align:left;
        cursor:pointer;
    }

    .linko-fw-mobile-toggle span{
        float:right;
        color:#65c8ff;
    }

}