:root{
    --bg:#0f1724;
    --card:#0b1220;
    --muted:#9aa7c7;
    --accent1:#7c3aed;
    --accent2:#06b6d4;
    --glass: rgba(255,255,255,0.03);
    --glass-2: rgba(255,255,255,0.02);
    --radius:14px;
}
*{box-sizing:border-box}
html,body{
    height:100%;
    margin:0;
    font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
    color:#e6eef8;
    background:
        radial-gradient(800px 400px at 10% 10%, rgba(124,58,237,0.08), transparent),
        radial-gradient(600px 300px at 95% 90%, rgba(6,182,212,0.05), transparent),
        var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.wrap{
    max-width:1100px;
    margin:36px auto;
    padding:28px;
    display:grid;
    grid-template-columns:320px 1fr;
    gap:28px
}
.sidebar{
    background:linear-gradient(180deg,var(--glass),var(--glass-2));
    border-radius:var(--radius);
    padding:28px;
    backdrop-filter:blur(6px);
    box-shadow:0 6px 30px rgba(2,6,23,0.6)
}
.main{
    padding:26px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-radius:var(--radius);
    box-shadow:0 6px 30px rgba(2,6,23,0.6)
}
.avatar{
    width:110px;
    height:110px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--accent1),var(--accent2));
    color:white;
    font-weight:800;
    font-size:34px;
    margin-bottom:18px;
    box-shadow:0 8px 30px rgba(12,10,30,0.6)
}
h1{margin:0;font-size:22px}
.role{color:var(--muted);margin-top:6px;font-size:13px}
.contact{margin-top:18px;font-size:14px;color:var(--muted);display:grid;gap:8px}
.chip{display:flex;gap:10px;align-items:center}
.chip svg{opacity:0.85}
.divider{
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent);
    margin:18px 0;
    border-radius:2px
}
.skills{display:grid;gap:10px}
.skill{display:flex;flex-direction:column;gap:6px}
.progress{height:10px;background:rgba(255,255,255,0.04);border-radius:999px;overflow:hidden}
.bar{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent1),var(--accent2));
    width:60% /* This width is a placeholder and should be defined inline in HTML for skill percentage */
}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{
    background:rgba(255,255,255,0.03);
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    color:var(--muted)
}
.cta{display:flex;gap:10px;margin-top:18px}
.btn{
    padding:10px 14px;
    border-radius:10px;
    background:linear-gradient(90deg,var(--accent1),var(--accent2));
    color:white;
    border:none;
    cursor:pointer;
    font-weight:600;
    box-shadow:0 6px 18px rgba(124,58,237,0.15)
}
.btn.ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    color:var(--muted);
    box-shadow:none
}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.section{margin-bottom:18px}
.summary{color:var(--muted);line-height:1.5}
.timeline{display:grid;gap:12px}
.item{
    padding:12px;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:12px
}
.item h3{margin:0;font-size:15px}
.item .meta{color:var(--muted);font-size:13px}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{
    padding:12px;
    border-radius:12px;
    background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
    box-shadow:inset 0 -1px 0 rgba(255,255,255,0.02)
}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{
    font-size:12px;
    padding:6px 8px;
    border-radius:8px;
    background:rgba(255,255,255,0.02);
    color:var(--muted)
}
footer{color:var(--muted);font-size:13px;margin-top:18px;text-align:center}
/* responsive */
@media (max-width:900px){
    .wrap{grid-template-columns:1fr;padding:18px}
    .sidebar{order:2}
    .main{order:1}
}
/* animations */
.fade-in{animation:fade .7s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* print */
@media print{
    body{background:white;color:black}
    .wrap,.sidebar,.main{box-shadow:none;background:transparent;padding:0}
    .cta,.badges, .tags, footer {display:none}
}