:root {
    --pulse-color: #bcbaba;
    --pulse-color-rgb: 204,204,204;
    --bg-color: #f7f7f7;
    --container-bg-color: #f0f0f0e0;
    --text-color: #111;
    --border-color: #e1e1e1;
    --hover-bg-color: #e8e8e8;
    --link-color: #555;
    --favorite-active-color: #111;
    --favorite-inactive-color: #bbb;
    --subtle-text-color: #777;
    --shadow-color: #00000014;
    --text-shadow: none;
    --overlay-bg: #000c;
    --highlight-color: #e0e0e0;
    --container-bg-color-rgb: 255,255,255
}

body.dark-mode {
    --bg-color: #5a5a5a;
    --container-bg-color: #5c5c5c;
    --text-color: #f0f0f0;
    --border-color: #4a4a4a;
    --hover-bg-color: #6a6a6a;
    --link-color: #ccc;
    --search-input-bg: #6c6c6c;
    --list-bg-color: #505050;
    --header-bg-color: #484848;
    --container-bg-color-rgb: 92,92,92;
    --favorite-active-color: #f0f0f0;
    --favorite-inactive-color: #9e9e9e;
    --subtle-text-color: #b0b0b0;
    --shadow-color: #0006;
    --text-shadow: 0 1px 3px var(--shadow-color);
    --overlay-bg: #000c;
    --highlight-color: #707070;
    --pulse-color: #8cf;
    --pulse-color-rgb: 136,204,255
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: var(--text-shadow);
    margin: 0;
    padding: 1rem;
    font-family: Roboto Slab,serif;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-title {
    text-align: left;
    max-width: 800px;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.171rem;
    font-size: 2.5rem;
    font-weight: 500
}

.toolbox-container {
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    max-width: 800px;
    box-shadow: 0 4px 12px var(--shadow-color);
    border-radius: 8px;
    margin: 0 auto;
    padding: 1rem;
    position: relative;
    min-height: 400px;
}

header {
    margin-bottom: .66rem;
    position: relative
}

.options-link-container {
    text-align: left;
    margin-top: .1rem;
    margin-bottom: 2.16rem;
    padding-left: 1rem
}

#optionsLink {
    color: var(--subtle-text-color);
    cursor: pointer;
    font-family: Inter,sans-serif;
    font-size: .9rem
}

#optionsLink:hover {
    text-decoration: underline
}

.search-input {
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    width: 100%;
    color: var(--text-color);
    border-radius: 6px;
    padding: .75rem 1rem;
    font-family: Inter,sans-serif;
    font-size: 1rem;
    transition: border-color .2s,box-shadow .2s
}

body.dark-mode .search-input {
    background-color: var(--search-input-bg)
}

.search-input::placeholder {
    color: var(--subtle-text-color)
}

.search-input:focus {
    border-color: var(--link-color);
    outline: none
}

#searchResultsContainer {
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    z-index: 10;
    border-top: none;
    border-radius: 0 0 6px 6px;
    width: 100%;
    max-height: 300px;
    position: absolute;
    overflow: hidden auto;
    display: none;
}
#searchResultsContainer.visible { display: block; }

.search-result-item {
    cursor: pointer;
    padding: .75rem 1rem;
    font-family: Inter,sans-serif;
    transition: background-color .2s,color .2s,text-decoration .2s;
    border-bottom: 1px solid var(--border-color);
}

.search-result-item:hover,.search-result-item.active {
    background-color: var(--hover-bg-color);
    box-shadow: 0 2px 8px rgba(var(--container-bg-color-rgb),.2);
    transform: translateY(-1px)
}

.search-result-item a {
    text-decoration: none;
    color: var(--text-color);
    display: block;
    width: 100%;
}

.accordion-category {
    border-bottom: 1px solid var(--border-color);
    position: relative
}

