/* === STYLE 0 === */

    :root {
      /* Universal Dynamic Manifest Variables */
      --primary-color: #035f75;
      --color-primary-color: #035f75;
      --primary-color-full: #035f75;

      --primary-color: #035f75;
      
      
      
      /* Full values (can be gradients) */
      --primary-full: #035f75;
      

      /* Link globals.css semantic variables to these dynamic variables */
      --color-primary: var(--primary-color);
      --color-primary-dark: color-mix(in srgb, var(--primary-color) 80%, black);
      --color-primary-contrast: #FFFFFF;
      
      

      /* Custom Graph colors derived from primary color but keeping distinct base hues */
      --color-graph-appeared: color-mix(in srgb, var(--primary-color) 30%, #38bdf8);
      --color-graph-passed: color-mix(in srgb, var(--primary-color) 30%, #10b981);
      --color-graph-aplus: color-mix(in srgb, var(--primary-color) 30%, #f59e0b);
      --color-graph-avg: color-mix(in srgb, var(--primary-color) 30%, #8b5cf6);
    }
    
    html:not(.dark) {
      
      
      
      
      
    }

    html.dark {
      
      
      
      
      
    }
    
    /* Font Override */
    body {
      font-family: inherit;
    }

    /* Primary Background Overrides - Use full value (supports gradients) */
    
    .bg-primary, 
    .bg-blue-950,
    .bg-blue-900,
    .bg-blue-800,
    .bg-blue-950-dark,
    .bg-\(--color-primary\) { 
      background: var(--primary-full); 
      color: var(--color-primary-contrast, #FFFFFF) !important;
    }
    .bg-primary *, 
    .bg-blue-950 *,
    .bg-blue-900 *,
    .bg-blue-800 *,
    .bg-blue-950-dark *,
    .bg-\(--color-primary\) * { 
      color: inherit;
    }
    
    
    /* Secondary Background Overrides - Use full value (supports gradients) */
    
    
    /* Page Background Overrides */
    

    /* Card / Surface Overrides */
    

    /* Footer Background Overrides */
    
    
    /* Text Color Overrides */
    
    .text-primary,
    .text-blue-950,
    .text-blue-900 {
      color: var(--primary-color);
    }
    
    
    

    /* Heading Color Overrides */
    

    /* Body Text Color Overrides - Exclude primary background containers */
    

    /* Typography Overrides */
    
      
      :root {
        
        
        
        
        
        
      }

      

      body, p, span:not(.font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *), li, a:not(.font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *), input, textarea, select, button {
        
      }

      h1, h2, h3, h4, h5, h6, .font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
        
        
        
      }

      
      h1 { font-size: calc(1.8rem * 1.25) !important; }
      h2 { font-size: calc(1.4rem * 1.25) !important; }
      h3 { font-size: calc(1.15rem * 1.25) !important; }
      

      
      

    /* Border Radius Overrides */
    

    /* Accent & Border Overrides */
    
    .border-blue-950, 
    .border-blue-900,
    .border-blue-950-dark,
    .border-primary {
      border-color: var(--primary-color);
    }
    

    

    

    /* Ring Color Overrides */
    

    /* Dynamic Button Overrides */
    

    

    /* Dynamic Active Navigation Link Overrides */
    
  
/* === STYLE 1 === */

              html.translating-wait body {
                opacity: 0.94 !important;
              }
              body {
                transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1);
              }
            
/* === STYLE 2 === */

    :root {
      /* Universal Dynamic Manifest Variables */
      --primary-color: #035f75;
      --color-primary-color: #035f75;
      --primary-color-full: #035f75;

      --primary-color: #035f75;
      
      
      
      /* Full values (can be gradients) */
      --primary-full: #035f75;
      

      /* Link globals.css semantic variables to these dynamic variables */
      --color-primary: var(--primary-color);
      --color-primary-dark: color-mix(in srgb, var(--primary-color) 80%, black);
      --color-primary-contrast: #FFFFFF;
      
      

      /* Custom Graph colors derived from primary color but keeping distinct base hues */
      --color-graph-appeared: color-mix(in srgb, var(--primary-color) 30%, #38bdf8);
      --color-graph-passed: color-mix(in srgb, var(--primary-color) 30%, #10b981);
      --color-graph-aplus: color-mix(in srgb, var(--primary-color) 30%, #f59e0b);
      --color-graph-avg: color-mix(in srgb, var(--primary-color) 30%, #8b5cf6);
    }
    
    html:not(.dark) {
      
      
      
      
      
    }

    html.dark {
      
      
      
      
      
    }
    
    /* Font Override */
    body {
      font-family: inherit;
    }

    /* Primary Background Overrides - Use full value (supports gradients) */
    
    .bg-primary, 
    .bg-blue-950,
    .bg-blue-900,
    .bg-blue-800,
    .bg-blue-950-dark,
    .bg-\(--color-primary\) { 
      background: var(--primary-full); 
      color: var(--color-primary-contrast, #FFFFFF) !important;
    }
    .bg-primary *, 
    .bg-blue-950 *,
    .bg-blue-900 *,
    .bg-blue-800 *,
    .bg-blue-950-dark *,
    .bg-\(--color-primary\) * { 
      color: inherit;
    }
    
    
    /* Secondary Background Overrides - Use full value (supports gradients) */
    
    
    /* Page Background Overrides */
    

    /* Card / Surface Overrides */
    

    /* Footer Background Overrides */
    
    
    /* Text Color Overrides */
    
    .text-primary,
    .text-blue-950,
    .text-blue-900 {
      color: var(--primary-color);
    }
    
    
    

    /* Heading Color Overrides */
    

    /* Body Text Color Overrides - Exclude primary background containers */
    

    /* Typography Overrides */
    
      
      :root {
        
        
        
        
        
        
      }

      

      body, p, span:not(.font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *), li, a:not(.font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *), input, textarea, select, button {
        
      }

      h1, h2, h3, h4, h5, h6, .font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
        
        
        
      }

      
      h1 { font-size: calc(1.8rem * 1.25) !important; }
      h2 { font-size: calc(1.4rem * 1.25) !important; }
      h3 { font-size: calc(1.15rem * 1.25) !important; }
      

      
      

    /* Border Radius Overrides */
    

    /* Accent & Border Overrides */
    
    .border-blue-950, 
    .border-blue-900,
    .border-blue-950-dark,
    .border-primary {
      border-color: var(--primary-color);
    }
    

    

    

    /* Ring Color Overrides */
    

    /* Dynamic Button Overrides */
    

    

    /* Dynamic Active Navigation Link Overrides */
    
  
/* === STYLE 3 === */

              #zenova-header {
                background-color: var(--color-bg-white, #ffffff);
              }
              html.dark #zenova-header, .dark #zenova-header {
                background-color: #0f172a;
              }
              #zenova-branding {
                background-color: var(--color-bg-white, #ffffff) !important;
              }
              html.dark #zenova-branding, .dark #zenova-branding {
                background-color: #0f172a !important;
              }
              #zenova-nav {
                background-color: var(--color-bg-white, #ffffff) !important;
              }
              html.dark #zenova-nav, .dark #zenova-nav {
                background-color: #0f172a !important;
              }

              @keyframes slideInFromLeft {
                from { transform: translateX(-100%); }
                to  { transform: translateX(0); }
              }
              @keyframes fadeInBackdrop {
                from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
                to   { opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
              }
              .drawer-panel {
                animation: slideInFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
              }
              .drawer-backdrop {
                animation: fadeInBackdrop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
              }
            
/* === STYLE 4 === */

        @keyframes float-gentle-1 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-7px); }
        }
        @keyframes float-gentle-2 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-11px); }
        }
        @keyframes float-gentle-3 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-5px); }
        }
        .float-1 { animation: float-gentle-1 5s ease-in-out infinite; }
        .float-2 { animation: float-gentle-2 6s ease-in-out infinite; }
        .float-3 { animation: float-gentle-3 7s ease-in-out infinite; }

        .card-gloss-overlay {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: radial-gradient(circle 140px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.12), transparent 75%);
          opacity: 0;
          transition: opacity 0.3s ease;
          z-index: 15;
        }
        .group:hover .card-gloss-overlay {
          opacity: 1;
        }

        .vertical-text {
          writing-mode: vertical-rl;
          transform: rotate(180deg);
        }
        
