html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #111;
    color: #eee;
    overflow-x: hidden;
    max-width: 100% !important;
    background-color: #000000eb;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0 auto;
    max-width: 62rem;
    padding: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

h1,
h3,
h4 {
    margin: 0;
    padding: 0;
}

h1 {
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgb(94 94 94 / 80%);
}

    h1.home,
    h4.home {
        text-align: center;
    }

h2,
h3 {
    margin-bottom: 0;
    padding-bottom: 0;
}

h3,
h4 {
    margin-bottom: 5px;
}

a {
    color: #008cff;
}

    a:hover {
        text-decoration: none;
    }

    a.btn {
        text-decoration: none;
    }

li p {
    margin: 0;
    margin-left: -20px;
}

p {
    margin-bottom: 5px;
}

.table-wrapper {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .table-wrapper table {
        width: auto !important;
        min-width: 100%;
        border-collapse: collapse;
        white-space: nowrap;
    }

.table td {
    padding: 5px;
}

table tbody tr:nth-child(even) {
    background-color: #262626;
    color: white;
}

.input-width {
    width: 73%;
}

.right {
    text-align: right;
}

.directory-entry-details {
    margin-bottom: 150px;
}

.form-check {
    margin-bottom: 5px;
    margin-top: 5px;
}

:root {
    --sponsor-accent: #ff6600;
}




/* True black outline + inner orange ring (seam-proof) */
.sponsor-card {
    --accent: var(--sponsor-accent);
    --bg: var(--card-bg, #222);
    border-radius: 12px;
    /* outer black border (real outline) */
    border: 2px solid #000;
    /* create space so inner ring can show without covering black outline */
    padding: 2px;
    /* inner orange ring + card fill */
    background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(var(--accent), var(--accent)) border-box;
    /* this border is only for the INNER ring layer */
    background-clip: padding-box, border-box;
    /* inner ring thickness */
    outline: 0; /* just to avoid browser outlines */
    box-shadow: none;
    overflow: clip;
    transition: box-shadow .08s ease-out;
    transform: translateZ(0);
}

/* Optional: slightly thicker black stroke on desktop */
@media (min-width: 900px) {
    .sponsor-card {
        border-width: 3px;
    }
}

/* keep your glow */
.sponsor-card:hover,
.sponsor-card:focus-within {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sponsor-accent) 45%, transparent), 0 4px 11px 4px color-mix(in srgb, var(--sponsor-accent) 15%, transparent), 0 0 19px 8px color-mix(in srgb, var(--sponsor-accent) 12%, transparent);
}


/* Orange ring (seam-proof) + visible black stroke */
section.sponsors .sponsor-card {
    --accent: var(--sponsor-accent, #ff6600);
    --bg: var(--card-bg, #222);
    border-radius: 12px;
    border: 3px solid transparent;
    /* seam-proof orange ring */
    background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(var(--accent), var(--accent)) border-box;
    /* THIS is the black border you will actually see */
    box-shadow: inset 0 0 0 2px #000;
    overflow: clip;
    transition: box-shadow .08s ease-out;
    transform: translateZ(0);
}

    /* Keep the black stroke even on hover/focus */
    section.sponsors .sponsor-card:hover,
    section.sponsors .sponsor-card:focus-within {
        box-shadow: inset 0 0 0 2px #000, 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 11px 4px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 19px 8px color-mix(in srgb, var(--accent) 12%, transparent);
    }



.sponsored-section {
    background-color: #1e1e1e;
    border: 3px solid #ff6600;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgb(195 195 195 / 50%);
}

    .sponsored-section ul.blank_list_item {
        font-size: 18px;
    }

    .sponsored-section a {
        font-weight: bold;
    }

    .sponsored-section p {
        margin: 0;
        padding-bottom: 0;
    }

    .sponsored-section ul {
        list-style: none;
        margin: 2px 0 4px;
        padding-left: 5px;
    }

    .sponsored-section li {
        margin-bottom: 9px;
    }

    .sponsored-section > p:nth-child(1) > b:nth-child(1) {
        font-size: 14px;
        font-style: italic;
        color: #727272;
        margin-left: 2px;
    }

li.sponsored {
    background-color: #1e1e1e;
    border: 2px solid #ff6600;
    padding: 3px;
    margin: 3px 0;
    font-size: 18px;
    border-radius: 10px;
    margin-left: -25px;
}

    li.sponsored p {
        margin-left: 0px;
    }

.category-sponsored-listing {
    font-style: normal;
    font-weight: bold;
    padding-top: 0;
    margin-top: auto;
}

.sub-category-sponsored-listing {
    font-style: normal;
    padding-top: 0;
    margin-top: auto;
}

    .sub-category-sponsored-listing a,
    .category-sponsored-listing a {
        color: #69bbff;
    }

.legend p {
    color: #fff;
    margin-bottom: 3px;
    margin-top: 3px;
    font-size: 14px;
}

p.last_update {
    margin: 0;
    text-align: center;
}

ul.newest_items li ul li p.small-font {
    margin-left: 0 !important;
}

.adspace-full p {
    font-size: 18px;
    color: #ff6600;
    margin: 3px 0;
}

.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
    }

.text-danger,
.alert-danger {
    color: red;
}

.btn {
    background-color: green;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.btn-sm {
    height: 20px !important;
    padding: 10px !important;
}

.btn:hover,
.btn:focus {
    background-color: darkgreen;
    color: white;
    text-decoration: none;
}

.btn:active {
    background-color: #004d00;
    transform: scale(0.98);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}

.breadcrumb-item {
    display: inline-block;
    font-size: 1rem;
}

    .breadcrumb-item + .breadcrumb-item::before {
        content: "\00BB";
        padding-left: 5px;
        padding-right: 0;
    }

    .breadcrumb-item.active {
        color: #6c757d;
    }

    .breadcrumb-item a {
        text-decoration: none;
    }

        .breadcrumb-item a:hover {
            text-decoration: underline;
        }

div#banner {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-weight: bold;
    background-color: #ff6600;
    width: 100%;
    padding: 5px 0;
    font-size: 14px;
    box-sizing: border-box;
}

div#banner-content {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 10px;
}

