/* ========== 全域樣式 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #dba7bc;
            color: #333;
        }

        p{
            margin: 0;
        }

        h3, .h3{
          font-family: "Open Sans", Helvetica, Arial, sans-serif;
          font-weight: bolder;
          color: #e5edf8;
          letter-spacing: 0.2px;
        }
        
        /* ========== Header 樣式 (參考原議程網站深紫藍色) ========== */
        .header {
            background: linear-gradient(135deg, #4a4a7a 0%, #5a5a8a 100%);
            color: white;
            padding: 1.5rem 0;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.95;
        }
        
        /* ========== 導覽標籤樣式 ========== */
        .nav-tabs {
            border-bottom: 3px solid #4a4a7a;
            margin-top: 1.5rem;
            background-color: #c6cbee;
            padding: 0.5rem 1rem 0;
            border-radius: 8px 8px 0 0;
        }
        
        .nav-tabs .nav-link {
            color: #4a4a7a;
            font-weight: 600;
            font-size: 1.1rem;
            border: 2px solid transparent;
            border-radius: 8px 8px 0 0;
            padding: 0.75rem 1.5rem;
            transition: all 0.3s ease;
            background-color: #bbc0e1;
        }
        
        .nav-tabs .nav-link:hover {
            background-color: #f0f0f8;
            border-color: #8b9dc3;
        }
        
        .nav-tabs .nav-link.active {
            background-color: #4a4a7a;
            color: white;
            border-color: #4a4a7a;
        }
        
        /* ========== 內容區域樣式 ========== */
        .tab-content {
            background-color: #575787;
            padding: 1rem 2rem;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            min-height: 600px;
        }
        /* ========== 下載按鈕樣式 ========== */
        .download-zip-btn{
              border-color: #c6cbee;
              color: #eeeec6;
              font-weight: 700;
            }
            .download-zip-btn:hover{
              background: #3e3b71;
              border-color: #7b83bb;
              color: #fff;
            }

        
        /* ========== 場次標題樣式 ========== */
        .session-title {
            background: linear-gradient(135deg, #f4d89e 0%, #f8e2ae 100%);
            color: #3a3955;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            margin-top: 2rem;
            margin-bottom: 0.3rem;
            font-size: 1.2rem;
            font-weight: 700;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .session-title:first-child {
            margin-top: 0;
        }
        
        .keynote-session {
            background: linear-gradient(135deg, #ec9f96 0%, #f8cbae 100%);
            /* background: linear-gradient(135deg, #b26495 0%, #9badce 100%);  ----粉紫*/
        }
        
        .parallel-session {
            background: linear-gradient(135deg, #cee495 0%, #b8c8e8 100%);
            /* background: linear-gradient(135deg, #48acb8 0%, #b8c8e8 100%);  ----藍綠*/
        }
        .parallel-session-2 {
            background: linear-gradient(135deg, #48b892 0%, #b8c8e8 100%);
            /* background: linear-gradient(135deg, #48acb8 0%, #b8c8e8 100%);  ----藍綠*/
        }
        
        .social-event {
            background: linear-gradient(135deg, #f4d89e 0%, #f8e2ae 100%);
            color: #333;
        }
        
        .opening-ceremony {
            background: linear-gradient(135deg, #f4d89e 0%, #f8e2ae 100%);
            color: #333;
        }
        
        /* ========== 場次資訊樣式 ========== */
        .session-info {
            background-color: #f8f9fa;
            padding: 0.4rem;
            border-left: 4px solid #df9cb7;
            margin-bottom: 0.3rem;
            border-radius: 5px;
        }
        
        .session-info p {
            margin-bottom: 0.3rem;
        }
        
        .session-info strong {
            color: #4a4a7a;
        }
        
        /* ========== 照片網格樣式 ========== */
        .photo-grid {
            display: grid;
            /* Default (<=1279.98px): 6 photos per row */
            grid-template-columns: repeat(6, 1fr);
            gap: 0.5rem;
            margin-bottom: 2rem;
        }

        /* >=1280px: 9 photos per row */
        @media (min-width: 1280px) {
            .photo-grid {
                grid-template-columns: repeat(9, 1fr);
            }
        }
        
        .photo-slot {
            aspect-ratio: 4/3;
            background: linear-gradient(135deg, #e8e8f0 0%, #f0f0f8 100%);
            border: 1px solid #9a9adb;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .photo-slot:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
            border-color: #4a4a7a;
        }
        
        .photo-slot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* If src is empty, keep showing placeholder and hide the broken-image box */
        .photo-slot img[src=""] {
            display: none;
        }
        
        .placeholder-text {
            color: #8b9dc3;
            font-size: 0.9rem;
            text-align: center;
            padding: 1rem;
            font-weight: 500;
        }
        
        /* ========== Highlights 頁面特殊樣式 ========== */
        .highlight-section {
            margin-bottom: 3rem;
        }
        
        .highlight-section h3 {
            color: #4a4a7a;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 3px solid #c98b9e;
        }
        
        /* ========== 響應式設計 ========== */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.8rem;
            }
            
            .header p {
                font-size: 1rem;
            }
            
            .nav-tabs .nav-link {
                font-size: 0.9rem;
                padding: 0.5rem 0.8rem;
            }
            
            .photo-grid {
                /* Keep 6 columns on tablets; only tighten spacing */
                grid-template-columns: repeat(6, 1fr);
                gap: 0.75rem;
            }
            
            .session-title {
                font-size: 1.1rem;
                padding: 0.75rem 1rem;
            }
        }
        
        @media (max-width: 576px) {
            .photo-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* ========== Lightbox 自訂樣式 ========== */
        .basicLightbox__placeholder > img {
            max-width: 90vw;
            max-height: 90vh;
            object-fit: contain;
        }
    
        /* ========== Lightweight Lightbox (Close + Prev/Next) ========== */
        .lb-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  display: none;
  z-index: 9999;
  padding: 14px;
  /* Allow the whole lightbox UI to remain reachable on short screens */
  overflow: auto;
}
        .lb-overlay.is-open{
  display: grid;
  place-items: center;
}
        .lb-stage{
  width: min(1200px, 100%);
  /* Keep Close + Prev/Next visible within viewport */
  max-height: calc(100vh - 28px);
  height: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}
        .lb-top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
        }
        .lb-title{
            font-weight: 700;
            font-size: 0.95rem;
            opacity: .95;
        }
        .lb-btn{
            border: 1px solid rgba(255,255,255,.22);
            background: rgba(255,255,255,.10);
            color: #fff;
            padding: .45rem .65rem;
            border-radius: 10px;
            font-weight: 700;
        }
        .lb-btn:hover{ background: rgba(255,255,255,.16); }
        .lb-media{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  /* Critical: let media shrink so nav doesn't get pushed offscreen */
  min-height: 0;
}
        .lb-media img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* Best for portrait photos */
  display: block;
  background: transparent;
}
        .lb-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* prevent overflow on small widths */
}
        .lb-caption{
  color: rgba(255,255,255,.92);
  font-size: .92rem;
  text-align: center;
  flex: 1 1 260px;
  padding: 0 .25rem;
  line-height: 1.35;
}
        /*地點可愛風*/
        .venue-chip{
          display: inline-flex;
          align-items: center;
          gap: .5rem;
          padding: .45rem .75rem;
          border-radius: 999px;
          border: 1px solid #d7dee7;
          background: #fff;
          box-shadow: 0 2px 10px rgba(16,24,40,.06);
          font-family: "Open Sans", Helvetica, Arial, sans-serif;
        }

        .venue-icon{
          width: 28px;
          height: 28px;
          display: inline-grid;
          place-items: center;
          border-radius: 999px;
          background: #fff4cc;
          border: 1px solid #ffe08a;
          line-height: 1;
          transform: translateY(-.5px);
        }

        .venue-label{
          font-weight: 800;
          color: #0b2f5b;
          letter-spacing: .2px;
        }

        .venue-value{
          font-weight: 700;
          color: #1b4f9c;
          background: #eef4ff;
          border: 1px solid #d7e6ff;
          padding: .12rem .45rem;
          border-radius: 999px;
        }

@media (max-height: 520px){
  .lb-overlay{ padding: 10px; }
  .lb-stage{ gap: 8px; max-height: calc(100vh - 20px); }
  .lb-btn{ padding: .35rem .5rem; }
  .lb-caption{ font-size: .85rem; }
}