@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
    --bg:#02070d;
    --panel:#07111c;
    --panel2:#091522;
    --border:#173247;

    --cyan:#31d7ff;
    --blue:#4d7cff;
    --green:#25d6a5;
    --yellow:#f5c85b;
    --red:#ff5f6d;
    --purple:#8b7cff;

    --text:#dcecff;
    --white:#f2f8ff;
    --muted:#7890a7;
    --muted2:#4e657b;

    --sidebar:255px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;

    color:var(--text);

    font-family:'Inter',sans-serif;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(40,215,255,.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 70%,
            rgba(77,124,255,.04),
            transparent 28%
        ),
        var(--bg);

    overflow-x:hidden;
}

body::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(40,215,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(40,215,255,.025) 1px,
            transparent 1px
        );

    background-size:48px 48px;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
select{
    font-family:inherit;
}

button{
    cursor:pointer;
}

svg{
    width:18px;
    height:18px;
}

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-track{
    background:#02070d;
}

::-webkit-scrollbar-thumb{
    background:#163448;
    border-radius:20px;
}


/* =====================================================
   LOGIN
===================================================== */

.login-page{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:100vh;

    padding:40px;

    position:relative;
}

.login-wrapper{
    width:min(1080px,100%);

    display:grid;
    grid-template-columns:1fr 430px;

    align-items:center;

    gap:90px;

    position:relative;
    z-index:2;
}

.login-brand{
    position:relative;
}

.login-brand::after{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:0;
    top:40px;

    background:rgba(40,215,255,.08);

    filter:blur(90px);

    border-radius:50%;

    z-index:-1;
}

.brand-shield{
    width:87px;
    height:87px;

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

    margin-bottom:30px;

    color:var(--cyan);

    border:1px solid rgba(40,215,255,.38);

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(40,215,255,.10),
            rgba(77,124,255,.04)
        );

    box-shadow:
        0 0 35px rgba(40,215,255,.08),
        inset 0 0 30px rgba(40,215,255,.025);
}

.brand-shield svg{
    width:47px;
    height:47px;
}

.eyebrow{
    color:var(--cyan);

    font-family:'JetBrains Mono',monospace;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:22px;
}

.login-brand h1{
    color:var(--white);

    font-size:48px;

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:800;
}

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

    margin-top:22px;

    color:#7992aa;

    font-size:14px;

    line-height:1.9;
}

.security-features{
    display:grid;

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

    gap:11px;

    margin-top:34px;

    max-width:760px;
}

.feature-box{
    min-height:81px;

    padding:16px;

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

    border-radius:10px;

    background:rgba(7,17,28,.55);

    transition:.25s;
}

.feature-box:hover{
    border-color:rgba(40,215,255,.3);

    transform:translateY(-2px);
}

.feature-box span{
    display:block;

    color:var(--cyan);

    font-family:'JetBrains Mono',monospace;

    font-size:9px;

    font-weight:700;
}

.feature-box strong{
    display:block;

    margin-top:14px;

    color:#b8cde0;

    font-size:10px;

    font-weight:500;
}


/* LOGIN CARD */

.login-card{
    position:relative;

    padding:38px 35px;

    background:
        linear-gradient(
            145deg,
            rgba(9,21,34,.97),
            rgba(3,10,18,.98)
        );

    border:1px solid #19364c;

    border-radius:18px;

    box-shadow:
        0 35px 90px rgba(0,0,0,.55),
        0 0 50px rgba(40,215,255,.035);
}

.login-card::before{
    content:"";

    position:absolute;

    top:-1px;
    left:35px;
    right:35px;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--cyan),
        transparent
    );

    box-shadow:0 0 15px rgba(40,215,255,.35);
}

.login-label,
.panel-kicker,
.page-kicker{
    color:var(--cyan);

    font-family:'JetBrains Mono',monospace;

    font-size:9px;

    font-weight:600;

    letter-spacing:1.8px;
}

.login-card h2{
    margin-top:13px;

    color:var(--white);

    font-size:23px;

    letter-spacing:-.6px;
}

.login-subtitle{
    margin-top:8px;

    color:#6e879e;

    font-size:10px;

    line-height:1.7;
}

.login-form{
    margin-top:27px;
}

.input-group{
    display:flex;
    flex-direction:column;

    gap:8px;

    margin-bottom:18px;
}

.input-group label{
    color:#7f95aa;

    font-family:'JetBrains Mono',monospace;

    font-size:9px;

    font-weight:500;

    letter-spacing:.7px;
}

.input-wrapper{
    position:relative;
}

