/* ==========================================
SKILLS SECTION
THEME SUPPORT ENABLED
========================================== */

.skills-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:24px;
}


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

.skill-category-card{

display:flex;
flex-direction:column;

min-height:
420px;

padding:
24px;

background:
var(--bg-card);

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

border-radius:
24px;

backdrop-filter:
blur(12px);

transition:
.3s;

}


.skill-category-card:hover{

transform:
translateY(-6px);

border-color:
var(--border-hover);

box-shadow:
var(--glow);

}



.skill-category-card h3{

font-size:
1.8rem;

margin-bottom:
28px;

color:
var(--text-bright);

}



.skill-preview{

flex:1;

}



/* =====================
ITEM
===================== */

.preview-item{

padding:
14px 0;

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

}



.preview-top{

display:flex;

justify-content:
space-between;

align-items:
center;

margin-bottom:
12px;

gap:
10px;

}



.preview-name{

display:flex;

align-items:
center;

gap:
10px;

font-size:
15px;

color:
var(--text-main);

}



.preview-meta{

display:flex;

align-items:
center;

gap:
10px;

}



.skill-percent{

font-size:
13px;

opacity:
.8;

color:
var(--text-muted);

}



/* =====================
LEVELS
===================== */

.skill-level{

padding:
5px 10px;

font-size:
10px;

border-radius:
999px;

white-space:
nowrap;

font-weight:
600;

}


.level-beginner{

color:
var(--theme-warning);

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

}


.level-intermediate{

color:
var(--theme-secondary);

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

}


.level-advanced{

color:
var(--theme-primary);

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

}


.level-expert{

color:
lime;

border:
1px solid lime;

}



/* =====================
BAR
===================== */

.preview-bar{

width:
100%;

height:
8px;

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

border-radius:
999px;

overflow:
hidden;

}



.preview-fill{

width:
0;

height:
100%;

background:
linear-gradient(

90deg,

var(--theme-primary),

var(--theme-secondary)

);

border-radius:
999px;

transition:
width 1.2s ease;

box-shadow:
var(--glow);

}



/* =====================
BUTTON
===================== */

.view-skills-btn{

margin-top:
auto;

width:
100%;

padding:
14px;

background:
transparent;

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

border-radius:
14px;

color:
var(--theme-primary);

cursor:
pointer;

transition:
.3s;

}


.view-skills-btn:hover{

background:
rgba(
var(--accent-rgb),
0.08);

}



/* =====================
MODAL
===================== */

.skills-modal{

display:none;

position:fixed;

inset:0;

background:
rgba(
0,0,0,.92);

backdrop-filter:
blur(12px);

z-index:
9999;

justify-content:
center;

align-items:
center;

padding:
20px;

}



.skills-modal-content{

width:
950px;

max-width:
95%;

max-height:
85vh;

overflow:
auto;

background:
linear-gradient(

180deg,

var(--bg-card),

var(--bg-card-solid)

);

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

border-radius:
28px;

padding:
40px;

position:
relative;

box-shadow:
var(--glow);

}



/* CLOSE */

.skills-modal-close{

position:
absolute;

top:
25px;

right:
25px;

width:
48px;

height:
48px;

border-radius:
50%;

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

background:
transparent;

font-size:
24px;

color:
var(--text-main);

cursor:
pointer;

}



/* TITLE */

.skills-modal-body h2{

font-size:
2rem;

margin-bottom:
30px;

color:
var(--text-bright);

}



/* SKILL */

.modal-skill{

display:grid;

grid-template-columns:

220px
1fr
70px
140px;

gap:
20px;

align-items:
center;

padding:
18px 0;

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

color:
var(--text-main);

}



/* BAR */

.modal-bar{

height:
10px;

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

border-radius:
999px;

overflow:
hidden;

}



.modal-bar div{

height:
100%;

background:
linear-gradient(

90deg,

var(--theme-primary),

var(--theme-secondary)

);

box-shadow:
var(--glow);

}



/* FOOTER */

.skills-modal-footer{

display:flex;

justify-content:
space-between;

align-items:
center;

margin-top:
40px;

}



.modal-btn{

padding:
14px 28px;

background:
transparent;

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

color:
var(--theme-primary);

border-radius:
14px;

cursor:
pointer;

transition:
.3s;

}


.modal-btn:hover{

background:
rgba(
var(--accent-rgb),
0.08);

transform:
translateY(-2px);

}



#modal-counter{

font-size:
1rem;

opacity:
.8;

color:
var(--text-muted);

}