/*
=================================================================
KefiCircle — Phase 7E Clean Production Stylesheet
=================================================================

This is a clean implementation.

community.css remains the legacy/reference implementation and must
not be deleted until the replacement has passed automated and
browser visual acceptance.

Preserved product contracts:

- senior-friendly readability and touch targets
- 68px application header
- 64px collapsed desktop navigation rail
- 214px expanded overlay navigation rail
- responsive/mobile navigation
- full-color People Circle branding
- tagline: Connect · Support · Belong
- existing navigation destinations and permissions
- five selectable themes:
    Cool
    Fresh
    Balanced
    Warm
    Vibrant
- existing Django behavior remains outside CSS responsibility

Do not copy legacy declarations into this file merely because they
exist in community.css.
*/


/* ==============================================================
   1. CORE DESIGN TOKENS
   ============================================================== */

:root {
    --header-height: 68px;
    --rail-width: 64px;
    --rail-expanded-width: 214px;

    --content-max-width: 1180px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --touch-target: 44px;

    --font-body:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-size-body: 1rem;
    --line-height-body: 1.55;

    /*
     * Balanced is the default palette.
     */

    --page-bg: #f5f7f8;
    --surface: #ffffff;
    --surface-soft: #eef2f3;

    --text: #202529;
    --text-muted: #5d686f;

    --border: #d6dde1;

    --accent: #356b66;
    --accent-strong: #285651;
    --accent-text: #ffffff;

    --focus: #245ea8;

    --shadow-sm:
        0 1px 3px rgb(0 0 0 / 0.08);

    --shadow-md:
        0 4px 14px rgb(0 0 0 / 0.10);
}


/* ==============================================================
   2. THEME TOKENS
   ============================================================== */

.theme-balanced {
    --page-bg: #f5f7f8;
    --surface: #ffffff;
    --surface-soft: #eef2f3;
    --text: #202529;
    --text-muted: #5d686f;
    --border: #d6dde1;
    --accent: #356b66;
    --accent-strong: #285651;
    --accent-text: #ffffff;
}

.theme-cool {
    --page-bg: #f3f7fa;
    --surface: #ffffff;
    --surface-soft: #eaf1f6;
    --text: #202830;
    --text-muted: #596873;
    --border: #d3dee6;
    --accent: #376d86;
    --accent-strong: #28566d;
    --accent-text: #ffffff;
}

.theme-fresh {
    --page-bg: #f3f8f4;
    --surface: #ffffff;
    --surface-soft: #e9f2eb;
    --text: #202922;
    --text-muted: #59685d;
    --border: #d2dfd5;
    --accent: #427451;
    --accent-strong: #315b3d;
    --accent-text: #ffffff;
}

.theme-warm {
    --page-bg: #faf6f0;
    --surface: #ffffff;
    --surface-soft: #f4ece1;
    --text: #2b2722;
    --text-muted: #70665a;
    --border: #e3d8c9;
    --accent: #8a633e;
    --accent-strong: #6c4b2e;
    --accent-text: #ffffff;
}

.theme-vibrant {
    --page-bg: #f7f5fa;
    --surface: #ffffff;
    --surface-soft: #efebf5;
    --text: #27232d;
    --text-muted: #665e70;
    --border: #ddd5e5;
    --accent: #66528c;
    --accent-strong: #503e72;
    --accent-text: #ffffff;
}


/* ==============================================================
   3. DOCUMENT FOUNDATION
   ============================================================== */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);

    color: var(--text);
    background: var(--page-bg);
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
select,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    min-height: var(--touch-target);
}

a {
    color: var(--accent-strong);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}


/* ==============================================================
   4. ACCESSIBILITY UTILITIES
   ============================================================== */

.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;
}


/* ==============================================================
   5. CLEAN-ROOM BOUNDARY
   ============================================================== */

/*
 * STOP HERE FOR THE BOOTSTRAP.
 *
 * The application shell, navigation, dashboard, cards, forms,
 * buttons and responsive component rules will be implemented next.
 *
 * A substantially unstyled browser after this bootstrap is
 * EXPECTED. That demonstrates that community.css is no longer
 * controlling the presentation.
 */



/* ==============================================================
   PHASE-7E-CLEAN-SHELL-24763
   6. APPLICATION SHELL
   ============================================================== */

/*
 * Desktop geometry:
 *
 *     top bar:       68px
 *     rail closed:   64px
 *     rail expanded: 214px
 *
 * Expansion overlays the page. It must not push/reflow app-main.
 */

.kefi-app {
    min-height: 100vh;
    background: var(--page-bg);
}


/* --------------------------------------------------------------
   TOP BAR
   -------------------------------------------------------------- */

.app-topbar {
    position: fixed;
    z-index: 1000;

    top: 0;
    right: 0;
    left: 0;

    height: var(--header-height);

    display: flex;
    align-items: center;

    gap: var(--space-4);
    padding: 0 var(--space-5);

    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}


/*
 * Branding is deliberately kept visually stable rather than
 * changing width when the navigation rail expands.
 */

.kefi-brand {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: var(--space-3);

    min-width: 0;

    color: var(--text);
    text-decoration: none;
}

.kefi-brand:hover {
    text-decoration: none;
}

.kefi-brand img,
.kefi-brand svg {
    flex: 0 0 auto;
}

.kefi-brand-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;

    line-height: 1.15;
}

.kefi-brand-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.kefi-brand-tagline {
    margin-top: 2px;

    font-size: 0.78rem;
    font-weight: 500;

    color: var(--text-muted);

    white-space: nowrap;
}


/*
 * Search occupies available center space when present.
 */

.app-search {
    flex: 1 1 auto;

    width: min(100%, 560px);
    max-width: 560px;

    margin-inline: auto;
}

.app-search input,
.app-search input[type="search"] {
    width: 100%;
    min-height: var(--touch-target);

    padding: 0.6rem 0.85rem;

    color: var(--text);
    background: var(--surface-soft);

    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.app-search input:focus,
.app-search input[type="search"]:focus {
    background: var(--surface);
    border-color: var(--accent);
}


/*
 * Keep miscellaneous top-bar controls aligned without imposing
 * application behavior on them.
 */

.app-topbar button,
.app-topbar a {
    flex-shrink: 0;
}


/* --------------------------------------------------------------
   APP FRAME
   -------------------------------------------------------------- */

.app-frame {
    min-height: 100vh;
}


/* --------------------------------------------------------------
   DESKTOP NAVIGATION RAIL
   -------------------------------------------------------------- */

.app-sidebar {
    position: fixed;
    z-index: 900;

    top: var(--header-height);
    bottom: 0;
    left: 0;

    width: var(--rail-width);

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--surface);
    border-right: 1px solid var(--border);

    box-shadow: 2px 0 8px rgb(0 0 0 / 0.04);

    transition:
        width 180ms ease,
        box-shadow 180ms ease;
}


/*
 * Hover is convenient for pointer users.
 *
 * :focus-within gives keyboard users the same expanded navigation
 * without requiring JavaScript.
 */

.app-sidebar:hover,
.app-sidebar:focus-within {
    width: var(--rail-expanded-width);
    box-shadow: var(--shadow-md);
}


.app-nav {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);

    width: var(--rail-expanded-width);

    padding: var(--space-3) var(--space-2);
}


/*
 * Preserve a fixed 48px nav row so icon positions do not jump
 * when the rail expands.
 */

.app-nav a,
.app-nav button {
    position: relative;

    display: flex;
    align-items: center;

    width: calc(var(--rail-expanded-width) - (2 * var(--space-2)));
    min-height: 48px;

    gap: var(--space-3);

    padding: 0 var(--space-3);

    color: var(--text);
    background: transparent;

    border: 0;
    border-radius: var(--radius-md);

    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.app-nav a:hover,
.app-nav button:hover {
    color: var(--accent-strong);
    background: var(--surface-soft);
}

.app-nav a[aria-current="page"],
.app-nav .active {
    color: var(--accent-strong);
    background: var(--surface-soft);
    font-weight: 650;
}


/*
 * Icon column remains fixed at 32px.
 *
 * With the rail collapsed, the icon remains visually centered.
 */

.nav-icon {
    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: currentColor;
}

.nav-icon svg {
    width: 24px;
    height: 24px;

    display: block;
}


/*
 * Labels exist in the DOM at all times.
 *
 * They are visually suppressed in the collapsed state, then
 * revealed when hover/focus expands the rail.
 */

.nav-label {
    min-width: 0;

    opacity: 0;
    visibility: hidden;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    transform: translateX(-4px);

    transition:
        opacity 120ms ease,
        transform 120ms ease,
        visibility 0s linear 120ms;
}

.app-sidebar:hover .nav-label,
.app-sidebar:focus-within .nav-label {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);

    transition:
        opacity 150ms ease 40ms,
        transform 150ms ease 40ms,
        visibility 0s;
}


/* --------------------------------------------------------------
   MAIN APPLICATION CONTENT
   -------------------------------------------------------------- */

.app-main {
    min-height: calc(100vh - var(--header-height));

    margin-top: var(--header-height);
    margin-left: var(--rail-width);

    padding: var(--space-6);

    background: var(--page-bg);
}


/*
 * The rail intentionally overlays app-main when expanded.
 * There is therefore NO hover rule changing app-main margin-left.
 */


/* --------------------------------------------------------------
   MOBILE NAVIGATION
   -------------------------------------------------------------- */

.mobile-nav {
    display: none;
}


/* --------------------------------------------------------------
   GENERAL SHELL RESPONSIVENESS
   -------------------------------------------------------------- */

@media (max-width: 900px) {

    .app-topbar {
        padding-inline: var(--space-4);
    }

    .kefi-brand-tagline {
        display: none;
    }

    .app-search {
        max-width: none;
    }
}


/*
 * At phone/small-tablet width the desktop rail disappears and
 * the existing mobile navigation becomes the primary navigation.
 */

@media (max-width: 720px) {

    :root {
        --mobile-nav-height: 64px;
    }

    .app-topbar {
        height: var(--header-height);

        gap: var(--space-3);
        padding-inline: var(--space-3);
    }

    .app-sidebar {
        display: none;
    }

    .app-main {
        min-height:
            calc(
                100vh
                - var(--header-height)
                - var(--mobile-nav-height)
            );

        margin-top: var(--header-height);
        margin-left: 0;

        padding:
            var(--space-4)
            var(--space-3)
            calc(var(--mobile-nav-height) + var(--space-5));
    }

    .mobile-nav {
        position: fixed;
        z-index: 1000;

        right: 0;
        bottom: 0;
        left: 0;

        min-height: var(--mobile-nav-height);

        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));

        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 10px rgb(0 0 0 / 0.07);
    }

    .mobile-nav a {
        min-width: 0;
        min-height: var(--mobile-nav-height);

        display: flex;
        align-items: center;
        justify-content: center;

        padding: var(--space-2);

        color: var(--text-muted);

        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.2;

        text-align: center;
        text-decoration: none;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible,
    .mobile-nav a[aria-current="page"],
    .mobile-nav .active {
        color: var(--accent-strong);
        background: var(--surface-soft);
    }
}


/*
 * Very narrow devices: avoid allowing optional search UI to
 * consume the entire header.
 */

@media (max-width: 520px) {

    .app-topbar {
        gap: var(--space-2);
    }

    .kefi-brand-copy {
        display: none;
    }

    .app-search {
        min-width: 0;
    }

    .app-main {
        padding-right: var(--space-3);
        padding-left: var(--space-3);
    }
}


/* --------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .app-sidebar,
    .nav-label {
        transition: none;
    }
}



/* ==============================================================
   PHASE-7E-BRAND-SIZING-56318
   7. BRAND ASSET GEOMETRY
   ============================================================== */

/*
 * The production logo source is intentionally high resolution.
 * Its rendered dimensions must therefore be explicit.
 *
 * Desktop product geometry:
 *
 *     brand box: 210 x 54px
 *     logo:      205 x 52px
 *
 * This fits inside the fixed 68px application header without
 * relying on the PNG's intrinsic 1926 x 816 dimensions.
 */

.kefi-brand {
    width: 210px;
    height: 54px;

    overflow: hidden;

    padding: 0;
}

.kefi-logo {
    display: block;

    width: 205px;
    height: 52px;

    max-width: none;

    object-fit: contain;
    object-position: left center;
}


/*
 * Intermediate desktop/tablet sizing.
 */

@media (min-width: 721px) and (max-width: 1120px) {

    .kefi-brand {
        width: 175px;
    }

    .kefi-logo {
        width: 170px;
    }
}


/*
 * Phone sizing.
 *
 * The shell retains the Phase 7E 68px header contract. Only the
 * horizontal brand footprint is reduced.
 */

@media (max-width: 720px) {

    .kefi-brand {
        width: 116px;
        height: 46px;
    }

    .kefi-logo {
        width: 114px;
        height: 44px;
    }
}



/* ==============================================================
   PHASE-7E-SHELL-COMPONENTS-72841
   8. SHELL COMPONENT COMPLETION
   ============================================================== */


/* --------------------------------------------------------------
   BRAND — FINAL DESKTOP VISUAL SIZE
   -------------------------------------------------------------- */

/*
 * The source PNG contains transparent padding, so its CSS box
 * needs to be somewhat larger than its apparent visible artwork.
 *
 * Header remains exactly 68px high.
 */

.kefi-brand {
    width: 255px;
    height: 60px;
}

.kefi-logo {
    width: 250px;
    height: 60px;

    object-fit: contain;
    object-position: left center;
}


/* --------------------------------------------------------------
   GLOBAL SEARCH
   -------------------------------------------------------------- */

.app-search {
    flex: 1 1 520px;

    display: flex;
    align-items: stretch;

    width: min(100%, 560px);
    max-width: 560px;

    margin-inline: auto;
}

.app-search input,
.app-search input[type="search"] {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    min-height: 44px;

    margin: 0;
    padding: 0 0.9rem;

    border: 1px solid var(--border);
    border-right: 0;
    border-radius:
        var(--radius-md)
        0
        0
        var(--radius-md);

    background: var(--surface-soft);
}

.app-search button {
    flex: 0 0 auto;

    min-width: 84px;
    min-height: 44px;

    margin: 0;
    padding: 0 1rem;

    border: 1px solid var(--accent);
    border-radius:
        0
        var(--radius-md)
        var(--radius-md)
        0;

    color: var(--accent-text);
    background: var(--accent);

    font: inherit;
    font-weight: 650;

    cursor: pointer;
}

.app-search button:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.app-search button:focus-visible {
    position: relative;
    z-index: 1;
}


/* --------------------------------------------------------------
   ACCOUNT MENU
   -------------------------------------------------------------- */

.account-menu {
    position: relative;

    flex: 0 0 auto;

    margin: 0;
}

.account-menu > summary {
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 0.55rem;

    padding: 0.25rem 0.55rem;

    border-radius: var(--radius-md);

    color: var(--text);

    cursor: pointer;
    list-style: none;
    user-select: none;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.account-menu > summary:hover {
    background: var(--surface-soft);
}

.account-menu[open] > summary {
    background: var(--surface-soft);
}

.user-initial {
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--accent-text);
    background: var(--accent);

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.user-summary-name {
    max-width: 150px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-weight: 600;
}

.account-menu-chevron {
    flex: 0 0 auto;

    color: var(--text-muted);

    font-size: 0.8rem;

    transition: transform 150ms ease;
}

.account-menu[open] .account-menu-chevron {
    transform: rotate(180deg);
}

.account-menu-panel {
    position: absolute;
    z-index: 1200;

    top: calc(100% + 8px);
    right: 0;

    width: 280px;
    max-width: calc(100vw - 24px);

    padding: var(--space-4);

    color: var(--text);
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}

.account-menu-name {
    display: block;

    margin-bottom: var(--space-3);

    font-size: 1rem;
}

.account-menu-panel a {
    color: var(--text);
}

.account-theme {
    display: grid;

    gap: var(--space-2);

    margin-bottom: var(--space-3);
}

.account-theme label {
    color: var(--text-muted);

    font-size: 0.88rem;
    font-weight: 600;
}

.account-theme select {
    width: 100%;
    min-height: 44px;

    padding: 0.5rem 0.7rem;

    color: var(--text);
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    font: inherit;
}


/* --------------------------------------------------------------
   CATEGORY SVG SAFETY / GEOMETRY
   -------------------------------------------------------------- */

/*
 * Community Home category artwork is inline SVG.
 *
 * Without an explicit rule SVG paths/rectangles use the browser's
 * default black fill. That produced the giant black rounded
 * rectangle seen during clean-stylesheet browser testing.
 *
 * This rule establishes only icon geometry and drawing behavior.
 * Full dashboard/card presentation remains deliberately deferred.
 */

.category-icon {
    flex: 0 0 auto;

    display: block;

    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;

    color: var(--accent);

    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* --------------------------------------------------------------
   RESPONSIVE SHELL COMPONENTS
   -------------------------------------------------------------- */

@media (min-width: 721px) and (max-width: 1120px) {

    .kefi-brand {
        width: 205px;
        height: 56px;
    }

    .kefi-logo {
        width: 200px;
        height: 56px;
    }

    .app-search {
        max-width: 460px;
    }

    .user-summary-name {
        max-width: 100px;
    }
}


@media (max-width: 720px) {

    .kefi-brand {
        width: 122px;
        height: 48px;
    }

    .kefi-logo {
        width: 120px;
        height: 48px;
    }

    .app-search {
        flex: 1 1 auto;

        width: auto;
        min-width: 0;
        max-width: none;

        margin: 0;
    }

    .app-search input,
    .app-search input[type="search"] {
        min-width: 0;
    }

    .app-search button {
        min-width: 52px;
        padding-inline: 0.7rem;
    }

    .user-summary-name {
        display: none;
    }

    .account-menu-chevron {
        display: none;
    }

    .account-menu > summary {
        padding-inline: 0.25rem;
    }
}


@media (max-width: 520px) {

    .kefi-brand {
        width: 106px;
    }

    .kefi-logo {
        width: 104px;
    }

    .app-search button {
        min-width: 48px;

        font-size: 0;
    }

    .app-search button::before {
        content: "⌕";

        font-size: 1.25rem;
        line-height: 1;
    }
}


@media (prefers-reduced-motion: reduce) {

    .account-menu-chevron {
        transition: none;
    }
}



/* ==============================================================
   PHASE-7E-MOCKUP-DASHBOARD-83516-BEGIN

   Community Home production presentation.

   Visual source of truth:
   agreed Phase 7E desktop / tablet / phone KefiCircle mockup.

   This section owns the Community Home presentation.
   It does not alter application behavior, URLs, permissions,
   forms, role logic, or data.
   ============================================================== */


/* --------------------------------------------------------------
   PAGE CANVAS
   -------------------------------------------------------------- */

.kefi-app .app-main {
    background: #f7f8fa;
}

.kefi-app .app-main > .dashboard,
.kefi-app .app-main > .dashboard-shell,
.kefi-app .app-main > .container,
.kefi-app .app-main > .content-container,
.kefi-app .app-main > .page-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
}

.kefi-app .dashboard-header,
.kefi-app .dashboard-section,
.kefi-app .dashboard-lower {
    width: 100%;
    max-width: 1380px;
    margin-inline: auto;
}


/* --------------------------------------------------------------
   WELCOME
   -------------------------------------------------------------- */

.kefi-app .dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    padding: 30px 32px 18px;
}

.kefi-app .dashboard-header h1 {
    margin: 0;

    color: #20272d;

    font-size: clamp(1.7rem, 2vw, 2.15rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.kefi-app .dashboard-header p {
    margin: 7px 0 0;

    color: #667078;

    font-size: 0.98rem;
    line-height: 1.45;
}

.kefi-app .dashboard-header .account-role,
.kefi-app .dashboard-header .role-label,
.kefi-app .dashboard-header small {
    color: #356b66;
    font-weight: 650;
}


/* --------------------------------------------------------------
   SECTION HEADINGS
   -------------------------------------------------------------- */

.kefi-app .dashboard-section {
    padding: 0 32px;
}

.kefi-app .dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin: 0 0 12px;
}

.kefi-app .dashboard-section-heading h2 {
    margin: 0;

    color: #283038;

    font-size: 1.02rem;
    font-weight: 750;
    line-height: 1.3;
}

.kefi-app .dashboard-section-heading a {
    color: #39716b;

    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.kefi-app .dashboard-section-heading a:hover {
    text-decoration: underline;
}


/* --------------------------------------------------------------
   FIVE CATEGORY CARDS — DESKTOP
   -------------------------------------------------------------- */

.kefi-app .dashboard-categories {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;

    margin: 0;
}

.kefi-app .dashboard-category {
    position: relative;

    min-width: 0;
    min-height: 132px;

    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;

    padding: 18px 16px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: 14px;

    color: #283038;
    text-decoration: none;

    box-shadow:
        0 1px 2px rgba(24, 36, 44, 0.04),
        0 5px 16px rgba(24, 36, 44, 0.045);

    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease;
}

.kefi-app .dashboard-category:hover {
    transform: translateY(-2px);

    box-shadow:
        0 2px 4px rgba(24, 36, 44, 0.05),
        0 8px 22px rgba(24, 36, 44, 0.08);
}

.kefi-app .dashboard-category:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.kefi-app .dashboard-category .category-icon {
    grid-column: 1;
    grid-row: 1 / span 2;

    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;

    align-self: center;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.kefi-app .dashboard-category strong {
    grid-column: 2;
    grid-row: 1;

    display: block;

    margin: 0;

    color: inherit;

    font-size: 1rem;
    font-weight: 750;
    line-height: 1.25;
}

.kefi-app .dashboard-category span {
    grid-column: 2;
    grid-row: 2;

    display: block;

    color: #626c73;

    font-size: 0.84rem;
    line-height: 1.35;
}


/* Jobs / Employment */

.kefi-app .dashboard-category:nth-child(1) {
    color: #47735f;
    background: #edf6ef;
    border-color: #d8e9dd;
}

/* Marketplace */

.kefi-app .dashboard-category:nth-child(2) {
    color: #376f93;
    background: #edf5fa;
    border-color: #d5e6f0;
}

/* Housing */

.kefi-app .dashboard-category:nth-child(3) {
    color: #6d5792;
    background: #f4f0f8;
    border-color: #e4daef;
}

/* Help & Services */

.kefi-app .dashboard-category:nth-child(4) {
    color: #a16a32;
    background: #fbf4e9;
    border-color: #f0e0c9;
}

/* Hanging Out */

.kefi-app .dashboard-category:nth-child(5) {
    color: #a55757;
    background: #faeeee;
    border-color: #efd7d7;
}


/* Keep descriptive copy neutral instead of inheriting category hue. */

.kefi-app .dashboard-category:nth-child(n) span {
    color: #626c73;
}


/* --------------------------------------------------------------
   PRIMARY DASHBOARD ACTIONS
   -------------------------------------------------------------- */

.kefi-app .dashboard-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 16px 0 0;
}

.kefi-app .dashboard-primary-action,
.kefi-app .dashboard-secondary-action {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 17px;

    border-radius: 9px;

    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.kefi-app .dashboard-primary-action {
    color: #fff;
    background: #477c72;
    border: 1px solid #477c72;
}

.kefi-app .dashboard-primary-action:hover {
    color: #fff;
    background: #38685f;
    border-color: #38685f;
}

.kefi-app .dashboard-secondary-action {
    color: #405059;
    background: #fff;
    border: 1px solid #d6dde1;
}

.kefi-app .dashboard-secondary-action:hover {
    background: #f5f7f8;
}


/* --------------------------------------------------------------
   LOWER DASHBOARD — REFERENCE 2/3 + 1/3 COMPOSITION
   -------------------------------------------------------------- */

.kefi-app .dashboard-lower {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(260px, 0.8fr);
    gap: 18px;

    align-items: start;

    padding: 22px 32px 38px;
}

.kefi-app .dashboard-panel,
.kefi-app .dashboard-mini-card {
    background: #fff;

    border: 1px solid #e0e5e8;
    border-radius: 14px;

    box-shadow:
        0 1px 2px rgba(24, 36, 44, 0.025),
        0 4px 14px rgba(24, 36, 44, 0.035);
}

.kefi-app .dashboard-panel {
    min-width: 0;

    padding: 20px 22px;
}

.kefi-app .dashboard-panel .dashboard-section-heading {
    margin-bottom: 8px;
}

.kefi-app .dashboard-panel h2,
.kefi-app .dashboard-mini-card h2 {
    margin: 0;

    color: #293138;

    font-size: 1rem;
    font-weight: 750;
    line-height: 1.3;
}


/* --------------------------------------------------------------
   RECENT POSTS
   -------------------------------------------------------------- */

.kefi-app .recent-post-list {
    display: grid;

    margin-top: 4px;
}

.kefi-app .recent-post {
    display: grid;
    gap: 4px;

    min-height: 66px;

    padding: 13px 2px;

    color: #293138;
    text-decoration: none;

    border-bottom: 1px solid #edf0f2;
}

.kefi-app .recent-post:last-child {
    border-bottom: 0;
}

.kefi-app .recent-post:hover {
    background: #fafbfb;
}

.kefi-app .recent-post strong {
    color: #30383e;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.kefi-app .recent-post span {
    color: #737c82;

    font-size: 0.82rem;
    line-height: 1.35;
}

.kefi-app .empty-state {
    padding: 24px 2px 10px;

    color: #6a747b;
}

.kefi-app .empty-state p {
    margin: 0 0 8px;
}

.kefi-app .empty-state a {
    color: #39716b;
    font-weight: 650;
}


/* --------------------------------------------------------------
   SAVED POSTS / SEARCH ALERTS / MEMBER QUICK LINKS
   -------------------------------------------------------------- */

.kefi-app .dashboard-side {
    display: grid;
    gap: 14px;

    min-width: 0;
}

.kefi-app .dashboard-mini-card {
    position: relative;

    min-width: 0;

    padding: 18px 19px;
}

.kefi-app .dashboard-mini-card h2 {
    padding-right: 54px;
}

.kefi-app .dashboard-mini-card p {
    margin: 9px 0 12px;

    color: #69737a;

    font-size: 0.85rem;
    line-height: 1.45;
}

.kefi-app .dashboard-count {
    position: absolute;
    top: 15px;
    right: 17px;

    min-width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    border-radius: 10px;

    color: #477c72;
    background: #edf5f2;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.kefi-app .dashboard-mini-card > a {
    color: #39716b;

    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .dashboard-mini-card > a:hover {
    text-decoration: underline;
}

.kefi-app .dashboard-feature-unavailable {
    color: #7c858b;
}


/* Supporting quick links remain available but visually subordinate. */

.kefi-app .dashboard-side .dashboard-mini-card:nth-child(3) {
    background: #fafbfb;
}

.kefi-app .member-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 10px;
}

.kefi-app .member-links a {
    min-height: 36px;

    display: inline-flex;
    align-items: center;

    padding: 0 11px;

    color: #536068;
    background: #fff;

    border: 1px solid #dfe4e7;
    border-radius: 8px;

    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}


/* --------------------------------------------------------------
   SHELL POLISH TO MATCH THE SAME DESIGN LANGUAGE
   -------------------------------------------------------------- */

.kefi-app .app-topbar {
    border-bottom: 1px solid #e2e6e9;

    box-shadow: 0 1px 5px rgba(25, 37, 45, 0.035);
}

.kefi-app .app-search {
    max-width: 520px;
}

.kefi-app .app-search input,
.kefi-app .app-search input[type="search"] {
    background: #f6f8f9;
    border-color: #dce2e5;
}

.kefi-app .app-search button {
    background: #477c72;
    border-color: #477c72;
}

.kefi-app .app-search button:hover {
    background: #38685f;
    border-color: #38685f;
}

.kefi-app .app-sidebar {
    background: #fff;
    border-right: 1px solid #e2e6e9;

    box-shadow: 2px 0 8px rgba(25, 37, 45, 0.025);
}

.kefi-app .app-nav > a {
    color: #4d5960;

    border-radius: 9px;
}

.kefi-app .app-nav > a:hover,
.kefi-app .app-nav > a:focus-visible {
    color: #356b66;
    background: #f1f6f4;
}

.kefi-app .app-nav > a[aria-current="page"],
.kefi-app .app-nav > a.active,
.kefi-app .app-nav > .active {
    color: #356b66;
    background: #eaf3f0;
}

.kefi-app .nav-icon {
    color: currentColor;
}

.kefi-app .account-menu > summary {
    border-radius: 10px;
}

.kefi-app .account-menu-panel {
    border-color: #dfe4e7;

    box-shadow:
        0 8px 26px rgba(26, 38, 46, 0.10),
        0 2px 7px rgba(26, 38, 46, 0.06);
}


/* --------------------------------------------------------------
   TABLET — MOCKUP 3 + 2 CATEGORY COMPOSITION
   -------------------------------------------------------------- */

@media (min-width: 721px) and (max-width: 1120px) {

    .kefi-app .dashboard-header {
        padding: 26px 24px 17px;
    }

    .kefi-app .dashboard-section {
        padding-inline: 24px;
    }

    .kefi-app .dashboard-categories {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }

    .kefi-app .dashboard-category {
        grid-column: span 2;

        min-height: 124px;
    }

    .kefi-app .dashboard-category:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .kefi-app .dashboard-category:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .kefi-app .dashboard-lower {
        grid-template-columns: 1fr;

        padding: 20px 24px 34px;
    }

    .kefi-app .dashboard-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kefi-app .dashboard-side .dashboard-mini-card:nth-child(3) {
        grid-column: 1 / -1;
    }
}


/* --------------------------------------------------------------
   PHONE — STACKED CARDS + BOTTOM NAVIGATION
   -------------------------------------------------------------- */

@media (max-width: 720px) {

    .kefi-app .app-main {
        padding-bottom: 82px;
    }

    .kefi-app .dashboard-header {
        display: block;

        padding: 22px 16px 16px;
    }

    .kefi-app .dashboard-header h1 {
        font-size: 1.55rem;
    }

    .kefi-app .dashboard-header p {
        font-size: 0.92rem;
    }

    .kefi-app .dashboard-section {
        padding-inline: 16px;
    }

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

    .kefi-app .dashboard-categories {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .kefi-app .dashboard-category,
    .kefi-app .dashboard-category:nth-child(4),
    .kefi-app .dashboard-category:nth-child(5) {
        grid-column: auto;

        min-height: 92px;

        grid-template-columns: 48px minmax(0, 1fr);

        padding: 14px 15px;

        border-radius: 13px;
    }

    .kefi-app .dashboard-category .category-icon {
        width: 39px;
        height: 39px;
        max-width: 39px;
        max-height: 39px;
    }

    .kefi-app .dashboard-category strong {
        font-size: 0.98rem;
    }

    .kefi-app .dashboard-category span {
        font-size: 0.82rem;
    }

    .kefi-app .dashboard-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 9px;

        margin-top: 13px;
    }

    .kefi-app .dashboard-primary-action,
    .kefi-app .dashboard-secondary-action {
        width: 100%;
        min-height: 44px;
    }

    .kefi-app .dashboard-lower {
        display: grid;
        grid-template-columns: 1fr;
        gap: 13px;

        padding: 18px 16px 28px;
    }

    .kefi-app .dashboard-panel,
    .kefi-app .dashboard-mini-card {
        border-radius: 13px;
    }

    .kefi-app .dashboard-panel {
        padding: 17px;
    }

    .kefi-app .dashboard-side {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kefi-app .dashboard-side .dashboard-mini-card:nth-child(3) {
        grid-column: auto;
    }

    .kefi-app .dashboard-mini-card {
        padding: 17px;
    }

    .kefi-app .mobile-nav {
        background: rgba(255, 255, 255, 0.97);

        border-top: 1px solid #dde3e6;

        box-shadow: 0 -4px 18px rgba(24, 36, 44, 0.07);
    }

    .kefi-app .mobile-nav a {
        color: #667078;

        font-size: 0.72rem;
        font-weight: 650;
    }

    .kefi-app .mobile-nav a:hover,
    .kefi-app .mobile-nav a:focus-visible,
    .kefi-app .mobile-nav a[aria-current="page"],
    .kefi-app .mobile-nav .active {
        color: #356b66;
        background: #eef5f3;
    }
}


/* --------------------------------------------------------------
   SMALL PHONE
   -------------------------------------------------------------- */

@media (max-width: 520px) {

    .kefi-app .dashboard-header {
        padding-top: 18px;
    }

    .kefi-app .dashboard-header h1 {
        font-size: 1.4rem;
    }

    .kefi-app .dashboard-actions {
        grid-template-columns: 1fr;
    }

    .kefi-app .dashboard-category {
        min-height: 88px;
    }
}


/* --------------------------------------------------------------
   MOTION ACCESSIBILITY
   -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .kefi-app .dashboard-category {
        transition: none;
    }

    .kefi-app .dashboard-category:hover {
        transform: none;
    }
}


/* PHASE-7E-MOCKUP-DASHBOARD-83516-END */

/* ============================================================
   PHASE-7E-REFERENCE-CORRECTION-73126-BEGIN

   Consolidated reference-alignment pass.
   Protected fallback:
   phase-7e-good-fallback-20260930
   ============================================================ */


/* ------------------------------------------------------------
   GLOBAL ACCOUNT IDENTITY
   Role belongs beside the account name, not beside Welcome.
   ------------------------------------------------------------ */

.kefi-app .account-menu > summary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kefi-app .user-summary-name {
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    color: #24333d;
}

.kefi-app .account-summary-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    height: 19px;
    min-height: 19px;
    padding: 0 6px;

    color: #b52d2d;
    background: #fffafa;
    border: 1px solid #c93636;
    border-radius: 6px;

    font-size: 0.66rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.kefi-app .account-menu-admin-link {
    font-weight: 700;
    color: #9f2828;
}

.kefi-app .account-menu-admin-link:hover,
.kefi-app .account-menu-admin-link:focus-visible {
    color: #7f1f1f;
    background: #fff5f5;
}


/* ------------------------------------------------------------
   DESKTOP CANVAS
   Keep the 64px collapsed rail contract while using the
   available desktop width more like the approved reference.
   ------------------------------------------------------------ */

@media (min-width: 1121px) {
    .kefi-app .site-main.app-main,
    .kefi-app .app-main {
        width: auto;
        max-width: none;
        margin-left: var(--rail-width);
        margin-right: 0;
        padding-left: 34px;
        padding-right: 34px;
    }

    .kefi-app .dashboard-header,
    .kefi-app .dashboard-section,
    .kefi-app .dashboard-lower,
    .kefi-app .status-messages {
        width: 100%;
        max-width: 1420px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* ------------------------------------------------------------
   DASHBOARD HEADING
   ------------------------------------------------------------ */

.kefi-app .dashboard-header {
    align-items: flex-start;
    margin-bottom: 26px;
}

.kefi-app .dashboard-header > div {
    width: 100%;
}

.kefi-app .dashboard-header h1 {
    margin: 0;
    color: #243746;
    font-size: clamp(1.75rem, 2vw, 2.2rem);
    line-height: 1.16;
    letter-spacing: -0.025em;
}

.kefi-app .dashboard-header p {
    margin: 7px 0 0;
    color: #697780;
    font-size: 1rem;
    line-height: 1.45;
}

.kefi-app .dashboard-section-heading {
    margin-bottom: 14px;
}

.kefi-app .dashboard-section-heading h2 {
    color: #293d4b;
    font-size: 1.18rem;
}

.kefi-app .dashboard-section-heading > a,
.kefi-app .dashboard-panel-heading > a {
    color: #4b778e;
    font-weight: 650;
    text-decoration: none;
}

.kefi-app .dashboard-section-heading > a:hover,
.kefi-app .dashboard-section-heading > a:focus-visible,
.kefi-app .dashboard-panel-heading > a:hover,
.kefi-app .dashboard-panel-heading > a:focus-visible {
    text-decoration: underline;
}


/* ------------------------------------------------------------
   CATEGORY CARDS
   ------------------------------------------------------------ */

.kefi-app .dashboard-category {
    position: relative;
    overflow: hidden;

    min-height: 136px;
    padding: 20px 18px;

    border-width: 1px;
    border-style: solid;
    border-radius: 15px;

    box-shadow:
        0 1px 2px rgba(30, 48, 60, 0.04),
        0 5px 14px rgba(30, 48, 60, 0.035);

    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease;
}

.kefi-app .dashboard-category:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(30, 48, 60, 0.05),
        0 9px 20px rgba(30, 48, 60, 0.07);
}

.kefi-app .dashboard-category strong {
    color: #293b48;
    font-size: 1.04rem;
    line-height: 1.25;
}

.kefi-app .dashboard-category > span:not(.category-icon) {
    color: #68757e;
    font-size: 0.9rem;
    line-height: 1.4;
}

.kefi-app .category-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
}

.kefi-app .category-icon svg {
    width: 27px;
    height: 27px;
}


/* Jobs / Employment */

.kefi-app .dashboard-category:nth-child(1) {
    background: #edf5fa;
    border-color: #cfe1eb;
}

.kefi-app .dashboard-category:nth-child(1) .category-icon {
    color: #397a9d;
    background: #dcecf5;
}


/* Marketplace */

.kefi-app .dashboard-category:nth-child(2) {
    background: #edf6ef;
    border-color: #d0e4d4;
}

.kefi-app .dashboard-category:nth-child(2) .category-icon {
    color: #4f8b62;
    background: #dceee1;
}


/* Housing */

.kefi-app .dashboard-category:nth-child(3) {
    background: #f4f0f8;
    border-color: #ded2e9;
}

.kefi-app .dashboard-category:nth-child(3) .category-icon {
    color: #7c6096;
    background: #e8dff0;
}


/* Help & Services */

.kefi-app .dashboard-category:nth-child(4) {
    background: #fbf4e9;
    border-color: #ead9bc;
}

.kefi-app .dashboard-category:nth-child(4) .category-icon {
    color: #b1782f;
    background: #f4e6ce;
}


/* Hanging Out */

.kefi-app .dashboard-category:nth-child(5) {
    background: #faeeee;
    border-color: #ebd0d0;
}

.kefi-app .dashboard-category:nth-child(5) .category-icon {
    color: #b35c5c;
    background: #f3dddd;
}


/* ------------------------------------------------------------
   ACTIONS
   ------------------------------------------------------------ */

.kefi-app .dashboard-actions {
    margin-top: 18px;
    gap: 10px;
}

.kefi-app .dashboard-primary-action,
.kefi-app .dashboard-secondary-action {
    min-height: 44px;
    padding: 10px 17px;
    border-radius: 9px;
    font-weight: 700;
}


/* ------------------------------------------------------------
   LOWER DASHBOARD
   ------------------------------------------------------------ */

.kefi-app .dashboard-lower {
    align-items: stretch;
    gap: 20px;
}

.kefi-app .dashboard-panel,
.kefi-app .dashboard-mini-card {
    border-radius: 14px;
    border: 1px solid #dce3e7;
    background: #ffffff;

    box-shadow:
        0 1px 2px rgba(30, 48, 60, 0.035),
        0 4px 12px rgba(30, 48, 60, 0.025);
}

.kefi-app .dashboard-panel {
    min-height: 290px;
}

.kefi-app .dashboard-mini-card {
    min-height: 134px;
}

.kefi-app .dashboard-side {
    align-content: start;
}

/*
   The approved reference uses Saved Posts and Search Alerts
   in this summary column. "More in KefiCircle" duplicates
   navigation already present in the application shell.
*/

.kefi-app .dashboard-side > .dashboard-mini-card:nth-child(3) {
    display: none;
}

.kefi-app .dashboard-count {
    color: #426f88;
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 750;
}


/* ------------------------------------------------------------
   SHELL REFINEMENT
   ------------------------------------------------------------ */

.kefi-app .app-sidebar {
    border-right: 1px solid #e1e6e9;
    background: rgba(255, 255, 255, 0.985);
    box-shadow: 3px 0 14px rgba(31, 48, 59, 0.025);
}

.kefi-app .app-nav a {
    color: #66737c;
    border-radius: 9px;
}

.kefi-app .app-nav a:hover,
.kefi-app .app-nav a:focus-visible {
    color: #315f70;
    background: #f0f6f7;
}

.kefi-app .app-nav .nav-icon,
.kefi-app .app-nav .nav-icon svg {
    color: inherit;
}

.kefi-app .app-nav .nav-icon svg {
    stroke: currentColor;
}

.kefi-app .app-nav .admin-nav-link {
    color: #8f3b3b;
}

.kefi-app .app-nav .admin-nav-link:hover,
.kefi-app .app-nav .admin-nav-link:focus-visible {
    color: #792d2d;
    background: #fff3f3;
}

.kefi-app .app-topbar {
    border-bottom: 1px solid #e1e6e9;
    box-shadow: 0 2px 8px rgba(31, 48, 59, 0.035);
}

.kefi-app .app-search input {
    border-color: #d7e0e4;
    background: #fbfcfd;
}

.kefi-app .app-search input:focus {
    background: #ffffff;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (min-width: 721px) and (max-width: 1120px) {
    .kefi-app .dashboard-categories {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 14px;
    }

    .kefi-app .dashboard-category {
        min-height: 126px;
    }

    .kefi-app .dashboard-category:nth-child(1),
    .kefi-app .dashboard-category:nth-child(2),
    .kefi-app .dashboard-category:nth-child(3) {
        grid-column: span 2;
    }

    .kefi-app .dashboard-category:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .kefi-app .dashboard-category:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .kefi-app .dashboard-lower {
        grid-template-columns: 1fr;
    }

    .kefi-app .dashboard-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .kefi-app .dashboard-panel {
        min-height: 260px;
    }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 720px) {
    .kefi-app .app-topbar {
        gap: 7px;
    }

    .kefi-app .account-menu > summary {
        gap: 5px;
    }

    /*
       Name is intentionally hidden by the existing mobile
       shell. Keep the role visible beside the avatar.
    */
    .kefi-app .account-summary-role {
        height: 18px;
        min-height: 18px;
        padding: 0 5px;
        font-size: 0.6rem;
    }

    .kefi-app .dashboard-header {
        margin-bottom: 20px;
    }

    .kefi-app .dashboard-header h1 {
        font-size: 1.55rem;
    }

    .kefi-app .dashboard-categories {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .kefi-app .dashboard-category {
        min-height: 96px;
        padding: 14px;
        border-radius: 13px;
    }

    .kefi-app .category-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .kefi-app .category-icon svg {
        width: 25px;
        height: 25px;
    }

    .kefi-app .dashboard-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .kefi-app .dashboard-primary-action,
    .kefi-app .dashboard-secondary-action {
        width: 100%;
        text-align: center;
    }

    .kefi-app .dashboard-panel {
        min-height: 220px;
    }

    .kefi-app .dashboard-side {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kefi-app .dashboard-mini-card {
        min-height: 120px;
    }
}

@media (max-width: 520px) {
    .kefi-app .account-summary-role {
        max-width: 78px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kefi-app .dashboard-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .dashboard-category {
        transition: none;
    }

    .kefi-app .dashboard-category:hover {
        transform: none;
    }
}


/* PHASE-7E-REFERENCE-CORRECTION-73126-END */

/* ============================================================
   PHASE-7E-DESKTOP-GEOMETRY-86420-BEGIN

   Geometry-only alignment to approved Phase 7E visual reference.
   Intentionally does not change:
   - role badge
   - Administration access
   - category palette
   - category icons
   - rail mechanics
   - themes
   - business logic
   ============================================================ */


/* ------------------------------------------------------------
   LARGE DESKTOP

   The approved design uses a bounded application workspace
   rather than allowing the dashboard to stretch across nearly
   the entire browser window.
   ------------------------------------------------------------ */

@media (min-width: 1121px) {

    /*
       Keep the shell anchored to the 64px collapsed rail.
       Center a bounded dashboard inside the remaining viewport.
    */
    .kefi-app .site-main.app-main,
    .kefi-app .app-main {
        width: auto;
        max-width: none;
        margin-left: var(--rail-width);
        margin-right: 0;

        padding-top: 58px;
        padding-left: 38px;
        padding-right: 38px;
        padding-bottom: 48px;
    }

    .kefi-app .dashboard-header,
    .kefi-app .dashboard-section,
    .kefi-app .dashboard-lower,
    .kefi-app .status-messages {
        width: min(100%, 1320px);
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }


    /* ---------- welcome ---------- */

    .kefi-app .dashboard-header {
        margin-bottom: 34px;
    }

    .kefi-app .dashboard-header h1 {
        font-size: 2rem;
    }


    /* ---------- category section ---------- */

    .kefi-app .dashboard-section-heading {
        margin-bottom: 13px;
    }

    .kefi-app .dashboard-categories {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 13px;
    }

    .kefi-app .dashboard-category {
        min-width: 0;
        min-height: 130px;
        padding: 18px 16px;

        /*
           Maintain the reference's compact icon/text hierarchy
           instead of allowing excessive empty card width.
        */
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 4px;
    }

    .kefi-app .category-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .kefi-app .category-icon svg {
        width: 25px;
        height: 25px;
    }

    .kefi-app .dashboard-category strong {
        font-size: 1rem;
    }

    .kefi-app .dashboard-category > span:not(.category-icon) {
        font-size: 0.875rem;
        line-height: 1.38;
    }


    /* ---------- actions ---------- */

    .kefi-app .dashboard-actions {
        margin-top: 16px;
        margin-bottom: 20px;
    }


    /* ---------- lower dashboard ---------- */

    .kefi-app .dashboard-lower {
        display: grid;

        /*
           Reference composition:
           broad Recent Posts area + compact utility column.
        */
        grid-template-columns:
            minmax(0, 2.35fr)
            minmax(300px, 0.95fr);

        gap: 18px;
        align-items: start;
    }

    .kefi-app .dashboard-panel {
        min-height: 280px;
    }

    .kefi-app .dashboard-side {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .kefi-app .dashboard-mini-card {
        min-height: 128px;
    }
}


/* ------------------------------------------------------------
   VERY LARGE DESKTOP

   Do not enlarge the dashboard indefinitely. The extra viewport
   becomes breathing room around the application workspace.
   ------------------------------------------------------------ */

@media (min-width: 1500px) {
    .kefi-app .dashboard-header,
    .kefi-app .dashboard-section,
    .kefi-app .dashboard-lower,
    .kefi-app .status-messages {
        width: 1320px;
        max-width: 1320px;
    }
}


/* ------------------------------------------------------------
   COMPACT DESKTOP / LARGE TABLET

   Preserve the approved 3 + 2 category composition without
   allowing the cards to become excessively wide.
   ------------------------------------------------------------ */

@media (min-width: 721px) and (max-width: 1120px) {

    .kefi-app .app-main {
        padding-top: 42px;
        padding-left: 26px;
        padding-right: 26px;
    }

    .kefi-app .dashboard-header,
    .kefi-app .dashboard-section,
    .kefi-app .dashboard-lower,
    .kefi-app .status-messages {
        width: min(100%, 900px);
        margin-left: auto;
        margin-right: auto;
    }

    .kefi-app .dashboard-header {
        margin-bottom: 28px;
    }

    .kefi-app .dashboard-categories {
        gap: 13px;
    }

    .kefi-app .dashboard-category {
        min-height: 122px;
        padding: 17px 15px;
    }

    .kefi-app .dashboard-actions {
        margin-top: 16px;
        margin-bottom: 18px;
    }

    .kefi-app .dashboard-lower {
        gap: 14px;
    }

    .kefi-app .dashboard-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ------------------------------------------------------------
   PHONE

   Keep the existing approved stacked behavior. Only tighten
   vertical geometry; do not redesign mobile in this pass.
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .kefi-app .app-main {
        padding-top: 24px;
    }

    .kefi-app .dashboard-header {
        margin-bottom: 22px;
    }

    .kefi-app .dashboard-section-heading {
        margin-bottom: 11px;
    }

    .kefi-app .dashboard-actions {
        margin-top: 14px;
        margin-bottom: 16px;
    }

    .kefi-app .dashboard-lower {
        gap: 12px;
    }
}


/* PHASE-7E-DESKTOP-GEOMETRY-86420-END */

/* ============================================================
   PHASE-7E-DESKTOP-RHYTHM-39147-BEGIN

   Final desktop vertical-rhythm correction after browser review.
   Geometry established by Script# 86420 is otherwise frozen.
   ============================================================ */

@media (min-width: 1121px) {

    /*
       Bring the dashboard closer to the application header.
       Script# 86420 used 58px.
    */
    .kefi-app .site-main.app-main,
    .kefi-app .app-main {
        padding-top: 38px;
    }

    /*
       Preserve the approved card width/grid while restoring
       slightly more vertical presence to the five category cards.
    */
    .kefi-app .dashboard-category {
        min-height: 140px;
    }

    /*
       Tighten the transition from category actions to the
       Recent Posts / Saved Posts / Search Alerts composition.
    */
    .kefi-app .dashboard-actions {
        margin-bottom: 8px;
    }

    .kefi-app .dashboard-lower {
        margin-top: 0;
    }
}

/* PHASE-7E-DESKTOP-RHYTHM-39147-END */

/* ============================================================
   PHASE-7E-DESKTOP-SHELL-64218-BEGIN

   Desktop shell correction based on browser comparison with the
   approved Phase 7E reference.

   Scope:
   - remove centered 1320px "island" effect
   - anchor content to collapsed application rail
   - preserve overlay-style rail expansion
   - enlarge desktop KefiCircle branding
   - strengthen desktop navigation icon presentation
   - preserve accepted dashboard component styling
   ============================================================ */

@media (min-width: 1121px) {

    /*
     * DESKTOP WORKSPACE
     *
     * The dashboard belongs to the application shell rather than
     * to an independently centered fixed-width canvas.
     *
     * 64px collapsed rail + 32px breathing room = 96px left edge.
     */
    .kefi-app .app-main {
        width: auto;
        max-width: none;
        margin-left: 64px;
        margin-right: 0;
        padding-left: 32px;
        padding-right: 32px;
    }

    /*
     * Some dashboard wrappers acquired independent max-width /
     * auto-margin centering during earlier visual passes.
     * Neutralize that desktop-only centering while preserving
     * their component styling.
     */
    .kefi-app .dashboard-shell,
    .kefi-app .dashboard-container,
    .kefi-app .home-dashboard,
    .kefi-app .community-home {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /*
     * BRAND
     *
     * Make the full KefiCircle mark/tagline easier to read while
     * retaining the existing 68px application header.
     */
    .kefi-app .kefi-brand {
        width: 164px;
        max-width: 164px;
    }

    .kefi-app .kefi-logo {
        width: 154px;
        max-width: 154px;
        height: auto;
        object-fit: contain;
        object-position: left center;
    }

    /*
     * COLLAPSED / EXPANDED NAVIGATION
     *
     * Rail remains 64px collapsed and overlay-expands according
     * to the existing Phase 7E interaction rules.
     */
    .kefi-app .app-sidebar {
        --phase7e-nav-icon-size: 29px;
    }

    /*
     * Larger icon targets. These selectors intentionally cover
     * both direct SVGs and common icon wrappers used by the
     * current navigation markup.
     */
    .kefi-app .app-sidebar nav a svg,
    .kefi-app .app-sidebar .nav-link svg,
    .kefi-app .app-sidebar .sidebar-link svg,
    .kefi-app .app-sidebar .nav-icon svg,
    .kefi-app .app-sidebar .nav-icon {
        width: var(--phase7e-nav-icon-size);
        height: var(--phase7e-nav-icon-size);
        min-width: var(--phase7e-nav-icon-size);
        flex: 0 0 var(--phase7e-nav-icon-size);
    }

    /*
     * Individual navigation identity.
     * nth-child rules are scoped to the desktop sidebar navigation
     * and follow the existing nine-item product navigation order:
     *
     * Home / Posts / People / Inbox / My Posts / Saved Posts /
     * Search Alerts / Announcements / Administration.
     */
    .kefi-app .app-sidebar nav a:nth-child(1) {
        --phase7e-nav-accent: #2878b8;
        --phase7e-nav-soft: #e8f3fb;
    }

    .kefi-app .app-sidebar nav a:nth-child(2) {
        --phase7e-nav-accent: #21877d;
        --phase7e-nav-soft: #e7f5f2;
    }

    .kefi-app .app-sidebar nav a:nth-child(3) {
        --phase7e-nav-accent: #7656a8;
        --phase7e-nav-soft: #f0ebf8;
    }

    .kefi-app .app-sidebar nav a:nth-child(4) {
        --phase7e-nav-accent: #397fa7;
        --phase7e-nav-soft: #e9f3f8;
    }

    .kefi-app .app-sidebar nav a:nth-child(5) {
        --phase7e-nav-accent: #38805e;
        --phase7e-nav-soft: #eaf5ef;
    }

    .kefi-app .app-sidebar nav a:nth-child(6) {
        --phase7e-nav-accent: #a47a24;
        --phase7e-nav-soft: #faf3df;
    }

    .kefi-app .app-sidebar nav a:nth-child(7) {
        --phase7e-nav-accent: #675ca7;
        --phase7e-nav-soft: #efedf8;
    }

    .kefi-app .app-sidebar nav a:nth-child(8) {
        --phase7e-nav-accent: #b66b2e;
        --phase7e-nav-soft: #fbefe5;
    }

    .kefi-app .app-sidebar nav a:nth-child(9) {
        --phase7e-nav-accent: #b84c52;
        --phase7e-nav-soft: #fbeaec;
    }

    .kefi-app .app-sidebar nav a {
        color: var(--phase7e-nav-accent, #355f75);
    }

    .kefi-app .app-sidebar nav a svg {
        color: var(--phase7e-nav-accent, #355f75);
        fill: currentColor;
    }

    /*
     * Preserve line-art SVGs that intentionally use strokes.
     */
    .kefi-app .app-sidebar nav a svg [stroke]:not([stroke="none"]) {
        stroke: currentColor;
    }

    /*
     * Soft navigation feedback rather than saturated blocks.
     */
    .kefi-app .app-sidebar nav a:hover,
    .kefi-app .app-sidebar nav a:focus-visible {
        color: var(--phase7e-nav-accent, #355f75);
        background: var(--phase7e-nav-soft, #edf4f7);
    }

    /*
     * Keep text labels readable and neutral in expanded mode.
     * The icon supplies the categorical accent.
     */
    .kefi-app .app-sidebar nav a .nav-label,
    .kefi-app .app-sidebar nav a .sidebar-label {
        color: #536775;
    }

    .kefi-app .app-sidebar nav a:nth-child(9) .nav-label,
    .kefi-app .app-sidebar nav a:nth-child(9) .sidebar-label {
        color: #a74349;
    }
}

/* PHASE-7E-DESKTOP-SHELL-64218-END */

/* ============================================================
   PHASE-7E-DESKTOP-BRAND-75391-BEGIN

   Browser-requested brand enlargement.
   Sidebar and dashboard geometry are frozen.
   ============================================================ */

@media (min-width: 1121px) {
    .kefi-app .kefi-brand {
        width: 200px;
        max-width: 200px;
    }

    .kefi-app .kefi-logo {
        width: 190px;
        max-width: 190px;
        height: auto;
    }
}

/* PHASE-7E-DESKTOP-BRAND-75391-END */


/* ============================================================
   PHASE-7E-HEADER-WELCOME-91436-BEGIN

   Browser-approved correction:
   - retain 190px desktop KefiCircle brand width
   - remove positional workaround
   - allow full logo artwork to render within the 68px header
   - add role status beside Community Home Welcome heading

   Accepted sidebar/dashboard geometry remains frozen.
   ============================================================ */

@media (min-width: 1121px) {
    /*
     * The logo artwork must fit naturally inside the existing
     * 68px header. Do not vertically offset the image.
     */
    .kefi-app .kefi-brand {
        height: 68px;
        min-height: 68px;
        overflow: visible;
        display: flex;
        align-items: center;
    }

    .kefi-app .kefi-logo {
        width: 190px;
        max-width: 190px;
        max-height: 64px;
        height: auto;
        position: static;
        top: auto;
        object-fit: contain;
        object-position: left center;
    }
}

/*
 * Community Home role indicator.
 * This intentionally duplicates the global account-status badge:
 * the header badge is global identity context, while this badge
 * identifies role in the Welcome context.
 */
.home-welcome-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.home-welcome-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1px 6px;
    min-height: 18px;
    border: 1px solid #dc3d46;
    border-radius: 5px;
    color: #bd2630;
    background: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

/* PHASE-7E-HEADER-WELCOME-91436-END */

/* ============================================================
   PHASE-7E-DESKTOP-RIBBON-BRAND-94752-BEGIN

   Browser-requested desktop branding correction.

   The full KefiCircle mark should retain the larger approved
   visual presence. The ribbon grows to accommodate the artwork;
   the artwork is not reduced to accommodate the ribbon.

   Desktop only:
   - application ribbon: 76px
   - KefiCircle brand box: 255px x 68px
   - KefiCircle artwork: 250px x 60px

   The existing shell already derives sidebar top position,
   main-content top position and viewport calculations from
   --header-height, so changing the desktop token keeps those
   pieces synchronized without duplicate hard-coded offsets.

   Tablet/mobile behavior is intentionally unchanged.
   ============================================================ */

@media (min-width: 1121px) {

    .kefi-app {
        --header-height: 76px;
    }

    .kefi-app .kefi-brand {
        width: 255px;
        max-width: 255px;
        height: 68px;
        min-height: 68px;
        overflow: visible;

        display: flex;
        align-items: center;
    }

    .kefi-app .kefi-logo {
        display: block;

        width: 250px;
        max-width: 250px;
        height: 60px;
        max-height: 60px;

        position: static;
        top: auto;

        object-fit: contain;
        object-position: left center;
    }
}

/* PHASE-7E-DESKTOP-RIBBON-BRAND-94752-END */

/* ============================================================
   PHASE-7E-DESKTOP-FINAL-POLISH-95863-BEGIN

   Browser-requested desktop corrections:
   - retain the accepted 76px desktop ribbon
   - enlarge KefiCircle artwork to 285px x 68px
   - lower the Welcome role badge to the heading baseline
   - Inbox SVG is changed separately in base.html

   Top-right role badge, sidebar geometry/colors, search,
   dashboard geometry and application behavior remain frozen.
   ============================================================ */

@media (min-width: 1121px) {

    /*
     * BRAND
     *
     * Ribbon remains 76px. Use more of its available vertical
     * space rather than shrinking the KefiCircle artwork.
     */
    .kefi-app .kefi-brand {
        width: 295px;
        max-width: 295px;
        height: 72px;
        min-height: 72px;
        overflow: visible;

        display: flex;
        align-items: center;
    }

    .kefi-app .kefi-logo {
        display: block;

        width: 285px;
        max-width: 285px;
        height: 68px;
        max-height: 68px;

        position: static;
        top: auto;

        object-fit: contain;
        object-position: left center;
    }

    /*
     * WELCOME ROLE
     *
     * Align the role badge with the lower text/baseline region
     * of "Welcome back, <name>!" instead of vertically centering
     * it against the full heading height.
     */
    .kefi-app .home-welcome-line {
        align-items: baseline;
    }

    .kefi-app .home-welcome-role {
        align-self: baseline;
        transform: translateY(2px);
    }
}

/* PHASE-7E-DESKTOP-FINAL-POLISH-95863-END */

/* ============================================================
   PHASE-7E-DESKTOP-ICON-BRAND-38264-BEGIN

   Browser-requested corrections:
   - Posts = outlined document/list icon
   - Inbox = unmistakable outlined envelope
   - defeat desktop sidebar's inherited fill: currentColor
     for these two icons only
   - KefiCircle artwork = 310px x 72px
   - desktop ribbon remains 76px
   - Welcome role alignment remains frozen
   ============================================================ */

.kefi-app .app-sidebar .nav-svg-posts,
.kefi-app .app-sidebar .nav-svg-inbox,
.kefi-app .app-sidebar .nav-svg-posts *,
.kefi-app .app-sidebar .nav-svg-inbox * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 1121px) {
    .kefi-app .kefi-brand {
        width: 320px;
        max-width: 320px;
        height: 74px;
        min-height: 74px;
        overflow: visible;
        display: flex;
        align-items: center;
    }

    .kefi-app .kefi-logo {
        display: block;
        width: 310px;
        max-width: 310px;
        height: 72px;
        max-height: 72px;
        position: static;
        top: auto;
        object-fit: contain;
        object-position: left center;
    }
}

/* PHASE-7E-DESKTOP-ICON-BRAND-38264-END */

/* ============================================================
   PHASE-7E-POST-FAMILY-49375-BEGIN

   Desktop sidebar post-family semantics:
   - Recent Posts = document/list
   - My Posts = document/smiley
   - Saved Posts = document/heart

   Preserve each item's existing sidebar accent color.
   Do not alter Inbox, mobile navigation, URLs or behavior.
   ============================================================ */

.kefi-app .app-sidebar .nav-svg-my-posts,
.kefi-app .app-sidebar .nav-svg-saved-posts,
.kefi-app .app-sidebar .nav-svg-my-posts *,
.kefi-app .app-sidebar .nav-svg-saved-posts * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * The smiley's eyes need to remain visible as small dots while
 * the rest of the icon remains an outline.
 */
.kefi-app .app-sidebar .nav-svg-my-posts circle {
    fill: currentColor;
    stroke: none;
}

/* PHASE-7E-POST-FAMILY-49375-END */

/* ============================================================
   PHASE-7E-DESKTOP-BRAND-ENLARGE-50486-BEGIN

   Desktop brand readability adjustment:
   - deepen desktop ribbon from 76px to 82px
   - enlarge KefiCircle artwork from 310x72 to 340x78
   - preserve proportional vertical breathing room
   - sidebar and main content follow --header-height naturally
   - no post-family, Inbox, dashboard or role changes
   ============================================================ */

@media (min-width: 1121px) {
    .kefi-app {
        --header-height: 82px;
    }

    .kefi-app .kefi-brand {
        width: 350px;
        max-width: 350px;
        height: 80px;
        min-height: 80px;
        overflow: visible;
        display: flex;
        align-items: center;
    }

    .kefi-app .kefi-logo {
        display: block;
        width: 340px;
        max-width: 340px;
        height: 78px;
        max-height: 78px;
        position: static;
        top: auto;
        object-fit: contain;
        object-position: left center;
    }
}

/* PHASE-7E-DESKTOP-BRAND-ENLARGE-50486-END */

/* ============================================================
/* PHASE-7E-STANDARD-DESIGN-BEGIN
   ============================================================
   KefiCircle Standard Design — Site-Wide Composition
   Signature: Sun + Waves/Hills + Pebble Path + Plants

   Standard owns:
     balanced
     cool
     fresh
     warm
     vibrant

   Community Home uses the expressive composition.
   Other pages use the same identity at quieter intensity.
   ============================================================ */

/* ---------- Standard-owned palettes ---------- */

.kefi-app.theme-balanced {
    --standard-sky-top: #f7fbfd;
    --standard-sky-bottom: #d9edf7;
    --standard-wave-far: rgba(166, 211, 231, 0.52);
    --standard-wave-middle: rgba(139, 198, 218, 0.50);
    --standard-wave-near: rgba(113, 181, 195, 0.48);
    --standard-foreground: rgba(187, 218, 196, 0.54);
    --standard-sun: rgba(255, 194, 72, 0.88);
    --standard-sun-glow: rgba(255, 213, 111, 0.30);
    --standard-plant-stem: rgba(55, 126, 101, 0.78);
    --standard-plant-leaf: rgba(73, 151, 112, 0.74);
    --standard-flower: rgba(244, 180, 91, 0.82);
    --standard-pebble-1: rgba(106, 132, 142, 0.55);
    --standard-pebble-2: rgba(145, 159, 161, 0.52);
}

.kefi-app.theme-cool {
    --standard-sky-top: #f6f9fc;
    --standard-sky-bottom: #dce9f3;
    --standard-wave-far: rgba(171, 204, 226, 0.52);
    --standard-wave-middle: rgba(143, 185, 216, 0.50);
    --standard-wave-near: rgba(121, 168, 201, 0.48);
    --standard-foreground: rgba(190, 211, 213, 0.52);
    --standard-sun: rgba(244, 205, 119, 0.84);
    --standard-sun-glow: rgba(246, 218, 153, 0.28);
    --standard-plant-stem: rgba(63, 112, 128, 0.78);
    --standard-plant-leaf: rgba(78, 134, 149, 0.74);
    --standard-flower: rgba(166, 180, 216, 0.80);
    --standard-pebble-1: rgba(99, 124, 142, 0.55);
    --standard-pebble-2: rgba(136, 151, 164, 0.52);
}

.kefi-app.theme-fresh {
    --standard-sky-top: #f8fcf8;
    --standard-sky-bottom: #e0f1e3;
    --standard-wave-far: rgba(184, 219, 190, 0.52);
    --standard-wave-middle: rgba(151, 204, 165, 0.50);
    --standard-wave-near: rgba(119, 187, 142, 0.48);
    --standard-foreground: rgba(188, 220, 177, 0.56);
    --standard-sun: rgba(249, 198, 78, 0.88);
    --standard-sun-glow: rgba(251, 217, 126, 0.30);
    --standard-plant-stem: rgba(53, 118, 73, 0.80);
    --standard-plant-leaf: rgba(70, 148, 89, 0.76);
    --standard-flower: rgba(238, 181, 83, 0.82);
    --standard-pebble-1: rgba(109, 134, 115, 0.55);
    --standard-pebble-2: rgba(143, 157, 137, 0.52);
}

.kefi-app.theme-warm {
    --standard-sky-top: #fffaf3;
    --standard-sky-bottom: #f3e1ca;
    --standard-wave-far: rgba(224, 199, 165, 0.54);
    --standard-wave-middle: rgba(211, 177, 139, 0.52);
    --standard-wave-near: rgba(195, 156, 116, 0.50);
    --standard-foreground: rgba(215, 202, 157, 0.56);
    --standard-sun: rgba(239, 160, 57, 0.90);
    --standard-sun-glow: rgba(246, 187, 91, 0.31);
    --standard-plant-stem: rgba(124, 96, 62, 0.80);
    --standard-plant-leaf: rgba(151, 118, 72, 0.76);
    --standard-flower: rgba(207, 113, 74, 0.84);
    --standard-pebble-1: rgba(136, 112, 90, 0.56);
    --standard-pebble-2: rgba(166, 142, 115, 0.53);
}

.kefi-app.theme-vibrant {
    --standard-sky-top: #fbf8ff;
    --standard-sky-bottom: #e8ddf5;
    --standard-wave-far: rgba(202, 182, 227, 0.54);
    --standard-wave-middle: rgba(179, 157, 216, 0.52);
    --standard-wave-near: rgba(153, 137, 201, 0.50);
    --standard-foreground: rgba(188, 205, 177, 0.56);
    --standard-sun: rgba(255, 174, 57, 0.92);
    --standard-sun-glow: rgba(255, 198, 92, 0.32);
    --standard-plant-stem: rgba(85, 102, 139, 0.82);
    --standard-plant-leaf: rgba(106, 121, 163, 0.78);
    --standard-flower: rgba(220, 116, 147, 0.86);
    --standard-pebble-1: rgba(114, 101, 139, 0.57);
    --standard-pebble-2: rgba(148, 132, 166, 0.54);
}


/* ---------- Site-wide canvas ---------- */

.kefi-app .app-main {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--standard-sky-top, #f7fbfd) 0%,
            var(--standard-sky-bottom, #d9edf7) 100%
        );
}

.kefi-app .kefi-design-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.kefi-app .kefi-standard-landscape {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.kefi-app .app-main > *:not(.kefi-design-canvas) {
    position: relative;
    z-index: 1;
}


/* ---------- Standard SVG palette ---------- */

.kefi-app .standard-sky {
    fill: url(#kefi-standard-sky);
}

.kefi-app .standard-sky-stop-top {
    stop-color: var(--standard-sky-top, #f7fbfd);
}

.kefi-app .standard-sky-stop-bottom {
    stop-color: var(--standard-sky-bottom, #d9edf7);
}

.kefi-app .standard-clouds {
    fill: rgba(255, 255, 255, 0.34);
}

.kefi-app .standard-sun {
    fill: var(--standard-sun, rgba(255, 194, 72, 0.88));
}

.kefi-app .standard-sun-glow {
    fill: var(--standard-sun-glow, rgba(255, 213, 111, 0.30));
}

.kefi-app .standard-sun-glow-center {
    stop-color: var(--standard-sun-glow, rgba(255, 213, 111, 0.30));
    stop-opacity: 1;
}

.kefi-app .standard-sun-glow-edge {
    stop-color: var(--standard-sun-glow, rgba(255, 213, 111, 0.30));
    stop-opacity: 0;
}

.kefi-app .standard-wave-far {
    fill: var(--standard-wave-far);
}

.kefi-app .standard-wave-middle {
    fill: var(--standard-wave-middle);
}

.kefi-app .standard-wave-near {
    fill: var(--standard-wave-near);
}

.kefi-app .standard-foreground {
    fill: var(--standard-foreground);
}

.kefi-app .standard-pebble {
    stroke: rgba(255, 255, 255, 0.46);
    stroke-width: 2;
}

.kefi-app .standard-pebble-1,
.kefi-app .standard-pebble-3,
.kefi-app .standard-pebble-5 {
    fill: var(--standard-pebble-1);
}

.kefi-app .standard-pebble-2,
.kefi-app .standard-pebble-4,
.kefi-app .standard-pebble-6 {
    fill: var(--standard-pebble-2);
}

.kefi-app .standard-plant-stem {
    fill: none;
    stroke: var(--standard-plant-stem);
    stroke-width: 7;
    stroke-linecap: round;
}

.kefi-app .standard-plant-leaf {
    fill: var(--standard-plant-leaf);
}

.kefi-app .standard-flower {
    fill: var(--standard-flower);
}

.kefi-app .standard-plant {
    opacity: 0.82;
}


/* ---------- Rich Community Home composition ---------- */

.kefi-app .kefi-design-page-home {
    position: relative;
    min-height: 100%;
}

.kefi-app .kefi-design-page-home .dashboard-header,
.kefi-app .kefi-design-page-home .dashboard-section,
.kefi-app .kefi-design-page-home .status-messages {
    position: relative;
    z-index: 1;
}

.kefi-app .kefi-design-page-home .dashboard-section {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* ---------- Quiet composition on other pages ---------- */

.kefi-app .app-main:not(:has(.kefi-design-page-home))
.kefi-design-canvas {
    opacity: 0.36;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
.standard-plant {
    opacity: 0.30;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
.standard-pebble-path {
    opacity: 0.28;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
.standard-sun-glow {
    opacity: 0.42;
}


/* ---------- Appearance hierarchy ---------- */

.kefi-app .account-appearance {
    display: grid;
    gap: 0.45rem;
}

.kefi-app .account-appearance-title {
    display: block;
    font-weight: 700;
}

.kefi-app .account-appearance-field {
    display: grid;
    gap: 0.25rem;
}

.kefi-app .account-appearance-field label {
    font-size: 0.82rem;
    font-weight: 600;
}

.kefi-app .account-appearance-field select {
    width: 100%;
}

.kefi-app .account-appearance-theme {
    margin-left: 1rem;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(100, 116, 139, 0.18);
}

.kefi-app #design-choice:disabled {
    opacity: 1;
    cursor: default;
}


/* ---------- Responsive recomposition ---------- */

@media (min-width: 1121px) {
    .kefi-app .kefi-standard-landscape {
        transform: scale(1.015);
        transform-origin: center top;
    }
}

@media (min-width: 700px) and (max-width: 1120px) {
    .kefi-app .kefi-standard-landscape {
        width: 116%;
        margin-left: -8%;
    }

    .kefi-app .standard-clouds {
        opacity: 0.72;
    }

    .kefi-app .standard-plant-path {
        opacity: 0.58;
    }
}

@media (max-width: 699px) {
    .kefi-app .kefi-standard-landscape {
        width: 175%;
        margin-left: -40%;
    }

    .kefi-app .standard-clouds {
        display: none;
    }

    .kefi-app .standard-plant-left {
        display: none;
    }

    .kefi-app .standard-plant-right {
        opacity: 0.66;
    }

    .kefi-app .standard-plant-path {
        display: none;
    }

    .kefi-app .standard-pebble-1,
    .kefi-app .standard-pebble-2 {
        display: none;
    }

    .kefi-app .account-appearance-theme {
        margin-left: 0.7rem;
        padding-left: 0.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .kefi-design-canvas,
    .kefi-app .kefi-standard-landscape {
        animation: none !important;
        transition: none !important;
    }
}

/* PHASE-7E-STANDARD-DESIGN-END */

/* ============================================================
   PHASE-7E-STANDARD-ARTWORK-14896-BEGIN

   Standard is KefiCircle's permanent built-in baseline/fallback
   Design. Its mounting remains intentionally hardcoded in base.html.

   Artwork:
     images/designs/standard/standard-landscape.png

   This is presentation-only. Future optional Designs must use the
   extensible Design architecture rather than adding Design-specific
   blocks to base.html.
   ============================================================ */

.kefi-design-standard {
    overflow: hidden;
}

.kefi-design-standard .kefi-standard-landscape {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
}

/* Community Home: expressive Standard composition. */
.kefi-app .app-main:has(.kefi-design-page-home)
    > .kefi-design-standard
    .kefi-standard-landscape {
    opacity: 0.92;
    filter:
        saturate(0.88)
        brightness(1.07)
        contrast(0.94);
}

/* Other pages: same identity, quieter artwork. */
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    > .kefi-design-standard
    .kefi-standard-landscape {
    opacity: 0.20;
    filter:
        saturate(0.62)
        brightness(1.14)
        contrast(0.84);
}

@media (min-width: 1025px) {
    .kefi-app .app-main:has(.kefi-design-page-home)
        > .kefi-design-standard
        .kefi-standard-landscape {
        object-position: center center;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .kefi-app .app-main:has(.kefi-design-page-home)
        > .kefi-design-standard
        .kefi-standard-landscape {
        object-position: 54% center;
    }
}

@media (max-width: 640px) {
    .kefi-app .app-main:has(.kefi-design-page-home)
        > .kefi-design-standard
        .kefi-standard-landscape {
        object-position: 52% center;
        opacity: 0.86;
        filter:
            saturate(0.78)
            brightness(1.12)
            contrast(0.90);
    }

    .kefi-app .app-main:not(:has(.kefi-design-page-home))
        > .kefi-design-standard
        .kefi-standard-landscape {
        opacity: 0.14;
    }
}

/* PHASE-7E-STANDARD-ARTWORK-14896-END */
/* PHASE-7E-DOCUMENT-SCROLL-37018-BEGIN
   ============================================================
   Phase 7E document-scroll correction.

   Product contract:
   - desktop header participates in normal document scrolling
   - desktop sidebar participates in the same page scroll
   - browser/document owns vertical scrolling
   - Community Home keeps the richer Standard composition
   - secondary pages retain clearly recognizable Standard artwork
   - Standard remains the permanent hardcoded base.html fallback
   - mobile bottom navigation remains fixed
   ============================================================ */

/*
 * DESKTOP / TABLET AUTHENTICATED SHELL
 *
 * Convert the application from three independently fixed regions
 * into one document-scrolling composition.
 */
@media (min-width: 721px) {

    .kefi-app .app-topbar {
        position: relative;
        top: auto;
        right: auto;
        left: auto;

        width: 100%;
    }

    /*
     * app-frame is already the structural parent of the sidebar.
     * Let it occupy document flow rather than creating another
     * viewport-height scrolling region.
     */
    .kefi-app .app-frame {
        min-height: 0;
    }

    .kefi-app .app-sidebar {
        position: absolute;

        top: var(--header-height);
        bottom: auto;
        left: 0;

        min-height: calc(100% - var(--header-height));
        height: auto;

        overflow-x: hidden;
        overflow-y: visible;
    }

    /*
     * The header now consumes real document height, so app-main
     * must no longer add a synthetic header-height top margin.
     */
    .kefi-app .site-main.app-main,
    .kefi-app .app-main {
        margin-top: 0;
    }
}


/*
 * STANDARD PAGE CANVAS
 *
 * Do not paint an opaque gray sheet underneath the Standard
 * artwork. The artwork itself supplies the page atmosphere.
 */
.kefi-app .site-main.app-main,
.kefi-app .app-main {
    background: #eef6f3;
}


/*
 * COMMUNITY HOME
 *
 * Preserve the approved richer treatment.
 */
.kefi-app .app-main:has(.kefi-design-page-home)
    > .kefi-design-standard {
    opacity: 1;
}

.kefi-app .app-main:has(.kefi-design-page-home)
    > .kefi-design-standard
    .kefi-standard-landscape {
    opacity: 0.92;
}


/*
 * SECONDARY PAGES
 *
 * Script#14896 combined a 0.36 canvas opacity with a 0.20 image
 * opacity. That compounded to a nearly invisible result.
 *
 * Keep secondary pages quieter than Community Home, but make the
 * Standard identity unmistakably present.
 */
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    > .kefi-design-standard {
    opacity: 0.58;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    > .kefi-design-standard
    .kefi-standard-landscape {
    opacity: 0.72;

    filter:
        saturate(0.72)
        brightness(1.10)
        contrast(0.90);
}


/*
 * Keep ordinary secondary-page content readable without hiding
 * the Design behind a solid page-wide gray/white canvas.
 */
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    > *:not(.kefi-design-canvas) {
    position: relative;
    z-index: 1;
}


/*
 * PHONE
 *
 * Preserve the existing mobile shell contract. The bottom nav
 * remains fixed; only remove the obsolete synthetic top offset
 * because the top bar now participates in normal flow.
 */
@media (max-width: 720px) {

    .kefi-app .app-topbar {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
    }

    .kefi-app .app-main {
        margin-top: 0;
    }

    .kefi-app .app-main:not(:has(.kefi-design-page-home))
        > .kefi-design-standard {
        opacity: 0.50;
    }

    .kefi-app .app-main:not(:has(.kefi-design-page-home))
        > .kefi-design-standard
        .kefi-standard-landscape {
        opacity: 0.66;
    }

    /*
     * Deliberately retain:
     *     .mobile-nav { position: fixed; bottom: 0; }
     */
}

/* PHASE-7E-DOCUMENT-SCROLL-37018-END */

/* PHASE-7E-SHELL-INTERACTION-59240-BEGIN
   ============================================================
   Phase 7E shell interaction restoration.

   Product contract:
   - the application ribbon scrolls with the document
   - the desktop/tablet navigation rail scrolls with the document
   - the collapsed rail remains 64px
   - hover/focus expansion overlays to the existing expanded width
   - expansion does not reflow app-main
   - Need help? floats at the lower-right of the viewport
   - Skip to main content is hidden until keyboard focus
   - mobile bottom navigation remains fixed
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP / TABLET NAVIGATION RAIL

   Script#37018 intentionally moved the rail out of fixed viewport
   positioning so it travels with the page.

   Preserve that document-scroll model while explicitly restoring
   the existing collapsed -> expanded overlay interaction.
   ------------------------------------------------------------ */

@media (min-width: 721px) {

    .kefi-app .app-sidebar {
        position: absolute;

        top: var(--header-height);
        bottom: auto;
        left: 0;

        width: var(--rail-width);
        max-width: var(--rail-width);

        min-height: calc(100% - var(--header-height));
        height: auto;

        overflow-x: hidden;
        overflow-y: visible;

        transition:
            width 180ms ease,
            max-width 180ms ease,
            box-shadow 180ms ease;
    }

    .kefi-app .app-sidebar:hover,
    .kefi-app .app-sidebar:focus-within {
        width: var(--rail-expanded-width);
        max-width: var(--rail-expanded-width);

        box-shadow: var(--shadow-md);
    }

    /*
     * The expanded rail is an overlay.
     * app-main therefore remains anchored to the collapsed rail
     * width and must not move when navigation expands.
     */
    .kefi-app .site-main.app-main,
    .kefi-app .app-main {
        margin-top: 0;
    }

    .kefi-app .app-sidebar:hover .nav-label,
    .kefi-app .app-sidebar:focus-within .nav-label {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);

        transition:
            opacity 150ms ease 40ms,
            transform 150ms ease 40ms,
            visibility 0s;
    }
}


/* ------------------------------------------------------------
   FLOATING HELP CONTROL

   This is an application utility rather than document content.
   It intentionally stays available at the lower-right while the
   member scrolls.

   base.html already owns the Help URL and permissions.
   ------------------------------------------------------------ */

.help-bubble {
    position: fixed;
    z-index: 1100;

    right: 24px;
    bottom: 24px;

    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.35rem;

    padding: 12px 16px;

    color: #2f4f4b;
    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(67, 105, 98, 0.30);
    border-radius: 999px;

    box-shadow:
        0 5px 18px rgba(32, 54, 51, 0.14);

    font-weight: 700;
    text-decoration: none;
}

.help-bubble:hover,
.help-bubble:focus-visible {
    color: #23413d;
    background: #ffffff;

    border-color: rgba(67, 105, 98, 0.48);

    box-shadow:
        0 7px 22px rgba(32, 54, 51, 0.18);
}


/* ------------------------------------------------------------
   SKIP LINK

   Accessibility utility:
   - absent from normal visual presentation
   - appears when reached by keyboard
   - remains above the application UI while focused
   ------------------------------------------------------------ */

.skip-link {
    position: fixed;
    z-index: 2000;

    top: 8px;
    left: 8px;

    transform: translateY(-180%);

    padding: 10px 14px;

    color: #111;
    background: #fff;

    border: 2px solid #315f70;
    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);

    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
}


/* ------------------------------------------------------------
   PHONE

   Preserve the existing fixed bottom navigation. Keep Help above
   that navigation instead of allowing the two controls to overlap.
   ------------------------------------------------------------ */

@media (max-width: 720px) {

    .help-bubble {
        right: 12px;
        bottom: 82px;
    }

    /*
     * Deliberately unchanged:
     *
     * .mobile-nav {
     *     position: fixed;
     *     bottom: 0;
     * }
     */
}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .kefi-app .app-sidebar,
    .kefi-app .nav-label,
    .skip-link {
        transition: none;
    }
}

/* PHASE-7E-SHELL-INTERACTION-59240-END */


/* PHASE-7E-SIDEBAR-FINAL-92573-BEGIN
   ============================================================
   Final Phase 7E desktop sidebar behavior.

   IMPORTANT:
   Sidebar expansion must never modify app-main geometry.

   Collapsed:
       sidebar = --rail-width

   Expanded:
       sidebar = --rail-expanded-width
       sidebar overlays decorative artwork

   app-main:
       same margin / width / max-width / position in both states

   No hover/focus selector in this block targets app-main.
   ============================================================ */

@media (min-width: 721px) {

    .kefi-app .app-sidebar {
        width: var(--rail-width);
        max-width: var(--rail-width);
    }

    .kefi-app .app-sidebar:hover,
    .kefi-app .app-sidebar:focus-within {
        width: var(--rail-expanded-width);
        max-width: var(--rail-expanded-width);
    }
}

/* PHASE-7E-SIDEBAR-FINAL-92573-END */

/* ============================================================
   PHASE-7E-STANDARD-THEMES-24795-BEGIN

   Standard Design theme contract
   ------------------------------
   Standard owns:
       Balanced
       Cool
       Fresh
       Warm
       Vibrant

   This layer intentionally does NOT:
   - alter sidebar geometry
   - move app-main on sidebar hover/focus
   - replace the Standard artwork
   - change Community Home layout
   - change Django behavior

   Secondary pages receive a permanent desktop content safe zone.
   The expanded sidebar may cover decorative artwork but must not
   cover ordinary functional page content.
   ============================================================ */


/* ------------------------------------------------------------
   STANDARD THEME TOKENS

   These are visual-treatment tokens belonging specifically to
   the Standard Design. Future Designs are free to define their
   own Theme vocabulary and must not inherit this assumption.
   ------------------------------------------------------------ */

.kefi-app.theme-balanced {
    --p7e-theme-accent: #477c72;
    --p7e-theme-accent-strong: #38685f;
    --p7e-theme-link: #39716b;

    --p7e-theme-surface: rgba(255, 255, 255, 0.91);
    --p7e-theme-surface-soft: rgba(247, 250, 249, 0.90);
    --p7e-theme-border: rgba(105, 132, 128, 0.25);

    --p7e-theme-heading: #293d4b;
    --p7e-theme-text: #34454d;
    --p7e-theme-muted: #68777d;

    --p7e-theme-home-saturate: 0.88;
    --p7e-theme-home-brightness: 1.07;
    --p7e-theme-home-contrast: 0.94;

    --p7e-theme-secondary-saturate: 0.72;
    --p7e-theme-secondary-brightness: 1.10;
    --p7e-theme-secondary-contrast: 0.90;
}


.kefi-app.theme-cool {
    --p7e-theme-accent: #39788a;
    --p7e-theme-accent-strong: #2d6476;
    --p7e-theme-link: #326f84;

    --p7e-theme-surface: rgba(248, 253, 255, 0.92);
    --p7e-theme-surface-soft: rgba(239, 248, 251, 0.91);
    --p7e-theme-border: rgba(88, 139, 157, 0.27);

    --p7e-theme-heading: #274552;
    --p7e-theme-text: #334b55;
    --p7e-theme-muted: #647982;

    --p7e-theme-home-saturate: 0.82;
    --p7e-theme-home-brightness: 1.06;
    --p7e-theme-home-contrast: 0.96;

    --p7e-theme-secondary-saturate: 0.68;
    --p7e-theme-secondary-brightness: 1.10;
    --p7e-theme-secondary-contrast: 0.92;
}


.kefi-app.theme-fresh {
    --p7e-theme-accent: #3d8269;
    --p7e-theme-accent-strong: #306c56;
    --p7e-theme-link: #34775f;

    --p7e-theme-surface: rgba(250, 255, 250, 0.92);
    --p7e-theme-surface-soft: rgba(241, 251, 244, 0.91);
    --p7e-theme-border: rgba(91, 145, 111, 0.26);

    --p7e-theme-heading: #294b3d;
    --p7e-theme-text: #354e43;
    --p7e-theme-muted: #687b71;

    --p7e-theme-home-saturate: 1.02;
    --p7e-theme-home-brightness: 1.08;
    --p7e-theme-home-contrast: 0.95;

    --p7e-theme-secondary-saturate: 0.86;
    --p7e-theme-secondary-brightness: 1.11;
    --p7e-theme-secondary-contrast: 0.90;
}


.kefi-app.theme-warm {
    --p7e-theme-accent: #9a7047;
    --p7e-theme-accent-strong: #7f5936;
    --p7e-theme-link: #8b643e;

    --p7e-theme-surface: rgba(255, 252, 244, 0.93);
    --p7e-theme-surface-soft: rgba(252, 246, 234, 0.92);
    --p7e-theme-border: rgba(161, 126, 83, 0.27);

    --p7e-theme-heading: #594633;
    --p7e-theme-text: #574b3f;
    --p7e-theme-muted: #7e7164;

    --p7e-theme-home-saturate: 0.94;
    --p7e-theme-home-brightness: 1.08;
    --p7e-theme-home-contrast: 0.93;

    --p7e-theme-secondary-saturate: 0.78;
    --p7e-theme-secondary-brightness: 1.12;
    --p7e-theme-secondary-contrast: 0.88;
}


.kefi-app.theme-vibrant {
    --p7e-theme-accent: #317f75;
    --p7e-theme-accent-strong: #24675f;
    --p7e-theme-link: #26776d;

    --p7e-theme-surface: rgba(255, 255, 255, 0.90);
    --p7e-theme-surface-soft: rgba(242, 251, 249, 0.90);
    --p7e-theme-border: rgba(63, 137, 126, 0.31);

    --p7e-theme-heading: #203f48;
    --p7e-theme-text: #2c454b;
    --p7e-theme-muted: #5e7478;

    --p7e-theme-home-saturate: 1.22;
    --p7e-theme-home-brightness: 1.04;
    --p7e-theme-home-contrast: 1.02;

    --p7e-theme-secondary-saturate: 1.02;
    --p7e-theme-secondary-brightness: 1.07;
    --p7e-theme-secondary-contrast: 0.96;
}


/* ------------------------------------------------------------
   STANDARD ARTWORK — THEME TREATMENT

   Same approved Standard PNG for all five Themes.
   Theme changes its visual treatment, not Design identity.
   ------------------------------------------------------------ */

.kefi-app[class*="theme-"]
    .app-main:has(.kefi-design-page-home)
    > .kefi-design-standard
    .kefi-standard-landscape {
    filter:
        saturate(var(--p7e-theme-home-saturate))
        brightness(var(--p7e-theme-home-brightness))
        contrast(var(--p7e-theme-home-contrast));
}


.kefi-app[class*="theme-"]
    .app-main:not(:has(.kefi-design-page-home))
    > .kefi-design-standard
    .kefi-standard-landscape {
    filter:
        saturate(var(--p7e-theme-secondary-saturate))
        brightness(var(--p7e-theme-secondary-brightness))
        contrast(var(--p7e-theme-secondary-contrast));
}


/* ------------------------------------------------------------
   SHARED SECONDARY-PAGE CANVAS

   IMPORTANT:
   This does not respond to sidebar hover/focus.

   On desktop the functional content permanently begins beyond
   the expanded 214px rail. The background artwork itself remains
   full-width and stationary.
   ------------------------------------------------------------ */

@media (min-width: 721px) {
    .kefi-app
        .app-main:not(:has(.kefi-design-page-home))
        > *:not(.kefi-design-canvas) {
        margin-left: calc(
            var(--rail-expanded-width)
            - var(--rail-width)
            + var(--space-2)
        );

        max-width: 1180px;
    }
}


/* ------------------------------------------------------------
   SECONDARY PAGE TYPOGRAPHY
   ------------------------------------------------------------ */

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .page-heading {
    margin-bottom: 1.25rem;
}

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .page-heading h1,
.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .form-page-header h1,
.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .entry-card h1,
.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    > section > h1,
.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    > main > h1 {
    color: var(--p7e-theme-heading);
}

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .page-heading p,
.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .form-help,
.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .field-help {
    color: var(--p7e-theme-muted);
}


/* ------------------------------------------------------------
   SHARED CONTENT SURFACES

   Existing templates already expose these component families.
   Use them rather than rewriting templates page-by-page.
   ------------------------------------------------------------ */

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    :is(
        .entry-card,
        .administration-card,
        .community-settings-card,
        .application-review-card,
        .sponsorship-card,
        .inbox-card,
        .member-card,
        .search-result-card,
        .application-list-card,
        .profile-section
    ) {
    color: var(--p7e-theme-text);

    background: var(--p7e-theme-surface);

    border-color: var(--p7e-theme-border);

    box-shadow:
        0 1px 2px rgba(30, 48, 60, 0.035),
        0 5px 18px rgba(30, 48, 60, 0.055);
}


/*
 * Give major functional pages a quiet readable working surface while
 * retaining visible artwork around it.
 *
 * These are page containers, not a replacement page background.
 */

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    :is(
        .search-results-page,
        .inbox-page,
        .administration-page,
        .pending-applications-page,
        .page-shell,
        .form-page,
        .application-page
    ) {
    padding: clamp(18px, 2.3vw, 30px);

    color: var(--p7e-theme-text);

    background: var(--p7e-theme-surface);

    border: 1px solid var(--p7e-theme-border);
    border-radius: 16px;

    box-shadow:
        0 2px 5px rgba(30, 48, 60, 0.035),
        0 10px 28px rgba(30, 48, 60, 0.055);
}


/* ------------------------------------------------------------
   LINKS + ACTIONS
   ------------------------------------------------------------ */

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    a {
    color: var(--p7e-theme-link);
}

/* PHASE-7E-PRIMARY-ACTION-GEOMETRY-49327-BEGIN */

/*
 * Shared primary-action geometry.
 *
 * Phase 7E theme rules provide the color vocabulary.
 * This block provides the button geometry so primary actions
 * remain buttons on every non-Home page.
 *
 * Do not put theme colors here.
 */
.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 17px;

    border: 1px solid transparent;
    border-radius: 9px;

    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;

    box-sizing: border-box;
}

/* PHASE-7E-PRIMARY-ACTION-GEOMETRY-49327-END */

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    :is(
        .primary-action,
        button[type="submit"]
    ):not(.danger-action):not(.secondary-action) {
    color: #fff;

    background: var(--p7e-theme-accent);
    border-color: var(--p7e-theme-accent);
}

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    :is(
        .primary-action,
        button[type="submit"]
    ):not(.danger-action):not(.secondary-action):hover {
    background: var(--p7e-theme-accent-strong);
    border-color: var(--p7e-theme-accent-strong);
}


/* ------------------------------------------------------------
   FORM CONTROLS
   ------------------------------------------------------------ */

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    :is(
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="tel"],
        input[type="date"],
        input[type="number"],
        input[type="url"],
        select,
        textarea
    ) {
    color: var(--p7e-theme-text);

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid var(--p7e-theme-border);
    border-radius: 9px;
}

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    :is(
        input[type="text"],
        input[type="search"],
        input[type="email"],
        input[type="tel"],
        input[type="date"],
        input[type="number"],
        input[type="url"],
        select,
        textarea
    ):focus {
    border-color: var(--p7e-theme-accent);
}


/* ------------------------------------------------------------
   EMPTY / QUIET STATES
   ------------------------------------------------------------ */

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .empty-state {
    color: var(--p7e-theme-muted);
}


/* ------------------------------------------------------------
   MOBILE

   No desktop sidebar safe-zone is needed. Secondary surfaces keep
   comfortable spacing without consuming scarce phone width.
   ------------------------------------------------------------ */

@media (max-width: 720px) {
    .kefi-app
        .app-main:not(:has(.kefi-design-page-home))
        > *:not(.kefi-design-canvas) {
        margin-left: 0;
        max-width: none;
    }

    .kefi-app
        .app-main:not(:has(.kefi-design-page-home))
        :is(
            .search-results-page,
            .inbox-page,
            .administration-page,
            .pending-applications-page,
            .page-shell,
            .form-page,
            .application-page
        ) {
        padding: 16px;
        border-radius: 13px;
    }
}


/* ============================================================
   PHASE-7E-STANDARD-THEMES-24795-END
   ============================================================ */


/* PHASE-7E-COLOR-THEMES-80457-BEGIN
   ============================================================
   STANDARD DESIGN — DEFINITIVE COLOR THEMES

   Internal keys intentionally retained:
       fresh    -> Meadow
       balanced -> Rose
       cool     -> Sunset
       warm     -> Sunshine
       vibrant  -> Autumn

   Meadow is the first/default Standard theme.

   These are deliberately COLOR themes, not subtle mood variants.
   No layout/sidebar geometry is defined here.
   ============================================================ */


/* ------------------------------------------------------------
   MEADOW
   Internal key: fresh
   Natural botanical green — Standard default.
   ------------------------------------------------------------ */

.kefi-app.theme-fresh {
    --p7e-art-overlay:
        linear-gradient(
            135deg,
            rgba(45, 176, 83, 0.22) 0%,
            rgba(71, 188, 96, 0.18) 38%,
            rgba(124, 199, 77, 0.15) 72%,
            rgba(214, 235, 126, 0.08) 100%
        );

    --p7e-theme-accent: #2f7d4a;
    --p7e-theme-accent-strong: #23633a;
    --p7e-theme-link: #2a7043;

    --p7e-theme-surface: rgba(239, 252, 238, 0.93);
    --p7e-theme-surface-soft: rgba(222, 244, 222, 0.93);
    --p7e-theme-border: rgba(58, 132, 74, 0.35);

    --p7e-theme-heading: #285139;
    --p7e-theme-text: #355642;
    --p7e-theme-muted: #627767;

    --p7e-theme-home-saturate: 1.13;
    --p7e-theme-home-brightness: 1.05;
    --p7e-theme-home-contrast: 0.97;

    --p7e-theme-secondary-saturate: 0.92;
    --p7e-theme-secondary-brightness: 1.08;
    --p7e-theme-secondary-contrast: 0.93;
}


/* ------------------------------------------------------------
   ROSE
   Internal key: balanced
   Rose red / soft crimson.
   ------------------------------------------------------------ */

.kefi-app.theme-balanced {
    --p7e-art-overlay:
        linear-gradient(
            135deg,
            rgba(190, 44, 72, 0.27) 0%,
            rgba(218, 77, 96, 0.21) 38%,
            rgba(235, 122, 130, 0.16) 70%,
            rgba(255, 205, 199, 0.11) 100%
        );

    --p7e-theme-accent: #a83e55;
    --p7e-theme-accent-strong: #873044;
    --p7e-theme-link: #96394e;

    --p7e-theme-surface: rgba(255, 241, 243, 0.93);
    --p7e-theme-surface-soft: rgba(250, 224, 228, 0.93);
    --p7e-theme-border: rgba(164, 65, 84, 0.34);

    --p7e-theme-heading: #66313d;
    --p7e-theme-text: #62414a;
    --p7e-theme-muted: #86656d;

    --p7e-theme-home-saturate: 0.93;
    --p7e-theme-home-brightness: 1.04;
    --p7e-theme-home-contrast: 0.96;

    --p7e-theme-secondary-saturate: 0.76;
    --p7e-theme-secondary-brightness: 1.08;
    --p7e-theme-secondary-contrast: 0.92;
}


/* ------------------------------------------------------------
   SUNSET
   Internal key: cool
   Orange / coral / warm amber.
   ------------------------------------------------------------ */

.kefi-app.theme-cool {
    --p7e-art-overlay:
        linear-gradient(
            135deg,
            rgba(236, 100, 43, 0.29) 0%,
            rgba(244, 125, 54, 0.24) 38%,
            rgba(247, 153, 65, 0.18) 70%,
            rgba(255, 211, 139, 0.13) 100%
        );

    --p7e-theme-accent: #b45e2f;
    --p7e-theme-accent-strong: #914720;
    --p7e-theme-link: #a45329;

    --p7e-theme-surface: rgba(255, 243, 232, 0.93);
    --p7e-theme-surface-soft: rgba(252, 226, 207, 0.93);
    --p7e-theme-border: rgba(181, 91, 46, 0.35);

    --p7e-theme-heading: #6c3d28;
    --p7e-theme-text: #65493a;
    --p7e-theme-muted: #886b5d;

    --p7e-theme-home-saturate: 1.02;
    --p7e-theme-home-brightness: 1.05;
    --p7e-theme-home-contrast: 0.96;

    --p7e-theme-secondary-saturate: 0.82;
    --p7e-theme-secondary-brightness: 1.08;
    --p7e-theme-secondary-contrast: 0.92;
}


/* ------------------------------------------------------------
   SUNSHINE
   Internal key: warm
   Bright yellow / golden daylight.
   ------------------------------------------------------------ */

.kefi-app.theme-warm {
    --p7e-art-overlay:
        linear-gradient(
            135deg,
            rgba(250, 205, 36, 0.29) 0%,
            rgba(247, 216, 63, 0.23) 38%,
            rgba(242, 221, 89, 0.18) 72%,
            rgba(255, 243, 165, 0.14) 100%
        );

    --p7e-theme-accent: #a77d16;
    --p7e-theme-accent-strong: #85620f;
    --p7e-theme-link: #947016;

    --p7e-theme-surface: rgba(255, 251, 225, 0.94);
    --p7e-theme-surface-soft: rgba(251, 242, 195, 0.93);
    --p7e-theme-border: rgba(166, 132, 35, 0.35);

    --p7e-theme-heading: #625323;
    --p7e-theme-text: #5d5536;
    --p7e-theme-muted: #81775a;

    --p7e-theme-home-saturate: 1.05;
    --p7e-theme-home-brightness: 1.10;
    --p7e-theme-home-contrast: 0.92;

    --p7e-theme-secondary-saturate: 0.84;
    --p7e-theme-secondary-brightness: 1.11;
    --p7e-theme-secondary-contrast: 0.89;
}


/* ------------------------------------------------------------
   AUTUMN
   Internal key: vibrant
   Fall leaves — gold / amber / copper.
   ------------------------------------------------------------ */

.kefi-app.theme-vibrant {
    --p7e-art-overlay:
        linear-gradient(
            135deg,
            rgba(177, 91, 23, 0.26) 0%,
            rgba(215, 133, 28, 0.24) 34%,
            rgba(224, 168, 41, 0.22) 66%,
            rgba(137, 105, 35, 0.15) 100%
        );

    --p7e-theme-accent: #9a6426;
    --p7e-theme-accent-strong: #75491b;
    --p7e-theme-link: #895820;

    --p7e-theme-surface: rgba(255, 245, 222, 0.93);
    --p7e-theme-surface-soft: rgba(246, 228, 190, 0.93);
    --p7e-theme-border: rgba(151, 101, 39, 0.37);

    --p7e-theme-heading: #604322;
    --p7e-theme-text: #5b4934;
    --p7e-theme-muted: #806c52;

    --p7e-theme-home-saturate: 1.22;
    --p7e-theme-home-brightness: 1.00;
    --p7e-theme-home-contrast: 1.04;

    --p7e-theme-secondary-saturate: 0.98;
    --p7e-theme-secondary-brightness: 1.05;
    --p7e-theme-secondary-contrast: 0.96;
}


/* ------------------------------------------------------------
   Common Standard artwork overlay.
   ------------------------------------------------------------ */

.kefi-app[class*="theme-"]
    .kefi-design-standard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--p7e-art-overlay);
    pointer-events: none;
}

.kefi-app[class*="theme-"]
    .kefi-design-standard
    .kefi-standard-landscape {
    z-index: 1;
}


/* ------------------------------------------------------------
   Community Home surfaces.
   ------------------------------------------------------------ */

.kefi-app.theme-fresh
    .kefi-design-page-home
    .dashboard-section {
    background: rgba(235, 250, 234, 0.80);
}

.kefi-app.theme-balanced
    .kefi-design-page-home
    .dashboard-section {
    background: rgba(255, 236, 239, 0.80);
}

.kefi-app.theme-cool
    .kefi-design-page-home
    .dashboard-section {
    background: rgba(255, 236, 220, 0.80);
}

.kefi-app.theme-warm
    .kefi-design-page-home
    .dashboard-section {
    background: rgba(255, 249, 213, 0.81);
}

.kefi-app.theme-vibrant
    .kefi-design-page-home
    .dashboard-section {
    background: rgba(251, 234, 199, 0.81);
}

.kefi-app[class*="theme-"]
    .kefi-design-page-home
    .dashboard-section {
    border-color: var(--p7e-theme-border);
}

.kefi-app[class*="theme-"]
    .kefi-design-page-home
    a:not(.category-card):not(.dashboard-primary-action) {
    color: var(--p7e-theme-link);
}

/* PHASE-7E-HOME-PRIMARY-ACTION-CONTRAST-61724-BEGIN
   ------------------------------------------------------------
   Home-page primary action contrast.

   Theme controls the button background.
   White controls the foreground so "+ Post Something"
   remains readable across all Standard color themes.

   No layout, artwork, theme palette, or geometry changes.
   ------------------------------------------------------------ */

.kefi-app[class*="theme-"]
    .kefi-design-page-home
    .dashboard-primary-action {
    background: var(--p7e-theme-accent);
    border-color: var(--p7e-theme-accent);
    color: #fff;
}

/* PHASE-7E-HOME-PRIMARY-ACTION-CONTRAST-61724-END */

/* PHASE-7E-COLOR-THEMES-80457-END */

/* ============================================================
   PHASE-7E-LOGIN-VISUAL-90514
   Public Login / Welcome presentation
   ============================================================ */

body.public-site:has(.kefi-login-page) {
    background:
        linear-gradient(
            180deg,
            #fbfcfa 0%,
            #f5f7f3 100%
        );
}

body.public-site:has(.kefi-login-page) .app-topbar,
body.public-site:has(.kefi-login-page) .app-sidebar,
body.public-site:has(.kefi-login-page) .floating-help,
body.public-site:has(.kefi-login-page) .kefi-design-canvas {
    display: none !important;
}

.kefi-login-page {
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding:
        clamp(1.25rem, 3vh, 2rem)
        1.25rem
        1.5rem;
}

.kefi-login-panel {
    width: min(100%, 430px);
    margin: 0 auto;
}

.kefi-login-brand {
    text-align: center;
    margin: 0 0 1.1rem;
}

.kefi-login-logo {
    display: block;
    width: min(100%, 270px);
    height: auto;
    margin: 0 auto;
}

.kefi-login-form {
    margin: 0;
}

.kefi-login-field {
    margin: 0 0 0.72rem;
}

.kefi-login-field > label {
    display: block;
    margin: 0 0 0.3rem;
    font-weight: 600;
}

.kefi-login-field input[type="text"],
.kefi-login-field input[type="tel"],
.kefi-login-field input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin: 0;
}

.kefi-login-field .form-help {
    margin-top: 0.28rem;
    line-height: 1.35;
}

.kefi-login-checkbox-field {
    margin-bottom: 0.62rem;
}

.kefi-login-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
}

.kefi-login-checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
}

.kefi-login-checkbox-row label {
    display: inline;
    margin: 0;
    line-height: 1.35;
    font-weight: 500;
    cursor: pointer;
}

.kefi-login-checkbox-help {
    margin-left: 1.45rem;
    margin-top: 0.18rem !important;
}

.kefi-login-sms-notice {
    margin: 0.8rem 0;
    font-size: 0.9rem;
    line-height: 1.38;
}

.kefi-login-sms-notice a {
    white-space: nowrap;
}

.kefi-login-submit {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin: 0;
}

.kefi-login-invitation {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    text-align: center;
}

.kefi-login-invitation p {
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .kefi-login-page {
        padding:
            1rem
            1rem
            1.25rem;
    }

    .kefi-login-logo {
        width: min(100%, 245px);
    }

    .kefi-login-brand {
        margin-bottom: 0.9rem;
    }

    .kefi-login-field {
        margin-bottom: 0.65rem;
    }

    .kefi-login-sms-notice {
        font-size: 0.88rem;
    }
}

/* ============================================================
   PHASE-7E-LOGIN-BACKGROUND-94731
   Login-only community illustration.
   Deliberately separate from authenticated Standard artwork.
   ============================================================ */

body.public-site:has(.kefi-login-page) {
    background-color: #d9eef8;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("../images/login-community-background.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.kefi-login-page {
    background: transparent;
}

.kefi-login-panel {
    box-sizing: border-box;
    padding: 1.35rem 1.7rem 1.45rem;
    background: rgba(255, 255, 255, 0.965);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 18px;
    box-shadow:
        0 14px 38px rgba(22, 48, 67, 0.16),
        0 3px 10px rgba(22, 48, 67, 0.08);
    backdrop-filter: blur(2px);
}

@media (max-width: 600px) {
    body.public-site:has(.kefi-login-page) {
        background-position: center center;
        background-attachment: scroll;
    }

    .kefi-login-panel {
        padding: 1.1rem 1rem 1.2rem;
        border-radius: 15px;
    }
}


/* ============================================================
   PHASE-7E-VERIFY-PHONE-31472
   OTP verification presentation.

   Reuses the approved public Login composition and artwork.
   This block is presentation-only.
   ============================================================ */

.kefi-verify-panel {
    margin-top: clamp(1.25rem, 4vh, 3rem);
}

.kefi-verify-heading {
    margin: 0 0 1.15rem;
    text-align: center;
}

.kefi-verify-heading h1 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    line-height: 1.2;
    color: #1f2933;
}

.kefi-verify-heading p {
    margin: 0;
    line-height: 1.45;
    color: #394650;
}

.kefi-verify-field {
    margin-bottom: 0.9rem;
}

.kefi-verify-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.75rem;
    font-size: 1.1rem;
}

.kefi-verify-submit {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    margin-top: 0.15rem;
    padding: 0.72rem 1rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 7px rgba(31, 41, 51, 0.16);
    transition:
        transform 120ms ease,
        box-shadow 120ms ease;
}

.kefi-verify-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(31, 41, 51, 0.19);
}

.kefi-verify-submit:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(31, 41, 51, 0.16);
}

.kefi-verify-secondary-action {
    margin: 0.9rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(31, 41, 51, 0.13);
    text-align: center;
}

.kefi-verify-secondary-action a {
    color: #245a70;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 600px) {
    .kefi-verify-panel {
        margin-top: 0;
    }

    .kefi-verify-heading {
        margin-bottom: 0.9rem;
    }
}

/* PHASE-7E-VERIFY-PHONE-31472-END */

/* ============================================================
   PHASE-7E-APPLY-VISUAL-51963
   Membership Application / User Agreement onboarding surface.

   Apply belongs to:
       Login -> Verify Phone -> Apply + User Agreement

   This does not alter authenticated Community Home or
   secondary-page Standard Design artwork.
   ============================================================ */

body.public-site:has(.kefi-apply-page) {
    min-height: 100vh;

    background-color: #d9eef8;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("../images/login-community-background.png");

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/*
 * base.html mounts the Standard Design canvas before page content.
 * Applicants do not yet have community access, so suppress that
 * canvas specifically on the membership application.
 */
body.public-site:has(.kefi-apply-page) .kefi-design-canvas {
    display: none !important;
}

body.public-site:has(.kefi-apply-page) .site-main {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 100vh;

    padding:
        clamp(1rem, 3vw, 2.25rem)
        clamp(1rem, 4vw, 2.5rem)
        clamp(2rem, 5vw, 4rem);
}

/*
 * Apply is deliberately wider than Login / Verify because it
 * contains profile fields and the complete User Agreement.
 */
body.public-site:has(.kefi-apply-page) .kefi-apply-page {
    box-sizing: border-box;
    position: relative;
    z-index: 1;

    width: min(100%, 900px);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.25rem);

    color: #24323a;
    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(44, 66, 78, 0.16);
    border-radius: 18px;

    box-shadow:
        0 2px 8px rgba(30, 48, 60, 0.06),
        0 16px 42px rgba(30, 48, 60, 0.12);
}

.kefi-apply-brand {
    margin: 0 0 1.25rem;
    text-align: center;
}

.kefi-apply-brand .kefi-login-logo {
    display: block;
    width: min(100%, 270px);
    height: auto;
    margin: 0 auto;
}

body.public-site:has(.kefi-apply-page)
    .kefi-apply-page
    .form-page-header {
    margin-bottom: 1.5rem;
}

body.public-site:has(.kefi-apply-page)
    .kefi-apply-page
    .form-page-header h1 {
    margin-top: 0;
}

body.public-site:has(.kefi-apply-page)
    .kefi-apply-page
    .agreement-text {
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    body.public-site:has(.kefi-apply-page) .site-main {
        padding:
            0.75rem
            0.75rem
            1.5rem;
    }

    body.public-site:has(.kefi-apply-page) .kefi-apply-page {
        padding: 1rem;
        border-radius: 14px;
    }

    .kefi-apply-brand {
        margin-bottom: 1rem;
    }

    .kefi-apply-brand .kefi-login-logo {
        width: min(100%, 245px);
    }
}

/* PHASE-7E-APPLY-VISUAL-51963-END */

/* ============================================================
   PHASE-7E-APPLY-ACCORDION-49261
   Progressive Membership Application:
       1 About You
       2 Community Agreement
       3 Before You Submit
   ============================================================ */

.kefi-apply-steps {
    margin-top: 1.4rem;
}

.kefi-apply-section {
    margin: 0;
    border-top: 1px solid rgba(44, 66, 78, 0.15);
}

.kefi-apply-section:last-child {
    border-bottom: 1px solid rgba(44, 66, 78, 0.15);
}

.kefi-apply-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.15rem 0.25rem;
    cursor: pointer;
    list-style: none;
}

.kefi-apply-section-heading::-webkit-details-marker {
    display: none;
}

.kefi-apply-section-heading::marker {
    content: "";
}

.kefi-apply-section-heading:hover {
    background: rgba(49, 95, 112, 0.035);
}

.kefi-apply-step {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #315f70;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.kefi-apply-heading-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.kefi-apply-heading-copy strong {
    color: #203b47;
    font-size: 1.3rem;
    line-height: 1.25;
}

.kefi-apply-heading-copy > span {
    color: #52636b;
    font-size: 0.96rem;
    line-height: 1.45;
}

.kefi-apply-section-heading::after {
    content: "▾";
    flex: 0 0 auto;
    margin: 0.25rem 0.2rem 0 auto;
    color: #52636b;
    font-size: 1rem;
    transform: rotate(-90deg);
    transition: transform 120ms ease;
}

.kefi-apply-section[open]
    > .kefi-apply-section-heading::after {
    transform: rotate(0deg);
}

.kefi-apply-section-content {
    padding:
        0.25rem
        0.25rem
        1.4rem
        2.85rem;
}

.kefi-apply-about .form-field {
    margin-bottom: 1rem;
}

/*
 * Agreement body is intentionally slightly smaller because
 * this is the application's long reading section.
 */
.kefi-apply-agreement-text {
    max-width: 760px;
    margin: 0;
    padding:
        clamp(1rem, 2.5vw, 1.4rem)
        clamp(1rem, 3vw, 1.6rem);
    background: #f8faf9;
    border: 1px solid rgba(44, 66, 78, 0.16);
    border-radius: 12px;
    color: #29383f;
    font-size: 0.92rem;
    line-height: 1.55;
}

.kefi-apply-agreement-text h2,
.kefi-apply-agreement-text h3 {
    color: #203b47;
}

.kefi-apply-agreement-text h3 {
    margin-top: 0;
    font-size: 1.12rem;
    line-height: 1.3;
}

.kefi-apply-agreement-text p {
    max-width: 76ch;
}

.kefi-apply-step-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.kefi-apply-continue {
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 0;
    border-radius: 8px;
    background: #315f70;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.kefi-apply-continue:hover {
    filter: brightness(0.94);
}

.kefi-apply-continue:focus-visible,
.kefi-apply-section-heading:focus-visible {
    outline: 3px solid rgba(49, 95, 112, 0.32);
    outline-offset: 3px;
}

.kefi-apply-before-submit .agreement-field {
    margin-bottom: 1rem;
}

.kefi-apply-before-submit button[type="submit"] {
    min-height: 48px;
    margin-top: 0.6rem;
    font-weight: 700;
}

@media (max-width: 600px) {
    .kefi-apply-section-heading {
        gap: 0.65rem;
        padding: 1rem 0;
    }

    .kefi-apply-step {
        width: 1.8rem;
        height: 1.8rem;
        font-size: 0.88rem;
    }

    .kefi-apply-heading-copy strong {
        font-size: 1.16rem;
    }

    .kefi-apply-heading-copy > span {
        font-size: 0.9rem;
    }

    .kefi-apply-section-content {
        padding:
            0.15rem
            0
            1.2rem
            0;
    }

    .kefi-apply-agreement-text {
        padding: 1rem;
        font-size: 0.9rem;
        line-height: 1.52;
    }

    .kefi-apply-step-actions {
        display: block;
    }

    .kefi-apply-continue {
        width: 100%;
    }
}

/* PHASE-7E-APPLY-ACCORDION-49261-END */

/* ============================================================
   PHASE-7E-APPLY-FORM-REFINEMENT-71834

   Presentation-only refinement for Membership Application.
   Scope is deliberately limited to .kefi-apply-page.

   Does not alter:
   - Django form definitions
   - validation
   - upload behavior
   - accordion behavior
   - Agreement behavior
   - SMS consent behavior
   ============================================================ */


/* ------------------------------------------------------------
   FIELD RHYTHM

   Each normal application field becomes a deliberate vertical
   unit: label -> control -> help/errors.
   ------------------------------------------------------------ */

.kefi-apply-page .kefi-apply-about .form-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.38rem;

    width: 100%;
    margin: 0 0 1.35rem;
}

.kefi-apply-page .kefi-apply-about .form-field > label {
    display: block;

    margin: 0;

    color: #203b47;

    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.3;
}


/* ------------------------------------------------------------
   STANDARD TEXT CONTROLS

   Short profile fields remain intentionally bounded rather
   than stretching across the entire application panel.
   ------------------------------------------------------------ */

.kefi-apply-page
    .kefi-apply-about
    .form-field
    > :is(
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="url"],
        input[type="date"],
        input[type="number"],
        select
    ) {
    display: block;

    width: min(100%, 470px);
    min-height: 46px;

    padding: 0.68rem 0.78rem;

    color: #203b47;
    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(61, 86, 97, 0.34);
    border-radius: 9px;

    font: inherit;
    line-height: 1.3;

    box-sizing: border-box;

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}


/* ------------------------------------------------------------
   NARRATIVE FIELDS

   Textareas are wider because their content is naturally
   paragraph-like. They also receive a useful minimum height.
   ------------------------------------------------------------ */

.kefi-apply-page
    .kefi-apply-about
    .form-field
    > textarea {
    display: block;

    width: min(100%, 680px);
    min-height: 112px;

    padding: 0.72rem 0.78rem;

    color: #203b47;
    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(61, 86, 97, 0.34);
    border-radius: 9px;

    font: inherit;
    line-height: 1.45;

    box-sizing: border-box;

    resize: vertical;

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
}


/* ------------------------------------------------------------
   FOCUS

   Keep the existing KefiCircle accent language while making
   keyboard and pointer focus substantially easier to see.
   ------------------------------------------------------------ */

.kefi-apply-page
    .kefi-apply-about
    .form-field
    > :is(
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="url"],
        input[type="date"],
        input[type="number"],
        select,
        textarea
    ):focus {
    background: #ffffff;

    border-color: #315f70;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(49, 95, 112, 0.14);
}

.kefi-apply-page
    .kefi-apply-about
    .form-field
    > :is(
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="url"],
        input[type="date"],
        input[type="number"],
        select,
        textarea
    ):focus-visible {
    outline: none;
}


/* ------------------------------------------------------------
   HELP AND ERROR TEXT
   ------------------------------------------------------------ */

.kefi-apply-page
    .kefi-apply-about
    .form-field
    > .form-help {
    width: min(100%, 680px);

    margin: 0.02rem 0 0;

    color: #607078;

    font-size: 0.88rem;
    line-height: 1.4;
}

.kefi-apply-page
    .kefi-apply-about
    .form-field
    > .field-errors {
    width: min(100%, 680px);

    margin-top: 0.1rem;
}


/* ------------------------------------------------------------
   FILE UPLOAD

   Retain the native accessible file input and native upload
   behavior; refine only its presentation.
   ------------------------------------------------------------ */

.kefi-apply-page
    .kefi-apply-about
    input[type="file"] {
    display: block;

    width: min(100%, 560px);

    color: #52636b;

    font: inherit;
    font-size: 0.92rem;

    cursor: pointer;
}

.kefi-apply-page
    .kefi-apply-about
    input[type="file"]::file-selector-button {
    min-height: 42px;

    margin-right: 0.75rem;
    padding: 0.58rem 0.9rem;

    color: #294c5a;
    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(49, 95, 112, 0.34);
    border-radius: 8px;

    font: inherit;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 120ms ease,
        border-color 120ms ease;
}

.kefi-apply-page
    .kefi-apply-about
    input[type="file"]::file-selector-button:hover {
    background: rgba(49, 95, 112, 0.07);
    border-color: rgba(49, 95, 112, 0.55);
}


/* ------------------------------------------------------------
   CHECKBOX FIELDS

   Django currently renders the photo-enhancement checkbox
   inside a normal form-field. Keep it compact rather than
   forcing the 46px text-input geometry onto it.
   ------------------------------------------------------------ */

.kefi-apply-page
    .kefi-apply-about
    .form-field
    > input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;

    margin: 0.1rem 0 0;

    accent-color: #315f70;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {
    .kefi-apply-page
        .kefi-apply-about
        .form-field {
        margin-bottom: 1.2rem;
    }

    .kefi-apply-page
        .kefi-apply-about
        .form-field
        > :is(
            input[type="text"],
            input[type="email"],
            input[type="tel"],
            input[type="url"],
            input[type="date"],
            input[type="number"],
            select,
            textarea
        ) {
        width: 100%;
        max-width: none;
    }

    .kefi-apply-page
        .kefi-apply-about
        input[type="file"] {
        width: 100%;
    }
}

/* PHASE-7E-APPLY-FORM-REFINEMENT-71834-END */

/* ============================================================
   PHASE-7E-APPLY-CHECKBOX-TITLE-60427

   Keep boolean profile fields on one line:
       [checkbox] Label

   Help text remains on the following line.

   Scoped exclusively to Section 1 of Membership Application.
   ============================================================ */

.kefi-apply-page
    .kefi-apply-about
    .form-field:has(> input[type="checkbox"]) {
    display: grid;

    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.55rem;
    row-gap: 0.38rem;

    align-items: center;
}

.kefi-apply-page
    .kefi-apply-about
    .form-field:has(> input[type="checkbox"])
    > label {
    grid-column: 2;
    grid-row: 1;

    margin: 0;
}

.kefi-apply-page
    .kefi-apply-about
    .form-field
    > input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1;

    align-self: center;

    width: 1.05rem;
    height: 1.05rem;

    margin: 0;

    accent-color: #315f70;
}

.kefi-apply-page
    .kefi-apply-about
    .form-field:has(> input[type="checkbox"])
    > .form-help,
.kefi-apply-page
    .kefi-apply-about
    .form-field:has(> input[type="checkbox"])
    > .field-errors {
    grid-column: 1 / -1;

    margin-left: 0;
}

/* PHASE-7E-APPLY-CHECKBOX-TITLE-60427-END */

/* ============================================================
   PHASE-7E-APPLICATION-SUBMITTED-42695

   Post-application confirmation.

   Applicant is not yet an approved community member, so this
   page remains visually within the onboarding experience rather
   than using the member's Standard Design artwork.
   ============================================================ */

body:has(.kefi-submitted-page) .kefi-design-canvas {
    display: none;
}

body:has(.kefi-submitted-page) {
    background:
        linear-gradient(
            rgba(247, 251, 252, 0.18),
            rgba(247, 251, 252, 0.18)
        ),
        url("../images/login-community-background.png")
        center center / cover fixed no-repeat;
}

body:has(.kefi-submitted-page) .site-main,
body:has(.kefi-submitted-page) .app-main {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - var(--site-header-height, 0px));

    margin: 0;

    padding:
        clamp(2rem, 7vh, 5rem)
        clamp(1rem, 4vw, 2rem);

    background: transparent;
}

.kefi-submitted-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    width: 100%;
    margin: 0;
}

.kefi-submitted-card {
    width: min(100%, 620px);

    margin: 0;

    padding:
        clamp(1.75rem, 4vw, 2.6rem)
        clamp(1.4rem, 4vw, 2.5rem);

    color: #203b47;
    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(49, 95, 112, 0.16);
    border-radius: 18px;

    box-shadow:
        0 3px 8px rgba(30, 48, 60, 0.06),
        0 18px 50px rgba(30, 48, 60, 0.13);

    text-align: center;

    backdrop-filter: blur(5px);
}

.kefi-submitted-brand {
    display: flex;
    justify-content: center;

    margin-bottom: 1.25rem;
}

.kefi-submitted-brand .kefi-login-logo {
    display: block;

    width: min(100%, 310px);
    height: auto;

    margin: 0;
}

.kefi-submitted-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.15rem;
    height: 3.15rem;

    margin: 0 auto 1rem;

    color: #ffffff;
    background: #315f70;

    border-radius: 999px;

    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
}

.kefi-submitted-card h1 {
    margin: 0 0 1rem;

    color: #203b47;

    font-size: clamp(1.65rem, 4vw, 2rem);
    line-height: 1.2;
}

.kefi-submitted-card .entry-intro {
    max-width: 48ch;

    margin:
        0
        auto
        0.8rem;

    color: #314c58;

    font-size: 1.04rem;
    line-height: 1.55;
}

.kefi-submitted-card > p:not(.entry-intro) {
    max-width: 48ch;

    margin:
        0
        auto;

    color: #52636b;

    line-height: 1.55;
}

.kefi-submitted-card .entry-secondary-action {
    margin-top: 1.7rem;
}

.kefi-submitted-card .secondary-action {
    min-width: 130px;
    min-height: 44px;

    padding: 0.62rem 1.15rem;

    color: #294c5a;
    background: rgba(255, 255, 255, 0.92);

    border: 1px solid rgba(49, 95, 112, 0.35);
    border-radius: 9px;

    font: inherit;
    font-weight: 650;

    cursor: pointer;
}

.kefi-submitted-card .secondary-action:hover {
    background: rgba(49, 95, 112, 0.07);
    border-color: rgba(49, 95, 112, 0.55);
}

.kefi-submitted-card .secondary-action:focus-visible {
    outline: 3px solid rgba(49, 95, 112, 0.25);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    body:has(.kefi-submitted-page) .site-main,
    body:has(.kefi-submitted-page) .app-main {
        padding:
            1.4rem
            0.85rem;
    }

    .kefi-submitted-card {
        padding:
            1.5rem
            1.15rem;

        border-radius: 14px;
    }

    .kefi-submitted-brand .kefi-login-logo {
        width: min(100%, 270px);
    }
}

/* PHASE-7E-APPLICATION-SUBMITTED-42695-END */


/* ============================================================
   PHASE-7E-ADMIN-DASHBOARD-48271-BEGIN

   Administration workspace presentation only.
   No global notification plumbing and no destination-page redesign.
   ============================================================ */

.kefi-app .administration-workspace {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 0 44px;
}


/* ------------------------------------------------------------
   WORKSPACE HEADING
   ------------------------------------------------------------ */

.kefi-app .administration-dashboard-heading {
    position: relative;

    margin: 0 0 22px;
    padding: 26px 28px;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(215, 224, 228, 0.96);
    border-radius: 16px;

    box-shadow:
        0 2px 5px rgba(31, 48, 59, 0.035),
        0 10px 26px rgba(31, 48, 59, 0.045);

    backdrop-filter: blur(3px);
}

.kefi-app .administration-eyebrow {
    margin: 0 0 7px;

    color: #9a3f3f;

    font-size: 0.72rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kefi-app .administration-dashboard-heading h1 {
    margin: 0;

    color: #243746;

    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    line-height: 1.15;
    font-weight: 760;
    letter-spacing: -0.025em;
}

.kefi-app .administration-intro {
    max-width: 700px;

    margin: 8px 0 0;

    color: #687780;

    font-size: 0.98rem;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   ADMINISTRATION CARD GRID
   ------------------------------------------------------------ */

.kefi-app .administration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.kefi-app .administration-card {
    position: relative;

    min-width: 0;
    min-height: 190px;

    display: flex;
    flex-direction: column;

    padding: 21px 22px 19px;

    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #dce3e7;
    border-radius: 15px;

    box-shadow:
        0 1px 2px rgba(30, 48, 60, 0.035),
        0 5px 15px rgba(30, 48, 60, 0.035);

    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease;
}

.kefi-app .administration-card:hover {
    transform: translateY(-1px);

    border-color: #ccd8dd;

    box-shadow:
        0 2px 4px rgba(30, 48, 60, 0.045),
        0 9px 22px rgba(30, 48, 60, 0.06);
}

.kefi-app .administration-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.kefi-app .administration-card-heading h2 {
    min-width: 0;

    margin: 0;

    color: #293d4b;

    font-size: 1.06rem;
    line-height: 1.28;
    font-weight: 750;
}

.kefi-app .administration-card-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #477a78;
    background: #edf5f3;

    border: 1px solid #d7e7e3;
    border-radius: 11px;
}

.kefi-app .administration-card-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .administration-card > p {
    flex: 1 1 auto;

    margin: 14px 0 17px;

    color: #68757e;

    font-size: 0.9rem;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   CARD ACTIONS
   ------------------------------------------------------------ */

.kefi-app .administration-card-action {
    align-self: flex-start;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 38px;

    padding: 0 12px;

    color: #3d6f6b;
    background: #f5f9f8;

    border: 1px solid #d9e7e4;
    border-radius: 8px;

    font-size: 0.84rem;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .administration-card-action:hover,
.kefi-app .administration-card-action:focus-visible {
    color: #2f5d59;
    background: #edf5f3;
    border-color: #c8ddd8;
    text-decoration: none;
}

.kefi-app .administration-card-action > span[aria-hidden="true"],
.kefi-app .administration-action-arrow {
    font-size: 1rem;
    line-height: 1;
}


/* ------------------------------------------------------------
   MEMBERSHIP APPLICATION ATTENTION STATE

   Uses only the existing pending_count supplied by
   administration_home(). No notification subsystem.
   ------------------------------------------------------------ */

.kefi-app .administration-card-attention {
    border-color: #e5caca;
    background: rgba(255, 252, 252, 0.97);
}

.kefi-app .administration-card-attention:hover {
    border-color: #d9b6b6;
}

.kefi-app .administration-card-attention .administration-card-icon {
    color: #a84646;
    background: #fff1f1;
    border-color: #efd2d2;
}

.kefi-app .administration-attention-dot {
    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    margin-left: auto;

    background: #c93636;
    border: 2px solid #fff;
    border-radius: 50%;

    box-shadow: 0 0 0 1px rgba(201, 54, 54, 0.18);
}

.kefi-app .administration-count {
    min-width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    color: #55716f;
    background: #e8f1ef;

    border-radius: 999px;

    font-size: 0.75rem;
    line-height: 1;
    font-weight: 800;
}

.kefi-app .administration-count-attention {
    color: #fff;
    background: #c93636;
}


/* ------------------------------------------------------------
   RETURN LINK
   ------------------------------------------------------------ */

.kefi-app .administration-return-link {
    margin: 22px 0 0;
}

.kefi-app .administration-return-link a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #52656f;

    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .administration-return-link a:hover,
.kefi-app .administration-return-link a:focus-visible {
    color: #315f70;
    text-decoration: underline;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1120px) {
    .kefi-app .administration-workspace {
        padding: 24px 0 36px;
    }
}

@media (max-width: 760px) {
    .kefi-app .administration-workspace {
        padding: 18px 0 28px;
    }

    .kefi-app .administration-dashboard-heading {
        margin-bottom: 14px;
        padding: 21px 18px;

        border-radius: 14px;
    }

    .kefi-app .administration-dashboard-heading h1 {
        font-size: 1.55rem;
    }

    .kefi-app .administration-intro {
        font-size: 0.9rem;
    }

    .kefi-app .administration-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .kefi-app .administration-card {
        min-height: 0;

        padding: 17px;

        border-radius: 13px;
    }

    .kefi-app .administration-card-icon {
        width: 39px;
        height: 39px;

        border-radius: 10px;
    }

    .kefi-app .administration-card-icon svg {
        width: 21px;
        height: 21px;
    }

    .kefi-app .administration-card > p {
        margin: 12px 0 15px;
    }

    .kefi-app .administration-card-action {
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .administration-card {
        transition: none;
    }

    .kefi-app .administration-card:hover {
        transform: none;
    }
}

/* PHASE-7E-ADMIN-DASHBOARD-48271-END */


/* ============================================================
   PHASE-7E-ADMIN-COMPACT-61734-BEGIN

   Compact Administration dashboard refinement.
   Wide desktop: 3 columns
   Medium:       2 columns
   Mobile:       1 column
   ============================================================ */

@media (min-width: 1181px) {
    .kefi-app .administration-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

.kefi-app .administration-dashboard-heading {
    margin-bottom: 16px;
    padding: 20px 23px;
}

.kefi-app .administration-dashboard-heading h1 {
    font-size: clamp(1.65rem, 2.1vw, 2rem);
}

.kefi-app .administration-intro {
    margin-top: 5px;
}

.kefi-app .administration-card {
    min-height: 148px;
    padding: 16px 17px 15px;
}

.kefi-app .administration-card-heading {
    gap: 10px;
}

.kefi-app .administration-card-heading h2 {
    font-size: 0.98rem;
    line-height: 1.22;
}

.kefi-app .administration-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
}

.kefi-app .administration-card-icon svg {
    width: 20px;
    height: 20px;
}

.kefi-app .administration-card > p {
    margin: 10px 0 12px;
    font-size: 0.84rem;
    line-height: 1.4;
}

.kefi-app .administration-card-action {
    min-height: 34px;
    padding: 0 10px;
    gap: 7px;

    font-size: 0.79rem;
}

.kefi-app .administration-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.72rem;
}

.kefi-app .administration-return-link {
    margin-top: 17px;
}


/* Medium desktop / tablet: retain two columns. */
@media (min-width: 761px) and (max-width: 1180px) {
    .kefi-app .administration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .kefi-app .administration-card {
        min-height: 145px;
    }
}


/* Small screens remain single-column. */
@media (max-width: 760px) {
    .kefi-app .administration-dashboard-heading {
        margin-bottom: 12px;
        padding: 18px 17px;
    }

    .kefi-app .administration-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .kefi-app .administration-card {
        min-height: 0;
        padding: 15px 16px;
    }

    .kefi-app .administration-card-icon {
        width: 36px;
        height: 36px;
    }

    .kefi-app .administration-card > p {
        margin: 9px 0 12px;
    }

    .kefi-app .administration-card-action {
        min-height: 38px;
    }
}

/* PHASE-7E-ADMIN-COMPACT-61734-END */


/* PHASE-7E-MEMBER-ADMINISTRATION-64217-BEGIN
   ============================================================
   MEMBER ADMINISTRATION
   Compact account-finding and management surface.
   ============================================================ */

.member-administration-page .page-heading {
    max-width: 920px;
}

.member-admin-filters {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
    gap: 14px;
    align-items: end;

    margin: 24px 0 18px;
    padding: 18px;

    background: var(--p7e-theme-surface, var(--surface));
    border: 1px solid var(--p7e-theme-border, var(--border));
    border-radius: 12px;
}

.member-admin-filters label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.member-admin-filters input,
.member-admin-filters select {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
}

.member-admin-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.member-admin-filter-actions button {
    min-width: 92px;
}

.member-admin-result-summary {
    margin: 0 0 10px;
    color: var(--p7e-theme-muted, var(--text-muted));
    font-size: 0.92rem;
    font-weight: 650;
}

.member-admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--p7e-theme-border, var(--border));
    border-radius: 12px;
    background: var(--p7e-theme-surface, var(--surface));
}

.member-admin-table {
    width: 100%;
    border-collapse: collapse;
}

.member-admin-table th,
.member-admin-table td {
    padding: 13px 15px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--p7e-theme-border, var(--border));
}

.member-admin-table th {
    color: var(--p7e-theme-muted, var(--text-muted));
    font-size: 0.84rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.member-admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.member-admin-table td:first-child strong {
    font-size: 1rem;
}

.member-admin-action {
    width: 1%;
    text-align: right !important;
    white-space: nowrap;
}

.member-admin-action .secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
}

.member-admin-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;

    margin-top: 18px;
}

.member-admin-pagination > div:last-child {
    text-align: right;
}

.member-admin-pagination span {
    color: var(--p7e-theme-muted, var(--text-muted));
}

.member-management-card {
    max-width: 760px;
}

.member-management-details {
    margin: 20px 0;
}

.member-management-details > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;

    padding: 10px 0;
    border-bottom: 1px solid var(--p7e-theme-border, var(--border));
}

.member-management-details dt {
    font-weight: 750;
}

.member-management-details dd {
    margin: 0;
}

.member-management-actions {
    margin-top: 22px;
}

.member-management-actions form {
    margin: 0;
}

.member-management-note {
    max-width: 620px;
    color: var(--p7e-theme-muted, var(--text-muted));
}

@media (max-width: 860px) {
    .member-admin-filters {
        grid-template-columns: 1fr 1fr;
    }

    .member-admin-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .member-admin-filters {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .member-admin-search {
        grid-column: auto;
    }

    .member-admin-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .member-admin-table,
    .member-admin-table tbody,
    .member-admin-table tr,
    .member-admin-table td {
        display: block;
        width: 100%;
    }

    .member-admin-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .member-admin-table tr {
        margin-bottom: 12px;
        padding: 12px 14px;

        background: var(--p7e-theme-surface, var(--surface));
        border: 1px solid var(--p7e-theme-border, var(--border));
        border-radius: 11px;
    }

    .member-admin-table td {
        display: grid;
        grid-template-columns: 82px 1fr;
        gap: 10px;

        padding: 6px 0;
        border: 0;
    }

    .member-admin-table td::before {
        content: attr(data-label);
        color: var(--p7e-theme-muted, var(--text-muted));
        font-size: 0.82rem;
        font-weight: 750;
    }

    .member-admin-table .member-admin-action {
        display: block;
        width: 100%;
        padding-top: 10px;
        text-align: left !important;
    }

    .member-admin-table .member-admin-action::before {
        content: none;
    }

    .member-admin-action .secondary-action {
        width: 100%;
        min-height: 44px;
    }

    .member-admin-pagination {
        grid-template-columns: 1fr 1fr;
    }

    .member-admin-pagination span {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }

    .member-management-details > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* PHASE-7E-MEMBER-ADMINISTRATION-64217-END */


/* PHASE-7E-ADMIN-SUMMARY-SUSPENSION-73146-BEGIN
   ============================================================
   ADMINISTRATION SUMMARY + MEMBER LIFECYCLE ACTIONS
   ============================================================ */

.administration-summary {
    margin: 0 0 24px;
    padding: 18px;

    border: 1px solid rgba(77, 93, 83, 0.16);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 28px rgba(46, 60, 51, 0.07);
}

.administration-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.administration-summary-heading h2 {
    margin: 2px 0 0;
    font-size: 1.15rem;
}

.administration-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.administration-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 72px;
    padding: 13px 15px;

    border: 1px solid rgba(77, 93, 83, 0.13);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.72);

    color: inherit;
    text-decoration: none;
}

.administration-summary-item:hover,
.administration-summary-item:focus-visible {
    border-color: rgba(77, 93, 83, 0.28);
    box-shadow: 0 5px 14px rgba(46, 60, 51, 0.08);
}

.administration-summary-item strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    min-height: 42px;
    padding: 4px 8px;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);

    font-size: 1.15rem;
    line-height: 1;
}

.administration-summary-item span {
    font-weight: 700;
    line-height: 1.25;
}

.member-management-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.member-management-actions form {
    display: inline-flex;
}

@media (max-width: 700px) {
    .administration-summary-grid {
        grid-template-columns: 1fr;
    }

    .administration-summary-item {
        min-height: 62px;
    }

    .member-management-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .member-management-actions form,
    .member-management-actions form button,
    .member-management-actions > .secondary-action {
        width: 100%;
    }
}

/* PHASE-7E-ADMIN-SUMMARY-SUSPENSION-73146-END */


/* PHASE-7E-SUSPENDED-STATUS-74261-BEGIN
   ============================================================
   SUSPENDED ACCOUNT STATUS

   Suspended members are outside the private community
   experience, so this state intentionally uses the established
   KefiCircle LOGIN artwork rather than the member's selected
   community Design/theme artwork.

   Artwork:
       ../images/login-community-background.png
   ============================================================ */


/*
 * Give the suspended state the same visual boundary as login:
 * no community artwork canvas behind the status card.
 */
body:has(.suspended-status-page) .kefi-design-canvas {
    display: none !important;
}


/*
 * Suspended accounts are rendered by base.html as public-site.
 * Mirror the proven login-background implementation by putting
 * the artwork on the public-site BODY rather than app-main.
 */
body.public-site:has(.suspended-status-page) {
    background-color: #d9eef8;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("../images/login-community-background.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


/*
 * Keep the status-page content layer transparent so the body
 * artwork remains visible behind the centered card.
 */
body.public-site:has(.suspended-status-page) .app-main {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;

    padding:
        clamp(32px, 7vh, 72px)
        clamp(20px, 5vw, 64px);

    background: transparent !important;

    box-sizing: border-box;
}

body.public-site:has(.suspended-status-page)
    .suspended-status-page {
    background: transparent !important;
}


/*
 * Override the normal secondary-page/sidebar geometry.
 */
body:has(.suspended-status-page)
    .app-main
    > .suspended-status-page {
    position: relative;
    z-index: 5;

    width: min(100%, 620px);
    max-width: 620px;

    margin: 0 !important;
}


/*
 * Main suspension card.
 *
 * Opaque enough for reliable readability while retaining a
 * small amount of the artwork through the surface.
 */
body:has(.suspended-status-page)
    .suspended-status-card {
    width: 100%;

    margin: 0;
    padding:
        clamp(30px, 4vw, 42px)
        clamp(24px, 4vw, 42px);

    color: #203844;
    text-align: center;

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 20px;

    box-shadow:
        0 3px 10px rgba(24, 52, 66, 0.08),
        0 18px 48px rgba(24, 52, 66, 0.18);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    box-sizing: border-box;
}


/*
 * Quiet warning symbol rather than an alarming error banner.
 */
body:has(.suspended-status-page)
    .suspended-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0 auto 17px;

    color: #9c4949;
    background: #fff4f2;

    border: 1px solid #e3aaa3;
    border-radius: 50%;

    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}


/*
 * Account Suspended is the sole heading in this state.
 */
body:has(.suspended-status-page)
    .suspended-account-notice h1 {
    margin: 0 0 20px;

    color: #17384a;

    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 750;
    line-height: 1.15;
}


/*
 * Keep the explanation compact and easy to read.
 */
body:has(.suspended-status-page)
    .suspended-account-notice p {
    max-width: 510px;

    margin: 0 auto 15px;

    color: #405863;

    font-size: 1rem;
    line-height: 1.6;
}

body:has(.suspended-status-page)
    .suspended-account-notice p:last-child {
    margin-bottom: 28px;
}


/*
 * Existing sitewide Need help? remains available.
 * Log Out is the normal card action.
 */
body:has(.suspended-status-page)
    .entry-secondary-action {
    margin: 12px 0 0;
}

body:has(.suspended-status-page)
    button.secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 126px;
    min-height: 42px;

    padding: 0 18px;

    color: #234653;
    background: #f7fafb;

    border: 1px solid #b8c9d0;
    border-radius: 9px;

    font: inherit;
    font-size: 0.94rem;
    font-weight: 700;

    cursor: pointer;
}

body:has(.suspended-status-page)
    button.secondary-action:hover {
    background: #edf3f5;
}


/*
 * Account deletion remains available but intentionally does not
 * compete visually with the normal Log Out action.
 */
body:has(.suspended-status-page)
    .entry-secondary-action a {
    color: #974747;

    font-size: 0.92rem;
    font-weight: 650;

    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/*
 * Mobile: retain the artwork while allowing the card to use the
 * available screen width comfortably.
 */
@media (max-width: 720px) {

    body.public-site:has(.suspended-status-page) {
        background-position: center center;
        background-attachment: scroll;
    }

    body.public-site:has(.suspended-status-page) .app-main {
        min-height: 100vh;

        padding: 24px 16px;

        background: transparent !important;
    }

    body:has(.suspended-status-page)
        .app-main
        > .suspended-status-page {
        width: 100%;
        max-width: none;

        margin: 0 !important;
    }

    body:has(.suspended-status-page)
        .suspended-status-card {
        padding: 28px 22px;

        border-radius: 16px;
    }

    body:has(.suspended-status-page)
        .suspended-account-notice h1 {
        font-size: 1.65rem;
    }
}

/* PHASE-7E-SUSPENDED-STATUS-74261-END */

/* PHASE-7E-SUSPENDED-CARD-60428-BEGIN
   ============================================================
   Final suspended-account card polish.

   The working login artwork/body treatment is intentionally
   untouched.  This block controls only the card presentation.
   ============================================================ */


/*
 * Lower the card so the upper scenic artwork remains visible.
 */
body.public-site:has(.suspended-status-page) .app-main {
    align-items: flex-start;

    padding-top: clamp(220px, 31vh, 330px);
    padding-bottom: 48px;
}


/*
 * Make the card materially smaller than the first version.
 */
body.public-site:has(.suspended-status-page)
    .app-main
    > .suspended-status-page {
    width: min(92vw, 510px);
    max-width: 510px;
}


body.public-site:has(.suspended-status-page)
    .suspended-status-card {
    padding: 24px 30px 26px;

    border-radius: 18px;
}


/*
 * Existing KefiCircle stock logo — never recreated.
 */
body.public-site:has(.suspended-status-page)
    .suspended-status-logo {
    display: block;

    width: min(190px, 58%);
    height: auto;

    margin: 0 auto 14px;
}


/*
 * Compact the warning symbol and vertical spacing.
 */
body.public-site:has(.suspended-status-page)
    .suspended-status-icon {
    width: 38px;
    height: 38px;

    margin: 0 auto 10px;

    font-size: 1.15rem;
}


body.public-site:has(.suspended-status-page)
    .suspended-account-notice h1 {
    margin-bottom: 13px;

    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
}


body.public-site:has(.suspended-status-page)
    .suspended-account-notice p {
    margin-bottom: 10px;

    font-size: 0.96rem;
    line-height: 1.5;
}


body.public-site:has(.suspended-status-page)
    .suspended-account-notice p:last-child {
    margin-bottom: 17px;
}


body.public-site:has(.suspended-status-page)
    .entry-secondary-action {
    margin-top: 8px;
}


/*
 * On smaller screens, don't force the card excessively low.
 */
@media (max-width: 720px) {

    body.public-site:has(.suspended-status-page) .app-main {
        align-items: flex-start;

        padding:
            clamp(110px, 18vh, 170px)
            16px
            28px;
    }

    body.public-site:has(.suspended-status-page)
        .app-main
        > .suspended-status-page {
        width: min(100%, 500px);
    }

    body.public-site:has(.suspended-status-page)
        .suspended-status-card {
        padding: 22px 20px 24px;
    }

    body.public-site:has(.suspended-status-page)
        .suspended-status-logo {
        width: min(175px, 62%);
    }
}

/* PHASE-7E-SUSPENDED-CARD-60428-END */

/* PHASE-7E-SUSPENDED-FINAL-19364-BEGIN
   Final suspended-account presentation adjustments.
   Background artwork and stock KefiCircle logo are unchanged.
   ============================================================ */


/*
 * Constrain the status panel instead of allowing it to span
 * nearly the full browser width.
 */
body.public-site:has(.suspended-status-page)
    .suspended-status-page {
    width: min(92vw, 640px) !important;
    max-width: 640px !important;
    margin-left: auto;
    margin-right: auto;
}


body.public-site:has(.suspended-status-page)
    .suspended-status-card {
    width: 100%;
    max-width: 640px;

    box-sizing: border-box;
}


/*
 * Stronger warning symbol.
 */
body.public-site:has(.suspended-status-page)
    .suspended-status-icon {
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 2px auto 13px;

    border-width: 2px;

    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}


/*
 * Preserve a comfortable mobile presentation.
 */
@media (max-width: 720px) {

    body.public-site:has(.suspended-status-page)
        .suspended-status-page {
        width: min(calc(100vw - 32px), 600px) !important;
    }

    body.public-site:has(.suspended-status-page)
        .suspended-status-icon {
        width: 52px;
        height: 52px;

        font-size: 1.6rem;
    }
}

/* PHASE-7E-SUSPENDED-FINAL-19364-END */

/* PHASE-7E-SUSPENDED-CENTER-28617-BEGIN
   Vertically center the approved suspended-account card.
   No artwork, sizing, content, or behavior changes.
   ============================================================ */

body.public-site:has(.suspended-status-page) .app-main {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: 32px;
    padding-bottom: 32px;

    box-sizing: border-box;
}

body.public-site:has(.suspended-status-page)
    .suspended-status-page {
    margin-top: 0;
    margin-bottom: 0;
}


/*
 * On shorter screens, retain enough top/bottom breathing room
 * and allow normal scrolling rather than clipping the card.
 */
@media (max-height: 650px) {

    body.public-site:has(.suspended-status-page) .app-main {
        align-items: flex-start;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}


/*
 * Mobile remains centered where space permits.
 */
@media (max-width: 720px) {

    body.public-site:has(.suspended-status-page) .app-main {
        min-height: 100vh;

        align-items: center;

        padding-top: 24px;
        padding-bottom: 24px;
    }
}

/* PHASE-7E-SUSPENDED-CENTER-28617-END */

/* PHASE-7E-SUSPENDED-CENTER-FIX-73142-BEGIN
   Correct centering architecture:
   the page wrapper fills the viewport and centers the card.
   ============================================================ */

body.public-site:has(.suspended-status-page)
    .suspended-status-page {
    width: 100% !important;
    max-width: none !important;

    min-height: 100vh;

    display: grid;
    place-items: center;

    margin: 0 !important;
    padding: 32px;

    box-sizing: border-box;
}

body.public-site:has(.suspended-status-page)
    .suspended-status-card {
    width: min(92vw, 640px) !important;
    max-width: 640px !important;

    margin: 0 auto !important;

    box-sizing: border-box;
}


/*
 * The page wrapper now owns vertical positioning.
 * app-main only needs to remain transparent.
 */
body.public-site:has(.suspended-status-page) .app-main {
    display: block;

    min-height: 100vh;

    padding: 0 !important;

    background: transparent;
}


/*
 * Short screens should scroll naturally rather than clip the card.
 */
@media (max-height: 650px) {

    body.public-site:has(.suspended-status-page)
        .suspended-status-page {
        place-items: start center;

        padding-top: 40px;
        padding-bottom: 40px;
    }
}


/*
 * Mobile keeps the same architecture with smaller margins.
 */
@media (max-width: 720px) {

    body.public-site:has(.suspended-status-page)
        .suspended-status-page {
        width: 100% !important;
        max-width: none !important;

        min-height: 100vh;

        place-items: center;

        padding: 24px 16px;
    }

    body.public-site:has(.suspended-status-page)
        .suspended-status-card {
        width: min(100%, 600px) !important;
    }
}

/* PHASE-7E-SUSPENDED-CENTER-FIX-73142-END */


/* PHASE-7E-SUSPENDED-CONTACT-73147
   Suspended members use the isolated Contact Administrators
   channel, not normal member Help/Inbox. */
body:has(.suspended-status-page) .floating-help {
    display: none !important;
}

body:has(.suspended-status-page) .suspended-contact-action {
    margin: 24px 0 14px;
}

body:has(.suspended-status-page) .suspended-contact-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}


/* PHASE-7E-SUSPENDED-CONTACT-UX-73148 */
.suspended-status-page .suspended-contact-action {
    text-align: center;
    margin: 1.5rem 0 1rem;
}

.suspended-status-page .suspended-contact-action .primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.4rem;
    border: 2px solid currentColor;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

/*
 * The normal member Help bubble points to /help/new/.
 * Suspended members instead use the dedicated one-way
 * Contact Administrators channel.
 */
body:has(.suspended-status-page) .help-bubble {
    display: none !important;
}


/* PHASE-7E-SUSPENDED-CONTACT-POLISH-73152
   Suspended contact form — compact, readable two-field layout.
   Presentation only.
   ============================================================ */

body:has(.suspended-status-page)
    .suspended-status-card form {
    width: min(100%, 500px);
    margin: 1.4rem auto 0;
    text-align: left;
}

body:has(.suspended-status-page)
    .suspended-status-card form label {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-weight: 700;
    color: #17384a;
}

body:has(.suspended-status-page)
    .suspended-status-card form input,
body:has(.suspended-status-page)
    .suspended-status-card form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.8rem;
    border: 1px solid #aebfc5;
    border-radius: 9px;
    font: inherit;
}

body:has(.suspended-status-page)
    .suspended-status-card form textarea {
    resize: vertical;
    min-height: 130px;
}

body:has(.suspended-status-page)
    .suspended-status-card form .primary-action {
    display: block;
    margin: 1.25rem auto 0;
}


/* PHASE-7E-SUSPENDED-CONTACT-BUTTON-73154
   Refined suspended-contact submit action.
   Presentation only.
   ============================================================ */

.suspended-status-page
    .suspended-status-card
    form button.primary-action {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    margin: 1.35rem auto 0;
    padding: 0.7rem 1.5rem;

    border: 1px solid #315f73;
    border-radius: 11px;

    background: #315f73;
    color: #ffffff;

    font: inherit;
    font-weight: 700;
    line-height: 1.2;

    box-shadow: 0 3px 8px rgba(30, 63, 78, 0.16);

    cursor: pointer;
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background-color 120ms ease;
}

.suspended-status-page
    .suspended-status-card
    form button.primary-action:hover {
    background: #274f61;
    box-shadow: 0 5px 11px rgba(30, 63, 78, 0.20);
    transform: translateY(-1px);
}

.suspended-status-page
    .suspended-status-card
    form button.primary-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(30, 63, 78, 0.16);
}

.suspended-status-page
    .suspended-status-card
    form button.primary-action:focus-visible {
    outline: 3px solid rgba(49, 95, 115, 0.28);
    outline-offset: 3px;
}


/* PHASE-7E-ADMIN-HELP-73157-BEGIN
   Administrator Help queue and conversation presentation.
   Presentation only. */

.admin-help-page {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.admin-help-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.admin-help-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid rgba(25, 75, 74, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.admin-help-summary-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 22px 0;
    padding: 20px 22px;
    border: 1px solid rgba(25, 75, 74, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.admin-help-summary-card > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-help-summary-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.62;
}

.admin-help-suspended-notice {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin: 22px 0;
    padding: 18px 20px;
    border: 1px solid rgba(174, 52, 52, 0.22);
    border-radius: 16px;
    background: rgba(255, 247, 247, 0.96);
}

.admin-help-suspended-notice p {
    margin: 5px 0 0;
    line-height: 1.55;
}

.admin-help-suspended-icon {
    display: flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #b63a3a;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}

.admin-help-conversation-card,
.admin-help-action-card {
    margin: 22px 0;
    padding: 22px;
    border: 1px solid rgba(25, 75, 74, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.admin-help-conversation-card h2,
.admin-help-action-card h2 {
    margin-top: 0;
}

.admin-help-message-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-help-message {
    padding: 15px 17px;
    border-radius: 13px;
    border: 1px solid rgba(25, 75, 74, 0.12);
    background: rgba(247, 250, 249, 0.94);
}

.admin-help-message p {
    margin: 7px 0 0;
    line-height: 1.55;
}

.admin-help-message-author {
    font-weight: 800;
}

.admin-help-message-system {
    border-style: dashed;
    opacity: 0.84;
}

.admin-help-action-card label {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}

.admin-help-action-card textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 130px;
    padding: 12px;
    border: 1px solid rgba(25, 75, 74, 0.24);
    border-radius: 10px;
    resize: vertical;
    font: inherit;
}

.admin-help-primary-button,
.admin-help-secondary-button {
    min-height: 44px;
    margin-top: 12px;
    padding: 10px 17px;
    border-radius: 10px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.admin-help-primary-button {
    border: 1px solid #205f5d;
    background: #205f5d;
    color: #fff;
}

.admin-help-secondary-button {
    border: 1px solid rgba(25, 75, 74, 0.24);
    background: rgba(255, 255, 255, 0.92);
}

.admin-help-close-section {
    margin: 18px 0 8px;
}

.admin-help-queue {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.admin-help-queue-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(25, 75, 74, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    text-decoration: none;
}

.admin-help-queue-card:hover {
    transform: translateY(-1px);
}

.admin-help-queue-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.admin-help-queue-subject {
    font-size: 1.04rem;
}

.admin-help-queue-member {
    font-size: 0.92rem;
    opacity: 0.72;
}

.admin-help-queue-status {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-help-suspended-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(182, 58, 58, 0.10);
    color: #8e2929;
    font-size: 0.88rem;
    font-weight: 800;
}

.admin-help-empty-card {
    padding: 28px 22px;
    border: 1px solid rgba(25, 75, 74, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    text-align: center;
}

.admin-help-empty-card p {
    margin-bottom: 0;
    opacity: 0.72;
}

@media (max-width: 700px) {
    .admin-help-heading {
        flex-direction: column;
    }

    .admin-help-summary-card {
        grid-template-columns: 1fr;
    }

    .admin-help-queue-card {
        align-items: flex-start;
    }
}

/* PHASE-7E-ADMIN-HELP-73157-END */


/* PHASE-7E-ADMIN-HELP-COMPACT-73158-BEGIN
   Compact the Administrator Help detail screen without reducing
   normal reading text size or changing Help behavior. */

.admin-help-page {
    max-width: 980px;
}

.admin-help-page .administration-dashboard-heading {
    padding: 15px 18px;
}

.admin-help-page .administration-dashboard-heading h1 {
    margin-top: 2px;
    margin-bottom: 3px;
}

.admin-help-page .administration-eyebrow {
    margin-top: 0;
    margin-bottom: 2px;
}

.admin-help-page .administration-intro {
    margin-top: 2px;
    margin-bottom: 0;
}

.admin-help-page .admin-help-back-link {
    min-height: 36px;
    padding: 6px 12px;
}

.admin-help-page .admin-help-suspended-notice {
    gap: 12px;
    margin: 14px 0;
    padding: 12px 15px;
}

.admin-help-page .admin-help-suspended-notice p {
    margin-top: 3px;
    line-height: 1.42;
}

.admin-help-page .admin-help-suspended-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 1.08rem;
}

.admin-help-page .admin-help-summary-card {
    gap: 14px;
    margin: 14px 0;
    padding: 13px 17px;
}

.admin-help-page .admin-help-summary-card > div {
    gap: 2px;
}

.admin-help-page .admin-help-conversation-card {
    margin: 14px 0;
    padding: 16px 17px;
}

.admin-help-page .admin-help-conversation-card h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

.admin-help-page .admin-help-message-list {
    gap: 9px;
}

.admin-help-page .admin-help-message {
    padding: 10px 13px;
}

.admin-help-page .admin-help-message p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.42;
}

.admin-help-page .admin-help-close-section {
    margin: 10px 0 0;
}

.admin-help-page .admin-help-secondary-button {
    min-height: 40px;
    margin-top: 0;
    padding: 8px 14px;
}

/* Keep normal Help response screens compact too, without shrinking text. */
.admin-help-page .admin-help-action-card {
    margin: 14px 0;
    padding: 16px 17px;
}

.admin-help-page .admin-help-action-card textarea {
    min-height: 105px;
}

/* PHASE-7E-ADMIN-HELP-COMPACT-73158-END */

/* PHASE-7E-ADMIN-HELP-PREVIEW-73161-BEGIN
   Compact preview of the member's first Help message.
*/
.admin-help-queue-preview {
    display: block;
    margin-top: 0.28rem;
    max-width: 52rem;
    overflow: hidden;
    color: var(--text-muted, #53605c);
    font-size: 0.94rem;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* PHASE-7E-ADMIN-HELP-PREVIEW-73161-END */

/* PHASE-7E-ADMIN-HELP-COMPACT-QUEUE-73162-BEGIN
   Denser Administrator Help queue:
   request badge on line one; member + preview on line two.
   Preserve normal reading-size typography while removing excess space.
*/

.admin-help-queue-list {
    gap: 0.55rem;
}

.admin-help-queue-item {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.admin-help-queue-main {
    gap: 0.3rem;
}

.admin-help-queue-summary-line {
    display: flex;
    align-items: baseline;
    min-width: 0;
    gap: 0.35rem;
    line-height: 1.35;
}

.admin-help-queue-member {
    flex: 0 0 auto;
}

.admin-help-queue-summary-separator {
    flex: 0 0 auto;
    color: var(--text-muted, #53605c);
}

.admin-help-queue-summary-line .admin-help-queue-preview {
    display: block;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-help-queue-status {
    align-self: flex-end;
    margin-bottom: 0.05rem;
}

/* PHASE-7E-ADMIN-HELP-COMPACT-QUEUE-73162-END */

/* PHASE-7E-DELETE-CONFIRMATION-73178-BEGIN
   Phase 7E Delete Account presentation.
   Uses the same artwork and KefiCircle identity as the login screen.
*/

.public-site:has(.delete-account-page) {
    background-image:
        url("../images/login-community-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.public-site:has(.delete-account-page) .site-main {
    background: transparent;
}

.public-site .site-main .delete-account-page {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: min(76vh, 700px);
    padding: 2.5rem 1rem;
    box-sizing: border-box;
}

.public-site .site-main .delete-account-card {
    display: block;
    position: relative;
    z-index: 2;
    width: min(100%, 42rem);
    margin: 0 auto;
    padding: 2rem 2.4rem 2.25rem;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.91);
    box-shadow:
        0 18px 45px rgba(31, 53, 68, 0.18),
        0 3px 12px rgba(31, 53, 68, 0.10);
    color: var(--p7e-theme-text, #26332f);
    backdrop-filter: blur(3px);
}

.public-site .site-main .delete-account-brand {
    display: flex;
    justify-content: center;
    margin: 0 0 1.4rem;
}

.public-site .site-main .delete-account-brand img {
    display: block;
    width: min(13.5rem, 72%);
    height: auto;
}

.public-site .site-main .delete-account-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.15rem;
}

.public-site .site-main .delete-account-heading h1 {
    margin: 0;
    color: var(--p7e-theme-heading, #233c42);
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: 1.15;
}

.public-site .site-main .delete-account-warning-icon {
    display: flex;
    flex: 0 0 4rem;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(211, 53, 53, 0.12);
    color: #c93636;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.public-site .site-main .delete-account-card p {
    margin: 0 0 1rem;
    line-height: 1.6;
}

.public-site .site-main .delete-account-card form {
    margin-top: 1.5rem;
}

.public-site .site-main .delete-account-irreversible-warning {
    margin-top: 1.1rem;
    padding: 0.95rem 1rem;
    border-left: 4px solid #c93636;
    border-radius: 0.5rem;
    background: rgba(211, 53, 53, 0.075);
    color: #a52e2e;
    font-weight: 700;
}

.public-site .site-main .delete-account-confirm {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8rem 1.25rem;
    border: 0;
    border-radius: 0.65rem;
    background: #c93636;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(201, 54, 54, 0.20);
}

.public-site .site-main .delete-account-confirm:hover {
    background: #b72f2f;
}

.public-site .site-main .delete-account-back {
    margin-top: 0.8rem;
}

.public-site .site-main .delete-account-back a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(35, 60, 66, 0.28);
    border-radius: 0.65rem;
    text-align: center;
    color: var(--p7e-theme-heading, #28535b);
    text-decoration: none;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.55);
}

.public-site .site-main .delete-account-back a:hover {
    background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 640px) {
    .public-site:has(.delete-account-page) {
        background-attachment: scroll;
    }

    .public-site .site-main .delete-account-page {
        align-items: flex-start;
        min-height: auto;
        padding: 1.25rem 0.75rem 2rem;
    }

    .public-site .site-main .delete-account-card {
        padding: 1.5rem 1.25rem 1.6rem;
        border-radius: 1rem;
    }

    .public-site .site-main .delete-account-brand img {
        width: min(12rem, 78%);
    }

    .public-site .site-main .delete-account-heading {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .public-site .site-main .delete-account-warning-icon {
        flex-basis: 3.25rem;
        width: 3.25rem;
        height: 3.25rem;
        font-size: 2rem;
    }
}

/* PHASE-7E-DELETE-CONFIRMATION-73178-END */

/* PHASE-7E-DELETE-CLEANUP-73180-BEGIN */

/*
 * Match the established Account Suspended visual hierarchy:
 * logo -> warning icon -> centered heading.
 */
.public-site .site-main .delete-account-heading {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
}

.public-site .site-main .delete-account-heading h1 {
    width: 100%;
    text-align: center;
}

/*
 * Delete Account already has an appropriate route back to the
 * suspended-account screen, where Contact Administrators is available.
 * Suppress the sitewide floating Help launcher on this page only.
 */
body:has(.delete-account-page) .help-bubble {
    display: none !important;
}

/* PHASE-7E-DELETE-CLEANUP-73180-END */

/* PHASE-7E-SPONSORED-INVITATION-73198-BEGIN
   Member-sponsored invitation visual refinement.
   Deliberately scoped to .sponsored-invitation-page.
*/

.sponsored-invitation-page {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 2rem 1rem 3rem;
    box-sizing: border-box;
}

.sponsored-invitation-card {
    width: min(100%, 50rem);
    padding: 2rem 2.25rem 2.15rem;
    box-sizing: border-box;
    border: 1px solid rgba(118, 93, 51, 0.22);
    border-radius: 1.15rem;
    background: rgba(255, 250, 238, 0.92);
    box-shadow:
        0 14px 34px rgba(57, 67, 58, 0.10),
        0 2px 8px rgba(57, 67, 58, 0.06);
    backdrop-filter: blur(2px);
}

.sponsored-invitation-heading {
    margin-bottom: 1.6rem;
}

.sponsored-invitation-heading h1 {
    margin: 0 0 0.55rem;
    color: var(--p7e-theme-heading, #3c3427);
    font-size: clamp(1.65rem, 3vw, 2rem);
    line-height: 1.2;
}

.sponsored-invitation-heading p {
    max-width: 43rem;
    margin: 0;
    color: var(--p7e-theme-text, #4e4a41);
    line-height: 1.55;
}

.sponsored-invitation-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.sponsored-invitation-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sponsored-invitation-field > label {
    color: var(--p7e-theme-heading, #3c3427);
    font-weight: 700;
}

.sponsored-invitation-field input[type="text"],
.sponsored-invitation-field input[type="tel"] {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.65rem 0.8rem;
    box-sizing: border-box;
    border: 1px solid rgba(61, 74, 69, 0.30);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--p7e-theme-text, #29332f);
    font: inherit;
}

.sponsored-invitation-field input:focus {
    outline: 3px solid rgba(39, 121, 112, 0.16);
    border-color: #277970;
}

.sponsored-invitation-help {
    margin: 0;
    color: var(--text-muted, #66716c);
    font-size: 0.9rem;
    line-height: 1.4;
}

.sponsored-invitation-confirmations {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.15rem;
}

.sponsored-invitation-check {
    display: grid;
    grid-template-columns: 1.35rem 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(61, 74, 69, 0.13);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.45);
    color: var(--p7e-theme-text, #3f4743);
    line-height: 1.45;
    cursor: pointer;
}

.sponsored-invitation-check input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    accent-color: #277970;
}

.sponsored-invitation-errors {
    color: #a52e2e;
    font-size: 0.92rem;
    font-weight: 600;
}

.sponsored-invitation-errors ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.sponsored-invitation-actions {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    margin-top: 0.4rem;
}

.sponsored-invitation-submit,
.sponsored-invitation-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.7rem 1.25rem;
    box-sizing: border-box;
    border-radius: 0.65rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.sponsored-invitation-submit {
    flex: 1 1 auto;
    border: 1px solid #277970;
    background: #277970;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(39, 121, 112, 0.18);
}

.sponsored-invitation-submit:hover {
    background: #20685f;
    border-color: #20685f;
}

.sponsored-invitation-cancel {
    flex: 0 0 auto;
    border: 1px solid rgba(39, 83, 91, 0.28);
    background: rgba(255, 255, 255, 0.55);
    color: var(--p7e-theme-heading, #28535b);
}

.sponsored-invitation-cancel:hover {
    background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
    .sponsored-invitation-page {
        padding: 1rem 0.65rem 2rem;
    }

    .sponsored-invitation-card {
        padding: 1.4rem 1.1rem 1.5rem;
        border-radius: 0.9rem;
    }

    .sponsored-invitation-actions {
        flex-direction: column;
    }

    .sponsored-invitation-cancel {
        width: 100%;
    }
}

/* PHASE-7E-SPONSORED-INVITATION-73198-END */

/* PHASE-7E-SPONSORED-INVITATION-DISABLED-73205-BEGIN */
.sponsored-invitation-page .sponsored-invitation-submit:disabled {
    background: #d8c5ad;
    border-color: #d8c5ad;
    color: #76695b;
    box-shadow: none;
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
}

.sponsored-invitation-page .sponsored-invitation-submit:disabled:hover,
.sponsored-invitation-page .sponsored-invitation-submit:disabled:focus {
    background: #d8c5ad;
    border-color: #d8c5ad;
    color: #76695b;
    box-shadow: none;
    transform: none;
}
/* PHASE-7E-SPONSORED-INVITATION-DISABLED-73205-END */

/* PHASE-7E-LOGIN-SEND-ROUNDED-73209-BEGIN */
.kefi-login-page .kefi-login-submit {
    border-radius: 0.75rem;
}
/* PHASE-7E-LOGIN-SEND-ROUNDED-73209-END */

/* PHASE-7E-SPONSORSHIP-COMPACT-73215-BEGIN */
.sponsorship-administration-page .sponsorship-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.8rem 0;
}

.sponsorship-administration-page .sponsorship-card-details {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.sponsorship-administration-page .sponsorship-card-details h2,
.sponsorship-administration-page .sponsorship-status {
    margin: 0;
}

.sponsorship-administration-page .sponsorship-card-details h2 {
    min-width: 12rem;
    font-size: 1.05rem;
}

.sponsorship-administration-page .sponsorship-card-action {
    margin-left: auto;
}

.sponsorship-administration-page .sponsorship-card-action form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.sponsorship-administration-page .sponsorship-card-action label {
    white-space: nowrap;
}

.sponsorship-administration-page
.sponsorship-card-action input[type="date"] {
    width: auto;
}

@media (max-width: 900px) {
    .sponsorship-administration-page .sponsorship-card,
    .sponsorship-administration-page .sponsorship-card-details,
    .sponsorship-administration-page .sponsorship-card-action form {
        flex-wrap: wrap;
    }

    .sponsorship-administration-page .sponsorship-card-action {
        width: 100%;
        margin-left: 0;
    }

    .sponsorship-administration-page .sponsorship-card-details h2 {
        min-width: 0;
    }
}
/* PHASE-7E-SPONSORSHIP-COMPACT-73215-END */

/* PHASE-7E-ANNOUNCEMENT-ADMIN-73217-BEGIN */
.administration-page .announcement-create-form {
    max-width: 46rem;
    margin-top: 1rem;
}

.administration-page .announcement-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.administration-page .announcement-form-field label {
    font-weight: 600;
}

.administration-page .announcement-create-form input[type="text"],
.administration-page .announcement-create-form textarea {
    box-sizing: border-box;
    width: 100%;
}

.administration-page .announcement-create-form textarea {
    min-height: 9rem;
    resize: vertical;
}

.administration-page .announcement-type-field {
    max-width: 15rem;
}

.administration-page .announcement-retention-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.administration-page .announcement-retention-row
.announcement-form-field {
    margin-bottom: 0;
}

.administration-page .announcement-expiration-field {
    min-width: 15rem;
}

.administration-page .announcement-form-actions {
    margin-top: 1rem;
}

.administration-page .announcement-form-actions button {
    border-radius: 0.75rem;
}

.administration-page .announcement-form-errors,
.administration-page .announcement-create-form .errorlist {
    color: #8a2d24;
}

.administration-page .announcement-create-form .errorlist {
    margin: 0.2rem 0 0;
    padding-left: 1.2rem;
}

@media (max-width: 700px) {
    .administration-page .announcement-create-form {
        max-width: none;
    }

    .administration-page .announcement-retention-row {
        display: block;
    }

    .administration-page .announcement-retention-row
    .announcement-form-field {
        margin-bottom: 0.9rem;
    }
}
/* PHASE-7E-ANNOUNCEMENT-ADMIN-73217-END */

/* PHASE-7E-ANNOUNCEMENT-COMPACT-73218-BEGIN */

/*
 * Compact desktop announcement editor.
 * Keeps all existing fields and behavior while reducing vertical space.
 */
@media (min-width: 701px) {
    .administration-page .announcement-create-form {
        display: grid;
        grid-template-columns: 12rem minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.7rem;
        max-width: none;
        margin-top: 0.75rem;
    }

    .administration-page .announcement-create-form
    .announcement-form-field {
        margin-bottom: 0;
    }

    .administration-page .announcement-type-field {
        grid-column: 1;
        max-width: none;
    }

    .administration-page .announcement-title-field {
        grid-column: 2;
    }

    .administration-page .announcement-body-field {
        grid-column: 1 / -1;
    }

    .administration-page .announcement-create-form textarea {
        min-height: 7rem;
        height: 7rem;
    }

    .administration-page .announcement-retention-row {
        grid-column: 1 / -1;
        display: flex;
        align-items: end;
        gap: 1rem;
    }

    .administration-page .announcement-retention-row
    .announcement-form-field {
        margin: 0;
    }

    .administration-page .announcement-expiration-field {
        min-width: 15rem;
    }

    .administration-page .announcement-form-actions {
        grid-column: 1 / -1;
        margin-top: 0;
    }
}

/* Tighten only the announcement administration cards. */
.administration-page .administration-card:has(.announcement-create-form) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.administration-page .administration-card:has(.announcement-create-form) h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* PHASE-7E-ANNOUNCEMENT-COMPACT-73218-END */

/* PHASE-7E-ANNOUNCEMENT-LIST-73219-BEGIN */

.announcement-admin-list {
    display: flex;
    flex-direction: column;
}

.announcement-admin-row {
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(92, 66, 38, 0.14);
}

.announcement-admin-row:last-child {
    border-bottom: 0;
}

.announcement-admin-summary {
    display: grid;
    grid-template-columns:
        minmax(9rem, 1.2fr)
        auto
        minmax(12rem, 2fr)
        auto
        auto;
    align-items: center;
    gap: 0.85rem;
}

.announcement-admin-title,
.announcement-admin-status,
.announcement-admin-preview {
    min-width: 0;
}

.announcement-admin-title,
.announcement-admin-status {
    white-space: nowrap;
}

.announcement-admin-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.announcement-admin-details {
    position: relative;
}

.announcement-admin-details summary {
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.announcement-admin-full-body {
    grid-column: 1 / -1;
    margin-top: 0.65rem;
    padding: 0.75rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
}

/*
 * When details is open, its body appears directly below
 * the View control while the compact row remains intact.
 */
.announcement-admin-details[open] {
    grid-column: 1 / -1;
}

.announcement-admin-details[open] summary {
    margin-bottom: 0.4rem;
}

.announcement-admin-delete {
    margin: 0;
}

.announcement-admin-delete button {
    border-radius: 0.6rem;
}

@media (max-width: 850px) {
    .announcement-admin-summary {
        display: flex;
        flex-wrap: wrap;
    }

    .announcement-admin-preview {
        flex: 1 1 100%;
    }

    .announcement-admin-details[open] {
        flex: 1 1 100%;
    }
}

/* PHASE-7E-ANNOUNCEMENT-LIST-73219-END */


/* PHASE-7E-HOME-ANNOUNCEMENT-MODAL-73223-BEGIN */

.kefi-announcement-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(30, 43, 46, 0.38);
    backdrop-filter: blur(2px);
}

.kefi-announcement-modal {
    position: relative;
    width: min(42rem, 100%);
    max-height: min(75vh, 42rem);
    overflow: auto;
    border: 1px solid rgba(75, 122, 113, 0.25);
    border-radius: 1.25rem;
    background: rgba(255, 252, 248, 0.98);
    box-shadow:
        0 1.5rem 4rem rgba(25, 40, 42, 0.28),
        0 0.25rem 0.8rem rgba(25, 40, 42, 0.12);
}

.kefi-announcement-modal-accent {
    height: 0.4rem;
    background: linear-gradient(
        90deg,
        #d59a37,
        #5f9c8e,
        #6b8db8
    );
}

.kefi-announcement-modal-content {
    padding: 2rem 2.25rem 2.1rem;
}

.kefi-announcement-eyebrow {
    margin-bottom: 0.45rem;
    color: #4f7f76;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kefi-announcement-modal h2 {
    margin: 0 0 1rem;
    color: #553a43;
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.2;
}

.kefi-announcement-body {
    color: #4f5152;
    font-size: 1rem;
    line-height: 1.65;
}

.kefi-announcement-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.6rem;
}

.kefi-announcement-actions form {
    margin: 0;
}

.kefi-announcement-actions button {
    min-width: 6.5rem;
    padding: 0.7rem 1.15rem;
    border-radius: 0.75rem;
    font-weight: 700;
}

@media (max-width: 600px) {
    .kefi-announcement-overlay {
        align-items: flex-start;
        padding: 4.5rem 1rem 1rem;
    }

    .kefi-announcement-modal-content {
        padding: 1.5rem;
    }

    .kefi-announcement-actions button {
        width: 100%;
    }

    .kefi-announcement-actions form {
        width: 100%;
    }
}

/* PHASE-7E-HOME-ANNOUNCEMENT-MODAL-73223-END */


/* ============================================================
   PHASE-7E-CATEGORY-ADMIN-73233-BEGIN
   Category Administration presentation only.
   Scoped to avoid changing other Administration surfaces.
   ============================================================ */

.kefi-app .category-administration-page {
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 28px 22px 48px;
}

.kefi-app .category-admin-shell {
    padding: 26px 28px 30px;

    background: rgba(255, 252, 246, 0.94);
    border: 1px solid rgba(128, 103, 72, 0.16);
    border-radius: 22px;

    box-shadow:
        0 2px 5px rgba(64, 47, 30, 0.05),
        0 14px 38px rgba(64, 47, 30, 0.08);

    backdrop-filter: blur(3px);
}

.kefi-app .category-admin-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 18px;

    color: #65716f;

    font-size: 0.86rem;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .category-admin-back:hover,
.kefi-app .category-admin-back:focus-visible {
    color: #365f5c;
    text-decoration: underline;
}

.kefi-app .category-admin-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 23px;
}

.kefi-app .category-admin-heading > div {
    min-width: 0;
}

.kefi-app .category-admin-heading h1 {
    margin: 0;

    color: #293d4b;

    font-size: clamp(1.75rem, 2.7vw, 2.25rem);
    line-height: 1.12;
    font-weight: 780;
    letter-spacing: -0.025em;
}

.kefi-app .category-admin-heading p {
    max-width: 650px;

    margin: 8px 0 0;

    color: #6a777b;

    font-size: 0.94rem;
    line-height: 1.5;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home)) .category-admin-create {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;
    padding: 0 16px;

    color: #fff;
    background: #a75f35;

    border: 1px solid #98542e;
    border-radius: 10px;

    box-shadow: 0 3px 8px rgba(116, 68, 38, 0.16);

    font-size: 0.88rem;
    line-height: 1.2;
    font-weight: 750;
    text-decoration: none;

    transition:
        transform 130ms ease,
        background 130ms ease,
        box-shadow 130ms ease;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home)) .category-admin-create:hover,
.kefi-app .app-main:not(:has(.kefi-design-page-home)) .category-admin-create:focus-visible {
    color: #fff;
    background: #7d4022;

    box-shadow: 0 5px 12px rgba(116, 68, 38, 0.24);

    text-decoration: none;
}

.kefi-app .category-admin-panel {
    padding: 20px;

    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #e4ddd2;
    border-radius: 16px;
}

.kefi-app .category-admin-panel-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kefi-app .category-admin-panel-icon {
    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #557873;
    background: #edf5f1;

    border: 1px solid #d9e7e2;
    border-radius: 10px;
}

.kefi-app .category-admin-panel-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .category-admin-panel-heading h2 {
    margin: 0;

    color: #30434d;

    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 760;
}

.kefi-app .category-admin-panel-heading p {
    margin: 4px 0 0;

    color: #788286;

    font-size: 0.82rem;
    line-height: 1.35;
}

.kefi-app .category-admin-notice {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 15px 0 14px;
    padding: 7px 10px;

    color: #725c3d;
    background: #fff8e9;

    border: 1px solid #eee0bd;
    border-radius: 8px;

    font-size: 0.78rem;
    line-height: 1.3;
    font-weight: 650;
}

.kefi-app .category-admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kefi-app .category-admin-row {
    display: grid;
    grid-template-columns: 48px minmax(170px, 1.15fr) minmax(320px, 2fr) auto;
    align-items: center;
    gap: 14px;

    min-width: 0;

    padding: 13px 14px;

    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e1e5e4;
    border-radius: 12px;

    box-shadow: 0 2px 7px rgba(45, 57, 58, 0.035);

    transition:
        transform 130ms ease,
        border-color 130ms ease,
        box-shadow 130ms ease;
}

.kefi-app .category-admin-row:hover {
    border-color: #d0dad7;

    box-shadow: 0 5px 13px rgba(45, 57, 58, 0.065);

    transform: translateY(-1px);
}

.kefi-app .category-admin-category-icon {
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid transparent;
    border-radius: 11px;
}

.kefi-app .category-admin-category-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .category-admin-category-icon-1 {
    color: #73589b;
    background: #f1edf8;
    border-color: #e1d9ef;
}

.kefi-app .category-admin-category-icon-2 {
    color: #527a57;
    background: #edf6ed;
    border-color: #d9e9d9;
}

.kefi-app .category-admin-category-icon-3 {
    color: #4e7594;
    background: #edf4f8;
    border-color: #d9e6ed;
}

.kefi-app .category-admin-category-icon-4 {
    color: #9a683b;
    background: #faf1e8;
    border-color: #eddcca;
}

.kefi-app .category-admin-category-icon-5 {
    color: #966176;
    background: #f8eef2;
    border-color: #ead9e0;
}

.kefi-app .category-admin-identity {
    min-width: 0;
}

.kefi-app .category-admin-identity h3 {
    margin: 0 0 3px;

    overflow: hidden;

    color: #344751;

    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 750;
    text-overflow: ellipsis;
}

.kefi-app .category-admin-key {
    display: block;

    overflow: hidden;

    color: #8a9295;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", monospace;
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kefi-app .category-admin-facts {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;

    min-width: 0;
}

.kefi-app .category-admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    min-height: 28px;
    padding: 0 9px;

    color: #657276;
    background: #f5f7f7;

    border: 1px solid #e3e8e7;
    border-radius: 999px;

    font-size: 0.73rem;
    line-height: 1;
    font-weight: 650;
    white-space: nowrap;
}

.kefi-app .category-admin-pill strong {
    color: #59666a;
    font-weight: 750;
}

.kefi-app .category-admin-pill-enabled {
    color: #467157;
    background: #edf7f0;
    border-color: #d5e9db;
}

.kefi-app .category-admin-pill-disabled {
    color: #8a5d55;
    background: #fbf0ee;
    border-color: #ecd8d4;
}

.kefi-app .category-admin-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 36px;
    padding: 0 11px;

    color: #496d69;
    background: #f6faf9;

    border: 1px solid #d8e5e2;
    border-radius: 8px;

    font-size: 0.8rem;
    line-height: 1;
    font-weight: 750;
    text-decoration: none;
}

.kefi-app .category-admin-edit:hover,
.kefi-app .category-admin-edit:focus-visible {
    color: #315d58;
    background: #edf5f3;
    border-color: #c9ddd8;
    text-decoration: none;
}

.kefi-app .category-admin-edit span {
    font-size: 1.05rem;
    line-height: 1;
}

.kefi-app .category-admin-empty {
    margin-top: 15px;
    padding: 28px 18px;

    color: #6f797c;
    background: #fafafa;

    border: 1px dashed #d7dddd;
    border-radius: 11px;

    text-align: center;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .kefi-app .category-admin-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .kefi-app .category-admin-facts {
        grid-column: 2 / -1;
    }
}

@media (max-width: 700px) {
    .kefi-app .category-administration-page {
        padding: 18px 12px 34px;
    }

    .kefi-app .category-admin-shell {
        padding: 19px 16px 22px;
        border-radius: 17px;
    }

    .kefi-app .category-admin-heading {
        display: block;
    }

    .kefi-app .category-admin-create {
        margin-top: 16px;
    }

    .kefi-app .category-admin-panel {
        padding: 14px;
    }

    .kefi-app .category-admin-row {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;

        padding: 12px;
    }

    .kefi-app .category-admin-category-icon {
        width: 40px;
        height: 40px;
    }

    .kefi-app .category-admin-facts {
        grid-column: 1 / -1;
    }

    .kefi-app .category-admin-edit {
        grid-column: 1 / -1;

        width: 100%;
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .category-admin-create,
    .kefi-app .category-admin-row {
        transition: none;
    }

    .kefi-app .category-admin-create:hover,
    .kefi-app .category-admin-row:hover {
        transform: none;
    }
}

/* PHASE-7E-CATEGORY-ADMIN-73233-END */


/* ============================================================
   PHASE-7E-DELIGHTFUL-CATEGORY-FORM-73245-BEGIN

   Delightful presentation for the shared Create/Edit Category
   form. Presentation only; category form behavior is unchanged.
   Category Administration is the visual reference.
   ============================================================ */

.kefi-app .category-form-page {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: 28px 22px 48px;
}

.kefi-app .category-form-shell {
    padding: 26px 28px 30px;

    background: rgba(255, 252, 246, 0.94);
    border: 1px solid rgba(128, 103, 72, 0.16);
    border-radius: 22px;

    box-shadow:
        0 2px 5px rgba(64, 47, 30, 0.05),
        0 14px 38px rgba(64, 47, 30, 0.08);

    backdrop-filter: blur(3px);
}

.kefi-app .category-form-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 18px;

    color: #65716f;

    font-size: 0.86rem;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .category-form-back:hover,
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .category-form-back:focus-visible {
    color: #365f5c;
    text-decoration: underline;
}

.kefi-app .category-form-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 20px;
}

.kefi-app .category-form-heading-icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #557873;
    background: #edf5f1;

    border: 1px solid #d9e7e2;
    border-radius: 13px;
}

.kefi-app .category-form-heading-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .category-form-heading h1 {
    margin: 0;

    color: #293d4b;

    font-size: clamp(1.75rem, 2.7vw, 2.25rem);
    line-height: 1.12;
    font-weight: 780;
    letter-spacing: -0.025em;
}

.kefi-app .category-form-heading p {
    margin: 6px 0 0;

    color: #6a777b;

    font-size: 0.94rem;
    line-height: 1.45;
}

.kefi-app .category-form-key {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin: 0 0 16px;
    padding: 9px 11px;

    color: #687679;
    background: #f5f3ee;

    border: 1px solid #e3ded4;
    border-radius: 9px;

    font-size: 0.82rem;
    line-height: 1.35;
}

.kefi-app .category-form-key-label {
    font-weight: 700;
    color: #536468;
}

.kefi-app .category-form-key code {
    padding: 2px 7px;

    color: #365f5c;
    background: #e8f1ee;

    border-radius: 6px;

    font-size: 0.82rem;
    font-weight: 750;
}

.kefi-app .category-form-key-note {
    color: #7a8587;
}

.kefi-app .category-form-panel {
    padding: 22px;

    background: rgba(255, 255, 255, 0.84);
    border: 1px solid #e4ddd2;
    border-radius: 16px;
}

.kefi-app .category-form-panel-heading {
    padding-bottom: 16px;
    margin-bottom: 18px;

    border-bottom: 1px solid #ebe6de;
}

.kefi-app .category-form-panel-heading h2 {
    margin: 0;

    color: #30434d;

    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 760;
}

.kefi-app .category-form-panel-heading p {
    margin: 4px 0 0;

    color: #788286;

    font-size: 0.82rem;
    line-height: 1.35;
}

.kefi-app .category-form-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.62fr);
    gap: 18px 22px;
}

.kefi-app .category-form-fields > p {
    display: flex;
    flex-direction: column;
    gap: 7px;

    min-width: 0;
    margin: 0;
}

.kefi-app .category-form-fields > p:first-child {
    grid-column: 1 / -1;
}

.kefi-app .category-form-fields label {
    color: #344b55;

    font-size: 0.88rem;
    line-height: 1.3;
    font-weight: 720;
}

.kefi-app .category-form-fields
    :is(
        input[type="text"],
        input[type="number"],
        select
    ) {
    box-sizing: border-box;

    width: 100%;
    min-height: 44px;

    padding: 9px 11px;

    color: #293d4b;
    background: rgba(255, 255, 255, 0.98);

    border: 1px solid #cfd8d6;
    border-radius: 9px;

    font: inherit;

    box-shadow: inset 0 1px 2px rgba(43, 61, 66, 0.035);

    transition:
        border-color 130ms ease,
        box-shadow 130ms ease,
        background 130ms ease;
}

.kefi-app .category-form-fields
    :is(
        input[type="text"],
        input[type="number"],
        select
    ):focus {
    outline: none;

    background: #fff;
    border-color: #668d87;

    box-shadow:
        0 0 0 3px rgba(85, 120, 115, 0.14),
        inset 0 1px 2px rgba(43, 61, 66, 0.025);
}

.kefi-app .category-form-fields .helptext {
    color: #788286;

    font-size: 0.78rem;
    line-height: 1.4;
}

.kefi-app .category-form-fields .errorlist {
    margin: 0;
    padding: 8px 10px;

    color: #8b3d32;
    background: #fff0ed;

    border: 1px solid #efcec7;
    border-radius: 8px;

    list-style-position: inside;

    font-size: 0.8rem;
    line-height: 1.35;
}

.kefi-app .category-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid #ebe6de;
}

.kefi-app .category-form-submit {
    min-height: 42px;
    padding: 0 18px;

    color: #fff;
    background: #a75f35;

    border: 1px solid #98542e;
    border-radius: 10px;

    box-shadow: 0 3px 8px rgba(116, 68, 38, 0.16);

    font: inherit;
    font-size: 0.88rem;
    line-height: 1.2;
    font-weight: 750;

    cursor: pointer;

    transition:
        background 130ms ease,
        border-color 130ms ease,
        box-shadow 130ms ease;
}

.kefi-app .category-form-submit:hover,
.kefi-app .category-form-submit:focus-visible {
    color: #fff;
    background: #7d4022;
    border-color: #71391e;

    box-shadow: 0 5px 12px rgba(116, 68, 38, 0.24);
}

.kefi-app .category-form-submit:focus-visible {
    outline: 3px solid rgba(85, 120, 115, 0.24);
    outline-offset: 2px;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .category-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 15px;

    color: #53686a;
    background: #f5f5f2;

    border: 1px solid #d7ddda;
    border-radius: 10px;

    font-size: 0.88rem;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;

    transition:
        background 130ms ease,
        border-color 130ms ease;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .category-form-cancel:hover,
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .category-form-cancel:focus-visible {
    color: #365f5c;
    background: #e9efec;
    border-color: #c5d3ce;
    text-decoration: none;
}

@media (max-width: 700px) {
    .kefi-app .category-form-page {
        padding: 18px 12px 34px;
    }

    .kefi-app .category-form-shell {
        padding: 19px 16px 22px;
        border-radius: 17px;
    }

    .kefi-app .category-form-heading {
        align-items: flex-start;
    }

    .kefi-app .category-form-heading-icon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
    }

    .kefi-app .category-form-fields {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kefi-app .category-form-fields > p:first-child {
        grid-column: auto;
    }

    .kefi-app .category-form-panel {
        padding: 16px;
    }

    .kefi-app .category-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .kefi-app .category-form-submit,
    .kefi-app .category-form-cancel {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .category-form-fields
        :is(
            input[type="text"],
            input[type="number"],
            select
        ),
    .kefi-app .category-form-submit,
    .kefi-app .category-form-cancel {
        transition: none;
    }
}

/* PHASE-7E-DELIGHTFUL-CATEGORY-FORM-73245-END */

/* DELIGHTFUL-OWNER-GOVERNANCE-73247 */

.kefi-app .owner-governance-page {
    width: min(860px, calc(100% - 48px));
    margin: 42px auto;
    padding: 28px 30px 30px;
    border: 1px solid rgba(116, 84, 56, 0.18);
    border-radius: 20px;
    background: rgba(255, 253, 248, 0.96);
    box-shadow: 0 12px 32px rgba(73, 66, 54, 0.12);
}

.kefi-app .app-main:not(:has(.kefi-design-page-home)) .owner-governance-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
    color: #875124;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home)) .owner-governance-back:hover,
.kefi-app .app-main:not(:has(.kefi-design-page-home)) .owner-governance-back:focus-visible {
    color: #653a1a;
    text-decoration: underline;
}

.kefi-app .owner-governance-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.kefi-app .owner-governance-heading-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #cfe0dc;
    border-radius: 13px;
    background: #edf6f3;
    color: #39776e;
}

.kefi-app .owner-governance-heading-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .owner-governance-heading h1 {
    margin: 0 0 4px;
    color: #293e49;
    font-size: 2rem;
    line-height: 1.12;
}

.kefi-app .owner-governance-heading p {
    margin: 0;
    color: #6c7b80;
    font-size: 0.98rem;
    line-height: 1.45;
}

.kefi-app .owner-governance-card {
    padding: 22px;
    border: 1px solid #e2ddd3;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.93);
}

.kefi-app .owner-governance-card + .owner-governance-card {
    margin-top: 18px;
}

.kefi-app .owner-governance-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 17px;
    border-bottom: 1px solid #ece7de;
}

.kefi-app .owner-governance-card-heading h2 {
    margin: 0 0 4px;
    color: #293e49;
    font-size: 1.18rem;
}

.kefi-app .owner-governance-card-heading p {
    margin: 0;
    color: #718086;
    font-size: 0.91rem;
    line-height: 1.45;
}

.kefi-app .owner-governance-card-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #f3f1eb;
    color: #74543a;
    font-size: 1.15rem;
}

.kefi-app .owner-governance-emergency-icon {
    border: 1px solid #ead8bb;
    background: #fff5e4;
    color: #a86a24;
}

.kefi-app .owner-governance-emergency-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .owner-governance-notice {
    display: flex;
    gap: 11px;
    margin: 18px 0 14px;
    padding: 13px 15px;
    border: 1px solid #d9e5e2;
    border-radius: 11px;
    background: #f3f8f7;
    color: #435b60;
}

.kefi-app .owner-governance-notice-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dcecea;
    color: #39776e;
    font-size: 0.8rem;
    font-weight: 800;
}

.kefi-app .owner-governance-notice strong {
    display: block;
    margin-bottom: 3px;
    color: #36565a;
    font-size: 0.88rem;
}

.kefi-app .owner-governance-notice p {
    margin: 0;
    font-size: 0.87rem;
    line-height: 1.5;
}

.kefi-app .owner-governance-explanation {
    margin: 0 0 18px;
    color: #65757a;
    font-size: 0.91rem;
    line-height: 1.55;
}

.kefi-app .owner-governance-button {
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 9px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease;
}

.kefi-app .owner-governance-button-emergency,
.kefi-app .owner-governance-button-primary {
    border: 1px solid #98542e;
    background: #a75f35;
    color: #fff;
    box-shadow: 0 3px 8px rgba(116, 68, 38, 0.15);
}

.kefi-app .owner-governance-button-emergency:hover,
.kefi-app .owner-governance-button-emergency:focus-visible,
.kefi-app .owner-governance-button-primary:hover,
.kefi-app .owner-governance-button-primary:focus-visible {
    border-color: #874824;
    background: #94512d;
    color: #fff;
    box-shadow: 0 5px 12px rgba(116, 68, 38, 0.20);
}

.kefi-app .owner-governance-button-secondary {
    border: 1px solid #d1d8d6;
    background: #f7f8f7;
    color: #485b60;
}

.kefi-app .owner-governance-button-secondary:hover,
.kefi-app .owner-governance-button-secondary:focus-visible {
    border-color: #b9c4c1;
    background: #eef2f1;
    color: #33494e;
}

.kefi-app .owner-governance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.kefi-app .owner-governance-pending-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 17px;
}

.kefi-app .owner-governance-pending-details p {
    margin: 0;
    padding: 11px 12px;
    border-radius: 9px;
    background: #f7f6f2;
    color: #647277;
    font-size: 0.86rem;
}

.kefi-app .owner-governance-pending-details strong {
    display: block;
    margin-bottom: 3px;
    color: #354c54;
}

@media (max-width: 700px) {
    .kefi-app .owner-governance-page {
        width: calc(100% - 24px);
        margin: 18px auto;
        padding: 20px 18px 22px;
        border-radius: 16px;
    }

    .kefi-app .owner-governance-heading h1 {
        font-size: 1.65rem;
    }

    .kefi-app .owner-governance-pending-details {
        grid-template-columns: 1fr;
    }

    .kefi-app .owner-governance-button {
        width: 100%;
    }

    .kefi-app .owner-governance-actions,
    .kefi-app .owner-governance-actions form {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .owner-governance-button {
        transition: none;
    }
}

/* DELIGHTFUL-OWNER-GOVERNANCE-OTP-73252 */

.kefi-app .owner-governance-otp-page {
    width: min(620px, calc(100% - 48px));
    margin: 54px auto;
    padding: 27px 30px 30px;

    background: rgba(255, 253, 248, 0.96);
    border: 1px solid rgba(116, 84, 56, 0.18);
    border-radius: 20px;

    box-shadow: 0 12px 32px rgba(73, 66, 54, 0.12);
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .owner-governance-otp-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 20px;

    color: #875124;

    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .owner-governance-otp-back:hover,
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .owner-governance-otp-back:focus-visible {
    color: #653a1a;
    text-decoration: underline;
}

.kefi-app .owner-governance-otp-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 21px;
}

.kefi-app .owner-governance-otp-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    color: #39776e;
    background: #edf6f3;

    border: 1px solid #cfe0dc;
    border-radius: 13px;
}

.kefi-app .owner-governance-otp-icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .owner-governance-otp-heading h1 {
    margin: 0 0 5px;

    color: #293e49;

    font-size: 1.75rem;
    line-height: 1.15;
}

.kefi-app .owner-governance-otp-heading p {
    margin: 0;

    color: #6c7b80;

    font-size: 0.94rem;
    line-height: 1.45;
}

.kefi-app .owner-governance-otp-notice {
    display: flex;
    gap: 11px;

    margin-bottom: 22px;
    padding: 14px 15px;

    color: #435b60;
    background: #f3f8f7;

    border: 1px solid #d9e5e2;
    border-radius: 11px;
}

.kefi-app .owner-governance-otp-notice-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    color: #39776e;
    background: #dcecea;

    border-radius: 50%;

    font-size: 0.8rem;
    font-weight: 800;
}

.kefi-app .owner-governance-otp-notice strong {
    color: #36565a;
}

.kefi-app .owner-governance-otp-notice > div > strong {
    display: block;
    margin-bottom: 4px;

    font-size: 0.88rem;
}

.kefi-app .owner-governance-otp-notice p {
    margin: 0;

    font-size: 0.87rem;
    line-height: 1.5;
}

.kefi-app .owner-governance-otp-phone {
    white-space: nowrap;
}

.kefi-app .owner-governance-otp-form {
    padding: 20px;

    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2ddd3;
    border-radius: 14px;
}

.kefi-app .owner-governance-otp-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kefi-app .owner-governance-otp-field label {
    margin-bottom: 7px;

    color: #344b55;

    font-size: 0.89rem;
    font-weight: 750;
}

.kefi-app .owner-governance-otp-field input {
    box-sizing: border-box;

    width: 190px;
    min-height: 48px;

    padding: 9px 12px;

    color: #293e49;
    background: #fff;

    border: 1px solid #cfd8d6;
    border-radius: 9px;

    font: inherit;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.12em;

    box-shadow: inset 0 1px 2px rgba(43, 61, 66, 0.035);

    transition:
        border-color 130ms ease,
        box-shadow 130ms ease;
}

.kefi-app .owner-governance-otp-field input:focus {
    outline: none;

    border-color: #668d87;

    box-shadow:
        0 0 0 3px rgba(85, 120, 115, 0.14),
        inset 0 1px 2px rgba(43, 61, 66, 0.025);
}

.kefi-app .owner-governance-otp-field p {
    margin: 7px 0 0;

    color: #788286;

    font-size: 0.78rem;
    line-height: 1.4;
}

.kefi-app .owner-governance-otp-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid #ebe6de;
}

.kefi-app .owner-governance-otp-submit {
    min-height: 42px;
    padding: 0 18px;

    color: #fff;
    background: #a75f35;

    border: 1px solid #98542e;
    border-radius: 10px;

    box-shadow: 0 3px 8px rgba(116, 68, 38, 0.16);

    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        background 130ms ease,
        border-color 130ms ease,
        box-shadow 130ms ease;
}

.kefi-app .owner-governance-otp-submit:hover,
.kefi-app .owner-governance-otp-submit:focus-visible {
    color: #fff;
    background: #7d4022;
    border-color: #71391e;

    box-shadow: 0 5px 12px rgba(116, 68, 38, 0.24);
}

.kefi-app .owner-governance-otp-submit:focus-visible {
    outline: 3px solid rgba(85, 120, 115, 0.24);
    outline-offset: 2px;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .owner-governance-otp-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 15px;

    color: #53686a;
    background: #f5f5f2;

    border: 1px solid #d7ddda;
    border-radius: 10px;

    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;

    transition:
        background 130ms ease,
        border-color 130ms ease;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .owner-governance-otp-cancel:hover,
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .owner-governance-otp-cancel:focus-visible {
    color: #365f5c;
    background: #e9efec;
    border-color: #c5d3ce;
    text-decoration: none;
}

@media (max-width: 700px) {
    .kefi-app .owner-governance-otp-page {
        width: calc(100% - 24px);
        margin: 18px auto;
        padding: 20px 18px 22px;
        border-radius: 16px;
    }

    .kefi-app .owner-governance-otp-heading h1 {
        font-size: 1.5rem;
    }

    .kefi-app .owner-governance-otp-form {
        padding: 16px;
    }

    .kefi-app .owner-governance-otp-field input {
        width: 100%;
    }

    .kefi-app .owner-governance-otp-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kefi-app .owner-governance-otp-submit,
    .kefi-app .owner-governance-otp-cancel {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .owner-governance-otp-field input,
    .kefi-app .owner-governance-otp-submit,
    .kefi-app .owner-governance-otp-cancel {
        transition: none;
    }
}

/* DELIGHTFUL-COMMUNITY-SETTINGS-73255 */

.kefi-app .delightful-settings-page {
    width: min(1040px, calc(100% - 48px));
    margin: 20px auto;
    padding: 20px 22px 22px;

    color: #304751;
    background: rgba(255, 253, 248, 0.96);

    border: 1px solid rgba(116, 84, 56, 0.18);
    border-radius: 20px;

    box-shadow: 0 12px 32px rgba(73, 66, 54, 0.12);
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .delightful-settings-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 12px;

    color: #875124;

    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .delightful-settings-back:hover,
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .delightful-settings-back:focus-visible {
    color: #653a1a;
    text-decoration: underline;
}

.kefi-app .delightful-settings-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-bottom: 15px;
}

.kefi-app .delightful-settings-heading-icon,
.kefi-app .delightful-settings-card-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    color: #39776e;
    background: #edf6f3;

    border: 1px solid #cfe0dc;
    border-radius: 13px;
}

.kefi-app .delightful-settings-heading-icon {
    width: 40px;
    height: 40px;
}

.kefi-app .delightful-settings-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.kefi-app .delightful-settings-heading-icon svg,
.kefi-app .delightful-settings-card-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .delightful-settings-heading h1 {
    margin: 0 0 5px;

    color: #293e49;

    font-size: 1.65rem;
    line-height: 1.15;
}

.kefi-app .delightful-settings-heading p {
    max-width: 700px;
    margin: 0;

    color: #6c7b80;

    font-size: 0.94rem;
    line-height: 1.45;
}

.kefi-app .delightful-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kefi-app .delightful-settings-card {
    min-width: 0;
    padding: 15px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid #e2ddd3;
    border-radius: 14px;

    box-shadow: 0 2px 8px rgba(55, 66, 65, 0.035);
}

.kefi-app .delightful-settings-card-wide {
    grid-column: 1 / -1;
}

.kefi-app .delightful-settings-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 10px;
    padding-bottom: 8px;

    border-bottom: 1px solid #ebe6de;
}

.kefi-app .delightful-settings-card-heading h2 {
    margin: 1px 0 4px;

    color: #2f4650;

    font-size: 1.08rem;
    line-height: 1.25;
}

.kefi-app .delightful-settings-card-heading p {
    margin: 0;

    color: #718084;

    font-size: 0.82rem;
    line-height: 1.45;
}

.kefi-app .delightful-settings-icon-expiration {
    color: #a46b2c;
    background: #fff5e8;
    border-color: #ead8bd;
}

.kefi-app .delightful-settings-icon-search {
    color: #6657a4;
    background: #f3f0fa;
    border-color: #ddd6ef;
}

.kefi-app .delightful-settings-icon-owner {
    color: #39776e;
    background: #edf6f3;
    border-color: #cfe0dc;
}

.kefi-app .delightful-settings-control-block > div {
    margin-bottom: 15px;
}

.kefi-app .delightful-settings-control-block > div:last-child {
    margin-bottom: 0;
}

.kefi-app .delightful-settings-control-block label,
.kefi-app .delightful-expiration-controls label {
    color: #344b55;
}

.kefi-app .delightful-settings-control-block input[type="number"],
.kefi-app .delightful-settings-control-block input[type="time"],
.kefi-app .delightful-settings-control-block select,
.kefi-app .delightful-expiration-controls input[type="number"],
.kefi-app .delightful-expiration-controls select {
    box-sizing: border-box;

    min-height: 40px;
    padding: 7px 10px;

    color: #304751;
    background: #fff;

    border: 1px solid #cfd8d6;
    border-radius: 8px;

    font: inherit;
}

.kefi-app .delightful-settings-control-block input[type="number"],
.kefi-app .delightful-settings-control-block input[type="time"] {
    width: min(180px, 100%);
}

.kefi-app .delightful-settings-control-block input:focus,
.kefi-app .delightful-settings-control-block select:focus,
.kefi-app .delightful-expiration-controls input:focus,
.kefi-app .delightful-expiration-controls select:focus {
    outline: none;
    border-color: #668d87;
    box-shadow: 0 0 0 3px rgba(85, 120, 115, 0.14);
}

.kefi-app .delightful-settings-control-block .helptext,
.kefi-app .delightful-expiration-controls .helptext {
    color: #7b8588;

    font-size: 0.77rem;
    line-height: 1.4;
}

.kefi-app .delightful-settings-control-block ul,
.kefi-app .delightful-expiration-controls ul {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 0;

    list-style: none;
}

.kefi-app .delightful-settings-control-block li,
.kefi-app .delightful-expiration-controls li {
    margin: 6px 0;
}

.kefi-app .delightful-settings-control-block input[type="radio"],
.kefi-app .delightful-settings-control-block input[type="checkbox"],
.kefi-app .delightful-expiration-controls input[type="radio"] {
    margin-right: 6px;
    accent-color: #39776e;
}

.kefi-app .delightful-expiration-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.kefi-app .delightful-expiration-card {
    min-width: 0;
    margin: 0;
    padding: 11px 12px 12px;

    background: #fbfaf7;

    border: 1px solid #e5dfd4;
    border-radius: 11px;
}

.kefi-app .delightful-expiration-card legend {
    padding: 0 7px;

    color: #344b55;

    font-size: 0.9rem;
    font-weight: 750;
}

.kefi-app .delightful-expiration-controls > div {
    margin-bottom: 8px;
}

.kefi-app .delightful-expiration-controls > div:last-child {
    margin-bottom: 0;
}

.kefi-app .delightful-expiration-controls input[type="number"] {
    width: 105px;
}

.kefi-app .delightful-owner-readonly {
    padding: 10px 12px;

    background: #f3f8f7;

    border: 1px solid #d9e5e2;
    border-radius: 10px;
}

.kefi-app .delightful-owner-readonly-label {
    display: block;
    margin-bottom: 5px;

    color: #64787a;

    font-size: 0.79rem;
    font-weight: 700;
}

.kefi-app .delightful-owner-readonly strong {
    display: block;

    color: #315b58;

    font-size: 1.15rem;
}

.kefi-app .delightful-owner-readonly p {
    margin: 7px 0 0;

    color: #6f7e80;

    font-size: 0.8rem;
    line-height: 1.4;
}

.kefi-app .delightful-settings-errors {
    margin-bottom: 18px;
    padding: 12px 14px;

    color: #7b3f34;
    background: #fff1ed;

    border: 1px solid #eccbc2;
    border-radius: 10px;
}

.kefi-app .delightful-settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 13px;
    padding-top: 13px;

    border-top: 1px solid #e7e1d7;
}

.kefi-app .delightful-settings-save {
    min-height: 43px;
    padding: 0 18px;

    color: #fff;
    background: #a75f35;

    border: 1px solid #98542e;
    border-radius: 10px;

    box-shadow: 0 3px 8px rgba(116, 68, 38, 0.16);

    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;

    cursor: pointer;

    transition:
        background 130ms ease,
        border-color 130ms ease,
        box-shadow 130ms ease;
}

.kefi-app .delightful-settings-save:hover,
.kefi-app .delightful-settings-save:focus-visible {
    color: #fff;
    background: #7d4022;
    border-color: #71391e;

    box-shadow: 0 5px 12px rgba(116, 68, 38, 0.24);
}

.kefi-app .delightful-settings-save:focus-visible {
    outline: 3px solid rgba(85, 120, 115, 0.24);
    outline-offset: 2px;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .delightful-settings-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 43px;
    padding: 0 15px;

    color: #53686a;
    background: #f5f5f2;

    border: 1px solid #d7ddda;
    border-radius: 10px;

    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;

    transition:
        background 130ms ease,
        border-color 130ms ease;
}

.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .delightful-settings-cancel:hover,
.kefi-app .app-main:not(:has(.kefi-design-page-home))
    .delightful-settings-cancel:focus-visible {
    color: #365f5c;
    background: #e9efec;
    border-color: #c5d3ce;
    text-decoration: none;
}


/* COMMUNITY-SETTINGS-COMPACT-73459-TABLET */
@media (max-width: 1050px) and (min-width: 781px) {
    .kefi-app .delightful-expiration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .kefi-app .delightful-settings-page {
        width: calc(100% - 24px);
        margin: 18px auto;
        padding: 20px 18px 22px;

        border-radius: 16px;
    }

    .kefi-app .delightful-settings-grid,
    .kefi-app .delightful-expiration-grid {
        grid-template-columns: 1fr;
    }

    .kefi-app .delightful-settings-heading h1 {
        font-size: 1.5rem;
    }

    .kefi-app .delightful-settings-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kefi-app .delightful-settings-save,
    .kefi-app .delightful-settings-cancel {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .delightful-settings-save,
    .kefi-app .delightful-settings-cancel,
    .kefi-app .delightful-settings-control-block input,
    .kefi-app .delightful-expiration-controls input {
        transition: none;
    }
}

/* PHASE-7E-DELIGHTFUL-PENDING-APPLICATIONS-73257 */

.kefi-app .delightful-pending-applications {
    width: min(880px, calc(100% - 32px));
    margin: clamp(34px, 5vw, 70px) auto;
    padding: clamp(26px, 3vw, 38px);

    border-radius: 20px;
}

.kefi-app .delightful-pending-applications .delightful-back-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;

    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .delightful-pending-applications .delightful-back-link:hover,
.kefi-app .delightful-pending-applications .delightful-back-link:focus-visible {
    text-decoration: underline;
}

.kefi-app .delightful-pending-applications .delightful-page-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}

.kefi-app .delightful-pending-applications .delightful-heading-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: #287a75;
    background: #edf8f6;
    border: 1px solid #cfe5e1;
    border-radius: 12px;

    font-size: 1.35rem;
    line-height: 1;
}

.kefi-app .delightful-pending-applications .delightful-page-heading h1 {
    margin: 0 0 3px;

    color: #203b4a;
    font-size: clamp(1.65rem, 2.3vw, 2rem);
    line-height: 1.15;
}

.kefi-app .delightful-pending-applications .delightful-page-heading p {
    margin: 0;
    color: #667983;
    line-height: 1.45;
}

.kefi-app .pending-applications-panel {
    padding: 18px;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dfd8ce;
    border-radius: 15px;
}

.kefi-app .pending-applications-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 0 2px 15px;
    margin-bottom: 4px;

    border-bottom: 1px solid #ebe5dc;
}

.kefi-app .pending-applications-panel-heading h2 {
    margin: 0 0 3px;
    color: #263f4c;
    font-size: 1.05rem;
}

.kefi-app .pending-applications-panel-heading p {
    margin: 0;
    color: #708089;
    font-size: 0.88rem;
}

.kefi-app .pending-applications-count {
    flex: 0 0 auto;
    padding: 5px 10px;

    color: #426b67;
    background: #edf7f5;
    border: 1px solid #d4e7e3;
    border-radius: 999px;

    font-size: 0.78rem;
    font-weight: 700;
}

.kefi-app .delightful-pending-applications .application-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .delightful-pending-applications
    .application-list-card {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 13px 14px;

    color: #263f4c;
    background: #fffdfa;
    border: 1px solid #e3ddd4;
    border-radius: 12px;

    box-shadow: 0 2px 7px rgba(48, 62, 67, 0.04);

    text-decoration: none;
}

.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .delightful-pending-applications
    .application-list-card:hover,
.kefi-app
    .app-main:not(:has(.kefi-design-page-home))
    .delightful-pending-applications
    .application-list-card:focus-visible {
    color: #263f4c;
    background: #f7fbfa;
    border-color: #bcd9d4;

    box-shadow: 0 4px 12px rgba(48, 80, 77, 0.09);

    text-decoration: none;
}

.kefi-app .application-list-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #2e716d;
    background: #eaf6f4;
    border: 1px solid #cee5e1;
    border-radius: 50%;

    font-weight: 800;
}

.kefi-app .application-list-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.kefi-app .application-list-copy strong {
    color: #263f4c;
    font-size: 0.96rem;
}

.kefi-app .application-list-copy > span {
    color: #74838a;
    font-size: 0.84rem;
}

.kefi-app .application-list-review {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;

    color: #9a5c2e;
    font-size: 0.83rem;
    font-weight: 750;
}

.kefi-app .pending-applications-empty {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 22px;

    background: rgba(255, 255, 255, 0.86);
    border: 1px solid #dcd9d1;
    border-radius: 15px;

    box-shadow: 0 2px 8px rgba(48, 62, 67, 0.035);
}

.kefi-app .pending-applications-empty-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: #33766f;
    background: #eaf6f2;
    border: 1px solid #cce4de;
    border-radius: 50%;

    font-size: 1.15rem;
    font-weight: 800;
}

.kefi-app .pending-applications-empty h2 {
    margin: 0 0 4px;
    color: #29434f;
    font-size: 1rem;
}

.kefi-app .pending-applications-empty p {
    margin: 0;
    color: #708087;
    font-size: 0.9rem;
    line-height: 1.45;
}

@media (max-width: 700px) {
    .kefi-app .delightful-pending-applications {
        width: calc(100% - 20px);
        margin: 18px auto;
        padding: 20px 16px;
    }

    .kefi-app .pending-applications-panel-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .kefi-app .application-list-review {
        font-size: 0;
    }

    .kefi-app .application-list-review span {
        font-size: 1rem;
    }

    .kefi-app .pending-applications-empty {
        align-items: flex-start;
    }
}
/* PHASE-7E-DELIGHTFUL-ADMIN-BATCH-73261-BEGIN
   ============================================================
   DELIGHTFUL ADMINISTRATIVE SURFACES
   Presentation only.
   Invitations, Sponsorship, Members, Help, Audit, Announcements.
   ============================================================ */

.delightful-admin-page {
    box-sizing: border-box;
    width: min(1080px, calc(100% - 2rem));
    margin: 1.35rem auto 2.5rem;
    padding: 1.4rem 1.5rem 1.55rem;
    border: 1px solid rgba(104, 83, 59, 0.13);
    border-radius: 22px;
    background: rgba(252, 248, 239, 0.94);
    box-shadow:
        0 18px 48px rgba(48, 42, 34, 0.10),
        0 2px 8px rgba(48, 42, 34, 0.05);
    backdrop-filter: blur(3px);
}

.delightful-admin-page .page-heading {
    margin: 0 0 1.15rem;
    padding: 0.15rem 0.15rem 0.95rem;
    border-bottom: 1px solid rgba(74, 93, 85, 0.11);
}

.delightful-admin-page .page-heading h1,
.delightful-admin-page .administration-dashboard-heading h1 {
    margin-top: 0;
    color: #253c48;
    letter-spacing: -0.018em;
}

.delightful-admin-page .page-heading p,
.delightful-admin-page .administration-intro {
    max-width: 52rem;
    color: #61706c;
    line-height: 1.5;
}

.delightful-admin-page .back-link,
.delightful-admin-page .page-return-link {
    margin-top: 0;
}

.delightful-admin-page .back-link a,
.delightful-admin-page .page-return-link a,
.delightful-admin-page .admin-help-back-link {
    color: #536b69;
    font-weight: 700;
    text-decoration: none;
}

.delightful-admin-page .back-link a:hover,
.delightful-admin-page .page-return-link a:hover,
.delightful-admin-page .admin-help-back-link:hover {
    color: #294e50;
    text-decoration: underline;
}

/* Shared inner surfaces */

.delightful-admin-page .administration-card,
.delightful-admin-page .administration-form,
.delightful-admin-page .member-admin-filters,
.delightful-admin-page .member-admin-table-wrap,
.delightful-admin-page .sponsorship-card,
.delightful-admin-page .admin-help-summary-card,
.delightful-admin-page .admin-help-conversation-card,
.delightful-admin-page .admin-help-action-card,
.delightful-admin-page .admin-help-empty-card {
    border: 1px solid rgba(50, 82, 78, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 22px rgba(44, 58, 52, 0.055);
}

/* Inputs */

.delightful-admin-page input[type="text"],
.delightful-admin-page input[type="search"],
.delightful-admin-page input[type="tel"],
.delightful-admin-page input[type="date"],
.delightful-admin-page input[type="datetime-local"],
.delightful-admin-page select,
.delightful-admin-page textarea {
    box-sizing: border-box;
    min-height: 42px;
    border: 1px solid rgba(54, 79, 76, 0.25);
    border-radius: 10px;
    background: #fff;
    font: inherit;
}

.delightful-admin-page input[type="text"]:focus,
.delightful-admin-page input[type="search"]:focus,
.delightful-admin-page input[type="tel"]:focus,
.delightful-admin-page input[type="date"]:focus,
.delightful-admin-page input[type="datetime-local"]:focus,
.delightful-admin-page select:focus,
.delightful-admin-page textarea:focus {
    border-color: #4e7773;
    outline: 3px solid rgba(70, 119, 113, 0.14);
    outline-offset: 1px;
}

/* Shared primary action language */

.delightful-admin-page .primary-action,
.delightful-admin-page .member-admin-filter-actions button,
.delightful-admin-page .announcement-form-actions button,
.delightful-admin-page .admin-help-primary-button {
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid #96512d;
    border-radius: 11px;
    background: #96512d;
    color: #fff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(125, 64, 34, 0.15);
}

.delightful-admin-page .primary-action:hover,
.delightful-admin-page .member-admin-filter-actions button:hover,
.delightful-admin-page .announcement-form-actions button:hover,
.delightful-admin-page .admin-help-primary-button:hover {
    border-color: #7d4022;
    background: #7d4022;
    color: #fff;
    box-shadow: 0 5px 14px rgba(125, 64, 34, 0.24);
    transform: none;
}

.delightful-admin-page .secondary-action,
.delightful-admin-page .member-admin-filter-actions a,
.delightful-admin-page .admin-help-secondary-button {
    border-radius: 10px;
}

/* ------------------------------------------------------------
   INVITATION
   ------------------------------------------------------------ */

.delightful-invitation-page {
    max-width: 760px;
}

.delightful-invitation-page .page-heading::before {
    content: "✉";
    display: inline-flex;
    width: 42px;
    height: 42px;
    margin-bottom: 0.7rem;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e5f0ed;
    color: #315f5d;
    font-size: 1.3rem;
}

.delightful-invitation-page .administration-form {
    max-width: none;
    padding: 1.25rem 1.3rem;
}

.delightful-invitation-page .form-field {
    margin-bottom: 1rem;
}

.delightful-invitation-page .form-field > label {
    font-weight: 700;
    color: #344d50;
}

.delightful-invitation-page .field-help {
    color: #687571;
    font-size: 0.92rem;
    line-height: 1.45;
}

.delightful-invitation-page .form-errors,
.delightful-invitation-page .field-errors {
    color: #8a342c;
}

/* ------------------------------------------------------------
   SPONSORSHIP PRIVILEGES
   ------------------------------------------------------------ */

.sponsorship-administration-page.delightful-admin-page {
    max-width: 1080px;
}

.sponsorship-administration-page.delightful-admin-page
.member-admin-filters {
    padding: 1rem 1.1rem;
}

.sponsorship-administration-page.delightful-admin-page
.member-admin-result-summary {
    display: inline-flex;
    margin: 0.85rem 0;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #e6f1ee;
    color: #365e5b;
    font-size: 0.88rem;
    font-weight: 750;
}

.sponsorship-administration-page.delightful-admin-page
.sponsorship-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sponsorship-administration-page.delightful-admin-page
.sponsorship-card {
    padding: 0.85rem 1rem;
}

.sponsorship-administration-page.delightful-admin-page
.sponsorship-status {
    color: #5f6c68;
}

.sponsorship-administration-page.delightful-admin-page
.danger-action {
    border-radius: 10px;
}

/* ------------------------------------------------------------
   MEMBER ADMINISTRATION
   ------------------------------------------------------------ */

.member-administration-page.delightful-admin-page
.member-admin-filters {
    padding: 1rem 1.1rem;
}

.member-administration-page.delightful-admin-page
.member-admin-result-summary {
    display: inline-flex;
    margin: 0.85rem 0;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #e6f1ee;
    color: #365e5b;
    font-size: 0.88rem;
    font-weight: 750;
}

.member-administration-page.delightful-admin-page
.member-admin-table-wrap {
    overflow: hidden;
}

.member-administration-page.delightful-admin-page
.member-admin-table {
    margin: 0;
}

.member-administration-page.delightful-admin-page
.member-admin-table thead {
    background: rgba(230, 239, 235, 0.72);
}

.member-administration-page.delightful-admin-page
.member-admin-table th {
    color: #415b5b;
}

.member-administration-page.delightful-admin-page
.member-admin-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ------------------------------------------------------------
   HELP REQUESTS + CONVERSATION
   ------------------------------------------------------------ */

.admin-help-page.delightful-admin-page {
    max-width: 980px;
}

.admin-help-page.delightful-admin-page
.administration-dashboard-heading {
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.62);
}

.admin-help-page.delightful-admin-page
.admin-help-queue {
    gap: 0.7rem;
}

.admin-help-page.delightful-admin-page
.admin-help-queue-card {
    border-color: rgba(50, 82, 78, 0.12);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 18px rgba(44, 58, 52, 0.045);
}

.admin-help-page.delightful-admin-page
.admin-help-queue-card:hover {
    border-color: rgba(49, 95, 91, 0.28);
    background: #fff;
    box-shadow: 0 8px 22px rgba(44, 58, 52, 0.075);
    transform: none;
}

.admin-help-page.delightful-admin-page
.admin-help-queue-status {
    color: #456a68;
}

.admin-help-page.delightful-admin-page
.admin-help-message-member {
    background: #f8faf8;
}

.admin-help-page.delightful-admin-page
.admin-help-message-administrator {
    background: #eef6f4;
}

.admin-help-page.delightful-admin-page
.admin-help-message-system {
    background: #faf7f0;
}

/* ------------------------------------------------------------
   AUDIT LOG
   ------------------------------------------------------------ */

.delightful-audit-page {
    max-width: 1120px;
}

.delightful-audit-page > form[method="get"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem 1rem;
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(50, 82, 78, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 7px 22px rgba(44, 58, 52, 0.05);
}

.delightful-audit-page > form[method="get"] label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #405757;
    font-weight: 700;
}

.delightful-audit-page > form[method="get"] button {
    align-self: end;
    min-height: 42px;
    border: 1px solid #96512d;
    border-radius: 10px;
    background: #96512d;
    color: #fff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.delightful-audit-page > form[method="get"] button:hover {
    background: #7d4022;
    border-color: #7d4022;
}

.delightful-audit-page table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(50, 82, 78, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
}

.delightful-audit-page thead {
    background: rgba(230, 239, 235, 0.78);
}

.delightful-audit-page th,
.delightful-audit-page td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid rgba(50, 82, 78, 0.09);
    text-align: left;
    vertical-align: top;
}

.delightful-audit-page tbody tr:last-child td {
    border-bottom: 0;
}

/* ------------------------------------------------------------
   ANNOUNCEMENTS
   ------------------------------------------------------------ */

.delightful-announcement-page {
    max-width: 1040px;
}

.delightful-announcement-page .administration-card {
    margin: 0 0 1rem;
    padding: 1.15rem 1.25rem;
}

.delightful-announcement-page .administration-card > h2 {
    margin-top: 0;
    color: #304a50;
}

.delightful-announcement-page
.announcement-create-form {
    padding-top: 0.15rem;
}

.delightful-announcement-page
.announcement-admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.delightful-announcement-page
.announcement-admin-row {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(50, 82, 78, 0.12);
    border-radius: 14px;
    background: #fff;
}

.delightful-announcement-page
.announcement-admin-title {
    color: #304a50;
}

.delightful-announcement-page
.announcement-admin-status {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.25rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #e7f1ee;
    color: #3d625f;
    font-size: 0.84rem;
    font-weight: 750;
}

.delightful-announcement-page
.announcement-admin-preview {
    color: #66736f;
}

.delightful-announcement-page
.announcement-admin-details summary {
    color: #456a68;
    font-weight: 700;
    cursor: pointer;
}

.delightful-announcement-page
.announcement-admin-delete button {
    border-radius: 9px;
}

/* ------------------------------------------------------------
   EMPTY / STATUS STATES
   ------------------------------------------------------------ */

.delightful-admin-page .empty-state {
    padding: 1.4rem;
    border: 1px solid rgba(50, 82, 78, 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.93);
    color: #62706c;
    text-align: center;
}

.delightful-admin-page .status-messages {
    border: 1px solid rgba(55, 110, 103, 0.17);
    border-radius: 13px;
    background: rgba(231, 244, 240, 0.94);
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 760px) {
    .delightful-admin-page {
        width: calc(100% - 1rem);
        margin-top: 0.6rem;
        padding: 1rem;
        border-radius: 17px;
    }

    .delightful-audit-page > form[method="get"] {
        grid-template-columns: 1fr;
    }

    .sponsorship-administration-page.delightful-admin-page
    .sponsorship-card {
        padding: 0.9rem;
    }
}

/* PHASE-7E-DELIGHTFUL-ADMIN-BATCH-73261-END */
/* PHASE-7E-DELIGHTFUL-THREE-PAGE-73262-BEGIN
   Refined Delightful treatment:
   Sponsorship Privileges / Member Administration / Announcements
   ------------------------------------------------------------ */

.delightful-refined-page {
    position: relative;
}

/* Shared refined heading treatment */

.delightful-refined-page > .page-heading,
.member-administration-page.delightful-refined-page
    > .administration-dashboard-heading {
    position: relative;
    padding-left: 62px;
    min-height: 52px;
}

.delightful-refined-page > .page-heading::before,
.member-administration-page.delightful-refined-page
    > .administration-dashboard-heading::before {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #e6f1ee;
    color: #315f5d;
    font-size: 1.25rem;
    font-weight: 800;
}

.sponsorship-administration-page.delightful-refined-page
    > .page-heading::before {
    content: "✓";
}

.member-administration-page.delightful-refined-page
    > .administration-dashboard-heading::before {
    content: "●";
    font-size: 1rem;
}

.delightful-announcement-page.delightful-refined-page
    > .page-heading::before {
    content: "◆";
    font-size: 1rem;
}

/* ==========================================================
   SPONSORSHIP PRIVILEGES
   ========================================================== */

.sponsorship-administration-page.delightful-refined-page {
    max-width: 980px;
}

.sponsorship-administration-page.delightful-refined-page
    .member-admin-filters {
    margin-bottom: 0.9rem;
}

.sponsorship-administration-page.delightful-refined-page
    .delightful-sponsorship-member-card {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(190px, 1fr) 2fr;
    align-items: center;
    gap: 0.85rem 1rem;
    padding: 1rem 1.05rem;
    background: rgba(255, 255, 255, 0.96);
}

.sponsorship-administration-page.delightful-refined-page
    .delightful-sponsorship-member-card > * {
    min-width: 0;
}

.sponsorship-administration-page.delightful-refined-page
    .sponsorship-member-name {
    color: #30494d;
    font-size: 1rem;
    font-weight: 800;
}

.sponsorship-administration-page.delightful-refined-page
    .sponsorship-status {
    padding: 0.3rem 0.55rem;
    border-radius: 9px;
    background: #edf5f2;
    color: #496763;
    line-height: 1.35;
}

.sponsorship-administration-page.delightful-refined-page
    form[action*="sponsorship"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.sponsorship-administration-page.delightful-refined-page
    form[action*="sponsorship"] label {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    white-space: nowrap;
}

.sponsorship-administration-page.delightful-refined-page
    input[type="date"] {
    width: 145px;
}

.sponsorship-administration-page.delightful-refined-page
    .danger-action {
    min-height: 40px;
    padding: 0.55rem 0.8rem;
    border: 1px solid #a85743;
    background: #fff7f4;
    color: #8b3f31;
    font-weight: 750;
}

.sponsorship-administration-page.delightful-refined-page
    .danger-action:hover {
    border-color: #8b3f31;
    background: #f8e9e4;
    color: #743328;
    transform: none;
}

/* ==========================================================
   MEMBER ADMINISTRATION
   ========================================================== */

.member-administration-page.delightful-refined-page {
    max-width: 1020px;
}

.member-administration-page.delightful-refined-page
    .administration-dashboard-heading {
    margin-bottom: 1rem;
}

.member-administration-page.delightful-refined-page
    .member-admin-filters {
    padding: 1.05rem;
}

.member-administration-page.delightful-refined-page
    .member-admin-table-wrap {
    border-radius: 15px;
}

.member-administration-page.delightful-refined-page
    .member-admin-table th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}

.member-administration-page.delightful-refined-page
    .member-admin-table td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    vertical-align: middle;
}

.member-administration-page.delightful-refined-page
    .member-admin-table td:first-child {
    color: #344c4d;
    font-weight: 800;
}

.member-administration-page.delightful-refined-page
    .member-admin-table a[href*="/members/"] {
    display: inline-flex;
    padding: 0.38rem 0.65rem;
    border: 1px solid rgba(151, 83, 43, 0.24);
    border-radius: 9px;
    background: #fff8f1;
    color: #8b4d28;
    font-weight: 750;
    text-decoration: none;
}

.member-administration-page.delightful-refined-page
    .member-admin-table a[href*="/members/"]:hover {
    border-color: rgba(125, 64, 34, 0.42);
    background: #f8eadc;
    color: #703a20;
    transform: none;
}

.member-administration-page.delightful-refined-page
    > .page-return-link {
    margin-top: 0.85rem;
}

/* Make the old bottom navigation quiet rather than prominent. */

.member-administration-page.delightful-refined-page
    > .page-return-link a {
    color: #5a716e;
    font-size: 0.92rem;
}

/* ==========================================================
   ANNOUNCEMENT ADMINISTRATION
   ========================================================== */

.delightful-announcement-page.delightful-refined-page {
    max-width: 980px;
}

.delightful-announcement-page.delightful-refined-page
    > .administration-card {
    padding: 1.15rem 1.25rem 1.25rem;
}

.delightful-announcement-page.delightful-refined-page
    > .administration-card:first-of-type {
    border-color: rgba(54, 94, 89, 0.15);
    background: rgba(255, 255, 255, 0.96);
}

.delightful-announcement-page.delightful-refined-page
    .announcement-create-form {
    display: grid;
    grid-template-columns: minmax(150px, 0.55fr) minmax(260px, 1.8fr);
    gap: 0.85rem 1rem;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-form-errors,
.delightful-announcement-page.delightful-refined-page
    .announcement-body-field,
.delightful-announcement-page.delightful-refined-page
    .announcement-form-actions {
    grid-column: 1 / -1;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-form-field {
    margin: 0;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-form-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: #415856;
    font-weight: 750;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-form-field select,
.delightful-announcement-page.delightful-refined-page
    .announcement-form-field input,
.delightful-announcement-page.delightful-refined-page
    .announcement-form-field textarea {
    width: 100%;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-body-field textarea {
    min-height: 105px;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-retention-row {
    grid-column: 1 / -1;
    padding: 0.8rem;
    border-radius: 12px;
    background: #f4f8f6;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-form-actions {
    margin-top: 0.1rem;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-admin-list {
    margin-top: 0.7rem;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-admin-row {
    border-color: rgba(50, 82, 78, 0.13);
    box-shadow: 0 4px 13px rgba(44, 58, 52, 0.04);
}

.delightful-announcement-page.delightful-refined-page
    .announcement-admin-row:hover {
    border-color: rgba(49, 95, 91, 0.25);
    box-shadow: 0 6px 17px rgba(44, 58, 52, 0.065);
    transform: none;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-admin-delete button {
    border: 1px solid rgba(153, 72, 53, 0.28);
    background: #fff7f4;
    color: #8a4033;
    font-weight: 700;
}

.delightful-announcement-page.delightful-refined-page
    .announcement-admin-delete button:hover {
    border-color: rgba(139, 63, 49, 0.48);
    background: #f8e9e4;
    color: #743328;
}

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

@media (max-width: 850px) {
    .sponsorship-administration-page.delightful-refined-page
        .delightful-sponsorship-member-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .sponsorship-administration-page.delightful-refined-page
        form[action*="sponsorship"] {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .delightful-refined-page > .page-heading,
    .member-administration-page.delightful-refined-page
        > .administration-dashboard-heading {
        padding-left: 0;
        padding-top: 56px;
    }

    .delightful-announcement-page.delightful-refined-page
        .announcement-create-form {
        grid-template-columns: 1fr;
    }

    .delightful-announcement-page.delightful-refined-page
        .announcement-form-errors,
    .delightful-announcement-page.delightful-refined-page
        .announcement-body-field,
    .delightful-announcement-page.delightful-refined-page
        .announcement-form-actions,
    .delightful-announcement-page.delightful-refined-page
        .announcement-retention-row {
        grid-column: 1;
    }
}

/* PHASE-7E-DELIGHTFUL-THREE-PAGE-73262-END */

/* PHASE-7E-DELIGHTFUL-STRUCTURAL-73263-BEGIN
   ============================================================
   Structural Delightful correction
   Sponsorship / Member Administration / Announcements
   Presentation only.
   ============================================================ */

.sponsorship-73263,
.member-admin-73263,
.announcement-admin-73263 {
    width: min(980px, calc(100% - 2rem));
    margin: 1.35rem auto 2.5rem;
    padding: 1.35rem 1.5rem 1.5rem;
    border: 1px solid rgba(113, 86, 53, 0.16);
    border-radius: 20px;
    background: rgba(255, 251, 239, 0.95);
    box-shadow: 0 16px 42px rgba(55, 48, 39, 0.09);
}

.delightful-top-back {
    margin: 0 0 0.85rem;
}

.delightful-top-back a {
    color: #87531f !important;
    font-weight: 750;
    text-decoration: none;
}

.delightful-top-back a:hover {
    color: #673c18 !important;
    text-decoration: underline;
}

.delightful-hero {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0 0 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(93, 78, 58, 0.12);
}

.delightful-hero-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e9f3f0;
    color: #316b65;
    font-size: 1.05rem;
    font-weight: 900;
}

.delightful-hero h1 {
    margin: 0.05rem 0 0.25rem;
    color: #594020;
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    line-height: 1.15;
}

.delightful-hero p {
    max-width: 720px;
    margin: 0;
    color: #756a5a;
    line-height: 1.5;
}

.delightful-count-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #e8f3ef;
    color: #315f5b;
    font-size: 0.84rem;
    font-weight: 800;
}

.delightful-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.75rem 0 0.55rem;
}

.delightful-quiet-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.45rem 0.7rem;
    border-radius: 9px;
    color: #526966 !important;
    font-weight: 700;
    text-decoration: none;
}

.delightful-quiet-action:hover {
    background: #eef4f2;
    color: #345b57 !important;
}

.delightful-empty-state {
    padding: 1.6rem;
    border: 1px solid #e2ddd3;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.94);
    text-align: center;
}

.delightful-empty-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.55rem;
    border-radius: 50%;
    background: #e6f3eb;
    color: #37745e;
    font-weight: 900;
}

.delightful-empty-state h2 {
    margin: 0 0 0.3rem;
    color: #334d50;
    font-size: 1.05rem;
}

.delightful-empty-state p {
    margin: 0;
    color: #6b7775;
}

/* ------------------------------------------------------------
   SPONSORSHIP — compact operational rows
   ------------------------------------------------------------ */

.sponsorship-73263 {
    max-width: 920px;
}

.sponsorship-73263-search {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e1ddd4;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
}

.sponsorship-73263-search > div:first-child {
    flex: 1 1 420px;
}

.sponsorship-73263-search label,
.member-admin-73263-filters label,
.announcement-73263-form label {
    display: block;
    margin-bottom: 0.3rem;
    color: #455b58;
    font-size: 0.88rem;
    font-weight: 800;
}

.sponsorship-73263-search input {
    width: 100%;
    min-height: 40px;
}

.sponsorship-73263-search button,
.member-admin-73263-filter-actions button,
.announcement-73263-form button[type="submit"] {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: #a75f35;
    color: #fff;
    font-weight: 800;
    padding: 0.55rem 0.95rem;
}

.sponsorship-73263-search button:hover,
.member-admin-73263-filter-actions button:hover,
.announcement-73263-form button[type="submit"]:hover {
    background: #7d4022;
    box-shadow: 0 4px 12px rgba(125, 64, 34, 0.20);
    transform: none;
}

.sponsorship-73263-list {
    display: grid;
    gap: 0.55rem;
}

.sponsorship-73263-row {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(430px, 1.6fr);
    align-items: center;
    gap: 1rem;
    min-height: 74px;
    padding: 0.7rem 0.8rem;
    border: 1px solid #e0d8c9;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.93);
}

.sponsorship-73263-person {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.sponsorship-73263-avatar,
.member-admin-73263-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #edf4f1;
    color: #3e6a65;
    font-weight: 850;
}

.sponsorship-73263-person h2 {
    margin: 0 0 0.25rem;
    color: #374e4e;
    font-size: 0.98rem;
    line-height: 1.2;
}

.sponsorship-73263-status {
    display: inline-flex;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.25;
}

.sponsorship-73263-status.is-available {
    background: #e8f4ec;
    color: #35634c;
}

.sponsorship-73263-status.is-suspended {
    background: #f8e8e2;
    color: #8b4738;
}

.sponsorship-73263-action {
    min-width: 0;
}

.sponsorship-73263-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

.sponsorship-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    white-space: nowrap;
    color: #5e625d;
    font-size: 0.87rem;
}

.sponsorship-date {
    width: 145px;
    min-height: 38px;
}

.sponsorship-suspend {
    min-height: 38px;
    padding: 0.45rem 0.7rem;
    border: 1px solid #c17c6b;
    border-radius: 9px;
    background: #fff7f4;
    color: #8d4031;
    font-weight: 800;
    white-space: nowrap;
}

.sponsorship-suspend:hover {
    border-color: #9b5848;
    background: #f7e7e1;
    color: #713327;
    transform: none;
}

.sponsorship-restore {
    float: right;
    min-height: 38px;
}

/* Kill old 73262 grid effects. */

.sponsorship-73263 .delightful-sponsorship-member-card,
.sponsorship-73263 .sponsorship-card {
    display: block;
}

.sponsorship-73263 form[action*="sponsorship"] {
    justify-content: initial;
}

/* ------------------------------------------------------------
   MEMBER ADMINISTRATION — compact, clearer hierarchy
   ------------------------------------------------------------ */

.member-admin-73263 {
    max-width: 980px;
}

.member-admin-73263-filters {
    display: grid;
    grid-template-columns: minmax(280px, 1.6fr) minmax(150px, 0.7fr)
        minmax(150px, 0.7fr) auto;
    align-items: end;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid #e1ddd4;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
}

.member-admin-73263-filters input,
.member-admin-73263-filters select {
    width: 100%;
    min-height: 40px;
}

.member-admin-73263-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.member-admin-73263-table {
    overflow: hidden;
    border-radius: 14px;
}

.member-admin-73263-table th {
    background: #edf4f1;
    color: #385654;
}

.member-admin-73263-table td {
    background: rgba(255, 255, 255, 0.94);
}

.member-admin-73263-person {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.member-admin-73263-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 0.82rem;
}

.member-status-chip,
.member-role-chip {
    display: inline-flex;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: #eef3f1;
    color: #4e6662;
    font-size: 0.79rem;
    font-weight: 750;
    white-space: nowrap;
}

.member-status-chip.is-attention {
    background: #f7e7e1;
    color: #8a4536;
}

.member-role-chip.is-owner {
    background: #eee8f6;
    color: #624d7b;
}

.member-role-chip.is-admin {
    background: #e8f0f7;
    color: #42647c;
}

.member-manage-action {
    min-height: auto;
    padding: 0.38rem 0.65rem !important;
    border-radius: 8px !important;
    background: #fff8f1 !important;
    color: #875028 !important;
    white-space: nowrap;
}

.member-manage-action:hover {
    background: #f6e8da !important;
    color: #713d20 !important;
    transform: none;
}

/* ------------------------------------------------------------
   ANNOUNCEMENTS — compact creation + useful list above fold
   ------------------------------------------------------------ */

.announcement-admin-73263 {
    max-width: 960px;
}

.announcement-73263-create-card,
.announcement-73263-existing {
    padding: 1rem;
    border: 1px solid #e1ddd4;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.94);
}

.announcement-73263-existing {
    margin-top: 0.85rem;
}

.announcement-73263-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.announcement-73263-section-heading h2 {
    margin: 0;
    color: #304e52;
    font-size: 1.15rem;
}

.announcement-73263-section-heading p {
    margin: 0.18rem 0 0;
    color: #73807d;
    font-size: 0.88rem;
}

.announcement-73263-form {
    display: grid;
    gap: 0.7rem;
}

.announcement-73263-top-fields {
    display: grid;
    grid-template-columns: minmax(150px, 0.55fr) minmax(300px, 1.8fr);
    gap: 0.75rem;
}

.announcement-73263-form input,
.announcement-73263-form select,
.announcement-73263-form textarea {
    width: 100%;
}

.announcement-73263-form textarea {
    min-height: 90px;
    max-height: 180px;
}

.announcement-73263-bottom-row {
    display: grid;
    grid-template-columns: minmax(125px, 0.55fr)
        minmax(190px, 0.85fr) 1fr;
    align-items: end;
    gap: 0.75rem;
    padding: 0.65rem 0.7rem;
    border-radius: 11px;
    background: #f2f7f5;
}

.announcement-73263-bottom-row .announcement-form-actions {
    display: flex;
    justify-content: flex-end;
}

.announcement-73263-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid #e1ddd4;
    border-radius: 12px;
    background: #fff;
}

.announcement-73263-row + .announcement-73263-row {
    margin-top: 0.5rem;
}

.announcement-73263-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.announcement-admin-title {
    color: #334f51;
}

.announcement-admin-status,
.announcement-current-chip {
    display: inline-flex;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 750;
}

.announcement-admin-status {
    background: #edf3f1;
    color: #526b67;
}

.announcement-current-chip {
    background: #e6f4ea;
    color: #35634a;
}

.announcement-73263-row .announcement-admin-preview {
    display: block;
    margin: 0.35rem 0 0.25rem;
    color: #707a77;
    font-size: 0.88rem;
}

.announcement-73263-row .announcement-admin-details summary {
    color: #496d68;
    font-size: 0.84rem;
    font-weight: 750;
    cursor: pointer;
}

.announcement-73263-row .announcement-admin-delete button {
    min-height: 36px;
    padding: 0.4rem 0.65rem;
    border: 1px solid #d5a79c;
    border-radius: 8px;
    background: #fff7f4;
    color: #8b4637;
    font-weight: 750;
}

.announcement-73263-row .announcement-admin-delete button:hover {
    border-color: #b87767;
    background: #f7e7e1;
    color: #71382c;
    transform: none;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 850px) {
    .sponsorship-73263-row {
        grid-template-columns: 1fr;
    }

    .sponsorship-73263-controls {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .sponsorship-restore {
        float: none;
    }

    .member-admin-73263-filters {
        grid-template-columns: 1fr 1fr;
    }

    .member-admin-73263-filters .member-admin-search {
        grid-column: 1 / -1;
    }

    .announcement-73263-bottom-row {
        grid-template-columns: 1fr 1fr;
    }

    .announcement-73263-bottom-row .announcement-form-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .sponsorship-73263,
    .member-admin-73263,
    .announcement-admin-73263 {
        width: calc(100% - 1rem);
        padding: 1rem;
        border-radius: 16px;
    }

    .sponsorship-73263-search,
    .member-admin-73263-filters,
    .announcement-73263-top-fields,
    .announcement-73263-bottom-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .member-admin-73263-filters .member-admin-search,
    .announcement-73263-bottom-row .announcement-form-actions {
        grid-column: auto;
    }

    .delightful-hero {
        gap: 0.65rem;
    }

    .delightful-hero-icon {
        width: 40px;
        height: 40px;
    }

    .announcement-73263-row {
        grid-template-columns: 1fr;
    }

    .announcement-73263-row .announcement-admin-delete {
        justify-self: start;
    }
}

/* PHASE-7E-DELIGHTFUL-STRUCTURAL-73263-END */


/* ============================================================
   Phase 7E — Delightful member post browsing
   SCRIPT#73266
   Shared presentation for Jobs, Marketplace, Housing,
   Help & Services, Hanging Out, and All Posts.
   ============================================================ */

.kefi-app .kefi-post-browse {
    --post-accent: #7a6652;
    --post-accent-deep: #59493b;
    --post-soft: #f4eee7;
    --post-soft-2: #fbf8f4;
    --post-line: rgba(92, 72, 54, 0.14);
    --post-shadow: 0 18px 48px rgba(75, 58, 43, 0.10);
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 18px 24px 54px;
}

.kefi-app .kefi-post-browse-jobs {
    --post-accent: #b87824;
    --post-accent-deep: #805016;
    --post-soft: #fff2d9;
    --post-soft-2: #fffaf1;
    --post-line: rgba(184, 120, 36, 0.18);
}

.kefi-app .kefi-post-browse-market {
    --post-accent: #c96f58;
    --post-accent-deep: #914836;
    --post-soft: #fce7df;
    --post-soft-2: #fff7f3;
    --post-line: rgba(201, 111, 88, 0.18);
}

.kefi-app .kefi-post-browse-housing {
    --post-accent: #648763;
    --post-accent-deep: #456344;
    --post-soft: #e8f0e3;
    --post-soft-2: #f7faf4;
    --post-line: rgba(100, 135, 99, 0.19);
}

.kefi-app .kefi-post-browse-help {
    --post-accent: #4e8790;
    --post-accent-deep: #35636b;
    --post-soft: #e1f1f1;
    --post-soft-2: #f4fbfa;
    --post-line: rgba(78, 135, 144, 0.19);
}

.kefi-app .kefi-post-browse-hangout {
    --post-accent: #8873a7;
    --post-accent-deep: #614f7d;
    --post-soft: #eee7f5;
    --post-soft-2: #faf7fc;
    --post-line: rgba(136, 115, 167, 0.19);
}

.kefi-app .kefi-post-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    overflow: hidden;
    min-height: 180px;
    padding: 30px 34px;
    border: 1px solid var(--post-line);
    border-radius: 30px;
    background:
        radial-gradient(circle at 88% 18%,
            rgba(255, 255, 255, 0.88) 0 3px,
            transparent 4px),
        radial-gradient(circle at 82% 72%,
            rgba(255, 255, 255, 0.72) 0 5px,
            transparent 6px),
        linear-gradient(135deg,
            var(--post-soft-2),
            var(--post-soft));
    box-shadow: var(--post-shadow);
}

.kefi-app .kefi-post-hero::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -72px;
    bottom: -122px;
    border: 24px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    pointer-events: none;
}

.kefi-app .kefi-post-hero-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.72),
        0 12px 28px rgba(70, 54, 42, 0.08);
}

.kefi-app .kefi-post-hero-art svg {
    width: 58px;
    height: 58px;
    fill: none;
    stroke: var(--post-accent-deep);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .kefi-post-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.kefi-app .kefi-post-eyebrow {
    margin-bottom: 5px;
    color: var(--post-accent-deep);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kefi-app .kefi-post-hero h1 {
    margin: 0;
    color: #3e352e;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.kefi-app .kefi-post-hero-copy p {
    max-width: 650px;
    margin: 11px 0 0;
    color: #685e55;
    font-size: 1.02rem;
    line-height: 1.55;
}

.kefi-app .kefi-post-create {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 16px;
    background: var(--post-accent-deep);
    color: #fff !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--post-accent) 25%, transparent);
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}

.kefi-app .kefi-post-create:hover,
.kefi-app .kefi-post-create:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--post-accent) 32%, transparent);
}

.kefi-app .kefi-post-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 24px 2px 15px;
}

.kefi-app .kefi-post-search-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    min-height: 50px;
    border: 1px solid #ded8d1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 18px rgba(70, 54, 42, 0.05);
}

.kefi-app .kefi-post-search-box svg {
    width: 21px;
    height: 21px;
    margin-left: 16px;
    fill: none;
    stroke: #85786d;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.kefi-app .kefi-post-search-box input {
    min-width: 0;
    height: 48px;
    padding: 0 13px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #40372f;
    font: inherit;
}

.kefi-app .kefi-post-search-box button {
    align-self: stretch;
    padding: 0 19px;
    border: 0;
    border-left: 1px solid #e5dfd8;
    background: #f7f4f0;
    color: #554a41;
    font-weight: 750;
    cursor: pointer;
}

.kefi-app .kefi-post-search-box:focus-within {
    border-color: var(--post-accent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--post-accent) 13%, transparent),
        0 6px 18px rgba(70, 54, 42, 0.05);
}

.kefi-app .kefi-post-utility-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.kefi-app .kefi-post-utility-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid #e0d9d2;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #66594f;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .kefi-post-utility-links a:hover {
    border-color: var(--post-line);
    background: var(--post-soft-2);
    color: var(--post-accent-deep);
}

.kefi-app .kefi-post-category-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scrollbar-width: thin;
}

.kefi-app .kefi-post-category-tabs a {
    flex: 0 0 auto;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #766a60;
    font-size: 0.9rem;
    font-weight: 720;
    text-decoration: none;
    transition:
        background 140ms ease,
        color 140ms ease,
        border-color 140ms ease;
}

.kefi-app .kefi-post-category-tabs a:hover {
    background: #f5f1ec;
    color: #493f37;
}

.kefi-app .kefi-post-category-tabs a.is-active {
    border-color: var(--post-line);
    background: var(--post-soft);
    color: var(--post-accent-deep);
}

.kefi-app .kefi-post-results {
    margin-top: 4px;
}

.kefi-app .kefi-post-list {
    display: grid;
    gap: 12px;
}

.kefi-app .kefi-post-card {
    overflow: hidden;
    border: 1px solid #e6e0da;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.91);
    box-shadow: 0 7px 22px rgba(70, 54, 42, 0.055);
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.kefi-app .kefi-post-card:hover {
    transform: translateY(-1px);
    border-color: var(--post-line);
    box-shadow: 0 11px 27px rgba(70, 54, 42, 0.075);
}

.kefi-app .kefi-post-card[open] {
    border-color: var(--post-line);
    box-shadow: 0 13px 30px rgba(70, 54, 42, 0.08);
}

.kefi-app .kefi-post-card-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
}

.kefi-app .kefi-post-card-summary::-webkit-details-marker {
    display: none;
}

.kefi-app .kefi-post-card-main {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.kefi-app .kefi-post-card-type {
    color: var(--post-accent-deep);
    font-size: 0.76rem;
    font-weight: 820;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.kefi-app .kefi-post-card-title {
    color: #3e352e;
    font-size: 1.15rem;
    line-height: 1.28;
}

.kefi-app .kefi-post-card-preview {
    overflow: hidden;
    color: #71665d;
    font-size: 0.94rem;
    line-height: 1.48;
    text-overflow: ellipsis;
}

.kefi-app .kefi-post-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    color: #8a7f75;
    font-size: 0.82rem;
}

.kefi-app .kefi-post-avatar {
    display: inline-grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--post-soft);
    color: var(--post-accent-deep);
    font-size: 0.75rem;
    font-weight: 850;
}

.kefi-app .kefi-post-card-open {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #887c72;
    font-size: 0.85rem;
    font-weight: 720;
}

.kefi-app .kefi-post-chevron {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f6f2ee;
    color: var(--post-accent-deep);
    font-size: 1.15rem;
    transition: transform 160ms ease;
}

.kefi-app .kefi-post-card[open] .kefi-post-chevron {
    transform: rotate(180deg);
}

.kefi-app .kefi-post-card-expanded {
    padding: 0 22px 22px;
    border-top: 1px solid #eee8e2;
}

.kefi-app .kefi-post-card-description {
    padding-top: 17px;
    color: #554c44;
    line-height: 1.65;
}

.kefi-app .kefi-post-card-description p {
    margin-top: 0;
}

.kefi-app .kefi-post-view {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: var(--post-accent-deep);
    font-weight: 800;
    text-decoration: none;
}

.kefi-app .kefi-post-view:hover {
    text-decoration: underline;
}

.kefi-app .kefi-post-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    margin-top: 22px;
    padding: 14px 4px;
    color: #81766c;
    font-size: 0.9rem;
}

.kefi-app .kefi-post-pagination a {
    color: var(--post-accent-deep);
    font-weight: 750;
    text-decoration: none;
}

.kefi-app .kefi-post-pagination a:last-child {
    text-align: right;
}

.kefi-app .kefi-post-pagination .is-disabled {
    color: #bbb2aa;
}

.kefi-app .kefi-post-pagination .is-disabled:last-child {
    text-align: right;
}

.kefi-app .kefi-post-empty {
    display: grid;
    justify-items: center;
    padding: 52px 24px;
    border: 1px dashed var(--post-line);
    border-radius: 24px;
    background: var(--post-soft-2);
    text-align: center;
}

.kefi-app .kefi-post-empty-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--post-soft);
    color: var(--post-accent-deep);
    font-size: 1.55rem;
}

.kefi-app .kefi-post-empty h2 {
    margin: 0;
    color: #463c34;
}

.kefi-app .kefi-post-empty p {
    margin: 8px 0 20px;
    color: #796e64;
}

.kefi-app .kefi-post-return {
    margin: 24px 2px 0;
}

.kefi-app .kefi-post-return a {
    color: #776b61;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .kefi-post-return a:hover {
    color: var(--post-accent-deep);
}

@media (max-width: 820px) {
    .kefi-app .kefi-post-browse {
        padding: 12px 14px 42px;
    }

    .kefi-app .kefi-post-hero {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 17px;
        padding: 24px;
        border-radius: 24px;
    }

    .kefi-app .kefi-post-hero-art {
        width: 74px;
        height: 74px;
        border-radius: 22px;
    }

    .kefi-app .kefi-post-hero-art svg {
        width: 45px;
        height: 45px;
    }

    .kefi-app .kefi-post-create {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .kefi-app .kefi-post-toolbar {
        grid-template-columns: 1fr;
    }

    .kefi-app .kefi-post-utility-links {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .kefi-app .kefi-post-hero {
        grid-template-columns: 1fr;
        padding: 22px 20px;
    }

    .kefi-app .kefi-post-hero-art {
        width: 64px;
        height: 64px;
    }

    .kefi-app .kefi-post-hero-art svg {
        width: 39px;
        height: 39px;
    }

    .kefi-app .kefi-post-hero h1 {
        font-size: 2rem;
    }

    .kefi-app .kefi-post-card-summary {
        grid-template-columns: 1fr;
        gap: 13px;
        padding: 18px;
    }

    .kefi-app .kefi-post-card-open {
        justify-self: start;
    }

    .kefi-app .kefi-post-card-expanded {
        padding: 0 18px 18px;
    }

    .kefi-app .kefi-post-search-box {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .kefi-app .kefi-post-search-box button {
        grid-column: 1 / -1;
        min-height: 42px;
        border-top: 1px solid #e5dfd8;
        border-left: 0;
    }

    .kefi-app .kefi-post-pagination {
        grid-template-columns: 1fr 1fr;
    }

    .kefi-app .kefi-post-pagination > span:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-app .kefi-post-card,
    .kefi-app .kefi-post-create,
    .kefi-app .kefi-post-chevron {
        transition: none;
    }

    .kefi-app .kefi-post-card:hover,
    .kefi-app .kefi-post-create:hover {
        transform: none;
    }
}


/* ============================================================
   Phase 7E — Compact delightful Posts empty state
   SCRIPT#73267
   ============================================================ */

.kefi-app .kefi-post-empty {
    padding: 30px 24px 32px;
}

.kefi-app .kefi-post-empty-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 7px;
    font-size: 1.35rem;
}

.kefi-app .kefi-post-empty h2 {
    font-size: 1.28rem;
    line-height: 1.25;
}

.kefi-app .kefi-post-empty p {
    margin: 6px 0 15px;
}

.kefi-app .kefi-post-empty .kefi-post-create {
    min-height: 43px;
    padding: 0 17px;
}

@media (max-width: 560px) {
    .kefi-app .kefi-post-empty {
        padding: 27px 18px 29px;
    }
}

/* ==========================================================
   Phase 7E — Delightful Create Post
   ========================================================== */

.kefi-app .kefi-create-post {
    width: min(920px, calc(100% - 42px));
    margin: 30px auto 58px;
}

.kefi-app .kefi-create-post-card {
    overflow: hidden;
    border: 1px solid rgba(108, 81, 42, 0.16);
    border-radius: 24px;
    background: rgba(255, 252, 242, 0.94);
    box-shadow: 0 18px 48px rgba(63, 54, 35, 0.12);
    backdrop-filter: blur(5px);
}

.kefi-app .kefi-create-post-header {
    padding: 27px 34px 23px;
    border-bottom: 1px solid rgba(108, 81, 42, 0.11);
    background:
        radial-gradient(
            circle at 92% 16%,
            rgba(245, 184, 74, 0.17),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            rgba(255, 249, 229, 0.96),
            rgba(255, 253, 246, 0.88)
        );
}

.kefi-app .kefi-create-post-kicker {
    margin-bottom: 5px;
    color: #9b681f;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.kefi-app .kefi-create-post-header h1 {
    margin: 0;
    color: #563512;
    font-size: clamp(1.75rem, 3vw, 2.15rem);
    line-height: 1.1;
}

.kefi-app .kefi-create-post-header p {
    margin: 8px 0 0;
    color: #665a49;
    font-size: 0.95rem;
}

.kefi-app .kefi-create-post-form {
    padding: 4px 34px 30px;
}

.kefi-app .kefi-create-section {
    padding: 22px 0 24px;
    border-bottom: 1px solid rgba(108, 81, 42, 0.10);
}

.kefi-app .kefi-create-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 15px;
}

.kefi-app .kefi-create-step {
    display: inline-flex;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f2e3bd;
    color: #704715;
    font-size: 0.84rem;
    font-weight: 800;
}

.kefi-app .kefi-create-section-heading h2 {
    margin: 1px 0 2px;
    color: #493522;
    font-size: 1.08rem;
    line-height: 1.25;
}

.kefi-app .kefi-create-section-heading p {
    margin: 0;
    color: #756b5d;
    font-size: 0.84rem;
}

.kefi-app .kefi-create-optional {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(73, 131, 111, 0.11);
    color: #497663;
    font-size: 0.65rem;
    font-weight: 750;
    vertical-align: 2px;
}

.kefi-app .kefi-create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.kefi-app .kefi-create-field {
    margin-bottom: 15px;
}

.kefi-app .kefi-create-field:last-child {
    margin-bottom: 0;
}

.kefi-app .kefi-create-field > label {
    display: block;
    margin-bottom: 5px;
    color: #4e4030;
    font-size: 0.84rem;
    font-weight: 750;
}

.kefi-app .kefi-create-field input[type="text"],
.kefi-app .kefi-create-field select,
.kefi-app .kefi-create-field textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #d8cdbd;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.94);
    color: #3f352a;
    font: inherit;
    outline: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.kefi-app .kefi-create-field input[type="text"],
.kefi-app .kefi-create-field select {
    min-height: 44px;
    padding: 8px 11px;
}

.kefi-app .kefi-create-field textarea {
    display: block;
    min-height: 132px;
    padding: 11px 12px;
    resize: vertical;
}

.kefi-app .kefi-create-field input[type="text"]:focus,
.kefi-app .kefi-create-field select:focus,
.kefi-app .kefi-create-field textarea:focus {
    border-color: #ba8436;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(186, 132, 54, 0.13);
}

.kefi-app .kefi-create-photo-box {
    padding: 16px 18px;
    border: 1px dashed rgba(91, 124, 106, 0.36);
    border-radius: 15px;
    background: rgba(240, 247, 239, 0.60);
}

.kefi-app .kefi-create-photo-input input[type="file"] {
    max-width: 100%;
    color: #544b40;
    font: inherit;
}

.kefi-app .kefi-create-help {
    margin: 6px 0 0;
    color: #776e63;
    font-size: 0.78rem;
}

.kefi-app .kefi-create-photo-original {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 11px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.60);
    cursor: pointer;
}

.kefi-app .kefi-create-checkbox {
    padding-top: 2px;
}

.kefi-app .kefi-create-checkbox input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #4f8977;
}

.kefi-app .kefi-create-photo-original-copy strong,
.kefi-app .kefi-create-photo-original-copy small {
    display: block;
}

.kefi-app .kefi-create-photo-original-copy strong {
    color: #43392e;
    font-size: 0.88rem;
}

.kefi-app .kefi-create-photo-original-copy small {
    margin-top: 1px;
    color: #756d63;
    font-size: 0.76rem;
}

.kefi-app .kefi-create-errors,
.kefi-app .kefi-create-field-errors {
    color: #9b342e;
}

.kefi-app .kefi-create-errors {
    margin: 16px 0 0;
    padding: 10px 13px;
    border-radius: 10px;
    background: rgba(179, 64, 54, 0.08);
}

.kefi-app .kefi-create-field-errors {
    margin-top: 5px;
    font-size: 0.8rem;
}

.kefi-app .kefi-create-field-errors ul,
.kefi-app .kefi-create-errors ul {
    margin: 0;
    padding-left: 18px;
}

.kefi-app .kefi-create-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 24px;
}

.kefi-app .kefi-create-submit {
    min-height: 45px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: #a96618;
    color: #fff;
    box-shadow: 0 7px 16px rgba(131, 79, 19, 0.18);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.kefi-app .kefi-create-submit:hover {
    filter: brightness(0.96);
}

.kefi-app .kefi-create-cancel {
    display: inline-flex;
    min-height: 43px;
    padding: 0 14px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #625544;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .kefi-create-cancel:hover {
    background: rgba(93, 74, 49, 0.07);
}

@media (max-width: 700px) {
    .kefi-app .kefi-create-post {
        width: min(100% - 24px, 920px);
        margin-top: 19px;
    }

    .kefi-app .kefi-create-post-header {
        padding: 23px 21px 20px;
    }

    .kefi-app .kefi-create-post-form {
        padding: 3px 21px 26px;
    }

    .kefi-app .kefi-create-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .kefi-app .kefi-create-section {
        padding: 20px 0 22px;
    }

    .kefi-app .kefi-create-photo-box {
        padding: 14px;
    }
}

/* Phase 7E — live photo preview */

.kefi-app .kefi-photo-preview {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(91, 124, 106, 0.18);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.66);
}

.kefi-app .kefi-photo-preview[hidden] {
    display: none;
}

.kefi-app .kefi-photo-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.kefi-app .kefi-photo-preview-heading strong {
    color: #43392e;
    font-size: 0.84rem;
}

.kefi-app .kefi-photo-preview-heading span {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(79, 137, 119, 0.11);
    color: #497663;
    font-size: 0.7rem;
    font-weight: 750;
}

.kefi-app .kefi-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(96px, 112px)
    );
    gap: 10px;
}

.kefi-app .kefi-photo-preview-item {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(75, 65, 50, 0.12);
    border-radius: 11px;
    background: #eee8dc;
    box-shadow: 0 3px 9px rgba(61, 51, 36, 0.08);
}

.kefi-app .kefi-photo-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kefi-app .kefi-photo-preview-note {
    margin: 9px 0 0;
    color: #7a7166;
    font-size: 0.72rem;
    line-height: 1.35;
}

@media (max-width: 560px) {
    .kefi-app .kefi-photo-preview-grid {
        grid-template-columns: repeat(
            auto-fill,
            minmax(82px, 1fr)
        );
    }
}

/* Phase 7E — Script#73282 compact Create Post refinements */

.kefi-app .kefi-create-label-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 5px;
}

.kefi-app .kefi-create-label-row label {
    flex: 0 0 auto;
    margin: 0;
    color: #4e4030;
    font-size: 0.84rem;
    font-weight: 750;
}

.kefi-app .kefi-create-label-hint {
    min-width: 0;
    color: #84796c;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
}

.kefi-app textarea#id_description {
    min-height: 104px;
    height: 104px;
    resize: vertical;
}

@media (max-width: 700px) {
    .kefi-app .kefi-create-label-row {
        display: block;
    }

    .kefi-app .kefi-create-label-hint {
        display: block;
        margin-top: 3px;
    }

    .kefi-app textarea#id_description {
        min-height: 104px;
        height: 104px;
    }
}


/* Phase 7E — Script#73287 post contact preferences */

.kefi-app .kefi-create-contact {
    padding-bottom: 4px;
}

.kefi-app .kefi-contact-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.kefi-app .kefi-contact-choice {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid rgba(72, 105, 78, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.kefi-app .kefi-contact-choice input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}

.kefi-app .kefi-contact-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.kefi-app .kefi-contact-copy strong {
    color: #4e4030;
    font-size: 0.82rem;
    line-height: 1.2;
}

.kefi-app .kefi-contact-copy small {
    overflow: hidden;
    color: #84796c;
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kefi-app .kefi-other-contact {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
}

.kefi-app .kefi-other-contact[hidden] {
    display: none;
}

.kefi-app .kefi-other-contact label {
    display: block;
    margin-bottom: 5px;
    color: #4e4030;
    font-size: 0.82rem;
    font-weight: 750;
}

.kefi-app .kefi-other-contact input {
    box-sizing: border-box;
    width: 100%;
}

.kefi-app .kefi-edit-contact {
    margin: 18px 0;
    padding: 14px;
    border: 1px solid rgba(72, 105, 78, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
}

.kefi-app .kefi-edit-contact h2 {
    margin: 0 0 3px;
}

.kefi-app .kefi-edit-contact > p {
    margin: 0;
    color: #84796c;
}

.kefi-app .kefi-post-contact {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(72, 105, 78, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.52);
}

.kefi-app .kefi-post-contact h2 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.kefi-app .kefi-post-contact-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 10px;
    padding: 3px 0;
}

.kefi-app .kefi-post-contact-row span {
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .kefi-app .kefi-contact-options {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .kefi-app .kefi-contact-choice {
        padding: 9px 10px;
    }

    .kefi-app .kefi-contact-copy small {
        white-space: normal;
    }
}


/* Phase 7E — Script#73290 Delightful Post Detail */

.kefi-app .kefi-post-detail-page {
    box-sizing: border-box;
    width: min(920px, calc(100% - 40px));
    margin: 30px auto 54px;
}

.kefi-app .kefi-post-detail-card {
    overflow: hidden;
    border: 1px solid rgba(128, 103, 67, 0.14);
    border-radius: 26px;
    background: rgba(255, 252, 244, 0.94);
    box-shadow:
        0 22px 55px rgba(77, 67, 49, 0.12),
        0 3px 12px rgba(77, 67, 49, 0.06);
    backdrop-filter: blur(7px);
}

.kefi-app .kefi-post-detail-hero {
    padding: 30px 34px 25px;
    border-bottom: 1px solid rgba(128, 103, 67, 0.12);
    background:
        linear-gradient(
            135deg,
            rgba(255, 244, 211, 0.88),
            rgba(255, 252, 244, 0.78)
        );
}

.kefi-app .kefi-post-detail-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #927040;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.kefi-app .kefi-post-detail-dot {
    opacity: 0.45;
}

.kefi-app .kefi-post-detail-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #40382e;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1.14;
    letter-spacing: -0.025em;
}

.kefi-app .kefi-post-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
    color: #827668;
    font-size: 0.83rem;
}

.kefi-app .kefi-post-detail-meta strong {
    color: #5a4c3d;
}

.kefi-app .kefi-post-detail-body {
    padding: 25px 34px 8px;
}

.kefi-app .kefi-post-detail-description {
    max-width: 760px;
    color: #4e463d;
    font-size: 0.98rem;
    line-height: 1.7;
}

.kefi-app .kefi-post-detail-description > p:first-child {
    margin-top: 0;
}

.kefi-app .kefi-post-detail-description > p:last-child {
    margin-bottom: 0;
}


/* Contact */

.kefi-app .kefi-post-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 21px 0 15px;
    padding: 14px 17px;
    border: 1px solid rgba(73, 121, 96, 0.17);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(236, 247, 238, 0.92),
            rgba(247, 251, 243, 0.88)
        );
}

.kefi-app .kefi-post-contact-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.kefi-app .kefi-post-contact-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: rgba(82, 132, 104, 0.12);
    color: #47765d;
    font-size: 0.95rem;
}

.kefi-app .kefi-post-contact-heading h2 {
    margin: 0;
    color: #425448;
    font-size: 0.9rem;
}

.kefi-app .kefi-post-contact-heading p {
    margin: 2px 0 0;
    color: #768178;
    font-size: 0.72rem;
}

.kefi-app .kefi-post-contact-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 20px;
    min-width: 0;
}

.kefi-app .kefi-post-contact-item {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.kefi-app .kefi-post-contact-label {
    color: #778079;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.kefi-app .kefi-post-contact-value {
    color: #405649;
    font-size: 0.88rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}


/* Gallery */

.kefi-app .kefi-post-gallery {
    display: grid;
    gap: 16px;
    padding: 17px 34px 8px;
}

.kefi-app .kefi-post-photo {
    width: 100%;
    margin: 0;
}

.kefi-app .kefi-post-photo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 220px;
    max-height: 560px;
    border: 1px solid rgba(96, 88, 74, 0.13);
    border-radius: 18px;
    background: rgba(241, 239, 232, 0.72);
}

.kefi-app .kefi-post-photo-frame img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
}

.kefi-app .kefi-post-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.kefi-app .kefi-post-photo-actions form {
    margin: 0;
}

.kefi-app .kefi-post-photo-button {
    appearance: none;
    padding: 6px 9px;
    border: 1px solid rgba(110, 98, 78, 0.18);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.65);
    color: #665b4c;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.kefi-app .kefi-post-photo-button:hover {
    background: rgba(255, 255, 255, 0.92);
}

.kefi-app .kefi-post-photo-remove {
    color: #8c554d;
}


/* Shared lower sections */

.kefi-app .kefi-post-add-photos,
.kefi-app .kefi-post-manage {
    margin: 18px 34px 0;
    padding: 17px 18px;
    border: 1px solid rgba(120, 102, 74, 0.12);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.47);
}

.kefi-app .kefi-post-section-heading h2 {
    margin: 0;
    color: #4a4136;
    font-size: 0.98rem;
}

.kefi-app .kefi-post-section-heading p {
    margin: 3px 0 0;
    color: #85796b;
    font-size: 0.76rem;
}

.kefi-app .kefi-post-add-photo-form {
    margin-top: 12px;
}

.kefi-app .kefi-post-file-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.kefi-app .kefi-post-file-row input[type="file"] {
    min-width: 220px;
    flex: 1 1 280px;
}

.kefi-app .kefi-post-original-choice {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6f665b;
    font-size: 0.76rem;
}

.kefi-app .kefi-post-small-primary {
    appearance: none;
    padding: 8px 13px;
    border: 0;
    border-radius: 10px;
    background: #a86b25;
    color: #fff;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.kefi-app .kefi-post-manage {
    margin-bottom: 22px;
}

.kefi-app .kefi-post-manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 13px;
}

.kefi-app .kefi-post-manage-actions form {
    margin: 0;
}

.kefi-app .kefi-post-action {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid rgba(116, 99, 74, 0.2);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.67);
    color: #65594b;
    font: inherit;
    font-size: 0.77rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.kefi-app .kefi-post-action-primary {
    border-color: #aa6c25;
    background: #aa6c25;
    color: #fff;
}

.kefi-app .kefi-post-member-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 34px 24px;
}

.kefi-app .kefi-post-member-actions form {
    margin: 0;
}

.kefi-app .kefi-post-text-action {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7b653f;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
}

.kefi-app .kefi-post-report-link,
.kefi-app .kefi-post-report-status {
    color: #8b7462;
    font-size: 0.72rem;
}

.kefi-app .kefi-post-report-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* Navigation */

.kefi-app .kefi-post-detail-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 7px 0;
}

.kefi-app .kefi-post-detail-navigation a {
    color: #625849;
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
}

.kefi-app .kefi-post-detail-navigation a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Mobile */

@media (max-width: 700px) {
    .kefi-app .kefi-post-detail-page {
        width: min(100% - 20px, 920px);
        margin-top: 14px;
        margin-bottom: 34px;
    }

    .kefi-app .kefi-post-detail-card {
        border-radius: 20px;
    }

    .kefi-app .kefi-post-detail-hero {
        padding: 23px 20px 20px;
    }

    .kefi-app .kefi-post-detail-body {
        padding: 20px 20px 5px;
    }

    .kefi-app .kefi-post-contact {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .kefi-app .kefi-post-contact-items {
        justify-content: flex-start;
    }

    .kefi-app .kefi-post-gallery {
        padding: 14px 20px 6px;
    }

    .kefi-app .kefi-post-photo-frame {
        min-height: 150px;
        max-height: 440px;
        border-radius: 14px;
    }

    .kefi-app .kefi-post-photo-frame img {
        max-height: 440px;
    }

    .kefi-app .kefi-post-add-photos,
    .kefi-app .kefi-post-manage {
        margin-right: 20px;
        margin-left: 20px;
    }

    .kefi-app .kefi-post-file-row {
        align-items: stretch;
        flex-direction: column;
    }

    .kefi-app .kefi-post-file-row input[type="file"] {
        min-width: 0;
        width: 100%;
        flex-basis: auto;
    }

    .kefi-app .kefi-post-manage-actions {
        flex-direction: column;
    }

    .kefi-app .kefi-post-manage-actions form,
    .kefi-app .kefi-post-action {
        width: 100%;
    }

    .kefi-app .kefi-post-member-actions {
        align-items: flex-start;
        flex-direction: column;
        padding-right: 20px;
        padding-left: 20px;
    }

    .kefi-app .kefi-post-detail-navigation {
        align-items: flex-start;
        flex-direction: column;
        padding-right: 4px;
        padding-left: 4px;
    }
}


/* Phase 7E — Script#73291 Compact Post Detail */

/*
 * The first Delightful detail pass deliberately established the visual
 * language. These overrides tighten its scale for normal desktop use.
 */

.kefi-app .kefi-post-detail-page {
    width: min(760px, calc(100% - 36px));
    margin-top: 22px;
    margin-bottom: 42px;
}

.kefi-app .kefi-post-detail-card {
    border-radius: 22px;
}

.kefi-app .kefi-post-detail-hero {
    padding: 22px 26px 19px;
}

.kefi-app .kefi-post-detail-hero h1 {
    max-width: 680px;
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
}

.kefi-app .kefi-post-detail-meta {
    margin-top: 8px;
}

.kefi-app .kefi-post-detail-body {
    padding: 19px 26px 5px;
}

.kefi-app .kefi-post-detail-description {
    max-width: 680px;
    line-height: 1.58;
}


/* Compact contact callout */

.kefi-app .kefi-post-contact {
    gap: 16px;
    margin: 16px 0 11px;
    padding: 11px 13px;
}

.kefi-app .kefi-post-contact-icon {
    width: 30px;
    height: 30px;
}

.kefi-app .kefi-post-contact-heading h2 {
    font-size: 0.84rem;
}

.kefi-app .kefi-post-contact-heading p {
    font-size: 0.68rem;
}

.kefi-app .kefi-post-contact-value {
    font-size: 0.82rem;
}


/* Photo should support the post, not dominate the page */

.kefi-app .kefi-post-gallery {
    gap: 12px;
    padding: 12px 26px 5px;
}

.kefi-app .kefi-post-photo-frame {
    min-height: 0;
    max-height: 420px;
    border-radius: 15px;
}

.kefi-app .kefi-post-photo-frame img {
    max-height: 420px;
}

.kefi-app .kefi-post-photo-actions {
    margin-top: 6px;
}

.kefi-app .kefi-post-photo-button {
    padding: 5px 8px;
    font-size: 0.69rem;
}


/* Compact utility sections */

.kefi-app .kefi-post-add-photos,
.kefi-app .kefi-post-manage {
    margin: 13px 26px 0;
    padding: 13px 14px;
    border-radius: 14px;
}

.kefi-app .kefi-post-section-heading h2 {
    font-size: 0.9rem;
}

.kefi-app .kefi-post-section-heading p {
    font-size: 0.71rem;
}

.kefi-app .kefi-post-add-photo-form {
    margin-top: 9px;
}

.kefi-app .kefi-post-file-row {
    gap: 8px 11px;
}

.kefi-app .kefi-post-manage {
    margin-bottom: 17px;
}

.kefi-app .kefi-post-manage-actions {
    gap: 8px;
    margin-top: 10px;
}


/* Owner actions */

.kefi-app .kefi-post-action {
    min-height: 34px;
    padding: 7px 11px;
    border-color: rgba(123, 99, 66, 0.23);
    background: rgba(255, 255, 255, 0.78);
    color: #665744;
    font-size: 0.73rem;
    font-weight: 800;
}

.kefi-app .kefi-post-action:hover {
    border-color: rgba(155, 99, 35, 0.42);
    background: #fff;
    color: #85571f;
}

.kefi-app .kefi-post-action-primary {
    border-color: #a86924;
    background: #a86924;
    color: #fff;
    box-shadow: 0 4px 10px rgba(126, 77, 24, 0.13);
}

.kefi-app .kefi-post-action-primary:hover {
    border-color: #91591d;
    background: #91591d;
    color: #fff;
}


/* Non-owner Save action */

.kefi-app .kefi-post-member-actions {
    padding: 0 26px 19px;
}

.kefi-app .kefi-post-save-action {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 33px;
    padding: 6px 11px;
    border: 1px solid rgba(142, 108, 60, 0.23);
    border-radius: 10px;
    background: rgba(255, 249, 235, 0.82);
    color: #76582e;
    font: inherit;
    font-size: 0.73rem;
    font-weight: 800;
    cursor: pointer;
}

.kefi-app .kefi-post-save-action:hover {
    border-color: rgba(142, 108, 60, 0.42);
    background: #fffaf0;
}

.kefi-app .kefi-post-save-detail {
    display: block;
    margin-left: 0;
    color: inherit;
    font-size: 0.64rem;
    font-weight: 650;
    line-height: 1.15;
    opacity: 0.88;
}


/* Saved-state button refinement */
.kefi-app .kefi-post-save-action:has(.kefi-post-save-detail) {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 5px;
    row-gap: 1px;
    align-items: center;
    justify-items: start;
    padding: 6px 12px;
}

.kefi-app .kefi-post-save-action:has(.kefi-post-save-detail)
    > span:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
}

.kefi-app .kefi-post-save-action:has(.kefi-post-save-detail)
    .kefi-post-save-detail {
    grid-column: 2;
    grid-row: 2;
}

/* Bottom navigation */

.kefi-app .kefi-post-detail-navigation {
    padding-top: 11px;
}

.kefi-app .kefi-post-detail-navigation a {
    font-size: 0.76rem;
}


/* Preserve comfortable mobile sizing */

@media (max-width: 700px) {
    .kefi-app .kefi-post-detail-page {
        width: min(100% - 20px, 760px);
        margin-top: 13px;
        margin-bottom: 32px;
    }

    .kefi-app .kefi-post-detail-hero {
        padding: 21px 19px 18px;
    }

    .kefi-app .kefi-post-detail-body {
        padding: 18px 19px 4px;
    }

    .kefi-app .kefi-post-gallery {
        padding: 12px 19px 5px;
    }

    .kefi-app .kefi-post-photo-frame {
        max-height: 390px;
    }

    .kefi-app .kefi-post-photo-frame img {
        max-height: 390px;
    }

    .kefi-app .kefi-post-add-photos,
    .kefi-app .kefi-post-manage {
        margin-right: 19px;
        margin-left: 19px;
    }

    .kefi-app .kefi-post-member-actions {
        padding-right: 19px;
        padding-left: 19px;
    }

    .kefi-app .kefi-post-save-detail {
        display: none;
    }
}


/* Phase 7E — Script#73292 Delightful Owner Actions */

.kefi-app .kefi-post-manage-actions {
    align-items: center;
    gap: 9px;
}

.kefi-app .kefi-post-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 11px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease,
        border-color 120ms ease;
}

.kefi-app .kefi-post-action:hover {
    transform: translateY(-1px);
}

.kefi-app .kefi-post-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
}


/* Edit — primary */

.kefi-app .kefi-post-action-edit {
    border: 1px solid #a8641d;
    background: #a8641d;
    color: #fff;
    box-shadow: 0 4px 11px rgba(129, 76, 20, 0.18);
}

.kefi-app .kefi-post-action-edit:visited {
    color: #fff;
}

.kefi-app .kefi-post-action-edit:hover {
    border-color: #8f5316;
    background: #8f5316;
    color: #fff;
    box-shadow: 0 6px 14px rgba(129, 76, 20, 0.22);
}


/* Complete — calm green */

.kefi-app .kefi-post-action-complete {
    border: 1px solid rgba(74, 125, 94, 0.25);
    background: #edf5ee;
    color: #41694f;
    box-shadow: none;
}

.kefi-app .kefi-post-action-complete:hover {
    border-color: rgba(74, 125, 94, 0.42);
    background: #e3f0e6;
    color: #355b43;
}


/* Renew — warm gold */

.kefi-app .kefi-post-action-renew {
    border: 1px solid rgba(172, 125, 48, 0.28);
    background: #fbf2dc;
    color: #805f27;
    box-shadow: none;
}

.kefi-app .kefi-post-action-renew:hover {
    border-color: rgba(172, 125, 48, 0.46);
    background: #f7e9c7;
    color: #6e501f;
}


/* Keyboard focus */

.kefi-app .kefi-post-action:focus-visible {
    outline: 3px solid rgba(64, 111, 89, 0.28);
    outline-offset: 2px;
}


@media (max-width: 700px) {
    .kefi-app .kefi-post-action {
        min-height: 42px;
        font-size: 0.78rem;
    }
}


/* Phase 7E — Script#73293 Edit Post Contrast Fix */

/*
 * Edit Post is the primary owner action.
 * Keep its label/icon white in every link state, overriding any
 * older generic post-action link styling.
 */
.kefi-app a.kefi-post-action.kefi-post-action-edit,
.kefi-app a.kefi-post-action.kefi-post-action-edit:link,
.kefi-app a.kefi-post-action.kefi-post-action-edit:visited {
    border-color: #a8641d;
    background: #a8641d;
    color: #fff;
}

.kefi-app a.kefi-post-action.kefi-post-action-edit:hover,
.kefi-app a.kefi-post-action.kefi-post-action-edit:focus,
.kefi-app a.kefi-post-action.kefi-post-action-edit:active {
    border-color: #8f5316;
    background: #8f5316;
    color: #fff;
}

.kefi-app a.kefi-post-action.kefi-post-action-edit .kefi-post-action-icon {
    color: inherit;
}

/* Phase 7E — Script#73297 Compact Horizontal Photo Gallery */

/*
 * Post photos are supporting content, not full-width page sections.
 * Present them as a compact gallery while preserving each figure's
 * existing move/remove controls and natural image proportions.
 */
.kefi-app .kefi-post-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

.kefi-app .kefi-post-photo {
    min-width: 0;
    width: 100%;
}

.kefi-app .kefi-post-photo-frame {
    width: 100%;
    height: 210px;
    min-height: 0;
    max-height: none;
    padding: 8px;
    box-sizing: border-box;
}

.kefi-app .kefi-post-photo-frame img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/*
 * Keep each photo's controls directly underneath its image.
 * Centering makes unequal button combinations look intentional.
 */
.kefi-app .kefi-post-photo-actions {
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
}

.kefi-app .kefi-post-photo-button {
    padding: 5px 7px;
    font-size: 0.66rem;
}


/* Medium-width detail card / tablet */
@media (max-width: 900px) {
    .kefi-app .kefi-post-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kefi-app .kefi-post-photo-frame {
        height: 200px;
    }
}


/* Narrow phones */
@media (max-width: 520px) {
    .kefi-app .kefi-post-gallery {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kefi-app .kefi-post-photo-frame {
        height: auto;
        min-height: 160px;
        max-height: 300px;
    }

    .kefi-app .kefi-post-photo-frame img {
        max-height: 284px;
    }

    .kefi-app .kefi-post-photo-actions {
        justify-content: flex-start;
    }
}

/* Phase 7E — Script#73299 Mobile Photo Reordering Controls */

.kefi-app .kefi-photo-move-mobile {
    display: none;
}

@media (max-width: 520px) {
    .kefi-app .kefi-photo-move-desktop {
        display: none;
    }

    .kefi-app .kefi-photo-move-mobile {
        display: inline;
    }

    .kefi-app .kefi-post-photo-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }

    .kefi-app .kefi-post-photo-actions form {
        margin: 0;
    }

    .kefi-app .kefi-post-photo-button {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 0.7rem;
    }
}

/* Phase 7E — Script#73302 Owner Post Live Panel */

.kefi-app .kefi-post-live-status {
    margin: 0 0 13px;
    padding: 12px 14px;
    border: 1px solid rgba(74, 125, 94, 0.22);
    border-radius: 13px;
    background: rgba(239, 247, 240, 0.86);
}

.kefi-app .kefi-post-live-status-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #41694f;
    font-size: 0.84rem;
    line-height: 1.2;
}

.kefi-app .kefi-post-live-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 50%;
    background: #5f9270;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}

.kefi-app .kefi-post-live-status p {
    margin: 5px 0 7px 28px;
    color: #686b65;
    font-size: 0.73rem;
    line-height: 1.4;
}

.kefi-app .kefi-post-live-home,
.kefi-app .kefi-post-live-home:link,
.kefi-app .kefi-post-live-home:visited {
    display: inline-flex;
    align-items: center;
    margin-left: 28px;
    color: #41694f;
    font-size: 0.73rem;
    font-weight: 800;
    text-decoration: none;
}

.kefi-app .kefi-post-live-home:hover,
.kefi-app .kefi-post-live-home:focus {
    color: #31553d;
    text-decoration: underline;
}

/* Phase 7E — Script#73303 Delightful Delete Post */

.kefi-app .kefi-post-action-delete {
    border: 1px solid rgba(151, 83, 72, 0.26);
    background: #f8ece9;
    color: #855048;
    box-shadow: none;
}

.kefi-app .kefi-post-action-delete:hover,
.kefi-app .kefi-post-action-delete:focus {
    border-color: rgba(151, 83, 72, 0.44);
    background: #f3dfdb;
    color: #713f38;
}

.kefi-app .kefi-post-delete-icon {
    position: relative;
    width: 17px;
    height: 19px;
    flex: 0 0 17px;
}

.kefi-app .kefi-post-delete-paper {
    position: absolute;
    top: -2px;
    left: 0;
    font-size: 0.86rem;
    line-height: 1;
}

.kefi-app .kefi-post-delete-arrow {
    position: absolute;
    right: -1px;
    bottom: -2px;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

/* Phase 7E — Script#73304 Red Delete Post */

.kefi-app .kefi-post-action-delete {
    border-color: #a9473f;
    background: #b94f46;
    color: #fff;
    box-shadow: 0 2px 6px rgba(126, 52, 46, 0.14);
}

.kefi-app .kefi-post-action-delete:hover,
.kefi-app .kefi-post-action-delete:focus {
    border-color: #913b34;
    background: #9f4139;
    color: #fff;
}

.kefi-app .kefi-post-action-delete:active {
    border-color: #80332d;
    background: #8e3832;
    color: #fff;
}

.kefi-app .kefi-post-action-delete .kefi-post-delete-icon {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
}

/* Phase 7E — Script#73305 Strong Red Delete Post */

.kefi-app .kefi-post-action.kefi-post-action-delete,
.kefi-app .kefi-post-action.kefi-post-action-delete:link,
.kefi-app .kefi-post-action.kefi-post-action-delete:visited {
    border-color: #a52f2f;
    background: #c8443f;
    color: #fff;
    box-shadow: 0 2px 7px rgba(142, 43, 39, 0.20);
}

.kefi-app .kefi-post-action.kefi-post-action-delete:hover,
.kefi-app .kefi-post-action.kefi-post-action-delete:focus {
    border-color: #8e2828;
    background: #ad3632;
    color: #fff;
    box-shadow: 0 3px 9px rgba(142, 43, 39, 0.25);
}

.kefi-app .kefi-post-action.kefi-post-action-delete:active {
    border-color: #7e2323;
    background: #962d2a;
    color: #fff;
}

.kefi-app .kefi-post-action.kefi-post-action-delete
.kefi-post-delete-icon {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-right: 2px;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
}

/* Phase 7E — Script#73308 Delightful Delete Modal */

body.kefi-modal-open {
    overflow: hidden;
}

.kefi-app .kefi-delete-modal[hidden] {
    display: none;
}

.kefi-app .kefi-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.kefi-app .kefi-delete-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(44, 39, 34, 0.48);
    backdrop-filter: blur(2px);
}

.kefi-app .kefi-delete-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(430px, 100%);
    padding: 27px 28px 24px;
    border: 1px solid rgba(126, 72, 63, 0.18);
    border-radius: 20px;
    background: #fffdf8;
    box-shadow:
        0 22px 60px rgba(54, 43, 35, 0.24),
        0 4px 14px rgba(54, 43, 35, 0.10);
    text-align: center;
}

.kefi-app .kefi-delete-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: #f8e3df;
    color: #b63e38;
    font-size: 1.55rem;
    line-height: 1;
}

.kefi-app .kefi-delete-modal-dialog h2 {
    margin: 0;
    color: #3d352f;
    font-size: 1.22rem;
    line-height: 1.25;
}

.kefi-app .kefi-delete-modal-dialog p {
    margin: 9px auto 0;
    max-width: 330px;
    color: #6d665f;
    font-size: 0.82rem;
    line-height: 1.5;
}

.kefi-app .kefi-delete-modal-dialog
.kefi-delete-modal-warning {
    margin-top: 8px;
    color: #9d3934;
    font-weight: 800;
}

.kefi-app .kefi-delete-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 21px;
}

.kefi-app .kefi-delete-modal-cancel,
.kefi-app .kefi-delete-modal-confirm {
    min-width: 125px;
    min-height: 42px;
    padding: 9px 17px;
    border-radius: 10px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.kefi-app .kefi-delete-modal-cancel {
    border: 1px solid #d8d0c5;
    background: #fff;
    color: #625b53;
}

.kefi-app .kefi-delete-modal-cancel:hover,
.kefi-app .kefi-delete-modal-cancel:focus {
    background: #f5f1ea;
    color: #443e38;
}

.kefi-app .kefi-delete-modal-confirm,
.kefi-app .kefi-delete-modal-confirm:hover,
.kefi-app .kefi-delete-modal-confirm:focus {
    border: 1px solid #a52f2f;
    background: #c8443f;
    color: #fff;
}

.kefi-app .kefi-delete-modal-confirm:hover,
.kefi-app .kefi-delete-modal-confirm:focus {
    background: #ad3632;
    border-color: #8e2828;
}


/* ===== PHASE 7E DELIGHTFUL SEARCH ALERTS — SCRIPT#73317 ===== */

.kefi-app .kefi-search-alerts-page,
.kefi-app .kefi-search-alert-form-page {
    width: min(960px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 52px;
}

.kefi-app .kefi-search-alerts-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 30px;
    margin-bottom: 18px;
    border: 1px solid rgba(156, 112, 42, 0.20);
    border-radius: 26px;
    background: rgba(255, 249, 236, 0.94);
    box-shadow: 0 14px 36px rgba(78, 62, 38, 0.10);
    backdrop-filter: blur(8px);
}

.kefi-app .kefi-search-alerts-hero-icon {
    display: grid;
    place-items: center;
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    border-radius: 22px;
    background: #f6df9c;
    color: #6f521d;
    font-size: 36px;
    font-weight: 800;
}

.kefi-app .kefi-search-alerts-eyebrow,
.kefi-app .kefi-search-alert-step {
    margin: 0 0 5px;
    color: #997026;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.kefi-app .kefi-search-alerts-hero h1,
.kefi-app .kefi-search-alert-create-card h2,
.kefi-app .kefi-search-alert-active-section h2,
.kefi-app .kefi-search-alert-form-card h1 {
    margin: 0;
    color: #342d23;
}

.kefi-app .kefi-search-alerts-hero h1 {
    font-size: clamp(1.85rem, 4vw, 2.55rem);
}

.kefi-app .kefi-search-alerts-hero p:last-child,
.kefi-app .kefi-search-alert-card-heading p:last-child,
.kefi-app .kefi-search-alert-form-intro {
    margin: 7px 0 0;
    color: #6f675b;
    line-height: 1.5;
}

.kefi-app .kefi-search-alert-notice {
    margin-bottom: 18px;
    padding: 15px 18px;
    border: 1px solid #e2c36e;
    border-radius: 16px;
    background: rgba(255, 247, 215, 0.96);
    color: #5f4c20;
}

.kefi-app .kefi-search-alert-create-card,
.kefi-app .kefi-search-alert-active-section,
.kefi-app .kefi-search-alert-form-card {
    border: 1px solid rgba(104, 91, 69, 0.15);
    border-radius: 24px;
    background: rgba(255, 253, 247, 0.95);
    box-shadow: 0 14px 36px rgba(78, 62, 38, 0.09);
    backdrop-filter: blur(8px);
}

.kefi-app .kefi-search-alert-create-card {
    padding: 24px 26px;
    margin-bottom: 18px;
}

.kefi-app .kefi-search-alert-card-heading,
.kefi-app .kefi-search-alert-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.kefi-app .kefi-search-alert-quota {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex: 0 0 auto;
    padding: 9px 13px;
    border-radius: 999px;
    background: #eef6e8;
    color: #45643b;
    white-space: nowrap;
}

.kefi-app .kefi-search-alert-quota strong {
    font-size: 1.15rem;
}

.kefi-app .kefi-search-alert-quota span {
    font-size: 0.83rem;
    font-weight: 700;
}

.kefi-app .kefi-search-alert-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.8fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 21px;
}

.kefi-app .kefi-search-alert-field {
    min-width: 0;
}

.kefi-app .kefi-search-alert-field label {
    display: block;
    margin: 0 0 7px;
    color: #51493e;
    font-size: 0.88rem;
    font-weight: 800;
}

.kefi-app .kefi-search-alert-field input,
.kefi-app .kefi-search-alert-field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #cfc6b7;
    border-radius: 12px;
    background: #fffefa;
    color: #342d23;
    font: inherit;
}

.kefi-app .kefi-search-alert-field input:focus,
.kefi-app .kefi-search-alert-field select:focus {
    outline: 3px solid rgba(224, 177, 72, 0.22);
    border-color: #c69735;
}

.kefi-app .kefi-search-alert-field small {
    display: block;
    margin-top: 6px;
    color: #7d7467;
    line-height: 1.4;
}

.kefi-app .kefi-search-alert-create-button {
    min-height: 46px;
    padding: 10px 18px;
    border: 0;
    border-radius: 13px;
    background: #377f5b;
    color: #fff;
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(55, 127, 91, 0.18);
}

.kefi-app .kefi-search-alert-create-button:hover {
    transform: translateY(-1px);
}

.kefi-app .kefi-search-alert-create-hint {
    margin: 11px 0 0;
    color: #81786b;
    font-size: 0.84rem;
}

.kefi-app .kefi-search-alert-errors,
.kefi-app .kefi-search-alert-field-error {
    color: #9d332c;
}

.kefi-app .kefi-search-alert-errors ul,
.kefi-app .kefi-search-alert-field-error ul {
    margin: 5px 0;
    padding-left: 20px;
}

.kefi-app .kefi-search-alert-limit-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 15px 17px;
    border-radius: 15px;
    background: #eef6e8;
    color: #46603d;
}

.kefi-app .kefi-search-alert-limit-message > span {
    font-weight: 900;
}

.kefi-app .kefi-search-alert-limit-message p {
    margin: 3px 0 0;
}

.kefi-app .kefi-search-alert-active-section {
    padding: 24px 26px 26px;
}

.kefi-app .kefi-search-alert-total {
    padding: 7px 11px;
    border-radius: 999px;
    background: #f1eee7;
    color: #6e665a;
    font-size: 0.82rem;
    font-weight: 800;
}

.kefi-app .kefi-search-alert-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.kefi-app .kefi-search-alert-tile {
    overflow: hidden;
    border: 1px solid #ddd5c8;
    border-radius: 17px;
    background: #fffefa;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.kefi-app .kefi-search-alert-tile:hover {
    border-color: #cbbd9f;
    box-shadow: 0 7px 18px rgba(74, 61, 40, 0.07);
}

.kefi-app .kefi-search-alert-tile[open] {
    border-color: #d0b15f;
    box-shadow: 0 9px 22px rgba(74, 61, 40, 0.09);
}

.kefi-app .kefi-search-alert-tile > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}

.kefi-app .kefi-search-alert-tile > summary::-webkit-details-marker {
    display: none;
}

.kefi-app .kefi-search-alert-summary-main,
.kefi-app .kefi-search-alert-summary-side,
.kefi-app .kefi-search-alert-title-row {
    display: flex;
    align-items: center;
}

.kefi-app .kefi-search-alert-summary-main {
    gap: 13px;
    min-width: 0;
}

.kefi-app .kefi-search-alert-bell {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #f8ebc8;
    color: #b17d1e;
    font-size: 1rem;
}

.kefi-app .kefi-search-alert-summary-copy {
    min-width: 0;
}

.kefi-app .kefi-search-alert-title-row {
    flex-wrap: wrap;
    gap: 8px;
}

.kefi-app .kefi-search-alert-title-row h3 {
    margin: 0;
    color: #393126;
    font-size: 1.02rem;
}

.kefi-app .kefi-search-alert-summary-copy > p {
    margin: 4px 0 0;
    color: #786f63;
    font-size: 0.87rem;
}

.kefi-app .kefi-search-alert-status {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kefi-app .kefi-search-alert-status.is-active {
    background: #e5f3e8;
    color: #39704b;
}

.kefi-app .kefi-search-alert-status.is-paused {
    background: #eceae6;
    color: #756e64;
}

.kefi-app .kefi-search-alert-summary-side {
    gap: 14px;
    flex: 0 0 auto;
}

.kefi-app .kefi-search-alert-match-count {
    min-width: 64px;
    text-align: right;
}

.kefi-app .kefi-search-alert-match-count strong {
    display: block;
    color: #3e6f58;
    font-size: 1.12rem;
    line-height: 1;
}

.kefi-app .kefi-search-alert-match-count span {
    color: #81786b;
    font-size: 0.75rem;
}

.kefi-app .kefi-search-alert-chevron {
    display: inline-block;
    color: #9a8d79;
    font-size: 1.7rem;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 150ms ease;
}

.kefi-app .kefi-search-alert-tile[open] .kefi-search-alert-chevron {
    transform: rotate(-90deg);
}

.kefi-app .kefi-search-alert-expanded {
    padding: 0 18px 17px 69px;
    border-top: 1px solid #eee8dd;
}

.kefi-app .kefi-search-alert-match-list {
    display: grid;
    gap: 9px;
    padding-top: 13px;
}

.kefi-app .kefi-search-alert-match {
    display: block;
    padding: 12px 14px;
    border: 1px solid #e7dfd2;
    border-radius: 13px;
    background: #fbf8f1;
    color: inherit;
    text-decoration: none;
}

.kefi-app .kefi-search-alert-match:hover {
    border-color: #d0b15f;
    background: #fffdf7;
}

.kefi-app .kefi-search-alert-match-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px;
    color: #8b6b2f;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kefi-app .kefi-search-alert-match-body {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.kefi-app .kefi-search-alert-match h4 {
    margin: 0;
    color: #3d352a;
    font-size: 0.96rem;
}

.kefi-app .kefi-search-alert-match p {
    margin: 4px 0 0;
    color: #756c60;
    font-size: 0.85rem;
    line-height: 1.4;
}

.kefi-app .kefi-search-alert-match-arrow {
    align-self: center;
    color: #a47c2d;
    font-size: 1.2rem;
}

.kefi-app .kefi-search-alert-no-matches {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 5px;
    color: #70685d;
}

.kefi-app .kefi-search-alert-no-matches > span {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f2efe8;
    color: #8c8274;
    font-size: 1.2rem;
}

.kefi-app .kefi-search-alert-no-matches p {
    margin: 3px 0 0;
    font-size: 0.85rem;
}

.kefi-app .kefi-search-alert-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
}

.kefi-app .kefi-search-alert-actions form {
    margin: 0;
}

.kefi-app .kefi-search-alert-action {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid #d8cdbb;
    border-radius: 10px;
    background: #fffefa;
    color: #62584b;
    font: inherit;
    font-size: 0.80rem;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.kefi-app .kefi-search-alert-action:hover {
    border-color: #bda775;
    background: #fbf5e8;
}

.kefi-app .kefi-search-alert-delete {
    border-color: #e1b8b4;
    color: #9c3f38;
}

.kefi-app .kefi-search-alert-empty {
    padding: 30px 20px 20px;
    text-align: center;
}

.kefi-app .kefi-search-alert-empty-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 11px;
    border-radius: 18px;
    background: #f6e8be;
    color: #916c25;
    font-size: 1.8rem;
}

.kefi-app .kefi-search-alert-empty h3 {
    margin: 0;
    color: #41382c;
}

.kefi-app .kefi-search-alert-empty p {
    max-width: 480px;
    margin: 7px auto 0;
    color: #766d61;
    line-height: 1.5;
}

.kefi-app .kefi-search-alert-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 4px 0;
}

.kefi-app .kefi-search-alert-footer a {
    color: #66583f;
    font-weight: 750;
    text-decoration: none;
}

.kefi-app .kefi-search-alert-form-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 28px;
}

.kefi-app .kefi-search-alert-form-card form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.kefi-app .kefi-search-alert-form-quota {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef6e8;
    color: #46613d;
    font-size: 0.82rem;
    font-weight: 800;
}

.kefi-app .kefi-search-alert-form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kefi-app .kefi-search-alert-form-actions a {
    color: #716758;
    font-weight: 750;
    text-decoration: none;
}

@media (max-width: 760px) {
    .kefi-app .kefi-search-alert-create-form {
        grid-template-columns: 1fr;
    }

    .kefi-app .kefi-search-alert-card-heading,
    .kefi-app .kefi-search-alert-section-heading {
        align-items: flex-start;
    }

    .kefi-app .kefi-search-alert-expanded {
        padding-left: 18px;
    }
}


/* Phase 7E unified attention popup */

.kefi-app .kefi-attention-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17, 31, 28, 0.42);
    backdrop-filter: blur(3px);
}

.kefi-app .kefi-attention-modal {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 26px;
    background: #ffffff;
    box-shadow:
        0 24px 70px rgba(18, 45, 39, 0.24),
        0 4px 18px rgba(18, 45, 39, 0.12);
}

.kefi-app .kefi-attention-modal-accent {
    height: 7px;
    background:
        linear-gradient(
            90deg,
            #5a8f78 0%,
            #88b59d 52%,
            #d9b36c 100%
        );
}

.kefi-app .kefi-attention-modal-content {
    padding: 28px;
}

.kefi-app .kefi-attention-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 22px;
}

.kefi-app .kefi-attention-heading-dot {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 9px;
    border-radius: 50%;
    background: #d64545;
    box-shadow: 0 0 0 5px rgba(214, 69, 69, 0.11);
}

.kefi-app .kefi-attention-eyebrow {
    margin-bottom: 3px;
    color: #6b7d75;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.kefi-app .kefi-attention-heading h2 {
    margin: 0;
    color: #183d33;
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    line-height: 1.18;
}

.kefi-app .kefi-attention-list {
    display: grid;
    gap: 10px;
}

.kefi-app .kefi-attention-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 11px 14px;
    border: 1px solid #dfe9e4;
    border-radius: 17px;
    background: #f8fbf9;
    color: inherit;
    text-decoration: none;
}

.kefi-app a.kefi-attention-item:hover {
    border-color: #b9d1c5;
    background: #f1f7f4;
    transform: translateY(-1px);
}

.kefi-app .kefi-attention-item.is-announcement {
    grid-template-columns: 42px minmax(0, 1fr);
    border-color: #ead9ae;
    background: #fffaf0;
}

.kefi-app .kefi-attention-item.is-admin {
    background: #f7f9fc;
}

.kefi-app .kefi-attention-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #e4f0ea;
    color: #315e50;
    font-size: 1.08rem;
    font-weight: 800;
}

.kefi-app .kefi-attention-item.is-announcement
.kefi-attention-item-icon {
    background: #f4e6bd;
    color: #755d22;
}

.kefi-app .kefi-attention-item-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.kefi-app .kefi-attention-item-copy strong {
    color: #244a3f;
    font-size: 0.98rem;
    line-height: 1.25;
}

.kefi-app .kefi-attention-item-copy span {
    color: #64746d;
    font-size: 0.9rem;
    line-height: 1.35;
}

.kefi-app .kefi-attention-item-arrow {
    color: #769186;
    font-size: 1.55rem;
    line-height: 1;
}

.kefi-app .kefi-attention-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.kefi-app .kefi-attention-actions form {
    margin: 0;
}

.kefi-app .kefi-attention-actions button {
    min-width: 112px;
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 14px;
    background: #315e50;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(49, 94, 80, 0.18);
}

.kefi-app .kefi-attention-actions button:hover {
    background: #274d42;
}

@media (max-width: 560px) {
    .kefi-app .kefi-attention-overlay {
        align-items: flex-end;
        padding: 14px;
    }

    .kefi-app .kefi-attention-modal {
        max-height: calc(100vh - 28px);
        border-radius: 23px;
    }

    .kefi-app .kefi-attention-modal-content {
        padding: 22px 18px 20px;
    }

    .kefi-app .kefi-attention-item {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        padding: 10px 11px;
    }

    .kefi-app .kefi-attention-item.is-announcement {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .kefi-app .kefi-attention-item-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}

/* ============================================================
   PHASE-7E-MARKETPLACE-VISUAL-73348
   Compact category browse + visual Marketplace listings
   ============================================================ */

/*
 * The category browse page was intentionally generous in the
 * original Delightful pass. Tighten it now so members reach the
 * actual posts much sooner.
 */

.kefi-app .kefi-post-browse {
    padding-top: 18px;
}

.kefi-app .kefi-post-hero {
    min-height: 0;
    padding: 18px 22px;
    gap: 17px;
}

.kefi-app .kefi-post-hero-art {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 17px;
}

.kefi-app .kefi-post-hero-art svg {
    width: 32px;
    height: 32px;
}

.kefi-app .kefi-post-hero-copy {
    min-width: 0;
}

.kefi-app .kefi-post-eyebrow {
    margin-bottom: 2px;
    font-size: 0.68rem;
}

.kefi-app .kefi-post-hero h1 {
    font-size: clamp(1.55rem, 3vw, 2rem);
    line-height: 1.08;
}

.kefi-app .kefi-post-hero-copy p {
    margin-top: 5px;
    line-height: 1.4;
}

.kefi-app .kefi-post-hero .kefi-post-create {
    min-height: 40px;
    padding: 8px 15px;
    white-space: nowrap;
}


/* Search and saved-search actions form one compact control band. */

.kefi-app .kefi-post-toolbar {
    margin-top: 12px;
    margin-bottom: 11px;
    padding: 11px 13px;
}

.kefi-app .kefi-post-search-box {
    min-height: 40px;
}

.kefi-app .kefi-post-category-tabs {
    margin-top: 0;
    margin-bottom: 14px;
}


/* ------------------------------------------------------------
   Marketplace
   ------------------------------------------------------------ */

/*
 * Marketplace is inherently visual. Only that category receives
 * thumbnails; Jobs, Housing, Help & Services and Hangouts retain
 * their text-oriented cards.
 */

.kefi-app .kefi-post-browse-market .kefi-post-card-summary {
    grid-template-columns: 118px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 17px 14px 14px;
}

.kefi-app .kefi-market-thumb {
    display: block;
    width: 118px;
    height: 92px;
    overflow: hidden;
    border: 1px solid rgba(111, 91, 59, 0.13);
    border-radius: 15px;
    background: #f5efe2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.kefi-app .kefi-market-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kefi-app .kefi-market-thumb-empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, 0.88),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #f7ecd1,
            #efe2c4
        );
    color: #a17b3e;
}

.kefi-app .kefi-market-thumb-empty svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.72;
}

.kefi-app .kefi-post-browse-market .kefi-post-card-title {
    font-size: 1.08rem;
}

.kefi-app .kefi-post-browse-market .kefi-post-card-preview {
    margin-top: 4px;
    line-height: 1.42;
}

.kefi-app .kefi-post-browse-market .kefi-post-card-meta {
    margin-top: 8px;
}


/*
 * The expanded body begins beneath the listing content rather
 * than underneath the thumbnail.
 */

.kefi-app .kefi-post-browse-market .kefi-post-card-expanded {
    padding-left: 150px;
}


/* Mobile: keep a useful thumbnail without squeezing the copy. */

@media (max-width: 700px) {
    .kefi-app .kefi-post-browse {
        padding-top: 12px;
    }

    .kefi-app .kefi-post-hero {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 15px 16px;
        gap: 12px;
    }

    .kefi-app .kefi-post-hero-art {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 15px;
    }

    .kefi-app .kefi-post-hero-art svg {
        width: 29px;
        height: 29px;
    }

    .kefi-app .kefi-post-hero h1 {
        font-size: 1.55rem;
    }

    .kefi-app .kefi-post-hero-copy p {
        font-size: 0.88rem;
    }

    .kefi-app .kefi-post-hero .kefi-post-create {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
    }

    .kefi-app .kefi-post-browse-market .kefi-post-card-summary {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 13px;
        padding: 13px;
    }

    .kefi-app .kefi-market-thumb {
        width: 82px;
        height: 76px;
        border-radius: 12px;
    }

    .kefi-app .kefi-market-thumb-empty svg {
        width: 31px;
        height: 31px;
    }

    .kefi-app .kefi-post-browse-market .kefi-post-card-open {
        grid-column: 2;
        justify-self: start;
    }

    .kefi-app .kefi-post-browse-market .kefi-post-card-preview {
        display: none;
    }

    .kefi-app .kefi-post-browse-market .kefi-post-card-meta {
        margin-top: 5px;
    }

    .kefi-app .kefi-post-browse-market .kefi-post-card-expanded {
        padding-left: 18px;
    }
}

/* ============================================================
   PHASE-7E-SAVED-POSTS-73351-BEGIN
   Delightful Saved Posts presentation.
   Presentation only; existing save and expiration semantics remain.
   ============================================================ */

.kefi-app .saved-posts-delight {
    width: min(900px, calc(100% - 34px));
    margin: 0 auto;
    padding: 34px 0 48px;
}

.kefi-app .saved-posts-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding: 22px 25px;
    border: 1px solid rgba(151, 126, 83, 0.18);
    border-radius: 22px;
    background: rgba(255, 252, 244, 0.88);
    box-shadow: 0 12px 32px rgba(70, 57, 38, 0.08);
    backdrop-filter: blur(8px);
}

.kefi-app .saved-posts-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: #f6edcf;
    color: #a47a24;
    font-size: 1.55rem;
    line-height: 1;
}

.kefi-app .saved-posts-eyebrow {
    margin: 0 0 3px;
    color: #9a762d;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.kefi-app .saved-posts-heading h1 {
    margin: 0;
    color: #45382c;
    font-size: clamp(1.65rem, 2.4vw, 2rem);
    line-height: 1.1;
}

.kefi-app .saved-posts-intro {
    margin: 6px 0 0;
    color: #756c62;
    font-size: 0.92rem;
}

.kefi-app .saved-posts-list {
    display: grid;
    gap: 13px;
}

.kefi-app .saved-post-card {
    overflow: hidden;
    border: 1px solid rgba(118, 102, 76, 0.16);
    border-radius: 19px;
    background: rgba(255, 253, 248, 0.94);
    box-shadow: 0 9px 26px rgba(63, 53, 39, 0.07);
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}

.kefi-app .saved-post-card:hover {
    transform: translateY(-2px);
    border-color: rgba(164, 122, 36, 0.30);
    box-shadow: 0 13px 31px rgba(63, 53, 39, 0.11);
}

.kefi-app .saved-post-card-main {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 20px;
    min-height: 132px;
    padding: 14px;
    color: inherit;
    text-decoration: none;
}

.kefi-app .saved-post-thumb {
    overflow: hidden;
    min-height: 112px;
    border-radius: 14px;
    background: #f2eee5;
}

.kefi-app .saved-post-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 112px;
    object-fit: cover;
}

.kefi-app .saved-post-thumb-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 112px;
    color: #b59a62;
    background:
        linear-gradient(
            145deg,
            rgba(249, 243, 224, 0.98),
            rgba(236, 244, 237, 0.98)
        );
    font-size: 1.65rem;
}

.kefi-app .saved-post-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 4px 7px 3px 0;
}

.kefi-app .saved-post-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 6px;
}

.kefi-app .saved-post-category {
    color: #98702b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.kefi-app .saved-post-expiring {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid #e5b7a5;
    border-radius: 999px;
    background: #fff0e9;
    color: #a34e31;
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1;
}

.kefi-app .saved-post-copy h2 {
    margin: 0;
    color: #41382f;
    font-size: 1.12rem;
    line-height: 1.28;
}

.kefi-app .saved-post-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 7px;
    color: #786f66;
    font-size: 0.79rem;
    line-height: 1.35;
}

.kefi-app .saved-post-details strong {
    color: #65594e;
    font-weight: 700;
}

.kefi-app .saved-post-detail-separator {
    color: #b4a99b;
}

.kefi-app .saved-post-open {
    margin-top: auto;
    padding-top: 9px;
    color: #7e6128;
    font-size: 0.79rem;
    font-weight: 750;
}

.kefi-app .saved-posts-empty {
    padding: 44px 28px;
    border: 1px solid rgba(118, 102, 76, 0.16);
    border-radius: 21px;
    background: rgba(255, 253, 248, 0.92);
    box-shadow: 0 10px 28px rgba(63, 53, 39, 0.07);
    text-align: center;
}

.kefi-app .saved-posts-empty-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 13px;
    border-radius: 17px;
    background: #f6edcf;
    color: #a47a24;
    font-size: 1.5rem;
}

.kefi-app .saved-posts-empty h2 {
    margin: 0;
    color: #45382c;
    font-size: 1.25rem;
}

.kefi-app .saved-posts-empty p {
    max-width: 480px;
    margin: 8px auto 18px;
    color: #756c62;
    font-size: 0.9rem;
    line-height: 1.5;
}

.kefi-app .saved-posts-primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 11px;
    background: #4b7d73;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: none;
}

.kefi-app .saved-posts-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 17px;
    padding: 0 5px;
}

.kefi-app .saved-posts-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #785b28;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .saved-posts-footer a:hover,
.kefi-app .saved-posts-footer a:focus-visible {
    text-decoration: underline;
}

@media (max-width: 680px) {
    .kefi-app .saved-posts-delight {
        width: min(100% - 22px, 900px);
        padding-top: 22px;
    }

    .kefi-app .saved-posts-heading {
        align-items: flex-start;
        padding: 18px;
    }

    .kefi-app .saved-posts-heading-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .kefi-app .saved-post-card-main {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 13px;
        min-height: 106px;
        padding: 11px;
    }

    .kefi-app .saved-post-thumb,
    .kefi-app .saved-post-thumb img,
    .kefi-app .saved-post-thumb-placeholder {
        min-height: 84px;
    }

    .kefi-app .saved-post-copy h2 {
        font-size: 1rem;
    }

    .kefi-app .saved-post-detail-separator {
        display: none;
    }

    .kefi-app .saved-post-details {
        display: grid;
    }

    .kefi-app .saved-posts-footer {
        align-items: flex-start;
        flex-direction: column;
        padding-left: 3px;
    }
}

/* PHASE-7E-SAVED-POSTS-73351-END */

/* PHASE-7E-SAVED-POSTS-BUTTON-73352
   Keep the Saved Posts empty-state CTA readable against its teal button. */
.kefi-app .saved-posts-empty .saved-posts-primary-link,
.kefi-app .saved-posts-empty .saved-posts-primary-link:link,
.kefi-app .saved-posts-empty .saved-posts-primary-link:visited {
    color: #fff;
}

.kefi-app .saved-posts-empty .saved-posts-primary-link:hover,
.kefi-app .saved-posts-empty .saved-posts-primary-link:focus-visible {
    color: #fff;
    text-decoration: none;
}

/* ==========================================================
   PHASE-7E-ASK-ADMIN-DELIGHTFUL-73354
   Ask an Administrator — focused private-help presentation
   ========================================================== */

.kefi-help-new-page .community-main {
    position: relative;
}

.kefi-help-new-shell {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 54px 20px 76px;
}

.kefi-help-new-card {
    position: relative;
    overflow: hidden;
    padding: 34px 38px 30px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(255, 255, 255, 0.84)
        );
    box-shadow:
        0 24px 70px rgba(38, 56, 48, 0.16),
        0 3px 12px rgba(38, 56, 48, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.kefi-help-new-card::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -80px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(184, 210, 187, 0.28) 0%,
            rgba(184, 210, 187, 0) 70%
        );
    pointer-events: none;
}

.kefi-help-new-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(229, 240, 229, 0.98),
            rgba(207, 226, 210, 0.98)
        );
    box-shadow: 0 8px 22px rgba(64, 94, 72, 0.12);
}

.kefi-help-new-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: #426b4c;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-help-new-heading {
    position: relative;
    text-align: center;
}

.kefi-help-new-eyebrow {
    margin: 0 0 6px;
    color: #6d8974;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.kefi-help-new-heading h1 {
    margin: 0;
    color: #243d2d;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.kefi-help-new-intro {
    max-width: 500px;
    margin: 10px auto 0;
    color: #66756a;
    font-size: 1rem;
    line-height: 1.5;
}

.kefi-help-new-form {
    position: relative;
    display: grid;
    gap: 18px;
    margin-top: 27px;
}

.kefi-help-new-field {
    display: grid;
    gap: 7px;
}

.kefi-help-new-field label {
    color: #354d3c;
    font-size: 0.91rem;
    font-weight: 750;
}

.kefi-help-new-field input,
.kefi-help-new-field textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #cad7cc;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #25382b;
    font: inherit;
    font-size: 1rem;
    outline: none;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.kefi-help-new-field input {
    min-height: 48px;
    padding: 10px 14px;
}

.kefi-help-new-field textarea {
    min-height: 150px;
    padding: 13px 14px;
    line-height: 1.5;
    resize: vertical;
}

.kefi-help-new-field input:focus,
.kefi-help-new-field textarea:focus {
    border-color: #759b7e;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(105, 151, 116, 0.13);
}

.kefi-help-new-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin-top: 2px;
    padding: 10px 20px;
    border: 0;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            #477954,
            #376744
        );
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 9px 22px rgba(51, 99, 65, 0.20);
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        filter 140ms ease;
}

.kefi-help-new-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-help-new-submit:hover {
    filter: brightness(1.035);
    transform: translateY(-1px);
    box-shadow: 0 11px 26px rgba(51, 99, 65, 0.24);
}

.kefi-help-new-submit:active {
    transform: translateY(0);
}

.kefi-help-new-submit:focus-visible,
.kefi-help-new-return:focus-visible {
    outline: 3px solid rgba(74, 124, 87, 0.30);
    outline-offset: 3px;
}

.kefi-help-new-return {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    margin: 22px auto 0;
    color: #58705f;
    font-size: 0.91rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-help-new-return svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-help-new-return:hover {
    color: #315b3d;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 700px) {
    .kefi-help-new-shell {
        padding: 28px 14px 48px;
    }

    .kefi-help-new-card {
        padding: 27px 20px 25px;
        border-radius: 23px;
    }

    .kefi-help-new-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 14px;
        border-radius: 16px;
    }

    .kefi-help-new-icon svg {
        width: 28px;
        height: 28px;
    }

    .kefi-help-new-form {
        gap: 16px;
        margin-top: 23px;
    }

    .kefi-help-new-field textarea {
        min-height: 140px;
    }
}

/* ==========================================================
   PHASE-7E-REPORT-POST-DELIGHTFUL-73357
   Report Post — focused private moderation presentation
   ========================================================== */

.kefi-app .kefi-report-post-page {
    width: min(100% - 32px, 760px);
    margin: 38px auto 70px;
}

.kefi-app .kefi-report-post-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    background: rgba(255, 252, 244, 0.94);
    box-shadow:
        0 24px 70px rgba(55, 54, 43, 0.15),
        0 3px 12px rgba(55, 54, 43, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.kefi-app .kefi-report-post-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 30px 34px 25px;
    border-bottom: 1px solid rgba(160, 137, 91, 0.14);
}

.kefi-app .kefi-report-post-icon {
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #f6e9c8;
    color: #9c6a20;
}

.kefi-app .kefi-report-post-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .kefi-report-post-eyebrow {
    margin: 0 0 4px;
    color: #9a742f;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.14em;
}

.kefi-app .kefi-report-post-header h1 {
    margin: 0;
    color: #3d3429;
    font-size: clamp(1.7rem, 4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.kefi-app .kefi-report-post-intro {
    margin: 7px 0 0;
    color: #736b60;
    font-size: 0.94rem;
    line-height: 1.45;
}

.kefi-app .kefi-report-post-summary {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin: 25px 34px 0;
    padding: 12px;
    border: 1px solid rgba(157, 132, 85, 0.16);
    border-radius: 18px;
    background: rgba(250, 245, 232, 0.82);
}

.kefi-app .kefi-report-post-photo {
    overflow: hidden;
    width: 116px;
    height: 84px;
    border-radius: 13px;
    background: #ebe4d7;
}

.kefi-app .kefi-report-post-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kefi-app .kefi-report-post-photo-placeholder {
    display: grid;
    place-items: center;
    color: #9c8d74;
}

.kefi-app .kefi-report-post-photo-placeholder svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .kefi-report-post-summary-copy {
    min-width: 0;
}

.kefi-app .kefi-report-post-summary-label {
    display: block;
    margin-bottom: 5px;
    color: #9a742f;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.kefi-app .kefi-report-post-summary-copy strong {
    display: block;
    overflow: hidden;
    color: #40372d;
    font-size: 1.05rem;
    line-height: 1.3;
    text-overflow: ellipsis;
}

.kefi-app .kefi-report-post-summary-meta {
    display: block;
    margin-top: 5px;
    color: #807569;
    font-size: 0.78rem;
}

.kefi-app .kefi-report-post-form {
    display: grid;
    gap: 20px;
    padding: 26px 34px 12px;
}

.kefi-app .kefi-report-post-field {
    display: grid;
    gap: 7px;
}

.kefi-app .kefi-report-post-field label {
    color: #443b30;
    font-size: 0.9rem;
    font-weight: 800;
}

.kefi-app .kefi-report-post-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.kefi-app .kefi-report-post-label-row > span {
    color: #968b7e;
    font-size: 0.72rem;
    font-weight: 650;
}

.kefi-app .kefi-report-post-field select,
.kefi-app .kefi-report-post-field textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #d2c6b4;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.94);
    color: #3c352c;
    font: inherit;
    outline: none;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.kefi-app .kefi-report-post-field select {
    min-height: 47px;
    padding: 8px 12px;
}

.kefi-app .kefi-report-post-field textarea {
    min-height: 128px;
    padding: 12px 13px;
    line-height: 1.5;
    resize: vertical;
}

.kefi-app .kefi-report-post-field select:focus,
.kefi-app .kefi-report-post-field textarea:focus {
    border-color: #ad8748;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(173, 135, 72, 0.12);
}

.kefi-app .kefi-report-post-guidance,
.kefi-app .kefi-report-post-help {
    margin: 0;
    color: #82786b;
    font-size: 0.76rem;
    line-height: 1.4;
}

.kefi-app .kefi-report-post-errors {
    padding: 10px 12px;
    border: 1px solid rgba(173, 73, 60, 0.25);
    border-radius: 10px;
    background: rgba(252, 237, 234, 0.9);
    color: #8a392f;
    font-size: 0.82rem;
}

.kefi-app .kefi-report-post-errors ul {
    margin: 0;
    padding-left: 18px;
}

.kefi-app .kefi-report-post-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 2px;
}

.kefi-app .kefi-report-post-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 22px;
    border: 0;
    border-radius: 14px;
    background: #a9691d;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(138, 88, 26, 0.20);
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        filter 140ms ease;
}

.kefi-app .kefi-report-post-submit:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(138, 88, 26, 0.24);
}

.kefi-app .kefi-report-post-submit:active {
    transform: translateY(0);
}

.kefi-app .kefi-report-post-submit:focus-visible,
.kefi-app .kefi-report-post-cancel:focus-visible {
    outline: 3px solid rgba(169, 105, 29, 0.25);
    outline-offset: 3px;
}

.kefi-app .kefi-report-post-cancel {
    color: #746a5d;
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
}

.kefi-app .kefi-report-post-cancel:hover {
    color: #51483d;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kefi-app .kefi-report-post-note {
    margin: 7px 34px 27px;
    padding-top: 16px;
    border-top: 1px solid rgba(157, 132, 85, 0.13);
    color: #8a8175;
    font-size: 0.74rem;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 700px) {
    .kefi-app .kefi-report-post-page {
        width: min(100% - 20px, 760px);
        margin-top: 18px;
        margin-bottom: 42px;
    }

    .kefi-app .kefi-report-post-card {
        border-radius: 21px;
    }

    .kefi-app .kefi-report-post-header {
        align-items: flex-start;
        padding: 23px 20px 20px;
    }

    .kefi-app .kefi-report-post-icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .kefi-app .kefi-report-post-icon svg {
        width: 26px;
        height: 26px;
    }

    .kefi-app .kefi-report-post-summary {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 13px;
        margin: 19px 20px 0;
    }

    .kefi-app .kefi-report-post-photo {
        width: 88px;
        height: 70px;
    }

    .kefi-app .kefi-report-post-form {
        padding: 22px 20px 10px;
    }

    .kefi-app .kefi-report-post-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .kefi-app .kefi-report-post-submit {
        width: 100%;
    }

    .kefi-app .kefi-report-post-cancel {
        align-self: center;
        padding: 4px;
    }

    .kefi-app .kefi-report-post-note {
        margin: 7px 20px 22px;
    }
}

/* ============================================================
   PHASE-7E-COMPACT-ADMIN-SUMMARY-73362-BEGIN
   Keep Administration Summary compact as attention types grow.
   ============================================================ */

.kefi-app .administration-summary {
    margin-bottom: 18px;
    padding: 14px 16px;
}

.kefi-app .administration-summary-heading {
    margin-bottom: 10px;
}

.kefi-app .administration-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.kefi-app .administration-summary-item {
    min-height: 56px;
    padding: 8px 11px;
    gap: 9px;
}

.kefi-app .administration-summary-item strong {
    min-width: 36px;
    min-height: 36px;
    padding: 3px 7px;
    font-size: 1.05rem;
}

.kefi-app .administration-summary-item span {
    font-size: 0.88rem;
}

/*
 * At medium widths, two columns prevent labels from becoming cramped.
 */
@media (max-width: 900px) {
    .kefi-app .administration-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Preserve the existing senior-friendly single-column mobile layout.
 */
@media (max-width: 700px) {
    .kefi-app .administration-summary {
        padding: 13px;
    }

    .kefi-app .administration-summary-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .kefi-app .administration-summary-item {
        min-height: 56px;
        padding: 8px 11px;
    }
}

/* PHASE-7E-COMPACT-ADMIN-SUMMARY-73362-END */

/* ============================================================
   PHASE-7E-POST-MODERATION-TILE-73363-BEGIN
   Permanent Administration entry point for reported posts.
   ============================================================ */

.kefi-app .administration-card-moderation {
    position: relative;
}

.kefi-app .administration-attention-dot {
    position: absolute;
    top: 13px;
    right: 13px;

    width: 11px;
    height: 11px;

    border: 2px solid rgba(255, 252, 244, 0.96);
    border-radius: 999px;

    background: #c94b45;
    box-shadow: 0 2px 7px rgba(123, 42, 38, 0.24);
}

.kefi-app .administration-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    min-height: 24px;
    margin-left: 6px;
    padding: 2px 7px;

    border-radius: 999px;
    background: rgba(201, 75, 69, 0.12);

    color: #9b3934;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

/* PHASE-7E-POST-MODERATION-TILE-73363-END */

/* ============================================================
   PHASE-7E-COMPACT-ADMIN-SUMMARY-73364-BEGIN
   Second compacting pass: reduce vertical space without
   reducing readability.
   ============================================================ */

.kefi-app .administration-summary {
    margin-bottom: 16px;
    padding: 10px 14px 11px;
}

.kefi-app .administration-summary-heading {
    margin-bottom: 7px;
}

.kefi-app .administration-summary-heading h2 {
    margin-top: 0;
}

.kefi-app .administration-summary-grid {
    gap: 8px;
}

.kefi-app .administration-summary-item {
    min-height: 48px;
    padding: 6px 10px;
}

.kefi-app .administration-summary-item strong {
    min-width: 32px;
    min-height: 32px;
    padding: 2px 6px;
}

/* Keep mobile touch targets comfortably sized. */
@media (max-width: 700px) {
    .kefi-app .administration-summary {
        padding: 11px 12px;
    }

    .kefi-app .administration-summary-item {
        min-height: 52px;
        padding: 7px 10px;
    }

    .kefi-app .administration-summary-item strong {
        min-width: 34px;
        min-height: 34px;
    }
}

/* PHASE-7E-COMPACT-ADMIN-SUMMARY-73364-END */

/* ============================================================
   PHASE-7E-MODERATION-QUEUE-73366-BEGIN
   Delightful administrator moderation queue
   ============================================================ */

.kefi-app .kefi-moderation-page {
    box-sizing: border-box;
    width: min(100% - 36px, 940px);
    margin: 30px auto 64px;
}

.kefi-app .kefi-moderation-hero {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;

    padding: 22px 24px;

    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 24px;

    background: rgba(255, 252, 244, 0.92);
    box-shadow:
        0 18px 46px rgba(55, 54, 43, 0.10),
        0 2px 8px rgba(55, 54, 43, 0.05);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.kefi-app .kefi-moderation-hero-icon,
.kefi-app .kefi-moderation-empty-icon {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border: 1px solid rgba(74, 124, 118, 0.16);
    border-radius: 17px;

    background: rgba(225, 244, 240, 0.88);
    color: #477b75;
}

.kefi-app .kefi-moderation-hero-icon svg,
.kefi-app .kefi-moderation-empty-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .kefi-moderation-eyebrow {
    margin: 0 0 3px;
    color: #9a641f;
    font-size: 0.70rem;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.kefi-app .kefi-moderation-hero h1 {
    margin: 0;
    color: #243c39;
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    line-height: 1.12;
}

.kefi-app .kefi-moderation-hero-copy > p:last-child {
    margin: 6px 0 0;
    color: #6e685d;
    font-size: 0.91rem;
    line-height: 1.45;
}

.kefi-app .kefi-moderation-open-count {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border: 1px solid rgba(183, 82, 67, 0.18);
    border-radius: 999px;

    background: rgba(183, 82, 67, 0.08);
    color: #94483e;
}

.kefi-app .kefi-moderation-open-count strong {
    font-size: 1rem;
}

.kefi-app .kefi-moderation-open-count span {
    font-size: 0.78rem;
    font-weight: 800;
}

.kefi-app .kefi-moderation-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.kefi-app .kefi-moderation-report {
    overflow: hidden;

    border: 1px solid rgba(151, 124, 78, 0.17);
    border-radius: 21px;

    background: rgba(255, 252, 244, 0.94);
    box-shadow:
        0 12px 32px rgba(70, 61, 45, 0.08),
        0 2px 6px rgba(70, 61, 45, 0.04);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.kefi-app .kefi-moderation-report-main {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
}

.kefi-app .kefi-moderation-thumb {
    display: block;
    overflow: hidden;

    width: 142px;
    height: 116px;

    border-radius: 15px;
    background: rgba(225, 239, 234, 0.75);
}

.kefi-app .kefi-moderation-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kefi-app .kefi-moderation-thumb-empty {
    display: grid;
    place-items: center;
    color: #628b82;
}

.kefi-app .kefi-moderation-thumb-empty svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .kefi-moderation-report-copy {
    min-width: 0;
}

.kefi-app .kefi-moderation-report-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.kefi-app .kefi-moderation-status {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border-radius: 999px;
    background: rgba(183, 82, 67, 0.10);

    color: #94483e;
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.kefi-app .kefi-moderation-date {
    color: #8a8173;
    font-size: 0.74rem;
    font-weight: 650;
}

.kefi-app .kefi-moderation-report h2 {
    margin: 0 0 11px;
    font-size: 1.18rem;
    line-height: 1.25;
}

.kefi-app .kefi-moderation-report h2 a {
    color: #55452f;
    text-decoration: none;
}

.kefi-app .kefi-moderation-report h2 a:hover,
.kefi-app .kefi-moderation-report h2 a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kefi-app .kefi-moderation-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.kefi-app .kefi-moderation-facts div {
    display: grid;
    gap: 1px;
}

.kefi-app .kefi-moderation-facts span,
.kefi-app .kefi-moderation-explanation > span {
    color: #8a8173;
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.kefi-app .kefi-moderation-facts strong {
    color: #4f4a42;
    font-size: 0.82rem;
}

.kefi-app .kefi-moderation-explanation {
    margin-top: 12px;
    padding: 9px 11px;

    border-left: 3px solid rgba(176, 119, 48, 0.35);
    border-radius: 0 10px 10px 0;

    background: rgba(248, 240, 219, 0.62);
}

.kefi-app .kefi-moderation-explanation p {
    margin: 3px 0 0;
    color: #5d5549;
    font-size: 0.84rem;
    line-height: 1.42;
}

.kefi-app .kefi-moderation-report-actions {
    display: flex;
    justify-content: flex-end;

    padding: 10px 16px 13px;

    border-top: 1px solid rgba(151, 124, 78, 0.11);
    background: rgba(249, 246, 237, 0.58);
}

.kefi-app .kefi-moderation-review-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 38px;
    padding: 7px 14px;

    border: 1px solid #376d61;
    border-radius: 11px;

    background: #376d61;
    color: #fff;

    font-size: 0.80rem;
    font-weight: 800;
    text-decoration: none;
}

.kefi-app .kefi-moderation-review-button:visited {
    color: #fff;
}

.kefi-app .kefi-moderation-review-button:hover,
.kefi-app .kefi-moderation-review-button:focus-visible {
    background: #2c5a50;
    color: #fff;
}

.kefi-app .kefi-moderation-empty {
    margin-top: 16px;
    padding: 34px 24px;

    border: 1px solid rgba(151, 124, 78, 0.16);
    border-radius: 21px;

    background: rgba(255, 252, 244, 0.91);
    text-align: center;
}

.kefi-app .kefi-moderation-empty-icon {
    margin: 0 auto 12px;
}

.kefi-app .kefi-moderation-empty h2 {
    margin: 0;
    color: #354c47;
    font-size: 1.2rem;
}

.kefi-app .kefi-moderation-empty p {
    margin: 6px 0 0;
    color: #756e63;
}

.kefi-app .kefi-moderation-footer {
    margin-top: 18px;
    text-align: center;
}

.kefi-app .kefi-moderation-footer a {
    color: #5d675e;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.kefi-app .kefi-moderation-footer a:hover,
.kefi-app .kefi-moderation-footer a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 700px) {
    .kefi-app .kefi-moderation-page {
        width: min(100% - 20px, 940px);
        margin-top: 16px;
        margin-bottom: 40px;
    }

    .kefi-app .kefi-moderation-hero {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 13px;
        padding: 18px;
        border-radius: 20px;
    }

    .kefi-app .kefi-moderation-hero-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .kefi-app .kefi-moderation-open-count {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 63px;
    }

    .kefi-app .kefi-moderation-report-main {
        grid-template-columns: 94px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .kefi-app .kefi-moderation-thumb {
        width: 94px;
        height: 86px;
        border-radius: 12px;
    }

    .kefi-app .kefi-moderation-report-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .kefi-app .kefi-moderation-facts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .kefi-app .kefi-moderation-report-actions {
        padding: 10px 12px 12px;
    }

    .kefi-app .kefi-moderation-review-button {
        width: 100%;
        min-height: 42px;
    }
}

/* PHASE-7E-MODERATION-QUEUE-73366-END */

/* ============================================================
   PHASE-7E-MODERATION-BUTTON-CONTRAST-73367-BEGIN
   Keep Review Report legible over global link/visited styles.
   ============================================================ */

.kefi-app a.kefi-moderation-review-button,
.kefi-app a.kefi-moderation-review-button:link,
.kefi-app a.kefi-moderation-review-button:visited {
    background: #376d61;
    color: #ffffff;
    text-decoration: none;
}

.kefi-app a.kefi-moderation-review-button:hover,
.kefi-app a.kefi-moderation-review-button:focus-visible,
.kefi-app a.kefi-moderation-review-button:active {
    background: #2c5a50;
    color: #ffffff;
    text-decoration: none;
}

.kefi-app a.kefi-moderation-review-button span {
    color: inherit;
}

/* PHASE-7E-MODERATION-BUTTON-CONTRAST-73367-END */

/* ============================================================
   PHASE-7E-MODERATION-DETAIL-73369-BEGIN
   Delightful administrator Post Report review workspace.
   ============================================================ */

.kefi-app .kefi-mod-detail-page {
    box-sizing: border-box;
    width: min(100% - 36px, 940px);
    margin: 30px auto 64px;
}

.kefi-app .kefi-mod-detail-hero {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;

    padding: 21px 24px;

    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 24px;

    background: rgba(255, 252, 244, 0.93);
    box-shadow:
        0 18px 46px rgba(55, 54, 43, 0.10),
        0 2px 8px rgba(55, 54, 43, 0.05);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.kefi-app .kefi-mod-detail-hero-icon {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border: 1px solid rgba(74, 124, 118, 0.16);
    border-radius: 17px;

    background: rgba(225, 244, 240, 0.88);
    color: #477b75;
}

.kefi-app .kefi-mod-detail-hero-icon svg,
.kefi-app .kefi-mod-detail-photo-empty svg,
.kefi-app .kefi-mod-action-icon svg {
    width: 30px;
    height: 30px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kefi-app .kefi-mod-detail-eyebrow,
.kefi-app .kefi-mod-detail-section-label {
    margin: 0 0 3px;

    color: #9a641f;
    font-size: 0.70rem;
    font-weight: 850;
    letter-spacing: 0.10em;
}

.kefi-app .kefi-mod-detail-hero h1 {
    margin: 0;

    color: #243c39;
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    line-height: 1.12;
}

.kefi-app .kefi-mod-detail-intro {
    margin: 6px 0 0;

    color: #6e685d;
    font-size: 0.91rem;
    line-height: 1.45;
}

.kefi-app .kefi-mod-detail-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border: 1px solid rgba(183, 82, 67, 0.18);
    border-radius: 999px;

    background: rgba(183, 82, 67, 0.08);
    color: #94483e;

    font-size: 0.78rem;
    font-weight: 850;
}

.kefi-app .kefi-mod-detail-card,
.kefi-app .kefi-mod-decision {
    margin-top: 16px;

    border: 1px solid rgba(151, 124, 78, 0.17);
    border-radius: 21px;

    background: rgba(255, 252, 244, 0.94);
    box-shadow:
        0 12px 32px rgba(70, 61, 45, 0.08),
        0 2px 6px rgba(70, 61, 45, 0.04);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.kefi-app .kefi-mod-detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 16px 18px 13px;

    border-bottom: 1px solid rgba(151, 124, 78, 0.12);
}

.kefi-app .kefi-mod-detail-section-header h2 {
    margin: 0;

    color: #55452f;
    font-size: 1.18rem;
    line-height: 1.25;
}

.kefi-app .kefi-mod-detail-post {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 20px;

    padding: 18px;
}

.kefi-app .kefi-mod-detail-photo {
    overflow: hidden;

    width: 210px;
    height: 160px;

    border-radius: 16px;
    background: rgba(225, 239, 234, 0.75);
}

.kefi-app .kefi-mod-detail-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kefi-app .kefi-mod-detail-photo-empty {
    display: grid;
    place-items: center;
    color: #628b82;
}

.kefi-app .kefi-mod-detail-facts,
.kefi-app .kefi-mod-detail-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;

    margin: 0;
}

.kefi-app .kefi-mod-detail-facts div,
.kefi-app .kefi-mod-detail-report-meta div {
    display: grid;
    gap: 2px;
}

.kefi-app .kefi-mod-detail-facts dt,
.kefi-app .kefi-mod-detail-report-meta dt,
.kefi-app .kefi-mod-detail-description > span,
.kefi-app .kefi-mod-detail-member-note > span {
    color: #8a8173;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.kefi-app .kefi-mod-detail-facts dd,
.kefi-app .kefi-mod-detail-report-meta dd {
    margin: 0;

    color: #4f4a42;
    font-size: 0.86rem;
    font-weight: 750;
}

.kefi-app .kefi-mod-detail-description {
    margin-top: 18px;
    padding: 11px 13px;

    border-radius: 12px;
    background: rgba(247, 242, 228, 0.72);
}

.kefi-app .kefi-mod-detail-description p {
    margin: 5px 0 0;

    color: #514c44;
    font-size: 0.91rem;
    line-height: 1.5;
}

.kefi-app .kefi-mod-detail-reason {
    padding: 5px 9px;

    border-radius: 999px;
    background: rgba(183, 82, 67, 0.09);

    color: #94483e;
    font-size: 0.73rem;
    font-weight: 800;
}

.kefi-app .kefi-mod-detail-report-meta {
    padding: 15px 18px 0;
}

.kefi-app .kefi-mod-detail-member-note {
    margin: 15px 18px 18px;
    padding: 11px 13px;

    border-left: 3px solid rgba(176, 119, 48, 0.40);
    border-radius: 0 11px 11px 0;

    background: rgba(248, 240, 219, 0.70);
}

.kefi-app .kefi-mod-detail-member-note p {
    margin: 4px 0 0;

    color: #5d5549;
    font-size: 0.90rem;
    line-height: 1.48;
}

.kefi-app .kefi-mod-decision {
    overflow: hidden;
}

.kefi-app .kefi-mod-decision-header {
    padding: 18px 20px 15px;

    border-bottom: 1px solid rgba(151, 124, 78, 0.12);
}

.kefi-app .kefi-mod-decision-header h2 {
    margin: 0;

    color: #354c47;
    font-size: 1.22rem;
}

.kefi-app .kefi-mod-decision-header > p:last-child {
    margin: 5px 0 0;

    color: #756e63;
    font-size: 0.86rem;
}

.kefi-app .kefi-mod-decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    padding: 16px;
}

.kefi-app .kefi-mod-action-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-content: start;
    gap: 10px 12px;

    padding: 15px;

    border: 1px solid rgba(74, 124, 118, 0.18);
    border-radius: 16px;

    background: rgba(244, 250, 247, 0.74);
}

.kefi-app .kefi-mod-action-remove {
    border-color: rgba(174, 77, 65, 0.22);
    background: rgba(253, 245, 241, 0.78);
}

.kefi-app .kefi-mod-action-icon {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    background: rgba(218, 239, 234, 0.90);
    color: #477b75;
}

.kefi-app .kefi-mod-action-remove .kefi-mod-action-icon {
    background: rgba(245, 220, 214, 0.76);
    color: #a34f43;
}

.kefi-app .kefi-mod-action-icon svg {
    width: 23px;
    height: 23px;
}

.kefi-app .kefi-mod-action-heading h3 {
    margin: 1px 0 3px;

    color: #354c47;
    font-size: 1rem;
}

.kefi-app .kefi-mod-action-remove .kefi-mod-action-heading h3 {
    color: #8c443b;
}

.kefi-app .kefi-mod-action-heading p {
    margin: 0;

    color: #756e63;
    font-size: 0.80rem;
    line-height: 1.4;
}

.kefi-app .kefi-mod-action-form {
    grid-column: 1 / -1;
}

.kefi-app .kefi-mod-field {
    display: grid;
    gap: 6px;
    margin-top: 5px;
}

.kefi-app .kefi-mod-field label {
    color: #5a554c;
    font-size: 0.78rem;
    font-weight: 800;
}

.kefi-app .kefi-mod-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 82px;
    resize: vertical;

    padding: 9px 10px;

    border: 1px solid rgba(108, 104, 94, 0.30);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.86);
    color: #393631;

    font: inherit;
    font-size: 0.84rem;
    line-height: 1.4;
}

.kefi-app .kefi-mod-field textarea:focus {
    border-color: #5f8c82;
    outline: 3px solid rgba(95, 140, 130, 0.14);
}

.kefi-app .kefi-mod-action-remove .kefi-mod-field textarea:focus {
    border-color: #b2675c;
    outline-color: rgba(178, 103, 92, 0.14);
}

.kefi-app .kefi-mod-help {
    color: #7a746b;
    font-size: 0.74rem;
}

.kefi-app .kefi-mod-form-errors {
    margin-top: 5px;
    color: #a33e34;
    font-size: 0.77rem;
    font-weight: 750;
}

.kefi-app .kefi-mod-keep-button,
.kefi-app .kefi-mod-remove-button {
    width: 100%;
    min-height: 40px;
    margin-top: 11px;

    padding: 8px 13px;

    border-radius: 11px;

    font: inherit;
    font-size: 0.80rem;
    font-weight: 850;

    cursor: pointer;
}

.kefi-app .kefi-mod-keep-button {
    border: 1px solid #376d61;
    background: #376d61;
    color: #fff;
}

.kefi-app .kefi-mod-keep-button:hover,
.kefi-app .kefi-mod-keep-button:focus-visible {
    background: #2c5a50;
}

.kefi-app .kefi-mod-remove-button {
    border: 1px solid #ad5448;
    background: #fff7f4;
    color: #93443a;
}

.kefi-app .kefi-mod-remove-button:hover,
.kefi-app .kefi-mod-remove-button:focus-visible {
    background: #f7e3de;
}

.kefi-app .kefi-mod-detail-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 18px;
}

.kefi-app .kefi-mod-detail-footer a {
    color: #655b4d;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: none;
}

.kefi-app .kefi-mod-detail-footer a:hover,
.kefi-app .kefi-mod-detail-footer a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kefi-app .kefi-mod-detail-footer-divider {
    color: #a89e8f;
}

@media (max-width: 700px) {
    .kefi-app .kefi-mod-detail-page {
        width: min(100% - 20px, 940px);
        margin-top: 16px;
        margin-bottom: 40px;
    }

    .kefi-app .kefi-mod-detail-hero {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 13px;
        padding: 18px;
        border-radius: 20px;
    }

    .kefi-app .kefi-mod-detail-hero-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .kefi-app .kefi-mod-detail-status {
        grid-column: 1 / -1;
        justify-self: start;
        margin-left: 63px;
    }

    .kefi-app .kefi-mod-detail-post {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px;
    }

    .kefi-app .kefi-mod-detail-photo {
        width: 100%;
        height: min(52vw, 260px);
    }

    .kefi-app .kefi-mod-detail-section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 14px;
    }

    .kefi-app .kefi-mod-detail-report-meta {
        display: grid;
        gap: 8px;
        padding: 14px 14px 0;
    }

    .kefi-app .kefi-mod-detail-member-note {
        margin: 13px 14px 14px;
    }

    .kefi-app .kefi-mod-decision-grid {
        grid-template-columns: 1fr;
        padding: 13px;
    }

    .kefi-app .kefi-mod-action-card {
        padding: 14px;
    }

    .kefi-app .kefi-mod-keep-button,
    .kefi-app .kefi-mod-remove-button {
        min-height: 44px;
    }
}

/* PHASE-7E-MODERATION-DETAIL-73369-END */

/* ============================================================
   PHASE-7E-MODERATION-DECISIONS-73370-BEGIN
   Align three moderation choices and provide a non-resolution
   path that leaves the report OPEN.
   ============================================================ */

.kefi-app .kefi-mod-decision-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

/*
 * Give every action card the same row structure so different
 * explanation lengths do not move the fields/buttons vertically.
 */
.kefi-app .kefi-mod-action-card {
    grid-template-rows: auto minmax(58px, auto) 1fr auto;
}

.kefi-app .kefi-mod-action-heading {
    min-width: 0;
}

.kefi-app .kefi-mod-action-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kefi-app .kefi-mod-action-form .kefi-mod-field {
    flex: 1 0 auto;
}

.kefi-app .kefi-mod-action-form button {
    margin-top: auto;
}

/* Neutral middle choice: no moderation state is changed. */
.kefi-app .kefi-mod-action-later {
    border-color: rgba(111, 104, 89, 0.20);
    background: rgba(249, 247, 240, 0.82);
}

.kefi-app .kefi-mod-action-later .kefi-mod-action-icon {
    background: rgba(232, 230, 219, 0.90);
    color: #68665e;
}

.kefi-app .kefi-mod-later-spacer {
    grid-column: 1 / -1;
    min-height: 113px;
}

/*
 * Explicit selectors override KefiCircle's general button/link
 * colors so each moderation choice communicates its meaning.
 */
.kefi-app button.kefi-mod-keep-button {
    border: 1px solid #376d61;
    background: #376d61;
    color: #ffffff;
}

.kefi-app button.kefi-mod-keep-button:hover,
.kefi-app button.kefi-mod-keep-button:focus-visible {
    border-color: #2c5a50;
    background: #2c5a50;
    color: #ffffff;
}

.kefi-app button.kefi-mod-remove-button {
    border: 1px solid #ad5448;
    background: #ad5448;
    color: #ffffff;
}

.kefi-app button.kefi-mod-remove-button:hover,
.kefi-app button.kefi-mod-remove-button:focus-visible {
    border-color: #93443a;
    background: #93443a;
    color: #ffffff;
}

.kefi-app a.kefi-mod-later-button,
.kefi-app a.kefi-mod-later-button:link,
.kefi-app a.kefi-mod-later-button:visited {
    box-sizing: border-box;
    display: flex;
    grid-column: 1 / -1;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 40px;
    padding: 8px 13px;

    border: 1px solid #8a8579;
    border-radius: 11px;

    background: #ffffff;
    color: #5f5b53;

    font-size: 0.80rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

.kefi-app a.kefi-mod-later-button:hover,
.kefi-app a.kefi-mod-later-button:focus-visible {
    background: #efede6;
    color: #4e4b45;
    text-decoration: none;
}

/*
 * Three columns need slightly more room than the original
 * two-card decision layout.
 */
.kefi-app .kefi-mod-detail-page {
    width: min(100% - 36px, 1080px);
}

@media (max-width: 900px) {
    .kefi-app .kefi-mod-decision-grid {
        grid-template-columns: 1fr;
    }

    .kefi-app .kefi-mod-action-card {
        grid-template-rows: auto auto auto auto;
    }

    .kefi-app .kefi-mod-later-spacer {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .kefi-app .kefi-mod-detail-page {
        width: min(100% - 20px, 1080px);
    }

    .kefi-app a.kefi-mod-later-button {
        min-height: 44px;
    }
}

/* PHASE-7E-MODERATION-DECISIONS-73370-END */

/* ============================================================
   PHASE-7E-MODERATION-ALIGN-73371-BEGIN
   Align all three administrator decision cards by giving
   each card matching vertical content zones.
   ============================================================ */

@media (min-width: 901px) {

    .kefi-app .kefi-mod-decision-grid {
        align-items: stretch;
    }

    .kefi-app .kefi-mod-action-card {
        display: grid;

        /*
         * Row 1: icon + heading
         * Row 2: decision control area
         * Row 3: action button
         */
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: 76px 122px 40px;

        align-content: start;
        gap: 10px 12px;
    }

    .kefi-app .kefi-mod-action-icon {
        grid-column: 1;
        grid-row: 1;
    }

    .kefi-app .kefi-mod-action-heading {
        grid-column: 2;
        grid-row: 1;
    }

    .kefi-app .kefi-mod-action-form {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 2 / 4;

        grid-template-rows: 122px 40px;

        height: auto;
        gap: 0;
    }

    .kefi-app .kefi-mod-action-form .kefi-mod-field {
        box-sizing: border-box;
        display: grid;

        grid-template-rows: 18px 82px;
        align-content: start;

        height: 122px;
        margin: 0;
        gap: 6px;
    }

    .kefi-app .kefi-mod-field textarea {
        box-sizing: border-box;
        height: 82px;
        min-height: 82px;
    }

    .kefi-app .kefi-mod-action-form button {
        box-sizing: border-box;

        height: 40px;
        min-height: 40px;
        margin: 0;
    }

    /*
     * Decide Later has no textarea, but reserve exactly the
     * same middle control zone as the other two decisions.
     */
    .kefi-app .kefi-mod-later-spacer {
        box-sizing: border-box;

        grid-column: 1 / -1;
        grid-row: 2;

        height: 122px;
        min-height: 122px;
    }

    .kefi-app a.kefi-mod-later-button {
        box-sizing: border-box;

        grid-column: 1 / -1;
        grid-row: 3;

        height: 40px;
        min-height: 40px;
    }
}

/* PHASE-7E-MODERATION-ALIGN-73371-END */

/* ============================================================
   PHASE-7E-MODERATION-ALIGN-FINAL-73372-BEGIN
   Align the Decide Later action button with the Keep Post
   and Remove Post action buttons.
   ============================================================ */

@media (min-width: 901px) {
    .kefi-app a.kefi-mod-later-button {
        transform: translateY(-10px);
    }
}

/* PHASE-7E-MODERATION-ALIGN-FINAL-73372-END */

/* ============================================================
   PHASE-7E-ATTENTION-EXPANDABLE-73380-BEGIN
   Attention items expand in place. Navigation happens only
   through the explicit action inside the expanded summary.
   ============================================================ */

.kefi-app .kefi-attention-expandable {
    display: block;
    overflow: hidden;
}

.kefi-app .kefi-attention-expand-button {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 68px;
    padding: 11px 14px;
    gap: 12px;

    border: 0;
    border-radius: 17px;
    background: transparent;
    color: inherit;

    text-align: left;
    font: inherit;
    cursor: pointer;
}

.kefi-app .kefi-attention-expand-button:hover {
    background: #f1f7f4;
}

.kefi-app .kefi-attention-expand-button:focus-visible {
    outline: 2px solid #8bb5a4;
    outline-offset: -2px;
}

.kefi-app .kefi-attention-expand-button
    .kefi-attention-item-arrow {
    transition: transform 120ms ease;
}

.kefi-app .kefi-attention-expanded {
    margin: 0 14px 12px 68px;
    padding: 11px 13px 12px;

    border-top: 1px solid #dfe9e4;
    border-radius: 0 0 12px 12px;
    background: #f8fbf9;
}

.kefi-app .kefi-attention-expanded p {
    margin: 0 0 10px;
    color: #64746d;
    font-size: 0.84rem;
    line-height: 1.45;
}

.kefi-app .kefi-attention-expanded-action,
.kefi-app .kefi-attention-expanded-action:link,
.kefi-app .kefi-attention-expanded-action:visited {
    display: inline-flex;
    align-items: center;

    padding: 6px 11px;
    border-radius: 8px;

    background: #376d61;
    color: #ffffff;

    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.kefi-app .kefi-attention-expanded-action:hover,
.kefi-app .kefi-attention-expanded-action:focus-visible {
    background: #2c5a50;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 700px) {
    .kefi-app .kefi-attention-expand-button {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        min-height: 62px;
        padding: 10px 11px;
        gap: 10px;
    }

    .kefi-app .kefi-attention-expanded {
        margin-left: 59px;
        margin-right: 11px;
    }
}

/* PHASE-7E-ATTENTION-EXPANDABLE-73380-END */

/* ============================================================
   PHASE-7E-ATTENTION-PREVIEWS-73389-BEGIN
   Compact one-line previews inside the unified attention popup.
   ============================================================ */

.kefi-app .kefi-attention-preview-list {
    display: grid;
    gap: 5px;
    margin: 0 0 10px;
}

.kefi-app .kefi-attention-preview-line {
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
    color: #665d52;
    font-size: 0.82rem;
    line-height: 1.35;
}

.kefi-app .kefi-attention-preview-line strong {
    color: #3d4d48;
    font-weight: 800;
}

.kefi-app .kefi-attention-preview-line span {
    color: #756c61;
}

/* PHASE-7E-ATTENTION-PREVIEWS-73389-END */


/* ==========================================================
   PHASE-7E-COMMUNITY-HEALTH-73404-BEGIN
   Community Snapshot + Owner Community Health & Growth V1
   ========================================================== */

.kefi-app .community-snapshot {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color, #d9e1e8);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 24px rgba(25, 42, 62, 0.06);
}

.kefi-app .community-snapshot-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

.kefi-app .community-snapshot-heading h2 {
    margin: .1rem 0 0;
    font-size: 1.05rem;
}

.kefi-app .community-snapshot-report-link {
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}

.kefi-app .community-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.kefi-app .community-snapshot-item {
    padding: .72rem .9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(120, 140, 160, .18);
}

.kefi-app .community-snapshot-item strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
}

.kefi-app .community-snapshot-item span {
    display: block;
    margin-top: .2rem;
    font-size: .82rem;
    opacity: .78;
}

.kefi-app .community-health-page {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.2rem 0 2.5rem;
}

.kefi-app .community-health-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.kefi-app .community-health-header h1 {
    margin: .15rem 0 .35rem;
}

.kefi-app .community-health-intro {
    margin: 0;
    max-width: 680px;
    opacity: .78;
}

.kefi-app .community-health-back {
    flex: 0 0 auto;
    font-weight: 700;
    text-decoration: none;
    padding-top: .35rem;
}

.kefi-app .community-health-section {
    margin-bottom: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--border-color, #d9e1e8);
    border-radius: 20px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 10px 28px rgba(25, 42, 62, .06);
}

.kefi-app .community-health-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.kefi-app .community-health-section-heading h2 {
    margin: .1rem 0 0;
    font-size: 1.15rem;
}

.kefi-app .community-health-period {
    font-size: .78rem;
    font-weight: 700;
    opacity: .65;
}

.kefi-app .community-health-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.kefi-app .community-health-metric {
    min-width: 0;
    padding: .9rem;
    border: 1px solid rgba(120, 140, 160, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
}

.kefi-app .community-health-label {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    opacity: .7;
}

.kefi-app .community-health-metric strong {
    display: block;
    margin: .3rem 0 .25rem;
    font-size: 1.75rem;
    line-height: 1;
}

.kefi-app .community-health-metric small {
    display: block;
    line-height: 1.35;
    opacity: .68;
}

.kefi-app .community-health-compact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.kefi-app .community-health-compact {
    padding: .8rem .9rem;
    border-radius: 14px;
    border: 1px solid rgba(120, 140, 160, .16);
    background: rgba(255, 255, 255, .7);
}

.kefi-app .community-health-compact strong {
    display: block;
    font-size: 1.35rem;
}

.kefi-app .community-health-compact span {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    opacity: .72;
}

.kefi-app .community-health-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.kefi-app .community-health-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    padding: .9rem;
    border-radius: 15px;
    border: 1px solid rgba(120, 140, 160, .18);
    background: rgba(255, 255, 255, .7);
}

.kefi-app .community-health-status p {
    margin: .25rem 0 0;
    font-size: .8rem;
    opacity: .68;
}

.kefi-app .community-health-not-connected {
    flex: 0 0 auto;
    padding: .3rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    background: rgba(120, 120, 120, .1);
    border: 1px solid rgba(120, 120, 120, .2);
}

.kefi-app .community-health-footer {
    padding: .3rem .4rem 0;
    font-size: .75rem;
    opacity: .58;
}

@media (max-width: 820px) {
    .kefi-app .community-health-metrics,
    .kefi-app .community-health-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kefi-app .community-health-status-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .kefi-app .community-health-page {
        width: min(100% - 1rem, 1120px);
    }

    .kefi-app .community-health-header,
    .kefi-app .community-health-section-heading,
    .kefi-app .community-snapshot-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .kefi-app .community-health-metrics,
    .kefi-app .community-health-compact-grid,
    .kefi-app .community-snapshot-grid {
        grid-template-columns: 1fr;
    }

    .kefi-app .community-health-status {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* PHASE-7E-COMMUNITY-HEALTH-73404-END */


/* ==========================================================
   PHASE-7E-COMBINED-SUMMARY-73408-BEGIN
   Administration Summary + Community Snapshot
   ========================================================== */

.kefi-app .administration-overview-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
    gap: .9rem;
    margin-bottom: 1rem;
    align-items: stretch;
}

.kefi-app .administration-overview-row .administration-summary,
.kefi-app .administration-overview-row .community-snapshot {
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

.kefi-app .administration-overview-row .community-snapshot {
    padding: .8rem .9rem;
}

.kefi-app
.administration-overview-row
.community-snapshot-heading {
    margin-bottom: .55rem;
    align-items: center;
}

.kefi-app
.administration-overview-row
.community-snapshot-heading h2 {
    font-size: .95rem;
}

.kefi-app
.administration-overview-row
.community-snapshot-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    font-size: 1rem;
}

.kefi-app
.administration-overview-row
.community-snapshot-grid {
    gap: .5rem;
}

.kefi-app
.administration-overview-row
.community-snapshot-item {
    padding: .58rem .65rem;
}

.kefi-app
.administration-overview-row
.community-snapshot-item strong {
    font-size: 1.25rem;
}

.kefi-app
.administration-overview-row
.community-snapshot-item span {
    font-size: .72rem;
}

@media (max-width: 980px) {
    .kefi-app .administration-overview-row {
        grid-template-columns: 1fr;
    }

    .kefi-app
    .administration-overview-row
    .community-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* PHASE-7E-COMBINED-SUMMARY-73408-END */


/* ============================================================
   HALLOWEEN DESIGN — PHASE 7E / SCRIPT#73436
   Source-controlled seasonal Design.
   ============================================================ */

/* PHASE-7E-HALLOWEEN-THEME-TOKENS-73468-BEGIN
 *
 * Halloween Themes own their complete UI accent vocabulary.
 *
 * Ordinary primary actions consume these tokens throughout the
 * active Design. Danger and secondary actions retain their
 * semantic component styling.
 */

.kefi-app.design-halloween.theme-pumpkin-glow {
    --p7e-theme-accent: #c85f18;
    --p7e-theme-accent-strong: #9d4512;
    --p7e-theme-link: #a84d16;

    --p7e-theme-surface: rgba(255, 250, 242, 0.95);
    --p7e-theme-surface-soft: rgba(255, 240, 218, 0.94);
    --p7e-theme-border: rgba(174, 91, 35, 0.31);

    --p7e-theme-heading: #66391f;
    --p7e-theme-text: #59463a;
    --p7e-theme-muted: #806d60;
}

.kefi-app.design-halloween.theme-spooky-night {
    --p7e-theme-accent: #b6531d;
    --p7e-theme-accent-strong: #873a13;
    --p7e-theme-link: #9f4919;

    --p7e-theme-surface: rgba(255, 250, 243, 0.95);
    --p7e-theme-surface-soft: rgba(247, 237, 224, 0.94);
    --p7e-theme-border: rgba(126, 80, 52, 0.31);

    --p7e-theme-heading: #4e382d;
    --p7e-theme-text: #51453f;
    --p7e-theme-muted: #776a63;
}

/* PHASE-7E-HALLOWEEN-THEME-TOKENS-73468-END */

.kefi-app.design-halloween .kefi-design-canvas {
    overflow: hidden;
}

.kefi-app.design-halloween .kefi-halloween-landscape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
}

.kefi-app.design-halloween.theme-pumpkin-glow .app-topbar {
    box-shadow: 0 1px 0 rgba(113, 60, 24, 0.12);
}

.kefi-app.design-halloween.theme-spooky-night .app-topbar {
    box-shadow: 0 1px 0 rgba(19, 31, 55, 0.22);
}

/*
 * Decorative bat silhouettes stay inside the background canvas.
 * They never receive pointer events and are hidden from assistive technology.
 */
.kefi-halloween-bats {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.kefi-bat-group {
    position: absolute;
    left: -12%;
    display: flex;
    gap: 0.45rem;
    opacity: 0;
    color: rgba(15, 18, 27, 0.82);
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.08));
    transform: rotate(-8deg);
    animation-name: kefi-halloween-bat-flight;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.kefi-bat {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 15px;
    flex: 0 0 32px;
}

/* Central body. */
.kefi-bat::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 4px;
    width: 6px;
    height: 10px;
    background: currentColor;
    border-radius: 50% 50% 45% 45%;
}

/*
 * Wings use a compact bat-shaped clip path rather than a text glyph,
 * keeping the silhouette recognizable and browser-independent.
 */
.kefi-bat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    clip-path: polygon(
        0 4px,
        6px 1px,
        11px 6px,
        16px 3px,
        21px 6px,
        26px 1px,
        32px 4px,
        27px 8px,
        23px 7px,
        20px 13px,
        16px 9px,
        12px 13px,
        9px 7px,
        5px 8px
    );
}

.kefi-bat-group-one {
    top: 11%;
    animation-duration: 19s;
    animation-delay: 1s;
}

.kefi-bat-group-two {
    top: 19%;
    animation-duration: 24s;
    animation-delay: 7s;
    transform: scale(0.8) rotate(4deg);
}

.kefi-bat-group-three {
    top: 7%;
    animation-duration: 29s;
    animation-delay: 13s;
    transform: scale(0.65) rotate(-5deg);
}

@keyframes kefi-halloween-bat-flight {
    0% {
        left: -12%;
        opacity: 0;
        transform: translateY(0) rotate(-8deg);
    }

    8% {
        opacity: 0.78;
    }

    38% {
        transform: translateY(12px) rotate(-3deg);
    }

    67% {
        transform: translateY(-9px) rotate(4deg);
    }

    92% {
        opacity: 0.72;
    }

    100% {
        left: 108%;
        opacity: 0;
        transform: translateY(5px) rotate(7deg);
    }
}

@media (max-width: 760px) {
    .kefi-app.design-halloween .kefi-halloween-landscape {
        object-position: center top;
    }

    .kefi-bat-group-two,
    .kefi-bat-group-three {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-halloween-bats {
        display: none;
    }
}

/* PHASE-7E-HALLOWEEN-HOME-HEADING-73442-BEGIN */
/*
 * Halloween artwork is darker and more saturated than Standard.
 * Scope the contrast treatment to the actual Community Home
 * dashboard heading without changing Standard Design typography.
 */
body.design-halloween .dashboard-header h1 {
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.82),
        0 2px 7px rgba(0, 0, 0, 0.52);
}

body.design-halloween .dashboard-header p {
    color: rgba(255, 255, 255, 0.96);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.84),
        0 2px 6px rgba(0, 0, 0, 0.56);
}
/* PHASE-7E-HALLOWEEN-HOME-HEADING-73442-END */

/* PHASE-7E-HOME-POLISH-73446-BEGIN */

/*
 * Community Home structural treatment.
 * Browse Categories is a major dashboard surface and should use the
 * same rounded visual language as the other Delightful panels.
 * This is Design-independent.
 */
.kefi-app .dashboard-section {
    border-radius: 14px;
}

/*
 * Halloween artwork can be much brighter or darker than Standard.
 * Keep the primary posting action visually prominent across the
 * Halloween Design without altering Standard Design themes.
 */
.kefi-app.design-halloween .kefi-design-page-home .dashboard-primary-action {
    color: #ffffff;
    background: var(--p7e-theme-accent);
    border-color: var(--p7e-theme-accent);
    box-shadow: 0 2px 6px rgba(56, 25, 14, 0.18);
}

.kefi-app.design-halloween .kefi-design-page-home .dashboard-primary-action:hover {
    color: #ffffff;
    background: var(--p7e-theme-accent-strong);
    border-color: var(--p7e-theme-accent-strong);
}

.kefi-app.design-halloween .kefi-design-page-home .dashboard-primary-action:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}

/* PHASE-7E-HOME-POLISH-73446-END */


/* ============================================================
   CHRISTMAS DESIGN — CHRISTMAS CHEER
   ============================================================ */

.kefi-app.design-christmas.theme-christmas-cheer {
    --p7e-theme-accent: #b51f2e;
    --p7e-theme-accent-strong: #8f1723;
    --p7e-theme-link: #a61c29;
    --p7e-theme-surface: rgba(255, 255, 255, 0.95);
    --p7e-theme-surface-soft: rgba(250, 247, 242, 0.95);
    --p7e-theme-border: rgba(143, 23, 35, 0.25);
    --p7e-theme-heading: #234d3b;
    --p7e-theme-text: #443f3b;
    --p7e-theme-muted: #756d67;
}

.kefi-design-christmas {
    overflow: hidden;
}

.kefi-christmas-landscape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


/* Christmas home heading readability */

body.design-christmas .dashboard-header h1 {
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.90),
        0 2px 8px rgba(0, 0, 0, 0.66);
}

body.design-christmas .dashboard-header p {
    color: rgba(255, 255, 255, 0.98);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.90),
        0 2px 7px rgba(0, 0, 0, 0.62);
}


/* ------------------------------------------------------------
   Candy-cane primary actions
   ------------------------------------------------------------ */

.kefi-app.design-christmas
    .app-main
    :is(
        .primary-action,
        button[type="submit"]
    ):not(.danger-action):not(.secondary-action) {
    color: #ffffff;
    border-color: #8f1723;
    background:
        repeating-linear-gradient(
            -45deg,
            #b51f2e 0 18px,
            #b51f2e 18px 31px,
            #ffffff 31px 39px,
            #ffffff 39px 45px
        );
    background-size: 64px 64px;
    box-shadow:
        0 2px 7px rgba(83, 14, 22, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    text-shadow:
        0 1px 2px rgba(91, 12, 20, 0.92),
        0 0 4px rgba(91, 12, 20, 0.72);
    transition:
        background-position 260ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.kefi-app.design-christmas
    .app-main
    :is(
        .primary-action,
        button[type="submit"]
    ):not(.danger-action):not(.secondary-action):hover {
    color: #ffffff;
    border-color: #72111b;
    background-position: 18px 0;
    box-shadow:
        0 3px 9px rgba(83, 14, 22, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}

.kefi-app.design-christmas
    .app-main
    :is(
        .primary-action,
        button[type="submit"]
    ):not(.danger-action):not(.secondary-action):focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.94);
    outline-offset: 3px;
}


/* Home primary action participates in the Christmas treatment. */

.kefi-app.design-christmas
    .kefi-design-page-home
    .dashboard-primary-action {
    color: #ffffff;
    border-color: #8f1723;
    background:
        repeating-linear-gradient(
            -45deg,
            #b51f2e 0 18px,
            #b51f2e 18px 31px,
            #ffffff 31px 39px,
            #ffffff 39px 45px
        );
    background-size: 64px 64px;
    box-shadow:
        0 2px 7px rgba(83, 14, 22, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    text-shadow:
        0 1px 2px rgba(91, 12, 20, 0.92),
        0 0 4px rgba(91, 12, 20, 0.72);
}

.kefi-app.design-christmas
    .kefi-design-page-home
    .dashboard-primary-action:hover {
    color: #ffffff;
    border-color: #72111b;
    background-position: 18px 0;
}


/* ------------------------------------------------------------
   Continuous multi-layer snowfall
   ------------------------------------------------------------ */

.kefi-christmas-snow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.kefi-snow-layer {
    position: absolute;
    left: -10%;
    top: -120%;
    width: 120%;
    height: 220%;
    pointer-events: none;
    background-repeat: repeat;
    will-change: transform;
}

.kefi-snow-layer-back {
    opacity: 0.48;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.92) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(255,255,255,.78) 0 3px, transparent 3.5px);
    background-size: 92px 110px, 137px 151px;
    background-position: 14px 9px, 53px 67px;
    animation: kefi-christmas-snow-back 18s linear infinite;
}

.kefi-snow-layer-middle {
    opacity: 0.72;
    background-image:
        radial-gradient(circle, #ffffff 0 4px, transparent 4.7px),
        radial-gradient(circle, rgba(255,255,255,.94) 0 5px, transparent 5.8px);
    background-size: 126px 142px, 181px 197px;
    background-position: 31px 17px, 83px 101px;
    animation: kefi-christmas-snow-middle 12s linear infinite;
}

.kefi-snow-layer-front {
    opacity: 0.88;
    filter: drop-shadow(0 1px 1px rgba(68, 88, 110, 0.18));
    background-image:
        radial-gradient(circle, #ffffff 0 6px, transparent 6.8px),
        radial-gradient(circle, rgba(255,255,255,.98) 0 8px, transparent 8.8px);
    background-size: 177px 211px, 263px 287px;
    background-position: 24px 39px, 127px 143px;
    animation: kefi-christmas-snow-front 8s linear infinite;
}

@keyframes kefi-christmas-snow-back {
    from {
        transform: translate3d(-2%, -8%, 0);
    }
    to {
        transform: translate3d(5%, 52%, 0);
    }
}

@keyframes kefi-christmas-snow-middle {
    from {
        transform: translate3d(3%, -10%, 0);
    }
    to {
        transform: translate3d(-5%, 54%, 0);
    }
}

@keyframes kefi-christmas-snow-front {
    from {
        transform: translate3d(-3%, -12%, 0);
    }
    to {
        transform: translate3d(6%, 57%, 0);
    }
}

@media (max-width: 700px) {
    .kefi-snow-layer-back {
        opacity: 0.34;
    }

    .kefi-snow-layer-middle {
        opacity: 0.58;
    }

    .kefi-snow-layer-front {
        opacity: 0.72;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kefi-snow-layer {
        animation: none;
        transform: translate3d(0, 18%, 0);
    }

    .kefi-app.design-christmas
        .app-main
        :is(
            .primary-action,
            button[type="submit"]
        ):not(.danger-action):not(.secondary-action) {
        transition: none;
    }
}


/* CHRISTMAS-DESIGN-73475-END */

/* ============================================================
   CHRISTMAS CHEER POLISH
   Snowflake primary actions + secondary-page identity
   ============================================================ */


/* ------------------------------------------------------------
   Snowflake primary actions

   Override the earlier candy-cane treatment while retaining
   normal KefiCircle button geometry and semantics.
   ------------------------------------------------------------ */

.kefi-app.design-christmas
    .app-main
    :is(
        .primary-action,
        button[type="submit"]
    ):not(.danger-action):not(.secondary-action),
.kefi-app.design-christmas
    .kefi-design-page-home
    .dashboard-primary-action {
    position: relative;
    overflow: hidden;

    color: #ffffff;
    border-color: #8f1723;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255,255,255,.92) 0 1.5px,
            transparent 2px
        ),
        radial-gradient(
            circle at 78% 70%,
            rgba(255,255,255,.72) 0 1.5px,
            transparent 2px
        ),
        radial-gradient(
            circle at 91% 25%,
            rgba(255,255,255,.82) 0 1px,
            transparent 1.7px
        ),
        linear-gradient(
            180deg,
            #d52335 0%,
            #bd1d2d 52%,
            #a91625 100%
        );

    background-size:
        43px 43px,
        57px 57px,
        71px 71px,
        auto;

    box-shadow:
        0 2px 7px rgba(83, 14, 22, 0.27),
        inset 0 1px 0 rgba(255,255,255,.20);

    text-shadow:
        0 1px 2px rgba(83, 14, 22, 0.78);

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        filter 160ms ease;
}


/*
   Large decorative snowflakes are deliberately implemented
   with text glyphs rather than image assets.
*/

.kefi-app.design-christmas
    .app-main
    :is(
        .primary-action,
        button[type="submit"]
    ):not(.danger-action):not(.secondary-action)::before,
.kefi-app.design-christmas
    .kefi-design-page-home
    .dashboard-primary-action::before {
    content: "❄";
    display: inline-block;
    margin-right: .48rem;

    color: rgba(255,255,255,.98);
    font-size: 1.12em;
    line-height: 1;
    vertical-align: -.04em;

    text-shadow:
        0 1px 2px rgba(84, 12, 20, .42);
}


.kefi-app.design-christmas
    .app-main
    :is(
        .primary-action,
        button[type="submit"]
    ):not(.danger-action):not(.secondary-action):hover,
.kefi-app.design-christmas
    .kefi-design-page-home
    .dashboard-primary-action:hover {
    color: #ffffff;
    border-color: #7d121d;

    background:
        radial-gradient(
            circle at 18% 24%,
            rgba(255,255,255,.98) 0 1.5px,
            transparent 2px
        ),
        radial-gradient(
            circle at 78% 70%,
            rgba(255,255,255,.82) 0 1.5px,
            transparent 2px
        ),
        radial-gradient(
            circle at 91% 25%,
            rgba(255,255,255,.90) 0 1px,
            transparent 1.7px
        ),
        linear-gradient(
            180deg,
            #e1293c 0%,
            #c51d30 52%,
            #ad1627 100%
        );

    background-size:
        43px 43px,
        57px 57px,
        71px 71px,
        auto;

    background-position: 3px -2px, -3px 2px, 2px 1px, 0 0;

    box-shadow:
        0 3px 10px rgba(83, 14, 22, 0.34),
        0 0 0 1px rgba(255,255,255,.13),
        inset 0 1px 0 rgba(255,255,255,.25);

    filter: brightness(1.03);
}


/* ------------------------------------------------------------
   Christmas secondary-page identity

   Keep existing Delightful layouts intact.  Christmas changes
   the visual vocabulary, not page structure.
   ------------------------------------------------------------ */

.kefi-app.design-christmas {
    --p7e-theme-accent: #bd1d2d;
    --p7e-theme-accent-strong: #931724;
    --p7e-theme-link: #a61927;

    --p7e-theme-surface: rgba(255, 255, 255, 0.94);
    --p7e-theme-surface-soft: rgba(248, 252, 250, 0.94);

    --p7e-theme-border: rgba(34, 91, 67, 0.24);

    --p7e-theme-heading: #285b46;
    --p7e-theme-text: #3f4844;
    --p7e-theme-muted: #6d7873;
}


/*
   Frost the principal application surface slightly so the
   Christmas background remains visible without compromising
   readability.
*/

.kefi-app.design-christmas .app-main {
    --christmas-frost:
        rgba(255, 255, 255, 0.94);
}


/*
   Existing cards already consume theme variables in most of
   the Delightful system.  This light overlay catches generic
   card/panel surfaces that otherwise remain visually Standard.
*/

.kefi-app.design-christmas
    .app-main
    :is(
        .card,
        .delightful-card,
        .delightful-panel
    ) {
    border-color: rgba(34, 91, 67, 0.20);
    box-shadow:
        0 4px 15px rgba(31, 69, 54, 0.07),
        0 1px 3px rgba(31, 69, 54, 0.05);
}


/* Evergreen headings give secondary pages a Christmas identity. */

.kefi-app.design-christmas
    .app-main
    :is(h1, h2, h3) {
    color: var(--p7e-theme-heading);
}


/*
   Preserve the special white Christmas home heading over the
   artwork.  This must win over the generic secondary-page rule.
*/

body.design-christmas
    .kefi-design-page-home
    .dashboard-header h1 {
    color: #ffffff;
}


/*
   Christmas links and small interactive accents.
*/

.kefi-app.design-christmas
    .app-main
    a:not(.primary-action):not(.dashboard-primary-action) {
    text-decoration-color: rgba(189, 29, 45, 0.28);
}


/*
   Subtle festive rule under secondary-page headings.
   No snowflakes are injected into content text.
*/

.kefi-app.design-christmas
    .app-main
    .page-header {
    border-bottom-color: rgba(189, 29, 45, 0.20);
}


/* ------------------------------------------------------------
   Reduced motion

   Snowflake buttons remain festive but completely stationary.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .kefi-app.design-christmas
        .app-main
        :is(
            .primary-action,
            button[type="submit"]
        ):not(.danger-action):not(.secondary-action),
    .kefi-app.design-christmas
        .kefi-design-page-home
        .dashboard-primary-action {
        transition: none;
    }
}


/* CHRISTMAS-POLISH-73477-END */

/* SCRIPT#74026 — User Agreement review, using the login artwork.
   Page-scoped rules keep member Design/theme preferences untouched. */
body:has(.user-agreement-page) {
    background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)),
        url("../images/login-community-background.png") center center / cover fixed no-repeat;
    background-color: #d9eef8;
}

body:has(.user-agreement-page) :is(.kefi-design-canvas, .app-topbar, .app-sidebar, .mobile-nav, .help-bubble) {
    display: none !important;
}

body:has(.user-agreement-page) .site-main {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: clamp(1rem, 4vw, 3rem);
    background: transparent;
}

body:has(.user-agreement-page) .user-agreement-page {
    box-sizing: border-box;
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid rgba(50, 82, 78, .12);
    border-radius: 18px;
    background: #fff;
    color: #243c3e;
    box-shadow: 0 14px 38px rgba(22, 48, 67, .16), 0 3px 10px rgba(22, 48, 67, .08);
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.user-agreement-page .form-page-header { margin: 0 0 1.25rem; }
.user-agreement-page .form-page-header > p:first-child {
    color: #486668;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.user-agreement-page #agreement-heading {
    margin: .5rem 0 .75rem;
    color: #294e50;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
}
.user-agreement-document { margin-block: 1rem 1.5rem; font-size: .9375rem; }
.user-agreement-document h2,
.user-agreement-text-title { font-size: 1.35rem; font-weight: 800; line-height: 1.4; }
.user-agreement-document h3 {
    margin: 1.25rem 0 .45rem;
    color: #294e50;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.4;
}
.user-agreement-page p { margin: 0 0 .75rem; }
.user-agreement-definitions { padding-left: 1.5rem; margin: .75rem 0 1rem; }
.user-agreement-definitions li { margin-bottom: .5rem; padding-left: .25rem; }
.user-agreement-definitions strong { font-weight: 800; }
.user-agreement-acceptance {
    font-size: 1.125rem;
    border-top: 1px solid #d6e2df;
    padding-top: 1rem;
}
.user-agreement-choice { display: flex; gap: .8rem; align-items: flex-start; margin-block: 0 1rem; }
.user-agreement-choice input {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    margin-top: .75rem;
    accent-color: #96512d;
}
.user-agreement-choice label { min-height: 44px; padding-block: .4rem; cursor: pointer; }
.user-agreement-options { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; margin-top: 1.5rem; }
.user-agreement-options form { display: flex; margin: 0; }
body:has(.user-agreement-page) .user-agreement-page :is(.primary-action, .secondary-action) {
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: .7rem 1.1rem;
    border: 1px solid #96512d;
    border-radius: 11px;
    background: #96512d;
    color: #fff;
    font: inherit;
    font-size: 1.125rem;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(125, 64, 34, .15);
}
body:has(.user-agreement-page) .user-agreement-page .secondary-action {
    border-color: #99b1b5;
    background: #fff;
    color: #294c5a;
    font-weight: 650;
    box-shadow: none;
}
body:has(.user-agreement-page) .user-agreement-page .primary-action:hover { background: #7d4022; border-color: #7d4022; transform: none; }
body:has(.user-agreement-page) .user-agreement-page .secondary-action:hover { background: #f0f5f4; transform: none; }
.user-agreement-page :is(a, button, input):focus-visible { outline: 3px solid #294e50; outline-offset: 3px; }
@media (max-width: 600px) {
    .user-agreement-document { font-size: 1rem; }
    .user-agreement-options { flex-direction: column; }
    .user-agreement-options form,
    .user-agreement-page :is(.primary-action, .secondary-action) { width: 100%; }
}


/* SCRIPT#74047 — Delightful Legal Pages */
body:has(.kefi-legal-page) .kefi-legal-page {
    width: 100%;
    max-width: 960px;
    margin: 1.5rem auto 3rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.kefi-legal-card {
    background: #fff;
    border: 1px solid rgba(50, 82, 78, .12);
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(22, 48, 67, .12);
    padding: clamp(1.4rem, 4vw, 3rem);
    color: #243c3e;
}

.kefi-legal-header {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e0ebe8;
}

.kefi-legal-eyebrow {
    display: inline-block;
    color: #96512d;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.kefi-legal-subtitle {
    margin: .5rem 0 0;
    color: #587274;
    font-size: .95rem;
}

.kefi-legal-document {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.75;
}

.kefi-legal-document h1 {
    color: #294e50;
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 1.25rem;
}

.kefi-legal-document h2 {
    color: #294e50;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 2rem 0 .65rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #e0ebe8;
}

.kefi-legal-document p {
    margin: 0 0 1rem;
}

.kefi-legal-document ul {
    padding-left: 1.5rem;
    margin: .6rem 0 1.3rem;
}

.kefi-legal-document li {
    margin-bottom: .5rem;
    padding-left: .2rem;
}

.kefi-legal-document a {
    color: #96512d;
    font-weight: 750;
    text-underline-offset: 3px;
}

.kefi-legal-document a:hover {
    color: #7d4022;
}

.kefi-legal-document a:focus-visible {
    outline: 3px solid #294e50;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    body:has(.kefi-legal-page) .kefi-legal-page {
        padding: 0 .65rem;
        margin-top: .75rem;
    }
    .kefi-legal-card {
        padding: 1.25rem;
        border-radius: 15px;
    }
    .kefi-legal-document {
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* SCRIPT#74048 — Final legal-page typography refinement */

body:has(.kefi-legal-page) .kefi-legal-card {
    padding: clamp(1.35rem, 3.5vw, 2.5rem);
}

body:has(.kefi-legal-page) .kefi-legal-document {
    max-width: 800px;
    font-size: 0.98rem;
    line-height: 1.68;
}

body:has(.kefi-legal-page) .kefi-legal-document h1 {
    font-size: clamp(2rem, 3.5vw, 2.25rem);
    margin-bottom: 1.15rem;
}

body:has(.kefi-legal-page) .kefi-legal-document h2 {
    font-size: 1.15rem;
    margin-top: 1.75rem;
    margin-bottom: 0.55rem;
}

body:has(.kefi-legal-page) .kefi-legal-document p {
    margin-bottom: 0.9rem;
}

body:has(.kefi-legal-page) .kefi-legal-document ul {
    margin-top: 0.4rem;
    margin-bottom: 1.15rem;
}

@media (max-width: 600px) {
    body:has(.kefi-legal-page) .kefi-legal-card {
        padding: 1.15rem;
    }

    body:has(.kefi-legal-page) .kefi-legal-document {
        font-size: 0.96rem;
        line-height: 1.62;
    }

    body:has(.kefi-legal-page) .kefi-legal-document h1 {
        font-size: 1.85rem;
    }
}


/* SCRIPT#74049 — Reduce wasted whitespace on public legal pages */

body:has(.kefi-legal-page) .kefi-legal-card {
    padding-left: clamp(1.25rem, 2.5vw, 2rem);
    padding-right: clamp(1.25rem, 2.5vw, 2rem);
}

body:has(.kefi-legal-page) .kefi-legal-document {
    max-width: 950px;
}

body:has(.kefi-legal-page) .kefi-legal-document p {
    margin-bottom: 0.72rem;
}

body:has(.kefi-legal-page) .kefi-legal-document h2 {
    margin-top: 1.45rem;
    margin-bottom: 0.45rem;
}

body:has(.kefi-legal-page) .kefi-legal-document ul {
    margin-top: 0.25rem;
    margin-bottom: 0.9rem;
}

@media (max-width: 900px) {
    body:has(.kefi-legal-page) .kefi-legal-document {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    body:has(.kefi-legal-page) .kefi-legal-card {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* SCRIPT#76007 — Delightful Agreements */
.kefi-delightful-agreement {max-width: 780px; margin: 1.5rem auto 3rem; padding: clamp(1.1rem,3vw,2rem); background: #fff; color: #243c3e; border: 1px solid rgba(50,82,78,.12); border-radius: 20px; box-shadow: 0 14px 38px rgba(22,48,67,.12); box-sizing: border-box;}
.kefi-delightful-agreement .form-page-header {margin-bottom: 1.5rem;}
.kefi-delightful-agreement .form-page-header h1 {font-size: clamp(1.65rem,3.5vw,2.3rem); color: #294e50; line-height: 1.2; margin: .4rem 0 .8rem;}
.kefi-delightful-agreement .kefi-agreement-eyebrow {color: #96512d; font-size: .78rem; font-weight: 800; letter-spacing: .1em;}
.kefi-delightful-agreement .agreement-document {padding: clamp(.9rem,2.5vw,1.6rem); border-radius: 14px; background: #f8faf9; border: 1px solid #dce8e4;}
.kefi-delightful-agreement .agreement-text {line-height: 1.7; overflow-wrap: anywhere;}
.kefi-delightful-agreement .agreement-text p {margin: 0 0 1rem;}
.kefi-delightful-agreement .agreement-text h3 {font-size: 1.15rem; color: #294e50; line-height: 1.35; margin: 1.6rem 0 .65rem; font-weight: 800;}
.kefi-delightful-agreement .agreement-text h3:first-child {margin-top: 0;}
.kefi-delightful-agreement .kefi-agreement-acceptance {border-top: 1px solid #d6e2df; padding-top: 1.3rem; margin-top: 1.5rem;}
.kefi-delightful-agreement .agreement-field {display: flex; gap: .8rem; align-items: flex-start;}
.kefi-delightful-agreement .agreement-field input {width: 1.4rem; height: 1.4rem; flex-shrink: 0; accent-color: #96512d;}
.kefi-delightful-agreement .agreement-field label {cursor: pointer;}
.kefi-delightful-agreement .primary-action {min-height: 48px; background: #96512d; color: white; border-radius: 11px; padding: .7rem 1.2rem; font-weight: 750; border: 1px solid #96512d; transform: none;}
.kefi-delightful-agreement .primary-action:hover {background: #7d4022; transform: none;}
.kefi-delightful-agreement :is(button,input):focus-visible {outline: 3px solid #294e50; outline-offset: 3px;}
@media(max-width:600px){.kefi-delightful-agreement {margin: .5rem auto 2rem; border-radius: 14px;} .kefi-delightful-agreement .primary-action {width: 100%;}}


/* Delightful agreement actions — 76024 */
.kefi-agreement-not-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    margin-top: 10px;
    border: 1px solid #9aada6;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: #285a49;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 160ms ease,
                border-color 160ms ease,
                box-shadow 160ms ease;
}

.kefi-agreement-not-now:hover {
    background: #e5f3ec;
    border-color: #287e55;
    color: #195c3e;
    text-decoration: none;
    box-shadow: 0 2px 7px rgba(20, 70, 45, 0.10);
}

.kefi-agreement-not-now:focus-visible {
    outline: 3px solid #338f66;
    outline-offset: 3px;
}

/* Delightful agreement action alignment — 76025 */
.kefi-agreement-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.kefi-agreement-actions .kefi-agreement-not-now {
    margin-top: 0;
}


/* Delightful agreement spacing correction — 76026 */
.kefi-agreement-actions {
    justify-content: flex-start;
    align-items: flex-end;
    column-gap: 12px;
    row-gap: 10px;
}

.kefi-agreement-actions > form {
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
    margin: 0;
}

.kefi-agreement-actions > .kefi-agreement-not-now {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 480px) {
    .kefi-agreement-actions > form {
        width: auto;
    }
}

/* Delightful agreement inline buttons — 76029 */
.kefi-agreement-actions {
    display: block;
}
.kefi-agreement-actions > form {
    display: block;
    width: 100%;
    max-width: 100%;
}
.kefi-agreement-actions .primary-action,
.kefi-agreement-actions .kefi-agreement-not-now {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    margin: 0 12px 0 0;
}
.kefi-agreement-actions .kefi-agreement-not-now {
    min-height: 42px;
}