/* ==========================================================================
   Mosebetsi Connect – style.css
   Equal-width cards + vertical bio unfold
   ========================================================================== */

/* ───── Custom Properties ───── */
:root {
    --green: #25D366;
    --green-dark: #1da851;
    --green-light: #e8faf0;
    --green-ultra-light: #f5fdf8;
    --text: #1a1a2e;
    --text-secondary: #4a4a5e;
    --text-muted: #6b6b80;
    --bg: #ffffff;
    --bg-soft: #f9fafb;
    --card-bg: #ffffff;
    --border: #e8ecf1;
    --border-light: #f0f2f5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.05);
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --star-color: #f59e0b;
    --badge-available: #25D366;
    --badge-busy: #f59e0b;
}

/* ───── Reset & Base ───── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    letter-spacing: -0.01em;
}

html, body {
    overflow-x: hidden;
}

/* ─── Container ─── */
.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (min-width: 640px) {
    .container { padding: 0 28px; }
}
@media (min-width: 1024px) {
    .container { padding: 0 36px; }
}
@media (min-width: 1280px) {
    .container { max-width: 1200px; padding: 0 40px; }
}

/* ─── Navbar ─── */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
@media (min-width: 768px) {
    .navbar .container { height: 64px; }
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    letter-spacing: -0.02em;
    transition: var(--transition);
}
.nav-logo:hover { color: var(--green-dark); }

.nav-brand-image {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: contain;
}

.nav-logo .logo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--green-light);
    animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 4px var(--green-light); }
    50% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0.08); }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--green);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 50px;
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: -0.01em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    min-width: 0;
}

.nav-cta:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

.market-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
    transition: var(--transition);
}

.market-trigger:hover {
    border-color: var(--green);
    background: var(--green-ultra-light);
    color: var(--green-dark);
}

.market-trigger:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.25);
    outline-offset: 2px;
}

.market-trigger-flag {
    font-size: 0.95rem;
    line-height: 1;
}

.market-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(5px);
}

.market-modal-dialog {
    position: relative;
    width: min(100%, 470px);
    max-height: calc(100dvh - 32px);
    padding: 28px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.market-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-muted);
    cursor: pointer;
}

.market-modal-close:hover {
    background: #e5e7eb;
    color: var(--text);
}

.market-modal-icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 1.25rem;
}

.market-modal-dialog h2 {
    margin-bottom: 6px;
    color: var(--text);
    font-size: 1.2rem;
}

.market-modal-dialog > p {
    max-width: 380px;
    margin: 0 auto 18px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.market-success {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 0.75rem;
    text-align: left;
}

.market-form {
    display: grid;
    gap: 14px;
    text-align: left;
}

.market-form-group {
    display: grid;
    gap: 6px;
}

.market-form-group label {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 750;
}

.market-form-group select {
    width: 100%;
    min-height: 44px;
    padding: 9px 36px 9px 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
}

.market-form-group select:focus {
    border-color: var(--green);
    outline: 3px solid rgba(37, 211, 102, 0.18);
}

.market-current-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 0.7rem;
}

.market-current-summary i {
    color: var(--green-dark);
}

.market-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    border: 0;
    border-radius: 11px;
    background: var(--green);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
}

.market-save-button:hover {
    background: var(--green-dark);
}

.market-save-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

@media (max-width: 760px) {
    .market-trigger {
        width: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
    }

    .market-trigger > span:not(.market-trigger-flag),
    .market-trigger > i {
        display: none;
    }
}

@media (max-width: 480px) {
    .market-modal-dialog {
        padding: 26px 16px 18px;
    }
}

.notification-menu {
    position: relative;
}

.notification-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
}

.notification-trigger:hover,
.notification-trigger[aria-expanded="true"] {
    color: var(--green-dark);
    border-color: var(--green);
    box-shadow: var(--shadow-sm);
}

.notification-trigger:focus-visible,
.notification-panel button:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.28);
    outline-offset: 2px;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.notification-badge.is-hidden {
    display: none;
}

.notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: flex;
    flex-direction: column;
    width: 360px;
    max-height: min(480px, calc(100dvh - 82px));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-xl);
    z-index: 150;
}

.notification-panel[hidden] {
    display: none;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
}

.notification-panel-header h2 {
    font-size: 0.95rem;
    line-height: 1.2;
}

.notification-panel-header button {
    border: none;
    background: transparent;
    color: var(--green-dark);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.notification-panel-header button:disabled {
    color: var(--text-muted);
    cursor: default;
    opacity: 0.65;
}

.notification-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.notification-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
    color: var(--text);
    text-align: left;
    transition: var(--transition);
}

.notification-item.is-pending {
    opacity: 0.58;
    pointer-events: none;
}

.notification-item:hover {
    background: var(--green-ultra-light);
}

.notification-item.is-unread {
    background: #f8fffb;
}

.notification-item-main {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.notification-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 0.86rem;
}

.notification-item-content {
    display: block;
    min-width: 0;
}

.notification-item-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.25;
}

.notification-item.is-unread .notification-item-title::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--green);
    flex: 0 0 auto;
}

.notification-item-message {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.notification-item-time {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.notification-delete {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.notification-delete:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.notification-delete:disabled {
    cursor: wait;
}

.notification-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 20px 16px;
    color: var(--text-muted);
    font-size: 0.84rem;
    text-align: center;
}

.notification-state button,
.notification-panel-footer button {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--green-dark);
    padding: 7px 14px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.notification-state button:hover,
.notification-panel-footer button:hover {
    border-color: var(--green);
    background: var(--green-ultra-light);
}

.notification-error {
    color: #b91c1c;
}

.notification-panel-footer {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.notification-panel-footer button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.notification-feedback {
    flex: 0 0 auto;
    margin: 0 12px 12px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #111827;
    color: #fff;
    font-size: 0.76rem;
    line-height: 1.35;
    text-align: center;
}

.notification-feedback.is-error {
    background: #991b1b;
}

@media (max-width: 480px) {

    .navbar .container {
        gap: 10px;
    }

    .nav-logo {
        font-size: 0.92rem;
        flex-shrink: 1;
        min-width: 0;
    }

    .nav-brand-image {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .nav-actions {
        gap: 6px;
        flex-shrink: 0;
    }

    .nav-cta {
        padding: 7px 10px;
        font-size: 0.72rem;
    }

    .notification-trigger {
        width: 34px;
        height: 34px;
    }

    .notification-panel {
        position: fixed;
        top: 58px;
        right: 12px;
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 70px);
    }
}

@media (max-width: 380px) {

    .nav-logo {
        font-size: 0.82rem;
    }

    .nav-logo > span:last-child { display: none; }

    .nav-cta {
        padding: 6px 8px;
        font-size: 0.68rem;
    }

    .nav-cta i {
        font-size: 0.8rem;
    }
}

/* ─── Hero Section ─── */
.hero {
    padding: 48px 0 40px;
    text-align: center;
    background: linear-gradient(180deg, var(--green-ultra-light) 0%, var(--bg) 100%);
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) {
    .hero { padding: 72px 0 56px; }
}
@media (min-width: 1024px) {
    .hero { padding: 88px 0 64px; }
}

.hero::before {
    content: '';
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(37, 211, 102, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-light);
    color: var(--green-dark);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 20px;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .hero-badge { font-size: 0.85rem; padding: 8px 18px; margin-bottom: 24px; }
}

.hero-badge .badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse-dot 2s ease-in-out infinite;
}

.hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 8px;
    color: var(--text);
    position: relative;
    z-index: 1;
}
@media (min-width: 480px) { .hero h1 { font-size: 2.6rem; } }
@media (min-width: 768px) { .hero h1 { font-size: 3.2rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3.6rem; } }

.hero h1 .highlight {
    color: var(--green);
    position: relative;
    display: inline-block;
}
.hero h1 .highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: var(--green-light);
    border-radius: 4px;
    z-index: -1;
    opacity: 0.7;
}
@media (min-width: 768px) {
    .hero h1 .highlight::after { height: 10px; bottom: 4px; }
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) { .hero-subtitle { font-size: 1.3rem; } }

.hero-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto 28px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) { .hero-desc { font-size: 1rem; max-width: 520px; margin-bottom: 36px; } }

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (min-width: 480px) {
    .hero-buttons { flex-direction: row; justify-content: center; gap: 14px; }
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: -0.01em;
    white-space: nowrap;
    border: none;
    font-family: var(--font);
    min-width: 180px;
    position: relative;
    overflow: hidden;
}
@media (min-width: 480px) {
    .btn { min-width: auto; padding: 15px 30px; font-size: 1rem; }
}

.btn-primary {
    background: var(--green);
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
}
.btn-primary:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.35);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

.btn-outline {
    background: var(--bg);
    color: var(--text);
    border: 2px solid var(--border);
}
.btn-outline:hover {
    border-color: var(--green);
    color: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.btn-outline:active { transform: translateY(0); }

.btn-sm { min-width: 0; min-height: 36px; padding: 7px 13px; border-radius: 10px; font-size: .74rem; font-weight: 800; }
.btn-ghost { border: 1px solid #dce9e0; background: #f5faf7; color: #315b43; }
.btn-ghost:hover { border-color: #b9d8c3; background: #eaf6ee; color: var(--green-dark); transform: translateY(-1px); }
.btn-danger-outline { border: 1px solid #efc2c2; background: #fffafa; color: #a13232; }
.btn-danger-outline:hover { border-color: #d85a5a; background: #fff0f0; color: #8f2323; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(161, 50, 50, .1); }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }

.btn .btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ─── Sections ─── */
.section {
    padding: 48px 0;
}
@media (min-width: 768px) { .section { padding: 64px 0; } }
@media (min-width: 1024px) { .section { padding: 80px 0; } }

.section-header {
    text-align: center;
    margin-bottom: 36px;
}
@media (min-width: 768px) { .section-header { margin-bottom: 48px; } }

.section-label {
    display: inline-block;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--green-dark);
    background: var(--green-light);
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.section-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 8px;
}
@media (min-width: 768px) { .section-title { font-size: 2rem; } }

.section-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 440px;
    margin: 0 auto;
}

/* ─── How It Works ─── */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 600px) {
    .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 768px) {
    .steps-grid { gap: 32px; }
}

.step-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
    transition: var(--transition-slow);
    position: relative;
}
.step-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green-dark);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 16px;
    transition: var(--transition);
}
.step-card:hover .step-number {
    background: var(--green);
    color: #fff;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

.step-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    color: var(--green);
    transition: var(--transition);
}
.step-card:hover .step-icon {
    color: var(--green-dark);
    transform: scale(1.08);
}

.step-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
    letter-spacing: -0.01em;
}
.step-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Connector line between steps (desktop) */
@media (min-width: 600px) {
    .steps-grid {
        position: relative;
    }
    .steps-grid::before {
        content: '';
        position: absolute;
        top: 50px;
        left: 18%;
        width: 64%;
        height: 2px;
        background: var(--border-light);
        z-index: 0;
        pointer-events: none;
    }
    .step-card { z-index: 1; }
}

/* ─── Listings Section ─── */
.listings-section {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.listings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 520px) {
    .listings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .listings-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 1100px) {
    .listings-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Card */
.listing-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    transition: var(--transition-slow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}
.listing-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.listing-card:active {
    transform: translateY(-1px);
}
.listing-card * {
    max-width: 100%;
}

.listing-role-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.listing-avatar,
.listing-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    overflow: hidden;
}

.listing-name-block {
    min-width: 0;
    flex: 1;
}

.listing-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.listing-category-tag {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.listing-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Bio */
.listing-bio {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.listing-bio.collapsed {
    max-height: 4.5em;
}
.listing-bio.expanded {
    max-height: 1000px;
}

.bio-preview {
    display: inline;
}
.bio-full {
    display: none;
}

.bio-toggle {
    color: var(--green-dark);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0;
    margin-left: 4px;
}

.listing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}

.btn-whatsapp-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--green);
    color: #fff;
    font-weight: 600;
    font-size: 0.72rem;
    border-radius: 50px;
    text-decoration: none;
    transition: var(--transition);
    letter-spacing: -0.01em;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: var(--font);
}
.btn-whatsapp-sm:hover {
    background: var(--green-dark);
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

/* ─── Footer ─── */
.footer {
    background: var(--bg-soft);
    border-top: 1px solid var(--border-light);
    padding: 32px 0;
    margin-top: auto;
}
@media (min-width: 768px) {
    .footer { padding: 40px 0; }
}

.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
@media (min-width: 600px) {
    .footer .container { flex-direction: row; justify-content: space-between; text-align: left; }
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    letter-spacing: -0.02em;
}
.footer-brand .logo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}

.footer-brand-image {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    object-fit: contain;
}

.footer-info {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
@media (min-width: 600px) {
    .footer-info { align-items: flex-end; text-align: right; }
}
.footer-info a {
    color: var(--green-dark);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}
.footer-info a:hover {
    color: var(--green);
    text-decoration: underline;
}
.footer-copy {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ─── Floating WhatsApp Button ─── */
.floating-whatsapp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
    animation: float-bob 3s ease-in-out infinite;
}
.floating-whatsapp:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 32px rgba(37, 211, 102, 0.5);
    animation: none;
}
.floating-whatsapp:active { transform: scale(0.96); }

@keyframes float-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (min-width: 768px) {
    .floating-whatsapp { width: 58px; height: 58px; bottom: 32px; right: 32px; }
}

/* ─── Utility Animations ─── */
.fade-in {
    animation: fadeIn 0.6s ease-out both;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* ─── Focus / Accessibility ─── */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ─── Modals ─── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.modal-content {
    position: relative;
    max-width: 500px;
    margin: 10vh auto;
    background: white;
    border-radius: 16px;
    padding: 2rem;
    z-index: 10000;
    max-height: 80vh;
    overflow-y: auto;
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .6rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* Payment / Auth / Verified Modals (shared structure) */
.payment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeInOverlay 0.2s ease;
}

.payment-modal-dialog {
    background: var(--bg);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-xl);
    position: relative;
    animation: slideUp 0.3s ease;
}

.payment-modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}
.payment-modal-close-btn:hover { color: var(--text); }

.payment-modal-icon {
    font-size: 3rem;
    color: var(--green);
    margin-bottom: 12px;
    display: block;
}

.payment-modal-dialog h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
}

.payment-modal-dialog p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.payment-modal-price {
    font-size: 1rem;
    margin: 12px 0 20px;
    color: var(--text);
}
.payment-modal-price strong {
    color: var(--green-dark);
    font-weight: 700;
}

.payment-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cancel {
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font);
}
.btn-cancel:hover { background: var(--bg-soft); }

.btn-pay {
    padding: 10px 20px;
    border-radius: 50px;
    background: var(--green);
    color: white;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-family: var(--font);
}
.btn-pay:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

.gateway-payment-dialog {
    width: min(94vw, 640px);
    max-width: 640px;
    max-height: 92dvh;
    padding: 30px;
    overflow-y: auto;
    text-align: left;
    overscroll-behavior: contain;
}

.gateway-payment-dialog .payment-modal-icon,
.gateway-payment-dialog .payment-upgrade-badge,
.gateway-payment-dialog > h2,
.gateway-payment-intro {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.gateway-payment-dialog .payment-modal-icon {
    width: max-content;
}

.gateway-payment-intro {
    max-width: 490px;
    margin-bottom: 18px !important;
    line-height: 1.55;
}

.gateway-payment-intro strong {
    color: var(--green-dark);
}

.payment-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.45;
}

.payment-alert > i {
    margin-top: 2px;
    flex: 0 0 auto;
}

.payment-alert strong,
.payment-alert span {
    display: block;
}

.payment-alert ul {
    margin: 5px 0 0 18px;
}

.payment-alert.is-success {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.payment-alert.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.payment-alert.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.payment-recipient-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 20px;
    padding: 14px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: #f0fdf4;
}

.payment-recipient-card div {
    display: grid;
    gap: 3px;
}

.payment-recipient-card span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.payment-recipient-card strong {
    color: #065f46;
    font-size: 0.92rem;
}

.gateway-payment-form {
    display: grid;
    gap: 18px;
}

.payment-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.payment-fieldset legend,
.payment-form-group > label:first-child {
    display: block;
    width: 100%;
    margin-bottom: 9px;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 750;
}

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.payment-method-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px 10px 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    transition: var(--transition);
}

.payment-method-option:has(input:checked) {
    border-color: var(--green);
    background: var(--green-ultra-light);
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.12);
}

.payment-method-option label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    cursor: pointer;
}

.payment-method-option input,
.verification-role-option input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--green-dark);
    flex: 0 0 auto;
}

.payment-method-content {
    display: grid;
    min-width: 0;
}

.payment-method-name {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 750;
}

.payment-method-number {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.payment-copy-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: var(--bg-soft);
    color: var(--text-secondary);
    cursor: pointer;
}

.payment-copy-btn:hover,
.payment-copy-btn.is-copied {
    background: var(--green-light);
    color: var(--green-dark);
}

.verification-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.verification-role-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 9px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: var(--transition);
}

.verification-role-option:has(input:checked) {
    border-color: var(--green);
    background: var(--green-ultra-light);
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.12);
}

.verification-role-option input {
    grid-row: 1 / span 2;
    align-self: center;
}

.verification-role-option span {
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 750;
}

