/*====================================================
  GFPF Coworker Toolkit
  Premium Glass Dashboard v3
  Compact 3 Column Layout
====================================================*/


:root{

    --bg:#08111f;

    --panel:rgba(18,32,52,.72);

    --border:rgba(255,255,255,.10);

    --text:#eef5ff;

    --muted:#94a8c4;


    --blue:#4C8DFF;

    --green:#22C55E;

    --orange:#F59E0B;

    --red:#EF4444;

    --purple:#A855F7;

    --cyan:#06B6D4;


    --radius:14px;

    --transition:.3s ease;


    --shadow:

    0 15px 40px rgba(0,0,0,.35);


    --font:

    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;


    --mono:

    "JetBrains Mono",
    Consolas,
    monospace;

}


/*====================================================
  Reset
====================================================*/


*{

    box-sizing:border-box;

    margin:0;

    padding:0;

}


html{

    scroll-behavior:smooth;

}


body{

    min-height:100vh;

    background:var(--bg);

    color:var(--text);

    font-family:var(--font);

}


/*====================================================
  Main Dashboard
====================================================*/


.sjb-dash{

    position:relative;

    min-height:100vh;

    padding:22px 22px 35px;


    background:

    radial-gradient(
        circle at top right,
        rgba(76,141,255,.18),
        transparent 35%
    ),


    radial-gradient(
        circle at bottom left,
        rgba(168,85,247,.12),
        transparent 35%
    ),


    #08111f;


    overflow:hidden;

}



/* Animated Grid Background */

.sjb-dash::before{

    content:"";

    position:absolute;

    inset:0;


    background-image:

    linear-gradient(
        rgba(255,255,255,.025) 1px,
        transparent 1px
    ),


    linear-gradient(
        90deg,
        rgba(255,255,255,.025) 1px,
        transparent 1px
    );


    background-size:35px 35px;


    animation:

    gridMove 25s linear infinite;


    pointer-events:none;

}



@keyframes gridMove{

    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(35px);

    }

}



/*====================================================
  Security Notice
====================================================*/


.sjb-warn{

    position:relative;

    z-index:2;


    max-width:1100px;

    margin:0 auto 15px;


    padding:10px 14px;


    display:flex;

    align-items:center;

    gap:10px;


    border-radius:10px;


    background:

    rgba(239,68,68,.10);


    border:

    1px solid rgba(239,68,68,.25);


    backdrop-filter:blur(10px);


    font-size:12px;

}



.sjb-warn svg{

    width:18px;

    height:18px;

    flex-shrink:0;

    color:#ff7b7b;

}



.sjb-warn strong{

    color:#ff8c8c;

}



/*====================================================
  Header
====================================================*/


.sjb-head{

    position:relative;

    z-index:2;


    max-width:1100px;

    margin:0 auto 20px;

}



.sjb-eyebrow{

    font-family:var(--mono);

    color:var(--blue);


    font-size:11px;

    letter-spacing:.18em;

    text-transform:uppercase;


    margin-bottom:6px;

}



.sjb-title{

    font-size:32px;

    font-weight:800;


    letter-spacing:-.5px;

    margin-bottom:5px;

}



.sjb-sub{

    color:var(--muted);

    font-size:13px;

    line-height:1.5;

    max-width:600px;

}



/*====================================================
  Grid Layout
====================================================*/


.sjb-grid{

    position:relative;

    z-index:2;


    max-width:1100px;

    margin:auto;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:14px;

}
/*====================================================
  Glass Cards
====================================================*/


.sjb-card{

    position:relative;

    min-height:165px;


    display:flex;

    flex-direction:column;


    gap:8px;


    padding:16px;


    border-radius:var(--radius);


    background:

    var(--panel);


    border:

    1px solid var(--border);


    backdrop-filter:

    blur(16px);


    -webkit-backdrop-filter:

    blur(16px);


    text-decoration:none;

    color:var(--text);


    overflow:hidden;


    box-shadow:var(--shadow);


    transition:

    transform .3s ease,

    border-color .3s ease,

    box-shadow .3s ease;


    opacity:0;

    animation:

    cardShow .5s ease forwards;

}



.sjb-card:nth-child(1){

    animation-delay:.05s;

}

.sjb-card:nth-child(2){

    animation-delay:.10s;

}

.sjb-card:nth-child(3){

    animation-delay:.15s;

}

.sjb-card:nth-child(4){

    animation-delay:.20s;

}

.sjb-card:nth-child(5){

    animation-delay:.25s;

}

.sjb-card:nth-child(6){

    animation-delay:.30s;

}



