/**
 * JHSCC Custom Stylesheet - Journal of Health Sciences and Collaborative Care
 * Publisher: PT Mahakarya Citra Utama Group
 * 
 * Prestigious, Human-Crafted Academic Editorial Design & Optimized Responsive Spacing
 * Completely free of sci-fi/AI gimmicks, neon outlines, and cramped margins.
 */

:root {
    /* Prestigious Academic Health Sciences Color Palette */
    --tech-primary: #004b7a;
    --tech-primary-hover: #003657;
    --tech-primary-rgb: 0, 75, 122;
    
    --tech-accent: #0284c7;
    --tech-accent-hover: #0369a1;
    --tech-accent-rgb: 2, 132, 199;

    --tech-teal: #0d9488;
    --tech-emerald: #059669;
    
    --tech-gradient: linear-gradient(135deg, #004b7a 0%, #006b9e 50%, #0284c7 100%);
    --tech-gradient-subtle: linear-gradient(135deg, rgba(0, 75, 122, 0.06) 0%, rgba(2, 132, 199, 0.06) 100%);
    --tech-gradient-hero: linear-gradient(145deg, #021422 0%, #05243a 45%, #0a385c 100%);
    
    --tech-surface: #ffffff;
    --tech-surface-alt: #f8fafc;
    --tech-border: #e2e8f0;
    --tech-border-hover: #cbd5e1;
    
    --tech-text-main: #0f172a;
    --tech-text-body: #334155;
    --tech-text-muted: #64748b;
    
    --tech-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
    --tech-shadow-sm: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
    --tech-shadow-md: 0 10px 25px -4px rgba(15, 23, 42, 0.08);
    --tech-shadow-lg: 0 18px 40px -6px rgba(15, 23, 42, 0.12);
    
    --tech-radius-sm: 8px;
    --tech-radius-md: 12px;
    --tech-radius-lg: 16px;
    --tech-radius-xl: 20px;
}

/* ==========================================================================
   1. GLOBAL CONTAINER & GENEROUS RESPONSIVE SPACING (DESKTOP & MOBILE)
   Prevents crampedness ("mepet/dempet") across all device widths.
   ========================================================================== */

body {
    background-color: #f8fafc !important;
    color: var(--tech-text-body) !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    line-height: 1.68 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

p {
    line-height: 1.68 !important;
    margin-bottom: 0.95rem !important;
    color: var(--tech-text-body) !important;
}

.pkp_structure_page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background-color: #f8fafc !important;
}

.pkp_structure_content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Universal Container: 1320px with generous lateral breathing room */
.container {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1.25rem, 3.5vw, 2.25rem) !important;
    padding-right: clamp(1.25rem, 3.5vw, 2.25rem) !important;
}

.pkp_structure_main.container {
    padding-top: 1.5rem !important;
    padding-bottom: 3.5rem !important;
}

/* Row gutters: 32px to 48px comfortable separation */
.row.g-4,
.row.g-4.g-lg-5 {
    --bs-gutter-x: 2rem !important;
    --bs-gutter-y: 2rem !important;
}

@media (min-width: 992px) {
    .row.g-4.g-lg-5,
    .row.g-lg-5 {
        --bs-gutter-x: 2.75rem !important;
        --bs-gutter-y: 2.75rem !important;
    }
}

/* ==========================================================================
   2. TOP BAR & NAVBAR (CLEAN, STATELY ACADEMIC HEADER)
   ========================================================================== */

.tech-top-bar {
    background: #031422 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.5rem 0 !important;
    font-size: 0.825rem !important;
}

.tech-top-bar .issn-badge {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.85rem !important;
    color: #e2e8f0 !important;
    font-size: 0.775rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.tech-top-bar .issn-badge:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.tech-navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
    padding: 0.75rem 0 !important;
    transition: all 0.25s ease !important;
}

.tech-navbar.is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
}

