/* ============================================================
   COLOR TOKENS — Light mode default, dark overrides below
============================================================ */
:root {
    --color-bg:                  #FFFFFF;
    --color-surface:             #F5F5F7;
    --color-surface-raised:      #EAEAEF;
    --color-border:              #DDDDE8;
    --color-border-strong:       #C5C5D8;
    --color-text-primary:        #0A0A0F;
    --color-text-muted:          #5E6E82;
    --color-accent:              #6366F1;
    --color-accent-hover:        #4F46E5;
    --color-accent-bg:           rgba(99,102,241,0.08);
    --color-accent-border:       rgba(99,102,241,0.25);
    --color-nav-bg:              rgba(255,255,255,0.92);
    --color-shadow:              rgba(0,0,0,0.06);
    --color-pill-bg:             #EAEAEF;
    --color-pill-text:           #4A5568;
    --color-badge-live-bg:       rgba(99,102,241,0.10);
    --color-badge-live-text:     #4F52D0;
    --color-stats-bg:            #F5F5F7;
    --color-stats-number:        #6366F1;
    --color-cv-bg:               #FFFFFF;
    --color-input-bg:            #FFFFFF;
    --color-input-border:        #DDDDE8;
    --color-btn-secondary-hover: #EAEAEF;
    --color-btn-primary-bg:      #4F46E5;
    --color-btn-primary-text:    #FFFFFF;
    --color-btn-primary-border:  #4338CA;
    --color-btn-primary-hover:   #4338CA;
    --color-success-bg:          rgba(34,197,94,0.10);
    --color-success-text:        #166534;
    --color-error-bg:            rgba(239,68,68,0.08);
    --color-error-text:          #991B1B;
    --font-sans:                 'Inter', sans-serif;
    --font-mono:                 'JetBrains Mono', monospace;
    --max-width:                 1100px;

    /* ── Type Scale System (8 distinct steps) ────────────────────────── */
    --text-xs:                   0.75rem;    /* 12px - badges, labels, tiny meta */
    --text-sm:                   0.875rem;   /* 14px - secondary body, pills, buttons, nav */
    --text-base:                 1rem;       /* 16px - standard body, inputs, text */
    --text-lg:                   1.125rem;   /* 18px - lead text, subtitles, highlights */
    --text-xl:                   1.375rem;   /* 22px - project titles, paper titles */
    --text-2xl:                  1.625rem;   /* 26px - resume header, large subheadings */
    --text-3xl:                  2.25rem;    /* 36px - section titles, stat numbers */
    --text-hero:                 clamp(2.5rem, 5vw, 4rem); /* hero title display */

    /* ── Corner Radii System (4 token scales + 50% circle) ───────────── */
    --radius-sm:                 6px;        /* badges, pills, thumbnails, small UI controls */
    --radius-md:                 8px;        /* buttons, form inputs, toggle controls */
    --radius-card:               12px;       /* cards, containers, sections */
    --radius-full:               9999px;     /* full-pill bars and badges */
    --shadow-soft:               0 4px 24px rgba(15,23,42,0.07), 0 1px 4px rgba(15,23,42,0.04);
    --shadow-card:               0 2px 12px rgba(15,23,42,0.06);
}

[data-theme="dark"] {
    --color-bg:                  #08080D;
    --color-surface:             #0F0F17;
    --color-surface-raised:      #14141E;
    --color-border:              #1C1C2C;
    --color-border-strong:       #28283C;
    --color-text-primary:        #F0F0FA;
    --color-text-muted:          #8896A8;
    --color-accent:              #818CF8;
    --color-accent-hover:        #6366F1;
    --color-accent-bg:           rgba(99,102,241,0.12);
    --color-accent-border:       rgba(99,102,241,0.28);
    --color-nav-bg:              rgba(8,8,13,0.90);
    --color-shadow:              rgba(0,0,0,0.45);
    --color-pill-bg:             #14141E;
    --color-pill-text:           #8896A8;
    --color-badge-live-bg:       rgba(129,140,248,0.14);
    --color-badge-live-text:     #818CF8;
    --color-stats-bg:            #0F0F17;
    --color-stats-number:        #818CF8;
    --color-cv-bg:               #0F0F17;
    --color-input-bg:            #0F0F17;
    --color-input-border:        #1C1C2C;
    --color-btn-secondary-hover: #14141E;
    --color-btn-primary-bg:      #4F46E5;
    --color-btn-primary-text:    #FFFFFF;
    --color-btn-primary-border:  #6366F1;
    --color-btn-primary-hover:   #4338CA;
    --color-success-bg:          rgba(34,197,94,0.12);
    --color-success-text:        #86EFAC;
    --color-error-bg:            rgba(239,68,68,0.12);
    --color-error-text:          #FCA5A5;
    --shadow-soft:               0 4px 24px rgba(0,0,0,0.30), 0 1px 4px rgba(0,0,0,0.20);
    --shadow-card:               0 2px 12px rgba(0,0,0,0.25);
}

