:root {
  --bg:          #080810;
  --bg-2:        #0d0d1a;
  --card:        rgba(18, 18, 32, 0.85);
  --border:      rgba(167,139,250,0.10);
  --border-h:    rgba(167,139,250,0.30);
  --accent:      #a78bfa;
  --accent-glow: rgba(167,139,250,0.20);
  --blue:        #60a5fa;
  --blue-glow:   rgba(96,165,250,0.15);
  --text:        #e2e8f0;
  --muted:       #7c8db5;
  --faint:       #3a4460;
  --nav-h:       68px;
  --pad:         clamp(1.5rem, 5vw, 4rem);
  --r:           16px;
  --r-lg:        22px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%, rgba(167,139,250,0.055) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 85%, rgba(96,165,250,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── SNOW ── */
#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  background: rgba(8,8,16,0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.logo-dino {
  font-size: 1.35rem;
  display: inline-block;
  animation: float 3.2s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.logo-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  background: linear-gradient(130deg, var(--accent) 30%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.nav-center a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.38rem 0.72rem;
  border-radius: 9px;
  transition: color .18s, background .18s;
  white-space: nowrap;
}
.nav-center a:hover {
  color: var(--text);
  background: rgba(167,139,250,0.09);
}

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.settings-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(167,139,250,0.09);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  border-radius: 9px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.settings-btn:hover {
  background: rgba(167,139,250,0.18);
  border-color: var(--accent);
}

/* ── LAYOUT ── */
.page { position: relative; z-index: 3; }

section {
  width: 100%;
  padding: calc(var(--nav-h) + 5rem) var(--pad) 5rem;
}
.wrap {
  max-width: 1160px;
  margin: 0 auto;
}

/* ── LABELS ── */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Syne', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── HOME ── */
#home {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
#home .wrap { padding: 2rem 0; }

.hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3.2rem, 9vw, 7.5rem);
  font-weight: 800;
  line-height: 0.93;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
  animation: riseIn .7s ease both;
}
.hero-title .grad {
  background: linear-gradient(130deg, var(--accent) 0%, var(--blue) 50%, var(--accent) 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  animation: gradFlow 9s ease infinite;
  transition: opacity .38s ease, filter .38s ease, transform .38s ease;
}
@keyframes gradFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-sub {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 490px;
  margin-bottom: 2.8rem;
  line-height: 1.75;
  animation: riseIn .7s .12s ease both;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(130deg, var(--accent), var(--blue));
  color: #06060f;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.88rem 2rem;
  border-radius: 12px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 0 35px rgba(167,139,250,0.28);
  animation: riseIn .7s .22s ease both;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 0 55px rgba(167,139,250,0.45); }
.cta-arrow { transition: transform .25s; }
.cta:hover .cta-arrow { transform: translateY(3px); }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Morphing background blobs — fixed, always visible */
.blob-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  transition: opacity .5s ease;
}
.blob-wrap.blob-off  { opacity: 0; }
.blob-wrap.blob-dim  { opacity: 0.28; }
.blob {
  position: absolute;
  pointer-events: none;
}
.blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle at 36% 38%,
    rgba(167,139,250,.62) 0%,
    rgba(124,58,237,.30) 38%,
    rgba(88,28,220,.08)  62%,
    transparent 75%);
  filter: blur(28px);
  top: -180px; left: -160px;
  animation: blobFloat1 18s ease-in-out infinite;
}
.blob-2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle at 55% 42%,
    rgba(96,165,250,.58) 0%,
    rgba(37,99,235,.25)  38%,
    rgba(29,78,216,.07)  62%,
    transparent 75%);
  filter: blur(26px);
  bottom: -120px; right: -140px;
  animation: blobFloat2 24s ease-in-out infinite;
  animation-delay: -9s;
}
.blob-3 {
  width: 420px; height: 420px;
  background: radial-gradient(circle at 50% 50%,
    rgba(192,132,252,.45) 0%,
    rgba(139,92,246,.18)  45%,
    transparent 70%);
  filter: blur(36px);
  top: 28%; left: 34%;
  animation: blobFloat3 30s ease-in-out infinite;
  animation-delay: -15s;
}