.tech-brand-logo {
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Navigation items (Prominent, Elegant Academic Header) */
.tech-nav .nav-link {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 0.985rem !important;
    padding: 0.65rem 1.15rem !important;
    border-radius: 10px !important;
    letter-spacing: 0.015em !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.tech-nav .nav-link:hover {
    color: var(--tech-primary) !important;
    background: rgba(0, 75, 122, 0.06) !important;
    transform: translateY(-1px) !important;
}

.tech-nav .nav-link.active {
    color: var(--tech-primary) !important;
    background: rgba(0, 75, 122, 0.09) !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 75, 122, 0.08) !important;
}

.tech-nav .dropdown-menu {
    border-radius: 12px !important;
    padding: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.12) !important;
}

.tech-nav .dropdown-item {
    padding: 0.6rem 1rem !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    color: #334155 !important;
    transition: all 0.18s ease !important;
}

.tech-nav .dropdown-item:hover {
    background: rgba(0, 75, 122, 0.06) !important;
    color: var(--tech-primary) !important;
    transform: translateX(3px) !important;
}

.btn-tech-login-btn {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1.1rem !important;
    border-radius: 9px !important;
    transition: all 0.2s ease !important;
}

.btn-tech-login-btn:hover {
    background: #f1f5f9 !important;
    color: var(--tech-primary) !important;
    border-color: #94a3b8 !important;
}

.btn-tech-register-btn {
    background: var(--tech-primary) !important;
    border: 1px solid var(--tech-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(0, 75, 122, 0.2) !important;
    transition: all 0.2s ease !important;
}

.btn-tech-register-btn:hover {
    background: var(--tech-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 75, 122, 0.3) !important;
}

/* ==========================================================================
   3. HERO SECTION (MODERN PRESTIGIOUS HEALTH SCIENCES & CLINICAL IDENTITY)
   ========================================================================== */

.tech-hero {
    background: 
        /* Luminous Medical Heartbeat/DNA Glow behind Showcase Card */
        radial-gradient(circle 520px at 85% 45%, rgba(20, 184, 166, 0.28) 0%, rgba(14, 165, 233, 0.16) 42%, transparent 75%),
        /* Luminous Clinical Pulse Glow behind Hero Title */
        radial-gradient(circle 580px at 15% 40%, rgba(2, 132, 199, 0.32) 0%, rgba(13, 148, 136, 0.18) 46%, transparent 80%),
        /* Subtle Precision Medical Grid */
        linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px),
        /* Deep Clinical Bio-Navy Foundation */
        linear-gradient(145deg, #02101b 0%, #041c2e 35%, #062b42 70%, #02121e 100%) !important;
    background-size: 
        100% 100%,
        100% 100%,
        38px 38px,
        38px 38px,
        100% 100% !important;
    background-position: 
        center,
        center,
        -1px -1px,
        -1px -1px,
        center !important;
    position: relative !important;
    padding: clamp(2.8rem, 4.5vw, 3.8rem) 0 clamp(3.4rem, 5.2vw, 4.4rem) 0 !important;
    overflow: hidden !important;
    border-bottom: 3px solid #0d9488 !important;
}

/* Medical Multi-Layer Biomedical Canvas Animation */
.tech-hero-medical-canvas,
#hero-medical-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Main Hero Content */
.tech-hero-content {
    position: relative !important;
    z-index: 3 !important;
}

/* Remove cheesy cyber artifacts & neon floating orbs */
.tech-hero-orb-1,
.tech-hero-orb-2,
.tech-hero-orb-3,
.tech-hero-hud,
.tech-hero-scanline,
.tech-hero-grid-perspective {
    display: none !important;
}

.tech-hero-scope-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(45, 212, 191, 0.35) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    padding: 0.35rem 1.1rem !important;
    box-shadow: 0 4px 16px rgba(2, 20, 34, 0.4) !important;
}

