*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-1{left:0.25rem}.left-4{left:1rem}.top-0{top:0px}.top-1{top:0.25rem}.top-4{top:1rem}.z-30{z-index:30}.z-50{z-index:50}.z-10{z-index:10}.col-span-full{grid-column:1 / -1}.m-4{margin:1rem}.m-8{margin:2rem}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-0{margin-bottom:0px}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:0.5rem}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mr-3{margin-right:0.75rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-14{width:3.5rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.flex-grow{flex-grow:1}.grow{flex-grow:1}.rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-x-1 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.25rem * var(--tw-space-x-reverse));margin-left:calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.rounded-l-full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.p-1{padding:0.25rem}.p-10{padding:2.5rem}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-0{padding-bottom:0px}.pr-5{padding-right:1.25rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-inherit{color:inherit}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61 / var(--tw-bg-opacity, 1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))}.hover\:bg-yellow-700:hover{--tw-bg-opacity:1;background-color:rgb(161 98 7 / var(--tw-bg-opacity, 1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-teal-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(20 184 166 / var(--tw-ring-opacity, 1))}.focus\:ring-teal-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(15 118 110 / var(--tw-ring-opacity, 1))}@media (min-width: 640px){.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}.sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.sm\:space-y-0 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}}@media (min-width: 768px){.md\:block{display:block}.md\:hidden{display:none}.md\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme: dark){.dark\:border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.dark\:text-inherit{color:inherit}.dark\:text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.dark\:hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))}}
/* General Styles for Light Mode */

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}