div#main-content {
    padding-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

#main-content .main {
}

pre.payment-response {
    font-family: Consolas, Menlo, Monaco, monospace;
    white-space: break-spaces;
    font-size: 13px;
    max-height: 200px;
    overflow: auto;
    max-width: min(100%, calc(100vw - 30px));
    word-wrap: anywhere;
    opacity: 0.5;
}

pre.pgp-key {
    white-space: break-spaces;
    font-size: 13px;
    font-family: monospace;
    max-height: 100px;
    overflow: auto;
    max-width: min(100%, calc(100vw - 30px));
    word-wrap: anywhere;
    opacity: 0.5;
}

#donate p {
    font-size: 14px;
}

.top-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
}

    .top-container img {
        width: 333px;
        height: auto;
        max-width: 100%;
    }

.text-block {
    margin-left: 20px;
    flex: 1;
    max-width: 100%;
}

.top-container p {
    text-align: justify;
    font-size: 14px;
}

@media (max-width: 768px) {
    div#banner {
        padding: 8px 5px;
        font-size: 14px;
    }

    div#main-content {
        padding-top: 5px;
    }

    div#banner-content {
        font-size: 14px;
    }

    .top-container {
        flex-direction: column;
    }

    .text-block {
        margin-left: 0;
        padding: 0 10px;
    }

    .top-container img {
        width: 100%;
        max-width: 333px;
    }
}

.hidden {
    display: none;
}

:checked + .hidden {
    display: block;
}

ul#categories_list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    ul#categories_list li label {
        font-size: 20px;
        font-weight: bold;
        padding-right: 15px;
    }

    ul#categories_list li input[type="checkbox"] {
        display: none;
    }

footer {
    margin-top: 30px;
    padding: 10px;
    border-top: 1px solid #ffffff;
}

.small-font {
    font-size: 12px;
    font-family: "Lucida Console", "Lucida Sans", "Lucida Grande", "Geneva", Verdana, sans-serif;
}

#toggleImageCheckbox {
    display: none;
}

#toggleImage {
    display: none;
}

#toggleImageCheckbox:checked ~ #toggleImage {
    display: block;
}

.multi-line-text {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    display: inline;
}

ul.blank_list_item li {
    list-style-type: none;
}

label.expansion_item {
    cursor: pointer;
    padding-right: 5px;
}

a {
    text-decoration: none;
}

    a:hover {
        color: #00aaff;
        text-decoration: underline;
    }

    a:active {
        color: #ff6600;
    }

del {
    text-decoration: line-through;
    text-decoration-color: red;
}

h2,
h3 {
    color: #fff;
    text-shadow: 2px 2px 3px rgb(94 94 94 / 80%);
}

p {
    margin-top: 0;
}

.top-container {
    display: flex;
}

.top-container {
    display: flex;
}

.top-container-left-column {
    flex: 0 0 38.2%;
    text-align: center;
}

.top-container-right-column {
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
    border-radius: 8px;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

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

    .top-container-left-column,
    .top-container-right-column {
        flex: 0 0 auto;
        width: 100%;
        box-sizing: border-box;
    }
}

p.centered-text {
    text-align: center;
    margin-bottom: 0;
    font-size: 14px;
}

a.text-margin {
    margin: 5px;
}

p.text-inline {
    display: inline;
}

span.bold {
    font-weight: bold;
}

ol.breadcrumb {
    padding-left: 0;
}

section.sponsors {
    margin: 1rem auto;
    padding: 0 1rem;
    text-align: center;
}

    section.sponsors > h2.section-title, .sponsor-sections h2.section-title {
        font-size: 1.4rem;
        color: #ff6600;
        margin-bottom: 1rem;
        text-shadow: 1px 1px 3px rgba(94, 94, 94, 0.8);
    }

    section.sponsors ul.blank_list_item {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin: 0 auto 1.5rem;
        padding: 0;
        list-style: none;
    }

        section.sponsors ul.blank_list_item > li {
            flex: 1 1 220px;
            max-width: 220px;
            min-width: 160px;
            background: #1e1e1e;
            border: 2px solid #ff6600;
            border-radius: 8px;
            padding: 1rem;
            box-sizing: border-box;
            text-align: left;
            position: relative;
        }

            section.sponsors ul.blank_list_item > li p {
                margin: 0 0 0.5rem;
                padding: 0;
            }

            section.sponsors ul.blank_list_item > li label.expansion_item {
                cursor: pointer;
                padding-right: 0.5rem;
            }

            section.sponsors ul.blank_list_item > li .hidden {
                margin-top: 0.5rem;
                padding-left: 1rem;
                font-size: 0.85rem;
                line-height: 1.3;
            }

