/* ─── SECTION LABEL ─── */
.section-label {
  font-family:     'Syne', sans-serif;
  font-size:       10.5px;
  font-weight:     700;
  letter-spacing:  0.26em;
  text-transform:  uppercase;
  color:           var(--accent);
  margin-bottom:   1rem;
  display:         flex;
  align-items:     center;
  gap:             0.9rem;
}
.section-label::after {
  content:    '';
  display:    block;
  height:     2px;
  width:      2.5rem;
  background: var(--accent);
  opacity:    0.5;
  border-radius: 1px;
}

/* ─── DIVIDER ─── */
.divider {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     0 3rem;
}

/* ─── BUTTONS ─── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.45rem;
  padding:       0.7rem 1.6rem;
  font-family:   'Syne', sans-serif;
  font-size:     11.5px;
  font-weight:   600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius: 2px;
  transition:    all 0.2s;
  cursor:        pointer;
  border:        none;
}
.btn-primary {
  background: var(--accent);
  color:      var(--bg);
}
.btn-primary:hover { background: var(--accent-h); }

.btn-outline {
  background:  transparent;
  color:       var(--text);
  border:      1px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--accent);
  color:        var(--accent);
}
.btn-sm { padding: 0.5rem 1.1rem; font-size: 10.5px; }

/* ─── BADGES ─── */
.badge {
  font-size:      9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        2px 8px;
  border-radius:  2px;
  border:         1px solid;
  font-family:    'Syne', sans-serif;
  font-weight:    600;
}
.badge-pro   { border-color: var(--pro-badge); color: var(--accent); }
.badge-school{ border-color: var(--tag-border); color: var(--muted); }
.badge-data  { border-color: rgba(201,74,46,0.3); color: var(--accent2); }
.badge-web   { border-color: var(--badge-web-border); color: var(--badge-web-color); }
.badge-mobile{ border-color: var(--badge-mob-border); color: var(--badge-mob-color); }
.badge-game  { border-color: var(--badge-game-border); color: var(--badge-game-color); }

/* ─── TAGS ─── */
.tag {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        3px 10px;
  font-size:      11px;
  font-family:    'DM Mono', monospace;
  border:         1px solid var(--tag-border);
  border-radius:  2px;
  color:          var(--tag-text);
  letter-spacing: 0.02em;
  transition:     all 0.15s;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }
.tag i   { font-size: 13px; }
.tag img { width: 13px; height: 13px; object-fit: contain; }
.tag.hl  { border-color: var(--hl-border); color: var(--accent); }

/* ─── LINK BUTTONS ─── */
.link-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  font-size:      10.5px;
  font-family:    'Syne', sans-serif;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration:none;
  color:          var(--accent);
  border:         1px solid var(--hl-border);
  padding:        5px 14px;
  border-radius:  2px;
  transition:     all 0.15s;
}
.link-btn:hover { background: var(--link-hover); }

/* ─── CHIPS (contact) ─── */
.chip {
  display:     flex;
  align-items: center;
  gap:         0.7rem;
  font-size:   12.5px;
  color:       var(--muted);
  text-decoration: none;
  transition:  color 0.2s;
  font-family: 'DM Mono', monospace;
}
.chip:hover { color: var(--accent); }

.chip-icon {
  width:       30px;
  height:      30px;
  border:      1px solid var(--border);
  border-radius: 2px;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   11px;
  flex-shrink: 0;
  transition:  border-color 0.2s;
  color:       var(--muted);
}
.chip:hover .chip-icon { border-color: var(--accent); color: var(--accent); }

/* ─── SKILLS ─── */
.skill-group-title {
  font-family:    'Syne', sans-serif;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-top:     2.5rem;
  margin-bottom:  1rem;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid var(--border);
}

.skills-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap:                   0.6rem;
  margin-top:            0.4rem;
}

.skill-chip {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.45rem;
  background:     var(--card);
  border:         1px solid var(--border);
  border-radius:  3px;
  padding:        0.85rem 0.5rem;
  font-size:      10.5px;
  font-family:    'DM Mono', monospace;
  color:          var(--tag-text);
  letter-spacing: 0.02em;
  text-align:     center;
  transition:     all 0.2s;
  cursor:         default;
}
.skill-chip:hover {
  border-color:    var(--accent);
  color:           var(--accent);
  transform:       translateY(-2px);
  box-shadow:      0 4px 12px rgba(28,58,94,0.08);
}
[data-theme="dark"] .skill-chip:hover {
  box-shadow: 0 4px 12px rgba(90,159,212,0.1);
}
.skill-chip i   { font-size: 22px; }
.skill-chip img { width: 22px; height: 22px; object-fit: contain; }

/* Monochrome icons: dark on light bg, white on dark bg */
.icon-mono {
  filter: brightness(0) opacity(0.7);
}
[data-theme="dark"] .icon-mono {
  filter: brightness(0) invert(1) opacity(0.85);
}

/* ─── HIGHLIGHT BOX ─── */
.highlight-box {
  background:    rgba(28,58,94,0.05);
  border-left:   2px solid var(--accent);
  padding:       0.85rem 1.2rem;
  font-size:     12.5px;
  color:         var(--muted);
  margin:        1rem 0;
  border-radius: 0 2px 2px 0;
  line-height:   1.8;
}
[data-theme="dark"] .highlight-box {
  background: rgba(90,159,212,0.07);
}
.highlight-box strong { color: var(--accent); font-weight: 500; }

/* ─── IMAGE PLACEHOLDER ─── */
.img-placeholder {
  background:    var(--card);
  border:        1px dashed var(--border);
  border-radius: 4px;
  height:        160px;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  justify-content:center;
  gap:           0.4rem;
  font-size:     11px;
  color:         var(--muted);
  letter-spacing:0.05em;
  margin:        1.2rem 0;
  text-align:    center;
}