/*
 * MissingPage public site - the modern layer.
 *
 * Loaded after the template stylesheets and overrides them wholesale using
 * the site's actual class vocabulary (two header variants, the custom button
 * family, tag-styled tables). Modern techniques where they earn their keep:
 * custom properties, fluid type via clamp(), a sticky translucent header,
 * :focus-visible rings, and prefers-reduced-motion respected throughout.
 */

:root {
    --mp-ink: #101216;
    --mp-panel: #12141a;
    --mp-cyan: #46b7c5;
    --mp-cyan-deep: #2e8fa3;
    --mp-cyan-dark: #3aa5b3;
    --mp-canvas: #f5f7fb;
    --mp-muted: #7b8492;
    --mp-line: #e7ebf2;
    --mp-radius: 16px;
    --mp-radius-sm: 10px;
    --mp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .07);
    --mp-shadow-lift: 0 4px 8px rgba(16, 24, 40, .06), 0 18px 40px rgba(16, 24, 40, .12);
    --mp-grad: linear-gradient(135deg, #46b7c5, #2e8fa3);
    --mp-grad-hover: linear-gradient(135deg, #3aa5b3, #257e91);
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(70, 183, 197, .28);
}

:focus-visible {
    outline: 2px solid var(--mp-cyan);
    outline-offset: 2px;
}

body {
    color: #2a2f37;
}

/* ---------- Header: sticky, translucent, both auth states ---------- */

/* Floating island: the header is a detached glass pill below the top edge,
   not a bar across it. The <header> itself goes transparent and only provides
   the sticky position; the pill is the nav container inside it. */
header {
    position: sticky;
    top: 12px;
    z-index: 1020;
    background: transparent;
    border-bottom: none;
    pointer-events: none; /* the gaps around the pill should not eat clicks */
}

header .container {
    pointer-events: auto;
}

.top-menu,
.main-page header .row {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .12);
    padding: 6px 10px 6px 20px;
}

.main-page header .row {
    align-items: center;
    margin: 0;
    padding: 8px 18px;
}

/* Room so page content never starts underneath the floating pill */
header + section,
header + div {
    margin-top: 6px;
}

.top-menu .main-nav {
    gap: .25rem;
}

.top-menu .main-nav .nav-link,
.navbar-login .navbar-nav li a {
    color: #3d434b;
    font-weight: 500;
    font-size: .98rem;
    border-radius: 999px;
    padding: 8px 18px;
    transition: color .15s ease, background-color .15s ease;
    text-decoration: none;
}

.top-menu .main-nav .nav-link:hover,
.navbar-login .navbar-nav li a:hover {
    color: var(--mp-cyan-dark);
    background: rgba(70, 183, 197, .08);
}

.top-menu .main-nav .nav-link.active,
.top-menu .main-nav li.active .nav-link {
    color: var(--mp-cyan-deep);
    background: rgba(70, 183, 197, .12);
    font-weight: 600;
}

/* The right-hand cluster: sign-in stays quiet, sign-up is the one loud thing */
.nav-auth {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.nav-auth .nav-login {
    color: #3d434b;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}

.nav-auth .nav-login:hover {
    color: var(--mp-cyan-dark);
    background: rgba(70, 183, 197, .08);
}

.nav-auth .nav-signup {
    background: var(--mp-grad);
    color: #fff;
    font-weight: 600;
    padding: 9px 24px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(70, 183, 197, .3);
    transition: background .15s ease, box-shadow .15s ease;
}

.nav-auth .nav-signup:hover {
    background: var(--mp-grad-hover);
    color: #fff;
    box-shadow: 0 6px 16px rgba(70, 183, 197, .4);
}

.navbar-toggler {
    border: none;
    padding: 6px 10px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(70, 183, 197, .25);
}

/* Mobile: the collapse opens as a soft sheet, not a bare list */
@media (max-width: 991.98px) {
    .top-menu,
    .main-page header .row {
        border-radius: 22px;
    }

    .top-menu .navbar-collapse {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 16px 40px rgba(16, 24, 40, .14);
        margin-top: 10px;
        padding: 12px;
    }

    .top-menu .main-nav .nav-link {
        display: block;
        padding: 12px 16px;
        border-radius: 10px;
    }

    .nav-auth {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
        margin-top: .5rem;
        padding-top: .75rem;
        border-top: 1px solid var(--mp-line);
    }

    .nav-auth .nav-login,
    .nav-auth .nav-signup {
        text-align: center;
        padding: 12px 16px;
    }
}

.header-logo {
    max-height: 44px;
}

/* Notification + profile cluster */
.custom-box,
.notification-popup {
    border: none !important;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .16);
    overflow: hidden;
}

.dropdown-menu .dropdown-item {
    border-radius: 8px;
    margin: 2px 6px;
    width: auto;
}

.dropdown-menu .dropdown-item:hover {
    background: rgba(70, 183, 197, .1);
    color: var(--mp-cyan-dark);
}

.pro-img {
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(16, 24, 40, .2);
}

/* One-tap Settings gear in the header, next to the profile picture */
.mp-gear-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    font-size: 1.15rem; line-height: 1; text-decoration: none;
    margin: 0 8px; vertical-align: middle; cursor: pointer;
    transition: background .14s ease, transform .14s ease;
}
.mp-gear-link:hover { background: rgba(0, 0, 0, .06); transform: rotate(35deg); }

/* ---------- Hero ---------- */

.banner-text {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -.5px;
}

.text-large {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
}

.background-video .overlay {
    background: linear-gradient(to right, rgba(12, 13, 16, .82), rgba(12, 13, 16, .45) 60%, rgba(12, 13, 16, .25));
}

/* ---------- Buttons: one family, whatever the template called them ---------- */

.update-btn,
.btn-mp,
.btn-upload,
.join-missingpage,
.page-btn,
.login-btn,
.tbl-load-more-btn,
.btn.btn-primary,
button.update-btn {
    background: var(--mp-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--mp-radius-sm) !important;
    padding: 12px 26px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(70, 183, 197, .32);
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.update-btn:hover, .btn-mp:hover, .btn-upload:hover, .join-missingpage:hover,
.page-btn:hover, .login-btn:hover, .tbl-load-more-btn:hover, .btn.btn-primary:hover {
    background: var(--mp-grad-hover) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(70, 183, 197, .42);
}

.update-btn:active, .btn-mp:active, .join-missingpage:active, .btn.btn-primary:active {
    transform: translateY(1px);
}

.btn.btn-secondary,
.btn.btn-default,
.close-button,
.btn.btn-light-primary {
    background: #eef1f6 !important;
    color: #3d434b !important;
    border: none !important;
    border-radius: var(--mp-radius-sm) !important;
    font-weight: 600;
}

.btn.btn-secondary:hover,
.btn.btn-default:hover,
.close-button:hover {
    background: #e2e7ef !important;
    color: var(--mp-ink) !important;
}

/* ---------- Sections and cards ---------- */

section {
    scroll-margin-top: 90px;
}

.bg-shade {
    background: var(--mp-canvas);
}

.section-label {
    color: var(--mp-cyan);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .85rem;
}

.box-item {
    border-radius: var(--mp-radius);
    overflow: hidden;
    box-shadow: var(--mp-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.box-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--mp-shadow-lift);
}

.content-box-2,
.summary-box,
.createanevent,
.contactusbox {
    background: #fff;
    border: none;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
}

.eventpage .heading,
.main-content-user .heading {
    color: var(--mp-ink);
    font-weight: 700;
    letter-spacing: -.3px;
}

/* Tabs on the listing pages */
.nav-tabs .nav-link {
    color: var(--mp-muted);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 18px;
}

.nav-tabs .nav-link.active {
    color: var(--mp-cyan-dark);
    background: transparent;
    border-bottom-color: var(--mp-cyan);
}

/* ---------- Tables (tag-styled in the template; retake them) ---------- */

table.file-table thead th,
.claimed-media-table th,
table.pip th {
    background: transparent;
    color: var(--mp-muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--mp-line);
    padding: 12px 14px;
}

table.file-table tbody td,
.claimed-media-table td,
table.pip td {
    border-top: 1px solid #f0f3f8;
    padding: 13px 14px;
    vertical-align: middle;
    color: #2a2f37;
}

table.file-table tbody tr:hover td,
.claimed-media-table tr:hover td {
    background: #f4fbfc;
}

/* ---------- Forms ---------- */

.form-control,
.input-text-field,
select.form-select,
textarea.form-control {
    border-radius: var(--mp-radius-sm);
    border-color: #dfe4ec;
}

.form-control:focus,
.input-text-field:focus,
select.form-select:focus,
textarea.form-control:focus {
    border-color: var(--mp-cyan);
    box-shadow: 0 0 0 3px rgba(70, 183, 197, .16);
}

.form-check-input:checked {
    background-color: var(--mp-cyan);
    border-color: var(--mp-cyan);
}

/* ---------- Modals ---------- */

.modal .modal-content {
    border: none;
    border-radius: var(--mp-radius);
    box-shadow: 0 24px 64px rgba(16, 24, 40, .25);
}

.modal .modal-header {
    border-bottom: 1px solid #f0f3f8;
}

.modal .modal-title {
    color: var(--mp-ink);
    font-weight: 700;
}

.modal .modal-footer {
    border-top: 1px solid #f0f3f8;
}

/* ---------- Footer: quiet, dark, grown-up ---------- */

footer {
    background: var(--mp-ink);
    color: #9aa3af;
    margin-top: clamp(2.5rem, 6vw, 5rem);
}

footer .label {
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
}

footer nav a,
footer .nav-link {
    color: #9aa3af !important;
    padding-left: 0;
    transition: color .15s ease;
}

footer nav a:hover,
footer .nav-link:hover {
    color: #5fd0de !important;
}

/* ---------- Quiet scrollbars (WebKit + Firefox) ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: #c6cdd8 transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: #c6cdd8;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ---------- Motion respect ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .box-item,
    .update-btn, .btn-mp, .join-missingpage,
    .login-box.login-shake {
        transition: none;
        animation: none;
    }
}

/* ---------- Services page ---------- */

.services-hero {
    background: var(--mp-ink);
    padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.services-hero .section-label {
    color: #5fd0de;
}

.services-title {
    color: #fff;
    font-family: 'Nexa-Bold', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -.5px;
    margin: .5rem 0 1.2rem;
}

.services-title span {
    color: var(--mp-cyan);
}

.services-title em {
    font-style: normal;
    border-bottom: 3px solid var(--mp-cyan);
}

.services-lead {
    color: #b9c0cc;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    max-width: 640px;
}

.services-card {
    border: none;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}

.services-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mp-shadow-lift);
}

.services-card .card-title {
    font-family: 'Nexa-Bold', sans-serif;
    color: var(--mp-ink);
    margin-bottom: .6rem;
}

.services-card .card-text {
    color: #5b6270;
    line-height: 1.65;
}

.services-cta {
    background: var(--mp-canvas);
}

.services-cta-title {
    font-family: 'Nexa-Bold', sans-serif;
    color: var(--mp-ink);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.25;
    letter-spacing: -.4px;
}

.services-cta-text {
    color: var(--mp-muted);
    max-width: 460px;
    margin: 1rem auto 1.6rem;
    line-height: 1.65;
}

.services-cta-btn {
    display: inline-block;
    padding: 14px 36px;
}

.services-cta-small {
    margin-top: 1.2rem;
    color: var(--mp-muted);
    font-size: .9rem;
}

.services-cta-small a {
    color: var(--mp-cyan-dark);
}

/* ---------- Signed-in listing pages (My Pages / My Events) ---------- */

.main-content-user,
.main-page-content {
    padding: clamp(1.8rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: var(--mp-canvas);
    min-height: 60vh;
}

/* The listing lives on a card instead of floating on the page background */
.eventpage {
    background: #fff;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: clamp(1.2rem, 3vw, 2rem);
}

.eventpage .heading,
.main-content-user .heading {
    font-size: 1.45rem;
}

.eventpage .nav-tabs {
    margin-top: .75rem;
    border-bottom: 1px solid var(--mp-line) !important;
    gap: .25rem;
}

.eventpage .tab-content {
    padding-top: .5rem;
}

.eventpage table.file-table {
    margin-top: 1.25rem;
}

/* Load more: a quiet action, not a hero button in a table footer */
.tbl-load-more-btn {
    background: transparent !important;
    color: var(--mp-cyan-dark) !important;
    border: 1px solid rgba(70, 183, 197, .45) !important;
    border-radius: 999px !important;
    padding: 7px 20px;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: none !important;
}

.tbl-load-more-btn:hover {
    background: rgba(70, 183, 197, .1) !important;
    color: var(--mp-cyan-deep) !important;
}

.eventpage tfoot th {
    border: none;
    padding-top: 1rem;
}

/* Tab tooltips: small ink cards instead of the template's raw popover */
.eventpage .popover__content {
    background: var(--mp-ink);
    color: #d7dce4;
    border: none;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .28);
    padding: 10px 14px;
    font-size: .82rem;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Empty states read as information, not as a lonely table cell */
.eventpage tbody td[colspan] {
    color: var(--mp-muted);
    padding: 2rem 1rem;
    text-align: center;
}

/* The Received tab's recipient/executor switch */
.claim-media {
    margin: .5rem 0 0;
}

.claim-media .form-check-label {
    font-weight: 600;
    color: #3d434b;
}

/* Inline step panels (Add Maturity Date) join the card language */
.maturityDiv {
    background: #fff;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: clamp(1.2rem, 3vw, 2rem);
    margin-top: 1rem;
}

.backToTabView {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef1f6;
    color: #3d434b !important;
    text-decoration: none;
    font-weight: 700;
}

.backToTabView:hover {
    background: rgba(70, 183, 197, .15);
    color: var(--mp-cyan-deep) !important;
}

/* Dark heroes rise up behind the floating pill so no white strip shows above
   them; their inner padding gives that space back to the content. */
.background-video,
.services-hero {
    margin-top: -82px;
    padding-top: 82px;
}

/* ---------- Scroll-aware island + wordmark ---------- */

.brand-word {
    font-family: 'Nexa-Heavy', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 2px;
    color: var(--mp-ink);
    text-decoration: none !important;
    white-space: nowrap;
}

.brand-word em {
    font-style: normal;
    color: var(--mp-cyan);
}

.brand-word:hover {
    color: var(--mp-ink);
}

.top-menu,
.main-page header .row {
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.top-menu .main-nav .nav-link,
.nav-auth .nav-login,
.brand-word {
    transition: color .2s ease, background-color .2s ease;
}

/* Over a dark hero, before any scrolling: the pill is dark glass */
header.over-dark:not(.is-scrolled) .top-menu {
    background: rgba(16, 18, 22, .5);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

header.over-dark:not(.is-scrolled) .brand-word {
    color: #fff;
}

header.over-dark:not(.is-scrolled) .top-menu .main-nav .nav-link,
header.over-dark:not(.is-scrolled) .nav-auth .nav-login {
    color: #dfe4ec;
}

header.over-dark:not(.is-scrolled) .top-menu .main-nav .nav-link:hover,
header.over-dark:not(.is-scrolled) .nav-auth .nav-login:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

header.over-dark:not(.is-scrolled) .top-menu .main-nav .nav-link.active,
header.over-dark:not(.is-scrolled) .top-menu .main-nav li.active .nav-link {
    color: #5fd0de;
    background: rgba(255, 255, 255, .1);
}

header.over-dark:not(.is-scrolled) .navbar-toggler-icon {
    filter: invert(1);
}

/* Scrolled: a touch tighter, a firmer shadow */
header.is-scrolled .top-menu,
header.is-scrolled .main-page header .row {
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 10px rgba(16, 24, 40, .08), 0 16px 40px rgba(16, 24, 40, .14);
}

/* The expanded mobile sheet must stay readable whatever the pill state */
@media (max-width: 991.98px) {
    header.over-dark:not(.is-scrolled) .top-menu .navbar-collapse .nav-link,
    header.over-dark:not(.is-scrolled) .top-menu .navbar-collapse .nav-login {
        color: #3d434b;
    }
}

/* ---------- Claim media ---------- */

.claim-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.claim-subtitle {
    color: var(--mp-muted);
    margin: .35rem 0 0;
    max-width: 480px;
}

.claim-actions {
    display: flex;
    gap: .6rem;
    align-items: center;
}

/* Per Srikanth: the header action pairs (Create X / My X) should match, not
   split into primary and ghost - both wear the gradient. */
.claim-ghost-btn {
    background: var(--mp-grad);
    color: #fff;
    border: none;
    border-radius: var(--mp-radius-sm);
    padding: 11px 22px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(70, 183, 197, .32);
    transition: background .15s ease, box-shadow .15s ease;
}

.claim-ghost-btn:hover {
    background: var(--mp-grad-hover);
    color: #fff;
    box-shadow: 0 6px 18px rgba(70, 183, 197, .42);
}

/* The claim form is one centred, focused card */
.claim-card {
    max-width: 560px;
    margin: 1.5rem auto 1rem;
    text-align: left;
}

.claim-question {
    display: block;
    font-weight: 600;
    color: var(--mp-ink);
    margin-bottom: .6rem;
}

/* Segmented control: radios hidden, labels share a pill track */
.mp-segment {
    display: inline-flex;
    background: #eef1f6;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 1.25rem;
}

.mp-segment-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mp-segment-label {
    padding: 8px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--mp-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.mp-segment-input:checked + .mp-segment-label {
    background: #fff;
    color: var(--mp-cyan-deep);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

.mp-segment-input:focus-visible + .mp-segment-label {
    outline: 2px solid var(--mp-cyan);
    outline-offset: 2px;
}

/* The code is the hero of this screen */
.claim-code-input {
    font-size: 1.15rem !important;
    letter-spacing: 3px;
    font-weight: 600;
}

/* The code the recipient types/pastes must always be readable. A global
   input:focus-within rule forces a white background, and browser autofill can
   recolour the text - so pin dark text on white for this field in every state
   (incl. focus and -webkit autofill), or the pasted code goes invisible. */
.claim-code-input,
.claim-code-input:focus,
.claim-code-input:focus-within,
.claim-code-input:-webkit-autofill {
    color: #1c2330 !important;
    background-color: #fff !important;
    -webkit-text-fill-color: #1c2330 !important;
    caret-color: #1c2330;
}

.claim-submit {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: .25rem;
    float: none !important;
}

.claim-help {
    color: var(--mp-muted);
    font-size: .85rem;
    line-height: 1.55;
    margin-top: 1.25rem;
}

.claim-pane {
    margin-top: .25rem;
}

/* Claim phone pane: undo the template's float and tame select2 */

.claim-card .claim-phone {
    float: none;
    margin: 0;
    width: 100%;
}

.claim-field-label {
    display: block;
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 6px;
}

.claim-card .select2-container {
    width: 100% !important;
}

.claim-card .select2-container .select2-selection--single {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid #dfe4ec;
    border-radius: var(--mp-radius-sm);
}

.claim-card .select2-container .select2-selection__rendered {
    line-height: normal;
    padding-left: 0;
    color: #2a2f37;
}

.claim-card .select2-container .select2-selection__arrow {
    height: 54px;
    right: 10px;
}

.claim-card .select2-container--open .select2-selection--single,
.claim-card .select2-container--focus .select2-selection--single {
    border-color: var(--mp-cyan);
    box-shadow: 0 0 0 3px rgba(70, 183, 197, .16);
}

.select2-dropdown {
    border: none;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .18);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mp-cyan);
}

/* The legacy floats that pushed the submit link out of line */
.claim-card .send,
.claim-card .update-btn {
    float: none !important;
    clear: none !important;
}

/* ---------- Support page ---------- */

.support-hero {
    background: var(--mp-ink);
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    margin-top: -82px;
    padding-top: calc(clamp(2.5rem, 6vw, 4.5rem) + 82px);
}

.support-option {
    display: block;
    width: 100%;
    height: 100%;
    text-align: left;
    background: #fff;
    border: none;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 1.4rem 1.5rem;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
}

.support-option:hover {
    transform: translateY(-3px);
    box-shadow: var(--mp-shadow-lift);
}

.support-option-title {
    display: block;
    font-family: 'Nexa-Bold', sans-serif;
    color: var(--mp-ink);
    font-size: 1.05rem;
    margin-bottom: .4rem;
}

.support-option-text {
    display: block;
    color: var(--mp-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.support-section-title {
    font-family: 'Nexa-Bold', sans-serif;
    color: var(--mp-ink);
    font-size: 1.4rem;
    letter-spacing: -.3px;
    margin-bottom: 1rem;
}

/* FAQ: native <details>, dressed */
.faq-item {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--mp-shadow);
    margin-bottom: .6rem;
    overflow: hidden;
}

.faq-item summary {
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--mp-ink);
    list-style: none;
    position: relative;
    padding-right: 2.6rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mp-cyan-dark);
    font-size: 1.3rem;
    font-weight: 600;
    transition: transform .15s ease;
}

.faq-item[open] summary::after {
    content: "\2212";
}

.faq-item p {
    padding: 0 1.25rem 1.1rem;
    margin: 0;
    color: #5b6270;
    line-height: 1.65;
}

.faq-item a { color: var(--mp-cyan-dark); }

.support-form-card { max-width: 640px; }

.support-textarea { min-height: 140px; }

/* ---------- Chat assistant ---------- */

.mp-chat-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1050;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    font-size: 1.35rem;
    background: var(--mp-grad);
    box-shadow: 0 8px 24px rgba(70, 183, 197, .45);
    cursor: pointer;
    transition: transform .15s ease;
}

.mp-chat-launcher:hover { transform: scale(1.06); }

.mp-chat-panel {
    position: fixed;
    right: 22px;
    bottom: 90px;
    z-index: 1050;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: min(560px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(16, 24, 40, .3);
    overflow: hidden;
}

.mp-chat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--mp-ink);
    color: #fff;
    padding: 14px 16px;
}

.mp-chat-title { font-weight: 700; }

.mp-chat-sub { font-size: .74rem; color: #9aa3af; }

.mp-chat-close {
    background: none;
    border: none;
    color: #9aa3af;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.mp-chat-close:hover { color: #fff; }

.mp-chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 160px;
}

.mp-chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.5;
}

.mp-chat-bot {
    background: #f1f4f8;
    color: #2a2f37;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.mp-chat-me {
    background: var(--mp-grad);
    color: #fff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.mp-chat-link {
    color: var(--mp-cyan-deep);
    font-weight: 600;
}

.mp-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 10px;
}

.mp-chat-chip {
    background: rgba(70, 183, 197, .1);
    color: var(--mp-cyan-deep);
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.mp-chat-chip:hover { background: rgba(70, 183, 197, .2); }

.mp-chat-inputrow {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--mp-line);
}

.mp-chat-inputrow input {
    flex: 1;
    border: 1px solid #dfe4ec;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: .9rem;
}

.mp-chat-inputrow input:focus {
    outline: none;
    border-color: var(--mp-cyan);
    box-shadow: 0 0 0 3px rgba(70, 183, 197, .15);
}

.mp-chat-inputrow button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--mp-grad);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Header action pairs (Create X / My X): identical geometry, whatever mix of
   classes each page's buttons carry */
.claim-actions {
    flex-wrap: wrap;
}

.claim-actions .update-btn,
.claim-actions .claim-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px !important;
    margin: 0 !important;
    float: none !important;
    font-size: .95rem;
    line-height: 1;
    white-space: nowrap;
}

/* ---------- Services: menu-based layout ---------- */

.services-menu {
    position: sticky;
    top: 84px; /* sits just under the floating island */
    z-index: 900;
    padding: 10px 0;
}

.services-menu-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--mp-line);
    border-radius: 999px;
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .08);
}

.services-menu-track::-webkit-scrollbar { display: none; }

.services-menu-pill {
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--mp-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

.services-menu-pill:hover {
    color: var(--mp-cyan-dark);
    background: rgba(70, 183, 197, .08);
}

.services-menu-pill.active {
    background: var(--mp-grad);
    color: #fff;
    box-shadow: 0 3px 10px rgba(70, 183, 197, .35);
}

.svc-section {
    padding: clamp(3rem, 7vw, 5rem) 0;
    scroll-margin-top: 150px;
}

.svc-alt {
    background: var(--mp-canvas);
}

.svc-title {
    font-family: 'Nexa-Bold', sans-serif;
    color: var(--mp-ink);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: -.4px;
    margin: .4rem 0 1rem;
}

.svc-text {
    color: #5b6270;
    line-height: 1.75;
    font-size: 1.02rem;
    max-width: 520px;
}

.svc-btn {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 12px 28px;
}

/* One concrete moment per section: a quiet card in the product's voice */
.svc-moment {
    background: var(--mp-ink);
    border-radius: var(--mp-radius);
    padding: clamp(1.6rem, 4vw, 2.5rem);
    box-shadow: var(--mp-shadow-lift);
    max-width: 460px;
    margin: 0 auto;
}

.svc-moment p {
    font-family: 'Nexa-Bold', sans-serif;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.svc-moment span {
    color: #5fd0de;
    font-size: .85rem;
    letter-spacing: .5px;
}

/* ---------- News feed ---------- */

.newsfeed-filter {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    background: #fff;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 1.1rem 1.25rem;
}

.newsfeed-filter-field {
    flex: 1 1 150px;
}

.newsfeed-filter-search {
    flex: 2 1 240px;
}

.newsfeed-filter-actions {
    display: flex;
    gap: .5rem;
}

.newsfeed-filter-actions .btn {
    height: 46px;
    display: inline-flex;
    align-items: center;
}

.newsfeed-reset {
    background: #eef1f6 !important;
    color: #3d434b !important;
    border: none !important;
    border-radius: var(--mp-radius-sm) !important;
    font-weight: 600;
}

.newsfeed-reset:hover {
    background: #e2e7ef !important;
}

/* Feed entries as cards */
.newsfeed-box .card-item {
    background: #fff;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.1rem;
}

.newsfeed-box .username {
    color: var(--mp-ink);
}

.newsfeed-box .username span {
    font-weight: 700;
}

.newsfeed-box .date {
    color: var(--mp-muted);
    font-size: .8rem;
    margin-top: 2px;
}

.newsfeed-box .card-text {
    color: #5b6270;
    line-height: 1.65;
}

.newsfeed-box .carousel-item,
.newsfeed-box .media-content img {
    border-radius: 12px;
    overflow: hidden;
}

.newsfeed-box .viewMoreDescr {
    color: var(--mp-cyan-dark);
    font-weight: 600;
    cursor: pointer;
}

/* ---------- Invitation sharing ---------- */

.mp-invite-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(70, 183, 197, .12);
    color: var(--mp-cyan-deep) !important;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none !important;
}

.mp-invite-btn:hover {
    background: var(--mp-grad);
    color: #fff !important;
}

#mp-share-sheet .mp-share-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 18, 22, .55);
    z-index: 1060;
}

#mp-share-sheet .mp-share-card {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1061;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(16, 24, 40, .3);
    padding: 22px;
}

.mp-share-title {
    font-family: 'Nexa-Bold', sans-serif;
    color: var(--mp-ink);
    font-size: 1.1rem;
}

.mp-share-sub {
    color: var(--mp-muted);
    font-size: .85rem;
    margin: 6px 0 14px;
}