/* Match the live site spacing/borders exactly */
#toolboxMain>.accordion-category:first-of-type {
    border-top: 1px solid var(--border-color);
    margin-top: 0;
}

#toolboxMain>.accordion-category {
    margin-top: 0; /* Reset margins to match standard accordion list */
}
/* Ensure dynamic content gets spacing if needed, but standard accordions usually stack flush */

.accordion-header {
    cursor: pointer;
    user-select: none;
    background-color: #0000;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    transition: background-color .2s;
    display: flex
}

body.dark-mode .accordion-header {
    background-color: var(--header-bg-color)
}

.accordion-header:hover {
    background-color: var(--hover-bg-color)
}

.accordion-header h2,.accordion-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 500
}

.accordion-header h3 {
    color: var(--subtle-text-color);
    padding-left: 1.5rem;
    font-size: .966rem;
    font-weight: 400
}

body.dark-mode .accordion-header h3 {
    color: var(--text-color)
}

.accordion-arrow {
    padding-left: .2em;
    font-family: Roboto Mono,monospace;
    font-size: .902rem;
    font-weight: 700;
    transition: transform .3s
}

.accordion-category.open>.accordion-header>.accordion-arrow {
    transform: rotate(90deg)
}

.accordion-content {
    padding: .5rem 1rem 1.58em;
    display: none
}

.accordion-category.open>.accordion-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

.accordion-content>.accordion-category {
    border-top: 1px dashed var(--border-color);
    border-bottom: none;
    margin: .5rem 0
}

.accordion-content>.accordion-category:first-of-type {
    margin-top: 0
}

#favoritesCategory {
    padding-bottom: .5rem
}

.tool-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.tool-item {
    border-radius: 4px;
    align-items: center;
    padding: .5rem .25rem;
    display: flex
}

@keyframes glow-effect {
    0% { background-color: #0000 }
    50% { background-color: var(--highlight-color) }
    to { background-color: #0000 }
}

.tool-item.highlight {
    animation: 2s ease-out glow-effect
}

.tool-item:hover {
    background-color: var(--hover-bg-color);
    transition: background-color .2s
}

.tool-link {
    color: var(--link-color);
    cursor: pointer;
    flex-grow: 1;
    font-weight: 400;
    text-decoration: none
}

.tool-link:hover {
    text-decoration: underline
}

.tool-link.no-url {
    color: var(--subtle-text-color);
    cursor: default
}

.tool-link.no-url:hover {
    text-decoration: none
}

.favorite-toggle {
    cursor: pointer;
    color: var(--favorite-inactive-color);
    background: 0 0;
    border: none;
    border-radius: 4px;
    margin-left: 1rem;
    padding: .25rem .5rem;
    font-family: Roboto Mono,monospace;
    font-size: 1.5rem;
    line-height: 1;
    transition: color .2s,transform .2s
}

.favorite-toggle:hover {
    color: var(--favorite-active-color);
    background-color: var(--hover-bg-color);
    transform: scale(1.1)
}

.favorite-toggle.is-favorite {
    color: var(--favorite-active-color)
}

.hidden {
    display: none!important
}

.custom-tool-adder {
    border-top: 1px dashed var(--border-color);
    margin-top: 1rem;
    padding-top: 1rem
}

#addCustomToolBtn {
    border: 1px solid var(--border-color);
    color: var(--subtle-text-color);
    cursor: pointer;
    background: 0 0;
    border-radius: 6px;
    padding: .5rem 1rem;
    font-family: Inter,sans-serif
}

#customToolForm {
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    display: flex
}

#customToolForm input {
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 4px;
    padding: .5rem
}

#customToolForm button {
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    border-radius: 4px;
    padding: .5rem
}

#optionsPage, #contactPage, #changelogPage {
    background-color: var(--overlay-bg);
    z-index: 501;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding-top: 5rem;
    display: flex;
    position: fixed;
    top: 0;
    left: 0
}