/* Each blob has its own floating path combining morph + movement */
@keyframes blobFloat1 {
  0%   { border-radius: 62% 38% 32% 68% / 62% 32% 68% 38%; transform: translate(  0px,   0px) scale(1.00) rotate(  0deg); }
  15%  { border-radius: 38% 62% 55% 45% / 48% 52% 42% 58%; transform: translate( 90px,  55px) scale(1.08) rotate(  5deg); }
  30%  { border-radius: 55% 45% 68% 32% / 35% 65% 55% 45%; transform: translate( 40px, 130px) scale(0.92) rotate( -6deg); }
  45%  { border-radius: 42% 58% 40% 60% / 60% 40% 65% 35%; transform: translate(150px,  80px) scale(1.06) rotate( 11deg); }
  60%  { border-radius: 65% 35% 48% 52% / 45% 55% 38% 62%; transform: translate( 80px, 180px) scale(0.94) rotate( -4deg); }
  75%  { border-radius: 32% 68% 60% 40% / 55% 45% 50% 50%; transform: translate(-30px, 120px) scale(1.10) rotate(  8deg); }
  90%  { border-radius: 50% 50% 35% 65% / 40% 60% 45% 55%; transform: translate( 60px,  50px) scale(0.96) rotate( -9deg); }
  100% { border-radius: 62% 38% 32% 68% / 62% 32% 68% 38%; transform: translate(  0px,   0px) scale(1.00) rotate(  0deg); }
}
@keyframes blobFloat2 {
  0%   { border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%; transform: translate(   0px,    0px) scale(1.00) rotate(  0deg); }
  20%  { border-radius: 40% 60% 42% 58% / 62% 38% 58% 42%; transform: translate(-110px,  -70px) scale(1.09) rotate( -7deg); }
  40%  { border-radius: 68% 32% 55% 45% / 42% 58% 35% 65%; transform: translate( -50px, -150px) scale(0.90) rotate(  6deg); }
  60%  { border-radius: 35% 65% 48% 52% / 58% 42% 62% 38%; transform: translate(-160px,  -90px) scale(1.07) rotate(-11deg); }
  80%  { border-radius: 58% 42% 38% 62% / 35% 65% 50% 50%; transform: translate( -80px, -180px) scale(0.93) rotate(  4deg); }
  100% { border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%; transform: translate(   0px,    0px) scale(1.00) rotate(  0deg); }
}
@keyframes blobFloat3 {
  0%   { border-radius: 50% 50% 50% 50%; transform: translate(   0px,    0px) scale(1.00) rotate(  0deg); }
  12%  { border-radius: 62% 38% 45% 55% / 55% 45% 62% 38%; transform: translate( -70px,   80px) scale(1.06) rotate(  7deg); }
  25%  { border-radius: 38% 62% 58% 42% / 42% 58% 35% 65%; transform: translate(  90px,  -60px) scale(0.93) rotate( -5deg); }
  37%  { border-radius: 55% 45% 38% 62% / 60% 40% 55% 45%; transform: translate( -50px, -100px) scale(1.08) rotate( 10deg); }
  50%  { border-radius: 45% 55% 62% 38% / 38% 62% 45% 55%; transform: translate( 110px,   70px) scale(0.90) rotate( -8deg); }
  62%  { border-radius: 68% 32% 50% 50% / 50% 50% 38% 62%; transform: translate( -90px,  120px) scale(1.05) rotate(  6deg); }
  75%  { border-radius: 40% 60% 42% 58% / 55% 45% 58% 42%; transform: translate(  60px,  -80px) scale(0.95) rotate(-10deg); }
  87%  { border-radius: 58% 42% 65% 35% / 45% 55% 40% 60%; transform: translate( -40px,   50px) scale(1.03) rotate(  3deg); }
  100% { border-radius: 50% 50% 50% 50%; transform: translate(   0px,    0px) scale(1.00) rotate(  0deg); }
}

