:root {
    --bg: #ffffff;
    --bg-soft: #f8f9fa;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-strong: #ffffff;
    --surface-muted: #f0f4f2;
    --text: #17322b;
    --text-soft: #607068;
    --text-faint: #8d998d;
    --primary: #145c4b;
    --primary-soft: #dfeee8;
    --accent: #c8a15b;
    --accent-soft: #f4e7c7;
    --border: rgba(20, 92, 75, 0.12);
    --border-strong: rgba(20, 92, 75, 0.18);
    --shadow: 0 22px 55px rgba(37, 54, 43, 0.09);
    --shadow-soft: 0 14px 32px rgba(37, 54, 43, 0.05);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --container: min(1240px, calc(100% - 32px));
    --shell-gutter: 20px;
}

/* Admin SaaS refresh */
.admin-site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    padding: 18px 0 0;
    background: linear-gradient(180deg, rgba(245, 247, 251, 0.96), rgba(245, 247, 251, 0.82));
    backdrop-filter: blur(16px);
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    border: 1px solid rgba(36, 62, 89, 0.08);
    box-shadow: 0 18px 40px rgba(24, 44, 74, 0.08);
}

.admin-topbar__title-group,
.admin-topbar__tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-topbar__title-group {
    flex: 1 1 380px;
    min-width: 0;
}

.admin-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.admin-topbar__mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #2f6fa3, #4d89b9);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(47, 111, 163, 0.22);
}

.admin-topbar__brand-copy {
    display: grid;
    gap: 2px;
}

.admin-topbar__brand-copy strong {
    font-size: 1.02rem;
    color: var(--text);
}

.admin-topbar__brand-copy small {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.admin-topbar__page-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-topbar__page-copy h1 {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.admin-topbar__page-copy .eyebrow {
    margin: 0;
}

.admin-topbar__tools {
    justify-content: flex-end;
}

.admin-lang-switch {
    background: #eef4fb;
    border: 1px solid rgba(47, 111, 163, 0.12);
}

.admin-lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #33536f;
    font-weight: 800;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-lang-switch a:hover,
.admin-lang-switch a:focus-visible {
    background: rgba(47, 111, 163, 0.1);
    color: #214c70;
}

.admin-lang-switch a.is-active {
    background: #2f6fa3;
    color: #fff;
    box-shadow: 0 10px 24px rgba(47, 111, 163, 0.18);
}

.admin-topbar .btn-secondary {
    background: #eef4fb;
    color: #214c70;
    border-color: rgba(47, 111, 163, 0.14);
}

.admin-topbar .btn-secondary:hover,
.admin-topbar .btn-secondary:focus-visible {
    background: #e2edf8;
}

.btn-admin-compact {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 0.88rem;
    border-radius: 14px;
}

.admin-topbar__signal {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    background: #f7fafc;
    border: 1px solid rgba(36, 62, 89, 0.08);
    min-width: 220px;
}

.admin-topbar__signal-icon {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f08c35;
    box-shadow: 0 0 0 6px rgba(240, 140, 53, 0.14);
}

.admin-topbar__signal-copy {
    display: grid;
    gap: 2px;
}

.admin-topbar__signal-copy strong {
    color: var(--text);
    font-size: 0.92rem;
}

.admin-topbar__signal-copy small {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.admin-topbar__user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    border-radius: 16px;
    background: #f7fafc;
    border: 1px solid rgba(36, 62, 89, 0.08);
}

.admin-topbar__user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
}

.admin-topbar__user-copy {
    display: grid;
    gap: 1px;
}

.admin-topbar__user-copy strong {
    font-size: 0.92rem;
}

.admin-topbar__user-copy small {
    color: var(--text-soft);
    font-size: 0.8rem;
}

.admin-page-space {
    padding: 22px 0 48px;
    position: relative;
    z-index: 1;
}

.admin-workspace {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.admin-main-panel {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.admin-side-panel {
    display: grid;
    gap: 18px;
    align-content: start;
    position: sticky;
    top: 108px;
}

.admin-side-card,
.admin-context-bar,
.admin-footer-bar {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(42, 86, 124, 0.08);
    border-radius: 24px;
    box-shadow: 0 18px 34px rgba(38, 55, 71, 0.06);
}

.admin-side-card {
    padding: 18px;
}

.admin-side-card--profile {
    padding: 16px;
}

.admin-side-card__body {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.admin-side-card__body--start {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: start;
    gap: 12px;
}

.admin-side-card__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid rgba(255, 255, 255, 0.98);
    background: #f4f7fb;
}

.admin-side-card__avatar--small {
    width: 58px;
    height: 58px;
    border-width: 3px;
    border-radius: 16px;
}

.admin-side-card__profile-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-side-card__body p,
.admin-side-card--note p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.admin-side-card__section-title {
    margin-bottom: 12px;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-side-nav {
    display: grid;
    gap: 6px;
}

.admin-side-nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
    color: var(--text-soft);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.admin-side-nav a:hover,
.admin-side-nav a:focus-visible {
    background: rgba(47, 111, 163, 0.08);
    color: #214c70;
    transform: translateY(-1px);
}

.admin-side-nav a.is-active {
    background: #214c70;
    color: #fff;
    box-shadow: 0 12px 24px rgba(33, 76, 112, 0.18);
}

.admin-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}

.admin-context-copy {
    display: grid;
    gap: 2px;
}

.admin-context-copy strong {
    font-size: 1rem;
}

.admin-context-copy span:last-child {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.admin-settings-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
}

.admin-split-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.15fr);
}

.admin-editor-form,
.form-card {
    min-width: 0;
}

.admin-error-panel {
    max-width: 760px;
}

.admin-footer {
    padding: 0 0 26px;
}

.admin-footer-bar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
}

.admin-footer-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-footer-links a {
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.9rem;
}

.admin-footer-links a:hover,
.admin-footer-links a:focus-visible {
    color: var(--primary);
}

@media (max-width: 1180px) {
    .admin-workspace {
        grid-template-columns: 1fr;
    }

    .admin-side-panel {
        position: static;
        order: -1;
    }

    .admin-settings-layout,
    .admin-split-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-topbar,
    .admin-topbar__title-group,
    .admin-topbar__tools,
    .admin-context-bar,
    .admin-footer-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-topbar__signal,
    .admin-topbar__user,
    .admin-topbar__tools .btn,
    .admin-topbar__tools form,
    .admin-topbar__tools form button,
    .admin-context-back {
        width: 100%;
    }
}

.ghost-badge-danger {
    background: rgba(141, 47, 47, 0.12);
    color: #8d2f2f;
}

.ghost-badge-warning {
    background: rgba(240, 140, 53, 0.14);
    color: #9c5c12;
}

.profile-block-summary {
    display: grid;
    gap: 10px;
}

.directory-member-card.is-blocked {
    border-color: rgba(141, 47, 47, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 245, 245, 0.98));
}

.directory-member-actions form {
    margin: 0;
}

.directory-member-block-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(141, 47, 47, 0.08);
    color: #7a3f3f;
    font-size: 0.88rem;
    line-height: 1.7;
}

.icon-link-danger {
    border-color: rgba(141, 47, 47, 0.16);
    color: #8d2f2f;
    background: rgba(141, 47, 47, 0.05);
}

.icon-link-danger:hover,
.icon-link-danger:focus-visible {
    background: rgba(141, 47, 47, 0.1);
    color: #7a1f1f;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.chat-block-banner {
    display: grid;
    gap: 8px;
    margin: 0 24px 18px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(141, 47, 47, 0.08);
    border: 1px solid rgba(141, 47, 47, 0.12);
}

.chat-block-banner__copy {
    display: grid;
    gap: 6px;
}

.chat-block-banner__copy strong {
    color: #7a1f1f;
}

.chat-block-banner__copy p {
    margin: 0;
    color: #7a3f3f;
}

.chat-compose-blocked {
    display: grid;
    align-items: center;
}

@media (max-width: 900px) {
    .chat-header-actions {
        width: 100%;
        justify-content: stretch;
    }

    .chat-header-actions > * {
        width: 100%;
    }

    .chat-block-banner {
        margin-inline: 20px;
    }

    .account-blocked-user-item {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .account-blocked-user-item__media {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .account-blocked-user-item__actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .account-blocked-user-item__actions > * {
        flex: 1 1 180px;
    }

    .account-interest-compact-item {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .account-interest-compact-item__media {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .account-interest-compact-item__actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .account-interest-compact-item__actions > * {
        flex: 1 1 180px;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    color: var(--text);
    font-family: "Cairo", "Segoe UI", sans-serif;
    line-height: 1.75;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html[lang="en"] body {
    font-family: "Manrope", "Segoe UI", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.22;
    pointer-events: none;
    z-index: -1;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

svg {
    display: block;
}

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

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 14px 16px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(23, 50, 43, 0.55) 50%),
        linear-gradient(135deg, rgba(23, 50, 43, 0.55) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-inline-end: 42px;
}

html[dir="rtl"] select {
    background-position:
        20px calc(50% - 3px),
        26px calc(50% - 3px);
    padding-inline-start: 42px;
    padding-inline-end: 16px;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(20, 92, 75, 0.38);
    box-shadow: 0 0 0 4px rgba(20, 92, 75, 0.08);
}

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

label {
    display: grid;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.container {
    width: var(--container);
    margin: 0 auto;
}

.page-space {
    padding: 26px 0 72px;
}

.page-shell,
.footer-shell {
    padding-inline: var(--shell-gutter);
}

.page-stack {
    display: grid;
    gap: 28px;
}

.page-stack > * {
    min-width: 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 0;
    background: linear-gradient(180deg, rgba(251, 250, 246, 0.96), rgba(251, 250, 246, 0.84));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(20, 92, 75, 0.08);
}

.nav-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(20, 92, 75, 0.08);
    box-shadow: 0 14px 40px rgba(43, 57, 50, 0.07);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(160deg, #0f4b3d, #1f7662);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
}

.brand-copy {
    display: grid;
    gap: 2px;
}

.brand-copy strong {
    font-size: 1.02rem;
}

.brand-copy small {
    color: var(--text-soft);
    font-size: 0.8rem;
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: var(--text);
    border-radius: 999px;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.nav-toggle span::before {
    top: -6px;
}

.nav-toggle span::after {
    top: 6px;
}

.nav-links,
.nav-actions,
.footer-bar,
.hero-actions,
.actions-inline,
.pills-row,
.conversation-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-links {
    justify-content: center;
}

.nav-links a {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.92rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
    background: rgba(20, 92, 75, 0.08);
    color: var(--text);
    transform: translateY(-1px);
}

.nav-notification-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.nav-notification-badge,
.account-mini-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(215, 77, 112, 0.12);
    color: #d74d70;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-notification-badge.has-count,
.account-mini-badge.has-count {
    opacity: 1;
    transform: scale(1);
}

.nav-actions {
    justify-content: flex-end;
}

.footer-shell {
    padding-bottom: 32px;
}

.footer-bar {
    min-height: 72px;
    padding: 16px 0;
}

.lang-switch {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.06);
}

.lang-switch a {
    min-width: 48px;
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 13px 26px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.96rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease,
                filter 0.25s ease;
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    z-index: 1;
}

.btn::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: inset-inline-start 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

.btn > * {
    position: relative;
    z-index: 3;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(20, 92, 75, 0.22);
    filter: brightness(1.05);
    outline: none;
}

.btn:hover::after,
.btn:focus-visible::after {
    inset-inline-start: 120%;
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(20, 92, 75, 0.18);
    filter: brightness(0.97);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #0f4e3f 0%, #145c4b 45%, #1f8a70 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(20, 92, 75, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    box-shadow: 0 20px 38px rgba(20, 92, 75, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn-secondary {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8f6 100%);
    color: var(--text);
    border: 1px solid rgba(20, 92, 75, 0.16);
    box-shadow: 0 6px 16px rgba(20, 92, 75, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    border-color: rgba(20, 92, 75, 0.28);
    box-shadow: 0 14px 26px rgba(20, 92, 75, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn-accent {
    background: linear-gradient(135deg, #b98a3f 0%, #c8a15b 45%, #e4c584 100%);
    color: #2a1d05;
    box-shadow: 0 10px 24px rgba(176, 130, 58, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-accent:hover,
.btn-accent:focus-visible {
    box-shadow: 0 20px 38px rgba(176, 130, 58, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #7a2424 0%, #a53939 45%, #c95a5a 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(138, 46, 46, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    box-shadow: 0 20px 38px rgba(138, 46, 46, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.btn-block {
    width: 100%;
}

.hero-shell,
.card,
.table-card,
.panel-shell,
.auth-shell,
.chat-shell,
.dashboard-shell {
    background: var(--surface);
    border: 1px solid rgba(20, 92, 75, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.hero-shell {
    position: relative;
    overflow: hidden;
    padding: 34px;
}

.hero-shell::before {
    content: "";
    position: absolute;
    inset: -100px auto auto -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(200, 161, 91, 0.18), transparent 70%);
    pointer-events: none;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.9fr);
    gap: 28px;
    align-items: center;
}

.hero-copy {
    position: relative;
    z-index: 1;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-weight: 800;
    font-size: 0.9rem;
}

.hero h1,
.section-heading h2,
.profile-hero h1,
.chat-header h1,
.dashboard-heading h1,
.auth-copy h1,
.filter-shell h1,
.auth-form-wrap h1 {
    margin: 0;
    line-height: 1.2;
    font-family: "Noto Naskh Arabic", "Cairo", serif;
    letter-spacing: -0.02em;
}

h2,
h3,
h4 {
    line-height: 1.35;
}

html[lang="en"] .hero h1,
html[lang="en"] .section-heading h2,
html[lang="en"] .profile-hero h1,
html[lang="en"] .chat-header h1,
html[lang="en"] .dashboard-heading h1,
html[lang="en"] .auth-copy h1,
html[lang="en"] .filter-shell h1,
html[lang="en"] .auth-form-wrap h1 {
    font-family: "Manrope", "Segoe UI", sans-serif;
    letter-spacing: -0.03em;
}

.hero h1 {
    font-size: clamp(2.2rem, 4vw, 4.25rem);
    max-width: 12ch;
}

html[lang="en"] .hero h1 {
    max-width: 14ch;
}

.lead {
    margin: 18px 0 0;
    font-size: 1.05rem;
    color: var(--text-soft);
    max-width: 62ch;
}

.hero-actions {
    margin-top: 26px;
}

.hero-visual {
    position: relative;
    min-height: 540px;
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(11, 31, 25, 0.2), rgba(11, 31, 25, 0.35)),
        url("https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=1200&q=80") center/cover;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 20, 18, 0.04), rgba(10, 20, 18, 0.46));
}

.hero-overlay-card {
    position: absolute;
    inset-inline: 24px;
    bottom: 24px;
    z-index: 1;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    backdrop-filter: blur(12px);
}

.hero-overlay-card h3,
.profile-card h3,
.conversation-card h3,
.plan-box h3,
.sidebar-card h3,
.benefit-card h3 {
    margin: 0 0 8px;
}

.hero-overlay-card p,
.hero-overlay-card span {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
}

.grid-stats,
.grid-2,
.grid-3,
.grid-4,
.auth-grid,
.pricing-grid,
.stats-grid {
    display: grid;
    gap: 18px;
}

.grid-2,
.auth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4,
.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-gap {
    margin-top: 28px;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 8px;
}

.section-heading p {
    margin: 8px 0 0;
    color: var(--text-soft);
}

.benefit-card,
.stat,
.profile-card,
.conversation-card,
.profile-panel,
.sidebar-card,
.dashboard-stat,
.plan-box,
.legal-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(20, 92, 75, 0.08);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
}

.benefit-card,
.dashboard-stat,
.plan-box,
.legal-card {
    padding: 24px;
}

.benefit-card::before,
.profile-card::before,
.dashboard-stat::before,
.plan-box::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), rgba(20, 92, 75, 0.7));
}

.benefit-icon {
    width: 54px;
    height: 54px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.14), rgba(200, 161, 91, 0.16));
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 800;
}

.benefit-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-card p,
.profile-meta,
.muted,
.conversation-preview,
.plan-box p,
.dashboard-stat span,
.profile-panel p,
.sidebar-card p {
    color: var(--text-soft);
}

.stats-ribbon {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.stat-ribbon-item {
    padding: 18px;
    border-radius: 22px;
    background: rgba(20, 92, 75, 0.05);
    border: 1px solid rgba(20, 92, 75, 0.08);
}

.stat-ribbon-item strong,
.dashboard-stat strong,
.stat strong,
.grid-stats strong {
    display: block;
    font-size: 1.9rem;
    line-height: 1.1;
}

.card,
.table-card,
.profile-panel,
.sidebar-card,
.dashboard-panel {
    padding: 28px;
}

.card > :first-child,
.table-card > :first-child,
.profile-panel > :first-child,
.sidebar-card > :first-child,
.dashboard-panel > :first-child {
    margin-top: 0;
}

.card > :last-child,
.table-card > :last-child,
.profile-panel > :last-child,
.sidebar-card > :last-child,
.dashboard-panel > :last-child {
    margin-bottom: 0;
}

.profile-card {
    padding: 16px;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.profile-card:hover,
.conversation-card:hover,
.plan-box:hover,
.dashboard-stat:hover,
.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(28, 43, 36, 0.11);
    border-color: rgba(20, 92, 75, 0.16);
}

.profile-photo-wrap {
    position: relative;
    aspect-ratio: 0.9;
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(17, 43, 34, 0.08), rgba(17, 43, 34, 0.24)),
        linear-gradient(135deg, #e6efe8, #f5ead5);
}

.profile-photo-wrap img,
.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-photo-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 3rem;
    font-weight: 800;
}

.profile-badge-row {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-inline,
.ghost-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.badge-inline {
    background: rgba(20, 92, 75, 0.12);
    color: var(--primary);
}

.ghost-badge {
    background: rgba(255, 255, 255, 0.85);
    color: var(--text);
}

.profile-card-body {
    padding: 18px 8px 8px;
}

.profile-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-title strong {
    font-size: 1.15rem;
}

.profile-snippet {
    margin: 10px 0 16px;
    color: var(--text-soft);
}

.filter-shell {
    display: grid;
    gap: 18px;
    padding: 26px;
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.filter-header p {
    margin: 6px 0 0;
    color: var(--text-soft);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.filter-grid .filter-actions {
    grid-column: span 6;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-shell {
    padding: 26px;
}

.dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 22px;
}

.dashboard-sidebar,
.dashboard-main {
    display: grid;
    gap: 18px;
}

.account-shell {
    padding: 26px;
}

.account-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
    gap: 22px;
    margin-bottom: 24px;
}

.account-topbar-copy,
.account-profile-card,
.account-alert,
.account-empty-state {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 249, 0.95));
    border: 1px solid rgba(20, 92, 75, 0.08);
    border-radius: 28px;
    box-shadow: 0 22px 40px rgba(27, 45, 38, 0.08);
    padding: 26px;
}

.account-topbar-copy::before,
.account-profile-card::before,
.account-alert::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(212, 173, 83, 0.15), transparent 32%),
        radial-gradient(circle at bottom left, rgba(20, 92, 75, 0.12), transparent 28%);
    pointer-events: none;
}

.account-topbar-copy > *,
.account-profile-card > *,
.account-alert > * {
    position: relative;
    z-index: 1;
}

.account-chip-row,
.account-inline-meta,
.account-menu-list,
.account-feed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.account-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.09);
    color: var(--primary);
    font-weight: 700;
}

.account-profile-card {
    display: grid;
    gap: 18px;
}

.account-user-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-user-head img,
.account-match-row img {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 24px rgba(20, 92, 75, 0.16);
}

.account-user-head strong,
.account-match-row strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.account-user-head span,
.account-profile-meta span,
.account-feed-item p,
.account-match-row p {
    color: var(--text-soft);
}

.account-profile-meta {
    display: grid;
    gap: 8px;
}

.account-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 22px;
}

.account-side-column,
.account-main-column {
    display: grid;
    gap: 18px;
}

.account-menu-list {
    flex-direction: column;
}

.account-menu-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(20, 92, 75, 0.05);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.account-menu-list a:hover {
    transform: translateY(-2px);
    background: rgba(20, 92, 75, 0.1);
    color: var(--primary);
}

.account-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.account-search-card h2,
.account-section-head h2 {
    margin: 6px 0 0;
}

.account-member-grid {
    margin-top: 20px;
}

.account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.account-feed-list {
    flex-direction: column;
    margin-top: 18px;
}

.account-feed-item,
.account-match-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(247, 250, 248, 0.96);
    border: 1px solid rgba(20, 92, 75, 0.08);
}

.account-feed-item {
    display: grid;
}

.account-score {
    margin-inline-start: auto;
    display: inline-grid;
    place-items: center;
    min-width: 64px;
    height: 42px;
    border-radius: 14px;
    background: rgba(20, 92, 75, 0.1);
    color: var(--primary);
    font-weight: 800;
}

.chat-actions-inline {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

.chat-actions-inline form {
    margin: 0;
}

.chat-actions-inline .btn {
    white-space: nowrap;
}

.account-empty-state {
    display: grid;
    place-items: center;
    min-height: 180px;
    text-align: center;
}

.account-subnav {
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, #4d87bb, #3f79ad);
    box-shadow: 0 24px 44px rgba(53, 91, 126, 0.18);
    color: #fff;
}

.account-subnav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
}

.account-premium-pill,
.account-mini-icon,
.account-tab,
.icon-link,
.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.account-premium-pill {
    min-height: 36px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.96);
    color: #d08b49;
    font-weight: 800;
}

.account-mini-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-subnav-copy {
    display: grid;
    gap: 2px;
}

.account-subnav-copy strong {
    font-size: 0.9rem;
}

.account-subnav-copy span {
    font-size: 0.78rem;
    opacity: 0.84;
}

.account-subnav-shortcuts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.account-mini-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 700;
    font-size: 0.84rem;
}

.account-mini-link:hover,
.account-mini-link:focus-visible {
    background: rgba(255, 255, 255, 0.22);
}

.account-mini-icon {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1rem;
    position: relative;
}

.account-mini-icon-bell {
    overflow: visible;
}

.account-mini-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    background: #fff;
    color: #d74d70;
    box-shadow: 0 10px 18px rgba(11, 31, 25, 0.18);
}

.account-tabs-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
}

.account-tab {
    min-height: 52px;
    padding: 10px 12px;
    font-weight: 800;
    font-size: 0.92rem;
    color: #5b6f81;
    border-bottom: 3px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.account-tab:hover,
.account-tab.is-active {
    color: #d74d70;
    border-bottom-color: #d74d70;
    background: rgba(215, 77, 112, 0.04);
}

.account-page-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 22px;
}

.account-sidebar,
.account-page-main {
    display: grid;
    gap: 20px;
    align-content: start;
}

.account-profile-sidebar {
    align-content: start;
}

.admin-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(62, 107, 148, 0.08);
    border-radius: 22px;
    box-shadow: 0 14px 28px rgba(38, 55, 71, 0.05);
}

.admin-context-copy {
    display: grid;
    gap: 4px;
}

.admin-context-copy strong {
    font-size: 1.02rem;
}

.admin-context-copy span:last-child {
    color: var(--text-soft);
    font-size: 0.92rem;
}

.admin-context-back {
    white-space: nowrap;
}

.account-user-card,
.account-summary-card,
.account-promo-bar,
.account-notifications-box,
.account-search-box,
.account-kpi-card,
.directory-member-card,
.account-side-stats,
.account-side-note,
.account-directory-head {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(62, 107, 148, 0.08);
    border-radius: 24px;
    box-shadow: 0 18px 34px rgba(38, 55, 71, 0.06);
}

.account-user-card {
    overflow: hidden;
}

.account-user-card-polished {
    border-radius: 28px;
}

.account-user-card-refined {
    position: sticky;
    top: 118px;
}

.account-user-banner {
    min-height: 116px;
    background:
        radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.28), transparent 18%),
        linear-gradient(180deg, #2570aa, #2a6ca1);
}

.account-user-body {
    margin-top: -44px;
    padding: 0 22px 18px;
    text-align: center;
}

.account-user-avatar-shell {
    width: 102px;
    height: 102px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 28px rgba(45, 76, 105, 0.16);
}

.account-user-avatar-shell-refined {
    width: 118px;
    height: 118px;
    padding: 7px;
}

.account-user-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 0;
    background: linear-gradient(135deg, #eef4f1, #fbf6eb);
}

.account-user-body h3,
.account-user-body strong,
.account-user-body p {
    margin: 8px 0 0;
}

.account-user-body p {
    color: var(--text-soft);
}

.account-user-intro {
    display: grid;
    gap: 4px;
    margin-top: 14px;
}

.account-user-kicker {
    color: #5c7488;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.account-side-links {
    display: grid;
    gap: 8px;
    padding: 0 18px 20px;
}

.account-side-heading {
    color: #5c7488;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 2px 4px 6px;
}

.account-side-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    color: #516779;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.account-side-links a[aria-current="page"] {
    background: rgba(63, 121, 173, 0.1);
    color: #2f5f8d;
}

.account-side-links a:hover {
    background: rgba(63, 121, 173, 0.08);
    color: #2f5f8d;
}

.account-side-link-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(215, 77, 112, 0.12);
    color: #d74d70;
    font-size: 0.77rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.account-side-link-badge.has-count {
    opacity: 1;
    transform: scale(1);
}

.account-side-link-badge-message {
    background: rgba(63, 121, 173, 0.12);
    color: #2f628f;
}

.account-sidebar-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.account-side-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
}

.account-side-stats-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-side-stat {
    padding: 18px 16px;
    text-align: center;
    border-inline-end: 1px solid rgba(63, 121, 173, 0.08);
    border-bottom: 1px solid rgba(63, 121, 173, 0.08);
}

.account-side-stat:nth-child(2n) {
    border-inline-end: 0;
}

.account-side-stat strong {
    display: block;
    font-size: 1.35rem;
}

.account-side-stat span,
.account-side-note p {
    color: var(--text-soft);
}

.account-side-note {
    padding: 20px 22px;
}

.account-side-note-refined h4 {
    margin: 0 0 10px;
}

.account-summary-card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
    padding: 22px 24px;
}

.account-summary-actions {
    display: grid;
    gap: 12px;
    align-content: start;
}

.account-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(63, 121, 173, 0.16);
    background: rgba(63, 121, 173, 0.04);
    color: #2f628f;
    font-weight: 800;
}

.account-summary-copy h1,
.account-directory-head h1 {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.35;
}

.account-summary-copy p,
.account-directory-head p,
.account-promo-bar p {
    margin: 8px 0 0;
    color: var(--text-soft);
}

.account-summary-copy ul {
    margin: 16px 0 0;
    padding-inline-start: 18px;
}

.account-promo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(242, 250, 255, 0.98), rgba(255, 253, 244, 0.98));
}

.account-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.account-kpi-card {
    padding: 22px;
}

.account-kpi-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.55rem;
    color: #284d6f;
}

.account-kpi-card span {
    color: var(--text-soft);
}

.account-kpi-card.is-premium {
    background: linear-gradient(135deg, rgba(255, 235, 203, 0.96), rgba(255, 255, 255, 0.98));
}

.account-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.account-section-title h2 {
    margin: 0;
    font-size: 1.35rem;
}

.account-section-title span,
.account-section-title a {
    color: #d74d70;
    font-weight: 700;
}

.account-notifications-box,
.account-search-box {
    padding: 24px;
}

.account-home-dashboard {
    gap: 24px;
}

.account-dashboard-hero,
.account-dashboard-panel {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(20, 92, 75, 0.08);
    border-radius: 28px;
    box-shadow: var(--shadow-soft);
}

.account-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr);
    gap: 20px;
    padding: 28px;
}

.account-dashboard-hero-copy,
.account-dashboard-status-strip,
.account-dashboard-panel {
    display: grid;
    gap: 18px;
}

.account-dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-weight: 800;
    font-size: 0.88rem;
}

.account-dashboard-hero-copy h1,
.account-dashboard-panel h2 {
    margin: 0;
}

.account-dashboard-hero-copy p {
    margin: 0;
    color: var(--text-soft);
}

.account-dashboard-inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.account-dashboard-inline-actions.is-wrap {
    align-items: stretch;
}

/* FIX: Bottoni dashboard completamente riscritti */
.account-dashboard-inline-actions .btn,
.account-search-submit-group .btn,
.account-dashboard-priority-callout .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    min-width: 110px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    gap: 8px;
}

/* Primary button - verde */
.account-dashboard-inline-actions .btn-primary,
.account-search-submit-group .btn-primary,
.account-dashboard-priority-callout .btn-primary {
    background: linear-gradient(135deg, #145c4b 0%, #1f8a70 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(20, 92, 75, 0.3);
}

.account-dashboard-inline-actions .btn-primary:hover,
.account-search-submit-group .btn-primary:hover,
.account-dashboard-priority-callout .btn-primary:hover {
    background: linear-gradient(135deg, #1a7058 0%, #25a080 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 92, 75, 0.4);
}

/* Secondary button - bianco */
.account-dashboard-inline-actions .btn-secondary,
.account-search-submit-group .btn-secondary,
.account-dashboard-priority-callout .btn-secondary {
    background: #fff;
    color: #145c4b;
    border: 1px solid rgba(20, 92, 75, 0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.account-dashboard-inline-actions .btn-secondary:hover,
.account-search-submit-group .btn-secondary:hover,
.account-dashboard-priority-callout .btn-secondary:hover {
    background: #f5f9f7;
    border-color: rgba(20, 92, 75, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.account-dashboard-inline-link a {
    color: var(--primary);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.account-dashboard-priority-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(20, 92, 75, 0.12);
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.08), rgba(255, 255, 255, 0.98));
}

.account-dashboard-priority-callout strong {
    display: block;
    margin-bottom: 4px;
}

.account-dashboard-priority-callout p {
    margin: 0;
    color: var(--text-soft);
}

.account-dashboard-priority-callout-photo,
.account-dashboard-priority-callout-completion {
    background: linear-gradient(135deg, rgba(200, 161, 91, 0.12), rgba(255, 255, 255, 0.98));
}

.account-dashboard-priority-callout-verification {
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.12), rgba(255, 255, 255, 0.98));
}

.account-dashboard-priority-callout-premium {
    background: linear-gradient(135deg, rgba(38, 116, 176, 0.14), rgba(255, 255, 255, 0.98));
}

.account-dashboard-panel-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account-dashboard-panel-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary);
    background: rgba(20, 92, 75, 0.06);
    border: 1px solid rgba(20, 92, 75, 0.15);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.account-dashboard-panel-links a:hover {
    background: rgba(20, 92, 75, 0.12);
    border-color: rgba(20, 92, 75, 0.25);
    transform: translateY(-1px);
}

.account-dashboard-status-strip {
    align-content: start;
}

.account-dashboard-status-card {
    padding: 20px 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(20, 92, 75, 0.04), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(20, 92, 75, 0.08);
}

.account-dashboard-status-card.is-highlight {
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.12), rgba(255, 255, 255, 0.98));
}

.account-dashboard-status-card span,
.account-dashboard-status-mini span,
.account-dashboard-metric span {
    color: var(--text-soft);
}

.account-dashboard-status-card strong,
.account-dashboard-progress-pill,
.account-dashboard-metric strong,
.account-dashboard-status-mini strong {
    font-size: 1.8rem;
    line-height: 1.1;
}

.account-dashboard-status-card p,
.account-dashboard-status-mini p,
.account-dashboard-suggestion-card p,
.account-dashboard-feed-copy p,
.account-dashboard-thread-copy p {
    margin: 0;
    color: var(--text-soft);
}

.account-dashboard-grid {
    display: grid;
    gap: 22px;
}

.account-dashboard-grid-main {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.account-dashboard-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-dashboard-panel {
    padding: 24px;
}

.account-dashboard-progress-pill {
    min-width: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-size: 1rem;
}

.account-dashboard-progress-bar {
    width: 100%;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
}

.account-dashboard-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--primary));
}

.account-dashboard-checklist,
.account-dashboard-actions-grid,
.account-dashboard-status-grid,
.account-dashboard-activity-grid,
.account-dashboard-suggestion-list {
    display: grid;
    gap: 14px;
}

.account-dashboard-check-item,
.account-dashboard-action,
.account-dashboard-suggestion-card,
.account-dashboard-status-mini,
.account-dashboard-metric,
.account-dashboard-feed-card,
.account-dashboard-thread-card {
    border-radius: 22px;
    border: 1px solid rgba(20, 92, 75, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(28, 43, 36, 0.04);
}

.account-dashboard-check-item,
.account-dashboard-action,
.account-dashboard-feed-card,
.account-dashboard-thread-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.account-dashboard-check-item:hover,
.account-dashboard-action:hover,
.account-dashboard-feed-card:hover,
.account-dashboard-thread-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(28, 43, 36, 0.08);
    border-color: rgba(20, 92, 75, 0.16);
}

.account-dashboard-check-item {
    display: flex;
    align-items: start;
    gap: 14px;
    padding: 16px 18px;
}

.account-dashboard-check-item.is-done {
    background: rgba(20, 92, 75, 0.05);
}

.account-dashboard-check-item.is-missing {
    background: rgba(200, 161, 91, 0.08);
}

.account-dashboard-check-item strong,
.account-dashboard-action strong,
.account-dashboard-feed-copy strong,
.account-dashboard-thread-copy strong,
.account-dashboard-suggestion-card strong {
    display: block;
}

.account-dashboard-check-item small,
.account-dashboard-thread-copy span,
.account-dashboard-feed-copy small {
    color: var(--text-soft);
}

.account-dashboard-check-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.account-dashboard-check-state,
.account-dashboard-feed-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.account-dashboard-check-state {
    margin-inline-start: auto;
}

.account-dashboard-feed-state.is-unread {
    background: rgba(200, 161, 91, 0.16);
    color: #87622f;
}

.account-dashboard-check-icon,
.account-dashboard-feed-icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-weight: 800;
}

/* FIX: Icona del quick action più compatta */
.account-dashboard-action-icon {
    width: 38px;
    height: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.12) 0%, rgba(20, 92, 75, 0.05) 100%);
    color: var(--primary);
    font-size: 1.2rem;
}

.account-dashboard-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-dashboard-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
}

.account-dashboard-action strong {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
}

.account-dashboard-status-grid,
.account-dashboard-activity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-dashboard-status-mini,
.account-dashboard-metric,
.account-dashboard-suggestion-card {
    padding: 18px;
}

.account-dashboard-status-mini-success {
    background: rgba(20, 92, 75, 0.06);
}

.account-dashboard-status-mini-warning {
    background: rgba(200, 161, 91, 0.1);
}

.account-dashboard-feed-card,
.account-dashboard-thread-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px 18px;
    align-items: center;
}

.account-dashboard-feed-card.is-unread,
.account-dashboard-thread-card.is-unread {
    border-color: rgba(20, 92, 75, 0.18);
    box-shadow: 0 18px 34px rgba(20, 92, 75, 0.08);
}

.account-dashboard-feed-copy,
.account-dashboard-thread-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.account-dashboard-feed-meta,
.account-dashboard-thread-meta {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.account-dashboard-feed-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-weight: 800;
}

.account-dashboard-thread-card img {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    object-fit: cover;
}

.account-dashboard-search-panel .account-search-grid {
    margin-top: 6px;
}

.account-dashboard-search-note {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(20, 92, 75, 0.06);
    color: var(--text-soft);
    border: 1px solid rgba(20, 92, 75, 0.08);
}