.create-sponsored-listing {
    text-align: right;
    font-size: 0.8rem;
    margin-top: 0;
    margin-bottom: -8px;
}

    .create-sponsored-listing .app-link {
        color: #008cff;
        text-decoration: none;
    }

        .create-sponsored-listing .app-link:hover {
            text-decoration: underline;
        }

@media (max-width: 600px) {
    section.sponsors ul.blank_list_item {
        gap: 1rem;
    }

        section.sponsors ul.blank_list_item > li {
            flex: 1 1 90%;
            max-width: none;
        }
}

.logo {
    display: block;
    margin: 1.5rem auto 0.5rem;
    max-height: 80px;
    margin-top: 0;
}

div.centered {
    text-align: center;
}

h1,
h2 {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.5rem;
}

p.intro {
    font-size: 0.9rem;
    text-align: justify;
    line-height: 1.5;
    color: #ccc;
}

.sponsor-card p {
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.sponsor-card a b {
    font-size: 19px;
}


.sponsor-card .sponsor-desc a {
    font-size: 0.88rem;
}

.sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.sponsor-card {
    box-shadow: 0 2px 4px rgb(195 195 195 / 50%);
    background: #1e1e1e;
    border: 3px solid #ff6600;
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;
    text-align: left;
    flex: 1 1 0;
    min-width: 160px;
    max-width: 220px;
}

    .sponsor-card ul {
        padding-left: 25px;
        padding-right: 5px;
    }

        .sponsor-card ul li {
            list-style-type: none;
        }

.sponsor-links {
    line-height: 1.4;
    height: 1.4em !important;
    overflow: hidden !important;
    white-space: nowrap;
    margin-bottom: 0.5em;
}

    .sponsor-links a {
        transition: none !important;
        display: inline-block;
    }

.sponsor-desc {
    margin-top: 0 !important;
    margin: 5px;
}

/* Search + Filter buttons alignment */
.search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-info {
    background-color: #007bff
}

    .btn-info:hover {
        background-color: #000386
    }

.review-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Match Filter/Search buttons */
    height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    background-color: #0d6efd;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}



    .review-btn:hover,
    .review-btn:focus {
        background-color: #0b5ed7;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
        text-decoration: none;
    }

    .review-btn:active {
        transform: translateY(1px);
    }



.search-btn,
.btn-info.search-btn {
    min-height: 25px;
}


.search-btn {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 5px 14px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}


ul.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.search-results li.search-result-item {
        margin-bottom: 1.5rem;
        padding-left: 1rem;
        border-left: 2px solid #444;
        list-style: none;
    }

        ul.search-results li.search-result-item p {
            margin: 0.3em 0;
        }

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    justify-content: center;
}

    .pagination .page-item {
        margin: 0;
    }

    .pagination .page-link {
        padding: 0.5rem 0.75rem;
        border-radius: 0.25rem;
        text-decoration: none;
        color: inherit;
        border: 1px solid #ccc;
        display: block;
    }

    .pagination .page-item.active .page-link {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

.top-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.top-section {
    flex: 1 1 0;
    margin: 0;
    padding: 0.25rem 0.5rem;
    text-align: center;
}

@media (max-width: 576px) {
    .top-container {
        flex-direction: column;
        gap: 0.25rem;
    }

    .top-section {
        padding: 0.15rem 0;
        font-size: 0.9rem;
    }
}

ul.search-results li.sponsored {
    margin-left: 0;
    border-left: 2px solid #ff6600;
    font-size: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .mobile-nav {
        display: block;
    }

    .main {
        margin-left: 0;
        padding: 1rem;
    }
}

@media (min-width: 769px) {
    .sidebar {
        display: block;
    }

    .mobile-nav {
        display: none;
    }

    .main {
        margin-left: 220px;
        padding: 1.5rem;
    }
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    background: #1e1e1e;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

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

    .sidebar a {
        display: block;
        padding: 0.4rem 1rem;
        color: #eee;
        text-decoration: none;
    }

        .sidebar a:hover {
            background: #333;
        }

    .sidebar .active > a {
        background: #00aaff;
        color: #000;
        font-weight: bold;
    }

    .sidebar ul li.category-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .sidebar .expander {
        width: 1.2em;
        text-align: center;
        cursor: pointer;
        margin-right: 0.5rem;
        user-select: none;
    }

.hidden-toggle {
    display: none;
}

.sidebar .hidden {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.hidden-toggle:checked + .hidden {
    display: block;
    margin-left: 1.7em;
}

.sidebar ul li.category-item > a {
    flex: 1;
}

.mobile-nav {
    background: #1e1e1e;
    color: #eee;
}

    .mobile-nav summary {
        padding: 1rem;
        font-size: 1rem;
        cursor: pointer;
        background: #333;
        list-style: none;
    }

    .mobile-nav ul {
        margin: 0;
        padding: 0 1rem;
        list-style: none;
    }

    .mobile-nav li a {
        display: block;
        padding: 0.5rem 0;
        color: #eee;
        text-decoration: none;
    }

        .mobile-nav li a:hover {
            background: #333;
        }

.main {
    padding: 1rem;
}

.content-wrapper {
    max-width: 1125px;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-footer {
    margin-top: 2rem;
    border-top: 1px solid #444;
    padding-top: 1rem;
    text-align: center;
}

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

    .footer-nav a {
        color: #0af;
        text-decoration: none;
        margin: 0 0.5rem;
    }

        .footer-nav a:hover {
            text-decoration: underline;
        }

li.category-item ul {
    font-size: 14px;
}

.sidebar ul li.category-item > a.active {
    background-color: #00aaff;
    color: #111;
    font-weight: bold;
}

.sidebar ul li.category-item .hidden ul li a.active {
    color: #00aaff;
    font-weight: bold;
}

.mobile-nav details[open] > summary > a {
    background-color: #00aaff;
    color: #111;
    font-weight: bold;
}

.mobile-nav a.active {
    background-color: #00aaff;
    color: #111;
    font-weight: bold;
}

.subcat-heading {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    border-bottom: 1px solid #444;
    padding-bottom: 0.25rem;
}

.search-top-align {
    float: right;
}

.sidebar .logo-container {
    text-align: center;
    border-bottom: 1px solid #333;
}

    .sidebar .logo-container img {
        max-width: 80px;
        height: auto;
        display: inline-block;
    }

.blank_list_item li {
    margin-bottom: 10px;
}

.content-wrapper {
    max-width: 1125px;
    margin: 0 auto;
}

.main-content-centered {
    max-width: 75rem;
    margin: 0 auto;
    padding: 1rem;
}

.sponsor-sections {
    display: block !important;
    margin: 2rem 0;
    font-size: 18px;
}

    .sponsor-sections > section {
        width: 100%;
        margin-bottom: 2rem;
    }

    .sponsor-sections h2.section-title {
        color: #ff6600;
        margin-bottom: 1rem;
    }

    .sponsor-sections .category-name,
    .sponsor-sections .subcategory-name {
        display: block;
        font-weight: bold;
        color: #eee;
        margin: 1rem 0 0.5rem;
    }

    .sponsor-sections ul.blank_list_item a {
        font-weight: bold;
    }

    .sponsor-sections ul.blank_list_item {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-bottom: 5px;
    }

        .sponsor-sections ul.blank_list_item > li {
            margin: 0.5rem 0;
            padding-left: 2rem;
        }

    .sponsor-sections .status {
        color: #ff6600 !important;
    }


.country-flag {
    padding-left: 5px;
    max-height: 14px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-item {
    background: #f0f0f0;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    text-decoration: none;
    color: #333;
}

    .tag-item:hover {
        background: #e0e0e0;
    }

a.external-link {
    display: inline-block;
}

    a.external-link::after {
        content: "\2197";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 0.8em;
        height: 0.8em;
        font-size: 1.3em;
        font-weight: bold;
        line-height: 1;
        transform: translateY(-0.04em);
        margin-left: 0.12em;
        border: 0.8px solid currentColor;
        border-radius: 0.16em;
        vertical-align: middle;
        box-sizing: content-box;
        font-family: Arial;
    }

    a.external-link:hover::after {
        color: #00aaff;
        border-color: #00aaff;
    }

    a.external-link:active::after {
        color: #ff6600;
        border-color: #ff6600;
    }


.orange-text {
    color: #ff6600
}

#main-content .main {
    max-width: 62%;
    margin: 0 auto;
}

.text-muted {
    font-size: small;
}

.rating-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* star block */
.stars {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 2px; /* adjust to match your look */
    vertical-align: middle;
    color: #666; /* empty star color */
    font-family: inherit; /* match site font */
}

    /* base (empty) */
    .stars::before {
        content: "★★★★★";
    }

/* fill container (clips gold stars) */
.stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    color: #ff6600; /* filled star color */
}

    /* filled stars text */
    .stars-fill::before {
        content: "★★★★★";
    }

.rating-text {
    font-weight: 600;
    opacity: .9;
    font-size: 16px; /* keep aligned with stars */
    line-height: 1;
}


@media (max-width: 768px) {
    #main-content .main {
        max-width: 100%;
        margin: 0;
    }
}

@media (min-width: 769px) {
    .mobile-nav {
        display: none !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 220px !important;
        overflow-y: auto;
    }

    #main-content {
        margin-left: 220px !important;
        padding: 0 !important;
    }

        #main-content .main {
            max-width: 75rem;
            margin: 0 auto;
            padding: 1.5rem;
            width: auto !important;
        }
}