/* Card hover shimmer */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.022), transparent);
  transform: skewX(-18deg);
  transition: left .65s ease;
  pointer-events: none;
}
.card:hover::before { left: 160%; }

/* Disable entry animations */
.no-anim .hero-title,
.no-anim .hero-sub,
.no-anim .cta {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.no-anim .hero-title .grad { animation: none !important; }

/* ── PROJECTS ── */
#projects { min-height: auto; padding-top: calc(var(--nav-h) + 3.5rem); }

.sec-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 0.8rem;
}
.sec-sub {
  color: var(--muted);
  font-size: 1rem;
  max-width: 520px;
  margin-bottom: 3rem;
  line-height: 1.7;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.4rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 2rem 1.75rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transition: transform .28s, border-color .28s, box-shadow .28s;
}
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity .28s;
}
.card:hover { transform: translateY(-5px); border-color: var(--border-h); box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 35px var(--accent-glow); }
.card:hover::after { opacity: 1; }

.card-icon { font-size: 2.4rem; margin-bottom: 1.1rem; display: block; }
.card-name {
  font-family: 'Syne', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
}
.card-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.72; margin-bottom: 1.4rem; }

.badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; }
.badge {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
}
.b-go     { background: rgba(0,173,216,.13); color:#00add8; border:1px solid rgba(0,173,216,.28); }
.b-wails  { background: rgba(167,139,250,.13); color:var(--accent); border:1px solid rgba(167,139,250,.28); }
.b-react  { background: rgba(97,218,251,.13); color:#61dafb; border:1px solid rgba(97,218,251,.28); }
.b-ts     { background: rgba(49,120,198,.13); color:#5094d0; border:1px solid rgba(49,120,198,.28); }
.b-js     { background: rgba(247,223,30,.12); color:#c8b820; border:1px solid rgba(247,223,30,.25); }
.b-java   { background: rgba(237,130,0,.12); color:#ed8200; border:1px solid rgba(237,130,0,.25); }
.b-jda    { background: rgba(114,137,218,.13); color:#7289da; border:1px solid rgba(114,137,218,.28); }
.b-mysql  { background: rgba(0,117,143,.13); color:#00a3c4; border:1px solid rgba(0,117,143,.28); }
.b-docker { background: rgba(13,183,237,.12); color:#0db7ed; border:1px solid rgba(13,183,237,.25); }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: gap .2s, color .2s;
}
.card-link:hover { gap: 0.6rem; color: var(--blue); }

/* ── CONTACT ── */
#contact { text-align: center; }
#contact .label::before { display: none; }
#contact .label { justify-content: center; }

.contact-desc {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 480px;
  margin: 0 auto 2.8rem;
  line-height: 1.75;
}
.contact-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(130deg, var(--accent), var(--blue));
  color: #06060f;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.82rem 1.7rem;
  border-radius: 11px;
  text-decoration: none;
  transition: transform .22s, box-shadow .22s;
  box-shadow: 0 0 26px rgba(167,139,250,.22);
}
.btn-a:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(167,139,250,.38); }

.btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(88,101,242,.12);
  color: #7289da;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.82rem 1.7rem;
  border-radius: 11px;
  border: 1px solid rgba(114,137,218,.3);
  cursor: pointer;
  transition: background .22s, border-color .22s, transform .22s;
}
.btn-discord:hover { background: rgba(88,101,242,.22); border-color: #7289da; transform: translateY(-2px); }

.discord-tag {
  margin-top: 1rem;
  color: var(--faint);
  font-family: 'Syne', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

/* ── ABOUT ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.about-bio { color: var(--muted); font-size: 1rem; line-height: 1.8; margin-bottom: 0.9rem; }
.about-bio.lead { font-size: 1.08rem; color: var(--text); }

.tech-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.6rem; }
.chip {
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Syne', sans-serif;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.25rem 0.65rem;
  transition: color .18s, border-color .18s;
}
.chip:hover { color: var(--accent); border-color: var(--border-h); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.6rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  transition: border-color .22s, box-shadow .22s;
}
.stat:hover { border-color: var(--border-h); box-shadow: 0 0 22px var(--accent-glow); }
.stat-num {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  background: linear-gradient(130deg, var(--accent), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.2rem;
}
.stat-lbl { color: var(--muted); font-size: 0.78rem; font-weight: 500; }

/* Privacy "0" stat */
.stat--privacy {
  animation: privacyPulse 3.2s ease-in-out infinite;
}
@keyframes privacyPulse {
  0%,100% { border-color: rgba(74,222,128,.14); box-shadow: 0 0 14px rgba(74,222,128,.08); }
  50%      { border-color: rgba(74,222,128,.42); box-shadow: 0 0 32px rgba(74,222,128,.22); }
}
.stat-num--privacy {
  background: linear-gradient(90deg, #4ade80 0%, #22d3ee 40%, #4ade80 80%, #22d3ee 120%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: privacyShimmer 2.8s linear infinite;
}
@keyframes privacyShimmer {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}

/* ── FOOTER ── */
footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border);
  padding: 1.8rem var(--pad);
}
.foot-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--faint);
  font-size: 0.84rem;
}
.foot-links { display: flex; gap: 1.5rem; }
.foot-links a { color: var(--faint); text-decoration: none; cursor: pointer; transition: color .18s; }
.foot-links a:hover { color: var(--accent); }

/* ── MODALS ── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,6,14,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
}
.overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: #11111e;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.2rem;
  max-width: 580px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  transform: translateY(18px);
  transition: transform .28s;
}
.overlay.open .modal { transform: translateY(0); }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.modal-head h2 { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 700; }
.modal-x {
  background: rgba(167,139,250,.08);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 30px; height: 30px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s;
}
.modal-x:hover { background: rgba(167,139,250,.18); color: var(--text); }

.modal-body { color: var(--muted); font-size: 0.88rem; line-height: 1.82; }
.modal-body h3 {
  font-family: 'Syne', sans-serif;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1.3rem 0 0.35rem;
}
.modal-body h3:first-of-type { margin-top: 0; }
.modal-body p { margin-bottom: 0.4rem; }
.modal-body .em { color: var(--accent); font-weight: 600; }
.no-data {
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.2);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
  color: var(--text);
  font-weight: 500;
  font-size: 0.88rem;
}

/* ── SETTINGS BACKDROP ── */
.set-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6,6,14,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
}
.set-backdrop.open { opacity: 1; pointer-events: all; }

/* ── SETTINGS PANEL ── */
.set-panel {
  position: fixed;
  top: 0; right: 0;
  width: 310px;
  height: 100vh;
  background: #0e0e1c;
  border-left: 1px solid var(--border);
  z-index: 130;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.set-panel.open { transform: translateX(0); }

.set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 1.2rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: #0e0e1c;
  z-index: 1;
}
.set-head span {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.set-close {
  background: rgba(167,139,250,.08);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px; height: 28px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s;
}
.set-close:hover { background: rgba(167,139,250,.18); color: var(--text); }

.set-section {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.set-lbl {
  font-family: 'Syne', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.set-row:last-child { margin-bottom: 0; }

/* Toggle switch */
.sw { position: relative; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw-track {
  position: absolute;
  inset: 0;
  background: var(--faint);
  border-radius: 11px;
  transition: background .22s;
}
.sw-track::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: left .22s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.sw input:checked + .sw-track { background: var(--accent); }
.sw input:checked + .sw-track::after { left: 21px; }

/* Button groups */
.btn-group { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.btn-group.sm .grp-btn { font-size: 0.72rem; padding: 0.22rem 0.5rem; }
.grp-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 7px;
  cursor: pointer;
  transition: all .18s;
}
.grp-btn:hover { border-color: var(--accent); color: var(--accent); }
.grp-btn.active { background: rgba(167,139,250,.15); border-color: var(--accent); color: var(--accent); }

/* Disabled density row */
#densityRow.dim { opacity: 0.35; pointer-events: none; }

/* Color pickers */
.color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.color-pick { display: flex; align-items: center; gap: 0.5rem; }
.color-pick input[type="color"] {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
  background: transparent;
  cursor: pointer;
}
.color-hex {
  font-family: 'Syne', sans-serif;
  font-size: 0.68rem;
  color: var(--faint);
  min-width: 52px;
}

.reset-colors-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.38rem 0.8rem;
  border-radius: 7px;
  cursor: pointer;
  margin-top: 0.6rem;
  transition: all .18s;
}
.reset-colors-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Settings footer */
.set-footer {
  padding: 1.25rem 1.5rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
}
.reset-all-btn {
  width: 100%;
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.25);
  color: #f87171;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.65rem 1rem;
  border-radius: 9px;
  cursor: pointer;
  transition: all .18s;
}
.reset-all-btn:hover { background: rgba(248,113,113,.16); border-color: #f87171; }

/* ── SEARCH BUTTON ── */
.srch-btn {
  background: rgba(167,139,250,.09);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 34px; height: 34px;
  border-radius: 9px;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
  flex-shrink: 0;
}
.srch-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(167,139,250,.14); }

/* ── SEARCH OVERLAY ── */
.srch-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,6,14,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 1rem 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.srch-overlay.open { opacity: 1; pointer-events: all; }

.srch-box {
  background: #0e0e1c;
  border: 1px solid var(--border-h);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  transform: translateY(-14px);
  transition: transform .22s;
  box-shadow: 0 28px 80px rgba(0,0,0,.65);
}
.srch-overlay.open .srch-box { transform: translateY(0); }

.srch-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.srch-ic { color: var(--muted); font-size: 1.2rem; flex-shrink: 0; }
.srch-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
}
.srch-row input::placeholder { color: var(--faint); }
kbd#srchEsc {
  background: rgba(167,139,250,.07);
  border: 1px solid var(--border);
  color: var(--faint);
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

.srch-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 0.4rem;
}
.srch-hint {
  color: var(--faint);
  font-size: 0.85rem;
  text-align: center;
  padding: 1.5rem;
}
.srch-group {
  font-family: 'Syne', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0.55rem 0.9rem 0.2rem;
}
.srch-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--r);
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  text-align: left;
  transition: background .14s;
  gap: 0.15rem;
}
.srch-item:hover,
.srch-item:focus { background: rgba(167,139,250,.08); outline: none; }
.srch-cat {
  font-family: 'Syne', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.srch-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.srch-preview {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── CARD PREVIEW PLACEHOLDER ── */
.card-preview {
  height: 140px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 1.4rem;
  padding: 0.65rem 0.85rem 0.85rem;
  background: rgba(8,8,18,0.75);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.card-preview--blue  { background: rgba(6,10,22,0.85); }
.card-preview--discord { background: rgba(6,8,20,0.85); }

.cprev-bar { display: flex; gap: 5px; margin-bottom: 0.3rem; flex-shrink: 0; }
.cprev-bar b { width: 8px; height: 8px; border-radius: 50%; display: block; }
.cprev-bar b:nth-child(1) { background: rgba(255,95,86,.55); }
.cprev-bar b:nth-child(2) { background: rgba(255,189,46,.55); }
.cprev-bar b:nth-child(3) { background: rgba(39,201,63,.55); }

.cprev-line {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  width: var(--w, 100%);
  display: block;
  flex-shrink: 0;
}
.cprev-hi { background: rgba(167,139,250,.22); }

/* NovaWave waveform bars */
.cprev-wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  margin-top: auto;
}
.cprev-wave i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: rgba(96,165,250,.35);
  height: var(--h, 50%);
  display: block;
}
.cprev-wave i:nth-child(4) { background: rgba(96,165,250,.65); }

/* Green Dino chat bubbles */
.cprev-chat {
  height: 8px;
  border-radius: 8px;
  width: var(--w, 60%);
  display: block;
  flex-shrink: 0;
}
.cprev-chat--in  { background: rgba(114,137,218,.3); align-self: flex-start; }
.cprev-chat--out { background: rgba(167,139,250,.2); align-self: flex-end; margin-left: auto; }

/* ── SCROLL ANIMATIONS ── */
[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-anim].in-view { opacity: 1; transform: none; }
[data-anim][data-delay="1"] { transition-delay: .12s; }
[data-anim][data-delay="2"] { transition-delay: .24s; }
[data-anim][data-delay="3"] { transition-delay: .36s; }

.no-anim [data-anim] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── SCROLLSPY ── */
.nav-center a.spy-active {
  color: var(--text);
  background: rgba(167,139,250,0.09);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── SKILLS ── */
.skills-wrap {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}
.skills-lbl {
  font-family: 'Syne', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2rem;
}
.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 4rem;
}
.skill { display: flex; flex-direction: column; gap: 0.45rem; }
.skill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.skill-info > span:first-child {
  font-family: 'Syne', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}
.s-pct {
  font-family: 'Syne', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg,
    var(--accent)  0%,
    var(--blue)   40%,
    var(--accent) 80%,
    var(--blue)  120%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pctShimmer 3.5s linear infinite;
}
@keyframes pctShimmer {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}
.skill-track {
  height: 5px;
  background: rgba(167,139,250,.1);
  border-radius: 3px;
  overflow: hidden;
}
.skill-bar {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  transition: width 1.15s cubic-bezier(.22, 1, .36, 1);
}
.skills-wrap.go .skill-bar { width: calc(var(--p) * 1%); }
.skill:nth-child(1)  .skill-bar { transition-delay: 0.00s; }
.skill:nth-child(2)  .skill-bar { transition-delay: 0.07s; }
.skill:nth-child(3)  .skill-bar { transition-delay: 0.14s; }
.skill:nth-child(4)  .skill-bar { transition-delay: 0.21s; }
.skill:nth-child(5)  .skill-bar { transition-delay: 0.28s; }
.skill:nth-child(6)  .skill-bar { transition-delay: 0.35s; }
.skill:nth-child(7)  .skill-bar { transition-delay: 0.42s; }
.skill:nth-child(8)  .skill-bar { transition-delay: 0.49s; }
.skill:nth-child(9)  .skill-bar { transition-delay: 0.56s; }

/* ── CARD IMAGE PREVIEW ── */
.card-preview-img {
  height: 160px;
  border-radius: 10px;
  margin-bottom: 1.4rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color .25s;
}
.card-preview-img:hover { border-color: var(--border-h); }
.card-preview-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .35s ease;
}
.card-preview-img:hover img { transform: scale(1.03); }
.cprev-zoom {
  position: absolute;
  inset: 0;
  background: rgba(8,8,16,.52);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  opacity: 0;
  transition: opacity .22s;
}
.card-preview-img:hover .cprev-zoom { opacity: 1; }