.account-search-submit-group {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.account-search-submit-group .btn {
    flex: 1 1 auto;
    min-width: 120px;
}

.dashboard-members-grid {
    margin-top: 8px;
}

.account-form-stack {
    display: grid;
    gap: 20px;
}

.account-form-stack .card,
.auth-form-wrap .card {
    box-shadow: none;
    background: rgba(248, 251, 249, 0.95);
}

.account-form-card {
    padding: 24px;
}

.profile-edit-stack {
    gap: 22px;
}

.profile-page-shell {
    align-items: start;
}

.profile-page-head {
    align-items: center;
}

.profile-page-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.profile-edit-hero {
    display: grid;
    gap: 22px;
}

.profile-edit-photo-panel {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.profile-edit-photo-panel-refined {
    align-items: stretch;
    padding: 4px 0;
}

.profile-edit-photo-column {
    display: grid;
    gap: 14px;
    align-content: start;
    justify-items: center;
}

.profile-edit-photo-frame {
    width: 210px;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #eef4f1, #fbf6eb);
    border: 1px solid rgba(20, 92, 75, 0.08);
    box-shadow: 0 18px 28px rgba(34, 53, 45, 0.08);
}

.profile-edit-photo-frame-refined {
    width: min(100%, 230px);
    border-radius: 32px;
}

.profile-edit-photo-frame a,
.profile-edit-photo-frame img,
.profile-edit-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-edit-photo-copy {
    display: grid;
    gap: 12px;
}

.profile-edit-photo-copy h2,
.profile-edit-photo-copy p {
    margin: 0;
}

.profile-edit-photo-caption {
    display: grid;
    gap: 6px;
    text-align: center;
}

.profile-edit-photo-caption span {
    color: var(--text-soft);
}

.profile-upload-field {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.profile-upload-field input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(20, 92, 75, 0.14);
    background: rgba(255, 255, 255, 0.98);
    color: var(--text);
    line-height: 1.35;
}

.profile-upload-field input[type="file"]::file-selector-button {
    margin-inline-end: 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #145c4b, #1d7c67);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.profile-upload-field input[type="file"]::file-selector-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(20, 92, 75, 0.14);
}

.profile-upload-field input[type="file"]:focus-visible {
    outline: 2px solid rgba(47, 98, 143, 0.28);
    outline-offset: 2px;
}

.profile-upload-surface {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(20, 92, 75, 0.04), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(20, 92, 75, 0.08);
}

.profile-upload-hint {
    color: var(--text-soft);
    font-size: 0.94rem;
}

.profile-edit-quickfacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.profile-edit-quickfacts-refined .key-fact {
    min-height: 86px;
    align-items: flex-start;
    flex-direction: column;
}

.profile-edit-quickfacts-refined .key-fact strong {
    font-size: 1rem;
}

.profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.profile-section-head h2 {
    margin: 0 0 6px;
}

.profile-section-head p {
    color: var(--text-soft);
}

.profile-edit-section-card {
    overflow: hidden;
}

.profile-edit-actions {
    margin-top: 6px;
}

.account-form-card h2 {
    margin: 0 0 16px;
    font-size: 1.25rem;
}

.account-form-card > p {
    margin: -6px 0 18px;
    color: var(--text-soft);
}

.account-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-field-grid .span-2 {
    grid-column: span 2;
}

.account-field-note {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(63, 121, 173, 0.05);
    border: 1px solid rgba(63, 121, 173, 0.08);
    color: var(--text-soft);
}

.account-inline-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.account-inline-actions > * {
    flex: 0 0 auto;
}

.account-notification-row {
    padding: 14px 0;
    border-top: 1px solid rgba(63, 121, 173, 0.08);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.account-notification-row:first-of-type {
    border-top: 0;
}

.account-notification-unread {
    background: linear-gradient(90deg, rgba(20, 92, 75, 0.04), rgba(63, 121, 173, 0.02));
    border-radius: 18px;
    padding-inline: 16px;
}

.account-notification-row strong {
    display: block;
    margin-bottom: 6px;
}

.account-notification-copy {
    flex: 1;
    min-width: 0;
}

.account-notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.account-notification-meta span {
    color: var(--text-soft);
    font-size: 0.84rem;
    white-space: nowrap;
}

.account-notification-row p,
.account-empty-box {
    color: var(--text-soft);
}

.account-empty-box {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.account-empty-box strong {
    color: var(--text);
    font-size: 1rem;
}

.notifications-head {
    align-items: start;
}

.notifications-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.notifications-total-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.08), rgba(63, 121, 173, 0.08));
    color: #2f5f8d;
    font-weight: 800;
}

.notifications-total-pill strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    color: #d74d70;
    box-shadow: var(--shadow-soft);
}

.notifications-stack {
    display: grid;
    gap: 16px;
}

.notification-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(20, 92, 75, 0.08);
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.notification-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(37, 54, 43, 0.08);
    border-color: rgba(20, 92, 75, 0.14);
}

.notification-card.is-unread {
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.05), rgba(63, 121, 173, 0.03) 45%, rgba(255, 255, 255, 0.96));
}

.notification-card-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    font-size: 1.5rem;
    font-weight: 900;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
}

.notification-card-icon-message {
    background: rgba(63, 121, 173, 0.12);
    color: #2f5f8d;
}

.notification-card-icon-match {
    background: rgba(200, 161, 91, 0.18);
    color: #9f7434;
}

.notification-card-icon-like {
    background: rgba(215, 77, 112, 0.12);
    color: #d74d70;
}

.notification-card-icon-profile_visit {
    background: rgba(63, 121, 173, 0.12);
    color: #2f5f8d;
}

.notification-card-icon-verification_approved {
    background: rgba(20, 92, 75, 0.12);
    color: var(--primary);
}

.notification-card-icon-verification_rejected {
    background: rgba(191, 77, 77, 0.12);
    color: #b54848;
}

.notification-card-main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.notification-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.notification-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.notification-status-chip.is-unread {
    background: rgba(215, 77, 112, 0.1);
    color: #d74d70;
}

.notification-status-chip.is-read {
    background: rgba(20, 92, 75, 0.08);
    color: #2f628f;
}

.notification-time {
    color: var(--text-soft);
    font-size: 0.86rem;
}

.notification-card h2 {
    margin: 0;
    font-size: 1.08rem;
}

.notification-card-link {
    display: inline-flex;
    color: inherit;
}

.notification-card-link:hover h2,
.notification-card-link:focus-visible h2 {
    color: #2f628f;
}

.notification-card p {
    margin: 0;
    color: var(--text-soft);
}

.notification-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.notification-action-form {
    margin: 0;
}

.notification-card-actions .btn-success {
    background: linear-gradient(135deg, #1c8c66, #145c4b);
    color: #fff;
    border-color: transparent;
}

.account-interest-received-card {
    margin-bottom: 22px;
}

.account-interest-grid {
    display: grid;
    gap: 14px;
}

.account-interest-item {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.04), rgba(63, 121, 173, 0.03));
}

.account-interest-copy {
    display: grid;
    gap: 6px;
}

.account-interest-copy strong {
    color: var(--primary);
    font-size: 1rem;
}

.account-interest-copy p {
    margin: 0;
    color: var(--text-soft);
}

.account-interest-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account-blocked-users-grid {
    gap: 12px;
}

.account-blocked-user-item {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(141, 47, 47, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 244, 0.98));
}

.account-blocked-user-item__media {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(62, 107, 148, 0.12);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(38, 55, 71, 0.08);
}

.account-blocked-user-item__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.account-blocked-user-item__body {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.account-blocked-user-item__identity {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.account-blocked-user-item__name {
    display: block;
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.account-blocked-user-item__city {
    color: var(--text-soft);
    font-size: 0.92rem;
}

.account-blocked-user-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--text-soft);
    font-size: 0.86rem;
}

.account-blocked-user-item__meta strong {
    color: var(--text);
    font-weight: 700;
}

.account-blocked-user-item__actions {
    justify-content: flex-end;
    align-self: center;
}

.account-blocked-user-item__actions form {
    margin: 0;
}

.account-interest-compact-grid {
    gap: 12px;
}

.account-interest-compact-item {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

.account-interest-compact-item__media {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(62, 107, 148, 0.12);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(38, 55, 71, 0.08);
}

.account-interest-compact-item__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.account-interest-compact-item__body {
    min-width: 0;
    gap: 8px;
}

.account-interest-compact-item__identity {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.account-interest-compact-item__name {
    display: block;
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.account-interest-compact-item__city {
    color: var(--text-soft);
    font-size: 0.92rem;
}

.account-interest-compact-item__message {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.account-interest-compact-item__actions {
    justify-content: flex-end;
    align-self: center;
}

.account-interest-compact-item__actions form {
    margin: 0;
}

.site-header.site-header-auth {
    padding: 6px 0 0;
    background: linear-gradient(180deg, rgba(251, 250, 246, 0.94), rgba(251, 250, 246, 0.76));
}

.site-header.site-header-auth .auth-header-shell {
    display: grid;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #4d87bb, #3f79ad);
    border-color: rgba(38, 79, 116, 0.2);
    box-shadow: 0 18px 34px rgba(34, 63, 90, 0.16);
}

.auth-header-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.auth-header-links {
    justify-content: center;
}

.auth-header-actions {
    justify-content: flex-end;
}

.site-header.site-header-auth .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(12, 58, 48, 0.9);
}

.site-header.site-header-auth .brand-copy strong,
.site-header.site-header-auth .brand-copy small,
.site-header.site-header-auth .nav-links a {
    color: #fff;
}

.site-header.site-header-auth .brand-copy {
    gap: 0;
}

.site-header.site-header-auth .brand-copy small {
    opacity: 0.82;
    font-size: 0.74rem;
}

.site-header.site-header-auth .nav-links {
    gap: 8px;
}

.site-header.site-header-auth .nav-links a {
    padding: 7px 11px;
    font-size: 0.88rem;
}

.site-header.site-header-auth .nav-links a:hover,
.site-header.site-header-auth .nav-links a.is-active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.site-header.site-header-auth .nav-actions {
    gap: 8px;
}

.site-header.site-header-auth .nav-actions .btn,
.site-header.site-header-auth .nav-actions button,
.site-header.site-header-auth .lang-switch,
.site-header.site-header-auth .lang-switch a {
    min-height: 40px;
}

.site-header.site-header-auth .lang-switch {
    padding: 5px;
    background: rgba(10, 46, 72, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.site-header.site-header-auth .lang-switch a {
    min-width: 50px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
}

.site-header.site-header-auth .lang-switch a.is-active {
    background: #fff;
    color: #2f628f;
    border-color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 20px rgba(18, 53, 80, 0.18);
}

.site-header.site-header-auth .lang-switch a:not(.is-active):hover,
.site-header.site-header-auth .lang-switch a:not(.is-active):focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.24);
}

.site-header.site-header-auth .nav-toggle {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
}

.site-header.site-header-auth .nav-toggle span,
.site-header.site-header-auth .nav-toggle span::before,
.site-header.site-header-auth .nav-toggle span::after {
    background: #fff;
}

.account-subnav {
    border-radius: 24px;
    box-shadow: 0 20px 34px rgba(53, 91, 126, 0.14);
}

.account-subnav-top {
    padding: 8px 16px;
}

.account-premium-pill {
    min-height: 34px;
    padding: 6px 14px;
    font-size: 0.88rem;
}

.account-mini-icon {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
}

.account-tabs-nav {
    background: rgba(255, 255, 255, 0.95);
}

.account-tab {
    min-height: 46px;
    padding: 8px 10px;
    font-size: 0.88rem;
}

.site-header.site-header-auth .account-tabs-nav {
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.site-header.site-header-auth .account-tab {
    color: rgba(255, 255, 255, 0.88);
    border-bottom-color: transparent;
}

.site-header.site-header-auth .account-tab:hover,
.site-header.site-header-auth .account-tab.is-active {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.94);
    background: rgba(255, 255, 255, 0.12);
}

.profile-visits-panel {
    gap: 18px;
}

.profile-visit-grid {
    display: grid;
    gap: 14px;
}

.profile-visit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "identity actions"
        "meta actions";
    gap: 12px 18px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(20, 92, 75, 0.08);
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.03), rgba(63, 121, 173, 0.04));
    box-shadow: 0 12px 26px rgba(38, 55, 71, 0.05);
}

.profile-visit-card__identity {
    grid-area: identity;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.profile-visit-card__identity img {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    object-fit: cover;
    background: rgba(20, 92, 75, 0.08);
}

.profile-visit-card__copy,
.profile-visit-card__meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.profile-visit-card__name {
    display: inline-block;
    color: var(--text);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.profile-visit-card__name:hover,
.profile-visit-card__name:focus-visible {
    color: var(--primary);
}

.profile-visit-card__city,
.profile-visit-card__meta span {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.profile-visit-card__meta {
    grid-area: meta;
    align-content: start;
}

.profile-visit-card__meta strong {
    color: var(--primary);
    font-size: 0.96rem;
}

.profile-visit-card__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-content: center;
    min-width: 150px;
}

.profile-visit-card__actions .btn {
    width: 100%;
}

.admin-settings-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-settings-panel {
    gap: 14px;
}

.account-section-title.compact {
    margin-bottom: 0;
}

.admin-settings-runtime {
    display: grid;
    gap: 14px;
}

.admin-runtime-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.runtime-stat {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(20, 92, 75, 0.08);
    background: rgba(20, 92, 75, 0.04);
}

.runtime-stat strong {
    display: block;
    margin-bottom: 6px;
}

.premium-payment-summary {
    margin-top: 18px;
}

.premium-payment-summary p {
    margin: 0;
}

.editor-shell {
    display: grid;
    gap: 0;
    border: 1px solid rgba(20, 92, 75, 0.12);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: rgba(20, 92, 75, 0.04);
    border-bottom: 1px solid rgba(20, 92, 75, 0.1);
}

.editor-toolbar--advanced {
    gap: 6px;
}

.editor-tool-select {
    min-width: 120px;
}

.editor-tool-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.editor-tool-color input {
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
}

.editor-tool {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(20, 92, 75, 0.12);
    background: #fff;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.editor-tool:hover,
.editor-tool:focus-visible {
    border-color: rgba(47, 98, 143, 0.35);
    box-shadow: 0 8px 18px rgba(47, 98, 143, 0.1);
    transform: translateY(-1px);
}

.editor-surface {
    min-height: 320px;
    padding: 18px 20px;
    outline: none;
    line-height: 1.8;
}

.editor-surface--advanced {
    min-height: 260px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,251,0.98));
}

.editor-source {
    min-height: 260px;
    padding: 18px 20px;
    border: 0;
    outline: none;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    direction: ltr;
}

.editor-help {
    margin: 0;
    padding: 0.75rem 1rem;
    color: var(--text-soft);
    background: rgba(20, 92, 75, 0.035);
    font-size: 0.86rem;
}

.admin-rich-editor--ckeditor {
    overflow: visible;
}

.admin-rich-editor--ckeditor textarea {
    min-height: 240px;
}

.admin-rich-editor--ckeditor .ckeditor-fallback {
    display: block;
    width: 100%;
    padding: 18px 20px;
    border: 1px solid rgba(20, 92, 75, 0.14);
    border-radius: 18px;
    background: #fff;
    line-height: 1.8;
    resize: vertical;
}

.admin-rich-editor--ckeditor .ck.ck-editor {
    width: 100%;
}

.admin-rich-editor--ckeditor .ck.ck-editor__main > .ck-editor__editable {
    min-height: 340px;
    padding: 1.25rem 1.4rem;
    border-color: rgba(20, 92, 75, 0.14);
    border-radius: 0 0 18px 18px;
    color: var(--text);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,251,0.98));
    line-height: 1.9;
}

.admin-rich-editor--ckeditor .ck.ck-editor__editable_inline[dir="rtl"] {
    text-align: right;
    font-family: "Cairo", "Noto Naskh Arabic", sans-serif;
}

.admin-rich-editor--ckeditor .ck.ck-toolbar {
    border-color: rgba(20, 92, 75, 0.14);
    border-radius: 18px 18px 0 0;
    background: #fbfcfb;
}

.admin-rich-editor--ckeditor .ck.ck-button,
.admin-rich-editor--ckeditor .ck.ck-dropdown__button {
    border-radius: 10px;
}

.editor-tool.is-active {
    color: #fff;
    background: var(--color-primary, #145c4b);
}

.editor-surface:empty::before {
    content: attr(data-placeholder);
    color: rgba(84, 108, 103, 0.6);
}

.editor-surface h2,
.editor-surface h3,
.editor-surface p,
.editor-surface blockquote,
.editor-surface ul,
.editor-surface ol {
    margin: 0 0 14px;
}

.editor-surface blockquote {
    padding-inline-start: 14px;
    border-inline-start: 4px solid rgba(47, 98, 143, 0.32);
    color: var(--text-soft);
}

.editor-surface img,
.rich-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    margin-block: 1rem;
}

.rich-content figure {
    margin: 1.4rem 0;
}

.rich-content figure.image {
    text-align: center;
}

.rich-content figure.image img {
    margin-inline: auto;
}

.rich-content figcaption {
    margin-top: 0.55rem;
    color: var(--text-soft);
    font-size: 0.9rem;
    text-align: center;
}

.rich-content .table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.editor-surface table,
.rich-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1rem;
    overflow: hidden;
    border-radius: 14px;
}

.editor-surface :is(th, td),
.rich-content :is(th, td) {
    padding: 0.75rem;
    border: 1px solid rgba(20, 92, 75, 0.14);
    vertical-align: top;
}

.editor-surface th,
.rich-content th {
    background: rgba(20, 92, 75, 0.08);
    font-weight: 800;
}

.cms-embed,
.rich-content .cms-embed {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-block: 1rem;
    background: #0f2e28;
    aspect-ratio: 16 / 9;
}

.cms-embed iframe,
.rich-content .cms-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.rich-content figure.media,
.rich-content oembed {
    display: block;
    overflow: hidden;
    border-radius: 20px;
    margin-block: 1.2rem;
    background: rgba(20, 92, 75, 0.06);
    aspect-ratio: 16 / 9;
}

.form-label {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-weight: 800;
    color: var(--text);
}

.admin-editor-form .btn-primary {
    align-self: flex-start;
}

.notifications-bulk-btn,
.notification-open-btn {
    min-height: 42px;
}

.notifications-empty-box {
    padding: 40px 28px;
}

.account-empty-box {
    padding: 32px 20px;
    text-align: center;
}

.account-empty-panel {
    width: 100%;
    justify-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(62, 107, 148, 0.1);
    border-radius: 20px;
    box-shadow: 0 12px 26px rgba(36, 56, 74, 0.06);
    padding: 30px 20px;
    gap: 12px;
}

.account-empty-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(20, 92, 75, 0.08);
    font-size: 1.05rem;
}

.account-empty-panel > p {
    margin: 0;
    max-width: 62ch;
    line-height: 1.5;
}

.account-empty-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.account-search-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 1.5fr;
    gap: 18px;
    align-items: end;
}

.account-search-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text);
}

.account-search-grid select,
.account-search-grid input[type="number"] {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(20, 92, 75, 0.2);
    background: #fff;
}

.account-search-grid select:focus,
.account-search-grid input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 92, 75, 0.1);
}

.account-search-submit {
    display: flex;
    align-items: end;
}

/* /members: keep filter controls readable and aligned in LTR/RTL */
.members-filters-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: end;
}

.members-filters-grid label {
    min-width: 0;
}

.members-filters-grid select,
.members-filters-grid input,
.members-filters-actions .btn {
    min-width: 170px;
}

.members-filters-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.members-filters-actions .btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .members-filters-grid {
        grid-template-columns: 1fr;
    }

    .members-filters-actions {
        justify-content: stretch;
    }

    .members-filters-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ============================================================================
   Compact member directory cards (Mawada-style)
   Synthetic info only: avatar + name + age + country + marital + online + actions
   Full profile details live on /members/{id} — NOT on these cards.
   ========================================================================== */

.directory-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.directory-member-card {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.directory-member-head,
.directory-member-meta,
.directory-member-row,
.directory-member-actions,
.directory-member-title {
    display: flex;
    align-items: center;
}

.directory-member-head {
    gap: 12px;
    justify-content: flex-start;
}

.directory-member-head img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    border: 2px solid rgba(63, 121, 173, 0.08);
    background: rgba(63, 121, 173, 0.04);
}

.directory-member-identity {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.directory-member-identity > span {
    color: var(--text-soft);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-member-title {
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.directory-member-title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.98rem;
}

/* Flag in member cards — rendered by flag-icons (SVG background).
   Fixed size ensures it appears on every OS (Windows, macOS, Linux, Android).
   The `.fi` base class from flag-icons sets `background-size: contain` and
   inline-block display; here we normalise to a pill shape used next to the
   member name. */
.directory-flag {
    display: inline-block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    vertical-align: middle;
}

.directory-member-meta {
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.directory-member-location {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.directory-member-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(63, 121, 173, 0.08);
    color: #3f79ad;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.directory-member-row {
    justify-content: space-between;
    font-size: 0.82rem;
    padding-top: 10px;
    border-top: 1px solid rgba(63, 121, 173, 0.08);
}

.directory-member-score {
    font-weight: 800;
    color: #3f79ad;
}

.directory-member-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.directory-member-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.status-online { color: #2e9a6f; }
.status-offline { color: #9aa6b2; }

.directory-member-actions {
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 4px;
}

.directory-member-actions .icon-action,
.directory-member-actions .icon-link {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 0.82rem;
}

/* Heart / interest toggle in member cards.
   Follows the universal convention:
     – NOT liked  → soft grey outlined heart (visually "empty")
     – LIKED      → filled red/pink heart on light pink bg (visually "full")
   The generic `.icon-action.is-primary` (blue gradient) and `.icon-action.is-active`
   (pale green) rules from elsewhere are intentionally overridden here so the
   like button is semantically readable without the toast message. */
.directory-member-actions form[data-action-kind="like"] > .icon-action.is-primary {
    background: rgba(120, 130, 140, 0.08);
    color: #94a3b8;
    border-color: rgba(120, 130, 140, 0.18);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.directory-member-actions form[data-action-kind="like"] > .icon-action.is-primary:hover {
    background: rgba(225, 29, 72, 0.08);
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.22);
    transform: translateY(-1px);
}

.directory-member-actions form[data-action-kind="like"] > .icon-action.is-primary.is-active {
    background: rgba(225, 29, 72, 0.14);
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.35);
}

.directory-member-actions form[data-action-kind="like"] > .icon-action.is-primary.is-active:hover {
    background: rgba(225, 29, 72, 0.22);
    color: #be123c;
    border-color: rgba(225, 29, 72, 0.55);
}

@media (max-width: 420px) {
    .directory-members-grid { grid-template-columns: 1fr; gap: 12px; }
    .directory-member-head img { width: 56px; height: 56px; }
    .directory-member-title strong { font-size: 0.92rem; }
}

.icon-action,
.icon-link {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(63, 121, 173, 0.12);
    background: rgba(63, 121, 173, 0.05);
    color: #557188;
    font-weight: 800;
}

.icon-action.is-primary {
    background: linear-gradient(135deg, #2674b0, #2f87cc);
    color: #fff;
}

.account-directory-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
}

.account-directory-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(215, 77, 112, 0.08);
    color: #d74d70;
    font-weight: 800;
}

.sidebar-card ul,
.card ul {
    margin: 0;
    padding-inline-start: 18px;
}

.sidebar-card li {
    color: var(--text-soft);
    margin-bottom: 10px;
}

.dashboard-stat {
    padding: 22px;
}

.dashboard-stat .icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    margin-bottom: 12px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-weight: 800;
}

.chat-shell {
    overflow: hidden;
}

.chat-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 720px;
}

.chat-sidebar {
    padding: 24px;
    border-inline-end: 1px solid rgba(20, 92, 75, 0.08);
    background: linear-gradient(180deg, rgba(244, 239, 227, 0.8), rgba(255, 255, 255, 0.8));
}

.chat-main {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 0;
}

.chat-header {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(20, 92, 75, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.chat-header p,
.chat-sidebar p {
    margin: 0;
    color: var(--text-soft);
}

.chat-user-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.chat-user-link:hover,
.chat-user-link:focus-visible {
    color: var(--primary);
    border-bottom-color: rgba(20, 92, 75, 0.28);
    opacity: 0.95;
}

.chat-user-link strong {
    display: inline;
}

.online-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-weight: 700;
}

.online-state::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.message-list {
    display: grid;
    gap: 16px;
    padding: 26px 28px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
        radial-gradient(circle at top right, rgba(20, 92, 75, 0.06), transparent 30%);
    overflow: auto;
    min-height: 0;
}

.message-item {
    max-width: min(72%, 520px);
    padding: 16px 18px;
    border-radius: 22px 22px 8px 22px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(38, 49, 44, 0.06);
    border: 1px solid rgba(20, 92, 75, 0.06);
}

.message-item.mine {
    margin-inline-start: auto;
    border-radius: 22px 22px 22px 8px;
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.12), rgba(200, 161, 91, 0.12));
}

.message-item strong,
.message-item p,
.message-item small {
    display: block;
}

.message-item p {
    margin: 6px 0;
    color: var(--text);
}

.message-item small {
    color: var(--text-faint);
}

.chat-image {
    width: 100%;
    max-width: 280px;
    border-radius: 18px;
    margin-top: 10px;
    display: block;
}

.chat-compose {
    padding: 20px 24px 24px;
    border-top: 1px solid rgba(20, 92, 75, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.compose-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px auto;
    gap: 12px;
    align-items: end;
}

.compose-grid textarea {
    min-height: 66px;
}

.conversation-list {
    display: grid;
    gap: 14px;
}

.conversation-card {
    padding: 18px;
}

.conversation-card.active {
    border-color: rgba(20, 92, 75, 0.2);
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.05), rgba(200, 161, 91, 0.06));
}

/* ============================================================
   Messenger-style chat (chat.show)
   ============================================================ */
.chat-shell--messenger {
    padding: 0;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(20, 49, 41, 0.08);
    border: 1px solid rgba(20, 92, 75, 0.08);
}

.chat-messenger {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 72vh;
    max-height: 82vh;
    background:
        linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
}

.chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    background: #ffffff;
    border-bottom: 1px solid rgba(20, 92, 75, 0.08);
}

.chat-topbar__identity {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.chat-topbar__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-topbar__meta strong {
    font-size: 1rem;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-topbar__meta .online-state {
    padding: 0;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-soft);
    gap: 6px;
}

.chat-topbar__meta .online-state::before {
    width: 7px;
    height: 7px;
    background: #9ca3af;
}

.chat-topbar__actions {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

.chat-topbar__actions form {
    margin: 0;
}

.chat-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.12), rgba(200, 161, 91, 0.14));
    overflow: hidden;
    flex-shrink: 0;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.chat-avatar--sm {
    width: 32px;
    height: 32px;
}

.chat-avatar--lg {
    width: 44px;
    height: 44px;
    box-shadow: 0 4px 12px rgba(20, 49, 41, 0.1);
}

.chat-avatar__status {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #9ca3af;
    border: 2px solid #ffffff;
}

.chat-avatar__status.is-online {
    background: #22c55e;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 20px 14px;
    overflow-y: auto;
    scroll-behavior: smooth;
    background:
        radial-gradient(circle at top right, rgba(20, 92, 75, 0.05), transparent 45%),
        radial-gradient(circle at bottom left, rgba(200, 161, 91, 0.06), transparent 40%);
}

.chat-thread::-webkit-scrollbar {
    width: 8px;
}

.chat-thread::-webkit-scrollbar-thumb {
    background: rgba(20, 92, 75, 0.18);
    border-radius: 999px;
}

.chat-empty {
    margin: auto;
    padding: 32px 20px;
    text-align: center;
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    border: 1px dashed rgba(20, 92, 75, 0.18);
    max-width: 420px;
}

.chat-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-block: 4px;
}

.chat-row + .chat-row {
    margin-top: 2px;
}

.chat-row--mine {
    flex-direction: row-reverse;
}

.chat-bubble-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: min(68%, 520px);
    min-width: 0;
}

.chat-row--mine .chat-bubble-group {
    align-items: flex-end;
}

.chat-bubble {
    position: relative;
    padding: 10px 14px;
    background: #ffffff;
    color: var(--text);
    border: 1px solid rgba(20, 92, 75, 0.08);
    border-radius: 20px 20px 20px 6px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    box-shadow: 0 4px 12px rgba(38, 49, 44, 0.05);
    font-size: 0.95rem;
    max-width: 100%;
}

.chat-row--mine .chat-bubble {
    background: linear-gradient(135deg, #145c4b, #1e7a63);
    color: #ffffff;
    border-color: transparent;
    border-radius: 20px 20px 6px 20px;
    box-shadow: 0 6px 16px rgba(20, 92, 75, 0.22);
}

.chat-bubble--image {
    padding: 0;
    overflow: hidden;
    display: block;
    line-height: 0;
    background: transparent;
    border: 1px solid rgba(20, 92, 75, 0.1);
}

.chat-bubble--image img {
    display: block;
    max-width: 280px;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.chat-row--mine .chat-bubble--image {
    background: transparent;
}

.chat-reactions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.chat-reactions .reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(20, 92, 75, 0.12);
    font-size: 0.78rem;
    box-shadow: 0 2px 6px rgba(38, 49, 44, 0.06);
}

.chat-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-faint);
    padding-inline: 6px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.18s ease, max-height 0.18s ease;
}

.chat-row:hover .chat-meta,
.chat-row:focus-within .chat-meta {
    opacity: 1;
    max-height: 40px;
}

.chat-meta time {
    font-variant-numeric: tabular-nums;
}

.chat-meta__status {
    color: var(--primary);
    font-weight: 600;
}

/* WhatsApp-style read receipts */
.msg-tick {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-inline-start: 4px;
    line-height: 1;
}

.msg-tick svg {
    width: 14px;
    height: 14px;
}

.msg-tick--sent,
.msg-tick--delivered {
    color: #8d998d;
}

.msg-tick--seen {
    color: #1a73e8;
}

.msg-tick__second {
    margin-inline-start: -8px;
}

.chat-reaction-trigger {
    display: inline-flex;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(20, 92, 75, 0.1);
    box-shadow: 0 2px 6px rgba(38, 49, 44, 0.06);
    margin-inline-start: 4px;
}

.chat-reaction-trigger .reaction-button {
    border: 0;
    background: transparent;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 0.95rem;
    border-radius: 999px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.chat-reaction-trigger .reaction-button:hover:not(:disabled) {
    transform: scale(1.15);
    background: rgba(20, 92, 75, 0.08);
}

.chat-reaction-trigger .reaction-button.is-loading {
    opacity: 0.5;
}

/* Discreet "Report message" button. Stays nearly invisible until the user
   hovers or focuses the chat row; then it fades in with a short label. */
.chat-msg-report {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-inline-start: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(120, 120, 128, 0.55);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-1px);
    transition: opacity 0.18s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.chat-msg-report svg {
    width: 12px;
    height: 12px;
}

.chat-msg-report__label {
    line-height: 1;
}

.chat-row:hover .chat-msg-report,
.chat-row:focus-within .chat-msg-report,
.chat-msg-report:focus-visible {
    opacity: 1;
}

.chat-msg-report:hover:not(:disabled) {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.08);
    border-color: rgba(192, 57, 43, 0.18);
}

.chat-msg-report.is-loading {
    opacity: 0.6;
    cursor: progress;
}

.chat-msg-report.is-reported,
.chat-msg-report[data-reported="1"] {
    opacity: 1;
    color: rgba(120, 120, 128, 0.8);
    background: rgba(120, 120, 128, 0.08);
    cursor: default;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 18px 14px;
    background: #ffffff;
    border-top: 1px solid rgba(20, 92, 75, 0.08);
}

.chat-composer__attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s ease, transform 0.18s ease;
}

.chat-composer__attach:hover {
    background: rgba(20, 92, 75, 0.14);
    transform: translateY(-1px);
}

.chat-composer__input {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #f3f4ef;
    border-radius: 20px;
    padding: 8px 14px;
}

.chat-composer__input textarea {
    width: 100%;
    border: 0;
    background: transparent;
    resize: none;
    outline: none;
    font: inherit;
    color: var(--text);
    max-height: 140px;
    line-height: 1.45;
    padding: 4px 0;
}

.chat-composer__input textarea::placeholder {
    color: var(--text-faint);
}

.chat-composer__file-hint {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-composer__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    color: #ffffff;
    cursor: not-allowed;
    flex-shrink: 0;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}

.chat-composer__send:not(:disabled) {
    background: linear-gradient(135deg, #145c4b, #1e7a63);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(20, 92, 75, 0.22);
}

.chat-composer__send:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 8px 20px rgba(20, 92, 75, 0.28);
}

.chat-composer__send:disabled svg {
    opacity: 0.7;
}


.chat-composer__send.is-loading svg {
    /* Animation removed - causes visual glitch in RTL and poor UX */
    opacity: 0.7;
}

/* RTL fix: preserve mirror transform during loading state */
html[dir="rtl"] .chat-composer__send.is-loading svg {
    transform: scaleX(-1);
    opacity: 0.7;
    animation: none;
}

.chat-composer--blocked {
    justify-content: center;
    text-align: center;
}

html[dir="rtl"] .chat-composer__send svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .chat-composer__send:hover:not(:disabled) svg {
    transform: scaleX(-1) translateY(-0.5px);
}

@keyframes chat-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .chat-messenger {
        min-height: 68vh;
        max-height: 78vh;
    }
    .chat-bubble-group {
        max-width: 80%;
    }
    .chat-topbar {
        padding: 12px 14px;
    }
    .chat-thread {
        padding: 16px 12px 10px;
    }
    .chat-composer {
        padding: 10px 12px 12px;
    }
    .chat-meta {
        opacity: 1;
        max-height: 40px;
    }
}

.auth-shell {
    overflow: hidden;
}

.auth-grid {
    min-height: 680px;
}

.auth-copy {
    padding: 42px;
    background:
        linear-gradient(180deg, rgba(20, 92, 75, 0.88), rgba(14, 65, 53, 0.95)),
        url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1200&q=80") center/cover;
    color: #fff;
    display: grid;
    align-content: center;
    gap: 22px;
}

.auth-copy p,
.auth-copy li {
    color: rgba(255, 255, 255, 0.86);
}

.auth-copy ul {
    margin: 0;
    padding-inline-start: 18px;
}

.auth-form-wrap {
    padding: 36px;
    background: rgba(255, 255, 255, 0.96);
}

.form-card,
.stack-form {
    display: grid;
    gap: 18px;
}

.form-card.small {
    max-width: 620px;
    margin: 0 auto;
}

.check-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(20, 92, 75, 0.04);
    border: 1px solid rgba(20, 92, 75, 0.08);
}

.check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field input {
    padding-inline-end: 92px;
}

.password-toggle {
    position: absolute;
    inset-inline-end: 12px;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--text);
    outline: none;
}

.toggle-grid {
    display: grid;
    gap: 12px;
}

.stack-card {
    display: grid;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 24px;
    border: 1px solid rgba(20, 92, 75, 0.08);
    background: rgba(245, 250, 255, 0.9);
}

.stack-card.compact {
    padding: 16px 18px;
    gap: 10px;
}

.admin-filter-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.admin-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
}

.admin-user-identity,
.admin-user-meta {
    display: grid;
    gap: 4px;
}

.inline-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill-active {
    background: rgba(36, 148, 88, 0.14);
    color: #17754a;
}

.status-pill-pending {
    background: rgba(240, 178, 52, 0.16);
    color: #9b6510;
}

.status-pill-suspended,
.status-pill-email_unverified {
    background: rgba(35, 111, 193, 0.14);
    color: #1f5f9e;
}

.status-pill-banned {
    background: rgba(192, 66, 66, 0.14);
    color: #9d2020;
}

.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-small {
    padding: 8px 12px;
    font-size: 0.88rem;
}

.btn-admin-compact {
    min-height: 42px;
    width: auto;
    min-width: 150px;
    padding: 10px 18px;
    border-radius: 16px;
    align-self: start;
}

.admin-dialog {
    width: min(960px, calc(100vw - 32px));
    border: 0;
    padding: 0;
    border-radius: 28px;
    background: transparent;
}

.admin-dialog::backdrop {
    background: rgba(18, 30, 41, 0.56);
    backdrop-filter: blur(4px);
}

.admin-dialog-card {
    display: grid;
    gap: 20px;
    padding: 28px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(18, 30, 41, 0.22);
}

.admin-dialog-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}

.admin-dialog-head h2 {
    margin: 0 0 6px;
}

.admin-dialog-head p {
    margin: 0;
    color: var(--text-soft);
}

.dialog-close {
    border: 0;
    background: rgba(25, 69, 89, 0.08);
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 1.25rem;
    cursor: pointer;
}

.admin-dialog-form {
    display: grid;
    gap: 18px;
}

.admin-dialog-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-dialog-grid-span {
    grid-column: 1 / -1;
}

.admin-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.alert {
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: 18px;
    border: 1px solid transparent;
}

.alert.success {
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    border-color: rgba(20, 92, 75, 0.12);
}

.alert.danger {
    background: rgba(166, 52, 52, 0.08);
    color: #8b3030;
    border-color: rgba(166, 52, 52, 0.12);
}

.table-card table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.table-card {
    overflow-x: auto;
}

.table-card th,
.table-card td {
    padding: 16px 14px;
    border-bottom: 1px solid rgba(20, 92, 75, 0.08);
    text-align: start;
    vertical-align: top;
}

.pagination {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    justify-content: center;
    margin: 20px 0 0;
}