.site-logo-top-right {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 42px;
    width: auto;
    max-width: 140px;
    opacity: 0.9;
}

.tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 8px 0 0 0;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid #555;
    border-radius: 999px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .tag-pill input {
        margin: 0;
    }


.page-header-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.page-title {
    margin: 0;
    line-height: 1.05;
    flex: 1 1 auto;
    min-width: 0; /* important for wrapping in flex */
}

.site-logo-link {
    flex: 0 0 auto;
    display: inline-block;
}

.site-logo {
    display: block;
    height: auto;
    max-width: 120px; /* desktop */
}

@media (max-width: 600px) {
    .site-logo {
        max-width: 78px;
    }
}

.orange-text {
    color: #ff6600
}

@media (max-width: 768px) {
    .site-logo-top-right {
        height: 32px;
        top: 8px;
        right: 8px;
    }
}


@media (max-width: 768px) {
    .mobile-nav {
        display: block !important;
    }

    .sidebar {
        display: none !important;
    }

    #main-content {
        margin-left: 0 !important;
    }

        #main-content .main {
            max-width: 100% !important;
            margin: 0 !important;
            padding: 1rem !important;
        }
}


/* Rating on left, Tor/I2P centered in remaining space to the right edge */
.sponsor-meta-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    margin-top: 6px;
    margin-bottom: 0;
    gap: 10px;
}

