/* ============================================
   HAXD 2027 - Page-Specific Styles
   Extracted from inline styles for better maintainability
   ============================================ */

/* ============================================
   INDEX PAGE STYLES
   ============================================ */

/* IEEE Italy Section logo in the "Ready to Submit?" CTA */
.cta-ieee-logo {
    display: block;
    height: 52px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
.cta-cosponsor-logos .cta-ieee-logo {
    margin-left: 0;
    margin-right: 0;
}
/* Co-sponsor logo cards (sponsors page) */
.cosponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cosponsor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}
.cosponsor-card-logo {
    height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.cosponsor-card-name {
    font-family: var(--font-heading, "Playfair Display", serif);
    color: var(--primary-color, #2563EB);
    font-size: 1.05rem;
}
html[data-theme="dark"] .cosponsor-card-logo {
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 12px;
}
html[data-theme="dark"] .cosponsor-card-name {
    color: #93C5FD;
}
html[data-theme="dark"] .cta-ieee-logo {
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
}

/* Conference theme/tagline under the Scope section title */
.scope-theme {
    font-family: var(--font-heading, "Playfair Display", serif);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.4;
    color: var(--primary-color, #2563EB);
    padding-left: .85rem;
    border-left: 3px solid var(--primary-color, #2563EB);
}
html[data-theme="dark"] .scope-theme {
    color: #93C5FD;
    border-left-color: #93C5FD;
}

/* Hero with background image */
.hero-with-image {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #F4F7FC 0%, #EEF3FB 40%, #FFF5E8 70%, #FFFAF2 100%);
}

/* Hide dot-grid and orb overlays so background image stays visible */
.hero-with-image::before,
.hero-with-image::after {
    display: none !important;
}

.hero-with-image > .container {
    position: relative;
    z-index: 1;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/naples/naples-bay-city-vesuvius.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    z-index: 0;
}

/* Floating image component */
.floating-image {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.floating-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Carousel inside floating-image */
.floating-image.carousel {
    transform: none;
}

.floating-image.carousel:hover {
    transform: translateY(-5px);
}

.floating-image .carousel-item img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.floating-image .carousel-indicators {
    margin-bottom: 0.5rem;
}

.floating-image .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.floating-image .carousel-indicators .active {
    background: #ffffff;
    transform: scale(1.2);
}

.floating-image .carousel-control-prev,
.floating-image .carousel-control-next {
    width: 36px;
    height: 36px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    background: rgba(37, 99, 235, 0.6);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.floating-image .carousel-control-prev {
    left: 8px;
}

.floating-image .carousel-control-next {
    right: 8px;
}

.floating-image:hover .carousel-control-prev,
.floating-image:hover .carousel-control-next {
    opacity: 1;
}

.floating-image .carousel-control-prev:hover,
.floating-image .carousel-control-next:hover {
    background: rgba(37, 99, 235, 0.85);
}

.floating-image .carousel-control-prev-icon,
.floating-image .carousel-control-next-icon {
    width: 14px;
    height: 14px;
}

/* Image divider parallax section */
.image-divider {
    height: 300px;
    background-image: url('../images/naples/naples-coast.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.image-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(27, 42, 74, 0.25), rgba(0,0,0,0.45));
}

@media (max-width: 768px) {
    .image-divider {
        height: 200px;
        background-attachment: scroll;
    }
}

/* IEEE banner styling */
.ieee-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.25rem;
    border-radius: 9999px;
    border: 2px solid var(--primary-color);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.08), 0 0.125rem 0.5rem rgba(0,0,0,0.06);
    font-weight: 600;
    line-height: 1.1;
    z-index: 2;
}

.hero-with-image .ieee-banner {
    background: rgba(255,255,255,0.97);
}

.ieee-banner img {
    height: 42px;
    width: auto;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05));
}

.ieee-banner .label {
    letter-spacing: 0.01em;
}

@media (min-width: 992px) {
    .ieee-banner {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .ieee-banner img {
        height: 32px;
    }
}

/* Theme container */
.theme-container {
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================
   CFP PAGE STYLES
   ============================================ */

/* Topic cards */
.topic-card {
    background: white;
    border-radius: 6px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.06);
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid var(--primary-color);
}

.topic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.topic-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.topic-icon {
    font-size: 1.8rem;
    margin-right: 0.8rem;
}

.topic-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.topic-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.topic-list li {
    padding: 0.4rem 0;
    position: relative;
    padding-left: 1.5rem;
    color: #495057;
}

.topic-list li::before {
    content: "•";
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Text light custom - black text for readability */
.text-light-custom {
    color: #000000 !important;
    line-height: 1.7;
}

/* ============================================
   CFPS (POSTERS) PAGE STYLES
   ============================================ */

/* Guideline items */
.guideline-item {
    display: flex;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.guideline-item:last-child {
    border-bottom: none;
}

/* Warning and info boxes */
.warning-box {
    background: #fff9e6;
    border-left: 4px solid #ffc107;
    padding: 1.5rem;
    border-radius: 4px;
    margin: 1.5rem 0;
}

.info-box {
    background: #e8f4fd;
    border-left: 4px solid #0d6efd;
    padding: 1.5rem;
    border-radius: 4px;
    margin: 1.5rem 0;
}

/* ============================================
   SHARED COMPONENT STYLES
   ============================================ */

/* Hover card animation */
.hover-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(2,6,23,.12);
}

/* Note callout (if not in main.css or needs override) */
.note-callout {
    border-left: 4px solid var(--secondary-color);
    background: #ecfeff;
    border: 1px solid #bae6fd;
    border-left-color: var(--secondary-color);
    border-radius: 6px;
    padding: 1rem;
}

/* Dates table */
.dates-table thead th {
    background: #f8fafc;
    font-weight: 700;
}

.dates-table td,
.dates-table th {
    vertical-align: middle;
}

/* ============================================
   CF-WORKSHOPS PAGE STYLES
   ============================================ */

/* Icon list items */
.icon-li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

/* Chips/tags */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Track cards */
.track-card {
    background: white;
    border-radius: 6px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: 100%;
    border-left: 4px solid var(--primary-color);
}

.track-card h5 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.track-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.track-card li {
    padding: 0.3rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.track-card li i {
    color: var(--primary-color);
    margin-top: 0.2rem;
}

/* ============================================
   COMMITTEE PAGE STYLES
   ============================================ */

/* ---- Committee Filter Nav ---- */
.cm-filter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem .5rem;
    padding: 1.1rem 1rem;
    border-bottom: 1px solid var(--border, #E2E8F0);
    position: sticky;
    top: 68px;
    z-index: 100;
    background: var(--bg, #F4F7FC);
}

.cm-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: .45rem 1rem;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text-secondary, #475569);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.cm-filter-btn:hover {
    border-color: var(--primary-color, #2563EB);
    color: var(--primary-color, #2563EB);
    background: rgba(37, 99, 235,.04);
}

.cm-filter-btn.active {
    background: var(--primary-color, #2563EB);
    color: #fff;
    border-color: var(--primary-color, #2563EB);
}

/* Dark mode */
html[data-theme="dark"] .cm-filter-nav {
    background: var(--bg, #16130F);
    border-bottom-color: var(--border, #342C22);
}

html[data-theme="dark"] .cm-filter-btn {
    background: var(--surface, #211C16);
    border-color: var(--border, #342C22);
    color: #BCA88E;
}

html[data-theme="dark"] .cm-filter-btn:hover {
    border-color: #3B82F6;
    color: #60A5FA;
    background: rgba(212,114,42,.08);
}

html[data-theme="dark"] .cm-filter-btn.active {
    background: #3B82F6;
    color: #fff;
    border-color: #3B82F6;
}

@media (max-width: 576px) {
    .cm-filter-nav {
        gap: .35rem;
    }
    .cm-filter-btn {
        padding: .35rem .75rem;
        font-size: .8rem;
    }
}

/* ---- Committee Stats Bar ---- */
.committee-stats-bar {
    background: linear-gradient(135deg, rgba(37, 99, 235,.06), rgba(34, 211, 238,.06));
    border-bottom: 1px solid rgba(37, 99, 235,.1);
    padding: 1.25rem 0;
}

.committee-stat {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-secondary, #475569);
    font-size: .95rem;
}

.committee-stat i {
    color: var(--primary-color, #2563EB);
    font-size: 1.1rem;
}

.committee-stat-number {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--primary-color, #2563EB);
    font-size: 1.2rem;
}

.committee-stat-label {
    color: var(--text-light, #64748B);
}

/* ---- Committee Section (shared) ---- */
.cm-section {
    margin-bottom: 2.5rem;
}

.cm-section-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--border, #E2E8F0);
}

.cm-section-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(37, 99, 235,.10), rgba(34, 211, 238,.08));
    color: var(--primary-color, #2563EB);
    font-size: 1rem;
    flex-shrink: 0;
}

.cm-section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--text-primary, #0F1E33);
    margin: 0;
}

/* (Featured cards removed — all sections use compact list style) */

/* ---- Compact List Items (Publicity, Publication, Local, Keynote) ---- */
.cm-compact-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cm-compact-item {
    padding: .85rem 1rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border-light, #EEF3FB);
    border-left: 3px solid var(--secondary-color, #22D3EE);
    border-radius: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cm-compact-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(37, 99, 235,.06);
}

.cm-compact-name {
    font-weight: 600;
    color: var(--text-primary, #0F1E33);
    font-size: .95rem;
}

.cm-compact-affil {
    color: var(--text-light, #64748B);
    font-size: .85rem;
    margin-top: .15rem;
}

/* ---- Program Committee Grid ---- */
.cm-pc-member {
    padding: .75rem 1rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border-light, #EEF3FB);
    border-radius: 8px;
    height: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cm-pc-member:hover {
    border-color: var(--primary-color, #2563EB);
    box-shadow: 0 4px 12px rgba(37, 99, 235,.06);
}

.cm-pc-name {
    font-weight: 600;
    color: var(--text-primary, #0F1E33);
    font-size: .9rem;
}

.cm-pc-affil {
    color: var(--text-light, #64748B);
    font-size: .8rem;
    margin-top: .15rem;
    line-height: 1.35;
}

/* ---- Dark mode overrides ---- */
html[data-theme="dark"] .committee-stats-bar {
    background: rgba(212,114,42,.06);
    border-bottom-color: rgba(212,114,42,.15);
}

html[data-theme="dark"] .cm-section-header {
    border-bottom-color: var(--border, #342C22);
}

html[data-theme="dark"] .cm-section-icon {
    background: linear-gradient(135deg, rgba(212,114,42,.15), rgba(34, 211, 238,.10));
    color: #60A5FA;
}

html[data-theme="dark"] .cm-section-title {
    color: #F0E6D8;
}

html[data-theme="dark"] .cm-compact-name,
html[data-theme="dark"] .cm-pc-name {
    color: #F0E6D8;
}

html[data-theme="dark"] .cm-compact-affil,
html[data-theme="dark"] .cm-pc-affil {
    color: #BCA88E;
}

html[data-theme="dark"] .cm-compact-item {
    background: var(--surface, #211C16);
    border-color: var(--border, #342C22);
    border-left-color: #22D3EE;
}

html[data-theme="dark"] .cm-pc-member {
    background: var(--surface, #211C16);
    border-color: var(--border, #342C22);
}

html[data-theme="dark"] .cm-pc-member:hover {
    border-color: #3B82F6;
}

html[data-theme="dark"] .committee-stat-number {
    color: #60A5FA;
}

html[data-theme="dark"] .committee-stat i {
    color: #60A5FA;
}

html[data-theme="dark"] .committee-stat-label {
    color: #BCA88E;
}

/* ---- Legacy classes (keep for backward compat) ---- */
.committee-section { margin-bottom: 3rem; }
.committee-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border, #E2E8F0);
}
.member-list { list-style: none; padding: 0; }
.member-item { padding: 1rem 0; border-bottom: 1px solid var(--border-light, #EEF3FB); }
.member-item:last-child { border-bottom: none; }
.member-name { font-weight: 600; color: var(--text-primary); margin-bottom: 0.2rem; }
.member-affiliation { color: var(--text-light, #64748B); font-size: 0.95rem; }

/* ============================================
   HERO COUNTDOWN
   ============================================ */
/* ---- Hero Tags (inline) ---- */
.hero-tags {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: .85rem;
    background: #2563EB;
    color: #fff;
    white-space: nowrap;
    border: none;
}

.hero-tag i {
    color: #fff;
}

.hero-tag-primary {
    background: #22D3EE;
    color: #0F1E33;
}

.hero-tag-primary i {
    color: #0F1E33;
}

/* Dark mode */
html[data-theme="dark"] .hero-tag {
    background: #3B82F6;
    color: #fff;
}

html[data-theme="dark"] .hero-tag-primary {
    background: #22D3EE;
    color: #16130F;
}

html[data-theme="dark"] .hero-tag-primary i {
    color: #16130F;
}

/* ---- Hero eyebrow tags (before the title): Third Edition + Hybrid ---- */
.hero-location {
    font-family: var(--font-heading, "Playfair Display", serif);
    color: #2563EB;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
}
html[data-theme="dark"] .hero-location {
    color: #67E8F9;
}
/* Outlined-input style: label notches into the top-left of the border */
.hero-cosponsor-fieldset {
    display: block;
    max-width: max-content;
    margin: 0 auto;
    padding: 1rem 2rem 1.5rem;
    border: 2px solid rgba(37, 99, 235, .55);
    border-radius: 14px;
    min-inline-size: auto;   /* reset UA fieldset min-width */
}
.hero-cosponsor-legend {
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
    margin-inline-start: .5rem;
    padding: 0 .5rem;
    font-family: var(--font-heading, "Playfair Display", serif);
    color: #2563EB;
    letter-spacing: .04em;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
}
html[data-theme="dark"] .hero-cosponsor-fieldset {
    border-color: rgba(232, 200, 74, .5);
}
html[data-theme="dark"] .hero-cosponsor-legend {
    color: #67E8F9;
}
.hero-cosponsor-logo {
    height: 64px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    background: #fff;
    padding: .5rem .75rem;
    border-radius: .5rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
}

.hero-eyebrow-tag {
    display: inline-flex;
    align-items: center;
    padding: .35rem .9rem;
    border-radius: 50rem;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hero-eyebrow-edition {
    background: linear-gradient(135deg, #22D3EE, #67E8F9);
    color: #0F1E33;
    box-shadow: 0 3px 10px rgba(6, 182, 212, .28);
}
.hero-eyebrow-edition i { color: #0F1E33; }

.hero-eyebrow-hybrid {
    background: linear-gradient(135deg, #2563EB, #60A5FA);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .28);
}
.hero-eyebrow-hybrid i { color: #ffffff; }

/* ---- Hero theme tags (after the title): the three main conference themes ---- */
.hero-theme-tag {
    background: rgba(255, 255, 255, .9);
    color: #0F1E33;
    border: 1px solid rgba(37, 99, 235, .28);
    font-size: .9rem;
}
.hero-theme-tag i { color: #2563EB; }

html[data-theme="dark"] .hero-theme-tag {
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
    border-color: rgba(96, 165, 250, .45);
}
html[data-theme="dark"] .hero-theme-tag i { color: #93C5FD; }

/* ---- Hero Countdown ---- */
.hero-countdown {
    margin-top: 1.5rem;
    text-align: center;
}

/* Single glass bar containing countdown + buttons */
.hero-countdown-bar {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235,.12);
    border-radius: 14px;
    padding: .75rem 1.25rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42,.06);
}

/* Vertical divider between countdown and buttons */
.hero-countdown-divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(37, 99, 235,.15);
    flex-shrink: 0;
}

.hero-countdown-cta {
    display: flex;
    flex-direction: row;
    gap: .4rem;
}

.hero-countdown-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 700;
    color: var(--text-light, #64748B);
    margin-bottom: .75rem;
}

.hero-countdown-grid {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.hero-countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 54px;
}

.hero-countdown-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-color, #2563EB);
    letter-spacing: .02em;
}

.hero-countdown-unit {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: var(--text-light, #64748B);
    margin-top: .2rem;
}

.hero-countdown-sep {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color, #22D3EE);
    line-height: 1;
    margin-top: -.5rem;
    opacity: .6;
}

/* Countdown expired state */
.hero-countdown-expired {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent-color, #3B82F6);
    padding: .75rem 1.5rem;
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(37, 99, 235,.12);
    border-radius: 14px;
    display: inline-block;
}

/* Responsive */
@media (max-width: 768px) {
    /* Stack countdown above the buttons; full-width bar so nothing overflows */
    .hero-countdown-bar {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        gap: .75rem;
        padding: .9rem 1rem;
        border-radius: 12px;
    }
    .hero-countdown-divider { width: 80%; height: 1px; }
    .hero-countdown-grid { justify-content: center; gap: .35rem; }
    .hero-countdown-number { font-size: 1.6rem; }
    .hero-countdown-item { min-width: 46px; }
    .hero-countdown-sep { font-size: 1.3rem; }
    .hero-countdown-unit { font-size: .6rem; }
    /* CTA fills the bar width and wraps instead of overflowing */
    .hero-countdown-cta {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: .5rem;
    }
    .hero-countdown-cta .btn { width: 100%; white-space: normal; }
}

@media (max-width: 576px) {
    .hero-countdown-bar { padding: .75rem .75rem; border-radius: 10px; }
    .hero-countdown-cta .btn { font-size: .8rem; padding: .45rem .6rem; }
    .hero-countdown-grid { gap: .2rem; }
    .hero-countdown-number { font-size: 1.4rem; }
    .hero-countdown-item { min-width: 40px; }
    .hero-countdown-sep { font-size: 1.1rem; }
    .hero-countdown-label { font-size: .7rem; }
}

/* Dark mode */
html[data-theme="dark"] .hero-countdown-bar {
    background: rgba(26,20,16,.6);
    border-color: rgba(212,114,42,.15);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

html[data-theme="dark"] .hero-countdown-divider {
    background: rgba(212,114,42,.2);
}

html[data-theme="dark"] .hero-countdown-number {
    color: #60A5FA;
}

html[data-theme="dark"] .hero-countdown-sep {
    color: #22D3EE;
}

html[data-theme="dark"] .hero-countdown-label,
html[data-theme="dark"] .hero-countdown-unit {
    color: #BCA88E;
}

html[data-theme="dark"] .hero-countdown-expired {
    background: rgba(26,20,16,.6);
    border-color: rgba(212,114,42,.15);
    color: #60A5FA;
}

html[data-theme="dark"] .hero-countdown-cta .btn-outline-secondary {
    border-color: rgba(212,114,42,.2);
    color: #BCA88E;
}

/* ============================================
   SVG DECORATIONS (index page)
   ============================================ */

/* ---- #1: Neural Network Dots (hero) ---- */
.hero-neural-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .7;
    animation: neuralFadeIn 1.5s ease-out .3s both;
}

@keyframes neuralFadeIn {
    from { opacity: 0; }
    to   { opacity: .7; }
}

/* Subtle float animation on the SVG nodes */
.hero-neural-svg g:nth-child(2) {
    animation: neuralFloat 12s ease-in-out infinite alternate;
}

@keyframes neuralFloat {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(3px, -4px); }
}

/* ---- #2: Circuit-to-Human Divider ---- */
.svg-divider {
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
    margin: 1rem 0 0;
}

.circuit-human-svg {
    width: 100%;
    height: 80px;
    display: block;
}

/* ---- #3: Pulse Line (before timeline) ---- */
.svg-pulse-wrap {
    width: 100%;
    overflow: hidden;
    padding: .5rem 0 1.5rem;
}

.pulse-line-svg {
    width: 100%;
    height: 60px;
    display: block;
}

/* Animate the pulse wave drawing */
.pulse-line-svg path {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: pulseDraw 2.5s ease-out .5s forwards;
}

@keyframes pulseDraw {
    to { stroke-dashoffset: 0; }
}

/* Pulse dots fade in after line draws */
.pulse-line-svg circle {
    opacity: 0;
    animation: pulseDotIn .4s ease-out 2.8s forwards;
}

@keyframes pulseDotIn {
    to { opacity: .25; }
}

/* Responsive: scale down on mobile */
@media (max-width: 768px) {
    .hero-neural-svg { opacity: .4; }
    .circuit-human-svg { height: 50px; }
    .pulse-line-svg { height: 40px; }
    .svg-divider { padding: .5rem 0; margin: .5rem 0 0; }
    .svg-pulse-wrap { padding: .25rem 0 1rem; }
}

@media (max-width: 576px) {
    .hero-neural-svg { opacity: .3; }
    .circuit-human-svg { height: 35px; }
    .pulse-line-svg { height: 30px; }
}

/* Dark mode: brighten the SVGs slightly */
html[data-theme="dark"] .hero-neural-svg { opacity: .5; }
html[data-theme="dark"] .circuit-human-svg { opacity: .8; }
html[data-theme="dark"] .pulse-line-svg { opacity: .8; }

/* Reduced motion: no animations */
@media (prefers-reduced-motion: reduce) {
    .hero-neural-svg,
    .hero-neural-svg g,
    .pulse-line-svg path,
    .pulse-line-svg circle {
        animation: none !important;
        opacity: inherit;
        stroke-dashoffset: 0 !important;
    }
}

/* ============================================
   HORIZONTAL TIMELINE (index page)
   ============================================ */
.htl {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.5rem 1rem 1rem;
    overflow-x: auto;
    gap: 1rem;
}

/* Connecting line */
.htl-line {
    position: absolute;
    top: 3.65rem;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color, #2563EB), var(--secondary-color, #22D3EE));
    border-radius: 2px;
    z-index: 0;
}

/* Each step */
.htl-step {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 130px;
}

/* Circle dot */
.htl-dot {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--surface, #fff);
    border: 3px solid var(--primary-color, #2563EB);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary-color, #2563EB);
    margin-bottom: .75rem;
    transition: all .3s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235,.12);
}

.htl-step:hover .htl-dot {
    background: var(--primary-color, #2563EB);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(37, 99, 235,.25);
}

/* Accent dot (conference date) */
.htl-dot-accent {
    border-color: var(--secondary-color, #22D3EE);
    color: var(--secondary-color, #22D3EE);
    box-shadow: 0 2px 8px rgba(34, 211, 238,.15);
}

.htl-step:hover .htl-dot-accent {
    background: var(--secondary-color, #22D3EE);
    color: #fff;
    box-shadow: 0 6px 20px rgba(34, 211, 238,.3);
}

/* Labels */
.htl-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-primary, #0F1E33);
    margin-bottom: .3rem;
}

.htl-date {
    font-size: .85rem;
    color: var(--text-secondary, #475569);
    font-weight: 500;
    line-height: 1.4;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 768px) {
    .htl {
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem 0;
        gap: 0;
    }

    .htl-line {
        top: 0;
        bottom: 0;
        left: 1.35rem;
        right: auto;
        width: 3px;
        height: auto;
    }

    .htl-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: .75rem 0;
        min-width: 0;
    }

    .htl-dot {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .htl-step > div:not(.htl-dot) {
        /* Let label + date flow vertically */
    }

    .htl-label {
        font-size: .9rem;
    }

    .htl-date {
        font-size: .8rem;
    }
}

/* Dark mode */
html[data-theme="dark"] .htl-dot {
    background: var(--surface, #211C16);
    border-color: #3B82F6;
    color: #60A5FA;
    box-shadow: 0 2px 8px rgba(212,114,42,.15);
}

html[data-theme="dark"] .htl-step:hover .htl-dot {
    background: #3B82F6;
    color: #fff;
    box-shadow: 0 6px 20px rgba(212,114,42,.3);
}

html[data-theme="dark"] .htl-dot-accent {
    border-color: #22D3EE;
    color: #22D3EE;
}

html[data-theme="dark"] .htl-step:hover .htl-dot-accent {
    background: #22D3EE;
    color: #fff;
}

html[data-theme="dark"] .htl-line {
    background: linear-gradient(90deg, #3B82F6, #22D3EE);
}

html[data-theme="dark"] .htl-label {
    color: #F0E6D8;
}

html[data-theme="dark"] .htl-date {
    color: #BCA88E;
}

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

/* Contact cards (top row) */
.contact-card {
    background: white;
    border-radius: 6px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.contact-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.contact-card h4 {
    margin-bottom: 1rem;
}

.contact-card a {
    color: var(--primary-color);
    text-decoration: none;
}

.contact-card a:hover {
    text-decoration: underline;
}

/* ---- Get in Touch cards ---- */
.git-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.75rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border-light, #EEF3FB);
    border-left: 4px solid var(--primary-color, #2563EB);
    border-radius: 10px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(15, 23, 42,.04);
    transition: transform .25s ease, box-shadow .25s ease, border-left-color .25s ease;
}

.git-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235,.10);
    border-left-color: var(--secondary-color, #22D3EE);
}

.git-card-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(37, 99, 235,.10), rgba(34, 211, 238,.08));
    color: var(--primary-color, #2563EB);
    font-size: 1.25rem;
    transition: all .3s ease;
}

.git-card:hover .git-card-icon {
    background: linear-gradient(135deg, var(--primary-color, #2563EB), var(--accent-color, #3B82F6));
    color: #fff;
    transform: scale(1.08);
}

.git-card-body {
    flex: 1;
    min-width: 0;
}

.git-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .5rem;
    color: var(--text-primary, #0F1E33);
}

.git-card-body p {
    margin-bottom: 0;
    color: var(--text-secondary, #475569);
    font-size: .95rem;
    line-height: 1.65;
}

.git-card-body a {
    color: var(--primary-color, #2563EB);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}

.git-card-body a:hover {
    color: var(--accent-color, #3B82F6);
    border-bottom-color: var(--accent-color, #3B82F6);
}

/* Response promise strip */
.git-promise {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(37, 99, 235,.06), rgba(34, 211, 238,.06));
    border: 1px solid rgba(37, 99, 235,.12);
    border-radius: 10px;
    color: var(--text-secondary, #475569);
    font-size: .93rem;
}

.git-promise i {
    color: var(--secondary-color, #22D3EE);
    font-size: 1.15rem;
}

/* Responsive: stack icon above on small screens */
@media (max-width: 576px) {
    .git-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .git-promise {
        flex-direction: column;
        text-align: center;
    }
}

/* Dark mode */
html[data-theme="dark"] .git-card {
    background: var(--surface, #211C16);
    border-color: var(--border, #342C22);
    border-left-color: var(--primary-color, #3B82F6);
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
html[data-theme="dark"] .git-card:hover {
    box-shadow: 0 12px 32px rgba(212,114,42,.15);
    border-left-color: var(--secondary-color, #22D3EE);
}
html[data-theme="dark"] .git-card-icon {
    background: linear-gradient(135deg, rgba(212,114,42,.15), rgba(34, 211, 238,.10));
    color: #60A5FA;
}
html[data-theme="dark"] .git-card:hover .git-card-icon {
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    color: #fff;
}
html[data-theme="dark"] .git-card-title {
    color: #F0E6D8;
}
html[data-theme="dark"] .git-card-body p {
    color: #BCA88E;
}
html[data-theme="dark"] .git-card-body a {
    color: #60A5FA;
}
html[data-theme="dark"] .git-card-body a:hover {
    color: #93C5FD;
}
html[data-theme="dark"] .git-promise {
    background: rgba(212,114,42,.08);
    border-color: rgba(212,114,42,.15);
    color: #BCA88E;
}
html[data-theme="dark"] .git-promise i {
    color: #22D3EE;
}

/* ============================================
   KEYNOTES PAGE STYLES
   ============================================ */

/* Keynote placeholder */
.keynote-placeholder {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-radius: 6px;
    padding: 4rem 2rem;
    text-align: center;
}

.keynote-placeholder i {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

/* Speaker photo styles */
.speaker-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.5rem;
    display: block;
    border: 4px solid var(--primary-color);
}

/* ============================================
   REGISTRATION PAGE STYLES
   ============================================ */

/* Fees table */
.fees-table th {
    font-weight: 700;
}

.fees-table td,
.fees-table th {
    vertical-align: middle;
}

/* Included items list */
.included-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.included-item i {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

/* ============================================
   SUBMISSION PAGE STYLES
   ============================================ */

/* Submission steps list */
.submission-steps {
    list-style: none;
    padding-left: 0;
}

.submission-steps li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.submission-steps li:last-child {
    border-bottom: none;
}

/* ============================================
   VENUE PAGE STYLES
   ============================================ */

/* Venue images */
.venue-image {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 1.5rem;
}

.venue-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.venue-image:hover img {
    transform: scale(1.02);
}

/* Venue info cards */
.venue-info-card {
    background: white;
    border-radius: 6px;
    padding: 2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    height: 100%;
}

.venue-info-card h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.venue-info-card i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* ============================================
   VERSIONS/PREVIOUS EDITIONS PAGE STYLES
   ============================================ */

/* Edition card */
.edition-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2,6,23,.07);
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}

.edition-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(2,6,23,.12);
}

.edition-cover {
    position: relative;
    border-bottom: 1px solid #eef2f7;
}

.edition-cover .ratio > img {
    object-fit: cover;
    transition: transform .5s ease;
}

.edition-card:hover .edition-cover .ratio > img {
    transform: scale(1.05);
}

.edition-cover-img {
    object-fit: cover;
    background: linear-gradient(135deg, #1B2A4A 0%, #3B82F6 100%);
}

.edition-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(76, 29, 149, 0.65), rgba(0,0,0,.0) 60%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: .75rem .75rem 1rem;
}

.edition-overlay .year {
    color: #fff;
    font-weight: 800;
    letter-spacing: .02em;
    text-shadow: 0 2px 10px rgba(76, 29, 149, 0.35);
}

.badge-soft {
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    font-weight: 700;
}

.badge-archive {
    background: #dbeafe;
    color: #1B2A4A;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}

.edition-ctas {
    gap: .4rem;
    flex-wrap: wrap;
}

/* Compact edition CTA buttons — keep text crisp white in every link state
   (light & dark), including :visited which browsers otherwise recolor. */
.edition-ctas .btn,
.edition-ctas .btn:link,
.edition-ctas .btn:visited,
.edition-ctas .btn:hover,
.edition-ctas .btn:focus,
.edition-ctas .btn:active {
    color: #ffffff !important;
    padding: .3rem .6rem;
    font-size: .78rem;
    line-height: 1.2;
    white-space: nowrap;
}
.edition-ctas .btn i {
    font-size: .8rem;
}

/* ============================================
   RESEARCH TOPIC CARDS - Modern Grid Design
   ============================================ */
.research-topic-card {
    background: var(--surface, #ffffff);
    border-radius: 8px;
    padding: 2rem 1.75rem;
    height: 100%;
    border: 1px solid var(--border-light, #f1f5f9);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.research-topic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #2563EB, #22D3EE);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease;
}

.research-topic-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.2);
}

.research-topic-card:hover::before {
    transform: scaleY(1);
}

.topic-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: linear-gradient(135deg, #2563EB, #22D3EE);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: all 0.35s ease;
}

.topic-icon-wrap i {
    font-size: 1.5rem;
    color: #ffffff;
    transition: all 0.35s ease;
}

.research-topic-card:hover .topic-icon-wrap {
    background: linear-gradient(135deg, #60A5FA, #22D3EE);
    transform: scale(1.08);
}

.research-topic-card:hover .topic-icon-wrap i {
    color: #ffffff;
}

.research-topic-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text, #1e293b);
    font-family: 'Sora', sans-serif;
}

.research-topic-card p {
    font-size: 0.92rem;
    color: var(--text-light, #64748b);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   HERO BADGES - Styled tags
   ============================================ */
.hero-badge-hybrid {
    background: linear-gradient(135deg, #2563EB, #60A5FA) !important;
    color: #ffffff !important;
    border: none;
    font-size: 0.95rem !important;
}

.hero-badge-mode {
    background: rgba(37, 99, 235, 0.1) !important;
    color: #243555 !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    font-size: 0.88rem !important;
}

/* ============================================
   THEME HIGHLIGHT - Enhanced Design
   ============================================ */
.theme-highlight {
    text-align: center;
    padding: 2rem;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 8px;
}

.theme-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.5;
    margin: 0;
}

.theme-text .highlight {
    color: #1e293b;
    display: block;
}

.theme-text .highlight small {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 0.5rem;
}

/* ============================================
   SCROLL INDICATOR - Enhanced
   ============================================ */
.scroll-indicator {
    display: block;
    width: 100%;
    text-align: center;
    padding: .5rem 0 1rem;
    text-decoration: none;
    cursor: pointer;
}

.scroll-indicator i {
    display: inline-block;
    font-size: 1.75rem;
    color: var(--primary-color, #2563EB);
    animation: scrollBounce 2s ease-in-out infinite;
    transition: color .2s ease;
}

.scroll-indicator:hover i {
    color: var(--secondary-color, #22D3EE);
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50% { transform: translateY(10px); opacity: 1; }
}

/* ============================================
   SECTION DIVIDER - Gradient Line
   ============================================ */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.2), rgba(245, 158, 11, 0.2), transparent);
    margin: 3rem 0;
}

/* ============================================
   TIMELINE CARDS - Enhanced
   ============================================ */
.timeline-item.card {
    border: 1px solid var(--border-light, #f1f5f9);
    border-radius: 8px;
    overflow: hidden;
}

.timeline-item.card::before {
    width: 4px;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    background: linear-gradient(180deg, #2563EB, #22D3EE);
}

/* ============================================
   CTA SECTION - Enhanced
   ============================================ */
.content-card .section-title + .lead {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   DARK MODE OVERRIDES FOR NEW COMPONENTS
   ============================================ */
@media (prefers-color-scheme: dark) {
    .research-topic-card {
        background: var(--surface);
        border-color: var(--border);
    }

    .research-topic-card:hover {
        box-shadow: 0 16px 40px rgba(139, 92, 246, 0.2);
        border-color: rgba(139, 92, 246, 0.3);
    }

    .topic-icon-wrap {
        background: linear-gradient(135deg, #2563EB, #22D3EE);
    }

    .topic-icon-wrap i {
        color: #ffffff;
    }

    .research-topic-card h4 {
        color: var(--text);
    }

    .research-topic-card p {
        color: var(--text-light);
    }

    .theme-highlight {
        background: rgba(139, 92, 246, 0.15);
        border-color: rgba(139, 92, 246, 0.3);
    }

    .theme-text,
    .theme-text .highlight {
        color: var(--text);
    }

    .theme-text .highlight small {
        color: var(--text-light);
    }

    .hero-badge-mode {
        background: rgba(139, 92, 246, 0.15) !important;
        color: #93C5FD !important;
        border-color: rgba(139, 92, 246, 0.3) !important;
    }
}

/* Dark mode - Manual toggle override */
[data-theme="dark"] .research-topic-card {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .research-topic-card:hover {
    box-shadow: 0 16px 40px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.3);
}
[data-theme="dark"] .topic-icon-wrap {
    background: linear-gradient(135deg, #2563EB, #22D3EE);
}
[data-theme="dark"] .topic-icon-wrap i {
    color: #ffffff;
}
[data-theme="dark"] .research-topic-card h4 {
    color: var(--text);
}
[data-theme="dark"] .research-topic-card p {
    color: var(--text-light);
}
[data-theme="dark"] .theme-highlight {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}
[data-theme="dark"] .theme-text,
[data-theme="dark"] .theme-text .highlight {
    color: var(--text);
}
[data-theme="dark"] .theme-text .highlight small {
    color: var(--text-light);
}
[data-theme="dark"] .hero-badge-mode {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #93C5FD !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

/* ============================================
   DARK MODE - Comprehensive component overrides
   ============================================ */

/* Hero section */
html[data-theme="dark"] .hero-with-image {
    background: linear-gradient(160deg, #0f0a1e 0%, #1a0e2e 40%, #0f172a 70%, #1a1005 100%);
}

/* IEEE Banner */
html[data-theme="dark"] .ieee-banner {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.3);
}
html[data-theme="dark"] .ieee-banner span,
html[data-theme="dark"] .ieee-banner strong {
    color: #e2e8f0;
}
html[data-theme="dark"] .hero-with-image .ieee-banner {
    background: rgba(30, 41, 59, 0.97);
}

/* Topic cards */
html[data-theme="dark"] .topic-card {
    background: #1e293b;
    box-shadow: 0 3px 15px rgba(0,0,0,0.2);
    border-left-color: #3B82F6;
}
html[data-theme="dark"] .topic-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .topic-card h3 {
    color: #e2e8f0;
}
html[data-theme="dark"] .topic-list li {
    color: #94a3b8;
}
html[data-theme="dark"] .topic-list li::before {
    color: #60A5FA;
}

/* Text light custom */
html[data-theme="dark"] .text-light-custom {
    color: #e2e8f0 !important;
}

/* Track cards */
html[data-theme="dark"] .track-card {
    background: #1e293b;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border-left-color: #3B82F6;
}
html[data-theme="dark"] .track-card h5 {
    color: #e2e8f0;
}
html[data-theme="dark"] .track-card li {
    color: #94a3b8;
}
html[data-theme="dark"] .track-card li i {
    color: #60A5FA;
}

/* Guideline items */
html[data-theme="dark"] .guideline-item {
    border-bottom-color: #334155;
}

/* Warning box */
html[data-theme="dark"] .warning-box {
    background: rgba(251, 191, 36, 0.1);
    border-left-color: #22D3EE;
    color: #e2e8f0;
}

/* Info box */
html[data-theme="dark"] .info-box {
    background: rgba(59, 130, 246, 0.1);
    border-left-color: #60a5fa;
    color: #e2e8f0;
}
html[data-theme="dark"] .info-box strong {
    color: #f1f5f9;
}

/* Note callout */
html[data-theme="dark"] .note-callout {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.25);
    border-left-color: #22D3EE;
    color: #e2e8f0;
}
html[data-theme="dark"] .note-callout strong {
    color: #f1f5f9;
}
html[data-theme="dark"] .note-callout a {
    color: #60A5FA;
}

/* Dates table */
html[data-theme="dark"] .dates-table thead th {
    background: #334155;
    color: #e2e8f0;
}
html[data-theme="dark"] .dates-table td {
    color: #cbd5e1;
    border-color: #334155;
}

/* Chips */
html[data-theme="dark"] .chip {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

/* Committee */
html[data-theme="dark"] .committee-title {
    border-bottom-color: #334155;
}
html[data-theme="dark"] .member-item {
    border-bottom-color: #334155;
}
html[data-theme="dark"] .member-name {
    color: #e2e8f0;
}
html[data-theme="dark"] .member-affiliation {
    color: #94a3b8;
}

/* Contact cards */
html[data-theme="dark"] .contact-card {
    background: #1e293b;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .contact-card h4,
html[data-theme="dark"] .contact-card h6 {
    color: #e2e8f0;
}
html[data-theme="dark"] .contact-card span,
html[data-theme="dark"] .contact-card p {
    color: #94a3b8;
}
html[data-theme="dark"] .contact-card a {
    color: #60A5FA;
}
html[data-theme="dark"] .contact-card a:hover {
    color: #93C5FD;
}
html[data-theme="dark"] .contact-card i {
    color: #60A5FA;
}

/* Keynote placeholder */
html[data-theme="dark"] .keynote-placeholder {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
}
html[data-theme="dark"] .keynote-placeholder i {
    color: #60A5FA;
}

/* Keynote cards */
html[data-theme="dark"] .keynote-name {
    color: #e2e8f0;
}
html[data-theme="dark"] .keynote-title {
    color: #60A5FA;
}
html[data-theme="dark"] .keynote-bio {
    color: #94a3b8;
}
html[data-theme="dark"] .keynote-talk h5 {
    color: #e2e8f0;
}
html[data-theme="dark"] .keynote-talk p {
    color: #94a3b8;
}

/* Speaker photo */
html[data-theme="dark"] .speaker-photo {
    border-color: #3B82F6;
}

/* Submission steps */
html[data-theme="dark"] .submission-steps li {
    border-bottom-color: #334155;
    color: #cbd5e1;
}

/* Venue info cards */
html[data-theme="dark"] .venue-info-card {
    background: #1e293b;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .venue-info-card h4 {
    color: #60A5FA;
}
html[data-theme="dark"] .venue-info-card p {
    color: #94a3b8;
}
html[data-theme="dark"] .venue-info-card i {
    color: #60A5FA;
}

/* Venue secondary images */
html[data-theme="dark"] .venue-image-secondary {
    border: 1px solid #334155;
}

/* Edition cards */
html[data-theme="dark"] .edition-card {
    background: #1e293b;
    border-color: #334155;
}
html[data-theme="dark"] .edition-cover {
    border-bottom-color: #334155;
}
html[data-theme="dark"] .edition-card p {
    color: #94a3b8;
}
html[data-theme="dark"] .edition-card span.small {
    color: #64748b;
}
html[data-theme="dark"] .edition-card a {
    color: #60A5FA;
}

/* Badge archive */
html[data-theme="dark"] .badge-archive {
    background: rgba(139, 92, 246, 0.15);
    color: #93C5FD;
    border-color: rgba(139, 92, 246, 0.3);
}

/* Badge technical/critical */
html[data-theme="dark"] .badge-technical {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}
html[data-theme="dark"] .badge-critical {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Included items */
html[data-theme="dark"] .included-item {
    color: #cbd5e1;
}
html[data-theme="dark"] .included-item i {
    color: #60A5FA;
}

/* Fees/registration tables */
html[data-theme="dark"] .fees-table th {
    color: #e2e8f0;
}
html[data-theme="dark"] .fees-table td {
    color: #cbd5e1;
}

/* Icon list items */
html[data-theme="dark"] .icon-li {
    color: #cbd5e1;
}

/* Timeline cards */
html[data-theme="dark"] .timeline-item.card {
    border-color: #334155;
    background: #1e293b;
}

/* Theme text (hardcoded colors) */
html[data-theme="dark"] .theme-text {
    color: #e2e8f0;
}
html[data-theme="dark"] .theme-text .highlight {
    color: #e2e8f0;
}
html[data-theme="dark"] .theme-text .highlight small {
    color: #94a3b8;
}

/* Stat labels */
html[data-theme="dark"] .stat-label {
    color: #94a3b8;
}

/* Timeline details */
html[data-theme="dark"] .timeline-date {
    color: #60A5FA;
}
html[data-theme="dark"] .timeline-title {
    color: #e2e8f0;
}
html[data-theme="dark"] .timeline-desc {
    color: #94a3b8;
}

/* Feature items */
html[data-theme="dark"] .feature-item {
    background: #1e293b;
    border-color: #334155;
}
html[data-theme="dark"] .feature-text h5 {
    color: #e2e8f0;
}
html[data-theme="dark"] .feature-text p {
    color: #94a3b8;
}
html[data-theme="dark"] .feature-icon {
    background: rgba(139, 92, 246, 0.15);
    color: #60A5FA;
}

/* Info cards */
html[data-theme="dark"] .info-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .info-card h4 {
    color: #e2e8f0;
}
html[data-theme="dark"] .info-card p {
    color: #94a3b8;
}
html[data-theme="dark"] .info-card li {
    color: #cbd5e1;
}
html[data-theme="dark"] .info-card .card-icon i {
    color: #60A5FA;
}

/* Content cards */
html[data-theme="dark"] .content-card {
    background: #1e293b;
    border-color: #334155;
}
html[data-theme="dark"] .content-card th {
    color: #e2e8f0;
}
html[data-theme="dark"] .content-card div,
html[data-theme="dark"] .content-card p {
    color: #cbd5e1;
}
html[data-theme="dark"] .content-card .small,
html[data-theme="dark"] .content-card .small.text-muted {
    color: #94a3b8 !important;
}

/* Step components */
html[data-theme="dark"] .step .body {
    color: #cbd5e1;
}
html[data-theme="dark"] .step .body a {
    color: #60A5FA;
}

/* Tier/pricing */
html[data-theme="dark"] .tier {
    background: #1e293b;
    border-color: #334155;
}
html[data-theme="dark"] .tier h4 {
    color: #e2e8f0;
}
html[data-theme="dark"] .tier li {
    color: #cbd5e1;
}
html[data-theme="dark"] .tier .price {
    color: #60A5FA;
}

/* Logo boxes */
html[data-theme="dark"] .logo-box {
    background: #1e293b;
    border-color: #334155;
}
html[data-theme="dark"] .logo-placeholder {
    background: rgba(139, 92, 246, 0.1);
}

/* Sticky CTA */
html[data-theme="dark"] .sticky-cta {
    background: rgba(15, 23, 42, 0.95);
    border-color: #334155;
}

/* Alert overrides */
html[data-theme="dark"] .alert {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.25);
    color: #e2e8f0;
}

/* Breadcrumbs */
html[data-theme="dark"] .breadcrumb-item {
    color: #94a3b8;
}
html[data-theme="dark"] .breadcrumb-item.active {
    color: #64748b;
}
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #475569;
}

/* Card body/footer */
html[data-theme="dark"] .card-body {
    color: #cbd5e1;
}
html[data-theme="dark"] .card-footer {
    background: #0f172a;
    border-top-color: #334155;
}

/* List group */
html[data-theme="dark"] .list-group-item {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

/* Bootstrap text utility overrides */
html[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .text-secondary {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .text-black {
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .lead {
    color: #94a3b8;
}

/* Strong/bold text */
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: #f1f5f9;
}

/* Generic text elements */
html[data-theme="dark"] p {
    color: #cbd5e1;
}
html[data-theme="dark"] li {
    color: #cbd5e1;
}

/* Headings */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #e2e8f0;
}

/* Links */
html[data-theme="dark"] a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):not(.footer-links a):not(.social-link):not(.link-footer) {
    color: #60A5FA;
}
html[data-theme="dark"] a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):hover {
    color: #93C5FD;
}

/* Bootstrap bg utilities */
html[data-theme="dark"] .bg-white {
    background-color: #1e293b !important;
}
html[data-theme="dark"] .bg-light {
    background-color: #0f172a !important;
}
html[data-theme="dark"] .bg-body {
    background-color: #0f172a !important;
}

/* Form controls */
html[data-theme="dark"] .form-control {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
html[data-theme="dark"] .form-control:focus {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #3B82F6;
    box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
}
html[data-theme="dark"] .form-label {
    color: #e2e8f0;
}
html[data-theme="dark"] textarea.form-control {
    background: #0f172a;
    color: #e2e8f0;
}
html[data-theme="dark"] ::placeholder {
    color: #64748b !important;
}

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Selection */
html[data-theme="dark"] ::selection {
    background: rgba(212, 114, 42, 0.3);
    color: #F0E6D8;
}

/* ============================================
   RESPONSIVE DESIGN — Comprehensive
   ============================================ */

/* ---- Tablet (≤992px) ---- */
@media (max-width: 991.98px) {
    /* Hero */
    .hero { min-height: 0; }
    .hero-title { font-size: clamp(1.75rem, 5vw, 3rem); }
    .theme-text { font-size: 1rem; }

    /* Page hero */
    .page-hero { padding: clamp(72px, 8vw, 100px) 0 48px; }
    .page-hero .display-4 { font-size: 2rem; }
    .page-hero .lead { font-size: 1rem; }

    /* Info cards on hero — smaller padding */
    .info-card { padding: 1.25rem; }
    .card-icon { width: 2.75rem; height: 2.75rem; font-size: 1rem; }

    /* Content cards */
    .content-card { padding: 1.5rem; }

    /* Horizontal timeline — tighter */
    .htl { padding: 2rem .5rem 1rem; }
    .htl-dot { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
    .htl-label { font-size: .85rem; }
    .htl-date { font-size: .8rem; }

    /* Committee filter nav */
    .cm-filter-nav { top: 58px; }
}

/* ---- Mobile landscape / large phone (≤768px) ---- */
@media (max-width: 768px) {
    /* Hero section */
    .hero { padding-top: 5rem; padding-bottom: 2rem; }
    .hero-title { font-size: clamp(1.5rem, 6vw, 2.25rem); line-height: 1.2; }
    .hero-title br { display: none; }
    .theme-highlight { padding: .75rem; }
    .theme-text { font-size: .9rem; }

    /* Info cards row — stack better */
    .info-card { padding: 1rem; }
    .card-title { font-size: 1rem; }

    /* Section titles */
    .section-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
    .section-title::after { width: 40px; height: 3px; }

    /* Content cards tighter */
    .content-card { padding: 1.25rem; margin: 1rem 0; }
    .card { padding: 1.25rem; }

    /* Research topic cards */
    .research-topic-card { padding: 1.25rem; }
    .research-topic-card h4 { font-size: 1rem; }

    /* Horizontal timeline → vertical */
    .htl { flex-direction: column; align-items: stretch; padding: 1.5rem 0; gap: 0; }
    .htl-line { top: 0; bottom: 0; left: 1.35rem; right: auto; width: 3px; height: auto; }
    .htl-step { flex-direction: row; align-items: center; text-align: left; gap: 1rem; padding: .75rem 0; min-width: 0; }
    .htl-dot { flex-shrink: 0; margin-bottom: 0; }
    .htl-label { font-size: .9rem; }
    .htl-date { font-size: .8rem; }

    /* CTA buttons */
    .d-flex.gap-3 { gap: .75rem !important; }

    /* Committee */
    .cm-section-title { font-size: 1.1rem; }
    .cm-section-icon { width: 2rem; height: 2rem; font-size: .85rem; }
    .cm-compact-item { padding: .7rem .85rem; }
    .cm-compact-name { font-size: .9rem; }
    .cm-compact-affil { font-size: .8rem; }
    .cm-pc-member { padding: .6rem .85rem; }
    .cm-pc-name { font-size: .85rem; }
    .cm-pc-affil { font-size: .75rem; }

    /* Committee stats bar */
    .committee-stats-bar { padding: 1rem 0; }
    .committee-stat { font-size: .85rem; }
    .committee-stat-number { font-size: 1rem; }

    /* Contact cards */
    .contact-card { padding: 1.25rem; }
    .contact-card i { font-size: 2rem; margin-bottom: 1rem; }

    /* Git cards */
    .git-card { padding: 1.25rem; gap: 1rem; }
    .git-card-icon { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }

    /* Venue */
    .venue-map { min-height: 280px; }
    .venue-info-card { padding: 1.25rem; }

    /* Gallery */
    .gallery-thumb img { height: 150px; }

    /* Place cards */
    .place-card-img { height: 160px; }

    /* Footer — already handled in theme.css */
}

/* ---- Small phone (≤576px) ---- */
@media (max-width: 576px) {
    /* Hero */
    .hero { padding-top: 4.5rem; }
    .hero-title { font-size: 1.35rem; }
    .theme-text { font-size: .85rem; }

    /* Badges in hero */
    .badge { font-size: .75rem; padding: .35rem .6rem; }

    /* Info cards — full width */
    .info-card .card-title { font-size: .9rem; }

    /* Sections */
    .section-title { font-size: 1.3rem; }
    .content-card { padding: 1rem; }

    /* Research topic cards stack nicely */
    .research-topic-card { padding: 1rem; }
    .topic-icon-wrap { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
    .research-topic-card h4 { font-size: .95rem; }
    .research-topic-card p { font-size: .85rem; }

    /* CTA buttons full width */
    .btn-lg { padding: .65rem 1.25rem; font-size: .95rem; }

    /* Committee */
    .cm-filter-nav { top: 54px; padding: .75rem .5rem; gap: .3rem; }
    .cm-filter-btn { padding: .3rem .65rem; font-size: .75rem; }
    .cm-section-header { gap: .5rem; margin-bottom: 1rem; }
    .cm-section-title { font-size: 1rem; }

    /* Git cards — stack icon above */
    .git-card { flex-direction: column; align-items: center; text-align: center; }
    .git-promise { flex-direction: column; text-align: center; }

    /* Venue map */
    .venue-map { min-height: 220px; }

    /* Gallery */
    .gallery-thumb img { height: 120px; }
    .gallery-control-btn { width: 36px; height: 36px; }
    .gallery-control-prev { left: 8px; }
    .gallery-control-next { right: 8px; }

    /* Place cards */
    .place-card-img { height: 140px; }

    /* Page hero */
    .page-hero { padding: 64px 0 36px; }
    .page-hero .display-4 { font-size: 1.5rem; }
    .page-hero .lead { font-size: .9rem; }

    /* Countdown */
    .countdown { gap: .35rem; }
    .countdown-number { font-size: 1.5rem; }
    .countdown-item { padding: .75rem .5rem; }
}

/* ---- Extra small (≤400px) ---- */
@media (max-width: 400px) {
    .hero-title { font-size: 1.2rem; }
    .theme-text { font-size: .8rem; }
    .info-card { padding: .75rem; }
    .card-icon { width: 2.25rem; height: 2.25rem; font-size: .9rem; }
    .card-title { font-size: .85rem; }
    .section-title { font-size: 1.15rem; }
    .cm-filter-btn { padding: .25rem .5rem; font-size: .7rem; }
    .btn { font-size: .85rem; padding: .5rem 1rem; }
    .btn-lg { font-size: .85rem; padding: .55rem 1rem; }

    /* Page hero extra compact */
    .page-hero .display-4 { font-size: 1.3rem; }
}

/* ---- Touch device hover overrides ---- */
@media (hover: none) {
    .cm-featured-card:hover,
    .cm-compact-item:hover,
    .cm-pc-member:hover,
    .git-card:hover,
    .info-card:hover,
    .card:hover,
    .research-topic-card:hover,
    .gallery-thumb:hover,
    .hover-card:hover {
        transform: none;
        box-shadow: inherit;
    }

    /* Keep carousel controls always visible on touch */
    .floating-image .carousel-control-prev,
    .floating-image .carousel-control-next {
        opacity: .7;
    }
}

/* ---- Safe area for notched devices ---- */
@supports (padding: env(safe-area-inset-bottom)) {
    .modern-footer .footer-bottom {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    .sticky-cta {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    }
}


/* =============================================================================
   GENERAL CHAIRS HIGHLIGHT
   ============================================================================= */
.cm-general-highlight { position: relative; }

/* Glowing icon */
.cm-icon-glow {
  animation: gcIconGlow 3s ease-in-out infinite;
}
@keyframes gcIconGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(37, 99, 235, .2)); }
  50% { filter: drop-shadow(0 0 10px rgba(37, 99, 235, .5)); }
}

/* Lead chair cards */
.cm-chair-lead {
  background: linear-gradient(135deg, rgba(37, 99, 235, .06), rgba(34, 211, 238, .08));
  border: 1px solid rgba(37, 99, 235, .2);
  border-left: 3px solid #2563EB;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 12px rgba(37, 99, 235, .06);
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.cm-chair-lead:hover {
  box-shadow: 0 4px 20px rgba(37, 99, 235, .12);
  transform: translateY(-2px);
}
.cm-chair-lead::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .05), transparent);
  animation: gcShimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gcShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
}
.cm-chair-lead .cm-compact-name {
  font-size: 1.1rem;
  font-weight: 700;
}
.cm-chair-lead .cm-compact-affil {
  font-size: .9rem;
  font-weight: 600;
}

/* Dark mode */
[data-theme="dark"] .cm-chair-lead {
  background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(34, 211, 238, .12));
  border-color: rgba(37, 99, 235, .3);
  border-left-color: #22D3EE;
  box-shadow: 0 2px 16px rgba(37, 99, 235, .1);
}
[data-theme="dark"] .cm-chair-lead:hover {
  box-shadow: 0 4px 24px rgba(37, 99, 235, .18);
}
[data-theme="dark"] .cm-icon-glow {
  animation-name: gcIconGlowDark;
}
@keyframes gcIconGlowDark {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(34, 211, 238, .2)); }
  50% { filter: drop-shadow(0 0 10px rgba(34, 211, 238, .5)); }
}

/* =============================================================================
   SCOPE THUMBNAIL GRID + FULLSCREEN LIGHTBOX SLIDER (cfp.php Scope section)
   ============================================================================= */

#scopeGallery .scope-thumb {
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
}

#scopeGallery .scope-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
  pointer-events: none;
}

.lightbox-content img {
  pointer-events: auto;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
  transition: transform .3s ease;
}

.lightbox-overlay.active .lightbox-img {
  animation: lightboxZoomIn .35s ease forwards;
}

@keyframes lightboxZoomIn {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.lightbox-caption {
  color: #fff;
  font-size: .95rem;
  margin-top: .75rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.lightbox-counter {
  color: rgba(255, 255, 255, .55);
  font-size: .8rem;
  margin-top: .25rem;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  line-height: 1;
  opacity: .7;
  transition: opacity .2s, transform .2s;
}

.lightbox-close:hover {
  opacity: 1;
  transform: scale(1.15);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 10;
  opacity: .8;
  pointer-events: auto;
  transition: opacity .2s, background .2s, transform .2s;
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .2);
  transform: translateY(-50%) scale(1.1);
}

@media (max-width: 576px) {
  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .lightbox-prev { left: .5rem; }
  .lightbox-next { right: .5rem; }
  .lightbox-close { top: .5rem; right: .75rem; font-size: 2rem; }
  .lightbox-img { max-width: 95vw; max-height: 70vh; }
}

/* =============================================================================
   SUBMISSION GUIDELINES — SPEC TILES + CHECKLIST (cfps.php)
   ============================================================================= */

.spec-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: 1.1rem 1rem;
  background: var(--surface-2, rgba(37, 99, 235, .04));
  border: 1px solid var(--border-light, #f1f3f4);
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.spec-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
  border-color: var(--primary-color, #2563EB);
}

.spec-tile i {
  font-size: 1.5rem;
  color: var(--primary-color, #2563EB);
  line-height: 1;
}

.spec-tile .spec-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #6c757d);
}

.spec-tile .spec-value {
  font-size: .98rem;
  font-weight: 600;
  color: var(--text, #1a1a1a);
  line-height: 1.35;
}

.guideline-checklist {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.guideline-checklist li {
  position: relative;
  padding: .5rem 0 .5rem 1.75rem;
  border-bottom: 1px solid var(--border-light, #f1f3f4);
  color: var(--text);
}

.guideline-checklist li:last-child {
  border-bottom: none;
}

.guideline-checklist li::before {
  content: "\f26a"; /* bi-check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: .55rem;
  color: var(--primary-color, #2563EB);
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .spec-tile { padding: .9rem .85rem; }
  .spec-tile i { font-size: 1.3rem; }
}

/* =====================
   SUBMISSION TYPES - compact cards (Naples / terracotta theme)
   ===================== */
.sub-type-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--light-border, rgba(37, 99, 235, 0.15));
  border-radius: 12px;
  padding: 1.1rem .85rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sub-type-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, .12);
  border-color: var(--primary-color);
}
.sub-type-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: .6rem;
  color: var(--primary-color);
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(212, 114, 42, .08));
}
.sub-type-card:hover .sub-type-icon {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: #fff;
}
[data-theme="dark"] .sub-type-card {
  background: var(--bg-secondary);
  border-color: var(--light-border);
}

/* ============================================================
   CFP page — animated hero emblem (moved from inline <style>)
   ============================================================ */
            .haxd-hero-emblem {
              position: absolute;
              right: 24px;
              top: 55%;
              transform: translateY(-50%);
              width: 130px;
              height: 130px;
              opacity: 0;
              z-index: 0;
              animation: haxdEmblemAppear 1.5s ease-out forwards;
            }
            @keyframes haxdEmblemAppear {
              0% { opacity: 0; transform: translateY(-45%) scale(.7) rotate(-10deg); }
              100% { opacity: 1; transform: translateY(-45%) scale(1) rotate(0deg); }
            }
            /* Outer ring pulse */
            .he-ring { opacity: .18; animation: heRingPulse 4s ease-in-out infinite; }
            @keyframes heRingPulse {
              0%, 100% { opacity: .18; stroke-width: 1.5; }
              50% { opacity: .3; stroke-width: 2.5; }
            }
            /* Orbit rotation */
            .he-orbit { animation: heOrbit 12s linear infinite; transform-origin: 100px 100px; }
            @keyframes heOrbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
            .he-orbit-reverse { animation: heOrbitReverse 16s linear infinite; transform-origin: 100px 100px; }
            @keyframes heOrbitReverse { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
            /* Data flow on connections */
            .he-dataflow { stroke-dasharray: 4 6; animation: heDataflow 3s linear infinite; }
            @keyframes heDataflow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -30; } }
            /* Node pulse */
            .he-node { animation: heNodePulse 2.5s ease-in-out infinite; }
            @keyframes heNodePulse { 0%, 100% { opacity: .25; } 50% { opacity: .5; } }
            /* Data flow */
            .he-dataflow { opacity: .2; }
            /* Human figure breathing */
            .he-human { opacity: .25; animation: heHumanBreathe 4s ease-in-out infinite; }
            @keyframes heHumanBreathe { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: .38; transform: translateY(-1px); } }
            /* AI brain glow */
            .he-ai { opacity: .22; animation: heAIGlow 3.5s ease-in-out infinite; }
            @keyframes heAIGlow {
              0%, 100% { opacity: .22; filter: drop-shadow(0 0 0 transparent); }
              50% { opacity: .38; filter: drop-shadow(0 0 8px rgba(37, 99, 235, .4)); }
            }
            /* Center interaction symbol */
            .he-interact { opacity: .28; animation: heInteract 5s ease-in-out infinite; }
            @keyframes heInteract { 0%, 100% { opacity: .22; } 25% { opacity: .4; } 50% { opacity: .22; } 75% { opacity: .4; } }
            /* Responsive */
            @media (max-width: 768px) { .haxd-hero-emblem { width: 100px; height: 100px; right: 10px; bottom: 12px; } }
            @media (max-width: 480px) { .haxd-hero-emblem { width: 75px; height: 75px; right: 5px; bottom: 8px; } }

/* ============================================================
   Venue page — gallery, modal & place cards (moved from inline <style>)
   ============================================================ */
      /* Gallery */
      .gallery-section { background: linear-gradient(180deg, #F4F7FC 0%, #ffffff 100%); }
      .gallery-thumb {
        display:block; border-radius:12px; overflow:hidden;
        box-shadow:0 4px 12px rgba(0,0,0,0.1);
        transition: all .3s ease;
      }
      .gallery-thumb:hover { transform: translateY(-5px); box-shadow:0 12px 24px rgba(0,0,0,0.15); }
      .gallery-thumb img { width:100%; height:200px; object-fit:cover; transition: transform .5s ease; }
      .gallery-thumb:hover img { transform: scale(1.1); }
      .gallery-caption {
        position:absolute; left:0; right:0; bottom:0;
        background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
        color:#fff; padding:20px 10px 10px; font-size:.9rem;
        opacity:0; transition: opacity .3s ease;
      }
      .gallery-thumb:hover .gallery-caption { opacity:1; }

      /* Modal */
      .modal-gallery { background: rgba(2, 6, 23, 0.95); }
      .modal-gallery .modal-content { background: transparent; border: none; }
      .modal-gallery .modal-body { padding: 0; }
      .gallery-modal-img {
        max-height: 85vh; max-width: 100%; width:auto;
        margin:0 auto; display:block; border-radius: 8px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
      }
      .gallery-control-btn {
        position:absolute; top:50%; transform:translateY(-50%);
        background: rgba(255,255,255,0.2); border:none; color:#fff;
        width:50px; height:50px; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        backdrop-filter: blur(5px);
        transition: all .3s ease;
        z-index:10;
      }
      .gallery-control-btn:hover { background: rgba(255,255,255,0.3); transform:translateY(-50%) scale(1.1); }
      .gallery-control-prev { left:20px; }
      .gallery-control-next { right:20px; }

      .gallery-close-btn {
        position:absolute; top:20px; right:20px;
        background: rgba(255,255,255,0.2); border:none; color:#fff;
        width:40px; height:40px; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        backdrop-filter: blur(5px);
        transition: all .3s ease;
        z-index:10;
        cursor:pointer;
      }
      .gallery-close-btn:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }

      .gallery-counter {
        position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
        background: rgba(0,0,0,0.6); color:#fff;
        padding:5px 15px; border-radius:20px; font-size:.9rem;
        backdrop-filter: blur(5px);
        z-index:10;
      }

      /* Recommended places images */
      .place-card-img-wrapper{ border-radius:14px; overflow:hidden; margin-bottom:.9rem; }
      .place-card-img{
        width:100%; height:190px; object-fit:cover; display:block;
        transition:transform .4s ease, filter .4s ease;
        filter:saturate(1.05) contrast(1.02);
      }
      .hover-card:hover .place-card-img{
        transform:scale(1.06);
        filter:saturate(1.15) contrast(1.06) brightness(1.03);
      }

      .hover-card{ transition:transform .18s ease, box-shadow .18s ease; }
      .hover-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(2,6,23,.12); }

      .note-callout{
        border-left:4px solid #10b981;
        background:#ecfeff; border:1px solid #bae6fd;
        border-left-color: #10b981;
        border-radius:12px; padding:1rem;
      }

      .venue-map{ min-height:360px; }

      @media (max-width: 768px) {
        .gallery-control-btn { width:40px; height:40px; }
        .gallery-control-prev { left:10px; }
        .gallery-control-next { right:10px; }
        .gallery-thumb img { height:150px; }
        .place-card-img { height:150px; }
      }

/* ============================================
   IDFC brand logo in navbar (vector shield)
   ============================================ */
.idfc-brand-logo {
  height: 46px;
  width: auto;
  display: block;
  transition: transform .25s ease;
}
.navbar-brand:hover .idfc-brand-logo { transform: scale(1.05); }
@media (max-width: 991.98px) {
  .idfc-brand-logo { height: 40px; }
}
@media (max-width: 575.98px) {
  .idfc-brand-logo { height: 36px; }
}