.pagination-shell {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination .page-item {
    list-style: none;
}

.pagination .page-link,
.pagination .page-item > span {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(20, 92, 75, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #2f5f8d;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.pagination .page-link:hover,
.pagination .page-link:focus-visible {
    transform: translateY(-1px);
    background: rgba(20, 92, 75, 0.08);
    border-color: rgba(20, 92, 75, 0.22);
    outline: none;
}

.pagination .disabled > span {
    opacity: 0.55;
    box-shadow: none;
}

.pagination .active > span {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(20, 92, 75, 0.18);
}

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

.pagination svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.footer-bar {
    justify-content: center;
    padding: 0 0 42px;
    color: var(--text-soft);
}

.footer-bar a {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(20, 92, 75, 0.06);
}

.pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan-box.featured {
    background: linear-gradient(180deg, rgba(20, 92, 75, 0.06), rgba(255, 255, 255, 0.96));
    border-color: rgba(20, 92, 75, 0.18);
}

.profile-hero {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap: 22px;
}

.profile-summary {
    display: grid;
    gap: 16px;
}

.key-facts {
    display: grid;
    gap: 12px;
}

.key-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(20, 92, 75, 0.04);
}

.profile-ip-insight {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(47, 111, 163, 0.22);
    background: linear-gradient(180deg, rgba(237, 245, 255, 0.9), rgba(247, 251, 255, 0.98));
    display: grid;
    gap: 8px;
}

.profile-ip-insight h3 {
    margin: 0;
    font-size: 1rem;
}

.profile-ip-insight p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.65;
}

.profile-ip-insight p strong {
    color: var(--text);
}

.profile-ip-insight-note {
    margin-top: 2px;
    font-weight: 700;
    color: #1f5f4d;
}

.profile-ip-insight-warning {
    border-color: rgba(215, 77, 112, 0.28);
    background: linear-gradient(180deg, rgba(253, 239, 243, 0.9), rgba(255, 246, 249, 0.98));
}

.profile-ip-insight-warning .profile-ip-insight-note {
    color: #9b2f52;
}

.profile-actions {
    display: grid;
    gap: 12px;
}

.article-card {
    display: grid;
    gap: 14px;
}

.article-card h2,
.article-card h3,
.account-search-box h2,
.account-notifications-box h2,
.account-form-card h2,
.profile-actions h2,
.profile-panel h2,
.card h2 {
    margin: 0;
}

.article-card p,
.account-search-box p,
.account-notifications-box p,
.account-form-card p,
.profile-panel p,
.card p {
    margin: 0;
}

.article-card .muted + p,
.account-form-card .muted + p {
    margin-top: 8px;
}

.admin-link {
    display: flex;
    align-items: center;
    min-height: 92px;
    font-weight: 800;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.admin-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(28, 43, 36, 0.1);
    border-color: rgba(20, 92, 75, 0.16);
}

.admin-stat-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 148px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.admin-stat-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(28, 43, 36, 0.11);
    border-color: rgba(20, 92, 75, 0.16);
}

.admin-stat-link:focus-visible {
    outline: 3px solid rgba(20, 92, 75, 0.22);
    outline-offset: 3px;
}

.auth-form-wrap > .form-card > h1,
.auth-form-wrap > .form-card > p {
    margin: 0;
}

.auth-form-wrap > .form-card > p {
    color: var(--text-soft);
}

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

.form-actions > * {
    flex: 0 0 auto;
}

.stack-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 700;
}

.no-screenshot {
    -webkit-user-select: none;
    user-select: none;
}

.no-screenshot img {
    pointer-events: none;
}

.no-screenshot::after {
    content: attr(data-protected-view);
    position: fixed;
    bottom: 18px;
    inset-inline-start: 18px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.12);
    color: var(--primary);
    font-size: 12px;
    z-index: 60;
}

html[dir="ltr"] .nav-links {
    justify-content: flex-start;
}

html[dir="ltr"] .nav-actions {
    justify-content: flex-end;
}

/* Logical text alignment: adapts automatically to dir="ltr/rtl" on <html> */
.profile-title,
.section-heading,
.dashboard-heading,
.filter-header,
.chat-header,
.account-section-title,
.account-directory-head,
.account-summary-copy,
.account-form-card,
.account-notifications-box,
.filter-shell,
.profile-panel,
.chat-sidebar,
.chat-main,
.table-card,
.card {
    text-align: start;
}

@media (max-width: 1100px) {
    .hero,
    .profile-hero,
    .dashboard-grid,
    .account-page-grid,
    .account-layout,
    .account-topbar,
    .chat-layout,
    .auth-grid,
    .grid-4,
    .grid-3,
    .grid-2,
    .pricing-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .chat-sidebar {
        border-inline-end: 0;
        border-bottom: 1px solid rgba(20, 92, 75, 0.08);
    }

    .account-alert,
    .account-section-head,
    .account-user-head,
    .account-match-row,
    .account-summary-card,
    .account-directory-head,
    .account-subnav-top {
        align-items: flex-start;
    }

    .account-alert,
    .account-section-head,
    .account-summary-card,
    .account-directory-head,
    .account-subnav-top,
    .account-promo-bar {
        flex-direction: column;
    }

    .chat-actions-inline {
        width: 100%;
        margin-inline-start: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .account-summary-card {
        grid-template-columns: 1fr;
    }

    .account-dashboard-hero,
    .account-dashboard-grid-main,
    .account-dashboard-grid-secondary {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 420px;
    }

    .filter-grid,
    .account-search-grid,
    .account-kpi-grid,
    .directory-members-grid,
    .account-field-grid,
    .account-tabs-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-page-grid,
    .account-layout {
        gap: 18px;
    }

    .profile-edit-photo-panel,
    .profile-edit-quickfacts {
        grid-template-columns: 1fr;
    }

    .account-user-card-refined {
        position: static;
    }

    .filter-grid .filter-actions {
        grid-column: span 2;
    }

    .account-search-grid .account-search-submit-group {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .profile-visit-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "meta"
            "actions";
    }

    .profile-visit-card__actions {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .admin-settings-panel-grid,
    .admin-runtime-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .site-header {
        padding: 8px 0;
    }

    .page-shell,
    .footer-shell {
        padding-inline: 0;
    }

    .nav-shell {
        grid-template-columns: auto auto;
        padding: 10px 14px;
    }

    .nav-toggle {
        display: inline-grid;
        place-items: center;
        justify-self: end;
    }

    .nav-links,
    .nav-actions {
        display: none;
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 6px;
    }

    .nav-links.is-open,
    .nav-actions.is-open {
        display: flex;
    }

    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 98;
    }

    .nav-overlay.is-active {
        display: block;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-links a,
    .nav-actions > *,
    .nav-actions form,
    .nav-actions form button {
        width: 100%;
    }

    .lang-switch {
        width: 100%;
        justify-content: center;
    }

    .stats-ribbon,
    .filter-grid,
    .compose-grid,
    .account-search-grid,
    .account-kpi-grid,
    .directory-members-grid,
    .account-field-grid,
    .account-tabs-nav {
        grid-template-columns: 1fr;
    }

    .account-field-grid .span-2 {
        grid-column: span 1;
    }

    .filter-grid .filter-actions {
        grid-column: span 1;
    }

    .account-search-grid .account-search-submit-group {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
    }

    .account-search-submit-group .btn {
        min-width: 100%;
        width: 100%;
    }

    .profile-edit-photo-frame {
        width: min(100%, 220px);
    }

    .profile-page-head,
    .profile-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-page-status {
        justify-content: flex-start;
    }

    .message-item {
        max-width: 88%;
    }

    .form-actions,
    .account-inline-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .account-dashboard-priority-callout {
        flex-direction: column;
        align-items: stretch;
    }

    .site-header.site-header-auth .auth-header-shell {
        padding: 10px 12px;
    }

    .auth-header-top {
        grid-template-columns: 1fr auto;
    }

    .auth-header-links,
    .auth-header-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .editor-toolbar {
        padding: 10px;
        gap: 6px;
    }

    .editor-tool {
        flex: 1 1 calc(50% - 6px);
    }

    .form-actions > *,
    .account-inline-actions > * {
        width: 100%;
    }

    .account-notification-row,
    .account-notification-meta {
        flex-direction: column;
        align-items: stretch;
    }

    .account-dashboard-actions-grid,
    .account-dashboard-status-grid,
    .account-dashboard-activity-grid {
        grid-template-columns: 1fr;
    }

    .account-dashboard-feed-card,
    .account-dashboard-thread-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .account-dashboard-feed-meta,
    .account-dashboard-thread-meta {
        justify-items: start;
    }

    .account-notification-meta span {
        white-space: normal;
    }
}

/* ============================================
   UI FIXES - Critical Corrections
   ============================================ */

/* Fix 1: Chat button visibility and composer layout */
.chat-composer {
    position: relative;
    z-index: 10;
}

.chat-composer__send {
    position: relative;
    z-index: 11;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

.chat-composer__send svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* Fix 2: Chat textarea overflow */
.chat-composer__input textarea {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.chat-bubble {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Fix 3: Member card text overflow */
.directory-member-identity {
    min-width: 0;
    overflow: hidden;
}

.directory-member-title {
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
}

.directory-member-identity span,
.directory-member-meta span,
.directory-member-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.directory-member-meta,
.directory-member-row {
    flex-wrap: wrap;
    gap: 8px;
}

/* Fix 4: Member card images - proper containment */
.directory-member-head {
    align-items: flex-start;
}

.directory-member-head img {
    flex-shrink: 0;
    object-fit: cover;
    background-color: var(--surface-muted);
}

.directory-member-head img[src=""],
.directory-member-head img:not([src]) {
    visibility: hidden;
}

/* Image fallback placeholder */
.directory-member-head img::before {
    content: '';
    display: block;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d998d' stroke-width='1.5'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/32px no-repeat;
}

/* Fix 5: Mobile menu improvements */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 50, 40, 0.45);
    backdrop-filter: blur(3px);
    z-index: 998;
}

.site-header.is-open .nav-overlay {
    display: block;
}

.site-header.is-open {
    position: relative;
    z-index: 999;
}

/* Auth header mobile menu fixes */
@media (max-width: 900px) {
    .auth-header-links,
    .auth-header-actions {
        display: none;
        flex-direction: column;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 12px;
        padding: 12px;
        margin-top: 10px;
        box-shadow: 0 10px 30px rgba(34, 63, 90, 0.15);
    }

    .site-header.site-header-auth.is-open .auth-header-links,
    .site-header.site-header-auth.is-open .auth-header-actions {
        display: flex;
    }

    .auth-header-links a,
    .auth-header-actions a,
    .auth-header-actions button,
    .auth-header-actions form {
        width: 100%;
        text-align: center;
    }

    /* Account tabs scrollable on mobile */
    .account-tabs-nav {
        display: flex !important;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 4px;
        padding: 4px;
    }

    .account-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .account-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 0.85rem;
    }
}

/* Fix 6: Notification card layout improvements */
.notification-card {
    overflow: hidden;
}

.notification-card h2 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Fix 7: Sidebar user card text overflow */
.account-user-intro strong,
.account-user-intro p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fix 8: Chat avatar fixes */
.chat-avatar {
    flex-shrink: 0;
    overflow: hidden;
}

.chat-avatar img {
    object-fit: cover;
    background-color: var(--surface-muted);
}

/* Fix 9: Header flag image fix */
.directory-flag {
    flex-shrink: 0;
}

/* Fix 10: Account dashboard thread card image */
.account-dashboard-thread-card img {
    flex-shrink: 0;
    object-fit: cover;
    background-color: var(--surface-muted);
}

/* ============================================
   Admin panel
   ============================================ */
.is-admin-viewport {
    background:
        radial-gradient(circle at top left, rgba(71, 129, 184, 0.12), transparent 26%),
        radial-gradient(circle at top right, rgba(200, 161, 91, 0.12), transparent 24%),
        linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
}

.admin-container {
    width: min(1460px, calc(100% - 28px));
    margin: 0 auto;
}

.admin-site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    padding: 14px 0 0;
    background: linear-gradient(180deg, rgba(245, 247, 251, 0.96), rgba(245, 247, 251, 0.76));
    backdrop-filter: blur(14px);
}

.admin-topbar {
    display: grid;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 28px;
    background: linear-gradient(135deg, #2f6fa3, #4d89b9);
    color: #fff;
    box-shadow: 0 24px 54px rgba(33, 74, 111, 0.22);
}

.admin-topbar__primary,
.admin-topbar__sections,
.admin-topbar__quicklinks,
.admin-topbar__actions,
.admin-footer-bar,
.admin-footer-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-topbar__primary {
    justify-content: space-between;
}

.admin-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.admin-topbar__mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.admin-topbar__brand-copy {
    display: grid;
    gap: 2px;
}

.admin-topbar__brand-copy strong {
    font-size: 1.05rem;
}

.admin-topbar__brand-copy small {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
}

.admin-topbar__quicklinks {
    flex: 1 1 320px;
    justify-content: center;
}

.admin-topbar__quicklinks a {
    color: rgba(255, 255, 255, 0.84);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 8px 10px;
    border-radius: 999px;
}

.admin-topbar__quicklinks a:hover,
.admin-topbar__quicklinks a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.admin-topbar__actions {
    justify-content: flex-end;
}

.admin-lang-switch {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.admin-lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-lang-switch a:hover,
.admin-lang-switch a:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.admin-lang-switch a.is-active {
    background: #fff;
    color: #2f6fa3;
    box-shadow: 0 10px 24px rgba(15, 42, 66, 0.18);
}

.admin-topbar .btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

.admin-topbar .btn-secondary:hover,
.admin-topbar .btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

.btn-admin-compact {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 0.88rem;
    border-radius: 14px;
}

.admin-topbar__sections {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-topbar__sections a {
    padding: 10px 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    font-size: 0.92rem;
}

.admin-topbar__sections a:hover,
.admin-topbar__sections a:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.admin-topbar__sections a.is-active {
    background: #fff;
    color: #2f6fa3;
    box-shadow: 0 12px 24px rgba(22, 56, 86, 0.18);
}

.admin-page-space {
    padding: 22px 0 48px;
    position: relative;
    z-index: 1;
}

.admin-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.admin-error-panel {
    max-width: 760px;
}

.admin-main-panel {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.admin-side-panel {
    display: grid;
    gap: 18px;
    align-content: start;
    position: sticky;
    top: 122px;
}

.admin-side-card,
.admin-context-bar,
.admin-footer-bar {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(42, 86, 124, 0.08);
    border-radius: 24px;
    box-shadow: 0 18px 34px rgba(38, 55, 71, 0.06);
}

.admin-side-card {
    padding: 18px;
}

.admin-side-card--profile {
    padding: 0;
    overflow: hidden;
}

.admin-side-card__cover {
    min-height: 112px;
    background: linear-gradient(135deg, #2f6fa3, #4d89b9);
}

.admin-side-card__body {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 0 18px 20px;
    margin-top: -42px;
    text-align: center;
}

.admin-side-card__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid rgba(255, 255, 255, 0.98);
    background: #f4f7fb;
}

.admin-side-card__body p,
.admin-side-card--note p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.admin-side-card__section-title {
    margin-bottom: 12px;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-side-nav {
    display: grid;
    gap: 8px;
}

.admin-side-nav a {
    display: block;
    padding: 11px 14px;
    border-radius: 16px;
    font-weight: 800;
    color: var(--text-soft);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.admin-side-nav a:hover,
.admin-side-nav a:focus-visible {
    background: rgba(47, 111, 163, 0.08);
    color: #214c70;
    transform: translateY(-1px);
}

.admin-side-nav a.is-active {
    background: linear-gradient(135deg, rgba(47, 111, 163, 0.14), rgba(77, 137, 185, 0.16));
    color: #214c70;
    box-shadow: inset 0 0 0 1px rgba(47, 111, 163, 0.12);
}

.admin-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
}

.admin-context-copy {
    display: grid;
    gap: 2px;
}

.admin-context-copy strong {
    font-size: 1rem;
}

.admin-context-copy span:last-child {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.admin-settings-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
}

.admin-split-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.15fr);
}

.admin-editor-form,
.form-card {
    min-width: 0;
}

.admin-footer {
    padding: 0 0 26px;
}

.admin-footer-bar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
}

.admin-footer-links a {
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.9rem;
}

.admin-footer-links a:hover,
.admin-footer-links a:focus-visible {
    color: var(--primary);
}

@media (max-width: 1180px) {
    .admin-workspace {
        grid-template-columns: 1fr;
    }

    .admin-side-panel {
        position: static;
        order: -1;
    }

    .admin-settings-layout,
    .admin-split-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-topbar {
        padding: 16px;
    }

    .admin-topbar__primary,
    .admin-topbar__actions,
    .admin-topbar__quicklinks,
    .admin-context-bar,
    .admin-footer-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-topbar__quicklinks,
    .admin-topbar__sections {
        justify-content: flex-start;
    }

    .admin-topbar__actions .btn,
    .admin-topbar__actions form,
    .admin-topbar__actions form button,
    .admin-context-back {
        width: 100%;
    }
}

@media (max-width: 640px) {
    :root {
        --container: min(100% - 16px, 100%);
    }

    .hero-shell,
    .card,
    .table-card,
    .dashboard-shell,
    .auth-form-wrap,
    .auth-copy,
    .chat-sidebar,
    .chat-header,
    .chat-compose,
    .message-list,
    .sidebar-card,
    .dashboard-panel {
        padding: 16px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero-visual {
        display: none;
    }

    .profile-photo-wrap {
        height: 180px;
    }
}

.toast-stack {
    position: fixed;
    inset: 24px 24px auto;
    z-index: 80;
    display: grid;
    gap: 12px;
    pointer-events: none;
}

.page-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 95;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

html[dir="rtl"] .page-progress {
    transform-origin: right;
}

.page-progress.is-active {
    transform: scaleX(1);
    opacity: 1;
}

.toast {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    max-width: 460px;
    padding: 16px 18px;
    border-radius: 20px;
    box-shadow: 0 22px 36px rgba(26, 45, 37, 0.18);
    border: 1px solid rgba(20, 92, 75, 0.12);
    background: rgba(255, 255, 255, 0.98);
    pointer-events: auto;
}

.toast-success {
    border-color: rgba(20, 92, 75, 0.16);
    border-inline-start: 4px solid rgba(20, 92, 75, 0.55);
}

.toast-warning {
    border-color: rgba(191, 142, 44, 0.24);
    border-inline-start: 4px solid rgba(191, 142, 44, 0.6);
    background: rgba(255, 251, 242, 0.98);
}

.toast-danger {
    border-color: rgba(179, 60, 60, 0.2);
}

.admin-inline-banner {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 20px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    box-shadow: 0 18px 50px rgba(20, 92, 75, 0.08);
}

.admin-inline-banner strong {
    font-size: 0.98rem;
}

.admin-inline-banner-success {
    background: rgba(20, 92, 75, 0.08);
    border-color: rgba(20, 92, 75, 0.16);
    color: var(--text-main);
}

.admin-inline-banner-danger {
    background: rgba(179, 60, 60, 0.08);
    border-color: rgba(179, 60, 60, 0.18);
    color: var(--text-main);
}

.table-row-focus {
    background: rgba(20, 92, 75, 0.04);
}

.verification-inline-result {
    border-radius: 16px;
    padding: 10px 12px;
    font-size: 0.88rem;
    line-height: 1.6;
}

.verification-inline-result-success {
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary-700);
}

.verification-inline-result-neutral {
    background: rgba(20, 92, 75, 0.06);
    color: var(--text);
    border: 1px solid rgba(20, 92, 75, 0.12);
}

.table-row-focus,
.verification-row-updated {
    animation: verificationPulse 1.1s ease;
}

@keyframes verificationPulse {
    0% {
        background: rgba(20, 92, 75, 0.02);
        transform: scale(1);
    }
    30% {
        background: rgba(20, 92, 75, 0.08);
        transform: scale(1.002);
    }
    100% {
        background: transparent;
        transform: scale(1);
    }
}

.toast-copy {
    display: grid;
    gap: 4px;
}

.toast-copy strong {
    font-size: 0.95rem;
}

.toast-copy span {
    color: var(--text-soft);
}

.toast-close {
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-open {
    overflow: hidden;
}

.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 18, 23, 0.82);
    backdrop-filter: blur(6px);
}

.lightbox-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    width: min(1120px, calc(100% - 28px));
    min-height: 100%;
    margin: 0 auto;
    padding: 28px 0;
}

.lightbox-figure {
    margin: 0;
    display: grid;
    gap: 14px;
    justify-items: center;
}

.lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    border-radius: 26px;
    box-shadow: 0 28px 44px rgba(0, 0, 0, 0.24);
    background: rgba(255, 255, 255, 0.04);
}

.lightbox-caption {
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.lightbox-close,
.lightbox-nav {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

.lightbox-close {
    position: absolute;
    inset: 26px 26px auto auto;
}

html[dir="rtl"] .lightbox-close {
    inset: 26px auto auto 26px;
}

.file-preview-box {
    display: grid;
    gap: 12px;
}

.file-preview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(20, 92, 75, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
}

.file-preview-card.is-file {
    justify-content: center;
}

.file-preview-thumb {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(20, 92, 75, 0.08);
}

.file-preview-meta {
    display: grid;
    gap: 4px;
}

.file-preview-meta span {
    color: var(--text-soft);
}

button.is-loading,
input.is-loading[type="submit"] {
    opacity: 0.78;
    cursor: wait;
}

.profile-photo,
.directory-member-head img,
.chat-image {
    cursor: zoom-in;
}

@media (max-width: 900px) {
    .toast-stack {
        inset: 16px 16px auto;
    }

    .toast {
        max-width: none;
    }

    .lightbox-dialog {
        width: min(100% - 16px, 100%);
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .lightbox-nav {
        position: fixed;
        bottom: 18px;
    }

    .lightbox-nav-prev {
        inset-inline-start: 18px;
    }

    .lightbox-nav-next {
        inset-inline-end: 18px;
    }

    .lightbox-close {
        inset: 18px 18px auto auto;
    }

    html[dir="rtl"] .lightbox-close {
        inset: 18px auto auto 18px;
    }
}

.auth-shell-register {
    align-items: start;
}

.auth-grid-register {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.35fr);
    align-items: start;
}

.registration-stepper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 24px;
}

/* Keep every step's width stable — without this, an implicit-track grid
   sizes each .registration-step to its own content (long select labels
   like "Sumuṣṭā aṣ Sulṭānī" would widen the card on step 3 and narrow
   it on step 4), making the card jump size between steps. */
.registration-stepper > .registration-step {
    width: 100%;
    min-width: 0;
}

.form-card.registration-stepper .card {
    min-width: 0;
}

.registration-error-summary,
.registration-geo-note {
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(20, 92, 75, 0.08);
    background: rgba(63, 121, 173, 0.05);
    color: var(--text);
}

.registration-error-summary {
    border-color: rgba(176, 66, 66, 0.18);
    background: rgba(176, 66, 66, 0.06);
}

.registration-error-summary strong {
    display: block;
    margin-bottom: 8px;
}

.registration-error-summary ul {
    margin: 0;
    padding-inline-start: 18px;
    display: grid;
    gap: 6px;
    color: var(--text-soft);
}

.registration-geo-note.is-success {
    border-color: rgba(22, 115, 79, 0.14);
    background: rgba(22, 115, 79, 0.07);
}

.registration-header {
    display: grid;
    gap: 18px;
}

.registration-header h1 {
    margin: 0;
    font-size: clamp(1.7rem, 1.6vw + 1.2rem, 2.3rem);
    line-height: 1.3;
}

.registration-progress {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.registration-progress-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--text-faint);
    text-align: center;
}

.registration-progress-item::before {
    content: "";
    position: absolute;
    top: 17px;
    inset-inline-start: calc(50% + 18px);
    width: calc(100% - 22px);
    height: 2px;
    background: rgba(20, 92, 75, 0.12);
}

.registration-progress-item:last-child::before {
    display: none;
}

.registration-progress-item span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.1);
    color: var(--text-soft);
    font-weight: 800;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.registration-progress-item small {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.4;
}

.registration-progress-item.is-active,
.registration-progress-item.is-complete {
    color: var(--text);
}

.registration-progress-item.is-active span {
    background: linear-gradient(135deg, #1d7e69, #145c4b);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(20, 92, 75, 0.18);
}

.registration-progress-item.is-complete span {
    background: rgba(20, 92, 75, 0.16);
    color: var(--primary);
}

.registration-progress-item.is-complete::before,
.registration-progress-item.is-active::before {
    background: rgba(20, 92, 75, 0.32);
}

.registration-step[hidden] {
    display: none !important;
}

.registration-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.registration-actions .btn {
    min-width: 150px;
}

.registration-actions .btn[hidden] {
    display: none !important;
}

.grid-1 {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}

.grid-span-2 {
    grid-column: 1 / -1;
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(20, 92, 75, 0.05);
    border: 1px solid rgba(20, 92, 75, 0.1);
    line-height: 1.55;
    color: var(--text-soft);
    cursor: pointer;
}

.terms-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--brand, #145c4b);
}

.terms-check span {
    flex: 1;
}

.file-preview-shell {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.file-preview-shell:empty {
    display: none;
}

.file-preview-shell img {
    max-width: 220px;
    border-radius: 14px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    box-shadow: 0 6px 18px rgba(20, 92, 75, 0.08);
}

.registration-photo-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

/* Registration step: deterministic 2-col form grid.
   Specificity boosted with .form-card.registration-stepper so it wins
   against the generic .is-public-viewport .grid-2 rule in frontend-polish.css,
   which otherwise collapses this to a single column whenever the right-hand
   auth column is narrower than ~620px. */
.form-card.registration-stepper .registration-step .grid-2,
.registration-step .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: start;
}

.form-card.registration-stepper .registration-step .grid-1,
.registration-step .grid-1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.registration-step .grid-2 > label:not(.terms-check),
.registration-step .grid-1 > label:not(.terms-check) {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

/* Terms checkbox keeps its inline flex layout (checkbox + text side by side).
   Without :not(.terms-check) above, the stacked-grid rule would force the
   checkbox onto its own row and push the label text below it. */
.registration-step .grid-2 > label.terms-check,
.registration-step .grid-1 > label.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
}

.registration-step .grid-2 > label > input,
.registration-step .grid-2 > label > select,
.registration-step .grid-2 > label > textarea,
.registration-step .grid-1 > label > input,
.registration-step .grid-1 > label > select,
.registration-step .grid-1 > label > textarea,
.registration-step .password-field,
.registration-step .phone-inline {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Terms checkbox must stay a fixed 18px square, not expand to 100%. */
.registration-step .terms-check > input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--brand, #145c4b);
}

.registration-step .terms-check > span {
    flex: 1;
    min-width: 0;
}

.registration-step .password-field input {
    width: 100%;
    min-width: 0;
}

.registration-step label.grid-span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .registration-step .grid-2,
    .registration-step .grid-1 {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .registration-step label.grid-span-2 {
        grid-column: auto;
    }
}

.field-inline-error {
    display: none;
    margin-top: 6px;
    color: #b02a2a;
    font-size: 0.8rem;
    line-height: 1.4;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #d45151 !important;
    box-shadow: 0 0 0 3px rgba(212, 81, 81, 0.14) !important;
    background: rgba(255, 244, 244, 0.95) !important;
}

.field-hint {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.55;
    transition: color 0.2s ease;
}

/* Dedicated spacing for the registration phone hint so it breathes below the
   phone-code + phone-number grid instead of visually "sticking" to it. */
.registration-step .phone-inline + .field-hint,
.registration-step .phone-hint {
    margin-top: 8px;
    line-height: 1.6;
    color: var(--text-soft);
    word-break: normal;
    overflow-wrap: anywhere;
}

.field-error {
    display: block;
    margin-top: 4px;
    color: #b04242;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.55;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
input.input-error,
select.input-error,
textarea.input-error {
    border-color: rgba(176, 66, 66, 0.45);
    box-shadow: 0 0 0 4px rgba(176, 66, 66, 0.08);
}

.field-hint.is-success {
    color: #16734f;
}

.field-hint.is-danger {
    color: #b04242;
}

.field-hint.is-info {
    color: #336d83;
}

.registration-textarea-guidance {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    background: rgba(63, 121, 173, 0.05);
    color: var(--text-soft);
    font-size: 0.84rem;
}

.registration-textarea-guidance[hidden] {
    display: none !important;
}

.registration-textarea-guidance.is-warning {
    border-color: rgba(190, 143, 35, 0.22);
    background: rgba(190, 143, 35, 0.08);
    color: #8c6116;
}

.registration-textarea-guidance.is-success {
    border-color: rgba(22, 115, 79, 0.18);
    background: rgba(22, 115, 79, 0.08);
    color: #16734f;
}

.registration-textarea-guidance.is-danger {
    border-color: rgba(176, 66, 66, 0.2);
    background: rgba(176, 66, 66, 0.08);
    color: #b04242;
}

.registration-textarea-guidance__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    color: inherit;
}

.phone-inline {
    display: grid;
    grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
    gap: 12px;
    direction: ltr;
}

.phone-inline input:first-child {
    text-align: center;
    font-weight: 700;
}

.form-card.registration-stepper .card {
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(20, 92, 75, 0.08);
    box-shadow: var(--shadow-soft);
}

.directory-results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--text-soft);
    font-size: 0.92rem;
    font-weight: 700;
}

.directory-results-meta strong {
    color: var(--text);
}

.icon-action.is-active {
    background: rgba(20, 92, 75, 0.14);
    color: var(--primary);
    border-color: rgba(20, 92, 75, 0.22);
}

.member-card .icon-action {
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.member-card .icon-action:hover {
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    .auth-grid-register {
        grid-template-columns: 1fr;
    }

    .registration-progress {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .registration-progress-item:nth-child(4)::before {
        display: none;
    }
}

@media (max-width: 760px) {
    .registration-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .registration-progress-item::before {
        display: none;
    }

    .registration-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .registration-actions .btn {
        width: 100%;
    }

    .phone-inline {
        grid-template-columns: 1fr;
    }

    .form-card.registration-stepper .card {
        padding: 20px;
    }

    .admin-dialog-grid {
        grid-template-columns: 1fr;
    }

    .admin-dialog-card {
        padding: 20px;
    }

    .admin-dialog-actions,
    .admin-user-actions,
    .admin-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .notifications-head,
    .notifications-head-actions,
    .notification-card,
    .notification-card-meta,
    .notification-card-actions {
        display: grid;
    }

    .notification-card {
        grid-template-columns: 1fr;
    }

.notification-card-icon {
        width: 52px;
        height: 52px;
    }
}

/* Admin SaaS refresh */
.admin-site-header {
    position: sticky;
    top: 0;
    z-index: 70;
    padding: 18px 0 0;
    background: linear-gradient(180deg, rgba(245, 247, 251, 0.96), rgba(245, 247, 251, 0.82));
    backdrop-filter: blur(16px);
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    border: 1px solid rgba(36, 62, 89, 0.08);
    box-shadow: 0 18px 40px rgba(24, 44, 74, 0.08);
}

.admin-topbar__title-group,
.admin-topbar__tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-topbar__title-group {
    flex: 1 1 380px;
    min-width: 0;
}

.admin-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.admin-topbar__mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #2f6fa3, #4d89b9);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(47, 111, 163, 0.22);
}

.admin-topbar__brand-copy {
    display: grid;
    gap: 2px;
}

.admin-topbar__brand-copy strong {
    font-size: 1.02rem;
    color: var(--text);
}

.admin-topbar__brand-copy small {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.admin-topbar__page-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-topbar__page-copy .eyebrow {
    margin: 0;
}

.admin-topbar__page-copy h1 {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.admin-topbar__tools {
    justify-content: flex-end;
}

.admin-lang-switch {
    background: #eef4fb;
    border: 1px solid rgba(47, 111, 163, 0.12);
}

.admin-lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #33536f;
    font-weight: 800;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-lang-switch a:hover,
.admin-lang-switch a:focus-visible {
    background: rgba(47, 111, 163, 0.1);
    color: #214c70;
}

.admin-lang-switch a.is-active {
    background: #2f6fa3;
    color: #fff;
    box-shadow: 0 10px 24px rgba(47, 111, 163, 0.18);
}

.admin-topbar .btn-secondary {
    background: #eef4fb;
    color: #214c70;
    border-color: rgba(47, 111, 163, 0.14);
}

.admin-topbar .btn-secondary:hover,
.admin-topbar .btn-secondary:focus-visible {
    background: #e2edf8;
}

.btn-admin-compact {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 0.88rem;
    border-radius: 14px;
}

.admin-topbar__signal {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    background: #f7fafc;
    border: 1px solid rgba(36, 62, 89, 0.08);
    min-width: 220px;
}

.admin-topbar__signal-icon {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f08c35;
    box-shadow: 0 0 0 6px rgba(240, 140, 53, 0.14);
}

.admin-topbar__signal-copy {
    display: grid;
    gap: 2px;
}

.admin-topbar__signal-copy strong {
    color: var(--text);
    font-size: 0.92rem;
}

.admin-topbar__signal-copy small {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.admin-topbar__user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 6px;
    border-radius: 16px;
    background: #f7fafc;
    border: 1px solid rgba(36, 62, 89, 0.08);
}

.admin-topbar__user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
}

.admin-topbar__user-copy {
    display: grid;
    gap: 1px;
}

.admin-topbar__user-copy strong {
    font-size: 0.92rem;
}

.admin-topbar__user-copy small {
    color: var(--text-soft);
    font-size: 0.8rem;
}

.admin-page-space {
    padding: 22px 0 48px;
    position: relative;
    z-index: 1;
}

.admin-workspace {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.admin-main-panel {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.admin-side-panel {
    display: grid;
    gap: 18px;
    align-content: start;
    position: sticky;
    top: 108px;
}

.admin-side-card,
.admin-context-bar,
.admin-footer-bar {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(42, 86, 124, 0.08);
    border-radius: 24px;
    box-shadow: 0 18px 34px rgba(38, 55, 71, 0.06);
}

.admin-side-card {
    padding: 18px;
}

.admin-side-card--profile {
    padding: 16px;
}

.admin-side-card__body {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.admin-side-card__body--start {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: start;
    gap: 12px;
}

.admin-side-card__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid rgba(255, 255, 255, 0.98);
    background: #f4f7fb;
}

.admin-side-card__avatar--small {
    width: 58px;
    height: 58px;
    border-width: 3px;
    border-radius: 16px;
}

.admin-side-card__profile-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-side-card__body p,
.admin-side-card--note p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.admin-side-card__section-title {
    margin-bottom: 12px;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-side-nav {
    display: grid;
    gap: 6px;
}

.admin-side-nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
    color: var(--text-soft);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.admin-side-nav a:hover,
.admin-side-nav a:focus-visible {
    background: rgba(47, 111, 163, 0.08);
    color: #214c70;
    transform: translateY(-1px);
}

.admin-side-nav a.is-active {
    background: #214c70;
    color: #fff;
    box-shadow: 0 12px 24px rgba(33, 76, 112, 0.18);
}

.admin-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}

.admin-context-copy {
    display: grid;
    gap: 2px;
}

.admin-context-copy strong {
    font-size: 1rem;
}

.admin-context-copy span:last-child {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.admin-settings-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
}

.admin-split-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.15fr);
}

.admin-editor-form,
.form-card {
    min-width: 0;
}

.admin-error-panel {
    max-width: 760px;
}

.admin-footer {
    padding: 0 0 26px;
}

.admin-footer-bar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
}

.admin-footer-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-footer-links a {
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.9rem;
}

.admin-footer-links a:hover,
.admin-footer-links a:focus-visible {
    color: var(--primary);
}

@media (max-width: 1180px) {
    .admin-workspace {
        grid-template-columns: 1fr;
    }

    .admin-side-panel {
        position: static;
        order: -1;
    }

    .admin-settings-layout,
    .admin-split-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-topbar,
    .admin-topbar__title-group,
    .admin-topbar__tools,
    .admin-context-bar,
    .admin-footer-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-topbar__signal,
    .admin-topbar__user,
    .admin-topbar__tools .btn,
    .admin-topbar__tools form,
    .admin-topbar__tools form button,
    .admin-context-back {
        width: 100%;
    }
}
/* 2026-04-25 footer redesign:
   the legacy block that lived here (rounded floating shell, brand panel
   with green gradient, hardcoded 5-column grid) has been replaced by the
   modern, full-bleed footer defined further down - search for
   "Public footer (modernised)" in this file. */

.footer-page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 0;
    color: #fff;
    background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.18), transparent 26%),
        linear-gradient(135deg, #145c4b, #2f6fa3);
}

.footer-page-hero h1 {
    margin: 0.35rem 0;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.15;
}

.footer-page-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,0.82);
    line-height: 1.9;
}

.footer-page-card {
    padding: clamp(1.2rem, 3vw, 2.4rem);
    line-height: 2;
}

.footer-page-card :is(h2, h3, h4) {
    margin-block: 1.4rem 0.7rem;
}

.footer-page-card :is(ul, ol) {
    padding-inline-start: 1.5rem;
}

.footer-admin-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

.footer-admin-create {
    position: sticky;
    top: 1rem;
}

.footer-admin-sections,
.footer-admin-link-list {
    display: grid;
    gap: 1rem;
}

.footer-admin-section-head,
.footer-admin-link-row > summary,
.footer-admin-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-admin-section-head h2 {
    margin: 0.25rem 0;
}