.options-content,.contact-content {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 24px var(--shadow-color);
    border-radius: 8px;
    padding: 2rem;
    position: relative
}

#closeOptions,#closeContact, #closeChangelog, .close-modal {
    color: var(--text-color);
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: .25rem .75rem;
    font-size: 1.5rem;
    font-weight: 700;
    position: absolute;
    top: 1rem;
    right: 1rem
}

.options-content h2,.contact-content h2 {
    border-bottom: 1px solid var(--border-color);
    margin-top: 0;
    padding-bottom: .5rem
}

.option-item {
    align-items: center;
    font-size: 1.1rem;
    display: flex
}

.option-item label {
    margin-left: .5rem
}

footer {
    text-align: center;
    padding: 2rem 1rem;
    font-family: Inter,sans-serif;
    font-size: .9rem
}

#suggestToolLink,#contactLink {
    color: var(--subtle-text-color);
    cursor: pointer;
    text-decoration: none;
    transition: color .2s
}

#suggestToolLink:hover,#contactLink:hover {
    color: var(--text-color);
    text-decoration: underline
}

.footer-separator {
    color: var(--border-color);
    margin: 0 .75rem
}

#contactForm {
    flex-direction: column;
    gap: .75rem;
    display: flex
}

#contactForm label {
    flex-direction: column;
    gap: .25rem;
    font-family: Inter,sans-serif;
    font-size: .9rem;
    display: flex
}

#contactForm input,#contactForm textarea {
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 4px;
    padding: .5rem;
    font-family: Inter,sans-serif;
    font-size: 1rem
}

#contactForm textarea {
    resize: vertical;
    min-height: 100px
}

#contactForm button {
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    border-radius: 4px;
    padding: .75rem;
    font-size: 1rem
}

#messageBox {
    background-color: var(--header-bg-color);
    color: #fff;
    z-index: 300;
    box-shadow: 0 4px 12px var(--shadow-color);
    opacity: 0;
    pointer-events: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    transition: opacity .2s,bottom .2s;
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%)
}

body.dark-mode #messageBox {
    background-color: var(--container-bg-color);
    color: var(--text-color)
}

#messageBox.show {
    opacity: 1;
    bottom: 30px
}

#fadeOverlay {
    background: linear-gradient(to bottom,rgba(var(--container-bg-color-rgb),0)0%,rgba(var(--container-bg-color-rgb),.5)30%,rgba(var(--container-bg-color-rgb),.8)70%,var(--container-bg-color)100%);
    z-index: 50;
    pointer-events: auto;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 35vh;
    padding-bottom: 2rem;
    transition: opacity 1ms ease-out,transform 1ms ease-out;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(0)
}

#fadeOverlay.hidden-overlay {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%)
}

#showAllToolsBtn {
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    box-shadow: 0 1px 4px var(--shadow-color);
    border-radius: 8px;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    font-size: .95rem;
    transition: background-color 10ms,transform 10ms,box-shadow 10ms;
    display: flex
}

#showAllToolsBtn:hover {
    background-color: var(--highlight-color);
    box-shadow: 0 3px 10px var(--shadow-color);
    transform: translateY(-2px)
}

.arrow-down {
    font-size: .9rem;
    line-height: 1
}

@keyframes search-pulse {
    0% {
        border-color: var(--border-color);
        box-shadow: 0 0 0 0px rgba(var(--pulse-color-rgb),0)
    }

    50% {
        border-color: var(--pulse-color);
        box-shadow: 0 0 0 5px rgba(var(--pulse-color-rgb),.3)
    }

    to {
        border-color: var(--border-color);
        box-shadow: 0 0 0 0px rgba(var(--pulse-color-rgb),0)
    }
}

.search-input.pulse-animation {
    animation: 2s ease-out infinite search-pulse
}

.search-result-item.search-google-link {
    color: var(--link-color);
    cursor: pointer;
    margin-top: 5px;
    padding-bottom: 2px;
    font-family: Inter,sans-serif;
    font-size: .95rem;
    text-decoration: none
}