/* === STYLE 5 === */

        @keyframes teamCardEntrance {
          0% {
            opacity: 0;
            transform: translateY(36px) scale(0.95);
          }
          65% {
            opacity: 0.9;
            transform: translateY(-2px) scale(1.005);
          }
          100% {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        .team-card-animate {
          opacity: 0;
          transform: translateY(36px) scale(0.95);
          will-change: opacity, transform;
        }

        .team-grid-visible .team-card-animate {
          animation: teamCardEntrance 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        @media (prefers-reduced-motion: reduce) {
          .team-card-animate {
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
          }
        }
      
/* === STYLE 6 === */

        @keyframes float-gentle-1 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-8px); }
        }
        @keyframes float-gentle-2 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-14px); }
        }
        @keyframes float-gentle-3 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-6px); }
        }
        .float-1 { animation: float-gentle-1 5s ease-in-out infinite; }
        .float-2 { animation: float-gentle-2 6s ease-in-out infinite; }
        .float-3 { animation: float-gentle-3 7s ease-in-out infinite; }

        .glass-container {
          background: rgba(15, 23, 42, 0.25);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .card-gloss-overlay {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: radial-gradient(circle 180px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.12), transparent 75%);
          opacity: 0;
          transition: opacity 0.3s ease;
        }
        .group:hover .card-gloss-overlay {
          opacity: 1;
        }

        .vertical-text {
          writing-mode: vertical-rl;
          text-orientation: mixed;
          transform: rotate(180deg);
        }
      