/* Nudge stars slightly right */
.sponsor-rating {
    padding-left: 6px;
    white-space: nowrap;
    line-height: 1;
}

/* Tor/I2P centered between rating block and right border */
.sponsor-links-center {
    text-align: left;
    white-space: nowrap;
    margin: 0;
}

    .sponsor-links-center a {
        font-size: 0.85em
    }

/* Make numbers smaller to free horizontal room */
.sponsor-rating .rating-text,
.sponsor-rating .rating-count-link {
    font-size: 0.85em;
}

/* Only (count) is a link */
.rating-count-link {
    text-decoration: none;
    font-size: 0.85em;
}

    .rating-count-link:hover {
        text-decoration: underline;
    }

ul.list-unstyled {
    padding-left: 0;
    margin-left: 15px;
}

.list-unstyled li {
    list-style: none;
    padding-bottom: 15px;
}




/* =========================
   Orange headings with black outline + subtle halo
   ========================= */

h2.section-title,
h2.subcat-heading {
    color: #ff6600;
    letter-spacing: 0.01em;
    /* black outline (stroke) */
    text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000,
    /* subtle orange halo */
    0 0 3px rgba(255,102,0,.25), 0 0 8px rgba(255,102,0,.15);
    /* optional extra softness (keep subtle) */
    filter: drop-shadow(0 0 4px rgba(255,102,0,.18));
}





/* Overall wrapper: left summary + right distribution */
.rating-summary {
    display: grid;
    grid-template-columns: 140px 1fr; /* left block, right bars */
    gap: 18px;
    align-items: center;
    max-width: 820px;
    margin: 6px 0 14px 0;
}

/* Left summary */
.rs-left {
    text-align: left;
}

.rs-avg {
    font-size: 48px; /* big number like reference */
    line-height: 1;
    font-weight: 700;
    color: #d7dde3;
    margin: 0;
}

.rs-stars {
    margin-top: 6px;
}

.rs-count {
    margin-top: 6px;
    font-size: 16px;
    color: #9fb0c2;
}

/* Right distribution */
.rs-right {
}

/* tighter rows */
.rating-row {
    display: grid;
    grid-template-columns: 18px 1fr 44px; /* star | bar | % */
    gap: 10px;
    align-items: center;
    margin: 4px 0;
}

.rating-num {
    font-size: 14px;
    font-weight: 600;
    color: #cfd6dd;
    line-height: 1;
    text-align: right;
}

.rating-track {
    height: 10px;
    width: 100%;
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
    overflow: hidden;
}

.rating-fill {
    height: 100%;
    width: 0%;
    background: #ff6600;
    border-radius: 999px;
}

.rating-pct {
    font-size: 14px;
    color: #9fb0c2;
    text-align: right;
    line-height: 1;
}

/* Optional: make this whole thing more compact on mobile */
@media (max-width: 520px) {
    .rating-summary {
        grid-template-columns: 1fr;
    }

    .rs-left {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .rs-avg {
        font-size: 44px;
    }

    .rs-count {
        margin-top: 0;
    }
}

/* Reply items: subtle separation like your screenshot request */
.reply-item {
    padding: 10px 0;
}

    .reply-item:not(:last-child) {
        border-bottom: 1px solid rgba(160, 170, 180, 0.50);
    }

.reply-body {
    margin-top: 2px;
}

.reply-meta {
    margin-top: 8px;
}

.sponsor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sponsor-header-left {
    display: flex;
    align-items: center;
    min-width: 0; /* allows name to truncate nicely if needed */
}

.sponsor-header-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.country-flag-right {
    margin-left: 0px;
    margin-right: 5px;
}

.sponsor-header .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    :root {
        --mobile-nav-h: 56px;
    }
    /* adjust to 60/64 if needed */
    /* Always visible on scroll */
    details.mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        margin: 0;
        background: rgba(0,0,0,.92);
        border-bottom: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    /* Make room so it DOESN'T cover your flags/logo/content */
    body {
        padding-top: calc(var(--mobile-nav-h) + env(safe-area-inset-top, 0px)) !important;
    }
    /* avoid double padding if you had it earlier */
    #main-content {
        padding-top: 0 !important;
    }

    details.mobile-nav > summary {
        height: var(--mobile-nav-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        cursor: pointer;
        color: #fff;
        font-weight: 700;
        user-select: none;
    }

        details.mobile-nav > summary::-webkit-details-marker {
            display: none;
        }

        details.mobile-nav > summary::marker {
            content: "";
        }
    /* scrollable menu panel */
    details.mobile-nav > ul {
        margin: 0;
        padding: .5rem 1rem 1rem;
        max-height: calc(100vh - var(--mobile-nav-h));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 768px) {
    :root {
        --mobile-nav-h: 56px;
    }
    /* adjust if your summary bar is taller */

    details.mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        margin: 0;
        background: rgba(0,0,0,.92);
        border-bottom: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    /* keep page content from hiding under the fixed bar */
    body {
        padding-top: calc(var(--mobile-nav-h) + env(safe-area-inset-top, 0px)) !important;
    }

    #main-content {
        padding-top: 0 !important;
    }

    details.mobile-nav > summary {
        height: var(--mobile-nav-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        cursor: pointer;
        color: #fff;
        font-weight: 700;
        user-select: none;
    }

        details.mobile-nav > summary::-webkit-details-marker {
            display: none;
        }

        details.mobile-nav > summary::marker {
            content: "";
        }

    /* WHEN OPEN: make it a full-screen panel */
    details.mobile-nav[open] {
        bottom: 0; /* stretches to full height */
        border-bottom: none;
    }

        /* the menu list becomes the scroll area */
        details.mobile-nav[open] > ul {
            margin: 0;
            padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
            height: calc(100dvh - var(--mobile-nav-h)); /* dynamic viewport */
            max-height: none;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
        }

    /* fallback if 100dvh isn't supported */
    @supports not (height: 100dvh) {
        details.mobile-nav[open] > ul {
            height: calc(100vh - var(--mobile-nav-h));
        }
    }

    /* OPTIONAL (but nice): prevent page scrolling behind the open menu */
    @supports selector(body:has(details[open])) {
        body:has(details.mobile-nav[open]) {
            overflow: hidden;
        }
    }
}
/* FORCE Category/Subcategory sponsor headings to match "Main Sponsors" */
.sponsor-sections h2.section-title,
section.sponsors h2.section-title,
h2.section-title.sponsor-section-title {
    display: block;
    width: 100%;
    text-align: center !important;
    color: #ff6600;
    /* solid black outline (stroke) */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    /* mild orange halo */
    0 0 3px rgba(255,102,0,.22), 0 0 8px rgba(255,102,0,.14) !important;
}

/* =========================
   FIX: Only offset content when the menu exists
   ========================= */

/* Kill the global body offset (this is what causes the "pushed down" pages) */
@media (max-width: 768px) {
    body {
        padding-top: 0 !important;
    }
}

/* If mobile nav exists, offset ONLY the main content */
@media (max-width: 768px) {
    :root {
        --mobile-nav-h: 56px;
    }
    /* keep your value */

    details.mobile-nav ~ #main-content {
        padding-top: calc(var(--mobile-nav-h) + env(safe-area-inset-top, 0px)) !important;
    }

        /* make sure inner main spacing stays consistent */
        details.mobile-nav ~ #main-content .main {
            padding-top: 1rem !important;
        }
}

/* Desktop: only shift content right if the sidebar exists */
@media (min-width: 769px) {
    #main-content {
        margin-left: 0 !important;
    }
    /* default if no sidebar */
    .sidebar ~ #main-content {
        margin-left: 220px !important;
    }
    /* only when sidebar present */
}
/* =========================================================
   WHITE-LABEL UI CONTROLS + BUTTON SYSTEM (Paste at end)
   - Search bar input + Search/Filter buttons (1 row on mobile)
   - Filter page fieldsets, checks, selects w/ visible arrow
   - Tags box
   - Pagination hover/focus orange
   - Unified .btn styling for ALL pages
   - Neon-console green btn-primary + brighter btn-info
   ========================================================= */

/* -----------------------------
   TOKENS (single source of truth)
------------------------------ */
:root {
    --ui-accent: #ff6600;
    --ui-bg: rgba(10,10,10,.92);
    --ui-bg-focus: rgba(12,12,12,.96);
    --ui-panel: rgba(30,30,30,.35);
    --ui-border: rgba(255,255,255,.18);
    --ui-border-strong: rgba(255,102,0,.60);
    --ui-text: #fff;
    --ui-muted: rgba(255,255,255,.65);
    --ui-h: 32px;
    --ui-radius: 10px;
    --ui-radius-pill: 999px;
    /* unified button base */
    --ui-btn-bg: #0f0f0f;
    --ui-btn-bg2: #161616;
    --ui-btn-text: #fff;
    --ui-btn-border: rgba(255,255,255,.22);
    /* PRIMARY (neon console green -> dark) */
    --ui-primary-1: #18ff6d;
    --ui-primary-2: #05200f;
    --ui-primary-border: rgba(24,255,109,.80);
    --ui-primary-border-hover: rgba(24,255,109,.98);
    --ui-primary-glow: rgba(24,255,109,.28);
    /* INFO (electric blue -> dark) */
    --ui-info-1: #2aa8ff;
    --ui-info-2: #061a33;
    --ui-info-border: rgba(42,168,255,.78);
    --ui-info-border-hover: rgba(42,168,255,.96);
    --ui-info-glow: rgba(42,168,255,.22);
}