.search-result-item.search-google-link:hover {
    background-color: var(--hover-bg-color);
    text-decoration: underline
}

.search-result-item.search-perplexity-link {
    color: var(--link-color);
    cursor: pointer;
    margin-top: 5px;
    padding-bottom: 2px;
    font-family: Inter,sans-serif;
    font-size: .95rem;
    text-decoration: none
}

.search-result-item.search-perplexity-link:hover {
    text-decoration: underline
}

#searchResultsContainer .search-result-item:last-child {
    padding-bottom: .85rem
}

@media (width<=768px) {
    #searchResultsContainer {
        flex-direction: column;
        align-items: stretch;
        display: flex
    }

    .search-result-item {
        text-align: center;
        box-shadow: none;
        padding: .5rem .75rem;
        transition: background-color .2s,transform .2s,box-shadow .2s;
        transform: none
    }

    .search-result-item:hover {
        box-shadow: none;
        background-color: var(--hover-bg-color);
        transform: none
    }

    .tool-link {
        word-break: break-word
    }

    .search-input {
        padding: .6rem .8rem;
        font-size: .9rem
    }

    .page-title {
        padding-left: .5rem;
        font-size: 2rem
    }

    .toolbox-container {
        padding: .5rem
    }
}

.search-result-item.pulsing {
    animation: 1s ease-out forwards subtle-pulse
}

@keyframes subtle-pulse {
    0% {
        opacity: 1;
        box-shadow: none;
        transform: scale(1)
    }

    20% {
        opacity: .95;
        box-shadow: none;
        transform: scale(1)
    }

    40% {
        opacity: .95;
        box-shadow: none;
        transform: scale(1)
    }

    80% {
        opacity: 1;
        box-shadow: none;
        transform: scale(1)
    }

    to {
        opacity: 1;
        box-shadow: none;
        transform: scale(1)
    }
}

.search-result-item .pulse-text {
    transition: transform .5s,opacity .5s;
    display: inline-block
}

.search-result-item .pulse-text.pulsing {
    transform-origin: 50%;
    animation: 1.5s ease-out forwards subtle-pulse
}

#changelogPage {
    background-color: var(--overlay-bg);
    z-index: 100;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding-top: 5rem;
    display: flex;
    position: fixed;
    top: 0;
    left: 0
}

#closeChangelog {
    color: var(--text-color);
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: .25rem .75rem;
    font-size: 1.5rem;
    font-weight: 700;
    position: absolute;
    top: 1rem;
    right: 1rem
}

.changelog-content-area h3 {
    color: var(--link-color);
    margin-top: 1rem;
    margin-bottom: .5rem;
    font-size: 1.1rem
}

.changelog-content-area p {
    color: var(--text-color);
    margin-bottom: 1rem;
    line-height: 1.5
}
#loadingMsg { text-align: center; padding: 2rem; color: var(--subtle-text-color); font-family: Inter, sans-serif; }
#errorMsg { display: none; }

/* --- ACCORDION HIERARCHY STYLES --- */

/* "Proud" Category: For lists that contain nested lists (like General Health) */
.accordion-category.proud-category > .accordion-header {
    padding: 1.35rem 1rem; /* More padding = more prominent */
}

.accordion-category.proud-category > .accordion-header h2 {
    font-size: 1.25rem; /* Larger title */
    font-weight: 500;
}

/* "Standard" Category: For lists that just contain direct tools (like IDEs) */
.accordion-category.standard-category > .accordion-header {
    padding: 1rem 1rem; /* Standard/Compact padding */
}

.accordion-category.standard-category > .accordion-header h2 {
    font-size: 1.1rem; /* Standard title */
    font-weight: 500;
}

/* Explicitly target nested accordion headers to keep them standard/compact */
.accordion-content .accordion-category .accordion-header {
    padding: 0.8rem 1rem;
}