/* === STYLE 7 === */

        @keyframes evSlideIn {
          from { opacity: 0; transform: translateY(16px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes evImgIn {
          from { opacity: 0; transform: scale(0.97) translateY(14px); }
          to   { opacity: 1; transform: scale(1)    translateY(0); }
        }
        @keyframes evProgress {
          from { height: 0%; }
          to   { height: 100%; }
        }
        @keyframes galleryFadeIn {
          from { opacity: 0; transform: scale(1.04); }
          to   { opacity: 1; transform: scale(1); }
        }
        @keyframes lbFadeIn {
          from { opacity: 0; }
          to   { opacity: 1; }
        }

        /* ── Lightbox responsive ── */
        @media (max-width: 640px) {
          /* On small screens, tighten padding so nav arrows don't overlap the image */
          .lb-nav-btn {
            padding: 8px 10px !important;
            font-size: 22px !important;
          }
          .lb-prev-btn {
            left: 8px !important;
          }
          .lb-next-btn {
            right: 8px !important;
          }
          .lb-close-btn {
            top: 10px !important;
            right: 10px !important;
            width: 34px !important;
            height: 34px !important;
            font-size: 18px !important;
          }
        }

        .heg-sub-btn {
          display: none;
        }

        /* ── Layout ── */
        .heg-header {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          margin-bottom: var(--space-10);
          flex-wrap: wrap;
          gap: var(--space-4);
        }

        .heg-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--space-8);
          align-items: start;
        }

        /* Strip heights (desktop)
           Aligned to 500px to match the right-hand Bento box perfectly.
           85px ghost-prev + 330px (16:9 ratio at 580px width) + 85px ghost-next = 500px */
        .heg-strip       { height: 500px; }
        .heg-ghost-prev  { height: 85px; }
        .heg-main-img    { top: 85px; height: calc(500px - 85px - 85px); } /* 330px -> ~16:9 aspect ratio */
        .heg-ghost-next  { height: 85px; }

        /* Bento height (desktop) */
        .heg-bento { height: 500px; }

        /* ── Tablet (≤ 1024px) ── */
        @media (max-width: 1024px) {
          .heg-grid {
            grid-template-columns: 1fr;
            gap: var(--space-10);
          }
          .heg-strip      { height: 490px; }
          .heg-ghost-prev { height: 75px; }
          .heg-main-img   { top: 75px; height: calc(490px - 75px - 75px); } /* 340px */
          .heg-ghost-next { height: 75px; }
          .heg-bento      { height: 440px; }
        }

        /* ── Mobile (≤ 640px) ── */
        @media (max-width: 640px) {
          .heg-header {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: var(--space-6);
          }
          /* Mobile slider: ghost+main heights sum to 340px */
          .heg-strip      { height: 340px; }
          .heg-ghost-prev { height: 50px; }
          .heg-main-img   { top: 50px; height: calc(340px - 50px - 50px); } /* 240px -> 16:10 ratio at ~380px */
          .heg-read-story-btn {
            left: auto !important;
            right: var(--space-3) !important;
            transform: none !important;
            bottom: var(--space-3) !important;
            padding: 4px 10px !important;
            font-size: 10px !important;
            gap: 4px !important;
          }

          .heg-header-btn {
            display: none !important;
          }
          .heg-sub-btn {
            display: inline-flex !important;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border: 1px solid var(--color-primary);
            border-radius: 99px;
            font-size: 9px;
            font-weight: var(--fw-bold);
            color: var(--color-primary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: transparent;
            text-decoration: none;
            transition: all 0.2s ease;
            white-space: nowrap;
          }
          .heg-sub-btn:hover {
            background: var(--color-primary);
            color: white;
          }
          .heg-moments-title-container {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: var(--space-2) !important;
          }
          .heg-latest-btn {
            display: inline-flex !important;
            align-items: center;
            gap: 4px;
            padding: 3px 10px !important;
            border: 1px solid var(--color-primary) !important;
            border-radius: 99px !important;
            font-size: 9px !important;
            font-weight: var(--fw-bold) !important;
            color: var(--color-primary) !important;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: transparent !important;
            text-decoration: none;
            transition: all 0.2s ease;
            white-space: nowrap;
            box-shadow: none !important;
            transform: none !important;
          }
          .heg-latest-btn:hover {
            background: var(--color-primary) !important;
            color: white !important;
            transform: none !important;
          }

          /* Bento: single-column, full-width tiles with dynamic heights to display full images without cropping */
          .heg-bento {
            height: auto !important;
            grid-template-columns: 1fr !important;
            gap: var(--space-3) !important;
          }
          /* Large tile (first child) */
          .heg-bento > :first-child {
            width: 100% !important;
            height: auto !important;
          }
          /* Right column wrapper becomes single column */
          .heg-bento > div:last-child {
            display: grid !important;
            grid-template-columns: 1fr !important;
            grid-template-rows: unset !important;
            gap: var(--space-3) !important;
            height: auto !important;
            width: 100% !important;
          }
          /* Two smaller tiles */
          .heg-bento > div:last-child > * {
            width: 100% !important;
            height: auto !important;
          }

          /* Keep images full, no cuts, no side spaces on small devices */
          .heg-tile-wrapper {
            height: auto !important;
            width: 100% !important;
          }
          .heg-tile-inner {
            height: auto !important;
            width: 100% !important;
          }
          .heg-tile-img {
            position: relative !important;
            width: 100% !important;
            height: auto !important;
            inset: auto !important;
            object-fit: contain !important;
          }
        }

        /* ── Small mobile (≤ 400px) ── */
        @media (max-width: 400px) {
          .heg-strip      { height: 300px; }
          .heg-ghost-prev { height: 46px; }
          .heg-main-img   { top: 46px; height: calc(300px - 46px - 46px); } /* 208px */
          .heg-ghost-next { height: 46px; }
        }
      

/* ================= HEADER FIXED & SCROLL TRANSFORMATION ================= */
#zenova-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    background-color: var(--color-bg-white, #ffffff);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
    will-change: transform;
}

#zenova-header-spacer {
    display: block;
    width: 100%;
    height: var(--header-h, 175px);
    pointer-events: none;
}