/* ── Theme-transition surfaces ── */
body, #navbar, .project-card, .skill-group, .cert-item,
.education-card, .resume-container, .contact-card, .contact-form,
.tech-pill, .btn, #theme-toggle,
.research-featured-card, .ongoing-card, .research-stats-bar, .paper-summary {
    transition: background-color 220ms ease, border-color 220ms ease,
                color 140ms ease, box-shadow 220ms ease;
}
.no-transitions * { transition: none !important; }

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family:             var(--font-sans);
    background-color:        var(--color-bg);
    color:                   var(--color-text-muted);
    line-height:             1.7;
    font-size:               var(--text-base);
    -webkit-font-smoothing:  antialiased;
    overflow-x:              hidden;
}

#hero {
    background-color:        var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
    color:       var(--color-text-primary);
    font-weight: 600;
    line-height: 1.2;
}

a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
ul { list-style: none; }

/* FIX: removed inline style overrides by putting them here */
strong { color: var(--color-text-primary); }

.container {
    max-width: var(--max-width);
    margin:    0 auto;
    padding:   0 40px;
}

@media (max-width: 639px) {
    .container { padding: 0 20px; }
}

.section { padding: 100px 0; }

.section-title {
    font-size:     var(--text-3xl);
    font-weight:   700;
    margin-bottom: 16px;
    color:         var(--color-text-primary);
    letter-spacing: -0.02em;
}

/* NEW: reusable section subtitle below the heading */
.section-sub {
    color:         var(--color-text-muted);
    font-size:     var(--text-lg);
    margin-bottom: 56px;
    max-width:     560px;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         11px 22px;
    border-radius:   var(--radius-md);
    font-weight:     600;
    font-size:       var(--text-sm);
    cursor:          pointer;
    border:          1px solid transparent;
    transition:      transform 0.15s ease, background-color 0.15s ease,
                     border-color 0.15s ease, box-shadow 0.15s ease;
    white-space:     nowrap;
}

.btn:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 3px;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }

.btn.primary {
    background-color: var(--color-btn-primary-bg);
    color:            var(--color-btn-primary-text);
    border-color:     var(--color-btn-primary-border);
}
.btn.primary:hover {
    background-color: var(--color-btn-primary-hover);
    border-color:     var(--color-btn-primary-hover);
}

.btn.secondary {
    background-color: transparent;
    color:            var(--color-text-primary);
    border-color:     var(--color-border);
}
.btn.secondary:hover {
    background-color: var(--color-btn-secondary-hover);
    border-color:     var(--color-border-strong);
}

/* ============================================================
   NAVIGATION
============================================================ */
#navbar {
    position:                fixed;
    top:                     0;
    left:                    0;
    width:                   100%;
    z-index:                 1000;
    background-color:        var(--color-nav-bg);
    backdrop-filter:         blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom:           1px solid var(--color-border);
    transition:              background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#navbar.scrolled {
    box-shadow:              0 4px 20px var(--color-shadow);
}

.nav-content {
    display:     flex;
    align-items: center;
    width:       100%;
    height:      64px;
}

.logo {
    font-weight: 700;
    font-size:   var(--text-lg);
    color:       var(--color-text-primary);
    margin-right: auto;
    flex-shrink:  0;
}

/* Desktop nav */
.nav-links.desktop {
    display:     flex;
    gap:         28px;
    align-items: center;
    margin-right: 24px;
}

@media (max-width: 767px) {
    .nav-links.desktop { display: none; }
}

/* FIX: Mobile nav was nested inside nav-content causing layout issues.
   Now it is a sibling of nav-content, dropping below cleanly. */
.nav-links.mobile {
    display:          none;
    flex-direction:   column;
    position:         absolute;
    top:              64px;
    left:             0;
    width:            100%;
    background-color: var(--color-bg);
    padding:          16px 20px 24px;
    border-bottom:    1px solid var(--color-border);
    gap:              4px;
    z-index:          900;
    box-shadow:       var(--shadow-soft);
}

.nav-links.mobile.active { display: flex; }

.nav-links.mobile li a {
    display:       block;
    padding:       10px 0;
    border-bottom: 1px solid var(--color-border);
}