.tech-hero-badge-inner {
    background: linear-gradient(135deg, #0284c7 0%, #0d9488 100%) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.03em !important;
}

.tech-hero-badge-text {
    color: #f8fafc !important;
    font-size: 0.825rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

.tech-hero-title {
    font-size: clamp(2.1rem, 4vw, 3.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.2rem !important;
    text-shadow: 0 2px 14px rgba(2, 18, 30, 0.7) !important;
}

.tech-hero-meta-pill {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 999px !important;
    padding: 0.38rem 0.95rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #f1f5f9 !important;
    display: inline-flex !important;
    align-items: center !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
}

.tech-hero-meta-pill:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
}

.tech-hero-tagline-box p,
.tech-hero-desc p {
    color: #e2e8f0 !important;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem) !important;
    line-height: 1.65 !important;
    max-width: 650px !important;
    text-shadow: 0 1px 4px rgba(2, 18, 30, 0.5) !important;
}

.btn-hero-cta-main {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    padding: 0.85rem 1.85rem !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4) !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.btn-hero-cta-main:hover {
    background: #0369a1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5) !important;
    color: #ffffff !important;
}

.btn-hero-cta-outline {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    padding: 0.85rem 1.6rem !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.02em !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.btn-hero-cta-outline:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Floating Clean Current Issue Showcase Card */
.tech-showcase-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--tech-radius-lg) !important;
    box-shadow: 0 20px 45px -8px rgba(2, 20, 34, 0.6) !important;
    padding: 1.5rem !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
    position: relative !important;
    z-index: 5 !important;
}

.tech-showcase-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 26px 50px -10px rgba(2, 20, 34, 0.7) !important;
}

.tech-showcase-cover {
    transition: transform 0.3s ease !important;
}

.tech-showcase-card:hover .tech-showcase-cover {
    transform: scale(1.02) !important;
}

/* ==========================================================================
   4. METRICS COUNTER BAR (REFINED & SOLID)
   ========================================================================== */

.tech-metrics-bar {
    margin-top: -2.25rem !important;
    margin-bottom: 1.25rem !important;
    position: relative !important;
    z-index: 10 !important;
}

.tech-metric-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--tech-primary) !important;
    border-radius: var(--tech-radius-md) !important;
    box-shadow: 0 10px 25px -4px rgba(2, 20, 34, 0.08), 0 4px 8px -2px rgba(2, 20, 34, 0.04) !important;
    padding: 1.35rem 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.15rem !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tech-metric-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px -4px rgba(2, 20, 34, 0.12), 0 6px 12px -2px rgba(2, 20, 34, 0.06) !important;
    border-color: #cbd5e1 !important;
    border-top-color: #0d9488 !important;
}

.tech-metric-card:hover .tech-metric-icon {
    transform: scale(1.1) rotate(5deg) !important;
    background: rgba(13, 148, 136, 0.14) !important;
    color: #0d9488 !important;
}

.tech-metric-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: var(--tech-gradient-subtle) !important;
    color: var(--tech-primary) !important;
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.tech-metric-value {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: var(--tech-primary) !important;
    line-height: 1.1 !important;
}

.tech-metric-label {
    font-size: 0.775rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--tech-text-muted) !important;
    margin-top: 3px !important;
}

/* ==========================================================================
   5. EDITORIAL FEED: ABOUT CARD, ARTICLE CARDS, AND INDEXING SECTION
   ========================================================================== */

/* About the Journal Card: Generous Whitespace, Subtle Accent */
.tech-about-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--tech-primary) !important;
    border-radius: var(--tech-radius-lg) !important;
    padding: clamp(1.75rem, 3vw, 2.5rem) !important;
    margin-bottom: 2.25rem !important;
    box-shadow: var(--tech-shadow-sm) !important;
    transition: all 0.25s ease !important;
}

.tech-about-card:hover {
    box-shadow: var(--tech-shadow-md) !important;
}

