:root{
  --bg: #0f1724;
  --card: #0b1220;
  --muted: #9ca3af;
  --accent: #3b82f6;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --max-width: 980px;
  --gap: 16px;
  font-size: 16px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background: linear-gradient(180deg,#071024 0%, #071426 100%);color:#e6eef8}
  :root{
    --bg: #071025;
    --card: #071427;
    --card-2: #0b1220;
    --muted: #9ca3af;
    --accent: #3b82f6;
    --accent-2: #60a5fa;
    --glass: rgba(255,255,255,0.02);
    --radius: 14px;
    --max-width: 1160px;
    --gap: 20px;
    font-size: 16px;
  }
.card{transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(2,6,23,0.6)}
  . *,*::before,*::after{box-sizing:border-box}
  .container{max-width:var(--max-width);margin:0 auto;padding:28px}
  .site-header{padding:18px 0}
  .logo{margin:0;font-size:1.5rem;display:flex;align-items:baseline;gap:8px}
  .logo-github{font-weight:800;letter-spacing:1px;color:#ffffff}
  .logo-expo{font-weight:800;color:var(--accent);letter-spacing:2px}
  .app-subtitle{margin:6px 0 0;color:var(--muted);font-size:0.95rem}
.repo:hover{transform:translateY(-3px)}
.search-form input, .search-form button{transition:box-shadow .18s ease, transform .12s ease}
  .search-form button{padding:10px 16px;background:linear-gradient(180deg,var(--accent),var(--accent-2));border:none;color:white;border-radius:10px;cursor:pointer;box-shadow:0 6px 16px rgba(11,49,91,0.18)}
.logo{letter-spacing:0.6px}
.app-subtitle{opacity:0.9}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
  .spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,0.06);border-top-color:var(--accent);animation:spin 800ms linear infinite}
.site-header{padding:18px 0}
.logo{margin:0;font-size:1.5rem;display:flex;align-items:baseline;gap:8px}
.logo-github{font-weight:700;letter-spacing:1px;color:#ffffff}
  .profile-header{display:flex;gap:18px;align-items:center;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.012), transparent);border-radius:var(--radius);box-shadow:inset 0 1px 0 rgba(255,255,255,0.01)}
.logo-expo{font-weight:700;color:var(--accent);letter-spacing:2px}
  .profile-header img{width:96px;height:96px;border-radius:12px;object-fit:cover;border:2px solid rgba(255,255,255,0.04)}
.app-subtitle{margin:6px 0 0;color:var(--muted)}
  .profile-info h2{margin:0;font-size:1.25rem}
.search-form{display:flex;gap:12px;margin:18px 0}
.search-form input{flex:1;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:var(--glass);color:inherit}
.search-form button{padding:10px 16px;background:var(--accent);border:none;color:white;border-radius:10px;cursor:pointer}
  .card{background:linear-gradient(180deg,var(--card),var(--card-2));padding:18px;border-radius:var(--radius);box-shadow:0 8px 24px rgba(2,6,23,0.6);display:flex;flex-direction:column}
.loading{margin:12px 0;color:var(--muted)}
.loading{display:flex;align-items:center;gap:10px}
  .stats-card{display:flex;gap:12px;align-items:center;justify-content:space-around;min-height:260px}
.spinner{width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,0.08);border-top-color:var(--accent);animation:spin 800ms linear infinite}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
  .stat strong{font-size:1.25rem;color:#ffffff}
  .stat span{color:var(--muted);margin-top:6px}
.error{margin:12px 0;color:#ffc3c3}
.hidden{display:none}
  .chart-card{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .chart-card h3{width:100%;text-align:left;margin:0 0 10px 0}
.report{margin-top:18px}
.profile-header{display:flex;gap:16px;align-items:center;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:var(--radius)}
  .repo{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.02)}
.profile-header img{width:84px;height:84px;border-radius:12px;object-fit:cover;border:2px solid rgba(255,255,255,0.04)}
.profile-info h2{margin:0;font-size:1.125rem}
.profile-info p{margin:6px 0 0;color:var(--muted)}
.report-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:14px}
.card{background:var(--card);padding:14px;border-radius:10px}
  .stars{display:flex;align-items:center;gap:8px;color:var(--muted)}
  .badges{margin-top:8px}
  .repo .muted{margin-top:6px;color:var(--muted);font-size:0.92rem}
.muted{color:var(--muted);font-size:0.9rem}
.stats-card{display:flex;gap:12px;align-items:center;justify-content:space-around}
.stat{display:flex;flex-direction:column;align-items:center}
.stat strong{font-size:1.125rem}
.chart-card canvas{max-width:100%;height:220px}
  @media(min-width:780px){
    .report-grid{grid-template-columns:360px 1fr 320px}
    .chart-wrap{height:300px}
    .chart-card canvas{height:100%}
  }

  @media(max-width:780px){
    .profile-header{flex-direction:row;align-items:center}
    .profile-info{flex:1}
    .stats-card{min-height:180px}
  }

.chart-wrap{height:220px}
.repo-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.repo{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.repo a{color:var(--accent);font-weight:600;text-decoration:none}
.repo a:focus{outline:2px solid rgba(59,130,246,0.35);outline-offset:2px;border-radius:6px}
.stars{display:flex;align-items:center;gap:6px;color:var(--muted)}
.stars svg{width:14px;height:14px;fill:var(--accent)}
.badges{margin-top:6px}
.search-form input:focus, .search-form button:focus{outline:3px solid rgba(59,130,246,0.12);outline-offset:2px}
.stat strong{font-size:1.125rem}

@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.site-footer{padding:18px 0;color:var(--muted);text-align:center}

@media(min-width:700px){
  .report-grid{grid-template-columns:360px 1fr 320px}
  .chart-wrap{height:260px}
  .chart-card canvas{height:100%}
}

/* small badges */
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,0.03);font-size:0.85rem;color:var(--muted)}