.input-wrapper svg{
    position:absolute;

    left:14px;
    top:50%;

    transform:translateY(-50%);

    color:#557087;

    pointer-events:none;
}

.input-wrapper input{
    padding-left:42px !important;
}

input,
select{
    width:100%;

    height:48px;

    padding:0 14px;

    color:var(--text);

    background:#040c15;

    border:1px solid #19344a;

    border-radius:10px;

    outline:none;

    font-size:12px;

    transition:.25s;
}

input::placeholder{
    color:#50667b;
}

input:focus,
select:focus{
    border-color:var(--cyan);

    box-shadow:
        0 0 0 3px rgba(40,215,255,.05),
        0 0 20px rgba(40,215,255,.04);
}

select option{
    background:#07111c;
}

.login-options{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:3px 0 20px;
}

.remember{
    display:flex;

    align-items:center;

    gap:7px;

    color:#6d8398;

    font-size:9px;
}

.remember input{
    width:13px;
    height:13px;

    accent-color:var(--cyan);
}

.login-options a{
    color:var(--cyan);

    font-size:9px;

    text-decoration:underline;
}

.authenticate-btn,
.primary-btn{
    min-height:47px;

    display:inline-flex;

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

    gap:8px;

    padding:0 20px;

    color:#021017;

    background:
        linear-gradient(
            135deg,
            #31d7ff,
            #2b91ed
        );

    border:0;

    border-radius:9px;

    font-size:11px;

    font-weight:800;

    transition:.25s;

    box-shadow:
        0 10px 25px rgba(40,215,255,.10);
}

.authenticate-btn{
    width:100%;
}

.authenticate-btn:hover,
.primary-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(40,215,255,.2);
}

.login-security-status{
    margin-top:22px;

    padding-top:17px;

    border-top:1px solid rgba(255,255,255,.045);

    text-align:center;

    color:#577087;

    font-family:'JetBrains Mono',monospace;

    font-size:8px;
}

.login-security-status div{
    display:flex;

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

    gap:6px;
}

.status-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 10px var(--green);
}

.login-security-status small{
    display:block;

    margin-top:8px;

    letter-spacing:1px;

    color:#3e566c;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{
    position:fixed;

    top:0;
    left:0;
    bottom:0;

    width:var(--sidebar);

    padding:22px 15px;

    background:
        linear-gradient(
            180deg,
            #050d16,
            #030910
        );

    border-right:1px solid rgba(40,215,255,.11);

    z-index:10;

    display:flex;

    flex-direction:column;
}

.side-brand{
    display:flex;

    align-items:center;

    gap:11px;

    padding:8px 10px 23px;

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

.side-logo{
    width:39px;
    height:39px;

    display:flex;

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

    color:var(--cyan);

    border:1px solid rgba(40,215,255,.27);

    border-radius:10px;

    background:rgba(40,215,255,.045);
}

.side-logo svg{
    width:22px;
    height:22px;
}

.side-brand strong{
    display:block;

    color:var(--white);

    font-size:11px;

    font-weight:800;

    letter-spacing:.6px;
}

.side-brand span{
    display:block;

    margin-top:3px;

    color:var(--cyan);

    font-family:'JetBrains Mono',monospace;

    font-size:7px;

    letter-spacing:1px;
}

.nav-section{
    margin-top:28px;
}

.nav-section > small{
    display:block;

    padding:0 11px 11px;

    color:#43586c;

    font-family:'JetBrains Mono',monospace;

    font-size:8px;

    letter-spacing:1.5px;
}

.nav-section nav{
    display:flex;

    flex-direction:column;

    gap:4px;
}

.nav-section nav a{
    min-height:43px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 12px;

    color:#70869b;

    border:1px solid transparent;

    border-radius:8px;

    font-size:11px;

    font-weight:600;

    transition:.2s;
}

.nav-section nav a:hover{
    color:var(--text);

    background:rgba(40,215,255,.035);

    border-color:rgba(40,215,255,.08);
}

.nav-section nav a.active{
    color:var(--cyan);

    background:
        linear-gradient(
            90deg,
            rgba(40,215,255,.09),
            rgba(40,215,255,.02)
        );

    border-color:rgba(40,215,255,.13);

    box-shadow:inset 2px 0 var(--cyan);
}

.sidebar-bottom{
    margin-top:auto;
}

.live-status{
    display:flex;

    align-items:center;

    gap:7px;

    padding:11px;

    margin-bottom:8px;

    color:var(--green);

    font-family:'JetBrains Mono',monospace;

    font-size:8px;

    border:1px solid rgba(37,214,165,.09);

    border-radius:7px;

    background:rgba(37,214,165,.025);
}

.live-status span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 9px var(--green);
}

