/* =========================================
   GATHER WORLD — CLEAN DESIGN SYSTEM
   ========================================= */

:root {
    --bg: #080b16;
    --bg-soft: #0e1425;
    --surface: #121a2d;
    --surface-2: #18233a;
    --border: rgba(153, 174, 230, .14);
    --text: #f4f6ff;
    --muted: #98a5c2;
    --primary: #7657ff;
    --secondary: #22c5f6;
    --radius: 14px;
    --shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.7 Inter, system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

a {
    color: #aebaff;
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: #fff;
}

/* =========================================
   HEADER AND NAVIGATION
   ========================================= */

header,
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 68px;
    padding: 12px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(8, 11, 22, .96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(15px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 21px;
    font-weight: 850;
    letter-spacing: -.8px;
    color: white;
    white-space: nowrap;
}

.brand::first-letter,
.brand-icon {
    color: #927bff;
}

.brand-icon {
    font-size: 25px;
}

.brand-world {
    color: #a89aff;
}

nav,
.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

nav a,
.nav-link {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

nav a:hover,
.nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, .07);
}

.join-button,
.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--primary);
    color: white;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
}

.join-button:hover,
.nav-button:hover {
    background: #6243e8;
    color: white;
}

.logout-form {
    margin: 0;
}

/* =========================================
   MAIN CONTENT
   ========================================= */

main {
    width: min(1120px, 92%);
    margin: 40px auto;
    min-height: 72vh;
    animation: fadeUp .55s ease both;
}

.page-container {
    width: min(1120px, 92%);
    margin: 35px auto;
    min-height: 72vh;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    letter-spacing: -.7px;
}

h1 {
    font-size: clamp(2.2rem, 6vw, 4rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

p {
    color: #b2bdd5;
}

.tag {
    display: inline-block;
    color: #a99aff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* =========================================
   BUTTONS
   ========================================= */

.btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 17px;
    border: 0;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease;
}

.btn:hover,
button:hover {
    background: #6243e8;
    color: #fff;
}

.alt {
    background: #263244;
    color: #fff;
    border: 1px solid #354258;
}

.alt:hover {
    background: #354258;
    color: #fff;
}

.actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.actions a {
    font-size: .9rem;
    font-weight: 650;
}

/* =========================================
   PANELS AND POSTS
   ========================================= */

.panel,
.post {
    padding: 23px;
    margin: 17px 0;
    background: linear-gradient(
        145deg,
        rgba(24, 35, 58, .94),
        rgba(15, 22, 39, .96)
    );
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color .2s ease;
}

.panel:hover,
.post:hover {
    border-color: rgba(130, 112, 255, .38);
}

.panel {
    max-width: 650px;
}

/* =========================================
   FORMS
   ========================================= */

label {
    display: block;
    margin: 14px 0;
    color: #cbd5ef;
    font-weight: 650;
}

input,
textarea,
select {
    display: block;
    width: 100%;
    margin: 7px 0 14px;
    padding: 13px 15px;
    border: 1px solid #34415e;
    border-radius: 10px;
    outline: none;
    background: #0b1222;
    color: white;
    font: inherit;
    transition: border-color .2s, box-shadow .2s;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #8972ff;
    box-shadow: 0 0 0 3px rgba(137, 114, 255, .14);
}

input::placeholder,
textarea::placeholder {
    color: #7785a4;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* =========================================
   SOCIAL FEATURES AND MEDIA
   ========================================= */

.inline {
    display: inline;
}

.media {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 520px;
    margin-top: 14px;
    border-radius: 15px;
    object-fit: cover;
}

/* =========================================
   NOTIFICATIONS
   ========================================= */

.notice {
    padding: 13px 17px;
    margin: 12px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.error {
    background: rgba(220, 55, 80, .14);
    border-color: rgba(255, 80, 100, .3);
    color: #ffb1bc;
}

.success {
    background: rgba(40, 190, 130, .12);
    border-color: rgba(40, 190, 130, .3);
    color: #8ce9c1;
}

/* =========================================
   FOOTER
   ========================================= */

footer,
.site-footer {
    margin-top: 65px;
    padding: 32px 5%;
    border-top: 1px solid var(--border);
    color: var(--muted);
    text-align: center;
    background: rgba(10, 15, 29, .8);
}

.footer-brand {
    color: white;
    font-size: 18px;
    font-weight: 800;
}

.site-footer p {
    margin: 5px 0 12px;
}

.site-footer span {
    font-size: 12px;
}

/* =========================================
   GATHER WORLD — FULL SCREEN HOMEPAGE
   ========================================= */

/* Isolate homepage background from other pages */
body:has(.gather-hero) {
    position: relative;
    isolation: isolate;
    background: transparent;
    min-height: 100vh;
}

/* Fixed full-screen image */
body:has(.gather-hero)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(8, 18, 32, .65),
            rgba(8, 18, 32, .22)
        ),
        url("/static/images/golden-hour-cityscape.png")
        center center / cover no-repeat;
}

/* Hide normal navigation and footer on homepage */
body:has(.gather-hero) header,
body:has(.gather-hero) .site-header {
    display: none;
}

/* The home hero has its own top navigation; keep the shared footer visible. */
body:has(.gather-hero) .site-footer {
    display: block;
}

/* Remove all homepage outer spacing */
body:has(.gather-hero) main,
body:has(.gather-hero) .page-container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Full viewport hero */
.gather-hero {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 70px 8%;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.gather-hero-content {
    width: 100%;
    max-width: 570px;
    color: white;
}

.gather-eyebrow {
    margin-bottom: 20px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.gather-hero h1 {
    margin: 0 0 22px;
    color: white;
    font-size: clamp(40px, 5.5vw, 65px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.gather-description {
    max-width: 470px;
    margin-bottom: 28px;
    color: #f0f3f8;
    font-size: 16px;
    line-height: 1.8;
}

/* Homepage buttons */
.gather-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gather-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 23px;
    background: #269ee5;
    color: white;
    border: 1px solid #269ee5;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.gather-cta:hover {
    background: #1686ca;
    color: white;
}

.gather-cta-secondary {
    background: transparent;
    border-color: white;
}

.gather-cta-secondary:hover {
    background: white;
    color: #17283b;
}

.gather-stats {
    margin-top: 25px;
    color: white;
    font-size: 13px;
}

/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SCROLLBAR
   ========================================= */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #303c5a;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7663d9;
}

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */

@media (max-width: 760px) {
    header,
    .site-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 5%;
    }

    nav,
    .main-nav {
        width: 100%;
        gap: 5px;
    }

    nav a,
    .nav-link {
        padding: 7px 9px;
        font-size: .83rem;
    }

    main {
        width: 92%;
        margin: 25px auto;
    }

    .panel,
    .post {
        padding: 17px;
        border-radius: 12px;
    }
}

@media (max-width: 650px) {
    .gather-hero {
        min-height: 100vh;
        padding: 45px 25px;
    }

    .gather-hero h1 {
        font-size: 39px;
    }

    body:has(.gather-hero)::before {
        background-position: center center;
    }

    .gather-hero-buttons {
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .brand {
        font-size: 1.3rem;
    }

    .btn,
    button {
        padding: 10px 14px;
    }

    .gather-hero h1 {
        font-size: 36px;
    }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================
   GATHER WORLD — COMPACT FULL-SCREEN HOME
   ========================================= */

body:has(.gather-hero) {
    position: relative;
    isolation: isolate;
    background: transparent;
    min-height: 100vh;
}

body:has(.gather-hero)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(8, 18, 32, .67),
            rgba(8, 18, 32, .28)
        ),
        url("/static/images/golden-hour-cityscape.png")
        center center / cover no-repeat;
}

body:has(.gather-hero) header,
body:has(.gather-hero) footer {
    display: none;
}

body:has(.gather-hero) main,
body:has(.gather-hero) .page-container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.gather-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 0 7%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* TOP NAVIGATION */

.gather-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 68px;
    padding: 0 7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.22);
    background: rgba(8,18,32,.12);
}

.gather-brand {
    color: white;
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
}

.gather-brand span {
    color: #c5d8ff;
}

.gather-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.gather-navigation a {
    padding: 7px 11px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

.gather-navigation a:hover {
    background: rgba(255,255,255,.16);
    color: white;
}

.gather-navigation form {
    margin: 0;
}

.gather-navigation button {
    padding: 7px 12px;
    color: white;
    background: transparent;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 4px;
    font-size: 12px;
}

.gather-navigation .gather-nav-join {
    background: #269ee5;
    border: 1px solid #269ee5;
}

/* MAIN CONTENT */

.gather-hero-content {
    width: 100%;
    max-width: 530px;
    color: white;
    padding-top: 30px;
}

.gather-eyebrow {
    margin: 0 0 15px;
    color: #e0eaff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.gather-hero h1 {
    margin: 0 0 16px;
    color: white;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.16;
    letter-spacing: -.8px;
    font-weight: 750;
}

.gather-description {
    max-width: 420px;
    margin: 0 0 22px;
    color: #f0f3f8;
    font-size: 13px;
    line-height: 1.8;
}

/* ACTION BUTTONS */

.gather-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gather-cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 19px;
    background: #269ee5;
    color: white;
    border: 1px solid #269ee5;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.gather-cta:hover {
    background: #1686ca;
    color: white;
}

.gather-cta-secondary {
    background: transparent;
    border-color: rgba(255,255,255,.8);
}

.gather-cta-secondary:hover {
    background: white;
    color: #17283b;
}

.gather-stats {
    margin-top: 20px;
    color: white;
    font-size: 11px;
}

/* BOTTOM LABELS */

.gather-bottom-label {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 20px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.8);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* MOBILE */

@media (max-width: 650px) {
    .gather-topbar {
        padding: 12px 5%;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .gather-navigation {
        justify-content: flex-start;
        gap: 2px;
    }

    .gather-navigation a {
        padding: 6px 8px;
        font-size: 11px;
    }

    .gather-hero {
        padding: 125px 25px 65px;
    }

    .gather-hero-content {
        padding-top: 0;
    }

    .gather-hero h1 {
        font-size: 34px;
    }

    .gather-bottom-label {
        left: 25px;
        right: 25px;
        font-size: 8px;
    }

    body:has(.gather-hero)::before {
        background-position: center;
    }
}

/* =========================================================
   GATHER WORLD PHASE 1 — SHARED EXPERIENCE REDESIGN
   Image-ready: shared backgrounds and visual slots can be
   populated with the separate image pack in the next step.
   ========================================================= */

body.site-page:not(:has(.gather-hero)) {
    position: relative;
    isolation: isolate;
    background: #080b16;
    color: #f4f6ff;
}

body.site-page:not(:has(.gather-hero))::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(5, 10, 23, .94), rgba(8, 14, 31, .88)),
        url("/static/images/golden-hour-cityscape.png") center / cover no-repeat;
    transform: scale(1.02);
}

body.site-page:not(:has(.gather-hero))::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 12% 12%, rgba(49, 126, 205, .13), transparent 34%),
        radial-gradient(ellipse at 88% 70%, rgba(112, 82, 230, .12), transparent 38%);
}

.site-header {
    position: sticky;
    top: 0;
    min-height: 74px;
    padding: 12px clamp(18px, 5vw, 76px);
    background: rgba(7, 12, 25, .76);
    border-bottom: 1px solid rgba(167, 190, 245, .13);
    backdrop-filter: blur(20px);
}

