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

 html,
 body {
     width: 100%;
     overflow-x: hidden;
 }

 /* ─── ROOT VARS ─── */
 :root {
     --navy-900: #0a0f2e;
     --navy-800: #0d1545;
     --navy-700: #111d5e;
     --navy-600: #1a2b7a;
     --navy-500: #2041a0;
     --blue-400: #3b6fd4;
     --blue-300: #5b8fe8;
     --blue-200: #89b3f5;
     --cyan-400: #89b3f5;
     --cyan-300: #89b3f5;
     --teal-400: #89b3f5a8;
     --glass-bg: rgb(23 37 65 / 64%);
     --glass-border: rgba(255, 255, 255, 0.10);
     --glass-hover: rgba(255, 255, 255, 0.08);
     --text-primary: #f0f4ff;
     --text-secondary: #a8b8d8;
     --text-muted: #6b80a8;
     --card-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
     --radius-lg: 20px;
     --radius-md: 14px;
     --radius-sm: 9px;
     --sidebar-width: 280px;
     --content-gap: 1.25rem;
 }

 /* ─── BODY ─── */
 body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     background: var(--navy-900);
     color: var(--text-primary);
     min-height: 100vh;
 }

 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background:
         radial-gradient(ellipse 120% 80% at 15% 0%, #89abefe0 0%, rgb(99 156 255 / 10%) 60%),
         radial-gradient(ellipse 80% 60% at 85% 20%, rgb(69 135 248 / 15%) 0%, transparent 50%),
         radial-gradient(ellipse 100% 80% at 50% 100%, rgba(17, 29, 94, 0.9) 0%, transparent 70%),
         linear-gradient(160deg, var(--navy-900) 0%, rgba(59, 130, 246, .3) 40%, #0d1545 70%, #161c42 100%);
     z-index: -2;
     pointer-events: none;
 }

 /* ─── NAVBAR ─── */
 .navbar {
     position: sticky;
     top: 0;
     z-index: 100;
     backdrop-filter: blur(20px) saturate(1.8);
     -webkit-backdrop-filter: blur(20px) saturate(1.8);
     background: #131d33b8;
     border-bottom: 1px solid #2041a0;
     padding: 0 1.5rem;
     height: 62px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
 }

 .nav-brand img {
     width: 72px;
 }

 /* ─── CONTENT ─── */
 .content {
     padding: 1.5rem 1.5rem 3rem;
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
 }

 /* ─── GLASS CARD ─── */
 .card {
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     border-radius: var(--radius-lg);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     box-shadow: var(--card-shadow);
     transition: border-color 0.3s, box-shadow 0.3s;
     overflow: hidden;
     animation: fadeUp 0.5s ease both;
     width: 100%;
 }

 .card:hover {
     border-color: rgba(91, 143, 232, 0.2);
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(18px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ─── PROFILE CARD ─── */
 .profile-card {
     margin-bottom: var(--content-gap);
     position: relative;
 }

 .profile-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--blue-400), var(--cyan-400), var(--teal-400));
     z-index: 1;
 }

 .profile-card-body {
     padding: 2rem 1.5rem 1.5rem;
 }

 .profile-grid {
     display: flex;
     gap: 1.5rem;
     align-items: flex-start;
 }

 .profile-avatar {
     flex-shrink: 0;
 }

 .avatar-ring {
     width: 120px;
     aspect-ratio: 2/3;
     padding: 3px;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--navy-600), var(--blue-400), var(--cyan-400));
     box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2), 0 8px 32px rgba(59, 111, 212, 0.4);
     display: flex;
 }

 .avatar-inner {
     width: 100%;
     height: 100%;
     border-radius: 8px;
     overflow: hidden;
     background: linear-gradient(145deg, #1a2b5a, #0f1a45);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .avatar-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

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

 .profile-name {
     font-size: 1.4rem;
     font-weight: 800;
     letter-spacing: -0.04em;
     color: var(--text-primary);
     display: flex;
     align-items: center;
     gap: 0.5rem;
     flex-wrap: wrap;
 }

 .profile-meta {
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
     margin: 0.5rem 0 1rem;
 }

 .meta-item {
     display: flex;
     align-items: flex-start;
     gap: 0.55rem;
     font-size: 0.8rem;
     color: var(--text-secondary);
     line-height: 1.4;
 }

 .meta-item i {
     color: var(--blue-300);
     font-size: 0.75rem;
     width: 14px;
     flex-shrink: 0;
     margin-top: 0.1rem;
     text-align: center;
 }

 .meta-link {
     color: var(--text-muted);
     text-decoration: none;
     word-break: break-all;
 }

 .meta-link:hover {
     color: #fff;
 }

 /* ─── STATS STRIP ─── */
 .stats-strip {
     display: flex;
     flex-wrap: wrap;
     gap: 0.6rem;
     margin-top: 1.25rem;
     padding-top: 1.25rem;
     border-top: 1px solid var(--glass-border);
 }

 .stat-card {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-width: 90px;
     padding: 0.75rem 0.9rem;
     border-radius: var(--radius-sm);
     background: rgba(59, 111, 212, 0.1);
     border: 1px solid rgba(91, 143, 232, 0.15);
     text-decoration: none;
     color: var(--text-primary);
     transition: all 0.25s ease;
     overflow: hidden;
 }

 .stat-card:hover {
     transform: translateY(-2px);
     background: rgba(59, 111, 212, 0.15);
     border-color: rgba(91, 143, 232, 0.35);
 }

 .stat-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s;
 }

 .stat-card:hover::after {
     transform: scaleX(1);
 }

 .stat-icon {
     font-size: 0.85rem;
     opacity: 0.9;
 }

 .stat-name {
     font-size: 0.78rem;
     font-weight: 800;
     margin-top: 0.65rem;
     letter-spacing: -0.02em;
     color: var(--text-muted);
 }

 .stat-arrow {
     position: absolute;
     top: 12px;
     right: 10px;
     font-size: 0.75rem;
     opacity: 0.7;
 }

 /* ─── TWO-COL ROW ─── */
 .row-2col {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--content-gap);
     margin-bottom: var(--content-gap);
 }

 .row-2col .card {
     height: 100%;
 }

 /* ─── MAIN LAYOUT ─── */
 .pub-layout {
     display: grid;
     grid-template-columns: 1fr var(--sidebar-width);
     gap: var(--content-gap);
     margin-bottom: var(--content-gap);
     align-items: start;
 }

 .pub-main {
     grid-column: 1;
     min-width: 0;
 }

 .pub-sidebar {
     grid-column: 2;
     display: flex;
     flex-direction: column;
     gap: var(--content-gap);
 }

 /* ─── CARD HEADER / BODY ─── */
 .card-header {
     padding: 1.1rem 1.25rem 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .card-title {
     font-size: 0.88rem;
     font-weight: 700;
     color: var(--text-primary);
     letter-spacing: -0.01em;
 }

 .card-body {
     padding: 0.9rem 1.25rem 1.25rem;
 }

 /* ─── BIO ─── */
 .bio-text {
     font-size: 0.80rem;
     line-height: 1.75;
     color: var(--text-secondary);
     /* max-height: 200px; */
     overflow: hidden;
     transition: max-height 0.4s ease;
     text-align: justify;
 }

 .bio-text.is-collapsed {
     max-height: 112px;
 }

 .bio-text.is-expanded {
     max-height: 9999px;

 }

 .bio-text a {
     color: var(--blue-300);
     text-decoration: none;
 }

 .bio-text a:hover {
     text-decoration: underline;
 }

 .btn-link {
     background: none;
     border: none;
     color: var(--blue-300);
     font-size: 0.78rem;
     font-weight: 600;
     cursor: pointer;
     margin-top: 0.4rem;
     display: flex;
     align-items: center;
     gap: 0.3rem;
     transition: color 0.2s;
     padding: 0;
     font-family: 'Plus Jakarta Sans', sans-serif;
 }

 .btn-link:hover {
     color: var(--cyan-400);
 }

 /* ─── TIMELINE ─── */
 .timeline {
     display: flex;
     flex-direction: column;
     gap: 1.1rem;
 }

 .timeline-item {
     display: flex;
     gap: 0.9rem;
     position: relative;
 }

 .timeline-item:not(:last-child)::after {
     content: '';
     position: absolute;
     left: calc(64px + 0.9rem + 4px);
     top: 24px;
     bottom: -1.1rem;
     width: 1px;
     background: linear-gradient(to bottom, rgba(59, 111, 212, 0.4), transparent);
 }

 .timeline-year {
     font-size: 0.68rem;
     font-weight: 700;
     color: var(--blue-300);
     width: 64px;
     flex-shrink: 0;
     padding-top: 0.1rem;
     white-space: nowrap;
 }

 .timeline-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--blue-400);
     border: 2px solid var(--navy-900);
     box-shadow: 0 0 8px rgba(59, 111, 212, 0.5);
     flex-shrink: 0;
     margin-top: 0.25rem;
 }

 .timeline-dot.dim {
     background: var(--text-muted);
     box-shadow: none;
 }

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

 .timeline-title {
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.15rem;
 }

 .timeline-sub {
     font-size: 0.72rem;
     color: var(--text-muted);
     margin-bottom: 0.25rem;
 }

 /* ─── TAGS ─── */
 .tag {
     padding: 0.25rem 0.65rem;
     border-radius: 6px;
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: 0.02em;
 }

 .tag-primary {
     background: linear-gradient(135deg, rgba(59, 111, 212, 0.3), rgba(34, 211, 238, 0.2));
     border: 1px solid rgba(91, 143, 232, 0.35);
     color: var(--blue-200);
 }

 .tag-ghost {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.10);
     color: var(--text-secondary);
 }

 /* ─── TAB NAV ─── */
 .tab-nav {
     display: flex;
     padding: 0;
     border-bottom: 1px solid var(--glass-border);
     overflow-x: auto;
     scrollbar-width: none;
 }

 .tab-nav::-webkit-scrollbar {
     display: none;
 }

 .tab-btn {
     display: flex;
     align-items: center;
     gap: 0.35rem;
     padding: 0.75rem 1rem;
     border: none;
     background: none;
     color: var(--text-muted);
     font-size: 0.75rem;
     font-weight: 600;
     cursor: pointer;
     border-bottom: 2px solid transparent;
     white-space: nowrap;
     transition: all 0.25s;
     font-family: 'Plus Jakarta Sans', sans-serif;
     position: relative;
     bottom: -1px;
     letter-spacing: 0.01em;
 }

 .tab-btn:hover {
     color: var(--text-secondary);
 }

 .tab-btn.active {
     color: var(--cyan-400);
     border-bottom-color: var(--cyan-400);
 }

 .tab-badge {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     padding: 0.1rem 0.4rem;
     font-size: 0.65rem;
     font-weight: 700;
 }

 .tab-badge.active-badge {
     background: rgba(34, 211, 238, 0.2);
     color: var(--cyan-400);
 }

 /* ─── TAB CONTENT ─── */
 .tab-content-area {
     padding: 1.1rem 1.25rem 1.25rem;
 }

 .tab-pane {
     display: none;
 }

 .tab-pane.active {
     display: block;
     animation: expandCenter 0.3s ease-out both;
 }

 @keyframes expandCenter {
     from {
         opacity: 0;
         transform: scaleX(0.97);
     }

     to {
         opacity: 1;
         transform: scaleX(1);
     }
 }

 /* ─── SUB-TABS ─── */
 .sub-tab-nav {
     display: flex;
     margin-bottom: 1rem;
     border-bottom: 1px solid var(--glass-border);
     overflow-x: auto;
     scrollbar-width: none;
 }

 .sub-tab-nav::-webkit-scrollbar {
     display: none;
 }

 .sub-tab-btn {
     display: flex;
     align-items: center;
     gap: 0.3rem;
     padding: 0.5rem 0.85rem;
     border: none;
     background: none;
     color: var(--text-muted);
     font-size: 0.73rem;
     font-weight: 600;
     cursor: pointer;
     border-bottom: 2px solid transparent;
     white-space: nowrap;
     transition: all 0.2s;
     font-family: 'Plus Jakarta Sans', sans-serif;
     position: relative;
     bottom: -1px;
 }

 .sub-tab-btn:hover {
     color: var(--text-secondary);
 }

 .sub-tab-btn.active {
     color: var(--blue-300);
     border-bottom-color: var(--blue-300);
 }

 .sub-badge {
     background: rgba(91, 143, 232, 0.15);
     border-radius: 4px;
     padding: 0.1rem 0.35rem;
     font-size: 0.63rem;
     font-weight: 700;
     color: var(--blue-300);
 }

 .sub-tab-btn.active .sub-badge {
     background: rgba(91, 143, 232, 0.3);
 }

 .sub-tab-pane {
     display: none;
 }

 .sub-tab-pane.active {
     display: block;
     animation: expandCenter 0.3s ease-out both;
 }

 /* ─── DT SEARCH BAR ─── */
 .dt-top-bar {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin-bottom: 0.5rem;
     gap: 0.6rem;
     border-bottom: 1px solid var(--glass-border);
     padding-bottom: 0.85rem;
 }

 .dt-search-wrap {
     position: relative;
     display: flex;
     align-items: center;
 }

 .dt-search-icon {
     position: absolute;
     left: 0.6rem;
     color: var(--text-muted);
     font-size: 0.7rem;
     pointer-events: none;
 }

 .dt-search-input {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid var(--glass-border);
     border-radius: 8px;
     color: var(--text-secondary);
     font-size: 0.73rem;
     padding: 0.38rem 0.7rem 0.38rem 1.9rem;
     font-family: 'Plus Jakarta Sans', sans-serif;
     outline: none;
     transition: border-color 0.2s;
     width: 170px;
     max-width: 100%;
 }

 .dt-search-input:focus {
     border-color: rgba(91, 143, 232, 0.5);
     color: var(--text-primary);
 }

 .dt-search-input::placeholder {
     color: var(--text-muted);
 }

 /* ─── DT FOOTER ─── */
 .dt-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 0.85rem;
     border-top: 1px solid var(--glass-border);
     margin-top: 0.5rem;
 }

 .dt-page-info {
     font-size: 0.7rem;
     color: var(--text-muted);
 }

 /* ─── HIDE DEFAULT DT ─── */
 .dataTables_wrapper .dataTables_length,
 .dataTables_wrapper .dataTables_filter,
 .dataTables_wrapper .dataTables_info,
 .dataTables_wrapper .dataTables_processing,
 .dataTables_wrapper .dataTables_paginate {
     display: none !important;
 }

 /* ─── CUSTOM PAGINATION ─── */
 .dt-pagination {
     display: flex;
     gap: 0.2rem;
     list-style: none;
     flex-wrap: wrap;
 }

 .dt-page-btn {
     width: 27px;
     height: 27px;
     border-radius: 6px;
     border: 1px solid var(--glass-border);
     background: none;
     color: var(--text-secondary);
     font-size: 0.7rem;
     font-weight: 600;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     font-family: 'Plus Jakarta Sans', sans-serif;
     padding: 0;
 }

 .dt-page-btn:hover {
     border-color: rgba(91, 143, 232, 0.4);
     color: var(--text-primary);
 }

 .dt-page-btn.active {
     background: linear-gradient(135deg, var(--blue-400), var(--navy-600));
     border-color: var(--blue-400);
     color: #fff;
     box-shadow: 0 2px 10px rgba(59, 111, 212, 0.4);
 }

 .dt-page-btn:disabled {
     opacity: 0.3;
     cursor: not-allowed;
 }

 /* ─── TABLE ─── */
 .data-table {
     width: 100%;
     border-collapse: collapse;
 }

 .data-table thead {
     display: none;
 }

 .data-table tr {
     border-bottom: 1px solid var(--glass-border);
     transition: background 0.2s;
 }

 .data-table tr:last-child {
     border-bottom: none;
 }

 .data-table tr:hover {
     background: var(--glass-hover);
 }

 .data-table td {
     padding: 0.8rem 0.45rem;
     vertical-align: top;
 }

 .data-table td:first-child,
 .data-table th:first-child {
     width: 48px !important;
     min-width: 48px !important;
     max-width: 48px !important;
     padding-left: 0.55rem;
     padding-right: 0.55rem;
 }

 .data-table td:nth-child(2),
 .data-table th:nth-child(2) {
     width: auto !important;
 }

 /* ─── PILLS ─── */
 .row-num {
     width: 26px;
     height: 20px;
     background: rgba(59, 111, 212, 0.2);
     border: 1px solid rgba(91, 143, 232, 0.2);
     border-radius: 5px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 0.65rem;
     font-weight: 700;
     color: var(--blue-300);
 }

 .item-title {
     font-size: 0.81rem;
     font-weight: 600;
     color: var(--text-primary);
     text-decoration: none;
     display: block;
     margin-bottom: 0.2rem;
     transition: color 0.2s;
     line-height: 1.4;
 }

 .item-title:hover {
     color: var(--cyan-400);
 }

 .meta-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 0.3rem;
     align-items: center;
 }

 .pill {
     display: inline-flex;
     align-items: center;
     padding: 0.13rem 0.5rem;
     border-radius: 5px;
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 0.03em;
 }

 .pill-q1 {
     background: rgba(16, 185, 129, .2);
     color: #10b981;
     border: 1px solid rgba(16, 185, 129, .3);
 }

 .pill-q2 {
     background: rgba(59, 130, 246, .2);
     color: #60a5fa;
     border: 1px solid rgba(59, 130, 246, .3);
 }

 .pill-q3 {
     background: rgba(245, 158, 11, .2);
     color: #fbbf24;
     border: 1px solid rgba(245, 158, 11, .3);
 }

 .pill-q4 {
     background: rgba(248, 113, 113, .2);
     color: #f87171;
     border: 1px solid rgba(248, 113, 113, .3);
 }

 .pill-noq {
     background: rgba(71, 85, 105, .3);
     color: #94a3b8;
     border: 1px solid rgba(71, 85, 105, .4);
 }

 .pill-wos {
     background: rgba(139, 92, 246, .2);
     color: #a78bfa;
     border: 1px solid rgba(139, 92, 246, .3);
 }

 .pill-journal {
     background: rgba(59, 111, 212, .2);
     color: #60a5fa;
     border: 1px solid rgba(59, 130, 246, .3);
 }

 .pill-proc {
     background: rgba(20, 184, 166, .2);
     color: #2dd4bf;
     border: 1px solid rgba(20, 184, 166, .3);
 }

 .pill-book {
     background: rgba(74, 222, 128, .2);
     color: #4ade80;
     border: 1px solid rgba(74, 222, 128, .3);
 }

 .pill-award {
     background: rgba(245, 200, 66, .2);
     color: #fde047;
     border: 1px solid rgba(234, 179, 8, .3);
 }

 .pill-workshop {
     background: rgba(192, 132, 252, .2);
     color: #c084fc;
     border: 1px solid rgba(168, 85, 247, .3);
 }

 .pill-paten {
     background: rgba(99, 102, 241, .2);
     color: #818cf8;
     border: 1px solid rgba(99, 102, 241, .3);
 }

 .pill-granted {
     background: rgba(16, 185, 129, .2);
     color: #10b981;
     border: 1px solid rgba(16, 185, 129, .3);
 }

 .pill-published {
     background: rgba(16, 185, 129, .2);
     color: #10b981;
     border: 1px solid rgba(16, 185, 129, .3);
 }

 .meta-text {
     font-size: 0.7rem;
     color: var(--text-muted);
 }

 .mono-text {
     font-family: monospace;
     font-size: 0.68rem;
     color: var(--text-muted);
 }

 /* ─── SIDEBAR CHARTS ─── */
 .donut-wrap {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
 }

 .donut-container {
     position: relative;
     width: 100%;
     max-width: 160px;
     aspect-ratio: 1/1;
 }

 .donut-label {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     pointer-events: none;
 }

 .donut-label-val {
     font-size: 1.6rem;
     font-weight: 800;
     color: var(--text-primary);
     line-height: 1;
     letter-spacing: -0.04em;
 }

 .donut-label-sub {
     font-size: 0.65rem;
     color: var(--text-muted);
     font-weight: 500;
 }

 .legend-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.45rem 0.75rem;
     width: 100%;
 }

 .legend-item {
     display: flex;
     align-items: center;
     gap: 0.45rem;
     font-size: 0.72rem;
     color: var(--text-secondary);
 }

 .legend-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .legend-val {
     margin-left: auto;
     font-weight: 700;
     color: var(--text-primary);
 }

 /* ─── QUARTILE TAB BTNS ─── */
 .qtab-row {
     display: flex;
     gap: 6px;
     padding: 0 1.25rem 0.5rem;
 }

 .qtab-btn {
     font-size: 11px;
     font-weight: 600;
     padding: 4px 12px;
     margin-top: 0.75rem;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.2s;
 }

 .qtab-btn.active {
     background: rgba(56, 189, 248, 0.12);
     color: #38bdf8;
     border: 0.5px solid rgba(56, 189, 248, 0.35);
 }

 .qtab-btn:not(.active) {
     background: transparent;
     color: rgba(148, 163, 184, 0.6);
     border: 0.5px solid rgba(255, 255, 255, 0.1);
 }

 /* ─── QUARTILE CHART SECTION ─── */
 .q-section {
     padding: 0 1.25rem 1.25rem;
 }

 .q-legend-bar {
     display: flex;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap;
     margin: 0.75rem 0 0.6rem;
     padding: 0 1.25rem;
 }

 .q-leg {
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 10px;
     color: rgba(148, 163, 184, 0.7);
 }

 .q-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .q-chart-wrap {
     position: relative;
     width: 100%;
     height: 160px;
 }

 .q-stat-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 5px;
     margin-top: 12px;
 }

 .q-stat-cell {
     background: rgba(255, 255, 255, 0.03);
     border: 0.5px solid rgba(255, 255, 255, 0.07);
     border-radius: 7px;
     padding: 6px 3px;
     text-align: center;
 }

 .q-stat-label {
     font-size: 8px;
     color: rgba(148, 163, 184, 0.45);
     margin-bottom: 3px;
 }

 .q-stat-value {
     font-size: 15px;
     font-weight: 600;
 }

 /* ─── EMPTY STATE ─── */
 .empty-state {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 2rem 1rem;
     gap: 0.5rem;
     text-align: center;
     border: 1px dashed rgba(255, 255, 255, 0.08);
     border-radius: var(--radius-md);
     background: rgba(255, 255, 255, 0.02);
     margin-top: 0.25rem;
 }

 .empty-state.compact {
     padding: 1.5rem 1rem;
     border-color: rgba(255, 255, 255, 0.1);
 }

 .empty-state-icon {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 0.25rem;
 }

 .empty-state-icon.compact {
     width: 32px;
     height: 32px;
 }

 .empty-state-icon.blue {
     background: rgba(59, 111, 212, 0.12);
 }

 .empty-state-icon.indigo {
     background: rgba(99, 102, 241, 0.12);
 }

 .empty-state-icon.yellow {
     background: rgba(245, 200, 66, 0.10);
 }

 .empty-state-icon.purple {
     background: rgba(192, 132, 252, 0.10);
 }

 .empty-state-icon.blue-sm {
     background: rgba(59, 111, 212, 0.15);
 }

 .empty-state-title {
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--text-secondary);
 }

 .empty-state-title.sm {
     font-size: 0.78rem;
 }

 .empty-state-sub {
     font-size: 0.7rem;
     color: var(--text-muted);
     line-height: 1.5;
     max-width: 220px;
 }

 /* ─── SIDEBAR ANIMATION ─── */
 .sidebar-slide .card {
     animation: slideInRight 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
 }

 .sidebar-slide .card:nth-child(2) {
     animation-delay: 0.06s;
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(20px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 /* ─── SCROLL TOP ─── */
 #scrollTop {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--blue-400), var(--navy-600));
     border: none;
     color: #fff;
     font-size: 1rem;
     cursor: pointer;
     box-shadow: 0 4px 16px rgba(59, 111, 212, .4);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 99;
 }

 /* ─── FOOTER ─── */
 .site-footer {
     padding: 1.25rem 1.5rem;
     border-top: 1px solid var(--glass-border);
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.75rem;
     font-size: 0.76rem;
     color: var(--text-muted);
 }

 /* ─── RESPONSIVE: TABLET ─── */
 @media (max-width: 960px) {
     .pub-layout {
         grid-template-columns: 1fr;
     }

     .pub-main {
         grid-column: 1;
     }

     .pub-sidebar {
         grid-column: 1;
         flex-direction: row;
         align-items: stretch;
     }

     .pub-sidebar .card {
         flex: 1;
     }

     .donut-wrap {
         flex-direction: row;
         align-items: center;
     }

     .donut-container {
         max-width: 120px;
     }

     .legend-grid {
         grid-template-columns: 1fr;
     }
 }

 /* ─── RESPONSIVE: MOBILE ─── */
 @media (max-width: 700px) {
     :root {
         --content-gap: 1rem;
     }

     .bio-text {
         max-height: 300px;
     }

     .content {
         padding: 1rem 1rem 3rem;
     }

     .row-2col {
         grid-template-columns: 1fr;
     }

     .profile-grid {
         flex-direction: column;
     }

     .avatar-ring {
         width: 80px;
     }

     .profile-name {
         font-size: 1.1rem;
     }

     /* pub sidebar stacks vertically on mobile */
     .pub-sidebar {
         flex-direction: column;
     }

     .pub-sidebar .card {
         flex: unset;
     }

     /* donut resets to column on mobile */
     .donut-wrap {
         flex-direction: column;
     }

     .donut-container {
         max-width: 160px;
     }

     .legend-grid {
         grid-template-columns: 1fr 1fr;
     }

     /* tabs */
     .tab-btn {
         padding: 0.6rem 0.65rem;
         font-size: 0.7rem;
         gap: 0.25rem;
     }

     .sub-tab-btn {
         padding: 0.42rem 0.6rem;
         font-size: 0.68rem;
     }

     /* search */
     .dt-search-input {
         width: 100%;
     }

     .dt-top-bar {
         justify-content: flex-end;
     }

     /* quartile */
     .q-stat-grid {
         grid-template-columns: repeat(5, 1fr);
     }

     .q-stat-value {
         font-size: 13px;
     }

     .q-stat-label {
         font-size: 7px;
     }

     .q-chart-wrap {
         height: 130px;
     }

     .qtab-row {
         padding: 0 1rem 0.5rem;
     }

     .q-section {
         padding: 0 1rem 1rem;
     }

     .q-legend-bar {
         padding: 0 1rem;
         gap: 6px;
     }

     /* academic overview sidebar card on mobile */
     .tab-content-area {
         padding: 1rem;
     }

     .card-header {
         padding: 1rem 1rem 0;
     }

     .card-body {
         padding: 0.85rem 1rem 1rem;
     }
 }

 @media (max-width: 400px) {
     .profile-name {
         font-size: 1rem;
     }

     .stats-strip {
         gap: 0.4rem;
     }

     .stat-card {
         min-width: 80px;
     }

     .tab-btn {
         padding: 0.55rem 0.45rem;
         font-size: 0.68rem;
     }

     .tab-badge {
         padding: 0.1rem 0.3rem;
         font-size: 0.6rem;
     }

     .q-stat-value {
         font-size: 12px;
     }
 }