:root {
  --light-gradient: linear-gradient(to right, #ffffff, #228a8a); /* Default/Light gradient */
  --new-blue: #3b82f6; /* Default/Light gradient */
  /* Define other color variables here */
}


        /*
        Metadata Field	User Utility & SEO Value
Problem Statement	(SEO) The exact problem an architect is searching for (e.g., "I need to visualize technology duplication across business units.").
Business Outcome	(Retention) What the user achieves (e.g., "Saves $500K in annual license costs." This goes on the card/modal).
Expert Tags	(Faceted Search) Detailed, multi-select tags: Security, Regulatory, Digital Transformation, Finance, Healthcare.
Curated Status	(isCurated: true/false). (Trust) Shows if Dragon1 experts have validated the model.
Difficulty Rating	(e.g., Easy, Medium, Complex). (Engagement) Helps new users pick an appropriate starting point.
Prerequisite Assets	(e.g., Requires Capability Map, Requires Application Inventory). (Upsell/Utility) Guides the user through the process.
        */
        /* UPDATED: Global Font Size Adjustment */
        html {
            /* Sets the base font size to 87.5% of the browser default (e.g., 14px instead of 16px). */
            font-size: 87.5%;
        }

        body{overflow:hidden}

        .dark-mode {
            background-color: #121212;
            color: #E0E0E0;
        }

        .dark-mode .header-controls button {

            color: #E0E0E0;
        }
        /* UPDATED: Body Background Gradient for Light Mode */
        .light-mode {
            background: var(--light-gradient);

            color: #333333;
        }

        .bg-blue-500{color:var(--new-blue)}

        /* New custom styles for dark mode header compatibility (mimicking the light mode shadow/border) */
        .dark-mode .top-header-unified {
            background-color: #121212; /* Dark background */
            color: #E0E0E0; /* Light text */
            /* Mimic shadow-lg for dark mode: */
            box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
            border-bottom: 1px solid #333; /* Dark mode border */
        }
        .light-mode .top-header-unified {
            /* Tailwind classes (bg-white, shadow-lg, border-b) are used directly on the element */
        }

        /* Old .top-header styles removed and replaced with Tailwind in the HTML tag */

        .header-controls {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        .search-section {
            padding: 2rem;
            text-align: center;
        }
        .search-box-wide {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            border-radius: 999px;
            overflow: hidden;
        }
        .light-mode .search-box-wide {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        #process-search {
            background-color: #242424;
            color: #E0E0E0;
            border: none;
        }
        .light-mode #process-search {
            background-color: #ffffff;
            color: #333333;
        }
        .library-container {
            display: flex;
            padding: 0 2rem 2rem 2rem;
            max-width: 100%;/*1400px;*/
            margin: 0 auto;
        }
        .library-filters {
            width: 250px;
            padding-right: 2rem;
        }

          /* NEW: Scrollable content wrapper (REVISED to only show scroll on hover) */
          .filter-content-wrapper {
            max-height: 100%; /* Take 100% of the parent's fixed height */
            overflow-y: hidden; /* Hide the scrollbar by default */
        }

        /* Show the scrollbar ONLY when the mouse is over the content wrapper */
        .filter-content-wrapper:hover {
            overflow-y: auto;
        }

        /* UPDATED: Removed flex properties as tagline is no longer a child element */
        .filter-list a {
            display: block;
            padding: 0.5rem 0.75rem;
            margin-bottom: 0.5rem;
            border-radius: 6px;
            transition: background-color 0.2s, color 0.2s;
            /* Removed previous flex/justify-content/align-items styles */
        }
        .filter-list a:hover {
            background-color: #333333;
            color: #ffffff;
        }
        .light-mode .filter-list a:hover {
            background-color: #ffffff;
            color: #333333;
        }

        /* --- Tagline Styling Removed (Now uses title attribute/tooltip) --- */

        /* --- Dynamic Active Filter Link Styling --- */
        .filter-list a.active {
            /* Reset the fixed blue background for dynamic color application */
            background-color: #007bff;
            color: white;
            font-weight: 600;
        }

        /* Light Mode uses the default fixed blue */
        .light-mode .filter-list a.active {
             background-color: #007bff;
        }
        /* Light Mode uses the default fixed blue */
        .light-mode .filter-list a.active:hover {

             color: white;
        }
        /* Tagline color styles removed */

        /* Dark Mode Theme-Specific Active Link Colors */
        .filter-list a.active.active-theme-black {
            background-color: #555555; /* NEW: Medium grey for black theme highlight */
        }
        .filter-list a.active.active-theme-default {
            background-color: #a855f7; /* Default Theme Purple Highlight */
        }
        .filter-list a.active.active-theme-green {
            background-color: #10b981; /* Green Theme Highlight */
        }
        .filter-list a.active.active-theme-purple {
            background-color: #d946ef; /* Purple Theme Highlight */
        }
        .filter-list a.active.active-theme-red {
            background-color: #ef4444; /* Red Theme Highlight */
        }
        .filter-list a.active.active-theme-orange {
            background-color: #f59e0b; /* Orange Theme Highlight */
        }
        .filter-list a.active.active-theme-blue {
            background-color: #3b82f6; /* Blue Theme Highlight */
        }
        /* Tagline color styles removed */


        /* --- Maximized Grid Layout --- */
        .library-grid {
            flex-grow: 1;
            display: grid;
            /* Reduced min width to 220px to easily allow 5+ columns on common screen sizes */
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
        }

        /* Core Visual Card Styles (Rest of styles omitted for brevity, no changes here) */
        .visual-card {
            padding: 15px;
            padding:15px 15px 5px 15px;
            border-radius: 12px;
           /* overflow: hidden;*/
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;

        }

        .light-mode.background-gradient-metal{background:linear-gradient(to right, #ffffff, #228a8a)}
        .light-mode.background-gradient-black{background:linear-gradient(to right, #ffffff, #000000)}
        .light-mode.background-gradient-red{background:linear-gradient(to right, #ffffff, #8a3522)}
        .light-mode.background-gradient-green{background:linear-gradient(to right, #ffffff, #298a22)}
        .light-mode.background-gradient-blue{background:linear-gradient(to right, #ffffff, #22648a)}
        .light-mode.background-gradient-orange{background:linear-gradient(to right, #ffffff, #8a6422)}
        .light-mode.background-gradient-purple{background:linear-gradient(to right, #ffffff, #8a2277)}

        /* Dark-to-Bright Gradient Definitions (0deg) */
        .card-gradient-black {
            background: linear-gradient(0deg, #101010, #242424, #333333, #555555, #242424);
        }
        .card-gradient-default {
            background: linear-gradient(0deg, #242424, #231e29, #412c2c, #a855f7, #6d28d9);
        }
        .card-gradient-green {
            background: linear-gradient(0deg, #101510, #10b981, #06b6d4, #14b8a6);
        }
        .card-gradient-purple {
            background: linear-gradient(0deg, #15101a, #9333ea, #d946ef, #a855f7);
        }
        .card-gradient-red {
            background: linear-gradient(0deg, #1a1010, #ef4444, #dc2626, #f97316);
        }
        .card-gradient-orange {
            background: linear-gradient(0deg, #1a1510, #f59e0b, #fbbf24, #f97316);
        }
        .card-gradient-blue {
            background: linear-gradient(0deg, #101324, #3b82f6, #2563eb, #0ea5e9);
        }

        /* Nested container to hold content and solid background */
        .card-inner {
            background-color: #1a1a1a;
            border-radius: 8px;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .light-mode .visual-card {
            background-color: #ffffff;
            padding: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            /* In light mode, the gradient class is removed, so card-inner provides the background */
        }
        .light-mode .card-inner {
            background-color: #ffffff;
        }

           .dark-mode .visual-card {

            padding: 5px;

            /* In light mode, the gradient class is removed, so card-inner provides the background */
        }

        .dark-mode .card-inner {
            padding: 10px;
        }

        .dark-mode .favorite-toggle{padding-left:0px;}

        .visual-card:hover {
          /*  transform: translateY(-5px);*/
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
        }

        .dark-mode .visual-card:hover .card-inner{
            background:#1a1a1aa8;
            -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
        }

        .light-mode .visual-card:hover {
            background:#ffffff5c;
            -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
        }

        .light-mode .visual-card:hover .card-inner{
            background:transparent;

        }

        .dark-mode .text-gray-700{
           color: rgb(156 163 175 / var(--tw-text-opacity, 1))
        }

        .light-mode .visual-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .card-visual {
            height: auto; /*180px*/
            overflow: hidden;
            display: flex;
         /*   align-items: center;*/
            justify-content: center;
            background-color: #333;
        }

        .image-overlay {
    position: absolute; /* Position the overlay absolutely */
    top: 0;             /* Align to the top of the parent (.card-visual) */
    left: 0;            /* Align to the left of the parent */
    width: 100%;        /* Cover 100% width of the parent */
    height: 100%;       /* Cover 100% height of the parent */
    background-color: transparent; /* Make it transparent */
    z-index: 10;        /* Ensure it's on top of the image */
    /* You can optionally add more styling to make it even harder */
    cursor: pointer;
    pointer-events: auto; /* Ensure it receives mouse events */
}

/* Optional: Further deter right-click on the image itself, though overlay handles most */
.card-visual img {
    pointer-events: none; /* This makes the image itself not respond to mouse events */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.modal-image-area img {
    pointer-events: none; /* This makes the image itself not respond to mouse events */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

        .light-mode .card-visual {
            background-color: #ffffff;
        }
        .card-visual img {
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position:top;
            aspect-ratio:16/9;
        }
        #modal-image{
            width: 100%;
            height: auto;
            object-fit: contain;
            object-position:top;
            aspect-ratio:16/9;
        }

        .dark-mode .card-visual {
            border-top-left-radius:6px;
            border-top-right-radius:6px;
           background: linear-gradient(
326deg, #000000 0%, /* Very light blue-white */ #56799b 100% /* Very light soft gray */)
}
        /* --- USER REQUEST 1: Change padding to 10px 0px 0px --- */
        .card-details {
            padding: 10px 0px 0px;
        }
        /* --- USER REQUEST 2: Change h3 font size to 1rem --- */
        .card-details h3 {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        .list-style .card-details h3 {
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        .card-details p {
            font-size: 0.85rem;
            color: #a0a0a0;
          /*  min-height: 40px;*/
            max-height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .list-style .card-details p {
            font-size: 1rem;
        }
        .light-mode .card-details p {
            color: #666;
        }
        .card-tag {
            display: inline-block;
            padding: 4px 8px;
            margin-top: 10px;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 4px;
        }
        .tag-eamodel { background-color: #840c80; color: white; }
        .tag-fortune-500 { background-color: #3b82f6; color: white; }
        .tag-ea { background-color: #3b82f6; color: white; }
        .tag-principles { background-color: #3b82f6; color: white; }
        .tag-bpmn { background-color: #10b981; color: white; }
         .tag-capability,.tag-capability,.archimate { background-color: #10b981; color: white; }
        .tag-roadmap { background-color: #f59e0b; color: white; }
        .tag-strategy { background-color: #f59e0b; color: white; }
        .tag-archimate { background-color: #f59e0b; color: white; }

        .tag-concept { background-color: #9333ea; color: white; }
        .tag-template { background-color: #98ea33; color: white; }
        .tag-popular {
            background-color: #ef4444;
            color: white;
            margin-left: 5px;
        }
        /* Modal Styling (omitted for brevity) */
        .modal-backdrop {
               width: 50%;
            min-width:35%;
            height: auto;
        /*position: fixed;
           // top: 0;
           // left: 0;

           // background-color: rgba(0, 0, 0, 0.85);*/

            justify-content: center;
         /*   align-items: center;*/
            z-index: 28;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .modal-dialog {
            background-color: #1a1a1a;
            color: #e0e0e0;
            border-radius: 10px;
            width: 100%;
          height:auto!important;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
        }
        .light-mode .modal-dialog {
            background-color: #ffffff;
            color: #333333;
        }
        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .light-mode .modal-header {
            border-bottom: 1px solid #ddd;
        }
        .modal-close-button {
            background: none;
            border: none;
            color: #a0a0a0;
            font-size: 2rem;
            cursor: pointer;
            transition: color 0.2s;
        }
        .modal-close-button:hover {
            color: white;
        }
        .light-mode .modal-close-button:hover {
            color: #333;
        }
        .modal-content-body {
            display: flex;
            padding: 20px;
            gap: 20px;
        }
        .modal-image-area {
            flex: 2;
            background-color: #333;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .light-mode .modal-image-area {
            background-color: #ffffff;
        }
  /*      .modal-image-area img {
            max-width: 100%;
            width:100%;
            max-height: 100%;
            height: auto;
            display: block;
        }*/
        .modal-details-area {
            flex: 1;
            padding-left: 10px;
        }
        .modal-details-area h4 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        .light-mode .modal-details-area h4 {
            color: #1d4ed8; /* Darker blue in light mode */
        }
        .modal-details-area p {
            line-height: 1.4;
        }

        /* 1. Ensure the parent filter div has a defined max-height */
.library-filters {
    /* Existing code from your file: Makes the menu sticky and limits height */
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    padding-right: 2rem;
    width: 250px;
}

/* 2. Hide scrollbar by default and make it take the parent's max-height */
.filter-content-wrapper {
    max-height: 100%; /* Take 100% of the parent's fixed height */
    overflow-y: hidden; /* Hides the scrollbar initially */
}

/* 3. Show scrollbar on hover */
.filter-content-wrapper:hover {
    overflow-y: auto; /* Enables scrolling when the mouse is over the div */
}

/* --- SCROLL-ON-HOVER FOR MAIN CONTENT GRID (#process-panels-container) --- */

/* Note: Scroll-on-hover is generally disruptive for the main content.
   If you want the whole window to scroll instead, remove the 'max-height' and 'overflow-y' properties below. */
.library-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;

    /* NEW: Define a max-height for the grid to enable its own scrolling */
    /* This height assumes about 200px is taken up by the header and search box */
    /*max-height: calc(100vh - 200px); */
    overflow-y: hidden; /* Hides the scrollbar initially */
}

.library-grid:hover {
    overflow-y: auto; /* Enables scrolling when the mouse is over the grid */
}

        @media (max-width: 768px) {

            .library-container {
                flex-direction: column;
            }
            .library-filters {
                width: 100%;
                padding-right: 0;
                margin-bottom: 20px;
            }
              /* IMPORTANT: Also reset the wrapper for mobile */
              .filter-content-wrapper {
                 max-height: none;
                 overflow-y: visible;
                 padding-right: 0;
            }
            .modal-content-body {
                flex-direction: column;
            }
            .modal-image-area {
                height: 300px; /* Constrain image height on mobile */
            }
        }

        @media (max-width: 768px) {
    .library-container {
        flex-direction: column;
    }

    h1{margin-left:50px!important;}

    .library-filters {
       padding-top:3rem;
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;

        /* Mobile Override: Overwrite sticky/scrollable for mobile */
        position: static; /* Remove sticky behavior */
        max-height: none; /* Remove fixed height */
        overflow-y: visible; /* Ensure content is visible and scrollbar is handled by the page */
    }

    /* IMPORTANT: Also reset the wrapper for mobile */
    .filter-content-wrapper {
         max-height: none;
         overflow-y: visible;
         /* The hover effect is naturally disabled since 'overflow-y' is set to 'visible'
            and there is no fixed height to cause overflow. */
    }

    /* ... rest of your mobile styles ... */
    .modal-content-body {
        flex-direction: column;
    }
    .modal-image-area {
        height: 300px;
    }



}


.modal-image-area {
    /* Default for single image - takes full width */
    display: block;
}

.modal-image-area img {
    /* Base image styling */
    width: 100%;
    height: auto;
}








/* --- 1. GLOBAL SETTINGS (Assuming you have a full-height layout) --- */
/* You may need this for proper height calculation if not already set */
.library-container {
    display: flex; /* Assuming your parent container uses flex to place the filters next to the grid */
    gap: 20px;
}

/* --- 2. LEFT SIDEBAR SCROLL (filter-content-wrapper) --- */

/* Desktop: Make the container sticky and define its viewport height */
.library-filters {
    width: 250px;
    padding-right: 2rem;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px); /* Total viewport height minus top/bottom padding */
}

/* Desktop: Scrollable content wrapper */
.filter-content-wrapper {
    max-height: 100%; /* Take 100% of the parent's fixed height */
    overflow-y: hidden; /* Hide the scrollbar by default */
}

/* Desktop: Show the scrollbar ONLY when the mouse is over the content wrapper */
.filter-content-wrapper:hover {
    overflow-y: auto;
}

/* --- 3. MAIN GRID SCROLL (library-grid) --- */

.library-grid {
    /* Existing display/grid settings */
    flex-grow: 1; /* Allows the grid to take up the remaining width */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;

    /* Desktop: Set a fixed height for the main content to enable internal scrolling. */
    /* This calculation (100vh - 200px) is an estimate; adjust 200px based on the height
       of your header, search bar, and any margins above the grid. */
    max-height: calc(100vh - 200px);
    overflow-y: hidden; /* Hide the scrollbar by default */
}

/* Desktop: Show the scrollbar ONLY when the mouse is over the grid */
.library-grid:hover {
    overflow-y: auto;
}

/* --- 4. MOBILE OVERRIDES (Screens smaller than 768px) --- */
@media (max-width: 768px) {
    .library-container {
        flex-direction: column;
    }

    /* Reset sidebar styles for mobile */
    .library-filters {
        position: static;
        max-height: none;
        overflow-y: visible; /* Ensure content is visible and scrollbar is handled by the page */
    }

    .filter-content-wrapper {
         max-height: none;
         overflow-y: visible;
    }

    /* Reset main grid styles for mobile */
    .library-grid {
        max-height: none; /* Crucial: Remove the fixed height */
        overflow-y: visible; /* Crucial: Let the page scroll normally */
    }
}

/* --- 1. SET VERTICAL CONTEXT ON THE PARENT --- */

/* You must set a fixed height on the parent of the sidebar and grid to define the scrolling area.
   Assuming your header/search bar takes up around 160px of vertical space.
   Adjust 160px if your header is a different height. */
.library-container {
    display: flex;
    gap: 20px;
    /* Use 'height' instead of 'max-height' for stability when children use height: 100% */
    height: calc(100vh - 160px);
}

/* --- 2. LEFT SIDEBAR SCROLL (library-filters & filter-content-wrapper) --- */

.library-filters {
    flex-shrink: 0; /* Prevents the sidebar from shrinking */
    width: 250px;
}

.filter-content-wrapper {
    height: 100%; /* Now safely takes 100% of the parent .library-filters height */
    overflow-y: hidden;
}

.filter-content-wrapper:hover {
    overflow-y: auto;
}

/* --- 3. MAIN GRID SCROLL (library-grid) --- */

.library-grid {
    flex-grow: 1; /* Allows the grid to take up the remaining width */

    /* FIX: Use 'height: 100%' to fill the fixed-height .library-container */
    height: 100%;

    /* Add this line, which is crucial for flex items that have a defined height
       and also contain overflowing content. */
    min-height: 0;

    /* Now, enable the scroll-on-hover effect */
    overflow-y: hidden; /* Hide by default */

    /* Existing Grid/Tailwind styles */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.library-grid:hover {
    overflow-y: auto; /* Enables scrolling on hover */
}

/* --- 4. MOBILE OVERRIDES (RESET) --- */
@media (max-width: 768px) {
    /* Reset the fixed height on the parent container for mobile */
    .library-container {
        height: auto;
        flex-direction: column;
    }

    /* Reset main grid styles for mobile to allow standard page scrolling */
    .library-grid {
        height: auto;
        min-height: auto;
        overflow-y: visible;
    }

    /* Reset sidebar styles for mobile */
    .filter-content-wrapper {
         height: auto;
         overflow-y: visible;
    }
}

/* --- LEFT SIDEBAR SCROLL FIX --- */
.filter-content-wrapper {
    height: 100%;

    /* FIX 1: Always reserve space for the scrollbar (no content shift) */
    overflow-y: scroll;

    /* FIX 2: Hide the scrollbar by default using Webkit styles (Chrome, Safari) */
    scrollbar-width: none; /* Firefox */
}

/* Webkit-specific fix for scrollbar invisibility */
.filter-content-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Show the scrollbar ONLY on hover using opacity/color/width */
.filter-content-wrapper:hover::-webkit-scrollbar {
    width: 8px; /* Set the desired scrollbar width */
}

/* Use a transition for a smoother fade-in on hover */
.filter-content-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.7);
    border-radius: 4px;
}
/* --- 1. VERTICAL CONTEXT (Parent container of both filter and grid) --- */
/* (Assuming this is already working and defining the height of the scroll area) */
.library-container {
    display: flex;
    height: calc(100vh - 160px); /* Adjust 160px if needed */
    align-items: stretch;
}

.library-container {
    display: flex;

    margin: 0 auto;
    padding: 0 2rem 2rem 2rem;
    align-items: stretch;

    /* 💥 NEW FIX: Increased subtraction value (e.g., 210px)
       to account for Header (approx. 160px) + Toggle/Margin (approx. 50px).
       Adjust 210px until the content fits perfectly. */
  /* height: calc(100vh - 210px); */
}
/* --- 2. MAIN GRID SCROLL (library-grid / #process-panels-container) --- */
.library-grid {
    flex-grow: 1;

    /* Required for fixed-height flex/grid scrollable content: */
    height: 100%;
    min-height: 0;

    /* FIX: Always reserve space for the scrollbar to prevent content shift */
    overflow-y: scroll;

    /* Hide the scrollbar in Firefox */
    scrollbar-width: none;

    /* Existing display: grid rules... */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;

}

/* FIX A: Target the scrollbar by ID for high specificity (Chrome, Safari, Edge) */
#process-panels-container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* FIX B: Show the scrollbar ONLY on hover using the ID selector */
#process-panels-container:hover::-webkit-scrollbar {
    width: 8px; /* The desired scrollbar width */
}

/* Scrollbar thumb style on hover */
#process-panels-container:hover::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.7);
    border-radius: 4px;
}

/* Ensure this fix for card collapse remains */
.visual-card {
    overflow: initial !important;
}
/* --- MAIN GRID SCROLL (library-grid / #process-panels-container) --- */
.library-grid {
    flex-grow: 1;
    height: 100%;
    min-height: 0;
    overflow-y: scroll;
    scrollbar-width: none;

    /* Existing Grid/Tailwind styles */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;

    /* 💥 NEW FIX: Prevent cards from stretching in height 💥 */
    grid-auto-rows: min-content;
}
/* ... rest of your CSS for scrollbar fixing ... */


/* --- TAG VISIBILITY CONTROLS (DEFAULT STATE IS HIDDEN) --- */
.card-tag {
    display: none;
    /* Optional: Add a transition for smooth fading if needed */
    /* transition: opacity 0.2s ease-in-out; */
}

/* OVERRIDE: Show tags when the main container (.library-container) has the 'tags-visible' class */
.library-container.tags-visible .card-tag {
    display: inline-block;
}

/* --- TOGGLE SWITCH STYLING --- */

/* Style for the checked state (when the switch is ON) */
#tag-toggle:checked ~ .block {
    /* Tailwind blue-600 */
    background-color: #2563eb;
}

/* Move the dot when the switch is ON */
#tag-toggle:checked ~ .dot {
    transform: translateX(100%);
}

/* --- VISUAL CARD STYLES --- */

/* DEFAULT STATE: No box-shadow (White background mode) */
.visual-card {
    /* Ensure the card has no shadow by default */
    box-shadow: none;
    transition: box-shadow 0.3s ease; /* Smooth visual transition */
}

/* GRADIENT MODE: Styles applied when body has .gradient-mode class */
body.gradient-mode {
    /* Apply the green gradient to the body */
    background: white!important;
    color: #333333; /* Ensure text remains dark and readable */
}

body.gradient-mode .visual-card {
    /* Add a subtle box-shadow when in gradient mode */
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

/* --- TOGGLE SWITCH STYLING FOR BACKGROUND TOGGLE --- */

/* Style for the checked state (when the switch is ON) */
#bg-toggle:checked ~ .block {
    /* Tailwind green color for the track */
    background-color: #D7D7D7;
}

/* Move the dot when the switch is ON */
#bg-toggle:checked ~ .dot {
    transform: translateX(100%);
}

.text-gray-900{color:inherit}
/* --- NEW MOBILE MENU STYLES (Always Hidden on Desktop) --- */
@media (max-width: 768px) {
#mobile-filter-menu {
    /* Full screen overlay, fixed position */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40; /* Lower than the hamburger toggle, higher than page content */

    /* Default closed state */
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;

    /* Background for the menu content */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent backdrop */
}

/* Menu open state */
#mobile-filter-menu.is-open {
    transform: translateX(0);
}

/* Style the actual menu content panel */
#mobile-filter-menu .library-filters {
    /* Use white background for the menu panel itself */
    background-color: white;
    width: 280px; /* Fixed width for the sliding panel */
    height: 100%;
    padding: 2rem 1rem;
    overflow-y: auto; /* Allows menu to scroll if filters are long */

    /* Overwrite any desktop sticky properties */
    position: static;
    max-height: none;
}
}

/* --- MOBILE OVERRIDES (For screens smaller than 768px) --- */
@media (max-width: 768px) {
    .library-container {
        flex-direction: column;
    }



    /* Keep the desktop filter container hidden on mobile by default */
    #mobile-filter-menu {
        display: block; /* Make the fixed overlay visible on mobile */
    }

    /* Reset main grid styles for mobile to allow standard page scrolling */
    .library-grid {
        max-height: none;
        height: auto;
        overflow-y: visible;
        min-height: auto;
    }

    /* Also ensure the hamburger is visible */
    #mobile-menu-toggle {
        display: block;
    }

    /* Ensure the content starts below the hamburger button */
    .library-container {
        padding-top: 0rem; /* Push content down past the fixed hamburger icon */
    }
}

/* Ensure the desktop view hides the mobile parts */
@media (min-width: 769px) {

    #mobile-menu-toggle {
        display: none !important;
    }
    #mobile-filter-menu {
        /* On desktop, we want the regular .library-filters to be used */
        display: block !important;
        position: static !important;
        transform: none !important;
    }
}
/* --- DESKTOP RESTORATION (min-width: 769px) --- */
@media (min-width: 769px) {

    /* 1. RESTORE SIDEBAR VISIBILITY AND HEIGHT */
    /* This overrides the 'display: none' set in the max-width block for mobile */
    .library-filters {
        display: block !important;

        /* Ensure the sidebar fills the height of the fixed .library-container */
        height: 100% !important;

        /* Restore the width and padding set outside the media query */
        width: 250px;
        padding-right: 2rem;
    }

    /* 2. Hide the mobile-only items on desktop */
    #mobile-menu-toggle {
        display: none !important;
    }

    /* 3. Ensure the mobile menu wrapper is treated as a regular block container */
    #mobile-filter-menu {
        display: block !important;
        position: static !important;
        transform: none !important;
        background-color: transparent !important; /* Remove backdrop color */
    }
}
/* --- AI CARD ANIMATION STYLES --- */
#ai-alternatives-grid .ai-card-item {
    /* Ensures the opacity transition is smooth */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-out;
    /* Optional: Small lift effect on hover */
    cursor: pointer;
}
#ai-alternatives-grid .ai-card-item:hover {
    transform: translateY(-2px);
}
/* ADDED: List View Styling */
.list-view-layout .visual-card {
    /* Ensure list view forces a full-width container on the grid */
    @apply w-full;

}
.list-style .visual-card{   max-width:1000px}

.list-style .visual-card .card-inner {
    /* Reshape the card for list mode */
    display: flex;
    flex-direction: row; /* Horizontal layout */
    /*align-items: center;  Vertically align content */
    padding: 1rem;
    height: auto; /* Allow height to adjust */
}


.list-style .visual-card .card-visual {
    /* Make the thumbnail smaller and place it on the left */
    max-width: 320px;
    width:100%;
    height: auto;
    flex-shrink: 0;
    margin-right: 1rem;
    overflow: hidden;
    border-radius: 0.5rem;
}

.list-style .visual-card .card-visual img {
    /* Ensure the image fills its new smaller container */
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.list-style .visual-card .content-area {
    /* Allow the text content to take up the remaining space */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.list-style .visual-card .tag-and-view-details {
    /* Stack tags and details horizontally at the bottom */
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb; /* Light separator */
}
@media (max-width: 768px) {
    /* CRUCIAL FIX: Override the global body{overflow:hidden} to allow scrolling on mobile */
    body {
        overflow-y: visible !important;
        overflow: visible !important;
        height: auto !important; /* Ensures the body adjusts to content height */
    }

    /* ... rest of your mobile styles ... */
    .library-container {
        flex-direction: column;
    }

    /* Existing fix to reset fixed height on the main content container */
    .library-grid {
        max-height: none;
        height: auto;
        overflow-y: visible;
        min-height: auto;
    }
}
@media (max-width: 768px) {
    /* 1. Target the main modal container that holds the image */
    .your-modal-dialog-class {
        /* Fixes the element relative to the viewport, not the page content */
        position: fixed;

        /* Positions it at the very top of the screen */
        top: 0;

        /* Positions it at the very left of the screen */
        left: 0;

        /* Forces it to take up the full width and height of the viewport */
        width: 100%;
        height: 100vh; /* Viewport height */

        /* Ensure it's above other page content */
        z-index: 1000;

        /* Optional: Ensures the modal content itself can scroll if it's too long */
        overflow-y: auto;

        /* Optional: Hide scrollbar in the main body when modal is open */
        body.modal-open {
            overflow: hidden;
        }
    }

    /* 2. Target the modal's backdrop (the dimmed background) */
    .modal-backdrop {

        left: 0;
    }

    #mycontent{padding-left:48px}
    #toggle-generate-button SPAN {display:none}
}
@media (max-width: 768px) {

    #panel-ai-container{
        display:none
    }

    :root {
  --light-gradient: linear-gradient(to right, #90b3b0, #228a8a)

  /* Define other color variables here */
}


    header .header-controls{display:none}
    /* Ensure the modal is styled as 'fixed' and full-screen right away */
    .modal-backdrop {
         width: 100%;
         max-width:100%;
        height: 100vh;
        z-index: 1000;
        /* Other styling... */
    }

    /* Target the body when the modal is open (assuming you use a class like 'modal-open') */
    body.modal-open {
        /* Prevents the background content from scrolling/flickering */
        overflow: hidden;
        /* Ensures any content fixed to the viewport doesn't jump */
        position: fixed;
        width: 100%;
    }
}
/* =================================================== */
/* NEW: Styles for the AI Model Generation Panel (Section 1/3) */
/* =================================================== */
#ai-generate-panel {
    display: none; /* Hidden by default */
    margin: 0 auto 2rem auto;
    padding: 2rem;
    max-width: 1000px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #333; /* Dark mode border */
    transition: all 0.3s ease;
}
.dark-mode #ai-generate-panel {
    background-color: #242424;
}
.light-mode #ai-generate-panel {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.panel-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
#ai-generate-panel label {
    font-weight: 600;
}
#ai-generate-panel input[type="text"],
#ai-generate-panel textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    border: 1px solid #555;
    background-color: #333;
    color: #E0E0E0;
    transition: border-color 0.2s;
}
.light-mode #ai-generate-panel input[type="text"],
.light-mode #ai-generate-panel textarea {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
}
#ai-upload-box {
    border: 2px dashed #555;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.light-mode #ai-upload-box {
    border: 2px dashed #bbb;
    background-color: #fff;
}
#ai-upload-box:hover {
    border-color: #3b82f6; /* Tailwind blue on hover */
}
.ai-format-link {
    font-size: 0.9rem;
    color: #3b82f6; /* Tailwind Blue-500 */
    text-decoration: none;
    transition: color 0.2s;
}
.ai-format-link:hover {
    text-decoration: underline;
    color: #2563eb;
}
.ai-generate-button {
    background-color: #10b981; /* Tailwind Green-500 */
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
}
.ai-generate-button:hover {
    background-color: #059669; /* Darker Green */
}
#toggle-generate-button {
    background-color: #f59e0b; /* Tailwind Orange */
    color: white;
    padding: 0.5rem 1rem;

    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    border: none;
    margin-left: 15px; /* Spacing from search */
    display: inline-block;
}
#toggle-generate-button:hover {
    opacity: 0.8;
}

@media(max-width:500px){
    .projectlogo{position:relative!important;margin-bottom:20px}
}
.card-visual-two-images {
    /* 1. Enable Grid */
    display: grid;

    /* 2. Define two columns of equal width */
    grid-template-columns: 1fr 1fr;

    /* 3. Add a gap between the two images */
    gap: 10px;
}
.card-visual img {
    /* Ensure images scale within their grid cell */
    width: 100%;
    height: auto;
}
.card-visual.flex-visual {
    display: flex;       /* Enable Flexbox */
    gap: 5px;            /* Small gap between images */
    align-items: center; /* Vertically align if image heights differ */
    justify-content: space-between;
}

.card-visual.flex-visual img {
    /* Each image takes up nearly 50% of the container width */
    width: 50%;
    max-width: 50%;
    flex-grow: 1;
    height: auto;
}

/* Container to hold both image columns side-by-side */
.modal-image-area {
    display: block; /* Default: Single column */
}

.modal-image-area.two-images-container {
    display: flex;
    gap: 10px;
    align-items: flex-start; /* Align images/labels at the top */
}

/* Each column takes half the space */
.modal-image-area .modal-image-col {
    width: 100%; /* Default: Full width */
}

.modal-image-area.two-images-container .modal-image-col {
    width: calc(50% - 5px)!important;
}

/* Ensure images fill their column width */
.modal-image-area img {
    width: 100%;
    height: auto;
}

/* Style for the labels */
.image-label {
    margin-top: 5px;
    font-size: 0.85rem;
    color: #666; /* Adjust color as needed */
    font-weight: bold;
}