.logout-btn{
    width:100%;

    min-height:39px;

    color:#71879b;

    background:transparent;

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

    border-radius:7px;

    font-size:10px;

    transition:.2s;
}

.logout-btn:hover{
    color:var(--red);

    border-color:rgba(255,95,109,.2);
}


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

.main-content{
    margin-left:var(--sidebar);

    min-height:100vh;

    padding:30px 34px 50px;
}

.topbar{
    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin-bottom:28px;
}

.topbar h1{
    margin-top:8px;

    color:var(--white);

    font-size:26px;

    letter-spacing:-.8px;
}

.topbar p{
    margin-top:6px;

    color:#688198;

    font-size:11px;
}

.top-status{
    display:flex;

    align-items:center;

    gap:7px;

    padding:9px 12px;

    color:var(--green);

    border:1px solid rgba(37,214,165,.13);

    border-radius:7px;

    background:rgba(37,214,165,.025);

    font-family:'JetBrains Mono',monospace;

    font-size:8px;

    white-space:nowrap;
}

.top-status span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 9px var(--green);
}


/* =====================================================
   STATS
===================================================== */

.stats-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    margin-bottom:18px;
}

.stat-card{
    position:relative;

    min-height:145px;

    padding:19px;

    background:
        linear-gradient(
            145deg,
            rgba(10,23,37,.95),
            rgba(4,11,19,.96)
        );

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

    border-radius:12px;

    transition:.25s;

    overflow:hidden;
}

.stat-card:hover{
    transform:translateY(-3px);

    border-color:rgba(40,215,255,.25);
}

.stat-card::after{
    content:"";

    position:absolute;

    right:-40px;
    bottom:-50px;

    width:130px;
    height:130px;

    border-radius:50%;

    background:rgba(40,215,255,.035);

    filter:blur(25px);
}

.stat-icon{
    width:37px;
    height:37px;

    display:flex;

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

    border-radius:9px;

    border:1px solid;
}

.stat-icon.cyan{
    color:var(--cyan);

    background:rgba(40,215,255,.05);

    border-color:rgba(40,215,255,.11);
}

.stat-icon.blue{
    color:var(--blue);

    background:rgba(77,124,255,.05);

    border-color:rgba(77,124,255,.11);
}

.stat-icon.green{
    color:var(--green);

    background:rgba(37,214,165,.05);

    border-color:rgba(37,214,165,.11);
}

.stat-icon.purple{
    color:var(--purple);

    background:rgba(139,124,255,.05);

    border-color:rgba(139,124,255,.11);
}

.stat-label{
    display:block;

    margin-top:17px;

    color:#60788f;

    font-family:'JetBrains Mono',monospace;

    font-size:8px;

    letter-spacing:.7px;
}

.stat-card > strong{
    display:block;

    margin-top:5px;

    color:var(--white);

    font-size:25px;

    font-weight:800;
}

.stat-card small{
    display:block;

    margin-top:6px;

    font-size:9px;
}

.green-text{
    color:var(--green);
}

.yellow-text{
    color:var(--yellow);
}


/* =====================================================
   PANELS
===================================================== */

.panel{
    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(9,22,36,.95),
            rgba(4,11,19,.97)
        );

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

    border-radius:12px;

    overflow:hidden;

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

.panel::before{
    content:"";

    position:absolute;

    top:0;
    left:20%;
    right:20%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(40,215,255,.28),
        transparent
    );
}