.accordion-content .accordion-category .accordion-header h3 {
    font-size: 1rem;
    font-weight: 400;
}
/* --- UPDATED ACCORDION STYLES --- */
        
        /* 1. Base style for ALL top-level headers (Default "Proud" look) */
        #toolboxMain > .accordion-category > .accordion-header {
            padding: 1.35rem 1rem; 
        }
        
        #toolboxMain > .accordion-category > .accordion-header h2 {
            font-size: 1.25rem; 
            font-weight: 500;
        }

        /* 2. SPECIFIC OVERRIDE for "Simple List" categories starting from "IDEs & Code Editors" */
        .accordion-category.simple-category > .accordion-header {
            padding: 1rem 1rem; /* Standard/Smaller padding */
        }

        .accordion-category.simple-category > .accordion-header h2 {
            font-size: 1.1rem; /* Slightly smaller font */
            font-weight: 500;
        }

        /* 3. Explicit style for nested headers (the actual sub-categories inside "Proud" ones) */
        .accordion-content .accordion-category .accordion-header {
            padding: 0.8rem 1rem; 
        }

        .accordion-content .accordion-category .accordion-header h3 {
            font-size: 1rem; 
            font-weight: 400; 
        }

        /* --- SCROLLBAR STYLING FOR SEARCH DROPDOWN --- */
        #searchResultsContainer::-webkit-scrollbar {
            width: 8px; /* Slightly thinner */
        }

        #searchResultsContainer::-webkit-scrollbar-track {
            background: transparent; /* Clean track */
        }

        #searchResultsContainer::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2); /* Subtle grey thumb */
            border-radius: 4px; /* Rounded corners */
            border: 2px solid transparent; /* Creates padding effect */
            background-clip: content-box;
        }

        #searchResultsContainer::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.4); /* Darker on hover */
        }

        /* Dark mode scrollbar */
        body.dark-mode #searchResultsContainer::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
        }

        body.dark-mode #searchResultsContainer::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        /* --- UPDATED ACCORDION STYLES --- */
        
        /* 1. Base style for ALL top-level headers (Default "Proud" look) */
        #toolboxMain > .accordion-category > .accordion-header {
            padding: 1.35rem 1rem; 
        }
        
        #toolboxMain > .accordion-category > .accordion-header h2 {
            font-size: 1.25rem; 
            font-weight: 500;
        }

        /* 2. SPECIFIC OVERRIDE for "Simple List" categories starting from "IDEs & Code Editors" */
        .accordion-category.simple-category > .accordion-header {
            padding: 1rem 1rem; /* Standard/Smaller padding */
        }

        .accordion-category.simple-category > .accordion-header h2 {
            font-size: 1.1rem; /* Slightly smaller font */
            font-weight: 500;
        }

        /* 3. Explicit style for nested headers (the actual sub-categories inside "Proud" ones) */
        .accordion-content .accordion-category .accordion-header {
            padding: 0.8rem 1rem; 
        }

        .accordion-content .accordion-category .accordion-header h3 {
            font-size: 1rem; 
            font-weight: 400; 
        }

        /* --- SCROLLBAR STYLING FOR SEARCH DROPDOWN --- */
        #searchResultsContainer::-webkit-scrollbar {
            width: 8px; /* Slightly thinner */
        }

        #searchResultsContainer::-webkit-scrollbar-track {
            background: transparent; /* Clean track */
        }

        #searchResultsContainer::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2); /* Subtle grey thumb */
            border-radius: 4px; /* Rounded corners */
            border: 2px solid transparent; /* Creates padding effect */
            background-clip: content-box;
        }

        #searchResultsContainer::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.4); /* Darker on hover */
        }

        /* Dark mode scrollbar */
        body.dark-mode #searchResultsContainer::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
        }

        body.dark-mode #searchResultsContainer::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }