:root {
    --green:#00a651;
    --green-dark:#008a44;
    --green-light:#eaf8f0;
    --ink:#17231c;
    --muted:#68756d;
    --border:#e3eae5;
    --surface:#ffffff;
    --bg:#f7faf8;
    --shadow:0 10px 30px rgba(15,55,31,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(1120px,calc(100% - 36px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.header-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:23px;font-weight:850;letter-spacing:-1px;color:#173c27}
.brand-mark{width:36px;height:36px;border-radius:11px;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900}
.brand-light{color:var(--green)}
.main-nav{display:flex;align-items:center;gap:25px}
.main-nav a{font-size:14px;font-weight:650;color:#536158}
.main-nav a:hover{color:var(--green)}
.main-nav .nav-admin{background:var(--green-light);color:var(--green-dark);padding:8px 14px;border-radius:8px}
.menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--green)}
.hero{background:linear-gradient(130deg,#eaf8f0,#f8fcf9 58%,#e4f6eb);padding:90px 0 85px;text-align:center}
.hero-content{max-width:780px}
.eyebrow{font-size:11px;letter-spacing:2px;font-weight:850;color:var(--green-dark)}
.hero h1,.page-hero h1{font-size:clamp(36px,6vw,58px);line-height:1.12;letter-spacing:-2px;margin:16px 0}
.hero h1 span,.page-hero h1 span{color:var(--green)}
.hero p,.page-hero p{color:var(--muted);font-size:17px;max-width:650px;margin:0 auto}
.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{border:1px solid transparent;border-radius:9px;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;font-weight:750;font-size:14px;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-outline{border-color:#b8d9c5;background:#fff;color:var(--green-dark)}
.btn-white{background:#fff;color:var(--green-dark)}
.btn-small{padding:8px 14px;font-size:12px}
.btn-block{width:100%;margin-top:18px}
.home-section{padding-top:65px;padding-bottom:75px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}
.section-heading h2{font-size:30px;letter-spacing:-.8px;margin:6px 0}
.section-heading p{color:var(--muted);margin:0}
.search-panel{display:flex;gap:10px;background:#fff;padding:12px;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.search-input-wrap{display:flex;align-items:center;gap:10px;flex:1;padding:0 12px}
.search-input-wrap span{font-size:27px;color:var(--green)}
.search-input-wrap input{border:0;outline:0;width:100%;min-width:0;padding:10px 0;background:transparent}
.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 35px}
.filter-grid select,.form-card input,.form-card select,.form-card textarea,.modal-card input,.modal-card select,.modal-card textarea{width:100%;border:1px solid var(--border);border-radius:8px;background:#fff;padding:12px;color:var(--ink);outline:none}
.filter-grid select:focus,.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,166,81,.08)}
.results-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.results-heading h3{margin:0;font-size:19px}
.results-heading span{font-size:13px;color:var(--muted)}
.group-list{display:grid;gap:12px}
.group-card{display:flex;gap:16px;padding:20px;background:#fff;border:1px solid var(--border);border-radius:12px;transition:.2s}
.group-card:hover{border-color:#b6dec5;box-shadow:var(--shadow)}
.group-avatar{flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:var(--green-light);color:var(--green-dark);display:grid;place-items:center;font-size:22px;font-weight:850}
.group-main{min-width:0;flex:1}
.group-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.group-title-row h3{margin:0;font-size:17px}
.featured-label{font-size:10px;color:#8b6500;background:#fff4d5;border-radius:20px;padding:3px 8px;font-weight:800}
.group-description{color:var(--muted);font-size:13px;margin:5px 0 10px;overflow-wrap:anywhere}
.group-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:#64736a;font-size:11px}
.group-meta span{background:#f4f8f5;border-radius:5px;padding:3px 7px}
.group-actions{display:flex;align-items:center;gap:15px;margin-top:13px}
.text-button{border:0;background:none;color:#68756d;font-size:12px;font-weight:700;padding:7px 0}
.text-button:hover{color:var(--green)}
.load-more-wrap{text-align:center;margin-top:28px}
.loading-state,.empty-state{text-align:center;padding:45px 15px;color:var(--muted);background:#fff;border:1px dashed var(--border);border-radius:12px}
.empty-state h3{color:var(--ink);margin:0 0 6px}
.submit-banner{background:var(--green-dark);color:#fff;padding:45px 0}
.submit-banner-inner{display:flex;justify-content:space-between;align-items:center;gap:25px}
.submit-banner .eyebrow{color:#b9f2d0}
.submit-banner h2{font-size:29px;margin:8px 0}
.submit-banner p{margin:0;color:#d8f2e2}
.site-footer{background:#10251a;color:#d6e4da;padding-top:48px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px;padding-bottom:40px}
.footer-brand{color:#fff}
.footer-grid p{color:#a9bcb0;max-width:300px;font-size:13px}
.footer-grid h4{margin:5px 0 15px;color:#fff}
.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:9px}
.footer-grid>div>a:not(.brand){font-size:13px;color:#b9c9bf}
.footer-grid a:hover{color:#fff}
.footer-bottom{border-top:1px solid #294033;padding:16px 0;color:#a9bcb0;font-size:12px}
.page-hero{padding:65px 0;text-align:center;background:linear-gradient(130deg,#eaf8f0,#f8fcf9)}
.page-hero p{font-size:15px}
.form-section{padding:55px 0 75px}
.form-card{max-width:720px;margin:auto;background:#fff;border:1px solid var(--border);border-radius:14px;padding:30px;box-shadow:var(--shadow)}
.form-card h2{margin:0 0 8px;font-size:24px}
.form-intro{margin-bottom:22px}
.form-intro p{color:var(--muted);font-size:13px;margin:0}
.form-card>label,.modal-card label{display:block;font-size:13px;font-weight:750;margin:17px 0 7px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-row>div{min-width:0}
.form-card textarea,.modal-card textarea{resize:vertical}
.check-label{display:flex!important;align-items:flex-start;gap:10px;font-weight:500!important}
.check-label input{width:auto;margin-top:5px}
.check-label a{color:var(--green-dark);font-weight:750}
.honeypot{position:absolute!important;left:-9999px!important;opacity:0!important}
.form-message{margin-top:15px;font-size:13px}
.form-message.success{color:#087b3d}
.form-message.error{color:#c0392b}
.content-page{max-width:850px;padding:55px 0 80px}
.content-page h2{font-size:21px;margin:30px 0 10px}
.content-page p,.content-page li{color:#59675e;font-size:15px}
.content-page details{background:#fff;border:1px solid var(--border);padding:17px 20px;border-radius:9px;margin:12px 0}
.content-page summary{font-weight:750;cursor:pointer}
.content-page details p{margin-bottom:0}
.modal{position:fixed;inset:0;background:rgba(10,25,15,.58);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.modal-open{display:flex}
.modal-card{position:relative;width:min(480px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;padding:28px}
.modal-card h2{margin:0 0 5px}
.modal-card>p{color:var(--muted);font-size:13px;margin-top:0}
.modal-close{position:absolute;right:16px;top:10px;border:0;background:none;font-size:28px;color:#657168}
.toast{position:fixed;right:20px;bottom:20px;z-index:150;background:#173c27;color:#fff;padding:13px 18px;border-radius:9px;box-shadow:var(--shadow);max-width:min(420px,calc(100% - 40px));opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s;font-size:13px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:#b83232}
.join-notice{position:fixed;right:20px;bottom:80px;z-index:90;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);padding:16px;border-radius:10px;max-width:300px}
.join-notice p{font-size:13px;margin-top:0}
@media(max-width:800px){
    .main-nav{gap:14px}
    .main-nav a{font-size:12px}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
    .container{width:min(100% - 26px,1120px)}
    .header-inner{min-height:62px}
    .menu-toggle{display:block}
    .main-nav{display:none;position:absolute;top:62px;left:0;right:0;background:#fff;padding:15px 20px 20px;border-bottom:1px solid var(--border);box-shadow:var(--shadow);align-items:stretch;flex-direction:column;gap:0}
    .main-nav.nav-open{display:flex}
    .main-nav a{padding:10px 5px;font-size:14px}
    .hero{padding:65px 0}
    .hero h1{letter-spacing:-1.5px}
    .hero p{font-size:15px}
    .home-section{padding-top:45px;padding-bottom:50px}
    .section-heading{align-items:flex-start;flex-direction:column}
    .section-heading h2{font-size:25px}
    .desktop-add{display:none}
    .search-panel{padding:8px;gap:5px}
    .search-panel .btn{padding:10px 12px}
    .filter-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:25px}
    .filter-grid select{font-size:12px;padding:10px 7px}
    .group-card{padding:14px;gap:11px}
    .group-avatar{width:42px;height:42px;flex-basis:42px;border-radius:11px}
    .group-title-row h3{font-size:15px}
    .group-description{font-size:12px}
    .group-meta{gap:5px;font-size:10px}
    .group-actions{gap:12px}
    .submit-banner-inner{align-items:flex-start;flex-direction:column}
    .submit-banner h2{font-size:25px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:25px}
    .footer-grid>div:first-child{grid-column:1/-1}
    .page-hero{padding:48px 0}
    .form-section{padding:35px 0 55px}
    .form-card{padding:20px}
    .form-row{grid-template-columns:1fr;gap:0}
}

/* Compact Hero and Add Group Spacing */
.hero {
    padding: 18px 0 12px;
}

.hero-content {
    max-width: 1120px;
}

.hero-actions {
    margin-top: 0;
    gap: 8px;
}

.home-section {
    padding-top: 12px;
    padding-bottom: 45px;
}

.section-heading {
    margin-bottom: 12px;
    min-height: 0;
}

.section-heading > div:empty {
    display: none;
}

/* Mobile spacing */
@media (max-width: 600px) {
    .hero {
        padding: 14px 0 10px;
    }

    .hero-actions {
        margin-top: 0;
    }

    .home-section {
        padding-top: 8px;
        padding-bottom: 35px;
    }

    .section-heading {
        margin-bottom: 10px;
    }
}

/* Final compact hero spacing */
.hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 0 !important;
    margin: 0 !important;
}

.hero-content {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.hero-actions .btn {
    margin: 0 !important;
}

.home-section {
    padding-top: 5px !important;
    margin-top: 0 !important;
}

.section-heading {
    margin: 0 0 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
}

@media (max-width: 600px) {
    .hero {
        padding: 5px 0 0 !important;
    }

    .home-section {
        padding-top: 3px !important;
    }
}

/* Add Group Button Alignment */
.compact-add-group {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    padding: 20px 0 0 !important;
    margin: 0 auto !important;
}

.compact-add-group .btn {
    margin: 0 auto !important;
    display: inline-flex;
}

@media (max-width: 600px) {
    .compact-add-group {
        padding-top: 20px !important;
    }
}

/* Hide duplicate Add Group button */
.home-section .desktop-add,
.home-section .section-heading {
    display: none !important;
}

/* FORCE REMOVE DUPLICATE ADD GROUP BUTTON */
.desktop-add,
a.desktop-add,
.section-heading .desktop-add {
    display: none !important;
    visibility: hidden !important;
}

/* Header logo and centered search */
.header-inner {
    display: grid !important;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 24px;
}

.site-logo {
    display: block;
    width: auto;
    max-width: 175px;
    max-height: 48px;
    object-fit: contain;
}

.header-search {
    width: 100%;
    max-width: 480px;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px 5px 13px;
    background: #f7faf8;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.header-search-icon {
    color: var(--green);
    font-size: 23px;
}

.header-search input {
    min-width: 0;
    flex: 1;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 8px 0;
    color: var(--ink);
}

.header-search button {
    border: 0;
    border-radius: 7px;
    background: var(--green);
    color: #fff;
    padding: 9px 15px;
    font-weight: 700;
}

.header-search button:hover {
    background: var(--green-dark);
}

@media(max-width:800px) {
    .header-inner {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
    }

    .header-search {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        margin-bottom: 10px;
    }

    .site-header .header-inner {
        padding-top: 9px;
    }
}

/* Shared uploaded logo */
.site-logo {
    display: block;
    width: auto;
    max-width: 175px;
    max-height: 48px;
    object-fit: contain;
}

.footer-site-logo {
    max-width: 190px;
    max-height: 60px;
}

.admin-site-logo {
    display: block;
    max-width: 180px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.admin-site-logo:hover {
    opacity: .9;
}

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

    .footer-site-logo {
        max-width: 160px;
    }
}

/* FINAL LOGO SIZE FIX */
.site-header .brand img.site-logo {
    width: auto !important;
    height: auto !important;
    max-width: 160px !important;
    max-height: 45px !important;
    object-fit: contain !important;
}

.site-footer .brand img.footer-site-logo {
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 45px !important;
    object-fit: contain !important;
}

img.admin-site-logo {
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 45px !important;
    object-fit: contain !important;
}

/* GroupedLX Group Details Page */
.group-detail-page {
    max-width: 900px;
    margin: 40px auto 70px;
    padding-left: 18px;
    padding-right: 18px;
}

.group-detail-breadcrumb {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    color: #777;
    font-size: 14px;
}

.group-detail-breadcrumb a {
    color: #008a44;
    text-decoration: none;
}

.group-detail-card {
    background: #fff;
    border: 1px solid #e5eee8;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 80, 40, .06);
}

.group-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #edf1ed;
}

.group-detail-avatar {
    width: 85px;
    height: 85px;
    flex-shrink: 0;
    border-radius: 18px;
    background: #e6f8ed;
    color: #008a44;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    font-weight: 700;
    overflow: hidden;
}

.group-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-detail-heading h1 {
    margin: 7px 0;
    color: #173b29;
    font-size: 27px;
}

.group-detail-heading p {
    margin: 0;
    color: #777;
}

.group-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 25px 0;
}

.group-detail-stats > div {
    background: #f3faf5;
    border-radius: 12px;
    padding: 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: center;
}

.group-detail-stats > div > span {
    grid-row: span 2;
    font-size: 25px;
}

.group-detail-stats strong {
    color: #008a44;
    font-size: 22px;
}

.group-detail-stats small {
    color: #777;
}

.group-detail-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 25px 0;
}

.group-detail-info > div {
    padding: 14px;
    background: #f8faf8;
    border: 1px solid #edf1ed;
    border-radius: 10px;
}

.group-detail-info span,
.group-detail-info strong {
    display: block;
}

.group-detail-info span {
    color: #777;
    font-size: 13px;
    margin-bottom: 5px;
}

.group-detail-info strong {
    color: #173b29;
}

.group-detail-description {
    padding-top: 20px;
    border-top: 1px solid #edf1ed;
}

.group-detail-description h2 {
    font-size: 19px;
    color: #173b29;
}

.group-detail-description p {
    color: #555;
    line-height: 1.8;
    white-space: pre-line;
}

.group-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.group-detail-note {
    margin-top: 25px;
    color: #888;
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .group-detail-page {
        margin-top: 22px;
    }

    .group-detail-card {
        padding: 18px;
    }

    .group-detail-avatar {
        width: 65px;
        height: 65px;
        font-size: 27px;
    }

    .group-detail-heading h1 {
        font-size: 20px;
    }

    .group-detail-info {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .group-detail-info > div {
        padding: 11px;
    }

    .group-detail-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .group-detail-actions > * {
        text-align: center;
    }
}

/* GroupedLX Responsive Banner System */
.glx-banner-area {
    width: 100%;
    margin: 20px auto;
}

.glx-banner-desktop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 16px;
}

.glx-banner-mobile {
    display: none;
}

.glx-banner-item {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #f5f7f6;
    text-decoration: none;
}

.glx-banner-item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: scale-down;
    transition: transform .25s ease;
}

.glx-banner-item:hover img {
    transform: scale(1.015);
}

@media(max-width:767px) {
    .glx-banner-desktop {
        display: none;
    }

    .glx-banner-mobile {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .glx-banner-area {
        margin: 14px auto;
    }

    .glx-banner-item img {
        max-height: 220px;
    }
}