.footer-admin-section-head p,
.footer-admin-link-row small {
    margin: 0;
    color: var(--color-muted, #71817b);
}

.footer-admin-details,
.footer-admin-link-row {
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 18px;
    padding: 0.9rem;
    background: rgba(255,255,255,0.72);
}

.footer-admin-details summary,
.footer-admin-link-row summary {
    cursor: pointer;
    font-weight: 800;
}

.footer-admin-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-block: 1rem;
}

.footer-admin-edit-grid .grid-span-2 {
    grid-column: 1 / -1;
}

.footer-admin-edit-grid label {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.footer-admin-edit-grid input,
.footer-admin-edit-grid textarea,
.footer-admin-edit-grid select,
.footer-admin-create input,
.footer-admin-create textarea {
    width: 100%;
}

@media (max-width: 980px) {
    .footer-cms-grid,
    .footer-admin-layout {
        grid-template-columns: 1fr;
    }

    .footer-admin-create {
        position: static;
    }
}

@media (max-width: 640px) {
    .footer-admin-edit-grid {
        grid-template-columns: 1fr;
    }

    .footer-admin-section-head,
    .footer-admin-link-row > summary,
    .footer-admin-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Admin IA cleanup: six-section SaaS structure without adding new modules. */
.admin-topbar {
    display: grid;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 28px;
    background: linear-gradient(135deg, #2f6fa3, #4d89b9);
    color: #fff;
    box-shadow: 0 24px 54px rgba(33, 74, 111, 0.22);
}

.admin-topbar__primary,
.admin-topbar__secondary,
.admin-topbar__actions,
.admin-topbar__sections {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.admin-topbar__primary {
    justify-content: space-between;
}

.admin-topbar__secondary {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.admin-topbar__actions {
    justify-content: flex-end;
}

.admin-topbar__brand-copy strong,
.admin-topbar__signal-copy strong {
    color: #fff;
}

.admin-topbar__brand-copy small,
.admin-topbar__signal-copy small,
.admin-topbar__user-copy small {
    color: rgba(255, 255, 255, 0.78);
}

.admin-topbar__signal,
.admin-topbar__user {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}

.admin-topbar__sections a {
    padding: 10px 14px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    font-size: 0.92rem;
}

.admin-topbar__sections a:hover,
.admin-topbar__sections a:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.admin-topbar__sections a.is-active {
    background: #fff;
    color: #2f6fa3;
    box-shadow: 0 12px 24px rgba(22, 56, 86, 0.18);
}

.admin-side-panel {
    gap: 14px;
}

.admin-side-group {
    padding: 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(42, 86, 124, 0.08);
    box-shadow: 0 18px 34px rgba(38, 55, 71, 0.06);
}

.admin-side-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    padding: 4px 4px 10px;
}

.admin-side-group summary::-webkit-details-marker {
    display: none;
}

.admin-side-group summary span:first-child {
    display: grid;
    gap: 2px;
}

.admin-side-group summary strong {
    color: var(--text);
    font-size: 0.95rem;
}

.admin-side-group summary small {
    color: var(--text-soft);
    font-size: 0.78rem;
    line-height: 1.5;
}

.admin-side-group__chevron {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: #2f6fa3;
    background: rgba(47, 111, 163, 0.09);
    transition: transform 0.2s ease;
}

.admin-side-group[open] .admin-side-group__chevron {
    transform: rotate(180deg);
}

.admin-side-group .admin-side-nav {
    padding-top: 8px;
    border-top: 1px solid rgba(42, 86, 124, 0.08);
}

.admin-page-hero {
    align-items: center;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.admin-metric-card {
    display: grid;
    gap: 8px;
    min-height: 150px;
    align-content: center;
    text-decoration: none;
}

.admin-metric-card span {
    color: var(--text-soft);
    font-weight: 800;
    font-size: 0.82rem;
}

.admin-metric-card strong {
    color: var(--text);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.admin-metric-card p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.admin-dashboard-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.admin-dashboard-panel {
    display: grid;
    gap: 18px;
}

.admin-review-list,
.admin-quick-action-grid {
    display: grid;
    gap: 10px;
}

.admin-review-row,
.admin-quick-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(47, 111, 163, 0.055);
    color: var(--text);
    font-weight: 800;
}

.admin-review-row strong {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 36px;
    border-radius: 14px;
    background: #fff;
    color: #2f6fa3;
}

.admin-quick-action {
    align-items: flex-start;
    flex-direction: column;
}

.admin-quick-action span {
    color: var(--text-soft);
    font-size: 0.86rem;
    font-weight: 700;
}

.admin-table-card table {
    min-width: 680px;
}

.admin-field-group {
    display: grid;
    gap: 0.45rem;
}

@media (max-width: 1180px) {
    .admin-dashboard-grid,
    .admin-dashboard-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .admin-dashboard-grid,
    .admin-dashboard-panels {
        grid-template-columns: 1fr;
    }

    .admin-topbar,
    .admin-topbar__primary,
    .admin-topbar__secondary,
    .admin-topbar__actions {
        align-items: stretch;
    }

    .admin-topbar__sections {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Admin compact reset: one slim header + one sidebar navigation. */
.is-admin-viewport .admin-site-header {
    padding: 10px 0 0;
}

.is-admin-viewport .admin-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid rgba(47, 111, 163, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    box-shadow: 0 12px 28px rgba(33, 74, 111, 0.12);
}

.is-admin-viewport .admin-topbar__primary {
    width: 100%;
    gap: 12px;
}

.is-admin-viewport .admin-topbar__secondary,
.is-admin-viewport .admin-topbar__sections {
    display: none !important;
}

.is-admin-viewport .admin-topbar__brand {
    min-width: 0;
    gap: 8px;
}

.is-admin-viewport .admin-topbar__mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #2f6fa3;
    color: #fff;
    font-size: 1rem;
}

.is-admin-viewport .admin-topbar__brand-copy {
    gap: 0;
}

.is-admin-viewport .admin-topbar__brand-copy strong,
.is-admin-viewport .admin-topbar__signal-copy strong {
    color: var(--text);
    font-size: 0.9rem;
}

.is-admin-viewport .admin-topbar__brand-copy small,
.is-admin-viewport .admin-topbar__signal-copy small,
.is-admin-viewport .admin-topbar__user-copy small {
    display: none;
}

.is-admin-viewport .admin-topbar__actions {
    margin-inline-start: auto;
    gap: 8px;
    flex-wrap: nowrap;
}

.is-admin-viewport .admin-topbar__signal,
.is-admin-viewport .admin-topbar__user {
    min-width: auto;
    padding: 6px 9px;
    border: 1px solid rgba(47, 111, 163, 0.12);
    border-radius: 14px;
    background: rgba(244, 249, 252, 0.9);
    color: var(--text);
}

.is-admin-viewport .admin-topbar__signal-icon {
    width: 8px;
    height: 8px;
}

.is-admin-viewport .admin-topbar__user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.is-admin-viewport .admin-topbar__user-copy strong {
    color: var(--text);
    font-size: 0.85rem;
}

.is-admin-viewport .admin-lang-switch {
    min-height: 34px;
    padding: 3px;
    border: 1px solid rgba(47, 111, 163, 0.14);
    background: rgba(238, 246, 252, 0.95);
}

.is-admin-viewport .admin-lang-switch a {
    min-width: 34px;
    min-height: 28px;
    padding: 5px 9px;
    color: #33536f;
}

.is-admin-viewport .admin-lang-switch a.is-active {
    background: #2f6fa3;
    color: #fff;
}

.is-admin-viewport .btn-admin-compact {
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 12px;
    font-size: 0.84rem;
}

.is-admin-viewport .admin-page-space {
    padding: 16px 0 42px;
}

.is-admin-viewport .admin-workspace {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.is-admin-viewport .admin-main-panel {
    min-width: 0;
    gap: 16px;
}

.is-admin-viewport .admin-side-panel {
    top: 82px;
    gap: 10px;
}

.is-admin-viewport .admin-side-card {
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(38, 55, 71, 0.07);
}

.is-admin-viewport .admin-side-card--profile {
    padding: 12px;
}

.is-admin-viewport .admin-profile-card img {
    width: 48px;
    height: 48px;
}

.is-admin-viewport .admin-side-group {
    padding: 8px;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(38, 55, 71, 0.055);
}

.is-admin-viewport .admin-side-group summary {
    padding: 2px 2px 8px;
    gap: 8px;
}

.is-admin-viewport .admin-side-group summary strong {
    font-size: 0.88rem;
}

.is-admin-viewport .admin-side-group summary small {
    display: none;
}

.is-admin-viewport .admin-side-group__chevron {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
}

.is-admin-viewport .admin-side-group .admin-side-nav {
    padding-top: 6px;
}

.is-admin-viewport .admin-side-nav {
    gap: 4px;
}

.is-admin-viewport .admin-side-nav a {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.86rem;
}

.is-admin-viewport .admin-context-bar {
    padding: 12px 14px;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(38, 55, 71, 0.06);
}

.is-admin-viewport .admin-context-copy {
    gap: 3px;
}

.is-admin-viewport .admin-context-copy strong {
    font-size: 1rem;
}

.is-admin-viewport .admin-context-copy span:last-child {
    display: none;
}

.is-admin-viewport .admin-page-hero {
    padding: 18px 20px;
    border-radius: 20px;
}

.is-admin-viewport .admin-dashboard-grid {
    gap: 12px;
}

.is-admin-viewport .admin-dashboard-panels {
    gap: 14px;
}

.is-admin-viewport .admin-metric-card {
    min-height: 112px;
    padding: 18px;
}

.is-admin-viewport .admin-metric-card strong {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.is-admin-viewport .admin-review-row,
.is-admin-viewport .admin-quick-action {
    padding: 12px 14px;
    border-radius: 15px;
}

.is-admin-viewport .footer-admin-layout {
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.5fr);
    gap: 16px;
}

.is-admin-viewport .footer-admin-create {
    top: 88px;
}

.is-admin-viewport .footer-admin-details,
.is-admin-viewport .footer-admin-link-row {
    padding: 0.75rem;
    border-radius: 15px;
}

@media (max-width: 1120px) {
    .is-admin-viewport .admin-workspace,
    .is-admin-viewport .footer-admin-layout {
        grid-template-columns: 1fr;
    }

    .is-admin-viewport .admin-side-panel,
    .is-admin-viewport .footer-admin-create {
        position: static;
    }
}

@media (max-width: 780px) {
    .is-admin-viewport .admin-topbar,
    .is-admin-viewport .admin-topbar__primary,
    .is-admin-viewport .admin-topbar__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .is-admin-viewport .admin-topbar__actions {
        width: 100%;
    }

    .is-admin-viewport .admin-topbar__signal,
    .is-admin-viewport .admin-topbar__user,
    .is-admin-viewport .admin-topbar .btn,
    .is-admin-viewport .admin-topbar form {
        width: 100%;
    }
}

/* Admin usability width pass: compact sidebar, wider working area. */
.is-admin-viewport .admin-container {
    width: min(1840px, calc(100% - 22px));
}

.is-admin-viewport .admin-workspace {
    grid-template-columns: minmax(168px, 190px) minmax(0, 1fr);
    gap: 14px;
}

.is-admin-viewport .admin-main-panel {
    width: 100%;
}

.is-admin-viewport .admin-side-panel {
    top: 78px;
}

.is-admin-viewport .admin-side-card--profile,
.is-admin-viewport .admin-side-card--note {
    display: none;
}

.is-admin-viewport .admin-side-group {
    padding: 7px;
}

.is-admin-viewport .admin-side-nav a {
    padding: 7px 9px;
    font-size: 0.82rem;
}

.is-admin-viewport .account-directory-head,
.is-admin-viewport .admin-page-hero,
.is-admin-viewport .card,
.is-admin-viewport .table-card {
    padding: 22px;
}

.is-admin-viewport .admin-split-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.is-admin-viewport .admin-editor-form {
    width: 100%;
}

.is-admin-viewport .admin-editor-form .ck-editor,
.is-admin-viewport .admin-editor-form .ck-editor__main,
.is-admin-viewport .admin-editor-form .ck-content,
.is-admin-viewport .admin-field-group .rich-editor,
.is-admin-viewport .admin-field-group textarea {
    width: 100%;
}

.is-admin-viewport .admin-editor-form .ck-content {
    min-height: 420px;
}

.is-admin-viewport .footer-admin-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.is-admin-viewport .footer-admin-create {
    position: static;
}

.is-admin-viewport .footer-admin-sections {
    width: 100%;
}

.is-admin-viewport .footer-admin-edit-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 0.9rem 1rem;
}

.is-admin-viewport .footer-admin-edit-grid .grid-span-2,
.is-admin-viewport .footer-admin-create .grid-span-2 {
    grid-column: 1 / -1;
}

.is-admin-viewport .admin-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.is-admin-viewport .table-card table {
    min-width: 980px;
}

.is-admin-viewport .admin-user-actions {
    min-width: 190px;
}

@media (min-width: 1500px) {
    .is-admin-viewport .admin-workspace {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .is-admin-viewport .admin-split-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1120px) {
    .is-admin-viewport .admin-workspace {
        grid-template-columns: 1fr;
    }

    .is-admin-viewport .admin-side-card--profile {
        display: block;
    }
}

/* ============================================================
   Admin shell — clean rebuild (single source of truth)
   Replaces every previous .admin-* / .account-directory-head /
   .is-admin-viewport rule above. Uses new namespace
   .admin-shell-*, .admin-page-header, .admin-section, .admin-form,
   .admin-table, .admin-status, .admin-filters so it does not
   conflict with legacy declarations that survive in this file.
   ============================================================ */

:root {
    --admin-bg: #f4f6fa;
    --admin-surface: #ffffff;
    --admin-border: #e3e8ef;
    --admin-border-strong: #d1d8e2;
    --admin-text: #1a2733;
    --admin-text-soft: #5b6776;
    --admin-text-faint: #8693a3;
    --admin-primary: #2f6fa3;
    --admin-primary-dark: #214c70;
    --admin-primary-soft: #e8f0f8;
    --admin-danger: #b3433c;
    --admin-success: #2f7a55;
    --admin-warn: #b07a17;
    --admin-radius: 10px;
    --admin-radius-sm: 6px;
    --admin-shadow: 0 1px 2px rgba(15, 30, 50, 0.04), 0 1px 0 rgba(15, 30, 50, 0.02);
    --admin-header-h: 54px;
    --admin-sidenav-w: 220px;
    --admin-gutter: 22px;
}

/* Reset background of admin viewport — replaces gradient/grid backgrounds */
body.admin-shell {
    background: var(--admin-bg);
    color: var(--admin-text);
    min-height: 100vh;
}

body.admin-shell::before {
    display: none !important;
}

/* ----- Header ----- */
.admin-shell-header {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--admin-header-h);
    padding: 0 20px;
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-border);
}

.admin-shell-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--admin-text);
    text-decoration: none;
    font-weight: 700;
}

.admin-shell-brand__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--admin-primary);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}

.admin-shell-brand__name {
    font-size: 0.95rem;
    color: var(--admin-text);
    white-space: nowrap;
}

.admin-shell-header__spacer {
    flex: 1;
}

.admin-shell-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-shell-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--admin-border);
    border-radius: 7px;
    background: #fff;
}

.admin-shell-lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border-radius: 5px;
    color: var(--admin-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
}

.admin-shell-lang a.is-active {
    background: var(--admin-primary);
    color: #fff;
}

.admin-shell-user {
    color: var(--admin-text);
    font-size: 0.86rem;
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-shell-link {
    color: var(--admin-text-soft);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-shell-link:hover {
    background: var(--admin-primary-soft);
    color: var(--admin-primary-dark);
}

.admin-shell-logout {
    margin: 0;
}

.admin-shell-logout button {
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--admin-border-strong);
    background: #fff;
    color: var(--admin-text);
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-shell-logout button:hover {
    background: var(--admin-bg);
    border-color: var(--admin-primary);
    color: var(--admin-primary-dark);
}

/* ----- Body grid ----- */
.admin-shell-body {
    display: grid;
    grid-template-columns: var(--admin-sidenav-w) minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - var(--admin-header-h));
}

/* ----- Sidebar ----- */
.admin-shell-sidenav {
    position: sticky;
    top: var(--admin-header-h);
    align-self: start;
    height: calc(100vh - var(--admin-header-h));
    overflow-y: auto;
    padding: 18px 12px 28px;
    background: var(--admin-surface);
    border-inline-end: 1px solid var(--admin-border);
}

.admin-shell-sidenav__group {
    margin-bottom: 18px;
}

.admin-shell-sidenav__title {
    margin: 0 0 6px;
    padding: 0 10px;
    color: var(--admin-text-faint);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-shell-sidenav__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-shell-sidenav__list a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--admin-text);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
    transition: background 0.12s ease, color 0.12s ease;
}

.admin-shell-sidenav__list a:hover {
    background: var(--admin-bg);
    color: var(--admin-primary-dark);
}

.admin-shell-sidenav__list a.is-active {
    background: var(--admin-primary-soft);
    color: var(--admin-primary-dark);
    font-weight: 700;
}

/* ----- Main content ----- */
.admin-shell-main {
    min-width: 0;
    padding: 24px 28px 48px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ----- Page header ----- */
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--admin-border);
    margin: 0;
}

.admin-page-header h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--admin-text);
    line-height: 1.2;
}

.admin-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ----- Sections ----- */
.admin-section {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--admin-text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-empty {
    margin: 0;
    padding: 18px;
    text-align: center;
    color: var(--admin-text-faint);
    font-size: 0.88rem;
    background: var(--admin-bg);
    border: 1px dashed var(--admin-border-strong);
    border-radius: var(--admin-radius);
}

/* ----- Forms ----- */
.admin-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-form__row {
    display: grid;
    gap: 14px;
}

.admin-form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form__row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-form__row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--admin-text);
}

.admin-form__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.admin-form__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--admin-text);
}

.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form input[type="date"],
.admin-form input[type="url"],
.admin-form input[type="search"],
.admin-form input[type="tel"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-radius-sm);
    background: #fff;
    color: var(--admin-text);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 163, 0.12);
}

.admin-form textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.admin-form__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid var(--admin-border);
}

.admin-form__footer .admin-check {
    margin-inline-end: auto;
}

.admin-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--admin-text);
    cursor: pointer;
}

.admin-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--admin-primary);
    cursor: pointer;
}

.admin-form--inline {
    gap: 8px;
    padding: 12px;
    background: var(--admin-bg);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    margin-top: 8px;
}

/* ----- Filters bar ----- */
.admin-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
    padding: 16px 18px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
}

.admin-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--admin-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-filters label span {
    line-height: 1;
}

.admin-filters input,
.admin-filters select {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-radius-sm);
    background: #fff;
    color: var(--admin-text);
    font-size: 0.84rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.admin-filters input:focus,
.admin-filters select:focus {
    outline: none;
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 163, 0.12);
}

.admin-filters__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
}

/* ----- Tables ----- */
.admin-table {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    overflow: auto;
}

.admin-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.admin-table thead th {
    padding: 12px 14px;
    text-align: start;
    background: var(--admin-bg);
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text);
    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover td {
    background: var(--admin-bg);
}

.admin-table__actions {
    width: 1%;
    white-space: nowrap;
}

.admin-table__empty {
    text-align: center;
    padding: 28px 14px !important;
    color: var(--admin-text-faint);
    font-style: italic;
}

.admin-user-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}

.admin-user-cell strong {
    color: var(--admin-text);
    font-size: 0.88rem;
    font-weight: 700;
}

.admin-user-cell span {
    color: var(--admin-text-soft);
    font-size: 0.78rem;
}

.admin-photo-preview {
    width: 88px;
    height: 88px;
    display: inline-flex;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.admin-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-photo-preview__btn {
    margin-top: 8px;
}

.admin-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.admin-action-row form {
    margin: 0;
}

/* ----- Status pills ----- */
.admin-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    background: var(--admin-bg);
    color: var(--admin-text-soft);
    border: 1px solid var(--admin-border);
    white-space: nowrap;
}

.admin-status + .admin-status {
    margin-inline-start: 4px;
}

.admin-status--ok,
.admin-status--active {
    background: rgba(47, 122, 85, 0.1);
    color: var(--admin-success);
    border-color: rgba(47, 122, 85, 0.22);
}

.admin-status--muted,
.admin-status--inactive,
.admin-status--draft {
    background: var(--admin-bg);
    color: var(--admin-text-soft);
    border-color: var(--admin-border-strong);
}

.admin-status--warn,
.admin-status--pending {
    background: rgba(176, 122, 23, 0.1);
    color: var(--admin-warn);
    border-color: rgba(176, 122, 23, 0.22);
}

.admin-status--danger,
.admin-status--banned {
    background: rgba(179, 67, 60, 0.1);
    color: var(--admin-danger);
    border-color: rgba(179, 67, 60, 0.22);
}

/* ----- Stats / dashboard ----- */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.admin-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    text-decoration: none;
    color: var(--admin-text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.admin-stat:hover {
    border-color: var(--admin-primary);
    transform: translateY(-1px);
}

.admin-stat__value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--admin-text);
    line-height: 1.1;
}

.admin-stat__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--admin-text-soft);
}

.admin-review-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-review-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--admin-bg);
    border-radius: var(--admin-radius-sm);
    color: var(--admin-text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}

.admin-review-item:hover {
    background: var(--admin-primary-soft);
}

.admin-review-item strong {
    min-width: 36px;
    text-align: end;
    color: var(--admin-primary-dark);
    font-size: 1rem;
    font-weight: 800;
}

/* ----- Collapsible (footer CMS sections) ----- */
.admin-collapsible {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-collapsible__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-collapsible__head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--admin-text);
}

.admin-collapsible__meta {
    margin: 2px 0 0;
    color: var(--admin-text-faint);
    font-size: 0.78rem;
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", monospace;
}

.admin-collapsible__body {
    color: var(--admin-text-soft);
    font-size: 0.88rem;
    line-height: 1.6;
}

.admin-collapsible__details {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-bg);
}

.admin-collapsible__details > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--admin-text);
    list-style: none;
}

.admin-collapsible__details > summary::-webkit-details-marker {
    display: none;
}

.admin-collapsible__details > summary::before {
    content: "▸";
    display: inline-block;
    margin-inline-end: 8px;
    color: var(--admin-text-soft);
    transition: transform 0.15s ease;
}

.admin-collapsible__details[open] > summary::before {
    transform: rotate(90deg);
}

.admin-collapsible__details[open] > summary {
    border-bottom: 1px solid var(--admin-border);
}

.admin-collapsible__details > form,
.admin-collapsible__details > .admin-form {
    padding: 14px;
}

.admin-collapsible__details > form + form {
    border-top: 1px solid var(--admin-border);
}

.admin-collapsible__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-collapsible__list-title {
    margin: 0;
    color: var(--admin-text-faint);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-link-row {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: #fff;
}

.admin-link-row > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
}

.admin-link-row > summary::-webkit-details-marker {
    display: none;
}

.admin-link-row > summary > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-link-row > summary strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--admin-text);
}

.admin-link-row > summary small {
    font-size: 0.76rem;
    color: var(--admin-text-faint);
    font-family: ui-monospace, "Cascadia Mono", monospace;
}

.admin-link-row[open] > summary {
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-bg);
}

.admin-link-row > .admin-form {
    padding: 14px;
}

.admin-link-row > form {
    padding: 0 14px 14px;
}

/* ----- Inline edit (success stories table) ----- */
.admin-inline-edit summary {
    display: inline-flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.admin-inline-edit summary::-webkit-details-marker {
    display: none;
}

.admin-inline-edit[open] summary {
    margin-bottom: 8px;
}

/* ----- Buttons (admin scope) ----- */
.admin-shell-main .btn,
.admin-dialog .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--admin-radius-sm);
    border: 1px solid transparent;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.admin-shell-main .btn-small,
.admin-dialog .btn-small {
    height: 30px;
    padding: 0 12px;
    font-size: 0.8rem;
}

.admin-shell-main .btn-primary,
.admin-dialog .btn-primary {
    background: var(--admin-primary);
    border-color: var(--admin-primary);
    color: #fff;
}

.admin-shell-main .btn-primary:hover,
.admin-dialog .btn-primary:hover {
    background: var(--admin-primary-dark);
    border-color: var(--admin-primary-dark);
}

.admin-shell-main .btn-secondary,
.admin-dialog .btn-secondary {
    background: #fff;
    border-color: var(--admin-border-strong);
    color: var(--admin-text);
}

.admin-shell-main .btn-secondary:hover,
.admin-dialog .btn-secondary:hover {
    background: var(--admin-bg);
    border-color: var(--admin-primary);
    color: var(--admin-primary-dark);
}

.admin-shell-main .btn-danger,
.admin-dialog .btn-danger {
    background: #fff;
    border-color: rgba(179, 67, 60, 0.4);
    color: var(--admin-danger);
}

.admin-shell-main .btn-danger:hover,
.admin-dialog .btn-danger:hover {
    background: var(--admin-danger);
    border-color: var(--admin-danger);
    color: #fff;
}

/* ----- Pagination (Laravel default) ----- */
.admin-shell-main nav[role="navigation"] {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
}

.admin-shell-main nav[role="navigation"] svg {
    width: 16px;
    height: 16px;
}

/* ----- Footer ----- */
.admin-shell-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 28px;
    background: var(--admin-surface);
    border-top: 1px solid var(--admin-border);
    color: var(--admin-text-soft);
    font-size: 0.82rem;
}

.admin-shell-footer > div {
    display: flex;
    gap: 18px;
}

.admin-shell-footer a {
    color: var(--admin-text-soft);
    text-decoration: none;
}

.admin-shell-footer a:hover {
    color: var(--admin-primary);
}

/* ----- Flash messages (inside admin) ----- */
body.admin-shell .alert,
body.admin-shell .flash-stack > * {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 12px 16px;
    color: var(--admin-text);
    font-size: 0.88rem;
    box-shadow: var(--admin-shadow);
}

/* ----- Editor (CKEditor) sizing inside admin forms ----- */
.admin-form .ck-editor,
.admin-form .ck-editor__main,
.admin-form .ck-content,
.admin-form .rich-editor {
    width: 100%;
}

.admin-form .ck-editor__editable_inline,
.admin-form .ck-content {
    min-height: 380px;
    border-radius: var(--admin-radius-sm) !important;
}

.admin-form .ck.ck-toolbar {
    border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0 !important;
    border-color: var(--admin-border-strong) !important;
}

.admin-form .ck.ck-editor__main > .ck-editor__editable {
    border-radius: 0 0 var(--admin-radius-sm) var(--admin-radius-sm) !important;
    border-color: var(--admin-border-strong) !important;
}

/* ----- Admin dialog (users edit/create) ----- */
body.admin-shell .admin-dialog {
    padding: 0;
    border: none;
    border-radius: var(--admin-radius);
    background: transparent;
}

body.admin-shell .admin-dialog::backdrop {
    background: rgba(15, 30, 50, 0.42);
    backdrop-filter: blur(2px);
}

body.admin-shell .admin-dialog-card {
    background: var(--admin-surface);
    border-radius: var(--admin-radius);
    box-shadow: 0 20px 60px rgba(15, 30, 50, 0.2);
    padding: 22px 24px;
    width: min(820px, calc(100vw - 32px));
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

body.admin-shell .admin-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: 18px;
}

body.admin-shell .admin-dialog-head h2 {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--admin-text);
}

body.admin-shell .admin-dialog-head p {
    margin: 0;
    color: var(--admin-text-soft);
    font-size: 0.84rem;
}

body.admin-shell .admin-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--admin-border);
}

body.admin-shell .dialog-close {
    border: none;
    background: transparent;
    color: var(--admin-text-soft);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

body.admin-shell .dialog-close:hover {
    background: var(--admin-bg);
    color: var(--admin-text);
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .admin-shell-body {
        grid-template-columns: 1fr;
    }

    .admin-shell-sidenav {
        position: static;
        height: auto;
        width: 100%;
        border-inline-end: none;
        border-bottom: 1px solid var(--admin-border);
        padding: 14px 18px;
    }

    .admin-shell-sidenav__group {
        margin-bottom: 12px;
    }
}

@media (max-width: 768px) {
    .admin-shell-header {
        height: auto;
        padding: 10px 14px;
        flex-wrap: wrap;
    }

    .admin-shell-main {
        padding: 18px 16px 36px;
    }

    .admin-shell-user {
        display: none;
    }

    .admin-form__row--2,
    .admin-form__row--3,
    .admin-form__row--4 {
        grid-template-columns: 1fr;
    }

    .admin-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ----- RTL adjustments ----- */
html[dir="rtl"] .admin-shell-sidenav {
    border-inline-end: 1px solid var(--admin-border);
    border-inline-start: none;
}

html[dir="rtl"] .admin-collapsible__details > summary::before {
    content: "◂";
}

html[dir="rtl"] .admin-collapsible__details[open] > summary::before {
    transform: rotate(-90deg);
}

/* ============================================================
   Legacy compatibility — reshape old hero/context blocks for
   admin pages that still use .account-directory-head and friends.
   This makes every admin screen consistent without rewriting
   each Blade file.
   ============================================================ */

/* Old hero block → flat page header */
.admin-shell-main .account-directory-head,
.admin-shell-main .admin-page-hero {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 14px;
    margin: 0;
    border-bottom: 1px solid var(--admin-border);
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--admin-text);
}

.admin-shell-main .account-directory-head > div:first-child,
.admin-shell-main .admin-page-hero > div:first-child {
    display: contents;
}

.admin-shell-main .account-directory-head .eyebrow,
.admin-shell-main .admin-page-hero .eyebrow {
    display: none !important;
}

.admin-shell-main .account-directory-head h1,
.admin-shell-main .admin-page-hero h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--admin-text);
    line-height: 1.2;
    order: 0;
}

.admin-shell-main .account-directory-head p,
.admin-shell-main .admin-page-hero p {
    display: none !important;
}

.admin-shell-main .account-directory-head .btn,
.admin-shell-main .account-directory-head form,
.admin-shell-main .admin-page-hero .btn,
.admin-shell-main .admin-page-hero form {
    order: 2;
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* Section title used by older pages */
.admin-shell-main .account-section-title {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-shell-main .account-section-title .eyebrow {
    display: none !important;
}

.admin-shell-main .account-section-title h2,
.admin-shell-main .account-section-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--admin-text);
}

.admin-shell-main .account-section-title span,
.admin-shell-main .account-section-title small {
    display: block;
    color: var(--admin-text-soft);
    font-size: 0.82rem;
    font-weight: 400;
    margin-top: 2px;
}

/* Generic .card and .form-card inside admin shell — flat surface */
.admin-shell-main .card,
.admin-shell-main .form-card,
.admin-shell-main .table-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 20px 22px;
    color: var(--admin-text);
}

.admin-shell-main .table-card {
    padding: 0;
    overflow: auto;
}

.admin-shell-main .table-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.admin-shell-main .table-card thead th {
    padding: 12px 14px;
    text-align: start;
    background: var(--admin-bg);
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-shell-main .table-card tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-shell-main .table-card tbody tr:last-child td {
    border-bottom: none;
}

.admin-shell-main .table-card tbody tr:hover td {
    background: var(--admin-bg);
}

/* Generic inputs inside admin shell */
.admin-shell-main input[type="text"],
.admin-shell-main input[type="email"],
.admin-shell-main input[type="password"],
.admin-shell-main input[type="number"],
.admin-shell-main input[type="date"],
.admin-shell-main input[type="url"],
.admin-shell-main input[type="search"],
.admin-shell-main input[type="tel"],
.admin-shell-main input[type="file"],
.admin-shell-main select,
.admin-shell-main textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--admin-border-strong);
    border-radius: var(--admin-radius-sm);
    background: #fff;
    color: var(--admin-text);
    font-size: 0.88rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-shell-main input:focus,
.admin-shell-main select:focus,
.admin-shell-main textarea:focus {
    outline: none;
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 163, 0.12);
}

.admin-shell-main label {
    color: var(--admin-text);
    font-size: 0.84rem;
    font-weight: 600;
}

/* Section gap utility used by some legacy pages */
.admin-shell-main .section-gap + .section-gap,
.admin-shell-main .section-gap {
    margin: 0;
}

/* Hide the old admin-side-card profile block if some legacy partial leaks it */
.admin-shell-main .admin-side-card,
.admin-shell-main .admin-context-bar {
    display: none !important;
}

/* Legacy badges → soft pills */
.admin-shell-main .ghost-badge,
.admin-shell-main .badge-inline,
.admin-shell-main .status-pill,
.admin-shell-main .account-score {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--admin-bg);
    color: var(--admin-text-soft);
    border: 1px solid var(--admin-border);
}

.admin-shell-main .badge-inline,
.admin-shell-main .status-pill-active {
    background: rgba(47, 122, 85, 0.1);
    color: var(--admin-success);
    border-color: rgba(47, 122, 85, 0.22);
}

.admin-shell-main .status-pill-banned {
    background: rgba(179, 67, 60, 0.1);
    color: var(--admin-danger);
    border-color: rgba(179, 67, 60, 0.22);
}

/* ============================================
   ADMIN REPORTS PAGE STYLES
   ============================================ */

.reports-table-card {
    overflow-x: auto;
}

.reports-table {
    width: 100%;
    border-collapse: collapse;
}

.reports-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-weight: 600;
    padding: 14px 12px;
    text-align: start;
    font-size: 0.9rem;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.reports-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}

.report-row:hover {
    background: rgba(20, 92, 75, 0.02);
}

.report-row-new {
    background: rgba(255, 193, 7, 0.08);
}

.report-row-new:hover {
    background: rgba(255, 193, 7, 0.12);
}

.report-badge-new {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid #ffc107;
}

.badge-pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: #dc3545;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.report-reason {
    font-weight: 600;
    color: #212529;
    font-size: 0.95rem;
}

.report-details {
    color: #6c757d;
    font-size: 0.85rem;
    margin-top: 4px;
    max-width: 200px;
    overflow-wrap: break-word;
}

.report-date {
    display: block;
    font-weight: 500;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-new {
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-open {
    background: rgba(23, 162, 184, 0.15);
    color: #0c5460;
    border: 1px solid rgba(23, 162, 184, 0.3);
}

.status-resolved {
    background: rgba(40, 167, 69, 0.15);
    color: #155724;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.badge-danger {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    margin-inline-start: 6px;
}

.badge-warning {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.badge-success {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(40, 167, 69, 0.15);
    color: #155724;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.badge-pending {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(108, 117, 125, 0.15);
    color: #495057;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.warning-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.warning-status small {
    color: #6c757d;
    font-size: 0.75rem;
}

.report-actions-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-actions-wrapper .btn {
    white-space: nowrap;
}

.btn-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3);
}

.report-action-form {
    width: 100%;
    background: #f8f9fa;
    padding: 16px;
    border-radius: 12px;
    margin-top: 12px;
    border: 1px solid #e9ecef;
}

.report-action-form .form-group {
    margin-bottom: 12px;
}

.report-action-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 6px;
}

.report-action-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
}

.report-action-form textarea:focus {
    border-color: #145c4b;
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 92, 75, 0.1);
}

.form-check {
    margin-bottom: 12px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.resolved-info {
    background: rgba(40, 167, 69, 0.08);
    padding: 12px;
    border-radius: 8px;
    border-inline-start: 3px solid #28a745;
}

.admin-notes {
    font-size: 0.9rem;
    color: #212529;
    margin-bottom: 8px;
    font-style: italic;
}

.resolved-date {
    display: block;
    color: #6c757d;
    font-size: 0.8rem;
}

.no-reports {
    text-align: center;
    padding: 60px 20px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    font-size: 28px;
    border-radius: 50%;
}

.empty-state p {
    color: #6c757d;
    font-size: 1rem;
}

/* Responsive reports table */
@media (max-width: 1100px) {
    .reports-table th,
    .reports-table td {
        padding: 12px 8px;
        font-size: 0.85rem;
    }
    
    .report-details {
        max-width: 150px;
    }
}

@media (max-width: 900px) {
    .reports-table {
        display: block;
        overflow-x: auto;
    }
    
    .report-actions-wrapper {
        flex-direction: column;
    }
    
    .report-actions-wrapper .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   PROFILE REPORT FORM STYLES
   ============================================ */

.profile-report-section {
    margin-top: 24px;
    border-top: 1px solid rgba(20, 92, 75, 0.1);
    padding-top: 24px;
}

.btn-report-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 193, 7, 0.1);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-report-toggle:hover {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    transform: translateY(-1px);
}

.btn-report-toggle svg {
    flex-shrink: 0;
}

.report-form {
    margin-top: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 1px solid rgba(20, 92, 75, 0.12);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.report-form-header {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(255, 193, 7, 0.05) 100%);
    padding: 20px 24px;
    border-bottom: 1px solid rgba(20, 92, 75, 0.08);
}

.report-form-header h4 {
    margin: 0 0 8px;
    color: #721c24;
    font-size: 1.1rem;
    font-weight: 700;
}

.report-form-header p {
    margin: 0;
    color: #856404;
    font-size: 0.9rem;
}

.report-form-content {
    padding: 24px;
}

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

.field-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #495057;
    margin-bottom: 8px;
}