.mp-share-opt {
    display: block;
    width: 100%;
    text-align: left;
    background: #f4f6fa;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    color: var(--mp-ink);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

.mp-share-opt:hover {
    background: rgba(70, 183, 197, .14);
    color: var(--mp-cyan-deep);
}

.mp-share-cancel {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--mp-muted);
    padding: 8px;
    margin-top: 4px;
    cursor: pointer;
}

/* Create-flow summary: the popup behind it is the template's teal gradient
   over a patterned image, which made text contrast a lottery - the maturity
   date lost. The summary gets its own opaque ink panel, so white text on it
   is guaranteed whatever the popup wears. */
.pageSummaryDiv .summary-box {
    background: #14181f;
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.pageSummaryDiv label,
.pageSummaryDiv p,
.pageSummaryDiv span {
    color: #fff !important;
}

.pageSummaryDiv .text-summary > label {
    color: #5fd0de !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: .72rem !important;
}

.pageSummaryDiv .text-summary p {
    /* MP-132: body sets font-size:1.5rem (main-style.css), so an em value here inherited
       that and rendered ~23px. Pin to an absolute size instead. */
    font-size: 16px !important;
    line-height: 1.6;
}

/* Event create summary had the same trap in reverse: site-modern paints
   .summary-box white, but main-style paints .text-summary p white -> white
   text on white. Give the event summary the same opaque dark panel so it
   reads regardless of the teal popup behind it. */
.summaryDiv .summary-box {
    background: #14181f;
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.summaryDiv .summary-box label,
.summaryDiv .summary-box p,
.summaryDiv .summary-box span {
    color: #fff !important;
}

.summaryDiv .summary-box .text-summary > label {
    color: #5fd0de !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: .72rem !important;
}

.summaryDiv .summary-box .text-summary p {
    font-size: 16px !important;
    line-height: 1.6;
}

/* MP-132: Contributors/Maturity Date render their value as a nested <label> inside the
   <p> (unlike the other fields' plain text), and main-style.css's .text-summary label
   sizes any label at 0.8em regardless of nesting depth - match the plain-text values. */
.summaryDiv .summary-box .text-summary p label,
.pageSummaryDiv .summary-box .text-summary p label {
    font-size: 16px !important;
}

/* ---------- Create wizards (page + event popups) ---------- */

/* The full-screen sheet: ink, not the teal gradient with a pattern image */
.create-a-page,
.createanevent {
    background-image: linear-gradient(165deg, #0e1116 0%, #171d26 55%, #101216 100%) !important;
    scrollbar-color: #3a4150 transparent;
}

/* Panels get a consistent centred column */
.create-a-page [data-target],
.createanevent [data-target] {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.heading-popup {
    font-family: 'Nexa-Bold', sans-serif;
    font-size: 1.45rem; /* #42 — match every top-level page title (.main-content-user .heading) */
    letter-spacing: -.3px;
}

.closePageEvent img {
    filter: invert(1);
    opacity: .7;
    transition: opacity .15s ease;
}

.closePageEvent:hover img {
    opacity: 1;
}

/* Step indicator: the chevron blocks become a pill rail */
.steps-progress {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    border-radius: 999px;
    padding: 5px;
    gap: 6px;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    scrollbar-width: none;
    /* MP-117: main-style.css's margin:20px auto 30px was sized for the old, much taller
       chevron bar - keep the pill rail centered but trim the dead space above/below it so
       the step content below (worst on the Maturity step) needs less scrolling to reach. */
    margin: 10px auto 14px;
}

.steps-progress::-webkit-scrollbar { display: none; }

.steps-progress li span,
.steps-progress li .span {
    background: transparent !important;
    color: #8b93a1;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 9px 18px 9px 40px !important;
    /* MP-117: the legacy chevron design's bare .span rule (main-style.css) hardcodes
       height:60px - more than double what this pill actually needs, and the single biggest
       contributor to the ribbon crowding out the content below (worst on the Maturity step,
       which is tall to begin with). Let it size to its own padding + line-height instead. */
    height: auto !important;
    /* MP-121's info icon is a 26px circle pinned top:8px (main-style.css .popover__wrapper) -
       the auto-height pill above lands right around 35px, barely enough to contain it. A
       little floor here keeps the icon fully inside the pill instead of poking out past its
       bottom edge. */
    min-height: 40px;
    position: relative;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

/* No more arrows */
.steps-progress li span::before,
.steps-progress li span::after,
.steps-progress li .span::before,
.steps-progress li .span::after,
.span.active1::after,
.span.active1::before {
    content: none !important;
}

.number_step {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
}

/* Completed steps: cyan. MP-126: the event wizard tracks its ribbon with its own
   non-"-modal" class names (.active1/.current1, set by eventNextTab()/#eventPrev/#eventNext
   in Index.js) rather than the page wizard's .active1-modal/.current1-modal - same pills,
   same intent, so styled together here instead of duplicated. */
.steps-progress .span.active1-modal,
.steps-progress .span.active1 {
    color: #5fd0de;
}

.steps-progress .span.active1-modal .number_step,
.steps-progress .span.active1 .number_step {
    background: rgba(70, 183, 197, .25);
}

/* Current step: the one lit pill */
.steps-progress li.current1-modal > .span,
.steps-progress li.current1-modal > span,
.steps-progress li.current1 > .span,
.steps-progress li.current1 > span {
    background: linear-gradient(135deg, #46b7c5, #2e8fa3) !important;
    color: #fff !important;
}

.steps-progress li.current1-modal .number_step,
.steps-progress li.current1 .number_step {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* #41 — tablet/desktop: let each step pill size to its label so they don't collide.
   media.css pins .steps-progress li span to fixed widths (110/80px) below 1100px — a
   leftover from the old icon-only design — which clips the nowrap labels ("Record/Upload",
   "Description") onto their neighbours. Override so pills hug their content; the row already
   scrolls (overflow-x:auto) if it ever runs out of room. Scoped >736px so the small-mobile
   icon-only pills (media.css font-size:0 at 736) are untouched. */
@media (min-width: 737px) {
    .steps-progress { flex-wrap: nowrap; }
    .steps-progress li { flex: 0 0 auto; }
    .steps-progress li span,
    .steps-progress li .span {
        width: auto !important;
        font-size: .8rem !important;
        padding: 8px 14px 8px 36px !important;
    }
    .steps-progress .number_step { left: 7px; }
}

/* "Publish on Newsfeed" moved to the top of the Summary step — a make-it-public choice
   deserves to be seen before submit, not buried under the summary. Styled as a callout. */
.mp-publish-newsfeed.form-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: rgba(70, 183, 197, .12);
    border: 1px solid rgba(70, 183, 197, .45);
    border-radius: 12px;
}
.mp-publish-newsfeed .form-check-input {
    float: none;
    margin: 0;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}
.mp-publish-newsfeed .form-check-label {
    color: #eaf7fa !important;
    font-weight: 600;
    margin: 0;
}

/* Step tooltips flip to white cards on the dark sheet. MP-121: the base rule (main-style.css)
   sets only min-width:310px with no max-width, so with real instructional sentences (not the
   short text it was probably written against) the box never wraps - it renders as a single
   ~950px-wide line that the ribbon's own overflow-x:auto then clips. Bound it to a sane
   wrapping width instead. */
.steps-progress .popover__content {
    background: #fff;
    color: #3d434b;
    border: none;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
    padding: 12px 15px;
    font-size: .8rem;
    line-height: 1.55;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    min-width: 0;
    width: 260px;
    /* Centered under its icon instead of hanging off to the right (main-style.css's left:0) -
       a fixed-width box centered like this stays clear of both ribbon edges for every step
       except the last, which already has its own left:-327px flip below; margin-left (not
       transform) so it doesn't fight the hover/focus reveal's own translate(). */
    left: 50%;
    margin-left: -130px;
}

/* MP-121: the icon's actual clickable box was the raw 20x20 glyph (main-style.css) - easy to
   miss with a real mouse. Give it a bigger, round hit/hover target without inflating the glyph
   itself, and visible hover/focus/open feedback (it previously gave none, so a near-miss looked
   identical to a successful click). */
.steps-progress li .popover__wrapper {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    transition: background-color .15s ease;
}
.steps-progress li .popover__wrapper:hover,
.steps-progress li .popover__wrapper:focus-within,
.steps-progress li .popover__wrapper.is-open {
    background-color: rgba(255, 255, 255, .16);
}
.steps-progress li .popover__title {
    width: 16px; height: 16px; min-width: 16px;
    /* MP-131: match main-style.css's !important top:10px and (on completed .active1 steps)
       background-size:20px, or they win and the icon sits low / renders oversized and clipped */
    background-size: 16px !important;
    top: 0 !important; right: 0; margin: 0;
}
/* MP-131: the Create-a-Page wizard's completed steps use .active1-modal instead of .active1 -
   main-style.css/media.css both carry a higher-specificity background-size:20px !important
   just for that selector, so it needs its own matching override here. */
.steps-progress li .active1-modal .popover__title {
    background-size: 16px !important;
}

/* Text on the dark sheet reads light... */
.create-a-page label,
.create-a-page p,
.create-a-page .form-check-label,
.create-a-page .heading,
.createanevent label,
.createanevent p,
.createanevent .form-check-label,
.createanevent .heading {
    color: #c7cdd6;
}

/* ...except floating labels, which sit over white inputs */
.create-a-page .form-floating > label,
.createanevent .form-floating > label {
    color: #6b7280 !important;
}

/* main-style.css's `.input-text-field form input[type="text"], input[type="password"]`
   and `.input-text-field textarea` rules were written for the full-page login/signup
   forms (20-23px, big touch targets) but also catch Event Name/Occasion/Event ID/Event
   Password/description here since this form sits inside a shared .input-text-field
   wrapper - pin them back to the normal form-control size used everywhere else. */
.createanevent .input-text-field input[type="text"],
.createanevent .input-text-field textarea {
    font-size: .875rem;
}

/* Upload grid on the dark sheet */
.create-a-page .file-table th,
.createanevent .file-table th {
    color: #8b93a1 !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

.create-a-page .file-table td,
.createanevent .file-table td {
    color: #dfe4ec;
    border-color: rgba(255, 255, 255, .08);
    background: transparent;
}

.create-a-page .file-table td a,
.createanevent .file-table td a {
    color: #5fd0de;
}

.create-a-page .file-table .remove,
.createanevent .file-table .remove {
    color: #ff8a8f;
    cursor: pointer;
}

/* Wizard navigation: previous quiet, next loud */
#pagePrev, #eventPrev {
    background: rgba(255, 255, 255, .1) !important;
    color: #dfe4ec !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: none !important;
}

#pagePrev:hover, #eventPrev:hover {
    background: rgba(255, 255, 255, .18) !important;
}

/* MP-120: Submit must visibly read as disabled while required fields are missing, not just
   silently ignore clicks. */
#pageSubmit:disabled {
    opacity: .4;
    filter: grayscale(.4);
    cursor: not-allowed;
    box-shadow: none;
}

/* Errors must survive the dark sheet */
.create-a-page #file-error,
.create-a-page .invalid-feedback,
.create-a-page .field-validation-error,
.createanevent .invalid-feedback,
.createanevent .field-validation-error {
    color: #ff8a8f !important;
}

/* PDF frames need real height to be a reader, not a letterbox */
#iframeID .iframe,
.modal-body .iframe {
    width: 100%;
    height: min(75vh, 900px);
    border: none;
    border-radius: 8px;
    background: #fff;
}

/* ---------- Guided prompts on the description step ---------- */

#mp-prompts {
    margin-bottom: 12px;
}

.mp-prompts-label {
    color: #c7cdd6;
    font-size: .85rem;
    margin-bottom: 8px;
}

.mp-prompts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mp-prompt-chip {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #dfe4ec;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.mp-prompt-chip:hover {
    background: rgba(70, 183, 197, .25);
    color: #fff;
}

/* Draft restore bar at the top of the wizard */
#mp-draft-bar {
    max-width: 900px;
    margin: 0 auto 14px;
    background: rgba(70, 183, 197, .14);
    border: 1px solid rgba(70, 183, 197, .35);
    border-radius: 12px;
    padding: 12px 16px;
    color: #dfe4ec;
    font-size: .9rem;
}

#mp-draft-bar button {
    margin-left: 10px;
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

#mp-draft-restore {
    background: linear-gradient(135deg, #46b7c5, #2e8fa3);
    color: #fff;
}

#mp-draft-discard {
    background: rgba(255, 255, 255, .12);
    color: #c7cdd6;
}

/* Preview + opened affordances in the recipients modal */
.mp-preview-link {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(70, 183, 197, .12);
    color: var(--mp-cyan-deep) !important;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none !important;
}

.mp-preview-link:hover {
    background: var(--mp-grad);
    color: #fff !important;
}

.mp-opened-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(46, 165, 143, .15);
    color: #1e7a68;
    font-size: .75rem;
    font-weight: 700;
}

/* ---------- Readiness meter ---------- */

.mp-ready-card {
    background: #fff;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
}

.mp-ready-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.mp-ready-title {
    font-family: 'Nexa-Bold', sans-serif;
    color: var(--mp-ink);
    font-size: 1.05rem;
}

.mp-ready-score {
    color: var(--mp-cyan-deep);
    font-weight: 700;
}

.mp-ready-bar {
    height: 8px;
    background: #eef1f6;
    border-radius: 999px;
    margin: 10px 0 14px;
    overflow: hidden;
}

.mp-ready-bar span {
    display: block;
    height: 100%;
    background: var(--mp-grad);
    border-radius: 999px;
    transition: width .4s ease;
}

.mp-ready-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    color: #5b6270;
    border-bottom: 1px solid #f3f5f9;
}

.mp-ready-row:last-child { border-bottom: none; }

.mp-ready-row.ok { color: #2a2f37; }

.mp-ready-mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    background: #eef1f6;
    color: var(--mp-muted);
    flex-shrink: 0;
}

.mp-ready-row.ok .mp-ready-mark {
    background: rgba(46, 165, 143, .15);
    color: #1e7a68;
}

.mp-ready-fix {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 700;
    color: var(--mp-cyan-deep);
    text-decoration: none;
    background: rgba(70, 183, 197, .1);
    border-radius: 999px;
    padding: 3px 12px;
}

.mp-ready-fix:hover {
    background: var(--mp-grad);
    color: #fff;
}

/* Backup executor rows in the wizard */
.mp-add-backup-btn {
    margin-top: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px dashed rgba(255, 255, 255, .3);
    color: #dfe4ec;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.mp-add-backup-btn:hover {
    background: rgba(70, 183, 197, .18);
}

.mp-backup-note {
    color: #8b93a1;
    font-size: .8rem;
    margin-top: 8px;
    line-height: 1.55;
}

.mp-backup-row {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px;
}

.mp-backup-remove-wrap { text-align: right; }

.mp-backup-remove {
    color: #ff8a8f !important;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
}

/* Family card link at the foot of the readiness meter */
.mp-ready-card-link {
    display: block;
    margin-top: 12px;
    padding: 11px 16px;
    text-align: center;
    background: rgba(70, 183, 197, .1);
    border: 1px dashed rgba(70, 183, 197, .45);
    border-radius: 12px;
    color: var(--mp-cyan-deep) !important;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none !important;
}

.mp-ready-card-link:hover {
    background: var(--mp-grad);
    color: #fff !important;
    border-style: solid;
}

/* ---------- "Your people" on the recipients step ---------- */

#mp-your-people {
    margin-bottom: 14px;
}

.mp-your-people-label {
    color: #c7cdd6;
    font-size: .85rem;
    margin-bottom: 8px;
}

.mp-your-people-row,
.mp-exec-people-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mp-exec-people { margin-bottom: 14px; }

.mp-person-chip {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #dfe4ec;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.mp-person-chip:hover {
    background: rgba(70, 183, 197, .25);
    color: #fff;
}

.mp-person-chip.used {
    background: linear-gradient(135deg, #46b7c5, #2e8fa3);
    color: #fff;
    border-color: transparent;
}

/* ---------- Address book ---------- */

.mp-ab-list {
    margin-top: .75rem;
}

.mp-ab-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr 1.2fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f3f8;
}

@media (max-width: 767.98px) {
    .mp-ab-row { grid-template-columns: 1fr 1fr; }
}

.mp-ab-actions {
    display: flex;
    gap: 6px;
}