.tech-about-spec-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 1rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    height: 100% !important;
    transition: all 0.2s ease !important;
}

.tech-about-spec-item:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.tech-about-spec-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(0, 75, 122, 0.08) !important;
    color: var(--tech-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
}

.tech-about-spec-label {
    display: block !important;
    font-size: 0.725rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--tech-text-muted) !important;
    margin-bottom: 2px !important;
}

.tech-about-spec-value {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--tech-text-main) !important;
}

/* Article Cards: Stately, Editorial Layout with Breathable Padding */
.tech-article-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--tech-primary) !important;
    border-radius: var(--tech-radius-md) !important;
    padding: clamp(1.4rem, 2.5vw, 1.85rem) !important;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--tech-shadow-sm) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.tech-article-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.1), 0 4px 10px -2px rgba(15, 23, 42, 0.04) !important;
    border-color: #cbd5e1 !important;
    border-left-color: var(--tech-accent) !important;
}

.tech-article-title {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    margin: 0.65rem 0 !important;
}

.tech-article-title-link {
    color: var(--tech-text-main) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.tech-article-title-link:hover {
    color: var(--tech-primary) !important;
}

.tech-article-category {
    background: rgba(0, 75, 122, 0.07) !important;
    color: var(--tech-primary) !important;
    border: 1px solid rgba(0, 75, 122, 0.15) !important;
    font-weight: 600 !important;
    font-size: 0.775rem !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.tech-article-authors {
    color: #475569 !important;
    font-size: 0.875rem !important;
    font-style: italic !important;
}

.btn-tech-pdf {
    background: var(--tech-primary) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 0.45rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    box-shadow: 0 2px 6px rgba(0, 75, 122, 0.2) !important;
    transition: all 0.2s ease !important;
}

.btn-tech-pdf:hover {
    background: var(--tech-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 75, 122, 0.35) !important;
}

.tech-doi-pill {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 0.775rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.tech-doi-pill:hover {
    background: #e2e8f0 !important;
    color: var(--tech-primary) !important;
}

/* Single Comprehensive Indexing Section Below Articles */
.tech-indexing-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--tech-primary) !important;
    border-radius: var(--tech-radius-lg) !important;
    box-shadow: var(--tech-shadow-sm) !important;
    padding: clamp(1.75rem, 3vw, 2.25rem) !important;
    margin-bottom: 0 !important;
}

.tech-sidebar > .tech-sidebar-card:last-child {
    margin-bottom: 0 !important;
}

.tech-index-logo-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    min-height: 64px !important;
    min-width: 130px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tech-index-logo-box img {
    transition: transform 0.25s ease !important;
}

.tech-index-logo-box:hover {
    transform: translateY(-3px) !important;
    border-color: var(--tech-accent) !important;
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.12) !important;
}

.tech-index-logo-box:hover img {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   6. SIDEBAR: TACTILE, SPACIOUS & PRESTIGIOUS (NO CRAMPED ROWS)
   ========================================================================== */

.tech-sidebar-card {
    border-radius: var(--tech-radius-md) !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: var(--tech-shadow-sm) !important;
    margin-bottom: 1.35rem !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.tech-sidebar-card:hover {
    box-shadow: var(--tech-shadow-md) !important;
    border-color: #cbd5e1 !important;
}

/* ==========================================================================
   ARTICLE TEMPLATE CARD (CLEAN ACADEMIC DESIGN)
   ========================================================================== */

.tech-template-doc-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.tech-template-doc-box:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-1px) !important;
}