.verification-role-option small {
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

.payment-form-group {
    min-width: 0;
}

.payment-form-group > label span {
    color: var(--text-muted);
    font-weight: 500;
}

.payment-proof-dropzone {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 18px 14px;
    border: 1.5px dashed #86efac;
    border-radius: 14px;
    background: #f8fffb;
    color: var(--green-dark);
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.payment-proof-dropzone:hover {
    border-color: var(--green-dark);
    background: var(--green-ultra-light);
}

.payment-proof-dropzone i {
    font-size: 1.45rem;
}

.payment-proof-dropzone span {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-proof-dropzone small {
    color: var(--text-muted);
    font-size: 0.69rem;
}

.payment-proof-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.payment-form-group:has(.payment-proof-input:focus-visible) .payment-proof-dropzone {
    outline: 3px solid rgba(37, 211, 102, 0.28);
    outline-offset: 2px;
}

.payment-form-group textarea {
    width: 100%;
    min-height: 82px;
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.45;
}

.payment-form-group textarea:focus,
.payment-copy-btn:focus-visible,
.payment-method-option input:focus-visible,
.verification-role-option input:focus-visible {
    border-color: var(--green);
    outline: 3px solid rgba(37, 211, 102, 0.22);
    outline-offset: 2px;
}

.payment-security-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.payment-security-note i {
    color: var(--green-dark);
    flex: 0 0 auto;
}

.payment-submit-btn {
    justify-content: center;
    width: 100%;
    min-height: 44px;
}

.payment-submit-btn:disabled {
    cursor: wait;
    opacity: 0.72;
}

.payment-pending-card {
    padding: 18px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    text-align: center;
}

.payment-market-unavailable {
    padding: 22px 18px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    text-align: center;
}

.payment-market-unavailable > div {
    margin-bottom: 8px;
    color: #2563eb;
    font-size: 1.7rem;
}

.payment-market-unavailable h3 {
    margin-bottom: 6px;
    color: #1e3a8a;
    font-size: 0.96rem;
}

.payment-market-unavailable p {
    max-width: 430px;
    margin: 0 auto 14px;
    color: #475569;
    font-size: 0.78rem;
    line-height: 1.5;
}

.payment-pending-icon {
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 1.6rem;
}

.payment-pending-card h3 {
    margin-bottom: 5px;
    color: #1e3a8a;
    font-size: 1rem;
}

.payment-pending-card > p {
    margin: 0 auto 14px;
    color: #475569;
    font-size: 0.78rem;
}

.payment-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0 0 14px;
    text-align: left;
}

.payment-summary div {
    padding: 9px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.7);
}

.payment-summary dt {
    color: #64748b;
    font-size: 0.66rem;
}

.payment-summary dd {
    margin: 2px 0 0;
    color: #1e3a8a;
    font-size: 0.76rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.payment-proof-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

.payment-proof-link:hover {
    text-decoration: underline;
}

.transaction-review-page {
    background: #f8fafc;
}

.transaction-review-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.transaction-review-header h1 {
    margin-bottom: 5px;
    color: var(--text);
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.transaction-review-header p {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.transaction-status-tabs {
    display: inline-flex;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
}

.transaction-status-tabs a {
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

.transaction-status-tabs a.is-active {
    background: var(--green);
    color: #fff;
}

.transaction-page-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 0.82rem;
}

.transaction-page-alert.is-success {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.transaction-page-alert.is-error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.transaction-review-list {
    display: grid;
    gap: 16px;
}

.transaction-review-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.transaction-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.transaction-reference {
    display: block;
    margin-bottom: 3px;
    color: var(--green-dark);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.transaction-card-heading h2 {
    color: var(--text);
    font-size: 1rem;
}

.transaction-card-heading p {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.transaction-status {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 800;
}

.transaction-status.is-pending {
    background: #fef3c7;
    color: #92400e;
}

.transaction-status.is-approved {
    background: #d1fae5;
    color: #065f46;
}

.transaction-status.is-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.transaction-review-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.transaction-review-details div {
    min-width: 0;
    padding: 10px;
    border-radius: 10px;
    background: var(--bg-soft);
}

.transaction-review-details dt {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.transaction-review-details dd {
    margin: 3px 0 0;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.transaction-note {
    margin: 9px 0;
    padding: 10px 12px;
    border-left: 3px solid var(--green);
    border-radius: 0 8px 8px 0;
    background: var(--green-ultra-light);
    color: var(--text-secondary);
    font-size: 0.77rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.transaction-review-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}

.transaction-review-actions form {
    margin: 0;
}

.transaction-proof-btn,
.transaction-approve-btn,
.transaction-reject-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 13px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.transaction-proof-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
}

.transaction-approve-btn {
    background: var(--green);
    color: #fff;
}

.transaction-reject-btn {
    background: #dc2626;
    color: #fff;
}

.transaction-reject-form {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto;
    gap: 5px 8px;
    flex: 1 1 360px;
}

.transaction-reject-form label {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
}

.transaction-reject-form textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 9px;
    font: inherit;
    font-size: 0.75rem;
}

.transaction-empty-state {
    padding: 48px 20px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    color: var(--text-muted);
    text-align: center;
}

.transaction-empty-state i {
    display: block;
    margin-bottom: 8px;
    font-size: 2rem;
}

.transaction-empty-state h2 {
    color: var(--text);
    font-size: 1rem;
}

.transaction-empty-state p {
    font-size: 0.78rem;
}

.transaction-pagination {
    margin-top: 20px;
}

@media (max-width: 700px) {
    .gateway-payment-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        padding: 27px 16px 20px;
    }

    .payment-method-grid,
    .verification-role-grid,
    .payment-recipient-card {
        grid-template-columns: 1fr;
    }

    .transaction-review-header {
        align-items: stretch;
        flex-direction: column;
    }

    .transaction-status-tabs {
        align-self: flex-start;
    }

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

/* Project editor refinements */
.project-form-section {
    display: grid;
    gap: 18px;
    padding: 0 0 26px;
    border-bottom: 1px solid #e4eee7;
}
.project-form-section-heading { display: flex; align-items: flex-start; gap: 12px; }
.project-form-section-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(145deg, #e6f8ec, #f4fcf7);
    color: #18713f;
    font-size: 1rem;
}
.project-form-section-heading h2,
.project-publish-panel h2,
.project-skills-heading h2 { margin: 0; color: #173c28; font-size: 1rem; letter-spacing: -.015em; }
.project-form-section-heading p,
.project-publish-panel p,
.project-skills-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: .74rem; font-weight: 500; }
.portfolio-form label small { color: var(--text-muted); font-size: .66rem; font-weight: 500; }
.project-field-wide { grid-column: 1 / -1; }
.project-input-icon { position: relative; }
.project-input-icon > i { position: absolute; z-index: 1; top: 50%; left: 13px; color: #698175; transform: translateY(-50%); }
.portfolio-form .project-input-icon input { padding-left: 38px; }

.portfolio-form .project-form-section.cv-collection { margin: 0; padding-top: 0; border-top: 0; }
.project-skills-heading { align-items: center; margin: 0; }
.project-skills-heading .cv-add-button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #b9dcc5;
    border-radius: 10px;
    background: #ecf9f0;
    color: #176b3c;
    font: inherit;
    font-size: .74rem;
    font-weight: 850;
    cursor: pointer;
}
.project-skills-heading .cv-add-button:hover { border-color: var(--green-dark); background: #ddf5e5; }
.portfolio-form .cv-skill-editor { min-height: 46px; padding: 12px; border: 1px dashed #c9ded0; border-radius: 13px; background: #f8fcf9; }
.portfolio-form .cv-skill-editor:empty::before { content: 'No skills added yet. Use “Add skill” to build your list.'; color: var(--text-muted); font-size: .75rem; }
.portfolio-form .cv-skill-input { min-width: 210px; border-color: #c9ded0; border-radius: 10px; background: #fff; }
.portfolio-form .cv-skill-input input { min-height: 38px; padding: 8px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.portfolio-form .cv-skill-input button { width: 36px; border: 0; border-left: 1px solid #e3ece6; background: #fff; color: #75857c; cursor: pointer; }
.portfolio-form .cv-skill-input button:hover { background: #fff0f0; color: #a13232; }

.project-publish-panel {
    display: grid;
    gap: 15px;
    padding: 20px;
    border: 1px solid #cae2d2;
    border-radius: 16px;
    background: linear-gradient(135deg, #f4fbf6, #fff);
}
.project-publish-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portfolio-form .project-publish-options .portfolio-check { align-items: flex-start; margin: 0; background: #fff; }
.project-publish-options .portfolio-check span { display: grid; gap: 2px; }
.project-publish-options .portfolio-check strong { color: #244b35; font-size: .78rem; }
.project-publish-options .portfolio-check small { line-height: 1.35; }
.project-form-footer { display: flex; align-items: center; justify-content: flex-end; gap: 11px; }
.portfolio-form .project-form-footer .btn { min-width: 135px; }

@media (max-width: 700px) {
    .project-form-section { padding-bottom: 22px; }
    .project-date-grid,
    .project-publish-options { grid-template-columns: 1fr; }
    .project-skills-heading { align-items: stretch; }
    .project-skills-heading .cv-add-button { width: 100%; }
    .portfolio-form .cv-skill-input { flex-basis: 100%; min-width: 0; }
    .project-form-footer { flex-direction: column-reverse; }
    .portfolio-form .project-form-footer .btn { width: 100%; }
}

@media (max-width: 440px) {
    .payment-summary,
    .transaction-review-details {
        grid-template-columns: 1fr;
    }

    .transaction-review-card {
        padding: 15px;
    }

    .transaction-reject-form {
        grid-template-columns: 1fr;
    }

    .transaction-reject-form label {
        grid-column: auto;
    }
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ─── Filter Bar ─── */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.filter-bar input,
.filter-bar select {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 50px;
    font-size: 0.875rem;
    font-family: var(--font);
    outline: none;
    transition: var(--transition);
    background: white;
    min-width: 180px;
}
.filter-bar input:focus,
.filter-bar select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-light);
}
.filter-bar input {
    flex: 1 1 200px;
}
.filter-bar .btn-clear {
    background: var(--border-light);
    color: var(--text-muted);
    border: none;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font);
}
.filter-bar .btn-clear:hover {
    background: #e5e7eb;
    color: var(--text);
}
.filter-results {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ─── Painful Unverified Badge ─── */
@keyframes pain-shake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-2px); }
    30%, 70% { transform: translateX(2px); }
}
.badge-unverified-pain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    background: #dc2626;
    color: #fff;
    padding: 3px 8px;
    border-radius: 50px;
    font-weight: 700;
    animation: pain-shake 0.6s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(220,38,38,0.7);
    letter-spacing: 0.5px;
}
.verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    background: #dcfce7;
    color: #166534;
    padding: 3px 8px;
    border-radius: 50px;
    font-weight: 600;
}

/* ─── Urgent Verification Banner ─── */
.verify-banner-urgent {
    margin-bottom: 18px;
    padding: 14px 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 14px;
    background: linear-gradient(110deg, #fff7f7 0%, #fff 70%);
    box-shadow: 0 8px 26px rgba(127, 29, 29, 0.08);
}

.verify-banner-urgent::before {
    content: '';
    position: absolute;
    top: -55px;
    right: -35px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.045);
    pointer-events: none;
}

.verify-banner-urgent .banner-content {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    position: relative;
    z-index: 1;
}

.verify-banner-urgent .banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 1.15rem;
}

.verify-banner-copy {
    min-width: 0;
}

.verify-banner-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #b91c1c;
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.verify-banner-urgent h3 {
    margin: 0 0 3px;
    color: #450a0a;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1.25;
}

.verify-banner-urgent p {
    max-width: 650px;
    margin: 0;
    color: #7f1d1d;
    font-size: 0.76rem;
    line-height: 1.4;
}

.verify-pain-points {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.verify-pain-points span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #fee2e2;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #991b1b;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

.verify-pain-points i {
    font-size: 0.6rem;
}

.verify-banner-action {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: max-content;
    text-align: center;
}

.verify-banner-action small {
    color: #9f1239;
    font-size: 0.6rem;
    white-space: nowrap;
}

.verify-btn-urgent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    border: none;
    border-radius: 999px;
    background: #15803d;
    box-shadow: 0 5px 14px rgba(21, 128, 61, 0.2);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.verify-btn-urgent:hover {
    background: #166534;
    box-shadow: 0 7px 18px rgba(21, 128, 61, 0.28);
    transform: translateY(-1px);
}

.verify-btn-urgent:focus-visible {
    outline: 3px solid rgba(21, 128, 61, 0.25);
    outline-offset: 2px;
}

.verify-banner-urgent.is-pending {
    border-color: #bfdbfe;
    border-left-color: #2563eb;
    background: linear-gradient(110deg, #eff6ff 0%, #fff 72%);
    box-shadow: 0 8px 26px rgba(37, 99, 235, 0.08);
}

.verify-banner-urgent.is-pending::before {
    background: rgba(37, 99, 235, 0.05);
}

.verify-banner-urgent.is-pending .banner-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.verify-banner-urgent.is-pending .verify-banner-eyebrow {
    color: #1d4ed8;
}

.verify-banner-urgent.is-pending h3 {
    color: #1e3a8a;
}

.verify-banner-urgent.is-pending p {
    color: #475569;
}

.verify-btn-urgent.is-secondary {
    border: 1px solid #bfdbfe;
    background: #fff;
    box-shadow: none;
    color: #1d4ed8;
}

.verify-btn-urgent.is-secondary:hover {
    border-color: #60a5fa;
    background: #eff6ff;
}

@media (max-width: 760px) {
    .verify-banner-urgent .banner-content {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .verify-banner-urgent .banner-icon {
        align-self: start;
        width: 38px;
        height: 38px;
    }

    .verify-banner-action {
        grid-column: 2;
        justify-items: start;
        min-width: 0;
        text-align: left;
    }
}

@media (max-width: 460px) {
    .verify-banner-urgent {
        padding: 12px;
    }

    .verify-banner-urgent .banner-content {
        gap: 10px;
    }

    .verify-pain-points span:last-child {
        display: none;
    }

    .verify-banner-action small {
        white-space: normal;
    }
}

/* ─── VISIBLE CLICKABLE FILTER CHIPS (the only rules needed) ─── */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.filter-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-right: 4px;
}

/* Hide the native checkbox but keep it functional */
.chip-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* The whole label is now a clickable pill */
.chip-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 2px solid #ccc;
    border-radius: 50px;
    background: #f3f4f6;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
    user-select: none;
    position: relative;
}

/* Fake checkbox – a square that fills when checked */
.chip-label::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid #9ca3af;
    border-radius: 4px;
    background: white;
    display: inline-block;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* When the real checkbox is checked, style the fake box */
.chip-label:has(.chip-checkbox:checked)::before {
    background: var(--green);
    border-color: var(--green);
    content: '✔';
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* When checked, make the whole pill green-tinted */
.chip-label:has(.chip-checkbox:checked) {
    background: var(--green-light);
    border-color: var(--green);
    color: var(--green-dark);
}

/* Hover effect */
.chip-label:hover {
    border-color: #6b7280;
    background: #e5e7eb;
}

.chip-label:has(.chip-checkbox:checked):hover {
    background: #d1fae5;
}

/* The text chip (just for icons and text, not interactive) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
}

/* Small gap after the search input */
.filter-bar > input {
    margin-right: 12px;
}



/* ===========================
   JOB MODAL UPGRADE STYLES
   =========================== */

.job-modal {
    width: min(720px, calc(100vw - 28px));
    max-width: 720px;
    max-height: calc(100dvh - 28px);
    margin: 14px auto;
    padding: 24px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-xl);
    overscroll-behavior: contain;
}

.job-modal-shell .modal-overlay {
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(5px);
}

.job-modal .modal-close {
    top: 14px;
    right: 14px;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 0.95rem;
    z-index: 3;
}

.job-modal .modal-close:hover {
    background: #e5e7eb;
    color: var(--text);
}

.job-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 38px;
}

.job-modal-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.job-modal-header h2 {
    margin: 0 0 2px;
    color: var(--text);
    font-size: 1.15rem;
}

.job-modal-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.wizard-steps {
    margin: 18px 0;
}

.wizard-step-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.wizard-market-chip {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-secondary);
    white-space: nowrap;
}

.wizard-bar {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 10px;
    background: #e5e7eb;
}

#wizardProgress {
    width: 25%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green-dark), var(--green));
    transition: width 0.25s ease;
}

.job-form-errors {
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #fecaca;
    border-radius: 11px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.74rem;
    line-height: 1.45;
}

.job-form-errors ul {
    margin: 5px 0 0 17px;
}

.wizard-step {
    display: none;
    min-height: 330px;
}

.wizard-step.active {
    display: block;
    animation: job-step-in 0.18s ease-out;
}

@keyframes job-step-in {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
}

.wizard-step h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
    color: var(--text);
    font-size: 0.92rem;
    outline: none;
}

.wizard-step h3 > span {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: var(--green-light);
    color: var(--green-dark);
    font-size: 0.72rem;
}

.job-step-intro {
    margin: -8px 0 15px;
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.45;
}

.required-badge {
    padding: 2px 6px;
    border-radius: 20px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.58rem;
    font-weight: 700;
}

.job-modal .form-group {
    margin-bottom: 14px;
}

.job-modal .form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
}

.job-modal .form-group label small {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 500;
}

.job-modal .form-group input,
.job-modal .form-group textarea,
.job-modal .form-group select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
    outline: none;
    transition: var(--transition);
}

.job-modal .form-group textarea {
    min-height: 116px;
    resize: vertical;
    line-height: 1.5;
}

.job-modal .form-group input:focus,
.job-modal .form-group textarea:focus,
.job-modal .form-group select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.14);
}

.job-modal .form-group.has-error input,
.job-modal .form-group.has-error textarea,
.job-modal .form-group.has-error select {
    border-color: #ef4444;
    background: #fffafa;
}

.job-field-hint {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.62rem;
}

.job-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

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

.job-profile-contact-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 650;
    cursor: pointer;
}

.job-profile-contact-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--green-dark);
}

.job-input-with-icon {
    position: relative;
}

.job-input-with-icon > i {
    position: absolute;
    top: 50%;
    left: 11px;
    color: var(--text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.job-input-with-icon input {
    padding-left: 34px !important;
}

.job-market-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 13px;
    border: 1px solid #bbf7d0;
    border-radius: 13px;
    background: #f0fdf4;
}

.job-market-flag {
    font-size: 1.7rem;
}

.job-market-summary > div:last-child {
    display: grid;
    gap: 2px;
}

.job-market-summary span,
.job-market-summary small {
    color: #4b7660;
    font-size: 0.66rem;
}

.job-market-summary strong {
    color: #065f46;
    font-size: 0.84rem;
}

.job-money-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.job-money-input:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.14);
}

.job-money-input > span {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 750;
}

.job-money-input input {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.job-money-input.is-disabled {
    opacity: 0.55;
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--border-light);
}

.wizard-actions .btn {
    min-width: 0;
    min-height: 42px;
    padding: 10px 17px;
    font-size: 0.76rem;
}

.wizard-actions .btn-success {
    margin-left: auto;
    background: var(--green);
    color: #fff;
}

.wizard-actions .btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

.job-edit-modal {
    width: min(820px, calc(100vw - 28px));
    max-width: 820px;
    max-height: calc(100dvh - 28px);
    margin: 14px auto;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}

.job-edit-form {
    margin-top: 20px;
}

.job-edit-section {
    padding: 18px 0 8px;
    border-top: 1px solid var(--border-light);
}