.mp-ab-save, .mp-ab-del {
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.mp-ab-save {
    background: var(--mp-grad);
    color: #fff;
}

.mp-ab-del {
    background: #fdecec;
    color: #b3363c;
}

.mp-ab-empty {
    color: var(--mp-muted);
    padding: 1.5rem 0;
    text-align: center;
}

.mp-your-people-manage {
    margin-left: 8px;
    color: #5fd0de;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Address book v2 ---------- */

/* Quick filters (surface junk from a big import) + bulk select/remove bar. */
/* Advanced tools panel — collapsed by default so the everyday view stays calm. */
.mp-ab-advanced { border: 1px solid var(--mp-line, #e7ebf2); border-radius: 14px; background: #fafbfd; padding: 12px 14px; margin: .25rem 0 .75rem; }
.mp-ab-adv-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px dashed var(--mp-line, #e7ebf2); }
.mp-ab-adv-label, .mp-ab-quick-label { font-size: .78rem; color: var(--mp-muted, #7b8492); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mp-ab-advtoggle.mp-ab-adv-on { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.12); color: var(--mp-cyan-deep, #2e8fa3); }
.mp-ab-adv-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e6a23c; vertical-align: middle; margin-left: 2px; }
.mp-ab-advtoggle.mp-ab-adv-hasfilter { border-color: #e6a23c; color: #b9791f; }

.mp-ab-quick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.mp-ab-quick-label { font-size: .82rem; color: var(--mp-muted, #7b8492); font-weight: 600; }
.mp-ab-qf { background: #fff; border: 1px dashed rgba(70,183,197,.5); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; color: #3d434b; cursor: pointer; }
.mp-ab-qf:hover { background: rgba(70,183,197,.1); }
.mp-ab-qf.active { border-style: solid; border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.16); color: var(--mp-cyan-deep, #2e8fa3); }
.mp-ab-merge-dupes { border-style: solid !important; border-color: #7c6fd0 !important; background: rgba(124,111,208,.12) !important; color: #6152b8 !important; }
.mp-ab-merge-dupes:hover { background: rgba(124,111,208,.2) !important; }
.mp-ab-selecttoggle { margin-left: auto; background: #fff; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; padding: 5px 14px; font-size: .82rem; font-weight: 700; color: #3d434b; cursor: pointer; }
.mp-ab-selecttoggle.on { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.14); color: var(--mp-cyan-deep, #2e8fa3); }
.mp-ab-selbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; background: #eef7f9; border: 1px solid rgba(70,183,197,.35); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.mp-ab-selall { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: #344; margin: 0; cursor: pointer; }
.mp-ab-selcount { font-size: .86rem; color: var(--mp-muted, #7b8492); }
.mp-ab-remove-selected { background: #dc3545; color: #fff; border: 0; border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: .84rem; cursor: pointer; }
.mp-ab-remove-selected:disabled { opacity: .5; cursor: default; }
.mp-ab-selcancel { margin-left: auto; background: none; border: 0; color: var(--mp-cyan-deep, #2e8fa3); font-weight: 700; cursor: pointer; }
.mp-ab-cb { width: 18px; height: 18px; margin-right: 10px; flex: 0 0 auto; cursor: pointer; }
.mp-ab-row.mp-ab-selectable .mp-ab-row-head { align-items: center; }
.mp-ab-row.mp-ab-selected { background: rgba(70,183,197,.10); border-radius: 12px; }
.mp-ab-selall-btn { background: #fff; border: 1px solid var(--mp-cyan-deep, #2e8fa3); color: var(--mp-cyan-deep, #2e8fa3); border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.mp-ab-bulk-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mp-ab-bulk-btn { background: #fff; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; padding: 6px 13px; font-size: .82rem; font-weight: 600; color: #3d434b; cursor: pointer; }
.mp-ab-bulk-btn:hover:not(:disabled) { background: rgba(70,183,197,.1); border-color: rgba(70,183,197,.4); }
.mp-ab-bulk-btn:disabled, .mp-ab-selall-btn:disabled { opacity: .45; cursor: default; }
.mp-ab-circle-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.mp-ab-circle-inline { display: inline-flex; align-items: center; gap: 6px; }
.mp-ab-circle-inline-input { width: 150px; padding: 6px 10px; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; font-size: .82rem; }
.mp-ab-circle-apply { background: var(--mp-cyan-deep, #2e8fa3); color: #fff; border: 0; border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.mp-ab-cap-note { text-align: center; color: var(--mp-muted, #7b8492); font-size: .82rem; margin: 10px 0 0; }
/* ---- Social profile badges ---- */
.mp-ab-socials { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.mp-ab-social { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: #fff !important; font-size: .68rem; font-weight: 800; text-decoration: none; line-height: 1; }
.mp-ab-social:hover { opacity: .85; }
.mp-card-socials { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mp-card-social { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: #fff !important; font-size: .82rem; font-weight: 800; text-decoration: none; }
.mp-card-social:hover { opacity: .85; }

/* ---- Pages/events popup: date + status rows ---- */
.mp-ab-badge-pop-mid { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mp-ab-badge-pop-meta { font-size: .74rem; color: #7a7f95; margin-top: 1px; }
.mp-ab-suggest { display: inline-block; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #7a44b8; background: rgba(147,97,207,.14); padding: 1px 6px; border-radius: 5px; vertical-align: middle; margin-left: 4px; }

/* ---- Contact card: name from enrichment ---- */
.mp-card-enrich-name { font-size: .95rem; color: #2f2547; margin-bottom: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mp-card-enrich-was { font-size: .78rem; color: #8a8595; font-weight: 500; }
.mp-card-usename { font-size: .76rem; font-weight: 700; color: #fff; background: #7a44b8; border: none; border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.mp-card-usename:hover { background: #653a9c; }

/* ---- Contact card: enriched profile panel ---- */
.mp-card-enrich { margin: 12px 0 4px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(180deg, #f7f4fd 0%, #f1edfb 100%); border: 1px solid #e4dcf6; }
.mp-card-enrich-head { font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #7a44b8; margin-bottom: 6px; }
.mp-card-enrich-job { font-size: 1rem; font-weight: 700; color: #2f2547; }
.mp-card-enrich-loc { font-size: .88rem; color: #5c5470; margin-top: 3px; }
.mp-card-enrich-li { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 14px; border-radius: 8px; background: #0a66c2; color: #fff !important; font-weight: 700; font-size: .85rem; text-decoration: none; }
.mp-card-enrich-li:hover { background: #08528f; }
.mp-li-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; background: #fff; color: #0a66c2; font-weight: 900; font-size: .72rem; font-style: normal; }

/* ---- Media step revamp: modern tab cards + record buttons (matches the dropzone) ---- */
.file-tabs .nav-link {
    display: block;
    padding: 0 !important;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #f2faf7;
    border: 2px solid transparent;
    transition: background .15s, border-color .15s, box-shadow .15s;
    cursor: pointer;
}
.file-tabs .nav-link:hover { background: #e6f5ef; }
.file-tabs .nav-link.active { background: #fff; border-color: #1d7a5f; box-shadow: 0 2px 10px rgba(29,122,95,.15); }
.file-tabs .rad-label { display: flex !important; align-items: center; gap: 10px; padding: 14px 16px !important; margin: 0 !important; cursor: pointer; }
.file-tabs .rad-design { display: none !important; }
.file-tabs .rad-text { font-size: .95rem !important; font-weight: 700 !important; color: #3a3f5c !important; margin: 0 !important; display: flex; align-items: center; gap: 8px; }
.file-tabs .nav-link.active .rad-text { color: #2f3350 !important; }
.file-tabs .nav-link.active .rad-text::after { display: none !important; }
.file-tabs .nav-link[href="#record-video"] .rad-text::before { content: "🎬"; font-size: 1.15rem; }
.file-tabs .nav-link[href="#record-audio"] .rad-text::before { content: "🎙️"; font-size: 1.15rem; }
.file-tabs .nav-link[href="#upload-files"] .rad-text::before { content: "⬆️"; font-size: 1.15rem; }
.file-tabs .tab-content { background: transparent !important; }
/* Method tabs as a horizontal bar on top, content full-width below — avoids the
   left-column-vs-white-content "half coloured" split. */
.file-tabs { flex-wrap: wrap; }
.file-tabs > .col-md-3, .file-tabs > .col-md-9 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
.file-tabs .nav.flex-column { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px; margin-bottom: 6px; width: 100%; }
.file-tabs .nav.flex-column > .nav-item { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; display: flex; }
.file-tabs .nav.flex-column > .nav-item > .nav-link { width: 100% !important; margin-bottom: 0 !important; }
.file-tabs .rad-label { justify-content: center; }
.file-tabs .btn-upload, .file-tabs .btn-mp, .file-tabs .record, .file-tabs .stop {
    background: #1d7a5f !important; color: #fff !important; border: none !important; border-radius: 10px !important;
    padding: 10px 22px !important; font-weight: 700 !important; font-size: .9rem !important; cursor: pointer; transition: background .15s;
}
.file-tabs .btn-upload:hover, .file-tabs .btn-mp:hover, .file-tabs .record:hover { background: #176a52 !important; }
.file-tabs .stop { background: #d0708b !important; }
.file-tabs .btn-upload:disabled, .file-tabs .btn-mp:disabled { opacity: .5; cursor: default; }
.file-tabs #record-video video { border: none !important; border-radius: 12px !important; max-width: 100% !important; height: auto !important; background: #0e1116; box-shadow: 0 2px 12px rgba(30,35,80,.12); }
/* Audio recorder: give the waveform canvas a real dark "stage" so it isn't the old
   10px light-grey strip that read as a stray white line on the dark wizard. */
.file-tabs #record-audio .visualizer { display: block; width: 100% !important; height: 64px !important; background: #0e1116; border-radius: 12px; margin: 4px 0 14px; }

/* ---- Event invitation card: author links (embeds + link cards) ---- */
.mp-ev-links { display: grid; gap: 10px; margin: 10px 0; }
.mp-ev-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.mp-ev-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mp-ev-linkcard { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; background: #f2faf7; border: 1px solid #d7e8e2; text-decoration: none; color: inherit; }
.mp-ev-linkcard:hover { background: #e6f5ef; }
.mp-ev-linkcard-tx { flex: 1; font-weight: 600; word-break: break-all; font-size: .85rem; }
.mp-ev-linkcard-go { color: #176a52; font-weight: 700; white-space: nowrap; font-size: .8rem; }

/* ---- Newsfeed: at-risk deliveries alert ---- */
.mp-atrisk { margin: 0 0 20px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg,#fff6f3 0%,#fdeee9 100%); border: 1px solid #f4cdbe; }
.mp-atrisk-head { font-size: 1rem; font-weight: 800; color: #c0492b; margin-bottom: 12px; }
.mp-atrisk-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 12px; }
.mp-atrisk-card { display: block; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #f6d8cd; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.mp-atrisk-card:hover { box-shadow: 0 4px 14px rgba(180,70,40,.14); transform: translateY(-1px); }
.mp-atrisk-title { font-weight: 700; color: #3a2f2c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-atrisk-who { font-size: .82rem; color: #6b6480; margin-top: 3px; }
.mp-atrisk-reason { color: #c0492b; font-weight: 700; }
.mp-atrisk-when { font-size: .75rem; color: #b9552f; font-weight: 700; margin-top: 6px; }

/* ---- Newsfeed: "Upcoming" (scheduled, still sealed) strip ---- */
.mp-upcoming { margin: 0 0 24px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg,#f7f4fd 0%,#f1edfb 100%); border: 1px solid #e4dcf6; }
.mp-upcoming-head { font-size: 1rem; font-weight: 800; color: #6a4bb0; margin-bottom: 12px; }
.mp-upcoming-sub { font-weight: 500; font-size: .82rem; color: #9188a8; }
.mp-upcoming-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 12px; }
.mp-upcoming-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #ece7f7; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.mp-upcoming-card:hover { box-shadow: 0 4px 14px rgba(90,70,150,.14); transform: translateY(-1px); }
.mp-upcoming-icon { font-size: 1.4rem; line-height: 1; }
.mp-upcoming-mid { min-width: 0; }
.mp-upcoming-title { font-weight: 700; color: #2f2547; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-upcoming-who { font-size: .82rem; color: #6b6480; margin-top: 2px; }
.mp-upcoming-meta { font-size: .75rem; color: #9a7bc4; font-weight: 600; margin-top: 6px; }
.mp-upcoming-repeat { display: inline-block; font-size: .7rem; font-weight: 800; color: #7a44b8; background: rgba(147,97,207,.14); padding: 1px 8px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }

/* ---- Maturity step revamp: option cards matching the media step ---- */
.maturity-tab .maturity-option { display: flex; flex-direction: column; gap: 10px; }
.maturity-tab .rad-label {
    display: flex !important; align-items: center; gap: 10px; width: 100%;
    padding: 14px 16px !important; margin: 0 !important; border-radius: 12px;
    background: #f2faf7; border: 2px solid transparent; cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.maturity-tab .rad-label:hover { background: #e6f5ef; }
.maturity-tab .rad-label:has(.rad-input:checked) { background: #fff; border-color: #1d7a5f; box-shadow: 0 2px 10px rgba(29,122,95,.15); }
/* MP-118: Maturity Date / Add An Executor are already a native radio group (single-select is
   enforced) - the card highlight above just didn't carry the usual radio dot, so the pair read
   as two independent buttons instead of an either/or choice. Restyle the dot instead of hiding
   it, to make that exclusivity visible. */
.maturity-tab .rad-design {
    display: block !important; float: none !important; position: relative; top: 0 !important;
    width: 18px; height: 18px; min-width: 18px; margin-right: 0 !important;
    border-radius: 50%; border: 2px solid #b7c4c1; background: #fff !important;
    transition: border-color .15s ease;
}
.maturity-tab .rad-design::before {
    content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px;
    border-radius: 50%; background: #1d7a5f; transform: scale(0); transition: transform .15s ease;
}
.maturity-tab .rad-label:has(.rad-input:checked) .rad-design { border-color: #1d7a5f; }
.maturity-tab .rad-label:has(.rad-input:checked) .rad-design::before { transform: scale(1); }
.maturity-tab .rad-input { position: absolute; opacity: 0; width: 0; height: 0; }
.maturity-tab .rad-text { font-size: .95rem !important; font-weight: 700 !important; color: #3a3f5c !important; margin: 0 !important; display: flex; align-items: center; gap: 8px; }
.maturity-tab .rad-label:has(#rdoMaturityDate) .rad-text::before { content: "📅"; font-size: 1.15rem; }
.maturity-tab .rad-label:has(#rdoAddExecuter) .rad-text::before { content: "👤"; font-size: 1.15rem; }
.clsPageMaturityDiv .form-control, .clsPageExecuterDiv .form-control,
.clsPageMaturityDiv .form-select, .clsPageExecuterDiv .form-select {
    border-radius: 10px; border: 1px solid #d3d7e6;
}
.clsPageMaturityDiv .form-control:focus, .clsPageExecuterDiv .form-control:focus { border-color: #1d7a5f; box-shadow: 0 0 0 3px rgba(29,122,95,.12); }

/* ---- Create wizard: auto-growing textareas ---- */
#Description, #PageLinks { min-height: 96px; max-height: 60vh; overflow-y: auto; resize: vertical; line-height: 1.5; }
/* Bootstrap form-floating pins a fixed height; let JS drive it instead. */
.form-floating > textarea#Description.form-control { height: auto; }

/* ---- Create wizard: speak-to-create ---- */
.mp-dictate { margin-top: 8px; font-size: .85rem; font-weight: 700; color: #176a52; background: #e6f5ef; border: 1px solid #bfe3d8; border-radius: 999px; padding: 6px 16px; cursor: pointer; transition: background .15s; }
.mp-dictate:hover { background: #e2e6fb; }
.mp-dictate.listening { background: #d0708b; color: #fff; border-color: #d0708b; animation: mp-pulse 1.2s ease-in-out infinite; }
@keyframes mp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(208,112,139,.5); } 50% { box-shadow: 0 0 0 6px rgba(208,112,139,0); } }

/* ---- Create wizard: repeat / recurrence ---- */
.mp-repeat-field { margin-top: 14px; }
.mp-repeat-label { font-weight: 700; font-size: .9rem; color: #2f3350; display: block; margin-bottom: 6px; }
.mp-repeat-field .form-select { border-radius: 10px; border: 1px solid #d3d7e6; }
.mp-repeat-field .form-select:focus { border-color: #1d7a5f; box-shadow: 0 0 0 3px rgba(29,122,95,.12); }
.mp-repeat-hint { font-size: .78rem; color: #9297ad; margin-top: 6px; }

/* ---- Create wizard: links field ---- */
.mp-links-field { margin-top: 14px; }
.mp-links-label { font-weight: 700; font-size: .9rem; color: #2f3350; display: block; margin-bottom: 6px; }
.mp-links-label span { font-weight: 500; color: #9297ad; }
.mp-links-input { width: 100%; border: 1px solid #d3d7e6; border-radius: 10px; padding: 10px 12px; font-size: .9rem; resize: vertical; }
.mp-links-input:focus { outline: none; border-color: #1d7a5f; }
.mp-links-hint { font-size: .78rem; color: #9297ad; margin-top: 6px; }

/* ---- Modern upload dropzone ---- */
.mp-dropzone { position: relative; margin-top: 12px; border: 2px dashed #9ec7ba; border-radius: 16px; background: linear-gradient(180deg, #f7fdfb 0%, #f2faf7 100%); transition: border-color .15s, background .15s, box-shadow .15s; cursor: pointer; }
.mp-dropzone:hover { border-color: #9aa2d8; background: #f6f7ff; }
.mp-dropzone.dragging { border-color: #1d7a5f; background: #e6f5ef; box-shadow: 0 0 0 4px rgba(29,122,95,.15); }
/* Hidden, NOT a full-cover invisible layer — a covering opacity:0 file input can intercept
   clicks elsewhere on the page if the modal ever becomes interactive. The drop-zone opens the
   dialog by calling input.click() instead (see initDropzone). */
.mp-dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* A CLOSED create/event modal must be fully removed from the page. visibility:hidden alone was
   leaving its (invisible, full-viewport, z-index 9999) drop-zone able to receive clicks over the
   dashboard — so clicking the Event Radar landed on the hidden #mp-dropzone and popped the file
   browser. display:none takes it out of the hit-test entirely. .show restores it. */
.popup-container:not(.show) { display: none !important; }
.mp-dropzone-inner { position: relative; pointer-events: none; text-align: center; padding: 30px 20px; }
.mp-dropzone-icon { color: #1d7a5f; margin-bottom: 8px; }
.mp-dropzone-title { font-size: 1.05rem; font-weight: 700; color: #2f3350; }
.mp-dropzone-sub { font-size: .9rem; color: #5c6079; margin-top: 4px; }
.mp-dropzone-browse { color: #176a52; font-weight: 700; text-decoration: underline; }
.mp-dropzone-sub kbd { background: #fff; border: 1px solid #cfd2e6; border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: .78rem; font-family: inherit; color: #444; }
.mp-dropzone-hint { font-size: .78rem; color: #9297ad; margin-top: 10px; }
.mp-staged { margin-top: 14px; }
.mp-staged-head { font-size: .82rem; font-weight: 700; color: #176a52; margin-bottom: 8px; }
.mp-staged-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-staged-card { width: 108px; border: 1px solid #d7e8e2; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(30,35,80,.06); }
.mp-staged-thumb { width: 100%; height: 72px; object-fit: cover; background: #f2f3f9; display: block; }
.mp-staged-meta { padding: 6px 8px; display: flex; flex-direction: column; }
.mp-staged-name { font-size: .72rem; font-weight: 600; color: #3a3f5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-staged-size { font-size: .68rem; color: #9297ad; }
.mp-ab-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding: 8px 12px; background: #f2faf7; border: 1px solid #d7e8e2; border-radius: 10px; }
.mp-ab-status-count { font-size: .85rem; color: #3a3f5c; font-weight: 600; margin-right: 4px; }
.mp-ab-status-count b { color: #176a52; }
.mp-ab-fchip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #14514a; background: #e6f5ef; border: 1px solid #bfe3d8; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.mp-ab-fchip:hover { background: #dbe0fa; }
.mp-ab-fchip-x { font-size: .72rem; opacity: .7; }
.mp-ab-clearall { font-size: .8rem; font-weight: 600; color: #8a5cc8; text-decoration: underline; cursor: pointer; margin-left: auto; }
.mp-ab-qf-n { display: inline-block; margin-left: 5px; font-size: .72rem; font-weight: 800; background: rgba(90,99,200,.16); color: #4a52b0; padding: 0 6px; border-radius: 999px; }
.mp-ab-qf.active .mp-ab-qf-n { background: rgba(255,255,255,.35); color: #fff; }
.mp-ab-qf-empty { opacity: .45; }
.mp-ab-carrier { font-size: .8rem; font-weight: 600; color: #3a3f5c; padding: 5px 10px; border: 1px solid #d3d7e6; border-radius: 999px; background: #fff; cursor: pointer; max-width: 220px; }
.mp-ab-carrier:focus { outline: none; border-color: #1d7a5f; }
.mp-ab-rel-chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; vertical-align: middle; margin-left: 6px; text-transform: capitalize; letter-spacing: .01em; }
/* Compact "what we know" signal icons on each row — quiet by default, detail on hover. */
.mp-ab-signals { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.mp-ab-sig { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: .72rem; font-weight: 700; line-height: 1; background: #f0f2f6; color: #6b7280; cursor: default; text-decoration: none; }
.mp-ab-sig .mp-ab-clogo { width: 14px; height: 14px; }
.mp-ab-sig.ok { background: rgba(46,165,143,.12); color: #1f7d68; }
.mp-ab-sig.bad { background: rgba(230,162,60,.16); color: #b9791f; }
.mp-ab-sig.info { background: #eef1f6; color: #5a6472; }
.mp-ab-sig.link { background: #eaf1fb; color: #0a66c2; cursor: pointer; }
.mp-ab-sig.link:hover { background: #dbe8fa; }

.mp-ab-vbs { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.mp-ab-vb { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; text-transform: capitalize; }
.mp-ab-vb.ok { background: rgba(46,165,143,.14); color: #1f7d68; }
.mp-ab-vb.bad { background: rgba(230,162,60,.18); color: #b9791f; }
.mp-ab-vb.grav { background: rgba(90,120,220,.14); color: #14514a; cursor: default; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ab-vb.muted { background: rgba(120,120,130,.10); color: #8a8a94; font-weight: 600; }
.mp-ab-vb.pdl { background: rgba(147,97,207,.14); color: #7a44b8; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ab-vb.pdl.link { text-decoration: none; }
.mp-ab-vb.pdl.link:hover { background: rgba(147,97,207,.24); }
.mp-ab-vb.company { background: rgba(52,120,205,.12); color: #2d5fa8; max-width: 340px; text-decoration: none; }
.mp-ab-vb.company.link:hover { background: rgba(52,120,205,.22); }
.mp-ab-vb.company .mp-ab-cind { opacity: .72; font-weight: 600; text-transform: none; }
.mp-ab-clogo { width: 15px; height: 15px; border-radius: 3px; vertical-align: middle; object-fit: cover; }
/* Company panel inside the contact card */
.mp-card-company { margin: 10px 0 4px; padding: 12px 16px; border-radius: 12px; background: #f4f7fc; border: 1px solid #dbe6f5; }
.mp-card-company-head { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: #24374f; }
.mp-card-company-head .mp-ab-clogo { width: 20px; height: 20px; }
.mp-card-company-meta { font-size: .85rem; color: #5a6b81; margin-top: 3px; }
.mp-card-company-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mp-card-company-links a { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid #cdddf0; color: #2d5fa8 !important; text-decoration: none; }
.mp-card-company-links a:hover { background: #eef4fc; }
.mp-ab-badges { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.mp-ab-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: filter .12s ease, transform .06s ease; }
.mp-ab-badge:hover { filter: brightness(.97); }
.mp-ab-badge:active { transform: scale(.97); }
.mp-ab-badge-caret { font-size: .62rem; opacity: .7; }
.mp-ab-badge-page { background: rgba(70,183,197,.16); color: #2e8fa3; border-color: rgba(70,183,197,.3); }
.mp-ab-badge-event { background: rgba(230,162,60,.18); color: #b9791f; border-color: rgba(230,162,60,.35); }
.mp-ab-badge-pop { position: absolute; z-index: 9999; width: 288px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 14px; box-shadow: 0 16px 40px rgba(16,24,40,.18); padding: 10px; }
.mp-ab-badge-pop-h { font-size: .76rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #7b8492; margin: 2px 4px 8px; }
.mp-ab-badge-pop-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: #1f2a37; transition: background .12s ease; }
.mp-ab-badge-pop-item:hover { background: rgba(70,183,197,.1); text-decoration: none; }
.mp-ab-badge-pop-ic { font-size: 1.05rem; flex: 0 0 auto; }
.mp-ab-badge-pop-name { flex: 1; font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ab-badge-pop-go { flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--mp-cyan-deep, #2e8fa3); }
.mp-ab-badge-pop-empty { font-size: .84rem; color: var(--mp-muted, #7b8492); padding: 6px 10px; }

/* Contact-card verify (Twilio phone + email domain check). */
.mp-card-actions2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.mp-card-verify-btn { background: #fff; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; padding: 9px 16px; font-size: .84rem; font-weight: 700; color: #3d434b; cursor: pointer; }
.mp-card-verify-btn:hover:not(:disabled) { background: rgba(70,183,197,.1); border-color: rgba(70,183,197,.4); }
.mp-card-verify-btn:disabled { opacity: .6; cursor: default; }
.mp-card-verify { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.mp-vrow { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; padding: 8px 12px; border-radius: 10px; background: #f5f7fa; }
.mp-vrow > span:first-child { font-weight: 700; white-space: nowrap; }
.mp-vrow > span:last-child { text-align: right; color: #4b5563; }
.mp-vrow.ok { background: rgba(46,165,143,.12); }
.mp-vrow.bad { background: rgba(230,162,60,.16); }

/* Circle picker popover for bulk "Add to circle". */
.mp-ab-circle-pop { position: absolute; z-index: 9999; width: 260px; background: #fff; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 14px; box-shadow: 0 12px 34px rgba(16,24,40,.16); padding: 12px; }
.mp-ab-circle-pop-h { font-size: .8rem; font-weight: 700; color: #3d434b; margin-bottom: 8px; }
.mp-ab-circle-pop-list { display: flex; flex-direction: column; gap: 2px; max-height: 210px; overflow-y: auto; }
.mp-ab-circle-pop-check { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: .86rem; color: #3d434b; cursor: pointer; }
.mp-ab-circle-pop-check:hover { background: rgba(70,183,197,.08); }
.mp-ab-circle-pop-check input { width: 16px; height: 16px; cursor: pointer; }
.mp-ab-circle-pop-empty { font-size: .82rem; color: var(--mp-muted, #7b8492); padding: 4px 2px; }
.mp-ab-circle-pop-new { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mp-line, #eef1f5); }
.mp-ab-circle-pop-input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; font-size: .82rem; }
.mp-ab-circle-pop-apply { width: 100%; margin-top: 10px; background: var(--mp-cyan-deep, #2e8fa3); color: #fff; border: 0; border-radius: 999px; padding: 9px 14px; font-size: .84rem; font-weight: 700; cursor: pointer; }
.mp-ab-circle-pop-apply:hover { filter: brightness(1.05); }

.mp-ab-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin: .75rem 0 .5rem;
}

#mp-ab-search { max-width: 340px; }

.mp-ab-groups { display: flex; gap: 4px; }

.mp-ab-group {
    border: none;
    background: #eef1f6;
    color: var(--mp-muted);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.mp-ab-group.active {
    background: var(--mp-grad);
    color: #fff;
}

.mp-ab-row { border-bottom: 1px solid #f0f3f8; padding: 4px 0; display: block; }

.mp-ab-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}

.mp-ab-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .9rem;
}

.mp-ab-who { flex: 1; min-width: 0; }

.mp-ab-name { font-weight: 700; color: var(--mp-ink); }

.mp-ab-sub {
    color: var(--mp-muted);
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-ab-edit-toggle {
    border: none;
    background: rgba(70, 183, 197, .1);
    color: var(--mp-cyan-deep);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.mp-ab-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 0 14px 52px;
}

@media (max-width: 767.98px) {
    .mp-ab-form { grid-template-columns: 1fr 1fr; padding-left: 0; }
}

.mp-ab-birthdays {
    background: rgba(230, 162, 60, .1);
    border: 1px solid rgba(230, 162, 60, .35);
    border-radius: 12px;
    padding: 10px 14px;
    margin: .5rem 0;
    font-size: .88rem;
}

.mp-ab-bd { display: inline-block; margin-right: 14px; }

.mp-ab-bd a { color: var(--mp-cyan-deep); font-weight: 700; }

.mp-ab-bd-label { font-weight: 700; margin-right: 8px; }

.mp-ab-dupes {
    background: rgba(70, 183, 197, .08);
    border: 1px dashed rgba(70, 183, 197, .4);
    border-radius: 12px;
    padding: 10px 14px;
    margin: .5rem 0;
    font-size: .88rem;
}

.mp-ab-merge {
    border: none;
    background: var(--mp-grad);
    color: #fff;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 6px;
}

/* Photo avatars where they exist */
.mp-ab-photo {
    object-fit: cover;
}

.mp-chip-photo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 7px;
    vertical-align: -5px;
}

/* Readiness meter collapses to one line; the score stays visible */
.mp-ready-head {
    cursor: pointer;
    user-select: none;
}

.mp-ready-chevron {
    margin-left: 10px;
    color: var(--mp-muted);
    transition: transform .18s ease;
    display: inline-block;
}

.mp-ready-card.collapsed .mp-ready-chevron {
    transform: rotate(-90deg);
}

.mp-ready-body {
    overflow: hidden;
    max-height: 600px;
    transition: max-height .25s ease, opacity .2s ease;
}

.mp-ready-card.collapsed .mp-ready-body {
    max-height: 0;
    opacity: 0;
}

/* Notification popup: a real scrollable panel, not a three-item peephole */
.notification-popup {
    max-height: 420px;
    overflow-y: auto;
    min-width: 320px;
    scrollbar-width: thin;
}

.notification-popup .load-more-notifications-btn {
    display: block;
    text-align: center;
    padding: 10px;
    color: var(--mp-cyan-deep);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}

/* ---------- Signed-in dashboard (home) ---------- */

.mp-dash {
    background: linear-gradient(180deg, #eef2f8 0%, var(--mp-canvas) 240px);
    min-height: 85vh;
    padding: clamp(1.5rem, 4vw, 2.8rem) 0 4rem;
}

.mp-dash-hero {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-bottom: 1.6rem;
}

.mp-dash-hero > div:first-child { align-self: center; }

.mp-dash-eyebrow {
    color: var(--mp-cyan-deep);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: .78rem;
    margin: 0;
}

.mp-dash-hello {
    font-family: 'Nexa-Bold', sans-serif;
    color: var(--mp-ink);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    letter-spacing: -.6px;
    margin: .25rem 0 .35rem;
}

.mp-dash-sub { color: var(--mp-muted); margin: 0; max-width: 460px; }

/* Two equal-size create cards */
.mp-dash-create {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mp-dash-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 200px;
    min-height: 116px;
    padding: 16px 18px;
    border-radius: var(--mp-radius);
    text-decoration: none !important;
    background: var(--mp-grad);
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(70,183,197,.35);
    transition: transform .15s ease, box-shadow .15s ease;
}

.mp-dash-cta:nth-child(2) {
    background: linear-gradient(135deg, #7c6fd0, #5b4fb0);
    box-shadow: 0 6px 18px rgba(124,111,208,.35);
}

.mp-dash-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16,24,40,.18); }
.mp-dash-cta-emoji { font-size: 1.5rem; }
.mp-dash-cta-title { font-family: 'Nexa-Bold', sans-serif; font-size: 1.05rem; margin-top: 6px; }
.mp-dash-cta-sub { font-size: .8rem; opacity: .9; }

@media (max-width: 560px) {
    .mp-dash-create { width: 100%; }
    .mp-dash-cta { width: auto; }
}

/* Stat cards, each its own hue */
.mp-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 1.2rem;
}

@media (max-width: 640px) { .mp-dash-stats { grid-template-columns: repeat(2, 1fr); } }

.mp-dash-stat {
    background: #fff;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 1.1rem 1.3rem;
    position: relative;
    overflow: hidden;
}

.mp-dash-stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.mp-dash-stat.s1::before { background: linear-gradient(90deg,#46b7c5,#2e8fa3); }
.mp-dash-stat.s2::before { background: linear-gradient(90deg,#7c6fd0,#5b4fb0); }
.mp-dash-stat.s3::before { background: linear-gradient(90deg,#2ea58f,#1e7a68); }
.mp-dash-stat.s4::before { background: linear-gradient(90deg,#e6a23c,#d3922e); }

.mp-dash-stat-emoji { font-size: 1.3rem; }
.mp-dash-num { display: block; font-family: 'Nexa-Bold', sans-serif; font-size: 2.1rem; color: var(--mp-ink); line-height: 1.05; margin-top: 4px; }
.mp-dash-lbl { display: block; margin-top: .25rem; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--mp-muted); }

.mp-dash-birthdays {
    background: linear-gradient(135deg, rgba(230,162,60,.14), rgba(230,162,60,.06));
    border: 1px solid rgba(230,162,60,.35);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 1.2rem;
    font-size: .9rem;
}
.mp-dash-bd { display: inline-block; margin-right: 16px; }
.mp-dash-bd a { color: var(--mp-cyan-deep); font-weight: 700; }
.mp-dash-bd-label { font-weight: 700; margin-right: 8px; }

.mp-dash-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.mp-dash-grid:nth-of-type(3) { grid-template-columns: 1fr 2fr; }

@media (max-width: 800px) { .mp-dash-grid, .mp-dash-grid:nth-of-type(3) { grid-template-columns: 1fr; } }

.mp-dash-card {
    background: #fff;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    padding: 1.3rem 1.4rem;
}
.mp-dash-card-title { font-family: 'Nexa-Bold', sans-serif; color: var(--mp-ink); margin-bottom: .8rem; }

.mp-dash-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: .7rem 0; border-bottom: 1px solid #f3f5f9;
}
.mp-dash-row:last-child { border-bottom: none; }
.mp-dash-row-l { display: flex; align-items: center; gap: 10px; }
.mp-dash-row-title { color: #2a2f37; font-weight: 500; }
.mp-dash-row-sub { color: var(--mp-muted); font-size: .8rem; }
.mp-dash-row-right { color: var(--mp-muted); font-size: .82rem; white-space: nowrap; text-align: right; }
.mp-dash-row-when { color: var(--mp-muted); font-size: .82rem; }
.mp-dash-empty { color: var(--mp-muted); padding: .8rem 0; }
.mp-dash-card-sub { font-family: inherit; font-weight: 400; font-size: .78rem; color: var(--mp-muted); }
/* "opened by" pill on delivered rows */
.mp-open-pill { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-bottom: 3px; }
.mp-open-pill.all { background: rgba(46,165,143,.16); color: #1f7d68; }
.mp-open-pill.some { background: rgba(70,183,197,.16); color: #2e8fa3; }
.mp-open-pill.none { background: rgba(120,120,130,.12); color: #8a8a94; }
.mp-dash-empty a { color: var(--mp-cyan-deep); font-weight: 600; }

/* Readiness ring */
.mp-dash-ring-wrap { text-align: center; }
.mp-dash-ring { width: 150px; height: 150px; }
.mp-ring-bg { fill: none; stroke: #eef1f6; stroke-width: 10; }
.mp-ring-fg { fill: none; stroke: url(#mpgrad); stroke: #46b7c5; stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset .6s ease; }
.mp-ring-num { font-family: 'Nexa-Bold', sans-serif; font-size: 30px; fill: var(--mp-ink); }
.mp-ring-of { font-size: 12px; fill: var(--mp-muted); }
.mp-dash-ring-link { display: inline-block; margin-top: .4rem; color: var(--mp-cyan-deep); font-weight: 600; font-size: .85rem; text-decoration: none; }

/* Mini bar chart */
.mp-dash-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; }
.mp-dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.mp-dash-bar-val { font-size: .75rem; color: var(--mp-muted); margin-bottom: 4px; min-height: 1em; }
.mp-dash-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg,#5fd0de,#2e8fa3); }
.mp-dash-bar-lbl { font-size: .72rem; color: var(--mp-muted); margin-top: 6px; }

.mp-dash-foot { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-dash-link {
    background: #fff; border: 1px solid var(--mp-line); border-radius: 999px;
    padding: 8px 18px; color: #3d434b !important; font-weight: 600; font-size: .85rem;
    text-decoration: none !important; transition: background-color .15s, color .15s;
}
.mp-dash-link:hover { background: rgba(70,183,197,.1); color: var(--mp-cyan-deep) !important; }

/* ---------- Address book: star + contact card ---------- */

.mp-ab-row-head { align-items: center; }
.mp-ab-clickable { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

.mp-ab-star {
    background: none; border: none; font-size: 1.3rem; color: #cfd6df;
    cursor: pointer; line-height: 1; padding: 0 6px 0 0;
}
.mp-ab-star.on { color: #e6a23c; }

.mp-person-chip.fav { border-color: rgba(230,162,60,.5); }

.mp-card-backdrop { position: fixed; inset: 0; background: rgba(16,18,22,.6); z-index: 1200; }
.mp-card {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
    z-index: 1201; width: 380px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px); overflow: auto;
    background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(16,24,40,.4);
}
.mp-card-close {
    position: absolute; right: 12px; top: 10px; z-index: 2;
    background: rgba(255,255,255,.85); border: none; width: 34px; height: 34px;
    border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #3d434b;
}
.mp-card-hero {
    position: relative; height: 260px; background: linear-gradient(135deg,#101216,#1b1f28);
    display: flex; align-items: center; justify-content: center;
}
.mp-card-photo {
    width: 160px; height: 160px; border-radius: 50%; object-fit: cover;
    border: 4px solid rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.mp-card-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--mp-grad); color: #fff; font-size: 3.2rem; font-family: 'Nexa-Bold',sans-serif;
}
.mp-card-star {
    position: absolute; right: 18px; bottom: 16px; background: rgba(255,255,255,.9);
    border: none; width: 42px; height: 42px; border-radius: 50%; font-size: 1.4rem;
    cursor: pointer; color: #cfd6df; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.mp-card-star.on { color: #e6a23c; }
.mp-card-body { padding: 1.4rem 1.6rem 1.6rem; }
.mp-card-name { font-family: 'Nexa-Bold',sans-serif; font-size: 1.4rem; color: var(--mp-ink); text-align: center; }
.mp-card-rel { text-align: center; color: var(--mp-muted); margin-top: 2px; }
.mp-card-detail { margin: 1.2rem 0; }
.mp-card-row { display: flex; justify-content: space-between; gap: 12px; padding: .55rem 0; border-bottom: 1px solid #f3f5f9; }
.mp-card-row:last-child { border-bottom: none; }
.mp-card-k { color: var(--mp-muted); font-size: .82rem; }
.mp-card-v { color: #2a2f37; font-weight: 500; text-align: right; word-break: break-word; }
.mp-card-v a { color: var(--mp-cyan-deep); }
.mp-card-empty { color: var(--mp-muted); }
.mp-card-write { display: block; text-align: center; }

/* Dashboard circle feed */
.mp-dash-feed-card { margin-bottom: 16px; }
.mp-dash-feed-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: .6rem; }
.mp-dash-feed-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-feed-chip { border: none; background: #eef1f6; color: var(--mp-muted); border-radius: 999px; padding: 5px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.mp-feed-chip.active { background: var(--mp-grad); color: #fff; }
.mp-feed-sep { width: 1px; height: 20px; background: var(--mp-line); margin: 0 4px; }
.mp-feed-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mp-feed-av-i { display: inline-flex; align-items: center; justify-content: center; background: var(--mp-grad); color: #fff; font-weight: 700; font-size: .8rem; }

/* ---------- Profile page, modernised ---------- */

/* The grid must sit on the form (whose children are the avatar column, the
   fields column and the delete button) - not on .my-profile, which has only
   the form as its single child. Flex + order lays them out and drops delete
   to a full-width row at the bottom. */
.mp-profile-card .my-profile { display: block; }

.mp-profile-card #MySettingsModalForm {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: flex-start;
}

.mp-profile-card .mp-profile-avatar-col { order: 1; flex: 0 0 180px; }
.mp-profile-card .col-sm-6 { order: 2; flex: 1 1 320px; max-width: none; padding: 0; }
/* Everything below the fields is a full-width row, in a sane top-to-bottom order,
   so no action can land behind the avatar or another button. */
.mp-profile-card .form-group { order: 3; flex-basis: 100%; }
.mp-profile-card .mp-profile-actions { order: 8; flex-basis: 100%; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mp-profile-card .mp-profile-danger { order: 9; flex-basis: 100%; }

@media (max-width: 720px) {
    .mp-profile-card #MySettingsModalForm { justify-content: center; }
    .mp-profile-card .col-sm-6 { flex-basis: 100%; }
}

.mp-profile-avatar-col { text-align: center; }

.mp-profile-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(16,24,40,.16), 0 0 0 4px #fff;
    position: relative;
    background: var(--mp-grad);
}

.mp-profile-avatar .profile-pic {
    position: static !important;   /* legacy rule made it absolute -> offset */
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
}

.mp-profile-change {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(70,183,197,.12);
    color: var(--mp-cyan-deep);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.mp-profile-change:hover { background: var(--mp-grad); color: #fff; }
.mp-profile-file { display: none; }

/* The form column: real spacing, aligned actions */
.mp-profile-card .my-profile .col-sm-6 { max-width: none; padding: 0; }
.mp-profile-card .form-floating { margin-bottom: 4px; }

/* Change password becomes a quiet secondary button */
.mp-profile-card .Change-Password {
    display: inline-block;
    margin-top: 6px;
    padding: 9px 18px;
    border: 1px solid var(--mp-line);
    border-radius: 10px;
    color: #3d434b !important;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none !important;
}
.mp-profile-card .Change-Password:hover { background: #f4f6fa; }

/* Danger zone: set off from the form, in its own soft-red panel */
.mp-profile-danger {
    margin-top: 1.75rem;
    padding: 18px 20px;
    border: 1px solid rgba(179,54,60,.18);
    border-radius: var(--mp-radius, 16px);
    background: #fffafa;
}
.mp-profile-danger-head { font-weight: 700; color: #b3363c; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.mp-profile-danger-lead { color: #6b7280; font-size: .9rem; margin: 0 0 14px; }
.mp-profile-danger-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.mp-profile-card .archive-account {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--mp-ink, #23272f);
    border: 1px solid var(--mp-line, #e7ebf2);
    border-radius: 10px; padding: 9px 18px;
    font-weight: 600; font-size: .85rem; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.mp-profile-card .archive-account:hover { background: #f4f6f9; border-color: #cfd6e0; }

.mp-profile-card .del-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    background: #fdecec !important;
    color: #b3363c !important;
    border: 1px solid rgba(179,54,60,.25) !important;
    border-radius: 10px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: .85rem;
    float: none !important;
    cursor: pointer;
}
.mp-profile-card .del-account:hover { background: #f9dede !important; }
.mp-profile-card .del-account img { width: 16px; height: 16px; filter: none; }

.mp-profile-card .mp-profile-actions .update-btn { display: inline-block; margin: 0; }

/* Clickable stat cards */
a.mp-dash-stat { text-decoration: none !important; display: block; transition: transform .15s ease, box-shadow .15s ease; }
a.mp-dash-stat:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-lift); }
.mp-dash-stat-go { display: block; font-weight: 600; color: var(--mp-cyan-deep); text-transform: none; letter-spacing: 0; font-size: .72rem; margin-top: 3px; opacity: 0; transition: opacity .15s ease; }
a.mp-dash-stat:hover .mp-dash-stat-go { opacity: 1; }

/* Readiness card with inline checklist */
.mp-dash-ready-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mp-dash-ready-wrap .mp-dash-ring { flex-shrink: 0; }
.mp-dash-ready-list { flex: 1; min-width: 180px; }
.mp-ready-line { padding: 5px 0; color: var(--mp-muted); font-size: .88rem; }
.mp-ready-line.ok { color: #2a2f37; }
.mp-ready-line a { color: var(--mp-cyan-deep); font-weight: 600; margin-left: 4px; }
/* Verdict headline + actionable gap blocks */
.mp-ready-verdict { font-weight: 700; font-size: .92rem; padding: 7px 11px; border-radius: 9px; margin-bottom: 9px; }
.mp-ready-verdict.ready { background: rgba(46,165,143,.14); color: #1f7d68; }
.mp-ready-verdict.warn  { background: rgba(230,162,60,.16); color: #b9791f; }
.mp-ready-verdict.risk  { background: rgba(214,69,69,.14); color: #c0392b; }
.mp-ready-gap { padding: 8px 0; border-bottom: 1px solid #f3f5f9; }
.mp-ready-gap-t { font-weight: 700; color: #2a2f37; font-size: .88rem; }
.mp-ready-gap-why { color: var(--mp-muted); font-size: .8rem; margin: 1px 0 5px; }
.mp-ready-gap-cta { display: inline-block; font-size: .82rem; font-weight: 700; color: #fff !important; background: var(--mp-cyan-deep, #2e8fa3); padding: 4px 12px; border-radius: 7px; text-decoration: none; }
.mp-ready-gap-cta:hover { filter: brightness(.94); }

/* Named-circle chips: a count badge, add-your-own by typing */
.mp-ab-group-n { background: rgba(255,255,255,.35); border-radius: 999px; padding: 0 6px; font-size: .72rem; margin-left: 4px; }
.mp-ab-group.active .mp-ab-group-n { background: rgba(255,255,255,.4); }

/* Form action rows: primary + cancel */
.mp-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.mp-form-actions .claim-ghost-btn { padding: 11px 22px; }

.mp-ab-newcircle { border: 1px dashed rgba(70,183,197,.5); background: transparent; color: var(--mp-cyan-deep); border-radius: 999px; padding: 5px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; margin-left: 6px; }
.mp-ab-newcircle:hover { background: rgba(70,183,197,.1); }

.mp-circle-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.mp-circle-chip { background: rgba(70,183,197,.12); color: var(--mp-cyan-deep); border-radius: 999px; padding: 5px 14px; font-size: .85rem; font-weight: 600; }
.mp-circle-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- Event Radar (dashboard) ---- */
.mp-dash-radar-card { border-left: 4px solid var(--mp-cyan-deep, #2c8a99); }
.mp-radar-manage { font-size: .85rem; font-weight: 600; color: var(--mp-cyan-deep, #2c8a99); text-decoration: none; }
.mp-radar-manage:hover { text-decoration: underline; }
.mp-radar-range { font-size: .82rem; font-weight: 600; color: #3d434b; background: #f4f6f9; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; padding: 5px 30px 5px 12px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237b8492' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.mp-radar-range:hover { border-color: var(--mp-cyan-deep, #2c8a99); }
.mp-radar-range:focus { outline: none; border-color: var(--mp-cyan-deep, #2c8a99); box-shadow: 0 0 0 2px rgba(70,183,197,.18); }
.mp-radar-lead { color: #5b6270; margin: 2px 0 12px; font-size: .92rem; }
.mp-radar-list { display: flex; flex-direction: column; gap: 8px; }
.mp-radar-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(70,183,197,.07); }
.mp-radar-item.mp-radar-soon { background: rgba(255,183,77,.14); }
.mp-radar-ic { font-size: 1.35rem; line-height: 1; }
.mp-radar-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mp-radar-title { font-weight: 600; color: #23272f; }
.mp-radar-when { font-size: .82rem; color: #6b7280; }
.mp-radar-cta { border: 0; border-radius: 999px; padding: 6px 11px; font-size: .78rem; font-weight: 600; cursor: pointer; background: var(--mp-cyan-deep, #2c8a99); color: #fff; white-space: nowrap; }
.mp-radar-cta:hover { filter: brightness(1.06); }
.mp-radar-cta-ev { background: #7c6fd0; }
.mp-radar-acts { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* Page / Event kind badge (Coming up) */
.mp-kind-badge { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.mp-kind-page { background: rgba(70,183,197,.16); color: #1e7a68; }
.mp-kind-event { background: rgba(124,111,208,.16); color: #5b4fb0; }
.mp-radar-empty { color: #6b7280; font-size: .9rem; line-height: 1.5; }
.mp-radar-empty a { color: var(--mp-cyan-deep, #2c8a99); }
/* Add-a-reminder inline from the radar */
.mp-radar-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-radar-add-btn { font-size: .82rem; font-weight: 700; color: #fff; background: var(--mp-cyan-deep, #2c8a99); border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.mp-radar-add-btn:hover { background: #1d7a5f; }
.mp-radar-add-panel { background: #f4faf8; border: 1px solid #d8ebe4; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.mp-radar-add-lead { font-size: .82rem; font-weight: 700; color: #3d434b; margin-bottom: 8px; }
.mp-radar-add-types { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-radar-add-type { font-size: .8rem; font-weight: 600; color: #2f3a42; background: #fff; border: 1px solid #d8e2e0; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.mp-radar-add-type:hover { border-color: var(--mp-cyan-deep, #2c8a99); }
.mp-radar-add-type.active { background: var(--mp-cyan-deep, #2c8a99); border-color: var(--mp-cyan-deep, #2c8a99); color: #fff; }
.mp-radar-add-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mp-radar-add-in { font-size: .85rem; border: 1px solid #d8e2e0; border-radius: 8px; padding: 6px 10px; background: #fff; }
.mp-radar-add-in:focus { outline: none; border-color: var(--mp-cyan-deep, #2c8a99); box-shadow: 0 0 0 2px rgba(70,183,197,.18); }
.mp-radar-who-wrap { position: relative; flex: 1 1 220px; min-width: 180px; }
#mp-radar-add-who { width: 100%; }
/* Modern typeahead popup — matches name or email */
.mp-radar-ac { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid #d8e2e0; border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,32,.12); max-height: 264px; overflow-y: auto; padding: 4px; }
.mp-radar-ac-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.mp-radar-ac-row.active { background: #eafaf4; }
.mp-radar-ac-av { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #d7efe6; color: #0f6e56; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mp-radar-ac-main { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.mp-radar-ac-nm { font-size: .84rem; color: #22333b; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-radar-ac-em { font-size: .74rem; color: #7b8791; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-radar-ac-bd { flex: 0 0 auto; font-size: .72rem; color: #1d7a5f; }

/* Radar hover tooltip */
.mp-rtip { position: absolute; z-index: 100050; display: none; width: 260px; background: #14201d; color: #eaf4f1; border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28); font-size: .82rem; line-height: 1.45; pointer-events: none; }
.mp-rtip::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #14201d; border-bottom: 0; }
.mp-rtip.below::after { bottom: auto; top: -7px; border-top: 0; border-bottom-color: #14201d; border-bottom: 7px solid #14201d; }
.mp-rtip-prev { margin: -12px -14px 10px; position: relative; }
.mp-rtip-prev img, .mp-rtip-prev video, .mp-rtip-prev canvas { width: 100%; max-height: 150px; object-fit: cover; display: block; border-radius: 12px 12px 0 0; background: #0c1214; }
.mp-rtip-prev-pdf canvas { background: #fff; }
.mp-rtip-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 1.6rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
.mp-rtip-pdfwait { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .78rem; color: #cfd8dc; }
.mp-rtip-prev-link .mp-rtip-linkcard { display: flex; align-items: center; gap: 8px; padding: 16px 14px; background: #172227; border-radius: 12px 12px 0 0; }
.mp-rtip-linkic { font-size: 1.2rem; }
.mp-rtip-linkhost { font-size: .82rem; color: #bcd; word-break: break-all; }
/* Newsfeed link preview */
.nf-linkprev { margin: 0 0 14px; }
.nf-link-yt { position: relative; display: block; max-width: 480px; border-radius: 12px; overflow: hidden; }
.nf-link-yt img { width: 100%; display: block; }
.nf-link-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
.nf-link-card { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #e2e7ee; border-radius: 10px; text-decoration: none; color: #2c8a99; font-weight: 600; background: #f7faf9; }
.nf-link-card:hover { border-color: #2c8a99; }
.nf-link-ic { font-size: 1.05rem; }
/* AI summary tooltip on media hover */
.nf-ai-tip { position: absolute; z-index: 100060; display: none; max-width: 300px; background: #14201d; color: #eaf4f1; border-radius: 12px; padding: 11px 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28); font-size: .84rem; line-height: 1.5; pointer-events: none; }
.nf-ai-em { color: #ffd77a; }
.nf-ai-dim { color: #9fb0aa; }
/* YouTube playing embedded in place */
.nf-yt-embed { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; margin: 4px 0; }
.nf-yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Inline Word / Excel / text rendering in an expanded feed card */
.nf-prev-office { border: 1px solid #e2e7ee; border-radius: 10px; background: #fff; padding: 14px 16px; }
.nf-office-body { max-height: 150vh; overflow: auto; font-size: .95rem; line-height: 1.6; color: #2c333a; }
.nf-office-body img { max-width: 100%; }
.nf-office-pre { white-space: pre-wrap; word-break: break-word; font-family: var(--mp-mono, monospace); }
.nf-prev-sheet .nf-office-body table { border-collapse: collapse; font-size: .82rem; }
.nf-prev-sheet .nf-office-body td, .nf-prev-sheet .nf-office-body th { border: 1px solid #e2e7ee; padding: 3px 8px; }
.nf-sheet-name { font-size: .8rem; color: #6b7280; margin: 10px 0 4px; }
.nf-office-body .nf-open-tab, .nf-prev-office > .nf-open-tab { display: inline-block; margin-top: 10px; font-size: .82rem; font-weight: 600; color: #2c8a99; text-decoration: none; }
/* Newsfeed real media previews in the carousel slide */
.nf-media-video video { max-width: 100%; max-height: 400px; background: #000; border-radius: 10px; }
.nf-media-pdf { text-align: center; }
.nf-media-pdf .nf-pdf-canvas { max-width: 100%; max-height: 360px; border: 1px solid #e2e7ee; border-radius: 8px; box-shadow: 0 2px 10px rgba(16,24,40,.1); background: #fff; }
.nf-pdf-open { display: inline-block; margin-top: 8px; font-size: .85rem; font-weight: 600; color: #2c8a99; text-decoration: none; }
.nf-pdf-open:hover { text-decoration: underline; }
.nf-media-audio { padding: 40px 16px; }
.nf-audio-ic { font-size: 2.6rem; margin-bottom: 14px; }
.mp-rtip-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mp-rtip-em { font-size: 1.15rem; }
.mp-rtip-t { font-weight: 700; font-size: .92rem; color: #fff; }
.mp-rtip-sub { margin-bottom: 8px; color: #b8ccc5; }
.mp-rtip .mp-kind-badge { background: rgba(255,255,255,.14); color: #d7efe6; }
.mp-rtip-body { border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mp-rtip-row { color: #dbe8e3; }
.mp-rtip-dim { color: #93a8a1; }
.mp-rtip-prep { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); color: #7fe0c0; }
.mp-rtip-ai:not(:empty) { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; line-height: 1.5; color: #eef4f1; }
.mp-rtip-ai-em { color: #ffd77a; }
.mp-rtip-ai-dim { color: #9fb0aa; }
.mp-rtip-note { color: #f0e6b6; }
.mp-radar-add-note { flex: 1 1 100%; margin-top: 2px; }
.mp-dash-row-note { font-size: .76rem; color: #8a949d; margin-top: 3px; font-style: italic; }
.mp-id-note { display: block; font-size: .76rem; color: #8a949d; font-style: italic; margin-top: 2px; }
.mp-rtip-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); color: #8fa6f0; font-size: .78rem; }

/* ---- Document library page ---- */
.mp-lib { padding: 28px 0 60px; }
.mp-lib-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.mp-lib-usage { flex: 0 0 auto; min-width: 210px; max-width: 260px; }
.mp-lib-usage-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.mp-lib-usage-txt { font-size: .8rem; color: #55606a; font-weight: 600; }
.mp-lib-usage-pct { font-size: .78rem; color: #8a949d; }
.mp-lib-usage-bar { height: 8px; border-radius: 999px; background: #e9edf1; overflow: hidden; }
.mp-lib-usage-fill { display: block; height: 100%; background: #1d7a5f; border-radius: 999px; transition: width .3s ease; }
.mp-lib-usage-fill.high { background: #e0921e; }
.mp-lib-usage-fill.full { background: #c0392b; }
.mp-lib-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; color: #101216; margin: 0 0 6px; }
.mp-lib-sub { color: #6b7280; font-size: 1rem; margin: 0; max-width: 640px; line-height: 1.6; }
.mp-lib-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.mp-lib-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e2e7ee; border-radius: 10px; padding: 0 12px; height: 40px; }
.mp-lib-search input { border: none; outline: none; background: none; font-size: .92rem; width: 100%; }
.mp-lib-search-ic { color: #9aa4ad; font-size: .9rem; }
.mp-lib-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-lib-filter { font-size: .82rem; font-weight: 600; color: #55606a; background: #fff; border: 1px solid #e2e7ee; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.mp-lib-filter:hover { border-color: #1d7a5f; }
.mp-lib-filter.active { background: #1d7a5f; border-color: #1d7a5f; color: #fff; }
.mp-lib-drop { border: 1.5px dashed #c8d3d0; border-radius: 12px; padding: 18px; text-align: center; background: #f7faf9; cursor: pointer; margin-bottom: 18px; transition: border-color .12s, background .12s; }
.mp-lib-drop.dragging { border-color: #1d7a5f; background: #eafaf4; }
.mp-lib-drop-ic { font-size: 1.5rem; }
.mp-lib-drop-main { font-size: .95rem; color: #3d434b; font-weight: 600; margin-top: 4px; }
.mp-lib-drop-sub { font-size: .8rem; color: #8a949d; margin-top: 2px; }
.mp-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.mp-lib-card { position: relative; background: #fff; border: 1px solid #e6ebf1; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.mp-lib-thumb { height: 104px; display: flex; align-items: center; justify-content: center; background: #eef4f6; position: relative; }
.mp-lib-thumb img, .mp-lib-thumb video { width: 100%; height: 104px; object-fit: cover; display: block; }
.mp-lib-thumb-video { background: #000; }
.mp-lib-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 1.4rem; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.mp-lib-thumb-ic span { font-size: 2.1rem; }
.mp-lib-pdf { background: #fdecec; }
.mp-lib-thumb-pdf { position: relative; overflow: hidden; background: #fdecec; }
.mp-lib-pdfcanvas { width: 100%; height: 104px; display: block; object-fit: cover; }
.mp-lib-pdfglyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; }
.mp-lib-doc { background: #e9f1fb; }
.mp-lib-sheet { background: #e7f6ee; }
.mp-lib-slide { background: #fdf0e3; }
.mp-lib-audio { background: #efeafc; }
.mp-lib-card-body { padding: 8px 10px; }
.mp-lib-card-name { display: block; font-size: .84rem; font-weight: 600; color: #22333b; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-lib-card-name:hover { color: #1d7a5f; text-decoration: underline; }
.mp-lib-card-meta { font-size: .72rem; color: #97a0a8; margin-top: 2px; }
.mp-lib-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: none; border-radius: 8px; background: rgba(255,255,255,.9); cursor: pointer; font-size: .8rem; line-height: 1; display: none; }
.mp-lib-card:hover .mp-lib-del { display: block; }

/* Bulk select: a checkbox per card (shown on hover or when any are selected) + a selected ring */
.mp-lib-pick { position: absolute; top: 6px; left: 6px; z-index: 4; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.92); display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(16,24,40,.18); }
.mp-lib-card:hover .mp-lib-pick, .mp-lib-card.sel .mp-lib-pick { display: flex; }
.mp-lib-pick-cb { width: 16px; height: 16px; accent-color: #0f6e56; cursor: pointer; }
.mp-lib-card.sel { border-color: #0f6e56; box-shadow: 0 0 0 2px rgba(15,110,86,.35); }

.mp-lib-bulk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #0f6e56; color: #fff; border-radius: 12px; padding: 10px 16px; margin-bottom: 14px; }
.mp-lib-bulk-count { font-weight: 700; font-size: .92rem; }
.mp-lib-bulk-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-lib-bulk-move { display: inline-flex; align-items: center; gap: 6px; }
.mp-lib-bulk-cat { font-size: .84rem; border: none; border-radius: 999px; padding: 7px 13px; outline: none; min-width: 180px; }
.mp-lib-bulk-movebtn { font-size: .82rem; font-weight: 700; color: #0f6e56; background: #fff; border: none; border-radius: 999px; padding: 7px 15px; cursor: pointer; }
.mp-lib-bulk-remove { font-size: .82rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 7px 15px; cursor: pointer; }
.mp-lib-bulk-remove:hover { background: rgba(255,255,255,.26); }
.mp-lib-bulk-clear { font-size: .82rem; font-weight: 600; color: #eafaf4; background: none; border: none; cursor: pointer; text-decoration: underline; }
.mp-lib-empty { color: #6b7280; font-size: .95rem; padding: 30px 4px; text-align: center; }
.mp-lib-link { background: #e9f1fb; }
.mp-lib-thumb { cursor: pointer; }
/* In-place resource viewer (lightbox) */
.mp-lv-overlay { position: fixed; inset: 0; background: rgba(12,18,22,.72); z-index: 100050; display: none; align-items: center; justify-content: center; padding: 24px; }
.mp-lv-overlay.open { display: flex; }
.mp-lv { width: 100%; max-width: 900px; max-height: 90vh; background: #fff; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.mp-lv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef1f4; }
.mp-lv-name { font-size: .95rem; font-weight: 600; color: #1c2b32; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-lv-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mp-lv-open { font-size: .82rem; font-weight: 600; color: #1d7a5f; text-decoration: none; border: 1px solid #cdeede; border-radius: 999px; padding: 5px 12px; }
.mp-lv-open:hover { background: #eafaf4; }
.mp-lv-x { border: none; background: none; font-size: 1.05rem; color: #8a949d; cursor: pointer; padding: 4px 6px; }
.mp-lv-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #0f1518; overflow: auto; }
.mp-lv-body img { max-width: 100%; max-height: 82vh; display: block; }
.mp-lv-body video { max-width: 100%; max-height: 82vh; background: #000; }
.mp-lv-body iframe { width: 100%; height: 82vh; border: 0; background: #fff; }
.mp-lv-audio { padding: 40px; text-align: center; }
.mp-lv-audio-ic { font-size: 3rem; margin-bottom: 16px; }
.mp-lv-none { padding: 48px 24px; text-align: center; color: #e6edf0; }
.mp-lv-none-ic { font-size: 3rem; margin-bottom: 12px; }
.mp-lv-none-sub { font-size: .85rem; color: #9fb0b7; }
/* Reliable file picker: off-screen (not display:none, so .click() always opens the dialog) */
.mp-lib-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.mp-lib-choose-btn { margin-top: 12px; font-size: .84rem; font-weight: 700; color: #fff; background: #1d7a5f; border: none; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.mp-lib-choose-btn:hover { background: #176a52; }
/* Editable description on a library card */
.mp-lib-desc { display: block; width: 100%; text-align: left; margin-top: 6px; font-size: .78rem; line-height: 1.4; cursor: pointer; border: none; background: none; padding: 0; }
.mp-lib-desc.has { color: #4a5560; }
.mp-lib-desc.has:hover { color: #1d7a5f; }
.mp-lib-desc.add { color: #9aa4ad; font-weight: 600; }
.mp-lib-desc.add:hover { color: #1d7a5f; }
/* Inline AI summary on every card */
.mp-lib-ai { margin-top: 6px; font-size: .74rem; line-height: 1.45; color: #5b6b64; background: #f2faf7; border: 1px solid #e0efe9; border-radius: 8px; padding: 6px 9px; }
.mp-lib-ai .nf-ai-em { font-style: normal; }
.mp-lib-ai .nf-ai-dim { color: #9aa4ad; }
.mp-lib-desc-edit { margin-top: 6px; }
.mp-lib-desc-ta { width: 100%; font-size: .78rem; border: 1px solid #d8e2e0; border-radius: 8px; padding: 6px 8px; resize: vertical; outline: none; }
.mp-lib-desc-ta:focus { border-color: #1d7a5f; }
.mp-lib-desc-actions { display: flex; gap: 6px; margin-top: 6px; }
.mp-lib-desc-save { font-size: .75rem; font-weight: 700; color: #fff; background: #1d7a5f; border: none; border-radius: 7px; padding: 4px 12px; cursor: pointer; }
.mp-lib-desc-cancel { font-size: .75rem; font-weight: 600; color: #6b7280; background: none; border: 1px solid #e2e7ee; border-radius: 7px; padding: 4px 10px; cursor: pointer; }

/* Categories — filter chips above the grid + a per-card category tag */
.mp-lib-cats { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 4px; }
.mp-lib-cats:empty { display: none; }
.mp-lib-cat-chip { font-size: .8rem; font-weight: 600; color: #0f6e56; background: #eafaf4; border: 1px solid #cde7de; border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.mp-lib-cat-chip:hover { background: #dff5ec; }
.mp-lib-cat-chip.active { background: #0f6e56; border-color: #0f6e56; color: #fff; }
/* Drag selected media onto a category chip */
.mp-lib-card[draggable="true"] { cursor: grab; }
.mp-lib-card[draggable="true"]:active { cursor: grabbing; }
/* So the whole card is the drag source, not a child image/video the browser would drag instead. */
.mp-lib-card img, .mp-lib-card video { -webkit-user-drag: none; user-drag: none; }
body.mp-lib-dragging .mp-lib-cat-chip:not([data-c="all"]) { outline: 2px dashed #7fc9b4; outline-offset: 2px; }
.mp-lib-cat-chip.drop-hover { background: #0f6e56 !important; border-color: #0f6e56 !important; color: #fff !important; transform: scale(1.06); }
.mp-lib-cat { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 4px 11px; cursor: pointer; border: 1px solid #cde7de; background: #eafaf4; color: #0f6e56; }
.mp-lib-cat.add { color: #9aa4ad; background: #fff; border: 1px dashed #d4dbe2; font-weight: 600; }
.mp-lib-cat.add:hover { color: #0f6e56; border-color: #0f6e56; }
.mp-lib-cat.has:hover { background: #dff5ec; }
.mp-lib-cat-edit { margin-top: 8px; }
.mp-lib-cat-input { width: 100%; font-size: .8rem; border: 1px solid #d8e2e0; border-radius: 8px; padding: 6px 9px; outline: none; }
.mp-lib-cat-input:focus { border-color: #1d7a5f; }
.mp-lib-cat-actions { display: flex; gap: 6px; margin-top: 6px; }
.mp-lib-cat-save { font-size: .75rem; font-weight: 700; color: #fff; background: #1d7a5f; border: none; border-radius: 7px; padding: 4px 12px; cursor: pointer; }
.mp-lib-cat-save:disabled { opacity: .6; cursor: default; }
.mp-lib-cat-cancel { font-size: .75rem; font-weight: 600; color: #6b7280; background: none; border: 1px solid #e2e7ee; border-radius: 7px; padding: 4px 10px; cursor: pointer; }
/* Top-level "New category" control + upload-target hint */
.mp-lib-cat-new { font-size: .8rem; font-weight: 600; color: #1d7a5f; background: #fff; border: 1px dashed #b7d8cd; border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.mp-lib-cat-new:hover { background: #f0faf6; border-color: #1d7a5f; }
.mp-lib-cat-newwrap { display: inline-flex; align-items: center; gap: 6px; }
.mp-lib-cat-newinput { font-size: .82rem; border: 1px solid #b7d8cd; border-radius: 999px; padding: 6px 13px; outline: none; min-width: 160px; }
.mp-lib-cat-newinput:focus { border-color: #1d7a5f; }
.mp-lib-cat-newok { font-size: .78rem; font-weight: 700; color: #fff; background: #1d7a5f; border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.mp-lib-uptarget { margin-top: 10px; font-size: .85rem; font-weight: 600; color: #0f6e56; background: #eafaf4; border: 1px solid #cde7de; border-radius: 8px; padding: 8px 12px; display: inline-block; }

/* Capture area: Upload / Record / Add link */
.mp-lib-add { margin-bottom: 18px; }
.mp-lib-add-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mp-lib-add-tab { font-size: .85rem; font-weight: 600; color: #55606a; background: #fff; border: 1px solid #e2e7ee; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.mp-lib-add-tab:hover { border-color: #1d7a5f; }
.mp-lib-add-tab.active { background: #1d7a5f; border-color: #1d7a5f; color: #fff; }
.mp-lib-rec, .mp-lib-linkform { border: 1px solid #e2e7ee; border-radius: 12px; padding: 16px; background: #f7faf9; }
.mp-lib-rec-modes { display: flex; gap: 16px; margin-bottom: 12px; font-size: .88rem; color: #3d434b; }
.mp-lib-rec-modes label { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.mp-lib-rec-preview { width: 100%; max-width: 320px; border-radius: 10px; background: #000; margin-bottom: 12px; }
.mp-lib-rec-row { display: flex; align-items: center; gap: 12px; }
.mp-lib-rec-start { font-size: .88rem; font-weight: 700; color: #fff; background: #c0392b; border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.mp-lib-rec-start:hover { background: #a93226; }
.mp-lib-rec-stop { font-size: .88rem; font-weight: 700; color: #fff; background: #1d7a5f; border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.mp-lib-rec-timer { font-size: .9rem; font-weight: 700; color: #c0392b; font-variant-numeric: tabular-nums; }
.mp-lib-rec-status { font-size: .8rem; color: #8a949d; margin-top: 10px; }
.mp-lib-linkform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mp-lib-link-in { height: 40px; border: 1px solid #e2e7ee; border-radius: 10px; padding: 0 12px; font-size: .9rem; outline: none; }
.mp-lib-link-in:focus { border-color: #1d7a5f; }
#mp-lib-link-url { flex: 2 1 260px; }
#mp-lib-link-title { flex: 1 1 160px; }
.mp-lib-link-save { height: 40px; font-size: .85rem; font-weight: 700; color: #fff; background: #1d7a5f; border: none; border-radius: 999px; padding: 0 20px; cursor: pointer; }
.mp-lib-link-save:hover { background: #176a52; }

/* ---- Add-from-library picker popup ---- */
.mp-lp-overlay { position: fixed; inset: 0; background: rgba(16,24,32,.5); z-index: 100000; display: none; align-items: center; justify-content: center; padding: 16px; }
.mp-lp-overlay.open { display: flex; }
.mp-lp { width: 100%; max-width: 560px; max-height: 86vh; background: #fff; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.mp-lp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eef1f4; }
.mp-lp-title { font-size: 1.02rem; font-weight: 700; color: #1c2b32; }
.mp-lp-x { border: none; background: none; font-size: 1rem; color: #8a949d; cursor: pointer; }
.mp-lp-search { padding: 12px 16px 0; }
.mp-lp-search input { width: 100%; height: 38px; border: 1px solid #e2e7ee; border-radius: 10px; padding: 0 12px; font-size: .9rem; outline: none; }
.mp-lp-search input:focus { border-color: #1d7a5f; }
.mp-lp-cats { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 16px 0; }
.mp-lp-cats:empty { display: none; }
.mp-lp-cat { font-size: .78rem; font-weight: 600; color: #0f6e56; background: #eafaf4; border: 1px solid #cde7de; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.mp-lp-cat:hover { background: #dff5ec; }
.mp-lp-cat.on { background: #0f6e56; border-color: #0f6e56; color: #fff; }
.mp-lp-foot-btns { display: inline-flex; align-items: center; gap: 8px; }
.mp-lp-selall { border: 1px solid #cde7de; background: #fff; color: #0f6e56; border-radius: 999px; padding: 8px 14px; font-size: .84rem; font-weight: 700; cursor: pointer; }
.mp-lp-selall:hover { background: #f0faf6; }
.mp-lp-selall:disabled { opacity: .5; cursor: default; }
.mp-lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 14px 16px; overflow-y: auto; }
.mp-lp-card { position: relative; border: 1px solid #e6ebf1; border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; }
.mp-lp-card.sel { border: 2px solid #1d7a5f; }
.mp-lp-thumb { height: 70px; display: flex; align-items: center; justify-content: center; background: #eef4f6; }
.mp-lp-thumb img, .mp-lp-thumb video { width: 100%; height: 70px; object-fit: cover; display: block; }
.mp-lp-thumb-v { background: #000; }
.mp-lp-thumb-ic span { font-size: 1.7rem; }
.mp-lp-name { font-size: .76rem; font-weight: 600; color: #22333b; padding: 6px 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-lp-meta { font-size: .68rem; color: #97a0a8; padding: 0 8px 8px; }
.mp-lp-check { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: #1d7a5f; color: #fff; font-size: .72rem; display: none; align-items: center; justify-content: center; }
.mp-lp-card.sel .mp-lp-check { display: flex; }
.mp-lp-empty { grid-column: 1 / -1; text-align: center; color: #8a949d; font-size: .9rem; padding: 26px 8px; }
.mp-lp-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #eef1f4; }
.mp-lp-count { font-size: .82rem; color: #6b7280; }
.mp-lp-cancel { border: 1px solid #e2e7ee; background: #fff; color: #55606a; border-radius: 999px; padding: 8px 16px; font-size: .84rem; font-weight: 600; cursor: pointer; margin-right: 8px; }
.mp-lp-add { border: none; background: #1d7a5f; color: #fff; border-radius: 999px; padding: 8px 18px; font-size: .84rem; font-weight: 700; cursor: pointer; }
.mp-lp-add:hover { background: #176a52; }
.mp-radar-add-recur { font-size: .8rem; color: #3d434b; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.mp-radar-add-save { font-size: .82rem; font-weight: 700; color: #fff; background: #1d7a5f; border: none; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.mp-radar-add-save:hover { background: #176a52; }
.mp-radar-add-save:disabled { opacity: .6; cursor: default; }
.mp-radar-add-cancel { font-size: .82rem; font-weight: 600; color: #6b7280; background: none; border: none; cursor: pointer; padding: 6px 8px; }
.mp-radar-add-cancel:hover { color: #3d434b; }
.mp-radar-add-picked { margin-top: 8px; font-size: .78rem; color: #1d7a5f; background: #eafaf4; border: 1px solid #cdeede; border-radius: 8px; padding: 5px 10px; display: inline-block; }

/* ---- Important dates (settings) ---- */
.mp-id-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
.mp-id-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: #f4f6f9; }
.mp-id-when { font-size: .82rem; color: #6b7280; min-width: 92px; }
.mp-id-name { flex: 1; font-weight: 600; color: #23272f; }
.mp-id-del { border: 0; background: transparent; color: #b0b6c0; cursor: pointer; font-size: .95rem; }
.mp-id-del:hover { color: #e05656; }
.mp-id-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mp-id-recur { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: #5b6270; margin: 0; }
.mp-id-import { margin-top: 14px; }
.mp-id-emoji { font-size: 1.1rem; line-height: 1; width: 22px; text-align: center; flex: 0 0 auto; }

/* Type-first "important date" picker */
.mp-id-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mp-id-type { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; background: #fff; color: #23272f; font-weight: 600; font-size: .9rem; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.mp-id-type:hover { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.06); }
.mp-id-type.active { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.12); box-shadow: 0 0 0 2px rgba(70,183,197,.18); }
.mp-id-type-emoji { font-size: 1.05rem; line-height: 1; }
.mp-id-panel { border: 1px solid var(--mp-line, #e7ebf2); border-radius: 14px; padding: 14px 16px; background: #fbfcfe; margin-bottom: 6px; }
.mp-id-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 700; color: #23272f; }
.mp-id-panel-emoji { font-size: 1.2rem; line-height: 1; }
.mp-id-panel-label { flex: 1; }
.mp-id-panel-close { border: 0; background: transparent; color: #b0b6c0; cursor: pointer; font-size: 1rem; line-height: 1; }
.mp-id-panel-close:hover { color: #e05656; }
.mp-id-panel-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Address-book circle multi-picker (edit form) */
.mp-ab-pick-label { display: block; font-weight: 600; font-size: .82rem; color: #6b7280; margin: 4px 0 6px; }
.mp-ab-circle-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.mp-ab-pick { border: 1px solid var(--mp-line, #e7ebf2); background: #fff; color: #4b5563; border-radius: 999px; padding: 5px 13px; font-size: .84rem; font-weight: 600; cursor: pointer; transition: all .14s ease; }
.mp-ab-pick:hover { border-color: var(--mp-cyan, #46b7c5); color: var(--mp-cyan-deep, #2e8fa3); }
.mp-ab-pick.on { background: var(--mp-cyan-deep, #2e8fa3); border-color: var(--mp-cyan-deep, #2e8fa3); color: #fff; }
.mp-ab-pick.on::before { content: "✓ "; }
.mp-ab-pick-input { border: 1px dashed #cfd6e0; border-radius: 999px; padding: 5px 13px; font-size: .84rem; min-width: 130px; outline: none; }
.mp-ab-pick-input:focus { border-color: var(--mp-cyan, #46b7c5); border-style: solid; }

/* Circle chips on the contact card */
.mp-card-chip { display: inline-block; background: rgba(70,183,197,.12); color: var(--mp-cyan-deep, #2e8fa3); border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; margin: 2px 2px 0 0; }

/* Type-to-confirm danger modal (archive / delete account) */
#mp-danger-wrap { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; }
.mp-danger-backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.55); backdrop-filter: blur(2px); }
.mp-danger-modal { position: relative; width: min(440px, 92vw); background: #fff; border-radius: var(--mp-radius, 16px); box-shadow: var(--mp-shadow-lift); padding: 26px 26px 22px; text-align: center; }
.mp-danger-emoji { font-size: 2.2rem; line-height: 1; margin-bottom: 8px; }
.mp-danger-title { font-size: 1.25rem; font-weight: 800; color: var(--mp-ink, #101216); margin: 0 0 8px; }
.mp-danger-lead { color: #5b6270; font-size: .92rem; margin: 0 0 18px; }
.mp-danger-label { display: block; text-align: left; font-weight: 600; font-size: .85rem; color: #4b5563; margin: 12px 0 6px; }
.mp-danger-label b { letter-spacing: .06em; }
.mp-danger-modal .form-control { border-radius: var(--mp-radius-sm, 10px); border: 1px solid var(--mp-line, #e7ebf2); }
.mp-danger-hint { display: block; text-align: left; color: #8a93a2; font-size: .78rem; margin-top: 5px; }
.mp-danger-err { color: #c0392b; font-size: .85rem; text-align: left; min-height: 1.1em; margin-top: 10px; }
.mp-danger-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.mp-danger-cancel { background: transparent; border: 1px solid var(--mp-line, #e7ebf2); color: #4b5563; border-radius: 10px; padding: 9px 18px; font-weight: 600; font-size: .88rem; cursor: pointer; }
.mp-danger-go { background: var(--mp-cyan-deep, #2e8fa3); border: 0; color: #fff; border-radius: 10px; padding: 9px 20px; font-weight: 700; font-size: .88rem; cursor: pointer; }
.mp-danger-go:disabled { opacity: .45; cursor: not-allowed; }
.mp-danger-go--red { background: #c0392b; }

/* 2FA method chooser (Settings > Extra security) */
.mp-2fa-methods { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 12px 0 16px; }
@media (max-width: 620px) { .mp-2fa-methods { grid-template-columns: 1fr; } }
.mp-2fa-method { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 12px; padding: 12px 14px; cursor: pointer; margin: 0; transition: border-color .15s, background-color .15s; }
.mp-2fa-method:hover { border-color: var(--mp-cyan, #46b7c5); }
.mp-2fa-method input { grid-row: 1 / span 2; align-self: center; }
.mp-2fa-method:has(input:checked) { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.06); }
.mp-2fa-name { font-weight: 600; color: var(--mp-ink, #23272f); }
.mp-2fa-sub { font-size: .8rem; color: #6b7280; grid-column: 2; }
.mp-2fa-soon { opacity: .55; cursor: not-allowed; }
.mp-2fa-soon:hover { border-color: var(--mp-line, #e7ebf2); }

/* ---- My Pages: modern cards ---- */
.mp-pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 18px; }
.mp-page-card { background: #fff; border: 1px solid var(--mp-line, #e7ebf2); border-radius: var(--mp-radius, 16px); box-shadow: var(--mp-shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .18s ease, transform .18s ease; border-left: 4px solid #cfd6e0; }
.mp-page-card:hover { box-shadow: var(--mp-shadow-lift); transform: translateY(-2px); }
.mp-page-card.is-locked { border-left-color: var(--mp-cyan-deep, #2e8fa3); }
.mp-page-card.is-open { border-left-color: #4caf82; }
.mp-page-head { display: flex; align-items: center; gap: 8px; }
.mp-page-lock { font-size: 1.05rem; line-height: 1; }
.mp-page-state { font-size: .74rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.mp-page-card.is-open .mp-page-state { color: #3f9d72; }
.mp-page-title { font-size: 1.15rem; font-weight: 700; color: var(--mp-ink, #101216); margin: 0; letter-spacing: -.2px; }
.mp-page-about { font-size: .9rem; color: #5b6270; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-page-about-empty { font-style: italic; color: #9aa1ac; }
.mp-page-people { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.mp-page-line { display: flex; gap: 8px; font-size: .85rem; align-items: baseline; flex-wrap: wrap; }
.mp-page-k { flex: 0 0 auto; color: #8a93a2; font-weight: 700; font-size: .76rem; min-width: 74px; }
.mp-page-names { display: flex; flex-wrap: wrap; gap: 5px; }
.mp-page-name { background: rgba(70,183,197,.1); color: var(--mp-cyan-deep, #2e8fa3); border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; }
.mp-page-none { color: #9aa1ac; font-size: .82rem; }
.mp-page-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mp-line, #e7ebf2); }
.mp-page-chip { text-decoration: none !important; background: #f4f6f9; color: #4b5563 !important; border-radius: 999px; padding: 4px 11px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.mp-page-chip:hover { background: rgba(70,183,197,.14); color: var(--mp-cyan-deep, #2e8fa3) !important; }
.mp-page-added { margin-left: auto; font-size: .74rem; color: #9aa1ac; }
.mp-pages-empty { text-align: center; color: #6b7280; padding: 44px 20px; }
.mp-pages-empty-emoji { font-size: 2.4rem; margin-bottom: 8px; }
.mp-pages-loadmore { text-align: center; margin-top: 18px; }
.mp-pages-loadmore .tbl-load-more-btn { color: var(--mp-cyan-deep, #2e8fa3); font-weight: 600; text-decoration: none; }

/* My Pages card: media thumbnail + lock badge overlay */
.mp-page-card { position: relative; }
.mp-page-thumb { margin: -20px -20px 6px; height: 140px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(70,183,197,.18), rgba(46,143,163,.10)); }
.mp-page-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-page-thumb-none { font-size: 2.6rem; opacity: .6; }

/* Document preview thumbnails (docx / pdf / spreadsheet) rendered live inside the card.
   The rendered content is decorative here — clicks fall through to the card, so it's
   non-interactive and clipped to the thumb box. A page-top fade hints there's more. */
.mp-thumb-doc { background: #fff; align-items: flex-start; justify-content: flex-start; }
.mp-thumb-doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; z-index: 1; }
.mp-thumb-ext { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: #2e8fa3; background: rgba(70,183,197,.14); border: 1px solid rgba(70,183,197,.35); border-radius: 8px; padding: 4px 10px; }
.mp-thumb-frame { width: 100%; height: 100%; border: 0; pointer-events: none; background: #fff; }
video.mp-thumb-frame { object-fit: cover; background: #0c1116; }
.mp-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(16,24,40,.55); color: #fff; font-size: 1.05rem; padding-left: 3px; backdrop-filter: blur(2px); pointer-events: none; }
.mp-thumb-body { width: 100%; pointer-events: none; overflow: hidden; }
.mp-thumb-text { font-size: 9px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; padding: 8px 10px; color: #344; font-family: ui-monospace, Menlo, Consolas, monospace; }
/* Real docx/xlsx HTML is full-page-width; shrink it so a meaningful chunk shows in 140px. */
.mp-thumb-rich { transform: scale(.42); transform-origin: top left; width: 238%; padding: 8px 10px; color: #223; font-size: 13px; line-height: 1.4; }
.mp-thumb-rich * { max-width: 100% !important; }
.mp-thumb-rich img { max-height: 120px; object-fit: contain; }
.mp-thumb-rich table { border-collapse: collapse; }
.mp-thumb-rich td, .mp-thumb-rich th { border: 1px solid #dde3ea; padding: 2px 5px; white-space: nowrap; }
.mp-thumb-rich h1, .mp-thumb-rich h2, .mp-thumb-rich h3 { margin: 0 0 4px; }
.mp-thumb-rich p { margin: 0 0 4px; }
.mp-page-badge { position: absolute; top: 12px; left: 16px; z-index: 2; background: rgba(16,24,40,.72); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(2px); }
.mp-page-card.is-open .mp-page-badge { background: rgba(63,157,114,.92); }

.mp-page-chip-go { background: var(--mp-cyan-deep, #2e8fa3) !important; color: #fff !important; }
.mp-page-chip-go:hover { filter: brightness(1.06); background: var(--mp-cyan-deep, #2e8fa3) !important; color: #fff !important; }

/* ---------- Compact one-screen dashboard (fits without scrolling) ---------- */
.mp-dash { padding-top: .4rem; }
.mp-dash-hero { margin-bottom: .7rem; gap: 1rem; }
.mp-dash-hello { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin: .05rem 0 .2rem; }
.mp-dash-sub { font-size: .86rem; }
.mp-dash-cta { min-height: 74px; width: 172px; padding: 9px 14px; }
.mp-dash-cta-emoji { font-size: 1.15rem; }
.mp-dash-cta-title { font-size: .95rem; margin-top: 2px; }
.mp-dash-cta-sub { font-size: .74rem; }

.mp-dash-stats { gap: 11px; margin-bottom: 11px; }
.mp-dash-stat { padding: .6rem .9rem; }
.mp-dash-num { font-size: 1.45rem; margin-top: 1px; }
.mp-dash-stat-emoji { font-size: 1.1rem; }
.mp-dash-lbl { font-size: .72rem; }

/* Bento grid: all info cards in one bounded, scroll-inside layout */
.mp-dash-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 10px;
}
/* Equal-size cards: fixed height, the list fills the remaining space and scrolls */
.mp-dash-bento > .mp-dash-card {
    margin: 0;
    padding: .8rem .95rem;
    /* Resolution-aware: cards grow with the viewport so two rows fill the screen,
       clamped so they never get too short on laptops or absurdly tall on big monitors. */
    height: clamp(210px, 32vh, 440px);
    display: flex;
    flex-direction: column;
    position: relative;
}
.mp-dash-bento .mp-dash-card-title { margin-bottom: .4rem; font-size: .9rem; flex: 0 0 auto; }
.mp-dash-bento .mp-dash-feed-head { flex: 0 0 auto; }
.mp-dash-bento > .mp-dash-card > :last-child { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mp-dash-bento .mp-dash-list,
.mp-dash-bento .mp-radar-list { max-height: none; }
.mp-dash-bento .mp-dash-row { padding: .4rem 0; }
/* Slightly smaller type throughout the bento cards so they read calmer. */
.mp-dash-bento .mp-dash-row-title { font-size: .86rem; }
.mp-dash-bento .mp-dash-row-sub,
.mp-dash-bento .mp-dash-row-right,
.mp-dash-bento .mp-dash-row-when { font-size: .76rem; }
.mp-dash-bento .mp-ready-verdict { font-size: .84rem; }
.mp-dash-bento .mp-ready-gap-t { font-size: .83rem; }
.mp-dash-bento .mp-ready-gap-why { font-size: .75rem; }
.mp-dash-bento .mp-ready-line { font-size: .82rem; }
.mp-dash-bento .mp-dash-empty { font-size: .82rem; }

/* Click-to-expand: a card pops to full width and grows for more viewing room */
.mp-dash-expand { font-size: .9rem; color: #b8bec8; line-height: 1; padding: 0 3px; vertical-align: middle; }
.mp-dash-clickable { cursor: zoom-in; transition: box-shadow .15s ease; }
.mp-dash-clickable:hover { box-shadow: 0 6px 22px rgba(16,24,40,.13); }
.mp-dash-clickable:hover .mp-dash-expand { color: var(--mp-cyan-deep, #2e8fa3); }
.mp-dash-card-expanded { grid-column: 1 / -1; box-shadow: 0 10px 34px rgba(16,24,40,.18); z-index: 2; }
.mp-dash-card-expanded.mp-dash-clickable { cursor: default; }
/* After expanding, the whole card is drag-resizable — grab the bottom-right corner.
   High-specificity selectors so they beat the equal-size .mp-dash-bento rules. */
.mp-dash-bento > .mp-dash-card.mp-dash-card-expanded { height: 46vh; min-height: 220px; max-height: 88vh; resize: vertical; overflow: hidden; }
.mp-dash-bento > .mp-dash-card.mp-dash-card-expanded > :last-child { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.mp-dash-bento > .mp-dash-card.mp-dash-card-expanded::after { content: "⇲"; position: absolute; bottom: 3px; right: 6px; color: #b8bec8; font-size: .9rem; pointer-events: none; }

/* Resolution-aware page width: use more of large screens (dashboard + content pages).
   Pages with their own narrower max-width (Settings, News feed) keep it, being more specific. */
@media (min-width: 1400px) {
    .mp-dash .container, .main-content-user > .container { max-width: min(1500px, 94vw); }
}
.mp-dash-bento .mp-dash-ring { width: 96px; height: 96px; }
.mp-dash-bento .mp-dash-chart { height: 104px; }
.mp-dash-bento .mp-radar-item { padding: .4rem .55rem; }
.mp-dash-bento .mp-dash-ready-list { min-width: 130px; }
.mp-dash-foot { margin-top: 4px; }

@media (max-width: 1000px) { .mp-dash-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .mp-dash-bento { grid-template-columns: 1fr; } }

/* ---------- Dashboard detail popup ---------- */
.mp-dash-clickrow, .mp-dash-clickbar { cursor: pointer; }
.mp-dash-clickrow { border-radius: 8px; transition: background .12s ease; }
.mp-dash-clickrow:hover { background: rgba(70,183,197,.08); }
.mp-dash-open-arrow { display: inline-block; margin-left: 6px; color: #46b7c5; font-weight: 700; opacity: 0; transform: translateX(-3px); transition: opacity .12s ease, transform .12s ease; }
.mp-dash-openable:hover .mp-dash-open-arrow { opacity: 1; transform: translateX(0); }
.mp-dash-clickbar:hover .mp-dash-bar { filter: brightness(1.12); }

.mp-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; }
.mp-modal-backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.45); backdrop-filter: blur(2px); }

/* MP-142: View Media (#imageGridModal) opens from inside this popup. Bootstrap's
   own z-index (modal 1050, backdrop 1040) is well under 3000, so without this it
   rendered behind the popup instead of on top of it; see ViewMedia.js for the
   matching backdrop bump. */
#imageGridModal.modal { z-index: 3050; }
.mp-modal-box { position: relative; background: #fff; border-radius: 16px; padding: 22px 24px; width: min(440px, 92vw); max-height: 82vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(16,24,40,.32); }
.mp-modal-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 1.05rem; color: #9aa1ab; cursor: pointer; line-height: 1; }
.mp-modal-close:hover { color: #e05656; }
.mp-detail-head { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; margin-bottom: 10px; padding-right: 24px; }
.mp-detail-head h3 { margin: 0; font-size: 1.15rem; font-family: 'Nexa-Bold', sans-serif; color: var(--mp-ink, #101216); }
.mp-detail-rows { margin: 14px 0 4px; }
.mp-detail-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f3f5f9; }
.mp-detail-rows span { color: #7b8492; }
.mp-detail-rows b { color: var(--mp-ink, #101216); }
.mp-detail-text { color: #4b5563; line-height: 1.6; margin: 6px 0 0; }
.mp-detail-cta { display: inline-block; margin-top: 14px; background: var(--mp-cyan-deep, #2e8fa3); color: #fff !important; padding: 8px 16px; border-radius: 999px; font-weight: 600; text-decoration: none !important; }
.mp-detail-cta:hover { filter: brightness(1.06); }
.mp-detail-li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #f3f5f9; }
.mp-detail-li span { flex: 1; }
.mp-detail-li em { color: #7b8492; font-style: normal; font-size: .82rem; }

/* ---------- News feed redesign + media lightbox ---------- */
.newsfeed-box#kt_content { max-width: min(860px, 94vw); margin: 0 auto; width: 100%; }

/* News feed horizontal filter bar (circles + type + search) */
.nf-filterbar { background: #fff; border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); padding: 14px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.nf-fb-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nf-fb-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--mp-muted); min-width: 62px; }
.nf-fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-side-chip { display: inline-flex; align-items: center; gap: 6px; background: #f4f6f9; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; padding: 6px 13px; font-size: .85rem; font-weight: 600; color: #3d434b; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.nf-side-chip:hover { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.07); }
.nf-side-chip.active { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.14); color: var(--mp-cyan-deep, #2e8fa3); }
.nf-side-chip > span:first-child { font-size: 1rem; line-height: 1; }
.nf-side-count { font-size: .74rem; color: var(--mp-muted); font-weight: 700; }
.nf-side-chip.active .nf-side-count { color: var(--mp-cyan-deep, #2e8fa3); }
.nf-fb-search { border-top: 1px solid var(--mp-line, #e7ebf2); padding-top: 12px; }
.nf-fb-search .form-control { flex: 0 0 auto; width: auto; height: 38px; }
.nf-fb-search #filterTextValue { flex: 1 1 220px; }
.nf-fb-search .datepicker { width: 120px; }
.nf-bar-clickable { cursor: pointer; }
.nf-bar-clickable:hover { opacity: .85; }
/* Settings: resolution-aware (was a fixed 760), kept single-column for readability */
body .mp-settings .container { max-width: min(900px, 92vw); }
/* This is a plain page title, not the floating nav — undo the sticky/translucent styling
   the bare `header {}` rule would otherwise force on it. */
.mp-feed-page-head { position: static; top: auto; z-index: auto; pointer-events: auto; background: transparent; box-shadow: none; backdrop-filter: none; margin: 6px 0 18px; padding: 0; }
.mp-feed-page-title { font-weight: 800; letter-spacing: -.5px; color: var(--mp-ink, #101216); margin: 0 0 6px; font-size: 1.9rem; }
.mp-feed-page-sub { color: var(--mp-muted, #7b8492); font-size: .96rem; margin: 0; max-width: 560px; }

/* Media reads as clickable */
.newsfeed-box .carousel-item, .newsfeed-box .clsPlayFile,
.newsfeed-box .clsPlayViaSelection, .newsfeed-box .media-content img { cursor: pointer; }
.newsfeed-box .carousel-item { height: auto; max-height: 360px; transition: filter .15s ease; }
.newsfeed-box .carousel-item:hover { filter: brightness(.97); }
.newsfeed-box .media-content img { object-fit: contain; }

/* Lightbox overlay for photos / video / audio / pdf */
.nf-lightbox { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; }
.nf-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8,11,16,.82); backdrop-filter: blur(2px); }
.nf-lightbox-close { position: absolute; top: 18px; right: 22px; z-index: 2; background: rgba(255,255,255,.16); color: #fff; border: 0; width: 42px; height: 42px; border-radius: 50%; font-size: 1.15rem; cursor: pointer; }
.nf-lightbox-close:hover { background: rgba(255,255,255,.32); }
.nf-lightbox-inner { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; }
.nf-lightbox-inner img, .nf-lightbox-inner video { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.nf-lightbox-inner iframe { width: 90vw; height: 88vh; border: 0; border-radius: 10px; background: #fff; }
.nf-lightbox-inner audio { width: min(90vw, 520px); }
.nf-lightbox-inner .nf-doc { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.nf-lightbox-inner .nf-doc iframe { width: 90vw; height: 80vh; }
.nf-open-tab { background: #fff; color: var(--mp-cyan-deep, #2e8fa3); padding: 9px 18px; border-radius: 999px; font-weight: 700; text-decoration: none !important; }
.nf-open-tab:hover { filter: brightness(.97); }

/* News feed: collapsed shows emoji attachment chips; preview only when expanded */
.newsfeed-box .card-item { position: relative; }
.nf-card-toggle { position: absolute; top: 14px; right: 16px; background: #eef1f6; border: 0; border-radius: 999px; padding: 5px 13px; font-size: .78rem; font-weight: 700; color: #3d434b; cursor: pointer; z-index: 2; }
.nf-card-toggle:hover { background: #e2e7ef; color: var(--mp-cyan-deep, #2e8fa3); }

/* Attachment emoji chips (collapsed view) */
.nf-attach-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.nf-attach-chip { display: inline-flex; align-items: center; gap: 6px; background: #f4f6f9; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; padding: 7px 14px; font-size: .82rem; font-weight: 600; color: #3d434b; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.nf-attach-chip:hover { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.08); }
.nf-attach-emoji { font-size: 1.05rem; line-height: 1; }
/* Real thumbnail chips in the collapsed newsfeed card */
.nf-attach-thumb { position: relative; padding: 0; border-radius: 12px; overflow: hidden; width: 168px; height: 120px; }
.nf-attach-thumb img, .nf-attach-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-attach-thumb.nf-attach-vid video { background: #000; }
.nf-attach-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.nf-attach-pdf { background: #fff; }
.nf-attach-pdf .nf-chip-pdf { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.nf-attach-badge { position: absolute; bottom: 4px; right: 4px; background: rgba(192,57,43,.92); color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .03em; padding: 1px 5px; border-radius: 4px; pointer-events: none; }

/* Old icon carousel is replaced by real previews - always hide it */
.newsfeed-box .card-item .col-md-12 { display: none; }
.nf-preview { display: none; }
.newsfeed-box .card-item.nf-expanded .nf-attach-summary { display: none; }
/* Wide feed so expanded documents/videos read big — full-width, tall, no horizontal overflow.
   The page's .content wrapper caps at ~860px; widen it only on the newsfeed. */
/* "Upload files" is on the top toolbar; hide the duplicate tab of the same name. */
.file-tabs .nav-link[data-value="Files"] { display: none !important; }

/* Address book: the buttons and contact-list text were oversized — tighten them (scoped
   to this page only, so buttons elsewhere are unaffected). */
.main-content-user:has(.mp-ab-toolbar) .update-btn,
.main-content-user:has(.mp-ab-toolbar) .claim-ghost-btn,
.main-content-user:has(.mp-ab-toolbar) .mp-ab-newcircle,
.main-content-user:has(.mp-ab-toolbar) .mp-ab-qf {
    padding: 7px 14px !important;
    font-size: .82rem !important;
    box-shadow: none !important;
}
.mp-ab-name { font-size: .92rem; }
.mp-ab-sub { font-size: .78rem; }
.main-content-user:has(.mp-ab-toolbar) .claim-header .heading { font-size: 1.45rem; } /* #42 — same size as every other page title */

.content:has(.newsfeed-box) { max-width: 1280px !important; }
.newsfeed-box { max-width: 1280px; }
/* Media preview (photo/video/audio/pdf/link) always sits above the description text. */
.newsfeed-box .card-item { display: flex; flex-direction: column; }
.newsfeed-box .card-item > .user-info { order: 0; }
.newsfeed-box .card-item > .nf-attach-summary,
.newsfeed-box .card-item > .nf-linkprev,
.newsfeed-box .card-item > .nf-preview,
.newsfeed-box .card-item > .col-md-12 { order: 1; }
.newsfeed-box .card-item > .nf-card-toggle { order: 2; }
.newsfeed-box .card-item > .card { order: 3; }
/* Expanded previews fill the card width and are tall enough to read a full page. */
.newsfeed-box .card-item.nf-expanded .nf-preview { display: block; height: auto; max-height: none; resize: vertical; overflow: visible; margin-top: 12px; }
.nf-prev-item { margin-bottom: 12px; width: 100%; }
.nf-prev-item:last-child { margin-bottom: 0; }
.nf-prev-img { width: 100%; border-radius: 8px; display: block; }
.nf-prev-vid { width: 100%; max-height: 168vh; border-radius: 8px; background: #000; display: block; }
.nf-prev-aud { width: 100%; }
.nf-prev-pdf { width: 100%; height: 168vh; min-height: 1200px; border: 0; border-radius: 8px; }
.nf-prev-doc { display: flex; align-items: center; gap: 12px; background: #f4f6f9; border-radius: 10px; padding: 14px 16px; }
.nf-prev-doc-emoji { font-size: 2rem; }
.nf-prev-doc-name { flex: 1; font-weight: 600; word-break: break-word; font-size: .9rem; }
.nf-prev-doc .nf-open-tab { background: var(--mp-cyan-deep, #2e8fa3); color: #fff !important; }

/* Compact collapsed cards - smaller height */
.newsfeed-box .card-item { padding: 13px 18px; margin-bottom: 13px; }
.newsfeed-box .newsfeed-user { width: 40px !important; height: 40px !important; }
.newsfeed-box .card-item .card-text { margin: 8px 0 !important; }
.nf-attach-summary { margin: 10px 0 2px; }

/* Office-doc "can't preview" card in the lightbox */
.nf-doc-office { align-items: center; text-align: center; color: #fff; }
.nf-doc-emoji { font-size: 3.5rem; }
.nf-doc-office p { margin: 4px 0 4px; opacity: .85; }

/* Page/Event card detail popup (colourful) */
body.mp-noscroll { overflow: hidden; }
.mp-card-clickable { cursor: pointer; }
.mp-detail-box { width: min(560px, 94vw); padding: 0; overflow-x: hidden; overflow-y: auto; max-height: 90vh; }
.mp-detail-box .mp-modal-close { background: rgba(255,255,255,.85); border-radius: 50%; width: 32px; height: 32px; }
.mp-detail-cover { position: relative; height: 172px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #e9f5f7, #dbeef1); }
.mp-detail-cover.is-locked { background: linear-gradient(135deg, #f1ecfb, #e6ddfb); }
.mp-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.mp-detail-cover-emoji { font-size: 3.6rem; }
.mp-detail-badge { position: absolute; top: 12px; left: 14px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 5px 13px; font-weight: 700; font-size: .82rem; box-shadow: 0 2px 8px rgba(16,24,40,.12); }
.mp-detail-main { padding: 18px 22px 22px; }
.mp-detail-title { font-family: 'Nexa-Bold', sans-serif; font-size: 1.3rem; margin: 0 0 6px; color: var(--mp-ink, #101216); }
.mp-detail-desc { color: #5b6270; line-height: 1.6; margin: 0 0 14px; }
.mp-detail-grid { display: flex; flex-direction: column; }
.mp-detail-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f3f5f9; align-items: flex-start; }
.mp-detail-k { flex: 0 0 96px; color: var(--mp-muted, #7b8492); font-weight: 600; font-size: .9rem; }
.mp-detail-v { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; color: var(--mp-ink, #101216); align-items: center; }
.mp-detail-chip { background: rgba(70,183,197,.14); color: #1e7a68; border-radius: 999px; padding: 3px 11px; font-size: .82rem; font-weight: 600; }
.mp-detail-chip-exec { background: rgba(124,111,208,.15); color: #5b4fb0; }
.mp-detail-none { color: var(--mp-muted, #7b8492); }
.mp-detail-actions { margin-top: 16px; }
.mp-detail-cta { display: inline-block; background: var(--mp-cyan-deep, #2e8fa3); color: #fff !important; padding: 9px 18px; border-radius: 999px; font-weight: 700; text-decoration: none !important; }
.mp-detail-cta:hover { filter: brightness(1.06); }

/* Global AI assistant (support chatbot) */
.mp-ai { position: fixed; right: 20px; bottom: 20px; z-index: 5000; }
.mp-ai-fab { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--mp-grad, linear-gradient(135deg,#46b7c5,#2e8fa3)); color: #fff; font-size: 1.5rem; cursor: pointer; box-shadow: 0 8px 24px rgba(46,143,163,.42); transition: transform .15s ease, filter .15s ease; }
.mp-ai-fab:hover { filter: brightness(1.06); transform: translateY(-2px); }
.mp-ai-fab.open { transform: rotate(8deg); }
.mp-ai-panel { position: absolute; right: 0; bottom: 70px; width: min(360px, 88vw); height: 470px; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(16,24,40,.3); display: flex; flex-direction: column; overflow: hidden; resize: both; min-width: 300px; min-height: 320px; max-width: 92vw; max-height: 84vh; }
.mp-ai-panel::-webkit-resizer { background: transparent; }
.mp-ai-panel[hidden] { display: none; }
.mp-ai-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: var(--mp-grad, linear-gradient(135deg,#46b7c5,#2e8fa3)); color: #fff; cursor: move; touch-action: none; user-select: none; }
.mp-ai-title { font-weight: 700; font-size: .96rem; }
.mp-ai-close { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 1rem; }
.mp-ai-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f9fb; }
.mp-ai-msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.mp-ai-user { align-self: flex-end; background: var(--mp-cyan-deep, #2e8fa3); color: #fff; border-bottom-right-radius: 4px; }
.mp-ai-bot { align-self: flex-start; background: #fff; color: #23272f; border: 1px solid #e7ebf2; border-bottom-left-radius: 4px; }
.mp-ai-typing { opacity: .55; }
.mp-ai-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eef1f6; }
.mp-ai-input { flex: 1; border: 1px solid #e7ebf2; border-radius: 999px; padding: 9px 14px; font-size: .9rem; outline: none; }
.mp-ai-input:focus { border-color: var(--mp-cyan-deep, #2e8fa3); }
.mp-ai-send { border: 0; background: var(--mp-cyan-deep, #2e8fa3); color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1rem; flex: 0 0 auto; }
@media print { .mp-ai { display: none; } }

/* "Help me write" AI panel on the create-page flow */
.mp-hw { margin-top: 12px; }
.mp-hw-toggle { background: rgba(70,183,197,.12); color: var(--mp-cyan-deep, #2e8fa3); border: 1px solid rgba(70,183,197,.32); border-radius: 999px; padding: 8px 17px; font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .12s ease; }
.mp-hw-toggle:hover { background: rgba(70,183,197,.2); }
.mp-hw-panel { margin-top: 12px; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 14px; padding: 16px; background: #fbfcfe; }
.mp-hw-panel[hidden] { display: none; }
.mp-hw-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-hw-row .form-control { flex: 1 1 220px; }
.mp-hw-tones { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mp-hw-tone { background: #fff; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; padding: 6px 14px; font-size: .82rem; font-weight: 600; color: #3d434b; cursor: pointer; }
.mp-hw-tone.active { border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.14); color: var(--mp-cyan-deep, #2e8fa3); }
/* "Suggest a name" button tucked into the Name of the Page field on step 1. */
.mp-name-wrap { position: relative; }
.mp-name-wrap > #nameOfThePage { padding-right: 116px; }
.mp-name-suggest { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 3; background: rgba(70,183,197,.12); color: var(--mp-cyan-deep, #2e8fa3); border: 1px solid rgba(70,183,197,.32); border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mp-name-suggest:hover { background: rgba(70,183,197,.2); }
.mp-name-suggest:disabled { opacity: .6; cursor: default; }

.mp-hw-suggest-label { font-size: .8rem; color: var(--mp-muted, #7b8492); margin-bottom: 8px; }
.mp-hw-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mp-hw-suggest { background: #fff; border: 1px dashed rgba(70,183,197,.5); border-radius: 999px; padding: 6px 13px; font-size: .82rem; font-weight: 600; color: #3d434b; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.mp-hw-suggest:hover { background: rgba(70,183,197,.1); }
.mp-hw-suggest.active { border-style: solid; border-color: var(--mp-cyan-deep, #2e8fa3); background: rgba(70,183,197,.14); color: var(--mp-cyan-deep, #2e8fa3); }
.mp-hw-instruction-wrap { margin-bottom: 14px; }
.mp-hw-instruction-label { display: block; font-size: .84rem; font-weight: 700; color: #3d434b; margin-bottom: 6px; }
.mp-hw-instruction-label span { font-weight: 400; color: var(--mp-muted, #7b8492); }
.mp-hw-instruction { resize: vertical; min-height: 64px; }
.mp-hw-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mp-hw-go { background: var(--mp-cyan-deep, #2e8fa3); color: #fff; border: 0; border-radius: 999px; padding: 9px 20px; font-weight: 700; cursor: pointer; }
.mp-hw-go:disabled { opacity: .7; cursor: default; }
.mp-hw-hint { color: var(--mp-muted, #7b8492); font-size: .8rem; flex: 1 1 200px; }

/* Create button on My Pages / My Events headings */
.mp-head-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.mp-create-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--mp-grad, linear-gradient(135deg,#46b7c5,#2e8fa3)); color: #fff !important; border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: .92rem; text-decoration: none !important; box-shadow: 0 6px 18px rgba(70,183,197,.35); transition: transform .15s ease, filter .15s ease; }
.mp-create-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.mp-head-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-create-btn-alt { background: #fff; color: var(--mp-ink, #1B154A) !important; border: 1px solid #cfd3e2; box-shadow: 0 2px 8px rgba(27,21,74,.08); }
.mp-create-btn-alt:hover { border-color: #46b7c5; filter: none; }

/* Lightbox full-screen button + in-browser docx render */
.nf-lightbox-full { position: absolute; top: 18px; right: 74px; z-index: 2; background: rgba(255,255,255,.16); color: #fff; border: 0; width: 42px; height: 42px; border-radius: 50%; font-size: 1.05rem; cursor: pointer; }
.nf-lightbox-full:hover { background: rgba(255,255,255,.32); }
.nf-docx { background: #fff; border-radius: 10px; width: min(860px, 92vw); max-height: 88vh; overflow: auto; padding: 30px 40px; display: flex; flex-direction: column; gap: 14px; }
.nf-docx-body { color: #23272f; line-height: 1.6; }
.nf-docx-body img { max-width: 100%; }
.nf-docx-body table { border-collapse: collapse; }
.nf-docx-body td, .nf-docx-body th { border: 1px solid #ddd; padding: 6px 10px; }
.nf-docx .nf-open-tab { align-self: flex-start; background: var(--mp-cyan-deep, #2e8fa3); color: #fff !important; }

/* Spreadsheet + text preview in the lightbox */
.nf-sheet .nf-docx-body { overflow-x: auto; }
.nf-sheet table { border-collapse: collapse; font-size: .85rem; margin-bottom: 8px; }
.nf-sheet td, .nf-sheet th { border: 1px solid #e0e4ea; padding: 4px 9px; white-space: nowrap; }
.nf-sheet-name { margin: 14px 0 6px; font-weight: 700; color: var(--mp-cyan-deep, #2e8fa3); }
.nf-text-body { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; color: #23272f; margin: 0; }

/* "Add a gift" helper on the create-page flow */
.mp-gift { margin-top: 10px; }
.mp-gift-toggle { background: rgba(230,162,60,.14); color: #b9791f; border: 1px solid rgba(230,162,60,.4); border-radius: 999px; padding: 8px 17px; font-weight: 700; font-size: .88rem; cursor: pointer; }
.mp-gift-toggle:hover { background: rgba(230,162,60,.24); }
.mp-gift-panel { margin-top: 12px; border: 1px solid rgba(230,162,60,.4); border-radius: 14px; padding: 16px; background: #fffdf7; }
.mp-gift-panel[hidden] { display: none; }
.mp-gift-hint { color: #7b8492; font-size: .85rem; margin: 0 0 12px; }
.mp-gift-panel .form-control { margin-bottom: 0; font-size: 12px !important; padding: 3px 8px; height: auto; border: 2px solid #b9791f !important; border-radius: 8px; background: #fff; box-shadow: none; }
.mp-gift-panel .form-control:focus { border-color: #8a5a12 !important; box-shadow: 0 0 0 3px rgba(224,162,60,.25); }
.mp-gift-panel .mp-gift-row { margin-bottom: 0; }
.mp-gift-add { margin-top: 12px; background: #e0a23c; color: #fff; border: 0; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.mp-gift-add:hover { filter: brightness(1.05); }

/* Create-page message box: taller + resizable + auto-grow */
/* The message box is the heart of a page — it grows to fit the text with NO cap and no inner
   scrollbar. `field-sizing: content` makes the browser size the textarea to its content natively,
   which works even when the AI writes the text programmatically (no input event fires, so the old
   JS auto-grow could miss it). height:auto lets field-sizing win over Bootstrap's fixed
   .form-floating height; the JS auto-grow stays as a fallback for browsers without field-sizing. */
/* Shared "Help me write" popup dialog (mp-helpwrite.js). The old inline toggles are replaced
   by the prominent top launcher + this dialog. */
#mp-hw-toggle, #mp-ev-hw-toggle { display: none !important; }
body.mp-hwd-lock { overflow: hidden; }
.mp-hwd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 12000; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.mp-hwd-overlay[hidden] { display: none; }
.mp-hwd { width: 100%; max-width: 540px; margin: 24px auto; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.32); }
.mp-hwd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #eef0f0; }
.mp-hwd-title { font-size: 17px; font-weight: 600; color: #22333b; }
.mp-hwd-x { background: none; border: none; font-size: 18px; color: #8a999f; cursor: pointer; line-height: 1; }
.mp-hwd-x:hover { color: #4a5b60; }
.mp-hwd-body { padding: 16px 18px; max-height: 68vh; overflow-y: auto; }
.mp-hwd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.mp-hwd-row .form-control { height: 40px; }
.mp-hwd-perrecip { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5a6b6b; margin-bottom: 12px; }
.mp-hwd-lbl { font-size: 12px; color: #8a999f; margin: 0 0 6px; }
.mp-hwd-lbl span { color: #a9b4b8; }
.mp-hwd-tones, .mp-hwd-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mp-hwd-tone, .mp-hwd-suggest { font-size: 13px; padding: 5px 11px; border: 1px solid #cfd8dc; background: #fff; color: #4a5b60; cursor: pointer; border-radius: 999px; }
.mp-hwd-suggest { border-radius: 8px; }
.mp-hwd-tone:hover, .mp-hwd-suggest:hover { background: #f2faf7; }
.mp-hwd-tone.active { background: #e6f5ef; border-color: #1d7a5f; color: #14514a; font-weight: 600; }
.mp-hwd-instruction, .mp-hwd-draft { width: 100%; margin-bottom: 12px; line-height: 1.5; }
.mp-hwd-draft { min-height: 130px; line-height: 1.6; }
.mp-hwd-go { width: 100%; height: 40px; background: #1d7a5f; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mp-hwd-go:hover { background: #176a52; }
.mp-hwd-go:disabled { opacity: .7; cursor: default; }
.mp-hwd-divider { border-top: 1px solid #eef0f0; margin: 16px 0 12px; }
.mp-hwd-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid #eef0f0; background: #f7f9f9; }
.mp-hwd-cancel { height: 38px; padding: 0 16px; background: #fff; border: 1px solid #cfd8dc; border-radius: 8px; font-size: 14px; color: #5a6b6b; cursor: pointer; }
.mp-hwd-cancel:hover { background: #f2f4f4; }
.mp-hwd-use { height: 38px; padding: 0 18px; background: #1d7a5f; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mp-hwd-use:hover { background: #176a52; }
.mp-hwd-use:disabled { opacity: .5; cursor: default; }
.mp-hwd-use:disabled:hover { background: #1d7a5f; }

/* Author media upload in the create-event wizard: drop zone + removable file chips. */
.mp-ev-media { margin-top: 14px; }
.mp-ev-media-label { display: block; font-size: 13px; color: #4a5b60; margin-bottom: 6px; }
.mp-ev-media-label span { color: #8a999f; }
.mp-ev-drop { border: 1.5px dashed #9ec7ba; border-radius: 12px; background: #f2faf7; padding: 20px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; box-sizing: border-box; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* MP-129/130: match the Add Links textarea's height to the Upload dropzone's, so switching
   between the rail's two panes doesn't jump the panel's height around. */
.mp-ev-upload-step .mp-links-input { min-height: 100px; box-sizing: border-box; }
.mp-ev-drop:hover, .mp-ev-drop.dragging { background: #e6f5ef; border-color: #1d7a5f; }
.mp-ev-drop-ic { font-size: 24px; line-height: 1; }
.mp-ev-drop-main { font-size: 14px; color: #14514a; font-weight: 600; margin-top: 4px; }
.mp-ev-drop-sub { font-size: 12px; color: #8a999f; margin-top: 2px; }
.mp-ev-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mp-ev-chip { display: flex; align-items: center; gap: 8px; border: 1px solid #dfe6e9; border-radius: 10px; padding: 6px 10px; background: #fff; }
.mp-ev-chip-ic { font-size: 20px; line-height: 1; }
/* Per-type preview thumbnail inside an upload chip */
.mp-ev-chip-thumb { position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: #eef4f6; }
.mp-ev-chip-thumb img, .mp-ev-chip-thumb video { width: 44px; height: 44px; object-fit: cover; display: block; }
.mp-ev-chip-thumb video { background: #000; }
.mp-ev-chip-thumb-ic { font-size: 22px; }
.mp-ev-chip-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.mp-ev-chip-main { display: flex; flex-direction: column; line-height: 1.2; }
.mp-ev-chip-name { font-size: 13px; color: #22333b; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ev-chip-size { font-size: 11px; color: #8a999f; }
.mp-ev-chip-x { font-size: 13px; color: #b0483a; cursor: pointer; padding: 2px 4px; }
.mp-ev-chip-x:hover { color: #7a2b20; }

/* Radar "already prepared" block: pages/events the author has tied to this person. */
.mp-dash-row-haschild { flex-wrap: wrap; }
.mp-radar-prep { width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e7eef0; }
.mp-radar-prep-lbl { font-size: 11.5px; font-weight: 600; color: #1d7a5f; margin-bottom: 7px; }
.mp-radar-prep-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-radar-prep-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 12.5px; padding: 5px 11px; border-radius: 9px; border: 1px solid #bfe3d8; background: #f2faf7; color: #14514a; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-radar-prep-chip:hover { background: #e6f5ef; color: #14514a; text-decoration: none; }
.mp-tl-pop .mp-radar-prep { border-top-color: rgba(255,255,255,.25); }
.mp-tl-pop .mp-radar-prep-lbl { color: #d9efe7; }
.mp-tl-pop .mp-radar-prep-chip { max-width: 180px; }

/* Summary-step previews of attached media + links. */
.summary-Media label, .summary-Links label { display: block; font-size: 13px; color: #cfe8df; margin-bottom: 8px; }
.mp-sum-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-sum-tile { width: 92px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
.mp-sum-tile img { width: 92px; height: 70px; object-fit: cover; display: block; }
.mp-sum-tile-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 92px; padding: 8px; }
.mp-sum-ic { font-size: 26px; line-height: 1; }
.mp-sum-tile-name { display: block; font-size: 10.5px; color: #eaf4f1; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sum-tile-icon .mp-sum-tile-name { max-width: 84px; text-align: center; }
/* Video preview tile: first frame + play badge */
.mp-sum-tile-video { position: relative; }
.mp-sum-tile-video video { width: 92px; height: 70px; object-fit: cover; display: block; background: #000; }
.mp-sum-play { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 20px; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
/* Audio preview tile: inline player */
.mp-sum-tile-audio { width: 210px; display: flex; flex-direction: column; padding: 8px; gap: 6px; }
.mp-sum-tile-audio audio { width: 194px; height: 34px; }
/* Greeting-card preview in the summary — a compact version of the cover that opens the message. */
.mp-sum-card { width: 168px; border-radius: 12px; padding: 18px 14px; text-align: center; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 0 0 1px rgba(233,201,121,.35); overflow: hidden; }
.mp-sum-card-emoji { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.mp-sum-card-flourish { font-size: .7rem; letter-spacing: 4px; margin: 8px 0 3px; }
.mp-sum-card-title { font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.2; text-wrap: balance; }
.mp-sum-card-verse { font-family: Georgia, serif; font-style: italic; font-size: .8rem; line-height: 1.4; margin-top: 7px; color: rgba(255,255,255,.9); text-wrap: balance; }
.mp-sum-card-music { font-size: .82rem; color: #6b7280; margin-top: 8px; }
.mp-sum-card-music strong { color: #3f4650; }
/* Extension badge on typed cards */
.mp-sum-ext { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #bfe3d8; margin-top: 2px; }
/* Upload-grid glyph thumbnails for non-image/video types */
.file-table td video.mp-file-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: #000; }
.file-table td .mp-file-thumb-ic { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 8px; background: #eef4f6; }
.mp-sum-links { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-sum-link { text-decoration: none; }
.mp-sum-link-yt { position: relative; width: 140px; height: 84px; border-radius: 10px; overflow: hidden; display: block; }
.mp-sum-link-yt img { width: 140px; height: 84px; object-fit: cover; display: block; }
.mp-sum-link-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.mp-sum-link-card { display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
.mp-sum-link-ic { font-size: 16px; }
.mp-sum-link-body { display: flex; flex-direction: column; min-width: 0; }
.mp-sum-link-d { font-size: 12.5px; color: #fff; font-weight: 600; }
.mp-sum-link-u { font-size: 11px; color: #bcd4cd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Digital-gift picker: provider chips + amount/code/link/note + live preview. */
.mp-gift-providers { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.mp-gift-chip { font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid #cfd8dc; background: #fff; color: #4a5b60; cursor: pointer; transition: background .15s, border-color .15s; }
.mp-gift-chip:hover { background: #f2faf7; }
.mp-gift-chip.on { border-color: #1d7a5f; background: #eef7f3; color: #14514a; font-weight: 600; }
.mp-gift-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mp-gift-panel #mp-gift-link, .mp-gift-panel #mp-gift-note,
.mp-gift-panel #mp-ev-gift-link, .mp-gift-panel #mp-ev-gift-note { margin-bottom: 10px; }
.mp-gift-preview { border: 1px solid #bfe3d8; background: #f2faf7; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; line-height: 1.5; color: #14514a; white-space: pre-wrap; }

/* Shared "Add a digital gift" popup dialog (mp-giftdialog.js). */
.mp-gd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 12000; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.mp-gd-overlay[hidden] { display: none; }
.mp-gd { width: 100%; max-width: 520px; margin: 24px auto; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.32); }
.mp-gd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #eef0f0; }
.mp-gd-title { font-size: 17px; font-weight: 600; color: #22333b; }
.mp-gd-x { background: none; border: none; font-size: 18px; color: #8a999f; cursor: pointer; line-height: 1; }
.mp-gd-x:hover { color: #4a5b60; }
.mp-gd-body { padding: 16px 18px; max-height: 68vh; overflow-y: auto; }
.mp-gd-hint { font-size: 12.5px; color: #8a999f; margin: 0 0 12px; }
.mp-gd-buy { font-size: 13px; color: #5a6b6b; margin: 0 0 12px; padding: 8px 12px; background: #f7fdfb; border: 1px dashed #bfe3d8; border-radius: 10px; }
.mp-gd-buy a { color: #1d7a5f; font-weight: 600; text-decoration: none; }
.mp-gd-buy a:hover { text-decoration: underline; }
.mp-gd-body .form-control { margin-bottom: 10px; }
.mp-gd-body .mp-gift-row .form-control { margin-bottom: 0; }
.mp-gd-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid #eef0f0; background: #f7f9f9; }
.mp-gd-cancel { height: 38px; padding: 0 16px; background: #fff; border: 1px solid #cfd8dc; border-radius: 8px; font-size: 14px; color: #5a6b6b; cursor: pointer; }
.mp-gd-add { height: 38px; padding: 0 18px; background: #1d7a5f; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mp-gd-add:hover { background: #176a52; }

/* Real thumbnails for uploaded files in the upload-step grid. */
.file-table td img.mp-file-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: #eef4f6; }

/* Live link previews on the upload step (light background → dark-on-light cards). */
.mp-links-preview { margin-top: 12px; }
.mp-links-preview:empty { display: none; }
#mp-links-preview .mp-sum-link-card { background: #f2faf7; border: 1px solid #bfe3d8; }
#mp-links-preview .mp-sum-link-d { color: #14514a; }
#mp-links-preview .mp-sum-link-u { color: #5a6b6b; }

/* Tools row under the Description box (Help me write is offered here too, where the author writes). */
.mp-desc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mp-desc-clear-btn { font-size: 13px; color: #b0483a; background: #fff; border: 1px solid #e6cdc8; border-radius: 8px; padding: 7px 14px; cursor: pointer; margin-top: 8px; }
.mp-desc-clear-btn:hover { background: #fdeeec; }
/* Progress steps are clickable (jump to any step). */
.steps-progress > li { cursor: pointer; }

/* MP-130: the Create an Event tab split into distinct framed sections — event details,
   write-your-message (Help me write → the description → its AI assist panel), invitation
   music, and the upload/links/library/gift rail — so each is visually its own group instead
   of one continuous column. */
.mp-ev-frame {
    border: 1px solid var(--mp-cyan, #46b7c5);
    border-radius: var(--mp-radius, 16px);
    padding: 18px;
    margin-bottom: 18px;
}
.mp-ev-frame:last-of-type { margin-bottom: 0; }

/* Top toolbar of quick actions at the top of the create wizards: Help me write, Upload, Add links. */
.mp-wiz-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.mp-media-optional-note { padding: 11px 14px; border-radius: 10px; background: #fbf6ee; border: 1px solid #efe2cc; color: #6b5b3e; font-size: 13.5px; line-height: 1.5; }
.mp-media-optional-note strong { color: #4a3d24; }
.mp-wiz-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 10px; border: 1px solid #cfd8dc; background: #fff; color: #33474d; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s; }
.mp-wiz-btn:hover { background: #f2faf7; border-color: #9ec7ba; }
.mp-wiz-btn .mp-wiz-ic { font-size: 17px; line-height: 1; }
.mp-wiz-primary { color: #fff; border-color: transparent; background: linear-gradient(120deg, #1d7a5f 0%, #2a8f86 100%); }
.mp-wiz-primary:hover { background: linear-gradient(120deg, #176a52 0%, #237a72 100%); box-shadow: 0 6px 18px rgba(29,122,95,.22); border-color: transparent; }

/* Record/Upload step (MP-115): one vertical rail of actions on the left, one content
   area in the middle that shows only the chosen action. Scoped to this step only via
   .mp-record-upload-step — the Event and Profile upload wizards keep their own
   .file-tabs layout untouched.
   MP-129: the Event wizard's Upload/Add Links/Add-from-library step reuses this same
   rail+panel look via .mp-ev-upload-step — it has no video/audio recording, so only the
   rules that panel actually needs (panel/rail/rail-btn/content, not #record-video/#gum/
   the visualizer/the inline library card) are extended to it below. */
.mp-record-upload-step .mp-rec-panel, .mp-ev-upload-step .mp-rec-panel { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
/* MP-116: pinned under #pageNext with the same anchor Next itself uses (.button-controls {
   position:absolute; right:70px; }, containing block #main - .mp-record-upload-step's ancestors up
   to #main are all position:static, so this lines up with Next exactly regardless of viewport
   width) instead of a full-width banner above the rail + content row. No extra reservation needed
   on .mp-rec-content: #div1,#div2,#div3 (main-style.css) already cap this whole row at 730px total,
   well clear of the note pane which sits outside that box, anchored to #main directly. */
.mp-record-upload-step .mp-rec-note-pane { position: absolute; top: 76px; right: 70px; width: 180px; }
.mp-record-upload-step .mp-rec-rail, .mp-ev-upload-step .mp-rec-rail { display: flex; flex-direction: column; gap: 8px; }
.mp-record-upload-step .mp-rec-rail-btn, .mp-ev-upload-step .mp-rec-rail-btn {
    display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05); color: #f2f4f7;
    font-size: .87rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.mp-record-upload-step .mp-rec-rail-btn:hover, .mp-ev-upload-step .mp-rec-rail-btn:hover { border-color: rgba(255,255,255,.3); }
.mp-record-upload-step .mp-rec-rail-btn .mp-rec-ic, .mp-ev-upload-step .mp-rec-rail-btn .mp-rec-ic { font-size: 1.05rem; width: 1.3em; text-align: center; flex: none; }
.mp-record-upload-step .mp-rec-rail-btn.active, .mp-ev-upload-step .mp-rec-rail-btn.active {
    background: linear-gradient(135deg, #46b7c5, #2e8fa3); border-color: transparent; color: #fff;
    box-shadow: 0 8px 20px -8px rgba(46,143,163,.6);
}
.mp-record-upload-step .mp-rec-content, .mp-ev-upload-step .mp-rec-content { min-width: 0; }
/* The old .file-tabs-scoped video/visualizer sizing (custom-style.css, site-modern.css)
   no longer applies here since this step dropped .file-tabs — recreated and capped so
   the recorder never grows past a compact box that fits without scrolling. */
.mp-record-upload-step #record-video { text-align: center; }
.mp-record-upload-step #gum {
    display: block; margin: 0 auto; max-width: 100%; width: 100%; max-height: 260px;
    height: auto; object-fit: cover; border: none; border-radius: 12px;
    background: #0e1116; box-shadow: 0 2px 12px rgba(30,35,80,.12);
}
.mp-record-upload-step #record-audio .visualizer { display: block; width: 100% !important; height: 64px !important; background: #0e1116; border-radius: 12px; margin: 4px 0 14px; }
/* Add from Library, in place rather than a popup (MP-115): same .mp-lp card the modal uses
   (mp-librarypicker.js .mount()), just capped to the same compact height as the other panes
   instead of the modal's 86vh. */
.mp-record-upload-step .mp-lp-inline, .mp-ev-upload-step .mp-lp-inline { max-width: none; max-height: 320px; border: 1px solid #e3e7ee; }
.mp-record-upload-step .mp-lp-inline .mp-lp-grid, .mp-ev-upload-step .mp-lp-inline .mp-lp-grid { max-height: 220px; }
@media (max-width: 680px) {
    .mp-record-upload-step .mp-rec-panel, .mp-ev-upload-step .mp-rec-panel { grid-template-columns: 1fr; }
    .mp-record-upload-step .mp-rec-rail, .mp-ev-upload-step .mp-rec-rail { flex-direction: row; flex-wrap: wrap; }
    .mp-record-upload-step .mp-rec-rail-btn, .mp-ev-upload-step .mp-rec-rail-btn { flex: 1 1 auto; justify-content: center; }
}
/* .button-controls (media.css) goes position:static at this same breakpoint and drops below the
   whole step instead of floating over it, so the note has nothing to pin under here - put it back
   in normal flow, after the rail + content row. */
@media (max-width: 1100px) {
    .mp-record-upload-step .mp-rec-note-pane { position: static; top: auto; right: auto; width: auto; margin-top: 18px; }
}

/* Prominent "Let AI help you write" shortcut at the top of the create-page wizard — jumps
   straight to the message step with the assistant open. */
.mp-hw-jump-wrap { margin: 0 0 18px; }
.mp-hw-jump { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
    padding: 14px 18px; border-radius: 14px; border: 1px solid #bfe3d8;
    background: linear-gradient(120deg, #ecf9f4 0%, #eef4ff 100%); transition: box-shadow .15s, transform .05s; }
.mp-hw-jump:hover { box-shadow: 0 6px 20px rgba(29,122,95,.16); }
.mp-hw-jump:active { transform: translateY(1px); }
.mp-hw-jump-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.mp-hw-jump-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.mp-hw-jump-title { font-weight: 700; font-size: 16px; color: #14514a; }
.mp-hw-jump-sub { font-size: 12.5px; color: #5a6b6b; }
.mp-hw-jump-arrow { font-size: 20px; color: #1d7a5f; flex: 0 0 auto; }

/* Occasion combobox: a dropdown of common occasions that also accepts a typed-in custom value.
   The inner control keeps the site's .form-floating styling; this only adds the caret + menu. */
.mp-combo { position: relative; }
.mp-combo .mp-combo-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #6b7c85; pointer-events: none; font-size: 12px; }
.mp-combo-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: #fff; border: 1px solid #cfd8dc; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto; padding: 4px; }
.mp-combo-menu[hidden] { display: none; }
.mp-combo-opt { padding: 9px 12px; border-radius: 7px; font-size: 14px; cursor: pointer; color: #22333b; line-height: 1.3; }
.mp-combo-opt:hover { background: #eef4f6; }
.mp-combo-add { color: #1d7a5f; font-weight: 600; }
.mp-combo-empty { padding: 9px 12px; font-size: 13px; color: #8a999f; }

#Description, #WriteDescription {
    field-sizing: content;
    height: auto !important;
    min-height: 180px;
    max-height: none !important;
    overflow-y: hidden;
    resize: vertical;
    line-height: 1.55;
    box-sizing: border-box;
}

/* ---------- Page responses: recipient writes back, author reads ---------- */
.mp-respond, .mp-responses {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(16,24,40,.10);
}
.mp-respond-h {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mp-ink, #1B154A);
    margin: 0 0 10px;
}
.mp-respond-msg {
    width: 100%;
    min-height: 72px;
    border: 1px solid #dfe4ec;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .95rem;
    resize: vertical;
    background: #fff;
}
.mp-respond-msg:focus {
    outline: none;
    border-color: #46b7c5;
    box-shadow: 0 0 0 3px rgba(70,183,197,.16);
}
.mp-respond-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.mp-respond-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f2f5fb; border: 1px solid #e2e7f0; border-radius: 999px;
    padding: 4px 10px; font-size: .82rem; color: #384152;
}
.mp-respond-chip .mp-respond-rm { color: #b23; text-decoration: none; font-weight: 700; }
.mp-respond-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 12px 0;
}
.mp-respond-addfile, .mp-respond-locktoggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .9rem; font-weight: 600; color: #384152; cursor: pointer;
}
.mp-respond-addfile { padding: 6px 12px; border: 1px solid #cfd3e2; border-radius: 8px; background: #fff; }
.mp-respond-help {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: .9rem; font-weight: 700; padding: 6px 13px; border-radius: 8px;
    border: 1px solid #cde7de; background: #eafaf4; color: #0f6e56;
}
.mp-respond-help:hover { background: #dff5ec; }
.mp-respond-lockdate { border: 1px solid #dfe4ec; border-radius: 8px; padding: 6px 10px; }
.mp-respond-send {
    background: var(--mp-grad, linear-gradient(135deg,#46b7c5,#2e8fa3));
    color: #fff; border: none; border-radius: 999px;
    padding: 10px 22px; font-weight: 700; font-size: .92rem; cursor: pointer;
    box-shadow: 0 6px 18px rgba(70,183,197,.35);
}
.mp-respond-send:disabled { opacity: .6; cursor: default; }
.mp-respond-status { font-size: .85rem; color: #7e8299; margin-top: 8px; }
.mp-respond-mine-h, .mp-responses .mp-respond-h { margin-top: 16px; }
.mp-respond-mine-h { font-weight: 700; color: #384152; margin: 18px 0 8px; font-size: .9rem; }

.mp-responses-empty { color: #7e8299; font-size: .9rem; padding: 6px 0; }
.mp-response {
    border: 1px solid #e7ebf3; border-radius: 12px; padding: 12px 14px;
    margin-bottom: 10px; background: #fbfcfe;
}
.mp-response.is-locked { background: #f3f4f8; border-style: dashed; }
.mp-response-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mp-response-who { font-weight: 700; color: var(--mp-ink, #1B154A); font-size: .9rem; }
.mp-response-when { font-size: .78rem; color: #8a90a2; }
.mp-response-msg { margin: 8px 0 0; color: #2b3140; font-size: .95rem; line-height: 1.5; white-space: pre-wrap; }
.mp-response-sealed { margin-top: 6px; color: #8a90a2; font-size: .88rem; font-style: italic; }
.mp-response-media { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mp-rmedia img, .mp-rmedia video { max-width: 160px; max-height: 160px; border-radius: 8px; display: block; }
.mp-rmedia-audio { max-width: 260px; }
.mp-rmedia-file {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef1f7; border-radius: 8px; padding: 8px 12px;
    font-size: .85rem; color: #2e8fa3; text-decoration: none; font-weight: 600;
}

/* Claimed media shown in place on the claim page (preview + download). */
.claim-result { margin-top: 1.5rem; }
.claim-result-title { font-size: 1.35rem; font-weight: 700; color: var(--mp-ink, #1B154A); margin-bottom: 1rem; }
.claim-result-media { display: grid; gap: 1.25rem; }
.claim-media-item { background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; padding: 16px; box-shadow: 0 8px 28px rgba(16,24,40,.08); }
.claim-media-item img, .claim-media-item video { max-width: 100%; border-radius: 10px; display: block; }
.claim-media-item audio { width: 100%; }
.claim-pdf { width: 100%; height: min(70vh, 760px); border: none; border-radius: 10px; }
.claim-doc-body { max-height: 60vh; overflow: auto; color: #1c2330; line-height: 1.6; }
.claim-doc-body p { margin: 0 0 .8em; }
.claim-doc-body table { border-collapse: collapse; width: 100%; margin: .8em 0; font-size: .92rem; }
.claim-doc-body td, .claim-doc-body th { border: 1px solid #d8dce5; padding: 6px 10px; text-align: left; }
.claim-file { color: #384152; padding: 10px 0; }
.claim-dl { display: inline-block; margin-top: 12px; color: #2e8fa3; font-weight: 600; text-decoration: none; }
.claim-result-done { display: inline-block; margin-top: 1.6rem; }

/* Logged-in write-back: keep the seal date+time picker readable (light theme card,
   but the global input:focus-within can still recolour it oddly). */
.mp-respond .mp-respond-lockdate,
.mp-respond input.mp-respond-lockdate:focus,
.mp-respond input.mp-respond-lockdate:focus-within {
    background: #fff !important;
    color: #1c2330 !important;
    -webkit-text-fill-color: #1c2330 !important;
    border: 1px solid #cfd3e2 !important;
    border-radius: 8px;
    padding: 6px 10px;
}
.claim-fullscreen { margin-right: 1rem; }

/* Claim-page previews are resizable too (drag the bottom edge to enlarge). */
.claim-doc-body { resize: vertical; min-height: 280px; max-height: 88vh; }
.claim-pdf { resize: vertical; min-height: 320px; overflow: auto; }
.claim-media-item .claim-doc-body + .claim-dl { margin-top: 10px; }

/* Drag-to-resize handle for in-app media previews (claim, view). */
.mp-resizer {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    cursor: ns-resize; user-select: none; touch-action: none;
    margin-top: 8px; padding: 10px;
    background: rgba(46, 143, 163, .1);
    border: 1px dashed rgba(46, 143, 163, .5);
    border-radius: 10px;
    font-size: .8rem; color: #2e8fa3; letter-spacing: .04em; text-transform: uppercase;
}
.mp-resizer:hover { background: rgba(46, 143, 163, .18); }
.mp-resizer-grip { width: 44px; height: 6px; border-radius: 4px; background: #2e8fa3; position: relative; }
.mp-resizer-grip::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px; border-radius: 4px; background: #2e8fa3; }

.claim-doc-body,.claim-pdf{resize:both;}

/* In-app media viewer: inline Word/Excel preview (mammoth/SheetJS). */
.mp-view-docwrap { width: 100%; text-align: left; }
.mp-view-doc-body {
    background: #fff; color: #1c2330; border-radius: 12px;
    padding: 24px 28px; min-height: 280px; max-height: 72vh; overflow: auto;
    line-height: 1.6; resize: both; text-align: left;
}
.mp-view-doc-body p { margin: 0 0 .8em; }
.mp-view-doc-body table { border-collapse: collapse; width: 100%; margin: .8em 0; font-size: .92rem; }
.mp-view-doc-body td, .mp-view-doc-body th { border: 1px solid #d8dce5; padding: 6px 10px; text-align: left; }
.mp-view-dl { display: inline-block; margin-top: 10px; color: #2e8fa3; font-weight: 600; text-decoration: none; }
.mp-page-chip-reply { background: rgba(123,124,248,.14); color: #4a4bd6; font-weight: 600; }

/* Media viewer popups: resize the WHOLE box (outer modal), not just the inner
   scroll area. Drag the bottom-right corner (the ⤡ marks it). */
#imageGridModal .modal-dialog,
#exampleModal .modal-dialog {
    max-width: 94vw;
    width: auto;
    margin: 2.5vh auto;
}
#imageGridModal .modal-content,
#exampleModal .modal-content {
    position: relative;
    resize: both;
    overflow: auto;
    min-width: 340px;
    min-height: 320px;
    max-width: 96vw;
    max-height: 94vh;
}
#imageGridModal .modal-content::after,
#exampleModal .modal-content::after {
    content: "⤡ drag to resize";
    position: absolute;
    right: 10px;
    bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #2e8fa3;
    pointer-events: none;
    letter-spacing: .02em;
}
#imageGridModal .modal-content::-webkit-resizer,
#exampleModal .modal-content::-webkit-resizer {
    background: rgba(46, 143, 163, .4);
}
/* Let the media fill the resized box. */
#imageGridModal .modal-body,
#exampleModal .modal-body { height: 100%; }
#imageGridModal .mp-view-doc-body { max-height: 78vh; }

/* ===== Media viewer: resize the OUTER popup both ways; inner media fills it ===== */
#imageGridModal .modal-dialog, #exampleModal .modal-dialog {
    width: max-content !important; max-width: none !important; margin: 3vh auto !important;
}
#imageGridModal .modal-content, #exampleModal .modal-content {
    position: relative; resize: none; overflow: hidden;
    display: flex; flex-direction: column;
    width: 62vw; height: 70vh;
    min-width: 340px; min-height: 320px; max-width: 96vw; max-height: 94vh;
}
#imageGridModal .modal-content::after, #exampleModal .modal-content::after { content: none; }
#imageGridModal .modal-body, #exampleModal .modal-body { flex: 1 1 auto; min-height: 0; height: auto; overflow: auto; }
/* inner media stretches to fill the resized box */
#imageGridModal .media_modal, #imageGridModal .carousel, #imageGridModal .carousel-inner,
#imageGridModal .carousel-item, #imageGridModal .carousal-frame, #imageGridModal .full-frame,
#exampleModal .carousel, #exampleModal .carousel-inner, #exampleModal .carousel-item,
#exampleModal .carousal-frame, #exampleModal .full-frame { height: 100%; }
#imageGridModal iframe, #imageGridModal .mp-view-doc-body,
#exampleModal iframe, #exampleModal .mp-view-doc-body {
    width: 100% !important; height: 100% !important; max-height: none !important;
}
#imageGridModal img, #imageGridModal video, #exampleModal img, #exampleModal video {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
/* clearly visible bottom-right corner grip */
.mp-corner-resizer {
    position: absolute; right: 0; bottom: 0; width: 30px; height: 30px;
    cursor: nwse-resize; z-index: 10; touch-action: none;
    background: linear-gradient(135deg, transparent 45%, #2e8fa3 45%);
    border-bottom-right-radius: 6px;
}
.mp-corner-resizer::after { content: "⤡"; position: absolute; right: 3px; bottom: 1px; color: #fff; font-size: 13px; line-height: 1.3; }

/* Fill the resized viewer box with FLEX, not percentage heights (those collapsed
   the doc preview so only the filename showed). */
#imageGridModal .carousel-item, #imageGridModal .carousal-frame, #imageGridModal .full-frame,
#exampleModal .carousel-item, #exampleModal .carousal-frame, #exampleModal .full-frame {
    display: flex; flex-direction: column; min-height: 0; height: 100%;
}
#imageGridModal .mp-view-docwrap, #exampleModal .mp-view-docwrap {
    flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
#imageGridModal .mp-view-doc-body, #exampleModal .mp-view-doc-body {
    flex: 1 1 auto; height: auto !important; min-height: 260px; overflow: auto;
}
#imageGridModal iframe, #exampleModal iframe {
    flex: 1 1 auto; height: auto !important; min-height: 320px;
}
/* Keep the filename label from dominating the view. */
#imageGridModal .carousel-info, #exampleModal .carousel-info { flex: 0 0 auto; max-height: 22%; overflow: auto; }
#imageGridModal .carousel-info h5, #exampleModal .carousel-info h5 { font-size: 1rem; word-break: break-word; }

/* Viewer: the base CSS floats .carousal-frame (60%) beside .carousel-info (40%),
   so the filename ate 40% of the popup. Give the document the FULL width and drop
   the filename to a small caption underneath. */
#imageGridModal .carousal-frame, #exampleModal .carousal-frame,
#imageGridModal .full-frame, #exampleModal .full-frame {
    width: 100% !important; float: none !important; min-height: 0 !important;
}
#imageGridModal .carousel-info, #exampleModal .carousel-info {
    width: 100% !important; float: none !important;
    height: auto !important; max-height: 20% !important;
    padding: 8px 16px !important;
}
#imageGridModal .carousel-item, #exampleModal .carousel-item {
    display: flex !important; flex-direction: column !important; width: 100%;
}

/* Reply badge on sent cards — a clear, clickable chip (opens the page's replies). */
.mp-page-chip-reply {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(123,124,248,.16); color: #4a4bd6; font-weight: 700;
    padding: 4px 11px; border-radius: 999px; font-size: .82rem;
    cursor: pointer; line-height: 1.4;
}
.mp-page-chip-reply:hover { background: rgba(123,124,248,.30); }

/* Recipient name chips with initial avatars on page cards. */
.mp-page-names { display: flex; flex-wrap: wrap; gap: 4px; }
.mp-recip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f2f5fb; border: 1px solid #e2e7f0; border-radius: 999px;
    padding: 3px 11px 3px 3px; font-size: .84rem; color: #384152; font-weight: 500;
}
.mp-recip-av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #46b7c5, #7b7cf8);
    color: #fff; font-size: .68rem; font-weight: 700; flex: 0 0 auto;
}

/* FIX: only the ACTIVE carousel slide shows. My earlier `display:flex` on every
   .carousel-item overrode Bootstrap's hiding of inactive slides, so a page with
   several attachments rendered them all stacked/overlapping. */
#imageGridModal .carousel-item, #exampleModal .carousel-item { display: none !important; }
#imageGridModal .carousel-item.active, #exampleModal .carousel-item.active {
    display: flex !important; flex-direction: column !important;
}

/* Recipient chip: make the NAME the main element (avatars alone weren't useful). */
.mp-recip-name { color: #2a3140; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.mp-recip { padding: 3px 12px 3px 3px; }

/* Rich recipient list on the card: name + email + opened status per person. */
.mp-page-line-recips { align-items: flex-start; }
.mp-recip-list { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.mp-recip-row { display: flex; align-items: center; gap: 8px; }
.mp-recip-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mp-recip-info .mp-recip-name { font-weight: 600; color: #2a3140; font-size: .86rem; line-height: 1.25; }
.mp-recip-email { font-size: .75rem; color: #8a90a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-recip-status { font-size: .74rem; font-weight: 700; color: #b26a00; white-space: nowrap; flex: 0 0 auto; }
.mp-recip-status.is-opened { color: #2e8f5b; }

/* Recipient row: name on top, email + status on the line below (no overlap). */
.mp-recip-row { align-items: flex-start; }
.mp-recip-info { overflow: hidden; }
.mp-recip-info .mp-recip-name { white-space: normal; word-break: break-word; }
.mp-recip-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 1px; }
.mp-recip-meta .mp-recip-email { white-space: normal; overflow: visible; word-break: break-all; }
.mp-recip-meta .mp-recip-status { position: static; }

/* ============================================================
   Profile / safeguards page — modern redesign
   ============================================================ */
.mp-prof { padding: 2.2rem 0 3rem; }
.mp-prof-hero { max-width: 720px; margin: 0 0 1.6rem; }
.mp-prof-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 700; color: var(--mp-cyan-deep, #2e8fa3); margin: 0 0 .4rem; }
.mp-prof-title { font-family: 'Nexa-Bold', sans-serif; font-size: 2rem; line-height: 1.1; color: var(--mp-ink, #23202e); margin: 0 0 .5rem; }
.mp-prof-sub { color: #5c5470; font-size: 1rem; line-height: 1.55; margin: 0; }

.mp-prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .mp-prof-grid { grid-template-columns: 1fr; } }

.mp-prof-card { background: #fff; border: 1px solid #ece8f5; border-radius: 18px; padding: 20px 22px; box-shadow: 0 10px 30px rgba(35,32,46,.05); }
.mp-prof-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.mp-prof-ic { font-size: 1.5rem; line-height: 1.1; flex: 0 0 auto; }
.mp-prof-card-title { font-family: 'Nexa-Bold', sans-serif; font-size: 1.15rem; color: var(--mp-ink, #23202e); margin: 0; }
.mp-prof-card-sub { color: #8a8595; font-size: .82rem; margin: 2px 0 0; }
.mp-prof-badge { margin-left: auto; font-size: .72rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; background: #eef1f6; color: #6b7280; }
.mp-prof-badge.on { background: rgba(46,165,143,.15); color: #1f7d68; }
.mp-prof-badge.off { background: rgba(120,120,130,.14); color: #7b8492; }
.mp-prof-badge.warn { background: rgba(230,162,60,.18); color: #b9791f; }

.mp-prof-lead, .mp-prof-problems-lead { color: #5c5470; font-size: .9rem; line-height: 1.55; margin: 0 0 14px; }

/* System-side delivery note (our fault, not the recipient's) */
.mp-prof-sysnote { display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(180deg,#fff8ec,#fdf1dd); border: 1px solid #f0dcb4; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.mp-prof-sysnote-ic { font-size: 1.1rem; }
.mp-prof-sysnote b { color: #8a5a12; font-size: .92rem; }
.mp-prof-sysnote-why { color: #9a7238; font-size: .82rem; margin-top: 2px; line-height: 1.45; }

.mp-prof-list { list-style: none; margin: 0; padding: 0; }
.mp-prof-list-item { padding: 10px 0; border-bottom: 1px solid #f3f0f9; }
.mp-prof-list-item:last-child { border-bottom: none; }
.mp-prof-list-item strong { color: #2f2547; font-size: .95rem; }
.mp-prof-list-detail { color: #8a8595; font-size: .82rem; margin-top: 2px; }

/* Check-in card */
.mp-prof-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-prof-field label { font-size: .9rem; color: #4b4557; font-weight: 600; }
.mp-prof-select { max-width: 160px; border-radius: 10px; border: 1px solid #d9d3e6; }
.mp-prof-status { background: #f7f5fc; border-radius: 10px; padding: 11px 13px; font-size: .86rem; color: #4b4557; line-height: 1.5; margin-bottom: 10px; }
.mp-prof-checkin[data-state="off"] .mp-prof-status { background: #f6f2f2; }
.mp-prof-note { font-size: .8rem; color: #8a8595; line-height: 1.5; margin: 0 0 14px; }
.mp-prof-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mp-prof-btn { border: none; border-radius: 10px; padding: 9px 16px; font-size: .88rem; font-weight: 700; cursor: pointer; transition: filter .12s ease, background .12s ease; }
.mp-prof-btn.primary { background: var(--mp-cyan-deep, #2e8fa3); color: #fff; }
.mp-prof-btn.primary:hover { filter: brightness(.95); }
.mp-prof-btn.ghost { background: #f1eefb; color: #6152b8; }
.mp-prof-btn.ghost:hover { background: #e7e1f8; }
.mp-prof-btn.link { background: none; color: #8a8595; }
.mp-prof-btn.link:hover { color: #5c5470; text-decoration: underline; }

.mp-prof-cardlink { display: block; background: #f7f5fc; border: 1px dashed #d9d3e6; border-radius: 12px; padding: 12px 14px; font-weight: 700; color: #5b3fa8 !important; text-decoration: none; font-size: .9rem; }
.mp-prof-cardlink:hover { background: #f1edfb; }
.mp-prof-cardlink span { display: block; font-weight: 400; color: #8a8595; font-size: .8rem; margin-top: 2px; }

/* Trust strip */
.mp-prof-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 720px) { .mp-prof-trust { grid-template-columns: 1fr; } }
.mp-prof-trust-item { background: #faf9fd; border: 1px solid #efecf7; border-radius: 14px; padding: 16px; }
.mp-prof-trust-item span { font-size: 1.4rem; }
.mp-prof-trust-item b { display: block; margin: 6px 0 3px; color: var(--mp-ink, #23202e); font-size: .95rem; }
.mp-prof-trust-item p { color: #8a8595; font-size: .82rem; line-height: 1.45; margin: 0; }

/* ============================================================
   Create-page recipient lookup + name typeahead
   ============================================================ */
.mp-yp-searchwrap { margin-top: 10px; }
.mp-yp-search { border-radius: 10px !important; border: 1px solid #d9d3e6 !important; font-size: .9rem; }
.mp-yp-search:focus { outline: none; border-color: #1d7a5f !important; box-shadow: 0 0 0 3px rgba(29,122,95,.15); }

.mp-people-ac { position: absolute; z-index: 100000; background: #fff; border: 1px solid #e2ddef; border-radius: 12px;
    box-shadow: 0 12px 34px rgba(35,32,46,.16); max-height: 300px; overflow-y: auto; padding: 4px; }
.mp-people-ac-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.mp-people-ac-row:hover { background: #f4f2fb; }
.mp-people-ac-star { color: #e6a23c; font-size: .8rem; flex: 0 0 auto; }
.mp-people-ac-name { font-weight: 600; color: #2f2547; font-size: .9rem; flex: 0 0 auto; }
.mp-people-ac-sub { color: #8a8595; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-select recipient picker */
.mp-yp-searchwrap { display: flex; gap: 8px; align-items: center; }
.mp-yp-search { flex: 1 1 auto; }
.mp-yp-pick { flex: 0 0 auto; border: 1px solid #cdd7ea; background: #fff; color: #2d5fa8; font-weight: 700; font-size: .85rem; border-radius: 10px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.mp-yp-pick:hover { background: #eef4fc; }

.mp-pick-overlay { position: fixed; inset: 0; background: rgba(20,18,30,.5); z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mp-pick { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.mp-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.mp-pick-title { font-weight: 800; font-size: 1.05rem; color: #23202e; }
.mp-pick-x { border: none; background: none; font-size: 1.5rem; line-height: 1; color: #9a95a6; cursor: pointer; }
.mp-pick-search { margin: 0 18px 10px; width: auto; border-radius: 10px !important; border: 1px solid #d9d3e6 !important; }
.mp-pick-list { flex: 1 1 auto; overflow-y: auto; padding: 0 10px; }
.mp-pick-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.mp-pick-row:hover { background: #f5f3fb; }
.mp-pick-row input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #2e8fa3; }
.mp-pick-name { font-weight: 600; color: #2f2547; font-size: .92rem; flex: 0 0 auto; }
.mp-pick-sub { color: #8a8595; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-pick-empty { color: #8a8595; padding: 20px; text-align: center; }
.mp-pick-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid #eee; }
.mp-pick-count { color: #6b7280; font-size: .88rem; font-weight: 600; }
.mp-pick-cancel { border: none; background: none; color: #8a8595; font-weight: 700; padding: 8px 12px; cursor: pointer; }
.mp-pick-add { border: none; background: #2e8fa3; color: #fff; font-weight: 700; border-radius: 10px; padding: 9px 18px; cursor: pointer; }
.mp-pick-add:disabled { background: #c7ccd4; cursor: default; }

/* "Send a copy to myself" checkbox on the create page */
.mp-send-copy-label { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0 6px; font-size: .9rem; color: #4b4557; cursor: pointer; font-weight: 600; }
.mp-send-copy-label input { width: 16px; height: 16px; accent-color: #2e8fa3; }

/* Help-me-write "Clear & start fresh" */
.mp-hw-clear { background: none; border: 1px solid #d9d3e6; color: #8a8595; font-weight: 600; font-size: .82rem; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.mp-hw-clear:hover { background: #f4f2fa; color: #5c5470; }

/* Help-me-write "personalize per recipient" */
.mp-hw-perrecip-label { display:flex; align-items:flex-start; gap:8px; font-size:.84rem; color:#5c5470; cursor:pointer; margin:2px 0 4px; }
.mp-hw-perrecip-label input { width:16px; height:16px; margin-top:1px; accent-color:#2e8fa3; flex:0 0 auto; }

/* ---- Unfinished-page draft: dashboard card + in-create banner (replaces the old popup) ---- */
.mp-dash-draft-card { display: flex; align-items: center; gap: 16px; border-left: 4px solid var(--mp-cyan); margin-bottom: 1.1rem; }
.mp-draft-card-ic { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.mp-draft-card-main { flex: 1; min-width: 0; }
.mp-draft-card-title { font-family: 'Nexa-Bold', sans-serif; color: var(--mp-ink); margin-bottom: 3px; }
.mp-draft-card-preview { color: #33383f; font-size: .9rem; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; word-break: break-word; }
.mp-draft-card-meta { color: var(--mp-muted); font-size: .78rem; margin-top: 5px; }
.mp-draft-card-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.mp-draft-card-discard { border: 0; background: transparent; color: var(--mp-muted); font-size: .82rem; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 999px; }
.mp-draft-card-discard:hover { color: #b23b3b; background: rgba(200,40,40,.07); }

.mp-draft-banner { display: flex; align-items: center; gap: 14px; background: rgba(70,183,197,.09); border: 1px solid rgba(70,183,197,.35); border-radius: var(--mp-radius-sm); padding: 12px 14px; margin: 0 0 16px; }
.mp-draft-banner[hidden] { display: none; }
.mp-draft-banner-ic { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.mp-draft-banner-main { flex: 1; min-width: 0; }
.mp-draft-banner-title { font-weight: 700; color: var(--mp-ink); font-size: .95rem; }
.mp-draft-banner-preview { color: #33383f; font-size: .85rem; line-height: 1.4; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; word-break: break-word; }
.mp-draft-banner-meta { color: var(--mp-muted); font-size: .75rem; margin-top: 4px; }
.mp-draft-banner-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mp-draft-banner-restore { border: 0; border-radius: 999px; padding: 7px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; background: var(--mp-cyan-deep); color: #fff; white-space: nowrap; }
.mp-draft-banner-restore:hover { filter: brightness(1.06); }
.mp-draft-banner-dismiss { border: 0; background: transparent; color: var(--mp-muted); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 6px 8px; }
.mp-draft-banner-dismiss:hover { color: #b23b3b; }

@media (max-width: 640px) {
    .mp-dash-draft-card, .mp-draft-banner { flex-wrap: wrap; }
    .mp-dash-draft-card .mp-draft-card-acts, .mp-draft-banner .mp-draft-banner-acts { width: 100%; justify-content: flex-start; }
}

/* Autosave "Draft saved" cue in the create flow */
.mp-draft-status { display: inline-block; margin-left: 10px; font-size: .78rem; font-weight: 700; color: #1f7d68; opacity: 0; transition: opacity .25s ease; vertical-align: middle; }
.mp-draft-status.show { opacity: 1; }

/* Event Radar — proportional timeline with labels staggered above/below the axis */
.mp-tl { position: relative; height: 190px; margin: 44px 6px 20px; overflow: visible; }
.mp-tl-axis { position: absolute; top: 78px; left: 0; right: 0; height: 3px; background: var(--mp-line); border-radius: 3px; }
.mp-tl-now, .mp-tl-end { position: absolute; top: 68px; font-size: .66rem; color: var(--mp-muted); }
.mp-tl-now { left: 0; }
.mp-tl-end { right: 0; }
.mp-tl-conn { position: absolute; width: 1px; background: var(--mp-line); transform: translateX(-50%); }
.mp-tl-dot { position: absolute; top: 74px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%); background: var(--mp-cyan-deep); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--mp-cyan-deep); cursor: pointer; transition: transform .12s ease; }
.mp-tl-dot.soon { background: #e08a1e; box-shadow: 0 0 0 2px #e08a1e; }
.mp-tl-dot:hover { transform: translateX(-50%) scale(1.28); }
.mp-tl-lab { position: absolute; width: 78px; transform: translateX(-50%); text-align: center; cursor: pointer; background: rgba(255,255,255,.82); border-radius: 8px; padding: 2px 0; }
.mp-tl-lab:hover, .mp-tl-lab.mp-tl-open { background: #fff; box-shadow: 0 1px 8px rgba(16,24,40,.14); }
.mp-tl-morenote { text-align: center; font-size: .72rem; color: var(--mp-muted); margin-top: 8px; }
/* Emoji filter chips on "What's coming up" */
.mp-dash-upfilters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mp-dash-upfilters:empty { display: none; }
.mp-upchip { font-size: .78rem; font-weight: 600; color: #55606a; background: #fff; border: 1px solid var(--mp-line, #e7ebf2); border-radius: 999px; padding: 5px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.mp-upchip:hover { border-color: var(--mp-cyan-deep, #2e8fa3); }
.mp-upchip.active { background: var(--mp-cyan-deep, #2e8fa3); border-color: var(--mp-cyan-deep, #2e8fa3); color: #fff; }
.mp-upchip-n { font-size: .68rem; opacity: .7; }
.mp-tl-morelink { color: var(--mp-cyan-deep, #2e8fa3); text-decoration: underline; cursor: pointer; }
.mp-dash-flash { animation: mpDashFlash 1.4s ease; }
@keyframes mpDashFlash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgba(70,183,197,.5); } }
.mp-tl-lab.above { top: 2px; }
.mp-tl-lab.below { top: 92px; }
.mp-tl-em { display: block; font-size: 1.05rem; line-height: 1.15; }
.mp-tl-nm { display: block; font-size: .68rem; font-weight: 600; color: #23272f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-tl-wn { display: block; font-size: .62rem; color: var(--mp-muted); }
.mp-tl-lab.soon .mp-tl-wn { color: #c9791a; font-weight: 700; }
.mp-tl-lab.mp-tl-open { z-index: 7; }
.mp-tl-pop { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: #fff; border: 1px solid var(--mp-line); border-radius: 999px; padding: 5px 7px; box-shadow: var(--mp-shadow-lift); white-space: nowrap; z-index: 8; }
/* Open the CTA popup AWAY from the axis so it never covers the dots on the line. */
.mp-tl-lab.above .mp-tl-pop { bottom: 100%; top: auto; margin: 0 0 6px; }
.mp-tl-lab.below .mp-tl-pop { top: 100%; bottom: auto; margin: 6px 0 0; }

/* Executor "Your people" search results dropdown */
.mp-exec-ac { border: 1px solid #e2ddef; border-radius: 10px; margin-top: 6px; max-height: 220px; overflow-y: auto; background: #fff; box-shadow: var(--mp-shadow, 0 8px 24px rgba(16,24,40,.07)); }
.mp-exec-ac-row { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .85rem; color: #2f2547; }
.mp-exec-ac-row:hover { background: #f4f2fb; }
.mp-exec-ac-sub { color: #8a8595; font-size: .78rem; }

/* ---- Dashboard redesign: readiness strip, 2-col grid, activity tabs ---- */
.mp-dash-ready-strip { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); padding: 12px 16px; margin: 0 0 12px; }
.mp-dash-ring.mp-ring-sm { width: 54px; height: 54px; flex: 0 0 auto; }
.mp-ready-strip-main { flex: 1; min-width: 0; }
.mp-ready-strip-title { font-family: 'Nexa-Bold', sans-serif; color: var(--mp-ink); font-size: .92rem; }
.mp-ready-strip-verdict { font-size: .85rem; margin-top: 2px; color: var(--mp-muted); }
.mp-ready-strip-verdict.ready { color: #1f7d68; font-weight: 600; }
.mp-ready-strip-verdict.warn { color: #c9791a; font-weight: 600; }
.mp-ready-strip-verdict.risk { color: #c0392b; font-weight: 700; }
.mp-ready-strip-toggle { border: 0; background: var(--mp-canvas); color: var(--mp-muted); font-weight: 600; font-size: .78rem; border-radius: 999px; padding: 7px 14px; cursor: pointer; flex: 0 0 auto; white-space: nowrap; }
.mp-ready-strip-toggle:hover { background: #eef0f6; }
.mp-ready-collapsible { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); padding: 14px 16px; margin: 0 0 12px; }
.mp-ready-collapsible[hidden] { display: none; }

.mp-dash-bento.mp-dash-grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 760px) { .mp-dash-bento.mp-dash-grid2 { grid-template-columns: 1fr; } }

.mp-act-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.mp-act-tab { border: 1px solid var(--mp-line); background: var(--mp-canvas); color: var(--mp-muted); font-weight: 600; font-size: .74rem; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.mp-act-tab.active { background: var(--mp-cyan-deep); color: #fff; border-color: var(--mp-cyan-deep); }
/* Each tab pane fills the card's remaining height and scrolls its own list, so a long
   Delivered/Recent/Circle list stays inside the card instead of spilling over. */
.mp-dash-activity-card .mp-act-tabs { flex: 0 0 auto; }
.mp-dash-activity-card .mp-act-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mp-dash-activity-card .mp-act-pane[hidden] { display: none; }
.mp-dash-activity-card .mp-act-pane > .mp-dash-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mp-dash-activity-card .mp-act-pane > .mp-dash-feed-filters { flex: 0 0 auto; margin-bottom: 8px; }
.mp-act-pane[hidden] { display: none; }

/* Date badge for radar entries (birthdays/anniversaries) shown in "What's coming up" */
.mp-kind-date { background: rgba(255,183,77,.18); color: #c9791a; }

/* ---- Modern inline date/time picker (mp-datetime.js) — on the teal create modal ---- */
.mp-dtp { max-width: 480px; }
.mp-dtp-lab { font-size: .72rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.45); margin: 16px 0 7px; }
.mp-dtp-datedisplay { border: 0; outline: 0; background: transparent; font-size: 1rem; font-weight: 700; color: #2f3350; flex: 1; padding: 0; cursor: pointer; }
.mp-dtp-datedisplay::placeholder { color: #8a8595; font-weight: 500; }
/* MP-119: .input-text-field form input[type="text"] (main-style.css) is a broad legacy rule
   that force-sizes any plain text input inside these forms to a 58px-tall dark-era field. It
   doesn't match the sibling time input (type="time"), which is why this field alone stood
   visibly taller. Reassert the compact styling already intended for it above. */
.mp-dtp-field.mp-dtp-datefield .mp-dtp-datedisplay {
    height: 24px !important; padding-left: 0 !important; background: transparent !important;
    font-family: inherit !important; font-size: 1rem !important; color: #2f3350 !important;
}
.mp-dtp-dateerr { color: #ffe0e0; background: rgba(192,57,43,.35); border-radius: 8px; padding: 6px 10px; font-size: .8rem; margin-top: 6px; }
.mp-dtp-dateerr[hidden] { display: none; }
.mp-dtp-presets, .mp-dtp-times { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-dtp-chip, .mp-dtp-tchip { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.15); color: #fff; border-radius: 999px; padding: 7px 14px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .12s; }
.mp-dtp-chip:hover, .mp-dtp-tchip:hover { background: rgba(255,255,255,.28); }
.mp-dtp-chip.on, .mp-dtp-tchip.on { background: #fff; color: #2e8fa3; border-color: #fff; }
.mp-dtp-field { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e2ddef; border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.mp-dtp-datefield:focus, .mp-dtp-field:focus-within { outline: none; border-color: #2e8fa3; box-shadow: 0 0 0 3px rgba(46,143,163,.18); }
/* MP-120: hit Next on the Maturity/Executor step with no date chosen. */
.mp-dtp-datefield.mp-dtp-field-invalid { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220,53,69,.15); }
.mp-dtp-fi { font-size: 1.15rem; }
.mp-dtp-dateinput, .mp-dtp-timeinput { border: 0; outline: 0; background: transparent; font-size: 1rem; font-weight: 700; color: #2f3350; flex: 1; padding: 0; cursor: pointer; }
.mp-dtp-dateinput::placeholder { color: #8a8595; font-weight: 500; }
/* MP-119: no font-size of its own, so it inherited the page's 24px base size (line-height 36px) -
   the tallest thing in the row, which was stretching the date field taller than the time field
   even after the date input itself was fixed. Match the field's other icons (~16px). */
.mp-dtp-caret { color: #8a8595; font-size: 1rem; line-height: 1; }
.mp-dtp-cal { background: #fff; border: 1px solid #e2ddef; border-radius: 12px; padding: 12px; margin-top: 8px; box-shadow: 0 10px 30px rgba(16,24,40,.16); }
.mp-dtp-cal[hidden] { display: none; }
.mp-dtp-calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-dtp-caltitle { font-weight: 700; color: #2f3350; font-size: .9rem; }
.mp-dtp-prev, .mp-dtp-next { border: 0; background: #f4f2fb; color: #2f3350; width: 30px; height: 30px; border-radius: 8px; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.mp-dtp-prev:hover, .mp-dtp-next:hover { background: #e7e2f5; }
.mp-dtp-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; }
.mp-dtp-dow span { text-align: center; font-size: .64rem; font-weight: 700; color: #8a8595; }
.mp-dtp-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.mp-dtp-day { text-align: center; padding: 7px 0; font-size: .82rem; color: #2f3350; border-radius: 8px; cursor: pointer; }
.mp-dtp-day:hover:not(.disabled):not(.mut):not(.sel) { background: #f4f2fb; }
.mp-dtp-day.mut { visibility: hidden; }
.mp-dtp-day.disabled { color: #cfcbda; cursor: default; }
.mp-dtp-day.today:not(.sel) { box-shadow: inset 0 0 0 1.5px #46b7c5; }
.mp-dtp-day.sel { background: #2e8fa3; color: #fff; font-weight: 700; }
.mp-dtp-summary { margin-top: 16px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.42); border-radius: 12px; padding: 11px 14px; font-size: .9rem; color: #fff; }
.mp-dtp-summary[hidden] { display: none; }
.mp-dtp-summary b { color: #fff; }

/* #41 — compact the maturity Date picker so the whole step fits one screen (no scroll) */
.mp-dtp { max-width: 520px; }
.mp-dtp-lab { margin: 9px 0 4px; }
.mp-dtp-field { padding: 8px 12px; }
.mp-dtp-fi { font-size: 1rem; }
.mp-dtp-presets, .mp-dtp-times { gap: 6px; }
.mp-dtp-chip, .mp-dtp-tchip { padding: 5px 11px; font-size: .78rem; }
.mp-dtp-cal { padding: 9px; margin-top: 6px; }
.mp-dtp-day { padding: 5px 0; }
.mp-dtp-summary { margin-top: 9px; padding: 8px 12px; font-size: .84rem; }

/* MP-121: #41 hid these entirely rather than fix them - the base rule (main-style.css) had no
   max-width, so real instructional sentences rendered as a single ~950px unwrapped line that
   the ribbon's own overflow-x:auto then clipped, which likely looked broken enough to just turn
   off. Bounded and centered above (.steps-progress .popover__content) instead of removed. */

/* Background-music mood picker on the Description step */
.mp-music-pick { margin-top: 16px; }
.mp-music-lab { font-size: .82rem; font-weight: 700; color: #eaf7fa; margin-bottom: 8px; }
.mp-music-opt { font-weight: 400; color: #9fb0b6; }
.mp-music-moods { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-music-mood { font-size: .85rem; font-weight: 600; color: #d6d2e0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .12s, border-color .12s; }
.mp-music-mood:hover { background: rgba(255,255,255,.12); }
.mp-music-mood.on { background: linear-gradient(135deg,#46b7c5,#2e8fa3); border-color: transparent; color: #fff; }
.mp-music-mood.playing { box-shadow: 0 0 0 2px rgba(127,227,200,.45); }
/* Level 2: exact-mood row revealed under the selected occasion group */
.mp-music-subs { margin-top: 10px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.mp-music-sub { font-size: .8rem; font-weight: 600; color: #c9c5d6; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .12s, border-color .12s; }
.mp-music-sub:hover { background: rgba(255,255,255,.12); }
.mp-music-sub.on { background: linear-gradient(135deg,#7fe3c8,#46b7c5); border-color: transparent; color: #0f2e28; }
.mp-music-sub.playing { box-shadow: 0 0 0 2px rgba(127,227,200,.45); }
/* AI card designer (wizard) */
.mp-carddesign { margin-top: 12px; }
.mp-carddesign-btn { font-size: .85rem; font-weight: 700; color: #0f2e28; background: linear-gradient(135deg,#7fe3c8,#46b7c5); border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.mp-carddesign-btn:hover { filter: brightness(1.06); }
.mp-carddesign-btn:disabled { opacity: .6; cursor: default; }
.mp-carddesign-status { font-size: .8rem; color: #9fb0b6; margin-left: 10px; }
.mp-carddesign-preview { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 40px 12px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(127,227,200,.35); border-radius: 12px; }
.mp-cardp-emoji { font-size: 1.9rem; }
.mp-cardp-title { font-family: Georgia, serif; font-size: 1.05rem; color: #eaf7fa; }
.mp-cardp-verse { font-family: Georgia, serif; font-style: italic; font-size: .85rem; color: #cfe0dc; margin-top: 3px; }
.mp-cardp-tags { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: #7fd1c0; margin-top: 5px; }
.mp-cardp-clear { position: absolute; top: 8px; right: 10px; border: none; background: none; color: #9fb0b6; font-size: .9rem; cursor: pointer; }