.threats-hero{
text-align:center;
margin:var(--gap) auto;
}
.threats-hero p{
font-size:20px;
color:var(--tx2);
margin:0 auto;
max-width:700px;
line-height:1.6;
}
.threats-hero-stats{
display:flex;
justify-content:center;
gap:var(--gt1);
margin-top:var(--gap);
}
.threats-stat{
display:flex;
flex-direction:column;
align-items:center;
padding:var(--gd2) var(--gap);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--fbs);
min-width:120px;
}
.threats-stat-num{
font-family:var(--ff2);
font-size:48px;
font-weight:800;
color:var(--tx1);
line-height:1;
}
.threats-stat-active .threats-stat-num{
color:var(--rd1);
}
.threats-stat-label{
font-size:14px;
color:var(--tx2);
text-transform:uppercase;
letter-spacing:0.05em;
margin-top:4px;
}
.threats-main{
width:var(--pw3);
max-width:var(--max);
margin:0 auto var(--gap);
}
.threats-controls{
display:flex;
align-items:center;
gap:10px;
margin:0 auto var(--gap);
}
.threats-filter-dropdown{
position:relative;
flex-shrink:0;
}
.threats-filter-btn{
width:64px;
height:64px;
min-width:64px;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:var(--fbs);
padding:0;
}
.threats-filter-btn:hover{
background-color:var(--hv1);
border-color:var(--cl1);
}
.threats-filter-dropdown.open .threats-filter-btn{
background-color:var(--cl1);
border-color:var(--cl1);
}
.threats-filter-btn span{
display:none;
}
.threats-filter-icon{
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
}
.threats-filter-icon svg{
width:26px;
height:26px;
fill:var(--tx2);
}
.threats-filter-btn:hover .threats-filter-icon svg{
fill:var(--cl1);
}
.threats-filter-dropdown.open .threats-filter-icon svg{
fill:var(--blk);
}
.threats-filter-menu{
position:absolute;
top:calc(100% + 6px);
left:0;
min-width:200px;
max-height:400px;
overflow-y:auto;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--fbs);
z-index:100;
display:none;
}
.threats-filter-dropdown.open .threats-filter-menu{
display:block;
}
.threats-filter-item{
display:flex;
align-items:center;
gap:12px;
width:100%;
padding:12px 18px;
background:none;
border:none;
border-bottom:2px solid var(--bc1);
cursor:pointer;
font-family:var(--ff1);
font-size:15px;
color:var(--tx1);
text-align:left;
}
.threats-filter-item:last-child{
border-bottom:none;
}
.threats-filter-item:hover{
background-color:var(--hv1);
color:var(--cl1);
}
.threats-filter-item.active{
background-color:var(--ob1);
color:var(--cl1);
font-weight:600;
}
.threats-filter-item-icon{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.threats-filter-item-icon svg{
width:20px;
height:20px;
fill:var(--tx2);
}
.threats-filter-item:hover .threats-filter-item-icon svg,
.threats-filter-item.active .threats-filter-item-icon svg{
fill:var(--cl1);
}
.threats-filter-count{
margin-left:auto;
font-size:13px;
color:var(--tx3);
}
.threats-search{
position:relative;
flex:1;
min-width:0;
}
.threats-search-icon{
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:2;
}
.threats-search-icon svg{
width:26px;
height:26px;
fill:var(--tx2);
}
.threats-search-input{
width:100%;
height:64px;
padding:0 64px 0 60px;
font-size:20px;
font-family:var(--ff1);
background-color:var(--bg2);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
outline:none;
border-radius:var(--br0);
box-sizing:border-box;
box-shadow:var(--fbs);
}
.threats-search-input::placeholder{
color:var(--tx3);
}
.threats-search-input:focus{
border-color:var(--cl1);
}
.threats-search-input:focus~.threats-search-icon svg{
fill:var(--cl1);
}
.threats-search-clear{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
width:48px;
height:48px;
background-color:transparent;
border:none;
border-radius:50%;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
color:var(--tx2);
font-size:36px;
font-weight:400;
line-height:1;
padding:0;
z-index:2;
}
.threats-search-clear:hover{
color:var(--cl1);
background-color:var(--hv1);
}
.threats-search.has-value .threats-search-clear{
display:flex;
}
.threats-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:var(--gap);
margin:0 auto;
}
.threat-card{
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
padding:var(--gap);
display:flex;
flex-direction:column;
gap:var(--gd2);
box-shadow:var(--fbs);
}
.threat-card:hover{
border-color:var(--cl1);
}
.threat-card.hidden{
display:none;
}
.threat-card-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:var(--gd2);
}
.threat-card-badges{
display:flex;
gap:6px;
flex-wrap:wrap;
}
.threat-badge{
font-family:var(--ff2);
font-size:11px;
font-weight:700;
text-transform:uppercase;
padding:4px 10px;
border-radius:var(--br3);
letter-spacing:0.5px;
}
.threat-critical{
background:var(--rb2);
color:var(--rd1);
}
.threat-high{
background:rgba(255,152,0,0.15);
color:#ff9800;
}
.threat-medium{
background:rgba(255,193,7,0.15);
color:#ffc107;
}
.threat-low{
background:var(--gb1);
color:var(--cl3);
}
.status-active{
background:var(--rb2);
color:var(--rd1);
}
.status-patched{
background:var(--gb1);
color:var(--cl3);
}
.status-monitoring{
background:var(--bb2);
color:var(--lnk);
}
.threat-card-type{
font-family:var(--ff2);
font-size:14px;
font-weight:600;
color:var(--tx3);
text-transform:uppercase;
letter-spacing:0.5px;
}
.threat-card-body{
flex:1;
}
.threat-card-title{
font-family:var(--ff1);
font-size:var(--fz1);
font-weight:700;
margin:0 0 6px;
color:var(--tx1);
line-height:1.4;
}
.threat-card-cve{
display:inline-block;
font-family:var(--ff3);
font-size:14px;
background:var(--bg3);
padding:4px 10px;
border-radius:var(--br3);
color:var(--cl1);
margin-bottom:var(--gd2);
}
.threat-card-desc{
font-size:16px;
color:var(--tx2);
margin:0;
line-height:var(--lh1);
}
.threat-card-footer{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-end;
gap:var(--gd2);
margin-top:auto;
padding-top:var(--gd2);
border-top:var(--bw1) solid var(--bc1);
}
.threat-card-affected{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.threat-affected-tag{
display:inline-flex;
align-items:center;
gap:6px;
font-size:13px;
background:var(--bg3);
padding:4px 10px;
border-radius:var(--br3);
color:var(--tx2);
}
.threat-affected-icon{
width:14px;
height:14px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.threat-affected-icon svg{
width:14px;
height:14px;
fill:var(--tx2);
}
.threat-card-meta{
display:flex;
align-items:center;
gap:var(--gd2);
margin-left:auto;
}
.threat-card-date{
font-size:14px;
color:var(--tx3);
}
.threat-card-link{
display:flex;
align-items:center;
gap:5px;
font-size:14px;
font-weight:600;
color:var(--lnk);
}
.threat-card-link:hover{
text-decoration:underline;
text-decoration-thickness:1px;
}
.threat-card-link svg{
width:14px;
height:14px;
fill:var(--lnk);
stroke:var(--lnk);
}
.threats-empty,.threats-empty-filter{
text-align:center;
padding:var(--gt2);
color:var(--tx2);
font-size:var(--fz1);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--fbs);
margin:var(--gap) auto;
}
@media(max-width:900px){
.threats-grid{
grid-template-columns:1fr;
}
.threats-hero-stats{
gap:var(--gap);
}
.threats-stat{
min-width:100px;
}
.threats-stat-num{
font-size:36px;
}
}