/* ── CARD HEAD ── */
.card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.card-app-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}
.card-head .card-name { margin-bottom: 0; }

/* ── ABOUT AVATAR ── */
.about-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-h);
  margin-bottom: 1.4rem;
  display: block;
  box-shadow: 0 0 28px var(--accent-glow);
}

/* ── LIGHTBOX ── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4,4,12,.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lb-wrap {
  max-width: min(90vw, 1100px);
  max-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 80px;
}
#lbImg {
  max-width: 100%;
  max-height: 84vh;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
  object-fit: contain;
  transition: opacity .18s;
}
.lb-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
  z-index: 1;
}
.lb-close:hover { background: rgba(255,255,255,.16); }
.lb-prev, .lb-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  width: 50px; height: 50px;
  border-radius: 13px;
  font-size: 1.7rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, opacity .18s;
  z-index: 1;
}
.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.14); }
.lb-prev:disabled, .lb-next:disabled { opacity: 0.18; cursor: default; }
.lb-counter {
  position: absolute;
  bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 0.28rem 0.85rem;
  font-family: 'Syne', sans-serif;
  font-size: 0.74rem;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .nav-center { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .set-panel { width: 100%; }
  .settings-btn span { display: none; }
  .skills-grid { grid-template-columns: 1fr; }
}