.field-select,
.field-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ced4da;
    border-radius: 10px;
    font-size: 0.95rem;
    background: #fff;
    transition: all 0.2s ease;
}

.field-select:focus,
.field-textarea:focus {
    border-color: #145c4b;
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 92, 75, 0.1);
}

.field-select {
    cursor: pointer;
}

.field-textarea {
    resize: vertical;
    min-height: 100px;
}

.report-form-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(23, 162, 184, 0.08);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
}

.report-form-notice svg {
    flex-shrink: 0;
    color: #0c5460;
}

.report-form-notice span {
    font-size: 0.85rem;
    color: #0c5460;
    font-weight: 500;
}

.report-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.report-actions .btn {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-actions .btn-secondary {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #ced4da;
}

.report-actions .btn-secondary:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.report-actions .btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

.report-actions .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Report form text alignment — logical, auto-adapts to dir attr */
.report-form-header h4,
.report-form-header p,
.field-label,
.report-form-notice span {
    text-align: start;
}


@media (max-width: 600px) {
    .report-form-header,
    .report-form-content {
        padding: 16px;
    }
    
    .report-actions {
        flex-direction: column;
    }
    
    .report-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   USER WARNING PAGE STYLES
   ============================================ */

.warning-page-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid rgba(20, 92, 75, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.warning-header {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(255, 193, 7, 0.1) 100%);
    padding: 32px;
    text-align: center;
    border-bottom: 1px solid rgba(20, 92, 75, 0.08);
}

.warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(220, 53, 69, 0.3);
}

.warning-icon svg {
    width: 40px;
    height: 40px;
}

.warning-header h2 {
    margin: 0;
    color: #721c24;
    font-size: 1.5rem;
    font-weight: 700;
}

.warning-content {
    padding: 32px;
}

.warning-message-box {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.warning-message-box h3 {
    margin: 0 0 12px;
    color: #856404;
    font-size: 1rem;
    font-weight: 600;
}

.warning-message-text {
    margin: 0;
    color: #212529;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 500;
}

.warning-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 92, 75, 0.04);
    padding: 12px 16px;
    border-radius: 10px;
}

.detail-label {
    color: #6c757d;
    font-size: 0.9rem;
}

.detail-value {
    color: #212529;
    font-weight: 600;
}

.strike-badge {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
}

.warning-severe-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.warning-severe-alert svg {
    flex-shrink: 0;
    color: #dc3545;
}

.warning-severe-alert span {
    color: #721c24;
    font-weight: 600;
    font-size: 0.95rem;
}

.warning-acknowledgment {
    border-top: 1px solid rgba(20, 92, 75, 0.08);
    padding-top: 24px;
}

.acknowledgment-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(23, 162, 184, 0.08);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.acknowledgment-notice svg {
    flex-shrink: 0;
    color: #0c5460;
}

.acknowledgment-notice span {
    color: #0c5460;
    font-weight: 500;
    font-size: 0.95rem;
}

.acknowledgment-checkbox {
    margin-bottom: 24px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #145c4b;
}

.checkbox-text {
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.5;
}

.btn-acknowledge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, #145c4b 0%, #1f8a70 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(20, 92, 75, 0.3);
}

.btn-acknowledge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(20, 92, 75, 0.4);
}

.warning-acknowledged {
    border-top: 1px solid rgba(20, 92, 75, 0.08);
    padding-top: 24px;
}

.acknowledged-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 12px;
    padding: 20px;
}

.acknowledged-badge svg {
    flex-shrink: 0;
    color: #28a745;
}

.acknowledged-badge span {
    color: #155724;
    font-weight: 600;
    font-size: 1rem;
}

/* Warning page text alignment — logical, auto-adapts to dir attr */
.warning-header h2,
.warning-message-text,
.checkbox-text {
    text-align: start;
}

@media (max-width: 600px) {
    .warning-header {
        padding: 24px;
    }
    
    .warning-icon {
        width: 60px;
        height: 60px;
    }
    
    .warning-icon svg {
        width: 30px;
        height: 30px;
    }
    
    .warning-header h2 {
        font-size: 1.2rem;
    }
    
    .warning-content {
        padding: 20px;
    }
    
    .warning-details {
        flex-direction: column;
    }
    
    .detail-row {
        width: 100%;
    }
}

/* Admin sidebar badge */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 10px;
    margin-inline-start: 8px;
    animation: pulse 2s infinite;
}

.admin-shell-sidenav__list a.has-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* ============================================
   MOBILE RESPONSIVE OVERHAUL - 2026-04-14
   Focus: dashboard, profile edit, account sidebar,
   hero cards, mobile headers, forms, buttons
   ============================================ */