.nav-links.mobile li:last-child a { border-bottom: none; }

.nav-links a {
    font-size:   var(--text-sm);
    font-weight: 500;
    color:       var(--color-text-muted);
    transition:  color 0.15s ease;
}

.nav-links a:hover,
.nav-links a.active { color: var(--color-text-primary); }

.nav-links a.active { font-weight: 600; }

.nav-right {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-shrink: 0;
}

#theme-toggle {
    width:           38px;
    height:          38px;
    border-radius:   var(--radius-md);
    background:      var(--color-surface);
    border:          1px solid var(--color-border);
    color:           var(--color-text-muted);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

#theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
#theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#theme-toggle svg { width: 17px; height: 17px; pointer-events: none; }

.menu-toggle {
    display:    none;
    background: none;
    border:     none;
    color:      var(--color-text-primary);
    cursor:     pointer;
    padding:    4px;
    border-radius:   var(--radius-md);
    transition: background-color 0.15s ease;
}

.menu-toggle:hover { background-color: var(--color-surface); }
.menu-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 767px) {
    .menu-toggle { display: flex; align-items: center; justify-content: center; }
}

/* ============================================================
   HERO
============================================================ */
.hero-section {
    padding-top:    144px;
    padding-bottom: 100px;
}

.hero-container {
    display:               grid;
    grid-template-columns: 1fr 380px;
    gap:                   72px;
    align-items:           center;
}

@media (max-width: 899px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap:                   40px;
    }
    .hero-photo { order: -1; }
}

.fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity:   0;
}

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

