:root{
  --bg: #0f1724;
  --text: #e6eef8;
  --heading: #ffffff;
  --muted: #9ca3af;

  --accent: #7c3aed;
  --accent-2: #5b21b6;
  --accent-hover: #6d28d9;

  --nav-bg: rgba(8,10,20,0.82);
  --card-bg: #0b1220;
  --glass: rgba(255,255,255,0.035);
  --input-bg: #071022;

  --shadow: 0 6px 20px rgba(2,6,23,0.6);
  --shadow-lg: 0 12px 30px rgba(2,6,23,0.65);
  --rim: 0 6px 18px rgba(255,255,255,0.04);

  --status-available: #22c55e;
  --radius: 12px;
  --transition: 220ms;
}

body.light{
  --bg: #f4f6fb;
  --text: #0b1220;
  --heading: #0b1220;
  --muted: #4b5563;

  --accent: #4f46e5;
  --accent-2: #4338ca;
  --accent-hover: #3730a3;

  --nav-bg: rgba(255,255,255,0.92);
  --card-bg: #ffffff;
  --glass: rgba(15,23,42,0.03);
  --input-bg: #cacaca2d;

  --shadow: 0 8px 22px rgba(2,6,23,0.12);
  --shadow-lg: 0 18px 40px rgba(2,6,23,0.12);
  --rim: 0 6px 18px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition) ease, color var(--transition) ease;
}

.muted{ color:var(--muted); }
.accent{ color:var(--accent); }
.btn-accent{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  background: linear-gradient(90deg,var(--accent), var(--accent-2));
  color: white; font-weight:600;
  padding: .6rem 1.05rem; border-radius:10px;
  border: none; cursor:pointer; transition: transform 150ms ease, box-shadow 180ms;
}
.btn-accent:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.show-focus button:focus, .show-focus a:focus, .show-focus input:focus, .show-focus textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--accent) 25%, white 25%);
  outline-offset: 4px;
  border-radius: 8px;
}

nav { z-index:60; }
.nav-bg{
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
nav a { color: var(--text); text-decoration:none; }
nav .muted{ color: var(--muted); transition: color 140ms; }
nav .muted:hover{ color: var(--accent); }

.card-bg{
  background: linear-gradient(180deg, var(--card-bg), color-mix(in srgb, var(--card-bg) 92%, black 2%));
  border-radius: calc(var(--radius) * 1.5);
  padding: 1rem;
  box-shadow: var(--rim), var(--shadow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-bg:hover{ transform: translateY(-6px); box-shadow: var(--rim), var(--shadow-lg); }

#wrapper-profile img{
  border-radius: 999px;
  display:block;
}

.status-dot{
  width: .7rem; height: .7rem; border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(34,197,94,0.06);
  display:inline-block;
}

.timeline{ position: relative; padding-left: 2.5rem; }
.timeline::before{
  content: '';
  position: absolute;
  left: 1rem;
  top: 0.8rem;
  bottom: 0.2rem;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent 80%);
  opacity: 0.95;
  border-radius: 4px;
  transition: background 200ms;
}
.timeline .timeline-node{
  position: absolute;
  left: calc(1rem - 1.1rem);
  top: 0;
}

.course-card{
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--rim), var(--shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
  position: relative;
}
.course-card:hover{ transform: translateY(-4px); box-shadow: var(--rim), var(--shadow-lg); }
.course-toggle{ cursor:pointer; }

.chip{
  padding: .28rem .6rem;
  border-radius: 999px;
  font-weight:650;
  font-size: .82rem;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform 120ms;
}
.chip:hover{ transform: translateY(-2px); }

.course-details.hidden{ display:none; }

.skill-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.skill-name{ font-weight:600; }
.skill-years{ color:var(--muted); font-size:.95rem; }

article.card-project img{ display:block; width:100%; height:11.5rem; object-fit:cover; }
.card-project{
  border-radius: 14px;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
  box-shadow: var(--rim), var(--shadow);
}
.card-project:hover{ transform: translateY(-6px) scale(1.01); box-shadow: var(--rim), var(--shadow-lg); }

.scroll-x{
  overflow-x:auto; white-space:nowrap; scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.scroll-x::-webkit-scrollbar{ height:10px; }
.scroll-x::-webkit-scrollbar-thumb{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:10px; }

.modal-backdrop{
  position: fixed; inset:0;
  background: linear-gradient(180deg, rgba(1,4,9,0.6), rgba(1,4,9,0.75));
  display:flex; align-items:center; justify-content:center;
  z-index:120; padding: 1.25rem;
}
.modal{
  max-width:1100px; width:100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(2,6,23,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.modal .p-ctr{ padding: 1rem; }
.modal iframe, .modal img{ border-radius: 8px; }

#closeModal{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  padding: .4rem .7rem;
  border-radius: 8px;
  cursor:pointer;
}

input, textarea{
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.05);
  padding: .65rem;
  border-radius: 10px;
  transition: box-shadow 150ms, border-color 150ms;
}
input:focus, textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, white 10%);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 22%, transparent 80%);
}

.exp-item{
  border-left: 3px solid rgba(255,255,255,0.04);
  padding-left: 1rem;
  margin-bottom: 1.4rem;
  transition: transform 180ms ease;
}
.exp-item:hover{ transform: translateX(4px); }

.kicker{ font-size:.9rem; color:var(--muted); }
.small{ font-size:.92rem; color:var(--muted); }

@media (max-width: 900px){
  .card-bg{ padding: .8rem;}
  .modal{ width: 95%; }
}
@media (max-width: 768px){
  .timeline{ padding-left: 1.5rem; }
  .timeline::before{ left: .6rem; top: .6rem; bottom: .2rem; }
  .grid-cols-2-mobile { grid-template-columns: 1fr; } 
}