:root {
  --primary: #0d9488;
  --accent: #f59e0b;
  --bg-body: #f0fdfa;
  --bg-card: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border: #ccfbf1;
  --radius: 12px;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --c1: #0ea5e9;
  --c2: #f59e0b;
  --c3: #ec4899;
  --c4: #8b5cf6;
}

* { margin:0; padding:0; box-sizing:border-box; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; }

/* HEADER */
header { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); position: sticky; top:0; z-index:1000; border-bottom: 1px solid var(--border);}
.nav-container { max-width:1200px; margin:0 auto; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center;}
.logo { font-weight:800; font-size:1.2rem; color:var(--primary); letter-spacing:-0.5px; }
.btn-cv { background: var(--primary); color:white; text-decoration:none; padding:10px 20px; border-radius:30px; font-weight:600; font-size:0.9rem; transition:0.3s; box-shadow:0 4px 15px rgba(13,148,136,0.3);}
.btn-cv:hover { transform: translateY(-2px); background: #115e59;}
.btn-cv i { margin-right:8px; }

/* HERO */
.hero { text-align:center; padding:6rem 2rem 4rem; max-width:800px; margin:0 auto; }
.hero h1 { font-size:3.5rem; line-height:1.1; margin-bottom:1rem; color: var(--text-main); letter-spacing:-1px;}
.hero span { color: var(--primary); }
.hero p { font-size:1.2rem; color: var(--text-muted); margin-bottom:2rem; }

/* LAYOUT */
.container { max-width:1200px; margin:0 auto; padding:3rem 2rem; }
h2 { font-size:2rem; margin-bottom:2rem; font-weight:700; display:flex; align-items:center; gap:12px;}
h2::before { content:''; display:block; width:6px; height:24px; background:var(--accent); border-radius:4px; }

/* TIMELINE */
.timeline { border-left: 2px solid var(--border); margin-left: 10px; padding-left: 30px; }
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-dot { position: absolute; left: -37px; top:5px; width:16px; height:16px; background:var(--bg-body); border:3px solid var(--primary); border-radius:50%; }
.timeline-date { font-size:0.85rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; display:block; }
.timeline-content h3 { font-size:1.2rem; font-weight:700; margin-bottom:5px; }
.timeline-content p { color:var(--text-muted); margin:0; }

/* DASHBOARD */
.grid-dashboard { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:24px; }
.card { background:var(--bg-card); padding:1.5rem; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); display:flex; flex-direction:column; }
.card-title { font-size:0.9rem; font-weight:600; color:var(--text-muted); margin-bottom:1rem; text-transform:uppercase; }
.chart-wrap { flex:1; position:relative; min-height:250px; }

/* SKILLS SELECTOR */
.skills-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:15px; }
.skill-btn { background:white; border:1px solid var(--border); padding:15px; border-radius:12px; cursor:pointer; transition:0.2s; text-align:center; }
.skill-btn:hover { border-color:var(--primary); transform: translateY(-3px); }
.skill-btn.active { background: var(--primary); color:white; border-color: var(--primary); box-shadow: 0 10px 20px rgba(13,148,136,0.3); }
.skill-btn strong { font-size:1.5rem; display:block; line-height:1; margin-bottom:5px; }
.skill-btn[data-id="C1"] strong { color: var(--c1); }
.skill-btn[data-id="C2"] strong { color: var(--c2); }
.skill-btn[data-id="C3"] strong { color: var(--c3); }
.skill-btn[data-id="C4"] strong { color: var(--c4); }
.skill-btn.active strong { color:white !important; }

/* DETAILS PANEL */
#details-section { display:none; background:white; border-radius:20px; padding:3rem; box-shadow:var(--shadow); border:1px solid var(--border); animation: slideUp 0.5s ease forwards; margin-top:40px; }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.details-layout { display:grid; grid-template-columns:1.5fr 1fr; gap:4rem; }

/* COURSES */
.course-container { background:#f8fafc; border:1px solid var(--border); border-radius:8px; padding:15px; margin-bottom:30px; }
.course-list { max-height:180px; overflow-y:auto; list-style:none; }
.course-item { display:flex; justify-content:space-between; align-items:center; font-size:0.9rem; padding:6px 0; border-bottom:1px solid #e2e8f0; }
.course-item:last-child { border-bottom:none; }
.sem-badge { font-size:0.7rem; font-weight:bold; background:var(--text-muted); color:white; padding:2px 6px; border-radius:4px; margin-right:8px; }

.ac-item { padding:12px; border-radius:8px; margin-bottom:8px; cursor:pointer; transition:0.2s; display:flex; gap:10px; align-items:center; border:1px solid transparent; }
.ac-item:hover { background:#f0fdfa; border-color:var(--border); color:var(--primary);}
.ac-item i { color:var(--accent); }

.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:10px; margin-top:15px; }
.gallery-img { width:100%; height:100px; object-fit:cover; border-radius:8px; cursor:zoom-in; border:2px solid transparent; transition:0.3s; background-color:#eee; }
.gallery-img:hover { border-color: var(--primary); transform:scale(1.05); }

@media (max-width:768px) { .grid-dashboard, .details-layout { grid-template-columns:1fr; } .hero h1 { font-size:2.5rem; } }