@media (max-width: 1023px) {
    #zenova-header-spacer {
        height: var(--header-h, 125px);
    }
}

body.scrolled #zenova-header {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
}

/* 1. Green Topbar: Collapses smoothly on scroll */
#zenova-topbar {
    max-height: 48px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    will-change: max-height, opacity;
}

body.scrolled #zenova-topbar {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 2. School Name Container: Shrinks cleanly, stays as its OWN bar (NOT merged) */
#zenova-branding {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: padding;
}

@media (min-width: 1024px) {
    #zenova-branding {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }
}

#zenova-logo-image {
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height, width;
}

#zenova-h1 {
    transition: font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#zenova-details {
    max-height: 80px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height, opacity, margin;
}

body.scrolled #zenova-branding {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

body.scrolled #zenova-logo-image {
    height: 34px !important;
    width: 34px !important;
}

@media (min-width: 1024px) {
    body.scrolled #zenova-branding {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }
    body.scrolled #zenova-logo-image {
        height: 44px !important;
        width: auto !important;
    }
}

body.scrolled #zenova-h1 {
    font-size: clamp(12px, 3.5vw, 18px) !important;
}

body.scrolled #zenova-details {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    pointer-events: none;
}

body.scrolled #zenova-enroll-lg a {
    padding: 0.45rem 1.25rem !important;
    font-size: 12px !important;
}

/* 3. Navigation Bar: Stays separate below the branding bar */
#zenova-nav {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.25s ease;
}

/* ================= HERO PROMO CAROUSEL SLIDE IN/OUT ANIMATIONS ================= */
.hero-promo-deck {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
}

.hero-promo-card-wrapper {
    will-change: transform, opacity;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.hero-promo-card-wrapper.promo-slide-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 1;
    transform: translateY(-100%);
}

.hero-promo-card-wrapper.promo-slide-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: 10;
    transform: translateY(0);
}