@keyframes cardShow{

    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* Animated top line */


.sjb-card::before{

    content:"";


    position:absolute;


    top:0;

    left:0;


    width:100%;

    height:3px;


    background:

    var(--accent);


}



/* Glow hover */


.sjb-card:hover{

    transform:

    translateY(-5px);


    border-color:

    var(--accent);


    box-shadow:

    0 0 25px

    color-mix(
        in srgb,
        var(--accent) 35%,
        transparent
    ),

    0 20px 45px rgba(0,0,0,.45);

}



/*====================================================
  Card Colors
====================================================*/


.sjb-blue{

    --accent:#4C8DFF;

}


.sjb-green{

    --accent:#22C55E;

}


.sjb-orange{

    --accent:#F59E0B;

}


.sjb-red{

    --accent:#EF4444;

}


.sjb-purple{

    --accent:#A855F7;

}


.sjb-cyan{

    --accent:#06B6D4;

}



/*====================================================
  Icon
====================================================*/


.sjb-icon{

    width:38px;

    height:38px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:11px;


    background:

    rgba(255,255,255,.08);


    color:

    var(--accent);


    transition:.3s;

}



.sjb-icon svg{

    width:19px;

    height:19px;

}



.sjb-card:hover .sjb-icon{

    transform:

    rotate(-8deg)

    scale(1.12);


    box-shadow:

    0 0 18px var(--accent);

}



/*====================================================
  Text
====================================================*/


.sjb-name{

    font-size:15px;

    font-weight:700;


}



.sjb-desc{

    flex:1;


    color:var(--muted);


    font-size:12px;


    line-height:1.45;

}



.sjb-url{

    font-family:var(--mono);


    font-size:10px;


    color:#82a6d8;

}



/*====================================================
  SVG Lock Badge
====================================================*/


.sjb-lock{

    position:absolute;


    top:10px;

    right:10px;


    width:30px;

    height:30px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    rgba(255,255,255,.08);


    border:

    1px solid rgba(255,255,255,.15);


    backdrop-filter:

    blur(10px);


    z-index:5;


}



.sjb-lock svg{

    width:15px;

    height:15px;

}



.lock{

    color:#ff6b6b;


    animation:

    lockPulse 2s infinite;

}



.unlock{

    color:#4ade80;

}



@keyframes lockPulse{


    0%,100%{

        box-shadow:none;

    }


    50%{

        box-shadow:

        0 0 15px #ff6b6b;

    }


}
/*====================================================
  Open Button
====================================================*/


.sjb-link{

    position:relative;


    display:flex;

    align-items:center;

    justify-content:center;


    height:32px;


    margin-top:5px;


    border-radius:9px;


    background:

    var(--accent);


    color:#ffffff;


    font-size:12px;

    font-weight:600;


    overflow:hidden;


    transition:.3s;

}



/* Shine animation */

.sjb-link::before{

    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:100%;

    height:100%;


    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );


    transition:.6s;

}



.sjb-card:hover .sjb-link::before{

    left:120%;

}



.sjb-card:hover .sjb-link{

    filter:brightness(1.12);


    box-shadow:

    0 0 15px var(--accent);

}



/*====================================================
  Footer
====================================================*/


.sjb-foot{

    position:relative;

    z-index:2;


    max-width:1100px;


    margin:25px auto 0;


    padding-top:12px;


    border-top:

    1px solid rgba(255,255,255,.08);


    text-align:center;


    color:var(--muted);


    font-size:11px;


    font-family:var(--mono);

}



.sjb-foot a{


    color:var(--blue);


    text-decoration:none;


}



.sjb-foot a:hover{


    text-shadow:

    0 0 10px var(--blue);

}



/*====================================================
  Hover Light Effect
====================================================*/


.sjb-card::after{

    content:"";


    position:absolute;


    width:150px;

    height:150px;


    top:-80px;

    right:-80px;


    background:

    radial-gradient(

    circle,

    rgba(255,255,255,.12),

    transparent 70%

    );


    opacity:0;


    transition:.4s;


    pointer-events:none;

}



.sjb-card:hover::after{


    opacity:1;


}



/*====================================================
  Scrollbar
====================================================*/


::-webkit-scrollbar{

    width:8px;

}


::-webkit-scrollbar-track{

    background:#08111f;

}


::-webkit-scrollbar-thumb{

    background:#29476b;

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:#4C8DFF;

}



/*====================================================
  Selection
====================================================*/


::selection{

    background:#4C8DFF;

    color:white;

}



/*====================================================
  Responsive
====================================================*/


@media(max-width:900px){


    .sjb-grid{


        grid-template-columns:

        repeat(2,1fr);


    }


}



@media(max-width:600px){


    .sjb-dash{


        padding:

        18px 12px 30px;


    }



    .sjb-grid{


        grid-template-columns:

        1fr;


    }



    .sjb-title{


        font-size:26px;


    }



    .sjb-card{


        min-height:160px;


    }



}



/*====================================================
  Accessibility
====================================================*/


a:focus-visible{


    outline:

    2px solid var(--blue);


    outline-offset:3px;


}



/*====================================================
  End of Style
====================================================*/