/* Enforce vertical stacking of the three main sections: Profile | Languages | Repos */
.report-grid{grid-template-columns:1fr !important}

/* Profile header: include stats inside header; stack stats under info on small screens */
.profile-header{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.profile-header .stats-card{width:100%;display:flex;justify-content:space-around;margin-top:8px;padding:12px}

/* Chart wrap sizing and placeholder */
.chart-wrap{width:100%;height:320px;display:flex;align-items:center;justify-content:center}
#lang-empty{color:var(--muted);font-size:0.98rem;text-align:center;padding:12px}
#lang-empty.hidden{display:none}

@media(min-width:880px){
  .profile-header{flex-direction:row;align-items:center;justify-content:space-between}
  .profile-header .stats-card{width:340px;margin-left:18px}
}

/* Chart controls and stacked legend */
.chart-controls{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.chart-controls label{color:var(--muted);font-size:0.95rem}
.chart-controls select{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 8px;border-radius:8px;color:inherit}
.lang-legend{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:12px;justify-content:center;align-items:center}
.legend-item{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.01)}
.legend-swatch{width:14px;height:14px;border-radius:4px;flex-shrink:0;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2)}
.legend-label{color:var(--muted);font-size:0.95rem;white-space:nowrap}

/* Precise mode confirmation box */
.precise-confirm{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);margin-top:8px}
.precise-confirm p{margin:0 0 8px 0;color:var(--muted)}
.precise-confirm label{display:block;margin-bottom:8px;color:var(--muted)}
.precise-actions{display:flex;gap:8px}
.precise-actions button{padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
.precise-actions #precise-proceed{background:var(--accent);color:white}
.precise-actions #precise-cancel{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.hidden{display:none}

/* Recompute button shown when cache exists but requested mode differs */
.recompute-btn{display:inline-block;margin-left:10px;padding:6px 10px;border-radius:8px;border:none;background:transparent;color:var(--accent);cursor:pointer;border:1px solid rgba(59,130,246,0.12)}
.recompute-btn:focus{outline:3px solid rgba(59,130,246,0.12);outline-offset:2px}

/* Slight visual emphasis when precise confirm is visible */
.precise-confirm[aria-hidden="false"]{box-shadow:0 8px 32px rgba(2,6,23,0.6)}

/* Welcome modal overlay and content */
.welcome-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999}
.welcome-modal-content{background:linear-gradient(180deg,var(--card),var(--card-2));padding:40px;border-radius:var(--radius);max-width:600px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.9);animation:slideUp 0.3s ease}

@media(max-width:640px){
  .welcome-modal-content{max-height:70vh;padding:24px;max-width:95vw}
}
.welcome-modal-content h2{margin:0 0 20px 0;font-size:1.75rem;color:#ffffff}
.welcome-modal-content p{margin:0 0 16px 0;color:var(--muted);line-height:1.6}
.welcome-description{background:rgba(255,255,255,0.01);padding:16px;border-radius:10px;margin:20px 0}
.welcome-description h3{margin:0 0 12px 0;font-size:1.1rem;color:#ffffff}
.welcome-description ul{margin:0;padding-left:20px;color:var(--muted);line-height:1.8}
.welcome-description li{margin-bottom:8px}
.welcome-note{font-size:0.9rem;color:var(--muted);margin-top:20px}
.welcome-continue-btn{display:block;margin:24px auto 0;padding:12px 32px;background:linear-gradient(180deg,var(--accent),var(--accent-2));border:none;color:white;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 6px 16px rgba(11,49,91,0.18);transition:transform 0.2s ease}
.welcome-continue-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,49,91,0.25)}
.welcome-continue-btn:focus{outline:3px solid rgba(59,130,246,0.12);outline-offset:2px}

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