.tech-template-btn {
    background: var(--tech-primary) !important;
    border-color: var(--tech-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.tech-template-btn:hover {
    background: var(--tech-primary-dark, #003657) !important;
    border-color: var(--tech-primary-dark, #003657) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 75, 122, 0.2) !important;
}

.tech-sidebar-header {
    background: linear-gradient(135deg, #003a61 0%, #004b7a 100%) !important;
    color: #ffffff !important;
    padding: 13px 18px !important;
    font-weight: 800 !important;
    font-size: 0.885rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
}

.tech-sidebar-body {
    background: #ffffff !important;
    padding: 18px !important;
}

/* Main Menu Items: Real button pills with comfortable touch targets */
.tech-sidebar .tech-sidebar-body .d-flex.flex-column > a[class*="p-2.5"],
.tech-sidebar .tech-sidebar-body .d-flex.flex-column > a.p-2\.5 {
    padding: 11px 16px !important;
    margin-bottom: 7px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 0.885rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.tech-sidebar .tech-sidebar-body .d-flex.flex-column > a[class*="p-2.5"]:hover,
.tech-sidebar .tech-sidebar-body .d-flex.flex-column > a.p-2\.5:hover {
    background: #f0f7ff !important;
    border-color: #93c5fd !important;
    color: var(--tech-primary) !important;
    transform: translateX(3px) !important;
}

/* Popular Articles (Spacious flex layout, no collision) */
.tech-popular-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

.tech-popular-item:last-child {
    margin-bottom: 0 !important;
}

.tech-popular-item:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 4px 14px rgba(0, 75, 122, 0.08) !important;
    transform: translateY(-2px) !important;
}

.tech-popular-title {
    font-size: 0.885rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: var(--tech-text-main) !important;
    transition: color 0.2s ease !important;
}

.tech-popular-title:hover {
    color: var(--tech-primary) !important;
}

.tech-popular-rank {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.885rem !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    background: var(--tech-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 75, 122, 0.25) !important;
}

/* Recommended Tools (Scaled Up Circle Badges & Clear Font) */
.tech-tool-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    min-height: 52px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.tech-tool-card:hover {
    background: #f8fafc !important;
    border-color: var(--tech-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 75, 122, 0.1) !important;
    color: var(--tech-primary) !important;
}

.tech-tool-badge-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 1.15rem !important;
    transition: transform 0.2s ease !important;
}

.tech-tool-card:hover .tech-tool-badge-icon {
    transform: scale(1.1) !important;
}

/* Support By Logos (Prominent & Scaled Up) */
.tech-support-logo-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    min-height: 74px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
}

.tech-support-logo-card img {
    max-height: 58px !important;
    max-width: 95% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.2s ease !important;
}

.tech-support-logo-card:hover {
    border-color: var(--tech-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 75, 122, 0.1) !important;
}

.tech-support-logo-card:hover img {
    transform: scale(1.05) !important;
}

/* Information Buttons - Preserved Exactly */
.tech-info-btn {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid var(--tech-primary) !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    color: var(--tech-text-main) !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.tech-info-btn:hover {
    background: #f0f7ff !important;
    color: var(--tech-primary) !important;
    border-color: #cbd5e1 !important;
    border-left-color: var(--tech-accent) !important;
    transform: translateX(3px) !important;
}

/* Modern Academic Chips Keyword Tags */
.tech-keyword-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 2px 0 !important;
}

.tech-kw-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 999px !important;
    color: #0369a1 !important;
    font-size: 0.835rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    line-height: 1.35 !important;
}

.tech-kw-tag::before {
    content: '#' !important;
    font-weight: 700 !important;
    opacity: 0.55 !important;
    font-size: 0.85em !important;
    color: #0284c7 !important;
}

.tech-kw-tag:hover {
    background: linear-gradient(135deg, #0284c7 0%, #004b7a 100%) !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}

.tech-kw-tag:hover::before {
    color: #ffffff !important;
    opacity: 0.85 !important;
}

/* Enhanced 2-Column Main Menu Directory */
.tech-main-menu-grid .tech-menu-btn {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    gap: 10px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    color: #1e293b !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

.tech-main-menu-grid .tech-menu-btn i,
.tech-main-menu-grid .tech-menu-btn svg {
    font-size: 1rem !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    color: var(--tech-accent) !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.tech-main-menu-grid .tech-menu-btn span {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
}

.tech-main-menu-grid .tech-menu-btn:hover {
    background: #ffffff !important;
    border-color: var(--tech-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12) !important;
    color: var(--tech-primary) !important;
}

.tech-main-menu-grid .tech-menu-btn:hover span {
    color: var(--tech-primary) !important;
}

.tech-main-menu-grid .tech-menu-btn:hover i,
.tech-main-menu-grid .tech-menu-btn:hover svg {
    color: var(--tech-primary) !important;
    transform: scale(1.15) !important;
}

/* Chart Legend Spacing */
.tech-chart-legend-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 12px !important;
}

/* ==========================================================================
   7. FULL-WIDTH LOWER SECTIONS (MONTHLY STATS & FOCUS TRACKS) - PERFECT ALIGNMENT
   ========================================================================== */

.tech-stats-section {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0.75rem !important;
    margin-bottom: 2rem !important;
    padding-left: clamp(1.25rem, 3.5vw, 2.25rem) !important;
    padding-right: clamp(1.25rem, 3.5vw, 2.25rem) !important;
}

.tech-scope-section {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    padding-left: clamp(1.25rem, 3.5vw, 2.25rem) !important;
    padding-right: clamp(1.25rem, 3.5vw, 2.25rem) !important;
}

.tech-stats-section .card,
.tech-scope-section .card {
    width: 100% !important;
    margin: 0 auto !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--tech-primary) !important;
    border-radius: var(--tech-radius-lg) !important;
    box-shadow: var(--tech-shadow-sm) !important;
    padding: clamp(1.75rem, 3vw, 2.5rem) !important;
}

/* Redesigned Focus Tracks & Research Domains Multi-Column Cards */
.tech-domain-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
}

.tech-domain-card:hover {
    transform: translateY(-5px) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 12px 28px -4px rgba(0, 91, 130, 0.12) !important;
}

.tech-domain-index {
    position: absolute !important;
    bottom: 8px !important;
    right: 16px !important;
    top: auto !important;
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    font-family: 'Plus Jakarta Sans', monospace !important;
    opacity: 0.05 !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.tech-domain-footer {
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid #e2e8f0 !important;
    min-height: 84px !important;
    align-content: flex-start !important;
    position: relative !important;
    z-index: 1 !important;
}

.tech-domain-icon-box {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.tech-domain-badge {
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.75rem !important;
}

.tech-domain-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 11px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.35 !important;
    transition: all 0.2s ease !important;
}

.tech-domain-pill:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Publication Journey & Stepper Timeline Cards */
.tech-journey-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    padding: 1.35rem 1.15rem !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

.tech-journey-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px -4px rgba(0, 75, 122, 0.12) !important;
    border-color: #38bdf8 !important;
}

.tech-step-icon-circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    margin: 0.75rem auto !important;
    transition: transform 0.25s ease !important;
}

.tech-journey-card:hover .tech-step-icon-circle {
    transform: scale(1.08) !important;
}

.tech-step-time-badge {
    font-size: 0.775rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 0.35rem 0.85rem !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Desktop Connecting Arrow between Stepper Cards */
@media (min-width: 992px) {
    .tech-journey-col {
        position: relative !important;
    }
    .tech-journey-col:not(:last-child)::after {
        content: '→' !important;
        position: absolute !important;
        right: -13px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 26px !important;
        height: 26px !important;
        background: #ffffff !important;
        border: 1.5px solid #0284c7 !important;
        border-radius: 50% !important;
        color: #0284c7 !important;
        font-weight: 900 !important;
        font-size: 0.85rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2) !important;
    }
}

.tech-journey-card p {
    max-width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   EDITORIAL SUPPORT & CONTACT DESK (CLEAN, NATURAL & DIRECT)
   ========================================================================== */

.tech-contact-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.tech-contact-card:hover {
    box-shadow: var(--tech-shadow-md) !important;
    border-color: #cbd5e1 !important;
}

/* ==========================================================================
   8. FOOTER: PRESTIGIOUS DARK MIDNIGHT IDENTITY & HIGH CONTRAST TYPOGRAPHY
   ========================================================================== */

.tech-footer {
    background: #031422 !important;
    border-top: 3px solid var(--tech-primary) !important;
    padding: clamp(2.5rem, 4.5vw, 3.5rem) 0 1.5rem !important;
    color: #cbd5e1 !important;
}

.tech-footer,
.tech-footer p,
.tech-footer-about,
.tech-footer-about p {
    color: #cbd5e1 !important;
    line-height: 1.6 !important;
}

.tech-footer-title {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 1.25rem !important;
    position: relative !important;
    padding-bottom: 0.5rem !important;
}

.tech-footer-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 28px !important;
    height: 2px !important;
    background: var(--tech-accent) !important;
}

.tech-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tech-footer-links li {
    margin-bottom: 0.65rem !important;
}

.tech-footer-links li a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
}

.tech-footer-links li a:hover {
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

.tech-footer-badge {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.775rem !important;
    color: #cbd5e1 !important;
}

/* ==========================================================================
   9. MOBILE AUDIT (< 768px): PREVENT HORIZONTAL SCROLL & EDGE-HUGGING
   ========================================================================== */

@media (max-width: 767.98px) {
    .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    
    .tech-hero {
        padding: 2.5rem 0 2.75rem !important;
    }
    
    .tech-hero-title {
        font-size: 1.75rem !important;
    }
    
    .tech-showcase-card {
        max-width: 100% !important;
        margin-top: 1.75rem !important;
    }
    
    .tech-metrics-bar {
        margin-top: 1.25rem !important;
    }
    
    .tech-metric-card {
        padding: 1rem 0.95rem !important;
        gap: 0.75rem !important;
    }
    
    .tech-metric-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.15rem !important;
    }
    
    .tech-metric-value {
        font-size: 1.35rem !important;
    }
    
    .tech-article-card {
        padding: 1.15rem !important;
    }
    
    .tech-sidebar {
        margin-top: 2rem !important;
    }
}

/* ==========================================================================
   10. AUTHENTICATION (LOGIN & REGISTRATION) POLISHED ACADEMIC DESIGN
   ========================================================================== */

.page_login,
.page_register,
.page_lost_password,
.page_openid_login {
    background-color: #f8fafc !important;
}

/* Ensure no unstyled list bullets or margin overflows in login/openid templates */
#openid-provider-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Form inputs & input group styling for Auth pages */
.page_login .input-group-text,
.page_register .input-group-text,
.page_lost_password .input-group-text {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

.page_login .form-control,
.page_register .form-control,
.page_register .form-select,
.page_lost_password .form-control {
    border-color: #cbd5e1 !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.925rem !important;
    color: #1e293b !important;
}

.page_login .form-control:focus,
.page_register .form-control:focus,
.page_register .form-select:focus,
.page_lost_password .form-control:focus {
    border-color: var(--tech-accent) !important;
    box-shadow: 0 0 0 0.25rem rgba(2, 132, 199, 0.15) !important;
}

/* ORCID Profile Box in Register Page */
.page_register [id*="orcid"],
.page_register .orcid-profile-form {
    border: 1px solid #bef264 !important;
    background: #f7fee7 !important;
    border-radius: 12px !important;
    padding: 0.85rem 1.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 100% !important;
}

.page_register [id*="orcid"] img,
.page_register [id*="orcid"] svg,
.page_register .orcid-profile-form img {
    max-height: 36px !important;
    width: auto !important;
    border: none !important;
    margin: 0 !important;
}

/* Google SSO button hover effect */
.hover-lift:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: #c2c7d0 !important;
}