:root{
    --bg:#f6f8ff; --card:#fff; --text:#243447; --muted:#6b7a91; --accent:#0079ff;
    --glass: rgba(255,255,255,0.6);
}
*{box-sizing:border-box; font-family:'Space Mono', monospace}
body{margin:0; background:linear-gradient(180deg,#eaf0ff 0%,var(--bg)100%); color:var(--text); min-height:100vh}
.app{max-width:1100px; margin:20px auto; padding:18px}
header{display:flex; justify-content:space-between; align-items:center; gap:12px}
.titleBlock h1{margin:0; font-size:18px}
.subtitle{margin:0; font-size:12px; color:var(--muted)}
.controls{display:flex; gap:8px; align-items:center}
.controls input{padding:10px 12px; border-radius:8px; border:1px solid #d6e0ff; width:320px}
.controls button{background:var(--accent); color:#fff; border:none; padding:9px 12px; border-radius:8px; cursor:pointer}
.grid{display:grid; grid-template-columns:360px 1fr; gap:14px; margin-top:14px}
.card{background:var(--card); padding:14px; border-radius:12px; box-shadow:0 8px 30px rgba(20,30,60,0.06)}
.leftCard{display:flex; flex-direction:column; gap:12px}
.profileTop{display:flex; align-items:center; gap:12px}
.avatar{width:84px; height:84px; border-radius:12px; overflow:hidden; background:#eee; flex-shrink:0}
.avatar img{width:100%; height:100%; object-fit:cover}
.profileMeta{flex:1}
.fullname{font-weight:700}
.username{color:var(--accent); text-decoration:none}
.badgeWrap{text-align:right}
.badge{background:linear-gradient(90deg,#f0f6ff,#eef9ff); padding:6px 8px; border-radius:999px; font-weight:700}

.bio{line-height:1.35; color:var(--muted)}

.statsRow{display:flex; gap:10px; margin-top:6px}
.stat{flex:1; background:#f6f9ff; padding:8px; border-radius:8px; text-align:center}
.small{font-size:12px}
.muted{color:var(--muted)}
.big{font-weight:700; font-size:18px}

.actions{display:flex; gap:8px; flex-wrap:wrap}
.actions button{background:#fff; border:1px solid #e6eefc; padding:8px 10px; border-radius:8px; cursor:pointer}

.section{margin-top:8px}
.sectionTitle{margin-bottom:8px}

.langWrap{display:flex; gap:8px; flex-wrap:wrap}
.pill{background:#f4f8ff; padding:6px 8px; border-radius:999px; font-size:12px}

.repos-list{max-height:220px; overflow:auto; margin-top:6px}
.repo{padding:8px; border-radius:8px; border:1px solid #f0f4ff; margin-bottom:8px; display:flex; justify-content:space-between}
.repo a{color:var(--accent); text-decoration:none}

.history{display:flex; gap:6px; flex-wrap:wrap}
.history .pill{cursor:pointer}

.rightColumn{display:flex; flex-direction:column; gap:12px}
.cardHeader{display:flex; justify-content:space-between; align-items:center}
.typing .dot{display:inline-block;width:6px;height:6px;background:var(--accent); border-radius:6px;margin-right:4px; animation:blink 1s infinite}
@keyframes blink{0%{opacity:0.25}50%{opacity:1}100%{opacity:0.25}}

.analyticsGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px}
.analytic{padding:12px; border-radius:10px}
.highlight{background:linear-gradient(90deg,#fff9eb,#fff);}

.chartRow{display:flex; gap:12px; margin-top:12px}
.chartWrap{flex:1}
.mapWrap{width:260px}

.map{height:200px; border-radius:8px; overflow:hidden}

.cardFooter{display:flex; justify-content:space-between; align-items:center; margin-top:12px}
.footerButtons button{background:#fff; border:1px solid #e6eefc; padding:8px 10px; border-radius:8px; cursor:pointer}

.timelineCard .timeline{max-height:200px; overflow:auto; margin-top:8px}
.leaderboard .row{display:flex; justify-content:space-between; padding:6px 0; align-items:center}

.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:1000}
.modal.show{display:flex}
.modalPanel{width:720px; max-width:95%; background:#fff; border-radius:12px; padding:16px; max-height:80vh; overflow:auto}

/* responsive */
@media (max-width:920px){
    .grid{grid-template-columns:1fr}
    .controls input{width:160px}
    .mapWrap{display:none}
}
/* ========== ANIMATIONS / MICRO-INTERACTIONS ========== */
button:hover { transform: scale(1.04); transition: 0.2s ease; }
.card { transition: all 0.3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(20,30,60,0.12); }
.avatar img { transition: transform 0.4s ease; }
.avatar img:hover { transform: scale(1.08) rotate(2deg); }
.timelineCard .timeline div { animation: fadein 0.5s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(5px);} to { opacity: 1; transform: translateY(0);} }

/* Splash Loader */
#loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg,#eaf0ff,#f6f8ff);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity 0.6s ease;
}
#loader.hide { opacity: 0; pointer-events: none; }
.loader-content { text-align: center; }
.loader-content img { width: 90px; height: 90px; margin-bottom: 12px; }
.spin { animation: spin 2s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }