:root {
   --bg: #0f1724;
   /* dark bg */
   --card: #0b1220;
   --muted: #94a3b8;
   --accent: #06b6d4;
   --glass: rgba(255, 255, 255, 0.04);
   --maxw: 1100px;
   --radius: 12px;
   color-scheme: light dark;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 }

 * {
   box-sizing: border-box
 }

 html,
 body {
   height: auto;
   margin: 0;
   background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
   color: #0b1220
 }

 body.dark, html.dark {
  background: linear-gradient(180deg, #020617 0%, #071024 100%) !important;
  color: #e6eef8 !important;
 }

 .container {
   max-width: var(--maxw);
   margin: 36px auto;
   padding: 28px;
   display: grid;
   gap: 24px
 }

 header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px
 }

 .profile {
   display: flex;
   gap: 18px;
   align-items: center
 }

 .avatar {
   width: 150px;
   height: 150px;
   border-radius: 20px;
   background: linear-gradient(135deg, var(--accent), #7c3aed);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 700;
   font-size: 28px
 }

 .name {
   font-size: 28px;
   font-weight: 700;
   margin: 0
 }

 .role {
   color: var(--muted);
   margin: 4px 0 0
 }

 main {
   display: grid;
   grid-template-columns: 1fr 320px;
   gap: 24px
 }

 .card {
   background: var(--glass);
   backdrop-filter: blur(6px);
   border-radius: var(--radius);
   padding: 18px
 }

 .section-title {
   font-weight: 700;
   margin: 0 0 12px
 }

 p.lead {
   margin: 6px 0 0;
   color: var(--muted);
   line-height: 1.45
 }

 /* left column items */
 .experience {
   display: flex;
   flex-direction: column;
   gap: 14px
 }

 .job {
   padding: 12px;
   border-radius: 10px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent)
 }

 .job h4 {
   margin: 0;
   font-size: 16px
 }

 .job .meta {
   color: var(--muted);
   font-size: 13px;
   margin-top: 6px
 }

 .job p {
   margin: 10px 0 0;
   color: var(--muted);
   font-size: 14px
 }

 .skills {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
 }

 .skill {
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(0, 0, 0, 0.06);
   font-weight: 600;
   font-size: 13px
 }

 /* right column */
 .contact-list {
   display: flex;
   flex-direction: column;
   gap: 10px
 }

 .contact-item {
   display: flex;
   gap: 10px;
   align-items: center
 }

 .contact-item strong {
   min-width: 72px;
   color: var(--muted);
   font-weight: 600
 }

 /* projects */
 .projects {
   display: grid;
   gap: 10px
 }

 .project {
   padding: 10px;
   border-radius: 8px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent)
 }

 .project a {
   color: var(--accent);
   text-decoration: none
 }

 /* footer */
 footer {
   text-align: center;
   color: var(--muted);
   font-size: 13px;
   margin-top: 8px
 }

 /* small screens */
 @media (max-width:880px) {
   main {
     grid-template-columns: 1fr
   }

   .avatar {
     width: 88px;
     height: 88px
   }
 }

 /* Extra mobile-friendly styles */
@media (max-width:600px) {
  .container {
    padding: 8px;
    margin: 0;
    max-width: 100vw;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .avatar {
    width: 64px;
    height: 64px;
    font-size: 18px;
  }

  .name {
    font-size: 20px;
  }

  main {
    gap: 12px;
  }

  .card {
    padding: 10px;
  }

  .skills {
    gap: 4px;
  }

  .skill {
    font-size: 11px;
    padding: 4px 8px;
  }

  .contact-list {
    gap: 6px;
  }

  .project {
    padding: 6px;
  }
}

/* utility */
 .btn {
   display: inline-block;
   padding: 10px 14px;
   border-radius: 10px;
   background: linear-gradient(90deg, var(--accent), #7c3aed);
   color: white;
   font-weight: 700;
   text-decoration: none
 }

 .muted {
   color: var(--muted)
 }

 /* dark theme overrides */
 .dark .container {
   background: transparent
 }

 .dark .card {
   background: rgba(255, 255, 255, 0.02)
 }

 .dark .skill {
   background: rgba(255, 255, 255, 0.03)
 }