/* FIX: was .hero-greeting; renamed to .hero-label to match HTML */
.hero-label {
    font-family:   var(--font-mono);
    font-size:     var(--text-sm);
    color:         var(--color-accent);
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.hero-title {
    font-size:     var(--text-hero);
    line-height:   1.06;
    font-weight:   700;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    color:         var(--color-text-primary);
    max-width:     600px;
}

.hero-tagline {
    font-size:     var(--text-lg);
    max-width:     520px;
    margin-bottom: 36px;
    color:         var(--color-text-muted);
    line-height:   1.72;
}

.hero-actions {
    display:       flex;
    gap:           12px;
    margin-bottom: 32px;
    flex-wrap:     wrap;
}

.social-links {
    display:    flex;
    gap:        24px;
    flex-wrap:  wrap;
}

.social-links a {
    font-size:   var(--text-sm);
    font-weight: 500;
    color:       var(--color-text-muted);
    position:    relative;
}

.social-links a::after {
    content:          '';
    position:         absolute;
    left:             0;
    bottom:           -2px;
    width:            0;
    height:           1px;
    background-color: var(--color-accent);
    transition:       width 0.2s ease;
}

.social-links a:hover { color: var(--color-text-primary); }
.social-links a:hover::after { width: 100%; }

.hero-photo img {
    width:          100%;
    max-width:      380px;
    height:         420px;
    object-fit:     cover;
    object-position: top center;
    border-radius:  var(--radius-card);
    border:         1px solid var(--color-border);
    display:        block;
}

@media (max-width: 899px) {
    .hero-photo img {
        width: min(100%, 320px);
        height: auto;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ============================================================
   STATS BAR
   FIX: border was hardcoded #1E1E2E (only worked in dark mode)
============================================================ */
.stats-section {
    padding:          56px 40px;
    border-top:       1px solid var(--color-border);
    border-bottom:    1px solid var(--color-border);
    background-color: var(--color-stats-bg);
}

@media (max-width: 639px) {
    .stats-section { padding: 48px 20px; }
}

.stats-grid {
    max-width:             var(--max-width);
    margin:                0 auto;
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   40px;
}

@media (max-width: 767px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

.stat-item {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.stat-number {
    font-family:  var(--font-mono);
    font-size:    var(--text-3xl);
    font-weight:  700;
    color:        var(--color-stats-number);
    line-height:  1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.stat-label {
    font-size:   var(--text-sm);
    font-weight: 500;
    color:       var(--color-text-muted);
}

/* ============================================================
   ABOUT
============================================================ */
.about-content {
    display:               grid;
    grid-template-columns: 1.5fr 1fr;
    gap:                   64px;
    align-items:           flex-start;
}

@media (max-width: 899px) {
    .about-content { grid-template-columns: 1fr; gap: 40px; }
}

.about-text p {
    margin-bottom: 20px;
    color:         var(--color-text-muted);
    font-size:     var(--text-base);
}

.about-text p:last-child { margin-bottom: 0; }

.education-card {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          32px;
}

.education-card h3 {
    font-size:     var(--text-base);
    margin-bottom: 20px;
    color:         var(--color-text-primary);
}

.education-card p {
    margin-bottom: 8px;
    color:         var(--color-text-muted);
    font-size:     var(--text-base);
}

.education-card p:last-child { margin-bottom: 0; }

/* FIX: was inline style; now a class */
.edu-meta {
    font-size: var(--text-sm);
    color:     var(--color-text-muted);
    margin-top: 4px;
}

/* ============================================================
   PROJECTS
   FIX: .project-card border was hardcoded #1E1E2E — dark only
============================================================ */
.projects-list {
    display:        flex;
    flex-direction: column;
    gap:            48px;
}

.project-card {
    display:          flex;
    flex-direction:   column;
    gap:              28px;
    background:       var(--color-surface);
    border:           1px solid var(--color-border);  /* was hardcoded */
    border-radius:    var(--radius-card);
    padding:          36px;
    box-shadow:       var(--shadow-card);
}

@media (min-width: 900px) {
    .project-card { flex-direction: row; }
}

.project-image {
    flex-shrink:      0;
    width:            380px;
    max-width:        100%;
    border-radius:    var(--radius-md);
    border:           1px solid var(--color-border);
    background-color: var(--color-surface-raised);
    overflow:         hidden;
    align-self:       flex-start;
}

/* FIX: placeholder state when image fails or is SVG with no intrinsic size */
.project-image--placeholder {
    min-height: 220px;
    display:    flex;
    align-items: center;
    justify-content: center;
}

.project-image img {
    width:        100%;
    height:       auto;
    display:      block;
    aspect-ratio: 16 / 10;
    object-fit:   cover;
}

.project-content { flex: 1; min-width: 0; }

.project-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 8px;
}

.project-title {
    font-size:   var(--text-xl);
    font-weight: 700;
    color:       var(--color-text-primary);
    margin:      0;
    letter-spacing: -0.01em;
}

.status-badge {
    font-family: var(--font-mono);
    font-size:   var(--text-xs);
    font-weight: 600;
    padding:     4px 9px;
    border-radius: var(--radius-sm);
    background-color: var(--color-badge-live-bg);
    color:            var(--color-badge-live-text);
    border:           1px solid var(--color-accent-border);
    white-space:      nowrap;
    display:          inline-flex;
    align-items:      center;
    gap:              5px;
}

.status-badge::before {
    content:    '';
    width:      6px;
    height:     6px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    /* Subtle pulse */
    animation: pulse 2.4s ease-in-out infinite;
}

.status-badge--neutral,
.status-badge--desktop {
    background-color: var(--color-surface-raised);
    color:            var(--color-text-muted);
    border-color:     var(--color-border);
}

.status-badge--neutral::before,
.status-badge--desktop::before {
    background-color: var(--color-text-muted);
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.project-tagline {
    font-size:     var(--text-base);
    color:         var(--color-text-muted);
    margin-bottom: 24px;
    line-height:   1.55;
}

.detail-block { margin-bottom: 18px; }
.detail-block:last-of-type { margin-bottom: 0; }

.detail-block h4 {
    font-size:      var(--text-sm);
    font-weight:    600;
    text-transform: none;
    letter-spacing: normal;
    color:          var(--color-text-muted);
    margin-bottom:  5px;
}

.detail-block p {
    color:     var(--color-text-muted);
    font-size: var(--text-base);
}

.achievement-list {
    list-style-type: disc;
    padding-left:    18px;
}

.achievement-list li {
    margin-bottom: 7px;
    color:         var(--color-text-muted);
    font-size:     var(--text-base);
}

.achievement-list li:last-child { margin-bottom: 0; }

.project-tech {
    margin-top:    20px;
    margin-bottom: 24px;
    display:       flex;
    flex-wrap:     wrap;
    gap:           7px;
}

.project-links { display: flex; gap: 12px; flex-wrap: wrap; }

.project-availability {
    margin-top: 12px;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* "More projects" line */
.more-projects {
    margin-top: 52px;
    color:      var(--color-text-muted);
    font-size:  var(--text-base);
}

.more-projects a {
    color:       var(--color-accent);
    font-weight: 600;
}

.more-projects a:hover { text-decoration: underline; }

/* ============================================================
   SKILLS
   FIX: "My SQL" typo fixed in HTML (now "MySQL")
   FIX: Last skill group now spans full width on 2-col grid
============================================================ */
.skills-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
    align-items:           start;
}

@media (max-width: 767px) {
    .skills-grid { grid-template-columns: 1fr; }
}

/* 5th group (odd one out) spans both columns */
.skill-group--wide {
    grid-column: 1 / -1;
}

.skill-group {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          28px;
    display:          flex;
    flex-direction:   column;
}

.skill-group h3 {
    font-size:     var(--text-base);
    font-weight:   600;
    margin-bottom: 12px;
    color:         var(--color-text-primary);
}

.skill-group p.skill-desc {
    font-size:     var(--text-sm);
    color:         var(--color-text-muted);
    margin-bottom: 16px;
    line-height:   1.55;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.tech-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }

.tech-pill {
    font-family:  var(--font-mono);
    font-size:    var(--text-xs);
    background:   var(--color-pill-bg);
    border:       1px solid var(--color-border);
    padding:      4px 11px;
    border-radius: var(--radius-sm);
    color:        var(--color-pill-text);
    transition:   border-color 0.18s ease, color 0.18s ease;
    user-select:  none;
}

.tech-pill:hover {
    border-color: var(--color-accent-border);
    color:        var(--color-accent);
}

/* ============================================================
   CERTIFICATIONS
============================================================ */
.cert-list {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
}

@media (max-width: 899px) {
    .cert-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
    .cert-list { grid-template-columns: 1fr; }
}

.cert-item {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    padding:          20px;
    border-radius:    var(--radius-card);
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    gap:              16px;
    transition:       border-color 0.18s ease, box-shadow 0.18s ease;
}

.cert-item:hover {
    border-color: var(--color-accent-border);
    box-shadow:   var(--shadow-soft);
}

.cert-main {
    display:     flex;
    align-items: center;
    gap:         16px;
    min-width:   0;
    flex:        1;
}

.cert-preview {
    display: block;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.cert-preview,
.cert-preview img { cursor: pointer; }

.cert-preview:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}

.cert-image {
    display:          block;
    width:            80px;
    height:           56px;
    flex-shrink:      0;
    object-fit:       cover;
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-sm);
    background-color: var(--color-surface-raised);
}

.certificate-viewer-open,
.certificate-viewer-open body {
    overflow: hidden;
}

.certificate-viewer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 64px 12px 12px;
    border: 0;
    background: transparent;
    color: #fff;
}

.certificate-viewer[open] {
    display: grid;
    place-items: center;
}

.certificate-viewer::backdrop {
    background: rgba(5, 8, 18, 0.92);
}

.certificate-figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    text-align: center;
}

.certificate-full-image {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
}

#certificateCaption {
    max-width: 70ch;
    font-size: var(--text-sm);
    line-height: 1.5;
}

.certificate-close {
    position: fixed;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: #151824;
    color: #fff;
    font: 32px/1 var(--font-sans);
    cursor: pointer;
}

.certificate-close:hover { background: #30364a; }
.certificate-close:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 4px; }

.cert-item strong {
    color:         var(--color-text-primary);
    display:       block;
    margin-bottom: 6px;
    font-size:     var(--text-sm);
    line-height:   1.4;
}

.cert-meta {
    font-size: var(--text-xs);
    color:     var(--color-text-muted);
    display:   block;
}

.cert-date {
    font-family:  var(--font-mono);
    font-size:    var(--text-xs);
    color:        var(--color-text-muted);
    white-space:  nowrap;
}


/* ============================================================
   RESEARCH & PUBLICATIONS
============================================================ */
.research-stats-bar {
    display:          inline-flex;
    align-items:      center;
    flex-wrap:        wrap;
    gap:              12px;
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    padding:          8px 18px;
    border-radius:    var(--radius-full);
    margin-bottom:    32px;
    font-size:        var(--text-sm);
    color:            var(--color-text-muted);
}

.research-stat-item {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
}

.research-stat-item .stat-num {
    font-family: var(--font-mono);
    font-weight: 700;
    color:       var(--color-stats-number);
}

.research-stat-sep {
    color:       var(--color-border-strong);
    user-select: none;
}

.research-layout {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   28px;
}

@media (min-width: 960px) {
    .research-layout {
        grid-template-columns: 1.55fr 1fr;
        gap:                   32px;
        align-items:           stretch;
    }
}

.research-featured-card,
.ongoing-card {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    transition:       transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.research-featured-card:hover,
.ongoing-card:hover {
    transform:    translateY(-2px);
    border-color: var(--color-accent-border);
    box-shadow:   var(--shadow-soft);
}

.research-featured-card {
    padding:        32px;
    display:        flex;
    flex-direction: column;
}

@media (max-width: 640px) {
    .research-featured-card {
        padding: 22px 18px;
    }
}

.paper-top {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             12px;
    margin-bottom:   20px;
}

.paper-meta-date {
    font-family: var(--font-mono);
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
}

.paper-card-inner {
    display:       flex;
    gap:           22px;
    align-items:   flex-start;
    margin-bottom: 16px;
}

@media (max-width: 580px) {
    .paper-card-inner {
        flex-direction: column;
        align-items:    center;
    }
}

.paper-cover-wrapper {
    flex-shrink: 0;
}

.paper-thumbnail-link {
    display:         block;
    position:        relative;
    border-radius:   var(--radius-sm);
    overflow:        hidden;
    border:          1px solid var(--color-border);
    background:      var(--color-surface-raised);
    transition:      border-color 0.2s ease, transform 0.2s ease;
}

.paper-thumbnail-link:hover {
    border-color: var(--color-accent);
    transform:    scale(1.02);
}

.paper-thumbnail-img {
    display:    block;
    width:      105px;
    height:     148px;
    object-fit: cover;
}

.paper-thumb-badge {
    position:        absolute;
    bottom:          4px;
    right:           4px;
    font-family:     var(--font-mono);
    font-size:       var(--text-xs);
    font-weight:     600;
    padding:         2px 6px;
    border-radius:   var(--radius-sm);
    background:      rgba(0, 0, 0, 0.72);
    color:           #FFFFFF;
    backdrop-filter: blur(4px);
}

.paper-info-wrapper {
    flex:      1;
    min-width: 0;
}

.paper-title {
    font-size:      var(--text-xl);
    font-weight:    700;
    line-height:    1.35;
    color:          var(--color-text-primary);
    margin-bottom:  8px;
    letter-spacing: -0.015em;
}

.paper-journal {
    font-size:     var(--text-sm);
    color:         var(--color-text-muted);
    margin-bottom: 6px;
    line-height:   1.45;
}

.paper-doi {
    font-family:   var(--font-mono);
    font-size:     var(--text-xs);
    color:         var(--color-text-muted);
    margin-bottom: 12px;
}

.paper-doi a {
    color:                 var(--color-accent);
    text-decoration:       underline;
    text-underline-offset: 2px;
}

.paper-authors {
    font-size:     var(--text-sm);
    color:         var(--color-text-muted);
    line-height:   1.55;
    margin-bottom: 4px;
}

.paper-authors-label {
    font-weight:  600;
    color:        var(--color-text-primary);
    margin-right: 4px;
}

.author-highlight {
    color:                 var(--color-accent);
    font-weight:           700;
    text-decoration:       underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-accent-border);
}

.paper-summary-block {
    margin-bottom: 18px;
}

.paper-summary {
    font-size:        var(--text-sm);
    color:            var(--color-text-primary);
    line-height:      1.6;
    padding:          12px 16px;
    background-color: var(--color-surface-raised);
    border-left:      3px solid var(--color-accent);
    border-radius:    var(--radius-sm);
}

.paper-tags {
    margin-bottom: 22px;
}

.paper-actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         10px;
    align-items: center;
    margin-top:  auto;
    padding-top: 10px;
}

.btn-sm {
    padding:       7px 14px;
    font-size:     var(--text-xs);
    font-weight:   600;
    border-radius: var(--radius-sm);
    gap:           6px;
}

.cite-copy-btn {
    cursor:      pointer;
    font-family: inherit;
    transition:  all 0.2s ease;
}

.cite-copy-btn.copied {
    border-color:     #22C55E !important;
    color:            var(--color-success-text) !important;
    background-color: var(--color-success-bg) !important;
}

/* Status Badges */
.status-badge--published {
    background-color: var(--color-success-bg);
    color:            var(--color-success-text);
    border-color:     rgba(34, 197, 94, 0.3);
}

.status-badge--published::before {
    background-color: #22C55E;
}

.status-badge--wip {
    background-color: var(--color-accent-bg);
    color:            var(--color-accent);
    border-color:     var(--color-accent-border);
}

.status-badge--wip::before {
    background-color: var(--color-accent);
}

/* Ongoing Research Column */
.ongoing-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.ongoing-section-title {
    font-size:      var(--text-lg);
    font-weight:    600;
    color:          var(--color-text-primary);
    margin-bottom:  2px;
    letter-spacing: -0.01em;
}

.ongoing-list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    flex:           1;
}