/* =========================================================
   SEARCH BAR (ONE ROW, NO SHIFT, NO OVERFLOW)
   ========================================================= */

/* Core layout */
.search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap; /* NEVER stack */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    /* default padding so it never kisses/cuts the edges */
    padding: 0 12px;
    margin: 0;
}

/* iOS safe-area (if applicable) */
@supports (padding: max(0px)) {
    .search-form {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* If the form itself ALSO has Bootstrap .row (common culprit) */
.search-form.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* If the form is placed directly inside a Bootstrap .row without a .col */
.row > .search-form,
.row > form.search-form {
    margin-left: 15px !important;
    margin-right: 15px !important;
    width: calc(100% - 30px) !important; /* neutralize row’s negative margins */
}

/* Input (key bits: min-width:0 + flex-basis:0 so it can shrink) */
.search-form input[type="search"].form-control,
.search-form input[type="search"],
.search-form .form-control {
    height: var(--ui-h) !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    font-size: 14px !important;
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.65);
    outline: none !important;
    caret-color: var(--ui-accent);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    /* CRITICAL: prevents overflow + weird left shift */
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    /* prevent iOS search field odd styling */
    -webkit-appearance: none;
    appearance: none;
}

/* neutralize bootstrap spacing utilities that can push width */
.search-form input.form-control.mr-2,
.search-form input.form-control.me-2,
.search-form input.form-control.ml-2,
.search-form input.form-control.ms-2 {
    margin: 0 !important;
}

.search-form input[type="search"]::placeholder {
    color: rgba(255,255,255,.55);
}

.search-form input[type="search"].form-control:focus,
.search-form input[type="search"]:focus,
.search-form .form-control:focus {
    background: var(--ui-bg-focus) !important;
    border-color: var(--ui-border-strong) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.70), 0 0 0 1px rgba(255,102,0,.35), 0 0 10px rgba(255,102,0,.30), 0 0 18px rgba(255,102,0,.16) !important;
}

/* Buttons in the bar */
.search-form .search-btn,
.search-form .btn.search-btn {
    height: var(--ui-h) !important;
    min-height: var(--ui-h) !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Mobile: keep row, prevent iOS zoom, tighten padding */
@media (max-width:480px) {
    :root {
        --ui-h: 34px;
    }

    .search-form {
        gap: 8px;
    }

        .search-form input[type="search"].form-control,
        .search-form input[type="search"],
        .search-form .form-control {
            font-size: 16px !important; /* stops iOS zoom + stabilizes sizing */
        }

        .search-form .search-btn,
        .search-form .btn.search-btn {
            padding: 0 10px !important;
        }
}

/* =========================================================
   FILTER FORM LAYOUT
   ========================================================= */
.ui-form {
    color: var(--ui-text);
}

.ui-fieldset {
    border: 1px solid #444 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    margin: 0 0 12px 0 !important;
    background: var(--ui-panel);
}

.ui-legend {
    padding: 0 8px !important;
    color: var(--ui-text);
    font-weight: 700;
    letter-spacing: .01em;
}

.ui-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-top: 6px;
}

.ui-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    color: var(--ui-text);
}

.ui-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ui-accent);
}

    .ui-form input[type="checkbox"]:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255,102,0,.28);
        border-radius: 4px;
    }

.ui-label-block {
    display: block;
    margin: 6px 0 10px 0;
}

.ui-label-text {
    display: inline-block;
    min-width: 110px;
    color: var(--ui-muted);
    font-weight: 600;
}

/* =========================================================
   SELECTS (VISIBLE ARROW)
   ========================================================= */
.ui-select-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-width: 280px;
    max-width: 100%;
}

.ui-select {
    height: var(--ui-h) !important;
    line-height: 1 !important;
    font-size: 14px !important;
    width: 100%;
    padding: 0 44px 0 12px !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.65);
    appearance: none;
    -webkit-appearance: none;
    outline: none !important;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.ui-select-wrap::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    right: 34px;
    width: 1px;
    background: rgba(255,255,255,.12);
    pointer-events: none;
}

.ui-select-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid rgba(255,255,255,.75);
    transform: translateY(-35%);
    pointer-events: none;
}

.ui-select-wrap:focus-within .ui-select {
    background: var(--ui-bg-focus) !important;
    border-color: var(--ui-border-strong) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.70), 0 0 0 1px rgba(255,102,0,.35), 0 0 10px rgba(255,102,0,.30), 0 0 18px rgba(255,102,0,.16) !important;
}

.ui-select-wrap:focus-within::after {
    border-top-color: rgba(255,102,0,.95);
}

.ui-select-wrap:focus-within::before {
    background: rgba(255,102,0,.22);
}

@media (max-width:650px) {
    .ui-select-wrap {
        min-width: 100%;
    }

    .ui-label-text {
        display: block;
        margin-bottom: 6px;
        min-width: 0;
    }
}

/* =========================================================
   TAGS BOX
   ========================================================= */
.ui-tags {
    margin-top: 10px;
}

.ui-tags-title {
    margin: 0 0 8px 0;
    color: var(--ui-muted);
    font-weight: 700;
    font-size: 13px;
}