.brand { font-size: 21px; letter-spacing: -.7px; }
.brand-icon { color: #5ec8ff; }
.brand-world { color: #8dcfff; }
.main-nav { gap: 5px; }
.main-nav .nav-link { color: #c0cbe0; padding: 9px 13px; border-radius: 8px; }
.main-nav .nav-link:hover,
.main-nav .nav-home { color: #fff; background: rgba(75, 160, 235, .13); }
.main-nav .join-button,
.main-nav .nav-button { border-radius: 8px; background: #168fd2; padding: 10px 17px; }
.main-nav .join-button:hover,
.main-nav .nav-button:hover { background: #087ab9; }

.page-container {
    width: min(1080px, calc(100% - 40px));
    min-height: calc(100vh - 190px);
    margin: 0 auto;
    padding: 42px 0 70px;
    animation: fadeUp .45s ease both;
}
.page-container:has(.auth-layout),
.page-container:has(.single-auth-wrap) { width: min(1120px, calc(100% - 32px)); }

h1, h2, h3 { color: #f7f9ff; }
.muted, .field-hint { color: #9eacc7; }
.section-kicker, .eyebrow {
    display: inline-block;
    color: #8bcfff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin: 8px 0 30px;
}
.page-heading h1 { margin: 8px 0 8px; font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: -1.4px; }
.page-heading p { max-width: 630px; margin: 0; color: #a9b6d0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 34px 0 18px; }
.section-heading h2 { margin: 7px 0 0; }

.btn, button.btn, .join-button {
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid rgba(109, 199, 255, .28);
    border-radius: 9px;
    background: linear-gradient(135deg, #168fd2, #3865ce);
    color: #fff;
    font-weight: 750;
    box-shadow: 0 8px 25px rgba(23, 119, 202, .16);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover, button.btn:hover, .join-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 12px 30px rgba(23, 119, 202, .25);
}
.btn-secondary { background: rgba(255,255,255,.055); border-color: rgba(185,203,242,.2); box-shadow: none; }
.btn-small { font-size: 13px; padding: 9px 14px; }
.btn-wide { width: 100%; justify-content: space-between; padding: 13px 17px; }
.btn-wide span { font-size: 19px; }

.panel-card, .post-card, .member-card, .auth-card, .guest-banner, .empty-state {
    border: 1px solid rgba(164, 188, 239, .15);
    background: linear-gradient(145deg, rgba(19, 30, 52, .91), rgba(11, 19, 36, .94));
    border-radius: 17px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
    backdrop-filter: blur(15px);
}
.panel-card { padding: clamp(20px, 3vw, 30px); }
.panel-card:hover, .post-card:hover, .member-card:hover { border-color: rgba(94, 183, 255, .35); }

/* Auth pages */
.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
    gap: clamp(22px, 5vw, 68px);
    align-items: center;
    max-width: 1060px;
    margin: 16px auto 0;
}
.auth-showcase {
    position: relative;
    min-height: 630px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: clamp(25px, 4vw, 48px);
    border: 1px solid rgba(176, 201, 247, .17);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(13, 25, 47, .1), rgba(7, 13, 28, .94)),
                radial-gradient(circle at 65% 30%, rgba(86, 148, 246, .35), transparent 44%),
                linear-gradient(140deg, #173b60, #171b3c 55%, #38285b);
    box-shadow: 0 22px 70px rgba(0,0,0,.3);
}
.auth-showcase .eyebrow { position: relative; z-index: 2; margin-bottom: auto; }
.auth-showcase h1 { position: relative; z-index: 2; max-width: 470px; margin: 0 0 13px; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -1.8px; }
.auth-showcase p { position: relative; z-index: 2; max-width: 440px; margin: 0; color: #cad5eb; font-size: 15px; }
.showcase-tags { position: relative; z-index: 2; display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.showcase-tags span { padding: 7px 10px; border: 1px solid rgba(200,220,255,.24); border-radius: 30px; color: #e2eeff; font-size: 9px; letter-spacing: .15em; }
.image-slot { position: relative; overflow: hidden; background: linear-gradient(130deg, rgba(91,181,235,.25), rgba(100,78,196,.24) 52%, rgba(242,160,100,.13)); }
.image-slot::before, .image-slot::after { content: ""; position: absolute; border-radius: 50%; filter: blur(1px); }
.image-slot::before { width: 240px; height: 240px; right: -48px; top: -70px; background: radial-gradient(circle, rgba(113,193,255,.35), rgba(113,193,255,0)); }
.image-slot::after { width: 200px; height: 200px; left: 6%; bottom: -120px; background: radial-gradient(circle, rgba(175,117,255,.27), rgba(175,117,255,0)); }
.showcase-art { position: absolute; inset: 0; opacity: .76; background-image: linear-gradient(180deg, rgba(8,15,31,.05), rgba(8,15,31,.7)); }
.auth-card { padding: clamp(24px, 3vw, 36px); }
.auth-card h2, .auth-card h1 { margin: 8px 0 8px; font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -1px; }
.auth-card > .muted { margin: 0 0 22px; }
.auth-card--compact { max-width: 470px; width: 100%; justify-self: center; }
.form-stack { display: flex; flex-direction: column; gap: 12px; }
.form-stack label { display: block; margin: 0; color: #dce5f7; font-size: 13px; font-weight: 700; }
.form-stack input, .form-stack textarea, .form-stack select, .search-bar input {
    width: 100%; margin: 7px 0 0; padding: 13px 14px;
    border: 1px solid rgba(162,187,236,.2); border-radius: 9px;
    background: rgba(5, 11, 24, .7); color: #f7f9ff; font-size: 14px;
}
.form-stack input:focus, .form-stack textarea:focus, .search-bar input:focus { border-color: #57baff; box-shadow: 0 0 0 3px rgba(87,186,255,.12); }
.form-stack textarea { min-height: 120px; }
.field-hint { margin: -5px 0 2px; font-size: 11px; font-weight: 500; }
.field-hint.is-invalid { color: #ff9eaa; }
.auth-switch { margin: 20px 0 0; color: #a9b6d0; font-size: 13px; text-align: center; }
.auth-switch a, .form-aside a { color: #8ed2ff; font-weight: 750; }
.form-aside { text-align: right; margin-top: -5px; font-size: 12px; }
.subtle-home-link { display: block; margin-top: 22px; color: #9eb0ce; text-align: center; font-size: 12px; }
.subtle-home-link:hover { color: #fff; }
.single-auth-wrap { display: flex; justify-content: center; padding: 28px 0 65px; }
.verify-card { width: min(100%, 490px); text-align: left; }
.verify-card .auth-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border: 1px solid rgba(103,196,255,.24); border-radius: 14px; background: rgba(54,143,211,.14); color: #8bd5ff; font-size: 23px; }
.verify-card h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
.otp-input { text-align: center; letter-spacing: .42em; font-size: 24px !important; font-weight: 800; }
.resend-form { margin-top: 16px; text-align: center; }
.text-button { padding: 7px; background: transparent; color: #8bd5ff; font-size: 13px; }
.text-button:hover { background: transparent; color: white; }
.error-code { color: rgba(120,193,255,.85); font-size: clamp(5rem, 15vw, 9rem); font-weight: 900; line-height: 1; letter-spacing: -.08em; }
.error-page { text-align: center; }
.error-page .btn { margin-top: 18px; }

/* Feed and member discovery */
.composer { margin-bottom: 27px; }
.composer-heading, .post-author, .settings-heading { display: flex; align-items: center; gap: 13px; }
.composer-heading { margin-bottom: 18px; }
.composer-heading strong, .settings-heading strong { display: block; color: #eef4ff; font-size: 14px; }
.composer-heading small { display: block; color: #97a8c6; font-size: 12px; }
.avatar-placeholder { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(133,200,255,.4); border-radius: 50%; background: linear-gradient(140deg, #2775a7, #5c4d9e 65%, #b86b83); color: white; font-size: 17px; font-weight: 800; box-shadow: 0 5px 20px rgba(0,0,0,.2); }
.avatar-large { width: 62px; height: 62px; font-size: 22px; }
.avatar-small { width: 36px; height: 36px; font-size: 14px; }
.composer textarea { min-height: 90px; resize: vertical; }
.composer-controls { display: grid; grid-template-columns: minmax(0,1fr) 130px auto; gap: 10px; align-items: center; }
.composer-controls input, .composer-controls select { margin: 0; min-width: 0; }
.feed-list { display: grid; gap: 16px; max-width: 830px; margin: 0 auto; }
.post-card { padding: 22px 24px; transition: border-color .2s ease, transform .2s ease; }
.post-card:hover { transform: translateY(-2px); }
.post-author { margin-bottom: 16px; }
.post-author .avatar-placeholder { text-decoration: none; }
.author-name { display: block; color: #f5f8ff; font-weight: 800; }
.author-handle { display: block; color: #93a4c1; font-size: 11px; }
.post-copy { color: #e2e9f7; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-media { display: block; width: 100%; max-height: 560px; margin-top: 15px; border-radius: 12px; object-fit: cover; }
.video-link { display: inline-flex; margin-top: 12px; padding: 13px 16px; border: 1px solid rgba(130,191,245,.2); border-radius: 10px; background: rgba(65,113,180,.12); }
.post-meta { display: flex; gap: 18px; padding: 13px 0 10px; color: #8fa1c1; font-size: 11px; border-bottom: 1px solid rgba(170,194,242,.1); }
.post-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
.post-actions form { margin: 0; }
.quiet-action { display: inline-flex; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: #9ecff0; font-size: 12px; font-weight: 700; cursor: pointer; }
.quiet-action:hover { background: rgba(91,175,235,.12); color: white; }
.danger-action { color: #f09aa5; }
.guest-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 22px; margin-bottom: 25px; }
.guest-banner strong { color: #f4f7ff; }
.guest-banner p { margin: 4px 0 0; font-size: 13px; }
.empty-state { padding: 46px 24px; text-align: center; }
.empty-state h2 { font-size: 22px; }
.empty-state p { color: #a6b4cf; }
.empty-symbol { color: #77caff; font-size: 42px; }
.search-bar { display: flex; gap: 10px; max-width: 650px; margin: 0 0 26px; }
.search-bar input { margin: 0; }
.search-bar .btn { flex: 0 0 auto; }
.member-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.member-card { display: block; overflow: hidden; color: inherit; transition: transform .2s ease, border-color .2s ease; }
.member-card:hover { transform: translateY(-4px); color: inherit; }
.member-cover { height: 92px; border-bottom: 1px solid rgba(170,200,255,.12); }
.member-cover.image-slot--member { background: linear-gradient(120deg, rgba(28,113,169,.55), rgba(80,67,153,.55), rgba(205,124,106,.28)); }
.member-avatar { position: relative; margin: -27px 0 0 18px; width: 56px; height: 56px; border: 4px solid #111c31; }
.member-info { padding: 8px 18px 18px; }
.member-info strong { display: block; color: #f5f8ff; }
.member-info > span:not(.member-link) { color: #92a7c8; font-size: 12px; }
.member-info p { min-height: 39px; margin: 9px 0 14px; color: #a9b7d0; font-size: 12px; }
.member-link { color: #85d0ff; font-size: 12px; font-weight: 800; }
.grid-empty { grid-column: 1/-1; }

/* Profiles, discussions and settings */
.profile-cover { min-height: 185px; border: 1px solid rgba(167,196,242,.16); border-radius: 18px 18px 0 0; background: linear-gradient(120deg, rgba(37,127,181,.5), rgba(88,70,165,.5), rgba(206,128,111,.3)); }
.profile-cover-label { position: absolute; right: 22px; bottom: 18px; color: rgba(237,246,255,.8); font-size: 9px; letter-spacing: .22em; }
.profile-overview { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 20px; align-items: start; margin-bottom: 35px; border-radius: 0 0 17px 17px; }
.profile-avatar { width: 86px; height: 86px; margin-top: -56px; border: 5px solid #111c31; font-size: 30px; }
.profile-main h1 { margin: 4px 0 0; font-size: clamp(1.7rem,4vw,2.4rem); }
.profile-main > p { margin: 6px 0; }
.profile-main .profile-handle { color: #92a7c8; font-size: 13px; }
.profile-stats { display: flex; gap: 18px; margin-top: 18px; color: #eaf3ff; font-size: 13px; }
.profile-stats a { color: #eaf3ff; }
.profile-stats span { color: #94a6c5; }
.profile-controls { padding-top: 24px; }
.settings-card { max-width: 720px; }
.settings-heading { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(175,197,242,.12); }
.settings-heading p { margin: 4px 0 0; font-size: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 7px; }
.comment-composer { margin-bottom: 20px; }
.comment-composer textarea { width: 100%; min-height: 95px; margin-bottom: 10px; border: 1px solid rgba(162,187,236,.2); border-radius: 9px; background: rgba(5,11,24,.7); color: white; padding: 13px; font: inherit; }
.comment-list { display: grid; gap: 10px; }
.comment-card { display: flex; gap: 12px; padding: 17px; border: 1px solid rgba(164,188,239,.12); border-radius: 12px; background: rgba(14,23,41,.76); }
.comment-card strong { color: #f3f7ff; font-size: 13px; }
.comment-card p { margin: 7px 0 0; color: #d1dbec; white-space: pre-wrap; }
.future-page { max-width: 750px; }
.image-slot--feature { height: 170px; margin: -4px -4px 24px; border-radius: 12px; background: linear-gradient(120deg, rgba(36,135,188,.35), rgba(104,83,186,.35), rgba(204,135,100,.22)); }
.future-page h2 { font-size: 21px; }
.future-page p { color: #a9b7d0; }

/* Footer and responsive adjustments */
.site-footer { margin-top: 10px; background: rgba(5,10,21,.67); border-top-color: rgba(164,188,239,.12); }
.footer-brand { display: inline-block; margin-bottom: 4px; color: #eaf5ff; }
.site-footer > a:not(.footer-brand) { display: inline-block; margin: 0 0 12px; color: #8ecfff; font-size: 12px; }
.site-footer span { display: block; color: #7f8eaa; }
.notice { border-radius: 10px; backdrop-filter: blur(12px); }

@media (max-width: 900px) {
    .auth-layout { grid-template-columns: minmax(0, .9fr) minmax(330px, 1fr); gap: 20px; }
    .auth-showcase { min-height: 590px; }
    .member-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
    .site-header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px 18px; }
    .main-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .main-nav .nav-link { white-space: nowrap; padding: 8px 10px; }
    .page-container { width: min(100% - 28px, 650px); padding-top: 28px; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
    .auth-layout { grid-template-columns: 1fr; max-width: 500px; }
    .auth-showcase { min-height: 300px; padding: 24px; }
    .auth-showcase h1 { max-width: 420px; font-size: 2.35rem; }
    .auth-card { padding: 23px; }
    .composer-controls { grid-template-columns: 1fr 115px; }
    .composer-controls .btn { grid-column: 1/-1; }
    .profile-overview { grid-template-columns: auto minmax(0,1fr); gap: 14px; }
    .profile-controls { grid-column: 1/-1; padding-top: 0; }
}
@media (max-width: 480px) {
    .member-grid { grid-template-columns: 1fr; }
    .search-bar { align-items: stretch; }
    .search-bar .btn { padding-inline: 13px; }
    .post-card { padding: 17px; }
    .guest-banner { align-items: flex-start; flex-direction: column; }
    .composer-controls { grid-template-columns: 1fr; }
    .composer-controls .btn { grid-column: auto; }
    .profile-overview { grid-template-columns: 1fr; }
    .profile-avatar { margin-top: -55px; }
    .profile-controls { grid-column: auto; }
    .form-actions { flex-wrap: wrap; }
    .form-actions > * { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ==========================================================
   GATHER WORLD — FULL-PAGE PHOTOGRAPHIC BACKGROUNDS
   Fixed viewport image layer, clear enough to be seen, with
   content scrolling above it. Backgrounds are not thumbnails.
   ========================================================== */
html { background: #080b16; }
body:not(:has(.gather-hero)) {
    position: relative;
    isolation: isolate;
    background: transparent;
    min-height: 100vh;
}
body:not(:has(.gather-hero))::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(112deg, rgba(5, 10, 23, .43), rgba(8, 14, 31, .49)),
        var(--gw-page-image, url("/static/images/page_backgrounds/city_sunset_waterfront.png"));
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.015);
}
body.feed-page { --gw-page-image: url("/static/images/page_backgrounds/future_city_blue_hour.png"); }
body.discover-page { --gw-page-image: url("/static/images/page_backgrounds/floating_island.png"); }
body.profile-page { --gw-page-image: url("/static/images/page_backgrounds/alpine_lake.png"); }
body.edit-profile-page { --gw-page-image: url("/static/images/page_backgrounds/creative_workspace_night.png"); }
body.login-page { --gw-page-image: url("/static/images/login_register/login_sunrise_mountains.png"); }
body.register-page { --gw-page-image: url("/static/images/login_register/register_midnight_workspace.png"); }
body.verify-page, body.forgot-page, body.reset-page { --gw-page-image: url("/static/images/login_register/auth_moonlit_cliff.png"); }
body.post-page { --gw-page-image: url("/static/images/page_backgrounds/mountain_lake_dusk.png"); }
body.content-page { --gw-page-image: url("/static/images/page_backgrounds/planet_city_skyline.png"); }
body.error-page-body { --gw-page-image: url("/static/images/extra_visuals/404_error_visual.png"); }

.site-header { background: rgba(7, 12, 25, .66); }
.panel-card, .post-card, .member-card, .auth-card, .guest-banner, .empty-state {
    background: linear-gradient(145deg, rgba(14, 24, 43, .82), rgba(8, 15, 30, .86));
    backdrop-filter: blur(13px);
}
.site-footer { background: rgba(5, 10, 21, .58); }

/* Broad landscape art regions; only profile avatars are intentionally circular. */
.profile-cover {
    min-height: clamp(210px, 28vw, 310px);
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgba(4,10,24,.06), rgba(4,10,24,.32)), url("/static/images/page_backgrounds/ringed_planet_cityscape.png");
    background-position: center 43%; background-size: cover; background-repeat: no-repeat;
    border-radius: 18px 18px 0 0;
}
.member-cover.image-slot--member {
    background-image: linear-gradient(180deg, rgba(4,10,24,.08), rgba(4,10,24,.30)), url("/static/images/discover_community/community_idea_workshop.png");
    background-position: center; background-size: cover;
}
.login-showcase .showcase-art {
    background-image: linear-gradient(180deg, rgba(8,15,31,.02), rgba(7,13,28,.48)), url("/static/images/login_register/login_sunrise_mountains.png");
    background-position: center; background-size: cover;
}
.register-showcase .showcase-art {
    background-image: linear-gradient(180deg, rgba(8,15,31,.02), rgba(7,13,28,.48)), url("/static/images/login_register/register_midnight_workspace.png");
    background-position: center; background-size: cover;
}
.image-slot--feature {
    min-height: 190px;
    background-image: linear-gradient(120deg, rgba(5,12,28,.15), rgba(9,15,32,.22)), url("/static/images/feature_categories/travel.png");
    background-size: cover; background-position: center;
}

/* Circular profile display pictures. */
.avatar-img, .avatar-img-link {
    display: block; flex: 0 0 auto; width: 44px; height: 44px;
    border-radius: 50%; object-fit: cover; object-position: center;
    border: 2px solid rgba(139,207,255,.68); background: rgba(10,18,34,.9);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.avatar-img-link { overflow: hidden; border: 0; }
.avatar-img-link .avatar-img { width: 100%; height: 100%; }
.avatar-img.avatar-large { width: 68px; height: 68px; }
.avatar-img.avatar-small { width: 38px; height: 38px; }
.profile-avatar.avatar-img { width: 104px; height: 104px; margin-top: -62px; border: 5px solid #111c31; }
.member-avatar.avatar-img { width: 62px; height: 62px; margin: -31px 0 0 18px; border: 4px solid #111c31; }

/* Preset avatar gallery in Edit Profile. */
.profile-settings-card { max-width: 850px; }
.avatar-section-heading { margin-top: 12px; }
.avatar-section-heading h2 { margin: 5px 0; font-size: 20px; }
.avatar-section-heading p { margin: 0; font-size: 12px; color: #9eacc7; }
.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); gap: 13px; padding: 16px; border: 1px solid rgba(153,174,230,.14); border-radius: 15px; background: rgba(4,10,22,.34); }
.avatar-option { display:flex !important; align-items:center; flex-direction:column; gap:8px; padding:10px 7px; border:1px solid transparent; border-radius:13px; background:rgba(255,255,255,.025); cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.avatar-option:hover { transform:translateY(-3px); border-color:rgba(94,183,255,.45); background:rgba(68,143,210,.10); }
.avatar-option input { width:16px !important; height:16px; margin:0 !important; accent-color:#22a8ed; }
.avatar-option img { width:78px; height:78px; border:3px solid rgba(140,203,255,.55); border-radius:50%; object-fit:cover; }
.avatar-option span { color:#b9c8df; font-size:11px; }
.avatar-option:has(input:checked) { border-color:#48b9ff; background:rgba(37,151,220,.16); box-shadow:0 0 0 2px rgba(72,185,255,.12); }
.avatar-option:has(input:checked) img { border-color:#71d0ff; box-shadow:0 0 18px rgba(65,174,255,.28); }
.upload-avatar-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; align-items:center; padding:18px; border:1px solid rgba(153,174,230,.15); border-radius:14px; background:rgba(4,10,22,.42); }
.upload-avatar-panel strong { color:#eff6ff; }
.upload-avatar-panel p { margin:4px 0 0; color:#a5b4ce; font-size:12px; }
.upload-file-label { display:inline-flex !important; align-items:center; padding:10px 14px; border:1px solid rgba(110,195,255,.28); border-radius:9px; background:rgba(30,130,190,.16); color:#c9eaff !important; cursor:pointer; }
.upload-file-label input { display:block; max-width:230px; margin-top:8px; font-size:11px; }
.avatar-upload-preview { grid-column:1/-1; display:flex; gap:12px; align-items:center; padding-top:8px; color:#a9dfff; font-size:12px; }
.avatar-upload-preview[hidden] { display:none; }
.avatar-upload-preview img { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid #66c7ff; }
@media (max-width:700px) {
    body:not(:has(.gather-hero))::before { background-position:center center; }
    .avatar-picker { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px; padding:11px; }
    .avatar-option img { width:66px; height:66px; }
    .upload-avatar-panel { grid-template-columns:1fr; }
    .profile-avatar.avatar-img { width:86px; height:86px; }
}


/* PHASE 2 — security, moderation and administration */
.notice.error { border-color: rgba(255,105,105,.42); }
.btn-danger { background: #a83248; color: #fff; border: 1px solid #c85b6e; }
.btn-danger:hover { background: #c13c55; }
.admin-heading { align-items: flex-end; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 20px 0; }
.admin-stat { padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(11,19,36,.78); backdrop-filter: blur(14px); }
.admin-stat span { display:block; color:var(--muted,#aab5c9); font-size:.85rem; }
.admin-stat strong { display:block; margin-top:8px; font-size:2rem; }
.admin-section { margin: 22px 0; }
.admin-report { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:18px 0; border-top:1px solid rgba(255,255,255,.1); }
.admin-report-main { min-width:180px; flex:1; }
.admin-report-main p { margin:10px 0 0; color:var(--muted,#aab5c9); }
.admin-action-form { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; max-width:560px; }
.admin-action-form input[name=note] { min-width:180px; flex:1 1 100%; }
.admin-user-list { width:100%; }
.admin-user-row { display:grid; grid-template-columns:minmax(190px,2fr) minmax(100px,1fr) minmax(100px,auto); gap:14px; align-items:center; padding:13px 0; border-top:1px solid rgba(255,255,255,.1); }
.admin-user-row > div:first-child { display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
.admin-user-header { color:var(--muted,#aab5c9); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
.status-pill { display:inline-flex; width:max-content; border-radius:999px; padding:5px 10px; font-size:.76rem; }
.status-active { color:#a7efc0; background:rgba(34,161,95,.16); }
.status-suspended { color:#ffc0c0; background:rgba(192,54,76,.18); }
.report-inline { display:inline; }
@media(max-width:760px) { .admin-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-report { flex-direction:column; } .admin-action-form { justify-content:flex-start; width:100%; } .admin-user-row { grid-template-columns:minmax(130px,1fr) auto; } .admin-user-header { display:none; } .admin-user-row form,.admin-user-row>.muted { grid-column:2; } }


/* ==========================================================
   PHASE 3 — SOCIAL EXPERIENCE
   Light, uncluttered actions; creator-style vertical Moments.
   ========================================================== */
.nav-notification { position:relative; }
.notification-badge,.notification-heading-count { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; margin-left:5px; border-radius:999px; color:#07111f; background:#8bd5ff; font-size:.7rem; font-weight:800; }
.phase3-heading { margin-bottom:18px; }
.phase3-composer { border:1px solid rgba(130,196,255,.23); }
.phase3-post-card { position:relative; overflow:hidden; }
.repost-label { margin:0 0 12px 3px; color:#9dcdf7; font-size:.82rem; font-weight:700; }
.post-open-link { margin-left:auto; color:#aab9d1; text-decoration:none; font-weight:800; letter-spacing:2px; }
.phase3-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.phase3-actions form { margin:0; }
.phase3-actions .quiet-action { display:inline-flex; align-items:center; min-height:36px; padding:7px 11px; border:1px solid rgba(158,190,232,.13); border-radius:999px; background:rgba(255,255,255,.035); color:#dce9fb; text-decoration:none; cursor:pointer; }
.phase3-actions .quiet-action:hover { background:rgba(78,164,226,.16); border-color:rgba(107,194,255,.36); }
.post-video-inline { display:block; width:100%; max-height:620px; margin:14px auto; border-radius:15px; background:#030711; object-fit:contain; }
.form-hint { margin:0; color:#a7b8d0; font-size:.78rem; }
.notification-list { display:grid; gap:10px; max-width:880px; margin:0 auto; }
.notification-item { display:flex; align-items:flex-start; gap:14px; padding:17px; border:1px solid rgba(151,186,228,.14); border-radius:16px; background:rgba(10,20,38,.76); backdrop-filter:blur(12px); }
.notification-unread { border-color:rgba(102,190,255,.42); background:linear-gradient(110deg,rgba(23,65,101,.55),rgba(10,20,38,.84)); }
.notification-copy { flex:1; min-width:0; }
.notification-copy p { margin:4px 0 6px; color:#d4e0f2; }
.notification-copy small { display:block; color:#93a5c1; font-size:.76rem; }
.notification-copy a { display:inline-block; margin-top:8px; color:#86cfff; font-size:.82rem; }
.notification-item form { margin-left:auto; }
.phase3-comment { align-items:flex-start; }
.comment-content { min-width:0; flex:1; }
.comment-content > p { margin:5px 0 8px; }
.comment-reply { display:flex; gap:10px; margin:12px 0 8px 10px; padding:11px; border-left:2px solid rgba(117,192,255,.38); border-radius:0 10px 10px 0; background:rgba(255,255,255,.035); }
.comment-reply p { margin:4px 0 0; }
.reply-details { margin-top:8px; }
.reply-details summary { color:#9ed5ff; cursor:pointer; font-size:.82rem; }
.reply-details form { display:grid; gap:8px; margin-top:9px; }
.reply-details textarea { min-height:65px; }
.moments-container { max-width:1100px; }
.moments-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:8px 0 24px; }
.moments-intro h1 { margin:6px 0; font-size:clamp(2rem,4vw,3.1rem); }
.moments-intro p { margin:0; color:#c0cde0; }
.moments-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); justify-items:center; gap:22px; }
.moment-card { position:relative; width:min(100%,360px); aspect-ratio:9/16; overflow:hidden; border:1px solid rgba(161,198,241,.23); border-radius:22px; background:#040914; box-shadow:0 22px 60px rgba(0,0,0,.28); }
.moment-video { width:100%; height:100%; object-fit:cover; background:#050a15; }
.moment-overlay { position:absolute; inset:auto 0 0; display:grid; gap:12px; padding:54px 17px 17px; color:#fff; background:linear-gradient(transparent,rgba(1,5,14,.92)); pointer-events:none; }
.moment-overlay a,.moment-overlay button,.moment-overlay form { pointer-events:auto; }
.moment-author { display:flex; align-items:center; gap:10px; }
.moment-author a { color:#fff; font-weight:800; text-decoration:none; }
.moment-author small { display:block; color:#d0d9e8; font-size:.75rem; }
.moment-overlay > p { margin:0; line-height:1.45; text-shadow:0 1px 4px #000; overflow-wrap:anywhere; }
.moment-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.moment-actions form { margin:0; }
.moment-actions a,.moment-actions button { display:inline-flex; align-items:center; gap:5px; padding:8px 10px; border:1px solid rgba(255,255,255,.19); border-radius:999px; color:#fff; background:rgba(5,12,24,.54); text-decoration:none; cursor:pointer; font-size:.83rem; }
.moment-actions a:hover,.moment-actions button:hover { background:rgba(36,119,175,.7); }
.moment-actions span { font-size:.72rem; }
@media(max-width:700px) {
 .moments-intro { align-items:flex-start; flex-direction:column; }
 .moments-list { grid-template-columns:minmax(0,1fr); }
 .moment-card { width:min(100%,420px); }
 .notification-item { padding:13px; gap:10px; }
 .notification-item > form { max-width:90px; }
 .phase3-actions { gap:5px; }
 .phase3-actions .quiet-action { min-height:34px; padding:6px 9px; font-size:.78rem; }
}


/* ==========================================================
   GATHER MOMENTS — FULL-SCREEN MEDIA DISCOVERY
   Original Gather colors and controls; vertical media-first feed.
   ========================================================== */
html:has(body.moments-page), body.moments-page { height:100%; overflow:hidden; background:#050914; }
body.moments-page { --moment-cyan:#43d5e8; --moment-violet:#806cff; --moment-white:#f6f8ff; }
body.moments-page .site-header, body.moments-page .site-footer { display:none !important; }
body.moments-page .page-container.moments-container { width:100%; max-width:none; height:100svh; min-height:0; margin:0; padding:0; overflow:hidden; }
body.moments-page .notice { position:fixed; z-index:120; top:76px; left:50%; width:min(92vw,520px); transform:translateX(-50%); }
.moments-experience { position:relative; width:100%; height:100%; overflow:hidden; background:radial-gradient(circle at 50% 0%,#17284b 0%,#090e1d 48%,#030610 100%); color:var(--moment-white); isolation:isolate; }
.moments-topbar { position:absolute; z-index:20; inset:0 0 auto; height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 clamp(16px,4vw,58px); background:linear-gradient(180deg,rgba(3,7,18,.82),rgba(3,7,18,.04)); pointer-events:none; }
.moments-brand,.moments-toplinks { pointer-events:auto; }
.moments-brand { display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:20px; font-weight:900; letter-spacing:-.7px; text-shadow:0 2px 12px #000; }
.moments-brand:hover { color:#fff; }
.moments-brand>span:first-child { color:var(--moment-cyan); font-size:25px; }
.moments-brand-accent { color:#80a9ff; margin-left:-5px; }
.moments-toplinks { display:flex; align-items:center; gap:9px; }
.moments-toplink,.moments-home-link { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 14px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#f3f7ff; background:rgba(7,13,29,.38); backdrop-filter:blur(15px); font-size:12px; font-weight:800; }
.moments-toplink:hover,.moments-home-link:hover { color:#fff; background:rgba(67,213,232,.18); border-color:rgba(67,213,232,.54); }
.moments-toplink.is-current { border-color:rgba(67,213,232,.62); background:rgba(67,213,232,.16); color:#fff; }
.moments-home-link { gap:7px; color:#fff; background:linear-gradient(120deg,rgba(67,213,232,.22),rgba(128,108,255,.24)); }
.moments-filterbar { position:absolute; z-index:21; top:88px; left:50%; display:flex; gap:6px; padding:5px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(4,9,22,.42); backdrop-filter:blur(16px); transform:translateX(-50%); }
.moments-filter { border:0; border-radius:999px; padding:8px 15px; color:rgba(245,248,255,.77); background:transparent; font:800 11px/1 system-ui,sans-serif; cursor:pointer; }
.moments-filter:hover,.moments-filter.is-active { color:#07111d; background:linear-gradient(110deg,var(--moment-cyan),#9be7ee); }
.moments-feed { width:100%; height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scroll-snap-type:y mandatory; scrollbar-width:none; }
.moments-feed::-webkit-scrollbar { display:none; }
.moment-card { position:relative; width:100%; height:100svh; min-height:500px; overflow:hidden; border:0; border-radius:0; background:#070c19; box-shadow:none; scroll-snap-align:start; scroll-snap-stop:always; isolation:isolate; }
.moment-card[hidden] { display:none !important; }
.moment-media-stage { position:absolute; z-index:0; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,#263d68,#080d1b 70%); }
.moment-media { display:block; width:100%; height:100%; object-fit:cover; background:#070c19; }
.moment-image { object-position:center; }
.moment-video { cursor:pointer; }
.moment-vignette { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(2,5,14,.24) 0%,transparent 22%,transparent 48%,rgba(2,5,13,.16) 64%,rgba(2,5,13,.78) 100%),linear-gradient(90deg,rgba(2,5,13,.20),transparent 42%,rgba(2,5,13,.08)); }
.moment-top-shade { position:absolute; z-index:1; inset:0 0 auto; height:190px; pointer-events:none; background:linear-gradient(180deg,rgba(2,5,13,.36),transparent); }
.moment-play-indicator { position:absolute; z-index:3; top:50%; left:50%; width:62px; height:62px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:rgba(8,15,30,.38); backdrop-filter:blur(10px); font-size:25px; opacity:0; transform:translate(-50%,-50%); transition:opacity .18s ease; cursor:pointer; }
.moment-card.is-paused .moment-play-indicator { opacity:1; }
.moment-audio-toggle { position:absolute; z-index:5; right:clamp(16px,4vw,50px); bottom:clamp(120px,16vh,180px); width:42px; height:42px; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#fff; background:rgba(5,11,24,.43); backdrop-filter:blur(12px); font-size:18px; cursor:pointer; }
.moment-caption { position:absolute; z-index:4; left:clamp(18px,6vw,86px); right:clamp(92px,13vw,190px); bottom:clamp(42px,7vh,78px); max-width:680px; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.65); }
.moment-author { display:inline-flex; align-items:center; gap:11px; margin-bottom:13px; color:#fff; text-decoration:none; }
.moment-author:hover { color:#fff; }
.moment-avatar { width:46px; height:46px; border:2px solid rgba(255,255,255,.9); border-radius:50%; object-fit:cover; box-shadow:0 4px 16px rgba(0,0,0,.35); }
.moment-author-text { display:grid; gap:1px; }
.moment-author-text strong { color:#fff; font-size:14px; font-weight:900; }
.moment-author-text small { color:rgba(245,249,255,.8); font-size:11px; }
.moment-description { margin:0 0 12px; max-width:620px; color:#fff; font-size:clamp(13px,1.25vw,16px); line-height:1.48; font-weight:560; overflow-wrap:anywhere; white-space:pre-wrap; }
.moment-post-meta { display:flex; align-items:center; gap:10px; color:rgba(240,246,255,.78); font-size:10px; font-weight:700; }
.moment-kind-pill { display:inline-flex; padding:5px 9px; border:1px solid rgba(255,255,255,.24); border-radius:999px; color:#fff; background:rgba(7,14,29,.38); backdrop-filter:blur(10px); }
.moment-action-rail { position:absolute; z-index:8; right:clamp(15px,4.3vw,58px); bottom:clamp(38px,7vh,76px); display:flex; flex-direction:column; align-items:center; gap:17px; }
.moment-rail-profile { display:block; width:49px; height:49px; margin-bottom:2px; border:2px solid #fff; border-radius:50%; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.35); }
.moment-rail-profile img { display:block; width:100%; height:100%; object-fit:cover; }
.moment-rail-form { margin:0; padding:0; }
.moment-rail-button { display:flex; min-width:49px; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0; border:0; color:#fff; background:transparent; text-decoration:none; cursor:pointer; filter:drop-shadow(0 2px 7px rgba(0,0,0,.6)); }
.moment-rail-button:hover { color:#8ce7f1; transform:translateY(-2px); }
.moment-rail-icon { display:grid; width:43px; height:43px; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#fff; background:rgba(5,12,26,.39); backdrop-filter:blur(12px); font-size:22px; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.moment-rail-button:hover .moment-rail-icon { border-color:rgba(67,213,232,.8); background:rgba(67,213,232,.22); }
.moment-rail-button small { color:#fff; font-size:10px; font-weight:850; text-shadow:0 2px 6px #000; }
.moment-rail-button.is-liked .moment-rail-icon { color:#ff789d; border-color:rgba(255,120,157,.7); }
.moment-rail-button.is-saved .moment-rail-icon { color:#8ce7f1; border-color:rgba(140,231,241,.7); }
.moment-bottom-progress { position:absolute; z-index:9; right:0; bottom:0; left:0; height:3px; background:rgba(255,255,255,.16); }
.moment-bottom-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--moment-cyan),var(--moment-violet)); }
.moments-empty { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:130px 24px 70px; text-align:center; scroll-snap-align:start; }
.moments-empty-icon { display:grid; width:78px; height:78px; place-items:center; margin-bottom:20px; border:1px solid rgba(67,213,232,.38); border-radius:26px; color:var(--moment-cyan); background:rgba(67,213,232,.10); font-size:38px; }
.moments-empty h1 { margin:8px 0; color:#fff; font-size:clamp(27px,5vw,42px); }
.moments-empty p { max-width:420px; color:#aebbd3; }
.moments-empty-cta { margin-top:12px; padding:12px 19px; border-radius:999px; color:#06101c; background:linear-gradient(110deg,var(--moment-cyan),#9be7ee); font-size:13px; font-weight:900; }
.moments-empty-cta:hover { color:#06101c; filter:brightness(1.08); }
.moments-hint { position:absolute; z-index:15; right:18px; top:50%; display:flex; flex-direction:column; align-items:center; gap:5px; color:rgba(255,255,255,.56); font-size:8px; font-weight:900; letter-spacing:.15em; writing-mode:vertical-rl; pointer-events:none; }
.moments-hint span { color:var(--moment-cyan); font-size:17px; }
@media(min-width:1000px) { .moment-media { object-fit:cover; } .moment-media-stage { background:#050914; } .moment-media-stage::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 35%,rgba(1,4,12,.30) 100%); pointer-events:none; } }
@media(max-width:700px) {
  body.moments-page .page-container.moments-container { height:100dvh; }
  .moments-topbar { height:65px; padding:0 13px; }
  .moments-brand { font-size:17px; }
  .moments-toplinks { gap:5px; }
  .moments-toplink { min-height:34px; padding:7px 10px; font-size:10px; }
  .moments-home-link { min-height:34px; padding:7px 10px; font-size:11px; }
  .moments-filterbar { top:74px; }
  .moment-card { height:100dvh; min-height:480px; }
  .moment-caption { left:15px; right:82px; bottom:calc(28px + env(safe-area-inset-bottom)); }
  .moment-action-rail { right:12px; bottom:calc(28px + env(safe-area-inset-bottom)); gap:13px; }
  .moment-rail-icon { width:39px; height:39px; font-size:20px; }
  .moment-rail-profile { width:43px; height:43px; }
  .moment-description { font-size:13px; }
  .moment-audio-toggle { right:12px; bottom:calc(270px + env(safe-area-inset-bottom)); width:38px; height:38px; }
  .moments-hint { display:none; }
}
@media(prefers-reduced-motion:reduce) { .moments-feed { scroll-behavior:auto; } .moment-rail-icon { transition:none; } }

.moment-follow-button { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:52px; margin:-22px 0 -2px; padding:0; border:0; color:#fff; background:transparent; cursor:pointer; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.moment-follow-button span { display:grid; width:25px; height:25px; place-items:center; border:2px solid #07111d; border-radius:50%; color:#06101c; background:linear-gradient(120deg,#43d5e8,#a0eff0); font-size:17px; font-weight:900; line-height:1; }
.moment-follow-button small { color:#fff; font-size:9px; font-weight:850; text-shadow:0 2px 6px #000; }
.moment-follow-button.is-following span { color:#fff; background:linear-gradient(120deg,#64748b,#8a9ab2); }


/* PHASE 3 UPLOAD CONTROLS — photo/video publishing */
.post-upload-form { gap:14px; }
.post-upload-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.post-upload-choice { position:relative; display:flex; min-height:76px; align-items:center; gap:13px; padding:14px 16px; overflow:hidden; border:1px solid rgba(111,199,235,.27); border-radius:15px; background:linear-gradient(125deg,rgba(31,115,157,.18),rgba(89,77,172,.13)); color:#edf7ff; cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.post-upload-choice:hover { border-color:rgba(89,222,232,.72); background:linear-gradient(125deg,rgba(31,145,174,.27),rgba(89,77,172,.22)); transform:translateY(-2px); }
.post-upload-choice:focus-within { outline:2px solid #60d6e5; outline-offset:3px; }
.post-upload-choice input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload-choice-icon { display:grid; width:43px; height:43px; flex:0 0 43px; place-items:center; border:1px solid rgba(112,219,233,.3); border-radius:13px; color:#8beaf0; background:rgba(63,195,211,.13); font-size:22px; }
.post-upload-choice strong,.post-upload-choice small { display:block; }
.post-upload-choice strong { color:#f3f8ff; font-size:13px; }
.post-upload-choice small { margin-top:4px; color:#a9bed5; font-size:10px; }
.post-upload-preview { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:10px 14px; align-items:center; padding:12px; border:1px solid rgba(111,199,235,.2); border-radius:14px; background:rgba(3,10,22,.55); }
.post-upload-preview[hidden] { display:none; }
.post-upload-preview img,.post-upload-preview video { display:block; width:100%; max-height:220px; border-radius:10px; background:#030711; object-fit:contain; }
.post-upload-preview-meta { display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:10px; color:#dcecff; font-size:12px; overflow-wrap:anywhere; }
.text-button { padding:7px 11px; border:1px solid rgba(255,130,150,.25); border-radius:999px; color:#ffb5c2; background:rgba(151,39,69,.13); cursor:pointer; }
.external-media-option { padding:11px 13px; border:1px solid rgba(151,186,228,.13); border-radius:12px; background:rgba(255,255,255,.025); }
.external-media-option summary { color:#a9cce2; font-size:12px; cursor:pointer; }
.external-media-controls { display:grid; grid-template-columns:minmax(0,1fr) 135px; gap:9px; margin-top:12px; }
.external-media-controls input,.external-media-controls select { min-width:0; margin:0; }
.post-upload-submit { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.moments-upload-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; padding:8px 14px; border:1px solid rgba(67,213,232,.48); border-radius:999px; color:#06101c; background:linear-gradient(110deg,#43d5e8,#8ce7f1); font-size:12px; font-weight:900; box-shadow:0 5px 20px rgba(31,182,201,.18); }
.moments-upload-link:hover { color:#06101c; filter:brightness(1.08); transform:translateY(-1px); }
@media(max-width:700px) {
  .post-upload-tools { grid-template-columns:1fr; }
  .post-upload-preview { grid-template-columns:1fr; }
  .post-upload-preview img,.post-upload-preview video { max-height:260px; }
  .post-upload-submit { align-items:stretch; flex-direction:column; }
  .post-upload-submit .btn { width:100%; }
  .external-media-controls { grid-template-columns:1fr; }
  .moments-upload-link { min-height:34px; padding:7px 10px; font-size:11px; }
}


/* PHASE 4 — COMPACT THREE-LINE MENU */
.compact-header { position:sticky; top:0; z-index:200; min-height:66px; padding:10px clamp(15px,4vw,48px); }
.menu-toggle { width:47px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:9px; border:1px solid rgba(155,174,230,.2); border-radius:13px; background:linear-gradient(140deg,rgba(118,87,255,.18),rgba(34,197,246,.1)); cursor:pointer; }
.menu-toggle:hover,.menu-toggle[aria-expanded="true"] { border-color:rgba(74,210,236,.62); background:rgba(34,197,246,.15); }
.menu-toggle span { display:block; width:21px; height:2px; border-radius:5px; background:#eef5ff; transition:transform .2s ease,opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-8px) rotate(-45deg); }
.main-nav[hidden] { display:none !important; }
.main-nav:not([hidden]) { position:absolute; top:calc(100% + 9px); right:clamp(12px,4vw,48px); display:flex; width:min(365px,calc(100vw - 24px)); max-height:min(78vh,650px); flex-direction:column; align-items:stretch; gap:6px; padding:13px; overflow-y:auto; border:1px solid rgba(151,174,230,.2); border-radius:19px; background:rgba(9,15,31,.97); box-shadow:0 24px 75px rgba(0,0,0,.48); backdrop-filter:blur(22px); }
.main-nav .nav-link,.main-nav .join-button,.main-nav .nav-button { width:100%; justify-content:flex-start; min-height:43px; padding:10px 13px; border-radius:11px; text-align:left; }
.main-nav .nav-symbol { display:inline-grid; width:24px; place-items:center; margin-right:7px; color:#84dff1; font-size:19px; }
.nav-group { border:1px solid rgba(151,174,230,.13); border-radius:13px; background:rgba(255,255,255,.025); overflow:hidden; }
.nav-group summary { display:flex; align-items:center; min-height:45px; padding:8px 13px; color:#f2f6ff; font-size:14px; font-weight:800; cursor:pointer; list-style:none; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary:hover { background:rgba(118,87,255,.12); }
.nav-chevron { margin-left:auto; color:#9eacd0; transition:transform .18s ease; }
.nav-group[open] .nav-chevron { transform:rotate(180deg); }
.nav-group-links { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:0 9px 10px 43px; }
.nav-group-links a { display:flex; align-items:center; min-height:36px; padding:7px 9px; border-radius:8px; color:#b9c6e2; font-size:12px; font-weight:650; }
.nav-group-links a:hover { color:#fff; background:rgba(34,197,246,.11); }
.nav-group-links .notification-badge { margin-left:6px; }
.menu-logout { width:100%; margin:0; }
.nav-menu-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 8px 2px; border-top:1px solid rgba(151,174,230,.12); color:#7484a6; font-size:9px; font-weight:850; letter-spacing:.12em; }
.nav-menu-footer a { color:#85dff0; font-size:11px; letter-spacing:0; }

/* PHASE 4 — COMMUNITIES */
.community-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin:12px 0 24px; padding:clamp(22px,4vw,38px); border:1px solid rgba(151,174,230,.16); border-radius:23px; background:radial-gradient(ellipse at 85% 10%,rgba(34,197,246,.18),transparent 34%),linear-gradient(125deg,rgba(118,87,255,.18),rgba(15,24,45,.88)); box-shadow:var(--shadow); }
.community-hero h1 { margin:8px 0; font-size:clamp(2.2rem,5vw,3.7rem); }
.community-hero p { max-width:610px; margin:0; color:#b7c6e2; }
.community-search-panel { margin:16px 0 24px; padding:14px; border:1px solid var(--border); border-radius:16px; background:rgba(12,20,39,.78); }
.community-search-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,230px) auto; gap:10px; }
.community-search-form input,.community-search-form select,.community-form-panel input,.community-form-panel select,.community-form-panel textarea,.community-event-form input,.community-event-form textarea,.community-role-form select,.community-detail-actions input { width:100%; min-width:0; padding:11px 13px; border:1px solid rgba(153,174,230,.2); border-radius:10px; color:#eef4ff; background:#0c1428; font:inherit; }
.community-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:17px; }
.community-card { overflow:hidden; border:1px solid rgba(153,174,230,.16); border-radius:18px; background:rgba(14,22,42,.88); box-shadow:0 14px 42px rgba(0,0,0,.16); transition:transform .18s ease,border-color .18s ease; }
.community-card:hover { transform:translateY(-3px); border-color:rgba(73,204,232,.44); }
.community-card-cover { position:relative; display:flex; min-height:132px; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(130deg,#30266d,#12617b); }
.community-cover-1 { background:linear-gradient(130deg,#153b6c,#267e9c); }
.community-cover-2 { background:linear-gradient(130deg,#64315f,#1d376f); }
.community-cover-3 { background:linear-gradient(130deg,#245b50,#193c75); }
.community-cover-4 { background:linear-gradient(130deg,#73502b,#4c3279); }
.community-cover-5 { background:linear-gradient(130deg,#37416c,#176879); }
.community-mark { display:grid; width:70px; height:70px; place-items:center; border:1px solid rgba(255,255,255,.42); border-radius:23px; color:#fff; background:rgba(255,255,255,.13); box-shadow:0 10px 32px rgba(0,0,0,.22); font-size:34px; font-weight:900; backdrop-filter:blur(10px); }
.community-visibility { position:absolute; top:12px; right:12px; padding:5px 9px; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#fff; background:rgba(4,9,22,.34); font-size:10px; font-weight:800; }
.community-card-body { padding:16px; }
.community-card-meta { display:flex; justify-content:space-between; gap:8px; color:#8fb3d8; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.community-card h2 { margin:9px 0 6px; font-size:20px; }
.community-card h2 a { color:#f4f7ff; }
.community-card p { min-height:43px; margin:0 0 15px; color:#aebbd3; font-size:13px; line-height:1.5; }
.community-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.community-card-footer .btn { padding:8px 11px; font-size:11px; }
.member-pill { padding:6px 9px; border:1px solid rgba(57,205,167,.25); border-radius:999px; color:#81e2c5; background:rgba(57,205,167,.08); font-size:10px; font-weight:800; }
.community-form-wrap { width:min(850px,100%); margin:0 auto; }
.back-link { display:inline-block; margin:4px 0 14px; color:#9dddf0; font-weight:700; }
.community-form-panel { padding:clamp(20px,4vw,34px); }
.community-form-panel h1 { margin:8px 0; font-size:clamp(2rem,5vw,3rem); }
.community-form-panel > p { margin:0 0 20px; }
.community-form-panel label,.community-event-form label { display:grid; gap:6px; color:#dce8fb; font-size:13px; font-weight:750; }
.community-form-panel label small { color:#8797b5; font-size:11px; font-weight:500; }
.community-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.community-form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:7px; }
.community-detail-hero { position:relative; display:flex; min-height:230px; align-items:center; gap:22px; padding:clamp(20px,4vw,36px); overflow:hidden; border:1px solid rgba(151,174,230,.16); border-radius:23px; background:linear-gradient(120deg,rgba(49,39,111,.94),rgba(12,74,100,.88)); box-shadow:var(--shadow); }
.community-detail-hero::after { position:absolute; inset:0; content:""; background:radial-gradient(ellipse at 78% 20%,rgba(91,226,239,.22),transparent 34%); pointer-events:none; }
.community-detail-mark { position:relative; z-index:1; display:grid; width:96px; height:96px; flex:0 0 96px; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:27px; color:#fff; background:rgba(255,255,255,.13); font-size:46px; font-weight:900; }
.community-detail-copy { position:relative; z-index:1; flex:1; min-width:0; }
.community-detail-copy .community-visibility { position:static; display:inline-block; margin-bottom:7px; }
.community-detail-copy h1 { margin:3px 0 7px; font-size:clamp(1.8rem,4vw,3rem); overflow-wrap:anywhere; }
.community-detail-copy p { max-width:650px; margin:0 0 8px; color:#e1e9f7; }
.community-member-count { color:#c1d9ee; font-size:11px; font-weight:750; }
.community-detail-actions { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.community-detail-actions form { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.community-rules { margin:14px 0; padding:14px 18px; }
.community-rules summary { color:#dbe8fb; font-weight:800; cursor:pointer; }
.community-rules p { white-space:pre-wrap; }
.community-layout { display:grid; grid-template-columns:minmax(0,1fr) 315px; align-items:start; gap:18px; margin-top:20px; }
.community-composer { padding:18px; }
.community-composer h2,.community-side-panel h2,.community-manage-section h2 { margin:0 0 13px; font-size:18px; }
.community-composer textarea { width:100%; min-height:90px; padding:13px; border:1px solid rgba(153,174,230,.2); border-radius:12px; color:#f4f6ff; background:#0c1428; font:inherit; }
.community-composer .form-stack { display:grid; gap:10px; }
.checkbox-line { display:flex; align-items:center; gap:8px; color:#aebbd3; font-size:12px; }
.community-post-list { display:grid; gap:13px; }
.community-post { margin:0; padding:18px; }
.community-announcement-label { margin-bottom:12px; color:#8fe1f0; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.community-post-author { display:flex; align-items:center; gap:10px; }
.community-mini-avatar { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border:1px solid rgba(125,199,239,.27); border-radius:50%; color:#eaf7ff; background:linear-gradient(140deg,#6253cb,#1e8ca5); font-size:15px; font-weight:900; }
.community-post-author strong,.community-member-row strong { display:block; color:#eff5ff; font-size:12px; }
.community-post-author small,.community-member-row small { display:block; color:#8798b7; font-size:10px; }
.community-post-copy { margin:15px 0; color:#d8e4f5; white-space:pre-wrap; overflow-wrap:anywhere; }
.community-post-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; border-top:1px solid rgba(153,174,230,.1); color:#8292b0; font-size:10px; }
.community-post-actions form { margin:0; }
.text-button { border:0; padding:5px 9px; color:#ffb5c2; background:transparent; font-size:11px; cursor:pointer; }
.community-side-column { display:grid; gap:13px; }
.community-side-panel { padding:16px; }
.community-side-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.community-side-heading span { color:#8fe1f0; font-size:11px; font-weight:800; }
.community-member-row { display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px solid rgba(153,174,230,.09); }
.community-member-row .community-mini-avatar { width:32px; height:32px; flex-basis:32px; font-size:12px; }
.community-member-row > span:nth-child(2) { flex:1; min-width:0; }
.community-member-row em { color:#8da0c0; font-size:9px; font-style:normal; text-transform:capitalize; }
.community-event-row { padding:10px 0; border-top:1px solid rgba(153,174,230,.09); }
.community-event-row strong,.community-event-row small { display:block; }
.community-event-row strong { color:#eef4ff; font-size:12px; }
.community-event-row small { color:#8da0c0; font-size:10px; }
.community-event-row p { margin:5px 0 0; font-size:11px; }
.community-event-form { margin-top:10px; padding-top:10px; border-top:1px solid rgba(153,174,230,.1); }
.community-event-form summary { color:#93e2ee; cursor:pointer; font-size:12px; font-weight:800; }
.community-event-form form { display:grid; gap:9px; margin-top:12px; }
.community-event-form label { font-size:11px; }
.community-request-row,.community-manage-row { padding:12px 0; border-top:1px solid rgba(153,174,230,.1); }
.community-request-row strong,.community-request-row small,.community-manage-row strong,.community-manage-row small { display:block; }
.community-request-row small,.community-manage-row small { color:#8d9bb7; font-size:10px; }
.community-request-actions { display:flex; gap:7px; margin-top:8px; }
.community-request-actions .btn { padding:6px 10px; font-size:10px; }
.community-empty,.private-community-notice { grid-column:1/-1; padding:36px; text-align:center; }
.community-empty-icon { display:inline-grid; width:55px; height:55px; place-items:center; margin:0 auto 12px; border:1px solid rgba(67,213,232,.25); border-radius:18px; color:#8ce7f1; background:rgba(67,213,232,.1); font-size:26px; }
.community-empty h2,.private-community-notice h2 { margin:7px 0; }
.community-empty p,.private-community-notice p,.muted-copy { color:#94a4c0; font-size:12px; }
.community-manage-section { margin-top:16px; padding:18px; }
.community-manage-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.community-role-form { display:flex; gap:6px; align-items:center; }
.community-role-form select { width:auto; padding:7px 8px; font-size:11px; }
@media(max-width:800px) { .community-layout { grid-template-columns:1fr; } .community-side-column { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } }
@media(max-width:640px) {
 .community-hero { align-items:stretch; flex-direction:column; }
 .community-search-form { grid-template-columns:1fr; }
 .community-form-row { grid-template-columns:1fr; }
 .community-detail-hero { align-items:flex-start; flex-direction:column; }
 .community-detail-mark { width:66px; height:66px; flex-basis:66px; border-radius:19px; font-size:32px; }
 .community-detail-actions { width:100%; }
 .community-detail-actions form { width:100%; }
 .community-detail-actions input { flex:1; }
 .community-manage-row { align-items:flex-start; flex-direction:column; }
 .community-role-form { width:100%; }
 .community-role-form select { flex:1; }
}

/* Homepage uses the same compact three-line menu as all other pages. */
.compact-home-topbar { z-index:150; }
.compact-home-topbar .menu-toggle { margin-left:auto; }
.home-main-nav:not([hidden]) { top:calc(100% + 8px); right:clamp(12px,7vw,90px); }
@media(max-width:700px) { .compact-home-topbar { padding:0 18px; } .home-main-nav:not([hidden]) { right:12px; } }

.community-media-pick { display:inline-flex; width:max-content; max-width:100%; align-items:center; gap:9px; padding:9px 13px; border:1px solid rgba(70,204,226,.25); border-radius:10px; color:#9be6f0; background:rgba(34,197,246,.08); font-size:12px; font-weight:800; cursor:pointer; }
.community-media-pick input { max-width:210px; color:#aebbd3; font-size:11px; }
.community-post-media { display:block; width:100%; max-height:560px; margin:12px 0; border-radius:13px; background:#050a15; object-fit:contain; }

/* Moments keeps its immersive player but shares the compact menu control. */
.moments-topbar .moments-menu-toggle,.moments-topbar .moments-main-nav { pointer-events:auto; }
.moments-topbar .moments-menu-toggle { flex:0 0 44px; }
.moments-main-nav:not([hidden]) { top:calc(100% + 8px); right:clamp(12px,4vw,58px); }
@media(max-width:700px) { .moments-main-nav:not([hidden]) { right:12px; } }

/* PHASE 5 — private and group messaging */
.message-page,.message-thread-wrap,.message-form-wrap { width:min(880px,100%); margin:0 auto; }
.section-heading-row { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:10px 0 22px; }
.section-heading-row h1 { margin:6px 0; font-size:clamp(2rem,5vw,3rem); }
.section-heading-row p { margin:0; color:var(--muted); }
.message-list { overflow:hidden; padding:5px 18px; }
.message-list-item { display:flex; align-items:center; gap:13px; padding:15px 4px; border-bottom:1px solid var(--border); color:var(--text); }
.message-list-item:last-child { border-bottom:0; }
.message-list-item:hover { color:#fff; background:rgba(255,255,255,.025); }
.message-avatar { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border:1px solid rgba(34,197,246,.3); border-radius:50%; color:#e9fbff; background:linear-gradient(135deg,#6651d9,#087f9d); font-weight:850; font-size:18px; }
.message-list-copy { display:grid; gap:3px; min-width:0; flex:1; }
.message-list-copy strong { color:#f4f7ff; font-size:14px; }
.message-list-copy small { overflow:hidden; color:#9baac5; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.message-list-meta { display:grid; justify-items:end; gap:6px; color:#8191af; font-size:10px; }
.message-list-meta b { display:grid; min-width:20px; height:20px; padding:0 5px; place-items:center; border-radius:20px; color:#06111b; background:#47d7e7; font-size:10px; }
.message-empty { padding:46px 22px; text-align:center; }
.message-empty > span { display:inline-grid; width:54px; height:54px; place-items:center; border:1px solid rgba(34,197,246,.25); border-radius:18px; color:#8ce8f1; background:rgba(34,197,246,.08); font-size:25px; }
.message-empty h2 { margin:12px 0 5px; font-size:21px; }
.message-empty p { color:var(--muted); font-size:13px; }
.message-form-wrap { max-width:680px; }
.message-form-panel { padding:clamp(20px,4vw,34px); }
.message-form-panel h1 { margin:6px 0; font-size:clamp(2rem,5vw,3rem); }
.message-form-panel > p { margin:0 0 20px; color:var(--muted); }
.message-form-panel label { display:grid; gap:7px; color:#dce8fb; font-size:13px; font-weight:750; }
.message-form-panel label small { color:#8797b5; font-weight:500; }
.message-thread-header { display:grid; grid-template-columns:1fr auto; gap:10px 20px; align-items:center; padding:17px 20px; }
.message-thread-header .back-link { grid-column:1/-1; margin:0; }
.message-thread-header h1 { margin:5px 0 0; font-size:clamp(1.35rem,3vw,2rem); }
.message-thread-members { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.message-thread-members a { padding:5px 9px; border:1px solid var(--border); border-radius:30px; color:#a9dff4; font-size:10px; }
.message-thread-list { display:flex; max-height:62vh; min-height:260px; flex-direction:column; gap:12px; overflow-y:auto; padding:20px 4px; }
.message-bubble { width:min(78%,650px); align-self:flex-start; padding:12px 15px; border:1px solid rgba(153,174,230,.15); border-radius:16px 16px 16px 4px; background:#121c31; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.message-bubble.mine { align-self:flex-end; border-color:rgba(34,197,246,.23); border-radius:16px 16px 4px 16px; background:linear-gradient(135deg,rgba(83,65,177,.45),rgba(17,113,145,.35)); }
.message-bubble-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.message-bubble-meta a { color:#a5e5f3; font-size:11px; font-weight:800; }
.message-bubble-meta small { color:#8292ae; font-size:9px; }
.message-bubble p { margin:7px 0 0; color:#edf3ff; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.message-compose { position:sticky; bottom:10px; display:flex; gap:10px; align-items:flex-end; padding:12px; }
.message-compose textarea { flex:1; min-height:48px; max-height:130px; resize:vertical; padding:12px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:#0c1428; font:inherit; }
.message-compose button { flex:0 0 auto; }
@media(max-width:640px) { .section-heading-row { align-items:flex-start; flex-direction:column; } .message-thread-header { grid-template-columns:1fr; } .message-thread-members { justify-content:flex-start; } .message-bubble { width:90%; } .message-compose { align-items:stretch; flex-direction:column; } }

/* PHASE 6 — global discovery and search */
.explore-hero { position:relative; overflow:hidden; padding:clamp(25px,5vw,48px); background:linear-gradient(115deg,rgba(39,31,91,.92),rgba(9,70,91,.88)); }
.explore-hero::after { position:absolute; width:280px; height:280px; right:-70px; top:-120px; content:""; border:1px solid rgba(113,224,255,.2); border-radius:50%; box-shadow:0 0 0 30px rgba(113,224,255,.035),0 0 0 65px rgba(113,224,255,.025); pointer-events:none; }
.explore-hero h1 { position:relative; z-index:1; margin:8px 0; font-size:clamp(2.1rem,5vw,3.6rem); }
.explore-hero > p { position:relative; z-index:1; margin:0 0 20px; color:#d0e5f6; }
.explore-search-form { position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:min(760px,100%); padding:7px 8px 7px 15px; border:1px solid rgba(211,231,255,.2); border-radius:13px; background:rgba(5,12,29,.72); box-shadow:0 12px 30px rgba(0,0,0,.15); }
.explore-search-form > span { color:#8ce7f1; font-size:25px; }
.explore-search-form input { flex:1; min-width:0; padding:10px 4px; border:0; outline:0; color:#fff; background:transparent; font:inherit; }
.explore-search-form input::placeholder { color:#8798b5; }
.explore-search-form button { flex:0 0 auto; }
.explore-section { margin:30px 0; }
.explore-section-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:14px; }
.explore-section-heading h2 { margin:4px 0 0; font-size:clamp(1.25rem,3vw,1.75rem); }
.explore-section-heading h2 span { color:#8ce7f1; font-size:.7em; }
.explore-section-heading > a,.explore-hint { color:#91a4c2; font-size:11px; }
.topic-chip-grid { display:flex; flex-wrap:wrap; gap:9px; }
.topic-chip { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid rgba(34,197,246,.18); border-radius:999px; color:#bceef5; background:linear-gradient(120deg,rgba(91,72,190,.15),rgba(34,197,246,.08)); }
.topic-chip span { font-size:13px; font-weight:850; }
.topic-chip small { color:#8fa3bf; font-size:10px; }
.explore-people-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.explore-person-card { display:flex; min-width:0; flex-direction:column; align-items:center; padding:18px 13px; border:1px solid var(--border); border-radius:15px; color:var(--text); background:rgba(18,26,45,.86); text-align:center; transition:transform .18s,border-color .18s; }
.explore-person-card:hover,.explore-community-card:hover,.explore-post-card:hover { transform:translateY(-2px); border-color:rgba(34,197,246,.32); }
.explore-person-card img { width:64px; height:64px; margin-bottom:9px; border:2px solid rgba(75,207,232,.36); border-radius:50%; object-fit:cover; }
.explore-person-card strong { max-width:100%; overflow:hidden; color:#f2f6ff; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.explore-person-card small { color:#91a6c4; font-size:10px; }
.explore-person-card p { min-height:32px; margin:8px 0; color:#aebbd3; font-size:10px; line-height:1.5; }
.explore-person-card > span { color:#8ce7f1; font-size:10px; }
.explore-community-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.explore-community-card { display:flex; align-items:center; gap:13px; min-width:0; padding:15px; border:1px solid var(--border); border-radius:14px; color:var(--text); background:rgba(18,26,45,.86); transition:transform .18s,border-color .18s; }
.explore-community-mark { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border:1px solid rgba(34,197,246,.22); border-radius:15px; color:#e9fbff; background:linear-gradient(135deg,#6651d9,#087f9d); font-size:21px; font-weight:900; }
.explore-community-card > div { min-width:0; }
.explore-community-card strong,.explore-community-card small { display:block; }
.explore-community-card strong { color:#f1f6ff; font-size:13px; }
.explore-community-card small { margin-top:3px; color:#8ce7f1; font-size:9px; }
.explore-community-card p { margin:6px 0 0; color:#aebbd3; font-size:11px; }
.explore-post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.explore-post-card { min-width:0; padding:14px; border:1px solid var(--border); border-radius:15px; background:rgba(18,26,45,.9); transition:transform .18s,border-color .18s; }
.explore-post-author { display:flex; align-items:center; gap:9px; color:var(--text); }
.explore-post-author img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.explore-post-author strong,.explore-post-author small { display:block; }
.explore-post-author strong { color:#f4f7ff; font-size:11px; }
.explore-post-author small { color:#8fa2bf; font-size:9px; }
.explore-post-card > p { display:-webkit-box; min-height:45px; overflow:hidden; margin:12px 0; color:#d1dcef; font-size:12px; line-height:1.55; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.explore-post-media { display:block; width:100%; max-height:260px; border-radius:10px; background:#080d18; object-fit:cover; }
.explore-post-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:11px; color:#8798b5; font-size:9px; }
.explore-post-meta a { color:#8ce7f1; font-weight:750; }
.explore-empty { grid-column:1/-1; padding:22px; color:#aebbd3; }
.search-page,.topic-page { width:min(1050px,100%); margin:0 auto; }
.search-page-heading { margin:12px 0 20px; }
.search-page-heading h1 { margin:6px 0; font-size:clamp(2rem,5vw,3rem); }
.search-page-heading p { margin:0; color:var(--muted); }
.search-page-form { width:100%; }
.search-result-section { margin:28px 0; }
.compact-results { grid-template-columns:repeat(5,minmax(0,1fr)); }
.topic-hero { margin:13px 0 22px; padding:25px; background:linear-gradient(120deg,rgba(39,31,91,.78),rgba(9,70,91,.72)); }
.topic-hero h1 { margin:7px 0; color:#bcf1f6; }
.topic-hero p { margin:0; }
.topic-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:850px) { .explore-people-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .compact-results { grid-template-columns:repeat(3,minmax(0,1fr)); } .explore-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .explore-section-heading { align-items:flex-start; flex-direction:column; gap:5px; } .explore-people-grid,.compact-results { grid-template-columns:repeat(2,minmax(0,1fr)); } .explore-community-grid,.explore-post-grid,.topic-post-grid { grid-template-columns:1fr; } .explore-search-form { gap:5px; padding-left:10px; } .explore-search-form button { padding:9px 11px; } }


/* PHASES 7–9: Gather AI, creator/business tools, and operations readiness */
.phase79-wrap { width:min(1120px,100%); margin:0 auto; }
.phase79-hero { padding:clamp(22px,4vw,38px); background:linear-gradient(120deg,rgba(43,34,104,.9),rgba(5,83,101,.86)); }
.phase79-hero h1 { margin:7px 0; font-size:clamp(1.9rem,4vw,3rem); }
.phase79-hero p { max-width:720px; margin:0; color:#d0e4f5; }
.ai-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; margin-top:18px; align-items:start; }
.ai-sidebar { padding:14px; }
.ai-sidebar h2 { margin:4px 0 12px; font-size:15px; }
.ai-new-chat { width:100%; }
.ai-history { display:grid; gap:6px; margin-top:12px; }
.ai-history a { overflow:hidden; padding:10px 11px; border:1px solid transparent; border-radius:10px; color:#c9d7ec; background:rgba(255,255,255,.035); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.ai-history a.active,.ai-history a:hover { border-color:rgba(34,197,246,.28); color:#fff; background:rgba(34,197,246,.1); }
.ai-chat-panel { min-height:560px; display:flex; flex-direction:column; padding:clamp(14px,3vw,24px); }
.ai-chat-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--border); }
.ai-chat-top h2 { margin:0; font-size:17px; }
.ai-privacy-note { color:#91a3c0; font-size:10px; line-height:1.5; }
.ai-messages { display:grid; gap:13px; flex:1; padding:18px 0; }
.ai-message { max-width:min(90%,760px); padding:13px 15px; border:1px solid var(--border); border-radius:15px; white-space:pre-wrap; overflow-wrap:anywhere; color:#edf4ff; background:rgba(255,255,255,.045); font-size:13px; line-height:1.65; }
.ai-message.user { justify-self:end; border-color:rgba(34,197,246,.22); background:linear-gradient(130deg,rgba(77,62,160,.36),rgba(10,111,139,.25)); }
.ai-message.model { justify-self:start; }
.ai-compose { display:flex; gap:9px; align-items:end; padding-top:12px; border-top:1px solid var(--border); }
.ai-compose textarea { flex:1; min-height:54px; max-height:160px; resize:vertical; padding:12px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:#0a1428; font:inherit; }
.ai-empty { display:grid; place-items:center; flex:1; min-height:300px; text-align:center; color:#a8b8d0; }
.ai-empty-mark { display:grid; width:64px; height:64px; place-items:center; border:1px solid rgba(34,197,246,.25); border-radius:20px; color:#9debf5; background:rgba(34,197,246,.09); font-size:28px; }
.creator-grid,.business-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:18px; }
.creator-card,.business-card { display:grid; gap:8px; padding:17px; border:1px solid var(--border); border-radius:16px; color:var(--text); background:rgba(14,24,44,.88); transition:transform .18s,border-color .18s; }
.creator-card:hover,.business-card:hover { transform:translateY(-2px); border-color:rgba(34,197,246,.35); }
.creator-card-head { display:flex; align-items:center; gap:10px; }
.creator-card-head img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.creator-card h3,.business-card h3 { margin:0; color:#f3f7ff; font-size:15px; }
.creator-card small,.business-card small { color:#8fa5c1; font-size:10px; }
.creator-card p,.business-card p { margin:0; color:#b4c1d5; font-size:12px; line-height:1.55; }
.creator-cover,.business-cover { padding:clamp(20px,4vw,34px); border:1px solid rgba(125,178,240,.16); border-radius:18px; background:linear-gradient(125deg,rgba(77,57,154,.72),rgba(8,93,112,.68)); }
.creator-profile-head { display:flex; align-items:center; gap:16px; }
.creator-profile-head img { width:88px; height:88px; border:3px solid rgba(157,235,245,.4); border-radius:50%; object-fit:cover; }
.creator-profile-head h1,.business-cover h1 { margin:0 0 4px; font-size:clamp(1.6rem,4vw,2.4rem); }
.creator-stats { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.creator-stats span { padding:7px 11px; border:1px solid rgba(210,235,255,.18); border-radius:999px; color:#d8e8f7; background:rgba(3,10,28,.18); font-size:11px; }
.business-badge { display:inline-flex; width:max-content; padding:5px 9px; border:1px solid rgba(245,196,96,.3); border-radius:999px; color:#f4d28c; background:rgba(245,196,96,.08); font-size:10px; font-weight:800; }
.phase79-form { width:min(760px,100%); margin:18px auto; padding:clamp(18px,4vw,30px); }
.phase79-form .form-stack { display:grid; gap:13px; }
.phase79-form label { display:grid; gap:6px; color:#dbe8fa; font-size:12px; font-weight:750; }
.phase79-form input,.phase79-form textarea,.phase79-form select { width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:#0a1428; font:inherit; }
.phase79-form textarea { min-height:120px; resize:vertical; }
.readiness-summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px; border:1px solid var(--border); border-radius:15px; background:rgba(14,24,44,.9); }
.readiness-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.readiness-item { padding:14px; border:1px solid var(--border); border-radius:12px; background:rgba(14,24,44,.82); }
.readiness-item strong { display:flex; align-items:center; gap:7px; color:#eaf2ff; font-size:12px; }
.readiness-item p { margin:7px 0 0; color:#97a9c4; font-size:11px; line-height:1.5; }
.readiness-pass { color:#73e4b4; }
.readiness-fail { color:#ffbd84; }
@media(max-width:820px) { .creator-grid,.business-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ai-layout { grid-template-columns:1fr; } .ai-sidebar { order:2; } .ai-chat-panel { min-height:480px; } }
@media(max-width:560px) { .creator-grid,.business-grid,.readiness-grid { grid-template-columns:1fr; } .creator-profile-head { align-items:flex-start; } .creator-profile-head img { width:68px; height:68px; } .ai-compose { flex-direction:column; align-items:stretch; } .ai-compose button { width:100%; } }


/* PHASES 7–9: Gather AI, creator/business tools, and operations readiness */
.phase79-wrap { width:min(1120px,100%); margin:0 auto; }
.phase79-hero { padding:clamp(22px,4vw,38px); background:linear-gradient(120deg,rgba(43,34,104,.9),rgba(5,83,101,.86)); }
.phase79-hero h1 { margin:7px 0; font-size:clamp(1.9rem,4vw,3rem); }
.phase79-hero p { max-width:720px; margin:0; color:#d0e4f5; }
.ai-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; margin-top:18px; align-items:start; }
.ai-sidebar { padding:14px; }
.ai-sidebar h2 { margin:4px 0 12px; font-size:15px; }
.ai-new-chat { width:100%; }
.ai-history { display:grid; gap:6px; margin-top:12px; }
.ai-history a { overflow:hidden; padding:10px 11px; border:1px solid transparent; border-radius:10px; color:#c9d7ec; background:rgba(255,255,255,.035); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.ai-history a.active,.ai-history a:hover { border-color:rgba(34,197,246,.28); color:#fff; background:rgba(34,197,246,.1); }
.ai-chat-panel { min-height:560px; display:flex; flex-direction:column; padding:clamp(14px,3vw,24px); }
.ai-chat-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--border); }
.ai-chat-top h2 { margin:0; font-size:17px; }
.ai-privacy-note { color:#91a3c0; font-size:10px; line-height:1.5; }
.ai-messages { display:grid; gap:13px; flex:1; padding:18px 0; }
.ai-message { max-width:min(90%,760px); padding:13px 15px; border:1px solid var(--border); border-radius:15px; white-space:pre-wrap; overflow-wrap:anywhere; color:#edf4ff; background:rgba(255,255,255,.045); font-size:13px; line-height:1.65; }
.ai-message.user { justify-self:end; border-color:rgba(34,197,246,.22); background:linear-gradient(130deg,rgba(77,62,160,.36),rgba(10,111,139,.25)); }
.ai-message.model { justify-self:start; }
.ai-compose { display:flex; gap:9px; align-items:end; padding-top:12px; border-top:1px solid var(--border); }
.ai-compose textarea { flex:1; min-height:54px; max-height:160px; resize:vertical; padding:12px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:#0a1428; font:inherit; }
.ai-empty { display:grid; place-items:center; flex:1; min-height:300px; text-align:center; color:#a8b8d0; }
.ai-empty-mark { display:grid; width:64px; height:64px; place-items:center; border:1px solid rgba(34,197,246,.25); border-radius:20px; color:#9debf5; background:rgba(34,197,246,.09); font-size:28px; }
.creator-grid,.business-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:18px; }
.creator-card,.business-card { display:grid; gap:8px; padding:17px; border:1px solid var(--border); border-radius:16px; color:var(--text); background:rgba(14,24,44,.88); transition:transform .18s,border-color .18s; }
.creator-card:hover,.business-card:hover { transform:translateY(-2px); border-color:rgba(34,197,246,.35); }
.creator-card-head { display:flex; align-items:center; gap:10px; }
.creator-card-head img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.creator-card h3,.business-card h3 { margin:0; color:#f3f7ff; font-size:15px; }
.creator-card small,.business-card small { color:#8fa5c1; font-size:10px; }
.creator-card p,.business-card p { margin:0; color:#b4c1d5; font-size:12px; line-height:1.55; }
.creator-cover,.business-cover { padding:clamp(20px,4vw,34px); border:1px solid rgba(125,178,240,.16); border-radius:18px; background:linear-gradient(125deg,rgba(77,57,154,.72),rgba(8,93,112,.68)); }
.creator-profile-head { display:flex; align-items:center; gap:16px; }
.creator-profile-head img { width:88px; height:88px; border:3px solid rgba(157,235,245,.4); border-radius:50%; object-fit:cover; }
.creator-profile-head h1,.business-cover h1 { margin:0 0 4px; font-size:clamp(1.6rem,4vw,2.4rem); }
.creator-stats { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.creator-stats span { padding:7px 11px; border:1px solid rgba(210,235,255,.18); border-radius:999px; color:#d8e8f7; background:rgba(3,10,28,.18); font-size:11px; }
.business-badge { display:inline-flex; width:max-content; padding:5px 9px; border:1px solid rgba(245,196,96,.3); border-radius:999px; color:#f4d28c; background:rgba(245,196,96,.08); font-size:10px; font-weight:800; }
.phase79-form { width:min(760px,100%); margin:18px auto; padding:clamp(18px,4vw,30px); }
.phase79-form .form-stack { display:grid; gap:13px; }
.phase79-form label { display:grid; gap:6px; color:#dbe8fa; font-size:12px; font-weight:750; }
.phase79-form input,.phase79-form textarea,.phase79-form select { width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:#0a1428; font:inherit; }
.phase79-form textarea { min-height:120px; resize:vertical; }
.readiness-summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px; border:1px solid var(--border); border-radius:15px; background:rgba(14,24,44,.9); }
.readiness-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.readiness-item { padding:14px; border:1px solid var(--border); border-radius:12px; background:rgba(14,24,44,.82); }
.readiness-item strong { display:flex; align-items:center; gap:7px; color:#eaf2ff; font-size:12px; }
.readiness-item p { margin:7px 0 0; color:#97a9c4; font-size:11px; line-height:1.5; }
.readiness-pass { color:#73e4b4; }
.readiness-fail { color:#ffbd84; }
@media(max-width:820px) { .creator-grid,.business-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ai-layout { grid-template-columns:1fr; } .ai-sidebar { order:2; } .ai-chat-panel { min-height:480px; } }
@media(max-width:560px) { .creator-grid,.business-grid,.readiness-grid { grid-template-columns:1fr; } .creator-profile-head { align-items:flex-start; } .creator-profile-head img { width:68px; height:68px; } .ai-compose { flex-direction:column; align-items:stretch; } .ai-compose button { width:100%; } }


/* PHASE 10 PREPARATION — PUBLIC INFORMATION AND PARTNER TRACKER */
.public-info-wrap { width:min(900px,100%); margin:0 auto; display:grid; gap:16px; }
.public-info-hero,.shop-prelaunch-hero { padding:clamp(24px,5vw,48px); border:1px solid var(--border); border-radius:22px; background:radial-gradient(ellipse at 90% 5%,rgba(34,197,246,.16),transparent 36%),linear-gradient(135deg,rgba(118,87,255,.18),rgba(14,24,44,.92)); box-shadow:var(--shadow); }
.public-info-hero h1,.shop-prelaunch-hero h1 { margin:8px 0 13px; font-size:clamp(2rem,5vw,3.5rem); }
.public-info-hero p,.shop-prelaunch-hero p { max-width:700px; color:#b9c8df; }
.public-info-card { padding:clamp(18px,4vw,30px); border:1px solid var(--border); border-radius:17px; background:rgba(14,24,44,.9); box-shadow:0 12px 35px rgba(0,0,0,.12); }
.public-info-card h2 { margin:4px 0 9px; font-size:20px; }
.public-info-card p { color:#b5c3d9; line-height:1.75; }
.public-info-card h2:not(:first-child) { margin-top:23px; }
.contact-email { font-size:clamp(20px,4vw,27px); font-weight:850; }
.partner-public-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.partner-approved,.partner-status { display:inline-flex; width:max-content; padding:5px 10px; border-radius:999px; border:1px solid rgba(75,205,159,.25); color:#72dfb2; background:rgba(75,205,159,.09); font-size:10px; font-weight:850; }
.partner-admin-list { display:grid; gap:13px; margin-top:22px; }
.partner-admin-card { padding:18px; }
.partner-admin-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.partner-admin-heading h3 { margin:8px 0 2px; }
.partner-admin-heading small { color:var(--muted); }
.partner-admin-update { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:15px; }
.partner-admin-update label { display:grid; gap:5px; margin:0; color:#dbe8fa; font-size:12px; }
.partner-admin-update label:nth-child(3) { grid-column:1/-1; }
.partner-admin-update input,.partner-admin-update textarea,.partner-admin-update select { margin:0; }
.partner-admin-update button { grid-column:1/-1; justify-self:start; }
.partner-status.status-applied,.partner-status.status-pending { color:#f3d18c; border-color:rgba(243,209,140,.25); background:rgba(243,209,140,.08); }
.partner-status.status-rejected { color:#ffadbd; border-color:rgba(255,125,150,.25); background:rgba(255,125,150,.08); }
.partner-status.status-paused { color:#b7c3d8; border-color:var(--border); background:rgba(130,145,170,.08); }
.shop-prelaunch-hero { min-height:330px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.shop-prelaunch-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.shop-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.shop-feature-grid article { padding:15px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.025); }
.shop-feature-grid p { margin-bottom:0; font-size:12px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 17px; margin:13px 0; }
.footer-links a { font-size:12px; }
.theme-toggle { display:flex; align-items:center; justify-content:center; min-height:40px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:var(--surface-2); font-size:12px; font-weight:750; cursor:pointer; }
.theme-toggle:hover { border-color:var(--secondary); }

/* Phase 10 theme tokens — Light Mode is a complete optional palette, not an inversion. */
:root[data-theme="light"] {
  --bg:#f3f6fb; --bg-soft:#eaf0f8; --surface:#ffffff; --surface-2:#f7f9fc;
  --border:rgba(31,53,85,.13); --text:#18273d; --muted:#65758c;
  --primary:#365fe8; --secondary:#079dbd; --shadow:0 16px 42px rgba(36,57,88,.10);
}
:root[data-theme="light"] body { background:var(--bg); color:var(--text); }
:root[data-theme="light"] a { color:#2458bd; }
:root[data-theme="light"] a:hover { color:#133d95; }
:root[data-theme="light"] .site-header { background:rgba(255,255,255,.94); border-color:var(--border); box-shadow:0 5px 24px rgba(40,60,90,.06); }
:root[data-theme="light"] .brand { color:#17263e; }
:root[data-theme="light"] .brand-world { color:#365fe8; }
:root[data-theme="light"] .main-nav:not([hidden]) { background:rgba(255,255,255,.985); border-color:var(--border); box-shadow:0 24px 65px rgba(31,53,85,.18); }
:root[data-theme="light"] .nav-group { background:#f7f9fd; border-color:var(--border); }
:root[data-theme="light"] .nav-group summary { color:#243650; }
:root[data-theme="light"] .nav-group-links a { color:#43556f; }
:root[data-theme="light"] .nav-group-links a:hover { color:#153d93; background:#e8f1ff; }
:root[data-theme="light"] .nav-menu-footer { border-color:var(--border); color:#73829a; }
:root[data-theme="light"] .nav-menu-footer a { color:#2458bd; }
:root[data-theme="light"] .menu-toggle { background:#f1f5fc; border-color:var(--border); }
:root[data-theme="light"] .menu-toggle span { background:#253954; }
:root[data-theme="light"] .panel,:root[data-theme="light"] .panel-card,:root[data-theme="light"] .post-card,
:root[data-theme="light"] .community-card,:root[data-theme="light"] .creator-card,:root[data-theme="light"] .business-card,
:root[data-theme="light"] .admin-stat,:root[data-theme="light"] .readiness-item,
:root[data-theme="light"] .readiness-summary,:root[data-theme="light"] .public-info-card,
:root[data-theme="light"] .community-search-panel,:root[data-theme="light"] .explore-post-card,
:root[data-theme="light"] .notification-card,:root[data-theme="light"] .message-card {
  color:#1b2a41; background:#fff; border-color:var(--border); box-shadow:0 10px 28px rgba(32,55,89,.055);
}
:root[data-theme="light"] h1,:root[data-theme="light"] h2,:root[data-theme="light"] h3,
:root[data-theme="light"] h4,:root[data-theme="light"] strong,:root[data-theme="light"] .author-name,
:root[data-theme="light"] .creator-card h3,:root[data-theme="light"] .business-card h3,
:root[data-theme="light"] .community-card h2 a { color:#172943; }
:root[data-theme="light"] p,:root[data-theme="light"] .public-info-card p,
:root[data-theme="light"] .creator-card p,:root[data-theme="light"] .business-card p,
:root[data-theme="light"] .community-card p,:root[data-theme="light"] .muted { color:#5e6e84; }
:root[data-theme="light"] .page-heading p,:root[data-theme="light"] .section-heading p { color:#5e6e84; }
:root[data-theme="light"] input,:root[data-theme="light"] textarea,:root[data-theme="light"] select,
:root[data-theme="light"] .phase79-form input,:root[data-theme="light"] .phase79-form textarea,
:root[data-theme="light"] .phase79-form select,:root[data-theme="light"] .community-form-panel input,
:root[data-theme="light"] .community-form-panel select,:root[data-theme="light"] .community-form-panel textarea {
  color:#1b2b44; background:#fff; border-color:#cbd6e5;
}
:root[data-theme="light"] input::placeholder,:root[data-theme="light"] textarea::placeholder { color:#8795a9; }
:root[data-theme="light"] label { color:#344761; }
:root[data-theme="light"] .site-footer { color:#62728a; background:#fff; border-color:var(--border); }
:root[data-theme="light"] .footer-brand { color:#172943; }
:root[data-theme="light"] .menu-toggle[aria-expanded="true"] span { background:#253954; }
:root[data-theme="light"] .theme-toggle { color:#243650; background:#f2f6fc; border-color:#ccd8e8; }
:root[data-theme="light"] .public-info-hero,:root[data-theme="light"] .shop-prelaunch-hero {
  background:radial-gradient(ellipse at 90% 5%,rgba(34,197,246,.11),transparent 36%),linear-gradient(135deg,#e8edff,#f8fbff); border-color:#d7e2f0;
}
:root[data-theme="light"] .public-info-hero p,:root[data-theme="light"] .shop-prelaunch-hero p { color:#56677f; }
:root[data-theme="light"] .shop-feature-grid article { background:#f5f8fd; border-color:#dce5f0; }
:root[data-theme="light"] .shop-feature-grid p { color:#60718a; }
:root[data-theme="light"] .status-pill,:root[data-theme="light"] .partner-status { filter:saturate(.9); }
:root[data-theme="light"] .gather-hero { color:#fff; }

@media(max-width:650px) {
  .partner-admin-update,.shop-feature-grid { grid-template-columns:1fr; }
  .partner-admin-update label:nth-child(3) { grid-column:auto; }
}

/* PHASE 11 — GATHER SHOPPING TOOLS */
.shop11-wrap { width:min(1160px,100%); margin:0 auto; display:grid; gap:22px; }
.shop11-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding:clamp(24px,5vw,46px); border:1px solid var(--border); border-radius:24px; background:radial-gradient(ellipse at 85% 8%,rgba(40,183,235,.17),transparent 35%),linear-gradient(135deg,rgba(91,91,220,.16),var(--surface)); box-shadow:var(--shadow); }
.shop11-hero h1 { max-width:760px; margin:10px 0; font-size:clamp(2rem,5vw,3.5rem); line-height:1.06; letter-spacing:-.04em; }
.shop11-hero p,.shop11-page-heading p { max-width:760px; color:var(--muted); }
.shop11-hero-actions,.shop11-quick-links { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.shop11-quick-links a { display:inline-flex; padding:9px 12px; border:1px solid var(--border); border-radius:999px; color:var(--text); background:var(--surface-2); font-size:12px; font-weight:750; }
.shop11-quick-links a:hover { border-color:var(--secondary); }
.shop11-toolbar,.shop11-alert-panel,.shop11-admin-form { padding:17px; border:1px solid var(--border); border-radius:17px; background:var(--surface); box-shadow:var(--shadow); }
.shop11-search { display:grid; grid-template-columns:minmax(180px,1fr) minmax(130px,.55fr) minmax(150px,.55fr) auto; gap:9px; }
.shop11-search input,.shop11-search select,.shop11-admin-grid input,.shop11-admin-grid select,.shop11-admin-grid textarea,.shop11-admin-update input,.shop11-admin-update select,.shop11-alert-create input,.shop11-alert-create select,.shop11-inline-form input { min-width:0; width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:10px; color:var(--text); background:var(--surface-2); font:inherit; }
.shop11-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.shop11-pill { padding:7px 11px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--surface-2); font-size:11px; font-weight:750; }
.shop11-pill.active { color:#fff; background:var(--primary); border-color:var(--primary); }
.shop11-section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-top:5px; }
.shop11-section-head h2,.shop11-cart-group h2 { margin:0 0 4px; }
.shop11-section-head p { margin:0; color:var(--muted); font-size:12px; }
.shop11-count,.shop11-meta { color:var(--muted); font-size:11px; }
.shop11-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.shop11-product-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:17px; background:var(--surface); box-shadow:0 10px 28px rgba(0,0,0,.08); transition:transform .18s ease,border-color .18s ease; }
.shop11-product-card:hover { transform:translateY(-3px); border-color:var(--secondary); }
.shop11-product-image { position:relative; display:flex; align-items:center; justify-content:center; height:210px; overflow:hidden; background:var(--surface-2); }
.shop11-product-image img { width:100%; height:100%; object-fit:contain; padding:12px; }
.shop11-image-placeholder { display:grid; place-items:center; min-height:160px; width:100%; color:var(--muted); background:linear-gradient(135deg,var(--surface-2),var(--bg-soft)); font-size:12px; font-weight:900; letter-spacing:4px; text-align:center; }
.shop11-deal-tag { display:inline-flex; padding:5px 9px; border-radius:999px; color:#fff; background:#128765; font-size:10px; font-weight:850; }
.shop11-product-image .shop11-deal-tag { position:absolute; top:12px; left:12px; }
.shop11-product-body { display:grid; gap:8px; padding:15px; }
.shop11-product-body h3 { margin:0; font-size:16px; line-height:1.35; }
.shop11-product-body h3 a { color:var(--text); }
.shop11-prices { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.shop11-prices strong { color:var(--text); font-size:19px; }
.shop11-prices del { color:var(--muted); font-size:12px; }
.shop11-card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:5px; }
.shop11-card-actions form { margin:0; }
.btn-small { padding:8px 10px; font-size:11px; }
.shop11-text-button { padding:7px 4px; border:0; color:var(--secondary); background:transparent; font-size:11px; font-weight:800; cursor:pointer; }
.shop11-empty { display:grid; justify-items:center; gap:10px; padding:clamp(28px,6vw,60px) 22px; border:1px dashed var(--border); border-radius:20px; background:var(--surface); text-align:center; }
.shop11-empty h2 { margin:0; }
.shop11-empty p { max-width:650px; color:var(--muted); }
.shop11-empty-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; color:var(--secondary); background:var(--surface-2); font-size:28px; }
.shop11-disclosure,.shop11-retailer-note { color:var(--muted); font-size:11px; line-height:1.65; }
.shop11-page-heading { padding:24px 0 6px; }
.shop11-page-heading h1 { margin:8px 0; font-size:clamp(2rem,5vw,3rem); }
.shop11-back { width:max-content; color:var(--secondary); font-size:12px; font-weight:800; }
.shop11-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,42px); padding:clamp(18px,4vw,32px); border:1px solid var(--border); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }
.shop11-detail-image { min-height:350px; display:grid; place-items:center; overflow:hidden; border-radius:16px; background:var(--surface-2); }
.shop11-detail-image img { width:100%; max-height:520px; object-fit:contain; }
.shop11-detail-copy { align-content:start; display:grid; gap:12px; }
.shop11-detail-copy h1 { margin:0; font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.1; }
.shop11-prices-large strong { font-size:28px; }
.shop11-detail-copy p { color:var(--muted); }
.shop11-detail-actions { display:flex; flex-wrap:wrap; gap:9px; }
.shop11-detail-actions form { margin:0; }
.shop11-buy-button { background:linear-gradient(100deg,#167db5,#3062dc); }
.shop11-alert-form { display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding:13px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); }
.shop11-alert-form label { display:grid; gap:5px; flex:1; min-width:170px; font-size:11px; font-weight:750; }
.shop11-alert-form input { padding:10px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--surface); }
.shop11-related { display:grid; gap:12px; }
.shop11-cart-group { padding:18px; border:1px solid var(--border); border-radius:17px; background:var(--surface); }
.shop11-cart-group>header { display:flex; justify-content:space-between; align-items:center; padding:0 0 12px; border-bottom:1px solid var(--border); background:transparent; }
.shop11-cart-row { display:grid; grid-template-columns:86px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.shop11-cart-thumb { display:grid; place-items:center; width:86px; height:86px; overflow:hidden; border-radius:12px; background:var(--surface-2); }
.shop11-cart-thumb img { width:100%; height:100%; object-fit:contain; }
.shop11-cart-info h3 { margin:0 0 5px; font-size:15px; }
.shop11-cart-info h3 a { color:var(--text); }
.shop11-cart-info>strong { font-size:14px; }
.shop11-inline-form { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.shop11-inline-form label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; }
.shop11-inline-form input { width:66px; padding:7px; }
.shop11-cart-actions { display:grid; justify-items:end; gap:5px; }
.shop11-compare-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.shop11-compare-card { display:grid; align-content:start; gap:9px; padding:15px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.shop11-compare-card>img,.shop11-compare-card>.shop11-image-placeholder { width:100%; height:160px; object-fit:contain; border-radius:11px; background:var(--surface-2); }
.shop11-compare-card h2 { margin:0; font-size:16px; }
.shop11-compare-card h2 a { color:var(--text); }
.shop11-compare-card p { color:var(--muted); font-size:12px; }
.shop11-compare-price { font-size:21px; }
.shop11-alert-create { display:grid; grid-template-columns:1.5fr 1fr auto; gap:10px; align-items:end; }
.shop11-alert-create label { display:grid; gap:5px; font-size:11px; font-weight:750; }
.shop11-alert-list { display:grid; gap:10px; }
.shop11-alert-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px; border:1px solid var(--border); border-radius:13px; background:var(--surface); }
.shop11-alert-row p { margin:4px 0; color:var(--muted); font-size:12px; }
.shop11-admin-form h2 { margin-top:0; }
.shop11-admin-grid,.shop11-admin-update { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.shop11-admin-grid label,.shop11-admin-update label { display:grid; gap:5px; font-size:11px; font-weight:750; }
.shop11-admin-grid .span-two,.shop11-admin-update .span-two { grid-column:1/-1; }
.shop11-form-end { display:flex; align-items:end; }
.shop11-admin-product { display:grid; gap:12px; margin:12px 0; padding:17px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.shop11-admin-product-head { display:flex; justify-content:space-between; gap:12px; }
.shop11-admin-product-head h3 { margin:4px 0; }
.shop11-admin-product-head small { color:var(--muted); }
.shop11-status { display:inline-flex; height:max-content; padding:5px 9px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--surface-2); font-size:10px; font-weight:800; }
.shop11-status.status-published { color:#11835f; border-color:rgba(17,131,95,.25); }
.shop11-status.status-paused { color:#bd8145; }

:root[data-theme="light"] .shop11-hero { background:radial-gradient(ellipse at 85% 8%,rgba(40,183,235,.13),transparent 35%),linear-gradient(135deg,#eaf0ff,#fff); }
:root[data-theme="light"] .shop11-product-card,:root[data-theme="light"] .shop11-toolbar,:root[data-theme="light"] .shop11-alert-panel,
:root[data-theme="light"] .shop11-admin-form,:root[data-theme="light"] .shop11-detail,:root[data-theme="light"] .shop11-cart-group,
:root[data-theme="light"] .shop11-compare-card,:root[data-theme="light"] .shop11-alert-row,:root[data-theme="light"] .shop11-admin-product,
:root[data-theme="light"] .shop11-empty { background:#fff; border-color:#dce4ef; color:#1d2b42; }
:root[data-theme="light"] .shop11-product-body h3 a,:root[data-theme="light"] .shop11-detail-copy h1,
:root[data-theme="light"] .shop11-cart-info h3 a,:root[data-theme="light"] .shop11-compare-card h2 a { color:#1b2a41; }
:root[data-theme="light"] .shop11-product-image,:root[data-theme="light"] .shop11-detail-image,:root[data-theme="light"] .shop11-cart-thumb,
:root[data-theme="light"] .shop11-compare-card>img,:root[data-theme="light"] .shop11-compare-card>.shop11-image-placeholder { background:#f3f6fb; }
:root[data-theme="light"] .shop11-search input,:root[data-theme="light"] .shop11-search select,
:root[data-theme="light"] .shop11-admin-grid input,:root[data-theme="light"] .shop11-admin-grid select,
:root[data-theme="light"] .shop11-admin-grid textarea,:root[data-theme="light"] .shop11-admin-update input,
:root[data-theme="light"] .shop11-admin-update select,:root[data-theme="light"] .shop11-alert-create input,
:root[data-theme="light"] .shop11-alert-create select,:root[data-theme="light"] .shop11-inline-form input { color:#1d2b42; background:#fff; border-color:#cbd6e5; }
@media(max-width:860px) { .shop11-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .shop11-hero { grid-template-columns:1fr; } }
@media(max-width:640px) { .shop11-search,.shop11-alert-create,.shop11-admin-grid,.shop11-admin-update { grid-template-columns:1fr; } .shop11-grid { grid-template-columns:1fr; } .shop11-detail { grid-template-columns:1fr; } .shop11-detail-image { min-height:240px; } .shop11-cart-row { grid-template-columns:64px minmax(0,1fr); } .shop11-cart-thumb { width:64px; height:64px; } .shop11-cart-actions { grid-column:1/-1; display:flex; justify-content:flex-start; justify-items:start; } .shop11-admin-grid .span-two,.shop11-admin-update .span-two { grid-column:auto; } }


/* ==========================================================
   PRE-PHASE 12 POLISH: SIMPLE, FAST, ACCESSIBLE GATHER WORLD
   ========================================================== */
:root {
  color-scheme: dark;
  --content-width: 1160px;
  --page-gutter: clamp(14px, 3.5vw, 36px);
  --focus-ring: 0 0 0 3px rgba(45, 157, 245, .25);
}
:root[data-theme="light"] { color-scheme: light; }

/* Consistent compact header: one three-line menu, three expandable groups. */
.compact-header { flex-direction:row !important; align-items:center !important; justify-content:space-between; gap:14px; }
.compact-header .brand { font-size:20px; }
.compact-home-topbar { position:relative; display:flex; align-items:center; justify-content:space-between; }
.compact-home-topbar .menu-toggle { margin-left:auto; }
.moments-topbar { position:relative; }
.moments-main-nav:not([hidden]) { top:calc(100% + 9px); right:0; }
.main-nav:not([hidden]) { gap:8px; width:min(390px,calc(100vw - 24px)); max-height:min(78vh,720px); padding:14px; border-radius:16px; backdrop-filter:blur(12px); }
.menu-search { position:relative; display:flex; align-items:center; gap:8px; width:100%; margin:0 0 5px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
.menu-search > span { flex:0 0 auto; color:var(--muted); font-size:20px; }
.menu-search input { min-width:0; width:100%; margin:0; padding:11px 0; border:0; outline:0; box-shadow:none !important; background:transparent; color:var(--text); font-size:12px; }
.menu-search kbd { flex:0 0 auto; padding:3px 6px; border:1px solid var(--border); border-radius:5px; color:var(--muted); background:var(--surface); font:10px/1.4 ui-monospace,monospace; }
.nav-group { background:var(--surface-2); border-color:var(--border); }
.nav-group summary { min-height:43px; }
.nav-group-links { grid-template-columns:1fr 1fr; gap:3px 6px; padding:2px 9px 10px 42px; }
.nav-group-links a { min-height:34px; font-size:11px; }
.nav-group-links .nav-subheading { grid-column:1/-1; margin-top:4px; border-top:1px solid var(--border); border-radius:0; padding-top:10px; color:var(--secondary); font-weight:850; }
.menu-logout .nav-button { width:100%; min-height:41px; justify-content:center; }
.nav-menu-footer { letter-spacing:.08em; }
.theme-toggle { width:100%; min-height:40px; justify-content:center; }
.skip-link { position:fixed; z-index:1000; top:8px; left:8px; transform:translateY(-160%); padding:9px 13px; border-radius:8px; color:#fff; background:#245edc; font-weight:800; }
.skip-link:focus { transform:translateY(0); }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

/* Remove the decorative entrance delay from content pages; prioritize usable content. */
main, .page-container { animation:none !important; }
html { scroll-behavior:smooth; }
img { max-width:100%; }
.post-card,.member-card,.community-card,.creator-card,.business-card,.notification-item,.message-list-item,.explore-post-card,.shop11-product-card {
  content-visibility:auto;
  contain-intrinsic-size:auto 300px;
}
.post-card,.member-card,.community-card,.creator-card,.business-card,.shop11-product-card { transition:box-shadow .16s ease,border-color .16s ease; }
:focus-visible { outline:2px solid var(--secondary); outline-offset:3px; box-shadow:var(--focus-ring); }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Full light palette across all existing modules, including legacy page components. */
:root[data-theme="light"] body { background:#f4f7fb; color:#1d2b42; }
:root[data-theme="light"] p { color:#586980; }
:root[data-theme="light"] .tag,:root[data-theme="light"] .section-kicker,:root[data-theme="light"] .eyebrow { color:#4165ad; }
:root[data-theme="light"] .site-header { background:rgba(255,255,255,.96); border-color:#e0e7f0; box-shadow:0 4px 18px rgba(28,48,78,.06); }
:root[data-theme="light"] .main-nav:not([hidden]) { background:rgba(255,255,255,.985); border-color:#dce4ee; box-shadow:0 18px 50px rgba(30,50,80,.16); }
:root[data-theme="light"] .menu-search { background:#f5f8fc; border-color:#d9e2ed; }
:root[data-theme="light"] .menu-search input { color:#1c2d45; }
:root[data-theme="light"] .nav-group { background:#f7f9fc; border-color:#dce4ee; }
:root[data-theme="light"] .nav-group summary { color:#233650; }
:root[data-theme="light"] .nav-group-links a { color:#4b5c73; }
:root[data-theme="light"] .nav-group-links a:hover { color:#1749a2; background:#e9f1ff; }
:root[data-theme="light"] .nav-symbol,:root[data-theme="light"] .nav-menu-footer a { color:#2862c5; }
:root[data-theme="light"] .nav-menu-footer { border-color:#e0e7f0; color:#76859a; }
:root[data-theme="light"] .menu-toggle { border-color:#d7e0ec; background:#f1f5fb; }
:root[data-theme="light"] .menu-toggle span { background:#253b59; }
:root[data-theme="light"] .theme-toggle { color:#2a3b53; background:#f1f5fb; border-color:#d5dfeb; }
:root[data-theme="light"] .theme-toggle:hover { background:#e9f1ff; }
:root[data-theme="light"] .panel,:root[data-theme="light"] .post,
:root[data-theme="light"] .panel-card,:root[data-theme="light"] .post-card,
:root[data-theme="light"] .member-card,:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .guest-banner,:root[data-theme="light"] .empty-state,
:root[data-theme="light"] .settings-card,:root[data-theme="light"] .profile-overview,
:root[data-theme="light"] .comment-card,:root[data-theme="light"] .notification-item,
:root[data-theme="light"] .message-list,:root[data-theme="light"] .message-list-item,
:root[data-theme="light"] .admin-stat,:root[data-theme="light"] .admin-section,
:root[data-theme="light"] .admin-report,:root[data-theme="light"] .admin-user-row,
:root[data-theme="light"] .readiness-item,:root[data-theme="light"] .readiness-summary,
:root[data-theme="light"] .creator-card,:root[data-theme="light"] .business-card,
:root[data-theme="light"] .community-card,:root[data-theme="light"] .community-search-panel,
:root[data-theme="light"] .community-form-panel,:root[data-theme="light"] .public-info-card,
:root[data-theme="light"] .ai-sidebar,:root[data-theme="light"] .ai-chat-panel,
:root[data-theme="light"] .ai-history a,:root[data-theme="light"] .ai-message,
:root[data-theme="light"] .shop11-toolbar,:root[data-theme="light"] .shop11-alert-panel,
:root[data-theme="light"] .shop11-admin-form,:root[data-theme="light"] .shop11-product-card,
:root[data-theme="light"] .shop11-cart-group,:root[data-theme="light"] .shop11-compare-card,
:root[data-theme="light"] .shop11-alert-row,:root[data-theme="light"] .shop11-empty {
  color:#20324b; background:#fff; border-color:#dfe6ef; box-shadow:0 8px 24px rgba(34,54,84,.055);
}
:root[data-theme="light"] h1,:root[data-theme="light"] h2,:root[data-theme="light"] h3,
:root[data-theme="light"] h4,:root[data-theme="light"] strong,:root[data-theme="light"] .author-name,
:root[data-theme="light"] .member-info strong,:root[data-theme="light"] .post-copy,
:root[data-theme="light"] .creator-card h3,:root[data-theme="light"] .business-card h3,
:root[data-theme="light"] .community-card h2 a,:root[data-theme="light"] .notification-copy a,
:root[data-theme="light"] .shop11-product-body h3 a,:root[data-theme="light"] .shop11-detail-copy h1 { color:#1c2d45; }
:root[data-theme="light"] .author-handle,:root[data-theme="light"] .muted,
:root[data-theme="light"] .member-info p,:root[data-theme="light"] .member-info > span,
:root[data-theme="light"] .post-meta,:root[data-theme="light"] .notification-copy p,
:root[data-theme="light"] .notification-copy small,:root[data-theme="light"] .creator-card p,
:root[data-theme="light"] .business-card p,:root[data-theme="light"] .community-card p,
:root[data-theme="light"] .readiness-item p,:root[data-theme="light"] .shop11-section-head p { color:#617188; }
:root[data-theme="light"] input,:root[data-theme="light"] textarea,:root[data-theme="light"] select,
:root[data-theme="light"] .composer textarea,:root[data-theme="light"] .composer-controls input,
:root[data-theme="light"] .composer-controls select,:root[data-theme="light"] .search-bar input,
:root[data-theme="light"] .community-search-form input,:root[data-theme="light"] .community-search-form select,
:root[data-theme="light"] .community-form-panel input,:root[data-theme="light"] .community-form-panel select,
:root[data-theme="light"] .community-form-panel textarea,:root[data-theme="light"] .phase79-form input,
:root[data-theme="light"] .phase79-form textarea,:root[data-theme="light"] .phase79-form select {
  color:#1c2d45; background:#fff; border-color:#cbd6e4;
}
:root[data-theme="light"] input::placeholder,:root[data-theme="light"] textarea::placeholder { color:#8795a8; }
:root[data-theme="light"] label,:root[data-theme="light"] .form-stack label,:root[data-theme="light"] .phase79-form label { color:#344961; }
:root[data-theme="light"] .site-footer { color:#64748b; background:#fff; border-color:#e0e7f0; }
:root[data-theme="light"] .site-footer p { color:#65758a; }
:root[data-theme="light"] .footer-brand { color:#1c2d45; }
:root[data-theme="light"] .quiet-action { color:#315b9d; }
:root[data-theme="light"] .quiet-action:hover { color:#173d82; background:#edf4ff; }
:root[data-theme="light"] .notice { color:#31455f; background:#f7f9fc; border-color:#dfe6ef; }
:root[data-theme="light"] .notice.error { color:#9e3044; background:#fff1f3; border-color:#f3c9d1; }
:root[data-theme="light"] .notice.success { color:#176c4f; background:#ecfaf3; border-color:#c5ebd8; }
:root[data-theme="light"] .ai-message { color:#21324a; background:#f3f6fb; }
:root[data-theme="light"] .ai-message.user { color:#173c70; background:#eaf3ff; }
:root[data-theme="light"] .ai-compose textarea { color:#1c2d45; background:#fff; border-color:#d2dce9; }
:root[data-theme="light"] .creator-stats span { color:#354b68; background:#f5f8fc; border-color:#dbe4ef; }
:root[data-theme="light"] .business-badge { color:#825a17; background:#fff7e6; border-color:#f0dfb9; }
:root[data-theme="light"] .readiness-item strong { color:#233650; }
:root[data-theme="light"] .admin-user-header { color:#50627a; }
:root[data-theme="light"] .shop11-search input,:root[data-theme="light"] .shop11-search select,
:root[data-theme="light"] .shop11-admin-grid input,:root[data-theme="light"] .shop11-admin-grid select,
:root[data-theme="light"] .shop11-admin-grid textarea,:root[data-theme="light"] .shop11-admin-update input,
:root[data-theme="light"] .shop11-admin-update select,:root[data-theme="light"] .shop11-alert-create input,
:root[data-theme="light"] .shop11-alert-create select,:root[data-theme="light"] .shop11-inline-form input { color:#1c2d45; background:#fff; border-color:#cbd6e4; }
:root[data-theme="light"] .shop11-disclosure { color:#617188; }
:root[data-theme="light"] .shop11-quick-links a { color:#2f4d77; background:#f5f8fc; border-color:#dce5ef; }
:root[data-theme="light"] .shop11-pill { color:#52647c; background:#f5f8fc; border-color:#dce5ef; }
:root[data-theme="light"] .shop11-pill.active { color:#fff; background:var(--primary); border-color:var(--primary); }
/* Media remains vivid and immersive in either theme; surrounding controls adapt. */
:root[data-theme="light"] .moments-experience,:root[data-theme="light"] .moment-card { color:#fff; }
:root[data-theme="light"] .gather-hero { color:#fff; }

@media (max-width:760px) {
  .compact-header { flex-direction:row !important; align-items:center !important; }
  .main-nav:not([hidden]) { right:12px; width:min(390px,calc(100vw - 24px)); max-height:calc(100dvh - 86px); }
  .nav-group-links { grid-template-columns:1fr 1fr; }
  .compact-home-topbar { padding-inline:18px; }
  .home-main-nav:not([hidden]) { right:12px; }
}
@media (max-width:430px) {
  .brand { font-size:18px; }
  .menu-toggle { width:43px; height:42px; }
  .nav-group-links { grid-template-columns:1fr; padding-left:39px; }
  .main-nav:not([hidden]) { width:calc(100vw - 16px); right:8px; }
}

/* Additional light-mode refinements for discovery, messaging and community detail pages. */
:root[data-theme="light"] .explore-hero,
:root[data-theme="light"] .topic-hero,
:root[data-theme="light"] .community-hero,
:root[data-theme="light"] .phase79-hero,
:root[data-theme="light"] .message-form-panel,
:root[data-theme="light"] .message-thread-header {
  color:#20324b;
  border-color:#dce5ef;
  background:linear-gradient(125deg,#eaf2ff,#ffffff 72%);
  box-shadow:0 10px 30px rgba(34,54,84,.06);
}
:root[data-theme="light"] .explore-hero h1,
:root[data-theme="light"] .topic-hero h1,
:root[data-theme="light"] .community-hero h1,
:root[data-theme="light"] .phase79-hero h1 { color:#1c2f49; }
:root[data-theme="light"] .explore-hero p,
:root[data-theme="light"] .community-hero p,
:root[data-theme="light"] .phase79-hero p { color:#5b6d84; }
:root[data-theme="light"] .explore-person-card,
:root[data-theme="light"] .explore-community-card,
:root[data-theme="light"] .explore-post-card,
:root[data-theme="light"] .topic-chip,
:root[data-theme="light"] .message-form-panel,
:root[data-theme="light"] .message-thread-header,
:root[data-theme="light"] .message-compose {
  color:#20324b; background:#fff; border-color:#dfe6ef; box-shadow:0 8px 24px rgba(34,54,84,.05);
}
:root[data-theme="light"] .explore-person-card strong,
:root[data-theme="light"] .explore-community-card strong,
:root[data-theme="light"] .explore-post-author strong { color:#1e3049; }
:root[data-theme="light"] .explore-person-card small,
:root[data-theme="light"] .explore-community-card small,
:root[data-theme="light"] .explore-post-author small,
:root[data-theme="light"] .explore-post-meta,
:root[data-theme="light"] .explore-hint { color:#677990; }
:root[data-theme="light"] .explore-person-card p,
:root[data-theme="light"] .explore-community-card p,
:root[data-theme="light"] .explore-post-card > p { color:#53667f; }
:root[data-theme="light"] .topic-chip { color:#315a9b; background:#f2f7ff; border-color:#d5e3f6; }
:root[data-theme="light"] .topic-chip small { color:#6b7d95; }
:root[data-theme="light"] .message-list-copy strong { color:#20324b; }
:root[data-theme="light"] .message-list-copy small,
:root[data-theme="light"] .message-list-meta,
:root[data-theme="light"] .message-bubble-meta small { color:#687b93; }
:root[data-theme="light"] .message-bubble { color:#20324b; background:#f3f6fb; border-color:#dce5ef; }
:root[data-theme="light"] .message-bubble p { color:#263a55; }
:root[data-theme="light"] .message-bubble.mine { color:#123b67; background:#e8f2ff; border-color:#cbdff7; }
:root[data-theme="light"] .message-bubble.mine p { color:#173f6c; }
:root[data-theme="light"] .message-bubble-meta a { color:#285fa8; }
:root[data-theme="light"] .message-thread-members a { color:#315f9e; background:#f5f8fd; }
:root[data-theme="light"] .community-detail-copy p { color:#eaf2ff; }
:root[data-theme="light"] .community-detail-hero { border-color:#cbd9ec; }
:root[data-theme="light"] .moment-description,
:root[data-theme="light"] .moment-author-text strong,
:root[data-theme="light"] .moment-author-text small,
:root[data-theme="light"] .moment-post-meta,
:root[data-theme="light"] .moment-caption,
:root[data-theme="light"] .moment-caption p,
:root[data-theme="light"] .moments-hint { color:#fff; }
:root[data-theme="light"] .gather-description,
:root[data-theme="light"] .gather-eyebrow,
:root[data-theme="light"] .gather-stats { color:#fff; }
:root[data-theme="light"] .gather-hero h1 { color:#fff; }


/* =========================================================
   HOMEPAGE HEADING + COMPLETE SITE FOOTER UPDATE
   ========================================================= */
.gather-topbar {
  min-height: 78px;
  padding-inline: clamp(20px, 7vw, 104px);
  background: linear-gradient(180deg, rgba(5, 12, 25, .42), rgba(5, 12, 25, .10));
  border-bottom-color: rgba(255,255,255,.18);
}
.gather-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1;
  letter-spacing: -.7px;
  text-shadow: 0 2px 14px rgba(0,0,0,.26);
}
.gather-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 11px;
  font-size: 19px;
}
.gather-brand-name { white-space: nowrap; }
.gather-brand-name > span { color: #b9d7ff; }
.gather-hero-content {
  max-width: 610px;
  padding-top: clamp(84px, 11vh, 128px);
  padding-bottom: 70px;
}
.gather-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  margin-bottom: 17px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 999px;
  background: rgba(9,19,35,.30);
  backdrop-filter: blur(8px);
}
.gather-hero h1 {
  max-width: 590px;
  margin-bottom: 18px;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0,0,0,.22);
}
.gather-description {
  max-width: 510px;
  margin-bottom: 25px;
  line-height: 1.75;
  text-wrap: pretty;
}
.gather-hero-buttons { gap: 11px; }
.gather-cta { min-height: 46px; padding-inline: 21px; border-radius: 8px; }
.gather-stats {
  display: inline-flex;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 999px;
  background: rgba(8,17,31,.28);
  backdrop-filter: blur(7px);
}

.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding: 48px clamp(18px, 6vw, 88px) 20px;
  text-align: left;
  background: #0b1220;
  border-top: 1px solid rgba(148,163,184,.22);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, 1fr));
  gap: clamp(20px, 3vw, 44px);
  max-width: 1320px;
  margin: 0 auto;
}
.footer-intro { max-width: 310px; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; }
.footer-brand span { color: #64b5ff; }
.site-footer p { margin: 12px 0 0; color: #d4deec; line-height: 1.6; }
.site-footer .footer-note { margin-top: 8px; color: #98a8bd; font-size: 13px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-column h2 { margin: 2px 0 6px; color: #f3f7fd; font-size: 13px; font-weight: 750; letter-spacing: .04em; }
.footer-column a, .footer-bottom a { color: #aebdd0; font-size: 13px; text-decoration: none; transition: color .16s ease; }
.footer-column a:hover, .footer-bottom a:hover { color: #70bdff; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1320px; margin: 34px auto 0; padding-top: 17px;
  border-top: 1px solid rgba(148,163,184,.18); color: #8798ad; font-size: 12px;
}
:root[data-theme="light"] .site-footer { background: #f7f9fc; border-color: #e0e7f0; }
:root[data-theme="light"] .site-footer p { color: #53657d; }
:root[data-theme="light"] .site-footer .footer-note,
:root[data-theme="light"] .footer-bottom { color: #73839a; }
:root[data-theme="light"] .footer-brand,
:root[data-theme="light"] .footer-column h2 { color: #1d304b; }
:root[data-theme="light"] .footer-column a,
:root[data-theme="light"] .footer-bottom a { color: #51647d; }
:root[data-theme="light"] .footer-column a:hover,
:root[data-theme="light"] .footer-bottom a:hover { color: #185fbd; }

@media (max-width: 980px) {
  .footer-inner { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer-intro { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 620px) {
  .gather-topbar { min-height: 68px; padding-inline: 18px; flex-direction: row; align-items: center; }
  .gather-brand { font-size: 23px; }
  .gather-hero-content { padding-top: 112px; padding-bottom: 82px; }
  .gather-hero h1 { font-size: clamp(34px, 10vw, 45px); }
  .gather-description { font-size: 14px; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 18px; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   HOMEPAGE HEADER ALIGNMENT
   Brand stays LEFT, hamburger stays RIGHT; hero heading is CENTERED.
   ========================================================= */
body:has(.gather-hero) .compact-home-topbar {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 78px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  padding-inline: clamp(18px, 6vw, 88px) !important;
  z-index: 250;
}
body:has(.gather-hero) .compact-home-topbar .gather-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 1 auto;
  margin: 0 auto 0 0;
  text-align: left;
}
body:has(.gather-hero) .compact-home-topbar > .menu-toggle {
  display: flex !important;
  flex: 0 0 47px;
  width: 47px;
  margin: 0 0 0 auto !important;
}
body:has(.gather-hero) .home-main-nav:not([hidden]) {
  top: calc(100% + 8px);
  right: clamp(18px, 6vw, 88px);
  left: auto;
}
body:has(.gather-hero) .gather-hero-content {
  width: min(100%, 850px);
  max-width: 850px;
  margin: 0 auto;
  padding: clamp(132px, 17vh, 172px) 0 78px;
  text-align: center;
}
body:has(.gather-hero) .gather-eyebrow {
  margin-inline: auto;
}
body:has(.gather-hero) .gather-hero h1 {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
body:has(.gather-hero) .gather-description {
  max-width: 690px;
  margin-inline: auto;
  text-align: center;
}
body:has(.gather-hero) .gather-hero-buttons {
  justify-content: center;
}
body:has(.gather-hero) .gather-stats {
  justify-content: center;
  margin-inline: auto;
}
body:has(.gather-hero) .gather-bottom-label {
  justify-content: center;
  gap: clamp(22px, 5vw, 68px);
  text-align: center;
}
@media (max-width: 700px) {
  body:has(.gather-hero) .compact-home-topbar {
    min-height: 68px;
    padding-inline: 16px !important;
  }
  body:has(.gather-hero) .compact-home-topbar .gather-brand {
    font-size: 21px;
  }
  body:has(.gather-hero) .compact-home-topbar > .menu-toggle {
    flex-basis: 43px;
    width: 43px;
    height: 42px;
  }
  body:has(.gather-hero) .home-main-nav:not([hidden]) {
    right: 12px;
  }
  body:has(.gather-hero) .gather-hero-content {
    padding: 116px 0 82px;
  }
  body:has(.gather-hero) .gather-hero h1 {
    font-size: clamp(34px, 9vw, 48px);
  }
  body:has(.gather-hero) .gather-description {
    padding-inline: 4px;
  }
}

/* ======================================================================
   GATHER WORLD PHASES 12–17 — SIMPLE PROFESSIONAL DIRECTORY MODULES
   ====================================================================== */
.gw-directory-page { width:min(1120px,100%); margin:0 auto; padding:8px 0 34px; color:var(--text); }
.gw-directory-hero { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(230px,.75fr); gap:24px; align-items:center; padding:clamp(22px,4vw,38px); border:1px solid var(--border); border-radius:20px; background:linear-gradient(135deg,rgba(35,91,171,.14),rgba(105,82,219,.10)),var(--surface); box-shadow:0 12px 34px rgba(0,0,0,.08); }
.gw-directory-hero h1,.gw-directory-section-heading h1 { margin:8px 0 10px; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.045em; }
.gw-directory-hero p,.gw-directory-section-heading p { max-width:720px; color:var(--muted); margin:0; }
.gw-directory-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.gw-directory-hero-note { display:grid; gap:9px; padding:22px; border:1px solid var(--border); border-radius:15px; background:var(--bg-soft); color:var(--muted); font-size:13px; }
.gw-directory-hero-note strong { color:var(--text); font-size:16px; }
.gw-directory-note-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,#2866d8,#7657ff); font-size:20px; }
.gw-directory-toolbar { margin:22px 0; padding:14px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.gw-directory-search { display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,220px) auto; gap:10px; }
.gw-directory-search input,.gw-directory-search select,.gw-directory-form input,.gw-directory-form textarea,.gw-directory-form select,.gw-directory-contact textarea { width:100%; min-width:0; padding:12px 13px; border:1px solid var(--border); border-radius:10px; background:var(--bg-soft); color:var(--text); font:inherit; }
.gw-directory-section-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:28px 0 16px; }
.gw-directory-section-heading h2 { margin:6px 0 0; font-size:clamp(1.4rem,3vw,2rem); }
.gw-directory-count { color:var(--muted); font-size:13px; white-space:nowrap; }
.gw-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.gw-directory-card { overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.gw-directory-card:hover { transform:translateY(-2px); border-color:rgba(74,145,255,.48); box-shadow:0 14px 34px rgba(0,0,0,.12); }
.gw-directory-card-media { position:relative; height:160px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#19365d,#255a8b 55%,#5d52a7); }
.gw-directory-card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.gw-directory-initial { color:rgba(255,255,255,.94); font-size:64px; font-weight:850; letter-spacing:-.08em; text-shadow:0 4px 24px rgba(0,0,0,.2); }
.gw-directory-kind { position:absolute; left:12px; top:12px; padding:5px 9px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(8,15,28,.72); color:#fff; font-size:10px; font-weight:800; letter-spacing:.04em; }
.gw-directory-card-body { padding:16px; }
.gw-directory-card-meta { display:flex; flex-wrap:wrap; gap:7px 12px; color:var(--muted); font-size:11px; font-weight:750; }
.gw-directory-card h3 { margin:8px 0; font-size:18px; line-height:1.3; }
.gw-directory-card h3 a { color:var(--text); }
.gw-directory-card-body p { min-height:58px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.gw-directory-card-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-top:15px; padding-top:12px; border-top:1px solid var(--border); font-size:12px; }
.gw-directory-card-bottom strong { color:var(--text); }
.gw-text-link,.gw-back-link { color:var(--secondary); font-size:13px; font-weight:750; }
.gw-muted { color:var(--muted); }
.gw-directory-event-date { margin-top:10px; color:var(--muted); font-size:11px; }
.gw-directory-empty { display:grid; justify-items:center; gap:10px; padding:48px 20px; text-align:center; border:1px dashed var(--border); border-radius:18px; background:var(--surface); }
.gw-directory-empty h2 { margin:0; font-size:22px; }
.gw-directory-empty p { max-width:520px; margin:0 0 8px; color:var(--muted); }
.gw-directory-empty-icon { color:var(--secondary); font-size:34px; }
.gw-directory-disclaimer { margin:18px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.gw-directory-form-page { max-width:900px; }
.gw-directory-form-card { padding:clamp(18px,3vw,30px); border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.gw-directory-form { display:grid; gap:18px; }
.gw-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.gw-directory-form label,.gw-directory-contact label { display:grid; align-content:start; gap:7px; color:var(--text); font-size:13px; font-weight:750; }
.gw-directory-form label span { color:#ef8a99; }
.gw-directory-form small { color:var(--muted); font-size:11px; font-weight:500; }
.gw-directory-form .gw-span-two { grid-column:1/-1; }
.gw-directory-form-notice { padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft); }
.gw-directory-form-notice strong { color:var(--text); font-size:13px; }
.gw-directory-form-notice p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.gw-directory-form-actions,.gw-directory-detail-actions,.gw-directory-rsvp { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.gw-directory-detail { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:0; margin-top:16px; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.gw-directory-detail-media { min-height:420px; position:relative; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#17375c,#356b94 52%,#5b4e9e); }
.gw-directory-detail-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gw-directory-detail-initial { color:#fff; font-size:110px; font-weight:900; }
.gw-directory-detail-content { padding:clamp(20px,4vw,38px); }
.gw-directory-detail-content h1 { margin:12px 0; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.12; }
.gw-directory-lead { color:var(--muted); font-size:17px; }
.gw-directory-price { margin:18px 0; color:var(--secondary); font-size:20px; font-weight:850; }
.gw-directory-description { margin:20px 0; color:var(--text); white-space:pre-wrap; line-height:1.75; }
.gw-directory-detail-actions { margin:20px 0; }
.gw-directory-owner { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:15px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
.gw-directory-owner strong { color:var(--text); }
.gw-directory-event-panel { display:grid; gap:6px; margin:18px 0; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft); color:var(--muted); font-size:12px; }
.gw-directory-event-panel strong { color:var(--text); }
.gw-directory-contact { display:grid; gap:10px; margin:18px 0; }
.gw-directory-rsvp { margin:15px 0; }
.gw-my-listings,.gw-admin-listings { display:grid; gap:10px; }
.gw-my-listing-row,.gw-admin-listing { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.gw-my-listing-row h3,.gw-admin-listing h3 { margin:5px 0; font-size:16px; }
.gw-my-listing-row small,.gw-admin-listing small,.gw-admin-listing p { color:var(--muted); font-size:11px; }
.gw-listing-type { color:var(--secondary); font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.gw-my-listing-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.gw-my-listing-actions form,.gw-admin-listing form { margin:0; }
.gw-admin-listing p { margin:4px 0; }
:root[data-theme="light"] .gw-directory-hero,:root[data-theme="light"] .gw-directory-card,:root[data-theme="light"] .gw-directory-toolbar,:root[data-theme="light"] .gw-directory-form-card,:root[data-theme="light"] .gw-directory-detail,:root[data-theme="light"] .gw-directory-empty,:root[data-theme="light"] .gw-my-listing-row,:root[data-theme="light"] .gw-admin-listing { background:#fff; border-color:#dfe6ef; color:#20324b; box-shadow:0 8px 24px rgba(34,54,84,.05); }
:root[data-theme="light"] .gw-directory-hero-note,:root[data-theme="light"] .gw-directory-event-panel,:root[data-theme="light"] .gw-directory-form-notice { background:#f5f8fc; border-color:#dfe6ef; }
:root[data-theme="light"] .gw-directory-hero-note strong,:root[data-theme="light"] .gw-directory-card h3 a,:root[data-theme="light"] .gw-directory-card-bottom strong,:root[data-theme="light"] .gw-directory-form label,:root[data-theme="light"] .gw-directory-detail-content h1,:root[data-theme="light"] .gw-directory-description,:root[data-theme="light"] .gw-directory-owner strong,:root[data-theme="light"] .gw-directory-event-panel strong { color:#1d304a; }
:root[data-theme="light"] .gw-directory-hero p,:root[data-theme="light"] .gw-directory-section-heading p,:root[data-theme="light"] .gw-directory-card-body p,:root[data-theme="light"] .gw-directory-card-meta,:root[data-theme="light"] .gw-directory-disclaimer,:root[data-theme="light"] .gw-muted,:root[data-theme="light"] .gw-directory-event-panel span { color:#64758b; }
:root[data-theme="light"] .gw-directory-search input,:root[data-theme="light"] .gw-directory-search select,:root[data-theme="light"] .gw-directory-form input,:root[data-theme="light"] .gw-directory-form textarea,:root[data-theme="light"] .gw-directory-form select,:root[data-theme="light"] .gw-directory-contact textarea { color:#1d304a; background:#fff; border-color:#ccd7e5; }
@media(max-width:850px) { .gw-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .gw-directory-hero { grid-template-columns:1fr; } .gw-directory-detail { grid-template-columns:1fr; } .gw-directory-detail-media { min-height:260px; } }
@media(max-width:620px) { .gw-directory-grid,.gw-directory-search,.gw-form-grid { grid-template-columns:1fr; } .gw-directory-form .gw-span-two { grid-column:auto; } .gw-directory-section-heading,.gw-my-listing-row,.gw-admin-listing { align-items:flex-start; flex-direction:column; } .gw-directory-card-media { height:180px; } .gw-directory-hero { padding:20px; } }
.gw-service-inquiries { display:grid; gap:12px; }
.gw-service-inquiry { padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.gw-inquiry-by { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; }
.gw-inquiry-by strong { color:var(--text); }
.gw-inquiry-by span { color:var(--muted); margin-left:auto; }
.gw-service-inquiry p { margin:12px 0 0; color:var(--text); white-space:pre-wrap; }
:root[data-theme="light"] .gw-service-inquiry { background:#fff; border-color:#dfe6ef; }
:root[data-theme="light"] .gw-inquiry-by strong,:root[data-theme="light"] .gw-service-inquiry p { color:#20324b; }