.ongoing-card {
    padding:        24px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    flex:           1;
}

.ongoing-card-top {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.ongoing-meta-tag {
    font-family: var(--font-mono);
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
}

.ongoing-authors {
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
    line-height: 1.5;
}

.ongoing-authors strong {
    color: var(--color-text-primary);
}

.ongoing-paper-title {
    font-size:   var(--text-lg);
    font-weight: 600;
    color:       var(--color-text-primary);
    line-height: 1.35;
}

.ongoing-collab {
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
    line-height: 1.5;
}

.ongoing-collab strong {
    color: var(--color-text-primary);
}

.ongoing-line {
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
    line-height: 1.5;
    font-style:  italic;
}

.ongoing-footer {
    margin-top:  auto;
    padding-top: 10px;
    border-top:  1px solid var(--color-border);
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
    font-family: var(--font-mono);
}

/* ============================================================
   RESUME / CV
============================================================ */
.resume-container {
    background-color: var(--color-cv-bg);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          48px 56px;
}

@media (max-width: 899px) {
    .resume-container { padding: 32px 24px; }
}

.resume-header {
    margin-bottom:  28px;
    border-bottom:  1px solid var(--color-border);
    padding-bottom: 24px;
}

.resume-header h3 {
    font-size:     var(--text-2xl);
    font-weight:   700;
    margin-bottom: 8px;
    color:         var(--color-text-primary);
    letter-spacing: -0.02em;
}

.resume-header p {
    color:     var(--color-text-muted);
    font-size: var(--text-base);
    margin-bottom: 4px;
}

.resume-section { margin-bottom: 32px; }
.resume-section:last-of-type { margin-bottom: 0; }

.resume-section h4 {
    font-size:      var(--text-sm);
    font-weight:    600;
    text-transform: none;
    letter-spacing: normal;
    color:          var(--color-accent);
    margin-bottom:  14px;
}

.resume-section p { color: var(--color-text-muted); font-size: var(--text-base); }

.resume-item { margin-bottom: 24px; }
.resume-item:last-child { margin-bottom: 0; }

.resume-item-header {
    display:       flex;
    justify-content: space-between;
    align-items:   baseline;
    margin-bottom: 6px;
    gap:           16px;
}

.resume-item-title {
    color:       var(--color-text-primary);
    font-weight: 600;
    font-size:   var(--text-base);
}

.resume-item p {
    color:     var(--color-text-muted);
    font-size: var(--text-sm);
}

.resume-actions {
    margin-top:    28px;
    padding-top:   24px;
    border-top:    1px solid var(--color-border);
    display:       flex;
}

/* ============================================================
   CONTACT
   FIX: contact-info buttons below form were redundant — removed
   FIX: contact-status now shows error styling via .error class
============================================================ */
.contact-desc {
    max-width:     540px;
    margin-bottom: 40px;
    font-size:     var(--text-lg);
    color:         var(--color-text-muted);
}

.contact-layout {
    display:               grid;
    grid-template-columns: 1fr 1.3fr;
    gap:                   48px;
    align-items:           start;
}

@media (max-width: 899px) {
    .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

.contact-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding:       32px;
    box-shadow:    var(--shadow-card);
}

.contact-list {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.contact-item {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.contact-item span {
    font-size:      var(--text-xs);
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
}

.contact-item a {
    color:     var(--color-text-primary);
    font-size: var(--text-base);
    transition: color 0.15s ease;
}

.contact-item a:hover { color: var(--color-accent); }

.contact-form {
    display:       grid;
    gap:           14px;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding:       32px;
    box-shadow:    var(--shadow-card);
}

.form-grid {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   14px;
}

@media (max-width: 499px) {
    .form-grid { grid-template-columns: 1fr; }
}

.field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.field label {
    font-size:      var(--text-xs);
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
}

.field input,
.field textarea {
    width:         100%;
    border:        1px solid var(--color-input-border);
    background:    var(--color-input-bg);
    color:         var(--color-text-primary);
    border-radius: var(--radius-md);
    padding:       11px 14px;
    font:          inherit;
    font-size:     var(--text-base);
    resize:        vertical;
    min-height:    44px;
    transition:    border-color 0.18s ease, box-shadow 0.18s ease;
}

.field textarea { min-height: 130px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-muted); opacity: 0.6; }

.field input:focus,
.field textarea:focus {
    outline:      none;
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px rgba(99,102,241,0.12);
}

.contact-form-actions {
    display:   flex;
    align-items: center;
    gap:       14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.contact-status {
    display:    none;
    padding:    9px 14px;
    border-radius: var(--radius-md);
    font-size:  var(--text-sm);
    line-height: 1.4;
}

.contact-status.visible { display: inline-flex; }

.contact-status.success {
    background: var(--color-success-bg);
    color:      var(--color-success-text);
    border:     1px solid rgba(34,197,94,0.22);
}

.contact-status.error {
    background: var(--color-error-bg);
    color:      var(--color-error-text);
    border:     1px solid rgba(239,68,68,0.22);
}

/* ============================================================
   FOOTER
   IMPROVED: links added, two-column layout
============================================================ */
footer {
    padding:      40px 0;
    border-top:   1px solid var(--color-border);
    font-size:    var(--text-sm);
}

.footer-inner {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             24px;
    flex-wrap:       wrap;
}

footer p { color: var(--color-text-muted); }

.footer-links {
    display:  flex;
    gap:      20px;
    flex-wrap: wrap;
}

.footer-links a {
    color:       var(--color-text-muted);
    font-size:   var(--text-sm);
    transition:  color 0.15s ease;
}

.footer-links a:hover { color: var(--color-text-primary); }

/* ============================================================
   SCROLL-REVEAL
============================================================ */
.reveal {
    opacity:   0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.revealed {
    opacity:   1;
    transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .reveal,
    .reveal.revealed { animation: none; opacity: 1; transform: none; transition: none; }
    .status-badge::before { animation: none; }
}


/* ============================================================
   OFFICIAL ICONS & DEEP LINK ACTION STYLING
============================================================ */
.nav-icon {
    width:          15px;
    height:         15px;
    flex-shrink:    0;
    stroke:         currentColor;
    stroke-width:   2;
    transition:     transform 0.15s ease, stroke 0.15s ease, color 0.15s ease;
}

.nav-links.desktop a {
    display:     inline-flex;
    align-items: center;
    gap:         7px;
}

.nav-links a:hover .nav-icon,
.nav-links a.active .nav-icon {
    stroke: var(--color-accent);
    color:  var(--color-accent);
    transform: translateY(-1px);
}

.nav-links.mobile li a {
    display:       inline-flex !important;
    align-items:   center;
    gap:           10px;
    padding:       12px 6px;
}

.nav-links.mobile .nav-icon {
    width:  17px;
    height: 17px;
}

.btn-icon {
    width:          16px;
    height:         16px;
    flex-shrink:    0;
    display:        inline-block;
    vertical-align: middle;
    transition:     transform 0.15s ease;
}

.btn:hover .btn-icon {
    transform: translateY(-1px);
}

.btn-sm .btn-icon {
    width:  14px;
    height: 14px;
}

.btn.primary .icon-gmail,
.btn.primary .icon-github {
    color: currentColor;
}

.social-links a {
    display:     inline-flex;
    align-items: center;
    gap:         7px;
}

.social-links a .link-icon {
    width:          16px;
    height:         16px;
    flex-shrink:    0;
    vertical-align: middle;
    transition:     transform 0.15s ease, color 0.15s ease;
}

.social-links a:hover .link-icon {
    transform: translateY(-1.5px);
}

.social-links a:hover .icon-gmail,
.contact-item a:hover .icon-gmail,
.contact-item:hover .icon-gmail {
    color: #EA4335;
}

.social-links a:hover .icon-linkedin,
.contact-item a:hover .icon-linkedin,
.contact-item:hover .icon-linkedin {
    color: #0A66C2;
}

.social-links a:hover .icon-github,
.contact-item a:hover .icon-github,
.contact-item:hover .icon-github {
    color: var(--color-text-primary);
}

.social-links a:hover .icon-x,
.contact-item a:hover .icon-x,
.contact-item:hover .icon-x {
    color: var(--color-text-primary);
}

.contact-label {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-size:      var(--text-xs);
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-text-muted);
}

.contact-icon {
    width:          13px;
    height:         13px;
    flex-shrink:    0;
    vertical-align: middle;
}

.contact-item a {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
}

.resume-contact-link {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    color:           var(--color-text-muted);
    transition:      color 0.15s ease;
    text-decoration: none;
}

.resume-contact-link:hover {
    color: var(--color-accent);
}

.resume-contact-link .inline-icon {
    width:          14px;
    height:         14px;
    flex-shrink:    0;
    vertical-align: middle;
}

.footer-links a {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
}

.footer-icon {
    width:          14px;
    height:         14px;
    flex-shrink:    0;
    vertical-align: middle;
}

.more-projects-link {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    color:           var(--color-accent);
    font-weight:     500;
    text-decoration: none;
}

.more-projects-link:hover {
    text-decoration: underline;
}

.more-projects-link .inline-icon {
    width:          14px;
    height:         14px;
    flex-shrink:    0;
    vertical-align: middle;
}