.job-edit-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.job-edit-section h3 {
    margin: 0 0 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.job-edit-market {
    margin-bottom: 16px;
}

.job-edit-submit {
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

.job-owner-actions {
    display: flex;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.job-owner-actions form {
    margin: 0;
}

.job-owner-edit,
.job-owner-delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
}

.job-owner-edit:hover {
    border-color: var(--green);
    background: var(--green-ultra-light);
    color: var(--green-dark);
}

.job-owner-delete:hover {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 620px) {
    .job-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        margin: 8px auto;
        padding: 18px 14px;
        border-radius: 16px;
    }

    .wizard-step {
        min-height: 0;
    }

    .job-form-grid,
    .job-form-grid-three {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .job-modal-header p {
        display: none;
    }

    .wizard-actions .btn {
        padding: 9px 13px;
    }
}


/* ─────────────────────────────
   MARKETPLACE SALES + CAREER
───────────────────────────── */
.nav-cta-secondary {
    background: #fff;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.sales-hero {
    overflow: hidden;
    padding: 72px 0 54px;
    background:
        radial-gradient(circle at 18% 12%, rgba(37, 211, 102, .2), transparent 34%),
        radial-gradient(circle at 86% 74%, rgba(20, 90, 55, .14), transparent 32%),
        linear-gradient(155deg, #f7fff9 0%, #fff 48%, #eff9f2 100%);
}

.sales-hero h1 {
    max-width: 860px;
    margin-inline: auto;
    font-size: clamp(2.15rem, 5vw, 4.3rem);
    line-height: 1.04;
    letter-spacing: -.055em;
}

.sales-hero .hero-desc {
    max-width: 680px;
    font-size: 1.05rem;
}

.sales-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 790px;
    margin: 34px auto 0;
}

.sales-choice-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 14px;
    min-height: 148px;
    padding: 24px;
    border: 1px solid rgba(20, 90, 55, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    color: var(--text-primary);
    text-align: left;
    text-decoration: none;
    box-shadow: 0 18px 50px rgba(28, 78, 49, .08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sales-choice-card:hover {
    transform: translateY(-4px);
    border-color: var(--green);
    box-shadow: 0 22px 56px rgba(28, 78, 49, .15);
}

.sales-choice-icon {
    grid-row: 1 / 4;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--green-ultra-light);
    color: var(--green-dark);
    font-size: 1.25rem;
}

.sales-choice-card small { color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.sales-choice-card strong { font-size: 1.16rem; }
.sales-choice-card > span:last-child { color: var(--green-dark); font-size: .82rem; font-weight: 750; }

.sales-proof-row {
    display: flex;
    justify-content: center;
    gap: 38px;
    margin-top: 32px;
}

.sales-proof-row div { display: flex; flex-direction: column; gap: 2px; }
.sales-proof-row strong { font-size: 1rem; color: var(--text-primary); }
.sales-proof-row span { font-size: .72rem; color: var(--text-muted); }

.marketplace-promise { padding: 20px 0; border-bottom: 1px solid var(--border-light); background: #fff; }
.marketplace-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.marketplace-promise article { display: flex; align-items: flex-start; gap: 12px; padding: 15px; }
.marketplace-promise article > i { color: var(--green-dark); font-size: 1.25rem; }
.marketplace-promise article div { display: flex; flex-direction: column; gap: 3px; }
.marketplace-promise article strong { font-size: .84rem; }
.marketplace-promise article span { color: var(--text-muted); font-size: .74rem; line-height: 1.45; }

.market-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(130px, 1fr));
    gap: 10px;
    margin: 0 0 28px;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.market-filter-form input,
.market-filter-form select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text-primary);
    font: inherit;
    font-size: .78rem;
}

.market-filter-search { position: relative; }
.market-filter-search i { position: absolute; left: 13px; top: 13px; color: var(--text-muted); }
.market-filter-search input { padding-left: 36px; }
.market-filter-check { display: flex; align-items: center; gap: 7px; min-height: 42px; font-size: .78rem; font-weight: 700; }
.market-filter-check input { width: auto; min-height: auto; }
.market-filter-form .btn, .market-filter-form .btn-clear { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; }

.job-skill-tags, .candidate-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.job-skill-tags span, .candidate-skills span { padding: 4px 8px; border-radius: 999px; background: #eff8f2; color: #286342; font-size: .67rem; font-weight: 700; }
.job-match-bar { position: relative; height: 25px; overflow: hidden; margin: 10px 0; border-radius: 8px; background: #eef2ef; }
.job-match-bar > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #b8ebc7, #73d795); }
.job-match-bar strong { position: relative; z-index: 1; display: block; padding: 5px 8px; font-size: .66rem; }
.job-match-summary { margin: 10px 0; }
.job-match-summary .job-match-bar { margin: 0; }
.job-match-details { margin-top: 7px; border: 1px solid #dce8e0; border-radius: 10px; background: #fbfdfc; }
.job-match-details summary { display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: pointer; color: var(--green-dark); font-size: .7rem; font-weight: 800; list-style: none; }
.job-match-details summary::-webkit-details-marker { display: none; }
.job-match-details[open] summary { border-bottom: 1px solid #e5ece8; }
.job-match-components { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 4px; }
.job-match-components span { padding: 4px 7px; border-radius: 999px; background: #edf6f0; color: #496052; font-size: .62rem; }
.job-match-details p { margin: 6px 10px 10px; color: var(--text-secondary); font-size: .68rem; line-height: 1.45; }
.job-apply-action { margin-left: auto; }
.job-apply-action form { margin: 0; }
.job-apply-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 9px; background: var(--green); color: #fff; cursor: pointer; text-decoration: none; font: inherit; font-size: .72rem; font-weight: 800; }
.market-pagination { margin-top: 28px; }
.marketplace-alert { margin: 0 0 18px; padding: 13px 16px; border-radius: 12px; font-size: .82rem; }
.marketplace-alert.is-success { background: #eaf8ef; color: #1e643b; border: 1px solid #bee5ca; }
.marketplace-alert.is-error { background: #fff0f0; color: #9b2525; border: 1px solid #f3c3c3; }

.career-shell { min-height: 70vh; padding: 54px 0 78px; background: linear-gradient(180deg, #f6fbf8, #fff 360px); }
.career-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.career-hero h1 { margin: 7px 0 8px; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.045em; }
.career-hero p { max-width: 680px; margin: 0; color: var(--text-secondary); }
.career-eyebrow { color: var(--green-dark); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.career-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .8fr); gap: 20px; align-items: start; }
.career-card, .career-empty-card { padding: 25px; border: 1px solid var(--border-light); border-radius: 20px; background: #fff; box-shadow: 0 15px 45px rgba(27, 69, 44, .07); }
.career-empty-card { max-width: 680px; margin: 50px auto; text-align: center; }
.career-empty-card > i { display: block; margin-bottom: 12px; color: var(--green); font-size: 2rem; }
.career-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.career-card-heading > div { display: flex; align-items: center; gap: 9px; }
.career-card-heading span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #eaf8ef; color: var(--green-dark); font-size: .68rem; font-weight: 900; }
.career-card-heading h2 { margin: 0; font-size: 1rem; }
.career-card-heading small { color: var(--text-muted); }
.career-toggle { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 13px; border: 1px solid var(--border-light); border-radius: 12px; background: #fafcfb; }
.career-toggle input[type="checkbox"] { margin-top: 3px; accent-color: var(--green); }
.career-toggle span { display: flex; flex-direction: column; gap: 2px; }
.career-toggle small { color: var(--text-muted); line-height: 1.4; }
.career-toggle-primary { border-color: #bfe5ca; background: #eff9f2; }
.career-fieldset { margin: 16px 0; padding: 0; border: 0; }
.career-fieldset legend { margin-bottom: 9px; font-size: .76rem; font-weight: 800; }
.career-check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.career-check-grid label { font-size: .76rem; }
.career-safety-note { display: flex; gap: 9px; margin: 15px 0; padding: 12px; border-radius: 10px; background: #f4f7f5; color: var(--text-secondary); font-size: .72rem; line-height: 1.5; }
.career-safety-note i { color: var(--green-dark); }

.application-list, .candidate-list { display: grid; gap: 13px; }
.application-card, .candidate-card { display: flex; justify-content: space-between; gap: 18px; padding: 20px; border: 1px solid var(--border-light); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.application-card h2, .candidate-card h2 { margin: 4px 0; font-size: 1.05rem; }
.application-card p, .candidate-card p { color: var(--text-secondary); font-size: .8rem; }
.application-meta, .candidate-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-size: .72rem; }
.application-source, .application-status { display: inline-flex; width: max-content; padding: 4px 8px; border-radius: 999px; background: #edf2ef; color: #4c5b52; font-size: .65rem; font-weight: 800; }
.application-source.is-automatic { background: #e7f5ff; color: #1f628d; }
.application-status.is-accepted, .application-status.is-shortlisted { background: #e9f8ee; color: #216940; }
.application-status.is-rejected, .application-status.is-withdrawn { background: #fff0f0; color: #a13232; }
.application-delivery { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #f3f7f5; color: #42534a; font-size: .76rem; line-height: 1.45; }
.application-delivery i { margin-top: 1px; color: var(--primary); }
.application-delivery.is-failed, .application-delivery.is-uncertain { background: #fff7e8; color: #72551f; }
.application-delivery.is-failed i, .application-delivery.is-uncertain i { color: #a86b00; }
.match-score { color: var(--green-dark); }
.candidate-card { justify-content: flex-start; }
.candidate-score { display: flex; flex: 0 0 72px; flex-direction: column; align-items: center; justify-content: center; align-self: flex-start; padding: 13px 8px; border-radius: 13px; background: #eaf8ef; color: var(--green-dark); }
.candidate-score strong { font-size: 1.25rem; }.candidate-score span { font-size: .63rem; }
.candidate-content { flex: 1; min-width: 0; }
.candidate-heading { display: flex; justify-content: space-between; gap: 12px; }
.candidate-heading > div > span { color: var(--text-muted); font-size: .68rem; font-weight: 700; }
.candidate-contact a { color: var(--green-dark); }
.candidate-review { margin-top: 14px; border-top: 1px solid var(--border-light); padding-top: 12px; }
.candidate-review summary { cursor: pointer; color: var(--green-dark); font-size: .76rem; font-weight: 800; }
.candidate-review form { margin-top: 14px; }

@media (max-width: 960px) {
    .market-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .market-filter-search { grid-column: span 2; }
    .career-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .sales-choice-grid, .marketplace-promise-grid, .market-filter-form { grid-template-columns: 1fr; }
    .market-filter-search { grid-column: auto; }
    .sales-proof-row { gap: 18px; }
    .sales-proof-row div { max-width: 100px; }
    .career-hero { align-items: flex-start; flex-direction: column; }
    .career-card { padding: 18px 14px; }
    .career-check-grid { grid-template-columns: 1fr; }
    .candidate-card { flex-direction: column; }
    .candidate-score { flex-basis: auto; width: 72px; }
}

/* Final navigation layer: keep module menu rules above legacy navbar helpers. */
.nav-primary-links .nav-module-menu > summary,
.nav-primary-links .nav-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 11px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 800;
}

.nav-primary-links .nav-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 10px;
    white-space: normal;
}

.nav-primary-links .nav-menu-link:hover,
.nav-primary-links .nav-menu-link.is-active {
    background: var(--green-ultra-light);
    color: var(--green-dark);
}

.nav-account-panel {
    width: 280px;
    max-height: min(680px, calc(100dvh - 90px));
    overflow-y: auto;
}

@media (max-width: 1100px) {
    .nav-primary-links {
        grid-template-columns: 1fr;
    }

    .nav-primary-links .nav-module-menu > summary,
    .nav-primary-links .nav-direct-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 46px;
        border: 1px solid var(--border-light);
    }

    .nav-module-chevron {
        margin-left: auto;
    }

    .nav-module-panel,
    .nav-module-panel-wide {
        position: static;
        width: 100%;
        margin-top: 5px;
        box-shadow: none;
    }
}

@media (max-width: 560px) {
    .nav-module-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────
   PROFESSIONAL CV PROFILE
───────────────────────────── */
.profile-cv-available {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    margin-top: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e9f7ee;
    color: var(--green-dark);
    font-size: .62rem;
    font-weight: 800;
}

.professional-profile-shell {
    min-height: 75vh;
    padding: 32px 0 76px;
    background: #f4f7f5;
}

.professional-profile-container {
    max-width: 1080px;
}

.profile-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 17px;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
}

.professional-profile-header {
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(26, 64, 41, .08);
}

.profile-cover {
    position: relative;
    height: 155px;
    overflow: hidden;
    background: linear-gradient(130deg, #0d5830 0%, #15914f 55%, #45c877 100%);
}

.profile-cover.has-photo,
.career-profile-cover.has-photo {
    background: #dce8e0;
}

.profile-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-cover span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}

.profile-cover span:nth-child(1) { width: 260px; height: 260px; top: -140px; right: 5%; }
.profile-cover span:nth-child(2) { width: 170px; height: 170px; bottom: -100px; left: 18%; }
.profile-cover span:nth-child(3) { width: 70px; height: 70px; top: 28px; left: 48%; }

.profile-header-content {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: end;
    padding: 0 30px 27px;
}

.professional-avatar {
    width: 142px;
    height: 142px;
    margin-top: -72px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(15, 54, 31, .16);
}

.profile-identity {
    padding-top: 18px;
}

.profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-name-row h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.65rem, 4vw, 2.25rem);
    letter-spacing: -.035em;
}

.profile-verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
}

.profile-verification-badge.is-verified { background: #e8f8ed; color: #19653a; }
.profile-verification-badge.is-unverified { background: #fff4df; color: #915c08; }

.profile-professional-headline {
    margin: 5px 0 10px;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.4;
}

.profile-location-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--text-muted);
    font-size: .72rem;
}

.profile-location-line span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.profile-primary-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 2px;
}

.professional-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(270px, .75fr);
    gap: 18px;
    align-items: start;
    margin-top: 20px;
}

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

.profile-section-card {
    padding: 24px;
    border: 1px solid var(--border-light);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(26, 64, 41, .05);
}

.profile-section-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.profile-section-heading > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.profile-section-heading i {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: #edf8f1;
    color: var(--green-dark);
}

.profile-section-heading h2 {
    margin: 0;
    font-size: 1rem;
}

.profile-summary {
    margin: 0;
    color: var(--text-secondary);
    font-size: .87rem;
    line-height: 1.75;
    white-space: pre-line;
}

.profile-timeline {
    display: grid;
    gap: 0;
}

.profile-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    padding-bottom: 19px;
}

.profile-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    bottom: 0;
    width: 2px;
    background: #dcece2;
}

.profile-timeline-item > span {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border: 3px solid #a7dfb9;
    border-radius: 50%;
    background: #fff;
}

.profile-timeline-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .82rem;
    line-height: 1.6;
    white-space: pre-line;
}

.profile-skill-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.profile-skill-cloud span {
    padding: 6px 10px;
    border: 1px solid #cce8d5;
    border-radius: 999px;
    background: #f2faf5;
    color: #245f3c;
    font-size: .72rem;
    font-weight: 750;
}

.profile-simple-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-simple-list li {
    position: relative;
    padding-left: 17px;
    color: var(--text-secondary);
    font-size: .79rem;
    line-height: 1.5;
}

.profile-simple-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-dark);
    font-weight: 900;
}

.profile-privacy-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: #fff;
    color: var(--text-secondary);
    font-size: .72rem;
}

.profile-privacy-note i { color: var(--green-dark); }

.profile-cv-empty {
    max-width: 720px;
    margin: 22px auto 0;
    padding: 44px 24px;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.profile-cv-empty > i {
    color: var(--green);
    font-size: 2rem;
}

.profile-cv-empty h2 { margin: 10px 0 6px; font-size: 1.2rem; }
.profile-cv-empty p { margin: 0 auto 17px; max-width: 520px; color: var(--text-muted); font-size: .82rem; }

@media (max-width: 820px) {
    .profile-header-content { grid-template-columns: auto 1fr; padding-inline: 20px; }
    .profile-primary-actions { grid-column: 1 / -1; padding-bottom: 0; }
    .professional-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .profile-cover { height: 115px; }
    .profile-header-content { display: block; padding: 0 16px 20px; }
    .professional-avatar { width: 112px; height: 112px; margin-top: -56px; }
    .profile-identity { padding-top: 12px; }
    .profile-primary-actions { margin-top: 16px; flex-wrap: wrap; }
    .profile-primary-actions > .btn,
    .profile-primary-actions > .profile-share-menu { flex: 1 1 145px; min-width: 0; }
    .profile-primary-actions > .btn,
    .profile-primary-actions > .profile-share-menu > summary { width: 100%; justify-content: center; }
    .profile-name-row h1,
    .profile-professional-headline,
    .profile-location-line span { overflow-wrap: anywhere; }
    .profile-section-card { padding: 19px 16px; }
}

/* ─────────────────────────────
   PAYMENT MODAL FEATURES
───────────────────────────── */

.payment-feature-list {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.payment-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    transition: var(--transition);
}

.payment-feature:hover {
    border-color: rgba(37, 211, 102, 0.25);
    background: var(--green-ultra-light);
    transform: translateY(-1px);
}

.payment-feature i {
    font-size: 1rem;
    color: var(--green);
    margin-top: 2px;
    flex-shrink: 0;
}

.payment-feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-feature-text strong {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.3;
}

.payment-feature-text span {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* premium badge */

.payment-upgrade-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #bbf7d0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.2px;
}

/* subtle top glow */

.payment-modal-dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: linear-gradient(
        90deg,
        #25D366,
        #10b981,
        #34d399
    );
}

/* responsive */

@media (max-width: 480px) {

    .payment-modal-dialog {
        padding: 28px 18px;
    }

    .payment-feature {
        padding: 10px 12px;
    }

    .payment-feature-text strong {
        font-size: 0.84rem;
    }

    .payment-feature-text span {
        font-size: 0.74rem;
    }
}




.contact-locked {
    opacity: 0.85;
    filter: grayscale(30%);
}

.contact-locked:hover {
    transform: scale(1.03);
    opacity: 1;
}

.contact-unlocked {
    background: var(--green);
    color: white !important;
    position: relative;
}

.contact-unlocked i.bi-check2-circle {
    color: #fff;
}


.job-card-footer {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.job-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111;
    transition: 0.2s;
}

.job-btn i {
    font-size: 14px;
}

.job-btn.locked {
    opacity: 0.6;
}

.job-btn.whatsapp {
    color: #128c7e;
}

.job-btn.email {
    color: #374151;
}

.job-view-btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.job-view-btn:hover {
    background: #1d4ed8;
}

/* ============================================================
   ENHANCED JOB CARD (no hardcoded icons, Bootstrap Icons only)
   ============================================================ */

/* Card gap */
.job-card-enhanced {
    gap: 8px;
}

/* Remote badge */
.remote-badge {
    font-size: 0.7rem;
    background: #dbeafe;
    color: #1e40af;
    padding: 2px 8px;
    border-radius: 50px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.remote-badge i {
    font-size: 0.75rem;
    vertical-align: middle;
}

/* Meta pills row */
.job-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.job-meta-pill {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 50px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.sector-pill {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.payment-pill {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.status-pill {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.status-pill.status-filled {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}
.status-pill.status-in_progress {
    background: #e0e7ff;
    color: #3730a3;
    border-color: #c7d2fe;
}
.status-pill.status-completed {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}
.status-pill.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

/* Dates & workers */
.job-dates-workers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    align-items: center;
    margin-top: 2px;
}

.job-date,
.job-workers {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Bio inside job card – uses existing listing-bio classes */
.job-bio {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.job-bio .bio-toggle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green-dark);
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 4px;
}
.job-bio .bio-toggle:hover {
    text-decoration: underline;
}


/* District dropdown in filter bar */
.filter-select {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 50px;
    font-size: 0.875rem;
    font-family: var(--font);
    background: white;
    color: var(--text);
    outline: none;
    transition: var(--transition);
    min-width: 160px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.filter-select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-light);
}


.slider-section {
    margin-bottom: 3rem;
}

.slider-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.slider-track-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.slider-track {
    display: flex;
    gap: 1rem;
    width: max-content;          /* expands to fit all cards */
    animation: slideRightToLeft 30s linear infinite;
}

/* Pause on hover so users can interact */
.slider-track:hover {
    animation-play-state: paused;
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move left by exactly half the track width (because the track contains duplicate sets) */
        transform: translateX(-50%);
    }
}


/* Fixed width ONLY for cards inside the slider */
.slider-track .listing-card {
    flex-shrink: 0;
    width: 300px;
}

.slider-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.view-all-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
    white-space: nowrap;
}
.view-all-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}


@media (max-width: 520px) {
    .filter-bar input,
    .filter-bar select {
        min-width: 0;          /* allow them to shrink */
        flex: 1 1 120px;      /* keep a reasonable minimum */
    }
    .filter-bar > input {
        margin-right: 0;       /* avoid extra space on tiny screens */
    }
}

/* ==========================================================================
   Module navigation — scalable marketplace information architecture
   ========================================================================== */
.nav-module-menu {
    position: relative;
}

.nav-module-menu > summary,
.nav-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .76rem;
    font-weight: 800;
    list-style: none;
    text-decoration: none;
    white-space: nowrap;
}

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

.nav-module-menu > summary:hover,
.nav-module-menu[open] > summary,
.nav-module-menu[data-current] > summary,
.nav-direct-link:hover,
.nav-direct-link.is-active {
    background: var(--green-ultra-light);
    color: var(--green-dark);
}

.nav-module-chevron {
    margin-left: 2px;
    font-size: .6rem;
    transition: transform .2s ease;
}

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

.nav-module-panel {
    position: absolute;
    top: calc(100% + 11px);
    left: 0;
    z-index: 170;
    display: grid;
    width: min(320px, calc(100vw - 32px));
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: rgba(255, 255, 255, .99);
    box-shadow: 0 24px 65px rgba(16, 51, 38, .18);
}

.nav-module-panel-wide {
    width: min(590px, calc(100vw - 32px));
}

.nav-module-heading {
    display: grid;
    gap: 2px;
    margin: 0 2px 6px;
    padding: 8px 9px 11px;
    border-bottom: 1px solid var(--border-light);
}

.nav-module-heading span,
.nav-account-section {
    color: var(--green-dark);
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.nav-module-heading small {
    color: var(--text-muted);
    font-size: .68rem;
}

.nav-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.nav-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border-radius: 11px;
    color: var(--text-secondary);
    text-decoration: none;
}

.nav-menu-link:hover,
.nav-menu-link.is-active {
    background: var(--green-ultra-light);
    color: var(--green-dark);
}

.nav-menu-link-icon {
    display: inline-grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(20, 120, 78, .12);
    border-radius: 10px;
    background: #fff;
    color: var(--green-dark);
    font-size: 1rem;
}

.nav-menu-link-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.nav-menu-link-copy strong {
    font-size: .75rem;
}

.nav-menu-link-copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: .64rem;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.nav-account-panel {
    width: 280px;
    max-height: min(680px, calc(100dvh - 90px));
    overflow-y: auto;
    scrollbar-width: thin;
}

.nav-account-section {
    display: block;
    padding: 10px 11px 4px;
}

.nav-account-section:not(:first-of-type) {
    margin-top: 4px;
    border-top: 1px solid var(--border-light);
}

.nav-account-logout {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--border-light);
}

.nav-account-logout button {
    color: #a83232;
}

.nav-account-logout button i {
    color: #a83232;
}

@media (max-width: 1100px) {
    .nav-primary-links {
        gap: 2px;
    }

    .nav-module-menu > summary,
    .nav-direct-link {
        padding-inline: 9px;
    }
}

@media (max-width: 900px) {
    .nav-primary-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .nav-module-menu > summary,
    .nav-direct-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 46px;
        padding: 10px 12px;
        border: 1px solid var(--border-light);
    }

    .nav-module-chevron {
        margin-left: auto;
    }

    .nav-module-panel,
    .nav-module-panel-wide {
        position: static;
        width: 100%;
        margin-top: 5px;
        border-radius: 13px;
        box-shadow: none;
    }
}

@media (max-width: 560px) {
    .nav-module-grid {
        grid-template-columns: 1fr;
    }

    .nav-menu-link-copy small {
        white-space: normal;
    }
}

/* ─────────────────────────────
   CLEAN RESPONSIVE NAVIGATION
───────────────────────────── */
.navbar .container { min-height: 66px; height: auto; gap: 20px; }
.nav-menu { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; flex: 1; }
.nav-primary-links { display: flex; align-items: center; gap: 3px; min-width: 0; }
.nav-primary-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; color: var(--text-secondary); font-size: .76rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.nav-primary-links a:hover, .nav-primary-links a.is-active { background: var(--green-ultra-light); color: var(--green-dark); }
.nav-menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: auto; border: 1px solid var(--border); border-radius: 11px; background: #fff; color: var(--text); cursor: pointer; font-size: 1.25rem; }
.nav-account-menu { position: relative; }
.nav-account-menu summary { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 9px 4px 4px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-secondary); cursor: pointer; font-size: .72rem; font-weight: 800; list-style: none; }
.nav-account-menu summary::-webkit-details-marker { display: none; }
.nav-account-menu summary:hover, .nav-account-menu[open] summary { border-color: var(--green); color: var(--green-dark); }
.nav-account-menu summary img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.nav-account-menu summary i { font-size: .62rem; transition: transform .2s ease; }
.nav-account-menu[open] summary i { transform: rotate(180deg); }
.nav-account-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 160; display: grid; width: 245px; overflow: hidden; padding: 7px; border: 1px solid var(--border); border-radius: 15px; background: #fff; box-shadow: var(--shadow-xl); }
.nav-account-identity { display: grid; gap: 2px; margin-bottom: 5px; padding: 10px; border-bottom: 1px solid var(--border-light); }
.nav-account-identity strong { font-size: .8rem; }
.nav-account-identity span { overflow: hidden; color: var(--text-muted); font-size: .68rem; text-overflow: ellipsis; }
.nav-account-panel a, .nav-account-panel button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: .74rem; font-weight: 700; text-align: left; text-decoration: none; }
.nav-account-panel a:hover, .nav-account-panel button:hover { background: var(--green-ultra-light); color: var(--green-dark); }
.nav-account-panel i { width: 18px; color: var(--green-dark); text-align: center; }

@media (max-width: 1100px) {
    .navbar .container { position: relative; min-height: 60px; }
    .nav-menu-toggle { display: inline-flex; }
    .nav-menu-toggle[aria-expanded="true"] { border-color: var(--green); background: var(--green-ultra-light); color: var(--green-dark); }
    .nav-menu { position: absolute; top: calc(100% + 1px); left: 20px; right: 20px; display: none; max-height: calc(100dvh - 78px); overflow-y: auto; padding: 14px; border: 1px solid var(--border); border-radius: 0 0 17px 17px; background: rgba(255,255,255,.98); box-shadow: var(--shadow-xl); }
    .nav-menu.is-open { display: grid; gap: 14px; }
    .nav-primary-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nav-primary-links a { min-height: 42px; }
    .nav-actions { justify-content: flex-end; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border-light); }
}

@media (max-width: 600px) {
    .navbar .container { gap: 10px; }
    .nav-logo { font-size: .9rem; }
    .nav-menu { left: 8px; right: 8px; padding: 12px; }
    .nav-primary-links { grid-template-columns: 1fr; }
    .nav-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); justify-content: stretch; }
    .nav-actions > .nav-cta { width: 100%; }
    .nav-account-menu { min-width: 0; }
    .nav-account-menu summary { justify-content: center; }
    .nav-account-menu summary span { display: none; }
    .nav-account-panel { position: fixed; top: 66px; right: 10px; left: 10px; width: auto; max-height: calc(100dvh - 78px); overflow-y: auto; }
}