html, body {
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

.card,
.table-card,
.account-user-card,
.account-summary-card,
.account-kpi-card,
.account-notifications-box,
.account-search-box,
.account-promo-bar,
.account-form-card,
.account-page-hero,
.account-section,
.account-dashboard-priority-callout,
.account-dashboard-actions-grid > *,
.account-dashboard-status-grid > *,
.account-dashboard-activity-grid > * {
    min-width: 0;
}

.account-user-card,
.account-summary-card,
.account-kpi-card,
.account-notifications-box,
.account-search-box,
.account-promo-bar,
.account-form-card,
.account-page-hero,
.account-dashboard-priority-callout {
    overflow: hidden;
}

.account-page-grid,
.account-layout,
.account-dashboard-grid-main,
.account-dashboard-grid-secondary,
.account-dashboard-actions-grid,
.account-dashboard-status-grid,
.account-dashboard-activity-grid,
.account-field-grid,
.account-search-grid,
.filter-grid,
.profile-edit-photo-panel,
.profile-edit-quickfacts,
.profile-page-grid,
.profile-panel-grid,
.dashboard-grid {
    min-width: 0;
}

.account-user-card *,
.account-page-main *,
.account-sidebar *,
.account-form-card *,
.account-page-hero *,
.account-dashboard-priority-callout *,
.profile-panel *,
.profile-page-main * {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.account-user-card img,
.account-profile-card img,
.profile-photo,
.profile-avatar,
.avatar,
.user-avatar,
.account-user-avatar img {
    object-fit: cover;
}

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

.btn,
button,
.account-inline-actions > *,
.form-actions > * {
    max-width: 100%;
}

.account-dashboard-priority-callout .btn,
.account-dashboard-priority-callout a,
.account-dashboard-priority-callout button,
.account-inline-actions .btn,
.form-actions .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .page-shell,
    .footer-shell {
        padding-inline: 12px;
    }

    .site-header {
        padding: 8px 0 10px;
    }

    .nav-shell,
    .auth-header-shell {
        border-radius: 18px;
        padding: 10px 12px;
    }

    .brand-mark,
    .brand-logo,
    .site-logo {
        max-width: 100%;
    }

    .account-page-grid,
    .account-layout,
    .profile-page-grid,
    .profile-layout,
    .dashboard-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .account-sidebar,
    .account-profile-sidebar {
        order: 2;
        width: 100%;
        display: grid;
        gap: 14px;
    }

    .account-page-main,
    .profile-page-main,
    .dashboard-main {
        order: 1;
        width: 100%;
        display: grid;
        gap: 14px;
    }

    .account-user-card,
    .account-summary-card,
    .account-kpi-card,
    .account-notifications-box,
    .account-search-box,
    .account-promo-bar,
    .account-form-card,
    .account-page-hero,
    .account-dashboard-priority-callout,
    .profile-panel,
    .table-card,
    .card {
        width: 100%;
        border-radius: 18px;
        padding: 14px;
    }

    .account-page-hero {
        padding: 16px;
    }

    .account-page-hero h1,
    .account-page-hero h2,
    .account-summary-copy h1,
    .account-summary-copy h2,
    .dashboard-hero-copy h1,
    .dashboard-hero-copy h2 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .account-page-hero p,
    .account-summary-copy p,
    .dashboard-hero-copy p,
    .account-user-intro p,
    .profile-panel p,
    .card p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .account-tabs-nav {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 4px;
        border-radius: 16px;
    }

    .account-tab {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 0.82rem;
        border-radius: 12px;
    }

    .account-user-card,
    .account-profile-card,
    .profile-panel.profile-panel--sidebar {
        position: static !important;
        top: auto !important;
    }

    .account-user-head,
    .account-section-head,
    .account-directory-head,
    .account-alert,
    .account-summary-card,
    .account-subnav-top,
    .account-promo-bar,
    .profile-page-head,
    .profile-section-head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .account-dashboard-actions-grid,
    .account-dashboard-status-grid,
    .account-dashboard-activity-grid,
    .account-kpi-grid,
    .account-search-grid,
    .filter-grid,
    .account-field-grid,
    .directory-members-grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .account-dashboard-priority-callout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .account-dashboard-priority-callout .btn,
    .account-dashboard-priority-callout a,
    .account-dashboard-priority-callout button,
    .account-inline-actions .btn,
    .form-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        padding: 12px 14px;
        border-radius: 12px;
    }

    .form-actions,
    .account-inline-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .account-user-avatar,
    .profile-avatar,
    .avatar {
        margin-inline: auto;
    }

    .account-user-intro,
    .account-summary-copy,
    .dashboard-hero-copy {
        text-align: center;
    }

    html[dir="rtl"] .account-user-intro,
    html[dir="rtl"] .account-summary-copy,
    html[dir="rtl"] .dashboard-hero-copy {
        text-align: center;
    }

    .account-user-card .quick-links,
    .account-user-card .quick-actions,
    .account-sidebar .btn,
    .account-sidebar a.btn {
        width: 100%;
    }

    .profile-edit-photo-panel,
    .profile-edit-quickfacts,
    .compose-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .profile-edit-photo-frame {
        width: min(100%, 180px);
        margin-inline: auto;
    }

    .profile-page-status,
    .account-user-status,
    .account-user-badges {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    input,
    select,
    textarea {
        width: 100%;
        min-height: 44px;
    }

    textarea {
        min-height: 120px;
    }

    .table-card,
    .table-shell,
    .admin-table-shell {
        overflow-x: auto;
    }

    .table-card table,
    .table-shell table,
    .admin-table-shell table {
        min-width: 640px;
    }

    .site-header.is-open .nav-links,
    .site-header.is-open .nav-actions,
    .site-header.site-header-auth.is-open .auth-header-links,
    .site-header.site-header-auth.is-open .auth-header-actions {
        display: grid;
        gap: 8px;
    }

    .nav-links a,
    .nav-actions > *,
    .nav-actions form,
    .nav-actions form button,
    .auth-header-links a,
    .auth-header-actions a,
    .auth-header-actions button,
    .auth-header-actions form {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .page-shell,
    .footer-shell {
        padding-inline: 10px;
    }

    .nav-shell,
    .auth-header-shell {
        border-radius: 16px;
        padding: 8px 10px;
    }

    .brand-copy,
    .site-title,
    .site-tagline {
        max-width: 100%;
    }

    .account-user-card,
    .account-summary-card,
    .account-kpi-card,
    .account-notifications-box,
    .account-search-box,
    .account-promo-bar,
    .account-form-card,
    .account-page-hero,
    .account-dashboard-priority-callout,
    .profile-panel,
    .table-card,
    .card {
        padding: 12px;
        border-radius: 16px;
    }

    .account-page-hero h1,
    .account-page-hero h2,
    .account-summary-copy h1,
    .account-summary-copy h2,
    .dashboard-hero-copy h1,
    .dashboard-hero-copy h2 {
        font-size: 1.15rem;
    }

    .account-page-hero p,
    .account-summary-copy p,
    .dashboard-hero-copy p {
        font-size: 0.9rem;
    }

    .account-tab {
        min-height: 42px;
        padding: 9px 12px;
        font-size: 0.78rem;
    }

    .btn,
    button,
    .account-inline-actions .btn,
    .form-actions .btn {
        min-height: 42px;
        padding: 11px 12px;
        font-size: 0.92rem;
    }

    .account-user-intro strong,
    .account-user-intro p,
    .account-user-meta span,
    .account-summary-copy strong,
    .account-summary-copy span {
        white-space: normal !important;
        text-overflow: clip;
        overflow: visible;
    }

    .account-mini-actions,
    .account-user-meta,
    .account-stat-row,
    .account-kpi-list,
    .account-summary-stats {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .profile-edit-photo-frame {
        width: min(100%, 150px);
    }

    .message-item {
        max-width: 96%;
    }
}

/* Safer mobile rendering for account/profile pages */
@media (max-width: 768px) {
    body.is-authenticated .account-page-grid > * {
        width: 100%;
    }

    body.is-authenticated .account-sidebar {
        margin-top: 0;
    }

    body.is-authenticated .account-page-main {
        margin-bottom: 0;
    }
}

/* ============================================================
   MOBILE-FIRST RESPONSIVE ENHANCEMENTS - FINAL
   Layout compattato per mobile - OVERRIDE TOTALE
   ============================================================ */

/* Base mobile-first styles (max-width: 576px) - OVERRIDE EVERYTHING */
@media (max-width: 576px) {
    :root {
        --radius-xl: 14px !important;
        --radius-lg: 10px !important;
        --radius-md: 8px !important;
        --radius-sm: 6px !important;
        --shell-gutter: 10px !important;
    }

    /* Container - padding minimo */
    .container {
        padding-inline: 10px !important;
        max-width: 100% !important;
    }

    /* ===== HERO SECTION - ULTRA Compatto ===== */
    .hero-shell {
        padding: 16px 0 20px !important;
        margin: 0 -10px !important;
        border-radius: 0 !important;
        min-height: auto !important;
    }

    .hero {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 10px !important;
        align-items: center !important;
    }

    .hero-copy {
        max-width: 100% !important;
        text-align: center !important;
        order: 1 !important;
    }

    .hero-copy h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .hero .lead {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    .hero-actions {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
    }

    .hero-visual {
        display: none !important;
    }

    /* Stats ribbon - orizzontale compatta */
    .stats-ribbon {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 10px 6px !important;
        margin-top: 14px !important;
    }

    .stat-ribbon-item {
        flex: 0 0 calc(50% - 3px) !important;
        padding: 8px 4px !important;
        min-width: auto !important;
        border-radius: 10px !important;
    }

    .stat-ribbon-item strong {
        font-size: 1rem !important;
        display: block !important;
    }

    .stat-ribbon-item span {
        font-size: 0.65rem !important;
    }

    /* ===== GRID - Sempre 1 colonna ===== */
    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ===== BENEFIT CARDS - Compatte ===== */
    .benefit-card {
        padding: 14px !important;
        text-align: center !important;
        border-radius: 10px !important;
    }

    .benefit-icon {
        width: 36px !important;
        height: 36px !important;
        margin: 0 auto 8px !important;
        border-radius: 10px !important;
    }

    .benefit-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .benefit-card h3 {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
    }

    .benefit-card p {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
    }

    /* ===== PROFILE CARDS - Compatte ===== */
    .profile-card,
    .member-card {
        max-width: 100% !important;
        border-radius: 10px !important;
    }

    .profile-photo-wrap,
    .member-photo-wrap {
        height: 160px !important;
    }

    .profile-card-body {
        padding: 12px !important;
    }

    .profile-title strong {
        font-size: 1rem !important;
    }

    .profile-title .muted {
        font-size: 0.8rem !important;
    }

    .profile-meta {
        font-size: 0.7rem !important;
    }

    .profile-snippet {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
        margin: 6px 0 !important;
    }

    .actions-inline {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .actions-inline .btn {
        width: 100% !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Badges */
    .badge {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
    }

    .ghost-badge {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
    }

    /* ===== SECTION HEADINGS ===== */
    .section-heading {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
        margin-bottom: 14px !important;
    }

    .section-heading h2 {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }

    .section-heading p {
        font-size: 0.8rem !important;
    }

    .section-heading .btn {
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto !important;
    }

    .section-gap {
        margin: 20px 0 !important;
    }

    /* ===== NAVIGATION MOBILE ===== */
    .site-header {
        padding: 6px 0 !important;
    }

    .nav-shell {
        padding: 8px 10px !important;
    }

    .brand {
        font-size: 0.8rem !important;
        gap: 6px !important;
    }

    .brand-mark {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
    }

    .brand-copy small {
        display: none !important;
    }

    /* Nav Toggle Button */
    .nav-toggle {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }

    .nav-toggle span {
        width: 16px !important;
        height: 2px !important;
    }

    .nav-toggle span::before {
        top: -4px !important;
    }

    .nav-toggle span::after {
        top: 4px !important;
    }

    .nav-links {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        background: var(--surface-strong) !important;
        flex-direction: column !important;
        padding: 60px 14px 16px !important;
        z-index: 99 !important;
    }

    .nav-links.is-open {
        display: flex !important;
    }

    .nav-links a {
        font-size: 0.95rem !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--border) !important;
    }

    /* Nav overlay */
    .nav-overlay {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 98 !important;
    }

    .nav-overlay.is-active {
        display: block !important;
    }

    .nav-actions {
        display: none !important;
        position: fixed !important;
        bottom: 0 !important;
        inset-inline: 0 !important;
        background: var(--surface-strong) !important;
        padding: 12px 14px !important;
        border-top: 1px solid var(--border) !important;
        z-index: 99 !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .nav-actions.is-open {
        display: flex !important;
    }

    .nav-actions .btn {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        min-height: 32px !important;
        flex: 1 !important;
        max-width: 120px !important;
    }

    /* ===== AUTH HEADER MOBILE ===== */
    .auth-header-shell {
        padding: 6px 10px !important;
    }

    .auth-header-top {
        gap: 6px !important;
    }

    .auth-header-links {
        display: none !important;
    }

    .auth-header-tabs {
        gap: 2px !important;
        padding: 2px 0 !important;
    }

    .account-tab {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }

    /* ===== FOOTER MOBILE =====
       2026-04-25 footer redesign:
       Old aggressive overrides (centered text, tiny 0.75rem fonts,
       1-column at all mobile widths) removed in favour of the modern
       footer rules above (search: "Public footer (modernised)") which
       handle 1024 / 768 / 480 breakpoints natively without !important. */

    /* ===== PAGE SPACE ===== */
    .page-space {
        padding-top: 10px !important;
        padding-bottom: 12px !important;
    }

    /* ===== LANGUAGE SWITCH ===== */
    .lang-switch {
        gap: 2px !important;
    }

    .lang-switch .btn {
        padding: 3px 6px !important;
        font-size: 0.65rem !important;
        min-height: 26px !important;
    }

    /* ===== BUTTONS MOBILE ===== */
    .btn {
        min-height: 36px !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
    }

    .btn-lg {
        min-height: 40px !important;
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }

    .btn-sm {
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }

    /* ===== TYPOGRAPHY ===== */
    .eyebrow {
        font-size: 0.6rem !important;
        letter-spacing: 0.03em !important;
    }

    h1 {
        font-size: 1.25rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    h3 {
        font-size: 0.95rem !important;
    }

    /* ===== UTILITY ===== */
    .text-center-mobile {
        text-align: center !important;
    }

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    /* Prevent overflow */
    body {
        overflow-x: hidden !important;
    }

    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Tablet styles (577px - 991px) */
@media (min-width: 577px) and (max-width: 991px) {
    :root {
        --shell-gutter: 16px;
    }

    .hero-shell {
        padding: 80px 0 60px;
    }

    .hero-copy h1 {
        font-size: 2rem;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-visual {
        display: none;
    }

    .nav-links {
        gap: 16px;
    }

    .nav-links a {
        font-size: 0.9rem;
    }

    .auth-header-tabs {
        gap: 6px;
    }

    .account-tab {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .footer-cms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large desktop enhancements (992px+) */
@media (min-width: 992px) {
    .hero-shell {
        padding: 100px 0 80px;
    }

    .hero-copy h1 {
        font-size: 2.5rem;
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-heading h2 {
        font-size: 1.75rem;
    }

    .footer-cms-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Extra large screens (1200px+) */
@media (min-width: 1200px) {
    :root {
        --container: min(1200px, calc(100% - 64px));
    }

    .hero-shell {
        padding: 120px 0 100px;
    }

    .hero-copy h1 {
        font-size: 2.75rem;
    }
}

/* ============================================================
   ACCOUNT PAGES RESPONSIVE
   Dashboard, Profile, Settings, Auth forms
   ============================================================ */

/* Account grid mobile optimization */
@media (max-width: 991px) {
    .account-page-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .account-sidebar {
        order: -1;
        position: static;
        width: 100%;
    }

    .account-user-card {
        max-width: 100%;
    }

    .account-side-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .account-side-link {
        padding: 12px;
        font-size: 0.85rem;
    }

    .account-side-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .account-page-main {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .account-side-links {
        grid-template-columns: 1fr;
    }

    .account-side-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-dashboard-hero {
        padding: 20px 16px;
    }

    .account-dashboard-status-strip {
        grid-template-columns: 1fr;
    }

    .account-dashboard-grid-main {
        grid-template-columns: 1fr;
    }

    .account-dashboard-inline-actions {
        flex-direction: column;
        gap: 8px;
    }

    .account-dashboard-inline-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .account-checklist {
        grid-template-columns: 1fr;
    }

    .profile-hero {
        grid-template-columns: 1fr;
    }

    .profile-panel {
        max-width: 100%;
    }

    .profile-photo-wrap {
        height: 280px;
    }

    .key-facts {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Auth pages */
    .auth-shell {
        padding: 40px 0;
    }

    .auth-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .auth-copy {
        text-align: center;
        padding: 0 16px;
    }

    .auth-copy h1 {
        font-size: 1.5rem;
    }

    .auth-bullets {
        display: none;
    }

    .auth-form-wrap {
        padding: 0 12px;
    }

    .form-card {
        padding: 24px 16px;
    }

    .registration-stepper {
        padding: 16px;
    }

    .registration-progress {
        gap: 8px;
    }

    .registration-progress-item {
        padding: 8px;
    }

    .registration-progress-item small {
        font-size: 0.65rem;
    }

    /* Discover page */
    .discover-hero {
        padding: 60px 0 40px;
    }

    .discover-hero h1 {
        font-size: 1.5rem;
    }

    .discover-grid {
        grid-template-columns: 1fr;
    }

    .smart-match-card {
        max-width: 100%;
    }

    .recommendation-grid {
        grid-template-columns: 1fr;
    }

    /* Cards on mobile */
    .card {
        padding: 16px;
    }

    .section-title h2 {
        font-size: 1.1rem;
    }

    /* Profile edit */
    .profile-edit-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .profile-photo-manager {
        flex-direction: column;
        align-items: center;
    }

    .profile-edit-stack {
        gap: 16px;
    }

    /* Dashboard directory */
    .directory-head {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .directory-filters {
        flex-direction: column;
        gap: 12px;
    }

    .directory-filters .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .directory-grid {
        grid-template-columns: 1fr;
    }

    .member-card {
        max-width: 100%;
    }

    .member-photo-wrap {
        height: 200px;
    }
}

/* Tablet adjustments */
@media (min-width: 577px) and (max-width: 991px) {
    .discover-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .recommendation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .directory-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-side-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   DISCOVER PAGE SPECIFIC STYLES
   ============================================================ */
@media (max-width: 576px) {
    .discover-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding: 8px 12px;
    }

    .discover-tabs::-webkit-scrollbar {
        display: none;
    }

    .discover-tab {
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .search-form {
        padding: 16px;
    }

    .search-input-wrap {
        flex-direction: column;
    }

    .search-input-wrap input {
        width: 100%;
    }

    .search-input-wrap button {
        width: 100%;
    }

    /* Icebreaker modal mobile */
    .icebreaker-modal {
        padding: 12px;
    }

    .icebreaker-modal-content {
        max-width: 100%;
        margin: 0;
        max-height: 90vh;
    }

    .icebreaker-list {
        max-height: 60vh;
    }
}

/* ============================================================
   CHAT & MESSAGES RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .chat-layout {
        grid-template-columns: 1fr;
        height: calc(100vh - 140px);
    }

    .chat-sidebar {
        display: none;
    }

    .chat-sidebar.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100;
        background: var(--surface-strong);
    }

    .chat-main {
        border-radius: 0;
    }

    .chat-header {
        padding: 12px 16px;
    }

    .chat-messages {
        padding: 16px;
    }

    .chat-input-area {
        padding: 12px 16px;
    }

    .message {
        max-width: 90%;
    }
}

/* ============================================================
   NOTIFICATIONS & SETTINGS
   ============================================================ */
@media (max-width: 576px) {
    .notification-item {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .notification-icon {
        width: 40px;
        height: 40px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
    }

    .settings-nav a {
        white-space: nowrap;
        padding: 10px 14px;
    }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.hide-mobile {
    display: inherit;
}

.show-mobile {
    display: none !important;
}

@media (max-width: 576px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: inherit !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }

    .stack-mobile {
        flex-direction: column !important;
    }

    .gap-sm-mobile {
        gap: 8px !important;
    }
}

/* ============================================================
   SAFARI IOS FIXES
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    .hero-shell {
        background-attachment: scroll;
    }

    input,
    textarea,
    select {
        font-size: 16px; /* Prevent zoom on focus */
    }

    .btn {
        min-height: 44px;
    }
}

/* ============================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus visible styles */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .site-header,
    .footer-shell,
    .nav-toggle,
    .hero-actions,
    .lightbox-modal,
    .account-sidebar,
    .auth-header-tabs,
    .account-tabs-nav {
        display: none !important;
    }

    .hero-shell {
        padding: 20px 0;
    }

    .hero-visual {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .account-page-grid {
        grid-template-columns: 1fr;
    }

    .card {
        border: 1px solid #ddd;
        box-shadow: none;
    }
}


/* 2026-04-16 compact UI pass */
.hero-shell {
    padding: 72px 0 56px;
}

.home-hero-section .lead {
    max-width: 64ch;
}

.site-header {
    padding: 7px 0;
}

.nav-shell {
    padding: 10px 14px;
}

.footer-shell {
    padding-bottom: 20px;
}

.footer-cms-grid {
    gap: 14px;
}

/* 2026-04-25 footer redesign:
   Removed legacy overrides for `.footer-cms-section`, `.footer-cms-section h2`
   and `.footer-cms-description`. The modern footer block defines its own
   typography (search: "Public footer (modernised)") and the new title
   selector is `.footer-cms-section__title`, so a bare `h2` selector would
   now also incorrectly match the brand title. */

.account-page-grid {
    gap: 16px;
}

.account-page-main {
    gap: 16px;
}

.account-dashboard-hero {
    padding: 22px 24px;
    gap: 14px;
}

.account-dashboard-status-strip {
    gap: 10px;
}

.account-dashboard-status-card {
    min-height: 0;
    padding: 14px;
}

.account-dashboard-panel {
    padding: 18px;
}

.account-dashboard-checklist {
    gap: 10px;
}

.account-dashboard-thread-card,
.account-dashboard-feed-card {
    padding: 10px 12px;
}

.account-dashboard-inline-actions .btn {
    min-height: 40px;
    padding: 10px 18px;
}

.directory-members-grid {
    gap: 12px;
}

.directory-member-card,
.profile-card,
.member-card,
.smart-match-card {
    border-radius: 16px;
}

.directory-member-photo,
.profile-photo-wrap,
.member-photo-wrap {
    max-height: 220px;
}

.directory-member-content,
.profile-card-body {
    padding: 12px;
}

.directory-member-actions .btn,
.actions-inline .btn {
    min-height: 36px;
    padding: 8px 14px;
}

.blog-card h2,
.article-card h2 {
    line-height: 1.3;
    margin-bottom: 8px;
}

.blog-card-image-wrap {
    margin: -2px -2px 12px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #f7f3ed 0%, #ece4d8 100%);
    border: 1px solid rgba(151, 111, 82, 0.16);
}

.blog-card-image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.blog-post-image {
    height: clamp(220px, 34vw, 360px);
}

.blog-card p,
.article-card p {
    margin-bottom: 10px;
}

/* 2026-04-16 account security consistency pass */
.account-security-page {
    align-items: start;
}

.account-security-page .account-page-main {
    gap: 20px;
    max-width: 1100px;
}

.account-security-page .account-security-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
}

.account-security-page .account-security-hero h1 {
    line-height: 1.2;
}

.account-security-page .account-security-hero p {
    max-width: 76ch;
}

.account-security-page .grid-2 {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 16px;
    align-items: start;
}

.account-security-page .form-card {
    padding: 22px;
}

.account-security-page .account-section-title h2 {
    line-height: 1.25;
}

.account-security-page .account-section-title span {
    color: var(--text-soft);
    font-size: 0.94rem;
}

.account-security-page label {
    color: var(--text);
    font-weight: 700;
    display: grid;
    gap: 6px;
}

.account-security-page .password-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.account-security-page .password-field input {
    min-height: 44px;
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--surface-elevated);
}

.account-security-page .password-field input::placeholder {
    color: var(--text-soft);
}

.account-security-page .password-toggle {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text-soft);
    border-radius: 10px;
    min-height: 44px;
    min-width: 92px;
}

.account-security-page .stack-list li {
    color: var(--text);
    line-height: 1.6;
}

.account-security-page .btn-primary {
    min-height: 44px;
}

.account-footer-page .account-page-main {
    max-width: 100%;
}

.account-privacy-page {
    align-items: start;
}

.account-privacy-main {
    gap: 24px;
    max-width: 860px;
}

.account-privacy-hero {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.account-privacy-hero-shell {
    padding: 28px 30px;
    border-radius: 28px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    background:
        radial-gradient(circle at top right, rgba(200, 161, 91, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(20, 92, 75, 0.08), rgba(47, 111, 163, 0.08)),
        #fff;
    box-shadow: 0 20px 42px rgba(27, 55, 44, 0.08);
}

.account-privacy-hero-shell h1 {
    margin: 10px 0 8px;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    line-height: 1.15;
}

.account-privacy-hero-shell p {
    max-width: 720px;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.account-privacy-card {
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(20, 92, 75, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.96));
    box-shadow: 0 24px 48px rgba(24, 51, 41, 0.08);
    gap: 24px;
}

.account-privacy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

.account-privacy-panel {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    background: #fff;
    box-shadow: 0 14px 34px rgba(21, 52, 42, 0.05);
}

.account-privacy-panel-photo {
    background:
        linear-gradient(180deg, rgba(20, 92, 75, 0.05), rgba(20, 92, 75, 0.02)),
        #fff;
}

.account-privacy-panel-head {
    display: grid;
    gap: 8px;
}

.account-privacy-panel-head > div {
    display: grid;
    gap: 6px;
}

.account-privacy-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.account-privacy-panel-head h2,
.account-privacy-actions-copy h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.28rem;
    line-height: 1.2;
}

.account-privacy-panel-head p,
.account-privacy-actions-copy p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.75;
}

.account-privacy-select-field {
    display: grid;
    gap: 10px;
    color: var(--text);
    font-weight: 800;
}

.account-privacy-select-field span {
    font-size: 0.95rem;
}

.account-privacy-select-field select {
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid rgba(20, 92, 75, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 246, 0.98));
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.account-privacy-select-field select:hover {
    border-color: rgba(20, 92, 75, 0.28);
}

.account-privacy-select-field select:focus {
    outline: none;
    border-color: rgba(20, 92, 75, 0.4);
    box-shadow: 0 0 0 4px rgba(20, 92, 75, 0.12);
    transform: translateY(-1px);
}

.account-privacy-alert {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(215, 77, 112, 0.16);
    background: linear-gradient(180deg, rgba(253, 239, 243, 0.95), rgba(255, 247, 249, 0.98));
    color: #8e2446;
}

.account-privacy-alert strong {
    font-size: 0.95rem;
}

.account-privacy-alert p {
    margin: 0;
    color: #9b4761;
    line-height: 1.75;
}

.account-privacy-options {
    display: grid;
    gap: 12px;
}

.account-privacy-check {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    background: linear-gradient(180deg, rgba(245, 248, 246, 0.96), rgba(255, 255, 255, 0.96));
    font-weight: 700;
    color: var(--text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.account-privacy-check:hover {
    border-color: rgba(20, 92, 75, 0.18);
    box-shadow: 0 10px 22px rgba(20, 52, 41, 0.06);
    transform: translateY(-1px);
}

.account-privacy-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.account-privacy-check span {
    flex: 1 1 auto;
    line-height: 1.65;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.account-privacy-note {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(200, 161, 91, 0.34);
    background: linear-gradient(180deg, rgba(244, 231, 199, 0.48), rgba(255, 250, 238, 0.92));
    color: #775525;
}

.account-privacy-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    background: linear-gradient(135deg, rgba(20, 92, 75, 0.06), rgba(255, 255, 255, 0.95));
}

.account-privacy-actions-copy {
    display: grid;
    gap: 8px;
}

.account-privacy-submit {
    min-width: 240px;
    min-height: 56px;
    padding: 14px 28px;
    border-radius: 18px;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 18px 34px rgba(20, 92, 75, 0.24);
}

.account-privacy-submit:hover,
.account-privacy-submit:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 24px 38px rgba(20, 92, 75, 0.3);
}

html[dir="rtl"] .account-privacy-actions {
    text-align: right;
}

html[dir="rtl"] .account-privacy-check {
    flex-direction: row-reverse;
    text-align: right;
}

/* Strong override to keep Arabic labels horizontal and readable on privacy page */
.account-privacy-page .account-page-main *,
.account-privacy-page .account-sidebar * {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.account-privacy-page .account-privacy-check span,
.account-privacy-page .account-privacy-alert p,
.account-privacy-page .account-privacy-panel-head p {
    line-height: 1.8;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word !important;
}

.account-privacy-page .account-privacy-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.account-privacy-page .account-privacy-panel,
.account-privacy-page .account-privacy-actions {
    width: 100%;
}

.account-privacy-page .account-privacy-card {
    max-width: 100%;
}

.discover-search-shell,
.discover-section-compact,
.discover-section-spaced {
    border-radius: 16px;
}

.discover-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.discover-chip-list .btn {
    min-height: 34px;
    padding: 6px 12px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hero-shell {
        padding: 52px 0 36px;
    }

    .account-dashboard-hero {
        padding: 16px;
    }

    .account-dashboard-panel {
        padding: 14px;
    }

    .directory-member-photo,
    .profile-photo-wrap,
    .member-photo-wrap {
        max-height: 180px;
    }

    .blog-card-image {
        height: 168px;
    }

    .blog-post-image {
        height: 208px;
    }

    .account-security-page .account-security-hero,
    .account-security-page .form-card {
        padding: 16px;
    }
}

@media (max-width: 1100px) {
    .account-security-page .grid-2 {
        grid-template-columns: 1fr;
    }

    .account-privacy-grid {
        grid-template-columns: 1fr;
    }

    .account-privacy-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .account-privacy-submit {
        width: 100%;
        min-width: 0;
    }
}

/* Keep Arabic text readable on privacy page (avoid per-character wrapping) */
.account-privacy-page .account-privacy-card,
.account-privacy-page .account-privacy-card * {
    overflow-wrap: normal;
    word-break: normal;
}

.account-privacy-page .account-privacy-check span,
.account-privacy-page .account-privacy-alert p,
.account-privacy-page .account-privacy-panel-head p {
    overflow-wrap: break-word;
}

/* 2026-04-16 focused pass: privacy note + home polish + blog image consistency */
.account-private-note {
    border: 1px solid rgba(20, 92, 75, 0.15);
    background: rgba(20, 92, 75, 0.05);
    border-radius: 14px;
    padding: 12px 14px;
}

.account-private-note strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.account-private-note strong::before {
    content: "[private]";
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-hero-refined {
    padding: 58px 0 42px;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 22px;
    align-items: stretch;
    padding: 24px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 28px;
    background:
        radial-gradient(circle at 85% 8%, rgba(200, 161, 91, 0.18), transparent 34%),
        radial-gradient(circle at 12% 92%, rgba(20, 92, 75, 0.11), transparent 30%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(246, 252, 249, 0.95));
    box-shadow: 0 24px 50px rgba(27, 45, 38, 0.1);
}

.home-hero-copy {
    display: grid;
    gap: 16px;
}

.home-hero-copy h1 {
    margin: 0;
    line-height: 1.09;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 3.7vw, 3.2rem);
}

.home-hero-copy .lead {
    margin: 0;
    max-width: 62ch;
    font-size: 1.04rem;
    line-height: 1.82;
}

.home-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-trust-list span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(20, 92, 75, 0.14);
    background: rgba(255, 255, 255, 0.82);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
}

.home-hero-side {
    display: grid;
    gap: 12px;
}

.home-hero-spotlight {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(20, 92, 75, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(243, 251, 247, 0.92));
    box-shadow: var(--shadow-soft);
}

.home-hero-spotlight h3 {
    margin: 0 0 8px;
}

.home-hero-spotlight p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.home-hero-metrics {
    display: grid;
    gap: 10px;
}

.home-metric-card {
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    padding: 14px 16px;
}

.home-metric-card strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.08;
}

.home-metric-card span {
    color: var(--text-soft);
    font-size: 0.88rem;
}

.home-why-refined .section-heading p {
    max-width: 64ch;
}

.home-benefit-card {
    padding: 20px 18px;
}

.home-featured-refined .section-heading {
    margin-bottom: 16px;
}

.home-profile-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid rgba(20, 92, 75, 0.11);
    box-shadow: 0 14px 34px rgba(25, 43, 35, 0.08);
}

.home-profile-card .profile-photo-wrap {
    aspect-ratio: 4 / 5;
}

.home-profile-card-body {
    display: grid;
    gap: 10px;
    align-content: start;
}

.home-profile-card .profile-title strong {
    font-size: 1.06rem;
}

.home-profile-card .profile-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-profile-card .actions-inline {
    margin-top: auto;
}

.blog-post-grid {
    gap: 14px;
}

.blog-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid rgba(20, 92, 75, 0.11);
    box-shadow: 0 12px 30px rgba(25, 43, 35, 0.07);
}

.blog-card-image-wrap {
    display: block;
    aspect-ratio: 16 / 10;
    margin: -2px -2px 0;
}

.blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blog-card-content {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    align-content: start;
}

.blog-card-content .btn {
    justify-self: start;
}

.blog-card-meta {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
}

.blog-card-content h2 {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-content > p:not(.blog-card-meta) {
    margin: 0;
    color: var(--text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post-card .blog-card-image-wrap {
    aspect-ratio: 16 / 7;
}

.blog-post-image {
    height: auto;
    min-height: 260px;
    max-height: 430px;
}

@media (max-width: 992px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-hero-refined {
        padding-top: 40px;
    }

    .home-hero-copy {
        gap: 14px;
    }

    .home-metric-card strong {
        font-size: 1.25rem;
    }

    .blog-card-image-wrap {
        aspect-ratio: 16 / 11;
    }

    .blog-post-card .blog-card-image-wrap {
        aspect-ratio: 16 / 9;
    }
}

/* 2026-04-16 intelligent robustness pass */
.profile-edit-hero,
.profile-edit-section-card,
.account-security-page .account-security-hero,
.account-security-page .form-card,
.account-notifications-box,
.card {
    border-radius: 18px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    box-shadow: 0 10px 24px rgba(20, 52, 41, 0.06);
}

.profile-photo-frame,
.profile-photo-static,
#profile-current-photo,
.profile-photo-img {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    object-fit: cover;
}

.home-hero-refined {
    padding: 52px 0 32px;
}

.home-hero-grid {
    gap: 16px;
    padding: 18px;
}

.home-hero-copy {
    gap: 12px;
}

.home-hero-copy .lead {
    line-height: 1.65;
}

.home-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-hero-points span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(20, 92, 75, 0.15);
    background: rgba(255, 255, 255, 0.78);
    font-weight: 700;
    font-size: 0.82rem;
}

.home-hero-note {
    margin: 2px 0 0;
    font-size: 0.9rem;
    color: var(--text-soft);
}

.home-hero-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-metric-card {
    padding: 12px 13px;
}

.home-metric-card strong {
    font-size: 1.25rem;
}

.home-benefits-grid {
    gap: 12px;
}

.home-benefit-card {
    padding: 16px;
}

.home-featured-grid {
    gap: 12px;
}

.home-profile-card .profile-photo-wrap {
    aspect-ratio: 4 / 4.7;
}

.home-profile-card-body {
    padding: 12px;
    gap: 8px;
}

.home-profile-card .actions-inline .btn {
    min-height: 36px;
}

.blog-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.blog-card {
    border-radius: 16px;
}

.blog-card-image-wrap {
    aspect-ratio: 16 / 9.6;
}

.blog-card-content {
    gap: 6px;
    padding: 10px 12px 12px;
}

.blog-card-content h2 {
    font-size: 1.02rem;
    line-height: 1.32;
    min-height: 2.64em;
}

.blog-card-content > p:not(.blog-card-meta) {
    font-size: 0.9rem;
    min-height: 3.9em;
}

.blog-card-meta {
    font-size: 0.8rem;
}

.blog-post-card .blog-card-image-wrap {
    aspect-ratio: 16 / 6.4;
}

.blog-post-image {
    min-height: 200px;
    max-height: 360px;
}

.blog-post-page .blog-content {
    margin-top: 10px;
    line-height: 1.9;
}

.account-private-note {
    font-size: 0.92rem;
    line-height: 1.65;
}

.hint-text.info {
    color: #145c4b;
}

.hint-text.success {
    color: #196f5c;
    font-weight: 700;
}

.hint-text.danger {
    color: #a02b2b;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .blog-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .home-hero-metrics-grid {
        grid-template-columns: 1fr;
    }

    .blog-post-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-photo-frame,
    .profile-photo-static,
    #profile-current-photo,
    .profile-photo-img {
        width: 96px;
        height: 96px;
    }
}

/* 2026-04-16 advanced commercial UX pass */
.home-landing-hero {
    padding: 40px 0 24px;
}

.home-landing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 18px;
    align-items: stretch;
}

.home-landing-copy,
.home-landing-media {
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(18, 50, 41, 0.08);
}

.home-landing-copy {
    padding: 22px;
    display: grid;
    gap: 12px;
}

.home-landing-copy h1 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.08;
}

.home-landing-copy p {
    margin: 0;
    color: var(--text-soft);
}

.home-landing-media {
    padding: 12px;
    display: grid;
    gap: 10px;
}

.home-landing-media > img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 16px;
}

.home-landing-card {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    background: rgba(245, 252, 249, 0.9);
}

.home-landing-card h3 {
    margin: 0 0 6px;
}

.home-landing-card p {
    margin: 0;
    color: var(--text-soft);
}

.home-landing-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.home-landing-metrics article {
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 12px;
    padding: 10px;
    background: rgba(252, 255, 254, 0.9);
}

.home-landing-metrics strong {
    display: block;
    font-size: 1.15rem;
    line-height: 1.1;
}

.home-landing-metrics span {
    font-size: 0.8rem;
    color: var(--text-soft);
}

.home-landing-section {
    margin: 18px 0;
}

.home-how-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-how-card {
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    padding: 16px;
}

.home-how-card span {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #145c4b, #1f7a63);
}

.home-how-card h3 {
    margin: 10px 0 6px;
}

.home-how-card p {
    margin: 0;
    color: var(--text-soft);
}

.home-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-benefit-item {
    overflow: hidden;
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.home-benefit-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.home-benefit-item > div {
    padding: 12px;
}

.home-benefit-item h3 {
    margin: 0 0 6px;
}

.home-benefit-item p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.home-featured-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.home-member-tile {
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.home-member-image img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.home-member-copy {
    padding: 10px 11px 12px;
    display: grid;
    gap: 6px;
}

.home-member-copy h3 {
    margin: 0;
    font-size: 1rem;
}

.home-member-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.86rem;
}

.home-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-testimonial-card {
    border: 1px solid rgba(20, 92, 75, 0.12);
    border-radius: 16px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 249, 0.95));
    padding: 16px;
}

.home-testimonial-card p {
    margin: 0 0 10px;
    color: var(--text-soft);
}

.home-final-cta {
    margin: 20px 0 10px;
    border: 1px solid rgba(20, 92, 75, 0.16);
    border-radius: 20px;
    padding: 18px;
    background: radial-gradient(circle at top right, rgba(20, 92, 75, 0.14), transparent 45%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 248, 0.95));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.home-final-cta h2 {
    margin: 0 0 4px;
}

.home-final-cta p {
    margin: 0;
    color: var(--text-soft);
}

.blog-listing-page .blog-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.blog-listing-page .blog-card {
    border-radius: 14px;
}

.blog-listing-page .blog-card-image-wrap {
    aspect-ratio: 16 / 9;
}

.blog-listing-page .blog-card-content {
    padding: 10px;
    gap: 6px;
}

.blog-listing-page .blog-card-content h2 {
    font-size: 1rem;
}

.blog-listing-page .blog-card-content .btn {
    min-height: 34px;
    padding: 6px 12px;
}

.blog-post-page .blog-post-card {
    padding: 14px;
}

.blog-post-page .blog-post-card .blog-card-image-wrap {
    aspect-ratio: 16 / 6;
    border-radius: 14px;
    overflow: hidden;
}

.blog-post-page .blog-content {
    font-size: 1rem;
}

@media (max-width: 1100px) {
    .home-landing-grid,
    .home-benefit-grid,
    .home-how-grid,
    .home-featured-grid-compact,
    .home-testimonials-grid,
    .blog-listing-page .blog-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .home-landing-grid,
    .home-benefit-grid,
    .home-how-grid,
    .home-featured-grid-compact,
    .home-testimonials-grid,
    .blog-listing-page .blog-post-grid,
    .home-landing-metrics {
        grid-template-columns: 1fr;
    }

    .home-landing-copy,
    .home-landing-media,
    .home-final-cta {
        border-radius: 16px;
        padding: 14px;
    }

    .home-landing-media > img {
        height: 220px;
    }
}

/* ============================================================
   2026-04-16 commercial quality pass – design system + home + blog
   ============================================================ */

/* --- Button variants (root-level) --- */
.btn-lg {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 1.02rem;
    border-radius: 16px;
}

.btn-sm {
    min-height: 32px;
    padding: 6px 14px;
    font-size: 0.84rem;
    border-radius: 10px;
}

.btn-ghost {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.36);
    color: #fff;
    font-weight: 700;
    border-radius: 14px;
    min-height: 48px;
    padding: 12px 22px;
    transition: background 0.2s ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(255,255,255,0.28);
}

/* --- Home hero visual (replaces external image) --- */
.home-landing-visual {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(20,92,75,0.12) 0%,
        rgba(200,161,91,0.14) 60%,
        rgba(20,92,75,0.08) 100%);
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-landing-visual-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
}

.home-landing-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-landing-visual-icon {
    position: relative;
    z-index: 1;
    color: var(--primary);
    opacity: 0.7;
}

/* --- Home benefit visual icon container --- */
.home-benefit-visual {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20,92,75,0.07), rgba(20,92,75,0.04));
    color: var(--primary);
    border-bottom: 1px solid rgba(20,92,75,0.07);
}

/* --- Home how-card: larger step number --- */
.home-how-card span {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
}

/* --- Home member tile: placeholder fallback --- */
.home-member-image {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(20,92,75,0.08), rgba(200,161,91,0.12));
}

.home-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* --- Testimonial card improvements --- */
.home-testimonial-card strong {
    display: block;
    font-size: 0.9rem;
    color: var(--primary);
}

/* --- Final CTA: better visual weight --- */
.home-final-cta {
    box-shadow: 0 18px 44px rgba(20,92,75,0.1);
}

/* ============================================================
   Blog magazine layout
   ============================================================ */

/* Featured first-post slot */
.blog-post-grid--magazine {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.blog-post-grid--magazine .blog-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
    border-radius: 18px;
}

.blog-post-grid--magazine .blog-card:first-child .blog-card-image-wrap {
    aspect-ratio: unset;
    height: 100%;
    min-height: 220px;
    border-start-start-radius: 16px;
    border-end-start-radius: 16px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    margin: 0;
}

.blog-post-grid--magazine .blog-card:first-child .blog-card-content {
    padding: 18px;
    gap: 10px;
}

.blog-post-grid--magazine .blog-card:first-child .blog-card-content h2 {
    font-size: 1.18rem;
    line-height: 1.28;
    min-height: unset;
}

.blog-post-grid--magazine .blog-card:first-child .blog-card-content > p:not(.blog-card-meta) {
    min-height: unset;
    -webkit-line-clamp: 4;
    font-size: 0.94rem;
}

.blog-post-grid--magazine .blog-cards-rest {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* ============================================================
   Photo upload validation styles
   ============================================================ */
.file-preview-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(160, 43, 43, 0.07);
    border: 1px solid rgba(160, 43, 43, 0.18);
    color: #a02b2b;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 8px;
}

.file-preview-error svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.file-preview-warning {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(200, 121, 20, 0.08);
    border: 1px solid rgba(200, 121, 20, 0.18);
    color: #8a5210;
    font-size: 0.86rem;
    margin-top: 6px;
}

.file-preview-card {
    animation: slideInPreview 0.22s ease;
}

@keyframes slideInPreview {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Uniform card design system
   ============================================================ */
.card,
.home-how-card,
.home-benefit-item,
.home-member-tile,
.home-testimonial-card,
.home-landing-copy,
.home-landing-media {
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.home-how-card:hover,
.home-benefit-item:hover,
.home-member-tile:hover,
.home-testimonial-card:hover {
    box-shadow: 0 22px 48px rgba(20,92,75,0.12);
    transform: translateY(-2px);
}

/* ============================================================
   Profile edit – photo section improvements
   ============================================================ */
.photo-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-photo-manager {
    display: grid;
    gap: 16px;
}

/* ============================================================
   Responsive: home landing at tablet/mobile
   ============================================================ */
@media (max-width: 840px) {
    .blog-post-grid--magazine .blog-card:first-child {
        grid-template-columns: 1fr;
    }

    .blog-post-grid--magazine .blog-card:first-child .blog-card-image-wrap {
        min-height: 180px;
        border-radius: 16px 16px 0 0;
    }

    .blog-post-grid--magazine .blog-cards-rest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .blog-post-grid--magazine .blog-cards-rest {
        grid-template-columns: 1fr;
    }

    .btn-lg {
        min-height: 46px;
        padding: 12px 22px;
        font-size: 0.96rem;
    }

    .home-final-cta .actions-inline {
        flex-direction: column;
        width: 100%;
    }

    .home-final-cta .actions-inline .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================
   Blog magazine layout – featured + rest grid
   ============================================================ */

.blog-card--featured {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(20,92,75,0.1);
    border: 1px solid rgba(20,92,75,0.12);
}

.blog-card-image-wrap--featured {
    display: block;
    aspect-ratio: unset;
    height: 100%;
    min-height: 260px;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.blog-card-image-wrap--featured .blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.blog-card--featured:hover .blog-card-image {
    transform: scale(1.03);
}

.blog-card-content--featured {
    padding: 22px 20px;
    display: grid;
    gap: 12px;
    align-content: start;
}

.blog-featured-title {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.25;
    margin: 0;
    min-height: unset;
    -webkit-line-clamp: unset;
}

.blog-post-grid--rest {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .blog-card--featured {
        grid-template-columns: 1fr;
    }

    .blog-card-image-wrap--featured {
        min-height: 200px;
        height: 200px;
    }

    .blog-post-grid--rest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .blog-post-grid--rest {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HOME PAGE v3 – professional redesign (2026-04-16)
   ============================================================ */

/* ---- Shared section wrapper ---- */
.home-section {
    padding: 52px 0;
}

.home-section--alt {
    background: linear-gradient(180deg, rgba(20,92,75,0.035) 0%, transparent 100%);
    border-radius: 28px;
    padding: 52px 32px;
    margin-inline: -16px;
}

.home-section-head {
    margin-bottom: 32px;
    text-align: center;
}

.home-section-head h2 {
    margin: 8px 0 0;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
}

.home-section-head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: start;
    margin-bottom: 20px;
}

.home-section-lead {
    margin: 10px auto 0;
    max-width: 56ch;
    color: var(--text-soft);
    font-size: 1.02rem;
    line-height: 1.75;
}

.home-eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.78;
}

/* ---- HERO ---- */
.home-hero {
    padding: 44px 0 36px;
}

.home-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.home-hero-copy {
    display: grid;
    gap: 16px;
    padding: 28px 28px 28px 0;
}

.home-hero-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.home-hero-lead {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 58ch;
}

.home-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(20,92,75,0.08);
    border: 1px solid rgba(20,92,75,0.14);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.home-btn-lg {
    min-height: 50px;
    padding: 13px 26px;
    font-size: 1rem;
    border-radius: 14px;
}

.btn-outline-primary {
    background: transparent;
    border: 1.5px solid rgba(20,92,75,0.3);
    color: var(--primary);
    font-weight: 700;
    border-radius: 12px;
    min-height: 44px;
    padding: 10px 20px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: rgba(20,92,75,0.07);
    border-color: var(--primary);
}

.home-hero-note {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-faint);
}

/* ---- Hero aside: stats + profile previews ---- */
.home-hero-aside {
    display: grid;
    gap: 12px;
}

.home-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.home-stat {
    padding: 14px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(20,92,75,0.1);
    box-shadow: 0 6px 18px rgba(20,92,75,0.06);
    text-align: center;
}

.home-stat strong {
    display: block;
    font-size: 1.2rem;
    line-height: 1.1;
    color: var(--primary);
}

.home-stat span {
    font-size: 0.76rem;
    color: var(--text-soft);
    line-height: 1.4;
}

/* Profile preview cards (CSS-only, no real images) */
.home-profile-previews {
    border-radius: 20px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(20,92,75,0.1);
    box-shadow: 0 18px 40px rgba(20,92,75,0.08);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.home-preview-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(20,92,75,0.08);
    background: rgba(247,251,249,0.9);
}

.home-preview-card--a { animation: homeCardFadeIn 0.6s ease both; }
.home-preview-card--b { animation: homeCardFadeIn 0.6s 0.12s ease both; }
.home-preview-card--c { animation: homeCardFadeIn 0.6s 0.24s ease both; }

@keyframes homeCardFadeIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.home-preview-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.home-preview-avatar--green {
    background: linear-gradient(135deg, #1a7060, #145c4b);
}

.home-preview-avatar--gold {
    background: linear-gradient(135deg, #c8a15b, #a07840);
}

.home-preview-avatar--teal {
    background: linear-gradient(135deg, #2a8a78, #1e6b5a);
}

.home-preview-info {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 5px;
}

.home-preview-line {
    border-radius: 4px;
    background: rgba(20,92,75,0.1);
}

.home-preview-line--name {
    height: 10px;
    width: 70%;
}

.home-preview-line--sub {
    height: 8px;
    width: 45%;
    background: rgba(20,92,75,0.06);
}

.home-preview-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: var(--primary);
    border-radius: 999px;
    padding: 2px 7px;
    flex-shrink: 0;
}

.home-preview-match-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(20,92,75,0.1), rgba(20,92,75,0.06));
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    justify-self: start;
}

/* ---- HOW IT WORKS steps ---- */
.home-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.home-step {
    flex: 1;
    max-width: 300px;
    display: grid;
    gap: 14px;
    text-align: center;
    padding: 0 16px;
}

.home-step-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--primary);
    opacity: 0.18;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 auto;
}

.home-step-body h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.home-step-body p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
    font-size: 0.94rem;
}

.home-step-connector {
    width: 60px;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(20,92,75,0.25) 0, rgba(20,92,75,0.25) 4px, transparent 4px, transparent 10px);
    margin-top: 38px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* ---- BENEFITS ---- */
.home-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.home-benefit {
    padding: 22px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(20,92,75,0.09);
    box-shadow: 0 8px 24px rgba(20,92,75,0.06);
    display: grid;
    gap: 10px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-benefit:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(20,92,75,0.11);
}

.home-benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(20,92,75,0.09);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-benefit h3 {
    margin: 0;
    font-size: 1rem;
}

.home-benefit p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* ---- FEATURED MEMBERS ---- */
.home-members-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.home-member-card {
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(20,92,75,0.1);
    box-shadow: 0 8px 24px rgba(20,92,75,0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-member-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(20,92,75,0.12);
}

.home-member-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.home-member-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
}

.home-member-photo-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    color: rgba(20,92,75,0.22);
    background: linear-gradient(135deg, rgba(20,92,75,0.06), rgba(200,161,91,0.08));
    z-index: 0;
}

.home-member-verified {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-member-body {
    padding: 14px;
    display: grid;
    gap: 6px;
}

.home-member-name {
    font-size: 1rem;
    display: block;
}

.home-member-meta {
    font-size: 0.84rem;
    color: var(--text-soft);
}

.home-member-bio {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-soft);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-member-btn {
    justify-self: start;
    min-height: 34px;
    padding: 7px 14px;
    font-size: 0.86rem;
    border-radius: 10px;
}

/* ---- TESTIMONIALS ---- */
.home-testimonials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
}

.home-testimonial {
    margin: 0;
    padding: 22px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(20,92,75,0.09);
    box-shadow: 0 8px 24px rgba(20,92,75,0.05);
    display: grid;
    gap: 12px;
    position: relative;
}

.home-testimonial--featured {
    background: linear-gradient(145deg, rgba(20,92,75,0.05), rgba(20,92,75,0.02));
    border-color: rgba(20,92,75,0.16);
}

.home-testimonial-quote-icon {
    font-size: 3.5rem;
    line-height: 1;
    color: var(--primary);
    opacity: 0.18;
    font-family: Georgia, serif;
    position: absolute;
    top: 10px;
    inset-inline-start: 16px;
}

.home-testimonial p {
    margin: 0;
    color: var(--text);
    line-height: 1.75;
    font-size: 0.96rem;
    padding-top: 24px;
}

.home-testimonial footer {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--primary);
    opacity: 0.8;
}

/* ---- FINAL CTA BAND ---- */
.home-cta-band {
    margin: 20px 0 8px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f4a3b 0%, #145c4b 50%, #1a7060 100%);
    box-shadow: 0 24px 56px rgba(15,74,59,0.28);
}

.home-cta-band-inner {
    padding: 44px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.home-cta-band-inner::before {
    content: '';
    position: absolute;
    top: -60px;
    inset-inline-end: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.home-cta-band-inner::after {
    content: '';
    position: absolute;
    bottom: -40px;
    inset-inline-start: 10%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.home-cta-band-copy {
    position: relative;
    z-index: 1;
}

.home-cta-band-copy h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.3rem, 2.5vw, 1.85rem);
    line-height: 1.2;
}

.home-cta-band-copy p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 52ch;
}

.home-cta-band-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.home-cta-btn-primary {
    background: #fff;
    color: var(--primary);
    font-weight: 800;
    border-radius: 12px;
    min-height: 48px;
    padding: 12px 24px;
    border: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.home-cta-btn-primary:hover,
.home-cta-btn-primary:focus-visible {
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
}

.home-cta-btn-ghost {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,0.24);
    transition: background 0.18s ease;
}

.home-cta-btn-ghost:hover,
.home-cta-btn-ghost:focus-visible {
    background: rgba(255,255,255,0.2);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
    .home-benefits {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 960px) {
    .home-hero-inner {
        grid-template-columns: 1fr;
    }

    .home-hero-copy {
        padding: 0;
    }

    .home-members-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 720px) {
    .home-steps {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .home-step-connector {
        width: 1px;
        height: 24px;
        background: repeating-linear-gradient(180deg, rgba(20,92,75,0.25) 0, rgba(20,92,75,0.25) 4px, transparent 4px, transparent 10px);
        margin: 0;
        align-self: center;
    }

    .home-step {
        padding: 0;
        max-width: 380px;
    }

    .home-benefits {
        grid-template-columns: 1fr;
    }

    .home-testimonials,
    .home-members-grid {
        grid-template-columns: 1fr;
    }

    .home-section--alt {
        padding: 36px 16px;
        margin-inline: -8px;
        border-radius: 18px;
    }

    .home-cta-band-inner {
        padding: 30px 22px;
        flex-direction: column;
        align-items: flex-start;
    }

    .home-cta-band-actions {
        width: 100%;
        flex-direction: column;
    }

    .home-cta-btn-primary,
    .home-cta-btn-ghost {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .home-section-head--row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .home-stats-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .home-members-grid {
        grid-template-columns: 1fr;
    }

    .home-stats-row {
        grid-template-columns: 1fr;
    }

    .home-hero-title {
        font-size: 1.75rem;
    }
}

/* ============================================================
   HOME mobile fix (2026-04-16)
   ============================================================ */

/* Stats sempre su 3 colonne anche su mobile */
@media (max-width: 480px) {
    .home-stats-row {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 6px;
    }

    .home-stat {
        padding: 10px 6px;
    }

    .home-stat strong {
        font-size: 1rem;
    }

    .home-stat span {
        font-size: 0.68rem;
    }
}

/* Nascondi preview cards su mobile: visual decorativo inutile su schermo piccolo */
@media (max-width: 680px) {
    .home-profile-previews {
        display: none;
    }

    /* Hero aside: solo stats, più compatto */
    .home-hero-aside {
        gap: 8px;
    }

    /* Hero: padding ridotto */
    .home-hero {
        padding: 24px 0 20px;
    }

    /* Sezioni: padding ridotto */
    .home-section {
        padding: 32px 0;
    }

    .home-section--alt {
        padding: 28px 12px;
        margin-inline: 0;
        border-radius: 14px;
    }

    /* Section head: testo centrato compatto */
    .home-section-head {
        margin-bottom: 20px;
    }

    .home-section-head h2 {
        font-size: 1.35rem;
    }

    /* Steps: più compatti */
    .home-step-num {
        font-size: 1.6rem;
    }

    /* Benefits: 2 colonne su tablet piccolo */
    .home-benefits {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    /* CTA band: padding ridotto */
    .home-cta-band-inner {
        padding: 26px 18px;
    }

    .home-cta-band-copy h2 {
        font-size: 1.2rem;
    }
}

/* Benefici sempre 1 colonna sotto 400px */
@media (max-width: 400px) {
    .home-benefits {
        grid-template-columns: 1fr;
    }

    .home-hero-title {
        font-size: 1.55rem;
    }

    .home-hero-lead {
        font-size: 0.96rem;
    }
}

/* ============================================================
   HOME – color fix: align to site blue (2026-04-16)
   ============================================================ */

/* 1. Remove green tint from alt sections – use site background */
.home-section--alt {
    background: linear-gradient(180deg, rgba(77,135,187,0.04) 0%, transparent 100%);
}

/* 2. CTA band – use the same blue as the auth nav shell */
.home-cta-band {
    background: linear-gradient(135deg, #2e6fa3 0%, #4d87bb 50%, #3a7ab5 100%);
    box-shadow: 0 24px 56px rgba(46,111,163,0.28);
}

/* 3. Hero trust pills – use site border var */
.home-hero-trust span {
    background: var(--primary-soft);
    border-color: var(--border-strong);
    color: var(--primary);
}

/* 4. Preview card avatars – use the site blue */
.home-preview-avatar--green {
    background: linear-gradient(135deg, #4d87bb, #3a6fa3);
}

.home-preview-avatar--gold {
    background: linear-gradient(135deg, #5a9ab8, #3f80a8);
}

.home-preview-avatar--teal {
    background: linear-gradient(135deg, #3f79ad, #2e6397);
}

/* 5. Step number – use site blue tone */
.home-step-num {
    color: #3f79ad;
}

/* 6. Eyebrow – use site blue tone */
.home-eyebrow {
    color: #3a79ad;
}

/* 7. Match tag – blue */
.home-preview-match-tag {
    background: linear-gradient(135deg, rgba(77,135,187,0.1), rgba(77,135,187,0.06));
    color: #3f79ad;
}

/* 8. Preview badge – blue */
.home-preview-badge {
    background: #4d87bb;
}

/* 9. Stat value – blue */
.home-stat strong {
    color: #3f79ad;
}

/* 10. Benefit icon bg – blue */
.home-benefit-icon {
    background: rgba(77,135,187,0.1);
    color: #3f79ad;
}

/* 11. Testimonial quote icon */
.home-testimonial-quote-icon {
    color: #3f79ad;
}

/* 12. Testimonial footer */
.home-testimonial footer {
    color: #3f79ad;
}

/* 13. Member verified badge – blue */
.home-member-verified {
    background: #4d87bb;
}

/* 14. Section alt – very light blue tint */
.home-section--alt {
    background: rgba(77,135,187,0.03);
}

/* ============================================================
   HOME – color fix v2: replace all hardcoded green with blue
   ============================================================ */

/* Trust pills */
.home-hero-trust span {
    background: rgba(77,135,187,0.09);
    border-color: rgba(77,135,187,0.18);
    color: #3a79ad;
}

/* Step connector dashes */
.home-step-connector {
    background: repeating-linear-gradient(90deg, rgba(77,135,187,0.28) 0, rgba(77,135,187,0.28) 4px, transparent 4px, transparent 10px);
}

/* Benefit cards – border & shadow */
.home-benefit {
    border-color: rgba(77,135,187,0.10);
    box-shadow: 0 8px 24px rgba(77,135,187,0.07);
}
.home-benefit:hover {
    box-shadow: 0 18px 40px rgba(77,135,187,0.13);
}

/* Member cards – border & shadow */
.home-member-card {
    border-color: rgba(77,135,187,0.11);
    box-shadow: 0 8px 24px rgba(77,135,187,0.07);
}
.home-member-card:hover {
    box-shadow: 0 20px 44px rgba(77,135,187,0.13);
}

/* Member photo placeholder background */
.home-member-photo-bg {
    color: rgba(77,135,187,0.25);
    background: linear-gradient(135deg, rgba(77,135,187,0.07), rgba(77,135,187,0.04));
}

/* Member verified badge (already set in v1 but ensure no var(--primary)) */
.home-member-verified {
    background: #4d87bb;
}

/* Hero aside preview cards */
.home-preview-card {
    border-color: rgba(77,135,187,0.14);
    box-shadow: 0 6px 20px rgba(77,135,187,0.09);
}

/* ============================================================
   REGISTRATION FLOW – 3-step shell
   ============================================================ */

.reg-flow-shell {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 56px;
    background: var(--bg);
}

/* --- Step bar --- */
.reg-step-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 36px;
    width: 100%;
    max-width: 480px;
}

.reg-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.reg-step-bubble {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-raised);
    border: 2px solid var(--border);
    color: var(--text-soft);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.reg-step-item--active .reg-step-bubble {
    background: #4d87bb;
    border-color: #4d87bb;
    color: #fff;
    box-shadow: 0 4px 14px rgba(77,135,187,0.30);
}

.reg-step-item--done .reg-step-bubble {
    background: #3f79ad;
    border-color: #3f79ad;
    color: #fff;
}

.reg-step-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.reg-step-item--active .reg-step-label,
.reg-step-item--done .reg-step-label {
    color: #3f79ad;
}

.reg-step-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 4px;
    margin-bottom: 22px;
    max-width: 80px;
    min-width: 24px;
}

.reg-step-connector--done {
    background: #4d87bb;
}

/* --- Flow inner container --- */
.reg-flow-inner {
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.reg-flow-head {
    text-align: center;
}

.reg-flow-head h1 {
    margin: 8px 0 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
}

.reg-flow-lead {
    margin: 8px auto 0;
    color: var(--text-soft);
    max-width: 52ch;
    line-height: 1.75;
}

.reg-flow-note {
    text-align: center;
    color: var(--text-soft);
    font-size: 0.9rem;
    margin-top: 4px;
}

/* --- Gender cards --- */
.reg-gender-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.reg-gender-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 20px;
    border-radius: 20px;
    background: var(--surface-raised);
    border: 2px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
    cursor: pointer;
    text-align: center;
}

.reg-gender-card:hover {
    border-color: #4d87bb;
    box-shadow: 0 12px 36px rgba(77,135,187,0.14);
    transform: translateY(-3px);
}

.reg-gender-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reg-gender-icon--male {
    background: rgba(77,135,187,0.10);
    color: #3f79ad;
}

.reg-gender-icon--female {
    background: rgba(200,100,150,0.10);
    color: #c05080;
}

.reg-gender-card h2 {
    margin: 0;
    font-size: 1.1rem;
}

.reg-gender-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.6;
}

.reg-gender-btn {
    margin-top: 4px;
    pointer-events: none;
}

/* --- Pledge page --- */
.reg-pledge-wrap {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}

.reg-pledge-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(77,135,187,0.10);
    color: #4d87bb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.reg-pledge-oath {
    background: rgba(77,135,187,0.05);
    border-inline-start: 4px solid #4d87bb;
    border-radius: 0 14px 14px 0;
    padding: 18px 20px 18px 24px;
    position: relative;
}

[dir="rtl"] .reg-pledge-oath {
    border-inline-start: 4px solid #4d87bb;
    border-radius: 14px 0 0 14px;
    padding: 18px 24px 18px 20px;
}

.reg-pledge-oath-icon {
    font-size: 5rem;
    line-height: 0.5;
    color: #4d87bb;
    opacity: 0.20;
    font-family: Georgia, serif;
    position: absolute;
    top: 12px;
    inset-inline-start: 10px;
}

.reg-pledge-oath p {
    margin: 0;
    font-style: italic;
    line-height: 1.9;
    color: var(--text);
    position: relative;
    z-index: 1;
}

.reg-pledge-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reg-pledge-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.94rem;
    color: var(--text);
}

.reg-pledge-points li svg {
    flex-shrink: 0;
    color: #4d87bb;
}

.reg-pledge-confirm {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reg-pledge-check-row {
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.reg-pledge-btn {
    transition: opacity 0.2s;
}

.reg-pledge-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.reg-pledge-back {
    text-align: center;
    color: var(--text-soft);
    font-size: 0.88rem;
    text-decoration: none;
}

.reg-pledge-back:hover {
    color: var(--primary);
}

@keyframes pledgeShake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

.reg-pledge-check-row--shake {
    animation: pledgeShake 0.3s ease;
    border-color: #e05050;
}

/* --- Responsive --- */
@media (max-width: 560px) {
    .reg-gender-grid { grid-template-columns: 1fr; }
    .reg-pledge-wrap { padding: 24px 18px 22px; }
    .reg-flow-shell  { padding: 20px 12px 44px; }
    .reg-step-bubble { width: 30px; height: 30px; font-size: 0.78rem; }
    .reg-step-label  { font-size: 0.65rem; }
}

/* ============================================================
   HOME – SEARCH BOX
   ============================================================ */

.home-search-box {
    background: var(--surface-raised);
    border: 1px solid rgba(77,135,187,0.13);
    border-radius: 20px;
    padding: 24px 24px 18px;
    box-shadow: 0 6px 24px rgba(77,135,187,0.08);
}

.home-search-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr)) auto;
    gap: 12px;
    align-items: end;
}

.home-search-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-soft);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-search-field select {
    width: 100%;
}

.home-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    white-space: nowrap;
    min-height: 42px;
}

.home-search-note {
    margin: 12px 0 0;
    font-size: 0.82rem;
    color: var(--text-soft);
    text-align: center;
}

@media (max-width: 900px) {
    .home-search-row {
        grid-template-columns: 1fr 1fr;
    }
    .home-search-field--submit {
        grid-column: span 2;
    }
    .home-search-btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
    .home-search-row { grid-template-columns: 1fr; }
    .home-search-field--submit { grid-column: span 1; }
}

/* ============================================================
   HOME – MEMBER CARDS (online dot, badge)
   ============================================================ */

.home-member-online-dot {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
}

.home-member-badge-tag {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 2;
    background: #4d87bb;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ============================================================
   HOME – SUCCESS STORIES SECTION
   ============================================================ */

.home-stories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}

.home-story-card {
    background: var(--surface-raised);
    border: 1px solid rgba(77,135,187,0.10);
    border-radius: 18px;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    box-shadow: 0 6px 20px rgba(77,135,187,0.07);
}

.home-story-quote-icon {
    font-size: 4rem;
    line-height: 0.6;
    color: #4d87bb;
    opacity: 0.18;
    font-family: Georgia, serif;
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
}

.home-story-text {
    margin: 0;
    padding-top: 18px;
    font-style: italic;
    color: var(--text);
    line-height: 1.8;
    font-size: 0.93rem;
    position: relative;
    z-index: 1;
}

.home-story-card footer {
    font-size: 0.84rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-story-stars {
    color: #f59e0b;
    letter-spacing: 1px;
}

.home-section-action {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

@media (max-width: 720px) {
    .home-stories-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME – BLOG SECTION
   ============================================================ */

.home-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
}

.home-blog-card {
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid rgba(77,135,187,0.10);
    box-shadow: 0 6px 20px rgba(77,135,187,0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(77,135,187,0.11);
}

.home-blog-image-wrap {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: rgba(77,135,187,0.07);
}

.home-blog-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s;
}

.home-blog-card:hover .home-blog-image-wrap img {
    transform: scale(1.04);
}

.home-blog-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.home-blog-cat {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4d87bb;
}

.home-blog-body h3 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.45;
}

.home-blog-body h3 a {
    color: inherit;
    text-decoration: none;
}

.home-blog-body h3 a:hover {
    color: #4d87bb;
}

.home-blog-body p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.87rem;
    line-height: 1.6;
    flex: 1;
}

.home-blog-date {
    font-size: 0.78rem;
    color: var(--text-soft);
    margin-top: auto;
}

@media (max-width: 720px) {
    .home-blog-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .home-blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME HERO – integrated search bar
   ============================================================ */

.home-hero-search {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(77,135,187,0.18);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 4px 20px rgba(77,135,187,0.10);
}

.home-hero-search-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.8fr auto;
    gap: 8px;
    align-items: center;
}

.home-hero-search-field select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(77,135,187,0.22);
    background: #fff;
    padding: 9px 10px;
    font-size: 0.9rem;
    color: var(--text);
}