.ui-tags-box {
    border: 1px solid #333;
    border-radius: 10px;
    padding: 10px;
    background: rgba(0,0,0,.22);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.ui-empty {
    font-size: 12px;
    opacity: .75;
}

/* =========================================================
   FILTER ACTIONS
   ========================================================= */
.ui-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.ui-submit {
    height: var(--ui-h) !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    font-weight: 800;
}

.ui-clear {
    font-size: 12px;
    opacity: .75;
    text-decoration: none;
}

    .ui-clear:hover {
        opacity: 1;
        color: var(--ui-accent);
        text-decoration: underline;
    }

/* =========================================================
   PAGINATION: orange hover/focus
   ========================================================= */
.page-link {
    transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}

    .page-link:hover,
    .page-link:focus,
    .page-link:focus-visible {
        color: var(--ui-accent) !important;
        background-color: rgba(255,102,0,.10) !important;
        border-color: rgba(255,102,0,.55) !important;
        text-decoration: none !important;
        box-shadow: 0 0 0 1px rgba(255,102,0,.28), 0 0 12px rgba(255,102,0,.18) !important;
        outline: none !important;
    }

.pagination .page-item.active .page-link {
    background-color: rgba(255,102,0,.22) !important;
    border-color: rgba(255,102,0,.70) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(255,102,0,.18) !important;
}

.page-item.disabled .page-link,
.page-link[aria-disabled="true"],
.page-link[tabindex="-1"] {
    color: rgba(255,255,255,.55) !important;
    background: transparent !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* =========================================================
   UNIFIED BUTTON SYSTEM (ALL PAGES)
   ========================================================= */
.btn,
button.btn,
a.btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--ui-btn-border) !important;
    background: linear-gradient(var(--ui-btn-bg), var(--ui-btn-bg2)) !important;
    color: var(--ui-btn-text) !important;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    min-height: 34px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: filter .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

    .btn:hover,
    button.btn:hover,
    a.btn:hover {
        border-color: rgba(255,255,255,.34) !important;
        filter: brightness(1.06);
    }

    .btn:active,
    button.btn:active,
    a.btn:active {
        transform: translateY(1px);
    }

    .btn:focus,
    .btn:focus-visible,
    button.btn:focus,
    button.btn:focus-visible,
    a.btn:focus,
    a.btn:focus-visible {
        outline: none !important;
        border-color: rgba(255,102,0,.70) !important;
        box-shadow: 0 0 0 1px rgba(255,102,0,.40), 0 0 12px rgba(255,102,0,.22), 0 0 20px rgba(255,102,0,.10) !important;
    }

/* variants */
.btn-primary {
    background: linear-gradient(var(--ui-primary-1), var(--ui-primary-2)) !important;
    border-color: var(--ui-primary-border) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 2px rgba(24,255,109,.10), 0 10px 22px rgba(0,0,0,.45) !important;
}

    .btn-primary:hover {
        border-color: var(--ui-primary-border-hover) !important;
        filter: brightness(1.06) saturate(1.08);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 2px rgba(24,255,109,.16), 0 0 0 1px rgba(24,255,109,.22), 0 0 16px var(--ui-primary-glow), 0 10px 22px rgba(0,0,0,.45) !important;
    }

.btn-info {
    background: linear-gradient(var(--ui-info-1), var(--ui-info-2)) !important;
    border-color: var(--ui-info-border) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 2px rgba(42,168,255,.10), 0 10px 22px rgba(0,0,0,.45) !important;
}

    .btn-info:hover {
        border-color: var(--ui-info-border-hover) !important;
        filter: brightness(1.08) saturate(1.08);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 2px rgba(42,168,255,.16), 0 0 0 1px rgba(42,168,255,.18), 0 0 14px var(--ui-info-glow), 0 10px 22px rgba(0,0,0,.45) !important;
    }

/* sizing helpers */
.btn-sm {
    min-height: 28px !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* disabled */
.btn:disabled,
button.btn:disabled,
a.btn.disabled,
.btn.disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* plain submit buttons that are missing .btn */
button[type="submit"]:not(.btn) {
    border: 1px solid var(--ui-btn-border);
    background: linear-gradient(var(--ui-btn-bg), var(--ui-btn-bg2));
    color: var(--ui-btn-text);
    font-weight: 700;
    padding: 6px 14px;
    min-height: 34px;
    border-radius: 10px;
    cursor: pointer;
    transition: filter .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

    button[type="submit"]:not(.btn):focus,
    button[type="submit"]:not(.btn):focus-visible {
        outline: none;
        border-color: rgba(255,102,0,.70);
        box-shadow: 0 0 0 1px rgba(255,102,0,.40), 0 0 12px rgba(255,102,0,.22), 0 0 20px rgba(255,102,0,.10);
    }

/* --- Desktop sidebar offset (adjust width to your sidebar) --- */
@media (min-width:769px) {
    #main-content {
        margin-left: 260px;
    }
    /* match .sidebar width */
}

/* --- Mobile: avoid the fixed mobile header covering content --- */
@media (max-width:768px) {
    #main-content {
        margin-left: 0;
        padding-top: 70px;
    }
}
/* hard clamp any accidental viewport overflow */
.search-form {
    max-width: 100%;
    overflow: hidden;
}