.panel-header{
    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

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

.panel-header h2{
    margin-top:6px;

    color:var(--white);

    font-size:14px;

    font-weight:700;
}

.online-badge,
.record-count{
    color:var(--green);

    font-family:'JetBrains Mono',monospace;

    font-size:8px;

    letter-spacing:.5px;
}


/* =====================================================
   DASHBOARD
===================================================== */

.dashboard-grid{
    display:grid;

    grid-template-columns:1.25fr 1fr;

    gap:18px;

    margin-bottom:18px;
}

.security-score-content{
    display:flex;

    align-items:center;

    gap:35px;

    padding:28px;
}

.score-ring{
    width:150px;
    height:150px;

    flex-shrink:0;

    display:flex;

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

    border-radius:50%;

    background:
        conic-gradient(
            var(--cyan) 0deg,
            var(--cyan) 352deg,
            #142331 352deg,
            #142331 360deg
        );

    position:relative;

    box-shadow:0 0 30px rgba(40,215,255,.06);
}

.score-ring::before{
    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

    background:#07111c;
}

.score-inner{
    position:relative;

    text-align:center;
}

.score-inner strong{
    display:block;

    color:var(--white);

    font-size:38px;

    line-height:1;
}

.score-inner span{
    display:block;

    margin-top:6px;

    color:var(--cyan);

    font-family:'JetBrains Mono',monospace;

    font-size:7px;

    letter-spacing:1px;
}

.score-details h3{
    color:var(--white);

    font-size:16px;
}

.score-details p{
    max-width:340px;

    margin-top:8px;

    color:#6c849b;

    font-size:10px;

    line-height:1.7;
}

.score-line{
    display:flex;

    justify-content:space-between;

    margin-top:17px;

    color:#7790a6;

    font-size:9px;
}

.score-line strong{
    color:var(--cyan);
}

.mini-progress{
    height:4px;

    margin-top:7px;

    overflow:hidden;

    border-radius:10px;

    background:#142331;
}

.mini-progress div{
    height:100%;

    background:linear-gradient(
        90deg,
        var(--blue),
        var(--cyan)
    );

    box-shadow:0 0 10px rgba(40,215,255,.3);
}


/* THREATS */

.live-indicator{
    color:var(--cyan);

    font-family:'JetBrains Mono',monospace;

    font-size:8px;
}

.live-indicator i{
    display:inline-block;

    width:6px;
    height:6px;

    margin-right:5px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 8px var(--green);
}

.threat-list{
    padding:5px 20px 10px;
}

.threat-row{
    display:flex;

    align-items:center;

    gap:11px;

    padding:13px 0;

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

.threat-row:last-child{
    border-bottom:0;
}

.threat-symbol{
    width:31px;
    height:31px;

    display:flex;

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

    border-radius:7px;

    font-family:'JetBrains Mono',monospace;

    font-size:8px;

    font-weight:700;
}

.threat-symbol.safe{
    color:var(--green);

    background:rgba(37,214,165,.06);

    border:1px solid rgba(37,214,165,.1);
}

.threat-symbol.warning{
    color:var(--yellow);

    background:rgba(246,200,95,.06);

    border:1px solid rgba(246,200,95,.1);
}

.threat-info{
    flex:1;
}

.threat-info strong{
    display:block;

    color:#c6d9ea;

    font-size:10px;
}

.threat-info span{
    display:block;

    margin-top:3px;

    color:#60788e;

    font-size:8px;
}

.threat-row b{
    color:var(--green);

    font-family:'JetBrains Mono',monospace;

    font-size:7px;
}


/* FIREWALL */

.firewall-content{
    display:flex;

    align-items:center;

    gap:17px;

    padding:25px;
}

.firewall-icon{
    width:57px;
    height:57px;

    display:flex;

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

    color:var(--green);

    background:rgba(37,214,165,.05);

    border:1px solid rgba(37,214,165,.13);

    border-radius:12px;
}

.firewall-icon svg{
    width:28px;
    height:28px;
}

.firewall-content h3{
    color:var(--white);

    font-size:14px;
}

.firewall-content p{
    margin-top:5px;

    color:#647c92;

    font-size:9px;

    line-height:1.6;
}

.firewall-live{
    display:inline-block;

    margin-top:10px;

    color:var(--green);

    font-family:'JetBrains Mono',monospace;

    font-size:7px;

    letter-spacing:.7px;
}

.health-list,
.report-list{
    padding:7px 20px 12px;
}

.health-list > div,
.report-list > div{
    display:flex;

    justify-content:space-between;

    padding:14px 0;

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

.health-list > div:last-child,
.report-list > div:last-child{
    border-bottom:0;
}

.health-list span,
.report-list span{
    color:#70879c;

    font-size:9px;
}

.health-list strong,
.report-list strong{
    color:#cfe1f0;

    font-family:'JetBrains Mono',monospace;

    font-size:9px;
}


/* =====================================================
   EMPLOYEES
===================================================== */

.page-actions{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:18px;
}

.search-wrapper{
    position:relative;

    max-width:380px;

    width:100%;
}

.search-wrapper svg{
    position:absolute;

    left:13px;
    top:50%;

    transform:translateY(-50%);

    color:#506a80;
}

.search-wrapper input{
    padding-left:40px;
}

.table-panel{
    overflow:hidden;
}

.table-scroll{
    overflow-x:auto;
}

.security-table{
    width:100%;

    border-collapse:collapse;

    min-width:800px;
}

.security-table th{
    padding:13px 18px;

    text-align:left;

    color:#4f687d;

    background:rgba(255,255,255,.015);

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

    font-family:'JetBrains Mono',monospace;

    font-size:7px;

    letter-spacing:1px;
}

.security-table td{
    padding:14px 18px;

    color:#a9bfd1;

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

    font-size:10px;
}

.security-table tr:hover td{
    background:rgba(40,215,255,.018);
}

.employee-cell{
    display:flex;

    align-items:center;

    gap:9px;
}

.employee-avatar{
    width:31px;
    height:31px;

    display:flex;

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

    border-radius:8px;

    color:var(--cyan);

    background:rgba(40,215,255,.06);

    border:1px solid rgba(40,215,255,.11);

    font-size:8px;

    font-weight:800;
}

.employee-cell strong{
    display:block;

    color:#d7e8f6;

    font-size:10px;
}

.employee-cell span{
    display:block;

    margin-top:2px;

    color:#587086;

    font-size:8px;
}

.access-badge{
    display:inline-block;

    padding:5px 8px;

    border-radius:5px;

    font-family:'JetBrains Mono',monospace;

    font-size:7px;
}

.access-standard{
    color:var(--cyan);

    background:rgba(40,215,255,.05);
}

.access-elevated{
    color:var(--yellow);

    background:rgba(246,200,95,.05);
}

.access-admin{
    color:var(--purple);

    background:rgba(139,124,255,.06);
}

.status-active{
    color:var(--green);

    font-family:'JetBrains Mono',monospace;

    font-size:7px;
}

.table-actions{
    display:flex;

    gap:5px;
}

.table-btn{
    padding:6px 9px;

    color:#7790a5;

    background:#08131f;

    border:1px solid #183147;

    border-radius:5px;

    font-size:8px;

    transition:.2s;
}

.table-btn:hover{
    color:var(--cyan);

    border-color:rgba(40,215,255,.25);
}

.table-btn.delete:hover{
    color:var(--red);

    border-color:rgba(255,95,109,.25);
}


/* =====================================================
   FORMS
===================================================== */

.form-panel{
    max-width:850px;
}

.security-form{
    padding:25px;
}

.form-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

.security-form .input-group{
    margin-bottom:0;
}

.security-form select{
    appearance:auto;
}

.form-note{
    display:flex;

    align-items:center;

    gap:8px;

    margin-top:25px;

    padding:11px 13px;

    color:#627b91;

    background:rgba(40,215,255,.025);

    border:1px solid rgba(40,215,255,.08);

    border-radius:7px;

    font-size:9px;
}

.form-note span{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:0 0 8px var(--cyan);
}

.form-actions{
    display:flex;

    justify-content:flex-end;

    gap:9px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.045);
}

.secondary-btn{
    min-height:47px;

    display:inline-flex;

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

    padding:0 20px;

    color:#8ca1b4;

    background:#07111c;

    border:1px solid #193247;

    border-radius:9px;

    font-size:10px;

    font-weight:700;

    transition:.2s;
}

.secondary-btn:hover{
    color:var(--text);

    border-color:#2b4c63;
}


/* =====================================================
   SECURITY LAYERS
===================================================== */

.security-grid{
    display:grid;

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

    gap:16px;
}

.security-layer{
    position:relative;

    min-height:190px;

    padding:21px;

    background:
        linear-gradient(
            145deg,
            rgba(9,22,36,.95),
            rgba(4,11,19,.97)
        );

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

    border-radius:12px;

    overflow:hidden;

    transition:.25s;
}

.security-layer:hover{
    transform:translateY(-3px);

    border-color:rgba(40,215,255,.25);
}

.layer-number{
    position:absolute;

    right:18px;
    top:17px;

    color:rgba(40,215,255,.08);

    font-family:'JetBrains Mono',monospace;

    font-size:22px;

    font-weight:600;
}

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

    display:flex;

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

    margin-bottom:17px;

    color:var(--cyan);

    background:rgba(40,215,255,.045);

    border:1px solid rgba(40,215,255,.11);

    border-radius:9px;
}

.security-layer h3{
    color:#d8e9f6;

    font-size:12px;
}

.security-layer p{
    margin-top:7px;

    color:#61798f;

    font-size:9px;

    line-height:1.7;
}

.layer-active{
    display:inline-block;

    margin-top:15px;

    color:var(--green);

    font-family:'JetBrains Mono',monospace;

    font-size:7px;

    letter-spacing:.8px;
}


/* =====================================================
   NETWORK
===================================================== */

.network-grid{
    display:grid;

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

    gap:16px;

    margin-bottom:18px;
}

.network-card{
    padding:20px;

    background:
        linear-gradient(
            145deg,
            rgba(9,22,36,.95),
            rgba(4,11,19,.97)
        );

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

    border-radius:12px;

    transition:.25s;
}

.network-card:hover{
    transform:translateY(-3px);

    border-color:rgba(40,215,255,.25);
}

.network-card-top{
    display:flex;

    align-items:center;

    justify-content:space-between;
}

.network-icon{
    width:43px;
    height:43px;

    display:flex;

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

    color:var(--cyan);

    background:rgba(40,215,255,.05);

    border:1px solid rgba(40,215,255,.11);

    border-radius:9px;

    font-family:'JetBrains Mono',monospace;

    font-size:8px;

    font-weight:700;
}

.device-online{
    color:var(--green);

    font-family:'JetBrains Mono',monospace;

    font-size:7px;
}

.network-card h3{
    margin-top:17px;

    color:#d5e7f5;

    font-size:12px;
}

.network-card p{
    margin-top:5px;

    color:#61798e;

    font-size:9px;
}

.network-card > strong{
    display:block;

    margin-top:13px;

    color:var(--cyan);

    font-family:'JetBrains Mono',monospace;

    font-size:8px;
}

.network-topology{
    padding:40px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;
}

.topology-node{
    min-width:150px;

    padding:13px 18px;

    text-align:center;

    color:var(--cyan);

    background:#06111c;

    border:1px solid rgba(40,215,255,.18);

    border-radius:8px;

    font-family:'JetBrains Mono',monospace;

    font-size:8px;

    box-shadow:0 0 25px rgba(40,215,255,.025);
}

.topology-node small{
    display:block;

    margin-top:5px;

    color:var(--green);

    font-size:6px;
}

.main-node{
    border-color:rgba(40,215,255,.3);

    box-shadow:0 0 25px rgba(40,215,255,.06);
}

.topology-line{
    width:1px;
    height:28px;

    background:linear-gradient(
        var(--cyan),
        rgba(40,215,255,.1)
    );
}

.topology-row{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    position:relative;
}

.topology-row::before{
    content:"";

    position:absolute;

    top:-13px;

    left:80px;
    right:80px;

    height:1px;

    background:rgba(40,215,255,.18);
}


/* =====================================================
   REPORTS
===================================================== */

.chart-panel{
    margin-bottom:18px;
}

.chart-box{
    height:330px;

    padding:20px;
}

.chart-box canvas{
    width:100% !important;
    height:100% !important;
}


/* =====================================================
   SETTINGS
===================================================== */

.settings-grid{
    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:18px;
}

.profile-box{
    display:flex;

    align-items:center;

    gap:14px;

    margin:20px 25px 5px;

    padding-bottom:20px;

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

.profile-avatar{
    width:55px;
    height:55px;

    display:flex;

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

    color:var(--cyan);

    background:rgba(40,215,255,.06);

    border:1px solid rgba(40,215,255,.13);

    border-radius:12px;

    font-family:'JetBrains Mono',monospace;

    font-size:12px;

    font-weight:700;
}

.profile-box h3{
    color:var(--white);

    font-size:14px;
}

.profile-box p{
    margin-top:4px;

    color:#657e94;

    font-size:9px;
}

.setting-row{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:16px 20px;

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

.setting-row:last-child{
    border-bottom:0;
}

.setting-row strong{
    display:block;

    color:#c4d7e6;

    font-size:10px;
}

.setting-row span{
    display:block;

    margin-top:4px;

    color:#5f778d;

    font-size:8px;
}

.setting-ok{
    color:var(--green);

    font-family:'JetBrains Mono',monospace;

    font-size:7px;

    white-space:nowrap;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1200px){

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

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

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

    .settings-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:850px){

    .login-page{
        padding:25px 16px;
    }

    .login-wrapper{
        grid-template-columns:1fr;

        gap:35px;

        max-width:500px;
    }

    .login-brand{
        text-align:center;
    }

    .brand-shield{
        margin:0 auto 22px;
    }

    .login-brand h1{
        font-size:35px;
    }

    .brand-description{
        font-size:11px;
    }

    .security-features{
        display:none;
    }

    .sidebar{
        position:relative;

        width:100%;

        height:auto;

        padding:15px;

        border-right:0;

        border-bottom:1px solid rgba(40,215,255,.11);
    }

    .nav-section nav{
        flex-direction:row;

        overflow-x:auto;
    }

    .nav-section nav a{
        white-space:nowrap;
    }

    .sidebar-bottom{
        display:none;
    }

    .main-content{
        margin-left:0;

        padding:22px 16px 40px;
    }

    .topbar{
        flex-direction:column;
    }

    .top-status{
        width:max-content;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }

    .security-score-content{
        flex-direction:column;

        text-align:center;
    }

    .score-details p{
        margin-left:auto;
        margin-right:auto;
    }

    .score-line{
        text-align:left;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    .stats-grid{
        grid-template-columns:1fr;
    }

    .security-grid,
    .network-grid{
        grid-template-columns:1fr;
    }

    .page-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .search-wrapper{
        max-width:none;
    }

    .page-actions .primary-btn{
        width:100%;
    }

    .login-card{
        padding:28px 22px;
    }

    .login-brand h1{
        font-size:29px;
    }

    .main-content{
        padding-left:12px;
        padding-right:12px;
    }

    .panel-header{
        padding:16px;
    }

    .security-form{
        padding:18px;
    }

    .form-actions{
        flex-direction:column;
    }

    .form-actions a,
    .form-actions button{
        width:100%;
    }

    .network-topology{
        padding:25px 10px;
    }

    .topology-row{
        gap:8px;
    }

}

/* =====================================================
   PUBLIC SECURITY OVERVIEW
===================================================== */
.public-page{background:radial-gradient(circle at 78% 16%,rgba(49,215,255,.10),transparent 25%),radial-gradient(circle at 10% 70%,rgba(77,124,255,.07),transparent 30%),var(--bg);}
.public-nav{position:sticky;top:0;z-index:50;height:78px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(49,215,255,.10);background:rgba(2,7,13,.78);backdrop-filter:blur(18px);}
.public-brand{display:flex;align-items:center;gap:11px}.public-brand-mark{width:37px;height:37px;border:1px solid rgba(49,215,255,.45);display:grid;place-items:center;color:var(--cyan);background:rgba(49,215,255,.05)}.public-brand-mark svg{width:23px}.public-brand strong,.public-brand small{display:block}.public-brand strong{font-size:11px;letter-spacing:2px}.public-brand small{font:9px 'JetBrains Mono';letter-spacing:1.5px;color:var(--muted)}
.public-links{display:flex;gap:28px}.public-links a{font-size:11px;color:#8ca2b8;letter-spacing:.5px;transition:.2s}.public-links a:hover{color:var(--cyan)}.public-login,.hero-primary,.hero-secondary,.public-cta a{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--cyan);padding:12px 18px;font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}.public-login{color:var(--cyan);background:rgba(49,215,255,.05)}.public-login:hover,.hero-primary:hover,.public-cta a:hover{background:var(--cyan);color:#021019}
.public-hero{min-height:680px;padding:70px 7vw 85px;display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center;max-width:1500px;margin:auto}.public-kicker{font:10px 'JetBrains Mono';letter-spacing:2px;color:var(--cyan);display:flex;align-items:center;gap:9px}.public-kicker span{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}.hero-copy h1{font-size:clamp(48px,6vw,82px);line-height:.98;letter-spacing:-4px;margin:22px 0;color:var(--white);font-weight:800}.hero-copy h1 em{font-style:normal;color:var(--cyan)}.hero-copy>p{max-width:600px;color:#7890a7;font-size:15px;line-height:1.8}.hero-actions{display:flex;gap:12px;margin-top:30px}.hero-primary{background:var(--cyan);color:#021019}.hero-secondary{border-color:#26465e;color:#9bb0c4}.hero-trust{display:flex;gap:10px;align-items:center;margin-top:35px;font:9px 'JetBrains Mono';color:#60788e;letter-spacing:.6px}.hero-trust b{color:#9db3c6}.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.security-orbit{height:480px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(49,215,255,.13);border-radius:50%}.orbit-one{width:270px;height:270px}.orbit-two{width:380px;height:380px;border-color:rgba(77,124,255,.14)}.orbit-three{width:480px;height:480px;border-color:rgba(49,215,255,.08)}.orbit-core{width:180px;height:180px;border:1px solid rgba(49,215,255,.35);background:radial-gradient(circle,rgba(49,215,255,.10),rgba(7,17,28,.94) 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 70px rgba(49,215,255,.08)}.core-shield{color:var(--cyan);margin-bottom:6px}.core-shield svg{width:35px;height:35px}.orbit-core strong{font-size:42px;line-height:1}.orbit-core>span{font:8px 'JetBrains Mono';letter-spacing:1.5px;color:var(--muted)}.orbit-label{position:absolute;display:flex;flex-direction:column;padding:11px 14px;border:1px solid #183449;background:rgba(5,14,23,.92);min-width:120px}.orbit-label b{font-size:20px;color:var(--white)}.orbit-label span{font:8px 'JetBrains Mono';color:var(--muted);letter-spacing:1px;margin-top:3px}.label-a{top:65px;right:5%}.label-b{bottom:52px;left:3%}.label-c{top:205px;right:-3%}
.public-section{max-width:1250px;margin:auto;padding:90px 30px}.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:35px}.section-heading h2{font-size:clamp(30px,4vw,48px);letter-spacing:-2px;margin-top:10px;color:var(--white)}.section-heading>p{max-width:420px;color:var(--muted);line-height:1.7;font-size:13px}.overview-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}.public-card{border:1px solid #142d40;background:linear-gradient(145deg,rgba(9,21,34,.94),rgba(4,12,20,.94));padding:27px;min-height:230px;position:relative}.public-card:hover{border-color:#25506b;transform:translateY(-3px);transition:.25s}.card-top{display:flex;justify-content:space-between;align-items:center}.card-icon{display:inline-grid;place-items:center;width:35px;height:35px;border:1px solid #21445c;color:var(--cyan);font:10px 'JetBrains Mono'}.online{font:8px 'JetBrains Mono';color:var(--green);letter-spacing:1px}.public-card h3{font-size:18px;margin:25px 0 10px}.public-card p{font-size:12px;color:var(--muted);line-height:1.7}.meter{height:3px;background:#102333;margin-top:25px}.meter span{display:block;height:100%;background:var(--cyan);box-shadow:0 0 10px rgba(49,215,255,.4)}.public-card small{display:block;color:#5f7890;font:9px 'JetBrains Mono';margin-top:8px}.mini-status{margin-top:22px;font:9px 'JetBrains Mono';color:#718aa0}.mini-status span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 8px var(--green)}
.protection-section{border-top:1px solid rgba(49,215,255,.08);max-width:none;padding-left:calc((100% - 1190px)/2);padding-right:calc((100% - 1190px)/2)}.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #142d40}.capability-grid>div{padding:30px;border-right:1px solid #142d40;min-height:210px}.capability-grid>div:last-child{border-right:0}.capability-grid span{font:10px 'JetBrains Mono';color:var(--cyan)}.capability-grid h3{font-size:16px;margin:30px 0 10px}.capability-grid p{font-size:11px;color:var(--muted);line-height:1.7}.layers-list{border-top:1px solid #173247}.layers-list div{display:grid;grid-template-columns:70px 1fr 80px;align-items:center;padding:18px 15px;border-bottom:1px solid #10293b}.layers-list b{font:10px 'JetBrains Mono';color:#45627a}.layers-list span{font-size:12px}.layers-list i{font:8px 'JetBrains Mono';font-style:normal;color:var(--green);text-align:right;letter-spacing:1px}.public-cta{max-width:1250px;margin:20px auto 80px;padding:45px 50px;border:1px solid #173247;background:linear-gradient(120deg,rgba(49,215,255,.06),rgba(7,17,28,.7));display:flex;justify-content:space-between;align-items:center;gap:30px}.public-cta h2{font-size:32px;letter-spacing:-1px;margin:12px 0}.public-cta p{font-size:12px;color:var(--muted);max-width:620px;line-height:1.7}.public-cta a{white-space:nowrap}.public-footer{border-top:1px solid #102638;padding:25px 7vw;display:flex;justify-content:space-between;color:#4c667d;font:8px 'JetBrains Mono';letter-spacing:1.4px}
@media(max-width:900px){.public-links{display:none}.public-hero{grid-template-columns:1fr;padding-top:50px}.security-orbit{height:400px}.orbit-three{width:380px;height:380px}.orbit-two{width:300px;height:300px}.orbit-one{width:220px;height:220px}.label-c{right:0}.overview-grid,.capability-grid{grid-template-columns:1fr 1fr}.capability-grid>div:nth-child(2){border-right:0}.capability-grid>div:nth-child(-n+2){border-bottom:1px solid #142d40}.protection-section{padding-left:30px;padding-right:30px}.section-heading{align-items:start;flex-direction:column}.public-cta{margin-left:30px;margin-right:30px}}
@media(max-width:600px){.public-nav{padding:0 18px}.public-login{padding:9px 11px}.public-hero{padding:45px 22px 70px}.hero-copy h1{letter-spacing:-2px;font-size:48px}.hero-actions{flex-direction:column}.security-orbit{height:330px;transform:scale(.78)}.overview-grid,.capability-grid{grid-template-columns:1fr}.capability-grid>div{border-right:0!important;border-bottom:1px solid #142d40}.public-section{padding:65px 22px}.public-cta{margin:0 22px 55px;padding:30px;flex-direction:column;align-items:flex-start}.public-footer{padding:20px 22px;gap:15px;flex-direction:column}}