.home-hero-search-field select:focus {
    border-color: #4d87bb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(77,135,187,0.12);
}

.home-hero-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 0.9rem;
    min-height: 40px;
}

/* Dark background hero variant */
[data-theme="dark"] .home-hero-search {
    background: rgba(30,40,60,0.82);
    border-color: rgba(77,135,187,0.30);
}

@media (max-width: 900px) {
    .home-hero-search-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .home-hero-search-btn {
        grid-column: span 2;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .home-hero-search-row { grid-template-columns: 1fr; }
    .home-hero-search-btn { grid-column: span 1; }
}

/* ============================================================
   FINAL PREMIUM PASS (2026-04-16)
   ============================================================ */
.home-premium-hero {
    padding: 40px 0 28px;
}

.home-premium-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 20px;
    align-items: stretch;
}

.home-premium-copy,
.home-premium-visual {
    background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(245,249,255,0.92));
    border: 1px solid rgba(77,135,187,0.16);
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(34,68,105,0.08);
}

.home-premium-copy {
    padding: 30px;
    display: grid;
    gap: 14px;
}

.home-premium-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.home-premium-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 1.03rem;
    line-height: 1.75;
    max-width: 58ch;
}

.home-premium-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-hero-search--premium {
    margin-top: 2px;
}

.home-premium-search-note {
    margin: 0;
    color: var(--text-faint);
    font-size: 0.86rem;
}

.home-premium-visual {
    padding: 16px;
    display: grid;
    gap: 12px;
}

.home-premium-visual-media {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(77,135,187,0.18);
    background: linear-gradient(135deg, rgba(77,135,187,0.16), rgba(77,135,187,0.05));
    min-height: 230px;
}

.home-premium-visual-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-premium-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.home-premium-stat-card {
    border-radius: 14px;
    border: 1px solid rgba(77,135,187,0.16);
    background: rgba(255,255,255,0.9);
    padding: 10px;
    display: grid;
    gap: 4px;
}

.home-premium-stat-card strong {
    font-size: 1.12rem;
    line-height: 1;
}

.home-premium-stat-card span {
    font-size: 0.8rem;
    color: var(--text-soft);
}

.home-premium-country-chip {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2f6494;
    border: 1px solid rgba(77,135,187,0.26);
    background: rgba(77,135,187,0.12);
}

.home-premium-shortcuts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.home-shortcut-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-main);
    border: 1px solid rgba(77,135,187,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.96);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-shortcut-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(49,84,122,0.1);
    color: var(--primary);
}

.home-members-grid--premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-member-card--premium .home-member-photo {
    min-height: 226px;
}

.home-member-card--premium .home-member-body {
    padding: 13px 13px 14px;
}

.home-member-card--premium .home-member-name {
    font-size: 1rem;
}

.home-member-card--premium .home-member-btn {
    min-height: 35px;
}

.home-blog-grid--premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-blog-grid--premium .home-blog-image-wrap {
    aspect-ratio: 3 / 2;
}

.home-blog-grid--premium .home-blog-body h3 {
    min-height: 2.8em;
}

.home-blog-grid--premium .home-blog-body p {
    min-height: 3.9em;
}

.blog-listing-page .blog-card {
    border-radius: 16px;
    border: 1px solid rgba(77,135,187,0.14);
    box-shadow: 0 10px 30px rgba(33,65,101,0.08);
}

