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

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

/* Hero with background image */
.hero-with-image {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #FFF8F0 0%, #FEF3E7 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(184, 81, 13, 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(184, 81, 13, 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, #F0E0CC);
    position: sticky;
    top: 68px;
    z-index: 100;
    background: var(--bg, #FFF8F0);
}

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

.cm-filter-btn:hover {
    border-color: var(--primary-color, #B8510D);
    color: var(--primary-color, #B8510D);
    background: rgba(184,81,13,.04);
}

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

/* Dark mode */
html[data-theme="dark"] .cm-filter-nav {
    background: var(--bg, #1A1410);
    border-bottom-color: var(--border, #3D3024);
}

html[data-theme="dark"] .cm-filter-btn {
    background: var(--surface, #2C2218);
    border-color: var(--border, #3D3024);
    color: #BCA88E;
}

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

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

@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(184,81,13,.06), rgba(212,175,55,.06));
    border-bottom: 1px solid rgba(184,81,13,.1);
    padding: 1.25rem 0;
}

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

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

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

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

/* ---- 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, #F0E0CC);
}

.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(184,81,13,.10), rgba(212,175,55,.08));
    color: var(--primary-color, #B8510D);
    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, #2C1810);
    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, #FEF3E7);
    border-left: 3px solid var(--secondary-color, #D4AF37);
    border-radius: 8px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cm-compact-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(184,81,13,.06);
}

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

.cm-compact-affil {
    color: var(--text-light, #8B7355);
    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, #FEF3E7);
    border-radius: 8px;
    height: 100%;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cm-pc-member:hover {
    border-color: var(--primary-color, #B8510D);
    box-shadow: 0 4px 12px rgba(184,81,13,.06);
}

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

.cm-pc-affil {
    color: var(--text-light, #8B7355);
    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, #3D3024);
}

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

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, #2C2218);
    border-color: var(--border, #3D3024);
    border-left-color: #D4AF37;
}

html[data-theme="dark"] .cm-pc-member {
    background: var(--surface, #2C2218);
    border-color: var(--border, #3D3024);
}

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

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

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

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, #F0E0CC);
}
.member-list { list-style: none; padding: 0; }
.member-item { padding: 1rem 0; border-bottom: 1px solid var(--border-light, #FEF3E7); }
.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, #8B7355); 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: #B8510D;
    color: #fff;
    white-space: nowrap;
    border: none;
}

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

.hero-tag-primary {
    background: #D4AF37;
    color: #2C1810;
}

.hero-tag-primary i {
    color: #2C1810;
}

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

html[data-theme="dark"] .hero-tag-primary {
    background: #D4AF37;
    color: #1A1410;
}

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

/* ---- 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(184,81,13,.12);
    border-radius: 14px;
    padding: .75rem 1.25rem;
    box-shadow: 0 4px 16px rgba(44,24,16,.06);
}

/* Vertical divider between countdown and buttons */
.hero-countdown-divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(184,81,13,.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: 600;
    color: var(--text-light, #8B7355);
    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, #B8510D);
    letter-spacing: .02em;
}

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

.hero-countdown-sep {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color, #D4AF37);
    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, #C45B28);
    padding: .75rem 1.5rem;
    background: rgba(255,255,255,.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(184,81,13,.12);
    border-radius: 14px;
    display: inline-block;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-countdown-bar { flex-direction: column; gap: .6rem; padding: .75rem 1rem; border-radius: 12px; }
    .hero-countdown-divider { width: 80%; height: 1px; }
    .hero-countdown-cta { flex-direction: row; gap: .4rem; }
    .hero-countdown-grid { gap: .35rem; }
    .hero-countdown-number { font-size: 1.5rem; }
    .hero-countdown-item { min-width: 42px; }
    .hero-countdown-sep { font-size: 1.2rem; }
    .hero-countdown-unit { font-size: .6rem; }
}

@media (max-width: 576px) {
    .hero-countdown-bar { padding: .6rem .75rem; border-radius: 10px; }
    .hero-countdown-cta .btn { font-size: .75rem; padding: .3rem .6rem; }
    .hero-countdown-grid { gap: .25rem; }
    .hero-countdown-number { font-size: 1.25rem; }
    .hero-countdown-item { min-width: 36px; }
    .hero-countdown-sep { font-size: 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: #E07A3A;
}

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

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: #E07A3A;
}

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, #B8510D), var(--secondary-color, #D4AF37));
    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, #B8510D);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary-color, #B8510D);
    margin-bottom: .75rem;
    transition: all .3s ease;
    box-shadow: 0 2px 8px rgba(184,81,13,.12);
}

.htl-step:hover .htl-dot {
    background: var(--primary-color, #B8510D);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(184,81,13,.25);
}

/* Accent dot (conference date) */
.htl-dot-accent {
    border-color: var(--secondary-color, #D4AF37);
    color: var(--secondary-color, #D4AF37);
    box-shadow: 0 2px 8px rgba(212,175,55,.15);
}

.htl-step:hover .htl-dot-accent {
    background: var(--secondary-color, #D4AF37);
    color: #fff;
    box-shadow: 0 6px 20px rgba(212,175,55,.3);
}

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

.htl-date {
    font-size: .85rem;
    color: var(--text-secondary, #5C4033);
    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, #2C2218);
    border-color: #D4722A;
    color: #E07A3A;
    box-shadow: 0 2px 8px rgba(212,114,42,.15);
}

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

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

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

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

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, #FEF3E7);
    border-left: 4px solid var(--primary-color, #B8510D);
    border-radius: 10px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(44,24,16,.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(184,81,13,.10);
    border-left-color: var(--secondary-color, #D4AF37);
}

.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(184,81,13,.10), rgba(212,175,55,.08));
    color: var(--primary-color, #B8510D);
    font-size: 1.25rem;
    transition: all .3s ease;
}

.git-card:hover .git-card-icon {
    background: linear-gradient(135deg, var(--primary-color, #B8510D), var(--accent-color, #C45B28));
    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, #2C1810);
}

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

.git-card-body a {
    color: var(--primary-color, #B8510D);
    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, #C45B28);
    border-bottom-color: var(--accent-color, #C45B28);
}

/* Response promise strip */
.git-promise {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(184,81,13,.06), rgba(212,175,55,.06));
    border: 1px solid rgba(184,81,13,.12);
    border-radius: 10px;
    color: var(--text-secondary, #5C4033);
    font-size: .93rem;
}

.git-promise i {
    color: var(--secondary-color, #D4AF37);
    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, #2C2218);
    border-color: var(--border, #3D3024);
    border-left-color: var(--primary-color, #D4722A);
    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, #D4AF37);
}
html[data-theme="dark"] .git-card-icon {
    background: linear-gradient(135deg, rgba(212,114,42,.15), rgba(212,175,55,.10));
    color: #E07A3A;
}
html[data-theme="dark"] .git-card:hover .git-card-icon {
    background: linear-gradient(135deg, #D4722A, #E07A3A);
    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: #E07A3A;
}
html[data-theme="dark"] .git-card-body a:hover {
    color: #F0A060;
}
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: #D4AF37;
}

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

/* Keynote placeholder */
.keynote-placeholder {
    background: linear-gradient(135deg, rgba(184, 81, 13, 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%, #D4722A 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: .5rem;
}

/* ============================================
   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, #B8510D, #D4AF37);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease;
}

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

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

.topic-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: linear-gradient(135deg, #B8510D, #D4AF37);
    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, #E07A3A, #D4AF37);
    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, #B8510D, #E07A3A) !important;
    color: #ffffff !important;
    border: none;
    font-size: 0.95rem !important;
}

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

/* ============================================
   THEME HIGHLIGHT - Enhanced Design
   ============================================ */
.theme-highlight {
    text-align: center;
    padding: 2rem;
    background: rgba(184, 81, 13, 0.1);
    border: 1px solid rgba(184, 81, 13, 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, #B8510D);
    animation: scrollBounce 2s ease-in-out infinite;
    transition: color .2s ease;
}

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

@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(184, 81, 13, 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, #B8510D, #D4AF37);
}

/* ============================================
   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, #B8510D, #D4AF37);
    }

    .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: #F0A060 !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, #B8510D, #D4AF37);
}
[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: #F0A060 !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: #D4722A;
}
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: #E07A3A;
}

/* 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: #D4722A;
}
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: #E07A3A;
}

/* 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: #D4AF37;
    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: #D4AF37;
    color: #e2e8f0;
}
html[data-theme="dark"] .note-callout strong {
    color: #f1f5f9;
}
html[data-theme="dark"] .note-callout a {
    color: #E07A3A;
}

/* 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: #E07A3A;
}
html[data-theme="dark"] .contact-card a:hover {
    color: #F0A060;
}
html[data-theme="dark"] .contact-card i {
    color: #E07A3A;
}

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

/* Keynote cards */
html[data-theme="dark"] .keynote-name {
    color: #e2e8f0;
}
html[data-theme="dark"] .keynote-title {
    color: #E07A3A;
}
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: #D4722A;
}

/* 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: #E07A3A;
}
html[data-theme="dark"] .venue-info-card p {
    color: #94a3b8;
}
html[data-theme="dark"] .venue-info-card i {
    color: #E07A3A;
}

/* 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: #E07A3A;
}

/* Badge archive */
html[data-theme="dark"] .badge-archive {
    background: rgba(139, 92, 246, 0.15);
    color: #F0A060;
    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: #E07A3A;
}

/* 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: #E07A3A;
}
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: #E07A3A;
}

/* 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: #E07A3A;
}

/* 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: #E07A3A;
}

/* 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: #E07A3A;
}

/* 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: #E07A3A;
}
html[data-theme="dark"] a:not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.btn):hover {
    color: #F0A060;
}

/* 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: #D4722A;
    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(184, 81, 13, .2)); }
  50% { filter: drop-shadow(0 0 10px rgba(184, 81, 13, .5)); }
}

/* Lead chair cards */
.cm-chair-lead {
  background: linear-gradient(135deg, rgba(184, 81, 13, .06), rgba(212, 175, 55, .08));
  border: 1px solid rgba(184, 81, 13, .2);
  border-left: 3px solid #B8510D;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 12px rgba(184, 81, 13, .06);
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.cm-chair-lead:hover {
  box-shadow: 0 4px 20px rgba(184, 81, 13, .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(184, 81, 13, .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(184, 81, 13, .1), rgba(212, 175, 55, .12));
  border-color: rgba(184, 81, 13, .3);
  border-left-color: #D4AF37;
  box-shadow: 0 2px 16px rgba(184, 81, 13, .1);
}
[data-theme="dark"] .cm-chair-lead:hover {
  box-shadow: 0 4px 24px rgba(184, 81, 13, .18);
}
[data-theme="dark"] .cm-icon-glow {
  animation-name: gcIconGlowDark;
}
@keyframes gcIconGlowDark {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, .2)); }
  50% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, .5)); }
}