/* TRUST, SHARING AND REVIEWS */
.marketplace-card-rating { display:flex; align-items:center; gap:5px; color:#8a6500; font-size:.72rem; font-weight:800; }
.marketplace-card-rating span { color:var(--text-muted); font-weight:600; }
.profile-share-menu { position:relative; }
.profile-share-menu summary { list-style:none; cursor:pointer; }
.profile-share-menu summary::-webkit-details-marker { display:none; }
.profile-share-menu > div { position:absolute; right:0; bottom:calc(100% + 7px); z-index:50; display:grid; min-width:190px; padding:7px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 16px 40px rgba(17,24,39,.14); }
.profile-share-menu a,.profile-share-menu button { display:flex; align-items:center; gap:8px; padding:9px; border:0; border-radius:8px; background:transparent; color:var(--text); font:inherit; font-size:.76rem; text-align:left; text-decoration:none; cursor:pointer; }
.profile-share-menu a:hover,.profile-share-menu button:hover { background:var(--green-ultra-light); }
.trust-page { min-height:70vh; padding:72px 0; background:#f7faf8; }
.trust-hero { max-width:720px; margin:0 auto 34px; text-align:center; }
.trust-hero h1 { margin:8px 0; font-size:clamp(1.8rem,4vw,3rem); }
.trust-hero > p { color:var(--text-secondary); }
.trust-score { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; }
.trust-score strong { font-size:2rem; }.trust-score span,.review-stars { color:#e9a808; letter-spacing:2px; }.trust-score small { color:var(--text-muted); }
.review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.review-grid.is-profile { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
.review-card { display:flex; flex-direction:column; min-height:180px; padding:18px; border:1px solid #dde8e0; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(23,75,45,.05); }
.review-card > p { color:var(--text-secondary); font-size:.8rem; line-height:1.65; }
.review-card footer { display:grid; gap:2px; margin-top:auto; font-size:.74rem; }.review-card footer span,.review-card footer small { color:var(--text-muted); }
.profile-reviews-section,.referral-card { margin-top:18px; }
.profile-rating-summary { display:flex; align-items:center; gap:10px; }.profile-rating-summary strong { font-size:1.8rem; }.profile-rating-summary small { color:var(--text-muted); }
.profile-review-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--border-light); }
.profile-review-form h3,.profile-review-form .marketplace-alert,.profile-review-form label:last-of-type { grid-column:1/-1; }
.profile-review-form label { display:grid; gap:5px; color:var(--text-secondary); font-size:.74rem; font-weight:800; }
.profile-review-form select,.profile-review-form textarea,.review-moderation-form textarea { width:100%; padding:10px; border:1px solid var(--border); border-radius:9px; background:#fff; font:inherit; }
.referral-link-row { display:flex; align-items:center; gap:10px; }.referral-link-row code { flex:1; overflow:hidden; padding:12px; border-radius:9px; background:#f5f7f6; text-overflow:ellipsis; }
.referral-stats { display:flex; gap:12px; margin-top:13px; }.referral-stats span { padding:10px 14px; border-radius:10px; background:var(--green-ultra-light); font-size:.75rem; }
.review-admin-list { display:grid; gap:14px; }.review-moderation-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }.review-moderation-form textarea { flex:1 1 100%; }
@media(max-width:760px){.review-grid,.review-grid.is-profile{grid-template-columns:1fr}.profile-review-form{grid-template-columns:1fr}.profile-review-form>*{grid-column:1!important}.referral-link-row{align-items:stretch;flex-direction:column}.profile-share-menu>div{left:0;right:auto}.trust-page{padding:44px 0}}
.fee-admin-list { display:grid; gap:12px; margin-top:16px; }.fee-admin-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px; }.fee-admin-form input,.fee-admin-form select,.fee-admin-form textarea { min-width:0; padding:9px; border:1px solid var(--border); border-radius:8px; background:#fff; font:inherit; font-size:.74rem; }.fee-admin-form textarea { grid-column:span 3; }.fee-admin-form label { display:flex; align-items:center; gap:6px; font-size:.74rem; }
@media(max-width:760px){.fee-admin-form{grid-template-columns:1fr}.fee-admin-form textarea{grid-column:1}}
.job-informal-callout { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; padding:12px; border:1px solid #b9dfc6; border-radius:12px; background:#f1fbf4; color:#174d2d; }.job-informal-callout>i{font-size:1.25rem}.job-informal-callout div{display:grid;gap:2px}.job-informal-callout strong{font-size:.78rem}.job-informal-callout span{font-size:.69rem;line-height:1.45}.informal-pill{background:#e9f8ee!important;color:#176038!important}
.worker-market-page,.listings-section:has(#jobsGrid) { background:#f8fbf9; }.market-page-heading { margin-bottom:20px; }.market-page-heading h1 { margin:5px 0; font-size:clamp(1.55rem,3vw,2.35rem); }.market-page-heading p { margin:0; color:var(--text-secondary); }.marketplace-worker-filter-item { display:contents; }.worker-market-grid .marketplace-home-card { min-height:410px; }.listings-grid .job-card-enhanced { min-height:410px; border:1px solid #dfe9e2; border-radius:19px; background:#fff; box-shadow:0 10px 30px rgba(23,75,45,.055); }
.marketplace-card-identity h3 a,.listing-name { color:inherit; text-decoration:none; }.marketplace-card-identity h3 a:hover,.listing-name:hover { color:var(--green-dark); }.opportunity-detail-page{min-height:70vh;padding:38px 0 72px;background:#f8fbf9}.opportunity-detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:18px;margin-top:16px}.opportunity-detail-main h1{margin:12px 0;font-size:clamp(1.6rem,3.5vw,2.6rem)}.opportunity-detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;color:var(--text-muted);font-size:.76rem}.opportunity-detail-meta span{display:flex;align-items:center;gap:5px}.opportunity-description{margin:22px 0;color:var(--text-secondary);font-size:.9rem;line-height:1.8}.opportunity-contact-card{height:max-content;position:sticky;top:88px}.opportunity-contact-actions{display:grid;gap:9px;margin:16px 0}.opportunity-contact-actions .btn{justify-content:center}.opportunity-contact-actions form button{width:100%}@media(max-width:760px){.opportunity-detail-grid{grid-template-columns:1fr}.opportunity-contact-card{position:static}}

/* ─────────────────────────────
   PROFILE-FIRST CV WORKSPACE
───────────────────────────── */
.career-workspace { max-width: 1120px; }
.career-profile-overview { overflow: hidden; margin-bottom: 24px; border: 1px solid var(--border-light); border-radius: 22px; background: #fff; box-shadow: 0 16px 45px rgba(27,69,44,.08); }
.career-profile-cover { position: relative; height: 92px; overflow: hidden; background: linear-gradient(130deg, #0d5830, #1a9a56 62%, #64d68c); }
.career-profile-cover span { position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); }
.career-profile-cover span:first-child { width: 190px; height: 190px; top: -115px; right: 8%; }
.career-profile-cover span:last-child { width: 110px; height: 110px; bottom: -75px; left: 23%; }
.career-profile-body { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: end; gap: 20px; padding: 0 24px 22px; }
.career-profile-avatar { width: 108px; height: 108px; margin-top: -44px; border: 4px solid #fff; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 8px 24px rgba(15,54,31,.16); }
.career-profile-copy { padding-top: 15px; }
.career-profile-label { color: var(--green-dark); font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.career-profile-copy h2 { margin: 3px 0 0; font-size: 1.55rem; letter-spacing: -.03em; }
.career-profile-copy > p { margin: 4px 0 8px; color: var(--text-secondary); }
.career-profile-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--text-muted); font-size: .72rem; }
.career-profile-meta span { display: inline-flex; align-items: center; gap: 5px; }
.career-profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.career-preview, .career-editor, .career-auto-apply-section { margin-top: 24px; scroll-margin-top: 86px; }
.career-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.career-section-header h2 { margin: 4px 0 0; font-size: 1.35rem; }
.career-preview-grid { margin-top: 0; }
.career-editor[hidden] { display: none; }
.career-editor .career-card { padding: 28px; }
.career-form-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.cv-collection { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-light); }
.cv-collection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.cv-collection-heading h3 { margin: 0; font-size: .94rem; }
.cv-collection-heading p { margin: 4px 0 0; color: var(--text-muted); font-size: .7rem; }
.cv-add-button { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 8px 11px; border: 1px solid #b9dec5; border-radius: 9px; background: #f3fbf6; color: var(--green-dark); cursor: pointer; font: inherit; font-size: .71rem; font-weight: 800; }
.cv-add-button:hover { border-color: var(--green); background: var(--green-light); }
.cv-entry-list { display: grid; gap: 12px; }
.cv-entry-card { position: relative; padding: 17px; border: 1px solid var(--border-light); border-radius: 14px; background: #fbfdfc; transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.cv-entry-card.is-compact { padding-top: 17px; }
.cv-entry-card.is-dragging,
.cv-skill-input.is-dragging { opacity: .7; border-color: var(--green); box-shadow: 0 12px 28px rgba(26, 103, 57, .16); }
.cv-entry-toolbar { display: flex; align-items: center; width: max-content; max-width: calc(100% - 74px); gap: 3px; margin: -4px 78px 12px 0; padding: 3px; border: 1px solid #dbe8df; border-radius: 9px; background: #fff; }
.cv-entry-toolbar.is-inline { max-width: none; margin: 0; padding: 2px; border: 0; border-right: 1px solid var(--border-light); border-radius: 0; background: #f7faf8; }
.cv-order-button { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #557064; cursor: pointer; }
.cv-order-button:hover { background: #eaf7ee; color: var(--green-dark); }
.cv-order-button:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 1px; }
.cv-order-button:disabled { opacity: .28; cursor: not-allowed; }
.cv-order-button.is-drag { cursor: grab; touch-action: none; }
.cv-order-button.is-drag:active { cursor: grabbing; }
.cv-order-position { display: grid; place-items: center; min-width: 20px; color: var(--text-muted); font-size: .62rem; font-weight: 850; user-select: none; }
.cv-remove-button { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 0; border-radius: 7px; background: #fff0f0; color: #a13232; cursor: pointer; font: inherit; font-size: .65rem; font-weight: 750; }
.cv-remove-button.is-icon { width: 28px; height: 28px; justify-content: center; padding: 0; }
.cv-entry-card > .job-form-grid:first-of-type { padding-right: 76px; }
.cv-entry-card.is-compact > .job-form-grid:first-of-type { padding-right: 20px; }
.cv-current-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 13px; color: var(--text-secondary); font-size: .74rem; font-weight: 700; }
.cv-current-toggle input { accent-color: var(--green); }
.cv-skill-editor { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-skill-input { display: grid; grid-template-columns: auto minmax(110px,1fr) auto; min-width: 300px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.cv-skill-input input { min-width: 0; padding: 8px 10px; border: 0; font: inherit; font-size: .75rem; }
.cv-skill-input input:focus { outline: none; }
.cv-skill-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(37,211,102,.1); }
.cv-skill-input > .cv-skill-remove { width: 32px; border: 0; border-left: 1px solid var(--border-light); background: #fff; color: var(--text-muted); cursor: pointer; }
.cv-skill-input > .cv-skill-remove:hover { background: #fff0f0; color: #a13232; }
.cv-collection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.career-auto-apply-section .auto-apply-card { max-width: none; border-color: #bfe5ca; }
.auto-apply-email-settings { display: grid; gap: 12px; padding: 18px; border: 1px solid #d7e8dc; border-radius: 14px; background: #fbfefc; }
.auto-apply-email-settings > legend { padding: 0 7px; color: var(--green-dark); font-size: .78rem; font-weight: 850; }
.auto-apply-email-settings > p, .auto-apply-email-settings > small { margin: 0; color: var(--text-muted); font-size: .7rem; line-height: 1.5; }
.auto-apply-email-settings .connected-mail-remove { justify-self: start; }
.auto-apply-email-settings .is-disabled { opacity: .55; }
.connected-mail-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #f1d59d; border-radius: 12px; background: #fff9ed; color: #71521d; font-size: .72rem; }
.connected-mail-warning > span { flex: 1 1 220px; }
.connected-mail-warning > a { color: #775300; font-weight: 800; text-decoration: underline; }
.auto-apply-country-field select { min-height: 150px; padding: 8px; }
.auto-apply-country-field option { padding: 5px 7px; border-radius: 5px; }
.career-auto-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.profile-timeline-item strong { display: block; font-size: .86rem; }
.profile-timeline-item small, .profile-timeline-item time { display: block; margin-top: 2px; color: var(--text-muted); font-size: .7rem; }
.profile-timeline-item time { color: var(--green-dark); font-weight: 750; }
.profile-timeline-item p { margin-top: 6px; }
.profile-simple-list li { display: grid; gap: 2px; }
.profile-simple-list li span, .profile-simple-list li small { color: var(--text-muted); font-size: .69rem; }

@media (max-width: 820px) {
    .career-profile-body { grid-template-columns: auto 1fr; padding-inline: 18px; }
    .career-profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .cv-collection-grid { grid-template-columns: 1fr; gap: 0; }
    .career-auto-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 580px) {
    .career-shell { padding-top: 28px; }
    .career-profile-cover { height: 78px; }
    .career-profile-body { display: block; padding: 0 14px 16px; }
    .career-profile-avatar { width: 88px; height: 88px; margin-top: -40px; }
    .career-profile-copy { padding-top: 8px; }
    .career-profile-actions { justify-content: stretch; margin-top: 14px; }
    .career-profile-actions .btn { flex: 1 1 auto; justify-content: center; }
    .career-section-header { align-items: stretch; flex-direction: column; }
    .career-section-header .btn { align-self: flex-start; }
    .career-editor .career-card { padding: 18px 13px 0; }
    .cv-collection-heading { align-items: stretch; flex-direction: column; }
    .cv-add-button { justify-content: center; }
    .cv-entry-card { padding: 12px; }
    .cv-entry-toolbar { max-width: calc(100% - 67px); margin-top: -2px; margin-right: 67px; }
    .cv-entry-card > .job-form-grid:first-of-type, .cv-entry-card.is-compact > .job-form-grid:first-of-type { padding-right: 0; }
    .cv-skill-input { flex: 1 1 100%; min-width: 0; }
    .career-form-actions { position: sticky; z-index: 6; bottom: 0; margin: 22px -13px 0; padding: 12px 13px; border-top: 1px solid var(--border-light); background: rgba(255,255,255,.96); box-shadow: 0 -10px 24px rgba(23,65,40,.08); backdrop-filter: blur(8px); }
    .career-form-actions .btn { flex: 1 1 130px; justify-content: center; }
}

/* ─────────────────────────────
   UNIFIED HOME MARKET CARDS
───────────────────────────── */
.home-marketplace { background: #f8fbf9; }
.home-market-section + .home-market-section { margin-top: 48px; }
.home-market-section .slider-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text); }
.home-market-section .slider-title i { color: var(--green-dark); }
.home-market-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.marketplace-home-card { display: flex; flex-direction: column; min-width: 0; min-height: 390px; padding: 18px; border: 1px solid #dfe9e2; border-radius: 19px; background: #fff; box-shadow: 0 10px 30px rgba(23,75,45,.055); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.marketplace-home-card:hover { transform: translateY(-3px); border-color: #b7ddc3; box-shadow: 0 17px 38px rgba(23,75,45,.1); }
.marketplace-card-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 25px; color: var(--green-dark); font-size: .64rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.marketplace-card-eyebrow > span { display: inline-flex; align-items: center; gap: 5px; }
.marketplace-card-state { padding: 4px 7px; border-radius: 999px; background: #edf6f0; color: #426050; letter-spacing: 0; text-transform: none; }
.marketplace-card-state.is-verified { background: #e7f7ed; color: #18633a; }
.marketplace-card-state.is-unverified { background: #fff4df; color: #8a590b; }
.marketplace-card-identity { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 70px; margin-top: 11px; }
.marketplace-card-avatar { width: 54px; height: 54px; border-radius: 15px; background: #edf8f1; object-fit: cover; }
.marketplace-card-avatar.is-icon { display: grid; place-items: center; color: var(--green-dark); font-size: 1.3rem; }
.marketplace-card-identity h3 { display: -webkit-box; overflow: hidden; margin: 0; color: var(--text); font-size: 1rem; line-height: 1.28; letter-spacing: -.02em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.marketplace-card-identity p { overflow: hidden; margin: 4px 0 0; color: var(--text-muted); font-size: .7rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-card-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 54px; margin-top: 13px; }
.marketplace-card-tags span { max-width: 100%; height: max-content; overflow: hidden; padding: 4px 8px; border-radius: 999px; background: #f0f6f2; color: #356047; font-size: .64rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-card-summary { display: -webkit-box; overflow: hidden; min-height: 59px; margin: 10px 0 13px; color: var(--text-secondary); font-size: .76rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.marketplace-card-location { display: flex; align-items: center; gap: 6px; min-height: 24px; margin-top: auto; color: var(--text-muted); font-size: .7rem; }
.marketplace-card-location i { color: var(--green-dark); }
.marketplace-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-height: 39px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border-light); }
.marketplace-card-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid var(--green); border-radius: 9px; background: var(--green); color: #fff; font-size: .69rem; font-weight: 800; text-decoration: none; }
.marketplace-card-button.is-secondary { border-color: var(--border); background: #fff; color: var(--text-secondary); }
.marketplace-card-button:hover { background: var(--green-dark); color: #fff; }
.home-market-empty { grid-column: 1 / -1; padding: 34px; border: 1px dashed var(--border); border-radius: 16px; background: #fff; color: var(--text-muted); text-align: center; }

@media (max-width: 960px) {
    .home-market-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .home-market-section + .home-market-section { margin-top: 36px; }
    .home-market-track { grid-template-columns: 1fr; }
    .marketplace-home-card { min-height: 0; }
}

/* ─────────────────────────────
   PREMIUM CV DOWNLOAD
───────────────────────────── */
.cv-premium-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 17px; margin: 24px 0; padding: 21px; scroll-margin-top: 86px; border: 1px solid #d8c58a; border-radius: 19px; background: linear-gradient(135deg, #fffcf1, #fff 55%, #f4fbf6); box-shadow: 0 12px 34px rgba(86,68,17,.07); }
.cv-premium-card.is-unlocked { border-color: #a9ddba; background: linear-gradient(135deg, #effaf3, #fff); }
.cv-premium-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: #f3e8bd; color: #8a6500; font-size: 1.35rem; }
.cv-premium-card.is-unlocked .cv-premium-icon { background: #dff4e6; color: var(--green-dark); }
.cv-premium-copy h2 { margin: 4px 0 4px; font-size: 1.08rem; }
.cv-premium-copy > p { margin: 0; color: var(--text-secondary); font-size: .77rem; }
.cv-premium-copy .marketplace-alert { margin-top: 14px; }

/* ─── Services & portfolio projects ─── */
.portfolio-page {
    min-height: 72vh;
    padding: clamp(34px, 6vw, 72px) 0 80px;
    background:
        radial-gradient(circle at 90% 0, rgba(37, 211, 102, .1), transparent 28rem),
        linear-gradient(180deg, #f7fcf9 0, #fff 460px);
}

.portfolio-page .container { position: relative; }
.portfolio-editor { max-width: 920px; }
.portfolio-editor > a,
.portfolio-heading a:not(.btn),
.portfolio-detail a:not(.btn) { color: var(--green-dark); font-weight: 750; text-decoration: none; }
.portfolio-editor > a:hover,
.portfolio-detail a:not(.btn):hover { text-decoration: underline; }

.portfolio-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.portfolio-heading > div { min-width: 0; }
.portfolio-heading > div > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.portfolio-heading h1,
.portfolio-editor > h1 {
    margin: 6px 0 8px;
    color: #173c28;
    font-size: clamp(2rem, 5vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -.045em;
}
.portfolio-heading p { max-width: 660px; color: var(--text-muted); }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 18px;
    margin: 20px 0 30px;
}
.portfolio-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid #dcebe1;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(24, 78, 48, .08);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.portfolio-card:hover { transform: translateY(-3px); border-color: #b8dec6; box-shadow: 0 20px 46px rgba(24, 78, 48, .13); }
.portfolio-card-media { display: block; overflow: hidden; height: 190px; background: linear-gradient(145deg, #e5f5ea, #f7fbf8); text-decoration: none; }
.portfolio-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.portfolio-card:hover .portfolio-card-media img { transform: scale(1.025); }
.portfolio-card-media > span { display: grid; place-items: center; align-content: center; gap: 7px; height: 100%; color: #6d8877; }
.portfolio-card-media > span i { font-size: 2rem; }
.portfolio-card-media > span small { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.portfolio-card-body { padding: 20px; }
.portfolio-card h2,
.portfolio-card h3 { margin: 9px 0 7px; color: #173c28; font-size: 1.08rem; line-height: 1.3; }
.portfolio-card h2 a,
.portfolio-card h3 a { color: inherit; text-decoration: none; }
.portfolio-card p { margin-bottom: 10px; color: var(--text-secondary); font-size: .88rem; }
.portfolio-card small { color: var(--text-muted); }
.portfolio-status {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    background: #e7f8ed;
    color: #1b7141;
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.portfolio-status.is-draft,
.portfolio-status.is-inactive { background: #eef1ef; color: #5f6e65; }
.portfolio-actions,
.portfolio-actions-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.portfolio-actions a:not(.btn) { color: var(--green-dark); font-size: .8rem; font-weight: 800; text-decoration: none; }
.portfolio-actions a:not(.btn):hover { text-decoration: underline; }
.portfolio-actions .btn { flex: 0 1 auto; }
.portfolio-actions-panel form { margin: 0; }

.portfolio-form {
    display: grid;
    gap: 22px;
    margin: 24px 0;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid #dbe9df;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 55px rgba(25, 77, 48, .1);
}
.portfolio-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.portfolio-form label { display: grid; align-content: start; gap: 7px; color: #284c37; font-size: .78rem; font-weight: 800; }
.portfolio-form input,
.portfolio-form select,
.portfolio-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #cddfd3;
    border-radius: 11px;
    outline: 0;
    background: #fbfefc;
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.portfolio-form textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.portfolio-form input:hover,
.portfolio-form select:hover,
.portfolio-form textarea:hover { border-color: #9fcbb0; background: #fff; }
.portfolio-form input:focus,
.portfolio-form select:focus,
.portfolio-form textarea:focus { border-color: var(--green-dark); background: #fff; box-shadow: 0 0 0 4px rgba(37, 211, 102, .12); }
.portfolio-form input[type="file"] { padding: 8px; color: var(--text-muted); }
.portfolio-form input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 11px;
    border: 0;
    border-radius: 8px;
    background: #e8f8ed;
    color: #19683b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.portfolio-form .portfolio-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
    border: 1px solid #dce9e0;
    border-radius: 11px;
    background: #f7fbf8;
    cursor: pointer;
}
.portfolio-form .portfolio-check input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--green-dark); }
.portfolio-form > .btn { justify-self: start; min-width: 150px; }
.portfolio-form .profile-privacy-note { margin: 0; padding: 12px 14px; border-radius: 11px; background: #fff8e7; color: #775a16; font-size: .78rem; }

.portfolio-detail {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(22px, 5vw, 48px);
    border: 1px solid #dfebe2;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(24, 72, 46, .1);
}
.portfolio-description { margin: 18px 0; color: #344b3d; font-size: 1rem; line-height: 1.8; white-space: pre-line; }
.portfolio-hero-image { display: block; width: 100%; max-height: 520px; margin-bottom: 24px; border-radius: 18px; object-fit: cover; }
.portfolio-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 30px; }
.portfolio-meta span { padding: 7px 11px; border-radius: 999px; background: #edf8f1; color: #246b43; font-size: .72rem; font-weight: 800; }
.portfolio-detail > h2 { margin: 30px 0 12px; color: #173c28; font-size: 1.2rem; }
.portfolio-detail blockquote { margin-top: 25px; padding: 20px; border-left: 4px solid var(--green); border-radius: 0 14px 14px 0; background: #f5fbf7; color: #355342; font-style: italic; }

.portfolio-rate-list { display: grid; gap: 9px; margin: 12px 0 25px; }
.portfolio-rate-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 15px;
    border: 1px solid #dce9e0;
    border-radius: 12px;
    background: #fbfefc;
}
.portfolio-rate-list span { display: grid; gap: 2px; }
.portfolio-rate-list .portfolio-rate-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.portfolio-rate-list small { color: var(--text-muted); }
.portfolio-rate-list a { color: var(--green-dark); font-weight: 800; text-decoration: none; }

.portfolio-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 20px 0 30px; }
.portfolio-media-grid article { overflow: hidden; padding: 0; border: 1px solid #dce9e0; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.portfolio-media-preview { overflow: hidden; min-height: 220px; background: #edf5ef; }
.portfolio-media-preview > a:not(.portfolio-file-preview) { display: block; height: 100%; }
.portfolio-media-preview img,
.portfolio-media-preview video { display: block; width: 100%; height: 250px; margin: 0; border: 0; border-radius: 0; object-fit: cover; background: #17221b; }
.portfolio-media-preview audio { display: block; width: calc(100% - 24px); margin: 18px 12px; }
.portfolio-media-preview.is-audio:has(img) { background: #f4f8f5; }
.portfolio-media-preview.is-audio img { height: 170px; }
.portfolio-file-preview { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 220px; padding: 24px; color: #245b38; text-align: center; text-decoration: none; }
.portfolio-file-preview > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(23,60,40,.09); font-size: 1.55rem; }
.portfolio-file-preview img { position: absolute; width: 100%; height: 100%; opacity: .2; }
.portfolio-file-preview strong,
.portfolio-file-preview small { position: relative; }
.portfolio-file-preview.is-missing { color: #8c5533; }
.portfolio-media-copy { display: grid; gap: 7px; padding: 15px; }
.portfolio-media-copy h3 { margin: 0; color: #173c28; font-size: .95rem; }
.portfolio-media-copy p { margin: 0; color: var(--text-muted); font-size: .78rem; line-height: 1.55; }
.portfolio-media-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.portfolio-media-badges span { padding: 3px 7px; border-radius: 999px; background: #eef3ef; color: #617269; font-size: .58rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.portfolio-media-badges .is-public { background: #e6f7eb; color: #176b3b; }
.portfolio-media-badges .is-private { background: #fff0df; color: #8c5518; }
.portfolio-media-badges .is-featured { background: #fff6cf; color: #7b5e00; }
.portfolio-media-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    gap: 6px;
    min-height: 36px;
    margin-top: 3px;
    padding: 7px 13px;
    border: 1px solid #cbded1;
    border-radius: 10px;
    background: #fff;
    color: var(--green-dark);
    font-size: .74rem;
    font-weight: 850;
    text-decoration: none;
}
.portfolio-media-edit:hover { border-color: var(--green); background: #f0faf3; transform: translateY(-1px); }
.transaction-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.portfolio-media-manager .profile-cv-empty { grid-column: 1 / -1; }
.portfolio-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 30px 0 8px; }
.portfolio-section-heading > div { display: flex; align-items: center; gap: 11px; }
.portfolio-section-heading > div > span,
.portfolio-upload-intro > span { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: #e7f7ec; color: #19703f; font-size: 1.05rem; }
.portfolio-section-heading h2,
.portfolio-upload-intro h2 { margin: 0; color: #173c28; font-size: 1.05rem; }
.portfolio-section-heading p,
.portfolio-upload-intro p { margin: 2px 0 0; color: var(--text-muted); font-size: .72rem; }
.portfolio-section-heading > small { color: var(--text-muted); font-size: .7rem; font-weight: 800; }
.portfolio-upload-intro { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #e2ece5; }
.portfolio-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.portfolio-form .profile-privacy-note { display: flex; align-items: flex-start; gap: 8px; }
.portfolio-form .portfolio-check > span { display: grid; gap: 2px; }
.portfolio-form .portfolio-check > span strong { color: #244b35; font-size: .78rem; }

@media (max-width: 700px) {
    .portfolio-page { padding: 28px 0 58px; }
    .portfolio-heading { flex-direction: column; gap: 16px; }
    .portfolio-heading .btn { width: 100%; }
    .portfolio-form-grid { grid-template-columns: 1fr; }
    .portfolio-form { gap: 17px; border-radius: 18px; }
    .portfolio-form > .btn { width: 100%; }
    .portfolio-detail { border-radius: 18px; }
    .portfolio-rate-list > div { align-items: flex-start; flex-direction: column; gap: 7px; }
    .portfolio-media-preview img,
    .portfolio-media-preview video { height: 220px; }
    .portfolio-section-heading { align-items: flex-start; }
}
.cv-premium-unlocked { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.cv-premium-unlocked > span { display: inline-flex; align-items: center; gap: 7px; color: var(--green-dark); font-size: .78rem; font-weight: 800; }
.cv-premium-pending { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 12px; border-radius: 11px; background: rgba(255,255,255,.75); color: var(--text-secondary); }
.cv-premium-pending > i { color: #9a730a; font-size: 1.15rem; }
.cv-premium-pending div { display: grid; gap: 2px; }
.cv-premium-pending strong { font-size: .78rem; }
.cv-premium-pending span { font-size: .69rem; }
.cv-premium-payment { margin-top: 15px; border: 1px solid #e3d6aa; border-radius: 12px; background: #fff; }
.cv-premium-payment summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 13px 14px; cursor: pointer; list-style: none; }
.cv-premium-payment summary::-webkit-details-marker { display: none; }
.cv-premium-payment summary span { font-size: .8rem; font-weight: 850; }
.cv-premium-payment summary small { color: var(--text-muted); font-size: .66rem; }
.cv-premium-payment summary i { grid-column: 2; grid-row: 1 / 3; color: #8a6500; }
.cv-premium-payment[open] summary i { transform: rotate(180deg); }
.cv-premium-form { padding: 16px; border-top: 1px solid #eee5c7; }
.cv-premium-recipient { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.cv-premium-recipient div { display: grid; gap: 2px; padding: 10px; border-radius: 9px; background: #f8faf8; }
.cv-premium-recipient span { color: var(--text-muted); font-size: .65rem; }
.cv-premium-recipient strong { font-size: .8rem; }
.cv-payment-method { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; }
.cv-payment-method:has(input:checked) { border-color: var(--green); background: var(--green-ultra-light); }
.cv-payment-method input { accent-color: var(--green); }
.cv-payment-method .payment-method-content { display: grid; gap: 1px; }
.cv-payment-method .payment-method-content strong { font-size: .75rem; }
.cv-payment-method .payment-method-content span { color: var(--text-muted); font-size: .68rem; }
.cv-premium-form input[type="file"], .cv-premium-form textarea { width: 100%; margin-top: 5px; padding: 9px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: .75rem; }

@media (max-width: 600px) {
    .cv-premium-card { grid-template-columns: 1fr; padding: 17px 14px; }
    .cv-premium-icon { width: 42px; height: 42px; }
    .cv-premium-unlocked { align-items: stretch; flex-direction: column; }
    .cv-premium-unlocked .btn { justify-content: center; }
    .cv-premium-recipient { grid-template-columns: 1fr; }
}

/* Production marketplace, pagination and admin analytics */
.opportunity-market-page,
.admin-dashboard-page { min-height: 72vh; padding: 38px 0 74px; background: #f7faf8; }
.opportunity-market-grid .marketplace-home-card { min-height: 510px; }
.marketplace-card-eyebrow time { color: var(--text-muted); font-size: .63rem; font-weight: 650; text-transform: none; letter-spacing: 0; }
.marketplace-card-skills { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 2px; }
.marketplace-card-skills span { padding: 4px 8px; border-radius: 999px; background: #eef7f1; color: #286342; font-size: .64rem; font-weight: 750; }
.marketplace-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; margin-top: 13px; color: var(--text-muted); font-size: .68rem; }
.marketplace-card-facts span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.marketplace-card-facts i { flex: 0 0 auto; color: var(--green-dark); }
.marketplace-card-facts .is-status { color: #93651d; font-weight: 750; }
.marketplace-home-card .job-owner-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border); }
.marketplace-home-card .job-owner-actions form { margin: 0; }
.marketplace-home-card .job-owner-edit,
.marketplace-home-card .job-owner-delete { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 35px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: .68rem; font-weight: 800; }
.marketplace-home-card .job-owner-delete { border-color: #efc6c6; color: #a12e2e; }
.marketplace-home-card .job-apply-action { margin: 9px 0 0; }
.marketplace-home-card .job-apply-button,
.marketplace-home-card .application-status { width: 100%; justify-content: center; }
.market-result-summary,
.admin-member-summary { margin: -12px 0 16px; color: var(--text-muted); font-size: .76rem; }
.market-result-summary strong,
.admin-member-summary strong { color: var(--text-primary); }

.opportunity-filter-form { grid-template-columns: repeat(4, minmax(135px, 1fr)); }
.opportunity-filter-form .market-filter-search { grid-column: span 2; }
.worker-filter-form { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.worker-filter-form .market-filter-search { grid-column: span 2; }
.admin-member-filters { grid-template-columns: repeat(5, minmax(135px, 1fr)); }
.admin-member-filters .market-filter-search { grid-column: span 2; }

.market-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.market-pager-pages { display: flex; align-items: center; gap: 5px; }
.market-pager-page,
.market-pager-arrow,
.market-pager-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text-secondary); font-size: .72rem; font-weight: 800; text-decoration: none; }
.market-pager-arrow { gap: 6px; }
.market-pager-page:hover,
.market-pager-arrow:hover,
.market-pager-page.is-current { border-color: var(--green); background: var(--green); color: #fff; }
.market-pager-arrow.is-disabled { opacity: .42; cursor: not-allowed; }
.market-pager-gap { min-width: 24px; padding: 0; border: 0; background: transparent; }
.market-pager i { font-size: .72rem; }
.market-pager.is-simple { justify-content: space-between; }

.job-edit-modal { width: min(920px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.job-edit-modal .job-modal-header { position: sticky; top: 0; z-index: 3; margin: 0; padding: 24px 28px 19px; border-bottom: 1px solid var(--border-light); background: #fff; }
.job-edit-modal .modal-close { z-index: 5; }
.job-edit-form { max-height: calc(100dvh - 130px); padding: 20px 28px 0; overflow-y: auto; background: #f8faf9; }
.job-edit-section { margin-bottom: 15px; padding: 19px; border: 1px solid var(--border-light); border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(24,72,43,.04); }
.job-edit-section h3 { margin: 0 0 14px; color: var(--green-dark); font-size: .88rem; }
.job-edit-section .form-group:last-child { margin-bottom: 0; }
.job-edit-actions { position: sticky; bottom: 0; z-index: 4; display: flex; justify-content: flex-end; gap: 9px; margin: 24px -28px 0; padding: 14px 28px; border-top: 1px solid var(--border); background: rgba(255,255,255,.97); box-shadow: 0 -10px 25px rgba(20,60,35,.08); }
.job-edit-actions .btn { min-width: 150px; justify-content: center; }

.admin-dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.admin-shell { display: block; }
.admin-main { min-width: 0; }
.admin-dashboard-header h1 { margin: 5px 0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; }
.admin-dashboard-header p { margin: 0; color: var(--text-muted); }
.admin-dashboard-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-metric-card { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 17px; border: 1px solid var(--border-light); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-metric-card > i { grid-row: 1 / 3; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; background: var(--green-ultra-light); color: var(--green-dark); }
.admin-metric-card span { color: var(--text-muted); font-size: .67rem; font-weight: 750; }
.admin-metric-card strong { font-size: 1.2rem; }
.admin-metric-card.is-revenue { border-color: #d9c98e; background: #fffdf5; }
.admin-currency-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 12px; padding: 12px 15px; border: 1px solid #ded19e; border-radius: 13px; background: #fffdf5; font-size: .72rem; }
.admin-currency-strip span { margin-right: auto; color: var(--text-muted); font-weight: 750; }
.admin-currency-strip strong { color: #6e5611; }
.admin-ops-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-top: 12px; padding: 13px 15px; border: 1px solid #b9ddc5; border-radius: 13px; background: #f0faf3; color: #285c3b; }
.admin-ops-banner > i { font-size: 1.05rem; }
.admin-ops-banner > div { display: grid; gap: 2px; }
.admin-ops-banner strong { font-size: .74rem; }
.admin-ops-banner span { font-size: .64rem; }
.admin-ops-banner code { padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,.75); font-size: .59rem; }
.admin-ops-banner.has-failures { border-color: #efbaba; background: #fff3f3; color: #922f2f; }
.admin-analytics-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); gap: 14px; margin-top: 14px; }
.admin-chart-card,
.admin-activity-card { padding: 20px; border: 1px solid var(--border-light); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-chart-card.is-wide { grid-row: span 2; }
.admin-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.admin-card-heading h2 { margin: 0; font-size: .96rem; }
.admin-card-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: .68rem; }
.admin-card-heading a { color: var(--green-dark); font-size: .7rem; font-weight: 800; text-decoration: none; }
.chart-legend { display: flex; gap: 12px; color: var(--text-muted); font-size: .65rem; }
.chart-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; background: var(--green); content: ''; }
.chart-legend .is-jobs::before { background: #e3a229; }
.admin-chart-summary { display: flex; flex-wrap: wrap; gap: 9px; margin: -5px 0 10px; }
.admin-chart-summary span { padding: 7px 10px; border-radius: 9px; background: #f4f8f5; color: var(--text-muted); font-size: .65rem; }
.admin-chart-summary strong { color: var(--text-primary); }
.admin-line-chart { width: 100%; overflow-x: auto; border: 1px solid var(--border-light); border-radius: 13px; background: linear-gradient(180deg, #fbfdfb, #fff); }
.admin-line-chart svg { display: block; width: 100%; min-width: 720px; height: auto; }
.admin-chart-grid-line { stroke: #dfe8e2; stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.admin-chart-line { fill: none; stroke: var(--green-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.admin-chart-line.is-jobs { stroke: #d88b12; stroke-dasharray: 7 5; }
.admin-chart-point { fill: #fff; stroke: var(--green-dark); stroke-width: 3; vector-effect: non-scaling-stroke; }
.admin-chart-point.is-jobs { fill: #fff9ec; stroke: #d88b12; }
.admin-chart-x-label,
.admin-chart-y-label { fill: var(--text-muted); font-size: 12px; font-weight: 700; }
.admin-revenue-chart { display: grid; gap: 8px; }
.admin-revenue-chart div { display: grid; grid-template-columns: 30px 1fr 64px; align-items: center; gap: 7px; font-size: .61rem; }
.admin-revenue-chart i { display: block; min-width: 2px; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #6bc78a, var(--green-dark)); }
.admin-revenue-chart strong { text-align: right; }
.admin-market-list { display: grid; gap: 8px; }
.admin-market-list div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); font-size: .72rem; }
.admin-market-list div > span { display: grid; flex: 1; gap: 4px; }
.admin-market-list div i { display: block; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #8cdaa6, var(--green-dark)); }
.admin-activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.admin-activity-card > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-light); color: inherit; text-decoration: none; }
.admin-activity-card > a span { display: grid; gap: 2px; min-width: 0; }
.admin-activity-card > a strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity-card > a small,
.admin-activity-card > a time { color: var(--text-muted); font-size: .62rem; }
.admin-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.admin-member-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-light); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-member-card.is-deactivated { opacity: .76; background: #fafafa; }
.admin-member-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 16px; border-bottom: 1px solid var(--border-light); }
.admin-member-card > header img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.admin-member-card > header h2 { overflow: hidden; margin: 0 0 3px; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-member-card > header div > span { color: var(--text-muted); font-size: .64rem; }
.admin-member-state { padding: 4px 7px; border-radius: 999px; font-size: .58rem; font-weight: 850; }
.admin-member-state.is-on { background: #e7f7ec; color: #25683e; }
.admin-member-state.is-off { background: #f3eded; color: #8e3d3d; }
.admin-member-contact { display: grid; gap: 7px; padding: 14px 16px; color: var(--text-secondary); font-size: .68rem; }
.admin-member-contact span { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.admin-member-contact i { flex: 0 0 16px; color: var(--green-dark); }
.admin-member-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 13px; }
.admin-member-badges span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; background: #f1f4f2; color: var(--text-muted); font-size: .59rem; font-weight: 700; }
.admin-member-badges span.is-good { background: #e8f7ed; color: #286a40; }
.admin-member-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.admin-member-stats div { display: grid; gap: 1px; padding: 10px; text-align: center; }
.admin-member-stats div + div { border-left: 1px solid var(--border-light); }
.admin-member-stats strong { font-size: .84rem; }
.admin-member-stats span { color: var(--text-muted); font-size: .57rem; }
.admin-member-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 12px 16px; }
.admin-member-card > footer .btn { min-height: 32px; padding: 6px 9px; font-size: .64rem; }
.admin-member-card > footer small { margin-left: auto; color: var(--text-muted); font-size: .58rem; }
.admin-members-empty { grid-column: 1 / -1; padding: 46px 20px; border: 1px dashed var(--border); border-radius: 16px; background: #fff; text-align: center; }
.admin-members-empty i { color: var(--green-dark); font-size: 1.8rem; }
.admin-members-empty h2 { margin: 8px 0 3px; font-size: 1rem; }
.admin-members-empty p { margin: 0; color: var(--text-muted); font-size: .72rem; }

@media (max-width: 980px) {
    .opportunity-filter-form,
    .worker-filter-form,
    .admin-member-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-analytics-grid { grid-template-columns: 1fr; }
    .admin-chart-card.is-wide { grid-row: auto; }
    .admin-activity-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .opportunity-filter-form,
    .worker-filter-form,
    .admin-member-filters { grid-template-columns: 1fr; }
    .opportunity-filter-form .market-filter-search,
    .worker-filter-form .market-filter-search,
    .admin-member-filters .market-filter-search { grid-column: auto; }
    .marketplace-card-facts { grid-template-columns: 1fr; }
    .market-pager { gap: 5px; }
    .market-pager-arrow span { display: none; }
    .market-pager-page { display: none; }
    .market-pager-page.is-current,
    .market-pager-pages .market-pager-page:first-of-type,
    .market-pager-pages .market-pager-page:last-of-type { display: inline-flex; }
    .market-pager-gap { display: none; }
    .job-edit-modal { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); }
    .job-edit-modal .job-modal-header { padding: 20px 17px 15px; }
    .job-edit-form { padding: 14px 12px 0; }
    .job-edit-section { padding: 15px 12px; }
    .job-edit-actions { bottom: 0; margin: 18px -12px 0; padding: 11px 12px; }
    .job-edit-actions .btn { min-width: 0; flex: 1; }
    .admin-dashboard-header { align-items: flex-start; flex-direction: column; }
    .admin-metric-grid { grid-template-columns: 1fr; }
    .admin-line-chart svg { min-width: 640px; }
    .admin-member-grid { grid-template-columns: 1fr; }
    .admin-member-card > header { grid-template-columns: auto minmax(0, 1fr); }
    .admin-member-state { grid-column: 1 / -1; width: max-content; }
    .admin-ops-banner { grid-template-columns: auto 1fr; }
    .admin-ops-banner code { grid-column: 1 / -1; overflow-x: auto; }
}



/* ─── Premium Admin Charts ─── */

.admin-line-chart {
    position: relative;
    width: 100%;
    overflow-x: auto;
    padding: 4px;
    border: 1px solid rgba(37, 211, 102, 0.12);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(37, 211, 102, 0.10), transparent 34%),
        linear-gradient(180deg, #fbfdfb 0%, #ffffff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.admin-line-chart svg {
    display: block;
    width: 100%;
    min-width: 760px;
    height: auto;
    overflow: visible;
}

.admin-chart-grid-line {
    stroke: #dfe8e2;
    stroke-width: 1;
    stroke-dasharray: 5 5;
    vector-effect: non-scaling-stroke;
}

.admin-chart-y-label,
.admin-chart-x-label {
    fill: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.admin-chart-area {
    pointer-events: none;
}

.admin-chart-area.is-members {
    fill: url(#membersArea);
}

.admin-chart-area.is-jobs {
    fill: url(#jobsArea);
}

.admin-chart-line {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 8px 10px rgba(29, 168, 81, 0.12));
}

.admin-chart-line.is-members {
    stroke: var(--green-dark);
}

.admin-chart-line.is-jobs {
    stroke: #d88b12;
    stroke-dasharray: none;
    filter: drop-shadow(0 8px 10px rgba(216, 139, 18, 0.12));
}

.admin-chart-hitbox {
    fill: transparent;
    cursor: pointer;
}

.admin-chart-point {
    fill: #ffffff;
    stroke: var(--green-dark);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    transition: r .18s ease, filter .18s ease, transform .18s ease;
}

.admin-chart-point.is-jobs {
    fill: #fff9ec;
    stroke: #d88b12;
}

.admin-chart-hotspot {
    outline: none;
}

.admin-chart-hotspot:hover .admin-chart-point,
.admin-chart-hotspot:focus .admin-chart-point {
    r: 7;
    filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.22));
}

.admin-chart-tooltip {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
}

.admin-chart-hotspot:hover .admin-chart-tooltip,
.admin-chart-hotspot:focus .admin-chart-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.admin-chart-tooltip-card {
    display: grid;
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    color: var(--text);
    font-family: var(--font);
    backdrop-filter: blur(10px);
}

.admin-chart-tooltip-card strong {
    font-size: .72rem;
    line-height: 1.1;
}

.admin-chart-tooltip-card span {
    color: var(--text);
    font-size: .68rem;
    font-weight: 800;
}

.admin-chart-tooltip-card em {
    color: var(--text-muted);
    font-size: .58rem;
    font-style: normal;
    font-weight: 700;
}

/* ─── Vertical Bar Chart ─── */

.admin-bar-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(30px, 1fr));
    align-items: end;
    gap: 9px;
    min-height: 232px;
    overflow-x: auto;
    padding: 18px 12px 12px;
    border: 1px solid rgba(37, 211, 102, 0.12);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(37, 211, 102, 0.10), transparent 34%),
        linear-gradient(180deg, #fbfdfb 0%, #ffffff 100%);
}

.admin-bar-item {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
    min-width: 34px;
    height: 196px;
    outline: none;
}

.admin-bar-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 160px;
    padding: 0 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f4faf6 0%, #eef7f1 100%);
    overflow: visible;
}

.admin-bar-track i {
    display: block;
    width: 72%;
    min-height: 4px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
    box-shadow: 0 8px 18px rgba(29, 168, 81, 0.22);
    transform-origin: bottom;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.admin-bar-item:hover .admin-bar-track i,
.admin-bar-item:focus .admin-bar-track i {
    transform: scaleY(1.05);
    filter: brightness(1.03);
    box-shadow: 0 12px 24px rgba(29, 168, 81, 0.28);
}

.admin-bar-item small {
    color: var(--text-muted);
    font-size: .6rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.admin-bar-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    z-index: 4;
    display: grid;
    gap: 2px;
    min-width: 124px;
    padding: 8px 10px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.15);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity .18s ease, transform .18s ease;
    backdrop-filter: blur(10px);
}

.admin-bar-tooltip::after {
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-right: 1px solid rgba(226, 232, 240, 0.95);
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    transform: translateX(-50%) rotate(45deg);
    content: '';
}

.admin-bar-tooltip strong {
    color: var(--text);
    font-size: .68rem;
    line-height: 1.1;
}

.admin-bar-tooltip em {
    color: var(--text-muted);
    font-size: .62rem;
    font-style: normal;
    font-weight: 750;
}

.admin-bar-item:hover .admin-bar-tooltip,
.admin-bar-item:focus .admin-bar-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 680px) {
    .admin-line-chart svg {
        min-width: 820px;
    }

    .admin-bar-chart {
        grid-template-columns: repeat(12, 38px);
    }
}
/* Private application document vault */
.preparation-document-card { display: grid; gap: 1.25rem; }
.career-readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.career-readiness-item { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--border, #dfe8e2); border-radius: 14px; background: #f8fbf9; }
.career-readiness-item i { font-size: 1.2rem; }
.career-readiness-item span { display: grid; gap: .2rem; }
.career-readiness-item small { color: var(--text-muted, #66736b); }
.career-readiness-item.is-ready i { color: #178447; }
.career-readiness-item.is-missing i { color: #b96a12; }
.career-document-upload { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.career-document-upload .form-group:nth-child(3) { grid-column: 1 / -1; }
.career-document-upload .btn { justify-self: start; }
.career-document-list { display: grid; gap: .65rem; }
.career-document-list article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px solid var(--border, #dfe8e2); border-radius: 12px; }
.career-document-list article > div:first-child { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.career-document-list article span { display: grid; min-width: 0; }
.career-document-list article small { color: var(--text-muted, #66736b); overflow-wrap: anywhere; }
.career-document-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.career-document-actions form { margin: 0; }
@media (max-width: 700px) {
    .career-readiness-grid, .career-document-upload { grid-template-columns: 1fr; }
    .career-document-upload .form-group:nth-child(3) { grid-column: auto; }
    .career-document-list article { align-items: flex-start; flex-direction: column; }
}

/* ─── Payment operations console ─── */
.payment-settings-page {
    --payment-ink: #173224;
    --payment-muted: #64736a;
    --payment-line: #dfe8e2;
    --payment-soft: #f5f8f6;
    --payment-accent: #177c45;
    padding-top: 0;
    background:
        radial-gradient(circle at 88% 3%, rgba(37, 211, 102, .08), transparent 25rem),
        #f6f9f7;
}

.payment-settings-page .admin-shell { max-width: 1240px; }

.payment-settings-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin: 0 -40px 1.25rem;
    padding: 3rem 40px 2.2rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(32, 88, 55, .09);
    background:
        radial-gradient(circle at 12% 10%, rgba(37, 211, 102, .13), transparent 17rem),
        linear-gradient(120deg, #fafffb 0%, #eff8f2 100%);
}

.payment-settings-hero-copy { max-width: 720px; }

.payment-settings-back {
    display: flex;
    align-items: center;
    width: max-content;
    gap: .45rem;
    margin-bottom: 1.5rem;
    color: #547061;
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
}

.payment-settings-back:hover { color: var(--payment-accent); }

.payment-settings-hero h1 {
    margin: .3rem 0 .55rem;
    color: var(--payment-ink);
    font-size: clamp(2rem, 5vw, 3.35rem);
    letter-spacing: -.055em;
    line-height: 1;
}

.payment-settings-hero p {
    max-width: 650px;
    margin: 0;
    color: var(--payment-muted);
    font-size: .92rem;
    line-height: 1.7;
}

.payment-settings-hero-status {
    display: flex;
    align-items: center;
    min-width: 218px;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(33, 107, 62, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(32, 77, 49, .07);
    backdrop-filter: blur(8px);
}

.payment-status-light {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #98a49d;
    box-shadow: 0 0 0 6px rgba(152, 164, 157, .12);
}

.payment-status-light.is-on {
    background: #24b35f;
    box-shadow: 0 0 0 6px rgba(36, 179, 95, .13);
}

.payment-settings-hero-status div { display: grid; gap: .05rem; }
.payment-settings-hero-status small { color: var(--payment-muted); font-size: .61rem; font-weight: 750; }
.payment-settings-hero-status strong { color: var(--payment-ink); font-size: .78rem; }

.payment-settings-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: 1rem;
    border-radius: 14px;
}

.payment-settings-alert > i { margin-top: .1rem; }
.payment-settings-alert ul { margin: .35rem 0 0 1rem; }

.payment-operations-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.payment-overview-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--payment-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(21, 61, 38, .035);
}

.payment-overview-card.has-attention { border-color: #ead7a0; background: #fffdf7; }

.payment-overview-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #e8f6ed;
    color: #227b47;
    font-size: 1rem;
}

.payment-overview-icon.is-blue { background: #eaf2fb; color: #346eaa; }
.payment-overview-icon.is-purple { background: #f0ecfb; color: #7453a8; }
.payment-overview-icon.is-amber { background: #fff3d9; color: #a46c0b; }
.payment-overview-card > div { display: grid; min-width: 0; gap: .05rem; }
.payment-overview-card small { color: var(--payment-muted); font-size: .6rem; font-weight: 750; }
.payment-overview-card strong { overflow: hidden; color: var(--payment-ink); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.payment-overview-card > a { color: #8b5a06; font-size: .6rem; font-weight: 850; text-decoration: none; }
.payment-overview-detail { color: var(--payment-muted); font-size: .61rem; font-weight: 750; white-space: nowrap; }

.payment-overview-state,
.payment-review-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .48rem;
    border-radius: 999px;
    font-size: .57rem;
    font-weight: 850;
    line-height: 1;
}

.payment-overview-state.is-live { background: #e4f6ea; color: #1e7741; }
.payment-overview-state.is-paused { background: #f0f2f1; color: #6b756f; }

.payment-settings-section {
    margin-top: 1rem;
    padding: clamp(1.1rem, 3vw, 1.55rem);
    border: 1px solid var(--payment-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 32px rgba(26, 65, 42, .045);
}

.payment-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.payment-section-heading > div:first-child { max-width: 720px; }
.payment-section-heading h2 { margin: .3rem 0 .2rem; color: var(--payment-ink); font-size: 1.12rem; letter-spacing: -.025em; }
.payment-section-heading p { margin: 0; color: var(--payment-muted); font-size: .71rem; line-height: 1.65; }

.payment-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--payment-accent);
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.payment-section-number {
    color: #dfe8e2;
    font-size: 1.7rem;
    font-weight: 850;
    letter-spacing: -.06em;
    line-height: 1;
}

.payment-section-heading-actions { display: flex; align-items: center; gap: .75rem; }
.payment-section-heading-actions > span:first-child { padding: .3rem .5rem; border-radius: 999px; background: #e8f6ed; color: #247a46; font-size: .6rem; font-weight: 850; }

.payment-control-form {
    display: grid;
    grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
    gap: 1rem;
}

.payment-fee-control,
.payment-rail-controls {
    padding: 1.1rem;
    border: 1px solid var(--payment-line);
    border-radius: 15px;
    background: var(--payment-soft);
}

.payment-fee-control > label { display: block; color: var(--payment-ink); font-size: .78rem; font-weight: 850; }
.payment-fee-control > p { margin: .25rem 0 1.1rem; color: var(--payment-muted); font-size: .65rem; line-height: 1.55; }

.payment-percent-input {
    display: flex;
    align-items: center;
    width: min(100%, 230px);
    overflow: hidden;
    border: 1px solid #cfdcd3;
    border-radius: 12px;
    background: #fff;
}

.payment-percent-input:focus-within { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(37, 211, 102, .11); }
.payment-percent-input input { width: 100%; min-width: 0; padding: .8rem .85rem; border: 0; outline: 0; background: transparent; color: var(--payment-ink); font: inherit; font-size: 1rem; font-weight: 800; }
.payment-percent-input span { padding: .8rem .85rem; border-left: 1px solid var(--payment-line); color: var(--payment-muted); font-size: .75rem; font-weight: 800; }

.payment-rail-controls { display: grid; gap: .6rem; padding: .65rem; }

.payment-toggle-row,
.payment-gateway-switches label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .75rem;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
}

.payment-toggle-row.is-locked { cursor: not-allowed; opacity: .68; }

.payment-toggle-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #edf7f0;
    color: var(--payment-accent);
}

.payment-toggle-copy,
.payment-gateway-switches label > span:first-child { display: grid; gap: .05rem; }
.payment-toggle-copy strong,
.payment-gateway-switches strong { color: var(--payment-ink); font-size: .7rem; }
.payment-toggle-copy small,
.payment-gateway-switches small { color: var(--payment-muted); font-size: .59rem; line-height: 1.45; }

.payment-toggle-row input,
.payment-gateway-switches input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.payment-switch {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #c9d1cc;
    transition: .2s ease;
}

.payment-switch::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
    content: '';
    transition: .2s ease;
}

input:checked + .payment-switch { background: var(--green-dark); }
input:checked + .payment-switch::after { transform: translateX(16px); }
input:focus-visible + .payment-switch { outline: 3px solid rgba(37, 211, 102, .25); outline-offset: 2px; }
input:disabled + .payment-switch { opacity: .55; }

.payment-form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--payment-line);
}

.payment-form-actions > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--payment-muted);
    font-size: .62rem;
}

.payment-form-actions .btn,
.payment-card-save,
.payment-review-actions .btn {
    min-width: 0;
    padding: .68rem 1rem;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 800;
}

.payment-gateway-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.payment-gateway-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--payment-line);
    border-radius: 16px;
    background: #fbfcfb;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.payment-gateway-card.is-active { border-color: #bcdcc7; box-shadow: inset 0 3px 0 #42b66b; }

.payment-gateway-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
}

.payment-gateway-mark {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 11px;
    background: linear-gradient(145deg, #1c7744, #29b362);
    color: #fff;
    font-size: .85rem;
    font-weight: 850;
    box-shadow: 0 6px 14px rgba(31, 130, 73, .18);
}

.payment-gateway-card > header div { display: grid; min-width: 0; gap: .05rem; }
.payment-gateway-card h3 { margin: 0; color: var(--payment-ink); font-size: .84rem; }
.payment-gateway-card > header div > span { color: var(--payment-muted); font-family: monospace; font-size: .57rem; text-transform: uppercase; }

.payment-health-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .32rem .48rem;
    border-radius: 999px;
    font-size: .56rem;
    font-weight: 850;
    white-space: nowrap;
}

.payment-health-badge.is-ready { background: #e4f6ea; color: #1e7741; }
.payment-health-badge.has-issues { background: #fff0dd; color: #965a08; }
.payment-gateway-description { min-height: 2.8em; margin: .7rem 0; color: var(--payment-muted); font-size: .63rem; line-height: 1.45; }

.payment-gateway-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .65rem;
    padding: .55rem .65rem;
    border-radius: 9px;
    background: #eef3f0;
}

.payment-gateway-mode span { color: var(--payment-muted); font-size: .59rem; }
.payment-gateway-mode strong { font-size: .59rem; }
.payment-gateway-mode strong.is-test { color: #946315; }
.payment-gateway-mode strong.is-live { color: #1f7540; }

.payment-gateway-switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin-bottom: .7rem;
}

.payment-gateway-switches label {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    padding: .65rem;
    border: 1px solid var(--payment-line);
}

.payment-gateway-switches .payment-switch { width: 34px; height: 20px; }
.payment-gateway-switches .payment-switch::after { width: 14px; height: 14px; }
.payment-gateway-switches input:checked + .payment-switch::after { transform: translateX(14px); }

.payment-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(110px, .6fr);
    gap: .6rem;
}

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

.payment-field-grid label,
.payment-textarea-field,
.payment-reject-control label {
    display: grid;
    align-content: start;
    gap: .3rem;
    color: var(--payment-ink);
    font-size: .61rem;
    font-weight: 800;
}

.payment-field-grid input,
.payment-field-grid select,
.payment-textarea-field textarea,
.payment-reject-control textarea {
    width: 100%;
    min-width: 0;
    padding: .65rem .7rem;
    border: 1px solid #d4ded7;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: var(--payment-ink);
    font: inherit;
    font-size: .68rem;
}

.payment-field-grid input:focus,
.payment-field-grid select:focus,
.payment-textarea-field textarea:focus,
.payment-reject-control textarea:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(37, 211, 102, .1); }
.payment-field-grid small { color: var(--payment-muted); font-size: .54rem; font-weight: 500; line-height: 1.4; }

.payment-readiness-panel {
    margin-top: .7rem;
    border: 1px solid #efd9b4;
    border-radius: 10px;
    background: #fffaf1;
}

.payment-readiness-panel summary,
.payment-add-account summary,
.payment-account-card > summary {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.payment-readiness-panel summary::-webkit-details-marker,
.payment-add-account summary::-webkit-details-marker,
.payment-account-card > summary::-webkit-details-marker,
.payment-reject-control > summary::-webkit-details-marker { display: none; }

.payment-readiness-panel summary {
    justify-content: space-between;
    padding: .6rem .7rem;
    color: #8d5c15;
    font-size: .59rem;
    font-weight: 800;
}

.payment-readiness-panel summary span { display: inline-flex; align-items: center; gap: .35rem; }
.payment-readiness-panel[open] summary > i { transform: rotate(180deg); }
.payment-readiness-panel ul { display: grid; gap: .35rem; margin: 0; padding: 0 .8rem .7rem 1.7rem; color: #775a2e; font-size: .58rem; line-height: 1.5; }

.payment-readiness-confirmed {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .7rem;
    padding: .6rem .7rem;
    border-radius: 9px;
    background: #eaf7ee;
    color: #287746;
    font-size: .59rem;
    font-weight: 750;
}

.payment-card-save { justify-content: space-between; width: 100%; margin-top: .7rem; }

.payment-add-account {
    margin-bottom: .8rem;
    border: 1px dashed #b9d4c3;
    border-radius: 14px;
    background: #f8fcf9;
}

.payment-add-account > summary,
.payment-account-card > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .7rem;
    padding: .8rem .9rem;
}

.payment-add-account > summary > span:first-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #e4f6ea;
    color: #217947;
}

.payment-add-account > summary > div,
.payment-account-card > summary > div { display: grid; gap: .05rem; }
.payment-add-account > summary strong,
.payment-account-card > summary strong { color: var(--payment-ink); font-size: .71rem; }
.payment-add-account > summary small,
.payment-account-card > summary small { color: var(--payment-muted); font-size: .58rem; }
.payment-add-account[open] > summary > i:last-child,
.payment-account-card[open] > summary > i:last-child { transform: rotate(180deg); }

.payment-account-form {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border-top: 1px solid var(--payment-line);
}

.payment-textarea-field textarea { resize: vertical; }

.payment-inline-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--payment-muted);
    font-size: .62rem;
    font-weight: 700;
}

.payment-inline-check input { width: 16px; height: 16px; accent-color: var(--green-dark); }
.payment-account-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

.payment-account-card {
    min-width: 0;
    border: 1px solid var(--payment-line);
    border-radius: 14px;
    background: #fff;
}

.payment-account-card[open] { grid-column: 1 / -1; border-color: #bfd8c7; }
.payment-account-card > summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }

.payment-account-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: #edf3ef;
    color: #416650;
}

.payment-review-list { display: grid; gap: .65rem; }

.payment-review-card {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) minmax(300px, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .85rem;
    border: 1px solid var(--payment-line);
    border-radius: 14px;
    background: #fbfcfb;
}

.payment-review-card.is-pending { border-left: 3px solid #dfa42e; background: #fffdfa; }
.payment-review-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; }

.payment-review-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #edf3ef;
    color: #426951;
}

.payment-review-card > header div { display: grid; min-width: 0; }
.payment-review-card > header div span { overflow: hidden; color: var(--payment-muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.payment-review-card > header strong { color: var(--payment-ink); font-size: .76rem; }
.payment-review-status.is-pending { background: #fff0d4; color: #94600b; }
.payment-review-status.is-approved { background: #e4f6ea; color: #1e7741; }
.payment-review-status.is-rejected { background: #fde9e9; color: #963d3d; }

.payment-review-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin: 0;
}

.payment-review-card dl div { display: grid; min-width: 0; gap: .08rem; }
.payment-review-card dt { color: var(--payment-muted); font-size: .53rem; font-weight: 700; }
.payment-review-card dd { overflow: hidden; margin: 0; color: var(--payment-ink); font-size: .61rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.payment-review-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }
.payment-review-actions form { margin: 0; }

.payment-settings-page .btn-danger {
    border: 1px solid #ebc0c0;
    background: #fff5f5;
    color: #9c3838;
    box-shadow: none;
}

.payment-settings-page .btn-danger:hover { border-color: #d97979; background: #fdeaea; }

.payment-reject-control { position: relative; }
.payment-reject-control > summary { list-style: none; }

.payment-reject-control > form {
    position: absolute;
    z-index: 5;
    right: 0;
    top: calc(100% + .5rem);
    display: grid;
    width: min(320px, calc(100vw - 3rem));
    gap: .65rem;
    padding: .8rem;
    border: 1px solid #ebc7c7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(64, 25, 25, .14);
}

.payment-reject-control > form .btn { width: 100%; }

.payment-empty-state {
    grid-column: 1 / -1;
    padding: 2.4rem 1rem;
    border: 1px dashed #cbdad0;
    border-radius: 14px;
    background: #fafcfb;
    text-align: center;
}

.payment-empty-state.is-compact { padding: 1.6rem 1rem; }
.payment-empty-state > i { color: #5c8c6e; font-size: 1.5rem; }
.payment-empty-state h3 { margin: .45rem 0 .15rem; color: var(--payment-ink); font-size: .8rem; }
.payment-empty-state p { margin: 0; color: var(--payment-muted); font-size: .63rem; }

@media (max-width: 1040px) {
    .payment-operations-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-review-card { grid-template-columns: 1fr 1.2fr; }
    .payment-review-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: .7rem; border-top: 1px solid var(--payment-line); }
}

@media (max-width: 780px) {
    .payment-settings-hero { align-items: flex-start; flex-direction: column; margin-inline: -28px; padding-inline: 28px; }
    .payment-settings-hero-status { width: 100%; }
    .payment-control-form,
    .payment-gateway-grid,
    .payment-account-list { grid-template-columns: 1fr; }
    .payment-account-card[open] { grid-column: auto; }
    .payment-field-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .payment-settings-page .admin-shell { padding-inline: 14px; }
    .payment-settings-hero { margin-inline: -14px; padding: 2rem 14px 1.5rem; }
    .payment-settings-back { margin-bottom: 1rem; }
    .payment-operations-overview { grid-template-columns: 1fr; }
    .payment-section-heading { gap: .7rem; }
    .payment-section-number { font-size: 1.3rem; }
    .payment-control-form,
    .payment-gateway-switches,
    .payment-field-grid,
    .payment-field-grid.is-three,
    .payment-review-card,
    .payment-review-card dl { grid-template-columns: 1fr; }
    .payment-gateway-card > header { grid-template-columns: auto minmax(0, 1fr); }
    .payment-health-badge { grid-column: 1 / -1; width: max-content; }
    .payment-form-actions { align-items: stretch; flex-direction: column; }
    .payment-form-actions .btn { width: 100%; }
    .payment-account-card > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
    .payment-account-card > summary .payment-overview-state { grid-column: 2; width: max-content; }
    .payment-account-card > summary > i:last-child { grid-column: 3; grid-row: 1 / 3; }
    .payment-review-card > header { grid-template-columns: auto minmax(0, 1fr); }
    .payment-review-status { grid-column: 2; width: max-content; }
    .payment-review-actions { align-items: stretch; flex-direction: column; }
    .payment-review-actions .btn,
    .payment-review-actions form,
    .payment-reject-control { width: 100%; }
    .payment-reject-control > form { position: static; width: 100%; margin-top: .5rem; box-shadow: none; }
}

/* ─── Unified admin command centre ─── */
.admin-console-layout {
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
    align-items: start;
    gap: 1.15rem;
    max-width: 1380px;
}

.admin-console-sidebar {
    position: sticky;
    top: 78px;
    display: flex;
    min-height: calc(100vh - 105px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dce7df;
    border-radius: 18px;
    background: linear-gradient(180deg, #173c28 0%, #102f20 100%);
    box-shadow: 0 16px 38px rgba(18, 55, 34, .13);
}

.admin-console-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: #fff;
    text-decoration: none;
}

.admin-console-brand > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #25d366;
    color: #0d3b22;
    font-size: 1rem;
}

.admin-console-brand > .admin-console-brand-image-wrap {
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #fff;
    box-shadow: 0 5px 13px rgba(0, 0, 0, .14);
}

.admin-console-brand-image-wrap img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.admin-console-brand > div,
.admin-console-sidebar-footer > div { display: grid; min-width: 0; gap: .05rem; }
.admin-console-brand strong { font-size: .7rem; }
.admin-console-brand small { color: rgba(255, 255, 255, .58); font-size: .54rem; }
.admin-console-sidebar nav { display: grid; gap: .22rem; padding: .85rem .65rem; }

.admin-console-nav-label {
    padding: .25rem .5rem .4rem;
    color: rgba(255, 255, 255, .38);
    font-size: .5rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.admin-console-sidebar nav a {
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-height: 38px;
    padding: .55rem .65rem;
    border-radius: 9px;
    color: rgba(255, 255, 255, .7);
    font-size: .62rem;
    font-weight: 750;
    text-decoration: none;
    transition: .18s ease;
}

.admin-console-sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-console-sidebar nav a.is-active { background: rgba(37, 211, 102, .16); color: #69ee9a; box-shadow: inset 2px 0 0 #25d366; }
.admin-console-sidebar nav a > i:first-child { font-size: .83rem; text-align: center; }
.admin-console-sidebar nav a > i:last-child { font-size: .55rem; }

.admin-console-sidebar-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    color: #fff;
}

.admin-console-admin-avatar {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    font-size: .68rem;
    font-weight: 850;
}

.admin-console-sidebar-footer strong { overflow: hidden; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-console-sidebar-footer small { color: rgba(255, 255, 255, .47); font-size: .51rem; }
.admin-console-sidebar-footer > a { color: rgba(255, 255, 255, .58); }
.admin-console-mobile-nav { display: none; }

.admin-console-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: .35rem .1rem .7rem;
}

.admin-console-page-header > div { max-width: 700px; }
.admin-console-page-header h1 { margin: .28rem 0 .25rem; color: #183425; font-size: clamp(1.75rem, 4vw, 2.55rem); letter-spacing: -.045em; line-height: 1.05; }
.admin-console-page-header p { margin: 0; color: #66756c; font-size: .76rem; line-height: 1.6; }
.admin-console-page-header .btn { min-width: 0; padding: .65rem .9rem; border-width: 1px; border-radius: 10px; font-size: .65rem; font-weight: 800; }

.admin-console-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #24804a;
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-console-surface,
.admin-console-section {
    border: 1px solid #dfe8e2;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 27px rgba(22, 62, 38, .04);
}

.admin-console-surface.is-flush { overflow: hidden; }

.admin-console-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-bottom: .8rem;
    padding: .75rem .85rem;
    border: 1px solid #badfc6;
    border-radius: 11px;
    background: #edfaf1;
    color: #266941;
    font-size: .65rem;
    font-weight: 700;
}

.admin-console-alert.is-error { border-color: #efc4c4; background: #fff3f3; color: #943e3e; }

.admin-console-tabs {
    display: flex;
    gap: .35rem;
    margin-bottom: .8rem;
    padding: .35rem;
    overflow-x: auto;
    border: 1px solid #dfe8e2;
    border-radius: 12px;
    background: #fff;
    scrollbar-width: thin;
}

.admin-console-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 35px;
    padding: .5rem .7rem;
    border-radius: 8px;
    color: #65746b;
    font-size: .61rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.admin-console-tabs a:hover { background: #f2f7f4; color: #245e3b; }
.admin-console-tabs a.is-active { background: #183f2a; color: #fff; box-shadow: 0 5px 13px rgba(19, 65, 39, .16); }
.admin-console-tabs a strong { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 .28rem; border-radius: 999px; background: rgba(0, 0, 0, .06); font-size: .53rem; }
.admin-console-tabs a.is-active strong { background: rgba(255, 255, 255, .14); }
.admin-console-tabs.is-compact { margin: 0; padding: .25rem; }

.admin-console-result-bar,
.admin-console-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .65rem 0;
}

.admin-console-result-bar > div { display: flex; align-items: baseline; gap: .35rem; }
.admin-console-result-bar strong { color: #183425; font-size: 1rem; }
.admin-console-result-bar span,
.admin-console-toolbar > span { color: #69776f; font-size: .59rem; font-weight: 700; }

.admin-console-empty {
    grid-column: 1 / -1;
    padding: 2.8rem 1.2rem;
    border: 1px dashed #c8d8cd;
    border-radius: 15px;
    background: #fbfdfb;
    text-align: center;
}

.admin-console-empty > i { color: #5e8b6f; font-size: 1.65rem; }
.admin-console-empty h2 { margin: .5rem 0 .15rem; color: #1d3b29; font-size: .88rem; }
.admin-console-empty p { margin: 0 0 .75rem; color: #6c7971; font-size: .65rem; }
.admin-console-empty .btn { min-width: 0; padding: .6rem .9rem; border-radius: 9px; font-size: .62rem; }

.admin-dashboard-page .btn-danger {
    min-width: 0;
    border: 1px solid #ebc4c4;
    background: #fff4f4;
    color: #993b3b;
    box-shadow: none;
}

.admin-dashboard-page .btn-danger:hover { border-color: #d97b7b; background: #fde8e8; transform: translateY(-1px); }

/* Member directory */
.admin-member-filter-panel { padding: .75rem; }
.admin-member-filter-panel > form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.admin-member-filter-panel .btn { min-width: 0; padding: .65rem 1rem; border-radius: 10px; font-size: .66rem; }

.admin-console-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: 0 .75rem;
    border: 1px solid #d5e0d8;
    border-radius: 10px;
    background: #fafcfb;
}

.admin-console-search:focus-within { border-color: #29a45b; box-shadow: 0 0 0 3px rgba(37, 211, 102, .1); }
.admin-console-search i { color: #708078; }
.admin-console-search input { width: 100%; min-width: 0; padding: .65rem 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .68rem; }

.admin-filter-drawer { grid-column: 1 / -1; border-top: 1px solid #e5ece7; }
.admin-filter-drawer > summary { display: flex; align-items: center; gap: .55rem; padding: .7rem .2rem 0; list-style: none; color: #52665a; cursor: pointer; font-size: .62rem; font-weight: 800; }
.admin-filter-drawer > summary::-webkit-details-marker { display: none; }
.admin-filter-drawer > summary > span { display: flex; align-items: center; gap: .4rem; }
.admin-filter-drawer > summary strong { margin-left: auto; padding: .24rem .4rem; border-radius: 999px; background: #e8f6ed; color: #257746; font-size: .52rem; }
.admin-filter-drawer[open] > summary > i:last-child { transform: rotate(180deg); }

.admin-filter-grid,
.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    margin-top: .75rem;
}

.admin-filter-grid label,
.admin-form-grid label,
.admin-form-textarea,
.admin-rate-card > label {
    display: grid;
    align-content: start;
    gap: .28rem;
    color: #2b4837;
    font-size: .58rem;
    font-weight: 800;
}

.admin-filter-grid input,
.admin-filter-grid select,
.admin-form-grid input,
.admin-form-grid select,
.admin-form-textarea textarea,
.admin-rate-card input,
.admin-reject-drawer textarea,
.admin-moderation-form textarea {
    width: 100%;
    min-width: 0;
    padding: .62rem .68rem;
    border: 1px solid #d4dfd7;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    color: #1e3929;
    font: inherit;
    font-size: .65rem;
}

.admin-filter-grid input:focus,
.admin-filter-grid select:focus,
.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-textarea textarea:focus,
.admin-rate-card input:focus,
.admin-reject-drawer textarea:focus,
.admin-moderation-form textarea:focus { border-color: #299e58; box-shadow: 0 0 0 3px rgba(37, 211, 102, .1); }

.admin-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .7rem;
    margin-top: .65rem;
    padding-top: .65rem;
    border-top: 1px solid #e5ece7;
}

.admin-filter-actions > a { color: #6c7971; font-size: .59rem; font-weight: 750; }
.admin-filter-actions .btn { padding: .58rem .8rem; }

/* Payment review cards */
.admin-payment-review-list { display: grid; gap: .7rem; }

.admin-payment-review-card {
    overflow: hidden;
    border: 1px solid #dfe8e2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(25, 63, 40, .04);
}

.admin-payment-review-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid #e6ece8;
}

.admin-payment-type-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #e9f7ee;
    color: #237a47;
}

.admin-payment-review-card > header > div:nth-child(2) { display: grid; min-width: 0; gap: .04rem; }
.admin-payment-review-card > header > div:nth-child(2) > span { color: #728078; font-family: monospace; font-size: .52rem; }
.admin-payment-review-card h2 { margin: 0; color: #1a3726; font-size: .78rem; }
.admin-payment-review-card header p { overflow: hidden; margin: 0; color: #69776f; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .48rem;
    border-radius: 999px;
    background: #eef1ef;
    color: #69736d;
    font-size: .54rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.admin-status-pill.is-pending,
.admin-status-pill.is-clicked { background: #fff0d7; color: #95620e; }
.admin-status-pill.is-approved,
.admin-status-pill.is-verified,
.admin-status-pill.is-live,
.admin-status-pill.is-rewarded { background: #e5f6ea; color: #207741; }
.admin-status-pill.is-rejected { background: #fde9e9; color: #963d3d; }
.admin-status-pill.is-registered { background: #e9f1fb; color: #386ea3; }
.admin-status-pill.is-paid { background: #eeeafb; color: #6a51a1; }
.admin-status-pill.is-inactive { background: #eef1ef; color: #69736d; }

.admin-payment-amount { display: grid; min-width: 118px; gap: .05rem; padding-left: .8rem; border-left: 1px solid #e1e8e3; text-align: right; }
.admin-payment-amount small { color: #78847d; font-size: .52rem; }
.admin-payment-amount strong { color: #173d27; font-size: .78rem; }

.admin-payment-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 0;
    margin: 0;
    padding: .8rem 1rem;
}

.admin-payment-facts > div { display: grid; gap: .08rem; min-width: 0; padding: .35rem .6rem; border-left: 1px solid #e7ece8; }
.admin-payment-facts > div:first-child { border-left: 0; padding-left: 0; }
.admin-payment-facts dt { color: #758179; font-size: .51rem; font-weight: 700; }
.admin-payment-facts dd { overflow: hidden; margin: 0; color: #284433; font-size: .6rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.admin-payment-notes { display: grid; gap: .4rem; margin: 0 1rem .8rem; padding: .65rem .75rem; border-radius: 10px; background: #f5f7f6; }
.admin-payment-notes p { display: grid; gap: .08rem; margin: 0; color: #607068; font-size: .59rem; }
.admin-payment-notes strong { color: #294535; }

.admin-payment-review-card > footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    padding: .75rem 1rem;
    border-top: 1px solid #e6ece8;
    background: #fafcfb;
}

.admin-payment-review-card > footer > a { margin-right: auto; }
.admin-payment-review-card > footer form { margin: 0; }
.admin-payment-review-card > footer .btn { min-width: 0; padding: .62rem .8rem; border-width: 1px; border-radius: 9px; font-size: .61rem; font-weight: 800; }

.admin-reject-drawer { position: relative; }
.admin-reject-drawer > summary { list-style: none; }
.admin-reject-drawer > summary::-webkit-details-marker { display: none; }
.admin-reject-drawer > form {
    position: absolute;
    z-index: 8;
    top: calc(100% + .45rem);
    right: 0;
    display: grid;
    width: 310px;
    gap: .55rem;
    padding: .75rem;
    border: 1px solid #eccaca;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(55, 24, 24, .15);
}

.admin-reject-drawer label { color: #4f3838; font-size: .58rem; font-weight: 800; }

/* Moderation */
.admin-moderation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

.admin-moderation-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid #dfe8e2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(25, 63, 40, .04);
}

.admin-moderation-card > header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.admin-review-stars { display: flex; gap: .14rem; color: #e2a127; font-size: .74rem; }
.admin-moderation-card blockquote { flex: 1; margin: .85rem 0; color: #2b4234; font-size: .76rem; font-weight: 650; line-height: 1.65; }

.admin-review-people {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .55rem;
    padding: .65rem;
    border-radius: 10px;
    background: #f5f8f6;
}

.admin-review-people > span { display: grid; min-width: 0; gap: .04rem; }
.admin-review-people > span:last-of-type { text-align: right; }
.admin-review-people small { color: #7a867f; font-size: .5rem; }
.admin-review-people strong { overflow: hidden; color: #284334; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-review-people > i { color: #85a18f; font-size: .65rem; }

.admin-review-context { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .35rem; margin-top: .55rem; color: #6d7b73; font-size: .56rem; }
.admin-review-context strong { overflow: hidden; color: #355342; text-overflow: ellipsis; white-space: nowrap; }

.admin-moderation-form { display: grid; gap: .55rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e5ece7; }
.admin-moderation-form > label { display: grid; gap: .3rem; color: #52645a; font-size: .56rem; font-weight: 800; }
.admin-moderation-form > div { display: flex; justify-content: flex-end; gap: .4rem; }
.admin-moderation-form .btn { min-width: 0; padding: .6rem .8rem; border-radius: 9px; font-size: .6rem; }

/* Referrals */
.admin-referral-funnel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: .8rem;
}

.admin-referral-funnel > a {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    padding: .75rem;
    border: 1px solid #dfe8e2;
    border-radius: 13px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.admin-referral-funnel > a:hover,
.admin-referral-funnel > a.is-active { border-color: #9fc9ae; box-shadow: 0 7px 18px rgba(28, 92, 51, .07); }
.admin-referral-funnel > a > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #e9f6ed; color: #287b49; }
.admin-referral-funnel > a > div { display: grid; gap: .02rem; }
.admin-referral-funnel small { color: #6e7c74; font-size: .52rem; font-weight: 750; }
.admin-referral-funnel strong { color: #1d3b29; font-size: .83rem; }
.admin-referral-funnel > a > i:last-child { position: absolute; z-index: 2; right: -.48rem; color: #91a198; font-size: .55rem; }

.admin-console-table-wrap { width: 100%; overflow-x: auto; }
.admin-console-table { width: 100%; border-collapse: collapse; }
.admin-console-table th { padding: .7rem .8rem; border-bottom: 1px solid #dfe8e2; background: #f5f8f6; color: #6e7b73; font-size: .52rem; font-weight: 850; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-console-table td { padding: .75rem .8rem; border-bottom: 1px solid #e8eee9; color: #334a3c; font-size: .6rem; vertical-align: middle; }
.admin-console-table tr:last-child td { border-bottom: 0; }
.admin-referral-code { font-family: monospace; font-size: .62rem; }

.admin-table-person { display: flex; align-items: center; gap: .5rem; }
.admin-table-person > i { color: #6c927a; font-size: .95rem; }
.admin-table-person > span { display: grid; min-width: 0; gap: .04rem; }
.admin-table-person strong { max-width: 130px; overflow: hidden; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-table-person small { color: #7a867f; font-size: .5rem; }
.admin-console-table form { margin: 0; }
.admin-table-action { min-width: 0; padding: .5rem .65rem; border-radius: 8px; font-size: .55rem; }
.admin-table-muted { color: #929b95; font-size: .54rem; }

/* Pricing */
.admin-pricing-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-bottom: .8rem; }
.admin-pricing-overview article { display: flex; align-items: center; gap: .6rem; padding: .8rem; border: 1px solid #dfe8e2; border-radius: 13px; background: #fff; }
.admin-pricing-overview article > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; background: #e8f6ed; color: #237a47; }
.admin-pricing-overview article > div { display: grid; gap: .02rem; }
.admin-pricing-overview small { color: #6d7b73; font-size: .52rem; font-weight: 750; }
.admin-pricing-overview strong { color: #1c3a28; font-size: .85rem; }

.admin-console-creator {
    margin-bottom: .8rem;
    border: 1px dashed #adcfb9;
    border-radius: 15px;
    background: #f8fcf9;
}

.admin-console-creator > summary,
.admin-pricing-card > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .8rem .9rem;
    list-style: none;
    cursor: pointer;
}

.admin-console-creator > summary::-webkit-details-marker,
.admin-pricing-card > summary::-webkit-details-marker { display: none; }
.admin-console-creator > summary > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; background: #daf3e3; color: #207644; }
.admin-console-creator > summary > div { display: grid; gap: .04rem; }
.admin-console-creator > summary strong { color: #213e2c; font-size: .67rem; }
.admin-console-creator > summary small { color: #718078; font-size: .55rem; }
.admin-console-creator[open] > summary > i:last-child,
.admin-pricing-card[open] > summary > i:last-child { transform: rotate(180deg); }

.admin-pricing-form { display: grid; gap: .7rem; padding: .9rem; border-top: 1px solid #dfe8e2; }
.admin-form-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.admin-form-textarea { display: grid; }
.admin-form-textarea textarea { resize: vertical; }
.admin-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; border-top: 1px solid #e4ebe6; }

.admin-check-control { display: inline-flex; align-items: center; gap: .42rem; color: #586960; font-size: .58rem; font-weight: 750; }
.admin-check-control input { width: 15px; height: 15px; accent-color: #20804a; }
.admin-form-footer .btn { min-width: 0; padding: .62rem .85rem; border-radius: 9px; font-size: .61rem; }

.admin-console-section { margin-top: .8rem; padding: 1rem; }
.admin-console-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.admin-console-section-heading > div { max-width: 700px; }
.admin-console-section-heading > div > span { color: #22804a; font-size: .53rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.admin-console-section-heading h2 { margin: .18rem 0 .12rem; color: #1c3928; font-size: .9rem; }
.admin-console-section-heading p { margin: 0; color: #6c7a72; font-size: .61rem; line-height: 1.55; }
.admin-console-section-heading > strong { padding: .3rem .5rem; border-radius: 999px; background: #e7f6ec; color: #237746; font-size: .54rem; }

.admin-pricing-list { display: grid; gap: .55rem; }
.admin-pricing-card { border: 1px solid #dfe8e2; border-radius: 12px; background: #fbfcfb; }
.admin-pricing-card[open] { border-color: #b8d6c2; background: #fff; }
.admin-pricing-card > summary { grid-template-columns: auto minmax(160px, 1fr) minmax(75px, .35fr) minmax(125px, .5fr) auto auto; }
.admin-pricing-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #eaf4ed; color: #36734d; }
.admin-pricing-name,
.admin-pricing-market,
.admin-pricing-amount { display: grid; min-width: 0; gap: .03rem; }
.admin-pricing-name strong { overflow: hidden; color: #203e2c; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-pricing-name small,
.admin-pricing-market small,
.admin-pricing-amount small { color: #75827a; font-size: .5rem; }
.admin-pricing-market strong,
.admin-pricing-amount strong { color: #2a4736; font-size: .61rem; }
.admin-pricing-metadata { display: flex; flex-wrap: wrap; gap: .35rem; }
.admin-pricing-metadata span { padding: .25rem .4rem; border-radius: 999px; background: #edf2ef; color: #5f7066; font-size: .51rem; font-weight: 750; }

.admin-rate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.admin-rate-card { display: grid; gap: .6rem; padding: .75rem; border: 1px solid #dfe8e2; border-radius: 12px; background: #fbfcfb; }
.admin-rate-card > header { display: flex; align-items: center; justify-content: space-between; }
.admin-rate-card > header span { color: #1d3b29; font-size: .7rem; font-weight: 850; }
.admin-rate-card > header i { color: #5d8a6d; }
.admin-rate-card > p { display: grid; min-height: 2em; gap: .03rem; margin: 0; color: #718078; font-size: .51rem; }
.admin-rate-card > p strong { color: #365140; }
.admin-rate-card > footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .5rem; border-top: 1px solid #e4ebe6; }
.admin-rate-card .btn { min-width: 0; padding: .48rem .65rem; border-width: 1px; border-radius: 8px; font-size: .55rem; }

/* Payment operations within shared shell */
.admin-console-layout .payment-settings-hero {
    margin: 0 0 1rem;
    padding: 1.7rem;
    border: 1px solid #dce8df;
    border-radius: 19px;
}

@media (max-width: 1080px) {
    .admin-console-layout { grid-template-columns: 190px minmax(0, 1fr); }
    .admin-referral-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .admin-referral-funnel > a > i:last-child { display: none; }
    .admin-form-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .admin-console-layout { display: block; }
    .admin-console-sidebar { display: none; }
    .admin-console-mobile-nav {
        display: block;
        margin-bottom: .8rem;
        border: 1px solid #d6e3da;
        border-radius: 13px;
        background: #153a26;
        color: #fff;
    }
    .admin-console-mobile-nav > summary { display: flex; align-items: center; justify-content: space-between; padding: .75rem .85rem; list-style: none; cursor: pointer; font-size: .65rem; font-weight: 800; }
    .admin-console-mobile-nav > summary::-webkit-details-marker { display: none; }
    .admin-console-mobile-nav > summary span { display: inline-flex; align-items: center; gap: .4rem; }
    .admin-console-mobile-nav > summary img { width: 27px; height: 27px; border-radius: 7px; background: #fff; object-fit: contain; }
    .admin-console-mobile-nav nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: 0 .6rem .6rem; }
    .admin-console-mobile-nav nav a { display: flex; align-items: center; gap: .35rem; padding: .55rem; border-radius: 8px; color: rgba(255, 255, 255, .72); font-size: .55rem; font-weight: 700; text-decoration: none; }
    .admin-console-mobile-nav nav a.is-active { background: rgba(37, 211, 102, .17); color: #6def9d; }
}

@media (max-width: 720px) {
    .admin-console-page-header { align-items: flex-start; flex-direction: column; }
    .admin-member-filter-panel > form { grid-template-columns: 1fr; }
    .admin-filter-drawer { grid-column: auto; }
    .admin-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-moderation-grid { grid-template-columns: 1fr; }
    .admin-referral-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-console-toolbar { align-items: flex-start; flex-direction: column; }
    .admin-pricing-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-pricing-card > summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .admin-pricing-market { display: none; }
    .admin-pricing-amount { text-align: right; }
    .admin-payment-review-card > header { grid-template-columns: auto minmax(0, 1fr) auto; }
    .admin-payment-amount { grid-column: 2 / -1; padding: .45rem 0 0; border-top: 1px solid #e4ebe6; border-left: 0; text-align: left; }
}

@media (max-width: 560px) {
    .admin-console-mobile-nav nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-console-tabs { width: 100%; }
    .admin-console-result-bar { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .admin-filter-grid,
    .admin-form-grid.is-four,
    .admin-rate-grid { grid-template-columns: 1fr; }
    .admin-filter-actions,
    .admin-form-footer { align-items: stretch; flex-direction: column; }
    .admin-filter-actions .btn,
    .admin-form-footer .btn { width: 100%; }
    .admin-payment-review-card > header { grid-template-columns: auto minmax(0, 1fr); }
    .admin-payment-review-card > header > .admin-status-pill { grid-column: 2; width: max-content; }
    .admin-payment-amount { grid-column: 1 / -1; }
    .admin-payment-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-payment-facts > div { border-left: 0; }
    .admin-payment-review-card > footer { align-items: stretch; flex-direction: column; }
    .admin-payment-review-card > footer > a { margin-right: 0; }
    .admin-payment-review-card > footer .btn,
    .admin-payment-review-card > footer form,
    .admin-reject-drawer { width: 100%; }
    .admin-reject-drawer > form { position: static; width: 100%; margin-top: .45rem; box-shadow: none; }
    .admin-referral-funnel { grid-template-columns: 1fr; }
    .admin-pricing-card > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
    .admin-pricing-amount { grid-column: 2; text-align: left; }
    .admin-pricing-card > summary > .admin-status-pill { grid-column: 2; width: max-content; }
    .admin-pricing-card > summary > i:last-child { grid-column: 3; grid-row: 1 / 4; }

    .admin-console-table,
    .admin-console-table tbody,
    .admin-console-table tr,
    .admin-console-table td { display: block; width: 100%; }
    .admin-console-table thead { display: none; }
    .admin-console-table tr { padding: .7rem; border-bottom: 1px solid #dfe8e2; }
    .admin-console-table td { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: .55rem; padding: .38rem 0; border: 0; }
    .admin-console-table td::before { color: #75827a; content: attr(data-label); font-size: .5rem; font-weight: 800; text-transform: uppercase; }
    .admin-console-table td[colspan] { display: block; }
    .admin-console-table td[colspan]::before { display: none; }
}

/* ─── Admin workspace sizing, collapse control, and conversion analytics ─── */
@media (min-width: 901px) {
    .admin-dashboard-page {
        height: calc(100dvh - 64px);
        min-height: 620px;
        padding: 14px 0;
        overflow: hidden;
    }

    .admin-console-layout {
        width: 100%;
        max-width: 1600px;
        height: 100%;
        min-height: 0;
        padding-inline: 14px;
        transition: grid-template-columns .2s ease;
    }

    .admin-console-layout.is-sidebar-collapsed {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .admin-console-sidebar {
        position: relative;
        top: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .admin-console-layout > .admin-main {
        height: 100%;
        min-height: 0;
        padding: .15rem .45rem 2rem .05rem;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-color: #b9cbc0 transparent;
        scrollbar-width: thin;
    }

    .admin-console-layout > .admin-main::-webkit-scrollbar { width: 7px; }
    .admin-console-layout > .admin-main::-webkit-scrollbar-track { background: transparent; }
    .admin-console-layout > .admin-main::-webkit-scrollbar-thumb { border-radius: 999px; background: #b9cbc0; }
}

.admin-console-sidebar-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.admin-console-sidebar-head .admin-console-brand {
    min-width: 0;
    border-bottom: 0;
}

.admin-console-collapse {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin-right: .65rem;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    transition: .18s ease;
}

.admin-console-collapse:hover,
.admin-console-collapse:focus-visible { border-color: rgba(105, 238, 154, .5); background: rgba(37, 211, 102, .13); color: #78efa3; outline: 0; }

.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar-head { display: flex; flex-direction: column; padding: .65rem 0; }
.admin-console-layout.is-sidebar-collapsed .admin-console-brand { padding: 0; }
.admin-console-layout.is-sidebar-collapsed .admin-console-brand > div,
.admin-console-layout.is-sidebar-collapsed .admin-console-nav-label,
.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar nav a > span,
.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar nav a > i:last-child,
.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar-footer > div,
.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar-footer > a { display: none; }
.admin-console-layout.is-sidebar-collapsed .admin-console-brand > span { width: 36px; height: 36px; }
.admin-console-layout.is-sidebar-collapsed .admin-console-brand-image-wrap img { width: 34px; height: 34px; }
.admin-console-layout.is-sidebar-collapsed .admin-console-collapse { width: 32px; margin: .55rem 0 0; }
.admin-console-layout.is-sidebar-collapsed .admin-console-collapse i { transform: rotate(180deg); }
.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar nav { padding-inline: .5rem; }
.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar nav a { display: grid; grid-template-columns: 1fr; place-items: center; padding-inline: 0; }
.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar nav a.is-active { box-shadow: inset 0 -2px 0 #25d366; }
.admin-console-layout.is-sidebar-collapsed .admin-console-sidebar-footer { display: flex; justify-content: center; padding-inline: 0; }

.admin-member-role-control { position: relative; }
.admin-member-role-control > summary { list-style: none; }
.admin-member-role-control > summary::-webkit-details-marker { display: none; }
.admin-member-role-control > form {
    position: absolute;
    z-index: 12;
    right: 0;
    bottom: calc(100% + .5rem);
    display: grid;
    width: 245px;
    gap: .65rem;
    padding: .75rem;
    border: 1px solid #bfd6c7;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(23, 59, 37, .16);
}

.admin-member-role-control form label { display: grid; gap: .28rem; color: #345140; font-size: .57rem; font-weight: 800; }
.admin-member-role-control select { width: 100%; padding: .58rem .65rem; border: 1px solid #d3dfd7; border-radius: 8px; background: #fff; color: #213d2c; font: inherit; font-size: .63rem; }
.admin-member-role-control form .btn { width: 100%; }

.admin-conversion-panel {
    margin-top: 12px;
    padding: 1rem;
    border: 1px solid #dce8e0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 25px rgba(23, 63, 39, .04);
}

.admin-conversion-panel .admin-card-heading { margin-bottom: .7rem; }
.admin-conversion-panel .admin-card-heading > span { padding: .28rem .46rem; border-radius: 999px; background: #edf6f0; color: #39704e; font-size: .52rem; font-weight: 800; }
.admin-conversion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.admin-conversion-grid article { min-width: 0; padding: .7rem; border: 1px solid #e2eae4; border-radius: 11px; background: #fafcfb; }
.admin-conversion-grid header { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
.admin-conversion-grid header span { display: inline-flex; min-width: 0; align-items: center; gap: .35rem; overflow: hidden; color: #52665a; font-size: .56rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.admin-conversion-grid header span i { color: #2a8550; }
.admin-conversion-grid header strong { color: #183c28; font-size: .72rem; }
.admin-conversion-track { height: 5px; margin: .55rem 0 .35rem; overflow: hidden; border-radius: 999px; background: #e4eae6; }
.admin-conversion-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #71d391, #1d9c52); }
.admin-conversion-grid small { display: block; overflow: hidden; color: #79857e; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }

.admin-insight-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-top: .65rem; }
.admin-insight-strip article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .55rem; padding: .72rem; border: 1px solid #dfe8e2; border-radius: 12px; background: #fff; }
.admin-insight-strip article > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #e8f6ed; color: #237a47; }
.admin-insight-strip article.is-warning > i { background: #fff1d8; color: #9a650b; }
.admin-insight-strip article.is-neutral > i { background: #eaf1f8; color: #436d98; }
.admin-insight-strip article > div { display: grid; gap: .12rem; }
.admin-insight-strip strong { color: #243f2f; font-size: .57rem; }
.admin-insight-strip span { color: #6d7b73; font-size: .51rem; line-height: 1.45; }

.chart-legend .is-applications::before { background: #6f5bd3; }
.admin-chart-area.is-applications { fill: url(#applicationsArea); }
.admin-chart-line.is-applications { stroke: #6f5bd3; stroke-dasharray: 2 5; }
.admin-chart-point.is-applications { fill: #f2efff; stroke: #6f5bd3; }

@media (max-width: 1180px) {
    .admin-insight-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .admin-dashboard-page { overflow: visible; }
    .admin-console-collapse { display: none; }
    .admin-console-layout > .admin-main { height: auto; overflow: visible; }
    .admin-conversion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .admin-member-role-control { width: 100%; }
    .admin-member-role-control > summary { width: 100%; }
    .admin-member-role-control > form { position: static; width: 100%; margin-top: .45rem; box-shadow: none; }
    .admin-conversion-grid,
    .admin-insight-strip { grid-template-columns: 1fr; }
}

/* ─── Payer KPIs and billing operations cards ─── */
.admin-metric-card.is-conversion {
    border-color: #b9d9c5;
    background: linear-gradient(145deg, #f5fcf7, #fff);
}

.admin-metric-card.is-conversion > i {
    background: #daf3e3;
    color: #1c7d46;
}

.admin-billing-card-grid { align-items: stretch; }

.admin-billing-card {
    display: flex;
    min-width: 0;
    min-height: 390px;
    max-height: 440px;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-color: #dce7df;
    box-shadow: 0 12px 30px rgba(19, 60, 36, .055);
}

.admin-billing-card-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .9rem;
    border-bottom: 1px solid #e1e9e3;
    background: linear-gradient(145deg, #fbfdfb, #f5f9f6);
}

.admin-billing-card-heading > span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: #dff4e6;
    color: #1f7b45;
}

.admin-billing-card.is-gateways .admin-billing-card-heading > span { background: #e7f0fa; color: #3d70a3; }
.admin-billing-card.is-revenue .admin-billing-card-heading > span { background: #f5edda; color: #98701c; }
.admin-billing-card-heading > div { display: grid; min-width: 0; gap: .04rem; }
.admin-billing-card-heading h2 { margin: 0; color: #1c3828; font-size: .72rem; }
.admin-billing-card-heading p { overflow: hidden; margin: 0; color: #718078; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-billing-card-heading a { display: inline-flex; align-items: center; gap: .25rem; color: #2b7248; font-size: .54rem; font-weight: 850; text-decoration: none; white-space: nowrap; }

.admin-billing-card-list {
    flex: 1;
    min-height: 0;
    padding: .25rem .8rem .7rem;
    overflow-y: auto;
    scrollbar-color: #c2d2c8 transparent;
    scrollbar-width: thin;
}

.admin-billing-card-row {
    padding: .7rem 0;
    border-bottom: 1px solid #e8eee9;
}

.admin-billing-card-row:last-child { border-bottom: 0; }
.admin-billing-card-row header,
.admin-billing-card-row footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.admin-billing-card-row header > span { display: grid; min-width: 0; gap: .03rem; }
.admin-billing-card-row header strong { overflow: hidden; color: #294434; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-billing-card-row header small,
.admin-billing-card-row footer { color: #77847c; font-size: .49rem; }
.admin-billing-card-row header em,
.admin-gateway-health-row > em {
    padding: .24rem .38rem;
    border-radius: 999px;
    background: #e6f6eb;
    color: #247744;
    font-size: .48rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}
.admin-billing-card-row header em.is-planned { background: #f0f2f1; color: #707a74; }

.admin-billing-progress {
    height: 5px;
    margin: .5rem 0 .3rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e6ece8;
}

.admin-billing-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #69ce8a, #1e9a50); }
.admin-billing-card-row footer strong { color: #315640; }

.admin-billing-card-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: .7rem .8rem .3rem;
    overflow: hidden;
    border: 1px solid #e0e8e2;
    border-radius: 10px;
    background: #e0e8e2;
}

.admin-billing-card-summary span { display: grid; gap: .03rem; padding: .55rem .35rem; background: #f8faf9; color: #758179; font-size: .47rem; text-align: center; }
.admin-billing-card-summary strong { color: #244331; font-size: .67rem; }

.admin-gateway-health-row,
.admin-revenue-activity-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .7rem 0;
    border-bottom: 1px solid #e8eee9;
}

.admin-gateway-health-row:last-child,
.admin-revenue-activity-row:last-child { border-bottom: 0; }
.admin-gateway-health-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #e5f6eb; color: #247845; }
.admin-gateway-health-icon.has-issues { background: #fff0d8; color: #98630c; }
.admin-gateway-health-row > span:nth-child(2),
.admin-revenue-activity-row > span:nth-child(2) { display: grid; min-width: 0; gap: .04rem; }
.admin-gateway-health-row strong,
.admin-revenue-activity-row strong { overflow: hidden; color: #294434; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-gateway-health-row small,
.admin-revenue-activity-row small { color: #79857e; font-size: .49rem; }
.admin-gateway-health-row > em.has-issues { background: #fff0d8; color: #98630c; }

.admin-revenue-rank { color: #92a099; font-family: monospace; font-size: .55rem; font-weight: 850; }
.admin-revenue-activity-row time { display: grid; gap: .02rem; text-align: right; }
.admin-revenue-activity-row time small { font-size: .46rem; font-style: normal; }
.admin-revenue-activity-row time strong { color: #705615; font-size: .64rem; }

.admin-billing-empty {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .55rem;
    padding: .75rem;
    border: 1px dashed #ccd9d1;
    border-radius: 10px;
    background: #fafcfb;
    color: #6f7d75;
}

.admin-billing-empty > i { font-size: 1rem; }
.admin-billing-empty > span { display: grid; gap: .03rem; }
.admin-billing-empty strong { color: #365241; font-size: .57rem; }
.admin-billing-empty small { font-size: .49rem; }

/* Payment-approval hover details open below each bar. */
.admin-bar-chart {
    min-height: 288px;
    padding-bottom: 68px;
}

.admin-bar-tooltip {
    top: calc(100% + 25px);
    bottom: auto;
    transform: translate(-50%, -6px);
}

.admin-bar-tooltip::after {
    top: -5px;
    bottom: auto;
    border-top: 1px solid rgba(226, 232, 240, .95);
    border-left: 1px solid rgba(226, 232, 240, .95);
    border-right: 0;
    border-bottom: 0;
}

.admin-bar-item:hover .admin-bar-tooltip,
.admin-bar-item:focus .admin-bar-tooltip {
    transform: translate(-50%, 0);
}

@media (max-width: 680px) {
    .admin-billing-card { min-height: 350px; max-height: 420px; }
}

/* ─── Scheduled notification campaigns ─── */
.admin-campaign-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: .8rem;
}

.admin-campaign-stats article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .05rem .55rem;
    padding: .75rem;
    border: 1px solid #dfe8e2;
    border-radius: 12px;
    background: #fff;
}

.admin-campaign-stats i { grid-row: 1 / 3; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #e9f6ed; color: #287b49; }
.admin-campaign-stats span { color: #718078; font-size: .52rem; font-weight: 750; }
.admin-campaign-stats strong { color: #1c3a28; font-size: .8rem; }
.admin-campaign-stats .is-failed i { background: #fdeaea; color: #9b3f3f; }
.admin-campaign-stats .is-scheduled i { background: #eaf1fb; color: #456f9d; }

.admin-campaign-form { display: grid; gap: .8rem; padding: .9rem; border-top: 1px solid #dfe8e2; }
.admin-form-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.admin-form-textarea > small { color: #7b8780; font-size: .5rem; font-weight: 600; text-align: right; }
.admin-form-textarea > small { display: flex; justify-content: space-between; gap: .75rem; text-align: left; }
.admin-form-textarea code { padding: .05rem .2rem; border-radius: 4px; background: #edf3ef; color: #275b3b; }
.admin-fieldset-intro { margin: 0 0 .7rem; color: #64736a; font-size: .54rem; line-height: 1.5; }
.admin-email-composer.is-disabled { opacity: .58; }
.admin-email-composer textarea { min-height: 74px; resize: vertical; }

.rich-text-toolbar {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #d4dfd7;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.rich-text-toolbar:focus-within { border-color: #72b689; box-shadow: 0 0 0 3px rgba(48, 145, 82, .09); }
.rich-text-toolbar + textarea { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rich-text-toolbar-header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .7rem; border-bottom: 1px solid #e1e9e3; background: linear-gradient(115deg, #f8fbf9, #f0f7f2); }
.rich-text-toolbar-title { display: flex; align-items: center; min-width: 0; gap: .55rem; }
.rich-text-toolbar-title > span:last-child { display: grid; min-width: 0; gap: .02rem; }
.rich-text-toolbar-title strong { color: #244a31; font-size: .61rem; line-height: 1.25; }
.rich-text-toolbar-title small { overflow: hidden; color: #6f7e74; font-size: .47rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.rich-text-toolbar-icon { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border: 1px solid #cfe4d6; border-radius: 9px; background: #e8f5ec; color: #2e7a49; }
.rich-text-safe-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .27rem; padding: .28rem .48rem; border: 1px solid #cfe3d5; border-radius: 999px; background: rgba(255,255,255,.78); color: #477058; font-size: .45rem; font-weight: 750; white-space: nowrap; }
.rich-text-safe-badge i { color: #289054; font-size: .58rem; }
.rich-text-toolbar-actions { display: flex; align-items: stretch; gap: .48rem; overflow-x: auto; padding: .5rem .58rem .55rem; background: #fbfcfb; scrollbar-color: #b9cfc0 transparent; scrollbar-width: thin; }
.rich-text-tool-group { display: grid; flex: 0 0 auto; gap: .23rem; padding: .28rem .34rem .34rem; border: 1px solid #e0e8e2; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(28, 67, 42, .025); }
.rich-text-tool-group > div { display: flex; align-items: center; gap: .14rem; }
.rich-text-group-label { padding-left: .15rem; color: #78867d; font-size: .4rem; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; }
.rich-text-toolbar button { display: grid; position: relative; place-items: center; width: 31px; height: 29px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #315c40; font-size: .72rem; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease; }
.rich-text-toolbar button:hover { border-color: #c6ddcd; background: #edf7f0; color: #1c6d3b; transform: translateY(-1px); }
.rich-text-toolbar button:focus-visible { border-color: #70b487; background: #e7f3eb; outline: 3px solid rgba(55, 153, 89, .14); outline-offset: 1px; }
.rich-text-toolbar button.is-applied { border-color: #64ae7d; background: #dff2e5; color: #176735; }

@media (max-width: 560px) {
    .rich-text-toolbar-header { align-items: flex-start; padding: .55rem .58rem; }
    .rich-text-toolbar-title small { max-width: 190px; }
    .rich-text-safe-badge { padding: .25rem .38rem; }
    .rich-text-toolbar-actions { gap: .38rem; padding: .45rem .48rem .5rem; scroll-snap-type: x proximity; }
    .rich-text-tool-group { scroll-snap-align: start; }
}

.rich-text-content { overflow-wrap: anywhere; }
.rich-text-content h1,.rich-text-content h2,.rich-text-content h3 { margin: 1.35em 0 .55em; color: #203e2b; line-height: 1.25; }
.rich-text-content h1 { font-size: 1.45rem; }.rich-text-content h2 { font-size: 1.2rem; }.rich-text-content h3 { font-size: 1rem; }
.rich-text-content p { margin: 0 0 1em; }
.rich-text-content ul,.rich-text-content ol { margin: 0 0 1em; padding-left: 1.5rem; }
.rich-text-content blockquote { margin: 1em 0; padding: .7rem 1rem; border-left: 4px solid #55a66f; background: #f1f8f3; color: #4c6253; }
.rich-text-content a { color: #207845; text-decoration: underline; }
.rich-text-content pre { max-width: 100%; overflow: auto; padding: .8rem; border-radius: 8px; background: #eef3ef; }

.admin-campaign-fieldset {
    min-width: 0;
    padding: .8rem;
    border: 1px solid #dfe8e2;
    border-radius: 12px;
    background: #fafcfb;
}

.admin-campaign-fieldset legend { padding: 0 .35rem; color: #2d7149; font-size: .57rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.admin-campaign-fieldset label small { color: #7a867f; font-size: .49rem; font-weight: 500; line-height: 1.4; }
.admin-campaign-fieldset select[multiple] { min-height: 108px; }

.admin-campaign-delivery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.admin-campaign-radio { position: relative; display: block; cursor: pointer; }
.admin-campaign-radio > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.admin-campaign-radio > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .03rem .55rem;
    padding: .7rem;
    border: 1px solid #d8e2db;
    border-radius: 10px;
    background: #fff;
}
.admin-campaign-radio i { grid-row: 1 / 3; color: #44805b; font-size: .9rem; }
.admin-campaign-radio strong { color: #294434; font-size: .61rem; }
.admin-campaign-radio small { color: #78857d; font-size: .5rem; }
.admin-campaign-radio input:checked + span { border-color: #58ab72; background: #f0faf3; box-shadow: 0 0 0 2px rgba(37, 211, 102, .09); }
.admin-campaign-radio input:focus-visible + span { outline: 3px solid rgba(37, 211, 102, .18); }

.admin-campaign-schedule {
    grid-column: 1 / -1;
    display: grid;
    gap: .3rem;
    color: #304c3b;
    font-size: .57rem;
    font-weight: 800;
}
.admin-campaign-schedule input { width: 100%; padding: .62rem .68rem; border: 1px solid #d4dfd7; border-radius: 9px; background: #fff; color: #1e3929; font: inherit; font-size: .65rem; }
.admin-campaign-email > span { display: grid; gap: .03rem; }
.admin-campaign-email strong { color: #304c3b; font-size: .58rem; }
.admin-campaign-email small { color: #77847c; font-size: .49rem; font-weight: 500; }

.admin-campaign-list { display: grid; gap: .6rem; }
.admin-campaign-card { overflow: hidden; border: 1px solid #dfe8e2; border-radius: 13px; background: #fff; }
.admin-campaign-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .8rem; border-bottom: 1px solid #e5ece7; }
.admin-campaign-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: #e8f6ed; color: #247a47; }
.admin-campaign-card > header > div { display: grid; min-width: 0; gap: .03rem; }
.admin-campaign-card h3 { margin: 0; color: #203d2b; font-size: .7rem; }
.admin-campaign-card header p { overflow: hidden; margin: 0; color: #6f7d75; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }

.admin-campaign-card dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: .7rem .8rem; }
.admin-campaign-card dl div { display: grid; min-width: 0; gap: .03rem; }
.admin-campaign-card dt { color: #7a867f; font-size: .48rem; font-weight: 700; }
.admin-campaign-card dd { overflow: hidden; margin: 0; color: #304c3b; font-size: .56rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.admin-campaign-progress { padding: 0 .8rem .7rem; }
.admin-campaign-progress > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .3rem; color: #748178; font-size: .49rem; }
.admin-campaign-progress > div strong { color: #3a5544; }
.admin-campaign-progress > span { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #e6ece8; }
.admin-campaign-progress > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #69ce8a, #1f9b50); }

.admin-campaign-card > footer { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-top: 1px solid #e5ece7; background: #fafcfb; color: #77847c; font-size: .5rem; }
.admin-campaign-card > footer form { margin: 0 0 0 auto; }
.admin-campaign-card > footer .btn { min-width: 0; padding: .48rem .65rem; border-radius: 8px; font-size: .54rem; }
.admin-status-pill.is-dispatching { background: #e8f1fb; color: #3b6e9f; }
.admin-status-pill.is-completed { background: #e5f6ea; color: #207741; }
.admin-status-pill.is-cancelled { background: #eef1ef; color: #69736d; }
.admin-status-pill.is-failed { background: #fde9e9; color: #963d3d; }

@media (max-width: 720px) {
    .admin-campaign-stats,
    .admin-form-grid.is-two,
    .admin-campaign-delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-campaign-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
    .admin-campaign-stats,
    .admin-form-grid.is-two,
    .admin-campaign-delivery-grid { grid-template-columns: 1fr; }
    .admin-campaign-schedule { grid-column: auto; }
    .admin-campaign-card > header { grid-template-columns: auto minmax(0, 1fr); }
    .admin-campaign-card > header > .admin-status-pill { grid-column: 2; width: max-content; }
    .admin-campaign-card dl { grid-template-columns: 1fr; }
    .admin-campaign-card > footer { align-items: flex-start; flex-direction: column; }
    .admin-campaign-card > footer form,
    .admin-campaign-card > footer .btn { width: 100%; margin-left: 0; }
}

.manual-match-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid #cfe5d6;
    border-radius: 14px;
    background: linear-gradient(115deg, #f4fbf6, #edf8f1);
    box-shadow: 0 8px 24px rgba(29, 91, 52, .06);
}
.manual-match-panel > div { display: flex; align-items: center; min-width: 0; gap: .75rem; }
.manual-match-panel > div > i { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #d9f1e1; color: #217544; font-size: 1rem; }
.manual-match-panel span { display: grid; min-width: 0; gap: .12rem; }
.manual-match-panel strong { color: #1f492e; font-size: .7rem; }
.manual-match-panel small { color: #607469; font-size: .54rem; line-height: 1.45; }
.manual-match-panel form { flex: 0 0 auto; margin: 0; }
.manual-match-panel .btn { min-width: max-content; }

@media (max-width: 620px) {
    .manual-match-panel { align-items: stretch; flex-direction: column; }
    .manual-match-panel form,
    .manual-match-panel .btn { width: 100%; }
}