.blog-listing-page .blog-card-image-wrap {
    aspect-ratio: 3 / 2;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.blog-listing-page .blog-card-image {
    object-fit: cover;
    object-position: center;
}

.blog-card-content {
    gap: 7px;
}

.blog-card-content h2 {
    font-size: 1.03rem;
    line-height: 1.34;
}

.blog-card-content p {
    font-size: 0.91rem;
}

.blog-post-page .blog-post-card .blog-card-image-wrap {
    aspect-ratio: 16 / 7;
}

.blog-post-page .blog-post-image {
    object-fit: cover;
}

@media (max-width: 1080px) {
    .home-premium-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-premium-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-members-grid--premium,
    .home-blog-grid--premium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .home-premium-copy {
        padding: 20px;
    }

    .home-premium-stats {
        grid-template-columns: 1fr;
    }

    .home-premium-shortcuts,
    .home-members-grid--premium,
    .home-blog-grid--premium {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ADMIN SETTINGS v2 (final reorg)
   ============================================================ */
.admin-settings-v2 {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.admin-settings-v2-nav,
.admin-settings-v2-form {
    border-radius: 14px;
}

.admin-settings-v2-nav {
    position: sticky;
    top: 14px;
    display: grid;
    gap: 12px;
    padding: 16px;
}

.admin-settings-v2-nav h2 {
    margin: 0;
    font-size: 0.96rem;
}

.admin-settings-v2-nav nav {
    display: grid;
    gap: 7px;
}

.admin-settings-v2-nav nav button {
    appearance: none;
    width: 100%;
    text-align: start;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.86rem;
    color: var(--admin-text-soft);
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
}

.admin-settings-v2-nav nav button:hover {
    border-color: var(--admin-primary);
    color: var(--admin-primary-dark);
    background: var(--admin-bg);
}

.admin-settings-v2-nav nav button.is-active {
    border-color: var(--admin-primary);
    background: rgba(47, 111, 163, 0.1);
    color: var(--admin-primary-dark);
    font-weight: 700;
}

.admin-settings-v2-form {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.admin-settings-v2-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 12px;
    background: linear-gradient(180deg, #fff, var(--admin-bg));
}

.admin-settings-v2-savebar p {
    margin: 3px 0 0;
    color: var(--admin-text-soft);
    font-size: 0.8rem;
}

.admin-settings-v2-savebar--bottom {
    justify-content: flex-end;
}

.admin-settings-v2-section {
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 14px;
    display: none;
    gap: 12px;
    background: #fff;
}

.admin-settings-v2-section.is-active {
    display: grid;
}

.admin-settings-v2-section .account-section-title {
    margin-bottom: 0;
    border-bottom: 1px solid var(--admin-border);
    padding-bottom: 8px;
}

.admin-settings-v2-section .account-section-title h2 {
    font-size: 0.96rem;
}

.admin-settings-v2-section .account-section-title span {
    color: var(--admin-text-soft);
    font-size: 0.8rem;
    font-weight: 500;
}

.admin-settings-v2-toggles {
    grid-template-columns: 1fr;
    gap: 8px;
}

.admin-settings-v2-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-settings-v2-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-settings-v2-subcard {
    gap: 10px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 12px;
    background: var(--admin-bg);
}

.admin-settings-v2-system-tools {
    display: grid;
    gap: 12px;
    grid-column: 2;
}

/* 2026-04-25 fix: the user reported System status / Email test / System
   tools were rendered on every settings tab (e.g. SEO) instead of only on
   "System maintenance". The Blade marks the section with the HTML `hidden`
   attribute and toggles it via JS, but the explicit `display: grid` rule
   above was winning over the UA `[hidden] { display: none }` because both
   selectors have equal specificity (0,1,0) and the class came later in the
   stylesheet. Force the hidden state to fully collapse the block. */
.admin-settings-v2-system-tools[hidden] {
    display: none !important;
}

/* 2026-04-25: Phase 4 — Maintenance / Logs / Jobs / DB / Storage tools.
   Lightweight, theme-aware grid that matches the existing admin look. */
.admin-maintenance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.admin-maintenance-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    background: var(--admin-bg, #f8f9fb);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
}
.admin-maintenance-card__body h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}
.admin-maintenance-card__body p {
    margin: 0;
    color: var(--text-soft, #555);
    font-size: .9em;
    line-height: 1.5;
}
.admin-logs-table td {
    vertical-align: top;
    padding: 10px;
}
.admin-logs-table code {
    font-size: .85em;
    color: var(--text-soft, #555);
}
.status-badge-danger {
    color: #b3261e;
    font-weight: 700;
}

.admin-settings-v2-system-tools .form-card {
    padding: 14px;
}

.admin-settings-v2-status-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-settings-v2-status-card {
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    padding: 9px;
    background: var(--admin-bg);
    display: grid;
    gap: 2px;
}

.admin-settings-v2-status-card span {
    font-size: 0.75rem;
    color: var(--admin-text-soft);
}

.admin-settings-v2-status-card strong {
    font-size: 0.9rem;
}

.admin-settings-v2-tools-actions {
    display: grid;
    gap: 8px;
}

.status-badge-ok,
.status-badge-off,
.status-badge-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

.status-badge-ok {
    color: #12693f;
    background: rgba(18, 105, 63, 0.12);
    border-color: rgba(18, 105, 63, 0.28);
}

.status-badge-off {
    color: #9e2f2f;
    background: rgba(158, 47, 47, 0.12);
    border-color: rgba(158, 47, 47, 0.26);
}

.status-badge-warn {
    color: #996300;
    background: rgba(153, 99, 0, 0.14);
    border-color: rgba(153, 99, 0, 0.3);
}

.admin-settings-v2-warning {
    background: #fff7dc;
    border-color: rgba(209, 160, 36, 0.45);
}

@media (max-width: 1300px) {
    .admin-settings-v2 {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

@media (max-width: 960px) {
    .admin-settings-v2 {
        grid-template-columns: 1fr;
    }

    .admin-settings-v2-nav {
        position: static;
    }

    .admin-settings-v2-nav nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-settings-v2-payment-grid,
    .admin-settings-v2-system-tools,
    .admin-settings-v2-status-grid {
        grid-template-columns: 1fr;
    }

    .admin-settings-v2-system-tools {
        grid-column: 1;
    }

    .admin-settings-v2-savebar {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-settings-v2-savebar--bottom {
        align-items: stretch;
    }

    .admin-settings-v2-savebar--bottom .btn {
        width: 100%;
    }
}

/* ============================================================
   QA FIX: Button text truncation & layout consistency
   ============================================================ */

/* Prevent panel-links from being squeezed by adjacent content */
.account-dashboard-panel-links {
    flex-shrink: 0;
}

/* Allow title div to shrink so buttons aren't cut */
.account-section-title > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

/* Ensure all nav/action links don't wrap */
.account-side-links a,
.account-dashboard-panel-links a,
.account-tabs-nav a,
.auth-header-links a {
    white-space: nowrap;
    overflow: visible;
}

/* Chat / notification action buttons - prevent word-break */
.chat-index-header a,
.notifications-header-actions a,
.account-notifications-actions a {
    white-space: nowrap;
}

/* Mark-all-read and similar action links */
[data-mark-all-read],
.notifications-mark-read {
    white-space: nowrap;
}

/* Admin sidebar link text must not wrap */
.admin-shell-sidenav__list a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Uniform dashboard stat strip - 3 cols on desktop */
@media (min-width: 768px) {
    .account-dashboard-status-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Search submit group: allow wrap but prevent text cut */
.account-search-submit-group .btn {
    white-space: nowrap;
    min-width: max-content;
}

/* Admin settings nav buttons should not overflow */
.admin-settings-v2-nav nav button {
    white-space: nowrap;
    text-align: start;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ============================================================
   BUG FIX – Discover search chips: contrast fix for light bg
   ============================================================ */
.discover-search-chips .btn-ghost {
    background: var(--primary-soft, #dfeee8);
    border: 1.5px solid rgba(20, 92, 75, 0.22);
    color: var(--primary, #145c4b);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 100px;
    padding: 5px 14px;
    line-height: 1.4;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.discover-search-chips .btn-ghost:hover,
.discover-search-chips .btn-ghost:focus-visible {
    background: rgba(20, 92, 75, 0.13);
    border-color: rgba(20, 92, 75, 0.5);
    color: var(--primary, #145c4b);
}
.discover-search-chips .btn-ghost:active {
    transform: scale(0.97);
}
.discover-search-chips .btn-outline {
    background: #fff;
    border: 1.5px solid rgba(20, 92, 75, 0.35);
    color: var(--primary, #145c4b);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 100px;
    padding: 5px 14px;
    line-height: 1.4;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.discover-search-chips .btn-outline:hover,
.discover-search-chips .btn-outline:focus-visible {
    background: var(--primary-soft, #dfeee8);
    border-color: var(--primary, #145c4b);
    box-shadow: 0 2px 8px rgba(20, 92, 75, 0.1);
}
.discover-search-chips .btn-outline:active {
    transform: scale(0.97);
}
.discover-search-label-muted {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft, #607068);
}

/* ============================================================
   BUG FIX – Profile photo section: layout & overlap fix
   ============================================================ */
.profile-photo-manager {
    display: flex !important;
    flex-direction: row !important;
    gap: 28px !important;
    align-items: flex-start !important;
}
.profile-photo-preview-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.profile-photo-actions {
    flex: 1 1 auto;
    min-width: 0;
}
/* Un-clip the container so badge renders below the circle */
.profile-photo-frame,
.profile-photo-static {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* The actual circular avatar image */
#profile-current-photo,
.profile-photo-img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
    border: 3px solid var(--primary-soft, #dfeee8);
    box-shadow: 0 4px 18px rgba(20, 92, 75, 0.14);
}
/* Badge below avatar, no overlap */
.profile-photo-badge {
    margin-top: 10px;
    text-align: center;
    flex-shrink: 0;
}
/* Compact heading inside photo panel */
.profile-section-head.compact {
    margin-bottom: 14px;
}
.profile-section-head.compact h2 {
    font-size: 1.06rem;
    margin: 0 0 4px;
    line-height: 1.3;
}
.profile-section-head.compact p {
    font-size: 0.9rem;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.45;
}
.photo-hints {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
}
.hint-text {
    font-size: 0.84rem;
    margin: 0;
    color: var(--text-soft);
    line-height: 1.4;
}
.hint-text.info    { color: var(--primary, #145c4b); font-weight: 500; }
.hint-text.success { color: #198754; font-weight: 500; }
.hint-text.danger  { color: #c0392b; font-weight: 500; }
/* Quick facts strip */
.profile-edit-quickfacts {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border, rgba(20,92,75,0.1));
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}
.profile-edit-quickfacts .key-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.87rem;
    min-height: unset;
    flex-direction: row;
}
.profile-edit-quickfacts .key-fact > span  { color: var(--text-soft); }
.profile-edit-quickfacts .key-fact > strong { font-weight: 600; }
/* Mobile: stack photo above actions */
@media (max-width: 640px) {
    .profile-photo-manager {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    .profile-photo-actions {
        width: 100%;
    }
    .profile-section-head.compact {
        text-align: center;
    }
    .photo-action-grid {
        justify-content: center;
    }
}

/* ============================================================
   BUG FIX – Blog cards: polish & UX improvement
   ============================================================ */
/* Hover lift on all blog cards */
.blog-card {
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(20, 92, 75, 0.12);
}
/* Better padding for listing page grid cards */
.blog-listing-page .blog-card-content {
    padding: 14px 16px 16px;
    gap: 8px;
    display: flex;
    flex-direction: column;
}
/* Push CTA to bottom */
.blog-listing-page .blog-card-content .blog-read-more-btn {
    margin-top: auto;
    align-self: flex-start;
}
/* Category pill badge inside meta */
.blog-card-meta .text-link {
    font-weight: 600;
    color: var(--primary, #145c4b);
    text-decoration: none;
    background: var(--primary-soft, #dfeee8);
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.15s;
}
.blog-card-meta .text-link:hover {
    background: rgba(20, 92, 75, 0.18);
}
/* Meta line flex */
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--text-soft);
    font-size: 0.84rem;
}
/* Excerpt clamp */
.blog-listing-page .blog-card-content > p:not(.blog-card-meta) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-soft);
    line-height: 1.55;
    font-size: 0.91rem;
    margin: 0;
}
/* Title */
.blog-listing-page .blog-card-content h2 {
    font-size: 1.04rem;
    line-height: 1.3;
    font-weight: 700;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Lightweight read-more CTA for grid cards */
.blog-read-more-btn {
    font-size: 0.86rem !important;
    padding: 5px 14px !important;
    min-height: 30px !important;
    border-width: 1.5px !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
}
/* Image zoom on hover for grid cards */
.blog-listing-page .blog-card:not(.blog-card--featured) .blog-card-image-wrap {
    overflow: hidden;
}
.blog-listing-page .blog-card:not(.blog-card--featured) .blog-card-image {
    transition: transform 0.38s ease;
}
.blog-listing-page .blog-card:not(.blog-card--featured):hover .blog-card-image {
    transform: scale(1.04);
}
/* Featured card polish */
.blog-card--featured {
    overflow: hidden;
    border: 1px solid var(--border-strong, rgba(20,92,75,0.18));
}
.blog-card-content--featured {
    padding: 24px 22px;
    gap: 14px;
}
.blog-card-content--featured .blog-featured-title {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.22;
    margin: 0;
}

/* ============================================================
   2026-04-17 blog compactness + white background final pass
   ============================================================ */
.blog-listing-page,
.blog-post-page,
.blog-post-card,
.blog-post-card .blog-card-image-wrap,
.blog-post-card .blog-card-image,
.blog-post-card .blog-post-image,
.blog-post-card--guest {
    background: #fff;
}

.blog-hero-compact {
    padding-top: 20px !important;
    padding-bottom: 12px !important;
    margin-bottom: 8px !important;
}

.blog-hero-compact .section-heading h1 {
    margin-bottom: 6px;
    font-size: clamp(1.3rem, 2.3vw, 1.75rem);
    line-height: 1.22;
}

.blog-listing-page .blog-head-compact {
    padding: 14px 16px;
}

.blog-listing-page .blog-head-compact h1 {
    margin-bottom: 4px;
    font-size: clamp(1.28rem, 2.2vw, 1.7rem);
}

.blog-categories-card {
    padding: 10px 12px !important;
    margin-top: 10px !important;
}

.blog-category-chips {
    gap: 6px !important;
}

.blog-category-chips .badge-inline {
    min-height: 28px;
    padding: 4px 11px;
    font-size: 0.8rem;
    border-radius: 999px;
}

.blog-post-grid--rest {
    gap: 12px !important;
    margin-top: 12px !important;
}

.blog-listing-page .blog-card,
.blog-card {
    border-radius: 14px;
}

.blog-listing-page .blog-card-image-wrap:not(.blog-card-image-wrap--featured) {
    aspect-ratio: 16 / 9;
}

.blog-listing-page .blog-card-content {
    padding: 11px 12px 12px !important;
    gap: 6px !important;
}

.blog-listing-page .blog-card-content h2 {
    font-size: 0.99rem !important;
    line-height: 1.32 !important;
}

.blog-listing-page .blog-card-content > p:not(.blog-card-meta) {
    -webkit-line-clamp: 2;
    font-size: 0.88rem;
    line-height: 1.5;
}

.blog-listing-page .blog-card-content .blog-read-more-btn,
.blog-listing-page .blog-card-content .btn {
    min-height: 32px !important;
    padding: 4px 11px !important;
    font-size: 0.82rem !important;
}

.blog-card-image-wrap--featured {
    aspect-ratio: 16 / 7;
}

.blog-card-content--featured {
    padding: 14px 14px 16px !important;
    gap: 8px !important;
}

.blog-card-content--featured .blog-featured-title {
    font-size: clamp(1.08rem, 1.9vw, 1.32rem) !important;
}

.blog-post-page .blog-post-card,
.blog-post-card--guest {
    padding: 12px !important;
    gap: 10px !important;
}

.blog-post-page .blog-post-card .blog-card-image-wrap,
.blog-post-card--guest .blog-card-image-wrap {
    aspect-ratio: 16 / 8 !important;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 !important;
    background: #fff !important;
}

.blog-post-page .blog-post-image,
.blog-post-card--guest .blog-post-image {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #fff !important;
}

@media (max-width: 992px) {
    .blog-post-grid--rest {
        gap: 10px !important;
    }

    .blog-post-page .blog-post-card .blog-card-image-wrap,
    .blog-post-card--guest .blog-card-image-wrap {
        aspect-ratio: 16 / 9 !important;
    }
}

/* ============================================================
   Public footer (modernised) — 2026-04-25
   Single source of truth for the public CMS-driven footer:
   - full-bleed background with hairline top border
   - clear typographic hierarchy (h2 + link list + description)
   - graceful responsive collapse: 5 cols → tablet 2 cols → mobile 1 col
   - no rounded floating "card" or hardcoded brand gradient panel
   - bottom bar with copyright + locale chip
   Legacy block previously at L7858 has been removed; the [data-footer-sections]
   tuning has been replaced by a single auto-fit rule because the brand
   section is given a wider min-width and grid auto-fit handles the rest.
   ============================================================ */

.footer-cms-shell {
    /* 2026-04-25 take 3: user wanted the original "verde bello" feel.
       Brand-coloured dark green background with a deeper bottom edge,
       light text, and a thin highlight on the top edge. Matches the
       site --color-primary palette. */
    margin-top: 3rem;
    padding-block: 3rem 0;
    /* Same teal-green as the registration page hero (.home-preview-avatar--teal),
       so the footer feels visually consistent with the brand surfaces. */
    background: linear-gradient(135deg, #2a8a78 0%, #1e6b5a 100%);
    color: #e8f1ec;
    border-top: 3px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* All children inherit a light text colour against the dark background. */
.footer-cms-shell .footer-cms-section__title {
    color: #ffffff;
}

.footer-cms-shell .footer-cms-description {
    color: rgba(232, 241, 236, 0.78);
}

.footer-cms-shell .footer-cms-description a {
    color: #ffd98a;
}

.footer-cms-shell .footer-cms-link {
    color: rgba(232, 241, 236, 0.82);
}

.footer-cms-shell .footer-cms-link:hover,
.footer-cms-shell .footer-cms-link:focus-visible {
    color: #ffffff;
}

/* Brand title: gradient still works on dark background; tweak so it
   stays legible (no transparent fill that would disappear). */
.footer-cms-shell .footer-cms-section--brand .footer-cms-section__title {
    background: linear-gradient(135deg, #ffffff, #ffd98a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Bottom bar against dark background */
.footer-cms-shell .footer-cms-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-cms-shell .footer-cms-copy {
    color: rgba(232, 241, 236, 0.68);
}

.footer-cms-shell .footer-cms-locale {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
}

.footer-cms-inner {
    /* relies on .container for max-width + horizontal gutter */
    width: 100%;
}

.footer-cms-grid {
    display: grid;
    gap: 2rem 1.75rem;
    padding-block: 0.5rem 1.75rem;
    /* Brand section has min 220px, the rest min 150px. auto-fit collapses
       gracefully when there's not enough room for all of them. */
    grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    align-items: start;
    /* Defensive: long unbreakable strings (e.g. test labels) would otherwise
       blow out the grid track. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.footer-cms-section {
    min-width: 0;
}

.footer-cms-section__title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.005em;
    color: var(--text, #1a2421);
}

/* Brand section: distinctive heading, no panel/card around it. */
.footer-cms-section--brand .footer-cms-section__title {
    margin-bottom: 0.65rem;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
    background: linear-gradient(135deg, var(--color-primary, #145c4b), var(--color-secondary, #2f6fa3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.footer-cms-description {
    margin: 0;
    color: var(--text-soft, #55675f);
    line-height: 1.7;
    font-size: 0.93rem;
    max-width: 32em;
}

.footer-cms-description :is(p, ul, ol) {
    margin: 0 0 0.55rem;
}

.footer-cms-description a {
    color: var(--color-primary, #145c4b);
    font-weight: 700;
    text-decoration: none;
}

.footer-cms-description a:hover,
.footer-cms-description a:focus-visible {
    text-decoration: underline;
}

.footer-cms-links {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.footer-cms-link {
    color: var(--text-soft, #55675f);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.5;
    padding-block: 0.15rem;
    transition: color 0.18s ease, padding 0.18s ease;
}

.footer-cms-link:hover,
.footer-cms-link:focus-visible {
    color: var(--color-primary, #145c4b);
    padding-inline-start: 0.35rem;
}

[dir="rtl"] .footer-cms-link:hover,
[dir="rtl"] .footer-cms-link:focus-visible {
    padding-inline-start: 0;
    padding-inline-end: 0.35rem;
}

/* Bottom bar: hairline + © year + locale chip */
.footer-cms-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem 1.4rem;
    padding-block: 1.1rem 1.4rem;
    border-top: 1px solid rgba(20, 92, 75, 0.08);
}

.footer-cms-copy {
    color: var(--text-soft, #55675f);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
}

.footer-cms-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.footer-cms-locale {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--color-primary, #145c4b);
    background: rgba(20, 92, 75, 0.08);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
}

/* Tablet / narrow desktop */
@media (max-width: 1024px) {
    .footer-cms-grid {
        gap: 1.75rem 1.25rem;
        grid-template-columns: minmax(200px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* Tablet portrait: brand spans full width, others go 2-up */
@media (max-width: 768px) {
    .footer-cms-shell {
        margin-top: 2rem;
        padding-block: 2rem 0;
    }
    .footer-cms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem 1rem;
    }
    .footer-cms-section--brand {
        grid-column: 1 / -1;
    }
    .footer-cms-section__title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    .footer-cms-section--brand .footer-cms-section__title {
        font-size: 1.2rem;
    }
    .footer-cms-bottom {
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
}

/* Phone */
@media (max-width: 480px) {
    .footer-cms-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .footer-cms-section--brand .footer-cms-section__title {
        font-size: 1.15rem;
    }
    .footer-cms-link {
        font-size: 0.95rem;
        padding-block: 0.25rem;
    }
}

/* Defensive: never let admin-entered long strings break the layout */
.footer-cms-section__title,
.footer-cms-description,
.footer-cms-link {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================
   2026-04-25 Footer CMS admin — full layout overhaul
   - Compact "stat strip" header
   - "+ New section" collapsed by default (no more 600px form on top)
   - Single .fc-section card per section with three sub-panels:
     existing links, "+ add link/page", "edit section"
   - Lazy editor init: see `data-rich-editor-lazy` in rich-editor partial
   ============================================================ */

.fc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin: 0 0 1.2rem;
}

.fc-stat {
    background: #fff;
    border: 1px solid rgba(20, 92, 75, 0.12);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(20, 92, 75, 0.04);
}

.fc-stat strong {
    display: block;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-strong, #142a23);
    line-height: 1;
}

.fc-stat span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-soft, #6a7c75);
}

.fc-stat--page strong { color: #145c4b; }
.fc-stat--link strong { color: #1f4d6f; }

/* Collapsed "+ New section" form */
.fc-create-section {
    margin: 0 0 1.4rem;
    background: linear-gradient(135deg, #f1faf6 0%, #e8f3ee 100%);
    border: 1px dashed rgba(20, 92, 75, 0.35);
    border-radius: 12px;
    overflow: hidden;
}

.fc-create-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    font-weight: 600;
    color: #145c4b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.fc-create-section > summary::-webkit-details-marker { display: none; }

.fc-create-section[open] > summary {
    background: #145c4b;
    color: #fff;
    border-bottom: 1px solid #0f4a3d;
}

.fc-create-section__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.fc-create-section__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.fc-create-section__text strong {
    font-size: 1rem;
    font-weight: 600;
}

.fc-create-section__text small {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
    line-height: 1.4;
}

.fc-create-section[open] > summary { align-items: flex-start; }

.fc-create-section[open] .fc-form {
    padding: 1.2rem;
    background: #fff;
}

.fc-create-section .fc-form {
    padding: 0;
}

/* Section title */
.fc-section-title {
    font-size: 1.15rem;
    color: var(--text-strong, #142a23);
    margin: 0 0 0.8rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid rgba(20, 92, 75, 0.12);
}

/* Section list */
.fc-sections {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.fc-section {
    background: #fff;
    border: 1px solid rgba(20, 92, 75, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(20, 92, 75, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fc-section:hover {
    border-color: rgba(20, 92, 75, 0.22);
    box-shadow: 0 4px 14px rgba(20, 92, 75, 0.08);
}

.fc-section--empty {
    border-color: #f0c45a;
    background: linear-gradient(135deg, #fffaf0 0%, #fff 50%);
}

.fc-section__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid rgba(20, 92, 75, 0.08);
}

.fc-section__title {
    flex: 1;
    min-width: 0;
}

.fc-section__title h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-strong, #142a23);
    overflow-wrap: anywhere;
}

.fc-section__title small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-soft, #6a7c75);
}

.fc-section__title code {
    background: #f1faf6;
    color: #145c4b;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}

.fc-pill {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-inline-start: 0.35rem;
}

.fc-pill--page { background: #e0f1eb; color: #145c4b; }
.fc-pill--link { background: #e3edf6; color: #1f4d6f; }

/* Empty section warning */
.fc-empty-warn {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.9rem 1.15rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, #fff7e6 0%, #ffeec2 100%);
    border: 1px solid #f0c45a;
    border-radius: 10px;
}

.fc-empty-warn__icon {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.fc-empty-warn__body {
    flex: 1;
    min-width: 0;
}

.fc-empty-warn__body strong {
    display: block;
    color: #7a5300;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.fc-empty-warn__body p {
    margin: 0;
    color: #6b5a2c;
    font-size: 0.86rem;
    line-height: 1.45;
}

.fc-empty-warn .btn { flex-shrink: 0; }

/* Existing links list */
.fc-links {
    padding: 0.4rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fc-link {
    border: 1px solid rgba(20, 92, 75, 0.1);
    border-radius: 10px;
    background: #fafcfb;
    overflow: hidden;
}

.fc-link > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.55rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    user-select: none;
    transition: background 0.15s ease;
}

.fc-link > summary::-webkit-details-marker { display: none; }
.fc-link > summary:hover { background: #f1faf6; }

.fc-link[open] > summary {
    background: #f1faf6;
    border-bottom: 1px solid rgba(20, 92, 75, 0.1);
}

.fc-link__icon {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

.fc-link__main {
    flex: 1;
    min-width: 0;
}

.fc-link__main strong {
    display: block;
    font-size: 0.92rem;
    color: var(--text-strong, #142a23);
    overflow-wrap: anywhere;
}

.fc-link__main small {
    display: block;
    font-size: 0.78rem;
    color: var(--text-soft, #6a7c75);
    overflow-wrap: anywhere;
}

.fc-link__url {
    color: #145c4b;
    text-decoration: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.fc-link__url:hover { text-decoration: underline; }

.fc-link[open] .fc-form,
.fc-link[open] .fc-link__danger {
    padding: 1rem;
    background: #fff;
}

.fc-link__danger {
    margin: 0;
    padding-top: 0;
    border-top: 1px dashed rgba(220, 53, 69, 0.25);
}

/* Add panel + Edit section sub-details */
.fc-add-panel,
.fc-section-edit {
    border-top: 1px solid rgba(20, 92, 75, 0.08);
}

.fc-add-panel > summary,
.fc-section-edit > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 1.15rem;
    font-weight: 600;
    color: var(--text-strong, #142a23);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    user-select: none;
    transition: background 0.15s ease;
}

.fc-add-panel > summary::-webkit-details-marker,
.fc-section-edit > summary::-webkit-details-marker { display: none; }

.fc-add-panel > summary:hover,
.fc-section-edit > summary:hover {
    background: #f1faf6;
}

.fc-add-panel[open] > summary {
    background: #145c4b;
    color: #fff;
}

.fc-section-edit[open] > summary {
    background: rgba(20, 92, 75, 0.08);
    color: #145c4b;
}

.fc-add-panel[open] .fc-form,
.fc-section-edit[open] .fc-form {
    padding: 1.1rem 1.15rem;
}

.fc-section-edit[open] .fc-section-edit__danger {
    padding: 0 1.15rem 1.1rem;
    margin: 0;
    border-top: 1px dashed rgba(220, 53, 69, 0.25);
    padding-top: 0.8rem;
}

/* Type toggle (page vs link) */
.fc-type-toggle {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.fc-type-toggle legend {
    grid-column: 1 / -1;
    margin-bottom: 0.35rem;
}

.fc-type-card {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.fc-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fc-type-card__inner {
    display: block;
    padding: 0.75rem 0.95rem;
    border: 2px solid rgba(20, 92, 75, 0.15);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.fc-type-card input[type="radio"]:checked + .fc-type-card__inner {
    border-color: #145c4b;
    background: #f1faf6;
    box-shadow: 0 4px 10px rgba(20, 92, 75, 0.1);
}

.fc-type-card input[type="radio"]:focus-visible + .fc-type-card__inner {
    outline: 2px solid #145c4b;
    outline-offset: 2px;
}

.fc-type-card__icon {
    font-size: 1.25rem;
    margin-inline-end: 0.3rem;
    vertical-align: middle;
}

.fc-type-card strong {
    font-size: 0.92rem;
    color: var(--text-strong, #142a23);
}

.fc-type-card small {
    display: block;
    font-size: 0.78rem;
    color: var(--text-soft, #5a6a64);
    line-height: 1.4;
    margin-top: 0.2rem;
}

/* Live URL preview */
.fc-url-preview {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-soft, #5a6a64);
}

.fc-url-preview code {
    background: #f1faf6;
    padding: 0.08rem 0.35rem;
    border-radius: 5px;
    color: #145c4b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.fc-form { margin: 0; }

.fc-form__footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .fc-stats { grid-template-columns: 1fr 1fr 1fr; }
    .fc-stat strong { font-size: 1.3rem; }
    .fc-empty-warn { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ===== legacy classes kept for backwards compatibility ===== */
.footer-cms-empty-warn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, #fff7e6 0%, #ffeec2 100%);
    border: 1px solid #f0c45a;
    border-radius: 12px;
    margin: 0.6rem 0 1rem;
}

.footer-cms-empty-warn .admin-empty-state__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.footer-cms-empty-warn .admin-empty-state__body {
    flex: 1;
    min-width: 0;
}

.footer-cms-empty-warn .admin-empty-state__body strong {
    display: block;
    color: #7a5300;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.footer-cms-empty-warn .admin-empty-state__body p {
    margin: 0;
    color: #6b5a2c;
    font-size: 0.92rem;
    line-height: 1.5;
}

.footer-cms-empty-warn .btn {
    flex-shrink: 0;
}

/* Radio cards for type=page / type=link */
.footer-cms-type-toggle {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.footer-cms-type-toggle legend {
    grid-column: 1 / -1;
    margin-bottom: 0.35rem;
}

.footer-cms-type-card {
    position: relative;
    cursor: pointer;
    margin: 0;
}

.footer-cms-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.footer-cms-type-card__inner {
    display: block;
    padding: 0.85rem 1rem;
    border: 2px solid rgba(20, 92, 75, 0.15);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.footer-cms-type-card input[type="radio"]:checked + .footer-cms-type-card__inner {
    border-color: #145c4b;
    background: #f1faf6;
    box-shadow: 0 4px 12px rgba(20, 92, 75, 0.12);
}

.footer-cms-type-card input[type="radio"]:focus-visible + .footer-cms-type-card__inner {
    outline: 2px solid #145c4b;
    outline-offset: 2px;
}

.footer-cms-type-card__icon {
    font-size: 1.4rem;
    margin-inline-end: 0.4rem;
    vertical-align: middle;
}

.footer-cms-type-card strong {
    font-size: 0.98rem;
    color: var(--text-strong, #142a23);
}

.footer-cms-type-card small {
    display: block;
    font-size: 0.82rem;
    color: var(--text-soft, #5a6a64);
    line-height: 1.45;
    margin-top: 0.25rem;
}

/* Live URL preview under the slug input */
.footer-cms-url-preview {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-soft, #5a6a64);
}

.footer-cms-url-preview code {
    background: #f1faf6;
    padding: 0.12rem 0.4rem;
    border-radius: 6px;
    color: #145c4b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

/* Pills next to "Links in this section" header */
.admin-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-inline-start: 0.4rem;
}

.admin-pill--page {
    background: #e0f1eb;
    color: #145c4b;
}

.admin-pill--link {
    background: #e3edf6;
    color: #1f4d6f;
}

/* Highlight pulse for the auto-opened add-panel after a section is created */
.footer-cms-add-panel[open] > summary {
    background: #f1faf6;
    border-color: #145c4b;
    color: #145c4b;
    font-weight: 600;
}

/* Anchor offset so scrollIntoView lands below sticky admin header */
.admin-anchor {
    display: block;
    height: 1px;
    margin-top: -80px;
    padding-top: 80px;
    pointer-events: none;
}

/* 2026-04-25 footer redesign:
   the previous override block (h2 0.96rem, description 0.86rem, link
   list 0.28rem gap, hover lift on sections, auto-fit @1199/@640) used
   `!important` to defeat the legacy block that lived at L7858. Both
   blocks are now superseded by the modern footer rules above (search:
   "Public footer (modernised)"), so this override is no longer needed. */

/* ============================================================
   2026-04-17 contact us premium UX pass
   ============================================================ */
.contact-page-shell {
    padding: 10px 0 4px;
}

.contact-page-wrap {
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.contact-page-hero {
    padding: 18px 20px;
}

.contact-page-hero h1 {
    margin: 5px 0 7px;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    line-height: 1.25;
}

.contact-page-hero p {
    margin: 0;
    color: var(--text-soft);
}

.contact-form-card {
    padding: 18px 20px;
}

.contact-form-card > h2 {
    margin: 0;
    font-size: 1.15rem;
}

.contact-form-card > p {
    margin: 6px 0 0;
    color: var(--text-soft);
}

.contact-form {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.contact-field-note {
    margin: 6px 2px 0;
    font-size: 0.83rem;
    color: var(--text-soft);
}

.contact-form label {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 6px;
}

.contact-input-wrap {
    position: relative;
}

.contact-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 12px;
    width: 18px;
    height: 18px;
    color: var(--text-soft);
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-input-icon svg {
    width: 100%;
    height: 100%;
}

.contact-input-wrap input,
.contact-input-wrap textarea {
    width: 100%;
    border: 1px solid rgba(20, 92, 75, 0.2);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    color: var(--text);
    padding: 10px 12px;
    padding-inline-start: 38px;
}

.contact-input-wrap textarea {
    resize: vertical;
    min-height: 146px;
}

.contact-submit-btn {
    min-height: 46px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    position: relative;
}

.contact-submit-btn.is-loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    position: absolute;
    inset-inline-end: 14px;
    top: calc(50% - 8px);
    animation: contact-spin 0.8s linear infinite;
}

.contact-direct-card {
    padding: 14px 18px;
}

.contact-direct-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.contact-direct-list {
    display: grid;
    gap: 9px;
}

.contact-direct-list p {
    margin: 0;
    display: grid;
    gap: 3px;
}

.contact-direct-list strong {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.contact-direct-list a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contact-direct-list a:hover {
    text-decoration: underline;
}

.contact-inline-icon {
    font-size: 0.9em;
    opacity: 0.85;
}

@keyframes contact-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 720px) {
    .contact-page-wrap {
        max-width: 100%;
    }

    .contact-page-hero,
    .contact-form-card,
    .contact-direct-card {
        padding: 14px 14px;
        border-radius: 14px !important;
    }
}
/* blog-read-more aligns to inline-start automatically via flex-start in column flex */

/* RTL fix: translate [private] badge label to Arabic */
html[dir="rtl"] .account-private-note strong::before {
    content: "[خاص]";
}

/* ================================================================
   MOBILE-FIRST POLISH — comprehensive phone overrides
   Added: mobile redesign pass
   Breakpoints: ≤768px phone, ≤480px small phone
   ================================================================ */

/* ----------------------------------------------------------------
   1. BASE — safe container, body spacing, font scale
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    :root {
        --container: min(100%, calc(100% - 16px));
    }

    body {
        font-size: 0.95rem;
    }

    .page-space {
        padding-top: 10px;
        padding-bottom: 24px;
    }
}

/* ----------------------------------------------------------------
   2. NAVBAR — cleaner auth header on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-header.site-header-auth {
        padding: 6px 0 0;
    }

    .site-header.site-header-auth .auth-header-shell {
        border-radius: 0 !important;
        padding: 8px 14px !important;
        gap: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .auth-header-top {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px;
        padding: 0;
    }

    /* Hide tagline on small screens */
    .auth-header-brand .brand-copy small,
    .site-header.site-header-auth .brand-copy small {
        display: none;
    }

    .auth-header-brand .brand-mark,
    .site-header.site-header-auth .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 1.1rem;
    }

    .site-header.site-header-auth .nav-toggle {
        display: inline-grid !important;
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    /* Dropdown menu items — full-width, touch-friendly */
    .site-header.site-header-auth.is-open .auth-header-links,
    .site-header.site-header-auth.is-open .auth-header-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 4px;
        padding: 8px 0 4px;
        background: transparent;
        box-shadow: none;
        margin-top: 4px;
    }

    .auth-header-links a,
    .auth-header-actions a,
    .auth-header-actions button,
    .auth-header-actions form,
    .auth-header-actions form button {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 46px;
        padding: 10px 14px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.92rem;
        background: rgba(20, 92, 75, 0.05);
        color: var(--text);
        text-align: start;
        line-height: 1.4;
    }

    .auth-header-actions .btn-primary,
    .auth-header-actions form button.btn-primary {
        background: linear-gradient(135deg, #145c4b, #1a7360);
        color: #fff;
        justify-content: center;
    }

    /* Account tabs — horizontally scrollable, no wrap */
    .site-header.site-header-auth .auth-header-tabs,
    .account-tabs-nav {
        display: flex !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 4px;
        padding: 6px 14px 8px;
        border-top: 1px solid rgba(20, 92, 75, 0.07);
    }

    .site-header.site-header-auth .auth-header-tabs::-webkit-scrollbar,
    .account-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .account-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 40px;
        padding: 8px 14px;
        font-size: 0.82rem;
        border-radius: 10px;
    }

    /* Guest nav */
    .nav-shell {
        grid-template-columns: auto auto;
        padding: 8px 12px;
        border-radius: 16px;
    }

    .nav-toggle {
        display: inline-grid !important;
        place-items: center;
        justify-self: end;
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .nav-links,
    .nav-actions {
        display: none;
        grid-column: 1 / -1;
    }

    .site-header.is-open .nav-links,
    .site-header.is-open .nav-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding-top: 6px;
    }

    .nav-links a,
    .nav-actions a,
    .nav-actions button,
    .nav-actions form button {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 12px;
        text-align: start;
        background: rgba(20, 92, 75, 0.05);
    }

    .lang-switch {
        width: 100%;
        justify-content: center;
    }
}

/* ----------------------------------------------------------------
   3. ACCOUNT PAGE GRID — single column, main first
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .account-page-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .account-page-main {
        order: 1;
        width: 100%;
    }

    .account-sidebar,
    .account-profile-sidebar {
        order: 2;
        width: 100%;
        gap: 10px;
    }

    /* Compact banner + avatar */
    .account-user-banner {
        min-height: 72px;
    }

    .account-user-avatar-shell-refined {
        width: 88px;
        height: 88px;
        padding: 5px;
    }

    .account-user-body {
        margin-top: -32px;
        padding: 0 14px 14px;
    }

    .account-user-intro {
        margin-top: 10px;
    }

    .account-user-intro strong {
        font-size: 1rem;
    }

    .account-user-intro p {
        font-size: 0.85rem;
    }

    /* Stats: 2 columns */
    .account-side-stats-compact {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Account note compact */
    .account-side-note-refined {
        padding: 12px 14px;
        border-radius: 16px;
        font-size: 0.86rem;
    }

    .account-side-note-refined h4 {
        font-size: 0.9rem;
        margin: 0 0 6px;
    }

    .account-side-note-refined p {
        font-size: 0.82rem;
        margin: 4px 0;
    }
}

/* ----------------------------------------------------------------
   4. SIDEBAR NAV — mobile link sizing
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .account-side-links {
        padding: 8px 12px 14px;
    }

    .account-side-link {
        min-height: 44px;
        font-size: 0.9rem;
        padding: 10px 12px;
        border-radius: 12px;
    }
}

/* ----------------------------------------------------------------
   5. CHAT MESSENGER — full-height on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .chat-shell--messenger {
        border-radius: 16px;
    }

    .chat-messenger {
        min-height: calc(100svh - 200px);
        max-height: calc(100svh - 140px);
        grid-template-rows: auto 1fr auto;
    }

    .chat-thread {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 12px 10px 6px;
    }

    .chat-topbar {
        padding: 10px 12px;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .chat-topbar__identity {
        min-width: 0;
        flex: 1;
    }

    .chat-topbar__meta strong {
        font-size: 0.92rem;
    }

    .chat-topbar__actions {
        gap: 6px;
        flex-shrink: 0;
    }

    .chat-topbar__actions .btn {
        font-size: 0.78rem;
        padding: 6px 9px;
        min-height: 34px;
    }

    .chat-composer {
        padding: 8px 10px 10px;
        gap: 8px;
    }

    .chat-composer__input textarea {
        min-height: 38px;
        max-height: 100px;
        font-size: 0.93rem;
        padding: 9px 12px;
        border-radius: 14px;
    }

    .chat-composer__attach {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .chat-composer__send {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
    }

    .chat-bubble {
        font-size: 0.92rem;
        line-height: 1.55;
        padding: 9px 13px;
    }

    .chat-bubble-group {
        max-width: 82%;
    }

    .chat-row {
        gap: 6px;
    }

    .chat-avatar--sm {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .chat-meta {
        font-size: 0.72rem;
        gap: 4px;
    }

    .chat-block-banner {
        margin-inline: 10px;
        padding: 12px 14px;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    .chat-messenger {
        min-height: calc(100svh - 170px);
        max-height: calc(100svh - 110px);
        border-radius: 14px;
    }

    .chat-bubble-group {
        max-width: 88%;
    }

    .chat-topbar__actions .btn-danger,
    .chat-topbar__actions .btn-secondary {
        font-size: 0.74rem;
        padding: 5px 8px;
        min-height: 32px;
    }
}

/* ----------------------------------------------------------------
   6. CONVERSATIONS LIST (chat/index)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .account-match-row {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
        align-items: start;
    }

    .account-match-row > img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
    }

    .account-match-row > div {
        min-width: 0;
    }

    .account-score {
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .chat-actions-inline {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        margin-top: 6px;
    }

    .chat-actions-inline .btn {
        flex: 1;
        min-height: 40px;
        font-size: 0.85rem;
        text-align: center;
        justify-content: center;
    }
}

/* ----------------------------------------------------------------
   7. NOTIFICATIONS
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .notifications-page-shell .account-directory-head.notifications-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }

    .notifications-head-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .notifications-total-pill {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        font-size: 0.88rem;
    }

    .notifications-bulk-btn {
        flex: 1;
        min-height: 40px;
        font-size: 0.85rem;
        text-align: center;
        justify-content: center;
    }

    .notification-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 14px;
        border-radius: 16px;
        align-items: start;
    }

    .notification-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        font-size: 1.1rem;
        display: grid;
        place-items: center;
    }

    .notification-card-main {
        min-width: 0;
    }

    .notification-card h2 {
        font-size: 0.92rem;
        line-height: 1.35;
        margin: 4px 0 6px;
    }

    .notification-card p {
        font-size: 0.85rem;
        line-height: 1.5;
        margin: 0 0 8px;
    }

    .notification-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 6px;
    }

    .notification-open-btn,
    .notification-card-actions .btn {
        flex: 1;
        min-width: 100px;
        min-height: 38px;
        font-size: 0.82rem;
        text-align: center;
        justify-content: center;
    }

    .notifications-stack {
        display: grid;
        gap: 10px;
    }

    .notification-card-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 2px;
    }

    .notification-status-chip {
        font-size: 0.78rem;
        padding: 2px 8px;
    }

    .notification-time {
        font-size: 0.78rem;
        color: var(--text-faint);
    }
}

/* ----------------------------------------------------------------
   8. DISCOVER + SMART MEMBER CARDS
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .directory-members-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .discover-section-title-split {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .discover-chip-list .btn {
        font-size: 0.82rem;
        padding: 7px 11px;
        min-height: 36px;
    }
}

@media (max-width: 480px) {
    .directory-members-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Smart actions block (icebreaker button) */
.smart-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.smart-icebreaker-btn {
    width: 100%;
    font-size: 0.85rem;
    min-height: 40px;
    justify-content: center;
}

/* Match reasons list — clean, no inline styles */
.match-reasons ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.match-reasons li {
    padding: 0.15rem 0;
    font-size: 0.8rem;
    color: var(--text-soft);
}

/* Member card actions — touch-friendly */
@media (max-width: 480px) {
    .directory-member-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .directory-member-actions .icon-link,
    .directory-member-actions .icon-action {
        flex: 1;
        text-align: center;
        justify-content: center;
        min-width: 56px;
    }
}

/* ----------------------------------------------------------------
   9. PROFILE SHOW
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .profile-hero {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .profile-photo-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .profile-photo {
        max-width: 260px;
        border-radius: 18px;
    }

    .profile-badge-row {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }

    .key-facts {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .key-fact {
        padding: 10px 12px;
        border-radius: 12px;
    }

    .key-fact span {
        font-size: 0.78rem;
    }

    .key-fact strong {
        font-size: 0.9rem;
    }

    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .key-facts {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------
   10. ICEBREAKER MODAL — proper mobile overlay
   ---------------------------------------------------------------- */
.icebreaker-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.52);
    z-index: 1000;
    justify-content: center;
    align-items: flex-end;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .icebreaker-modal {
        align-items: center;
        padding: 16px;
    }
}

.icebreaker-content {
    background: var(--surface);
    padding: 20px 18px 28px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 -8px 40px rgba(20, 49, 41, 0.18);
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 600px) {
    .icebreaker-content {
        border-radius: var(--radius-md);
        max-width: 500px;
        padding: 24px 22px;
        box-shadow: var(--shadow);
    }
}

.icebreaker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.icebreaker-header h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    flex: 1;
}

.icebreaker-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.icebreaker-close-btn {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--text-soft);
    line-height: 1;
    padding: 2px 6px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.icebreaker-close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text);
}

/* ----------------------------------------------------------------
   11. BUTTONS — touch-friendly sizing on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .btn {
        min-height: 42px;
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .btn.btn-small,
    .btn.btn-sm {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 0.82rem;
    }

    .icon-action {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .icon-link {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 0.82rem;
    }
}

/* ----------------------------------------------------------------
   12. DIRECTORY HEAD + CARDS — mobile spacing
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .account-directory-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px;
        border-radius: 16px;
    }

    .account-directory-head h1 {
        font-size: 1.2rem;
        line-height: 1.3;
        margin: 0;
    }

    .account-directory-head p {
        font-size: 0.88rem;
        margin: 4px 0 0;
    }

    .account-section-title {
        gap: 6px;
    }

    .account-section-title h2 {
        font-size: 1.05rem;
    }

    .account-notifications-box,
    .account-feed-list {
        padding: 12px;
        gap: 10px;
        border-radius: 18px;
    }

    .account-empty-box {
        padding: 20px 16px;
        border-radius: 16px;
        font-size: 0.9rem;
        text-align: center;
    }

    .account-empty-panel__actions {
        width: 100%;
        flex-direction: column;
    }

    .account-empty-panel__actions .btn {
        width: 100%;
    }
}

/* ----------------------------------------------------------------
   13. PAGINATION
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .pagination-shell {
        padding: 8px 0;
        overflow-x: auto;
    }

    .pagination-shell nav {
        justify-content: center;
    }
}

/* ----------------------------------------------------------------
   14. iOS SAFE AREA (notch/home bar)
   ---------------------------------------------------------------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .page-space {
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
        }

        .chat-composer {
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
        }

        .site-header {
            padding-top: max(6px, env(safe-area-inset-top));
        }
    }
}

/* ----------------------------------------------------------------
   15. OVERFLOW GUARD — prevent horizontal scroll on phone
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .account-page-main > *,
    .account-sidebar > *,
    .account-notifications-box,
    .directory-member-card,
    .notification-card {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ----------------------------------------------------------------
   16. CARDS — uniform mobile border-radius + padding
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .card,
    .account-user-card,
    .directory-member-card,
    .notification-card,
    .account-side-note {
        border-radius: 16px !important;
    }
}

/* ----------------------------------------------------------------
   17. DISCOVER smart.blade inline-style overrides
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    .discover-section-spaced {
        margin-bottom: 1.2rem;
    }

    .discover-muted {
        font-size: 0.85rem;
    }
}

/* ----------------------------------------------------------------
   18. PROFILE EDIT — mobile form polish
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Form card padding */
    .account-form-card {
        padding: 16px 14px !important;
        border-radius: 18px !important;
    }

    .profile-edit-stack {
        gap: 14px;
    }

    /* Section heading */
    .profile-section-head {
        margin-bottom: 14px;
    }

    .profile-section-head h2 {
        font-size: 1.05rem;
        margin: 0 0 4px;
    }

    .profile-section-head p {
        font-size: 0.85rem;
    }

    /* Photo manager: stack vertically, centered */
    .profile-photo-manager {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .profile-photo-preview-wrap {
        width: 100%;
        align-items: center;
    }

    .profile-photo-actions {
        width: 100%;
        text-align: center;
    }

    .profile-section-head.compact {
        text-align: center;
    }

    /* Photo upload buttons full-width */
    .photo-action-grid {
        flex-direction: column;
        gap: 8px;
    }

    .photo-action-grid .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* Quick facts strip */
    .profile-edit-quickfacts {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Form fields */
    .account-field-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .account-field-grid .span-2 {
        grid-column: span 1 !important;
    }

    label {
        font-size: 0.88rem;
        font-weight: 600;
        gap: 6px;
    }

    input,
    select,
    textarea {
        font-size: 0.95rem;
        padding: 10px 12px !important;
        min-height: 44px;
        border-radius: 12px !important;
    }

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

    /* Account field note */
    .account-field-note {
        font-size: 0.85rem;
        padding: 10px 12px;
        border-radius: 12px;
    }

    /* Save + back buttons full-width */
    .profile-edit-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 4px;
    }

    .profile-edit-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        font-size: 0.95rem;
    }

    /* Page head badges */
    .profile-page-status {
        justify-content: flex-start;
    }
}

/* ----------------------------------------------------------------
   19. ACCOUNT FORM CARDS — general mobile polish
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .account-form-card {
        padding: 14px 12px !important;
    }

    .profile-edit-stack {
        gap: 12px;
    }
}

/* ----------------------------------------------------------------
   END MOBILE-FIRST POLISH
   ---------------------------------------------------------------- */

.account-side-link-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 1;
    flex: 0 0 18px;
}

.menu-text {
    line-height: 1.2;
}

@media (min-width: 992px) {
    body.is-authenticated .account-page-grid {
        display: grid !important;
        grid-template-columns: 280px minmax(0, 1fr) !important;
        align-items: start;
    }

    body.is-authenticated .account-page-grid > .account-sidebar,
    body.is-authenticated .account-page-grid > .account-profile-sidebar,
    body.is-authenticated .account-page-grid > .account-page-main {
        order: 0;
        width: auto;
    }

    body.is-authenticated .account-page-grid > .account-sidebar,
    body.is-authenticated .account-page-grid > .account-profile-sidebar {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    body.is-authenticated .account-page-grid > .account-page-main {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
}

/* =============================================================
   Mandatory Warning Blocker Modal
   Rendered via partials/warning-blocker.blade.php when the
   authenticated user has an unacknowledged admin warning.
   Locks scroll, blocks pointer events, traps focus.
   ============================================================= */

html.has-warning-blocker,
body.has-warning-blocker {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none !important;
}

body.has-warning-blocker > *:not(.warning-blocker):not(script) {
    pointer-events: none !important;
    user-select: none !important;
    filter: blur(3px) saturate(0.8);
    transition: filter 0.3s ease;
}

.warning-blocker {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    animation: warning-blocker-appear 0.25s ease-out both;
}

.warning-blocker__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(9, 15, 36, 0.82), rgba(4, 7, 18, 0.94));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.warning-blocker__dialog {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #ffffff;
    color: #0f172a;
    border-radius: 20px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    padding: 28px 28px 24px;
    animation: warning-blocker-pop 0.35s cubic-bezier(.2,.9,.3,1.2) both;
    font-family: inherit;
}

.warning-blocker__header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    margin-bottom: 18px;
}

.warning-blocker__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.25);
}

.warning-blocker__titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.warning-blocker__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b45309;
}

.warning-blocker__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a;
}

.warning-blocker__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.warning-blocker__message {
    margin: 0;
    padding: 16px 18px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-inline-start: 4px solid #f97316;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
    color: #431407;
    white-space: pre-wrap;
    word-break: break-word;
}

.warning-blocker__meta {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.warning-blocker__meta > div {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.warning-blocker__meta dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.warning-blocker__meta dd {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.warning-blocker__strike {
    display: inline-block;
    padding: 2px 10px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.warning-blocker__severe {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #7f1d1d;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.warning-blocker__severe svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.warning-blocker__form {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.warning-blocker__accept {
    appearance: none;
    border: none;
    cursor: pointer;
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow:
        0 10px 24px rgba(22, 163, 74, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.warning-blocker__accept:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 14px 30px rgba(22, 163, 74, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.warning-blocker__accept:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

.warning-blocker__accept:focus-visible {
    outline: 3px solid rgba(22, 163, 74, 0.35);
    outline-offset: 2px;
}

.warning-blocker__accept[disabled] {
    opacity: 0.7;
    cursor: progress;
}

.warning-blocker__fineprint {
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}

/* RTL flip for the inline border on the message box */
[dir="rtl"] .warning-blocker__message {
    border-inline-start: 4px solid #f97316;
    border-inline-end: 1px solid #fed7aa;
}

/* Mobile */
@media (max-width: 600px) {
    .warning-blocker {
        padding: 12px;
        align-items: flex-end;
    }
    .warning-blocker__dialog {
        width: 100%;
        max-height: 92vh;
        padding: 22px 20px 18px;
        border-radius: 18px 18px 0 0;
        animation: warning-blocker-slide-up 0.3s ease-out both;
    }
    .warning-blocker__title { font-size: 18px; }
    .warning-blocker__meta { grid-template-columns: 1fr; }
    .warning-blocker__accept { padding: 13px 18px; }
}

/* Dark admin viewport readability (dialog stays light for contrast with warning) */
.is-admin-viewport .warning-blocker__dialog {
    color: #0f172a;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .warning-blocker,
    .warning-blocker__dialog,
    .warning-blocker__accept {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes warning-blocker-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes warning-blocker-pop {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes warning-blocker-slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   2026-04-25 Blog premium polish
   Modernises the public blog listing + post page without
   touching existing markup. Targets:
     - listing: featured hero card + responsive grid w/ hover
     - post detail: editorial typography, polished hero image
   ============================================================ */

/* --- Listing: featured "hero" card -------------------------- */
.blog-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(20, 92, 75, 0.14);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(247, 251, 250, 1) 100%);
    box-shadow: 0 18px 48px rgba(20, 92, 75, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin-block: 1rem 1.5rem;
}

.blog-card--featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(20, 92, 75, 0.12);
}

.blog-card-image-wrap--featured {
    aspect-ratio: 16 / 11;
    margin: 0;
    border-radius: 0;
    border: 0;
    overflow: hidden;
    position: relative;
}

.blog-card-image-wrap--featured .blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card--featured:hover .blog-card-image-wrap--featured .blog-card-image {
    transform: scale(1.04);
}

.blog-card-content--featured {
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
}

.blog-card-content--featured .blog-featured-title {
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    line-height: 1.25;
    margin: 0;
    color: var(--text-strong, #1a3329);
}

.blog-card-content--featured > p:not(.blog-card-meta) {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-soft, #4a5d54);
    margin: 0;
}

.blog-card-content--featured .btn {
    align-self: flex-start;
    margin-top: 0.4rem;
}

/* "FEATURED" pill that overlays the hero image of the lead post */
.blog-card-featured-badge {
    position: absolute;
    top: 0.85rem;
    inset-inline-start: 0.85rem;
    z-index: 2;
    padding: 0.32rem 0.7rem;
    background: rgba(20, 92, 75, 0.92);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(20, 92, 75, 0.25);
}

.blog-card-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.blog-card-meta-sep {
    color: rgba(20, 92, 75, 0.35);
    font-weight: 700;
}

.blog-card-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text-soft, #6a7c75);
}

.blog-card-reading-time::before {
    content: '⏱';
    font-size: 0.95em;
    opacity: 0.7;
}

@media (max-width: 820px) {
    .blog-card--featured {
        grid-template-columns: 1fr;
    }

    .blog-card-image-wrap--featured {
        aspect-ratio: 16 / 9;
    }

    .blog-card-content--featured {
        padding: 1.2rem 1.1rem 1.4rem;
    }
}

/* --- Listing: rest grid (cards) ----------------------------- */
.blog-post-grid--rest {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
}

.blog-post-grid--rest .blog-card {
    border-radius: 18px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    background: #fff;
}

.blog-post-grid--rest .blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(20, 92, 75, 0.1);
    border-color: rgba(20, 92, 75, 0.22);
}

.blog-post-grid--rest .blog-card-image-wrap {
    margin: 0;
    border-radius: 0;
    border: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blog-post-grid--rest .blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-post-grid--rest .blog-card:hover .blog-card-image {
    transform: scale(1.05);
}

.blog-post-grid--rest .blog-card-content {
    padding: 1rem 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.blog-post-grid--rest .blog-card-content h2 {
    font-size: 1.05rem;
    line-height: 1.32;
    margin: 0;
    color: var(--text-strong, #1a3329);
}

.blog-post-grid--rest .blog-card-meta {
    font-size: 0.82rem;
    color: var(--text-soft, #6a7c75);
    margin: 0;
}

.blog-post-grid--rest .blog-card-content > p:not(.blog-card-meta) {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-soft, #5e6f68);
    margin: 0;
}

.blog-read-more-btn {
    align-self: flex-start;
    margin-top: 0.3rem;
}

/* --- Listing: category chips polish ------------------------- */
.blog-categories-card {
    padding: 1rem 1.15rem;
    border-radius: 18px;
    border: 1px solid rgba(20, 92, 75, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.blog-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.blog-category-chips .badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.75rem;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.06);
    border: 1px solid rgba(20, 92, 75, 0.12);
    color: var(--text-strong, #1a3329);
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.blog-category-chips .badge-inline:hover {
    background: rgba(20, 92, 75, 0.12);
    border-color: rgba(20, 92, 75, 0.25);
}

.blog-category-chips .badge-inline--active {
    background: rgba(20, 92, 75, 0.92);
    color: #fff;
    border-color: rgba(20, 92, 75, 0.92);
}

/* --- Post detail: editorial typography ---------------------- */
.blog-post-card {
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(20, 92, 75, 0.12);
    box-shadow: 0 18px 48px rgba(20, 92, 75, 0.07);
    background: #fff;
}

.blog-post-card .blog-card-image-wrap {
    margin: 0;
    border-radius: 0;
    border: 0;
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.blog-post-card .blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-card > p,
.blog-post-card > h1,
.blog-post-card > .blog-content {
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.blog-post-card > p:first-of-type {
    padding-top: 1.1rem;
}

.blog-post-card .blog-content {
    padding-bottom: 1.6rem;
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--text-strong, #1f2f29);
}

.blog-post-card .blog-content > * + * {
    margin-top: 0.95rem;
}

.blog-post-card .blog-content h2 {
    font-size: 1.45rem;
    line-height: 1.3;
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    color: var(--text-strong, #142a23);
}

.blog-post-card .blog-content h3 {
    font-size: 1.18rem;
    line-height: 1.35;
    margin-top: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--text-strong, #142a23);
}

.blog-post-card .blog-content p {
    margin: 0;
}

.blog-post-card .blog-content blockquote {
    margin: 1.2rem 0;
    padding: 0.9rem 1.1rem;
    border-inline-start: 4px solid rgba(20, 92, 75, 0.45);
    background: rgba(20, 92, 75, 0.05);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--text-soft, #2d4a3f);
}

.blog-post-card .blog-content ul,
.blog-post-card .blog-content ol {
    padding-inline-start: 1.4rem;
    margin: 0.6rem 0;
}

.blog-post-card .blog-content li + li {
    margin-top: 0.35rem;
}

.blog-post-card .blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(20, 92, 75, 0.1);
}

.blog-post-card .blog-content a {
    color: var(--primary, #145c4b);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-post-card .blog-content a:hover {
    text-decoration-thickness: 2px;
}

.blog-post-card .blog-content pre,
.blog-post-card .blog-content code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: rgba(20, 92, 75, 0.06);
    padding: 0.15em 0.4em;
    border-radius: 6px;
}

.blog-post-card .blog-content pre {
    padding: 0.9rem 1rem;
    overflow-x: auto;
    line-height: 1.55;
}

.blog-post-card .blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.blog-post-card .blog-content th,
.blog-post-card .blog-content td {
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(20, 92, 75, 0.15);
    text-align: start;
}

.blog-post-card .blog-content th {
    background: rgba(20, 92, 75, 0.05);
    font-weight: 600;
}

/* On the post page, lift the title above the card and surface the
   meta nicely under it. The default markup has the title in the
   page header (.account-directory-head) for auth users and inside
   the card for guests; both look good now thanks to the typography
   reset above. */
.blog-post-card--guest > h1 {
    padding-inline: clamp(1rem, 3vw, 2rem);
    padding-top: 1rem;
    margin: 0 0 0.4rem;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    line-height: 1.22;
    color: var(--text-strong, #142a23);
}

/* ============================================================
   2026-04-25 Success-stories testimonial cards
   Replaces the previous plain "card article-card" rendering with
   a proper testimonial layout: gender-aware avatar, rating stars,
   ornamental quote mark, gradient background per gender. The
   markup lives in resources/views/success-stories/partials/card.blade.php
   ============================================================ */
.success-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.2rem;
}

.success-story-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(20, 92, 75, 0.12);
    border-radius: 22px;
    padding: 1.6rem 1.4rem 1.2rem;
    box-shadow: 0 14px 36px rgba(20, 92, 75, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.success-story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(20, 92, 75, 0.12);
    border-color: rgba(20, 92, 75, 0.22);
}

/* Gender-tinted top border */
.success-story-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, rgba(20, 92, 75, 0.85), rgba(20, 92, 75, 0.5));
}

.success-story-card--male::before {
    background: linear-gradient(90deg, #2a6f8f, #5fa8c9);
}

.success-story-card--female::before {
    background: linear-gradient(90deg, #b3527a, #e58fa8);
}

.success-story-card--couple::before {
    background: linear-gradient(90deg, #b3527a 0%, #b3527a 50%, #2a6f8f 50%, #2a6f8f 100%);
}

.success-story-card__quote-mark {
    position: absolute;
    top: 0.4rem;
    inset-inline-start: 1.2rem;
    font-size: 5rem;
    line-height: 1;
    color: rgba(20, 92, 75, 0.08);
    font-family: Georgia, "Times New Roman", serif;
    pointer-events: none;
    user-select: none;
}

.success-story-card__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    position: relative; /* sit above quote-mark */
    z-index: 1;
}

.success-story-card__avatar-stack {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f4ecdc, #e7d6b3);
    width: 64px;
    height: 64px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 6px 14px rgba(20, 92, 75, 0.12);
}

.success-story-card--male .success-story-card__avatar-stack {
    background: linear-gradient(135deg, #d6e6ee, #a3c8d8);
}

.success-story-card--female .success-story-card__avatar-stack {
    background: linear-gradient(135deg, #f3d9e2, #e8aac0);
}

.success-story-card--couple .success-story-card__avatar-stack {
    width: 78px;
    background: linear-gradient(135deg, #f3d9e2 0%, #f3d9e2 50%, #d6e6ee 50%, #d6e6ee 100%);
    position: relative;
}

.success-story-card__avatar {
    font-size: 2rem;
    line-height: 1;
}

.success-story-card--couple .success-story-card__avatar {
    font-size: 1.55rem;
    margin-inline: -0.2rem;
}

.success-story-card__identity {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.success-story-card__name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong, #142a23);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.success-story-card__role {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-soft, #6a7c75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.success-story-card__rating {
    display: inline-flex;
    gap: 1px;
    margin-top: 0.15rem;
}

.success-story-card__star {
    color: rgba(20, 92, 75, 0.18);
    font-size: 1rem;
    line-height: 1;
}

.success-story-card__star.is-filled {
    color: #f5b73a;
}

.success-story-card__title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--text-strong, #142a23);
    position: relative;
    z-index: 1;
}

.success-story-card__body {
    color: var(--text-soft, #4a5d54);
    font-size: 0.96rem;
    line-height: 1.7;
    flex: 1;
    position: relative;
    z-index: 1;

    /* Multi-line clamp via mask: keep ~7 lines visible without an
       explicit "read more" button (the card stays compact on small
       grids while the full text is still in DOM for accessibility). */
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.success-story-card__body p,
.success-story-card__body div {
    margin: 0 0 0.5rem;
}

.success-story-card__body p:last-child,
.success-story-card__body div:last-child {
    margin-bottom: 0;
}

.success-story-card__foot {
    border-top: 1px dashed rgba(20, 92, 75, 0.15);
    padding-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-soft, #7a8a83);
    position: relative;
    z-index: 1;
}

@media (max-width: 600px) {
    .success-stories-grid {
        grid-template-columns: 1fr;
    }

    .success-story-card {
        padding: 1.3rem 1.1rem 1rem;
    }

    .success-story-card__avatar-stack {
        width: 56px;
        height: 56px;
    }

    .success-story-card--couple .success-story-card__avatar-stack {
        width: 70px;
    }

    .success-story-card__quote-mark {
        font-size: 4rem;
    }
}

/* Safety: if JS is disabled, the classes above may never attach. Force
   the html/body lock by pure CSS attribute selector as a fallback when
   the modal is present in the DOM. */
body:has(.warning-blocker) {
    overflow: hidden !important;
}

body:has(.warning-blocker) > *:not(.warning-blocker):not(script) {
    pointer-events: none;
}

/* ============================================================
   Blog public refresh — 2026-04-25
   Targeted polish on top of the existing 200+ blog rules: only
   what was actually broken or visually weak gets new styles here,
   everything else is left alone to avoid regressions.
   - Empty state: bigger SVG icon, better padding, contextual button
   - Category chips: horizontally scrollable on mobile (no wrap),
     active state more prominent, post count chip
   - Reading time meta gap fix
   - Post detail footer (back-to-blog + more-in-category)
   - Card hover lift unified across listings
   ============================================================ */

.blog-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 4vw, 2.5rem);
    margin-block: 1.5rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 20%, rgba(20, 92, 75, 0.06), transparent 38%),
        radial-gradient(circle at 82% 80%, rgba(47, 111, 163, 0.05), transparent 38%),
        rgba(255, 255, 255, 0.85);
    border: 1px dashed rgba(20, 92, 75, 0.18);
}

.blog-empty-state__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    color: var(--color-primary, #145c4b);
    background: rgba(20, 92, 75, 0.08);
    border-radius: 50%;
    margin-bottom: 0.4rem;
}

.blog-empty-state__icon svg {
    width: 28px;
    height: 28px;
}

.blog-empty-state__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text, #1a2421);
    line-height: 1.3;
}

.blog-empty-state__text {
    margin: 0;
    color: var(--text-soft, #55675f);
    line-height: 1.6;
    max-width: 36em;
    font-size: 0.95rem;
}

.blog-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 0.4rem;
}

/* Category chips: horizontal scroll on mobile so tons of categories
   don't push the content way down with multi-line wrap. */
.blog-categories-card {
    overflow: hidden;
}

.blog-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.blog-category-chips .badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
}

.blog-category-chips__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 0.4em;
    font-size: 0.72em;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(20, 92, 75, 0.08);
    color: var(--color-primary, #145c4b);
}

.blog-category-chips .badge-inline--active .blog-category-chips__count {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}

@media (max-width: 640px) {
    .blog-category-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.4rem;
        margin-inline: -0.25rem;
        padding-inline: 0.25rem;
    }
    .blog-category-chips::-webkit-scrollbar {
        height: 4px;
    }
    .blog-category-chips::-webkit-scrollbar-thumb {
        background: rgba(20, 92, 75, 0.2);
        border-radius: 2px;
    }
    .blog-category-chips .badge-inline {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }
}

/* Post detail: clear footer with navigation back to listing /
   sibling category. Only renders when post-detail partial uses it. */
.blog-post-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: clamp(1.25rem, 3vw, 2rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid rgba(20, 92, 75, 0.1);
}

.blog-post-card__hero {
    margin-block: 1rem 0.5rem;
}

.blog-post-card__hero h1 {
    margin: 0.4rem 0;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.2;
}

.blog-post-card__excerpt {
    margin: 0.4rem 0 0;
    color: var(--text-soft, #55675f);
    line-height: 1.7;
    font-size: 1rem;
    max-width: 40em;
}

.blog-post-card__meta {
    margin-bottom: 0.5rem;
}

/* Reading-time chip alignment (it had no breathing room next to
   the meta separators on small screens). */
.blog-card-reading-time {
    white-space: nowrap;
}

/* Card hover lift unified — keeps existing background/shadow rules
   from the legacy stylesheet but adds a small translate that was
   missing on the listing grid. */
.blog-listing-page .blog-card,
.blog-listing-page .blog-card--featured {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.blog-listing-page .blog-card:hover,
.blog-listing-page .blog-card--featured:hover {
    transform: translateY(-2px);
}

/* Back-to-blog button.
   2026-04-25 fix: previous version forced `direction: ltr;
   unicode-bidi: bidi-override` on the button, which inverted Arabic
   text character-by-character (turned "العودة إلى المدونة" into
   "ةنودملا ىلإ ةدوعلا"). The fix is to render the arrow as a CSS
   pseudo-element that swaps direction automatically. The blade no
   longer emits the literal "&larr;" character. */
.btn-back::before {
    content: '\2190'; /* ← */
    margin-inline-end: 0.4em;
    display: inline-block;
}
[dir="rtl"] .btn-back::before {
    content: '\2192'; /* → (in RTL, "back" points to the right) */
}