.hero-promo-card-wrapper.promo-slide-enter-down {
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
    animation: promoSlideEnterDown 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.hero-promo-card-wrapper.promo-slide-exit-down {
    visibility: visible;
    pointer-events: none;
    z-index: 5;
    animation: promoSlideExitDown 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.hero-promo-card-wrapper.promo-slide-enter-up {
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
    animation: promoSlideEnterUp 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.hero-promo-card-wrapper.promo-slide-exit-up {
    visibility: visible;
    pointer-events: none;
    z-index: 5;
    animation: promoSlideExitUp 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes promoSlideEnterDown {
    0% { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes promoSlideExitDown {
    0% { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(100%); }
}

@keyframes promoSlideEnterUp {
    0% { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes promoSlideExitUp {
    0% { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-100%); }
}



/* ================= 2. SECTION 2 (CAMPUS FOCUS & STATS & NOTICES) EXACT FROM AL-FURQAN ================= */
.sb-statsbar-section{width:100%;background:var(--color-bg-white);padding:clamp(1rem,2vw,1.5rem)0}.dark .sb-statsbar-section{background:var(--color-bg-white)}.empty-state-wrapper{padding:24px 16px;text-align:center;border:1.5px dashed var(--sb-panel-divider);border-radius:16px;color:var(--sb-notice-snippet);font-size:14px}.sb-statsbar-section{--sb-card-bg:var(--color-card-bg, #FFFFFF);--sb-card-border:var(--color-card-border, #E2EBF3);--sb-card-shadow:0 4px 24px 0 color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-icon-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-icon-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 18%, transparent);--sb-icon-color:var(--color-primary, #0EA5E9);--sb-stat-value:var(--color-text-main, #0F172A);--sb-stat-label:var(--color-text-muted, #64748B);--sb-panel-bg:var(--color-card-bg, #FFFFFF);--sb-panel-border:var(--color-card-border, #E2EBF3);--sb-panel-shadow:0 10px 30px -5px color-mix(in srgb, var(--color-primary, #0EA5E9) 6%, transparent);--sb-panel-title:var(--color-text-main, #0F172A);--sb-panel-divider:var(--color-card-border, #E2EBF3);--sb-panel-action:var(--color-primary, #0EA5E9);--sb-title-icon:var(--color-primary, #0EA5E9);--sb-notice-bg:var(--color-card-bg, #FFFFFF);--sb-notice-border:var(--color-card-border, #E2EBF3);--sb-notice-hover-shadow:0 6px 20px color-mix(in srgb, var(--color-primary, #0EA5E9) 12%, transparent);--sb-date-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 10%, transparent);--sb-date-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 20%, transparent);--sb-date-color:var(--color-primary, #0EA5E9);--sb-notice-title:var(--color-text-main, #0F172A);--sb-notice-snippet:var(--color-text-muted, #475569);--sb-board-bg:var(--color-card-bg, #FFFFFF);--sb-board-border:var(--color-card-border, #E2EBF3);--sb-board-icon-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 10%, transparent);--sb-board-icon-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 20%, transparent);--sb-board-icon-color:var(--color-primary, #0EA5E9);--sb-board-text:var(--color-text-main, #0F172A);--sb-campus-bg:var(--color-card-bg, #FFFFFF);--sb-campus-border:var(--color-card-border, #E2EBF3);--sb-campus-shadow:0 10px 30px -5px color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-campus-badge-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-campus-badge-text:var(--color-primary-dark, #0284C7);--sb-campus-title:var(--color-text-main, #0F172A);--sb-campus-accent:var(--color-primary, #0EA5E9);--sb-campus-desc:var(--color-text-muted, #475569);--sb-campus-meta-bg:var(--color-subcard-bg, #F8FAFC);--sb-campus-meta-border:var(--color-card-border, #E2EBF3);--sb-campus-meta-label:var(--color-text-muted, #64748B);--sb-campus-meta-value:var(--color-text-main, #0F172A);--sb-campus-meta-icon-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-campus-meta-icon-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 18%, transparent);--sb-campus-meta-icon-color:var(--color-primary, #0EA5E9);--sb-campus-btn-bg:var(--color-primary, #0EA5E9);--sb-campus-btn-text:var(--color-bg-white, #FFFFFF);--sb-img-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 4%, transparent)}.dark .sb-statsbar-section{--sb-card-bg:var(--color-card-bg, #1E293B);--sb-card-border:var(--color-card-border, rgba(255,255,255,0.05));--sb-card-shadow:0 4px 24px 0 rgba(0,0,0,0.2);--sb-icon-bg:color-mix(in srgb, var(--color-primary, #38BDF8) 10%, transparent);--sb-icon-border:color-mix(in srgb, var(--color-primary, #38BDF8) 20%, transparent);--sb-icon-color:var(--color-primary, #38BDF8);--sb-stat-value:var(--color-text-main, #F8FAFC);--sb-stat-label:var(--color-text-muted, #94A3B8);--sb-panel-bg:var(--color-card-bg, #1E293B);--sb-panel-border:var(--color-card-border, rgba(255,255,255,0.04));--sb-panel-shadow:0 10px 30px -5px rgba(0,0,0,0.25);--sb-panel-title:var(--color-text-main, #E2E8F0);--sb-panel-divider:var(--color-card-border, rgba(255,255,255,0.06));--sb-panel-action:var(--color-primary, #38BDF8);--sb-title-icon:var(--color-primary, #38BDF8);--sb-notice-bg:var(--color-subcard-bg, #0F172A);--sb-notice-border:var(--color-card-border, rgba(255,255,255,0.05));--sb-notice-hover-shadow:0 6px 20px rgba(0,0,0,0.4);--sb-date-bg:color-mix(in srgb, var(--color-primary, #38BDF8) 10%, transparent);--sb-date-border:color-mix(in srgb, var(--color-primary, #38BDF8) 20%, transparent);--sb-date-color:var(--color-primary, #38BDF8);--sb-notice-title:var(--color-text-main, #F8FAFC);--sb-notice-snippet:var(--color-text-muted, #94A3B8);--sb-board-bg:var(--color-subcard-bg, #0F172A);--sb-board-border:var(--color-card-border, rgba(255,255,255,0.05));--sb-board-icon-bg:color-mix(in srgb, var(--color-primary, #38BDF8) 10%, transparent);--sb-board-icon-border:color-mix(in srgb, var(--color-primary, #38BDF8) 20%, transparent);--sb-board-icon-color:var(--color-primary, #38BDF8);--sb-board-text:var(--color-text-main, #E2E8F0);--sb-campus-bg:var(--color-card-bg, #1E293B);--sb-campus-border:var(--color-card-border, rgba(255,255,255,0.05));--sb-campus-shadow:0 10px 30px -5px rgba(0,0,0,0.3);--sb-campus-badge-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 15%, transparent);--sb-campus-badge-text:var(--color-primary, #38BDF8);--sb-campus-title:var(--color-text-main, #F8FAFC);--sb-campus-accent:var(--color-primary, #38BDF8);--sb-campus-desc:var(--color-text-muted, #94A3B8);--sb-campus-meta-bg:var(--color-subcard-bg, rgba(255,255,255,0.02));--sb-campus-meta-border:var(--color-card-border, rgba(255,255,255,0.06));--sb-campus-meta-label:var(--color-text-muted, #64748B);--sb-campus-meta-value:var(--color-text-main, #E2E8F0);--sb-campus-meta-icon-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 10%, transparent);--sb-campus-meta-icon-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 20%, transparent);--sb-campus-meta-icon-color:var(--color-primary, #38BDF8);--sb-campus-btn-bg:var(--color-primary, #0EA5E9);--sb-campus-btn-text:var(--color-text-main, #FFFFFF);--sb-img-bg:color-mix(in srgb, var(--color-text-main, #FFFFFF) 3%, transparent)}.stat-card{flex:1 1 0;background:var(--sb-card-bg);border-radius:16px;border:1.5px solid var(--sb-card-border);box-shadow:var(--sb-card-shadow);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px;padding:24px 20px;min-width:0;transition:background.3s ease,border-color.3s ease}.stat-icon-bubble{border-radius:50%;background:var(--sb-icon-bg);border:1.5px solid var(--sb-icon-border);color:var(--sb-icon-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;margin-bottom:0px}.stat-content-wrapper{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}.stat-value{font-size:1.75rem;font-weight:800;color:var(--sb-stat-value);line-height:1.1;letter-spacing:-.02em;transition:color.3s ease;white-space:nowrap}.stat-label{margin-top:4px;font-size:10.5px;font-weight:700;color:var(--sb-stat-label);text-transform:uppercase;letter-spacing:.07em;transition:color.3s ease}.sb-stats-row{display:flex;gap:var(--space-6);--stats-gap:var(--space-6);align-items:stretch;margin-bottom:var(--space-12)}.sb-stats-row--count-2 .stat-card,.sb-stats-row--count-3 .stat-card{padding:24px 24px;gap:24px;justify-content:center}.sb-stats-row--count-4 .stat-card{padding:20px 20px;gap:18px;justify-content:center}.sb-stats-row--count-4 .stat-icon-bubble{width:44px;height:44px;margin-bottom:0px}.sb-stats-row--count-4 .stat-value{font-size:1.55rem}.sb-stats-row--count-4 .stat-label{font-size:9.5px;margin-top:3px}.sb-stats-row--count-5 .stat-card{padding:16px 16px;gap:14px;justify-content:center}.sb-stats-row--count-5 .stat-icon-bubble{width:38px;height:38px;margin-bottom:0px}.sb-stats-row--count-5 .stat-value{font-size:1.35rem}.sb-stats-row--count-5 .stat-label{font-size:8.5px;margin-top:2px}.sb-stats-row--count-more-5 .stat-card{flex:0 0 calc((100% - 4*var(--stats-gap))/5);min-width:calc((100% - 4*var(--stats-gap))/5);padding:16px 16px;gap:14px;justify-content:center}.sb-stats-row--count-more-5 .stat-icon-bubble{width:38px;height:38px;margin-bottom:0px}.sb-stats-row--count-more-5 .stat-value{font-size:1.35rem}.sb-stats-row--count-more-5 .stat-label{font-size:8.5px;margin-top:2px}.sb-stats-row--scroll{overflow-x:scroll;-webkit-overflow-scrolling:touch;padding-bottom:14px;flex-wrap:nowrap;scroll-snap-type:x mandatory;scrollbar-width:auto;scrollbar-color:rgba(14,165,233,.6)rgba(14,165,233,.12)}.sb-stats-row--scroll .stat-card{scroll-snap-align:start}.sb-stats-row--scroll::-webkit-scrollbar{height:8px;display:block}.sb-stats-row--scroll::-webkit-scrollbar-track{background:rgba(14,165,233,.12);border-radius:4px}.sb-stats-row--scroll::-webkit-scrollbar-thumb{background:rgba(14,165,233,.55);border-radius:4px}.sb-stats-row--scroll::-webkit-scrollbar-thumb:hover{background:rgba(14,165,233,.75)}.sb-main-grid{display:grid;grid-template-columns:2.7fr 1.3fr;gap:var(--space-8)}.sb-campus-col{min-width:0;height:100%}.sb-notices-col{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;height:100%}.sb-notices-col .notice-panel{flex:0 0 auto;display:flex;flex-direction:column}.sb-notices-col .notice-panel:last-child{flex:1;min-height:0}.dark-campus-card-wrapper{background:var(--sb-campus-bg);border-radius:24px;border:1.5px solid var(--sb-campus-border);box-shadow:var(--sb-campus-shadow);overflow:hidden;transition:background.3s ease,border-color.3s ease;height:100%;display:flex;flex-direction:column}.campus-focus-badge{align-self:flex-start;background:var(--sb-campus-badge-bg);color:var(--sb-campus-badge-text);font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}.campus-card-title{font-size:clamp(18px,2.5vw,26px);font-weight:800;color:var(--sb-campus-title);margin-bottom:12px;line-height:1.25;transition:color.3s ease}.campus-card-title-accent{color:var(--sb-campus-accent)}.campus-card-desc{color:var(--sb-campus-desc);font-size:clamp(13px,1.5vw,15px);line-height:1.75;margin-bottom:20px;transition:color.3s ease}.campus-meta-item{background:var(--sb-campus-meta-bg);border-radius:12px;padding:clamp(10px,2vw,14px)clamp(12px,2vw,16px);border:1.5px solid var(--sb-campus-meta-border);display:flex;align-items:center;gap:10px;transition:background.3s ease,border-color.3s ease}.campus-meta-icon{width:34px;height:34px;border-radius:8px;flex-shrink:0;background:var(--sb-campus-meta-icon-bg);border:1px solid var(--sb-campus-meta-icon-border);color:var(--sb-campus-meta-icon-color);display:flex;align-items:center;justify-content:center}.campus-meta-label{font-size:9.5px;font-weight:700;color:var(--sb-campus-meta-label);text-transform:uppercase;letter-spacing:.06em}.campus-meta-value{font-size:clamp(14px,1.8vw,16px);font-weight:800;color:var(--sb-campus-meta-value);line-height:1.2;margin-top:2px;transition:color.3s ease}.campus-profile-link{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--sb-campus-btn-bg);color:var(--sb-campus-btn-text);padding:clamp(11px,2vw,15px)clamp(20px,3vw,28px);border-radius:16px;font-weight:700;text-decoration:none;font-size:clamp(13px,1.5vw,14px);width:100%;box-sizing:border-box;transition:opacity.2s ease;margin-top:auto}.campus-profile-link:hover{opacity:.9}.notice-panel{background:var(--sb-panel-bg);border-radius:24px;border:1.5px solid var(--sb-panel-border);box-shadow:var(--sb-panel-shadow);padding:20px 16px;transition:background.3s ease,border-color.3s ease;display:flex;flex-direction:column}.notice-panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1.5px solid var(--sb-panel-divider);margin-bottom:10px}.notice-panel-title{font-size:20px;font-weight:800;color:var(--sb-panel-title);margin:0;display:flex;align-items:center;gap:10px;transition:color.3s ease}.notice-title-icon-wrapper{display:inline-flex;align-items:center;color:var(--sb-title-icon)}.notice-panel-action{font-size:13px;font-weight:700;color:var(--sb-panel-action);text-decoration:none;transition:opacity.2s}.notice-panel-action:hover{opacity:.8}.notice-panel-content{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}.scrollable-notices-container,.scrollable-board-container{height:278px!important;overflow-y:auto!important;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--color-primary)transparent;padding-right:4px}.scrollable-notices-container::-webkit-scrollbar,.scrollable-board-container::-webkit-scrollbar{width:5px}.scrollable-notices-container::-webkit-scrollbar-track,.scrollable-board-container::-webkit-scrollbar-track{background:transparent}.scrollable-notices-container::-webkit-scrollbar-thumb,.scrollable-board-container::-webkit-scrollbar-thumb{background-color:var(--color-primary);border-radius:3px}.notice-item-row{display:flex;align-items:center;gap:16px;padding:8px 10px;text-decoration:none;background:var(--sb-notice-bg);border:none;box-shadow:none!important;border-radius:16px;transition:transform.2s,background.3s;flex-shrink:0!important}.notice-item-row:hover{transform:translatey(-2px);box-shadow:none!important}.notice-date-badge{flex-shrink:0;width:48px;height:48px;border-radius:12px;border:1.5px solid var(--sb-date-border);background:var(--sb-date-bg);display:flex;flex-direction:column;align-items:center;justify-content:center}.notice-date-day{font-size:15px;font-weight:800;color:var(--sb-date-color);line-height:1.1}.notice-date-month{font-size:9px;font-weight:800;color:var(--sb-date-color);text-transform:uppercase;letter-spacing:.02em}.notice-item-details{flex:1;min-width:0}.notice-item-title{font-size:14px;font-weight:700;color:var(--sb-notice-title);margin:0 0 4px;line-height:1.3;word-break:break-word}.notice-item-snippet{font-size:13.5px;color:var(--sb-notice-snippet);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-item-row{display:flex;align-items:center;gap:16px;padding:8px 10px;text-decoration:none;background:var(--sb-board-bg);border:none;box-shadow:none!important;border-radius:16px;transition:transform.2s,background.3s;flex-shrink:0!important}.board-item-row:hover{transform:translatey(-2px);box-shadow:none!important}.board-item-icon-bubble{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:var(--sb-board-icon-bg);border:1.5px solid var(--sb-board-icon-border);color:var(--sb-board-icon-color);display:flex;align-items:center;justify-content:center}.board-item-icon-bubble svg{width:20px!important;height:20px!important}.board-item-text{font-size:14px;color:var(--sb-board-text);font-weight:700;line-height:1.45;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.campus-meta-grid{width:100%}@media(max-width:1100px){.campus-meta-grid{grid-template-columns:repeat(2,1fr)!important}.campus-meta-grid.has-scroll{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:12px!important;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.campus-meta-grid.has-scroll .campus-meta-item{flex:0 0 calc((100% - 12px)/2)!important;min-width:calc((100% - 12px)/2)!important;scroll-snap-align:start}}@media(min-width:769px)and (max-width:1100px){.sb-stats-row{gap:var(--space-4);--stats-gap:var(--space-4);margin-bottom:var(--space-8)}.stat-card{padding:16px 16px;gap:18px;justify-content:center}.stat-icon-bubble{width:44px;height:44px;margin-bottom:0px}.stat-value{font-size:1.45rem}.stat-label{font-size:9.5px}.sb-main-grid{grid-template-columns:1fr}.sb-notices-col{display:flex;flex-direction:column;gap:var(--space-6)}}@media(max-width:768px){.sb-stats-row{overflow-x:scroll!important;-webkit-overflow-scrolling:touch;padding-bottom:14px;display:flex!important;flex-wrap:nowrap!important;gap:12px!important;margin-bottom:var(--space-6)}.sb-stats-row .stat-card{flex:0 0 165px!important;min-width:165px!important;box-sizing:border-box!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;padding:14px 16px!important;gap:14px!important;border-radius:12px}.sb-stats-row .stat-icon-bubble{width:36px!important;height:36px!important;margin-bottom:0px!important}.sb-stats-row .stat-icon-bubble svg{width:16px!important;height:16px!important}.sb-stats-row .stat-value{font-size:1.15rem!important}.sb-stats-row .stat-label{font-size:8px!important;margin-top:2px!important}.sb-main-grid{grid-template-columns:1fr;gap:var(--space-6)}.notice-panel{padding:16px 12px;border-radius:20px}.notice-item-row,.board-item-row{gap:10px;padding:8px 10px}.notice-date-badge,.board-item-icon-bubble{width:44px;height:44px;min-width:44px;border-radius:10px}.notice-date-day{font-size:14px}.notice-date-month{font-size:8.5px}.board-item-text{font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding:0;margin:0}.notice-item-title{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin:0 0 2px}.notice-item-snippet{font-size:12px}}@media(max-width:480px){.sb-stats-row{margin-bottom:var(--space-5)}}

/* ================= LEADERSHIP & SPEECH DETAIL PAGE LAYOUT ================= */
.message-detail-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    padding: 2.5rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

.dark .message-detail-card {
    background: #0f172a;
    border-color: #1e293b;
}

.message-profile-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8fafc;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    border: 1px solid #f1f5f9;
}

.dark .message-profile-col {
    background: #1e293b;
    border-color: #334155;
}

.message-profile-img {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    border: 3px solid #ffffff;
    margin-bottom: 1rem;
}

.message-content-col {
    min-width: 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #334155;
}

.dark .message-content-col {
    color: #cbd5e1;
}

@media (max-width: 899px) {
    .message-detail-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .message-profile-col {
        padding: 1.5rem;
    }
}

/* ================= COMPLETE RESPONSIVE GRID & COLUMN ENGINE ================= */
.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    width: 100%;
}

.two-column-layout-8-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    width: 100%;
}

@media (min-width: 1024px) {
    .contact-layout-grid {
        grid-template-columns: 5fr 7fr;
        gap: 2.5rem;
    }
    .two-column-layout-8-4 {
        grid-template-columns: 8fr 4fr;
        gap: 2.5rem;
    }

    /* Universal 12-Column Grid Fallbacks for all blade files */
    .lg\:grid-cols-12 {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        width: 100% !important;
    }
    .lg\:col-span-12 { grid-column: span 12 / span 12 !important; }
    .lg\:col-span-10 { grid-column: span 10 / span 10 !important; }
    .lg\:col-span-9  { grid-column: span 9 / span 9 !important; }
    .lg\:col-span-8  { grid-column: span 8 / span 8 !important; }
    .lg\:col-span-7  { grid-column: span 7 / span 7 !important; }
    .lg\:col-span-6  { grid-column: span 6 / span 6 !important; }
    .lg\:col-span-5  { grid-column: span 5 / span 5 !important; }
    .lg\:col-span-4  { grid-column: span 4 / span 4 !important; }
    .lg\:col-span-3  { grid-column: span 3 / span 3 !important; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}