:root {
    --ink: #17211c;
    --muted: #63716b;
    --line: #dde7e2;
    --paper: #ffffff;
    --wash: #f6f8f5;
    --green: #176b4d;
    --green-dark: #0f4f3b;
    --mint: #e7f5ee;
    --amber: #f2b83b;
    --amber-soft: #fff3ce;
    --blue-soft: #e7effb;
    --coral-soft: #fde8e5;
    --shadow: 0 18px 48px rgba(23, 33, 28, 0.08);
    --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Plus Jakarta Sans", var(--font-ui);
    --font-cv: "Source Sans 3", var(--font-ui);
    --font-cv-serif: "Merriweather", Georgia, serif;
    font-family: var(--font-ui);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--wash);
}

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

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

button {
    cursor: pointer;
}

.profile-layout-picker,
.profile-contact-builder {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fbf9);
}

.profile-layout-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.profile-layout-option {
    position: relative;
    display: grid;
    gap: 10px;
    min-height: 188px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.profile-layout-option:hover,
.profile-layout-option:has(input:checked) {
    border-color: rgba(9, 139, 87, 0.52);
    box-shadow: 0 14px 32px rgba(9, 139, 87, 0.1);
    transform: translateY(-1px);
}

.profile-layout-option input {
    position: absolute;
    inset: 12px 12px auto auto;
    accent-color: var(--green);
}

.profile-layout-option strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
}

.profile-layout-option strong [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--green);
}

.profile-layout-option small {
    color: var(--muted);
    font-weight: 700;
    line-height: 1.45;
}

.profile-layout-preview {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: 16px 12px 1fr;
    gap: 8px 10px;
    height: 78px;
    padding: 10px;
    border-radius: 8px;
    background: #eef7f2;
}

.profile-layout-preview b,
.profile-layout-preview i,
.profile-layout-preview em {
    display: block;
    border-radius: 999px;
    background: #0a9b5c;
}

.profile-layout-preview b {
    grid-row: 1 / 4;
    width: 46px;
    height: 46px;
    align-self: center;
}

.profile-layout-preview i {
    width: 72%;
}

.profile-layout-preview em {
    width: 92%;
    height: 28px;
    border-radius: 8px;
    opacity: 0.22;
}

.profile-layout-preview.layout-story {
    grid-template-columns: 1fr;
}

.profile-layout-preview.layout-story b {
    grid-row: auto;
    width: 68%;
    height: 14px;
}

.profile-layout-preview.layout-business {
    grid-template-columns: repeat(3, 1fr);
}

.profile-layout-preview.layout-business b,
.profile-layout-preview.layout-business i,
.profile-layout-preview.layout-business em {
    grid-row: auto;
    width: 100%;
    height: 46px;
    border-radius: 8px;
}

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

.profile-structured-card,
.profile-business-table > div,
.profile-contact-row {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfdfb;
}

.profile-structured-card span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-structured-card span [data-lucide] {
    width: 15px;
    height: 15px;
}

.profile-structured-card strong,
.profile-business-table strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-weight: 900;
}

.profile-structured-card p,
.profile-business-table p,
.profile-contact-row p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.profile-business-table {
    display: grid;
    gap: 10px;
}

.profile-business-table > div {
    display: grid;
    grid-template-columns: minmax(120px, 0.75fr) minmax(150px, 1fr);
    gap: 8px 14px;
}

.profile-business-table span {
    color: var(--muted);
    font-weight: 800;
}

.profile-business-table p {
    grid-column: 1 / -1;
}

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

.profile-editor-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 14px;
    border: 1px solid rgba(9, 139, 87, 0.18);
    border-radius: 8px;
    background: linear-gradient(135deg, #f3fbf7, #ffffff);
    box-shadow: 0 14px 34px rgba(18, 55, 42, 0.08);
}

.profile-editor-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #04754a;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-editor-strip strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-weight: 900;
}

.profile-editor-strip p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.profile-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.profile-section-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid rgba(9, 139, 87, 0.18);
    border-radius: 999px;
    background: #f4fbf7;
    color: #04754a;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.profile-section-edit-link:hover,
.profile-section-edit-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(9, 139, 87, 0.36);
    box-shadow: 0 10px 24px rgba(6, 95, 70, 0.12);
    outline: none;
}

.profile-section-edit-link [data-lucide],
.profile-editor-empty > a [data-lucide] {
    width: 15px;
    height: 15px;
}

.profile-editor-empty {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px dashed rgba(9, 139, 87, 0.34);
    border-radius: 8px;
    background: #fbfefd;
}

.profile-editor-empty > [data-lucide] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 10px;
    border-radius: 8px;
    background: #e4f8ed;
    color: #04754a;
}

.profile-editor-empty strong {
    display: block;
    color: var(--ink);
    font-weight: 900;
}

.profile-editor-empty p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.profile-editor-empty > a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #04754a;
    color: white;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.profile-editor-empty > a:hover,
.profile-editor-empty > a:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 10px 22px rgba(4, 117, 74, 0.22);
    outline: none;
}

.profile-editor-empty.inline-empty,
.profile-editor-empty.compact-empty {
    width: 100%;
}

.profile-d-number-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(9, 139, 87, 0.18);
    border-radius: 8px;
    background: #effaf4;
    text-align: left;
}

.profile-d-number-card > span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: white;
    background: #079858;
}

.profile-d-number-card [data-lucide] {
    width: 20px;
    height: 20px;
}

.profile-d-number-card small,
.profile-contact-row small {
    display: block;
    color: var(--muted);
    font-weight: 800;
}

.profile-d-number-card strong {
    display: block;
    margin-top: 3px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 900;
}

.profile-d-number-open-form {
    margin: 0;
}

.profile-d-number-action {
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.profile-d-number-action::after {
    content: "";
    position: absolute;
    inset: -35% auto -35% -45%;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
    transform: rotate(18deg);
    animation: profileDNumberSweep 4s ease-in-out infinite;
}

.profile-d-number-action:hover,
.profile-d-number-action:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(9, 139, 87, 0.36);
    box-shadow: 0 16px 34px rgba(6, 95, 70, 0.14);
    outline: none;
}

.profile-d-number-card em {
    display: block;
    margin-top: 4px;
    color: #04754a;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

@keyframes profileDNumberSweep {
    0%,
    62% {
        left: -45%;
    }

    100% {
        left: 120%;
    }
}

.profile-contact-table {
    display: grid;
    gap: 10px;
}

.profile-contact-row {
    display: grid;
    gap: 8px;
}

.profile-contact-row > span strong {
    display: block;
    font-weight: 900;
}

.profile-contact-row em {
    justify-self: start;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef3f0;
    color: var(--ink);
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.profile-contact-row em.is-d-number {
    background: #e4f8ed;
    color: #04754a;
}

.profile-contact-row-message {
    margin: 0;
}

.profile-contact-row-message .secondary-button {
    justify-self: start;
}

.profile-layout-story .profile-about-card {
    border-left: 4px solid #079858;
}

.profile-layout-story .profile-about-copy,
.profile-layout-story .card-copy {
    font-size: 17px;
    line-height: 1.75;
}

.profile-layout-business .profile-structured-grid,
.profile-layout-business .profile-opportunity-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .profile-editor-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-editor-empty {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .profile-editor-empty > a {
        grid-column: 1 / -1;
        width: 100%;
        height: 38px;
    }

    .profile-layout-options,
    .profile-structured-grid,
    .profile-layout-business .profile-structured-grid,
    .profile-layout-business .profile-opportunity-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-business-table > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding: 12px clamp(16px, 4vw, 42px);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 222px;
}

.brand-mark {
    display: block;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(2, 158, 89, 0.18);
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    color: #0d1625;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.brand small {
    color: #07854f;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    margin-top: 3px;
}

.main-nav,
.category-tabs {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.main-nav {
    flex: 1;
}

.category-tabs {
    order: 5;
    flex-basis: 100%;
    padding-top: 2px;
}

.main-nav::-webkit-scrollbar,
.category-tabs::-webkit-scrollbar {
    display: none;
}

.main-nav form {
    margin: 0;
}

.main-nav a,
.main-nav button,
.category-tabs a,
.btn,
.primary-button,
.secondary-button,
.chip,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    font-weight: 800;
    white-space: nowrap;
}

.main-nav a,
.main-nav button {
    position: relative;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid transparent;
    color: var(--ink);
    background: transparent;
}

.main-nav a:hover,
.main-nav a.active,
.main-nav button:hover,
.category-tabs a:hover,
.category-tabs a.active,
.chip.active,
.chip:hover {
    color: var(--green-dark);
    border-color: #cce8da;
    background: var(--mint);
}

.category-tabs a {
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.category-tabs a.active {
    color: white;
    border-color: var(--green-dark);
    background: var(--green);
}

.nav-alert-link {
    padding-right: 18px !important;
}

.nav-alert-badge,
.button-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    color: white;
    background: #d92d20;
    box-shadow: 0 6px 14px rgba(217, 45, 32, .28);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.nav-alert-badge {
    position: absolute;
    top: -8px;
    right: -7px;
    border: 2px solid var(--paper);
}

.credit-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    white-space: nowrap;
}

.credit-pill span {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--amber);
}

.credit-pill strong {
    font-size: 13px;
}

.signed-in-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    max-width: 230px;
    padding: 5px 10px 5px 6px;
    border: 1px solid #cce8da;
    border-radius: 8px;
    background: #f1faf5;
    color: var(--ink);
    white-space: nowrap;
}

.signed-in-pill:hover {
    border-color: #a9d9c1;
    background: var(--mint);
}

.signed-in-avatar {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: white;
    background: var(--green);
    font-size: 12px;
    font-weight: 950;
    overflow: hidden;
}

.signed-in-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.signed-in-avatar > b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    background: rgba(15, 25, 22, .62);
    opacity: 0;
    transition: opacity 160ms ease;
}

.signed-in-avatar > b [data-lucide] {
    width: 13px;
    height: 13px;
}

.signed-in-pill:hover .signed-in-avatar > b,
.signed-in-pill:focus-visible .signed-in-avatar > b {
    opacity: 1;
}

.signed-in-pill span:last-child {
    display: grid;
    min-width: 0;
}

.signed-in-pill small,
.signed-in-pill strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.signed-in-pill small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    line-height: 1.1;
}

.signed-in-pill strong {
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.15;
}

.topbar-logout-form {
    margin: 0;
}

.topbar-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #ffd2cc;
    border-radius: 8px;
    color: #b42318;
    background: #fff4f2;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(180, 35, 24, .06);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.topbar-logout-button:hover,
.topbar-logout-button:focus-visible {
    border-color: #ffb3aa;
    background: #ffe9e5;
    transform: translateY(-1px);
}

.topbar-logout-button [data-lucide] {
    width: 17px;
    height: 17px;
}

.site-footer {
    margin-top: 26px;
    padding: 20px clamp(16px, 4vw, 42px) 30px;
    border-top: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 252, 250, 0.96)),
        var(--paper);
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(1380px, 100%);
    margin: 0 auto;
}

.site-footer-brand {
    display: grid;
    gap: 3px;
}

.site-footer-brand strong {
    color: #0d1625;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 900;
}

.site-footer-brand span {
    color: var(--green);
    font-size: 12px;
    font-weight: 850;
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    padding: 7px;
    border: 1px solid rgba(23, 107, 77, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(15, 79, 59, 0.07);
}

.language-switcher label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-left: 6px;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.language-switcher label [data-lucide] {
    width: 17px;
    height: 17px;
}

.language-switcher select {
    min-width: min(230px, 48vw);
    min-height: 36px;
    padding: 0 34px 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ink);
    background: #f4faf7;
    font-size: 13px;
    font-weight: 800;
    outline: 0;
}

.language-switcher select:focus {
    border-color: #9fd3b8;
    box-shadow: 0 0 0 3px rgba(23, 107, 77, 0.12);
}

@media (max-width: 640px) {
    .site-footer-inner,
    .language-switcher {
        align-items: stretch;
        width: 100%;
    }

    .language-switcher {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        border-radius: 18px;
    }

    .language-switcher label {
        grid-column: 1 / -1;
    }

    .language-switcher select {
        min-width: 0;
        width: 100%;
    }
}

.search-band,
.page-band {
    padding: 26px clamp(16px, 4vw, 42px);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.search-heading,
.page-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 22px;
    max-width: 1380px;
    margin: 0 auto;
}

.kicker {
    margin: 0 0 8px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    max-width: 820px;
    margin-bottom: 12px;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.04;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 10px;
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.12;
    letter-spacing: 0;
}

h3 {
    margin-bottom: 8px;
    line-height: 1.2;
}

.lede {
    max-width: 780px;
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.55;
}

.home-service-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .72fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    width: min(1380px, calc(100% - clamp(32px, 8vw, 84px)));
    max-width: 1380px;
    margin: 24px auto 0;
    padding: clamp(24px, 5vw, 58px);
    overflow: hidden;
    border: 1px solid rgba(25, 104, 80, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 249, 0.94)),
        #ffffff;
    box-shadow: 0 28px 70px rgba(18, 61, 52, 0.12);
}

.home-service-copy h1 {
    max-width: 760px;
    margin-bottom: 16px;
    font-size: clamp(38px, 5.6vw, 76px);
    line-height: .96;
}

.home-service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.home-service-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.home-service-pills span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(25, 104, 80, 0.14);
    border-radius: 999px;
    color: #174f3b;
    background: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(15, 79, 59, 0.08);
}

.home-service-pills [data-lucide] {
    width: 16px;
    height: 16px;
}

.home-service-stage {
    position: relative;
    min-height: 390px;
    isolation: isolate;
}

.home-service-stage::before {
    content: "";
    position: absolute;
    inset: 38px 24px;
    z-index: -1;
    border: 1px solid rgba(25, 104, 80, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(25, 104, 80, 0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(25, 104, 80, 0.04) 1px, transparent 1px),
        rgba(255, 255, 255, 0.55);
    background-size: 34px 34px;
    transform: rotate(-2deg);
}

.home-on-card {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    width: min(300px, 82vw);
    min-height: 250px;
    place-items: center;
    padding: 28px;
    border: 1px solid rgba(25, 104, 80, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 26px 58px rgba(14, 55, 45, 0.18);
    transform: translate(-50%, -50%);
    animation: homeStageFloat 5.5s ease-in-out infinite;
}

.home-on-mark {
    display: grid;
    width: 96px;
    height: 96px;
    place-items: center;
    border-radius: 24px;
    color: #ffffff;
    background: #127a55;
    font-size: 34px;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 18px 34px rgba(18, 122, 85, 0.28);
}

.home-on-card strong {
    color: #0e1f1a;
    font-size: 25px;
    font-weight: 950;
    letter-spacing: 0;
}

.home-on-card small {
    max-width: 220px;
    color: #607169;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.home-on-signal {
    display: flex;
    align-items: end;
    gap: 6px;
    height: 42px;
}

.home-on-signal span {
    display: block;
    width: 10px;
    border-radius: 999px;
    background: #127a55;
    box-shadow: 0 8px 20px rgba(18, 122, 85, 0.22);
    animation: homeSignalBar 1.2s ease-in-out infinite;
}

.home-on-signal span:nth-child(1) {
    height: 18px;
}

.home-on-signal span:nth-child(2) {
    height: 30px;
    animation-delay: .14s;
}

.home-on-signal span:nth-child(3) {
    height: 40px;
    animation-delay: .28s;
}

.home-service-node {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid rgba(16, 48, 40, 0.12);
    border-radius: 999px;
    color: #10271f;
    background: rgba(255, 255, 255, 0.94);
    font-size: 14px;
    font-weight: 950;
    box-shadow: 0 18px 36px rgba(11, 48, 40, 0.13);
    animation: homeNodeFloat 4.8s ease-in-out infinite;
}

.home-service-node [data-lucide] {
    width: 18px;
    height: 18px;
}

.home-service-node.node-one {
    top: 50px;
    left: 18px;
    color: #0f5f8c;
}

.home-service-node.node-two {
    top: 66px;
    right: 8px;
    color: #b02e63;
    animation-delay: .35s;
}

.home-service-node.node-three {
    right: 10px;
    bottom: 72px;
    color: #9b6400;
    animation-delay: .7s;
}

.home-service-node.node-four {
    left: 2px;
    bottom: 54px;
    color: #4d3bb8;
    animation-delay: 1.05s;
}

.home-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: min(1380px, calc(100% - clamp(32px, 8vw, 84px)));
    max-width: 1380px;
    margin: 16px auto 24px;
}

.home-service-card {
    position: relative;
    display: grid;
    gap: 9px;
    min-height: 218px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(22, 74, 62, 0.12);
    border-radius: 8px;
    color: #101f1a;
    background: #ffffff;
    text-decoration: none;
    box-shadow: 0 18px 38px rgba(14, 44, 38, 0.08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    animation: homeCardEnter .48s ease both;
}

.home-service-card:nth-child(2) {
    animation-delay: .05s;
}

.home-service-card:nth-child(3) {
    animation-delay: .1s;
}

.home-service-card:nth-child(4) {
    animation-delay: .15s;
}

.home-service-card:nth-child(5) {
    animation-delay: .2s;
}

.home-service-card:nth-child(6) {
    animation-delay: .25s;
}

.home-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0 35%, rgba(255, 255, 255, 0.72), transparent 65% 100%);
    transform: translateX(-115%);
    transition: transform .55s ease;
}

.home-service-card:hover {
    border-color: rgba(21, 112, 80, 0.28);
    box-shadow: 0 24px 48px rgba(14, 44, 38, 0.14);
    transform: translateY(-4px);
}

.home-service-card:hover::after {
    transform: translateX(115%);
}

.home-service-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: #127a55;
}

.home-service-icon [data-lucide] {
    width: 22px;
    height: 22px;
}

.home-service-card small {
    color: #6b7a74;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.home-service-card strong {
    color: #101f1a;
    font-size: 20px;
    font-weight: 950;
    letter-spacing: 0;
}

.home-service-card p {
    margin: 0;
    color: #5d6d66;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
}

.home-service-card em {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 10px;
    border: 1px solid rgba(22, 74, 62, 0.11);
    border-radius: 999px;
    color: #253830;
    background: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.home-service-card.tone-green {
    background: #f3fbf7;
}

.home-service-card.tone-green .home-service-icon {
    background: #127a55;
}

.home-service-card.tone-blue {
    background: #f3f8ff;
}

.home-service-card.tone-blue .home-service-icon {
    background: #1769aa;
}

.home-service-card.tone-rose {
    background: #fff5f8;
}

.home-service-card.tone-rose .home-service-icon {
    background: #c4336f;
}

.home-service-card.tone-amber {
    background: #fff9ed;
}

.home-service-card.tone-amber .home-service-icon {
    background: #b66d00;
}

.home-service-card.tone-mint {
    background: #f1fbfb;
}

.home-service-card.tone-mint .home-service-icon {
    background: #0a7f7b;
}

.home-service-card.tone-violet {
    background: #f8f6ff;
}

.home-service-card.tone-violet .home-service-icon {
    background: #5b47c7;
}

.search-section-title {
    max-width: 820px;
    margin-bottom: 12px;
    font-size: clamp(26px, 3.1vw, 40px);
    line-height: 1.08;
}

@keyframes homeStageFloat {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-8px);
    }
}

@keyframes homeSignalBar {
    0%,
    100% {
        transform: scaleY(.62);
        opacity: .65;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes homeNodeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes homeCardEnter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

.dekeree-home {
    display: grid;
    gap: 22px;
    padding: 22px clamp(16px, 4vw, 42px) 54px;
    background:
        linear-gradient(180deg, #f6fbf8 0, #f8fbf9 42%, #ffffff 100%);
}

.dekeree-home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, .78fr);
    align-items: center;
    gap: clamp(24px, 5vw, 72px);
    max-width: 1420px;
    min-height: min(780px, calc(100vh - 110px));
    margin: 0 auto;
    padding: clamp(28px, 5vw, 70px);
    overflow: hidden;
    border: 1px solid rgba(15, 79, 59, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 249, 244, 0.94) 46%, rgba(255, 250, 241, 0.92)),
        #ffffff;
    box-shadow: 0 30px 80px rgba(15, 55, 45, 0.14);
    transform-style: preserve-3d;
    animation: dekereeHeroReveal .72s cubic-bezier(.2, .84, .22, 1) both;
}

.dekeree-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(15, 79, 59, 0.055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(15, 79, 59, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .72), transparent 78%);
}

.dekeree-home-hero::after {
    content: "";
    position: absolute;
    inset: -20% -40%;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, .52), transparent 62% 100%);
    transform: translateX(-42%) rotate(7deg);
    animation: dekereeHeroSweep 8s ease-in-out infinite;
}

.dekeree-home-copy {
    position: relative;
    z-index: 2;
    animation: dekereeCopyIn .62s ease both .08s;
}

.dekeree-home-copy h1 {
    max-width: 840px;
    margin-bottom: 18px;
    color: #111c19;
    font-size: clamp(44px, 7.4vw, 96px);
    line-height: .92;
    letter-spacing: 0;
}

.dekeree-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.dekeree-home-rhythm {
    position: relative;
    display: flex;
    gap: 10px;
    width: min(760px, 100%);
    margin-top: 22px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.dekeree-home-rhythm span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 79, 59, .13);
    border-radius: 999px;
    color: #12261f;
    background: rgba(255, 255, 255, .76);
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(14, 44, 38, .07);
    animation: dekereeRibbonDrift 9s linear infinite;
}

.dekeree-home-rhythm span:nth-child(2n) {
    animation-delay: -.75s;
}

.dekeree-home-rhythm [data-lucide] {
    width: 16px;
    height: 16px;
    color: #0f8f5f;
}

.dekeree-home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.dekeree-home-stats span {
    display: grid;
    gap: 2px;
    min-width: 136px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 79, 59, 0.13);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 36px rgba(22, 74, 62, 0.08);
    animation: dekereeStatRise .55s ease both;
}

.dekeree-home-stats span:nth-child(2) {
    animation-delay: .08s;
}

.dekeree-home-stats span:nth-child(3) {
    animation-delay: .16s;
}

.dekeree-home-stats strong {
    color: #0f4f3b;
    font-size: 26px;
    font-weight: 950;
}

.dekeree-home-stats small {
    color: #61726b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.dekeree-home-stage {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 560px;
    place-items: center;
    perspective: 1200px;
    --home-shift-x: 0px;
    --home-shift-y: 0px;
    --home-rotate-y: -8deg;
    --home-rotate-x: 5deg;
    transform: translate3d(var(--home-shift-x), var(--home-shift-y), 0);
    transition: transform .24s ease-out;
}

.dekeree-orbit-ring {
    position: absolute;
    border: 1px solid rgba(15, 79, 59, 0.2);
    border-radius: 999px;
    transform: rotateX(64deg) rotateZ(-22deg);
}

.dekeree-orbit-ring.ring-one {
    width: min(520px, 88vw);
    height: min(520px, 88vw);
    animation: dekereeRingTurn 18s linear infinite;
}

.dekeree-orbit-ring.ring-two {
    width: min(390px, 70vw);
    height: min(390px, 70vw);
    border-color: rgba(43, 84, 177, 0.18);
    animation: dekereeRingTurn 14s linear infinite reverse;
}

.dekeree-connection-line {
    position: absolute;
    z-index: 0;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 79, 59, .12);
    transform-origin: center;
}

.dekeree-connection-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(15, 143, 95, .95), transparent);
    transform: translateX(-100%);
    animation: dekereeLineTravel 2.8s ease-in-out infinite;
}

.dekeree-connection-line.line-chat {
    top: 154px;
    left: 82px;
    width: 250px;
    transform: rotate(18deg);
}

.dekeree-connection-line.line-social {
    top: 184px;
    right: 62px;
    width: 230px;
    transform: rotate(-24deg);
}

.dekeree-connection-line.line-shop {
    right: 70px;
    bottom: 170px;
    width: 238px;
    transform: rotate(20deg);
}

.dekeree-connection-line.line-profile {
    left: 56px;
    bottom: 196px;
    width: 230px;
    transform: rotate(-20deg);
}

.dekeree-stage-signal {
    position: absolute;
    z-index: 1;
    display: block;
    width: 54px;
    height: 12px;
    border: 1px solid rgba(15, 79, 59, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 14px 28px rgba(15, 79, 59, .1);
    animation: dekereeSignalSlide 5.6s ease-in-out infinite;
}

.dekeree-stage-signal::before {
    content: "";
    display: block;
    width: 16px;
    height: 8px;
    margin: 1px;
    border-radius: inherit;
    background: #0f8f5f;
}

.dekeree-stage-signal.signal-one {
    top: 118px;
    left: 48%;
}

.dekeree-stage-signal.signal-two {
    right: 20%;
    bottom: 122px;
    animation-delay: .9s;
}

.dekeree-stage-signal.signal-three {
    left: 18%;
    bottom: 150px;
    animation-delay: 1.8s;
}

.dekeree-on-phone {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(330px, 78vw);
    min-height: 520px;
    align-content: start;
    gap: 14px;
    padding: 16px;
    overflow: hidden;
    border: 8px solid #111b18;
    border-radius: 46px;
    background: #f7fbf8;
    box-shadow: 0 36px 74px rgba(9, 31, 26, .28);
    transform: rotateY(var(--home-rotate-y)) rotateX(var(--home-rotate-x));
    translate: 0 0;
    animation: dekereePhoneFloat 5.8s ease-in-out infinite;
}

.dekeree-phone-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 10px;
    color: #10231c;
    font-weight: 950;
}

.dekeree-phone-top span {
    width: 72px;
    height: 8px;
    border-radius: 999px;
    background: #1a2924;
}

.dekeree-on-screen {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 18px 24px;
    border: 1px solid rgba(15, 79, 59, 0.12);
    border-radius: 30px;
    background: linear-gradient(180deg, #ffffff, #eef9f4);
    text-align: center;
}

.dekeree-on-screen img {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    box-shadow: 0 14px 24px rgba(6, 127, 75, 0.2);
}

.dekeree-on-screen strong {
    color: #10231c;
    font-size: 24px;
    font-weight: 950;
}

.dekeree-on-screen > span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: #0f6c4d;
    background: #e2f7ed;
    font-weight: 950;
}

.dekeree-signal-bars {
    display: flex;
    align-items: end;
    gap: 7px;
    height: 44px;
}

.dekeree-signal-bars i {
    display: block;
    width: 9px;
    border-radius: 999px;
    background: #0f8f5f;
    animation: dekereeSignalPulse 1.1s ease-in-out infinite;
}

.dekeree-signal-bars i:nth-child(1) {
    height: 15px;
}

.dekeree-signal-bars i:nth-child(2) {
    height: 26px;
    animation-delay: .12s;
}

.dekeree-signal-bars i:nth-child(3) {
    height: 35px;
    animation-delay: .24s;
}

.dekeree-signal-bars i:nth-child(4) {
    height: 42px;
    animation-delay: .36s;
}

.dekeree-chat-preview {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid rgba(16, 39, 31, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 16px 30px rgba(14, 45, 38, .1);
    animation: dekereeMessageSlide 4.6s ease-in-out infinite;
}

.dekeree-chat-preview.two {
    animation-delay: 1.25s;
}

.dekeree-chat-preview small {
    color: #0f8f5f;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.dekeree-chat-preview span {
    color: #1e2e28;
    font-size: 14px;
    font-weight: 850;
}

.dekeree-orbit-service {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 9px 13px;
    border: 1px solid rgba(17, 43, 35, .12);
    border-radius: 999px;
    color: #13251f;
    background: rgba(255, 255, 255, .94);
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 18px 40px rgba(12, 42, 35, 0.14);
    transition: transform .2s ease, box-shadow .2s ease;
    animation: dekereeServiceFloat 4.8s ease-in-out infinite;
}

.dekeree-orbit-service:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 24px 46px rgba(12, 42, 35, 0.2);
}

.dekeree-orbit-service [data-lucide] {
    width: 18px;
    height: 18px;
}

.orbit-chat {
    top: 68px;
    left: 26px;
    color: #1769aa;
}

.orbit-social {
    top: 122px;
    right: 10px;
    color: #c4336f;
    animation-delay: .5s;
}

.orbit-shop {
    right: 34px;
    bottom: 102px;
    color: #b66d00;
    animation-delay: 1s;
}

.orbit-profiles {
    left: 8px;
    bottom: 132px;
    color: #5b47c7;
    animation-delay: 1.5s;
}

.dekeree-service-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    max-width: 1420px;
    margin: 0 auto;
}

.dekeree-service-tile {
    position: relative;
    display: grid;
    gap: 10px;
    min-height: 246px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(22, 74, 62, 0.12);
    border-radius: 8px;
    color: #111f1a;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(14, 44, 38, 0.08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    animation: dekereeTileIn .62s cubic-bezier(.2, .84, .22, 1) both;
    animation-delay: calc(var(--tile-index, 0) * 75ms);
}

.dekeree-service-tile::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: #0f8f5f;
    transform: scaleX(.2);
    transform-origin: left;
    transition: transform .24s ease;
}

.dekeree-service-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, .68), transparent 66% 100%);
    transform: translateX(-118%);
    transition: transform .58s ease;
}

.dekeree-service-tile:hover {
    border-color: rgba(15, 143, 95, 0.28);
    box-shadow: 0 26px 54px rgba(14, 44, 38, 0.14);
    transform: translateY(-5px);
}

.dekeree-service-tile:hover::before {
    transform: scaleX(1);
}

.dekeree-service-tile:hover::after {
    transform: translateX(118%);
}

.dekeree-service-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.dekeree-service-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 8px;
    color: white;
    background: #0f8f5f;
}

.dekeree-service-icon [data-lucide],
.dekeree-service-arrow [data-lucide] {
    width: 21px;
    height: 21px;
}

.dekeree-service-tile em {
    padding: 6px 9px;
    border: 1px solid rgba(17, 43, 35, .1);
    border-radius: 999px;
    color: #4f625a;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.dekeree-service-tile small {
    color: #65736e;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dekeree-service-tile strong {
    color: #111f1a;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1.18;
}

.dekeree-service-tile p {
    margin: 0;
    color: #5e6f68;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.48;
}

.dekeree-service-arrow {
    align-self: end;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    color: #0f4f3b;
    background: rgba(231, 245, 238, .88);
}

.dekeree-service-tile.tone-pink .dekeree-service-icon,
.dekeree-service-tile.tone-pink::before {
    background: #d9367a;
}

.dekeree-service-tile.tone-amber .dekeree-service-icon,
.dekeree-service-tile.tone-amber::before {
    background: #bd7400;
}

.dekeree-service-tile.tone-blue .dekeree-service-icon,
.dekeree-service-tile.tone-blue::before {
    background: #1769aa;
}

.dekeree-service-tile.tone-violet .dekeree-service-icon,
.dekeree-service-tile.tone-violet::before {
    background: #5b47c7;
}

.dekeree-service-tile.tone-teal .dekeree-service-icon,
.dekeree-service-tile.tone-teal::before {
    background: #0a7f7b;
}

.dekeree-home-flow {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
    max-width: 1420px;
    margin: 0 auto;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(15, 79, 59, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(14, 44, 38, 0.08);
}

.dekeree-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dekeree-flow-card {
    display: grid;
    gap: 10px;
    min-height: 190px;
    padding: 18px;
    border: 1px solid rgba(15, 79, 59, 0.13);
    border-radius: 8px;
    background: #f8fbf9;
    animation: dekereeTileIn .6s cubic-bezier(.2, .84, .22, 1) both;
    animation-delay: calc(260ms + (var(--flow-index, 0) * 95ms));
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.dekeree-flow-card:hover {
    border-color: rgba(15, 143, 95, .24);
    box-shadow: 0 18px 38px rgba(14, 44, 38, .1);
    transform: translateY(-4px);
}

.dekeree-flow-card span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #0f4f3b;
    background: #e7f5ee;
}

.dekeree-flow-card strong {
    color: #13231d;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.25;
}

.dekeree-flow-card p {
    margin: 0;
    color: #5f7068;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
}

@keyframes dekereeRingTurn {
    to {
        transform: rotateX(64deg) rotateZ(338deg);
    }
}

@keyframes dekereeHeroReveal {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }

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

@keyframes dekereeHeroSweep {
    0%,
    42% {
        transform: translateX(-48%) rotate(7deg);
        opacity: 0;
    }

    55% {
        opacity: .8;
    }

    74%,
    100% {
        transform: translateX(48%) rotate(7deg);
        opacity: 0;
    }
}

@keyframes dekereeCopyIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes dekereeRibbonDrift {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-18px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes dekereeLineTravel {
    0% {
        transform: translateX(-105%);
    }

    58% {
        transform: translateX(105%);
    }

    100% {
        transform: translateX(105%);
    }
}

@keyframes dekereeSignalSlide {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: .65;
    }

    50% {
        transform: translate3d(18px, -9px, 0);
        opacity: 1;
    }
}

@keyframes dekereePhoneFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

@keyframes dekereeSignalPulse {
    0%,
    100% {
        transform: scaleY(.6);
        opacity: .6;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes dekereeMessageSlide {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }
}

@keyframes dekereeServiceFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

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

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

@keyframes dekereeStatRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .dekeree-home-hero,
    .dekeree-home-copy,
    .dekeree-home-stats span,
    .dekeree-orbit-ring,
    .dekeree-on-phone,
    .dekeree-signal-bars i,
    .dekeree-chat-preview,
    .dekeree-orbit-service,
    .dekeree-connection-line::after,
    .dekeree-stage-signal,
    .dekeree-service-tile,
    .dekeree-flow-card,
    .dekeree-home-rhythm span {
        animation: none !important;
    }

    .dekeree-home-stage,
    .dekeree-on-phone {
        transform: none !important;
    }
}

.search-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1.25fr) minmax(210px, .78fr) minmax(210px, .78fr) auto;
    gap: 10px;
    max-width: 1380px;
    margin: 22px auto 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.field {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: 0;
    color: var(--ink);
    background: var(--paper);
}

label.field {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

input.field,
select.field {
    padding: 0 12px;
}

textarea.field {
    min-height: 150px;
    padding: 12px;
    resize: vertical;
    line-height: 1.5;
}

.field:focus-within,
input.field:focus,
select.field:focus,
textarea.field:focus {
    border-color: #9fd3b8;
    box-shadow: 0 0 0 3px rgba(23, 107, 77, 0.12);
}

.field i {
    display: grid;
    place-items: center;
    width: 42px;
    flex: 0 0 42px;
    color: var(--muted);
}

.field input,
.field select {
    width: 100%;
    height: 46px;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
}

.field select {
    padding-right: 10px;
}

.date-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 0 12px;
}

.date-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.date-field input[type="date"] {
    color: var(--ink);
    font-weight: 750;
    color-scheme: light;
}

.search-field::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 22px;
    border-radius: 999px;
    background: var(--green);
    transform: translateY(-50%);
    opacity: .45;
    animation: caretPulse 1s steps(2, start) infinite;
    pointer-events: none;
}

.search-field:focus-within::after,
.search-field.has-value::after {
    display: none;
}

.field input::placeholder {
    color: #7c8a84;
    opacity: 1;
    transition: opacity 160ms ease;
}

.search-field:focus-within input::placeholder {
    opacity: 0;
}

@keyframes caretPulse {
    50% {
        opacity: 0;
    }
}

.primary-button,
.secondary-button,
.danger-button,
.btn {
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line);
}

.primary-button,
.btn-primary {
    border-color: var(--green-dark);
    color: white;
    background: var(--green);
}

.primary-button:hover,
.btn-primary:hover {
    background: var(--green-dark);
}

.secondary-button,
.btn {
    color: var(--ink);
    background: var(--paper);
}

.secondary-button:hover,
.btn:hover {
    border-color: #bfe2d1;
    background: #fbfdfb;
}

.danger-button {
    color: #8f2f28;
    border-color: #e5aaa4;
    background: var(--coral-soft);
}

.danger-button:hover {
    background: #f9d9d5;
}

.compact {
    min-height: 40px;
    padding: 0 12px;
}

.filter-row,
.actions,
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.actions form,
.card-actions form {
    margin: 0;
}

.filter-row {
    max-width: 1380px;
    margin: 12px auto 0;
}

.chip {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--paper);
}

.country-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    max-width: 1380px;
    margin: 14px auto 0;
    padding: 14px 16px;
    border: 1px solid #acd9c3;
    border-left: 4px solid var(--green);
    border-radius: 8px;
    background: linear-gradient(90deg, #f1faf5, #ffffff);
    box-shadow: 0 14px 32px rgba(23, 107, 77, 0.08);
}

.country-card img {
    width: 54px;
    height: 38px;
    border: 1px solid rgba(23, 33, 28, 0.14);
    border-radius: 6px;
    object-fit: cover;
    background: white;
}

.country-card strong {
    display: block;
    margin-bottom: 3px;
    color: var(--green-dark);
    font-size: clamp(18px, 2vw, 23px);
    line-height: 1.15;
}

.country-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.post-country-card {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0 0 16px;
    box-shadow: none;
}

.country-avatar,
.flag-fallback {
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: white;
    background: #243c35;
    font-weight: 900;
}

.country-card [hidden],
.country-avatar[hidden],
.flag-fallback[hidden],
[data-country-flag][hidden] {
    display: none !important;
}

.country-avatar {
    width: 54px;
    height: 38px;
}

.flag-fallback {
    width: 24px;
    height: 18px;
    font-size: 9px;
}

.app-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 390px;
    gap: 18px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.side-panel,
.detail-panel,
.panel,
.card,
.form-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.side-panel,
.detail-panel,
.panel,
.form-panel {
    padding: 18px;
}

.side-panel,
.detail-panel {
    align-self: start;
    position: sticky;
    top: 92px;
}

.side-panel,
.panel {
    box-shadow: none;
}

.section-label {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.panel-note,
.small-note,
.card-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.panel-note {
    margin-bottom: 12px;
    font-size: 13px;
}

.country-list {
    display: grid;
    gap: 8px;
}

.country-button,
.country-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    text-align: left;
}

.country-link {
    display: flex;
    justify-content: space-between;
}

.country-button:hover,
.country-button.active,
.country-link:hover,
.country-link.active {
    border-color: #cfe5d9;
    color: var(--green-dark);
    background: var(--mint);
}

.country-button img {
    width: 24px;
    height: 18px;
    border: 1px solid rgba(23, 33, 28, 0.12);
    border-radius: 3px;
    object-fit: cover;
}

.country-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.country-button b {
    color: var(--muted);
    font-size: 12px;
}

.category-menu {
    display: grid;
    gap: 8px;
}

.category-menu a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--paper);
}

.category-menu a:hover,
.category-menu a.active {
    border-color: #bfe2d1;
    color: var(--green-dark);
    background: var(--mint);
}

.category-menu a.active {
    border-color: var(--green-dark);
    color: white;
    background: var(--green);
    box-shadow: 0 14px 28px rgba(23, 107, 77, .16);
}

.category-menu-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: var(--green-dark);
    background: var(--wash);
}

.category-menu a.active .category-menu-icon {
    color: white;
    background: rgba(255, 255, 255, .16);
}

.category-menu-text {
    min-width: 0;
}

.category-menu-text strong,
.category-menu-text small {
    display: block;
}

.category-menu-text strong {
    line-height: 1.16;
}

.category-menu-text small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.category-menu a.active .category-menu-text small {
    color: rgba(255, 255, 255, .82);
}

.category-menu b {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--mint);
    font-size: 12px;
}

.category-menu a.active b {
    color: var(--green-dark);
    background: white;
}

.side-panel-actions {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.all-country-picker {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.results-panel,
.results-list,
.results {
    display: grid;
    gap: 12px;
    align-content: start;
}

.results-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
}

.results-headline {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #cce8da;
    border-left: 4px solid var(--green);
    border-radius: 8px;
    color: var(--green-dark);
    background: var(--paper);
    box-shadow: 0 14px 32px rgba(23, 107, 77, 0.08);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.15;
}

.results-headline strong {
    font-weight: 950;
}

.results-headline.is-changing {
    animation: resultIn 420ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes resultIn {
    from {
        opacity: .52;
        transform: translateY(8px);
    }

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

.opportunity-card,
.card {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.opportunity-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.opportunity-card:hover,
.opportunity-card.active,
.card:hover {
    border-color: #a9d9c1;
    box-shadow: 0 16px 36px rgba(23, 107, 77, 0.1);
}

.card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.card-top h2,
.detail-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.22;
}

.org {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
}

.icon-button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
}

.icon-button:hover {
    color: var(--green-dark);
    border-color: #bfe2d1;
    background: var(--mint);
}

.hs-number-inline,
.hs-number-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hs-number-inline {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hs-number-inline > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.hs-number-display {
    width: 100%;
}

.hs-number-display strong {
    flex: 1;
    min-width: 0;
}

.copy-number-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid #bfe2d1;
    border-radius: 8px;
    color: var(--green-dark);
    background: white;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.copy-number-button:hover {
    transform: translateY(-1px);
    border-color: #91cdb1;
    background: var(--mint);
}

.copy-number-button.copied {
    color: white;
    border-color: var(--green-dark);
    background: var(--green);
    animation: copyPop 220ms ease;
}

[data-copy-value].copied {
    color: white;
    border-color: var(--green-dark);
    background: var(--green);
    animation: copyPop 220ms ease;
}

.copy-number-button [data-lucide] {
    width: 16px;
    height: 16px;
}

.copy-number-button.plate-copy {
    flex: 0 0 auto;
    min-height: 34px;
    width: 34px;
    padding: 0;
    border-radius: 999px;
}

.compact-identity .copy-number-button.plate-copy {
    min-height: 30px;
    width: 30px;
}

.copy-number-button.plate-copy.copied {
    width: auto;
    padding: 0 8px;
}

.copy-number-button.plate-copy span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.copy-number-button.plate-copy.copied span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

@keyframes copyPop {
    50% {
        transform: scale(1.04);
    }
}

.meta,
.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.meta span,
.meta-pill,
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    color: #30433b;
    background: #f1f5f3;
    font-size: 13px;
    font-weight: 800;
}

.meta-pill.money {
    color: #6e4b00;
    background: var(--amber-soft);
}

.meta-pill.blue {
    color: #174f79;
    background: var(--blue-soft);
}

.view-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(9, 139, 87, 0.18);
    border-radius: 999px;
    color: #075f46;
    background: linear-gradient(135deg, #effaf4, #ffffff);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(13, 93, 67, 0.06);
}

.view-metric-pill [data-lucide] {
    width: 15px;
    height: 15px;
}

.shop-view-pill {
    min-height: 24px;
    padding-inline: 8px;
    font-size: 11px;
}

.view-insight-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(9, 139, 87, 0.18);
    border-radius: 8px;
    background: linear-gradient(135deg, #f0fbf5, #ffffff);
    box-shadow: 0 12px 28px rgba(13, 93, 67, 0.08);
}

.view-insight-card > [data-lucide] {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 8px;
    color: white;
    background: #079858;
}

.view-insight-card strong,
.view-insight-card span {
    display: block;
}

.view-insight-card strong {
    color: var(--ink);
    font-weight: 950;
}

.view-insight-card span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.compact-view-insight {
    margin-top: 12px;
}

.status {
    color: var(--green-dark);
    background: var(--mint);
}

.detail-panel {
    display: grid;
    gap: 14px;
}

.detail-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.detail-logo {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    color: white;
    background: #243c35;
    font-weight: 900;
}

.credit-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #f0d287;
    border-radius: 8px;
    background: var(--amber-soft);
}

.credit-box div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 800;
}

.meter {
    height: 9px;
    border-radius: 999px;
    background: rgba(111, 77, 12, .16);
    overflow: hidden;
}

.meter span {
    display: block;
    height: 100%;
    background: var(--amber);
}

.layout,
.two-column,
.admin-layout,
.account-grid,
.document-layout,
.pricing-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.two-column {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.admin-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.account-grid {
    grid-template-columns: 340px minmax(0, 1fr);
}

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

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

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

.countries-page {
    display: grid;
    gap: 18px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.country-title-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.country-title-row img,
.country-tile img {
    border: 1px solid rgba(23, 33, 28, 0.14);
    border-radius: 6px;
    object-fit: cover;
    background: white;
}

.country-title-row img {
    width: 72px;
    height: 50px;
}

.country-grid,
.all-country-grid,
.category-summary-grid {
    display: grid;
    gap: 10px;
}

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

.country-tile {
    display: grid;
    gap: 8px;
    min-height: 142px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.country-tile:hover,
.all-country-grid a:hover {
    border-color: #bfe2d1;
    background: var(--mint);
}

.country-tile img {
    width: 48px;
    height: 34px;
}

.country-tile strong {
    color: var(--green-dark);
    line-height: 1.2;
}

.country-tile span,
.all-country-grid b {
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

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

.all-country-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.all-country-grid span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

.profile-hero {
    background:
        linear-gradient(135deg, rgba(231, 245, 238, .82), rgba(255, 255, 255, .92) 48%, rgba(231, 239, 251, .7)),
        var(--paper);
}

.profile-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1380px;
    margin: 20px auto 0;
}

.profile-hero-stats span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(23, 107, 77, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 26px rgba(23, 33, 28, .06);
    color: var(--muted);
    font-weight: 850;
}

.profile-hero-stats strong {
    color: var(--green-dark);
}

.profiles-page {
    display: grid;
    gap: 18px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.profile-type-strip {
    display: flex;
    gap: 9px;
    min-width: 0;
    padding: 4px 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-type-strip::-webkit-scrollbar {
    display: none;
}

.profile-type-strip a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    font-weight: 900;
    white-space: nowrap;
}

.profile-type-strip a:hover,
.profile-type-strip a.active {
    color: var(--green-dark);
    border-color: #bfe2d1;
    background: var(--mint);
}

.profile-type-strip a.active {
    color: white;
    border-color: var(--green-dark);
    background: var(--green);
    box-shadow: 0 14px 26px rgba(23, 107, 77, .16);
}

.profile-type-strip b {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--mint);
    font-size: 12px;
}

.profile-type-strip a.active b {
    background: white;
}

.profile-directory-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) 340px;
    gap: 18px;
}

.profile-filter-panel,
.profile-feature-panel {
    align-self: start;
    position: sticky;
    top: 92px;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.profile-filter-form {
    display: grid;
    gap: 10px;
}

.profile-note-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid #cce8da;
    border-radius: 8px;
    background: #f1faf5;
}

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

.profile-note-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.profile-results {
    display: grid;
    gap: 12px;
    align-content: start;
}

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

.profile-card {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 316px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 12px 28px rgba(23, 33, 28, .05);
    overflow: hidden;
    animation: profileCardIn 520ms cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--card-index, 0) * 70ms);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.profile-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--green), var(--amber), #4b7bbf);
}

.profile-card:hover {
    border-color: #a9d9c1;
    box-shadow: 0 20px 42px rgba(23, 107, 77, .12);
    transform: translateY(-4px);
}

.profile-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.profile-logo,
.profile-feature-logo,
.profile-detail-logo {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: white;
    background: linear-gradient(135deg, #17342c, var(--green));
    box-shadow: 0 16px 34px rgba(23, 107, 77, .18);
    overflow: hidden;
}

.profile-logo {
    width: 58px;
    height: 58px;
}

.profile-logo i,
.profile-feature-logo i,
.profile-detail-logo i {
    position: absolute;
    right: -4px;
    bottom: -5px;
    width: 38px;
    height: 38px;
    opacity: .18;
}

.profile-logo span,
.profile-feature-logo span,
.profile-detail-logo span {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 950;
}

.profile-photo,
.profile-photo-frame {
    display: block;
    border: 1px solid rgba(23, 33, 28, .12);
    border-radius: 8px;
    background: var(--wash);
    box-shadow: 0 16px 34px rgba(23, 33, 28, .1);
    overflow: hidden;
}

.profile-photo {
    object-fit: cover;
}

.profile-photo-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.profile-photo-card {
    width: 58px;
    height: 58px;
}

.profile-photo-feature {
    width: 94px;
    height: 94px;
}

.profile-photo-detail {
    width: 104px;
    height: 104px;
}

.profile-photo-card,
.profile-photo-feature,
.profile-photo-detail {
    border-radius: 999px;
}

.profile-photo-editable {
    position: relative;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.profile-photo-editable img {
    transition: filter 180ms ease;
}

.profile-photo-edit-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 8px;
    color: white;
    background: rgba(15, 25, 22, .62);
    opacity: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 850;
    transition: opacity 160ms ease;
}

.profile-photo-edit-overlay span {
    line-height: 1.1;
}

.profile-photo-edit-overlay [data-lucide] {
    width: 16px;
    height: 16px;
}

.profile-photo-editable:hover .profile-photo-edit-overlay,
.profile-photo-editable:focus-visible .profile-photo-edit-overlay {
    opacity: 1;
}

.profile-photo-editable:hover img,
.profile-photo-editable:focus-visible img {
    filter: brightness(.78);
}

.profile-photo-gallery {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.profile-type {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-card h2 {
    margin: 0 0 4px;
    font-size: 20px;
    line-height: 1.15;
}

.profile-card-header p,
.profile-tagline {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.profile-tagline {
    font-weight: 650;
}

.profile-focus-list,
.profile-stat-row,
.profile-focus-large,
.profile-fact-list,
.profile-link-list,
.profile-publication-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-focus-list span,
.profile-stat-row span,
.profile-focus-large span,
.profile-fact-list span,
.profile-link-list a,
.profile-link-list span,
.profile-publication-list span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 850;
}

.profile-focus-list span,
.profile-focus-large span {
    color: #174f79;
    background: var(--blue-soft);
}

.profile-stat-row span,
.profile-fact-list span {
    color: #6e4b00;
    background: var(--amber-soft);
}

.profile-link-list a,
.profile-link-list span,
.profile-publication-list span {
    color: var(--green-dark);
    background: var(--mint);
}

.profile-link-list a:hover {
    color: white;
    background: var(--green);
}

.profile-publication-list span {
    min-height: 38px;
    border-radius: 8px;
}

.profile-empty-card {
    min-height: 220px;
}

.profile-feature-logo {
    width: 78px;
    height: 78px;
}

.profile-feature-logo span {
    font-size: 23px;
}

.profile-feature-panel .lede {
    font-size: 15px;
}

.profile-opportunity-list,
.profile-opportunity-cards {
    display: grid;
    gap: 10px;
}

.profile-opportunity-list a,
.profile-opportunity-card {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.profile-opportunity-list a:hover,
.profile-opportunity-card:hover {
    border-color: #bfe2d1;
    background: var(--mint);
}

.profile-opportunity-list span,
.profile-opportunity-card span,
.profile-opportunity-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-opportunity-list strong,
.profile-opportunity-card strong {
    color: var(--ink);
    line-height: 1.3;
}

.profile-detail-hero {
    background:
        linear-gradient(135deg, #f1faf5 0%, #ffffff 52%, var(--amber-soft) 100%),
        var(--paper);
}

.profile-detail-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    max-width: 1380px;
    margin: 0 auto;
}

.profile-detail-logo {
    width: 96px;
    height: 96px;
}

.profile-detail-logo span {
    font-size: 28px;
}

.profile-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.profile-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(23, 33, 28, .09);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #30433b;
    font-size: 13px;
    font-weight: 850;
}

.profile-detail-actions {
    display: grid;
    gap: 8px;
    min-width: 190px;
}

.profile-action-note {
    max-width: 240px;
    margin: 0;
    text-align: center;
}

.profile-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.profile-detail-main,
.profile-detail-side {
    display: grid;
    gap: 18px;
    align-content: start;
}

.profile-detail-side {
    position: sticky;
    top: 92px;
}

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

.profile-opportunity-card {
    min-height: 142px;
    padding-right: 44px;
}

.profile-opportunity-card i {
    position: absolute;
    right: 12px;
    top: 12px;
    color: var(--green-dark);
}

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

.profile-score strong {
    color: var(--green-dark);
    font-size: 22px;
}

.profile-score span {
    color: var(--muted);
    font-weight: 750;
}

.profile-about-copy {
    margin-top: 12px;
    white-space: pre-line;
}

.profile-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.profile-gallery > img,
.profile-gallery .profile-photo-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.profile-gallery > img {
    object-fit: cover;
}

.profile-cv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.profile-cv-grid div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.profile-cv-grid h3 {
    color: var(--green-dark);
}

.profile-cv-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    white-space: pre-line;
}

.profile-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.profile-create-layout .form-panel {
    display: grid;
    gap: 14px;
}

.profile-easy-start {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.profile-easy-start > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    border: 1px solid #dcebe4;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f7fbf9);
}

.profile-easy-start span,
.profile-update-checklist > a > i,
.profile-contact-example > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: var(--green);
    background: #eaf8f1;
}

.profile-easy-start strong,
.profile-easy-start small {
    display: block;
    min-width: 0;
}

.profile-easy-start strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}

.profile-easy-start small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
}

.profile-info-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-info-map a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d9e9e1;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f7fbf9);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(18, 58, 42, .05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.profile-info-map a:hover {
    border-color: rgba(23, 107, 77, .34);
    box-shadow: 0 16px 32px rgba(18, 58, 42, .09);
    transform: translateY(-2px);
}

.profile-info-map i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 8px;
    background: #eaf8f1;
    color: var(--green);
}

.profile-info-map strong,
.profile-info-map small {
    display: block;
}

.profile-info-map strong {
    font-size: 14px;
}

.profile-info-map small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.profile-easy-save-strip {
    position: sticky;
    top: 86px;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #d6e7df;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 42px rgba(18, 58, 42, .1);
    backdrop-filter: blur(16px);
}

.profile-easy-save-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 850;
}

.profile-easy-save-strip span [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--green);
}

.profile-entry-box {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d8e9e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(18, 58, 42, .06);
}

.profile-entry-box:target {
    border-color: rgba(23, 107, 77, .48);
    box-shadow: 0 0 0 4px rgba(23, 107, 77, .08), 0 18px 42px rgba(18, 58, 42, .1);
}

.profile-box-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.profile-box-head > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e9f7f0, #ffffff);
    color: var(--green);
    box-shadow: inset 0 0 0 1px #cce8da;
}

.profile-box-head h2 {
    margin: 2px 0 2px;
    font-size: 20px;
    letter-spacing: 0;
}

.profile-box-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.profile-entry-box .profile-social-box {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.profile-field-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-field-tips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #d8eadf;
    border-radius: 999px;
    color: #35564a;
    background: #f5fbf8;
    font-size: 13px;
    font-weight: 800;
}

.profile-field-tips [data-lucide] {
    width: 15px;
    height: 15px;
    color: var(--green);
}

.profile-contact-example {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d7e9e0;
    border-radius: 8px;
    background: #f7fcfa;
}

.profile-contact-example strong {
    display: block;
    color: var(--ink);
}

.profile-contact-example p {
    margin: 2px 0 0;
    color: var(--muted);
    line-height: 1.4;
}

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

.profile-section-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #d8e9e1;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fbfa);
}

.profile-section-box span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 900;
}

.profile-section-box span [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--green);
}

.profile-section-box textarea.field {
    min-height: 126px;
    resize: vertical;
}

.profile-section-box-wide {
    grid-column: 1 / -1;
}

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

.profile-existing-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-existing-photos label {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.profile-existing-photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    object-fit: cover;
    background: white;
}

.profile-existing-photos span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.profile-photo-adjuster {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.profile-photo-adjuster .section-title-row {
    margin-bottom: 0;
}

.profile-photo-adjuster h2 {
    margin: 2px 0 0;
    font-size: 19px;
}

.profile-photo-cropper {
    position: relative;
    display: grid;
    place-items: center;
    width: min(360px, 100%);
    aspect-ratio: 1;
    border: 1px solid #b8cbc2;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(23, 33, 28, .04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 33, 28, .04) 1px, transparent 1px),
        white;
    background-size: 18px 18px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.profile-photo-cropper:focus {
    outline: 3px solid rgba(23, 107, 77, .2);
    outline-offset: 3px;
}

.profile-photo-cropper.is-dragging {
    cursor: grabbing;
}

.profile-photo-cropper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    user-select: none;
    pointer-events: none;
}

.profile-photo-placeholder {
    display: grid;
    place-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 850;
}

.profile-biography-box,
.profile-social-box {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.profile-biography-box .section-title-row {
    margin-bottom: 0;
}

.profile-biography-box h2 {
    margin: 2px 0 0;
    font-size: 19px;
}

.profile-photo-placeholder i {
    width: 42px;
    height: 42px;
    color: var(--green);
}

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

.profile-photo-controls label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

.profile-photo-controls input[type="range"] {
    width: 100%;
    accent-color: var(--green);
}

.profile-photo-remove {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.profile-upload-box {
    display: grid;
    gap: 8px;
    min-height: 150px;
    padding: 14px;
    border: 1px dashed #a9d9c1;
    border-radius: 8px;
    background: #f8fcfa;
    cursor: pointer;
}

.profile-upload-box:hover {
    border-color: var(--green);
    background: var(--mint);
}

.profile-upload-box i {
    color: var(--green);
}

.profile-upload-box span {
    color: var(--muted);
    line-height: 1.45;
}

.profile-upload-box input {
    width: 100%;
    color: var(--muted);
    font-size: 13px;
}

.profile-create-side {
    display: grid;
    gap: 18px;
    align-content: start;
    position: sticky;
    top: 92px;
}

.profile-update-checklist {
    display: grid;
    gap: 8px;
}

.profile-update-checklist a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #dcebe4;
    border-radius: 8px;
    color: var(--ink);
    background: #ffffff;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.profile-update-checklist a:hover,
.profile-update-checklist a:focus-visible {
    border-color: rgba(23, 107, 77, .34);
    background: #f5fbf8;
    transform: translateY(-1px);
}

.profile-update-checklist strong,
.profile-update-checklist small {
    display: block;
}

.profile-update-checklist small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.profile-side-save-card {
    border-color: #cde8da;
    background: linear-gradient(180deg, #ffffff, #f2faf6);
}

.profile-side-save-card .primary-button {
    width: 100%;
}

.profile-form-helper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid #cce8da;
    border-radius: 8px;
    background: #f1faf5;
}

.profile-form-helper i {
    color: var(--green);
}

.profile-form-helper p {
    margin: 4px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.related-profile-section {
    padding-top: 0;
}

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

@keyframes profileCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }

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

.country-detail-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 330px;
    gap: 18px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.country-filter-form {
    display: grid;
    gap: 10px;
}

.country-filters {
    margin: 0 0 12px;
}

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

.category-summary-grid .mini-card a {
    color: var(--green-dark);
    font-weight: 800;
    line-height: 1.35;
}

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

.dashboard-stack,
.account-sidebar {
    display: grid;
    gap: 16px;
    align-content: start;
}

.profile-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.profile-row h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.account-profile-avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(23, 33, 28, .12);
    border-radius: 999px;
    color: white;
    background: var(--green);
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(23, 107, 77, .14);
    text-decoration: none;
}

.account-profile-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.account-profile-avatar > span {
    font-size: 14px;
    font-weight: 950;
}

.account-profile-avatar > b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 6px;
    color: white;
    background: rgba(15, 25, 22, .64);
    opacity: 0;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    transition: opacity 160ms ease;
}

.account-profile-avatar > b [data-lucide] {
    width: 14px;
    height: 14px;
}

.account-profile-avatar > b span {
    line-height: 1.1;
}

.account-profile-avatar:hover > b,
.account-profile-avatar:focus-visible > b {
    opacity: 1;
}

.avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 8px;
    color: white;
    background: var(--green);
    font-weight: 900;
}

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

.section-title-row h2 {
    margin: 0;
}

.admin-card p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.5;
}

.admin-social-title {
    margin-top: 22px;
}

.mini-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.linked-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.linked-box .section-label,
.linked-box .small-note {
    flex-basis: 100%;
}

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

.settings-grid form {
    min-width: 0;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.stat-card {
    display: grid;
    gap: 4px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.stat-card:hover {
    border-color: #bfe2d1;
    background: var(--mint);
}

.stat-card strong {
    color: var(--green-dark);
    font-size: 28px;
    line-height: 1;
}

.stat-card span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.stat-card.urgent {
    border-color: #f0d287;
    background: var(--amber-soft);
}

.social-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
}

.register-photo-picker {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px dashed rgba(23, 107, 77, 0.34);
    border-radius: 14px;
    background:
        linear-gradient(135deg, #ffffff, #f2fbf7),
        #ffffff;
    color: #173d32;
    cursor: pointer;
}

.register-photo-picker > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 900;
}

.register-photo-picker small {
    color: #60756d;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.register-photo-picker input {
    width: 100%;
    color: #42554d;
    font-size: 13px;
}

.language-register-box {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(23, 107, 77, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, #fbfffd, #f2faf6),
        #ffffff;
}

.language-register-box > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-dark);
    font-size: 14px;
    font-weight: 900;
}

.language-register-box > span [data-lucide] {
    width: 18px;
    height: 18px;
}

.language-register-box small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.register-hero-shell {
    padding: 26px clamp(14px, 4vw, 44px) 58px;
    background:
        radial-gradient(circle at 10% 10%, rgba(23, 107, 77, .1), transparent 30%),
        linear-gradient(180deg, #f8fcfa, #ffffff 42%, #f4faf7);
}

.register-hero-card {
    display: grid;
    grid-template-columns: minmax(290px, 430px) minmax(0, 1fr);
    gap: 18px;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.register-story-panel,
.register-form-panel {
    border: 1px solid #dcebe4;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .08);
}

.register-story-panel {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 22px;
    align-content: start;
    padding: 24px;
    min-height: 620px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(235, 250, 242, .95), rgba(255, 255, 255, .94) 48%, rgba(244, 250, 255, .88)),
        #ffffff;
}

.register-story-panel::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(23, 107, 77, .12);
    border-radius: 50%;
    background: rgba(23, 107, 77, .06);
}

.register-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.register-brand-mark > span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #16c76b, #0f8f5f);
    color: #ffffff;
    font-size: 26px;
    font-weight: 950;
    box-shadow: 0 18px 36px rgba(15, 143, 95, .22);
}

.register-brand-mark strong,
.register-brand-mark small {
    display: block;
}

.register-brand-mark strong {
    color: #0f172a;
    font-size: 21px;
    font-weight: 950;
}

.register-brand-mark small {
    color: var(--green);
    font-size: 13px;
    font-weight: 850;
}

.register-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.register-benefit-grid span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #d8e9e1;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    color: #173d32;
    font-weight: 900;
}

.register-benefit-grid [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--green);
}

.register-phone-preview {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 22px;
    border: 1px solid rgba(23, 107, 77, .18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(243, 251, 247, .94)),
        #ffffff;
    text-align: center;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

.register-phone-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #60756d;
    font-size: 12px;
    font-weight: 850;
}

.register-phone-top span {
    width: 42px;
    height: 7px;
    border-radius: 999px;
    background: #d8e9e1;
}

.register-phone-top [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--green);
}

.register-phone-avatar,
.register-photo-cropper {
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(23, 33, 28, .04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 33, 28, .04) 1px, transparent 1px),
        #f8fcfa;
    background-size: 18px 18px;
}

.register-phone-avatar {
    width: 104px;
    height: 104px;
    border: 4px solid #ffffff;
    border-radius: 28px;
    outline: 1px solid rgba(23, 107, 77, .22);
    box-shadow: 0 18px 36px rgba(15, 95, 70, .16);
}

.register-phone-avatar span,
.register-photo-placeholder span {
    color: var(--green);
    font-size: 34px;
    font-weight: 950;
}

.register-phone-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.register-phone-preview > strong {
    color: #10231e;
    font-size: 22px;
    font-weight: 950;
}

.register-phone-preview > small {
    max-width: 280px;
    color: #60756d;
    font-weight: 650;
    line-height: 1.45;
}

.register-form-panel {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 3vw, 28px);
}

.register-form-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.register-form-head h2 {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
}

.register-social-grid .secondary-button {
    justify-content: center;
}

.register-photo-studio,
.register-field-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d8e9e1;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #ffffff, #f8fcfa),
        #ffffff;
    box-shadow: 0 14px 34px rgba(18, 58, 42, .05);
}

.register-photo-copy {
    display: grid;
    gap: 3px;
}

.register-photo-copy span,
.register-field-card > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-dark);
    font-size: 14px;
    font-weight: 950;
}

.register-photo-copy [data-lucide],
.register-field-card > span [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--green);
}

.register-photo-copy strong {
    color: #10231e;
    font-size: 20px;
    font-weight: 950;
}

.register-photo-copy small,
.register-photo-note {
    color: #60756d;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.register-photo-workspace {
    display: grid;
    grid-template-columns: minmax(168px, 220px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.register-photo-cropper {
    width: min(220px, 100%);
    aspect-ratio: 1;
    border: 1px solid #bfd9ce;
    border-radius: 8px;
    cursor: grab;
    touch-action: none;
}

.register-photo-cropper:focus {
    outline: 3px solid rgba(23, 107, 77, .16);
    outline-offset: 3px;
}

.register-photo-cropper.is-dragging {
    cursor: grabbing;
}

.register-photo-cropper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    user-select: none;
    pointer-events: none;
}

.register-photo-placeholder {
    display: grid;
    place-items: center;
    gap: 4px;
}

.register-photo-placeholder [data-lucide] {
    width: 32px;
    height: 32px;
    color: var(--green);
}

.register-photo-controls {
    display: grid;
    gap: 10px;
}

.register-photo-controls .register-photo-picker {
    padding: 12px;
}

.register-photo-controls .register-photo-picker > span {
    font-size: 14px;
}

.register-zoom-control {
    display: grid;
    gap: 7px;
    color: #60756d;
    font-size: 12px;
    font-weight: 900;
}

.register-zoom-control input {
    width: 100%;
    accent-color: var(--green);
}

.register-photo-note {
    margin: 0;
}

.register-actions {
    padding-top: 4px;
}

.register-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.split-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.account-grid .panel.account-sidebar {
    border-radius: 18px;
    background:
        linear-gradient(180deg, #ffffff, #f7fcfa),
        #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.account-sidebar .linked-box,
.account-sidebar .credit-box {
    border-radius: 14px;
}

.account-sidebar .primary-button,
.account-sidebar .secondary-button {
    justify-content: center;
}

.account-quick-panel {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid rgba(207, 234, 220, 0.95);
    border-radius: 20px;
    background:
        linear-gradient(135deg, #ffffff, #f1fbf7),
        #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.account-quick-panel h2 {
    margin: 0 0 6px;
    font-size: 24px;
}

.account-quick-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.account-quick-actions a {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 88px;
    padding: 12px 8px;
    border: 1px solid #dcebe4;
    border-radius: 16px;
    background: #ffffff;
    color: #173d32;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
    transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease, color 170ms ease;
}

.account-quick-actions a:hover,
.account-quick-actions a:focus-visible {
    border-color: rgba(23, 107, 77, 0.34);
    color: var(--green);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(23, 107, 77, 0.11);
    outline: none;
}

.account-quick-actions [data-lucide] {
    width: 23px;
    height: 23px;
}

@media (max-width: 760px) {
    .split-fields,
    .account-quick-actions {
        grid-template-columns: 1fr;
    }

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

.price-card {
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.price-card.featured {
    border-color: #9fd3b8;
    box-shadow: 0 22px 56px rgba(23, 107, 77, .15);
}

.price-card strong {
    font-size: 34px;
    font-weight: 950;
}

.payment-methods-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 42px) 42px;
}

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

.payment-method-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

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

.payment-method-card strong {
    color: var(--green-dark);
    font-size: 18px;
}

.payment-method-card span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cv-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.cv-builder-hero h1 {
    max-width: 780px;
}

.cv-template-showcase {
    max-width: 1380px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 8px;
}

.cv-template-showcase > .section-title-row {
    margin: 0 0 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.cv-gallery-scroll {
    display: flex;
    gap: 24px;
    margin: 0 -4px;
    padding: 4px 4px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    perspective: 1100px;
}

.cv-template-grid,
.cv-package-grid {
    display: grid;
    gap: 12px;
}

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

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

.cv-template-card,
.compact-price {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.cv-template-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.cv-gallery-scroll .cv-template-card {
    flex: 0 0 clamp(238px, 24vw, 332px);
    scroll-snap-align: start;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
    box-shadow: 0 18px 42px rgba(23, 33, 28, .12);
    transform: translateY(0) rotateX(0);
    animation: templateCardEnter 560ms cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--card-index, 0) * 70ms);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.cv-template-card:hover,
.cv-template-card:has(input:checked),
.cv-template-card.is-selected,
.compact-price:hover,
.compact-price:has(input:checked) {
    border-color: #9fd3b8;
    box-shadow: 0 16px 34px rgba(23, 107, 77, .1);
}

.cv-gallery-scroll .cv-template-card:hover,
.cv-gallery-scroll .cv-template-card.is-selected,
.cv-gallery-scroll .cv-template-card:has(input:checked) {
    transform: translateY(-8px) rotateX(1.8deg);
    box-shadow: 0 26px 58px rgba(23, 33, 28, .18);
}

.cv-template-card.is-selected::after,
.cv-template-card:has(input:checked)::after {
    content: "Selected";
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    color: white;
    background: var(--green);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .03em;
    box-shadow: 0 8px 18px rgba(23, 107, 77, .24);
}

.cv-template-card input,
.compact-price input {
    position: absolute;
    top: 12px;
    right: 12px;
    accent-color: var(--green);
}

.template-preview {
    display: grid;
    gap: 8px;
    width: 100%;
    min-height: 220px;
    padding: 12px;
    border: 0;
    border-radius: 7px;
    background: #f8faf9;
    overflow: hidden;
    cursor: zoom-in;
    text-align: left;
}

.cv-gallery-scroll .template-preview {
    min-height: 462px;
    padding: 13px;
    background: linear-gradient(180deg, #f4f6f5, #edf2ef);
    box-shadow: inset 0 0 0 1px rgba(23, 33, 28, .04);
}

.cv-template-card.green .template-preview {
    border-top: 5px solid var(--green);
}

.cv-template-card.blue .template-preview {
    border-top: 5px solid #2b6cb0;
}

.cv-template-card.dark .template-preview {
    border-top: 5px solid #243c35;
}

.cv-template-card.amber .template-preview {
    border-top: 5px solid var(--amber);
}

.cv-template-card.coral .template-preview {
    border-top: 5px solid #d76557;
}

.cv-template-card.navy .template-preview {
    border-top: 5px solid #1d3154;
}

.cv-template-card.teal .template-preview {
    border-top: 5px solid #047b75;
}

.cv-template-card.steel .template-preview {
    border-top: 5px solid #5a6f82;
}

.cv-template-card.rose .template-preview {
    border-top: 5px solid #be4b66;
}

.cv-template-card.plum .template-preview {
    border-top: 5px solid #77436f;
}

.cv-template-card.forest .template-preview {
    border-top: 5px solid #315f45;
}

.template-line,
.template-row span,
.template-block {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: #dfe7e3;
}

.template-line.strong {
    width: 76%;
    height: 12px;
    background: #20352d;
}

.template-line.short {
    width: 58%;
}

.template-row {
    display: grid;
    grid-template-columns: .8fr 1fr;
    gap: 8px;
}

.template-block {
    height: 54px;
    border-radius: 6px;
    background: linear-gradient(180deg, #e8efeb, #f3f6f4);
}

.cv-template-card strong,
.template-card-footer strong {
    color: var(--green-dark);
}

.template-card-title {
    display: grid;
    gap: 2px;
    cursor: pointer;
}

.template-card-title span {
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.cv-template-card > span:last-child,
.template-card-footer > span:not(.template-actions) {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.template-card-footer {
    display: grid;
    gap: 5px;
}

.template-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.template-actions .primary-button,
.template-actions .secondary-button {
    min-height: 36px;
    padding: 0 9px;
    font-size: 12px;
}

.sample-preview {
    place-items: stretch;
}

.sample-cv {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 100%;
    aspect-ratio: .707 / 1;
    padding: 16px;
    border: 1px solid #dce7e1;
    border-radius: 4px;
    color: var(--ink);
    background: white;
    box-shadow: 0 14px 28px rgba(23, 33, 28, .08);
    font-family: var(--font-cv);
    overflow: hidden;
    transform-origin: center;
}

.sample-cv-header,
.sample-cv-identity,
.sample-cv-contact-list,
.sample-cv-section,
.sample-cv-bars,
.sample-cv-dots,
.sample-cv-timeline,
.sample-cv-job,
.sample-cv-main,
.sample-cv-sidebar,
.sample-cv-pill-list,
.sample-cv-mini-grid,
.sample-cv-bullets,
.sample-cv-keyword-row,
.sample-cv-scorecard {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sample-cv-header {
    gap: 10px;
}

.sample-cv-identity {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.sample-cv-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: white;
    background: var(--green);
    font-size: 13px;
    font-weight: 950;
}

.sample-cv-body {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(82px, .72fr);
    gap: 13px;
    min-width: 0;
}

.sample-cv-name,
.sample-cv-role,
.sample-cv-contact-list,
.sample-cv-contact-list span,
.sample-cv-section-title,
.sample-cv-copy,
.sample-cv-highlight,
.sample-cv-job strong,
.sample-cv-job small,
.sample-cv-job span,
.sample-cv-pill-list span,
.sample-cv-mini-grid span,
.sample-cv-bullets span {
    display: block;
    overflow-wrap: anywhere;
}

.sample-cv-name {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.1;
}

.sample-cv-role {
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 850;
}

.sample-cv-contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sample-cv-contact-list span {
    padding: 4px 6px;
    border-radius: 999px;
    color: #405149;
    background: #eff5f2;
    font-size: 8.5px;
    font-weight: 850;
    line-height: 1.1;
}

.sample-cv-section-title {
    padding-top: 6px;
    border-top: 1px solid #e8efeb;
    color: var(--green-dark);
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sample-cv-copy {
    color: #405149;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.36;
}

.sample-cv-highlight {
    margin-top: 4px;
    padding: 8px;
    border-left: 3px solid currentColor;
    border-radius: 6px;
    color: var(--green-dark);
    background: #f0f8f4;
    font-size: 9.2px;
    font-weight: 800;
    line-height: 1.32;
}

.sample-cv-keyword-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.sample-cv-keyword-row span {
    display: block;
    padding: 4px 6px;
    border-radius: 999px;
    color: var(--green-dark);
    background: #eaf5ef;
    font-size: 8.2px;
    font-weight: 900;
    line-height: 1.1;
}

.sample-cv-job {
    position: relative;
    padding-left: 10px;
}

.sample-cv-job::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 99px;
    background: currentColor;
    opacity: .72;
}

.sample-cv-job strong {
    color: var(--ink);
    font-size: 10px;
    line-height: 1.18;
}

.sample-cv-job small {
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 850;
}

.sample-cv-job span {
    color: #405149;
    font-size: 9.3px;
    font-weight: 650;
    line-height: 1.34;
}

.sample-cv-bullets {
    gap: 3px;
    margin-top: 2px;
}

.sample-cv-bullets span {
    position: relative;
    padding-left: 9px;
}

.sample-cv-bullets span::before {
    content: "";
    position: absolute;
    top: .58em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 99px;
    background: currentColor;
    opacity: .55;
}

.sample-cv-bars span,
.sample-cv-dots span {
    display: grid;
    gap: 4px;
}

.sample-cv-bars span {
    position: relative;
}

.sample-cv-bars small,
.sample-cv-dots small {
    color: #405149;
    font-size: 8.5px;
    font-weight: 850;
    line-height: 1.15;
}

.sample-cv-bars b {
    position: relative;
    z-index: 1;
    display: block;
    height: 5px;
    border-radius: 99px;
    background: currentColor;
}

.sample-cv-bars span::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    border-radius: 99px;
    background: #e7eeea;
}

.sample-cv-dots b {
    display: flex;
    gap: 3px;
}

.sample-cv-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: currentColor;
}

.sample-cv-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sample-cv-pill-list span,
.sample-cv-mini-grid span {
    padding: 6px 7px;
    border: 1px solid #dce7e1;
    border-radius: 7px;
    color: #405149;
    background: #fbfdfc;
    font-size: 8.5px;
    font-weight: 850;
    line-height: 1.15;
}

.sample-cv-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.sample-cv-scorecard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.sample-cv-scorecard > span {
    display: grid;
    gap: 1px;
    padding: 8px;
    border: 1px solid #dce7e1;
    border-radius: 7px;
    background: #f7faf8;
}

.sample-cv-scorecard strong,
.sample-cv-scorecard small {
    display: block;
}

.sample-cv-scorecard strong {
    color: var(--green-dark);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
}

.sample-cv-scorecard small {
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.sample-cv-font-serif {
    font-family: var(--font-cv-serif);
}

.sample-cv-font-serif .sample-cv-name,
.sample-cv-font-serif .sample-cv-section-title,
.sample-cv-font-serif .sample-cv-scorecard strong {
    font-family: var(--font-cv-serif);
}

.sample-cv-font-serif .sample-cv-copy,
.sample-cv-font-serif .sample-cv-job span,
.sample-cv-font-serif .sample-cv-bullets span {
    font-weight: 400;
}

.sample-cv-font-display {
    font-family: var(--font-display);
}

.sample-cv-layout-centered .sample-cv-header {
    place-items: center;
    text-align: center;
}

.sample-cv-layout-centered .sample-cv-identity {
    grid-template-columns: 1fr;
    justify-items: center;
}

.sample-cv-layout-centered .sample-cv-contact-list {
    justify-content: center;
}

.sample-cv-layout-editorial {
    gap: 14px;
}

.sample-cv-layout-editorial .sample-cv-body {
    grid-template-columns: minmax(0, 1.08fr) minmax(92px, .92fr);
}

.sample-cv-green {
    border-top: 6px solid var(--green);
}

.sample-cv-green .sample-cv-header {
    margin: -16px -16px 0;
    padding: 16px;
    color: white;
    background: #0f7a86;
}

.sample-cv-green .sample-cv-name,
.sample-cv-green .sample-cv-role {
    color: white;
}

.sample-cv-green .sample-cv-avatar {
    color: #0f7a86;
    background: white;
}

.sample-cv-green .sample-cv-contact-list span {
    color: white;
    background: rgba(255, 255, 255, .16);
}

.sample-cv-blue {
    grid-template-columns: .42fr .58fr;
    gap: 10px;
    border-top: 0;
}

.sample-cv-blue .sample-cv-header {
    grid-row: span 2;
    margin: -16px 0 -16px -16px;
    padding: 16px;
    color: white;
    background: #101620;
}

.sample-cv-blue .sample-cv-body {
    grid-template-columns: 1fr;
}

.sample-cv-blue .sample-cv-name,
.sample-cv-blue .sample-cv-role {
    color: white;
}

.sample-cv-blue .sample-cv-role,
.sample-cv-blue .sample-cv-section-title {
    color: #245c99;
}

.sample-cv-blue .sample-cv-avatar {
    color: #101620;
    background: white;
}

.sample-cv-blue .sample-cv-header .sample-cv-role {
    color: rgba(255, 255, 255, .76);
}

.sample-cv-blue .sample-cv-contact-list span {
    color: rgba(255, 255, 255, .84);
    background: rgba(255, 255, 255, .12);
}

.sample-cv-dark {
    color: white;
    border-color: #243c35;
    background: #243c35;
}

.sample-cv-dark .sample-cv-name,
.sample-cv-dark .sample-cv-role,
.sample-cv-dark .sample-cv-section-title,
.sample-cv-dark .sample-cv-copy,
.sample-cv-dark .sample-cv-highlight,
.sample-cv-dark .sample-cv-job strong,
.sample-cv-dark .sample-cv-job small,
.sample-cv-dark .sample-cv-job span,
.sample-cv-dark .sample-cv-bullets span,
.sample-cv-dark .sample-cv-bars small,
.sample-cv-dark .sample-cv-dots small,
.sample-cv-dark .sample-cv-keyword-row span,
.sample-cv-dark .sample-cv-pill-list span,
.sample-cv-dark .sample-cv-mini-grid span,
.sample-cv-dark .sample-cv-scorecard strong,
.sample-cv-dark .sample-cv-scorecard small {
    color: white;
}

.sample-cv-dark .sample-cv-avatar {
    color: #243c35;
    background: white;
}

.sample-cv-dark .sample-cv-contact-list span,
.sample-cv-dark .sample-cv-highlight,
.sample-cv-dark .sample-cv-keyword-row span,
.sample-cv-dark .sample-cv-pill-list span,
.sample-cv-dark .sample-cv-mini-grid span,
.sample-cv-dark .sample-cv-scorecard > span {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .11);
}

.sample-cv-dark .sample-cv-section-title {
    border-color: rgba(255, 255, 255, .18);
}

.sample-cv-dark .sample-cv-bars span::before {
    background: rgba(255, 255, 255, .16);
}

.sample-cv-amber {
    border-top: 0;
}

.sample-cv-amber .sample-cv-header {
    margin: -16px -16px 0;
    padding: 16px;
    background: #f5c85f;
}

.sample-cv-amber .sample-cv-role,
.sample-cv-amber .sample-cv-section-title {
    color: #7c5600;
}

.sample-cv-amber .sample-cv-avatar {
    background: #7c5600;
}

.sample-cv-coral {
    border-top: 0;
    background: #fff8fb;
}

.sample-cv-coral .sample-cv-header {
    display: grid;
    place-items: center;
    margin-bottom: 4px;
    text-align: center;
}

.sample-cv-coral .sample-cv-role,
.sample-cv-coral .sample-cv-section-title {
    color: #a84135;
}

.sample-cv-coral .sample-cv-avatar {
    background: #a84135;
}

.sample-cv-navy {
    border-top: 6px solid #1d3154;
    background: #fbfcff;
}

.sample-cv-navy .sample-cv-role,
.sample-cv-navy .sample-cv-section-title,
.sample-cv-navy .sample-cv-highlight,
.sample-cv-navy .sample-cv-keyword-row span,
.sample-cv-navy .sample-cv-scorecard strong {
    color: #1d3154;
}

.sample-cv-navy .sample-cv-avatar,
.sample-cv-teal .sample-cv-avatar {
    background: #1d3154;
}

.sample-cv-teal {
    border-top: 0;
}

.sample-cv-teal .sample-cv-header {
    margin: -16px -16px 0;
    padding: 16px;
    color: white;
    background: linear-gradient(135deg, #047b75, #0c9488);
}

.sample-cv-teal .sample-cv-name,
.sample-cv-teal .sample-cv-role {
    color: white;
}

.sample-cv-teal .sample-cv-avatar {
    color: #047b75;
    background: white;
}

.sample-cv-teal .sample-cv-contact-list span {
    color: white;
    background: rgba(255, 255, 255, .16);
}

.sample-cv-teal .sample-cv-section-title,
.sample-cv-teal .sample-cv-highlight,
.sample-cv-teal .sample-cv-keyword-row span,
.sample-cv-teal .sample-cv-scorecard strong {
    color: #047b75;
}

.sample-cv-steel {
    border-top: 6px solid #5a6f82;
}

.sample-cv-steel .sample-cv-role,
.sample-cv-steel .sample-cv-section-title,
.sample-cv-steel .sample-cv-highlight,
.sample-cv-steel .sample-cv-keyword-row span,
.sample-cv-steel .sample-cv-scorecard strong {
    color: #40586b;
}

.sample-cv-steel .sample-cv-avatar {
    background: #5a6f82;
}

.sample-cv-rose {
    border-top: 0;
    background: #fff8fa;
}

.sample-cv-rose .sample-cv-header {
    margin: -16px -16px 0;
    padding: 16px;
    background: #fde9ee;
}

.sample-cv-rose .sample-cv-role,
.sample-cv-rose .sample-cv-section-title,
.sample-cv-rose .sample-cv-highlight,
.sample-cv-rose .sample-cv-keyword-row span,
.sample-cv-rose .sample-cv-scorecard strong {
    color: #a83a56;
}

.sample-cv-rose .sample-cv-avatar {
    background: #be4b66;
}

.sample-cv-plum {
    border-top: 0;
    background: #fffaff;
}

.sample-cv-plum .sample-cv-header {
    display: grid;
    place-items: center;
    margin: -16px -16px 4px;
    padding: 18px 16px;
    text-align: center;
    background: linear-gradient(135deg, #f6e9f4, #eef2ff);
}

.sample-cv-plum .sample-cv-role,
.sample-cv-plum .sample-cv-section-title,
.sample-cv-plum .sample-cv-highlight,
.sample-cv-plum .sample-cv-keyword-row span,
.sample-cv-plum .sample-cv-scorecard strong {
    color: #77436f;
}

.sample-cv-plum .sample-cv-avatar {
    background: #77436f;
}

.sample-cv-forest {
    border-top: 6px solid #315f45;
}

.sample-cv-forest .sample-cv-role,
.sample-cv-forest .sample-cv-section-title,
.sample-cv-forest .sample-cv-highlight,
.sample-cv-forest .sample-cv-keyword-row span,
.sample-cv-forest .sample-cv-scorecard strong {
    color: #315f45;
}

.sample-cv-forest .sample-cv-avatar {
    background: #315f45;
}

.selected-template-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
    overflow: hidden;
}

.cv-preview-toolbar {
    display: flex;
    gap: 6px;
}

.cv-preview-toolbar span {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: #cbd8d2;
}

.cv-preview-toolbar span:first-child {
    background: #d76557;
}

.cv-preview-toolbar span:nth-child(2) {
    background: var(--amber);
}

.cv-preview-toolbar span:nth-child(3) {
    background: #65a887;
}

.cv-document-stage {
    padding: 18px;
    border: 1px solid #d8e4de;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(23, 33, 28, .035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(23, 33, 28, .035) 1px, transparent 1px),
        #eef4f1;
    background-size: 18px 18px;
}

.selected-template-preview .sample-cv {
    min-height: 520px;
    padding: 22px;
    gap: 16px;
    margin: 0 auto;
    box-shadow: 0 28px 58px rgba(23, 33, 28, .18);
    animation: documentFloat 6s ease-in-out infinite;
}

.selected-template-preview .sample-cv-green .sample-cv-header,
.selected-template-preview .sample-cv-teal .sample-cv-header,
.selected-template-preview .sample-cv-rose .sample-cv-header,
.selected-template-preview .sample-cv-plum .sample-cv-header {
    margin: -22px -22px 0;
    padding: 22px;
}

.selected-template-preview .sample-cv-blue .sample-cv-header {
    margin: -22px 0 -22px -22px;
    padding: 22px;
}

.selected-template-preview .sample-cv-amber .sample-cv-header {
    margin: -22px -22px 0;
    padding: 22px;
}

.selected-template-preview .sample-cv-name {
    font-size: 25px;
}

.selected-template-preview .sample-cv-role {
    font-size: 15px;
}

.selected-template-preview .sample-cv-avatar {
    width: 54px;
    height: 54px;
    font-size: 17px;
}

.selected-template-preview .sample-cv-contact-list span {
    font-size: 12px;
}

.selected-template-preview .sample-cv-section-title {
    font-size: 11px;
}

.selected-template-preview .sample-cv-copy,
.selected-template-preview .sample-cv-highlight {
    font-size: 13px;
}

.selected-template-preview .sample-cv-job strong {
    font-size: 13px;
}

.selected-template-preview .sample-cv-job small,
.selected-template-preview .sample-cv-bars small,
.selected-template-preview .sample-cv-dots small,
.selected-template-preview .sample-cv-pill-list span,
.selected-template-preview .sample-cv-mini-grid span,
.selected-template-preview .sample-cv-keyword-row span,
.selected-template-preview .sample-cv-scorecard small {
    font-size: 11px;
}

.selected-template-preview .sample-cv-job span,
.selected-template-preview .sample-cv-bullets span {
    font-size: 12px;
}

.selected-template-preview .sample-cv-scorecard strong {
    font-size: 20px;
}

.selected-template-preview .sample-cv-dots i {
    width: 8px;
    height: 8px;
}

.selected-template-card.is-updating .sample-cv,
.selected-template-preview.is-swapping .sample-cv {
    animation: previewSwap 420ms cubic-bezier(.2, .8, .2, 1), documentFloat 6s ease-in-out 420ms infinite;
}

.modal-open {
    overflow: hidden;
}

.cv-template-modal[hidden] {
    display: none;
}

.cv-template-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 34px);
    opacity: 0;
    transition: opacity 220ms ease;
}

.cv-template-modal.is-open {
    opacity: 1;
}

.cv-template-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(17, 24, 21, .66);
    backdrop-filter: blur(12px);
    cursor: zoom-out;
}

.cv-template-modal-shell {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    width: min(1180px, 100%);
    max-height: 92vh;
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    background: #f7faf8;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .34);
    overflow: auto;
    transform: translateY(16px) scale(.985);
    transition: transform 220ms ease;
}

.cv-template-modal.is-open .cv-template-modal-shell {
    transform: translateY(0) scale(1);
}

.cv-template-modal-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 4px 0;
}

.cv-template-modal-header h2,
.cv-template-modal-info h3 {
    margin: 0;
    color: var(--ink);
}

.cv-template-modal-header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.cv-template-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 18px;
    align-items: start;
}

.cv-template-modal-stage {
    min-height: 560px;
    padding: clamp(18px, 3vw, 34px);
    border: 1px solid #d8e4de;
    border-radius: 8px;
    background:
        radial-gradient(circle at 12% 0%, rgba(245, 200, 95, .24), transparent 26%),
        radial-gradient(circle at 90% 14%, rgba(23, 107, 77, .16), transparent 24%),
        linear-gradient(180deg, #eef4f1, #e8efeb);
    overflow: auto;
}

.cv-template-modal-document .sample-cv {
    width: min(640px, 100%);
    min-height: 860px;
    margin: 0 auto;
    padding: 32px;
    gap: 22px;
    border-radius: 3px;
    box-shadow: 0 34px 76px rgba(23, 33, 28, .24);
    animation: previewSwap 280ms ease both;
}

.cv-template-modal-document .sample-cv-green .sample-cv-header,
.cv-template-modal-document .sample-cv-amber .sample-cv-header,
.cv-template-modal-document .sample-cv-teal .sample-cv-header,
.cv-template-modal-document .sample-cv-rose .sample-cv-header,
.cv-template-modal-document .sample-cv-plum .sample-cv-header {
    margin: -32px -32px 0;
    padding: 32px;
}

.cv-template-modal-document .sample-cv-blue .sample-cv-header {
    margin: -32px 0 -32px -32px;
    padding: 32px;
}

.cv-template-modal-document .sample-cv-name {
    font-size: 34px;
}

.cv-template-modal-document .sample-cv-role {
    font-size: 18px;
}

.cv-template-modal-document .sample-cv-avatar {
    width: 64px;
    height: 64px;
    font-size: 20px;
}

.cv-template-modal-document .sample-cv-contact-list span,
.cv-template-modal-document .sample-cv-section-title,
.cv-template-modal-document .sample-cv-job small,
.cv-template-modal-document .sample-cv-bars small,
.cv-template-modal-document .sample-cv-dots small,
.cv-template-modal-document .sample-cv-pill-list span,
.cv-template-modal-document .sample-cv-mini-grid span,
.cv-template-modal-document .sample-cv-keyword-row span,
.cv-template-modal-document .sample-cv-scorecard small {
    font-size: 12px;
}

.cv-template-modal-document .sample-cv-copy,
.cv-template-modal-document .sample-cv-highlight,
.cv-template-modal-document .sample-cv-job span,
.cv-template-modal-document .sample-cv-bullets span {
    font-size: 14px;
}

.cv-template-modal-document .sample-cv-job strong {
    font-size: 15px;
}

.cv-template-modal-document .sample-cv-scorecard strong {
    font-size: 24px;
}

.cv-template-modal-info {
    position: sticky;
    top: 0;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 16px 34px rgba(23, 33, 28, .08);
}

@keyframes templateCardEnter {
    from {
        opacity: 0;
        transform: translateY(18px) rotateX(-4deg);
    }

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

@keyframes previewSwap {
    from {
        opacity: .35;
        transform: translateY(14px) scale(.985);
    }

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

@keyframes documentFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.compact-price {
    box-shadow: none;
}

.compact-price strong {
    font-size: 30px;
}

.tall-field {
    min-height: 180px;
}

.cv-preview-panel {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 14px;
    align-content: start;
}

.cv-response-card {
    display: grid;
    gap: 12px;
}

.cv-response-card pre {
    max-height: 560px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfb;
    overflow: auto;
    white-space: pre-wrap;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.cv-response-empty {
    display: grid;
    gap: 10px;
    place-items: center;
    min-height: 320px;
    padding: 24px;
    border: 1px dashed #b8cbc2;
    border-radius: 8px;
    background: var(--wash);
    text-align: center;
}

.cv-response-empty [data-lucide] {
    width: 42px;
    height: 42px;
    color: var(--green);
}

.cv-response-empty h2 {
    margin: 0;
    font-size: 22px;
}

.document-panel {
    overflow: auto;
}

.document-panel pre {
    margin: 0;
    white-space: pre-wrap;
    color: var(--ink);
    font: 14px/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.spaced {
    margin: 16px 0;
}

.form-shell {
    max-width: 980px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.opportunity-post-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr);
    gap: 18px;
    align-items: stretch;
    max-width: 1320px;
    margin: 22px auto 0;
    padding: 0 clamp(16px, 4vw, 42px);
}

.opportunity-post-hero-copy,
.opportunity-post-assurance,
.opportunity-post-card,
.opportunity-post-submit {
    border: 1px solid rgba(23, 107, 77, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(20, 54, 45, .08);
}

.opportunity-post-hero-copy {
    padding: clamp(22px, 4vw, 42px);
}

.opportunity-post-hero-copy h1 {
    max-width: 900px;
    font-size: clamp(34px, 4.8vw, 64px);
}

.opportunity-post-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.opportunity-post-steps span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(23, 107, 77, .14);
    border-radius: 999px;
    color: #14372d;
    background: #f5fbf8;
    font-size: 13px;
    font-weight: 900;
}

.opportunity-post-steps [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--green);
}

.opportunity-post-assurance {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 22px;
    background: linear-gradient(180deg, #ffffff, #f2fbf7);
}

.opportunity-post-assurance > span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 8px;
    color: white;
    background: var(--green);
    box-shadow: 0 16px 28px rgba(23, 107, 77, .22);
}

.opportunity-post-assurance strong {
    color: #10231c;
    font-size: 19px;
    font-weight: 950;
    line-height: 1.25;
}

.opportunity-post-assurance p {
    margin: 0;
    color: var(--muted);
    font-weight: 650;
    line-height: 1.5;
}

.opportunity-post-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 18px clamp(16px, 4vw, 42px) 48px;
}

.opportunity-post-form {
    display: grid;
    gap: 16px;
}

.opportunity-post-card {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 3vw, 26px);
}

.opportunity-post-card.account-required {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    margin: 0;
    border-left-width: 1px;
}

.opportunity-post-card.account-required > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: var(--green-dark);
    background: var(--mint);
}

.opportunity-post-card h2 {
    margin-bottom: 0;
    font-size: clamp(19px, 2vw, 25px);
}

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

.opportunity-post-full {
    grid-column: 1 / -1;
}

.opportunity-post-stack {
    display: grid;
    gap: 14px;
}

.compact-textarea.field {
    min-height: 112px;
    resize: vertical;
}

.opportunity-post-stack textarea.field {
    min-height: 132px;
}

.opportunity-post-advanced {
    border: 1px solid rgba(23, 107, 77, .13);
    border-radius: 8px;
    background: #fbfdfc;
}

.opportunity-post-advanced summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    color: #176b4d;
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.opportunity-post-advanced summary::-webkit-details-marker {
    display: none;
}

.opportunity-post-advanced summary [data-lucide] {
    width: 18px;
    height: 18px;
}

.opportunity-post-advanced[open] {
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .055);
}

.opportunity-post-advanced[open] .opportunity-post-grid {
    padding: 0 14px 14px;
}

.compact-post-card {
    gap: 12px;
}

.compact-share-options {
    gap: 10px;
}

.professional-share-options {
    gap: 12px;
}

.opportunity-post-card .share-option {
    background: #fbfdfc;
}

.opportunity-post-card .post-country-card {
    margin: 0;
    box-shadow: none;
}

.opportunity-post-alert {
    padding: 14px 16px;
    border: 1px solid #f3b2b2;
    border-radius: 8px;
    color: #7f1d1d;
    background: #fff5f5;
}

.opportunity-post-alert strong,
.opportunity-post-alert p {
    margin: 0;
}

.opportunity-post-alert p {
    margin-top: 4px;
    font-weight: 750;
}

.dekeree-hidden-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #ead7a2;
    border-radius: 14px;
    background: #fff8e8;
    color: #5c4813;
}

.dekeree-hidden-notice [data-lucide] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 2px;
}

.dekeree-hidden-notice strong,
.dekeree-hidden-notice p {
    margin: 0;
}

.dekeree-hidden-notice p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
}

.dekeree-report-box,
.d-status-report-form {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #e4eee9;
    border-radius: 14px;
    background: #f7fbf8;
}

.dekeree-report-box strong,
.d-status-report-form strong {
    color: #16324a;
}

.dekeree-report-box p,
.d-status-report-form p {
    margin: 0;
    color: #5b6f68;
    font-size: 13px;
}

.dekeree-report-box textarea,
.d-status-report-form textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px solid #d5e3dc;
    border-radius: 10px;
    resize: vertical;
}

.dekeree-report-box small {
    color: #9b1c1c;
}

.opportunity-post-submit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
}

.opportunity-post-submit strong {
    display: block;
    color: #10231c;
    font-size: 17px;
    font-weight: 950;
}

.opportunity-post-submit p {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.opportunity-post-submit .actions {
    margin: 0;
}

.opportunity-email-privacy {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid rgba(15, 124, 89, .16);
    border-radius: 14px;
    color: #17372d;
    background: linear-gradient(135deg, #f6fffb 0%, #ffffff 100%);
    box-shadow: 0 16px 34px rgba(15, 124, 89, .07);
}

.opportunity-email-privacy [data-lucide] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--green);
}

.opportunity-email-privacy strong {
    display: block;
    color: var(--green-dark);
    font-weight: 950;
}

.opportunity-email-privacy p {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.opportunity-apply-panel {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid rgba(15, 124, 89, .18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 94% 10%, rgba(34, 197, 94, .12), transparent 28%),
        #ffffff;
    box-shadow: 0 22px 55px rgba(17, 24, 39, .07);
}

.opportunity-apply-panel .section-title-row {
    margin-bottom: 10px;
}

.opportunity-apply-panel .status {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: var(--green-dark);
    background: #eefbf5;
}

.opportunity-apply-panel .status [data-lucide] {
    width: 16px;
    height: 16px;
}

.opportunity-apply-panel .primary-button {
    justify-self: start;
}

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

.form-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.field-label {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
}

.account-required {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #cce8da;
    border-left: 4px solid var(--green);
    border-radius: 8px;
    background: #f1faf5;
}

.account-required strong {
    display: block;
    margin-bottom: 4px;
    color: var(--green-dark);
}

.account-required p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.circle-inbox-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.circle-inbox-sidebar {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 10px;
    align-self: start;
    max-height: calc(100vh - 112px);
    min-width: 0;
}

.circle-inbox-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px;
    box-shadow: none;
}

.circle-inbox-top h2,
.circle-inbox-top p {
    margin: 0;
}

.circle-inbox-top h2 {
    font-size: 22px;
}

.circle-inbox-top p {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.circle-unread-total,
.circle-inbox-meta b {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    color: white;
    background: #d92d20;
    box-shadow: 0 8px 18px rgba(217, 45, 32, .24);
    font-size: 12px;
    font-weight: 950;
}

.circle-compose-panel {
    display: grid;
    gap: 10px;
    padding: 10px;
    box-shadow: none;
}

.circle-compose-toggle {
    width: 100%;
}

.circle-compose-form {
    display: none;
    gap: 8px;
    margin: 0;
}

.circle-compose-panel.is-open .circle-compose-form {
    display: grid;
}

.circle-compose-form textarea.field {
    min-height: 86px;
}

.circle-inbox-list {
    display: grid;
    gap: 6px;
    min-height: 220px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
    overflow: auto;
}

.circle-inbox-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 78px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ink);
    background: transparent;
}

.circle-inbox-item.is-direct .circle-inbox-avatar {
    background: #174f79;
}

.circle-inbox-item.is-direct.active .circle-inbox-avatar,
.circle-inbox-item.is-direct:hover .circle-inbox-avatar {
    background: linear-gradient(135deg, #176b4d, #174f79);
}

.circle-inbox-item:hover,
.circle-inbox-item.active {
    border-color: #cce8da;
    background: #f1faf5;
}

.circle-inbox-item.active {
    box-shadow: inset 4px 0 0 var(--green);
}

.circle-inbox-item.has-unread:not(.active) {
    background: #fffdf6;
}

.circle-inbox-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: white;
    background: #243c35;
    font-size: 12px;
    font-weight: 950;
}

.circle-inbox-item.active .circle-inbox-avatar {
    background: var(--green);
}

.circle-inbox-item.is-direct.active .circle-inbox-avatar,
.circle-inbox-item.is-direct:hover .circle-inbox-avatar {
    background: linear-gradient(135deg, #176b4d, #174f79);
}

.circle-inbox-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.circle-inbox-copy strong,
.circle-inbox-copy small,
.circle-inbox-copy em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-inbox-copy strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
}

.circle-inbox-item.has-unread .circle-inbox-copy strong {
    color: var(--green-dark);
}

.circle-inbox-copy small {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 780;
}

.circle-inbox-copy em {
    color: #7a8781;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.circle-inbox-meta {
    display: grid;
    gap: 6px;
    justify-items: end;
}

.circle-inbox-meta small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.circle-inbox-empty,
.circle-no-selection {
    display: grid;
    gap: 10px;
    place-items: center;
    min-height: 260px;
    padding: 20px;
    border: 1px dashed #b8cbc2;
    border-radius: 8px;
    background: var(--wash);
    color: var(--muted);
    text-align: center;
}

.circle-inbox-empty p,
.circle-no-selection p {
    margin: 0;
    line-height: 1.5;
}

.circle-no-selection [data-lucide],
.circle-inbox-empty [data-lucide] {
    width: 42px;
    height: 42px;
    color: var(--green);
}

.circle-conversation-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.circle-conversation-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
}

.circle-conversation-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.circle-conversation-title h2,
.circle-conversation-title p {
    margin: 0;
}

.circle-conversation-title h2 {
    font-size: clamp(22px, 2vw, 30px);
}

.circle-conversation-title p {
    color: var(--muted);
    line-height: 1.45;
}

.circle-conversation-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: end;
}

.circle-conversation-stats span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--mint);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.circle-conversation-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.circle-conversation-chat {
    min-width: 0;
}

.circle-conversation-chat .circle-chat {
    min-height: 620px;
    background: linear-gradient(180deg, #fbfcfb, #f5f8f6);
}

.circle-conversation-chat .circle-message-list {
    max-height: min(58vh, 620px);
    min-height: 380px;
}

.circle-conversation-side {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 12px;
    align-self: start;
    padding: 14px;
    box-shadow: none;
}

.circle-member-row.compact-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto;
    background: white;
}

.circle-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 42px;
}

.circle-side-panel {
    position: sticky;
    top: 92px;
    align-self: start;
}

.circle-grid,
.share-options {
    display: grid;
    gap: 12px;
}

.circle-grid {
    grid-template-columns: 1fr;
}

.circle-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 10px 24px rgba(23, 33, 28, .05);
}

.circle-card:hover {
    border-color: #a9d9c1;
    box-shadow: 0 18px 42px rgba(23, 107, 77, .11);
}

.circle-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.circle-card-head h3 {
    margin-bottom: 4px;
}

.circle-card-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.circle-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: white;
    background: var(--green);
}

.circle-member-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.circle-member-list {
    display: grid;
    gap: 8px;
}

.circle-member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 42px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.circle-member-row span,
.circle-member-row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-member-row span,
.circle-member-row b {
    font-weight: 850;
}

.circle-member-row small {
    color: var(--muted);
}

.circle-chat {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfb;
    box-shadow: none;
}

.circle-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.circle-chat-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.circle-chat-avatar,
.circle-message-avatar,
.circle-member-chip b {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: white;
    background: var(--green);
    font-size: 11px;
    font-weight: 950;
}

.circle-chat-avatar {
    width: 38px;
    height: 38px;
    font-size: 12px;
}

.circle-chat-head strong,
.circle-chat-head small {
    display: block;
}

.circle-chat-head strong {
    color: var(--ink);
}

.circle-chat-head small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.circle-member-strip {
    display: flex;
    gap: 8px;
    padding: 6px 0 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.circle-member-strip::-webkit-scrollbar {
    display: none;
}

.circle-member-chip {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 3px 9px 3px 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    white-space: nowrap;
}

.circle-member-chip b {
    width: 28px;
    height: 28px;
    background: #7a8781;
    font-size: 10px;
    overflow: hidden;
}

.circle-message-avatar {
    overflow: hidden;
}

.circle-member-chip b img,
.circle-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.circle-member-chip b::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border: 2px solid white;
    border-radius: 99px;
    background: #98a29d;
}

.circle-member-chip.is-online b {
    background: var(--green);
}

.circle-member-chip.is-online b::after {
    background: #22c55e;
}

.circle-member-chip span {
    max-width: 130px;
    overflow: hidden;
    color: var(--ink);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
}

.circle-member-chip small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.circle-member-chip.is-online small {
    color: var(--green-dark);
}

.circle-message-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    overflow: auto;
}

.circle-message-row {
    display: flex;
    gap: 8px;
    align-items: end;
    max-width: 94%;
    scroll-margin-block: 120px;
}

.circle-message-row.mine {
    align-self: flex-end;
    justify-content: flex-end;
}

.circle-message-row.is-unread .circle-message {
    border-color: #9fd3b8;
    box-shadow: 0 10px 28px rgba(23, 107, 77, .12);
}

.circle-message-row.is-scroll-highlight .circle-message {
    animation: messageJumpGlow 1500ms ease both;
}

.circle-message-avatar {
    width: 28px;
    height: 28px;
    background: #243c35;
    font-size: 10px;
}

.circle-message-avatar.mine {
    background: var(--green);
}

.circle-message {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 9px 36px 9px 11px;
    border: 1px solid #d7e6df;
    border-radius: 12px 12px 12px 4px;
    background: #f7faf8;
    box-shadow: none;
}

.circle-message.has-reactions {
    margin-bottom: 14px;
}

.circle-message.mine {
    border-color: #cce8da;
    border-radius: 12px 12px 4px 12px;
    color: white;
    background: var(--green);
}

.circle-message-tool-button {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(23, 33, 28, .08);
    border-radius: 999px;
    color: var(--green-dark);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 6px 16px rgba(23, 33, 28, .08);
    opacity: .72;
    transition: transform 150ms ease, opacity 150ms ease, background 150ms ease;
}

.circle-message.mine .circle-message-tool-button {
    color: white;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .16);
}

.circle-message:hover .circle-message-tool-button,
.circle-message-tool-button:hover,
.circle-message-tool-button[aria-expanded="true"] {
    opacity: 1;
    transform: translateY(-1px) scale(1.03);
    background: white;
}

.circle-message.mine .circle-message-tool-button:hover,
.circle-message.mine .circle-message-tool-button[aria-expanded="true"] {
    background: rgba(255, 255, 255, .26);
}

.circle-reaction-peek {
    position: absolute;
    bottom: -15px;
    left: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 27px;
    padding: 2px 7px 2px 5px;
    border: 1px solid rgba(23, 107, 77, .14);
    border-radius: 999px;
    color: var(--green-dark);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(23, 33, 28, .16);
    transform-origin: center;
    animation: reactionPeekIn 360ms cubic-bezier(.2, 1.18, .35, 1), reactionPeekGlow 2800ms ease-in-out 420ms infinite;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.circle-message.mine .circle-reaction-peek {
    right: 10px;
    left: auto;
    border-color: rgba(255, 255, 255, .3);
}

.circle-reaction-peek:hover,
.circle-reaction-peek:focus-visible {
    border-color: #9fd3bb;
    box-shadow: 0 14px 30px rgba(23, 107, 77, .22);
    transform: translateY(-2px) scale(1.04);
}

.circle-reaction-peek-stack {
    display: inline-flex;
    align-items: center;
}

.circle-reaction-peek-stack b {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    margin-left: -5px;
    border: 1px solid rgba(255, 255, 255, .96);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 3px 9px rgba(23, 33, 28, .1);
}

.circle-reaction-peek-stack b:first-child {
    margin-left: 0;
    animation: reactionEmojiPop 1400ms ease-in-out infinite;
}

.circle-reaction-peek strong {
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.circle-reaction-peek.is-reacted {
    border-color: #bfe2d1;
    background: #f0fbf5;
}

.circle-message-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.circle-message strong {
    color: var(--green-dark);
    font-size: 13px;
}

.circle-message.mine strong,
.circle-message.mine small,
.circle-message.mine p {
    color: white;
}

.circle-message small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.circle-message-public {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #174f79;
    background: var(--blue-soft);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.circle-message-new {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #176b4d;
    background: #e9f8f0;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.circle-message-new [data-lucide] {
    width: 12px;
    height: 12px;
}

.circle-message-expiry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #7a4b05;
    background: #fff5dc;
    font-size: 11px;
    font-weight: 950;
    white-space: nowrap;
}

.circle-message-expiry [data-lucide] {
    width: 12px;
    height: 12px;
}

.circle-delivery-receipt {
    --delivery-dot-color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 7px 0 6px;
    border: 1px solid rgba(23, 107, 77, .12);
    border-radius: 999px;
    color: #5f756d;
    background: rgba(255, 255, 255, .72);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.circle-delivery-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 14px;
}

.circle-delivery-dots i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--delivery-dot-color);
    opacity: .42;
    transform: scale(.82);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .16);
    transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.circle-delivery-dots i:nth-child(2),
.circle-delivery-dots i:nth-child(3) {
    opacity: 0;
    transform: scale(.45);
}

.circle-delivery-receipt.is-read {
    --delivery-dot-color: #0095f6;
    border-color: rgba(22, 163, 100, .22);
    color: #0b79c8;
    background: #edfdf4;
}

.circle-delivery-receipt.is-read .circle-delivery-dots i {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(0, 149, 246, .1);
    animation: deliveryDotPulse 1.7s ease-in-out infinite;
}

.circle-delivery-receipt.is-read .circle-delivery-dots i:nth-child(2) {
    animation-delay: .12s;
}

.circle-delivery-receipt.is-read .circle-delivery-dots i:nth-child(3) {
    animation-delay: .24s;
}

.circle-delivery-receipt.is-sent .circle-delivery-label {
    color: #64756f;
}

.circle-delivery-receipt.is-sent {
    --delivery-dot-color: #94a3b8;
}

.circle-delivery-label {
    display: inline-grid;
    min-width: 24px;
    height: 16px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(15, 35, 28, .06);
    color: inherit;
    font-size: 9.5px;
    font-weight: 950;
    letter-spacing: 0;
}

.circle-message.mine .circle-message-public {
    color: white;
    background: rgba(255, 255, 255, .18);
}

.circle-message.mine .circle-delivery-receipt {
    --delivery-dot-color: rgba(255, 255, 255, .72);
    border-color: rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .86);
    background: rgba(255, 255, 255, .15);
}

.circle-message.mine .circle-delivery-receipt.is-read {
    --delivery-dot-color: #b7e4ff;
    color: white;
    background: rgba(255, 255, 255, .22);
}

.circle-message.mine .circle-delivery-receipt.is-sent .circle-delivery-label {
    color: rgba(255, 255, 255, .74);
}

.circle-message.mine .circle-delivery-label {
    background: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .88);
}

@keyframes deliveryDotPulse {
    0%,
    100% {
        transform: scale(.92);
    }

    50% {
        transform: scale(1.18);
    }
}

.circle-message.mine .circle-message-expiry {
    color: white;
    background: rgba(255, 255, 255, .2);
}

.circle-message p {
    margin: 0;
    color: var(--ink);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.circle-reply-quote,
.circle-reply-composer {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(23, 107, 77, .14);
    border-left: 4px solid var(--green);
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);
}

.circle-reply-quote {
    padding: 7px 9px;
}

.circle-message.mine .circle-reply-quote {
    border-color: rgba(255, 255, 255, .26);
    border-left-color: white;
    background: rgba(255, 255, 255, .14);
}

.circle-reply-quote small,
.circle-reply-composer small {
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 950;
}

.circle-message.mine .circle-reply-quote small,
.circle-message.mine .circle-reply-quote span {
    color: white;
}

.circle-reply-quote span,
.circle-reply-composer strong {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.circle-replies-peek {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    margin-top: 3px;
    padding: 5px 7px;
    border: 1px solid rgba(23, 107, 77, .16);
    border-radius: 999px;
    color: var(--green-dark);
    background: rgba(255, 255, 255, .78);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 7px 18px rgba(23, 33, 28, .07);
    animation: replyPeekPulse 3200ms ease-in-out infinite;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.circle-replies-peek:hover,
.circle-replies-peek[aria-expanded="true"] {
    border-color: #9fd3bb;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 24px rgba(23, 107, 77, .14);
    transform: translateY(-1px);
}

.circle-message.mine .circle-replies-peek {
    color: white;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 8px 22px rgba(7, 76, 45, .14);
}

.circle-replies-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, #176b4d, #12b76a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 16px rgba(23, 107, 77, .18);
    animation: replyIconFloat 2400ms ease-in-out infinite;
}

.circle-replies-icon::before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(23, 107, 77, .18);
    border-radius: inherit;
    animation: replyIconRipple 2400ms ease-out infinite;
}

.circle-message.mine .circle-replies-icon {
    color: var(--green-dark);
    background: white;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 16px rgba(7, 76, 45, .14);
}

.circle-message.mine .circle-replies-icon::before {
    border-color: rgba(255, 255, 255, .28);
}

.circle-replies-icon [data-lucide] {
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
}

.circle-replies-icon b {
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border: 2px solid white;
    border-radius: 999px;
    color: white;
    background: #174f79;
    font-size: 8px;
    font-weight: 950;
}

.circle-message.mine .circle-replies-icon b {
    border-color: var(--green);
    color: var(--green-dark);
    background: #dff8eb;
}

.circle-replies-peek > span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.circle-replies-peek strong,
.circle-replies-peek small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-replies-peek strong {
    color: inherit;
    font-size: 11px;
    font-weight: 950;
}

.circle-replies-peek small {
    color: inherit;
    opacity: .78;
    font-size: 10.5px;
    font-weight: 750;
}

.circle-replies-panel {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(23, 107, 77, .13);
    border-radius: 14px;
    color: var(--ink);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 32px rgba(23, 33, 28, .12);
    animation: repliesPanelIn 180ms ease both;
}

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

.circle-replies-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(23, 33, 28, .08);
}

.circle-replies-panel-head strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
}

.circle-replies-panel-head small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.circle-reply-thread-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.circle-reply-thread-avatar {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 999px;
    color: white;
    background: #66736d;
    overflow: hidden;
    font-size: 10px;
    font-weight: 950;
}

.circle-reply-thread-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.circle-reply-thread-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.circle-reply-thread-copy strong {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 950;
}

.circle-reply-thread-copy small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.circle-reply-thread-copy p {
    margin: 0;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.circle-quick-reply-button {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    margin-top: 2px;
    padding: 0 8px;
    border: 1px solid rgba(23, 107, 77, .16);
    border-radius: 999px;
    color: var(--green-dark);
    background: rgba(255, 255, 255, .78);
    font-size: 10.5px;
    font-weight: 900;
    box-shadow: 0 7px 16px rgba(23, 33, 28, .07);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

.circle-message.mine .circle-quick-reply-button {
    justify-self: end;
    color: white;
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .16);
}

.circle-quick-reply-button:hover,
.circle-quick-reply-button:focus-visible {
    border-color: #9fd3bb;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 22px rgba(23, 107, 77, .14);
    transform: translateY(-1px);
}

.circle-message.mine .circle-quick-reply-button:hover,
.circle-message.mine .circle-quick-reply-button:focus-visible {
    background: rgba(255, 255, 255, .24);
}

.circle-quick-reply-button [data-lucide] {
    width: 13px;
    height: 13px;
}

.circle-message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-top: 2px;
}

.circle-message-tools-panel {
    position: absolute;
    top: 34px;
    right: 8px;
    z-index: 12;
    display: grid;
    gap: 8px;
    width: min(292px, calc(100vw - 56px));
    padding: 10px;
    border: 1px solid #cce8da;
    border-radius: 8px;
    color: var(--ink);
    background: white;
    box-shadow: 0 18px 42px rgba(23, 33, 28, .18);
    animation: messageToolsIn 170ms ease both;
}

.circle-message-tools-panel[hidden] {
    display: none;
}

.circle-reaction-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
}

.circle-reaction-form {
    margin: 0;
}

.circle-reaction-choice {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
    font-size: 19px;
    line-height: 1;
    transition: transform 130ms ease, border-color 130ms ease, background 130ms ease;
}

.circle-reaction-choice small {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid white;
    border-radius: 999px;
    color: white;
    background: var(--green);
    font-size: 9px;
    font-weight: 950;
}

.circle-reaction-choice:hover,
.circle-reaction-choice.is-selected {
    border-color: #bfe2d1;
    background: var(--mint);
    transform: translateY(-2px) scale(1.05);
}

.circle-message-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}

.circle-like-form {
    margin: 0;
}

.circle-like-button,
.circle-reply-button,
.circle-seen-count,
.circle-reaction-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(23, 33, 28, .1);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.circle-message.mine .circle-like-button,
.circle-message.mine .circle-reply-button,
.circle-message.mine .circle-seen-count,
.circle-message.mine .circle-reaction-total {
    color: white;
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .12);
}

.circle-like-button:hover,
.circle-like-button.is-liked {
    color: #b42318;
    border-color: #f3bbb4;
    background: #fff1ef;
}

.circle-message.mine .circle-like-button:hover,
.circle-message.mine .circle-like-button.is-liked {
    color: white;
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .22);
}

.circle-like-button.is-liked [data-lucide] {
    fill: currentColor;
}

.circle-reply-button:hover {
    color: var(--green-dark);
    border-color: #bfe2d1;
    background: var(--mint);
}

.circle-reaction-total [data-lucide] {
    color: #b42318;
}

.circle-attachment {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}

.circle-attachment-preview img {
    display: block;
    width: min(260px, 100%);
    max-height: 180px;
    border: 1px solid rgba(23, 33, 28, .1);
    border-radius: 8px;
    object-fit: cover;
    background: white;
}

.circle-attachment audio,
.circle-attachment video {
    width: min(300px, 100%);
}

.circle-attachment video {
    display: block;
    max-height: 210px;
    border: 1px solid rgba(23, 33, 28, .1);
    border-radius: 8px;
    background: #111827;
}

.circle-audio-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(23, 33, 28, .1);
    border-radius: 999px;
    background: white;
}

.circle-message.mine .circle-audio-preview {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .14);
}

.circle-audio-preview [data-lucide] {
    color: var(--green-dark);
}

.circle-message.mine .circle-audio-preview [data-lucide] {
    color: white;
}

.circle-attachment audio {
    height: 36px;
}

.circle-attachment-row {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid rgba(23, 33, 28, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .68);
}

.circle-message.mine .circle-attachment-row {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12);
}

.circle-attachment-row span,
.circle-attachment-row a,
.circle-attachment-row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.circle-attachment-row span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.circle-message.mine .circle-attachment-row span,
.circle-message.mine .circle-attachment-row small,
.circle-message.mine .circle-attachment-row a {
    color: white;
}

.circle-attachment-row small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 780;
}

.circle-attachment-row a {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 900;
}

.circle-message-empty {
    display: grid;
    gap: 8px;
    place-items: center;
    min-height: 96px;
    padding: 14px;
    color: var(--muted);
    text-align: center;
}

.circle-message-empty p {
    margin: 0;
}

.circle-disappearing-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #d8e8df;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7fffb, #ffffff);
}

.circle-disappearing-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: var(--green-dark);
    background: #e9f8f0;
}

.circle-disappearing-icon [data-lucide] {
    width: 18px;
    height: 18px;
}

.circle-disappearing-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.circle-disappearing-copy strong {
    color: var(--green-dark);
    font-size: 13px;
}

.circle-disappearing-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.circle-disappearing-form {
    display: grid;
    grid-template-columns: minmax(126px, 148px) auto;
    gap: 8px;
    align-items: end;
}

.circle-disappearing-form label {
    display: grid;
    gap: 3px;
}

.circle-disappearing-form label span,
.circle-disappearing-form em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.circle-disappearing-form select.field {
    min-height: 38px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 13px;
}

.circle-disappearing-form .secondary-button {
    min-height: 38px;
}

.circle-disappearing-form em {
    grid-column: 1 / -1;
    min-height: 14px;
    text-align: right;
}

.circle-chat-form {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 188px 44px 44px 44px auto;
    gap: 8px;
    align-items: end;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.circle-chat-form.is-dragging-attachment::before {
    content: "Drop to attach";
    position: absolute;
    inset: -10px;
    z-index: 8;
    display: grid;
    place-items: center;
    border: 1.5px dashed rgba(23, 107, 77, .36);
    border-radius: 22px;
    color: var(--green-dark);
    background: rgba(247, 255, 251, .92);
    box-shadow: 0 18px 50px rgba(23, 107, 77, .16);
    font-size: 14px;
    font-weight: 950;
    pointer-events: none;
    animation: attachmentPreviewIn 160ms ease both;
}

.circle-chat-form textarea.field {
    min-height: 44px;
    height: 44px;
    max-height: 92px;
    padding: 10px 12px;
    border-color: var(--line);
    border-radius: 8px;
    background: white;
    resize: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.circle-chat-form .primary-button {
    position: relative;
    overflow: hidden;
    min-height: 44px;
    border-radius: 8px;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.circle-send-button::after {
    content: "";
    position: absolute;
    inset: -40% -90%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .44), transparent);
    opacity: 0;
    transform: translateX(-40%);
}

.circle-send-button.is-launching::after {
    opacity: 1;
    animation: sendButtonShine 520ms ease both;
}

.circle-reply-composer {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px 10px;
    background: #f1faf5;
}

.circle-reply-composer[hidden] {
    display: none;
}

.circle-attachment-composer-preview {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 34px;
    gap: 11px;
    align-items: center;
    min-height: 82px;
    padding: 9px;
    border: 1px solid rgba(23, 107, 77, .16);
    border-radius: 18px;
    background: linear-gradient(135deg, #f4fbf7, #ffffff);
    box-shadow: 0 18px 46px rgba(23, 33, 28, .09);
    animation: attachmentPreviewIn 180ms ease both;
}

.circle-attachment-composer-preview[hidden] {
    display: none;
}

.circle-attachment-composer-preview.is-video {
    border-color: rgba(21, 101, 192, .16);
    background: linear-gradient(135deg, #f3f8ff, #ffffff);
}

.circle-attachment-composer-preview.is-audio {
    border-color: rgba(198, 124, 0, .2);
    background: linear-gradient(135deg, #fff9ef, #ffffff);
}

.circle-attachment-composer-preview.is-document,
.circle-attachment-composer-preview.is-file {
    border-color: rgba(31, 42, 68, .14);
    background: linear-gradient(135deg, #f7f9fc, #ffffff);
}

.circle-attachment-composer-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 64px;
    overflow: hidden;
    border-radius: 14px;
    color: var(--green-dark);
    background: #eaf8f1;
    box-shadow: inset 0 0 0 1px rgba(23, 33, 28, .05);
}

.circle-attachment-composer-media img,
.circle-attachment-composer-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.circle-attachment-composer-media audio {
    width: 100%;
    max-width: 210px;
}

.circle-attachment-composer-preview.is-audio .circle-attachment-composer-media {
    grid-template-columns: 34px minmax(150px, 1fr);
    justify-content: start;
    width: min(260px, 100%);
    padding: 0 9px;
    background: #fff4df;
}

.circle-attachment-composer-preview.is-audio {
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) 34px;
}

.circle-attachment-composer-media > [data-lucide] {
    width: 28px;
    height: 28px;
    stroke-width: 2.4;
}

.circle-attachment-composer-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.circle-attachment-composer-copy strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
}

.circle-attachment-composer-copy span,
.circle-attachment-composer-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-attachment-composer-copy small {
    color: var(--green-dark);
}

.circle-attachment-remove {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #dce8e2;
    border-radius: 999px;
    color: #34423d;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(23, 33, 28, .1);
    transition: transform 140ms ease, color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.circle-attachment-remove:hover {
    border-color: #fac4c4;
    color: #b42318;
    background: #fff5f5;
    transform: scale(1.06);
}

.circle-attachment-remove [data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 3;
}

.circle-reply-composer span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.circle-reply-composer button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #cce8da;
    border-radius: 999px;
    color: var(--green-dark);
    background: white;
}

.circle-reply-composer button:hover {
    background: var(--mint);
}

.circle-chat-form.is-sending textarea.field {
    border-color: #9fd3b8;
    box-shadow: 0 0 0 3px rgba(23, 107, 77, .12);
    transform: translateY(-2px);
}

.circle-chat-form.is-sending .primary-button {
    background: var(--green-dark);
    box-shadow: 0 16px 34px rgba(23, 107, 77, .28), 0 0 0 5px rgba(23, 107, 77, .08);
    transform: translateY(-2px) scale(1.02);
}

.circle-chat-form.is-sending .primary-button [data-lucide] {
    animation: sendIconFly 520ms cubic-bezier(.2, .8, .2, 1) both;
}

.circle-send-reaction {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-self: end;
    gap: 7px;
    min-height: 30px;
    margin-top: -2px;
    padding: 0 11px;
    border: 1px solid #cce8da;
    border-radius: 999px;
    color: var(--green-dark);
    background: #f1faf5;
    box-shadow: 0 12px 28px rgba(23, 107, 77, .13);
    font-size: 12px;
    font-weight: 950;
    animation: sendReactionPop 620ms ease both;
}

.circle-send-reaction [data-lucide] {
    color: var(--amber);
    animation: sendSparkSpin 620ms ease both;
}

.circle-send-reaction span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 11px 0 0 var(--amber), 22px 0 0 #4f8edb;
    animation: sendDots 620ms ease both;
}

.circle-sent-cue {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-self: end;
    gap: 7px;
    min-height: 30px;
    margin-top: -2px;
    padding: 0 11px;
    border: 1px solid #cce8da;
    border-radius: 999px;
    color: var(--green-dark);
    background: #f7fffb;
    box-shadow: 0 12px 30px rgba(23, 107, 77, .12);
    font-size: 12px;
    font-weight: 950;
    animation: sentCuePop 1700ms ease both;
}

.circle-sent-cue [data-lucide] {
    width: 15px;
    height: 15px;
    color: var(--green);
    stroke-width: 3;
}

.circle-sent-wave {
    display: inline-flex;
    align-items: end;
    gap: 2px;
    height: 14px;
}

.circle-sent-wave b {
    display: block;
    width: 3px;
    height: 5px;
    border-radius: 999px;
    background: var(--green);
    opacity: .82;
    animation: sentWave 860ms ease-in-out infinite;
}

.circle-sent-wave b:nth-child(2) {
    animation-delay: 100ms;
}

.circle-sent-wave b:nth-child(3) {
    animation-delay: 200ms;
}

.circle-file-button,
.circle-record-button,
.circle-emoji-button {
    position: relative;
    display: grid;
    place-items: center;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--green-dark);
    background: white;
    cursor: pointer;
}

.circle-file-button,
.circle-record-button,
.circle-emoji-button {
    width: 44px;
}

.circle-record-button,
.circle-emoji-button {
    padding: 0;
}

.circle-emoji-button {
    overflow: hidden;
    color: #5f6965;
    background: #ffffff;
}

.circle-emoji-face {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1.7px solid currentColor;
    border-radius: 999px;
    font-size: 18px;
    line-height: 1;
    transition: transform 180ms ease, color 180ms ease;
}

.circle-file-button:hover,
.circle-file-button.has-file,
.circle-record-button:hover,
.circle-record-button.is-recording,
.circle-emoji-button:hover,
.circle-emoji-button[aria-expanded="true"] {
    border-color: #bfe2d1;
    background: #f7fbf9;
}

.circle-file-button.has-file {
    color: #ffffff;
    border-color: #176b4d;
    background: #176b4d;
    box-shadow: 0 12px 26px rgba(23, 107, 77, .22);
}

.circle-file-button.has-file::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #29cc7a;
    box-shadow: 0 0 0 4px rgba(41, 204, 122, .16);
}

.circle-emoji-button:hover .circle-emoji-face,
.circle-emoji-button[aria-expanded="true"] .circle-emoji-face {
    color: #176b4d;
    transform: rotate(-5deg) scale(1.06);
}

.circle-emoji-panel {
    position: absolute;
    right: 92px;
    bottom: 58px;
    z-index: 15;
    display: grid;
    gap: 12px;
    width: min(356px, calc(100vw - 28px));
    padding: 14px;
    border: 1px solid rgba(23, 33, 28, .08);
    border-radius: 22px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 60px rgba(23, 33, 28, .18);
    animation: emojiPanelIn 180ms ease both;
}

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

.circle-emoji-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.circle-emoji-head strong {
    color: var(--ink);
    font-size: 15px;
}

.circle-emoji-head small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-align: right;
}

.circle-emoji-section {
    display: grid;
    gap: 7px;
}

.circle-emoji-section > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.circle-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 7px;
}

.circle-emoji-grid.compact-grid {
    grid-template-columns: repeat(8, 1fr);
}

.circle-emoji-choice {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 999px;
    background: #f5f7f6;
    font-size: 22px;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(23, 33, 28, .04);
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.circle-emoji-choice:hover {
    background: #eaf8f1;
    box-shadow: inset 0 0 0 1px rgba(23, 107, 77, .14), 0 8px 16px rgba(23, 107, 77, .1);
    transform: translateY(-2px) scale(1.08);
}

.circle-visibility-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
}

.circle-visibility-selector legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.circle-visibility-selector label {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    border-radius: 6px;
    cursor: pointer;
}

.circle-visibility-selector input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.circle-visibility-selector span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 7px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.circle-visibility-selector label:hover span,
.circle-visibility-selector input:checked + span {
    color: var(--green-dark);
    background: var(--mint);
}

.circle-visibility-selector input[value="public"]:checked + span {
    color: #174f79;
    background: var(--blue-soft);
}

.circle-record-button.is-recording {
    color: white;
    border-color: #b42318;
    background: #d92d20;
    animation: recordPulse 1.2s ease-in-out infinite;
}

.circle-file-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.circle-file-note {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.circle-record-status {
    grid-column: 1 / -1;
    min-height: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

@keyframes recordPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(217, 45, 32, .26);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(217, 45, 32, 0);
    }
}

@keyframes sendIconFly {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }

    70% {
        transform: translateX(9px) translateY(-7px) rotate(-12deg);
        opacity: .82;
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes sendReactionPop {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.94);
    }

    45% {
        opacity: 1;
        transform: translateY(-2px) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes attachmentPreviewIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sendSparkSpin {
    0% {
        transform: scale(.7) rotate(-18deg);
    }

    100% {
        transform: scale(1) rotate(12deg);
    }
}

@keyframes sendDots {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sendButtonShine {
    from {
        transform: translateX(-42%);
    }

    to {
        transform: translateX(52%);
    }
}

@keyframes sentCuePop {
    0% {
        opacity: 0;
        transform: translateY(7px) scale(.96);
    }

    16%,
    78% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-5px) scale(.98);
    }
}

@keyframes sentWave {
    0%,
    100% {
        height: 4px;
        opacity: .56;
    }

    50% {
        height: 13px;
        opacity: 1;
    }
}

@keyframes messageJumpGlow {
    0% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(23, 107, 77, .28);
    }

    38% {
        transform: translateY(-2px);
        box-shadow: 0 0 0 6px rgba(23, 107, 77, .12), 0 12px 28px rgba(23, 107, 77, .16);
    }

    100% {
        transform: translateY(0);
        box-shadow: 0 10px 28px rgba(23, 107, 77, .08);
    }
}

@keyframes unreadBadgePop {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes emojiPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

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

@keyframes emojiSparkleOrbit {
    0%,
    100% {
        opacity: .78;
        transform: translate(0, 0) scale(1);
    }

    38% {
        opacity: 1;
        transform: translate(-2px, 2px) scale(1.22);
    }

    70% {
        opacity: .7;
        transform: translate(2px, -1px) scale(.9);
    }
}

@keyframes messageToolsIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.96);
    }

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

@keyframes reactionPeekIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(.7) rotate(-4deg);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.08) rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes reactionPeekGlow {
    0%,
    100% {
        box-shadow: 0 10px 24px rgba(23, 33, 28, .16);
    }

    50% {
        box-shadow: 0 12px 30px rgba(23, 107, 77, .24);
    }
}

@keyframes reactionEmojiPop {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    45% {
        transform: translateY(-2px) scale(1.12);
    }
}

@keyframes replyPeekPulse {
    0%,
    100% {
        box-shadow: 0 7px 18px rgba(23, 33, 28, .07);
    }

    50% {
        box-shadow: 0 9px 24px rgba(23, 107, 77, .13);
    }
}

@keyframes replyIconFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    42% {
        transform: translateY(-1px) rotate(-4deg);
    }

    68% {
        transform: translateY(0) rotate(3deg);
    }
}

@keyframes replyIconRipple {
    0% {
        opacity: .62;
        transform: scale(.78);
    }

    65% {
        opacity: 0;
        transform: scale(1.24);
    }

    100% {
        opacity: 0;
        transform: scale(1.24);
    }
}

@keyframes repliesPanelIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

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

.share-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #cce8da;
    border-radius: 8px;
    background: #fbfdfb;
}

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

.share-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 112px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    cursor: pointer;
}

.share-option:hover,
.share-option:has(input:checked) {
    border-color: #a9d9c1;
    background: var(--mint);
}

.share-option input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--green);
}

.marketplace-hero {
    background: linear-gradient(135deg, #f7fbf9, #eef7f2);
}

.marketplace-shell,
.marketplace-detail-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 44px;
}

.marketplace-detail-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
}

.marketplace-filter-panel,
.marketplace-seller-panel {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 14px;
    align-self: start;
}

.marketplace-results {
    display: grid;
    gap: 14px;
    min-width: 0;
}

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

.marketplace-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 14px 34px rgba(23, 33, 28, .07);
    overflow: hidden;
    transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}

.marketplace-card:hover {
    border-color: #bfe2d1;
    box-shadow: 0 22px 46px rgba(23, 107, 77, .12);
    transform: translateY(-2px);
}

.marketplace-photo {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: #eef7f2;
    overflow: hidden;
}

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

.marketplace-photo span,
.marketplace-photo-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--green-dark);
    background: linear-gradient(135deg, #f7fbf9, #dff3e9);
}

.marketplace-card-body {
    display: grid;
    gap: 10px;
    padding: 13px;
}

.marketplace-card-body h2 {
    margin: 0 0 3px;
    font-size: 18px;
    line-height: 1.2;
}

.marketplace-card-body p {
    margin: 0;
}

.marketplace-card-body > div > p {
    color: var(--green-dark);
    font-size: 15px;
    font-weight: 950;
}

.marketplace-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.marketplace-gallery img,
.marketplace-photo-placeholder {
    min-height: 220px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.marketplace-gallery img:first-child {
    grid-column: 1 / -1;
    min-height: 360px;
}

.marketplace-photo-placeholder {
    gap: 8px;
    font-weight: 900;
}

.marketplace-related {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.marketplace-existing-photos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.marketplace-existing-photos img {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: cover;
}

.marketplace-posting-guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid #cfe5da;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(23, 107, 77, .08), rgba(23, 79, 121, .06)),
        #ffffff;
    box-shadow: 0 18px 38px rgba(23, 33, 28, .07);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.marketplace-posting-guide.is-stay {
    border-color: #c7ddee;
    background:
        linear-gradient(135deg, rgba(23, 79, 121, .1), rgba(23, 107, 77, .06)),
        #ffffff;
}

.marketplace-posting-guide:hover {
    transform: translateY(-1px);
}

.marketplace-posting-guide span[data-marketplace-guide-kicker] {
    display: block;
    color: var(--green-dark);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.marketplace-posting-guide strong {
    display: block;
    margin-top: 4px;
    color: #17211c;
    font-size: 18px;
    font-weight: 950;
}

.marketplace-posting-guide p {
    margin: 6px 0 0;
    color: #51615a;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
}

.marketplace-guide-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 340px;
}

.marketplace-guide-chips span {
    padding: 7px 10px;
    border: 1px solid #d7e7df;
    border-radius: 999px;
    color: #26352f;
    background: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.marketplace-seller-number-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid #cfe5da;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(23, 107, 77, .09), rgba(23, 79, 121, .07)),
        #ffffff;
    box-shadow: 0 18px 38px rgba(23, 33, 28, .07);
}

.marketplace-seller-number-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--green), #174f79);
    box-shadow: 0 12px 24px rgba(23, 107, 77, .22);
}

.marketplace-seller-number-icon [data-lucide] {
    width: 22px;
    height: 22px;
}

.marketplace-seller-number-card small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.marketplace-seller-number-card strong {
    display: block;
    margin-top: 2px;
    color: #17211c;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: .04em;
}

.marketplace-seller-number-card p {
    margin: 5px 0 0;
    color: #51615a;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.marketplace-photo-uploader {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d5e2dc;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f7faf8);
    box-shadow: 0 16px 36px rgba(23, 33, 28, .06);
}

.marketplace-uploader-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.marketplace-uploader-head strong {
    display: block;
    color: #17211c;
    font-size: 15px;
    font-weight: 950;
}

.marketplace-uploader-head span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.marketplace-uploader-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.marketplace-photo-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
}

.marketplace-photo-tile,
.marketplace-photo-add-card {
    position: relative;
    min-height: 146px;
    border: 1px solid #dce7e2;
    border-radius: 8px;
    background: white;
    overflow: hidden;
}

.marketplace-photo-tile {
    cursor: grab;
    box-shadow: 0 12px 26px rgba(23, 33, 28, .07);
    transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.marketplace-photo-tile:hover {
    border-color: #a9d9c1;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(23, 33, 28, .11);
}

.marketplace-photo-tile.is-dragging {
    opacity: .55;
    transform: scale(.98);
}

.marketplace-photo-tile.is-removing {
    opacity: .52;
}

.marketplace-photo-tile.is-removing img {
    filter: grayscale(1);
}

.marketplace-photo-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 1.2;
    object-fit: cover;
}

.marketplace-photo-tile div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
}

.marketplace-photo-tile span {
    color: #44534d;
    font-size: 11px;
    font-weight: 900;
}

.marketplace-photo-tile:first-child::before {
    content: "Main";
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 999px;
    color: white;
    background: var(--green-dark);
    font-size: 11px;
    font-weight: 950;
}

.marketplace-photo-tile button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid #e4ece8;
    border-radius: 999px;
    color: #34423d;
    background: #f8fbf9;
    font-size: 11px;
    font-weight: 900;
}

.marketplace-photo-tile button:hover {
    color: #8f1f1f;
    border-color: #ffd1d1;
    background: #fff6f6;
}

.marketplace-photo-tile button [data-lucide] {
    width: 13px;
    height: 13px;
}

.marketplace-photo-add-card {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--green-dark);
    border-style: dashed;
    background: #f4fbf7;
    font-weight: 950;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.marketplace-photo-add-card:hover {
    border-color: #8ed0ae;
    background: #eaf8f0;
    transform: translateY(-2px);
}

.marketplace-photo-add-card [data-lucide] {
    width: 28px;
    height: 28px;
}

.shop-hero {
    background:
        linear-gradient(135deg, rgba(23, 107, 77, .1), rgba(23, 79, 121, .08) 54%, rgba(168, 73, 7, .06)),
        linear-gradient(180deg, #ffffff, #f7faf8);
    border-bottom: 1px solid #dfeae4;
}

.marketplace-hero-inner {
    align-items: center;
    gap: clamp(18px, 4vw, 42px);
}

.marketplace-hero h1 {
    max-width: 760px;
    letter-spacing: 0;
}

.marketplace-hero .lede {
    max-width: 720px;
}

.marketplace-hero-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    max-width: 720px;
    margin-top: 18px;
    padding: 6px;
    border: 1px solid #d8e7df;
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 42px rgba(23, 33, 28, .08);
}

.marketplace-hero-search .field {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.marketplace-hero-search .primary-button {
    min-height: 46px;
    border-radius: 8px;
}

.marketplace-hero-card {
    display: grid;
    gap: 14px;
    width: min(340px, 100%);
    padding: 20px;
    border: 1px solid #cfe3da;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 54px rgba(23, 33, 28, .11);
}

.marketplace-hero-card > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
}

.marketplace-hero-card > div span:first-child {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--green), #174f79);
}

.marketplace-hero-card strong {
    font-size: 34px;
    line-height: 1;
}

.marketplace-hero-card small,
.marketplace-hero-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.marketplace-category-strip {
    position: sticky;
    top: 73px;
    z-index: 22;
    display: flex;
    gap: 8px;
    padding: 11px clamp(16px, 4vw, 42px);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    overflow-x: auto;
    scrollbar-width: none;
    backdrop-filter: blur(12px);
}

.marketplace-category-strip::-webkit-scrollbar {
    display: none;
}

.marketplace-category-strip a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #d8e6df;
    border-radius: 999px;
    color: #33413c;
    background: #ffffff;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.marketplace-category-strip a:hover,
.marketplace-category-strip a.active {
    border-color: #a9d9c1;
    background: var(--mint);
    transform: translateY(-1px);
}

.marketplace-category-strip span {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--green-dark);
    background: #f0faf5;
    font-size: 11px;
}

.marketplace-shell.shop-shell {
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) minmax(250px, 300px);
    align-items: start;
    max-width: 1500px;
    gap: 20px;
}

.shop-filter-panel,
.marketplace-cart-panel {
    position: sticky;
    top: 136px;
    display: grid;
    gap: 14px;
    align-self: start;
    border-color: #dce8e2;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 14px 34px rgba(23, 33, 28, .06);
}

.marketplace-trust-stack {
    display: grid;
    gap: 9px;
    padding-top: 4px;
}

.marketplace-trust-stack span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #35423e;
    font-size: 13px;
    font-weight: 850;
}

.marketplace-trust-stack [data-lucide] {
    width: 17px;
    height: 17px;
    color: var(--green);
}

.marketplace-featured-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.marketplace-featured-card {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(15, 79, 59, .13);
    border-radius: 14px;
    background: white;
    box-shadow: 0 14px 30px rgba(23, 33, 28, .07);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.marketplace-featured-card:hover {
    border-color: rgba(23, 107, 77, .3);
    box-shadow: 0 18px 38px rgba(23, 107, 77, .12);
    transform: translateY(-2px);
}

.marketplace-featured-card img,
.marketplace-featured-card > span {
    width: 100%;
    aspect-ratio: 1.35 / 1;
    border-radius: 12px;
    object-fit: cover;
    background: linear-gradient(135deg, #f7faf8, #eaf5ef);
}

.marketplace-featured-card > span {
    display: grid;
    place-items: center;
    color: var(--green);
}

.marketplace-featured-card strong,
.marketplace-featured-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-featured-card strong {
    font-size: 13.5px;
    font-weight: 950;
}

.marketplace-featured-card small {
    color: var(--green-dark);
    font-size: 14px;
    font-weight: 950;
}

.marketplace-featured-card em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    justify-self: start;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #4f6259;
    background: #f3faf6;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.marketplace-featured-card em [data-lucide] {
    width: 13px;
    height: 13px;
}

.marketplace-shop-top .results-headline {
    display: grid;
    gap: 3px;
}

.marketplace-shop-top .results-headline span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.shop-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
    gap: 18px;
}

.shop-product-card {
    overflow: hidden;
    border: 1px solid rgba(15, 79, 59, .13);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .07);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.shop-product-card:hover {
    border-color: rgba(23, 107, 77, .32);
    box-shadow: 0 22px 46px rgba(15, 23, 42, .11);
    transform: translateY(-3px);
}

.shop-product-photo {
    position: relative;
    aspect-ratio: 1 / .84;
    margin: 10px 10px 0;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7faf8, #edf4f0);
}

.shop-product-photo img {
    transition: transform 260ms ease;
}

.shop-product-card:hover .shop-product-photo img {
    transform: scale(1.035);
}

.shop-product-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 20, 16, .14), transparent 32%),
        linear-gradient(0deg, rgba(10, 20, 16, .42), transparent 38%);
    opacity: .72;
    pointer-events: none;
}

.shop-product-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #176b4d, #079858);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(5, 87, 58, .18);
}

.shop-product-views {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(15, 23, 42, .54);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.shop-product-views [data-lucide] {
    width: 13px;
    height: 13px;
}

.shop-product-body {
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 12px 13px 13px;
}

.shop-product-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid #eef3f0;
}

.marketplace-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding: 10px;
    border: 1px solid #d8e6df;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.marketplace-pager-button,
.marketplace-pager-pages a,
.marketplace-pager-pages span,
.marketplace-pager-pages em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid #d8e6df;
    border-radius: 999px;
    color: #26352f;
    background: #ffffff;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    text-decoration: none;
}

.marketplace-pager-button {
    gap: 5px;
    padding: 0 12px;
}

.marketplace-pager-button [data-lucide] {
    width: 15px;
    height: 15px;
}

.marketplace-pager-button:hover,
.marketplace-pager-pages a:hover,
.marketplace-pager-pages span.active {
    border-color: var(--green-dark);
    color: white;
    background: var(--green-dark);
}

.marketplace-pager-button.disabled,
.marketplace-pager-pages em {
    color: #92a19a;
    background: #f6faf8;
    pointer-events: none;
}

.marketplace-pager-pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shop-product-price-row strong,
.shop-buy-price strong {
    min-width: 0;
    color: #0f4f3b;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-product-title {
    color: #17211c;
    display: -webkit-box;
    min-height: 42px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shop-product-title:hover {
    color: var(--green-dark);
}

.shop-product-meta {
    gap: 5px;
    min-height: 27px;
    overflow: hidden;
    flex-wrap: nowrap;
}

.shop-product-meta span {
    border-color: #e0e8e4;
    background: #f7fbf8;
    color: #51645c;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-product-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 18px;
    color: #f6a400;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.shop-product-rating small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-product-rating small [data-lucide] {
    width: 13px;
    height: 13px;
    color: var(--green);
    flex: 0 0 auto;
}

.marketplace-cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(23, 107, 77, .22);
    border-radius: 999px;
    color: #ffffff;
    background: var(--green);
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(23, 107, 77, .16);
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.marketplace-cart-button:hover,
.marketplace-cart-button.is-added,
.marketplace-detail-cart-button.is-added {
    border-color: var(--green-dark);
    background: var(--green-dark);
    box-shadow: 0 12px 26px rgba(15, 79, 59, .22);
    transform: translateY(-1px);
}

.marketplace-cart-button [data-lucide] {
    width: 15px;
    height: 15px;
}

.shop-card-actions {
    align-items: center;
}

.shop-card-actions form {
    margin: 0;
}

.marketplace-cart-panel,
.marketplace-cart-mini {
    display: grid;
    gap: 12px;
}

.marketplace-cart-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.marketplace-cart-head h2 {
    margin: 0;
    font-size: 19px;
}

.marketplace-cart-head > span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border-radius: 999px;
    color: white;
    background: var(--green);
    font-weight: 950;
}

.marketplace-cart-empty {
    display: grid;
    gap: 8px;
    place-items: center;
    min-height: 130px;
    padding: 16px;
    border: 1px dashed #cfded6;
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

.marketplace-cart-empty[hidden] {
    display: none;
}

.marketplace-cart-empty [data-lucide] {
    width: 30px;
    height: 30px;
    color: var(--green);
}

.marketplace-cart-empty p {
    margin: 0;
    font-size: 13px;
    font-weight: 750;
}

.marketplace-cart-items {
    display: grid;
    gap: 9px;
    max-height: 390px;
    overflow: auto;
}

.marketplace-cart-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfb;
    animation: marketplaceCartIn 180ms ease-out;
}

.marketplace-cart-item img,
.marketplace-cart-item a > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    color: var(--green);
    background: var(--mint);
}

.marketplace-cart-item strong,
.marketplace-cart-item small,
.marketplace-cart-item em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketplace-cart-item strong {
    font-size: 12px;
    font-weight: 950;
}

.marketplace-cart-item small {
    color: #a84907;
    font-size: 12px;
    font-weight: 950;
}

.marketplace-cart-item em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
}

.marketplace-cart-item button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #8a3f33;
    background: white;
}

.marketplace-cart-item button [data-lucide] {
    width: 14px;
    height: 14px;
}

.marketplace-cart-footer {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.marketplace-cart-footer strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
}

.marketplace-empty-card {
    display: grid;
    justify-items: start;
    gap: 10px;
}

.marketplace-empty-card [data-lucide] {
    width: 34px;
    height: 34px;
    color: var(--green);
}

.marketplace-detail-hero {
    background: linear-gradient(135deg, #ffffff, #f4f8f6);
}

.marketplace-detail-layout.shop-detail-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    max-width: 1440px;
}

.marketplace-product-detail {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.shop-detail-gallery {
    margin-bottom: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 16px 34px rgba(23, 33, 28, .06);
}

.shop-detail-gallery img,
.shop-detail-gallery .marketplace-photo-placeholder {
    border-radius: 8px;
}

.shop-detail-section {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 12px 28px rgba(23, 33, 28, .055);
}

.shop-detail-section h2,
.shop-detail-section p {
    margin: 0;
}

.shop-buy-panel {
    gap: 16px;
}

.shop-buy-price {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid #f2ddc5;
    border-radius: 8px;
    background: #fff8ee;
}

.shop-buy-price span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.marketplace-detail-cart-button {
    width: 100%;
}

.shop-seller-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfb;
}

.marketplace-cart-mini {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfb;
}

.marketplace-cart-mini .marketplace-cart-items {
    max-height: 230px;
}

.shop-related-row .mini-card {
    background: #fbfdfb;
}

.shop-product-page {
    display: grid;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 46px;
}

.shop-product-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 900;
}

.shop-product-back [data-lucide] {
    width: 17px;
    height: 17px;
}

.shop-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .78fr);
    gap: 28px;
    align-items: start;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 18px 44px rgba(23, 33, 28, .07);
}

.shop-product-media {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.shop-product-main-image {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 520px;
    border: 1px solid #e1e9e5;
    border-radius: 8px;
    background: #fbfcfb;
    overflow: hidden;
}

.shop-product-main-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 620px;
    object-fit: contain;
    padding: 26px;
}

.shop-image-zoom {
    position: absolute;
    left: 12px;
    top: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #47534f;
    background: white;
    box-shadow: 0 8px 18px rgba(23, 33, 28, .08);
}

.shop-image-zoom [data-lucide] {
    width: 15px;
    height: 15px;
}

.shop-product-thumbs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.shop-product-thumbs button {
    width: 86px;
    height: 76px;
    flex: 0 0 auto;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.shop-product-thumbs button:hover,
.shop-product-thumbs button.active {
    border-color: var(--green);
    box-shadow: 0 8px 18px rgba(23, 107, 77, .12);
    transform: translateY(-1px);
}

.shop-product-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-product-purchase {
    display: grid;
    gap: 15px;
    min-width: 0;
    padding: 4px 4px 4px 0;
}

.shop-product-purchase h1 {
    margin: 0;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.18;
}

.shop-detail-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f6a400;
    font-size: 13px;
    font-weight: 950;
}

.shop-detail-rating small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.shop-detail-price {
    display: grid;
    gap: 4px;
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--line);
}

.shop-detail-price strong {
    color: #17211c;
    font-size: 28px;
    font-weight: 950;
}

.shop-detail-price span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.shop-product-facts {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.shop-product-facts div {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.shop-product-facts dt,
.shop-product-facts dd {
    margin: 0;
    font-size: 13px;
}

.shop-product-facts dt {
    color: #25332e;
    font-weight: 950;
}

.shop-product-facts dd {
    color: #55635e;
    font-weight: 750;
}

.shop-option-group {
    display: grid;
    gap: 9px;
}

.shop-option-group > strong,
.shop-quantity-row > strong {
    color: #25332e;
    font-size: 13px;
    font-weight: 950;
}

.shop-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-color-swatches span {
    width: 32px;
    height: 32px;
    border: 2px solid white;
    border-radius: 999px;
    box-shadow: 0 0 0 1px #c9d5cf;
}

.shop-color-swatches .shop-color-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 34px;
    padding: 0 10px;
}

.shop-color-choice b {
    color: #17211c;
    font-size: 11px;
    font-weight: 950;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .66);
}

.shop-color-swatches .black {
    background: #111418;
}

.shop-color-swatches .silver {
    background: #bcc5c0;
}

.shop-color-swatches .mint {
    background: #b9e3db;
}

.shop-storage-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-storage-options button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: #293732;
    background: white;
    font-size: 12px;
    font-weight: 900;
}

.shop-storage-options button:hover,
.shop-storage-options button.active {
    border-color: var(--green-dark);
    background: #f3faf6;
}

.shop-quantity-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shop-quantity-stepper {
    display: inline-grid;
    grid-template-columns: 32px 42px 32px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: white;
}

.shop-quantity-stepper button,
.shop-quantity-stepper input {
    width: 100%;
    border: 0;
    background: white;
    text-align: center;
}

.shop-quantity-stepper button {
    color: #34423d;
    font-weight: 950;
}

.shop-quantity-stepper button:hover {
    background: var(--mint);
}

.shop-quantity-stepper input {
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
    font-size: 13px;
    font-weight: 900;
    -moz-appearance: textfield;
}

.shop-quantity-stepper input::-webkit-outer-spin-button,
.shop-quantity-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.shop-buy-action,
.shop-buy-now-button {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
}

.shop-buy-now-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    color: white;
    background: #111418;
    font-weight: 950;
    text-decoration: none;
}

.shop-buy-now-button:hover,
.shop-buy-now-button:focus-visible {
    background: #27302c;
}

.shop-buy-now-button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.shop-product-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.shop-product-tools > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    color: #394741;
    background: transparent;
    font-size: 12px;
    font-weight: 900;
}

.shop-product-tools [data-lucide] {
    width: 15px;
    height: 15px;
}

.marketplace-hs-number,
.marketplace-secure-contact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.marketplace-hs-number {
    width: fit-content;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid #cfe5da;
    border-radius: 999px;
    color: var(--green-dark);
    background: #eefaf3;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .02em;
}

.marketplace-hs-number [data-lucide],
.marketplace-secure-contact [data-lucide] {
    width: 15px;
    height: 15px;
}

.marketplace-hs-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.marketplace-hs-actions form,
.marketplace-hs-actions button {
    width: 100%;
}

.marketplace-hs-actions .secondary-button {
    justify-content: center;
    min-height: 42px;
    border-color: #cfe5da;
    background: #fbfefc;
}

.marketplace-hs-actions .secondary-button:hover {
    border-color: #9ad2b3;
    background: #eefaf3;
}

.shop-shipping-box {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
}

.shop-shipping-box summary {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #25332e;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.shop-shipping-box p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.shop-detail-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.shop-detail-lower .account-required,
.shop-detail-related {
    grid-column: 1 / -1;
}

@keyframes marketplaceCartIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
}

.check-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}

.vertical-actions {
    display: grid;
}

.connect-hero {
    padding-block: 20px;
    background:
        linear-gradient(135deg, rgba(247, 251, 249, .96), rgba(238, 247, 242, .92)),
        var(--paper);
}

.connect-hero h1 {
    max-width: 760px;
    font-size: clamp(28px, 3.2vw, 44px);
}

.connect-hero .lede {
    max-width: 720px;
}

.connect-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.connect-guest-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .62fr);
    gap: clamp(22px, 5vw, 64px);
    align-items: center;
    max-width: 1220px;
    margin: 0 auto;
    padding: clamp(34px, 7vw, 82px) clamp(16px, 4vw, 42px);
}

.connect-guest-copy h1 {
    max-width: 760px;
    margin-bottom: 14px;
    font-size: clamp(34px, 5.2vw, 68px);
    line-height: 1.01;
}

.connect-guest-actions,
.connect-guest-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.connect-guest-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(23, 107, 77, .16);
    border-radius: 999px;
    color: #234338;
    background: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(15, 79, 59, .06);
}

.connect-guest-points [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--green);
}

.connect-guest-phone {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 520px;
    padding: 20px;
    border: 1px solid rgba(23, 107, 77, .16);
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .96), transparent 30%),
        linear-gradient(160deg, #f8fffb, #e9f7f0 52%, #d3eee1);
    box-shadow: 0 34px 84px rgba(9, 64, 47, .18);
    overflow: hidden;
}

.connect-guest-phone::before {
    content: "";
    position: absolute;
    inset: auto 24px 18px;
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 33, 28, .2);
}

.connect-guest-phone-top,
.connect-guest-number,
.connect-guest-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(23, 107, 77, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(14px);
}

.connect-guest-phone-top {
    min-height: 54px;
    padding: 0 16px;
}

.connect-guest-phone-top span {
    width: 36px;
    height: 8px;
    border-radius: 999px;
    background: #19362d;
    opacity: .16;
}

.connect-guest-phone-top strong {
    font-weight: 950;
}

.connect-guest-number {
    justify-content: flex-start;
    padding: 14px;
}

.connect-guest-number > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: white;
    background: linear-gradient(135deg, #176b4d, #0fa66a);
    box-shadow: 0 12px 26px rgba(23, 107, 77, .22);
}

.connect-guest-number small,
.connect-guest-number strong {
    display: block;
}

.connect-guest-number small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.connect-guest-number strong {
    margin-top: 2px;
    color: #0f4f3b;
    font-size: 22px;
    font-weight: 950;
}

.connect-guest-bubble {
    max-width: 82%;
    padding: 13px 15px;
    border-radius: 22px;
    font-weight: 800;
    line-height: 1.35;
    animation: connectGuestBubble 700ms ease both;
}

.connect-guest-bubble.incoming {
    justify-self: start;
    color: #20362d;
    background: white;
    border-bottom-left-radius: 8px;
}

.connect-guest-bubble.outgoing {
    justify-self: end;
    color: white;
    background: #176b4d;
    border-bottom-right-radius: 8px;
    animation-delay: 120ms;
}

.connect-guest-toolbar {
    align-self: end;
    justify-content: center;
    padding: 12px;
}

.connect-guest-toolbar span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: var(--green-dark);
    background: #f4fbf7;
}

.connect-guest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 42px) 52px;
}

.connect-guest-grid article {
    padding: 20px;
    border: 1px solid rgba(23, 107, 77, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 34px rgba(15, 79, 59, .06);
}

.connect-guest-grid article > [data-lucide] {
    width: 28px;
    height: 28px;
    color: var(--green);
}

.connect-guest-grid strong {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    font-weight: 950;
}

.connect-guest-grid p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

@keyframes connectGuestBubble {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

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

.connect-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 44px;
}

.connect-workspace {
    position: relative;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
    max-width: 1460px;
    margin: 0 auto;
    padding: 18px clamp(12px, 2.4vw, 28px) 38px;
    animation: connectWorkspaceIn 320ms ease both;
}

.connect-phonebook-column,
.connect-numbers-column,
.connect-saved-column {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 12px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}

.connect-saved-column {
    padding-right: 0;
}

.connect-number-card {
    position: relative;
    display: grid;
    gap: 8px;
    align-self: start;
}

.connect-phonebook-column .connect-number-card {
    position: static;
    top: auto;
}

.hs-number-plate {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #d7dddb;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 22px rgba(23, 33, 28, .045);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.hs-number-plate:hover {
    transform: translateY(-1px);
    border-color: #b9c6c1;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(23, 33, 28, .075);
}

.hs-number-plate.own {
    grid-template-columns: auto minmax(0, 1fr) auto;
    border-color: #d9e0dd;
    background: #ffffff;
}

.hs-number-plate.own.compact-identity {
    gap: 9px;
    padding: 7px 8px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(23, 33, 28, .055);
}

.hs-number-plate.contact,
.hs-number-plate.search-result {
    width: 100%;
}

.hs-number-plate.search-result {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 66px;
    padding: 9px 10px;
    overflow: visible;
}

.hs-number-plate.conversation {
    border-color: #d9e0dd;
    background: #ffffff;
}

.hs-number-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid #4f5855;
    border-radius: 999px;
    color: #404844;
    background: rgba(255, 255, 255, .58);
    box-shadow: none;
    font-size: 11px;
    font-weight: 800;
}

.connect-kind-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(23, 33, 28, .1);
}

.connect-kind-dot.personal {
    background: #176b4d;
}

.connect-kind-dot.group {
    background: #174f79;
}

.hs-number-orb::after {
    content: none;
}

.hs-number-plate.search-result .hs-number-orb {
    color: #344054;
    border-color: #4f5855;
    background: #ffffff;
}

.hs-number-plate.contact .hs-number-orb {
    color: var(--green-dark);
    border-color: #52635d;
    background: #ffffff;
}

.hs-number-plate.conversation .hs-number-orb {
    width: 46px;
    height: 46px;
    border-color: #4f5855;
    color: #404844;
    background: #ffffff;
    font-size: 12px;
}

.hs-number-plate.group-conversation .hs-number-orb {
    color: #174f79;
    border-color: #174f79;
}

.hs-number-plate.group-conversation .hs-number-orb [data-lucide] {
    width: 18px;
    height: 18px;
}

.hs-number-plate.own .hs-number-orb {
    width: 46px;
    height: 46px;
}

.hs-number-plate.own.compact-identity .hs-number-orb {
    width: 34px;
    height: 34px;
    border-width: 1.5px;
}

.connect-photo-edit {
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.connect-photo-edit:hover,
.connect-photo-edit:focus-visible {
    transform: translateY(-1px) scale(1.04);
    outline: none;
}

.connect-photo-edit-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: white;
    background: #0f4f3b;
    box-shadow: 0 8px 18px rgba(15, 79, 59, .24);
}

.connect-photo-edit-badge [data-lucide] {
    width: 12px;
    height: 12px;
}

.hs-number-text {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.hs-number-text small,
.hs-number-text strong,
.hs-number-text em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-number-text small {
    color: #5e6864;
    font-size: 11px;
    font-weight: 700;
}

.hs-number-text strong {
    color: #232927;
    font-family: var(--font-ui);
    font-size: clamp(18px, 2vw, 27px);
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
}

.hs-number-plate.contact .hs-number-text strong,
.hs-number-plate.search-result .hs-number-text strong {
    font-size: clamp(15px, 1.35vw, 21px);
}

.hs-number-plate.own.compact-identity .hs-number-text small {
    font-size: 10.5px;
}

.hs-number-plate.own.compact-identity .hs-number-text strong {
    font-size: clamp(14px, 1.12vw, 17px);
    font-weight: 680;
    letter-spacing: 0;
}

.hs-number-plate.search-result .hs-number-text strong {
    color: #232927;
    font-size: clamp(15px, 1.08vw, 18px);
}

.hs-number-plate.conversation .hs-number-text strong {
    color: #232927;
    font-size: clamp(18px, 1.45vw, 24px);
}

.hs-number-text em {
    color: #7b8580;
    font-size: 10px;
    font-style: normal;
    font-weight: 650;
}

.connect-save-card,
.connect-phonebook-panel,
.connect-directory-panel {
    display: grid;
    gap: 9px;
}

.connect-number-card,
.connect-directory-panel,
.connect-phonebook-panel,
.connect-conversation-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.connect-directory-panel,
.connect-phonebook-panel {
    padding-top: 4px;
}

.connect-number-search {
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0;
    padding: 7px;
    border-color: #d7dddb;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 8px 22px rgba(23, 33, 28, .035);
}

.connect-number-list {
    display: grid;
    gap: 9px;
}

.connect-number-row {
    display: grid;
    gap: 6px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    animation: connectRowIn 260ms ease both;
}

.connect-number-row:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.connect-plate-actions {
    display: grid;
    grid-template-columns: repeat(4, 34px);
    gap: 6px;
    align-items: center;
    justify-content: end;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.connect-plate-actions form {
    margin: 0;
}

.connect-plate-action,
.connect-save-popover.icon-popover summary {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1.5px solid #4f5855;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #3f4744;
    cursor: pointer;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.connect-plate-action.sms {
    color: #32403b;
    border-color: #4f5855;
    background: #ffffff;
}

.connect-plate-action.call {
    color: #ffffff;
    border-color: #176b4d;
    background: #176b4d;
    box-shadow: 0 8px 18px rgba(23, 107, 77, .18);
}

.connect-plate-action.video-call {
    color: #ffffff;
    border-color: #174f79;
    background: #174f79;
    box-shadow: 0 8px 18px rgba(23, 79, 121, .18);
}

.connect-save-popover.icon-popover summary {
    color: #32403b;
    border-color: #4f5855;
    background: #ffffff;
}

.connect-plate-action:hover,
.connect-save-popover.icon-popover summary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(23, 33, 28, .08);
}

.connect-save-popover.icon-popover[open] summary {
    color: #176b4d;
    border-color: #176b4d;
    background: #f0faf5;
}

.connect-plate-action [data-lucide],
.connect-save-popover.icon-popover summary [data-lucide] {
    width: 15px;
    height: 15px;
}

.connect-plate-action span,
.connect-save-popover.icon-popover summary span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.connect-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.connect-row-actions form {
    margin: 0;
}

.icon-only-action {
    width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 999px;
}

.icon-only-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.connect-save-popover {
    position: relative;
}

.connect-save-popover summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid #cce8da;
    border-radius: 999px;
    color: var(--green-dark);
    background: white;
    font-size: 11px;
    font-weight: 950;
    list-style: none;
    cursor: pointer;
}

.connect-save-popover summary::-webkit-details-marker {
    display: none;
}

.connect-save-popover[open] summary {
    border-color: var(--green);
    background: var(--mint);
}

.connect-save-popover.icon-popover[open] summary {
    color: #176b4d;
    border-color: #176b4d;
    background: #f0faf5;
}

.connect-save-popover form {
    position: absolute;
    right: 0;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 7px;
    width: min(270px, 78vw);
    margin-top: 6px;
    padding: 8px;
    border: 1px solid #cce8da;
    border-radius: 12px;
    background: white;
    box-shadow: 0 18px 42px rgba(23, 33, 28, .14);
}

.connect-save-popover.icon-popover form {
    top: calc(100% + 6px);
    margin-top: 0;
}

.connect-save-popover .field {
    min-height: 34px;
    padding: 0 9px;
}

.connect-quick-save {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 9px;
    border: 1px solid #d7dddb;
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 22px rgba(23, 33, 28, .035);
}

.connect-quick-save .field {
    min-height: 36px;
    padding: 0 9px;
}

.compact-title-row {
    align-items: start;
}

.compact-title-row h2 {
    margin: 0;
    font-size: 18px;
}

.compact-note-field {
    min-height: 70px;
}

.connect-save-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.connect-save-inline .field {
    min-height: 40px;
    padding: 0 11px;
}

.connect-contact-list {
    display: grid;
    gap: 9px;
}

.connect-contact-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    animation: contactSlideIn 220ms ease both;
}

.connect-contact-item:hover,
.connect-contact-item.active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.connect-contact-item.active .hs-number-plate.contact {
    border-color: #176b4d;
    box-shadow: 0 12px 28px rgba(23, 107, 77, .1);
}

.connect-contact-list .hs-number-plate.contact {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 68px;
}

.connect-unread-badge {
    display: grid;
    place-items: center;
    min-width: 23px;
    height: 23px;
    padding: 0 7px;
    border-radius: 999px;
    color: white;
    background: #176b4d;
    box-shadow: 0 8px 18px rgba(23, 107, 77, .18);
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    animation: unreadBadgePop 1800ms ease-in-out infinite;
}

.connect-contact-list .hs-number-plate.contact .hs-number-text small {
    color: #17211c;
    font-size: 14px;
    font-weight: 850;
}

.connect-contact-list .hs-number-plate.contact .hs-number-text strong {
    color: #6c7772;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0;
}

.connect-contact-list .hs-number-plate.contact .hs-number-text em {
    color: #176b4d;
    font-size: 10.5px;
}

.connect-group-section {
    display: grid;
    gap: 9px;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid #dfe6e3;
}

.connect-group-create {
    overflow: hidden;
    border: 1px solid #d7dddb;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(245, 252, 248, .94));
    box-shadow: 0 10px 26px rgba(23, 33, 28, .045);
}

.connect-group-create summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    color: #17211c;
    cursor: pointer;
    list-style: none;
}

.connect-group-create summary::-webkit-details-marker {
    display: none;
}

.connect-group-create summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 850;
}

.connect-group-create summary [data-lucide] {
    width: 16px;
    height: 16px;
    color: #176b4d;
}

.connect-group-create summary small {
    color: #6c7772;
    font-size: 10.5px;
    font-weight: 650;
    text-align: right;
}

.connect-group-create[open] summary {
    border-bottom: 1px solid #e0ebe6;
}

.connect-group-create form {
    padding: 10px;
}

.connect-group-manage-popover form {
    grid-template-columns: minmax(170px, 1fr) auto;
}

.connect-save-popover.icon-popover .connect-member-picker-form {
    width: min(430px, 86vw);
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.connect-member-picker-head {
    display: grid;
    gap: 2px;
}

.connect-member-picker-head strong {
    color: #17211c;
    font-size: 13px;
    font-weight: 900;
}

.connect-member-picker-head small,
.connect-member-empty {
    color: #6c7772;
    font-size: 11px;
    font-weight: 650;
}

.connect-member-saved-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.connect-member-saved-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    min-height: 50px;
    padding: 7px;
    border: 1px solid #d7dddb;
    border-radius: 9px;
    color: #17211c;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.connect-member-saved-option:hover {
    transform: translateY(-1px);
    border-color: #a9d9c1;
    background: #f7fcfa;
    box-shadow: 0 10px 22px rgba(23, 107, 77, .08);
}

.connect-member-saved-option > span {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #176b4d;
    background: #e8f6ef;
    font-size: 10px;
    font-weight: 950;
}

.connect-member-saved-option strong,
.connect-member-saved-option small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connect-member-saved-option strong {
    font-size: 12px;
    font-weight: 850;
}

.connect-member-saved-option small {
    color: #6c7772;
    font-size: 10px;
    font-weight: 700;
}

.connect-member-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.connect-group-list {
    display: grid;
    gap: 9px;
}

.connect-group-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 66px;
    padding: 9px 10px;
    border: 1px solid #d7dddb;
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 22px rgba(23, 33, 28, .04);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    animation: contactSlideIn 220ms ease both;
}

.connect-group-item:hover {
    transform: translateY(-1px);
    border-color: #b9c6c1;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(23, 33, 28, .075);
}

.connect-group-item.active {
    border-color: #174f79;
    box-shadow: 0 12px 28px rgba(23, 79, 121, .11);
}

.connect-group-item.has-unread::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 50%;
    width: 7px;
    height: 24px;
    border-radius: 999px;
    background: #174f79;
    transform: translateY(-50%);
}

.connect-group-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid #174f79;
    border-radius: 999px;
    color: #174f79;
    background: #ffffff;
}

.connect-group-avatar [data-lucide] {
    width: 17px;
    height: 17px;
}

.connect-group-avatar b {
    position: absolute;
    right: -2px;
    top: -5px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    background: #174f79;
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
}

.connect-group-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.connect-group-copy strong,
.connect-group-copy small,
.connect-group-copy em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connect-group-copy strong {
    color: #232927;
    font-size: 14px;
    font-weight: 720;
}

.connect-group-copy small {
    color: #5e6864;
    font-size: 11px;
    font-weight: 650;
}

.connect-group-copy em {
    color: #7b8580;
    font-size: 10px;
    font-style: normal;
    font-weight: 650;
}

.connect-group-meta {
    display: grid;
    gap: 4px;
    justify-items: end;
}

.connect-group-meta small {
    color: #7b8580;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}

.connect-group-meta b {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    color: white;
    background: #174f79;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}

.connect-mini-icon-link {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid #4f5855;
    border-radius: 999px;
    color: #32403b;
    background: #ffffff;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.connect-mini-icon-link:hover {
    transform: translateY(-1px);
    border-color: #176b4d;
    box-shadow: 0 8px 16px rgba(23, 33, 28, .08);
}

.connect-mini-icon-link [data-lucide] {
    width: 15px;
    height: 15px;
}

.connect-mini-icon-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.connect-contact-main {
    display: block;
    min-width: 0;
}

.connect-contact-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, var(--green), #174f79);
    font-size: 12px;
    font-weight: 950;
}

.connect-contact-avatar.large {
    width: 52px;
    height: 52px;
    font-size: 15px;
    box-shadow: 0 14px 30px rgba(23, 107, 77, .18);
}

.connect-contact-main > span:not(.hs-number-plate) strong,
.connect-contact-main > span:not(.hs-number-plate) small,
.connect-contact-main > span:not(.hs-number-plate) em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connect-contact-main > span:not(.hs-number-plate) strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
}

.connect-contact-main > span:not(.hs-number-plate) small {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 900;
}

.connect-contact-main > span:not(.hs-number-plate) em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.connect-contact-edit {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 9px;
    border: 1px solid #d7dddb;
    border-radius: 8px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 8px 22px rgba(23, 33, 28, .04);
}

.connect-contact-edit summary {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.connect-contact-edit form {
    display: grid;
    gap: 8px;
    margin: 0;
}

.connect-empty-phonebook,
.connect-conversation-empty {
    display: grid;
    gap: 10px;
    place-items: center;
    min-height: 210px;
    padding: 18px;
    border: 1px dashed #b8cbc2;
    border-radius: 8px;
    background: var(--wash);
    color: var(--muted);
    text-align: center;
}

.connect-empty-phonebook p,
.connect-conversation-empty p {
    margin: 0;
    line-height: 1.5;
}

.connect-empty-phonebook [data-lucide],
.connect-conversation-empty [data-lucide] {
    width: 38px;
    height: 38px;
    color: var(--green);
}

.connect-empty-phonebook.compact {
    min-height: 120px;
    padding: 14px;
}

.connect-conversation-panel {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 9px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow: auto;
    padding: 0 4px;
    box-shadow: none;
    scrollbar-width: thin;
}

.connect-chat-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

.connect-chat-head h2,
.connect-chat-head p {
    margin: 0;
}

.connect-chat-head h2 {
    font-size: 20px;
}

.connect-chat-head p {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-weight: 800;
}

.connect-chat-head p span {
    color: var(--green-dark);
    font-weight: 950;
}

.connect-chat-head p small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

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

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

.connect-contact-note {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #cce8da;
    border-radius: 8px;
    color: var(--green-dark);
    background: #f1faf5;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.connect-conversation-panel .circle-chat {
    padding: 0;
    border: 0;
    background: transparent;
}

.connect-conversation-panel .circle-member-strip {
    display: none;
}

.connect-conversation-panel .circle-message-list {
    max-height: min(50vh, 390px);
    min-height: 260px;
    border-color: #edf4f0;
    background: linear-gradient(180deg, rgba(251, 252, 251, .92), rgba(255, 255, 255, .96));
}

.connect-conversation-panel .circle-chat-form {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
}

.connect-conversation-panel .circle-chat-form textarea.field {
    grid-column: 1 / -1;
    min-height: 78px;
}

.connect-conversation-panel .circle-file-note {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.connect-photo-orb {
    overflow: hidden;
    color: white;
    border-color: #dce4e0;
    background: linear-gradient(135deg, #176b4d, #0aa36c);
}

.connect-photo-orb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.connect-conversation-panel {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: min(720px, calc(100vh - 110px));
    padding: 0;
    border: 1px solid #dfe7e3;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(23, 33, 28, .12);
    overflow: hidden;
}

.connect-chat-head {
    gap: 10px;
    padding: 15px 16px 13px;
    border-bottom: 1px solid rgba(23, 33, 28, .08);
    background:
        linear-gradient(135deg, rgba(240, 255, 247, .96), rgba(247, 252, 255, .98)),
        #ffffff;
}

.connect-sms-profile-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
}

.connect-sms-profile-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(23, 33, 28, .1);
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, #176b4d, #0aa36c);
    box-shadow: 0 12px 26px rgba(23, 107, 77, .16);
    overflow: hidden;
    font-size: 13px;
    font-weight: 950;
    text-decoration: none;
}

.connect-sms-profile-avatar.profile-link:hover {
    box-shadow: 0 16px 34px rgba(23, 107, 77, .22);
    transform: translateY(-1px);
}

.connect-sms-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.connect-sms-profile-avatar.group-avatar {
    color: #174f79;
    background: #ffffff;
    border-color: rgba(23, 79, 121, .22);
    box-shadow: 0 12px 26px rgba(23, 79, 121, .13);
}

.connect-sms-profile-avatar.group-avatar [data-lucide] {
    width: 22px;
    height: 22px;
}

.connect-sms-profile-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.connect-sms-profile-copy small,
.connect-sms-profile-copy strong,
.connect-sms-profile-copy em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connect-sms-profile-copy small {
    color: #66736d;
    font-size: 11px;
    font-weight: 850;
}

.connect-sms-profile-copy strong {
    color: #111827;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.08;
}

.connect-sms-profile-copy em {
    color: #76817c;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.connect-conversation-panel .connect-sms-chat {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-height: 0;
    overflow: hidden;
}

.connect-conversation-panel .circle-message-list {
    height: min(58vh, 520px);
    max-height: none;
    min-height: 360px;
    padding: 20px 16px;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 50% -20%, rgba(210, 255, 231, .72), transparent 38%),
        linear-gradient(180deg, #fbfdfc 0%, #ffffff 42%, #fbfcfb 100%);
    gap: 11px;
}

.connect-sms-chat .circle-message-date {
    align-self: center;
    margin: 5px 0 2px;
    color: #8a9490;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.connect-sms-chat .circle-message-row {
    max-width: 88%;
    gap: 7px;
    animation: smsBubbleIn 220ms ease both;
}

.connect-sms-chat .circle-message-row.mine {
    max-width: 82%;
}

.connect-sms-chat .circle-message-avatar {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(23, 33, 28, .07);
    background: #aeb7b2;
    box-shadow: 0 7px 16px rgba(23, 33, 28, .08);
}

.connect-sms-chat .circle-message-avatar.mine {
    background: #176b4d;
}

.connect-sms-chat .circle-message {
    max-width: min(100%, 560px);
    padding: 10px 34px 10px 14px;
    border: 0;
    border-radius: 20px 20px 20px 6px;
    color: #111827;
    background: #eef0f2;
    box-shadow: 0 7px 18px rgba(23, 33, 28, .06);
}

.connect-sms-chat .circle-message.mine {
    border: 0;
    border-radius: 20px 20px 6px 20px;
    color: white;
    background: linear-gradient(135deg, #20d467, #10b65a);
    box-shadow: 0 10px 24px rgba(16, 182, 90, .22);
}

.connect-sms-chat .circle-message-meta {
    gap: 7px;
    opacity: .82;
}

.connect-sms-chat .circle-message-meta strong {
    font-size: 11px;
    font-weight: 850;
}

.connect-sms-chat .circle-message-meta small {
    font-size: 10px;
}

.connect-sms-chat .circle-message.mine .circle-message-meta {
    justify-content: flex-end;
}

.connect-sms-chat .circle-message.mine .circle-message-meta strong {
    display: none;
}

.connect-sms-chat .circle-message p {
    font-size: 15px;
    line-height: 1.38;
}

.connect-sms-chat .circle-replies-peek {
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
}

.connect-sms-chat .circle-message.mine .circle-replies-peek {
    background: rgba(255, 255, 255, .17);
}

.connect-sms-chat .circle-replies-panel {
    border-radius: 16px;
}

.connect-sms-chat .circle-message-tool-button {
    top: 7px;
    right: 7px;
    width: 24px;
    height: 24px;
    opacity: 0;
    background: rgba(255, 255, 255, .88);
}

.connect-sms-chat .circle-message:hover .circle-message-tool-button,
.connect-sms-chat .circle-message-tool-button[aria-expanded="true"] {
    opacity: 1;
}

.connect-sms-chat .circle-attachment-preview img,
.connect-sms-chat .circle-attachment video {
    border-radius: 16px;
}

.connect-sms-chat .circle-audio-preview {
    border-radius: 999px;
}

.connect-conversation-panel .circle-chat-form {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px 42px;
    gap: 7px;
    align-items: center;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(23, 33, 28, .08);
    background: rgba(255, 255, 255, .96);
}

.connect-conversation-panel .circle-chat-form textarea.field {
    grid-column: 2;
    grid-row: 2;
    min-height: 42px;
    height: 42px;
    max-height: 86px;
    padding: 10px 16px;
    border-color: #d8dedc;
    border-radius: 999px;
    background: #ffffff;
}

.connect-conversation-panel .circle-reply-composer {
    grid-column: 1 / -1;
    grid-row: 1;
    border-radius: 16px;
}

.connect-conversation-panel .circle-visibility-selector {
    grid-column: 1 / -1;
    min-height: 38px;
    height: 38px;
}

.connect-conversation-panel .circle-file-button {
    grid-column: 1;
    grid-row: 2;
}

.connect-conversation-panel .circle-emoji-button {
    grid-column: 3;
    grid-row: 2;
}

.connect-conversation-panel .circle-record-button {
    grid-column: 4;
    grid-row: 2;
}

.connect-conversation-panel .circle-send-button {
    grid-column: 5;
    grid-row: 2;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
}

.connect-conversation-panel .circle-send-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.connect-conversation-panel .circle-file-button,
.connect-conversation-panel .circle-record-button,
.connect-conversation-panel .circle-emoji-button {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #66736d;
    background: #f3f5f4;
}

.connect-conversation-panel .circle-file-button:hover,
.connect-conversation-panel .circle-record-button:hover,
.connect-conversation-panel .circle-record-button.is-recording,
.connect-conversation-panel .circle-emoji-button:hover,
.connect-conversation-panel .circle-emoji-button[aria-expanded="true"] {
    color: var(--green-dark);
    background: #e9f8ef;
}

.connect-conversation-panel .circle-emoji-panel {
    right: 12px;
    bottom: 64px;
    border-radius: 18px;
}

.connect-conversation-panel .circle-file-note {
    padding: 0 14px 10px;
    text-align: center;
    font-size: 10.5px;
}

@keyframes smsBubbleIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

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

@keyframes contactSlideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

@keyframes connectWorkspaceIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes connectRowIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

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

.connect-main,
.connect-people-grid,
.connect-call-grid {
    display: grid;
    gap: 14px;
}

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

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

.connect-person-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 12px 28px rgba(23, 33, 28, .06);
}

.connect-person-card h3,
.connect-person-card p {
    margin: 0;
}

.connect-person-card p {
    color: var(--green-dark);
    font-weight: 950;
}

.connect-person-card small {
    color: var(--muted);
    font-weight: 800;
}

.compact-search-bar {
    grid-template-columns: minmax(0, 1fr) auto;
}

.connect-call-room {
    display: grid;
    gap: 16px;
    place-items: center;
    min-height: calc(100vh - 86px);
    padding: 24px clamp(14px, 4vw, 42px);
    background:
        radial-gradient(circle at 50% 6%, rgba(30, 199, 123, .16), transparent 30%),
        radial-gradient(circle at 18% 80%, rgba(54, 105, 158, .14), transparent 28%),
        linear-gradient(135deg, #edf2f0, #f8fbfa 48%, #e7ecea);
}

.connect-call-phone {
    position: relative;
    width: min(390px, 100%);
    padding: 10px;
    border: 1px solid rgba(11, 18, 16, .28);
    border-radius: 38px;
    background:
        linear-gradient(145deg, #25292d, #080b0d 44%, #34383d);
    box-shadow:
        0 26px 68px rgba(11, 18, 16, .28),
        inset 0 0 0 2px rgba(255, 255, 255, .06);
}

.connect-call-phone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 15px;
    width: 94px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .15);
    transform: translateX(-50%);
    z-index: 2;
}

.connect-call-screen {
    position: relative;
    display: grid;
    gap: 20px;
    min-height: min(760px, calc(100vh - 150px));
    padding: 28px 24px 26px;
    border-radius: 29px;
    overflow: hidden;
    color: white;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px),
        radial-gradient(circle at 50% 24%, rgba(38, 189, 121, .18), transparent 23%),
        linear-gradient(150deg, #222428, #141619 48%, #24262a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    text-align: center;
}

.connect-call-screen::before {
    content: "";
    position: absolute;
    inset: 34% 0 auto;
    height: 1px;
    background: rgba(255, 255, 255, .08);
}

.connect-call-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.connect-call-back,
.connect-call-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
    font-size: 12px;
    font-weight: 850;
    backdrop-filter: blur(16px);
}

.connect-call-back:hover {
    background: rgba(255, 255, 255, .14);
}

.connect-call-back [data-lucide],
.connect-call-pill [data-lucide] {
    width: 16px;
    height: 16px;
}

.connect-call-pill {
    color: #7ee3b0;
}

.connect-call-room.is-ended .connect-call-pill {
    color: #ffb4ac;
}

.connect-call-identity {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 14px;
    padding-top: 10px;
}

.connect-call-identity .kicker {
    margin: 0;
    color: #7ee3b0;
}

.connect-call-avatar-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 174px;
    height: 174px;
    margin: 2px auto;
}

.connect-call-avatar {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border: 4px solid rgba(255, 255, 255, .95);
    border-radius: 999px;
    color: #f8fbfa;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .18), transparent 18%),
        linear-gradient(135deg, #176b4d, #174f79);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, .36),
        0 0 0 1px rgba(126, 227, 176, .18);
    overflow: hidden;
    font-size: 27px;
    font-weight: 950;
}

.connect-call-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.connect-call-wave {
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(31, 209, 126, .48);
    border-radius: 999px;
    opacity: 0;
    animation: callWave 2400ms ease-out infinite;
}

.connect-call-wave.wave-two {
    animation-delay: 620ms;
}

.connect-call-wave.wave-three {
    animation-delay: 1240ms;
}

.connect-call-room.is-active .connect-call-wave {
    border-color: rgba(75, 157, 255, .42);
}

.private-direct-call.is-video .connect-call-screen {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px),
        radial-gradient(circle at 50% 17%, rgba(68, 154, 255, .2), transparent 24%),
        linear-gradient(150deg, #20242a, #121419 48%, #1f2934);
}

.connect-call-copy h1,
.connect-call-copy p,
.connect-call-status p,
.connect-call-note p {
    margin: 0;
}

.connect-call-copy {
    display: grid;
    gap: 8px;
}

.connect-call-copy h1 {
    color: white;
    font-size: clamp(30px, 5vw, 42px);
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .24);
}

.connect-call-copy p,
.connect-call-status p {
    color: rgba(255, 255, 255, .68);
    line-height: 1.5;
}

.connect-call-copy p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.connect-call-copy p strong {
    color: #4ec9ff;
    font-weight: 850;
}

.connect-call-copy p span {
    color: rgba(255, 255, 255, .5);
}

.connect-call-status {
    display: grid;
    gap: 5px;
    max-width: 320px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px);
}

.connect-call-status strong {
    color: white;
    font-size: 14px;
    font-weight: 900;
}

.connect-call-status p {
    font-size: 12px;
    font-weight: 650;
}

.connect-call-video-preview {
    position: relative;
    width: min(300px, 100%);
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 20%, rgba(126, 227, 176, .16), transparent 24%),
        linear-gradient(155deg, #12171b, #25313b);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .32);
}

.connect-call-video-main {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: white;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .1), transparent 22%),
        linear-gradient(135deg, #176b4d, #174f79);
}

.connect-call-video-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.connect-call-video-main > span {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: 28px;
    font-weight: 950;
}

.connect-call-video-main small {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .86);
    background: rgba(0, 0, 0, .32);
    font-size: 11px;
    font-weight: 850;
    backdrop-filter: blur(14px);
}

.connect-call-video-self {
    position: absolute;
    right: 12px;
    top: 12px;
    display: grid;
    place-items: center;
    gap: 4px;
    width: 76px;
    height: 98px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    color: white;
    background: rgba(7, 10, 12, .62);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .26);
    backdrop-filter: blur(14px);
}

.connect-call-video-self [data-lucide] {
    width: 24px;
    height: 24px;
}

.connect-call-video-self span {
    font-size: 10px;
    font-weight: 850;
}

.connect-call-room.is-camera-off .connect-call-video-preview {
    filter: saturate(.6);
}

.connect-call-room.is-camera-off .connect-call-video-main::after,
.connect-call-room.is-muted .connect-call-avatar-wrap::after,
.connect-call-room.is-muted .connect-call-video-preview::after,
.connect-call-room.is-speaker .connect-call-phone::after {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    color: white;
    background: rgba(0, 0, 0, .5);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
}

.connect-call-room.is-camera-off .connect-call-video-main::after {
    content: "Camera off";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.connect-call-room.is-muted .connect-call-avatar-wrap::after,
.connect-call-room.is-muted .connect-call-video-preview::after {
    content: "Muted";
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}

.connect-call-room.is-speaker .connect-call-phone::after {
    content: "Speaker";
    right: 22px;
    bottom: 22px;
}

.connect-call-control-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px 12px;
    padding: 6px 8px 0;
}

.connect-call-control-grid.private-call-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 8px;
}

.connect-call-control-grid form {
    margin: 0;
}

.connect-call-tool {
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 100%;
    min-height: 72px;
    padding: 0;
    border: 0;
    color: rgba(255, 255, 255, .9);
    background: transparent;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.connect-call-tool [data-lucide] {
    width: 30px;
    height: 30px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    box-sizing: content-box;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.connect-call-tool:hover [data-lucide],
.connect-call-tool:focus-visible [data-lucide] {
    border-color: rgba(126, 227, 176, .46);
    background: rgba(126, 227, 176, .14);
    transform: translateY(-2px);
}

.connect-call-tool[aria-pressed="true"] [data-lucide],
.connect-call-tool[aria-expanded="true"] [data-lucide] {
    border-color: rgba(126, 227, 176, .62);
    color: #7ee3b0;
    background: rgba(126, 227, 176, .18);
}

.connect-call-keypad {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 54px);
    justify-content: center;
    gap: 10px;
    padding: 8px 0 0;
    animation: callKeypadIn 180ms ease-out;
}

.connect-call-keypad[hidden] {
    display: none;
}

.connect-call-keypad button {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: white;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease;
}

.connect-call-keypad button:hover,
.connect-call-keypad button:focus-visible {
    background: rgba(126, 227, 176, .16);
    transform: translateY(-1px);
}

.connect-call-keypad strong {
    font-size: 22px;
    line-height: 1;
}

.connect-call-keypad small {
    color: rgba(255, 255, 255, .62);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.connect-call-actions {
    display: flex;
    position: relative;
    z-index: 2;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 4px;
}

.connect-call-actions form {
    margin: 0;
}

.connect-call-main-action {
    display: inline-grid;
    place-items: center;
    gap: 8px;
    width: 82px;
    height: 82px;
    border: 0;
    border-radius: 999px;
    color: white;
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.connect-call-main-action [data-lucide] {
    width: 28px;
    height: 28px;
}

.connect-call-main-action.answer {
    background: linear-gradient(135deg, #1bd96f, #0bae5f);
    animation: callAnswerGlow 1900ms ease-in-out infinite;
}

.connect-call-main-action.end {
    background: linear-gradient(135deg, #ff5a52, #e52f36);
}

.connect-call-main-action:hover,
.connect-call-main-action:focus-visible {
    filter: brightness(1.04);
    box-shadow: 0 22px 46px rgba(0, 0, 0, .34);
    transform: translateY(-2px);
}

.connect-call-note {
    display: grid;
    gap: 4px;
    width: min(390px, 100%);
    padding: 12px 14px;
    border: 1px solid rgba(23, 33, 28, .08);
    border-radius: 16px;
    color: #2e3934;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 14px 32px rgba(23, 33, 28, .08);
    text-align: center;
}

.connect-call-note strong {
    color: #17211c;
    font-size: 13px;
    font-weight: 950;
}

.connect-call-note p {
    margin: 0;
    color: #66736d;
    font-size: 12px;
    line-height: 1.45;
}

@keyframes callWave {
    0% {
        opacity: .76;
        transform: scale(.66);
    }

    72%,
    100% {
        opacity: 0;
        transform: scale(1.26);
    }
}

@keyframes callAnswerGlow {
    0%,
    100% {
        box-shadow: 0 18px 38px rgba(0, 0, 0, .28), 0 0 0 0 rgba(27, 217, 111, .24);
    }

    50% {
        box-shadow: 0 22px 44px rgba(0, 0, 0, .34), 0 0 0 8px rgba(27, 217, 111, 0);
    }
}

@keyframes callKeypadIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

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

@keyframes connectPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 16px 42px rgba(23, 107, 77, .24);
    }

    50% {
        transform: scale(1.035);
        box-shadow: 0 22px 56px rgba(23, 107, 77, .32);
    }
}

.connect-meeting-hero {
    background:
        radial-gradient(circle at 86% 18%, rgba(23, 107, 77, .12), transparent 28%),
        linear-gradient(135deg, #f7fbf9, #edf5f1);
}

.connect-meeting-shell,
.connect-meeting-room {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 46px;
}

.connect-meeting-form,
.connect-meeting-card,
.connect-meeting-preview {
    display: grid;
    gap: 14px;
}

.connect-meeting-card {
    padding: 18px;
    border: 1px solid #d9e4df;
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 42px rgba(23, 33, 28, .08);
}

.connect-meeting-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    color: #176b4d;
    background: #edf8f2;
    font-size: 12px;
    font-weight: 900;
}

.connect-meeting-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.connect-meeting-type legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.connect-meeting-type label,
.connect-meeting-checks label {
    position: relative;
    display: grid;
    cursor: pointer;
}

.connect-meeting-type input {
    position: absolute;
    opacity: 0;
}

.connect-meeting-type span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: #fff;
    font-weight: 850;
}

.connect-meeting-type input:checked + span {
    color: #176b4d;
    border-color: #9fd3b8;
    background: #edf8f2;
}

.connect-meeting-invite-box {
    display: grid;
    gap: 12px;
    padding: 13px;
    border: 1px solid #d9e4df;
    border-radius: 14px;
    background: #fbfdfc;
}

.connect-meeting-invite-box h3,
.connect-meeting-invite-box p {
    margin: 0;
}

.connect-meeting-invite-box h3 {
    color: var(--ink);
    font-size: 17px;
}

.connect-meeting-invite-box p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

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

.connect-meeting-invite-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 76px;
    padding: 10px;
    border: 1px solid #d7dddb;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.connect-meeting-invite-card:hover,
.connect-meeting-invite-card:has(input:checked) {
    transform: translateY(-1px);
    border-color: #9fd3b8;
    background: #f5fcf8;
    box-shadow: 0 12px 26px rgba(23, 107, 77, .1);
}

.connect-meeting-invite-card input {
    position: absolute;
    opacity: 0;
}

.connect-meeting-invite-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid #4f5855;
    border-radius: 999px;
    color: #344054;
    background: white;
    overflow: hidden;
    font-size: 11px;
    font-weight: 900;
}

.connect-meeting-invite-avatar img,
.connect-meeting-attendee-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.connect-meeting-invite-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.connect-meeting-invite-copy strong,
.connect-meeting-invite-copy small,
.connect-meeting-invite-copy em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connect-meeting-invite-copy strong {
    color: var(--ink);
    font-size: 14px;
}

.connect-meeting-invite-copy small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.connect-meeting-invite-copy em {
    color: #176b4d;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.connect-meeting-checkmark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid #d7dddb;
    border-radius: 999px;
    color: transparent;
    background: #f8faf9;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.connect-meeting-invite-card input:checked ~ .connect-meeting-checkmark {
    color: white;
    border-color: #176b4d;
    background: #176b4d;
    transform: scale(1.04);
}

.connect-meeting-help-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #d9e4df;
    border-radius: 12px;
    background: var(--wash);
}

.connect-meeting-help-card > i,
.connect-meeting-help-card > [data-lucide] {
    color: #176b4d;
}

.connect-meeting-help-card span {
    display: grid;
    gap: 2px;
}

.connect-meeting-help-card strong {
    color: var(--ink);
    font-size: 13px;
}

.connect-meeting-help-card small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.connect-meeting-checks {
    display: grid;
    gap: 8px;
    align-content: center;
}

.connect-meeting-checks span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 850;
}

.connect-meeting-checks input {
    width: 18px;
    height: 18px;
    accent-color: #176b4d;
}

.connect-meeting-phone-preview {
    position: sticky;
    top: 94px;
    display: grid;
    gap: 16px;
    min-height: 560px;
    padding: 18px;
    border-radius: 32px;
    color: white;
    background:
        radial-gradient(circle at 50% 12%, rgba(30, 199, 123, .24), transparent 32%),
        linear-gradient(150deg, #23272b, #101214 56%, #25282d);
    box-shadow: 0 30px 70px rgba(23, 33, 28, .2);
}

.connect-meeting-preview-top,
.connect-meeting-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.connect-meeting-preview-top small {
    color: rgba(255, 255, 255, .74);
    font-weight: 850;
}

.connect-meeting-video-stage {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 360px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 24px;
    background: rgba(255, 255, 255, .05);
}

.connect-meeting-host-avatar {
    display: grid;
    place-items: center;
    width: 98px;
    height: 98px;
    border-radius: 999px;
    color: #176b4d;
    background: white;
    font-size: 34px;
    font-weight: 950;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.connect-meeting-video-stage strong {
    color: white;
    font-size: 22px;
}

.connect-meeting-video-stage small {
    color: rgba(255, 255, 255, .62);
    font-weight: 800;
}

.connect-meeting-controls span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.connect-meeting-room {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.connect-meeting-stage {
    position: relative;
    display: grid;
    gap: 18px;
    min-height: 680px;
    padding: 22px;
    border-radius: 28px;
    color: white;
    background:
        radial-gradient(circle at 22% 18%, rgba(23, 107, 77, .28), transparent 30%),
        linear-gradient(145deg, #202327, #101214 58%, #24272c);
    box-shadow: 0 30px 70px rgba(23, 33, 28, .2);
    overflow: hidden;
}

.connect-meeting-room-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.connect-meeting-video-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    min-height: 320px;
}

.connect-meeting-tile {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 260px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    background: rgba(255, 255, 255, .055);
}

.connect-meeting-tile::after {
    content: attr(data-state);
    position: absolute;
    right: 12px;
    bottom: 12px;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    color: white;
    background: rgba(0, 0, 0, .3);
    font-size: 11px;
    font-weight: 850;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.connect-meeting-stage.is-muted .connect-meeting-tile.host::after,
.connect-meeting-stage.is-camera-off .connect-meeting-tile.host::after,
.connect-meeting-stage.is-sharing .connect-meeting-tile.guest::after {
    opacity: 1;
    transform: translateY(0);
}

.connect-meeting-stage.is-muted .connect-meeting-tile.host {
    border-color: rgba(255, 196, 87, .42);
}

.connect-meeting-stage.is-camera-off .connect-meeting-tile.host span {
    color: white;
    background: rgba(255, 255, 255, .14);
}

.connect-meeting-stage.is-sharing .connect-meeting-tile.guest {
    border-color: rgba(101, 178, 255, .5);
    box-shadow: inset 0 0 0 1px rgba(101, 178, 255, .22), 0 18px 44px rgba(0, 0, 0, .12);
}

.connect-meeting-tile span {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 999px;
    color: #176b4d;
    background: white;
    font-size: 32px;
    font-weight: 950;
}

.connect-meeting-tile.guest span {
    color: white;
    background: rgba(255, 255, 255, .13);
}

.connect-meeting-tile strong {
    color: white;
    font-size: 18px;
}

.connect-meeting-tile small,
.connect-meeting-room-copy p {
    color: rgba(255, 255, 255, .68);
    font-weight: 750;
}

.connect-meeting-attendee-strip {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 44px;
}

.connect-meeting-attendee-strip span,
.connect-meeting-attendee-strip b {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: -8px;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    color: white;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
    font-size: 11px;
    font-weight: 950;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
}

.connect-meeting-attendee-strip span:first-child {
    margin-left: 0;
}

.connect-meeting-attendee-strip b {
    background: #176b4d;
}

.connect-meeting-room-copy {
    display: grid;
    gap: 7px;
}

.connect-meeting-room-copy h1 {
    margin: 0;
    color: white;
    font-size: clamp(28px, 4vw, 44px);
}

.connect-meeting-room-controls {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.connect-meeting-room-controls button,
.connect-meeting-room-controls a {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 72px;
    border: 0;
    border-radius: 14px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.connect-meeting-room-controls button:hover,
.connect-meeting-room-controls button[aria-pressed="true"],
.connect-meeting-room-controls button[aria-expanded="true"] {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .12);
}

.connect-meeting-room-controls button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.connect-meeting-room-controls a {
    color: white;
    background: #e52f36;
}

.connect-meeting-free-note,
.connect-meeting-control-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 0;
    padding: 7px 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .09);
    font-size: 12px;
    font-weight: 850;
}

.connect-meeting-free-note [data-lucide] {
    width: 14px;
    height: 14px;
}

.connect-meeting-control-status {
    color: white;
    background: rgba(23, 107, 77, .35);
}

.connect-meeting-side {
    display: grid;
    align-content: start;
    gap: 14px;
}

.connect-meeting-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.connect-meeting-code-grid span {
    display: grid;
    gap: 3px;
    padding: 12px;
    border-radius: 12px;
    background: var(--wash);
}

.connect-meeting-code-grid small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.connect-meeting-code-grid strong {
    color: var(--ink);
    font-size: 16px;
}

.connect-meeting-attendee-list {
    display: grid;
    gap: 8px;
}

.connect-meeting-attendee-list span {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid #d9e4df;
    border-radius: 10px;
    background: #fbfdfc;
}

.connect-meeting-attendee-list strong {
    color: var(--ink);
    font-size: 13px;
}

.connect-meeting-attendee-list small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.connect-meeting-session-card {
    border-color: #cce8da;
    background: linear-gradient(135deg, #f1fbf6, #ffffff);
}

.connect-meeting-chat-panel[hidden] {
    display: none;
}

.connect-meeting-chat-log {
    display: grid;
    gap: 7px;
    min-height: 76px;
    max-height: 160px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8faf9;
    overflow: auto;
}

.connect-meeting-chat-log span {
    justify-self: start;
    max-width: 92%;
    padding: 7px 9px;
    border-radius: 12px;
    color: var(--ink);
    background: white;
    box-shadow: 0 6px 16px rgba(23, 33, 28, .06);
    font-size: 12px;
    font-weight: 750;
}

.connect-meeting-chat-log span.mine {
    justify-self: end;
    color: white;
    background: var(--green);
}

.connect-meeting-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 8px;
}

.connect-meeting-guest-page {
    min-height: calc(100vh - 86px);
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 48px);
    background: linear-gradient(135deg, #f4f8f6, #ffffff);
}

.connect-meeting-guest-card {
    display: grid;
    gap: 18px;
    width: min(100%, 540px);
    padding: clamp(18px, 4vw, 30px);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: 0 24px 60px rgba(23, 33, 28, .12);
}

.connect-meeting-guest-hero {
    display: grid;
    gap: 8px;
    text-align: center;
}

.connect-meeting-guest-hero > span {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    color: white;
    background: var(--green);
    box-shadow: 0 16px 34px rgba(23, 107, 77, .22);
}

.connect-meeting-guest-hero h1,
.connect-meeting-guest-hero p {
    margin: 0;
}

.connect-meeting-mini-panel {
    display: grid;
    gap: 9px;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid #dfe6e3;
}

.connect-meeting-mini-list {
    display: grid;
    gap: 8px;
}

.connect-meeting-mini-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid #d7dddb;
    border-radius: 10px;
    color: inherit;
    background: rgba(255, 255, 255, .94);
    text-decoration: none;
}

.connect-meeting-mini-item > span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: #176b4d;
    background: #edf8f2;
}

.connect-meeting-mini-item strong,
.connect-meeting-mini-item small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connect-meeting-mini-item strong {
    color: var(--ink);
    font-size: 13px;
}

.connect-meeting-mini-item small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.share-option input:disabled {
    cursor: not-allowed;
}

.share-option strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--green-dark);
}

.share-option small {
    color: var(--muted);
    font-weight: 650;
    line-height: 1.45;
}

.circle-empty-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px dashed #b8cbc2;
    border-radius: 8px;
    background: var(--wash);
}

.circle-empty-note p {
    margin: 0;
    color: var(--muted);
}

.circle-pill {
    color: #5b4200 !important;
    background: var(--amber-soft) !important;
}

.public-feed-hero .actions {
    justify-content: end;
}

.public-feed-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 760px);
    gap: 18px;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
    padding: 22px clamp(16px, 4vw, 42px) 46px;
}

.public-feed-guide {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 12px;
}

.public-feed-guide h2 {
    margin: 0;
}

.public-feed-guide p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.public-feed-tips {
    display: grid;
    gap: 8px;
}

.public-feed-tips span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
    color: var(--ink);
    font-size: 13px;
    font-weight: 850;
}

.public-feed-tips [data-lucide] {
    color: var(--green-dark);
}

.public-feed-stream {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.public-share-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
    animation: publicCardIn 360ms ease both;
}

.public-share-card:hover {
    border-color: #a9d9c1;
    box-shadow: 0 18px 44px rgba(23, 107, 77, .12);
}

.public-share-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.public-author-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.public-author-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: white;
    background: #243c35;
    font-size: 12px;
    font-weight: 950;
}

.public-author-row strong,
.public-author-row small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-author-row small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.public-badge,
.public-media-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--green-dark);
    background: var(--mint);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.public-media-stage {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(23, 33, 28, .1);
    border-radius: 8px;
    background: #111827;
}

.public-video-stage {
    width: min(100%, 390px);
    max-height: 680px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
}

.public-image-stage {
    min-height: 360px;
    background: #f1f5f3;
}

.public-media-stage video,
.public-media-stage img {
    display: block;
    width: 100%;
    height: 100%;
}

.public-media-stage video {
    object-fit: contain;
}

.public-media-stage img {
    object-fit: cover;
}

.public-media-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    color: white;
    background: rgba(17, 24, 39, .78);
    backdrop-filter: blur(10px);
}

.public-audio-card,
.public-file-card,
.public-text-stage {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--wash);
}

.public-audio-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-dark);
    font-weight: 900;
}

.public-audio-card audio {
    width: 100%;
}

.public-file-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.public-file-card > [data-lucide] {
    color: var(--green-dark);
}

.public-file-card strong,
.public-file-card small {
    display: block;
}

.public-file-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.public-file-card a {
    color: var(--green-dark);
    font-weight: 900;
}

.public-text-stage {
    min-height: 160px;
    place-items: center;
    color: var(--green-dark);
    background: linear-gradient(135deg, #f8fbf9, #e7f5ee);
}

.public-text-stage [data-lucide] {
    width: 46px;
    height: 46px;
}

.public-share-copy {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.public-action-rail {
    display: grid;
    gap: 10px;
    align-content: center;
    justify-items: center;
}

.public-action-rail form {
    margin: 0;
}

.public-like-button,
.public-rail-link {
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
}

.public-like-button {
    gap: 2px;
    width: 62px;
    min-height: 86px;
    padding: 9px 6px;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.public-like-button:hover {
    transform: translateY(-2px);
    border-color: #f3a0b4;
    background: #fff1f5;
}

.public-like-button [data-lucide] {
    color: #9f1239;
    fill: transparent;
}

.public-like-button strong {
    font-size: 15px;
    font-weight: 950;
}

.public-like-button span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.public-like-button.is-liked {
    color: #9f1239;
    border-color: #f3a0b4;
    background: #fff1f5;
    animation: likePop 260ms ease;
}

.public-like-button.is-liked [data-lucide] {
    fill: #e11d48;
    stroke: #e11d48;
}

.public-rail-link {
    width: 46px;
    height: 46px;
    color: var(--green-dark);
}

.public-rail-link:hover {
    border-color: #bfe2d1;
    background: var(--mint);
}

.public-feed-empty {
    display: grid;
    gap: 12px;
    place-items: center;
    min-height: 360px;
    padding: 24px;
    border: 1px dashed #b8cbc2;
    border-radius: 8px;
    background: var(--paper);
    text-align: center;
}

.public-feed-empty [data-lucide] {
    width: 50px;
    height: 50px;
    color: var(--green);
}

.public-feed-empty h2,
.public-feed-empty p {
    margin: 0;
}

.public-feed-empty p {
    max-width: 560px;
    color: var(--muted);
    line-height: 1.5;
}

.public-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.public-pagination span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

@keyframes publicCardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes likePop {
    50% {
        transform: scale(1.06);
    }
}

@media (max-width: 900px) {
    .circle-layout,
    .circle-inbox-layout,
    .circle-conversation-head,
    .circle-conversation-body,
    .circle-grid,
    .share-options,
    .public-feed-layout {
        grid-template-columns: 1fr;
    }

    .circle-side-panel,
    .circle-inbox-sidebar,
    .circle-conversation-side,
    .public-feed-guide {
        position: static;
        max-height: none;
    }

    .circle-member-form,
    .circle-chat-form,
    .connect-save-inline,
    .connect-conversation-panel .circle-chat-form,
    .circle-empty-note {
        grid-template-columns: 1fr;
    }

    .circle-disappearing-panel {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .circle-disappearing-form {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .circle-conversation-stats {
        justify-content: start;
    }

    .circle-conversation-chat .circle-chat {
        min-height: auto;
    }

    .circle-conversation-chat .circle-message-list {
        max-height: 420px;
        min-height: 260px;
    }

    .circle-file-button,
    .circle-record-button,
    .circle-emoji-button,
    .circle-visibility-selector {
        width: 100%;
    }

    .circle-emoji-panel {
        right: 0;
        left: 0;
        bottom: 104px;
        width: auto;
    }

    .public-feed-hero .actions {
        justify-content: start;
    }

    .public-share-card {
        grid-template-columns: 1fr;
    }

    .public-action-rail {
        grid-template-columns: repeat(2, auto);
        justify-content: start;
    }

    .public-like-button {
        grid-template-columns: auto auto auto;
        width: auto;
        min-height: 46px;
        padding: 0 12px;
    }
}

@media (max-width: 600px) {
    .circle-member-row {
        grid-template-columns: 1fr;
    }

    .circle-inbox-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .circle-inbox-meta {
        grid-column: 2;
        grid-template-columns: auto auto;
        justify-content: start;
        justify-items: start;
    }

    .circle-disappearing-form {
        grid-template-columns: 1fr;
    }

    .circle-disappearing-form em {
        text-align: left;
    }
}

.notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #cce8da;
    border-left: 4px solid var(--green);
    border-radius: 8px;
    color: var(--green-dark);
    background: #f1faf5;
    font-weight: 800;
}

.error-list {
    margin: 0 0 16px;
    padding: 12px 18px;
    border: 1px solid #e5aaa4;
    border-radius: 8px;
    color: #8f2f28;
    background: var(--coral-soft);
}

[data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

@media (prefers-reduced-motion: reduce) {
    .search-field::after,
    .results-headline.is-changing,
    .cv-gallery-scroll .cv-template-card,
    .selected-template-preview .sample-cv,
    .selected-template-card.is-updating .sample-cv,
    .selected-template-preview.is-swapping .sample-cv,
    .cv-template-modal,
    .cv-template-modal-shell,
    .cv-template-modal-document .sample-cv,
    .profile-card,
    .connect-workspace,
    .connect-number-row,
    .connect-contact-item,
    .public-share-card,
    .public-like-button,
    .public-like-button.is-liked,
    .copy-number-button,
    .copy-number-button.copied,
    .circle-chat-form.is-sending textarea.field,
    .circle-chat-form.is-sending .primary-button,
    .circle-chat-form.is-sending .primary-button [data-lucide],
    .circle-send-reaction,
    .circle-send-reaction [data-lucide],
    .circle-send-reaction span,
    .circle-sent-cue,
    .circle-sent-wave b,
    .circle-emoji-panel,
    .circle-emoji-button::after,
    .circle-emoji-choice,
    .circle-message-tools-panel,
    .circle-reaction-choice,
    .circle-reaction-peek,
    .circle-reaction-peek-stack b,
    .circle-replies-peek,
    .circle-replies-icon,
    .circle-replies-icon::before,
    .circle-replies-panel,
    .circle-message-tool-button,
    .connect-call-avatar {
        animation: none;
        transition: none;
    }

    .connect-call-wave,
    .connect-call-main-action.answer,
    .connect-unread-badge,
    .circle-message-row.is-scroll-highlight .circle-message,
    .circle-send-button.is-launching::after {
        animation: none;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

@media (max-width: 1180px) {
    .app-layout,
    .country-detail-layout,
    .profile-directory-layout {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .detail-panel,
    .profile-feature-panel {
        position: static;
        grid-column: 1 / -1;
    }

    .profile-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .marketplace-shell,
    .marketplace-shell.shop-shell,
    .marketplace-detail-layout,
    .connect-workspace,
    .connect-layout,
    .connect-meeting-shell,
    .connect-meeting-room {
        grid-template-columns: minmax(0, 1fr);
    }

    .marketplace-filter-panel,
    .shop-filter-panel,
    .marketplace-seller-panel,
    .marketplace-cart-panel,
    .connect-phonebook-column,
    .connect-numbers-column,
    .connect-saved-column,
    .connect-conversation-panel,
    .connect-number-card,
    .connect-meeting-phone-preview {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .profile-detail-side {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .shop-filter-panel .form-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-filter-panel .form-stack .primary-button {
        grid-column: 1 / -1;
    }

    .marketplace-hero-search {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .shop-product-layout,
    .shop-detail-lower {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-product-purchase {
        padding: 0;
    }

    .credit-pill {
        order: 3;
    }
}

@media (max-width: 900px) {
    .topbar {
        align-items: stretch;
    }

    .brand {
        flex: 1;
        min-width: 0;
    }

    .main-nav {
        order: 4;
        flex-basis: 100%;
    }

    .credit-pill {
        display: none;
    }

    .search-heading,
    .home-service-hero,
    .dekeree-home-hero,
    .dekeree-home-flow,
    .opportunity-post-hero,
    .opportunity-post-submit,
    .page-inner,
    .profile-detail-inner,
    .search-bar,
    .country-card,
    .app-layout,
    .country-detail-layout,
    .profile-directory-layout,
    .profile-detail-layout,
    .profile-create-layout,
    .profile-upload-grid,
    .profile-info-map,
    .profile-section-box-grid,
    .cv-builder-layout,
    .layout,
    .two-column,
    .admin-layout,
    .account-grid,
    .document-layout,
    .pricing-grid,
    .payment-method-grid,
    .settings-grid,
    .social-auth-grid,
    .register-hero-card,
    .register-photo-workspace,
    .marketplace-hero-inner,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .register-story-panel {
        position: static;
        min-height: auto;
    }

    .register-phone-preview {
        margin-top: 0;
    }

    .connect-hero-actions {
        justify-content: flex-start;
    }

    .home-service-hero {
        margin-top: 16px;
    }

    .home-service-stage {
        min-height: 330px;
    }

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

    .dekeree-home-hero {
        min-height: auto;
    }

    .dekeree-home-stage {
        min-height: 520px;
        order: -1;
    }

    .dekeree-connection-line.line-chat,
    .dekeree-connection-line.line-social,
    .dekeree-connection-line.line-shop,
    .dekeree-connection-line.line-profile {
        width: 170px;
    }

    .dekeree-service-strip,
    .dekeree-flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opportunity-post-shell,
    .opportunity-post-hero {
        padding-right: clamp(14px, 4vw, 24px);
        padding-left: clamp(14px, 4vw, 24px);
    }

    .opportunity-post-assurance {
        align-content: start;
    }

    .connect-guest-hero,
    .connect-guest-grid {
        grid-template-columns: 1fr;
    }

    .connect-guest-phone {
        min-height: 440px;
    }

    .connect-meeting-video-grid,
    .connect-meeting-room-controls,
    .connect-meeting-type,
    .connect-meeting-invite-grid {
        grid-template-columns: 1fr;
    }

    .cv-preview-panel {
        position: static;
    }

    .cv-template-modal-grid {
        grid-template-columns: 1fr;
    }

    .cv-template-modal-info {
        position: static;
    }

    .cv-gallery-scroll .cv-template-card {
        flex-basis: min(320px, 82vw);
    }

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

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

    .side-panel {
        position: static;
    }

    .profile-filter-panel,
    .profile-detail-side,
    .profile-create-side {
        position: static;
    }

    .profile-detail-side,
    .profile-opportunity-cards,
    .profile-cv-grid,
    .profile-existing-photos,
    .profile-gallery {
        grid-template-columns: 1fr;
    }

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

    .country-grid,
    .all-country-grid,
    .category-summary-grid,
    .category-menu,
    .marketplace-grid,
    .marketplace-related,
    .marketplace-existing-photos,
    .connect-people-grid,
    .connect-call-grid,
    .profile-grid,
    .related-profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .primary-button,
    .secondary-button,
    .danger-button,
    .btn {
        width: 100%;
    }

    .main-nav a,
    .main-nav button,
    .category-tabs a {
        min-height: 38px;
    }

    .results-top {
        align-items: stretch;
        flex-direction: column;
    }

    .country-list {
        grid-template-columns: 1fr;
    }

    .cv-template-grid,
    .cv-package-grid,
    .country-grid,
    .all-country-grid,
    .category-summary-grid,
    .category-menu,
    .home-service-grid,
    .dekeree-service-strip,
    .dekeree-flow-grid,
    .opportunity-post-grid,
    .payment-method-grid,
    .profile-cv-grid,
    .profile-upload-grid,
    .profile-existing-photos,
    .profile-gallery,
    .profile-info-map,
    .profile-section-box-grid,
    .profile-grid,
    .marketplace-grid,
    .marketplace-posting-guide,
    .marketplace-related,
    .marketplace-gallery,
    .marketplace-featured-row,
    .marketplace-existing-photos,
    .connect-people-grid,
    .connect-call-grid,
    .register-benefit-grid,
    .related-profile-grid {
        grid-template-columns: 1fr;
    }

    .register-hero-shell {
        padding: 14px 10px 40px;
    }

    .register-story-panel,
    .register-form-panel {
        padding: 16px;
    }

    .register-form-head {
        align-items: stretch;
        flex-direction: column;
    }

    .register-photo-cropper {
        width: min(260px, 100%);
        justify-self: center;
    }

    .home-service-copy h1 {
        font-size: clamp(34px, 11vw, 52px);
    }

    .home-service-stage {
        min-height: 300px;
    }

    .home-on-card {
        width: min(260px, 78vw);
        min-height: 222px;
        padding: 22px;
    }

    .home-on-mark {
        width: 82px;
        height: 82px;
        border-radius: 20px;
        font-size: 29px;
    }

    .home-service-node {
        min-height: 42px;
        padding: 8px 11px;
        font-size: 12px;
    }

    .home-service-node.node-one {
        left: 0;
    }

    .home-service-node.node-two {
        right: 0;
    }

    .dekeree-home {
        padding: 14px 10px 38px;
    }

    .dekeree-home-hero {
        padding: 20px;
    }

    .dekeree-home-copy h1 {
        font-size: clamp(38px, 13vw, 56px);
    }

    .dekeree-home-actions .primary-button,
    .dekeree-home-actions .secondary-button {
        width: 100%;
    }

    .dekeree-home-rhythm {
        width: 100%;
    }

    .dekeree-home-rhythm span {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .dekeree-home-stage {
        min-height: 430px;
    }

    .dekeree-on-phone {
        width: min(286px, 82vw);
        min-height: 440px;
        border-radius: 38px;
        transform: none;
    }

    .dekeree-orbit-ring.ring-one {
        width: min(360px, 92vw);
        height: min(360px, 92vw);
    }

    .dekeree-orbit-ring.ring-two {
        width: min(282px, 76vw);
        height: min(282px, 76vw);
    }

    .dekeree-orbit-service {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .dekeree-connection-line,
    .dekeree-stage-signal {
        display: none;
    }

    .orbit-chat {
        top: 24px;
        left: 0;
    }

    .orbit-social {
        top: 52px;
        right: 0;
    }

    .orbit-shop {
        right: 0;
        bottom: 54px;
    }

    .orbit-profiles {
        left: 0;
        bottom: 76px;
    }

    .dekeree-home-flow {
        padding: 20px;
    }

    .opportunity-post-hero {
        margin-top: 14px;
    }

    .opportunity-post-card,
    .opportunity-post-hero-copy,
    .opportunity-post-assurance,
    .opportunity-post-submit {
        padding: 16px;
    }

    .opportunity-post-card.account-required {
        grid-template-columns: 1fr;
    }

    .opportunity-post-submit .actions {
        align-items: stretch;
        flex-direction: column-reverse;
        width: 100%;
    }

    .marketplace-guide-chips {
        justify-content: flex-start;
        max-width: none;
    }

    .marketplace-seller-number-card,
    .marketplace-hs-actions,
    .marketplace-pager {
        grid-template-columns: 1fr;
    }

    .marketplace-pager {
        flex-wrap: wrap;
    }

    .shop-filter-panel .form-stack {
        grid-template-columns: 1fr;
    }

    .marketplace-featured-row {
        grid-template-columns: 1fr;
    }

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

    .marketplace-hero-card {
        width: 100%;
    }

    .compact-search-bar {
        grid-template-columns: 1fr;
    }

    .marketplace-gallery img:first-child {
        min-height: 240px;
    }

    .marketplace-category-strip {
        top: 108px;
    }

    .marketplace-hero-card {
        width: 100%;
    }

    .shop-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .shop-product-price-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .marketplace-cart-button {
        width: 100%;
    }

    .shop-product-page {
        padding-right: 12px;
        padding-left: 12px;
    }

    .shop-product-layout {
        padding: 12px;
    }

    .shop-product-main-image {
        min-height: 330px;
    }

    .shop-product-main-image img {
        padding: 16px;
    }

    .shop-product-facts div {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .shop-quantity-row {
        align-items: start;
        flex-direction: column;
    }

    .profile-detail-inner {
        align-items: start;
    }

    .profile-detail-actions,
    .profile-detail-actions .primary-button,
    .profile-detail-actions .secondary-button {
        width: 100%;
    }

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

    .cv-template-modal {
        padding: 8px;
    }

    .cv-template-modal-header {
        display: grid;
    }

    .cv-template-modal-stage {
        min-height: 420px;
        padding: 12px;
    }

    .cv-template-modal-document .sample-cv {
        min-height: 680px;
        padding: 20px;
    }

    .cv-template-modal-document .sample-cv-green .sample-cv-header,
    .cv-template-modal-document .sample-cv-amber .sample-cv-header,
    .cv-template-modal-document .sample-cv-blue .sample-cv-header {
        margin: -20px -20px 0;
        padding: 20px;
    }

    .cv-template-modal-document .sample-cv-name {
        font-size: 26px;
    }

    .selected-template-preview .sample-cv,
    .cv-template-modal-document .sample-cv,
    .sample-cv-blue {
        grid-template-columns: 1fr;
    }

    .selected-template-preview .sample-cv-blue .sample-cv-header,
    .sample-cv-blue .sample-cv-header {
        margin: -16px -16px 0;
    }

    .selected-template-preview .sample-cv-blue .sample-cv-header {
        margin: -22px -22px 0;
    }

    .cv-template-modal-document .sample-cv-blue .sample-cv-header {
        margin: -20px -20px 0;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .connect-meeting-shell,
    .connect-meeting-room {
        padding-inline: 12px;
    }

    .connect-meeting-stage,
    .connect-meeting-card {
        border-radius: 16px;
        padding: 14px;
    }

    .connect-meeting-phone-preview {
        min-height: 480px;
    }
}

@media (max-width: 1180px) {
    .connect-conversation-panel {
        overflow: hidden;
    }
}

@media (max-width: 900px) {
    .connect-conversation-panel .circle-chat-form {
        grid-template-columns: 42px minmax(0, 1fr) 42px 42px 42px;
    }

    .connect-conversation-panel .circle-chat-form textarea.field {
        grid-column: 2;
        grid-row: 2;
    }

    .connect-conversation-panel .circle-file-button {
        grid-column: 1;
        grid-row: 2;
    }

    .connect-conversation-panel .circle-emoji-button {
        grid-column: 3;
        grid-row: 2;
    }

    .connect-conversation-panel .circle-record-button {
        grid-column: 4;
        grid-row: 2;
    }

    .connect-conversation-panel .circle-send-button {
        grid-column: 5;
        grid-row: 2;
    }

    .connect-conversation-panel .circle-file-button,
    .connect-conversation-panel .circle-record-button,
    .connect-conversation-panel .circle-emoji-button,
    .connect-conversation-panel .circle-send-button,
    .connect-chat-actions .icon-only-action,
    .connect-chat-actions .copy-number-button {
        width: 42px;
        min-width: 42px;
    }
}

@media (max-width: 430px) {
    .shop-product-grid {
        grid-template-columns: 1fr;
    }

    .marketplace-hero h1 {
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .connect-chat-head {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 13px 12px;
    }

    .connect-sms-profile-avatar {
        width: 46px;
        height: 46px;
    }

    .connect-sms-profile-copy strong {
        font-size: 17px;
    }

    .connect-conversation-panel .circle-chat-form {
        grid-template-columns: 38px minmax(0, 1fr) 38px 38px 38px;
        gap: 5px;
        padding: 9px 9px 11px;
    }

    .connect-conversation-panel .circle-file-button,
    .connect-conversation-panel .circle-record-button,
    .connect-conversation-panel .circle-emoji-button,
    .connect-conversation-panel .circle-send-button,
    .connect-chat-actions .icon-only-action,
    .connect-chat-actions .copy-number-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .connect-conversation-panel .circle-chat-form textarea.field {
        min-height: 38px;
        height: 38px;
        padding: 8px 12px;
    }

    .connect-sms-chat .circle-message-row,
    .connect-sms-chat .circle-message-row.mine {
        max-width: 94%;
    }
}

.d-status-hero {
    background:
        linear-gradient(135deg, rgba(248, 252, 250, 0.98), rgba(238, 247, 255, 0.96)),
        #f8fcfa;
    border-bottom: 1px solid #d9e8e1;
}

.d-status-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
    gap: 28px;
    align-items: center;
    max-width: 1220px;
    margin: 0 auto;
    padding: 40px clamp(16px, 4vw, 42px) 34px;
}

.d-status-hero-copy h1 {
    max-width: 780px;
    margin: 0;
    color: #10211b;
    font-size: 48px;
    line-height: 1.03;
}

.d-status-hero-copy .lede {
    max-width: 760px;
    color: #4d6159;
}

.d-status-hero-actions,
.d-status-message-row,
.d-status-upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.d-status-phone {
    position: relative;
    display: grid;
    gap: 12px;
    min-height: 330px;
    padding: 18px;
    border: 1px solid #d6e8df;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(16, 33, 27, 0.12);
    overflow: hidden;
    animation: dStatusFloat 5s ease-in-out infinite;
}

.d-status-phone::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 4px solid #0f8f5f;
    pointer-events: none;
}

.d-status-phone-bar,
.d-status-stat-strip,
.d-status-card-head,
.d-status-reaction-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.d-status-phone-bar {
    color: #496058;
    font-size: 13px;
    font-weight: 800;
}

.d-status-phone-bar span {
    width: 38px;
    height: 5px;
    border-radius: 999px;
    background: #d7e5df;
}

.d-status-phone-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #dfece7;
    border-radius: 8px;
    background: #fbfefd;
    box-shadow: 0 10px 28px rgba(15, 143, 95, 0.08);
}

.d-status-phone-card.mini {
    width: 84%;
    margin-left: auto;
    background: #fffaf0;
}

.d-status-phone-card > span,
.d-status-mini-list > a > span,
.d-status-type-option span,
.d-status-visibility-option span,
.d-status-avatar {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--status-accent, #0f8f5f) 14%, #ffffff);
    color: var(--status-accent, #0f8f5f);
}

.d-status-phone-card strong,
.d-status-phone-card small,
.d-status-phone-card p {
    display: block;
    margin: 0;
}

.d-status-phone-card strong {
    color: #10211b;
    font-size: 16px;
    line-height: 1.2;
}

.d-status-phone-card small {
    margin-bottom: 4px;
    color: var(--status-accent, #0f8f5f);
    font-weight: 850;
}

.d-status-phone-card p {
    margin-top: 6px;
    color: #64766f;
    font-size: 13px;
}

.d-status-stat-strip {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 4px;
}

.d-status-stat-strip span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 132px;
    padding: 10px 12px;
    border: 1px solid #d8e7e1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    color: #536a61;
    font-size: 13px;
    font-weight: 750;
}

.d-status-stat-strip strong {
    color: #10211b;
    font-size: 22px;
}

.d-status-shell {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 18px;
    max-width: 1220px;
    margin: 0 auto;
    padding: 24px clamp(16px, 4vw, 42px) 56px;
    background: #f7f9f8;
}

.d-status-side {
    display: grid;
    align-content: start;
    gap: 14px;
    position: sticky;
    top: 96px;
}

.d-status-guide,
.d-status-my-panel,
.d-status-login-card,
.d-status-compose,
.d-status-card,
.d-status-empty {
    border-radius: 8px;
}

.d-status-guide-list,
.d-status-mini-list,
.d-status-feed,
.d-status-form {
    display: grid;
    gap: 12px;
}

.d-status-guide-list span {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: #4f655d;
    font-size: 14px;
    line-height: 1.35;
}

.d-status-guide-list [data-lucide] {
    width: 18px;
    height: 18px;
    color: #0f8f5f;
}

.d-status-my-panel .section-title-row h2 {
    margin-top: 2px;
    font-size: 22px;
}

.d-status-mini-list > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e0ece7;
    border-radius: 8px;
    color: #10211b;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.d-status-mini-list > a:hover {
    border-color: #9ddcc2;
    box-shadow: 0 10px 24px rgba(15, 143, 95, 0.1);
    transform: translateY(-1px);
}

.d-status-mini-list > a > span {
    width: 38px;
    height: 38px;
}

.d-status-mini-list strong,
.d-status-mini-list small {
    display: block;
}

.d-status-mini-list strong {
    overflow-wrap: anywhere;
    font-size: 14px;
}

.d-status-mini-list small {
    margin-top: 3px;
    color: #687a74;
    font-size: 12px;
}

.d-status-login-card {
    display: grid;
    gap: 10px;
}

.d-status-login-card > [data-lucide],
.d-status-empty > [data-lucide] {
    width: 34px;
    height: 34px;
    color: #0f8f5f;
}

.d-status-login-card strong,
.d-status-empty h2 {
    margin: 0;
    color: #10211b;
}

.d-status-login-card p,
.d-status-empty p {
    margin: 0;
    color: #5f716b;
    line-height: 1.45;
}

.d-status-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.d-status-compose {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(191, 216, 205, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 253, 251, 0.96)),
        #ffffff;
    box-shadow:
        0 18px 44px rgba(15, 35, 28, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.d-status-compose::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #0f8f5f, #2678c9, #d97706, #0f8f5f);
    background-size: 220% 100%;
    animation: dStatusComposeLine 6s linear infinite;
}

.d-status-compose::after {
    content: "";
    position: absolute;
    inset: 4px 0 auto;
    height: 72px;
    background: linear-gradient(90deg, transparent, rgba(15, 143, 95, 0.08), transparent);
    opacity: 0.75;
    transform: translateX(-70%);
    animation: dStatusComposeShine 5.8s ease-in-out infinite;
    pointer-events: none;
}

.d-status-compose:hover,
.d-status-compose:focus-within {
    border-color: rgba(15, 143, 95, 0.38);
    box-shadow:
        0 22px 54px rgba(15, 35, 28, 0.11),
        0 0 0 4px rgba(15, 143, 95, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
}

.d-status-compose > * {
    position: relative;
    z-index: 1;
}

.d-status-compose.locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.d-status-compose-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #cfe5db;
    border-radius: 999px;
    background: #f4fbf7;
    color: #0f6f4c;
    font-size: 12px;
    font-weight: 850;
}

.d-status-form .field {
    display: grid;
    align-items: start;
    gap: 5px;
    min-height: auto;
    margin: 0;
    padding: 11px 13px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.d-status-form .field > span {
    display: block;
    color: #5d7068;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

.d-status-form .field input,
.d-status-form .field select,
.d-status-form textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #10211b;
    font: inherit;
    font-size: 16px;
}

.d-status-form .field input,
.d-status-form .field select {
    height: 30px;
    padding: 0;
}

.d-status-form textarea {
    min-height: 96px;
    padding: 2px 0 0;
    resize: vertical;
    line-height: 1.45;
}

.d-status-form textarea::placeholder,
.d-status-form .field input::placeholder {
    color: #7c8d86;
}

.d-status-emoji-picker {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.d-status-emoji-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #d7e8df;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #ffffff, #f5fbf8),
        #ffffff;
    color: var(--green-dark);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    box-shadow:
        0 10px 20px rgba(23, 107, 77, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    cursor: pointer;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.d-status-emoji-toggle [data-lucide] {
    width: 17px;
    height: 17px;
}

.d-status-emoji-toggle:hover,
.d-status-emoji-toggle[aria-expanded="true"] {
    transform: translateY(-1px);
    border-color: #9edbc1;
    box-shadow:
        0 14px 28px rgba(23, 107, 77, 0.13),
        0 0 0 4px rgba(15, 143, 95, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.d-status-emoji-panel {
    position: absolute;
    z-index: 35;
    right: 0;
    top: calc(100% + 10px);
    width: min(330px, 82vw);
    padding: 14px;
    border: 1px solid rgba(190, 220, 207, 0.96);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 253, 250, 0.98)),
        #ffffff;
    box-shadow:
        0 24px 60px rgba(15, 35, 28, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    animation: emojiPanelIn 180ms ease both;
}

.d-status-emoji-panel[hidden] {
    display: none;
}

.d-status-emoji-panel > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 10px;
}

.d-status-emoji-panel strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 950;
}

.d-status-emoji-panel small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.d-status-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 7px;
}

.d-status-emoji-grid button {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid #e1ece7;
    border-radius: 12px;
    background: #ffffff;
    font-size: 20px;
    cursor: pointer;
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
}

.d-status-emoji-grid button:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: #a9ddc5;
    background: #f2fbf7;
    box-shadow: 0 10px 22px rgba(23, 107, 77, 0.12);
}

.d-status-form .field:focus-within {
    border-color: rgba(15, 143, 95, 0.42);
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(15, 143, 95, 0.08),
        0 10px 22px rgba(15, 35, 28, 0.06);
}

.d-status-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.d-status-type-option,
.d-status-visibility-option,
.d-status-upload,
.d-status-highlight-toggle {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dbe8e2;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.d-status-type-option {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
}

.d-status-type-option:hover,
.d-status-visibility-option:hover,
.d-status-upload:hover,
.d-status-highlight-toggle:hover {
    border-color: #9ed9c1;
    box-shadow: 0 10px 22px rgba(15, 143, 95, 0.08);
    transform: translateY(-1px);
}

.d-status-type-option input,
.d-status-visibility-option input,
.d-status-highlight-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.d-status-type-option:has(input:checked),
.d-status-visibility-option:has(input:checked),
.d-status-highlight-toggle:has(input:checked) {
    border-color: #0f8f5f;
    background: #f3fbf7;
    box-shadow: inset 0 0 0 1px rgba(15, 143, 95, 0.12);
}

.d-status-type-option span,
.d-status-visibility-option span {
    width: 38px;
    height: 38px;
}

.d-status-type-option strong,
.d-status-visibility-option strong {
    color: #14241f;
    font-size: 14px;
}

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

.d-status-visibility-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.d-status-visibility-option small,
.d-status-highlight-toggle small,
.d-status-upload small {
    color: #657971;
    font-size: 12px;
}

.d-status-visibility-option.is-disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.d-status-upload,
.d-status-highlight-toggle {
    flex: 1 1 260px;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
}

.d-status-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.d-status-upload > span,
.d-status-highlight-toggle > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef8f4;
    color: #0f8f5f;
}

.d-status-media-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid #dce9e3;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #ffffff, #f8fcfa),
        #ffffff;
}

.d-status-media-preview[hidden] {
    display: none;
}

.d-status-media-preview-tile {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    border: 1px solid #dce9e3;
    border-radius: 8px;
    background: #eef7f3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.d-status-media-preview-tile img,
.d-status-media-preview-tile video {
    width: 100%;
    height: 100%;
    min-height: 112px;
    object-fit: cover;
}

.d-status-media-preview-tile span {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(12, 30, 24, 0.72);
    color: #ffffff;
    font-size: 11px;
    font-weight: 950;
    backdrop-filter: blur(8px);
}

.d-status-media-preview-tile button {
    position: absolute;
    top: 8px;
    left: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 999px;
    background: rgba(14, 24, 20, 0.68);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    transition: transform 160ms ease, background 160ms ease;
}

.d-status-media-preview-tile button:hover,
.d-status-media-preview-tile button:focus-visible {
    background: rgba(220, 38, 38, 0.86);
    transform: scale(1.06);
    outline: none;
}

.d-status-media-preview-tile button [data-lucide] {
    width: 15px;
    height: 15px;
}

.d-status-media-preview-note {
    grid-column: 1 / -1;
    color: #65766f;
    font-size: 12px;
    font-weight: 800;
}

.d-status-sound-picker {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d9e8e1;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(15, 143, 95, 0.08), rgba(38, 120, 201, 0.06)),
        #ffffff;
}

.d-status-sound-picker > div:first-child {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.d-status-sound-picker > div:first-child > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #10211b;
    color: #bbf7d0;
    box-shadow: 0 12px 26px rgba(16, 33, 27, 0.16);
}

.d-status-sound-picker strong,
.d-status-sound-picker small {
    display: block;
}

.d-status-sound-picker strong {
    color: #10211b;
    font-size: 14px;
    font-weight: 950;
}

.d-status-sound-picker small {
    margin-top: 2px;
    color: #60766e;
    font-size: 12px;
    font-weight: 750;
}

.d-status-sound-upload {
    margin: 0;
    background: rgba(255, 255, 255, 0.84);
}

.d-status-submit {
    justify-self: start;
    min-width: 210px;
}

.d-status-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce9e3;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(16, 33, 27, 0.08);
    animation: dStatusCardIn 220ms ease both;
}

.d-status-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--status-accent, #0f8f5f);
}

.d-status-card-head {
    padding: 16px 18px 12px 22px;
    border-bottom: 1px solid #edf3f0;
}

.d-status-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    color: #0f6f4c;
    font-weight: 900;
    overflow: hidden;
}

.d-status-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.d-status-author {
    flex: 1 1 auto;
    min-width: 0;
}

.d-status-author strong,
.d-status-author span {
    display: block;
}

.d-status-author strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #10211b;
    font-size: 16px;
}

.d-status-tags {
    display: block;
    margin-top: 2px;
    color: #086047;
    font-size: 13px;
    font-weight: 600;
}

.d-status-tags .d-status-name-link {
    color: inherit;
    font: inherit;
}

.d-status-verified {
    width: 17px;
    height: 17px;
    color: #2563eb;
    fill: color-mix(in srgb, #2563eb 20%, transparent);
}

.d-status-author span {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
    color: #61756e;
    font-size: 13px;
    font-weight: 750;
}

.d-status-author span em {
    color: #7b8794;
    font-style: normal;
    font-weight: 800;
}

.d-status-author span em::before {
    content: "•";
    margin-right: 6px;
    color: #9aa7b5;
}

.d-status-d-number-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    margin-top: 7px;
    padding: 5px 9px;
    border: 1px solid rgba(15, 143, 95, 0.18);
    border-radius: 999px;
    background: #eefaf5;
    color: #0f6f4c;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
}

.d-status-d-number-chip [data-lucide] {
    width: 13px;
    height: 13px;
}

.d-status-author b {
    padding: 2px 8px;
    border-radius: 999px;
    background: #edf7f2;
    color: #0f6f4c;
    font-size: 12px;
}

.d-status-card-meta {
    display: grid;
    gap: 6px;
    justify-items: end;
    color: #667971;
    font-size: 12px;
    font-weight: 800;
}

.d-status-card-meta span,
.d-status-reaction-summary span,
.d-status-own-note {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.d-status-card-meta [data-lucide],
.d-status-reaction-summary [data-lucide],
.d-status-own-note [data-lucide] {
    width: 15px;
    height: 15px;
}

.d-status-card-body {
    display: grid;
    gap: 10px;
    padding: 14px 18px 14px 22px;
}

.d-status-copy-block {
    display: grid;
    gap: 6px;
}

.d-status-card-body h2,
.d-status-copy-block h2 {
    margin: 0;
    color: #10211b;
    font-size: 25px;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.d-status-card-body p,
.d-status-copy-block p {
    margin: 0;
    color: #41554e;
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-line;
}

.d-status-highlight {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-self: start;
    padding: 6px 9px;
    border: 1px solid #f4d38d;
    border-radius: 999px;
    background: #fff8e8;
    color: #a35d00;
    font-size: 12px;
    font-weight: 900;
}

.d-status-media {
    position: relative;
    overflow: hidden;
    border: 1px solid #dde8e3;
    border-radius: 8px;
    background: #f8fbfa;
}

.d-status-media img,
.d-status-media video {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(82vh, 860px);
    object-fit: contain;
    background: #0f1714;
}

.dekeree-media-watermark {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 4;
    display: inline-grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 7px 10px 7px 7px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #10251e;
    box-shadow: 0 14px 32px rgba(8, 31, 23, 0.18);
    backdrop-filter: blur(12px);
    pointer-events: none;
}

.dekeree-watermark-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0acb73, #087a57);
    color: #ffffff;
    font-size: 17px;
    font-weight: 950;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.dekeree-media-watermark span:last-child {
    display: grid;
    min-width: 0;
}

.dekeree-media-watermark strong,
.dekeree-media-watermark small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dekeree-media-watermark strong {
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0;
}

.dekeree-media-watermark small {
    color: rgba(16, 37, 30, 0.72);
    font-size: 10px;
    font-weight: 850;
}

.d-status-cta {
    justify-self: start;
}

.d-status-reaction-summary {
    padding: 0 18px 12px 22px;
    color: #65766f;
    font-size: 13px;
    font-weight: 750;
}

.d-status-actions {
    display: grid;
    gap: 12px;
    padding: 12px 18px 16px 22px;
    border-top: 1px solid #edf3f0;
    background: #fbfefd;
}

.d-status-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.d-status-reactions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #d9e8e1;
    border-radius: 999px;
    background: #ffffff;
    color: #263b34;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.d-status-reactions button:hover {
    border-color: color-mix(in srgb, var(--status-accent, #0f8f5f) 45%, #d9e8e1);
    background: #f5fbf8;
    box-shadow: 0 8px 20px rgba(15, 143, 95, 0.08);
    transform: translateY(-1px) scale(1.02);
}

.d-status-reactions button:active {
    transform: translateY(0) scale(0.98);
}

.d-status-reactions b {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--status-accent, #0f8f5f);
    color: #ffffff;
    font-size: 11px;
}

.d-status-message-row {
    justify-content: space-between;
}

.d-status-message-row form {
    margin: 0;
}

.d-status-own-note {
    padding: 8px 10px;
    border: 1px solid #d9e8e1;
    border-radius: 8px;
    background: #ffffff;
    color: #50655d;
    font-size: 13px;
    font-weight: 800;
}

.d-status-empty {
    display: grid;
    justify-items: start;
    gap: 10px;
    min-height: 240px;
}

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

@keyframes dStatusCardIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dStatusComposeLine {
    to {
        background-position: 220% 0;
    }
}

@keyframes dStatusComposeShine {
    0%,
    42% {
        transform: translateX(-78%);
        opacity: 0;
    }
    52% {
        opacity: 0.72;
    }
    72%,
    100% {
        transform: translateX(78%);
        opacity: 0;
    }
}

@keyframes dStatusReplyIn {
    from {
        opacity: 0;
        transform: translateY(5px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dStatusReactionTap {
    0% {
        transform: scale(1);
        filter: saturate(1);
    }
    28% {
        transform: scale(0.94);
        filter: saturate(1.05);
    }
    58% {
        transform: scale(1.055);
        filter: saturate(1.22);
    }
    100% {
        transform: scale(1);
        filter: saturate(1);
    }
}

@keyframes dStatusBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, 6px) scale(0.82);
    }
    22% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -7px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -16px) scale(0.92);
    }
}

@keyframes dStatusRailBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, 4px) scale(0.86);
    }
    22% {
        opacity: 1;
        transform: translate(-50%, -2px) scale(1);
    }
    68% {
        opacity: 1;
        transform: translate(-50%, -8px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -18px) scale(0.9);
    }
}

@keyframes dStatusFollowUpdate {
    0% {
        transform: translateY(-2px) scale(0.98);
        filter: saturate(0.9);
    }
    55% {
        transform: translateY(0) scale(1.03);
        filter: saturate(1.1);
    }
    100% {
        transform: translateY(0) scale(1);
        filter: none;
    }
}

@keyframes dStatusReplyNew {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    52% {
        opacity: 1;
        transform: translateY(-2px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dStatusButtonSend {
    to {
        transform: translateX(100%);
    }
}

@keyframes dStatusSoundBars {
    0%,
    100% {
        transform: scaleY(0.54);
    }
    50% {
        transform: scaleY(1);
    }
}

@keyframes dekereeShareIn {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 980px) {
    .d-status-hero-inner,
    .d-status-shell {
        grid-template-columns: 1fr;
    }

    .d-status-side {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .d-status-phone {
        min-height: 280px;
    }
}

@media (max-width: 720px) {
    .d-status-hero-copy h1 {
        font-size: 34px;
    }

    .d-status-side,
    .d-status-type-grid,
    .d-status-form-grid,
    .d-status-visibility-row {
        grid-template-columns: 1fr;
    }

    .d-status-card-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .d-status-card-meta {
        width: 100%;
        justify-items: start;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .d-status-card-body h2 {
        font-size: 22px;
    }

    .d-status-reactions button span {
        display: none;
    }
}

@media (max-width: 520px) {
    .d-status-hero-inner,
    .d-status-shell {
        padding-right: 12px;
        padding-left: 12px;
    }

    .d-status-hero-actions .primary-button,
    .d-status-hero-actions .secondary-button,
    .d-status-submit,
    .d-status-message-row .primary-button,
    .d-status-message-row .secondary-button {
        width: 100%;
    }

    .d-status-stat-strip span {
        flex: 1 1 140px;
    }

    .d-status-reactions {
        justify-content: space-between;
    }

    .d-status-reactions button {
        flex: 1 1 44px;
        justify-content: center;
        padding: 8px;
    }
}

.simple-status-hero .d-status-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.simple-status-preview {
    min-height: 300px;
}

.simple-status-shell {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    max-width: 100%;
    border-radius: 0;
    background:
        radial-gradient(circle at 8% 0%, rgba(29, 155, 240, 0.08), transparent 28%),
        radial-gradient(circle at 90% 4%, rgba(15, 143, 95, 0.08), transparent 26%),
        #f5f7f9;
    box-shadow: none;
}

.simple-status-shell .d-status-side {
    display: none;
}

.simple-status-hero {
    display: none;
}

.d-status-compose-simple {
    padding: 18px;
    border: 1px solid #dfe7ee;
    border-radius: 30px;
    background: #ffffff;
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.d-status-compose-simple::before,
.d-status-compose-simple::after {
    display: none;
}

.d-status-compose-simple:hover,
.d-status-compose-simple:focus-within {
    border-color: #cfe0ec;
    box-shadow:
        0 22px 52px rgba(15, 23, 42, 0.1),
        0 0 0 4px rgba(29, 155, 240, 0.04);
    transform: none;
}

.d-status-compose-top {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.d-status-compose-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d9bf0, #0f8f5f);
    box-shadow: 0 10px 24px rgba(29, 155, 240, 0.16);
}

.d-status-compose-avatar img,
.d-status-compose-avatar span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #eef7ff;
    color: #0f6f4c;
    font-weight: 950;
    object-fit: cover;
}

.d-status-compose-simple .d-status-message-field {
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.d-status-compose-simple .d-status-message-field > span {
    color: #64748b;
    font-size: 13px;
}

.d-status-compose-simple .d-status-message-field textarea {
    min-height: 78px;
    padding: 4px 0 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 850;
    line-height: 1.28;
}

.d-status-compose-simple .d-status-message-field textarea::placeholder {
    color: #94a3b8;
}

.d-status-compose-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 72px;
}

.d-status-visibility-pill {
    cursor: pointer;
}

.d-status-visibility-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.d-status-visibility-pill span,
.d-status-compose-simple .d-status-compose-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #dbe7f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.d-status-visibility-pill input:checked + span {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.d-status-destination-pill span {
    border-color: #cfeee0;
    background: #f5fffa;
    color: #176b4d;
}

.d-status-destination-pill input:checked + span {
    border-color: #91d8b4;
    background: #dcfce7;
    color: #0f6b43;
    box-shadow: 0 12px 28px rgba(23, 107, 77, .12);
}

.d-status-visibility-pill [data-lucide],
.d-status-compose-simple .d-status-compose-badge [data-lucide] {
    width: 17px;
    height: 17px;
}

.d-status-compose-simple .d-status-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding-left: 72px;
}

.d-status-compose-simple .d-status-upload,
.d-status-compose-simple .d-status-optional-details {
    min-height: 54px;
    border-radius: 18px;
    background: #f8fafc;
}

.d-status-compose-simple .d-status-upload {
    padding: 10px 12px;
}

.d-status-compose-simple .d-status-upload > span {
    width: 36px;
    height: 36px;
    background: #e0f2fe;
    color: #0284c7;
}

.d-status-compose-simple .d-status-optional-details {
    min-width: 176px;
}

.d-status-compose-simple .d-status-media-preview {
    grid-column: 1 / -1;
    border-radius: 20px;
}

.d-status-compose-simple .d-status-submit {
    justify-self: end;
    width: auto;
    min-width: 132px;
    min-height: 50px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: 17px;
}

.d-status-poster-card .d-status-actions {
    display: none;
}

.d-status-poster-card .d-status-reaction-summary [data-status-reactions-summary],
.d-status-poster-card .d-status-reaction-summary [data-status-replies-summary] {
    display: none;
}

.d-status-poster-card .d-status-poster-rail,
.d-status-poster-card .d-status-reaction-summary {
    display: none;
}

.d-status-stack-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 18px clamp(18px, 4vw, 38px) 22px;
    border-top: 1px solid #edf1f5;
    background: #ffffff;
}

.d-status-stack-actions form {
    margin: 0;
}

.d-status-stack-actions form,
.d-status-stack-actions button,
.d-status-stack-actions a,
.d-status-stack-actions > span {
    min-width: 0;
}

.d-status-stack-actions button,
.d-status-stack-actions a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #0f172a;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.d-status-stack-actions form:not(:first-child),
.d-status-stack-actions button:not(:first-child),
.d-status-stack-actions a:not(:first-child),
.d-status-stack-actions > span:not(:first-child) {
    border-left: 1px solid #e5eaf0;
}

.d-status-stack-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background:
        linear-gradient(180deg, #ffffff, #f6f8fb),
        #ffffff;
    color: #2563eb;
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.d-status-stack-icon [data-lucide] {
    width: 27px;
    height: 27px;
    stroke-width: 2.2;
}

.d-status-stack-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ff3b30;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    box-shadow:
        0 8px 16px rgba(255, 59, 48, 0.28),
        0 0 0 1px rgba(127, 29, 29, 0.04);
    transform: none;
    transform-origin: center;
}

.d-status-stack-badge[hidden] {
    display: none !important;
}

.d-status-stack-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.d-status-stack-copy strong {
    color: #1f2937;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.d-status-stack-copy small {
    color: #64748b;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.15;
}

.d-status-stack-actions button[data-share-native] .d-status-stack-copy strong,
.d-status-stack-actions a .d-status-stack-copy strong {
    color: #64748b;
    font-size: 16px;
    font-weight: 600;
}

.d-status-stack-actions [data-reaction-count] {
    display: none !important;
}

.d-status-stack-actions button:hover .d-status-stack-icon,
.d-status-stack-actions button:focus-visible .d-status-stack-icon,
.d-status-stack-actions button.is-active .d-status-stack-icon,
.d-status-stack-actions a:hover .d-status-stack-icon,
.d-status-stack-actions a:focus-visible .d-status-stack-icon {
    color: #1d4ed8;
    box-shadow:
        0 16px 30px rgba(37, 99, 235, 0.14),
        0 0 0 4px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.d-status-stack-actions button.is-popping .d-status-stack-icon {
    animation: dPosterIconTap 520ms cubic-bezier(.2, 1, .25, 1);
}

@media (max-width: 720px) {
    .d-status-stack-actions {
        grid-template-columns: repeat(6, minmax(52px, 1fr));
        padding: 12px 6px 14px;
    }

    .d-status-stack-actions button,
    .d-status-stack-actions a {
        justify-content: center;
        gap: 6px;
        min-height: 64px;
        padding: 0 4px;
    }

    .d-status-stack-icon {
        width: 38px;
        height: 38px;
    }

    .d-status-stack-icon [data-lucide] {
        width: 21px;
        height: 21px;
    }

    .d-status-stack-copy strong {
        font-size: 15px;
    }

    .d-status-stack-copy small,
    .d-status-stack-actions button[data-share-native] .d-status-stack-copy strong,
    .d-status-stack-actions a .d-status-stack-copy strong {
        font-size: 11px;
    }
}
}

.d-status-hub-links,
.connect-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.d-status-hub-links a,
.connect-hub-grid a {
    display: grid;
    gap: 8px;
    min-height: 82px;
    padding: 12px;
    border: 1px solid #dce9e3;
    border-radius: 8px;
    background: #ffffff;
    color: #14241f;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.d-status-hub-links a:hover,
.connect-hub-grid a:hover {
    border-color: #9bd9c1;
    box-shadow: 0 10px 22px rgba(15, 143, 95, 0.09);
    transform: translateY(-1px);
}

.d-status-hub-links [data-lucide],
.connect-hub-grid [data-lucide] {
    width: 20px;
    height: 20px;
    color: #0f8f5f;
}

.connect-dekeree-links {
    padding: 14px;
    border: 1px solid #d9e8e1;
    border-radius: 8px;
    background: #f9fcfb;
}

.d-status-follow-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.d-status-follow-count,
.d-status-request-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #d7e7e0;
    border-radius: 999px;
    background: #ffffff;
    color: #51685f;
    font-size: 12px;
    font-weight: 850;
}

.d-status-request-badge {
    border-color: rgba(23, 107, 77, .22);
    background: linear-gradient(180deg, #f4fff9, #ffffff);
    color: var(--green);
    box-shadow: 0 10px 24px rgba(23, 107, 77, .08);
}

.d-status-request-badge [data-lucide] {
    width: 14px;
    height: 14px;
}

.d-status-request-list {
    display: grid;
    gap: 10px;
}

.d-status-request-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid #cfe6dc;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff, #f4fbf8),
        #ffffff;
    box-shadow: 0 14px 32px rgba(23, 107, 77, .07);
}

.d-status-request-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 2px solid #ffffff;
    border-radius: 50%;
    outline: 1px solid rgba(23, 107, 77, .22);
    background: #e9f7f0;
    color: var(--green);
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(23, 107, 77, .12);
}

.d-status-request-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.d-status-request-copy {
    min-width: 0;
}

.d-status-request-actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 8px;
}

.d-status-request-card form {
    margin: 0;
}

.d-status-request-card strong,
.d-status-request-card small {
    display: block;
}

.d-status-request-card small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: #65776f;
    font-size: 12px;
}

.d-status-request-card small [data-lucide] {
    width: 13px;
    height: 13px;
    color: var(--green);
}

.d-status-request-actions .primary-button,
.d-status-request-actions .secondary-button {
    min-height: 36px;
    padding-inline: 12px;
}

.d-status-compose-simple .d-status-form {
    gap: 15px;
}

.d-status-quick-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 290px);
    gap: 12px;
}

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

.d-status-optional-details {
    flex: 2 1 420px;
    border: 1px solid #dce9e3;
    border-radius: 8px;
    background: #ffffff;
}

.d-status-compose-simple {
    padding: 22px;
    border-radius: 8px;
}

.d-status-compose-simple .section-title-row {
    align-items: start;
    gap: 14px;
    margin-bottom: 2px;
}

.d-status-compose-simple .section-label {
    margin-bottom: 5px;
}

.d-status-compose-simple h2 {
    margin: 0;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.05;
}

.d-status-compose-simple .d-status-compose-badge {
    margin-top: 2px;
    white-space: nowrap;
}

.d-status-compose-simple .d-status-upload-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(280px, 1.22fr);
    align-items: stretch;
}

.d-status-compose-simple .d-status-upload,
.d-status-compose-simple .d-status-optional-details {
    min-height: 76px;
}

.d-status-compose-simple .d-status-upload {
    padding: 14px;
}

.d-status-compose-simple .d-status-submit {
    width: min(252px, 100%);
    min-height: 54px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 950;
}

.d-status-optional-details summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    color: #183229;
    font-weight: 850;
    cursor: pointer;
}

.d-status-optional-details summary [data-lucide] {
    width: 19px;
    height: 19px;
    color: #0f8f5f;
}

.d-status-optional-details > div,
.d-status-optional-details .compact-highlight {
    margin: 0 14px 14px;
}

.compact-color-field input[type="color"] {
    min-height: 44px;
}

.compact-highlight {
    width: auto;
}

.simple-status-feed {
    gap: 14px;
}

.simple-status-card {
    box-shadow: 0 12px 28px rgba(16, 33, 27, 0.07);
}

.simple-status-head {
    align-items: center;
}

.d-status-follow-action {
    display: flex;
    justify-content: flex-end;
    min-width: 118px;
}

.d-status-follow-action form {
    margin: 0;
}

.d-status-follow-action button[disabled] {
    cursor: default;
    opacity: 0.72;
}

.simple-status-card .d-status-card-body h2 {
    font-size: 22px;
}

.simple-status-card .d-status-reaction-summary {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.simple-status-card .d-status-reactions button {
    min-width: 42px;
    justify-content: center;
}

.d-clip-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 251, 0.98)),
        #ffffff;
}

.d-clip-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in srgb, var(--status-accent, #0f8f5f) 28%, transparent);
    border-radius: inherit;
    pointer-events: none;
}

.d-clip-stage {
    position: relative;
    max-width: 430px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 8px;
    background:
        radial-gradient(circle at 35% 18%, rgba(15, 143, 95, 0.32), transparent 28%),
        radial-gradient(circle at 80% 88%, rgba(38, 120, 201, 0.28), transparent 32%),
        #06130f;
    box-shadow: 0 24px 48px rgba(6, 19, 15, 0.22);
    overflow: hidden;
    isolation: isolate;
}

.d-clip-stage::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(15, 143, 95, 0.2),
        transparent,
        rgba(38, 120, 201, 0.18),
        transparent
    );
    animation: dClipSpin 8s linear infinite;
    opacity: 0.75;
    z-index: -1;
}

.d-clip-stage video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    background: #071410;
    transform: scale(1.01);
}

.d-clip-stage .dekeree-media-watermark {
    top: 58px;
    bottom: auto;
    left: 14px;
    max-width: calc(100% - 94px);
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(7, 20, 16, 0.5);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.d-clip-stage .dekeree-media-watermark small {
    color: rgba(255, 255, 255, 0.78);
}

.d-clip-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 8, 6, 0.55), transparent 24%, transparent 58%, rgba(2, 8, 6, 0.76)),
        linear-gradient(90deg, transparent 58%, rgba(2, 8, 6, 0.38));
    pointer-events: none;
}

.d-clip-play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: translate(-50%, -50%);
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(2, 8, 6, 0.32);
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
    z-index: 3;
}

.d-clip-play [data-lucide] {
    width: 30px;
    height: 30px;
    margin-left: 3px;
}

.d-clip-stage.is-playing .d-clip-play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.84);
    pointer-events: none;
}

.d-clip-stage:hover .d-clip-play,
.d-clip-stage:focus-within .d-clip-play {
    opacity: 1;
    pointer-events: auto;
}

.d-clip-stage.is-playing:hover .d-clip-play [data-lucide],
.d-clip-stage.is-playing:focus-within .d-clip-play [data-lucide] {
    margin-left: 0;
}

.d-clip-topline,
.d-clip-caption,
.d-clip-side-actions {
    position: absolute;
    z-index: 2;
}

.d-clip-topline {
    inset: 14px 14px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #ffffff;
}

.d-clip-topline span,
.d-clip-topline b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(7, 20, 16, 0.38);
    font-size: 12px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.d-clip-topline b {
    color: #bbf7d0;
}

.d-clip-side-actions {
    right: 12px;
    bottom: 92px;
    display: grid;
    gap: 12px;
}

.d-clip-side-actions span,
.d-clip-side-actions button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(7, 20, 16, 0.36);
    color: #ffffff;
    font: inherit;
    backdrop-filter: blur(10px);
    animation: dClipActionFloat 2.8s ease-in-out infinite;
    cursor: pointer;
}

.d-clip-side-actions span:nth-child(2),
.d-clip-side-actions button:nth-child(2) {
    animation-delay: 0.16s;
}

.d-clip-side-actions span:nth-child(3),
.d-clip-side-actions button:nth-child(3) {
    animation-delay: 0.32s;
}

.d-clip-side-actions button:hover {
    background: rgba(15, 143, 95, 0.74);
    transform: translateY(-2px) scale(1.04);
}

.d-clip-stage.is-muted [data-d-clip-mute] {
    background: rgba(220, 38, 38, 0.76);
}

.d-clip-volume-panel {
    position: absolute;
    right: 84px;
    bottom: 18px;
    z-index: 13;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.d-clip-volume-control {
    position: absolute;
    right: calc(100% + 10px);
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(220px, calc(100vw - 140px));
    min-height: 40px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(8, 23, 18, 0.72);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateX(8px) scale(0.96);
    pointer-events: none;
    transition: opacity 170ms ease, transform 170ms ease;
}

.d-clip-volume-panel.is-volume-open .d-clip-volume-control {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.d-clip-volume-control [data-lucide] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.d-clip-volume-control input {
    width: clamp(82px, 20vw, 130px);
    accent-color: #19b77d;
}

.d-clip-volume-control span {
    min-width: 36px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-align: right;
}

.d-clip-caption {
    right: 14px;
    bottom: 16px;
    left: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    color: #ffffff;
}

.d-clip-caption strong {
    overflow-wrap: anywhere;
    text-shadow: 0 2px 10px rgba(2, 8, 6, 0.55);
}

.d-clip-sound {
    display: inline-flex;
    align-items: end;
    justify-content: center;
    gap: 3px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #c7f6df);
    box-shadow: 0 12px 28px rgba(2, 8, 6, 0.25);
}

.d-clip-sound i {
    display: block;
    width: 4px;
    height: 12px;
    border-radius: 999px;
    background: #0f8f5f;
    animation: dClipBars 760ms ease-in-out infinite;
}

.d-clip-sound i:nth-child(2) {
    height: 20px;
    animation-delay: 120ms;
}

.d-clip-sound i:nth-child(3) {
    height: 15px;
    animation-delay: 240ms;
}

.d-clip-stage.is-paused .d-clip-sound i {
    animation-play-state: paused;
}

@keyframes dClipSpin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes dClipActionFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes dClipBars {
    0%,
    100% {
        transform: scaleY(0.55);
    }
    50% {
        transform: scaleY(1);
    }
}

@media (max-width: 980px) {
    .simple-status-shell,
    .simple-status-hero .d-status-hero-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .d-status-quick-row,
    .d-status-compose-simple .d-status-upload-row,
    .simple-visibility-row,
    .d-status-hub-links,
    .connect-hub-grid {
        grid-template-columns: 1fr;
    }

    .simple-status-head {
        align-items: flex-start;
    }

    .d-status-follow-action {
        width: 100%;
        justify-content: flex-start;
    }

    .d-clip-stage {
        max-width: min(100%, 380px);
    }
}

@media (max-width: 520px) {
    .d-clip-stage {
        max-width: 100%;
        border-radius: 8px;
    }

    .d-clip-topline b {
        display: none;
    }

    .d-clip-side-actions {
        right: 10px;
        bottom: 96px;
    }

    .d-clip-volume-control {
        right: 0;
        bottom: calc(100% + 8px);
        left: auto;
        max-width: min(220px, calc(100vw - 72px));
        justify-content: center;
    }
}

.simple-status-feed {
    max-width: 820px;
    width: 100%;
}

.simple-status-card {
    overflow: visible;
    border-color: rgba(207, 224, 216, 0.92);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 251, 0.98)),
        #ffffff;
    box-shadow:
        0 18px 42px rgba(15, 35, 28, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.simple-status-card:hover {
    border-color: color-mix(in srgb, var(--status-accent, #0f8f5f) 28%, #d6e5df);
    box-shadow:
        0 22px 54px rgba(15, 35, 28, 0.12),
        0 0 0 4px rgba(255, 255, 255, 0.66),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}

.simple-status-card::before {
    width: 5px;
    opacity: 0.92;
}

.simple-status-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 16px 18px 14px 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 250, 0.9)),
        linear-gradient(90deg, color-mix(in srgb, var(--status-accent, #0f8f5f) 8%, transparent), transparent 45%);
}

.simple-status-head .d-status-avatar {
    width: 50px;
    height: 50px;
    border: 3px solid #ffffff;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--status-accent, #0f8f5f) 38%, #d7e7e0),
        0 8px 18px rgba(15, 35, 28, 0.12);
}

.simple-status-card .d-status-author strong {
    font-size: 17px;
    letter-spacing: 0;
}

.simple-status-card .d-status-author span {
    gap: 8px;
    color: #526a61;
}

.simple-status-card .d-status-author span > [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--status-accent, #0f8f5f);
}

.simple-status-card .d-status-author b {
    border: 1px solid color-mix(in srgb, var(--status-accent, #0f8f5f) 20%, #dbe9e3);
    background: color-mix(in srgb, var(--status-accent, #0f8f5f) 8%, #ffffff);
    color: #174d39;
}

.simple-status-card .d-status-follow-action {
    min-width: 122px;
}

.simple-status-card .d-status-follow-action .primary-button,
.simple-status-card .d-status-follow-action .secondary-button {
    min-height: 38px;
    padding: 8px 11px;
    white-space: nowrap;
}

.simple-status-card .d-status-follow-action.is-updated {
    animation: dStatusFollowUpdate 360ms ease both;
}

.simple-status-card .d-status-follow-action form.is-sending .primary-button,
.simple-status-card .d-status-follow-action form.is-sending .secondary-button {
    opacity: 0.72;
    transform: scale(0.98);
}

.simple-status-card .d-status-card-body {
    gap: 12px;
    padding: 18px 20px 16px 24px;
}

.simple-status-card .d-status-card-body h2 {
    color: #0d2119;
    font-size: 24px;
    line-height: 1.2;
}

.simple-status-card .d-status-card-body p {
    max-width: 68ch;
    color: #283d35;
    font-size: 16px;
    line-height: 1.62;
}

.d-status-soundtrack {
    display: grid;
    grid-template-columns: 42px auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    justify-self: start;
    max-width: 100%;
    padding: 8px 11px 8px 8px;
    border: 1px solid color-mix(in srgb, var(--status-accent, #0f8f5f) 24%, #dce9e3);
    border-radius: 999px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--status-accent, #0f8f5f) 10%, #ffffff), #ffffff),
        #ffffff;
    box-shadow: 0 12px 28px rgba(15, 35, 28, 0.08);
}

.d-status-soundtrack button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #10211b;
    color: #ffffff;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.d-status-soundtrack button:hover {
    background: var(--status-accent, #0f8f5f);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--status-accent, #0f8f5f) 25%, transparent);
    transform: translateY(-1px) scale(1.03);
}

.d-status-soundtrack.is-playing button {
    background: var(--status-accent, #0f8f5f);
}

.d-status-soundtrack button [data-lucide] {
    width: 18px;
    height: 18px;
}

.d-status-sound-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 134px;
}

.d-status-sound-controls button {
    width: 34px;
    height: 34px;
    background: #ffffff;
    color: var(--status-accent, #0f8f5f);
    border: 1px solid #dce9e3;
    box-shadow: none;
}

.d-status-sound-controls button:hover,
.d-status-soundtrack.is-muted .d-status-sound-controls button {
    background: #10211b;
    color: #ffffff;
}

.d-status-sound-controls input,
.d-clip-volume-control input {
    width: 86px;
    accent-color: var(--status-accent, #0f8f5f);
    cursor: pointer;
}

.d-status-sound-wave {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 26px;
}

.d-status-sound-wave i {
    display: block;
    width: 4px;
    height: 10px;
    border-radius: 999px;
    background: var(--status-accent, #0f8f5f);
    opacity: 0.82;
    animation: dStatusSoundBars 820ms ease-in-out infinite;
    animation-play-state: paused;
}

.d-status-sound-wave i:nth-child(2) {
    height: 18px;
    animation-delay: 100ms;
}

.d-status-sound-wave i:nth-child(3) {
    height: 14px;
    animation-delay: 200ms;
}

.d-status-sound-wave i:nth-child(4) {
    height: 22px;
    animation-delay: 300ms;
}

.d-status-soundtrack.is-playing .d-status-sound-wave i {
    animation-play-state: running;
}

.d-status-soundtrack strong,
.d-status-soundtrack small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d-status-soundtrack strong {
    color: #10211b;
    font-size: 13px;
    font-weight: 950;
}

.d-status-soundtrack small {
    color: #667970;
    font-size: 11px;
    font-weight: 850;
}

.d-status-soundtrack audio {
    display: none;
}

.simple-status-card .d-status-media:not(.d-clip-stage) {
    border-color: #d4e2dc;
    background: #eef7f3;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.simple-status-card .d-status-media:not(.d-clip-stage) img {
    max-height: min(82vh, 860px);
    object-fit: contain;
}

.simple-status-card .d-status-reaction-summary {
    display: flex;
    gap: 8px;
    padding: 0 20px 14px 24px;
}

.simple-status-card .d-status-reaction-summary span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid #deebe5;
    border-radius: 999px;
    background: #f8fcfa;
    color: #50655d;
    font-size: 12px;
}

.simple-status-card .d-status-reaction-summary [data-lucide] {
    width: 14px;
    height: 14px;
    color: var(--status-accent, #0f8f5f);
}

.d-status-summary-message-form {
    display: inline-flex;
    margin: 0 0 0 auto;
}

.d-status-summary-message {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid rgba(15, 107, 77, 0.18);
    border-radius: 999px;
    background:
        linear-gradient(180deg, #ffffff, #eefaf5),
        #ffffff;
    color: #0f5f43;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 107, 77, 0.08);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.d-status-summary-message:hover,
.d-status-summary-message:focus-visible {
    border-color: rgba(15, 107, 77, 0.34);
    background:
        linear-gradient(180deg, #ffffff, #e4f8ee),
        #ffffff;
    box-shadow: 0 12px 24px rgba(15, 107, 77, 0.13);
    transform: translateY(-1px);
    outline: none;
}

.d-status-summary-message [data-lucide] {
    width: 15px;
    height: 15px;
    color: #0f8f5f;
}

.d-status-summary-message.is-on {
    color: #47625a;
    background: #f7fbf9;
    box-shadow: none;
}

.d-status-replies-panel {
    margin: 0 18px 12px 24px;
    border: 1px solid #dcebe4;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #ffffff, #f8fcfa),
        #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

.d-status-replies-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    color: #132820;
    cursor: pointer;
    list-style: none;
}

.d-status-replies-panel summary::-webkit-details-marker {
    display: none;
}

.d-status-replies-panel summary span,
.d-status-replies-panel summary small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.d-status-replies-panel summary span {
    font-size: 13px;
    font-weight: 950;
}

.d-status-replies-panel summary small {
    padding: 6px 9px;
    border: 1px solid #e1ede8;
    border-radius: 999px;
    background: #f7fbf9;
    color: #5a7068;
    font-size: 12px;
    font-weight: 850;
}

.d-status-replies-panel summary [data-lucide] {
    width: 17px;
    height: 17px;
    color: var(--status-accent, #0f8f5f);
}

.d-status-replies-panel[open] summary {
    border-bottom: 1px solid #edf3f0;
}

.d-status-replies-list {
    display: grid;
    gap: 9px;
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(247, 252, 250, 0.72), rgba(255, 255, 255, 0.9)),
        #ffffff;
}

.d-status-reply {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    animation: dStatusReplyIn 180ms ease both;
}

.d-status-reply.is-new {
    animation: dStatusReplyNew 520ms ease both;
}

.d-status-reply > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--status-accent, #0f8f5f) 22%, #dbe9e3);
    border-radius: 50%;
    background: color-mix(in srgb, var(--status-accent, #0f8f5f) 9%, #ffffff);
    color: #124634;
    font-size: 12px;
    font-weight: 950;
}

.d-status-reply > div {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #e1eee8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 35, 28, 0.05);
}

.d-status-reply strong,
.d-status-reply p,
.d-status-reply small {
    display: block;
}

.d-status-reply strong {
    color: #132820;
    font-size: 13px;
    font-weight: 950;
}

.d-status-reply p {
    margin: 4px 0 5px;
    color: #2c433a;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.d-status-reply small,
.d-status-reply-note {
    color: #6a7c75;
    font-size: 12px;
    font-weight: 750;
}

.d-status-reply-note {
    margin: 0;
}

.d-status-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 7px;
}

.d-status-comment-actions form {
    margin: 0;
}

.d-status-comment-actions button,
.d-status-comment-actions a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid #deebe5;
    border-radius: 999px;
    background: #f8fcfa;
    color: #315247;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.d-status-comment-actions button:hover,
.d-status-comment-actions a:hover,
.d-status-comment-actions button.is-liked {
    border-color: color-mix(in srgb, var(--status-accent, #0f8f5f) 36%, #deebe5);
    background: color-mix(in srgb, var(--status-accent, #0f8f5f) 9%, #ffffff);
    color: #0f5f43;
    transform: translateY(-1px);
}

.d-status-comment-actions button.is-popping {
    animation: dStatusReactionTap 520ms cubic-bezier(.2, 1, .25, 1);
}

.d-status-comment-actions [data-lucide] {
    width: 14px;
    height: 14px;
    color: var(--status-accent, #0f8f5f);
}

.d-status-comment-actions b {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--status-accent, #0f8f5f);
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
}

.d-status-comment-actions b[hidden] {
    display: none;
}

.d-status-comment-children {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--status-accent, #0f8f5f) 18%, #e0ece7);
}

.d-status-reply.child {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
}

.d-status-reply.child > span {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.d-status-reply.child > div {
    padding: 8px 10px;
    background: #fafeff;
}

.d-status-no-replies {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px;
    border: 1px dashed #cdded6;
    border-radius: 8px;
    background: #ffffff;
    color: #5f716b;
    font-size: 13px;
    font-weight: 800;
}

.d-status-no-replies [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--status-accent, #0f8f5f);
}

.d-status-reply-form,
.d-status-comment-reply-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: end;
    padding: 12px;
    border-top: 1px solid #edf3f0;
    background: #ffffff;
}

.d-status-comment-reply-form {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #edf3f0;
    border-radius: 8px;
}

.d-status-comment-reply-form[hidden] {
    display: none;
}

.d-status-reply-form.is-sending,
.d-status-comment-reply-form.is-sending {
    opacity: 0.72;
    pointer-events: none;
}

.d-status-reply-form.is-sending .primary-button,
.d-status-comment-reply-form.is-sending .primary-button {
    position: relative;
    overflow: hidden;
}

.d-status-reply-form.is-sending .primary-button::after,
.d-status-comment-reply-form.is-sending .primary-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
    transform: translateX(-100%);
    animation: dStatusButtonSend 760ms ease infinite;
}

.d-status-reply-form textarea,
.d-status-comment-reply-form textarea {
    width: 100%;
    min-height: 44px;
    max-height: 120px;
    resize: vertical;
    border: 1px solid #dce9e3;
    border-radius: 8px;
    background: #f9fcfb;
    color: #132820;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    padding: 10px 11px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.d-status-reply-form textarea:focus,
.d-status-comment-reply-form textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--status-accent, #0f8f5f) 45%, #dce9e3);
    background: #ffffff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-accent, #0f8f5f) 10%, transparent);
}

.d-status-reply-form .primary-button,
.d-status-comment-reply-form .primary-button {
    min-height: 44px;
}

.d-status-reply-input-wrap {
    position: relative;
    min-width: 0;
}

.d-status-reply-input-wrap textarea {
    padding-right: 56px;
}

.d-status-reply-emoji-picker {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    margin: 0;
}

.d-status-reply-emoji-picker .d-status-emoji-toggle {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 999px;
    color: #c13584;
    box-shadow:
        0 8px 18px rgba(193, 53, 132, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.d-status-reply-emoji-picker .d-status-emoji-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.d-status-reply-emoji-picker .d-status-emoji-toggle [data-lucide] {
    width: 17px;
    height: 17px;
}

.d-status-reply-emoji-picker .d-status-emoji-panel {
    top: auto;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(300px, 76vw);
}

.d-status-login-reply {
    margin: 0 12px 12px;
}

.d-status-engagement-footer {
    margin: 0;
    padding: 12px 18px 12px 24px;
    border-top: 1px solid #edf5f1;
    border-bottom: 1px solid #edf5f1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 250, 0.96)),
        #ffffff;
}

.simple-status-card .d-status-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
    padding: 13px 18px 16px 24px;
    background: linear-gradient(180deg, #fbfefd, #f6fbf8);
}

.simple-status-card .d-status-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.simple-status-card .d-status-reactions button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 82px;
    min-height: 48px;
    padding: 9px 14px;
    border: 1px solid #d7e6df;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #ffffff, #fbfefd),
        #ffffff;
    color: #21372f;
    font: inherit;
    font-weight: 900;
    box-shadow:
        0 8px 18px rgba(15, 35, 28, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.simple-status-card .d-status-reactions button:hover {
    border-color: color-mix(in srgb, var(--status-accent, #0f8f5f) 42%, #d7e6df);
    background: color-mix(in srgb, var(--status-accent, #0f8f5f) 8%, #ffffff);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--status-accent, #0f8f5f) 11%, transparent);
    transform: translateY(-1px);
}

.simple-status-card .d-status-reactions button.is-active {
    border-color: color-mix(in srgb, var(--status-accent, #0f8f5f) 48%, #d7e6df);
    background: color-mix(in srgb, var(--status-accent, #0f8f5f) 12%, #ffffff);
    color: #0f5f43;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--status-accent, #0f8f5f) 14%, transparent);
}

.simple-status-card .d-status-reactions button.is-popping {
    animation: dStatusReactionTap 560ms cubic-bezier(.2, 1, .25, 1);
}

.simple-status-card .d-status-reactions.is-sending {
    pointer-events: none;
}

.simple-status-card .d-status-reactions.is-sending button:not(.is-popping) {
    opacity: 0.68;
}

.simple-status-card .d-status-reactions button [data-lucide] {
    width: 19px;
    height: 19px;
    color: var(--status-accent, #0f8f5f);
}

.simple-status-card .d-status-reactions button span {
    font-size: 13px;
    font-weight: 950;
}

.simple-status-card .d-status-reactions b {
    position: absolute;
    top: -7px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    border: 2px solid #ffffff;
    font-size: 10px;
    line-height: 1;
}

.simple-status-card .d-status-reactions b[hidden] {
    display: none;
}

.d-status-burst {
    position: absolute;
    z-index: 12;
    top: -24px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--status-accent, #0f8f5f) 24%, #ffffff);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--status-accent, #0f8f5f);
    font-size: 11px;
    font-weight: 950;
    box-shadow:
        0 12px 26px rgba(15, 35, 28, 0.12),
        0 0 0 4px color-mix(in srgb, var(--status-accent, #0f8f5f) 8%, transparent);
    backdrop-filter: blur(10px);
    transform: translateX(-50%);
    pointer-events: none;
    animation: dStatusBurst 760ms cubic-bezier(.2, 1, .25, 1) forwards;
}

.d-status-burst [data-lucide] {
    width: 13px;
    height: 13px;
}

.d-status-burst.is-rail-burst {
    top: -8px;
    left: 50%;
    max-width: 72px;
    padding: 4px 7px;
    font-size: 10px;
    white-space: nowrap;
    box-shadow:
        0 10px 22px rgba(15, 35, 28, 0.12),
        0 0 0 3px color-mix(in srgb, var(--rail-active, #1d9bf0) 10%, transparent);
    animation-name: dStatusRailBurst;
}

.simple-status-card .d-status-message-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.simple-status-card .d-status-message-row .primary-button,
.simple-status-card .d-status-message-row .secondary-button,
.simple-status-card .d-status-own-note {
    min-height: 40px;
    border-radius: 999px;
}

.dekeree-share {
    position: relative;
    display: inline-block;
    z-index: 12;
}

.dekeree-share-summary {
    cursor: pointer;
    list-style: none;
}

.dekeree-share-summary::-webkit-details-marker {
    display: none;
}

.dekeree-share[open] .dekeree-share-summary {
    border-color: color-mix(in srgb, var(--status-accent, #0f8f5f) 34%, #dce9e3);
    background: #f5fbf8;
    color: #0d5e42;
}

.dekeree-share-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(2, minmax(118px, 1fr));
    gap: 7px;
    min-width: 270px;
    padding: 10px;
    border: 1px solid rgba(203, 222, 214, 0.96);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.98)),
        #ffffff;
    box-shadow:
        0 22px 48px rgba(15, 35, 28, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    animation: dekereeShareIn 160ms ease both;
}

.dekeree-share-menu::after {
    content: "";
    position: absolute;
    right: 22px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    border-right: 1px solid rgba(203, 222, 214, 0.96);
    border-bottom: 1px solid rgba(203, 222, 214, 0.96);
    background: #f8fcfa;
    transform: rotate(45deg);
}

.dekeree-share-menu a,
.dekeree-share-menu button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid #e0ece7;
    border-radius: 8px;
    background: #ffffff;
    color: #17332a;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.dekeree-share-menu a:hover,
.dekeree-share-menu button:hover {
    border-color: color-mix(in srgb, var(--status-accent, #0f8f5f) 32%, #dce9e3);
    background: #f7fcfa;
    box-shadow: 0 8px 18px rgba(15, 35, 28, 0.08);
    transform: translateY(-1px);
}

.dekeree-share-menu [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--status-accent, #0f8f5f);
}

.dekeree-share-panel {
    position: fixed;
    z-index: 1200;
    width: min(360px, calc(100vw - 28px));
    padding: 14px;
    border: 1px solid rgba(197, 220, 211, 0.9);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 251, 0.98)),
        #ffffff;
    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    animation: dekereeSharePanelIn 180ms cubic-bezier(.2, .8, .2, 1);
}

.dekeree-share-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 2px 12px;
}

.dekeree-share-panel-head div {
    display: grid;
    gap: 2px;
}

.dekeree-share-panel-head strong {
    color: #10231e;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: 0;
}

.dekeree-share-panel-head span {
    color: #687b73;
    font-size: 13px;
    font-weight: 650;
}

.dekeree-share-panel-head button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid #dbeae3;
    border-radius: 999px;
    background: #ffffff;
    color: #42554d;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
    cursor: pointer;
}

.dekeree-share-panel-head button [data-lucide] {
    width: 17px;
    height: 17px;
}

.dekeree-share-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dekeree-share-choice {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 82px;
    padding: 12px 8px;
    border: 1px solid #dcebe4;
    border-radius: 18px;
    background:
        linear-gradient(180deg, #ffffff, #f7fbf9),
        #ffffff;
    color: #173d32;
    font-size: 12px;
    font-weight: 820;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease, color 170ms ease;
}

.dekeree-share-choice:hover,
.dekeree-share-choice:focus-visible {
    border-color: rgba(23, 107, 77, 0.36);
    color: var(--green);
    transform: translateY(-2px);
    box-shadow:
        0 18px 34px rgba(23, 107, 77, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    outline: none;
}

.dekeree-share-choice [data-lucide] {
    width: 23px;
    height: 23px;
    stroke-width: 2.4;
}

.dekeree-share-choice.is-primary {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    place-items: center start;
    min-height: 56px;
    padding-inline: 16px;
    color: #ffffff;
    background:
        linear-gradient(135deg, #177a58, #0e5f47),
        var(--green);
    border-color: rgba(23, 107, 77, 0.55);
    box-shadow: 0 18px 38px rgba(23, 107, 77, 0.22);
}

@keyframes dekereeSharePanelIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.975);
    }

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

@media (max-width: 560px) {
    .dekeree-share-panel {
        left: 12px !important;
        right: 12px;
        top: auto !important;
        bottom: 12px;
        width: auto;
        border-radius: 24px;
    }
}

.simple-status-card .d-status-own-note {
    border-color: #dce9e3;
    background: #ffffff;
}

.simple-status-card .d-status-highlight {
    margin-bottom: 2px;
}

.d-clip-card .d-status-card-body {
    padding-bottom: 18px;
}

.d-clip-card .d-status-actions {
    border-top-color: rgba(15, 143, 95, 0.18);
}

@media (max-width: 860px) {
    .simple-status-card .d-status-actions {
        grid-template-columns: 1fr;
    }

    .simple-status-card .d-status-message-row {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .simple-status-head {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .simple-status-card .d-status-follow-action {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-start;
    }

    .simple-status-card .d-status-follow-action .primary-button,
    .simple-status-card .d-status-follow-action .secondary-button {
        width: auto;
    }

    .simple-status-card .d-status-card-body,
    .simple-status-card .d-status-reaction-summary,
    .simple-status-card .d-status-actions,
    .d-status-engagement-footer {
        padding-left: 18px;
        padding-right: 14px;
    }

    .d-status-replies-panel {
        margin-right: 14px;
        margin-left: 18px;
    }

    .simple-status-card .d-status-card-body h2 {
        font-size: 21px;
    }

    .simple-status-card .d-status-card-body p {
        font-size: 15px;
    }

    .simple-status-card .d-status-reactions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .simple-status-card .d-status-reactions button {
        justify-content: center;
        min-width: 0;
        padding: 9px 7px;
    }

    .simple-status-card .d-status-reactions button span {
        display: inline;
        font-size: 12px;
    }

    .d-status-reply-form,
    .d-status-comment-reply-form {
        grid-template-columns: 1fr;
    }

    .d-status-reply-form .primary-button,
    .d-status-comment-reply-form .primary-button {
        width: 100%;
    }

    .d-status-compose-simple {
        padding: 18px 14px;
    }

    .d-status-compose-simple .section-title-row {
        grid-template-columns: 1fr;
    }

    .d-status-compose-simple .d-status-compose-badge {
        justify-self: start;
        white-space: normal;
    }

    .d-status-soundtrack {
        grid-template-columns: 42px auto minmax(0, 1fr);
        border-radius: 8px;
    }

    .d-status-sound-controls {
        grid-column: 1 / -1;
        width: 100%;
    }

    .d-status-sound-controls input {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .simple-status-card .d-status-reactions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .simple-status-card .d-status-message-row .primary-button,
    .simple-status-card .d-status-message-row .secondary-button {
        width: 100%;
    }

    .dekeree-share,
    .dekeree-share-summary {
        width: 100%;
    }

    .dekeree-share-menu {
        right: auto;
        left: 0;
        grid-template-columns: 1fr;
        min-width: min(270px, calc(100vw - 42px));
    }

    .dekeree-share-menu::after {
        right: auto;
        left: 22px;
    }
}

/* Poster-style media status cards */
.d-status-poster-card {
    position: relative;
    overflow: hidden;
    --poster-media-left: 0px;
    --poster-media-right: 0px;
    border: 1px solid #e7edf5;
    border-radius: 26px;
    background: #ffffff;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    animation: dStatusPosterIn 420ms ease both;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.d-status-poster-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 28px 72px rgba(15, 23, 42, 0.13),
        0 0 0 1px #d9e6f2;
}

.d-status-poster-card::before {
    display: none;
}

.d-status-poster-card .simple-status-head {
    position: relative;
    inset: auto;
    z-index: 12;
    display: block;
    min-height: 118px;
    padding: 24px 28px;
    background: #ffffff;
    border-bottom: 1px solid #eef2f7;
    pointer-events: auto;
}

.d-status-poster-card .d-status-avatar,
.d-status-poster-card .d-status-author,
.d-status-poster-card .d-status-follow-action {
    pointer-events: auto;
}

.d-status-poster-card .d-status-avatar {
    position: absolute;
    top: 24px;
    left: 28px;
    z-index: 2;
    width: 72px;
    height: 72px;
    border: 3px solid #ffffff;
    box-shadow:
        0 0 0 3px #2563eb,
        0 16px 34px rgba(37, 99, 235, 0.18);
}

.d-status-poster-card .d-status-author {
    position: absolute;
    top: 26px;
    left: 118px;
    z-index: 1;
    display: grid;
    min-width: 0;
    max-width: calc(100% - 360px);
    min-height: 64px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #16251f;
    box-shadow: none;
    backdrop-filter: none;
}

.d-status-poster-card .d-status-author strong {
    color: #0f172a;
    font-size: clamp(21px, 2.3vw, 28px);
    line-height: 1.05;
    text-shadow: none;
}

.d-status-poster-card .d-status-author span {
    color: #2563eb;
    font-size: 18px;
    font-weight: 850;
    text-shadow: none;
}

.d-status-poster-card .d-status-author b {
    display: none;
}

.d-status-poster-card .d-status-author span [data-lucide] {
    display: none;
}

.d-status-poster-card .d-status-d-number-chip {
    margin-top: 10px;
    padding: 7px 11px;
    border-color: #ccebdc;
    background:
        linear-gradient(180deg, #f8fffb, #eefaf5),
        #eefaf5;
    color: #0f6f4c;
    font-size: 12px;
    box-shadow: 0 8px 18px rgba(15, 143, 95, 0.08);
}

.d-status-poster-card .d-status-follow-action {
    position: absolute;
    top: 34px;
    right: 34px;
    display: inline-flex;
    grid-column: auto;
    width: auto;
    max-width: max-content;
    min-width: 0;
    justify-content: flex-start;
    align-items: flex-start;
}

.d-status-poster-card .d-status-follow-action form {
    display: inline-flex;
}

.d-status-poster-card .d-status-follow-action .primary-button,
.d-status-poster-card .d-status-follow-action .secondary-button,
.d-status-poster-card .d-status-own-note {
    min-height: 58px;
    padding: 12px 24px;
    border: 1px solid #d9e5f5;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #ffffff, #f8fbff),
        #ffffff;
    color: #2563eb;
    font-size: 17px;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.11);
    backdrop-filter: none;
}

.d-status-poster-card .d-status-follow-action [data-lucide] {
    color: #2563eb;
}

.d-status-poster-card .d-status-card-body {
    position: relative;
    display: grid;
    min-height: 0;
    margin-right: 0;
    padding: 0;
    background: #ffffff;
    overflow: visible;
}

.d-status-poster-card .d-status-media {
    position: relative;
    inset: auto;
    display: grid;
    place-items: center;
    order: 1;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #f3f6fb;
    box-shadow: none;
    overflow: hidden;
}

.simple-status-card.d-status-poster-card .d-status-media:not(.d-clip-stage) {
    background: #f3f6fb;
}

.d-status-poster-card .d-status-media::after {
    display: none;
}

.d-status-poster-card .d-status-media img,
.d-status-poster-card .d-status-media video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: min(72vh, 720px);
    object-fit: contain;
}

.d-status-poster-card .d-status-media-gallery {
    display: grid;
    gap: 5px;
    padding: 5px;
    background: #f8faf9;
}

.d-status-poster-card .d-status-media-gallery::after {
    z-index: 3;
}

.d-status-poster-card .d-status-media-gallery.has-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.d-status-poster-card .d-status-media-gallery.has-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.d-status-poster-card .d-status-media-gallery.has-three .d-status-gallery-item:first-child {
    grid-row: 1 / span 2;
}

.d-status-poster-card .d-status-media-gallery.has-many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.d-status-gallery-item {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    border-radius: 6px;
    background: #edf4f1;
}

.d-status-gallery-item:nth-child(n+5) {
    display: none;
}

.d-status-poster-card .d-status-gallery-item img,
.d-status-poster-card .d-status-gallery-item video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.d-status-gallery-more {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: rgba(10, 19, 15, 0.52);
    color: #ffffff;
    font-size: 34px;
    font-weight: 950;
    letter-spacing: 0;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(2px);
}

.d-status-poster-card .d-status-highlight {
    position: absolute;
    z-index: 8;
    top: 84px;
    left: 16px;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.d-status-poster-card .d-status-copy-block {
    position: relative;
    z-index: 1;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    order: 2;
    gap: 10px;
    max-width: 100%;
    padding: 28px clamp(24px, 6vw, 58px) 26px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: #0f172a;
    box-shadow: none;
    backdrop-filter: none;
}

.d-status-poster-card .d-status-copy-block h2,
.d-status-poster-card .d-status-copy-block p {
    margin: 0;
    color: #0f172a;
    text-shadow: none;
}

.d-status-poster-card .d-status-copy-block h2 {
    max-width: 820px;
    font-size: clamp(25px, 3.3vw, 38px);
    line-height: 1.28;
    font-weight: 950;
}

.d-status-poster-card .d-status-copy-block p {
    display: block;
    max-width: 820px;
    overflow: visible;
    color: #1f2937;
    font-size: clamp(18px, 2.3vw, 28px);
    line-height: 1.42;
    font-weight: 900;
    -webkit-line-clamp: initial;
}

.d-status-text-poster .d-status-card-body {
    display: grid;
    align-content: center;
    min-height: 330px;
    margin-right: 0;
    padding: 34px 28px 96px var(--poster-media-left);
    background:
        radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--status-accent, #0f8f5f) 16%, transparent), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.12), transparent 32%),
        linear-gradient(135deg, #ffffff, #eefbf6 52%, #fff7ed);
}

.d-status-text-poster .d-status-copy-block {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 8;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #15231e;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.d-status-text-poster .d-status-copy-block h2,
.d-status-text-poster .d-status-copy-block p {
    color: #15231e;
    text-shadow: none;
}

.d-status-text-poster .d-status-copy-block h2 {
    margin-bottom: 8px;
    font-size: 23px;
}

.d-status-text-poster .d-status-copy-block p {
    display: block;
    overflow: visible;
    font-size: 15px;
    font-weight: 800;
    -webkit-line-clamp: initial;
}

.d-status-text-poster .d-status-highlight {
    position: relative;
    top: auto;
    left: auto;
    width: max-content;
    margin: 8px 0 10px;
    border-color: #cfe8dd;
    background: rgba(255, 255, 255, 0.76);
    color: #0f8f5f;
    box-shadow: 0 10px 22px rgba(15, 35, 28, 0.06);
    backdrop-filter: blur(10px);
}

.d-status-poster-card .d-status-soundtrack {
    position: absolute;
    z-index: 9;
    right: 96px;
    bottom: 16px;
    left: 18px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    backdrop-filter: blur(14px);
}

.d-status-text-poster .d-status-soundtrack {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 9;
    margin-top: 18px;
    color: #172820;
    background: rgba(255, 255, 255, 0.72);
}

.d-status-text-poster .d-status-soundtrack strong {
    color: #172820;
}

.d-status-text-poster .d-status-soundtrack small {
    color: #65766f;
}

.d-status-poster-card .d-status-soundtrack strong,
.d-status-poster-card .d-status-soundtrack small {
    color: #ffffff;
}

.d-status-poster-card.d-status-text-poster .d-status-soundtrack strong {
    color: #172820;
}

.d-status-poster-card.d-status-text-poster .d-status-soundtrack small {
    color: #65766f;
}

.d-status-poster-card .d-status-cta {
    position: absolute;
    z-index: 9;
    left: 18px;
    bottom: 16px;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

.d-status-media-volume {
    position: absolute;
    top: auto;
    right: 84px;
    bottom: 18px;
    z-index: 12;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    color: #13231d;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.d-status-media-volume [data-lucide] {
    width: 20px;
    height: 20px;
}

.d-status-poster-card .dekeree-media-watermark {
    display: none;
}

.d-status-poster-rail {
    position: relative;
    z-index: 12;
    top: 0;
    right: auto;
    bottom: auto;
    order: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: auto;
    min-height: 0;
    margin: 0 clamp(24px, 5vw, 50px);
    padding: 16px 0 18px;
    border: 0;
    border-top: 1px solid #e7edf5;
    border-radius: 0;
    background: #ffffff;
    color: #536471;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
}

.d-status-poster-rail::before {
    display: none;
}

.d-status-text-poster .d-status-poster-rail {
    top: auto;
    right: 18px;
    bottom: 18px;
    left: 18px;
    flex-direction: row;
    justify-content: space-around;
    gap: 6px;
    width: auto;
    min-height: 54px;
    padding: 7px 9px;
    border: 1px solid rgba(191, 219, 254, 0.72);
    border-radius: 999px;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.9), rgba(239, 252, 246, 0.88) 55%, rgba(239, 246, 255, 0.9)),
        #ffffff;
    box-shadow: 0 16px 36px rgba(12, 37, 50, 0.1);
    backdrop-filter: blur(14px);
}

.d-status-text-poster .d-status-poster-rail form,
.d-status-text-poster .d-status-poster-rail form button,
.d-status-text-poster .d-status-poster-rail > button {
    width: 44px;
    min-height: 42px;
}

.d-status-text-poster .d-status-poster-rail form button > [data-lucide],
.d-status-text-poster .d-status-poster-rail > button > [data-lucide] {
    width: 34px;
    height: 34px;
    padding: 8px;
    box-shadow: 0 7px 15px rgba(15, 35, 28, 0.08);
}

.d-status-rail-profile {
    position: relative;
    display: none;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 2px;
    border-radius: 50%;
    background:
        linear-gradient(135deg, #ff53cf, #7c3aed 48%, #0f8f5f),
        #0f8f5f;
    box-shadow: 0 14px 28px rgba(15, 35, 28, 0.16);
    animation: dPosterRailPop 520ms cubic-bezier(.2, 1.45, .35, 1) both;
}

.d-status-rail-profile img,
.d-status-rail-profile > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #ecfdf5;
    color: #0f8f5f;
    font-size: 13px;
    font-weight: 950;
    object-fit: cover;
}

.d-status-rail-profile [data-lucide] {
    position: absolute;
    right: 1px;
    bottom: 0;
    display: grid;
    width: 22px;
    height: 22px;
    padding: 4px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #ff3b86;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(255, 59, 134, 0.28);
}

.d-status-poster-rail form,
.d-status-poster-rail > button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    width: auto;
    min-height: 54px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #536471;
    font: inherit;
    font-size: 11px;
    font-weight: 860;
    text-shadow: none;
    animation: dPosterRailPop 520ms cubic-bezier(.2, 1.45, .35, 1) both;
}

.d-status-poster-rail form {
    margin: 0;
    width: auto;
    flex: 0 0 auto;
}

.d-status-poster-rail form button,
.d-status-poster-rail > button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto;
    min-height: 54px;
    padding: 8px 12px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.d-status-poster-rail form button > [data-lucide],
.d-status-poster-rail > button > [data-lucide] {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 50%;
    border: 1px solid rgba(15, 35, 28, 0.1);
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.86) 66%),
        #ffffff;
    color: #263238;
    box-shadow:
        0 12px 24px rgba(7, 25, 20, 0.24),
        0 0 0 3px rgba(255, 255, 255, 0.72),
        0 0 0 4px rgba(15, 35, 28, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    stroke-width: 2.1;
    transition:
        transform 180ms cubic-bezier(.2, 1.2, .35, 1),
        color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

.d-status-poster-rail form button:hover > [data-lucide],
.d-status-poster-rail > button:hover > [data-lucide] {
    transform: translateY(-1px) scale(1.045);
    box-shadow:
        0 16px 30px rgba(7, 25, 20, 0.24),
        0 0 0 4px color-mix(in srgb, currentColor 13%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.d-status-poster-rail b {
    position: static;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #10211b;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 8px rgba(255, 255, 255, 0.9);
    box-shadow: none;
}

.d-status-poster-rail button span {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
    color: currentColor;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.d-status-poster-rail > button[data-share-native] span {
    display: inline-flex !important;
}

.d-status-poster-rail button > b {
    position: static;
}

.d-status-poster-rail b[hidden] {
    display: none;
}

.d-status-poster-rail button.is-active b {
    color: var(--rail-active, #10211b);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 1),
        0 0 10px rgba(255, 255, 255, 0.96);
}

.d-status-poster-rail button.is-active [data-lucide] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.75);
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.3), transparent 32%),
        var(--rail-active, currentColor);
    box-shadow:
        0 16px 30px color-mix(in srgb, var(--rail-active, currentColor) 24%, rgba(7, 25, 20, 0.18)),
        0 0 0 3px rgba(255, 255, 255, 0.74),
        0 0 0 5px color-mix(in srgb, var(--rail-active, currentColor) 13%, transparent);
}

.d-status-poster-rail button.is-popping [data-lucide] {
    animation: dPosterIconTap 520ms cubic-bezier(.2, 1, .25, 1);
}

.d-status-poster-rail button.is-popping::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 2px solid var(--rail-active, #1d9bf0);
    opacity: 0;
    transform: translateX(-50%) scale(0.72);
    pointer-events: none;
    animation: dPosterIconRing 540ms ease-out forwards;
}

.d-status-poster-rail [data-reaction="like"] {
    --rail-active: #f91880;
}

.d-status-poster-rail [data-reaction="like"] > [data-lucide] {
    color: #f91880;
}

.d-status-poster-rail [data-reaction="fire"] {
    --rail-active: #f97316;
}

.d-status-poster-rail [data-reaction="fire"] > [data-lucide] {
    color: #f97316;
}

.d-status-poster-rail [data-reaction="clap"] {
    --rail-active: #7c3aed;
}

.d-status-poster-rail [data-reaction="clap"] > [data-lucide] {
    color: #7c3aed;
}

.d-status-poster-rail [data-reaction="repost"] {
    --rail-active: #00a884;
}

.d-status-poster-rail [data-reaction="repost"] > [data-lucide] {
    color: #00a884;
}

.d-status-poster-rail [aria-label^="Share"] > [data-lucide] {
    color: #0ea5e9;
}

.d-status-poster-rail [data-status-reply-open] > [data-lucide] {
    color: #3f5d66;
}

.d-status-poster-rail button:hover,
.d-status-poster-rail button:hover > [data-lucide] {
    color: #0f1419;
}

.d-status-poster-rail form:hover button,
.d-status-poster-rail button:hover {
    color: #0f1419;
}

.d-status-poster-rail [data-reaction="like"].is-active,
.d-status-poster-rail [data-reaction="like"].is-active > [data-lucide],
.d-status-poster-rail [data-reaction="like"]:hover,
.d-status-poster-rail [data-reaction="like"]:hover > [data-lucide] {
    color: #f91880;
}

.d-status-poster-rail [data-reaction="repost"].is-active,
.d-status-poster-rail [data-reaction="repost"].is-active > [data-lucide],
.d-status-poster-rail [data-reaction="repost"]:hover,
.d-status-poster-rail [data-reaction="repost"]:hover > [data-lucide] {
    color: #00ba7c;
}

.d-status-poster-rail [data-reaction="fire"].is-active,
.d-status-poster-rail [data-reaction="fire"].is-active > [data-lucide],
.d-status-poster-rail [data-reaction="fire"]:hover,
.d-status-poster-rail [data-reaction="fire"]:hover > [data-lucide] {
    color: #f97316;
}

.d-status-poster-rail [data-reaction="clap"].is-active,
.d-status-poster-rail [data-reaction="clap"].is-active > [data-lucide],
.d-status-poster-rail [data-reaction="clap"]:hover,
.d-status-poster-rail [data-reaction="clap"]:hover > [data-lucide] {
    color: #7856ff;
}

.d-status-poster-rail [data-status-reply-open]:hover,
.d-status-poster-rail [data-status-reply-open]:hover > [data-lucide],
.d-status-poster-rail [aria-label^="Share"]:hover,
.d-status-poster-rail [aria-label^="Share"]:hover > [data-lucide] {
    color: #1d9bf0;
}

.d-status-poster-card .d-status-engagement-footer {
    display: none;
}

.d-status-poster-card .d-status-reaction-summary {
    position: relative;
    z-index: 12;
    gap: 14px;
    align-items: stretch;
    padding: 0 clamp(22px, 5vw, 50px) 26px;
    border-top: 1px solid #e7edf5;
    background: #ffffff;
}

.d-status-poster-card .d-status-reaction-summary span {
    gap: 10px;
    min-height: 52px;
    padding: 7px 16px;
    border: 0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    background: transparent;
    color: #5f6b7a;
    box-shadow: none;
    font-size: 14px;
    font-weight: 850;
}

.d-status-poster-card .d-status-reaction-summary [data-lucide] {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 50%;
    color: #2563eb;
    background: #f2f6ff;
}

.d-status-poster-card .d-status-summary-message,
.d-status-poster-card .d-status-reaction-summary .d-status-summary-message {
    min-height: 46px;
    border-color: #dbe7f7;
    background:
        linear-gradient(180deg, #ffffff, #f2f6ff),
        #ffffff;
    color: #2563eb;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

.d-status-poster-card .d-status-summary-message [data-lucide],
.d-status-poster-card .d-status-reaction-summary .d-status-summary-message [data-lucide] {
    color: #2563eb;
    background: transparent;
}

.d-status-poster-card .d-status-summary-message.is-on,
.d-status-poster-card .d-status-reaction-summary .d-status-summary-message.is-on {
    color: #47625a;
    background: #f7fbf9;
    box-shadow: none;
}

.d-status-reaction-summary .d-status-views-chip {
    gap: 5px;
    min-height: 32px;
    padding: 3px 10px 3px 9px;
    border-color: #cfe4ff;
    background: #f7fbff;
    color: #4d6772;
    font-size: 16px;
    font-weight: 900;
    box-shadow:
        0 7px 16px rgba(29, 155, 240, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.d-status-reaction-summary .d-status-views-chip [data-lucide] {
    width: 23px;
    height: 23px;
    padding: 0;
    color: #536d77;
    background: transparent;
    stroke-width: 2.45;
}

.d-status-reaction-summary .d-status-views-chip strong {
    color: #44616c;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
}

.simple-status-card .d-status-reaction-summary .d-status-views-chip,
.d-status-poster-card .d-status-reaction-summary .d-status-views-chip {
    border-color: #cfe4ff;
    border-right: 1px solid #e2e8f0;
    background: transparent;
    color: #4d6772;
    font-size: 16px;
    font-weight: 900;
    box-shadow: none;
}

.simple-status-card .d-status-reaction-summary .d-status-views-chip [data-lucide],
.d-status-poster-card .d-status-reaction-summary .d-status-views-chip [data-lucide] {
    width: 23px;
    height: 23px;
}

.d-status-stage-burst {
    position: absolute;
    z-index: 30;
    top: 46%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--status-accent, #0f8f5f);
    font-size: 18px;
    font-weight: 950;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: dStatusStageBurst 1050ms cubic-bezier(.2, 1.4, .35, 1) forwards;
}

.d-status-stage-burst [data-lucide] {
    width: 26px;
    height: 26px;
}

.d-status-media-reaction-burst {
    position: absolute;
    z-index: 38;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.d-status-media-reaction-main,
.d-status-media-reaction-chip {
    position: absolute;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.84)),
        #ffffff;
    color: var(--reaction-accent, var(--status-accent, #0f8f5f));
    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.2),
        0 0 0 5px rgba(255, 255, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
}

.d-status-media-reaction-main {
    top: 50%;
    left: 50%;
    grid-auto-flow: column;
    gap: 8px;
    min-height: 52px;
    padding: 12px 17px;
    font-size: 17px;
    font-weight: 950;
    transform: translate(-50%, -50%);
    animation: dStatusMediaReactionMain 980ms cubic-bezier(.2, 1.35, .35, 1) forwards;
}

.d-status-media-reaction-main [data-lucide] {
    width: 25px;
    height: 25px;
    stroke-width: 2.45;
}

.d-status-media-reaction-chip {
    top: var(--chip-y, 50%);
    left: var(--chip-x, 50%);
    width: 38px;
    height: 38px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--chip-scale, 1));
    animation: dStatusMediaReactionChip 1180ms cubic-bezier(.18, 1.2, .25, 1) forwards;
    animation-delay: var(--chip-delay, 0ms);
}

.d-status-media-reaction-chip [data-lucide] {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.d-status-replies-panel.is-reply-pulsing {
    animation: dStatusReplyPulse 780ms ease both;
}

.d-status-poster-card .d-status-reactions button {
    animation: dPosterChipIn 420ms ease both;
}

.d-status-poster-card .d-status-reactions button:nth-child(2) {
    animation-delay: 35ms;
}

.d-status-poster-card .d-status-reactions button:nth-child(3) {
    animation-delay: 70ms;
}

.d-status-poster-card .d-status-reactions button:nth-child(4) {
    animation-delay: 105ms;
}

.d-status-poster-card .d-status-reactions button:nth-child(5) {
    animation-delay: 140ms;
}

.d-status-poster-card .d-status-reactions button:nth-child(6) {
    animation-delay: 175ms;
}

.d-status-poster-rail > *:nth-child(2) {
    animation-delay: 35ms;
}

.d-status-poster-rail > *:nth-child(3) {
    animation-delay: 70ms;
}

.d-status-poster-rail > *:nth-child(4) {
    animation-delay: 105ms;
}

.d-status-poster-rail > *:nth-child(5) {
    animation-delay: 140ms;
}

.d-status-poster-rail > *:nth-child(6) {
    animation-delay: 175ms;
}

.d-status-poster-rail > *:nth-child(7) {
    animation-delay: 210ms;
}

@keyframes dStatusPosterIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dPosterChipIn {
    from {
        opacity: 0;
        transform: translateY(7px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dPosterRailPop {
    from {
        opacity: 0;
        transform: translateX(10px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes dPosterIconTap {
    0% {
        transform: scale(1);
    }
    32% {
        transform: scale(0.9);
    }
    64% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes dPosterIconRing {
    0% {
        opacity: 0.45;
        transform: translateX(-50%) scale(0.72);
    }
    72% {
        opacity: 0.18;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.45);
    }
}

@keyframes dStatusBadgePop {
    from {
        opacity: 0;
        transform: scale(0.58);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes dStatusStageBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.74);
    }
    24% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -56%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -68%) scale(0.92);
    }
}

@keyframes dStatusMediaReactionMain {
    0% {
        opacity: 0;
        transform: translate(-50%, -44%) scale(0.72);
        filter: saturate(0.9);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
        filter: saturate(1.2);
    }
    58% {
        opacity: 1;
        transform: translate(-50%, -54%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -68%) scale(0.9);
        filter: saturate(1);
    }
}

@keyframes dStatusMediaReactionChip {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.56) rotate(-8deg);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(calc(var(--chip-scale, 1) * 1.1)) rotate(0deg);
    }
    78% {
        opacity: 0.95;
    }
    100% {
        opacity: 0;
        transform:
            translate(
                calc(-50% + var(--drift-x, 42px)),
                calc(-50% + var(--drift-y, -64px))
            )
            scale(calc(var(--chip-scale, 1) * 0.78))
            rotate(12deg);
    }
}

@keyframes dStatusReplyPulse {
    0%,
    100% {
        box-shadow: none;
    }
    35% {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-accent, #0f8f5f) 15%, transparent);
    }
}

@media (max-width: 720px) {
    .d-status-poster-card {
        --poster-media-left: 0px;
        --poster-media-right: 0px;
        border-radius: 18px;
    }

    .d-status-poster-card .simple-status-head {
        min-height: 98px;
        padding: 18px;
    }

    .d-status-poster-card .d-status-card-body {
        min-height: 0;
        margin-right: 0;
    }

    .d-status-poster-card .d-status-author {
        top: 18px;
        left: 84px;
        max-width: calc(100% - 220px);
        min-width: 0;
        min-height: 52px;
        padding-left: 0;
    }

    .d-status-poster-card .d-status-author strong {
        font-size: 17px;
    }

    .d-status-poster-card .d-status-author span {
        font-size: 13px;
    }

    .d-status-poster-card .d-status-d-number-chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .d-status-poster-card .d-status-follow-action {
        grid-column: auto;
        width: auto;
        top: 22px;
        right: 18px;
    }

    .d-status-poster-card .d-status-follow-action .primary-button,
    .d-status-poster-card .d-status-follow-action .secondary-button,
    .d-status-poster-card .d-status-own-note {
        min-height: 42px;
        padding: 8px 11px;
        font-size: 13px;
    }

    .d-status-poster-card .d-status-avatar {
        top: 20px;
        left: 20px;
        width: 52px;
        height: 52px;
    }

    .d-status-poster-card .d-status-copy-block {
        right: auto;
        bottom: auto;
        left: auto;
        max-width: none;
        padding: 18px 18px 16px;
    }

    .d-status-poster-card .d-status-copy-block h2 {
        font-size: 22px;
    }

    .d-status-poster-card .d-status-copy-block p {
        font-size: 17px;
    }

    .d-status-poster-card .d-status-reaction-summary {
        gap: 8px;
        padding: 12px 14px 16px;
    }

    .d-status-poster-card .d-status-reaction-summary span {
        min-height: 42px;
        padding: 6px 10px;
        border-right: 0;
    }

    .d-status-text-poster .d-status-card-body {
        min-height: 300px;
        margin-right: 64px;
        padding: 28px 24px 28px 20px;
    }

    .d-status-poster-rail {
        top: 0;
        right: auto;
        bottom: auto;
        width: auto;
        min-height: 0;
        margin: 0 14px;
        padding: 12px 0 14px;
        gap: 4px;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .d-status-text-poster .d-status-poster-rail {
        right: 14px;
        bottom: 14px;
        left: 14px;
        width: auto;
        min-height: 52px;
        gap: 6px;
    }

    .d-status-text-poster .d-status-card-body {
        margin-right: 0;
        padding: 28px 20px 88px;
    }

    .d-status-text-poster .d-status-poster-rail form,
    .d-status-text-poster .d-status-poster-rail form button,
    .d-status-text-poster .d-status-poster-rail > button {
        width: 42px;
        min-height: 40px;
    }

    .d-status-text-poster .d-status-poster-rail form button > [data-lucide],
    .d-status-text-poster .d-status-poster-rail > button > [data-lucide] {
        width: 32px;
        height: 32px;
        padding: 7px;
    }

    .d-status-rail-profile {
        width: 48px;
        height: 48px;
    }

    .d-status-rail-profile img,
    .d-status-rail-profile > span {
        width: 42px;
        height: 42px;
    }

    .d-status-rail-profile [data-lucide] {
        width: 20px;
        height: 20px;
    }

    .d-status-poster-rail form,
    .d-status-poster-rail form button,
    .d-status-poster-rail > button {
        width: auto;
        min-width: 48px;
        min-height: 46px;
        padding: 6px 7px;
    }

    .d-status-poster-rail form button > [data-lucide],
    .d-status-poster-rail > button > [data-lucide] {
        width: 36px;
        height: 36px;
        padding: 9px;
    }

    .d-status-poster-rail button > b {
        font-size: 10px;
    }

    .d-status-poster-rail button span {
        font-size: 11px;
    }
}

@media (max-width: 460px) {
    .d-status-poster-rail {
        width: auto;
        gap: 6px;
    }

    .d-status-poster-card {
        --poster-media-left: 0px;
        --poster-media-right: 0px;
    }

    .d-status-poster-card .d-status-card-body {
        margin-right: 0;
    }

    .d-status-text-poster .d-status-card-body {
        margin-right: 0;
    }

    .d-status-poster-rail form,
    .d-status-poster-rail form button,
    .d-status-poster-rail > button {
        width: auto;
        min-width: 46px;
        min-height: 44px;
        padding: 6px 6px;
    }

    .d-status-poster-rail form button > [data-lucide],
    .d-status-poster-rail > button > [data-lucide] {
        width: 34px;
        height: 34px;
        padding: 8px;
    }

    .d-status-rail-profile {
        width: 44px;
        height: 44px;
    }

    .d-status-rail-profile img,
    .d-status-rail-profile > span {
        width: 38px;
        height: 38px;
    }
}

/* Clean Stack status layout */
.simple-status-hero {
    display: none;
}

.simple-status-shell {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    max-width: 100%;
    border-radius: 0;
    background:
        radial-gradient(circle at 8% 0%, rgba(29, 155, 240, 0.08), transparent 28%),
        radial-gradient(circle at 90% 4%, rgba(15, 143, 95, 0.08), transparent 26%),
        #f5f7f9;
    box-shadow: none;
}

.simple-status-shell .d-status-side {
    display: none;
}

.d-status-compose-simple {
    padding: 18px;
    border: 1px solid #dfe7ee;
    border-radius: 30px;
    background: #ffffff;
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.d-status-compose-simple::before,
.d-status-compose-simple::after {
    display: none;
}

.d-status-compose-simple:hover,
.d-status-compose-simple:focus-within {
    border-color: #cfe0ec;
    box-shadow:
        0 22px 52px rgba(15, 23, 42, 0.1),
        0 0 0 4px rgba(29, 155, 240, 0.04);
    transform: none;
}

.d-status-compose-simple .d-status-form {
    gap: 12px;
}

.d-status-compose-hidden-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.d-status-compose-top {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.d-status-compose-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d9bf0, #0f8f5f);
    box-shadow: 0 10px 24px rgba(29, 155, 240, 0.16);
}

.d-status-compose-avatar img,
.d-status-compose-avatar span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #eef7ff;
    color: #0f6f4c;
    font-weight: 950;
    object-fit: cover;
}

.d-status-compose-simple .d-status-message-field {
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.d-status-compose-simple .d-status-message-field > span {
    color: #64748b;
    font-size: 13px;
}

.d-status-compose-simple .d-status-message-field textarea {
    min-height: 78px;
    padding: 4px 0 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 850;
    line-height: 1.28;
}

.d-status-compose-simple .d-status-message-field textarea::placeholder {
    color: #94a3b8;
}

.d-status-compose-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 72px;
}

.d-status-visibility-pill {
    cursor: pointer;
}

.d-status-visibility-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.d-status-visibility-pill span,
.d-status-compose-simple .d-status-compose-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #dbe7f0;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.d-status-visibility-pill input:checked + span {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.d-status-visibility-pill [data-lucide],
.d-status-compose-simple .d-status-compose-badge [data-lucide] {
    width: 17px;
    height: 17px;
}

.d-status-compose-simple .d-status-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding-left: 72px;
}

.d-status-compose-simple .d-status-upload,
.d-status-compose-simple .d-status-optional-details {
    min-height: 54px;
    border-radius: 18px;
    background: #f8fafc;
}

.d-status-compose-simple .d-status-upload {
    padding: 10px 12px;
}

.d-status-compose-simple .d-status-upload > span {
    width: 36px;
    height: 36px;
    background: #e0f2fe;
    color: #0284c7;
}

.d-status-compose-simple .d-status-optional-details {
    min-width: 176px;
}

.d-status-compose-simple .d-status-media-preview {
    grid-column: 1 / -1;
    border-radius: 20px;
}

.d-status-compose-simple .d-status-submit {
    justify-self: end;
    width: auto;
    min-width: 132px;
    min-height: 50px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: 17px;
}

.d-status-poster-card {
    border-radius: 30px;
}

.d-status-poster-card .d-status-actions {
    display: none;
}

.d-status-poster-card .d-status-reaction-summary [data-status-reactions-summary],
.d-status-poster-card .d-status-reaction-summary [data-status-replies-summary] {
    display: none;
}

@media (max-width: 720px) {
    .simple-status-shell {
        padding: 14px 10px 44px;
    }

    .d-status-compose-simple {
        border-radius: 22px;
        padding: 14px;
    }

    .d-status-compose-top {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
    }

    .d-status-compose-avatar {
        width: 46px;
        height: 46px;
    }

    .d-status-compose-avatar img,
    .d-status-compose-avatar span {
        width: 40px;
        height: 40px;
    }

    .d-status-compose-simple .d-status-message-field textarea {
        min-height: 64px;
        font-size: 18px;
    }

    .d-status-compose-pills,
    .d-status-compose-simple .d-status-upload-row {
        padding-left: 0;
    }

    .d-status-compose-simple .d-status-upload-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .d-status-compose-simple .d-status-submit {
        justify-self: stretch;
    }
}

body .d-status-poster-card > .d-status-reaction-summary,
body .d-status-poster-card .d-status-poster-rail,
body .d-status-poster-card .d-status-engagement-footer,
body .d-status-poster-card .d-status-actions {
    display: none !important;
}

body .d-status-stack-actions [data-reaction-count] {
    display: none !important;
    visibility: hidden !important;
}

body .simple-status-shell {
    background:
        radial-gradient(circle at 9% 0%, rgba(23, 107, 77, 0.1), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(242, 184, 59, 0.12), transparent 24%),
        linear-gradient(180deg, #f7faf8 0%, #f2f7f4 100%);
}

body .d-status-compose-simple {
    border-color: #d8e7e1;
    box-shadow:
        0 18px 44px rgba(23, 33, 28, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

body .d-status-compose-avatar {
    background: linear-gradient(135deg, var(--green), #0fa36a 58%, var(--amber));
    box-shadow: 0 12px 26px rgba(23, 107, 77, 0.18);
}

body .d-status-visibility-pill input:checked + span {
    border-color: #b7dfcb;
    background: var(--mint);
    color: var(--green-dark);
}

body .d-status-compose-simple .d-status-submit {
    background: var(--green);
    box-shadow: 0 14px 26px rgba(23, 107, 77, 0.18);
}

body .d-status-stack-actions {
    position: relative;
    z-index: 40;
    border-top-color: #e3eee8;
    background:
        linear-gradient(180deg, #ffffff, #fbfdfc),
        var(--paper);
}

body .d-status-stack-actions button,
body .d-status-stack-actions a {
    pointer-events: auto;
}

body .d-status-stack-actions form:not(:first-child),
body .d-status-stack-actions button:not(:first-child),
body .d-status-stack-actions a:not(:first-child),
body .d-status-stack-actions > span:not(:first-child) {
    border-left-color: #e2ece7;
}

body .d-status-stack-icon {
    background:
        linear-gradient(180deg, #ffffff, #f7f8fa),
        #f2f4f7;
    color: #475569;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-stack-like .d-status-stack-icon {
    color: #ff2d55;
    background:
        linear-gradient(180deg, #ffffff, #fff4f7),
        #fff1f4;
}

body .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-stack-like:hover .d-status-stack-icon,
body .d-status-stack-like:focus-visible .d-status-stack-icon {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, #ff5b7d, #ff2d55),
        #ff2d55;
    box-shadow:
        0 14px 24px rgba(255, 45, 85, 0.24),
        0 0 0 4px rgba(255, 45, 85, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon {
    color: #007aff;
    background:
        linear-gradient(180deg, #ffffff, #f1f8ff),
        #eaf4ff;
}

body .d-status-stack-repost .d-status-stack-icon {
    color: #34c759 !important;
    background:
        linear-gradient(180deg, #ffffff, #f2fff6),
        #eafbea;
}

body .d-status-stack-hot .d-status-stack-icon {
    color: #ff9500 !important;
    background:
        linear-gradient(180deg, #ffffff, #fff8ed),
        #fff2d9;
}

body .d-status-stack-save .d-status-stack-icon {
    color: #5856d6 !important;
    background:
        linear-gradient(180deg, #ffffff, #f5f4ff),
        #eeeeff;
}

body .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    color: #007aff;
    background:
        linear-gradient(180deg, #ffffff, #f1f8ff),
        #eaf4ff;
}

body .d-status-stack-copy strong {
    color: var(--ink);
}

body .d-status-stack-copy small,
body .d-status-stack-actions button[data-share-native] .d-status-stack-copy strong,
body .d-status-stack-actions a .d-status-stack-copy strong {
    color: var(--muted);
}

body .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-stack-actions a:focus-visible .d-status-stack-icon {
    color: #ffffff;
    background:
        linear-gradient(180deg, #5fb4ff, #007aff),
        #007aff;
    box-shadow:
        0 14px 24px rgba(0, 122, 255, 0.22),
        0 0 0 4px rgba(0, 122, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body .d-status-stack-actions button[data-share-native]:hover .d-status-stack-icon,
body .d-status-stack-actions button[data-share-native]:focus-visible .d-status-stack-icon {
    background:
        linear-gradient(180deg, #5fb4ff, #007aff),
        #007aff;
}

body .d-status-stack-hot:hover .d-status-stack-icon,
body .d-status-stack-hot:focus-visible .d-status-stack-icon,
body .d-status-stack-hot.is-active .d-status-stack-icon {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, #ffb84d, #ff9500),
        #ff9500;
    box-shadow:
        0 14px 24px rgba(255, 149, 0, 0.22),
        0 0 0 4px rgba(255, 149, 0, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body .d-status-stack-repost:hover .d-status-stack-icon,
body .d-status-stack-repost:focus-visible .d-status-stack-icon,
body .d-status-stack-repost.is-active .d-status-stack-icon {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, #61dd7a, #34c759),
        #34c759;
}

body .d-status-stack-save:hover .d-status-stack-icon,
body .d-status-stack-save:focus-visible .d-status-stack-icon,
body .d-status-stack-save.is-active .d-status-stack-icon {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, #7b79ee, #5856d6),
        #5856d6;
    box-shadow:
        0 14px 24px rgba(88, 86, 214, 0.22),
        0 0 0 4px rgba(88, 86, 214, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body .d-status-poster-card .d-status-copy-block {
    gap: 7px;
    padding: 20px clamp(22px, 5vw, 44px) 22px;
}

body .d-status-poster-card .d-status-copy-block h2 {
    max-width: 720px;
    font-size: clamp(21px, 2.5vw, 30px);
    line-height: 1.18;
}

body .d-status-poster-card .d-status-copy-block p,
body .d-status-poster-card .d-status-more-text,
body .d-status-poster-card .d-status-more-text summary,
body .d-status-poster-card .d-status-more-text p {
    max-width: 720px;
    color: #26362f;
    font-size: clamp(15px, 1.65vw, 19px);
    font-weight: 760;
    line-height: 1.45;
}

body .d-status-poster-card .d-status-more-text {
    display: grid;
    gap: 10px;
}

body .d-status-poster-card .d-status-more-text summary {
    display: inline;
    cursor: pointer;
    list-style: none;
}

body .d-status-poster-card .d-status-more-text summary::-webkit-details-marker {
    display: none;
}

body .d-status-poster-card .d-status-more-text summary b {
    color: var(--green);
    font-weight: 950;
}

body .d-status-poster-card .d-status-more-text[open] summary {
    display: none;
}

body .d-status-poster-card .d-status-more-text p {
    margin: 0;
}

body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-status-media-gallery.has-two,
body .d-status-poster-card .d-status-media-gallery.has-three,
body .d-status-poster-card .d-status-media-gallery.has-many {
    position: relative;
    z-index: 1;
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    background: #f4f7f6;
}

body .d-status-poster-card .d-status-card-body {
    overflow: hidden;
}

body .d-status-poster-card .d-status-media-gallery::-webkit-scrollbar {
    display: none;
}

body .d-status-poster-card .d-status-media-gallery.has-three .d-status-gallery-item:first-child,
body .d-status-poster-card .d-status-gallery-item {
    grid-row: auto;
    flex: 0 0 100%;
    width: 100%;
    min-height: 280px;
    border: 0;
    border-radius: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background: #f4f7f6;
}

.d-status-gallery-nav {
    position: sticky;
    z-index: 16;
    top: 50%;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin-top: min(34vh, 300px);
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    color: #80909a;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease, opacity 160ms ease;
}

.d-status-gallery-nav.previous {
    left: 14px;
    order: -1;
    margin-right: -42px;
}

.d-status-gallery-nav.next {
    right: 14px;
    order: 999;
    margin-left: -42px;
}

.d-status-gallery-nav:hover,
.d-status-gallery-nav:focus-visible {
    transform: scale(1.06);
    background: #ffffff;
    color: var(--green);
    outline: none;
}

.d-status-gallery-nav[disabled] {
    opacity: 0.42;
    pointer-events: none;
}

.d-status-gallery-nav [data-lucide] {
    width: 26px;
    height: 26px;
    stroke-width: 3;
}

.d-status-gallery-dots {
    position: sticky;
    z-index: 18;
    left: 50%;
    bottom: 16px;
    display: inline-flex;
    align-self: flex-end;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    max-width: max-content;
    height: 28px;
    margin-left: calc(-50% - 48px);
    margin-right: calc(50% - 48px);
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.32);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
}

.d-status-gallery-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.52);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, width 160ms ease;
}

.d-status-gallery-dots button.active {
    width: 22px;
    border-radius: 999px;
    background: #ffffff;
}

.d-status-gallery-dots button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

body .d-status-gallery-item:nth-child(n+5) {
    display: grid;
}

body .d-status-poster-card .d-status-gallery-item img,
body .d-status-poster-card .d-status-gallery-item video {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: min(72vh, 680px);
    object-fit: contain;
}

body .d-status-gallery-more {
    display: none;
}

body .d-status-header-number {
    position: absolute;
    top: 32px;
    right: 34px;
    z-index: 22;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    max-width: min(260px, 36%);
    padding: 10px 16px;
    border: 1px solid #bfe4cf;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 252, 246, 0.96)),
        var(--mint);
    color: var(--green-dark);
    font-size: 14px;
    font-weight: 900;
    box-shadow:
        0 14px 28px rgba(23, 107, 77, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 170ms ease,
        border-color 170ms ease,
        box-shadow 170ms ease,
        background 170ms ease;
}

body .d-status-header-number-form {
    margin: 0;
}

body .d-status-header-number [data-lucide] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

body .d-status-header-number span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body button.d-status-header-number {
    font: inherit;
}

body .d-status-header-number:hover,
body .d-status-header-number:focus-visible {
    transform: translateY(-1px);
    border-color: #8dd7af;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(231, 245, 238, 0.98)),
        var(--mint);
    box-shadow:
        0 18px 34px rgba(23, 107, 77, 0.18),
        0 0 0 4px rgba(23, 107, 77, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    outline: none;
}

body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action {
    top: 136px;
    right: 22px;
    z-index: 24;
}

body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .primary-button,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .secondary-button,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-own-note {
    min-height: 44px;
    padding: 9px 14px;
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.9);
    color: var(--green-dark);
    box-shadow:
        0 14px 28px rgba(15, 35, 28, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

body .d-status-gallery-counter {
    position: absolute;
    z-index: 18;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: rgba(16, 33, 27, 0.64);
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(12px);
}

body .d-status-gallery-counter b {
    font-weight: 950;
}

body .has-visible-d-number:not(.d-status-text-poster) .d-status-gallery-counter {
    right: auto;
    left: 14px;
}

body .d-status-poster-card .d-status-stack-actions {
    grid-template-columns: repeat(6, minmax(42px, 1fr));
    gap: 0;
    padding: 14px clamp(8px, 2.4vw, 20px) 16px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 74px;
    padding: 4px 6px;
    text-align: center;
}

body .d-status-poster-card .d-status-stack-icon {
    width: 50px;
    height: 50px;
}

body .d-status-poster-card .d-status-stack-icon [data-lucide] {
    width: clamp(21px, 2.8vw, 27px);
    height: clamp(21px, 2.8vw, 27px);
}

body .d-status-poster-card .d-status-stack-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 520px) {
    body .d-status-poster-card .d-status-stack-actions {
        padding-inline: 4px;
    }

    body .d-status-poster-card .d-status-stack-actions button,
    body .d-status-poster-card .d-status-stack-actions a {
        min-height: 64px;
        padding-inline: 2px;
    }

    body .d-status-poster-card .d-status-stack-icon {
        width: 40px;
        height: 40px;
    }

    body .d-status-poster-card .d-status-stack-icon [data-lucide] {
        width: 20px;
        height: 20px;
    }
}

body .d-status-poster-card .d-status-copy-block {
    animation: dStatusCaptionSoftIn 420ms ease both;
}

body .d-status-poster-card .d-status-copy-block h2 {
    font-family: var(--font-ui);
    font-weight: 680;
    letter-spacing: 0;
}

body .d-status-poster-card .d-status-copy-block p,
body .d-status-poster-card .d-status-more-text,
body .d-status-poster-card .d-status-more-text summary,
body .d-status-poster-card .d-status-more-text p {
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: 0;
}

body .d-status-poster-card .d-status-more-text summary b {
    display: inline-flex;
    margin-left: 4px;
    transform-origin: center;
    animation: dStatusMorePulse 2.6s ease-in-out infinite;
}

@keyframes dStatusCaptionSoftIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes dStatusMorePulse {
    0%,
    100% {
        opacity: 0.82;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-1px);
    }
}

@media (max-width: 720px) {
    body .d-status-poster-card .d-status-copy-block {
        padding: 15px 16px 17px;
    }

    body .d-status-poster-card .d-status-copy-block h2 {
        font-size: 19px;
    }

    body .d-status-poster-card .d-status-copy-block p,
    body .d-status-poster-card .d-status-more-text,
    body .d-status-poster-card .d-status-more-text summary,
    body .d-status-poster-card .d-status-more-text p {
        font-size: 14px;
    }

    body .d-status-poster-card .d-status-gallery-item {
        min-height: 220px;
    }

    body .d-status-header-number {
        top: 20px;
        right: 14px;
        max-width: 42%;
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }

    body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action {
        top: 112px;
        right: 14px;
    }

    body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .primary-button,
    body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .secondary-button,
    body .has-visible-d-number:not(.d-status-text-poster) .d-status-own-note {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 12px;
    }

    body .d-status-gallery-counter {
        top: 10px;
        right: 10px;
        min-height: 28px;
        padding: 5px 9px;
        font-size: 12px;
    }

    body .has-visible-d-number:not(.d-status-text-poster) .d-status-gallery-counter {
        right: auto;
        left: 10px;
    }
}

body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    background:
        linear-gradient(180deg, #ffffff, #f3faf6),
        #edf8f2;
    color: var(--green) !important;
    box-shadow:
        0 10px 22px rgba(23, 107, 77, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon {
    background:
        linear-gradient(180deg, #1fa36e, var(--green)),
        var(--green);
    color: #ffffff !important;
    box-shadow:
        0 14px 24px rgba(23, 107, 77, 0.2),
        0 0 0 4px rgba(23, 107, 77, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body .d-status-poster-card .d-status-stack-badge {
    border-color: #ffffff;
    background:
        linear-gradient(180deg, #f9d35f, var(--amber)),
        var(--amber);
    color: #13231d;
    box-shadow:
        0 8px 16px rgba(242, 184, 59, 0.28),
        0 0 0 1px rgba(113, 63, 18, 0.05);
}

body .d-status-poster-card .d-status-stack-actions {
    grid-template-columns: repeat(7, minmax(42px, 1fr));
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 74px;
    padding: 4px 6px;
    text-align: center;
}

body .d-status-poster-card .d-status-stack-stat {
    color: var(--green);
    cursor: default;
}

body .d-status-poster-card .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    background:
        linear-gradient(180deg, #ffffff, #f3faf6),
        #edf8f2;
    color: var(--green) !important;
    box-shadow:
        0 10px 22px rgba(23, 107, 77, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-shared .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon {
    background:
        linear-gradient(180deg, #ffffff, #f3faf6),
        #edf8f2;
    color: var(--green) !important;
    box-shadow:
        0 12px 24px rgba(23, 107, 77, 0.11),
        0 0 0 3px rgba(23, 107, 77, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 7px;
    height: 7px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 4px 10px rgba(23, 107, 77, 0.24);
}

@media (max-width: 720px) {
    body .d-status-poster-card .d-status-stack-actions {
        grid-template-columns: repeat(7, minmax(34px, 1fr));
        padding-inline: 4px;
    }

    body .d-status-poster-card .d-status-stack-actions button,
    body .d-status-poster-card .d-status-stack-actions a,
    body .d-status-poster-card .d-status-stack-stat {
        min-height: 58px;
        padding-inline: 1px;
    }

    body .d-status-poster-card .d-status-stack-icon {
        width: 36px;
        height: 36px;
    }

    body .d-status-poster-card .d-status-stack-icon [data-lucide] {
        width: 18px;
        height: 18px;
    }

    body .d-status-poster-card .d-status-stack-badge {
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        font-size: 9.5px;
    }
}

body .d-status-poster-card .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, rgba(64, 93, 230, 0.22), rgba(193, 53, 132, 0.2), rgba(245, 133, 41, 0.2)) border-box;
    border: 1px solid transparent;
    color: #c13584 !important;
    box-shadow:
        0 10px 24px rgba(131, 58, 180, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-views .d-status-stack-icon {
    color: #405de6 !important;
}

body .d-status-poster-card .d-status-stack-like .d-status-stack-icon {
    color: #e1306c !important;
}

body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon {
    color: #833ab4 !important;
}

body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon {
    color: #5851db !important;
}

body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon {
    color: #f77737 !important;
}

body .d-status-poster-card .d-status-stack-save .d-status-stack-icon {
    color: #c13584 !important;
}

body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    color: #fd1d1d !important;
}

body .d-status-poster-card .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-shared .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #405de6, #833ab4 35%, #e1306c 62%, #f77737 100%) border-box;
    box-shadow:
        0 12px 26px rgba(225, 48, 108, 0.14),
        0 0 0 3px rgba(225, 48, 108, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon::after {
    background: linear-gradient(135deg, #833ab4, #e1306c, #f77737);
    box-shadow: 0 4px 10px rgba(225, 48, 108, 0.26);
}

body .d-status-poster-card .d-status-stack-badge {
    background:
        linear-gradient(135deg, #405de6 0%, #833ab4 32%, #e1306c 62%, #f77737 100%),
        #e1306c;
    color: #ffffff;
    box-shadow:
        0 8px 18px rgba(225, 48, 108, 0.24),
        0 0 0 1px rgba(131, 58, 180, 0.06);
}

body .d-status-poster-card .d-status-stack-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0;
    padding: 12px clamp(6px, 2vw, 18px) 14px;
}

body .d-status-poster-card .d-status-stack-actions > *,
body .d-status-poster-card .d-status-stack-actions form,
body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    min-width: 0 !important;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    min-height: 58px;
    padding: 2px clamp(1px, 0.8vw, 5px);
}

body .d-status-poster-card .d-status-stack-icon {
    width: clamp(34px, 6vw, 44px);
    height: clamp(34px, 6vw, 44px);
}

body .d-status-poster-card .d-status-stack-icon [data-lucide] {
    width: clamp(17px, 2.5vw, 23px);
    height: clamp(17px, 2.5vw, 23px);
}

body .d-status-poster-card .d-status-stack-badge {
    top: -4px;
    right: -4px;
    min-width: clamp(16px, 3vw, 20px);
    height: clamp(16px, 3vw, 20px);
    padding: 0 4px;
    font-size: clamp(8.5px, 1.55vw, 10px);
}

/* D Social final polish: calmer hierarchy, cleaner action colors, tighter media cards. */
.simple-status-shell {
    background:
        radial-gradient(circle at 10% 0%, rgba(15, 143, 95, 0.06), transparent 30%),
        linear-gradient(180deg, #eef3f1, #f7faf9 34%, #eef3f1);
}

body .d-status-poster-card {
    overflow: hidden;
    border-color: #dfe7e4;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 18px 46px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body .d-status-poster-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 22px 56px rgba(15, 23, 42, 0.11),
        0 0 0 1px rgba(15, 143, 95, 0.08);
}

body .d-status-poster-card .simple-status-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(92px, auto);
    gap: 12px;
    align-items: center;
    min-height: 90px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f0;
    background: #ffffff;
}

body .d-status-poster-card .d-status-avatar,
body .d-status-poster-card .d-status-author,
body .d-status-poster-card .d-status-follow-action,
body .d-status-poster-card .d-status-header-number {
    position: static;
}

body .d-status-poster-card .d-status-avatar {
    width: 52px;
    height: 52px;
    border: 2px solid #ffffff;
    box-shadow:
        0 0 0 1px #d7e3df,
        0 10px 22px rgba(15, 23, 42, 0.11);
}

body .d-status-poster-card .d-status-author {
    max-width: none;
    min-height: 0;
}

body .d-status-poster-card .d-status-author strong {
    color: #111827;
    font-size: clamp(16px, 2.2vw, 21px);
    font-weight: 820;
}

body .d-status-poster-card .d-status-author span {
    margin-top: 4px;
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}

body .d-status-poster-card .d-status-author span em::before {
    content: "·";
}

body .d-status-poster-card .d-status-header-number-form {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

body .d-status-poster-card .simple-status-head > .d-status-header-number {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

body .d-status-poster-card .d-status-header-number {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 154px;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid #d7e6df;
    border-radius: 999px;
    background: #f8fbfa;
    color: #0f6f4c;
    font-size: 11px;
    font-weight: 780;
    box-shadow: none;
}

body .d-status-poster-card .d-status-header-number [data-lucide] {
    width: 14px;
    height: 14px;
}

body .d-status-poster-card .d-status-header-number:hover,
body .d-status-poster-card .d-status-header-number:focus-visible {
    border-color: #a8d9c4;
    background: #f1faf6;
    box-shadow: 0 8px 18px rgba(15, 143, 95, 0.09);
    transform: translateY(-1px);
}

body .d-status-poster-card .d-status-follow-action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    width: auto;
    max-width: none;
    min-width: 0;
}

body .d-status-poster-card.has-visible-d-number .d-status-follow-action {
    align-self: end;
}

body .d-status-poster-card .d-status-follow-action .primary-button,
body .d-status-poster-card .d-status-follow-action .secondary-button,
body .d-status-poster-card .d-status-own-note,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .primary-button,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .secondary-button,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-own-note {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #d7e6df;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 12px;
    font-weight: 760;
    box-shadow: none;
}

body .d-status-poster-card .d-status-follow-action [data-lucide],
body .d-status-poster-card .d-status-own-note [data-lucide] {
    width: 14px;
    height: 14px;
    color: #0f8f5f;
}

body .d-status-poster-card .d-status-card-body {
    background: #ffffff;
}

body .d-status-poster-card .d-status-media:not(.d-clip-stage),
body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-status-gallery-item {
    background: #f4f6f5 !important;
}

body .d-status-poster-card .d-status-media img,
body .d-status-poster-card .d-status-media video,
body .d-status-poster-card .d-status-gallery-item img,
body .d-status-poster-card .d-status-gallery-item video {
    max-height: min(70vh, 680px);
    object-fit: contain;
}

body .d-status-poster-card .d-status-copy-block {
    gap: 5px;
    padding: 14px clamp(18px, 4vw, 34px) 15px;
    border-top: 1px solid #eef2f0;
    background: #ffffff;
}

body .d-status-poster-card .d-status-copy-block h2 {
    max-width: 760px;
    color: #111827;
    font-size: clamp(17px, 2.1vw, 22px);
    font-weight: 760;
    line-height: 1.24;
}

body .d-status-poster-card .d-status-copy-block p,
body .d-status-poster-card .d-status-more-text,
body .d-status-poster-card .d-status-more-text summary,
body .d-status-poster-card .d-status-more-text p {
    max-width: 760px;
    color: #344054;
    font-size: clamp(13px, 1.55vw, 16px);
    font-weight: 520;
    line-height: 1.48;
}

body .d-status-poster-card .d-status-more-text summary b {
    color: #0f8f5f;
    font-weight: 760;
}

body .d-status-gallery-nav {
    width: 32px;
    height: 32px;
    opacity: 0;
    margin-top: min(30vh, 250px);
    background: rgba(255, 255, 255, 0.84);
    color: #344054;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

body .d-status-media-gallery:hover .d-status-gallery-nav,
body .d-status-media-gallery:focus-within .d-status-gallery-nav,
body .d-status-gallery-nav:focus-visible {
    opacity: 1;
}

body .d-status-gallery-nav.previous {
    left: 10px;
    margin-right: -32px;
}

body .d-status-gallery-nav.next {
    right: 10px;
    margin-left: -32px;
}

body .d-status-gallery-nav [data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
}

body .d-status-gallery-counter {
    min-height: 26px;
    padding: 4px 8px;
    background: rgba(17, 24, 39, 0.58);
    font-size: 11px;
    font-weight: 760;
}

body .d-status-gallery-dots {
    bottom: 12px;
    height: 24px;
    gap: 6px;
    padding: 5px 7px;
    background: rgba(17, 24, 39, 0.25);
}

body .d-status-gallery-dots button {
    width: 7px;
    height: 7px;
}

body .d-status-gallery-dots button.active {
    width: 18px;
}

body .d-status-poster-card .d-status-stack-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    overflow-x: auto;
    gap: 0;
    padding: 10px clamp(6px, 2vw, 16px) 12px;
    border-top: 1px solid #eef2f0;
    background: #ffffff;
    scrollbar-width: none;
}

body .d-status-poster-card .d-status-stack-actions::-webkit-scrollbar {
    display: none;
}

body .d-status-poster-card .d-status-stack-actions > * {
    min-width: 44px !important;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    min-height: 54px;
    padding: 2px 4px;
    color: #0f6f4c;
}

body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    width: clamp(34px, 5.5vw, 40px);
    height: clamp(34px, 5.5vw, 40px);
    border: 1px solid #cfe5db;
    background:
        linear-gradient(180deg, #ffffff, #f4fbf7),
        #ffffff;
    color: #0f6f4c !important;
    box-shadow:
        0 8px 18px rgba(15, 143, 95, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-icon [data-lucide] {
    width: clamp(17px, 2.4vw, 21px);
    height: clamp(17px, 2.4vw, 21px);
    stroke-width: 2.15;
}

body .d-status-poster-card .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:focus-visible .d-status-stack-icon {
    border-color: #b9d9ca;
    color: #0f8f5f !important;
    box-shadow:
        0 10px 20px rgba(15, 143, 95, 0.1),
        0 0 0 3px rgba(15, 143, 95, 0.06);
}

body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-shared .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon {
    border-color: #88cfaf;
    background:
        linear-gradient(180deg, #ffffff, #ecfbf3),
        #ffffff;
    color: #0f6f4c !important;
    box-shadow:
        0 10px 22px rgba(15, 143, 95, 0.15),
        0 0 0 4px rgba(15, 143, 95, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon::after {
    right: 7px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    background: #0f8f5f;
    box-shadow: 0 3px 8px rgba(15, 143, 95, 0.22);
}

body .d-status-poster-card .d-status-stack-badge {
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    background: #0f8f5f;
    color: #ffffff;
    font-size: 9px;
    font-weight: 760;
    box-shadow: 0 6px 14px rgba(15, 143, 95, 0.22);
}

/* D Social action icons: one calm Dekeree color system. */
body .d-status-poster-card .d-status-stack-actions {
    --action-main: #0f6f4c;
    --action-soft: #eefaf5;
    --action-border: #cfe5db;
}

body .d-status-poster-card .d-status-stack-actions [data-lucide] {
    color: var(--action-main) !important;
    stroke: currentColor;
}

body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    border-color: var(--action-border) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, var(--action-soft) 100%),
        #ffffff !important;
    color: var(--action-main) !important;
}

body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-shared .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon {
    border-color: #8cd5b4 !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #e9fbf2 100%),
        #ffffff !important;
    color: var(--action-main) !important;
}

body .d-status-poster-card .d-status-stack-badge {
    background: var(--action-main) !important;
    color: #ffffff !important;
}

body .d-status-poster-card .d-status-stack-copy {
    display: none !important;
}

body .d-status-poster-card .d-status-engagement-footer {
    display: none;
}

body .simple-status-card .d-status-reaction-summary {
    padding: 10px clamp(16px, 4vw, 28px) 12px;
    border-top: 1px solid #f1f4f3;
}

body .simple-status-card .d-status-reaction-summary span,
body .d-status-reaction-summary .d-status-views-chip {
    min-height: 28px;
    border-color: #e2eae7;
    background: #ffffff;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

body .d-status-reaction-summary .d-status-views-chip [data-lucide],
body .simple-status-card .d-status-reaction-summary [data-lucide] {
    color: #536471;
}

@media (max-width: 720px) {
    body .d-status-poster-card .simple-status-head {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        min-height: 82px;
        padding: 13px 12px;
    }

    body .d-status-poster-card .d-status-avatar {
        width: 46px;
        height: 46px;
    }

    body .d-status-poster-card .d-status-author strong {
        font-size: 15px;
    }

    body .d-status-poster-card .d-status-author span {
        font-size: 11px;
    }

    body .d-status-poster-card .d-status-header-number span {
        display: none;
    }

    body .d-status-poster-card .d-status-header-number {
        width: 32px;
        max-width: 32px;
        min-height: 32px;
        justify-content: center;
        padding: 0;
    }

    body .d-status-poster-card .d-status-follow-action .primary-button span,
    body .d-status-poster-card .d-status-follow-action .secondary-button span {
        display: none;
    }

    body .d-status-gallery-nav {
        opacity: 0.86;
    }

    body .d-status-poster-card .d-status-copy-block {
        padding: 12px 14px 13px;
    }

    body .d-status-poster-card .d-status-stack-actions {
        grid-template-columns: repeat(7, minmax(38px, 1fr)) !important;
        padding-inline: 4px;
    }
}

@media (max-width: 420px) {
    body .d-status-poster-card .d-status-stack-actions {
        padding-inline: 2px;
    }

    body .d-status-poster-card .d-status-stack-icon {
        width: 31px;
        height: 31px;
    }

    body .d-status-poster-card .d-status-stack-icon [data-lucide] {
        width: 16px;
        height: 16px;
    }

    body .d-status-poster-card .d-status-stack-badge {
        min-width: 15px;
        height: 15px;
        border-width: 1.5px;
        font-size: 8px;
    }
}

.d-status-avatar.d-status-author-link {
    color: inherit;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.d-status-avatar.d-status-author-link:hover,
.d-status-avatar.d-status-author-link:focus-visible {
    transform: translateY(-1px) scale(1.02);
    outline: none;
}

.d-status-name-link {
    color: inherit;
    text-decoration: none;
}

.d-status-name-link:hover,
.d-status-name-link:focus-visible {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    outline: none;
}

.profile-social-card {
    width: min(980px, calc(100% - 28px));
    margin: 22px auto;
    overflow: hidden;
    border: 1px solid #dfe9e5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.profile-social-card:target {
    scroll-margin-top: 92px;
    animation: profileSocialOpen 700ms ease both;
}

@keyframes profileSocialOpen {
    0% {
        box-shadow:
            0 0 0 0 rgba(37, 99, 235, 0),
            0 22px 60px rgba(15, 23, 42, 0.08);
        transform: translateY(10px) scale(0.992);
    }

    42% {
        box-shadow:
            0 0 0 7px rgba(37, 99, 235, 0.12),
            0 24px 70px rgba(15, 23, 42, 0.11);
        transform: translateY(0) scale(1);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(37, 99, 235, 0),
            0 22px 60px rgba(15, 23, 42, 0.08);
        transform: translateY(0) scale(1);
    }
}

.profile-social-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf2ef;
}

.profile-social-topbar > strong {
    overflow: hidden;
    color: #0f172a;
    font-size: clamp(18px, 2.4vw, 27px);
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-social-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #16251f;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}

.profile-social-back [data-lucide] {
    width: 20px;
    height: 20px;
}

.profile-social-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(210px, auto);
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
    padding: clamp(18px, 3vw, 30px);
}

.profile-social-photo {
    display: grid;
    place-items: center;
    width: clamp(92px, 15vw, 138px);
    height: clamp(92px, 15vw, 138px);
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #405de6, #833ab4 35%, #e1306c 60%, #f77737 100%);
}

.profile-social-photo img,
.profile-social-photo .profile-photo-frame,
.profile-social-photo > span {
    width: 100%;
    height: 100%;
    border: 4px solid #ffffff;
    border-radius: 50%;
}

.profile-social-photo img {
    display: block;
    object-fit: cover;
}

.profile-social-photo > span {
    display: grid;
    place-items: center;
    background: #ecf8f2;
    color: var(--green);
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 950;
}

.profile-social-identity {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.profile-social-identity h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #101827;
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1.05;
}

.profile-social-identity h2 [data-lucide] {
    width: 20px;
    height: 20px;
    color: #2563eb;
}

.profile-social-identity p {
    max-width: 560px;
    margin: 0;
    color: #42534d;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
}

.profile-social-number {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: start;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #cde9dc;
    border-radius: 999px;
    background: #f1fbf6;
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 900;
}

.profile-social-number [data-lucide] {
    width: 15px;
    height: 15px;
}

.profile-social-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(62px, 1fr));
    gap: 10px;
}

.profile-social-stats span {
    display: grid;
    gap: 3px;
    justify-items: center;
    min-width: 0;
}

.profile-social-stats strong {
    color: #111827;
    font-size: clamp(19px, 2.5vw, 28px);
    line-height: 1;
}

.profile-social-stats small {
    color: #26362f;
    font-size: 14px;
    font-weight: 650;
}

.profile-social-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 0 clamp(18px, 3vw, 30px) 18px;
}

.profile-social-actions > *,
.profile-social-actions form,
.profile-social-actions a,
.profile-social-actions button {
    width: 100%;
}

.profile-social-actions .primary-button,
.profile-social-actions .secondary-button {
    justify-content: center;
    min-height: 42px;
    border-radius: 8px;
}

.profile-social-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #edf2ef;
    border-bottom: 1px solid #edf2ef;
}

.profile-social-tabs span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 50px;
    color: #53635d;
    font-size: 13px;
    font-weight: 900;
}

.profile-social-tabs span.active {
    color: #0f172a;
    box-shadow: inset 0 -3px 0 #111827;
}

.profile-social-tabs [data-lucide] {
    width: 18px;
    height: 18px;
}

.profile-social-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    background: #eef2f0;
}

.profile-social-post {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    background: #ffffff;
    color: #ffffff;
    text-decoration: none;
}

.profile-social-post img,
.profile-social-post video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.profile-social-post:hover img,
.profile-social-post:hover video {
    transform: scale(1.035);
}

.profile-social-post small,
.profile-social-post-kind {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.profile-social-post small {
    left: 9px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 900;
}

.profile-social-post small [data-lucide],
.profile-social-post-kind {
    width: 16px;
    height: 16px;
}

.profile-social-post-kind {
    top: 9px;
    right: 9px;
}

.profile-social-text-post {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    background:
        linear-gradient(135deg, rgba(64, 93, 230, 0.9), rgba(225, 48, 108, 0.88)),
        var(--green);
    color: #ffffff;
    font-size: clamp(13px, 1.8vw, 18px);
    font-weight: 850;
    line-height: 1.25;
    text-align: center;
}

.profile-social-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 220px;
    padding: 28px;
    background: #ffffff;
    color: #42534d;
    text-align: center;
}

.profile-social-empty [data-lucide] {
    width: 34px;
    height: 34px;
    color: var(--green);
}

.profile-social-empty strong {
    color: #10251e;
    font-size: 18px;
}

.profile-social-empty p {
    margin: 0;
    max-width: 360px;
}

@media (max-width: 720px) {
    .profile-social-card {
        width: min(100%, calc(100% - 10px));
        margin-block: 10px;
        border-radius: 0;
    }

    .profile-social-topbar {
        padding: 12px;
    }

    .profile-social-topbar .dekeree-share {
        display: none;
    }

    .profile-social-head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 13px;
        padding: 16px 12px 10px;
    }

    .profile-social-photo {
        width: 84px;
        height: 84px;
    }

    .profile-social-stats {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 8px;
    }

    .profile-social-identity h2 {
        font-size: 21px;
    }

    .profile-social-identity p {
        font-size: 13px;
    }

    .profile-social-actions {
        padding: 0 12px 14px;
    }

    .profile-social-tabs span {
        min-height: 44px;
        font-size: 12px;
    }
}

body .d-status-poster-card.has-visible-d-number .simple-status-head {
    min-height: 118px;
}

body .d-status-poster-card.has-visible-d-number .d-status-author {
    max-width: calc(100% - 270px);
}

body .d-status-poster-card.has-visible-d-number .d-status-header-number {
    top: 24px;
    right: 28px;
    width: min(190px, 30vw);
    max-width: min(190px, 30vw);
    min-height: 34px;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 12px;
}

body .d-status-poster-card.has-visible-d-number .d-status-follow-action,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action {
    top: 64px;
    right: 28px;
    z-index: 24;
    width: min(190px, 30vw);
    max-width: min(190px, 30vw);
    justify-content: stretch;
    align-items: stretch;
}

body .d-status-poster-card.has-visible-d-number .d-status-follow-action form {
    width: 100%;
}

body .d-status-poster-card.has-visible-d-number .d-status-follow-action .primary-button,
body .d-status-poster-card.has-visible-d-number .d-status-follow-action .secondary-button,
body .d-status-poster-card.has-visible-d-number .d-status-own-note,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .primary-button,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .secondary-button,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-own-note {
    width: 100%;
    min-height: 34px;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-color: #d9e5f5;
    background:
        linear-gradient(180deg, #ffffff, #f8fbff),
        #ffffff;
    color: #2563eb;
    font-size: 12px;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.09);
    backdrop-filter: none;
}

body .d-status-poster-card.has-visible-d-number .d-status-header-number [data-lucide],
body .d-status-poster-card.has-visible-d-number .d-status-follow-action [data-lucide] {
    width: 15px;
    height: 15px;
}

@media (max-width: 720px) {
    body .d-status-poster-card.has-visible-d-number .simple-status-head {
        min-height: 118px;
    }

    body .d-status-poster-card.has-visible-d-number .d-status-author {
        max-width: calc(100% - 165px);
    }

    body .d-status-poster-card.has-visible-d-number .d-status-header-number {
        top: 18px;
        right: 12px;
        width: min(142px, 38vw);
        max-width: min(142px, 38vw);
        min-height: 31px;
        padding: 6px 8px;
        font-size: 10px;
    }

    body .d-status-poster-card.has-visible-d-number .d-status-follow-action,
    body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action {
        top: 53px;
        right: 12px;
        width: min(142px, 38vw);
        max-width: min(142px, 38vw);
    }

    body .d-status-poster-card.has-visible-d-number .d-status-follow-action .primary-button,
    body .d-status-poster-card.has-visible-d-number .d-status-follow-action .secondary-button,
    body .d-status-poster-card.has-visible-d-number .d-status-own-note,
    body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .primary-button,
    body .has-visible-d-number:not(.d-status-text-poster) .d-status-follow-action .secondary-button,
    body .has-visible-d-number:not(.d-status-text-poster) .d-status-own-note {
        min-height: 31px;
        padding: 6px 8px;
        font-size: 10px;
    }

    body .d-status-poster-card.has-visible-d-number .d-status-header-number [data-lucide],
    body .d-status-poster-card.has-visible-d-number .d-status-follow-action [data-lucide] {
        width: 13px;
        height: 13px;
    }
}

body .d-status-poster-card .d-clip-stage,
body .simple-status-card.d-status-poster-card .d-clip-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, #f7faf9, #edf3f1),
        #f4f7f6;
    box-shadow: none;
    overflow: hidden;
}

body .d-status-poster-card .d-clip-stage::before {
    display: none;
}

body .d-status-poster-card .d-clip-stage video {
    display: block;
    flex: 0 1 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(76vh, 760px);
    object-fit: contain;
    background: #eef3f1;
    transform: none;
}

body .d-status-poster-card .d-clip-gradient {
    display: none;
}

body .d-status-poster-card .d-clip-stage .dekeree-media-watermark {
    top: auto;
    bottom: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.78);
    color: #10251e;
    box-shadow: 0 14px 32px rgba(8, 31, 23, 0.18);
}

body .d-status-poster-card .d-clip-stage .dekeree-media-watermark small {
    color: #4e625b;
}

body .d-status-poster-card .d-clip-caption {
    left: 18px;
    right: 18px;
    bottom: 18px;
    max-width: min(560px, calc(100% - 36px));
}

body .d-status-poster-card .d-clip-topline,
body .d-status-poster-card .d-clip-caption {
    display: none !important;
}

body .d-status-poster-card .d-clip-controls {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 14;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.38);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
}

body .d-status-poster-card .d-clip-controls > button,
body .d-status-poster-card .d-clip-controls .d-status-media-volume {
    position: static;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #17231d;
    box-shadow: none;
    backdrop-filter: none;
    cursor: pointer;
    transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}

body .d-status-poster-card .d-clip-controls > button:hover,
body .d-status-poster-card .d-clip-controls > button:focus-visible,
body .d-status-poster-card .d-clip-controls .d-status-media-volume:hover,
body .d-status-poster-card .d-clip-controls .d-status-media-volume:focus-visible {
    transform: translateY(-1px);
    background: #ffffff;
    color: var(--green);
    outline: none;
}

body .d-status-poster-card .d-clip-controls [data-lucide] {
    width: 17px;
    height: 17px;
}

body .d-status-poster-card .d-clip-controls .d-clip-volume-panel {
    position: relative;
    inset: auto;
    z-index: 2;
    display: inline-flex;
}

body .d-status-poster-card .d-clip-controls .d-clip-volume-control {
    right: 0;
    bottom: calc(100% + 10px);
    max-width: min(210px, calc(100vw - 80px));
    min-height: 38px;
    background: rgba(15, 23, 42, 0.82);
}

body .d-status-poster-card .d-clip-controls .d-clip-volume-control input {
    width: clamp(76px, 18vw, 124px);
}

@media (max-width: 720px) {
    body .d-status-poster-card .d-clip-stage,
    body .simple-status-card.d-status-poster-card .d-clip-stage {
        min-height: 0;
    }

    body .d-status-poster-card .d-clip-stage video {
        max-height: min(70vh, 560px);
    }

    body .d-status-poster-card .d-clip-controls {
        right: 10px;
        bottom: 10px;
        gap: 5px;
        padding: 6px;
    }

    body .d-status-poster-card .d-clip-controls > button,
    body .d-status-poster-card .d-clip-controls .d-status-media-volume {
        width: 30px;
        height: 30px;
    }

    body .d-status-poster-card .d-clip-controls [data-lucide] {
        width: 15px;
        height: 15px;
    }
}

.d-status-card.is-sharing-snapshot {
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.16);
}

.d-status-share-reference {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 24px 22px;
    padding: 12px 14px;
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.94)),
        #ffffff;
    color: #0f4d3a;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.12);
}

.d-status-share-reference span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.d-status-share-reference span::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #15c784, #1d8bff);
    box-shadow: 0 0 0 5px rgba(21, 199, 132, 0.12);
}

.d-status-share-reference strong {
    min-width: 0;
    overflow: hidden;
    color: #18352c;
    font-size: 0.86rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .d-status-share-reference {
        align-items: flex-start;
        flex-direction: column;
        margin: 14px 14px 18px;
    }

.d-status-share-reference strong {
    width: 100%;
}
}

body .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-views .d-status-stack-icon {
    color: #244b5a !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.98) 0 43%, rgba(228, 246, 252, 0.98) 44% 100%),
        #e8f7fb !important;
    border-color: rgba(36, 75, 90, 0.12) !important;
    box-shadow:
        0 12px 24px rgba(36, 75, 90, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

body .d-status-stack-views .d-status-stack-icon [data-lucide],
body .d-status-poster-card .d-status-stack-views .d-status-stack-icon [data-lucide] {
    width: 21px;
    height: 21px;
    stroke-width: 2.65;
}

body .d-status-stack-views .d-status-stack-badge,
body .d-status-poster-card .d-status-stack-views .d-status-stack-badge {
    background: linear-gradient(180deg, #f4fbff, #e2f5fb) !important;
    border-color: #ffffff !important;
    color: #244b5a !important;
    box-shadow:
        0 8px 16px rgba(36, 75, 90, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body .d-status-reaction-summary .d-status-views-chip {
    border-color: #d5ecf5 !important;
    background:
        linear-gradient(180deg, #ffffff, #f2fbfe),
        #f7fbff !important;
    color: #244b5a !important;
    box-shadow:
        0 7px 16px rgba(36, 75, 90, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

body .d-status-reaction-summary .d-status-views-chip [data-lucide] {
    width: 22px;
    height: 22px;
    color: #244b5a !important;
    stroke-width: 2.6;
}

body .d-status-reaction-summary .d-status-views-chip strong {
    color: #244b5a !important;
}

.d-status-text-editor {
    margin: 10px 0 14px;
    border: 1px solid #dcebe4;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #ffffff, #f8fcfa),
        #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.d-status-text-editor summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--green);
    font-size: 13px;
    font-weight: 850;
    list-style: none;
    cursor: pointer;
}

.d-status-text-editor summary::-webkit-details-marker {
    display: none;
}

.d-status-text-editor summary [data-lucide] {
    width: 17px;
    height: 17px;
}

.d-status-text-editor[open] summary {
    border-bottom: 1px solid #e4f0eb;
}

.d-status-text-editor form {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.d-status-text-editor label {
    display: grid;
    gap: 5px;
}

.d-status-text-editor label span {
    color: #47635a;
    font-size: 12px;
    font-weight: 800;
}

.d-status-text-editor input,
.d-status-text-editor textarea {
    width: 100%;
    border: 1px solid #d7e6df;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font-size: 14px;
}

.d-status-text-editor input {
    min-height: 42px;
    padding: 0 12px;
}

.d-status-text-editor textarea {
    min-height: 104px;
    padding: 11px 12px;
    resize: vertical;
}

.d-status-text-editor input:focus,
.d-status-text-editor textarea:focus {
    border-color: rgba(23, 107, 77, 0.42);
    outline: 3px solid rgba(23, 107, 77, 0.1);
}

body.has-status-profile-modal {
    overflow: hidden;
}

button.d-status-avatar.d-status-author-link,
button.d-status-name-link {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

button.d-status-avatar.d-status-author-link {
    padding: 0;
}

.d-status-profile-modal[hidden] {
    display: none !important;
}

.d-status-profile-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
}

.d-status-profile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(12px);
    animation: dStatusProfileFade 180ms ease both;
}

.d-status-profile-sheet {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(860px, calc(100vh - 38px));
    overflow: auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: #ffffff;
    color: #101827;
    box-shadow: 0 34px 110px rgba(15, 23, 42, 0.28);
    animation: dStatusProfileSheet 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.d-status-profile-sheet {
    border: 1px solid rgba(180, 213, 201, 0.98);
    border-radius: 26px 26px 14px 26px;
    background:
        linear-gradient(135deg, rgba(235, 250, 244, 0.96), rgba(255, 255, 255, 0.98) 34%, rgba(244, 248, 255, 0.98)),
        #ffffff;
}

.d-status-profile-sheet::before {
    content: "D Status profile";
    position: absolute;
    z-index: 5;
    top: 64px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(23, 107, 77, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
}

.d-status-profile-topbar {
    border-bottom-color: rgba(199, 223, 214, 0.78);
    background: rgba(249, 253, 251, 0.9);
}

.d-status-profile-head {
    grid-template-columns: 106px minmax(0, 1fr);
    margin: 12px 14px 0;
    padding: 18px;
    border: 1px solid rgba(218, 235, 229, 0.9);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(234, 250, 244, 0.86)),
        #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
}

.d-status-profile-photo {
    width: 92px;
    height: 92px;
    padding: 4px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--green), #2bb673 48%, #2563eb);
}

.d-status-profile-photo img,
.d-status-profile-photo span {
    border-radius: 22px;
}

.d-status-profile-stats {
    gap: 9px;
}

.d-status-profile-stats span {
    min-height: 68px;
    align-content: center;
    border: 1px solid rgba(209, 226, 220, 0.86);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
}

.d-status-profile-bio {
    margin: 0 14px;
    padding: 14px 18px 16px;
}

.d-status-profile-actions {
    padding-inline: 14px;
}

.d-status-profile-tabs {
    margin: 0 14px;
    overflow: hidden;
    border: 1px solid #e4eee9;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.68);
}

.d-status-profile-tabs span.active {
    color: var(--green);
    box-shadow: inset 0 -3px 0 var(--green);
}

.d-status-profile-grid {
    gap: 8px;
    padding: 14px;
    background: transparent;
}

.d-status-profile-post {
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.d-status-profile-topbar {
    position: sticky;
    z-index: 4;
    top: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
}

.d-status-profile-topbar strong {
    overflow: hidden;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d-status-profile-topbar button,
.d-status-profile-topbar a {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.d-status-profile-topbar .d-status-profile-top-edit {
    border-color: rgba(23, 107, 77, 0.22);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98), rgba(239, 250, 245, 0.96)),
        #ffffff;
    color: var(--green);
    box-shadow:
        0 12px 26px rgba(23, 107, 77, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.d-status-profile-topbar .d-status-profile-top-edit:hover,
.d-status-profile-topbar .d-status-profile-top-edit:focus-visible {
    transform: translateY(-1px);
    outline: 3px solid rgba(23, 107, 77, 0.12);
}

.d-status-profile-head {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 20px 18px 10px;
}

.d-status-profile-photo {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
}

.d-status-profile-photo img,
.d-status-profile-photo span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: #e8f6ee;
    color: var(--green);
    font-weight: 950;
    object-fit: cover;
}

.d-status-profile-photo-edit {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background:
        linear-gradient(135deg, #177a58, #0f6d50),
        var(--green);
    color: #ffffff;
    box-shadow:
        0 14px 30px rgba(23, 107, 77, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.d-status-profile-photo-edit:hover,
.d-status-profile-photo-edit:focus-visible {
    transform: translateY(-2px) rotate(-5deg);
    box-shadow:
        0 18px 36px rgba(23, 107, 77, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    outline: none;
}

.d-status-profile-photo-edit [data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 2.8;
}

.d-status-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    text-align: center;
}

.d-status-profile-stats span {
    display: grid;
    gap: 3px;
}

.d-status-profile-stats strong {
    font-size: 20px;
    font-weight: 950;
}

.d-status-profile-stats small {
    color: #475569;
    font-size: 13px;
    font-weight: 650;
}

.d-status-profile-bio {
    padding: 4px 18px 16px;
}

.d-status-profile-bio strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
}

.d-status-profile-bio p {
    margin: 4px 0 8px;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.45;
}

.d-status-profile-bio span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid #cfeadc;
    border-radius: 999px;
    background: #f2fbf6;
    color: var(--green);
    font-size: 13px;
    font-weight: 850;
}

.d-status-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 18px 16px;
}

.d-status-profile-actions > *,
.d-status-profile-actions form,
.d-status-profile-actions a,
.d-status-profile-actions button {
    width: 100%;
}

.d-status-profile-actions .d-status-profile-owner-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    border: 1px solid rgba(23, 107, 77, 0.2);
    border-radius: 14px;
    background:
        linear-gradient(135deg, #167755, #0f6048),
        var(--green);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    box-shadow:
        0 18px 38px rgba(23, 107, 77, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.d-status-profile-owner-edit span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.d-status-profile-owner-edit strong {
    font: inherit;
}

.d-status-profile-owner-edit:hover,
.d-status-profile-owner-edit:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 22px 48px rgba(23, 107, 77, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    outline: none;
}

.d-status-profile-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}

.d-status-profile-tabs span,
.d-status-profile-tabs button {
    display: grid;
    place-items: center;
    min-height: 48px;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.d-status-profile-tabs button:hover,
.d-status-profile-tabs button:focus-visible {
    background: rgba(23, 107, 77, 0.06);
    color: var(--green);
    outline: none;
}

.d-status-profile-tabs span.active,
.d-status-profile-tabs button.active {
    color: var(--green);
    box-shadow: inset 0 -3px 0 var(--green);
}

.d-status-profile-panel[hidden] {
    display: none !important;
}

.d-status-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: #ffffff;
}

.d-status-profile-post-wrap {
    position: relative;
    min-width: 0;
}

.d-status-profile-post {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
}

.d-status-profile-post img,
.d-status-profile-post video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease;
}

.d-status-profile-post:hover img,
.d-status-profile-post:hover video {
    transform: scale(1.04);
}

.d-status-profile-post > span {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #f8fffc, #eef7ff);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
    text-align: center;
}

.d-status-profile-post small {
    position: absolute;
    left: 7px;
    bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
    text-shadow: 0 1px 4px rgba(15, 23, 42, 0.8);
}

.d-status-profile-post-kind {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #ffffff;
    filter: drop-shadow(0 1px 4px rgba(15, 23, 42, 0.7));
}

.d-status-profile-empty {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 180px;
    margin: 14px;
    padding: 22px;
    border: 1px solid #dcebe4;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #ffffff, #f4fbf8),
        #ffffff;
    color: #60756d;
    text-align: center;
}

.d-status-profile-empty [data-lucide] {
    width: 30px;
    height: 30px;
    color: var(--green);
}

.d-status-profile-empty strong {
    color: #10231e;
    font-size: 15px;
    font-weight: 900;
}

.d-status-profile-empty span {
    font-size: 13px;
    font-weight: 650;
}

.d-status-profile-about {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.d-status-profile-about > div,
.d-status-profile-about-link {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid #dcebe4;
    border-radius: 16px;
    background:
        linear-gradient(135deg, #ffffff, #f7fcfa),
        #ffffff;
    color: #14221d;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.d-status-profile-about span,
.d-status-profile-about-link span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.d-status-profile-about strong,
.d-status-profile-about-link strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}

.d-status-profile-about p {
    margin: 0;
    color: #42554d;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.d-status-profile-about-link:hover,
.d-status-profile-about-link:focus-visible {
    border-color: rgba(23, 107, 77, 0.28);
    box-shadow: 0 16px 34px rgba(23, 107, 77, 0.1);
    transform: translateY(-1px);
    outline: none;
}

.d-status-profile-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 8;
}

.d-status-profile-edit summary {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 249, 0.94)),
        #ffffff;
    color: var(--green);
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    cursor: pointer;
    list-style: none;
    transition: transform 170ms ease, box-shadow 170ms ease, color 170ms ease;
}

.d-status-profile-edit summary::-webkit-details-marker {
    display: none;
}

.d-status-profile-edit summary [data-lucide] {
    width: 17px;
    height: 17px;
    stroke-width: 2.7;
}

.d-status-profile-edit summary:hover,
.d-status-profile-edit[open] summary {
    color: #0f5f46;
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        0 16px 34px rgba(23, 107, 77, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.d-status-profile-edit form {
    position: absolute;
    top: 42px;
    right: 0;
    display: grid;
    gap: 9px;
    width: min(310px, calc(100vw - 58px));
    padding: 12px;
    border: 1px solid #d7e9e1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.2);
}

.d-status-profile-edit label {
    display: grid;
    gap: 5px;
}

.d-status-profile-edit label span {
    color: #60756d;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
}

.d-status-profile-edit input,
.d-status-profile-edit textarea {
    width: 100%;
    border: 1px solid #d7e6df;
    border-radius: 10px;
    background: #ffffff;
    color: var(--ink);
    font-size: 13px;
}

.d-status-profile-edit input {
    min-height: 38px;
    padding: 0 10px;
}

.d-status-profile-edit textarea {
    min-height: 94px;
    padding: 10px;
    resize: vertical;
}

.d-status-profile-edit input:focus,
.d-status-profile-edit textarea:focus {
    border-color: rgba(23, 107, 77, 0.45);
    outline: 3px solid rgba(23, 107, 77, 0.12);
}

@keyframes dStatusProfileFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dStatusProfileSheet {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

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

@media (max-width: 640px) {
    .d-status-profile-modal {
        align-items: end;
        padding: 0;
    }

    .d-status-profile-sheet {
        width: 100%;
        max-height: calc(100vh - 10px);
        border-radius: 22px 22px 0 0;
    }
}

.connect-own-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.connect-own-actions .connect-plate-action.edit {
    color: #0f5f46;
    border-color: rgba(15, 95, 70, 0.22);
    background: linear-gradient(180deg, #ffffff, #f3fbf7);
}

.d-status-compose-simple .d-status-message-field > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.d-status-compose-simple .d-status-message-field > span a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0f7a57;
    font-size: 12px;
    font-weight: 760;
    text-decoration: none;
    white-space: nowrap;
}

.d-status-compose-simple .d-status-message-field > span a:hover,
.d-status-compose-simple .d-status-message-field > span a:focus-visible {
    color: #0a4f3b;
}

.d-status-compose-simple .d-status-message-field > span a [data-lucide] {
    width: 14px;
    height: 14px;
}

.identity-edit-shell {
    width: min(920px, calc(100% - 32px));
    margin: 28px auto 60px;
}

.identity-edit-card {
    display: grid;
    gap: 22px;
    border-radius: 22px;
    border-color: rgba(15, 143, 95, 0.18);
    background:
        linear-gradient(135deg, rgba(240, 253, 247, 0.88), rgba(255, 255, 255, 0.98) 42%, rgba(248, 250, 252, 0.96)),
        #ffffff;
    box-shadow: 0 24px 70px rgba(16, 35, 30, 0.1);
}

.identity-edit-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(15, 143, 95, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
}

.identity-edit-preview > div:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.identity-edit-preview strong {
    color: #10231e;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.05;
}

.identity-edit-preview span {
    color: #60756d;
    font-weight: 650;
}

.identity-edit-photo {
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 26px;
    border: 3px solid #ffffff;
    outline: 1px solid rgba(15, 143, 95, 0.28);
    box-shadow: 0 16px 34px rgba(15, 95, 70, 0.14);
    background: linear-gradient(135deg, #dff7ec, #ffffff);
}

.identity-edit-photo img,
.identity-edit-photo span {
    width: 100%;
    height: 100%;
}

.identity-edit-photo img {
    display: block;
    object-fit: cover;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
    transform: scale(var(--profile-photo-zoom, 1));
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%);
}

.identity-edit-photo span {
    display: grid;
    place-items: center;
    color: #0f6f51;
    font-size: 30px;
    font-weight: 850;
}

.identity-photo-adjuster {
    background:
        radial-gradient(circle at top right, rgba(232, 246, 239, .95), transparent 42%),
        rgba(255, 255, 255, .9);
}

.identity-live-preview-grid {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.identity-photo-cropper {
    width: min(220px, 100%);
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(23, 33, 28, .1);
}

.identity-live-copy {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.identity-live-copy strong {
    color: #17211c;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 900;
    line-height: 1.05;
}

.identity-live-copy span {
    color: #176b4d;
    font-size: 13px;
    font-weight: 850;
}

.identity-live-copy p {
    margin: 0;
    color: #6c7772;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.identity-share-consent {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(15, 143, 95, 0.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 247, 0.86), rgba(255, 255, 255, 0.96));
}

.identity-share-consent > div {
    display: grid;
    gap: 4px;
}

.identity-share-consent strong,
.identity-share-consent label {
    display: flex;
    align-items: center;
    gap: 9px;
}

.identity-share-consent strong {
    color: #10231e;
}

.identity-share-consent strong [data-lucide] {
    width: 18px;
    height: 18px;
    color: #0f8f5f;
}

.identity-share-consent p {
    margin: 0;
    color: #60756d;
    font-size: 13px;
    line-height: 1.5;
}

.identity-share-consent label {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 143, 95, 0.14);
    border-radius: 14px;
    color: #21352e;
    font-weight: 760;
    background: #ffffff;
}

.identity-share-consent input {
    accent-color: #0f8f5f;
}

@media (max-width: 640px) {
    .connect-own-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .d-status-compose-simple .d-status-message-field > span {
        align-items: flex-start;
        flex-direction: column;
    }

    .identity-edit-shell {
        width: min(100% - 20px, 920px);
    }

    .identity-edit-preview {
        align-items: flex-start;
    }

    .identity-edit-photo {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .identity-live-preview-grid {
        grid-template-columns: 1fr;
    }

    .identity-photo-cropper {
        width: min(260px, 100%);
    }
}

/* Final D Social polish override: calm brand-first social UI. */
body .simple-status-shell {
    background:
        radial-gradient(circle at 12% 0%, rgba(15, 143, 95, 0.06), transparent 30%),
        linear-gradient(180deg, #eef3f1, #f7faf9 34%, #eef3f1);
}

body .d-status-poster-card {
    overflow: hidden;
    border-color: #dfe7e4;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 18px 46px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body .d-status-poster-card .simple-status-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(88px, auto);
    gap: 12px;
    align-items: center;
    min-height: 90px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f0;
    background: #ffffff;
}

body .d-status-poster-card .d-status-avatar,
body .d-status-poster-card .d-status-author,
body .d-status-poster-card .d-status-follow-action,
body .d-status-poster-card .d-status-header-number {
    position: static !important;
}

body .d-status-poster-card .d-status-avatar {
    width: 52px;
    height: 52px;
    border: 2px solid #ffffff;
    box-shadow:
        0 0 0 1px #d7e3df,
        0 10px 22px rgba(15, 23, 42, 0.11);
}

body .d-status-poster-card .d-status-author {
    max-width: none;
    min-height: 0;
}

body .d-status-poster-card .d-status-author strong {
    color: #111827;
    font-size: clamp(16px, 2.2vw, 21px);
    font-weight: 820;
}

body .d-status-poster-card .d-status-author span {
    margin-top: 4px;
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}

body .d-status-poster-card .d-status-header-number-form,
body .d-status-poster-card .simple-status-head > .d-status-header-number {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

body .d-status-poster-card .d-status-header-number {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 154px;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid #d7e6df;
    border-radius: 999px;
    background: #f8fbfa;
    color: #0f6f4c;
    font-size: 11px;
    font-weight: 780;
    box-shadow: none;
}

body .d-status-poster-card .d-status-header-number [data-lucide] {
    width: 14px;
    height: 14px;
}

body .d-status-poster-card .d-status-follow-action {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    width: auto;
    max-width: none;
    min-width: 0;
}

body .d-status-poster-card.has-visible-d-number .d-status-follow-action {
    align-self: end;
}

body .d-status-poster-card .d-status-follow-action .primary-button,
body .d-status-poster-card .d-status-follow-action .secondary-button,
body .d-status-poster-card .d-status-own-note {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #d7e6df;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 12px;
    font-weight: 760;
    box-shadow: none;
}

body .d-status-poster-card .d-status-media:not(.d-clip-stage),
body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-status-gallery-item {
    background: #f4f6f5 !important;
}

body .d-status-poster-card .d-status-media img,
body .d-status-poster-card .d-status-media video,
body .d-status-poster-card .d-status-gallery-item img,
body .d-status-poster-card .d-status-gallery-item video {
    max-height: min(70vh, 680px);
    object-fit: contain;
}

body .d-status-poster-card .d-status-copy-block {
    gap: 5px;
    padding: 14px clamp(18px, 4vw, 34px) 15px;
    border-top: 1px solid #eef2f0;
    background: #ffffff;
}

body .d-status-poster-card .d-status-copy-block h2 {
    max-width: 760px;
    color: #111827;
    font-size: clamp(17px, 2.1vw, 22px);
    font-weight: 760;
    line-height: 1.24;
}

body .d-status-poster-card .d-status-copy-block p,
body .d-status-poster-card .d-status-more-text,
body .d-status-poster-card .d-status-more-text summary,
body .d-status-poster-card .d-status-more-text p {
    max-width: 760px;
    color: #344054;
    font-size: clamp(13px, 1.55vw, 16px);
    font-weight: 520;
    line-height: 1.48;
}

body .d-status-gallery-nav {
    width: 32px;
    height: 32px;
    opacity: 0;
    background: rgba(255, 255, 255, 0.84);
    color: #344054;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

body .d-status-media-gallery:hover .d-status-gallery-nav,
body .d-status-media-gallery:focus-within .d-status-gallery-nav,
body .d-status-gallery-nav:focus-visible {
    opacity: 1;
}

body .d-status-gallery-nav.previous {
    margin-right: -32px;
}

body .d-status-gallery-nav.next {
    margin-left: -32px;
}

body .d-status-gallery-nav [data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
}

body .d-status-gallery-counter {
    min-height: 26px;
    padding: 4px 8px;
    background: rgba(17, 24, 39, 0.58);
    font-size: 11px;
    font-weight: 760;
}

body .d-status-poster-card .d-status-stack-actions {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    overflow-x: auto;
    gap: 0;
    padding: 10px clamp(6px, 2vw, 16px) 12px;
    border-top: 1px solid #eef2f0;
    background: #ffffff;
    scrollbar-width: none;
}

body .d-status-poster-card .d-status-stack-actions::-webkit-scrollbar {
    display: none;
}

body .d-status-poster-card .d-status-stack-actions > * {
    min-width: 44px !important;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    min-height: 54px;
    padding: 2px 4px;
    color: #536471;
}

body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    width: clamp(34px, 5.5vw, 40px);
    height: clamp(34px, 5.5vw, 40px);
    border: 1px solid #e1e8e5;
    background: #ffffff;
    color: #536471 !important;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-icon [data-lucide] {
    width: clamp(17px, 2.4vw, 21px);
    height: clamp(17px, 2.4vw, 21px);
    stroke-width: 2.15;
}

body .d-status-poster-card .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-shared .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon {
    border-color: #9bd7bd;
    background: #ffffff;
    color: #0f8f5f !important;
    box-shadow:
        0 10px 22px rgba(15, 143, 95, 0.12),
        0 0 0 3px rgba(15, 143, 95, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon::after {
    right: 7px;
    bottom: 7px;
    width: 6px;
    height: 6px;
    background: #0f8f5f;
    box-shadow: 0 3px 8px rgba(15, 143, 95, 0.22);
}

body .d-status-poster-card .d-status-stack-badge {
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    background: #0f8f5f;
    color: #ffffff;
    font-size: 9px;
    font-weight: 760;
    box-shadow: 0 6px 14px rgba(15, 143, 95, 0.22);
}

body .d-status-poster-card .d-status-stack-copy,
body .d-status-poster-card .d-status-engagement-footer {
    display: none !important;
}

@media (max-width: 720px) {
    body .d-status-poster-card .simple-status-head {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        min-height: 82px;
        padding: 13px 12px;
    }

    body .d-status-poster-card .d-status-avatar {
        width: 46px;
        height: 46px;
    }

    body .d-status-poster-card .d-status-header-number span {
        display: none;
    }

    body .d-status-poster-card .d-status-header-number {
        width: 32px;
        max-width: 32px;
        min-height: 32px;
        justify-content: center;
        padding: 0;
    }

    body .d-status-gallery-nav {
        opacity: 0.86;
    }
}

/* D Social hierarchy tightening: image first, caption second, actions third. */
body .d-status-poster-card {
    max-width: 780px;
    margin-inline: auto;
}

body .d-status-poster-card .simple-status-head {
    grid-template-columns: 46px minmax(0, 1fr) minmax(78px, auto);
    min-height: 82px;
    padding: 12px 14px;
}

body .d-status-poster-card .d-status-avatar {
    width: 46px;
    height: 46px;
}

body .d-status-poster-card .d-status-author strong {
    color: #111827;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.05;
}

body .d-status-poster-card .d-status-author span {
    color: #737373;
    font-size: 12px;
    font-weight: 700;
}

body .d-status-poster-card .d-status-follow-action .primary-button,
body .d-status-poster-card .d-status-follow-action .secondary-button,
body .d-status-poster-card .d-status-own-note,
body .d-status-poster-card .d-status-header-number {
    min-height: 30px;
    padding: 5px 9px;
    border-color: #dbdbdb;
    color: #0095f6;
    font-size: 12px;
    font-weight: 800;
    background: #ffffff;
}

body .d-status-poster-card .d-status-media:not(.d-clip-stage),
body .d-status-poster-card .d-status-media-gallery {
    border-top: 1px solid #eef2f0;
    border-bottom: 1px solid #eef2f0;
}

body .d-status-poster-card .d-status-copy-block {
    padding: 11px clamp(16px, 3.2vw, 28px) 10px;
    border-top: 0;
}

body .d-status-poster-card .d-status-copy-block h2 {
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.25;
    color: #111827;
}

body .d-status-poster-card .d-status-copy-block p,
body .d-status-poster-card .d-status-more-text,
body .d-status-poster-card .d-status-more-text summary,
body .d-status-poster-card .d-status-more-text p {
    font-size: clamp(13px, 1.35vw, 14px);
    line-height: 1.4;
    color: #262626;
}

body .d-status-poster-card .d-status-more-text summary {
    display: block;
}

body .d-status-poster-card .d-status-stack-actions {
    padding: 7px clamp(6px, 1.8vw, 14px) 9px;
    background: #ffffff;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    min-height: 48px;
}

body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    width: clamp(32px, 5vw, 37px);
    height: clamp(32px, 5vw, 37px);
}

body .d-status-poster-card .d-status-stack-icon [data-lucide] {
    width: clamp(16px, 2.2vw, 19px);
    height: clamp(16px, 2.2vw, 19px);
}

body .d-status-poster-card .d-status-stack-badge {
    min-width: 16px;
    height: 16px;
    font-size: 8.5px;
}

body .simple-status-card .d-status-reaction-summary {
    padding: 8px clamp(14px, 3.2vw, 24px) 10px;
}

body .d-status-replies-panel {
    margin-top: 6px;
}

@media (max-width: 720px) {
    body .d-status-poster-card .simple-status-head {
        min-height: 76px;
        padding: 11px 12px;
    }

    body .d-status-poster-card .d-status-copy-block {
        padding: 10px 13px 9px;
    }

    body .d-status-poster-card .d-status-stack-actions {
        padding-block: 6px 8px;
    }
}

/* D Social standard post sizing: same clean box, centered media, steady feed rhythm. */
body .simple-status-feed {
    justify-items: center;
}

body .d-status-poster-card {
    width: min(100%, 520px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
}

body .d-status-poster-card .d-status-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
}

body .d-status-poster-card .d-status-media:not(.d-clip-stage),
body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-clip-stage,
body .simple-status-card.d-status-poster-card .d-clip-stage {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    background: #f7f9f8 !important;
}

body .d-status-poster-card .d-status-media:not(.d-clip-stage) {
    display: flex;
    align-items: center;
    justify-content: center;
}

body .d-status-poster-card .d-status-media img,
body .d-status-poster-card .d-status-media video,
body .d-status-poster-card .d-status-gallery-item img,
body .d-status-poster-card .d-status-gallery-item video,
body .d-status-poster-card .d-clip-stage video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #f7f9f8;
}

body .d-status-poster-card .d-status-gallery-item {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body .d-status-text-poster .d-status-card-body {
    justify-content: center;
    min-height: clamp(210px, 34vw, 300px);
    background:
        radial-gradient(circle at 18% 18%, rgba(15, 143, 95, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff, #f8fbfa);
}

body .d-status-poster-card .d-status-copy-block {
    flex: 0 0 auto;
    min-height: 50px;
    max-height: 70px;
    overflow: hidden;
}

body .d-status-text-poster .d-status-copy-block {
    width: 100%;
    margin-block: auto;
    border-top: 0;
}

body .d-status-poster-card .d-status-reaction-summary,
body .d-status-poster-card .d-status-actions,
body .d-status-poster-card .d-status-replies-panel {
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    body .d-status-poster-card {
        width: 100%;
        min-height: 0;
        border-radius: 16px;
    }

    body .d-status-poster-card .d-status-media:not(.d-clip-stage),
    body .d-status-poster-card .d-status-media-gallery,
    body .d-status-poster-card .d-clip-stage,
    body .simple-status-card.d-status-poster-card .d-clip-stage,
    body .d-status-text-poster .d-status-card-body {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    body .d-status-poster-card .d-status-card-body {
        height: auto;
        max-height: none;
    }

    body .d-status-poster-card .d-status-copy-block {
        min-height: 50px;
        max-height: 74px;
    }
}

/* Final D Social action color lock: one Dekeree green icon family. */
body .d-status-poster-card .d-status-stack-actions {
    --d-action-main: #262626;
    --d-action-active: #0095f6;
    --d-action-soft: #ffffff;
    --d-action-border: #dbdbdb;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    color: var(--d-action-main) !important;
}

body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    border-color: var(--d-action-border) !important;
    background: #ffffff !important;
    color: var(--d-action-main) !important;
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

body .d-status-poster-card .d-status-stack-icon [data-lucide],
body .d-status-poster-card .d-status-stack-actions [data-lucide] {
    color: var(--d-action-main) !important;
    stroke: currentColor !important;
}

body .d-status-poster-card .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-shared .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon {
    border-color: color-mix(in srgb, var(--d-action-active) 34%, #dbdbdb) !important;
    background: #ffffff !important;
    color: var(--d-action-active) !important;
    box-shadow:
        0 10px 22px rgba(0, 149, 246, 0.12),
        0 0 0 4px rgba(0, 149, 246, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

body .d-status-poster-card .d-status-stack-badge,
body .d-status-poster-card .d-status-stack-views .d-status-stack-badge {
    border-color: #ffffff !important;
    background: var(--d-action-active) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 149, 246, 0.2) !important;
}

/* D Social X/Instagram-style action row: simple icons, readable counts, green active state. */
body .d-status-poster-card .d-status-stack-actions {
    --d-action-main: #262626;
    --d-action-active: #0f8f5f;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    align-items: center;
    gap: 0;
    padding: 12px 14px 13px !important;
    border-top: 1px solid #efefef;
    background: #ffffff !important;
}

body .d-status-poster-card .d-status-stack-actions > * {
    min-width: 0 !important;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    display: inline-flex !important;
    min-height: 34px !important;
    padding: 0 4px !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--d-action-main) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    position: static;
    display: inline-flex;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--d-action-main) !important;
    box-shadow: none !important;
}

body .d-status-poster-card .d-status-stack-icon [data-lucide],
body .d-status-poster-card .d-status-stack-actions [data-lucide] {
    width: 25px !important;
    height: 25px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 2.15;
}

body .d-status-poster-card .d-status-stack-badge,
body .d-status-poster-card .d-status-stack-views .d-status-stack-badge {
    position: static !important;
    display: inline-flex !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    line-height: 1;
}

body .d-status-poster-card .d-status-stack-actions button.is-active,
body .d-status-poster-card .d-status-stack-actions button.is-shared,
body .d-status-poster-card .d-status-stack-actions a.is-active,
body .d-status-poster-card .d-status-stack-save.is-active,
body .d-status-poster-card .d-status-stack-like.is-active,
body .d-status-poster-card .d-status-stack-repost.is-active,
body .d-status-poster-card .d-status-stack-hot.is-active {
    color: var(--d-action-active) !important;
}

body .d-status-poster-card .d-status-stack-actions button:hover,
body .d-status-poster-card .d-status-stack-actions button:focus-visible,
body .d-status-poster-card .d-status-stack-actions a:hover,
body .d-status-poster-card .d-status-stack-actions a:focus-visible {
    color: var(--d-action-active) !important;
    outline: none;
}

body .d-status-poster-card .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-shared .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon {
    border: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    box-shadow: none !important;
}

body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-hot.is-active .d-status-stack-icon::after {
    display: none !important;
}

body .d-status-poster-card .d-status-stack-views {
    order: 4;
}

body .d-status-poster-card .d-status-stack-actions form:has(.d-status-stack-like) {
    order: 3;
}

body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] {
    order: 1;
}

body .d-status-poster-card .d-status-stack-actions form:has(.d-status-stack-repost) {
    order: 2;
}

body .d-status-poster-card .d-status-stack-actions form:has(.d-status-stack-hot) {
    order: 5;
}

body .d-status-poster-card .d-status-stack-actions form:has(.d-status-stack-save),
body .d-status-poster-card .d-status-stack-actions a.d-status-stack-save {
    order: 6;
}

body .d-status-poster-card .d-status-stack-actions button[data-share-native] {
    order: 7;
}

@media (max-width: 560px) {
    body .d-status-poster-card .d-status-stack-actions {
        padding-inline: 8px !important;
    }

    body .d-status-poster-card .d-status-stack-actions button,
    body .d-status-poster-card .d-status-stack-actions a,
    body .d-status-poster-card .d-status-stack-stat {
        gap: 4px;
        font-size: 12px;
    }

    body .d-status-poster-card .d-status-stack-icon [data-lucide],
    body .d-status-poster-card .d-status-stack-actions [data-lucide] {
        width: 22px !important;
        height: 22px !important;
    }

    body .d-status-poster-card .d-status-stack-badge,
    body .d-status-poster-card .d-status-stack-views .d-status-stack-badge {
        font-size: 12px !important;
    }
}

/* Exact compact social toolbar: X-style slate icons, one row, no pill badges. */
body .d-status-poster-card .d-status-stack-actions {
    --d-action-main: #465260;
    --d-action-hover: #111827;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 18px 20px 20px !important;
    border-top: 1px solid #eef2f0 !important;
    background: #ffffff !important;
}

body .d-status-poster-card .d-status-stack-actions form:has(.d-status-stack-hot) {
    display: none !important;
}

body .d-status-poster-card .d-status-stack-actions > *,
body .d-status-poster-card .d-status-stack-actions form {
    min-width: 0 !important;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 34px !important;
    width: 100% !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--d-action-main) !important;
    box-shadow: none !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

body .d-status-poster-card .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-views .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-icon {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--d-action-main) !important;
    box-shadow: none !important;
}

body .d-status-poster-card .d-status-stack-actions [data-lucide],
body .d-status-poster-card .d-status-stack-icon [data-lucide] {
    width: 24px !important;
    height: 24px !important;
    color: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 2.05 !important;
}

body .d-status-poster-card .d-status-stack-badge,
body .d-status-poster-card .d-status-stack-views .d-status-stack-badge {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--d-action-main) !important;
    box-shadow: none !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

body .d-status-poster-card .d-status-stack-badge[hidden],
body .d-status-poster-card .d-status-stack-actions [data-reaction-count][hidden],
body .d-status-poster-card .d-status-stack-save .d-status-stack-badge,
body .d-status-poster-card .d-status-stack-actions button[data-share-native] .d-status-stack-badge {
    display: none !important;
}

body .d-status-poster-card .d-status-stack-copy {
    display: none !important;
}

body .d-status-poster-card .d-status-stack-actions button:hover,
body .d-status-poster-card .d-status-stack-actions button:focus-visible,
body .d-status-poster-card .d-status-stack-actions a:hover,
body .d-status-poster-card .d-status-stack-actions a:focus-visible,
body .d-status-poster-card .d-status-stack-actions button.is-active,
body .d-status-poster-card .d-status-stack-actions button.is-shared,
body .d-status-poster-card .d-status-stack-actions a.is-active,
body .d-status-poster-card .d-status-stack-save.is-active,
body .d-status-poster-card .d-status-stack-like.is-active,
body .d-status-poster-card .d-status-stack-repost.is-active {
    color: var(--d-action-hover) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

body .d-status-poster-card .d-status-stack-actions button:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:hover .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions a:focus-visible .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-actions button.is-shared .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon {
    border: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    box-shadow: none !important;
}

body .d-status-poster-card .d-status-stack-actions button.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-save.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-like.is-active .d-status-stack-icon::after,
body .d-status-poster-card .d-status-stack-repost.is-active .d-status-stack-icon::after {
    display: none !important;
}

body .d-status-poster-card .d-status-stack-actions button[data-status-reply-open] {
    order: 1 !important;
}

body .d-status-poster-card .d-status-stack-actions form:has(.d-status-stack-repost) {
    order: 2 !important;
}

body .d-status-poster-card .d-status-stack-actions form:has(.d-status-stack-like) {
    order: 3 !important;
}

body .d-status-poster-card .d-status-stack-views {
    order: 4 !important;
}

body .d-status-poster-card .d-status-stack-actions form:has(.d-status-stack-save),
body .d-status-poster-card .d-status-stack-actions a.d-status-stack-save {
    order: 5 !important;
}

body .d-status-poster-card .d-status-stack-actions button[data-share-native] {
    order: 6 !important;
}

@media (max-width: 560px) {
    body .d-status-poster-card .d-status-stack-actions {
        padding: 14px 10px 16px !important;
    }

    body .d-status-poster-card .d-status-stack-actions button,
    body .d-status-poster-card .d-status-stack-actions a,
    body .d-status-poster-card .d-status-stack-stat,
    body .d-status-poster-card .d-status-stack-icon {
        gap: 5px !important;
        font-size: 13px !important;
    }

    body .d-status-poster-card .d-status-stack-actions [data-lucide],
    body .d-status-poster-card .d-status-stack-icon [data-lucide] {
        width: 20px !important;
        height: 20px !important;
    }

    body .d-status-poster-card .d-status-stack-badge,
    body .d-status-poster-card .d-status-stack-views .d-status-stack-badge {
        font-size: 13px !important;
    }
}

/* D Social multi-photo posts: one full Instagram-style slide at a time. */
body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-status-media-gallery.has-two,
body .d-status-poster-card .d-status-media-gallery.has-three,
body .d-status-poster-card .d-status-media-gallery.has-many {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    background: #f7f9f8 !important;
}

body .d-status-poster-card .d-status-media-gallery::-webkit-scrollbar {
    display: none !important;
}

body .d-status-poster-card .d-status-media-gallery.has-three .d-status-gallery-item:first-child,
body .d-status-poster-card .d-status-gallery-item,
body .d-status-poster-card .d-status-gallery-item:nth-child(n+5) {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f7f9f8 !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
}

body .d-status-poster-card .d-status-gallery-item img,
body .d-status-poster-card .d-status-gallery-item video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #f7f9f8 !important;
}

body .d-status-gallery-counter,
body .has-visible-d-number:not(.d-status-text-poster) .d-status-gallery-counter {
    position: absolute !important;
    top: 14px !important;
    left: auto !important;
    right: 14px !important;
    z-index: 24 !important;
    display: inline-flex !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.56) !important;
    border-radius: 999px !important;
    background: rgba(17, 24, 39, 0.64) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(12px) !important;
}

body .d-status-gallery-nav {
    position: absolute !important;
    z-index: 23 !important;
    top: 50% !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #465260 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;
    transform: translateY(-50%) !important;
    opacity: 0.92 !important;
    backdrop-filter: blur(12px) !important;
}

body .d-status-gallery-nav.previous {
    left: 12px !important;
    right: auto !important;
    order: initial !important;
}

body .d-status-gallery-nav.next {
    right: 12px !important;
    left: auto !important;
    order: initial !important;
}

body .d-status-gallery-nav:hover,
body .d-status-gallery-nav:focus-visible {
    color: #111827 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    transform: translateY(-50%) scale(1.04) !important;
}

body .d-status-gallery-nav[disabled] {
    opacity: 0.28 !important;
    pointer-events: none !important;
}

body .d-status-gallery-nav [data-lucide] {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2.8 !important;
}

body .d-status-gallery-dots {
    position: absolute !important;
    z-index: 24 !important;
    left: 50% !important;
    right: auto !important;
    bottom: 12px !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: calc(100% - 72px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 999px !important;
    background: rgba(17, 24, 39, 0.24) !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.13) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(10px) !important;
}

body .d-status-gallery-dots button {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

body .d-status-gallery-dots button.active {
    width: 18px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
}

@media (max-width: 560px) {
    body .d-status-gallery-counter,
    body .has-visible-d-number:not(.d-status-text-poster) .d-status-gallery-counter {
        top: 10px !important;
        right: 10px !important;
        min-height: 24px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    body .d-status-gallery-nav {
        width: 30px !important;
        height: 30px !important;
    }

    body .d-status-gallery-nav.previous {
        left: 8px !important;
    }

    body .d-status-gallery-nav.next {
        right: 8px !important;
    }
}

/* D Social gallery hard lock: only the active photo/video is visible. */
body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-status-media-gallery.has-two,
body .d-status-poster-card .d-status-media-gallery.has-three,
body .d-status-poster-card .d-status-media-gallery.has-many {
    overflow: hidden !important;
    scroll-snap-type: none !important;
}

body .d-status-poster-card .d-status-media-gallery .d-status-gallery-item {
    display: none !important;
    opacity: 0;
    transform: scale(0.992);
}

body .d-status-poster-card .d-status-media-gallery .d-status-gallery-item.active {
    display: flex !important;
    opacity: 1;
    transform: scale(1);
    animation: dStatusGallerySlideIn 220ms ease both;
}

body .d-status-poster-card .d-status-media-gallery .d-status-gallery-item[hidden] {
    display: none !important;
}

@keyframes dStatusGallerySlideIn {
    from {
        opacity: 0.86;
        transform: translateX(8px) scale(0.996);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* D Social professional post layout: soft white, navy text, teal actions. */
body .simple-status-shell {
    --ds-teal: #00BFA6;
    --ds-navy: #1F2A44;
    --ds-charcoal: #263238;
    --ds-slate: #6B7C93;
    --ds-bg: #FAFBFC;
    --ds-border: #E6EAF0;
    background: var(--ds-bg) !important;
}

body .simple-status-feed {
    gap: 22px !important;
    justify-items: center !important;
}

body .d-status-poster-card {
    width: min(100%, 560px) !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(31, 42, 68, 0.07) !important;
    color: var(--ds-charcoal) !important;
}

body .d-status-poster-card .simple-status-head {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 10px 14px 8px !important;
    border-bottom: 0 !important;
    background: #ffffff !important;
}

body .d-status-poster-card .d-status-avatar {
    width: 44px !important;
    height: 44px !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: none !important;
}

body .d-status-poster-card .d-status-author {
    min-width: 0 !important;
}

body .d-status-poster-card .d-status-author strong {
    gap: 5px !important;
    color: var(--ds-navy) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

body .d-status-poster-card .d-status-name-link {
    color: inherit !important;
}

body .d-status-poster-card .d-status-verified {
    width: 15px !important;
    height: 15px !important;
    color: var(--ds-teal) !important;
}

body .d-status-poster-card .d-status-author span {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 4px !important;
    color: var(--ds-slate) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

body .d-status-poster-card .d-status-author span > [data-lucide],
body .d-status-poster-card .d-status-author b {
    display: none !important;
}

body .d-status-poster-card .d-status-author span em {
    color: var(--ds-slate) !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

body .d-status-poster-card .d-status-header-number-form,
body .d-status-poster-card .simple-status-head > .d-status-header-number {
    display: none !important;
}

body .d-status-poster-card .d-status-follow-action {
    display: none !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    justify-self: end !important;
    width: auto !important;
}

body .d-status-poster-card .d-status-follow-action .primary-button,
body .d-status-poster-card .d-status-follow-action .secondary-button,
body .d-status-poster-card .d-status-own-note {
    min-height: 32px !important;
    padding: 6px 11px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--ds-navy) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

body .d-status-poster-card .d-status-follow-action .primary-button {
    border-color: color-mix(in srgb, var(--ds-teal) 40%, var(--ds-border)) !important;
    color: var(--ds-teal) !important;
}

body .d-status-poster-card .d-status-menu-button {
    grid-column: 3;
    grid-row: 1;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ds-border);
    border-radius: 50%;
    background: #ffffff;
    color: var(--ds-slate);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body .d-status-poster-card .d-status-menu-button:hover,
body .d-status-poster-card .d-status-menu-button:focus-visible {
    color: var(--ds-teal);
    border-color: color-mix(in srgb, var(--ds-teal) 45%, var(--ds-border));
    outline: none;
    transform: translateY(-1px);
}

body .d-status-poster-card .d-status-menu-button [data-lucide] {
    width: 18px;
    height: 18px;
}

body .d-status-poster-card .d-status-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

body .d-status-poster-card .d-status-highlight {
    order: 0 !important;
    align-self: flex-start !important;
    margin: 0 0 8px !important;
}

body .d-status-poster-card .d-status-media:not(.d-clip-stage),
body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-clip-stage,
body .simple-status-card.d-status-poster-card .d-clip-stage {
    order: 1 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: #f3f6f7 !important;
}

body .d-status-poster-card .d-status-media img,
body .d-status-poster-card .d-status-media video,
body .d-status-poster-card .d-status-gallery-item img,
body .d-status-poster-card .d-status-gallery-item video,
body .d-status-poster-card .d-clip-stage video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #f3f6f7 !important;
}

body .d-status-poster-card .d-status-copy-block {
    order: 2 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 1px 6px !important;
    overflow: visible !important;
    border: 0 !important;
    background: #ffffff !important;
}

body .d-status-text-poster .d-status-card-body {
    min-height: 0 !important;
    padding: 0 14px !important;
    background: #ffffff !important;
}

body .d-status-text-poster .d-status-copy-block {
    padding: 14px 1px 10px !important;
}

body .d-status-poster-card .d-status-copy-block h2 {
    margin: 0 0 5px !important;
    color: var(--ds-navy) !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
}

body .d-status-poster-card .d-status-copy-block p,
body .d-status-poster-card .d-status-more-text,
body .d-status-poster-card .d-status-more-text summary,
body .d-status-poster-card .d-status-more-text p {
    color: var(--ds-charcoal) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

body .d-status-poster-card .d-status-more-text summary b {
    color: var(--ds-teal) !important;
    font-weight: 700 !important;
}

body .d-status-poster-card .d-status-soundtrack {
    order: 3 !important;
    margin: 8px 0 !important;
}

body .d-status-poster-card .d-status-cta {
    order: 4 !important;
    align-self: flex-start !important;
    margin: 8px 0 !important;
}

body .d-status-poster-card .d-status-poster-rail,
body .d-status-poster-card .d-status-engagement-footer,
body .d-status-poster-card .d-status-reaction-summary {
    display: none !important;
}

body .d-status-poster-card .d-status-stack-actions {
    --d-action-main: var(--ds-slate);
    --d-action-hover: var(--ds-teal);
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 8px 14px 10px !important;
    border-top: 1px solid var(--ds-border) !important;
    background: #ffffff !important;
}

body .d-status-poster-card .d-status-stack-actions button,
body .d-status-poster-card .d-status-stack-actions a,
body .d-status-poster-card .d-status-stack-stat {
    min-height: 44px !important;
    color: var(--ds-slate) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

body .d-status-poster-card .d-status-stack-actions [data-lucide],
body .d-status-poster-card .d-status-stack-icon [data-lucide] {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2 !important;
}

body .d-status-poster-card .d-status-stack-badge,
body .d-status-poster-card .d-status-stack-views .d-status-stack-badge {
    color: var(--ds-slate) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

body .d-status-poster-card .d-status-stack-actions button:hover,
body .d-status-poster-card .d-status-stack-actions button:focus-visible,
body .d-status-poster-card .d-status-stack-actions a:hover,
body .d-status-poster-card .d-status-stack-actions a:focus-visible,
body .d-status-poster-card .d-status-stack-actions button.is-active,
body .d-status-poster-card .d-status-stack-actions button.is-shared,
body .d-status-poster-card .d-status-stack-actions a.is-active,
body .d-status-poster-card .d-status-stack-save.is-active,
body .d-status-poster-card .d-status-stack-like.is-active,
body .d-status-poster-card .d-status-stack-repost.is-active {
    color: var(--ds-teal) !important;
}

body .d-status-poster-card .d-status-actions {
    padding: 10px 14px 14px !important;
    border-top: 1px solid var(--ds-border) !important;
    background: #ffffff !important;
}

@media (max-width: 560px) {
    body .d-status-poster-card {
        width: 100% !important;
        border-radius: 14px !important;
    }

    body .d-status-poster-card .simple-status-head {
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 9px 10px 7px !important;
    }

    body .d-status-poster-card .d-status-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    body .d-status-poster-card .d-status-author strong {
        font-size: 16px !important;
    }

    body .d-status-poster-card .d-status-follow-action .primary-button,
    body .d-status-poster-card .d-status-follow-action .secondary-button,
    body .d-status-poster-card .d-status-own-note {
        padding-inline: 8px !important;
        font-size: 11px !important;
    }

    body .d-status-poster-card .d-status-menu-button {
        width: 32px !important;
        height: 32px !important;
    }

    body .d-status-poster-card .d-status-card-body {
        padding-inline: 10px !important;
    }

    body .d-status-poster-card .d-status-copy-block p,
    body .d-status-poster-card .d-status-more-text,
    body .d-status-poster-card .d-status-more-text summary,
    body .d-status-poster-card .d-status-more-text p {
        font-size: 15px !important;
    }
}

/* D Social replies: visible, useful, and aligned with the post. */
body .d-status-replies-panel {
    margin: 0 14px 14px !important;
    padding: 0 !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body .d-status-replies-panel summary {
    min-height: 48px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--ds-border) !important;
    color: var(--ds-navy) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
}

body .d-status-replies-panel summary span {
    color: var(--ds-navy) !important;
}

body .d-status-replies-panel summary [data-lucide] {
    color: var(--ds-teal) !important;
}

body .d-status-replies-panel summary small {
    padding: 6px 10px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 999px !important;
    background: var(--ds-bg) !important;
    color: var(--ds-slate) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

body .d-status-replies-list {
    padding: 10px 12px 0 !important;
}

body .d-status-reply {
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--ds-border) !important;
}

body .d-status-reply:last-child {
    border-bottom: 0 !important;
}

body .d-status-reply-avatar {
    background: color-mix(in srgb, var(--ds-teal) 12%, #ffffff) !important;
    color: var(--ds-navy) !important;
}

body .d-status-reply strong {
    color: var(--ds-navy) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

body .d-status-reply p {
    color: var(--ds-charcoal) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body .d-status-comment-actions,
body .d-status-comment-actions small,
body .d-status-comment-actions button,
body .d-status-comment-actions a {
    color: var(--ds-slate) !important;
}

body .d-status-comment-actions button:hover,
body .d-status-comment-actions a:hover,
body .d-status-comment-actions button.is-liked {
    color: var(--ds-teal) !important;
}

body .d-status-reply-form,
body .d-status-comment-reply-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px !important;
    border-top: 1px solid var(--ds-border) !important;
    background: var(--ds-bg) !important;
}

body .d-status-reply-input-wrap {
    min-height: 44px !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

body .d-status-reply-form textarea,
body .d-status-comment-reply-form textarea {
    min-height: 42px !important;
    padding: 11px 12px !important;
    color: var(--ds-charcoal) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

body .d-status-reply-form textarea::placeholder,
body .d-status-comment-reply-form textarea::placeholder {
    color: var(--ds-slate) !important;
}

body .d-status-reply-form textarea:focus,
body .d-status-comment-reply-form textarea:focus {
    outline: none !important;
}

body .d-status-reply-input-wrap:focus-within {
    border-color: var(--ds-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 191, 166, 0.12) !important;
}

body .d-status-reply-form .primary-button,
body .d-status-comment-reply-form .primary-button {
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ds-teal) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body .d-status-login-reply {
    margin: 12px !important;
}

/* Profile pages: polished, balanced boxes with a clearer reading flow. */
body .profile-detail-hero {
    background:
        radial-gradient(circle at 10% 12%, rgba(0, 191, 166, 0.1), transparent 28%),
        linear-gradient(135deg, #f8fbfc 0%, #ffffff 46%, #f1fbf8 100%) !important;
    border-bottom: 1px solid #e6eaf0 !important;
}

body .profile-detail-inner {
    max-width: 1180px !important;
    gap: 18px !important;
    padding-block: 10px !important;
}

body .profile-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
    gap: 22px !important;
    max-width: 1180px !important;
    padding: 24px clamp(14px, 4vw, 34px) 44px !important;
    background:
        radial-gradient(circle at 8% 8%, rgba(0, 191, 166, 0.045), transparent 26%),
        #fafbfc !important;
}

body .profile-detail-main,
body .profile-detail-side {
    gap: 16px !important;
}

body .profile-detail-layout .form-panel,
body .related-profile-section .profile-card,
body .profile-create-layout .form-panel,
body .profile-entry-box {
    border: 1px solid #e6eaf0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow:
        0 14px 34px rgba(31, 42, 68, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

body .profile-detail-layout .form-panel {
    display: grid !important;
    gap: 14px !important;
    padding: clamp(16px, 2.4vw, 22px) !important;
    animation: profileBoxLift 420ms cubic-bezier(.2, .8, .2, 1) both;
}

body .profile-detail-main > .form-panel:nth-child(1) { animation-delay: 20ms; }
body .profile-detail-main > .form-panel:nth-child(2) { animation-delay: 55ms; }
body .profile-detail-main > .form-panel:nth-child(3) { animation-delay: 90ms; }
body .profile-detail-main > .form-panel:nth-child(4) { animation-delay: 125ms; }
body .profile-detail-side > .form-panel:nth-child(1) { animation-delay: 80ms; }
body .profile-detail-side > .form-panel:nth-child(2) { animation-delay: 115ms; }
body .profile-detail-side > .form-panel:nth-child(3) { animation-delay: 150ms; }

@keyframes profileBoxLift {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

body .profile-detail-layout .section-title-row {
    align-items: start !important;
    gap: 12px !important;
    margin: 0 !important;
}

body .profile-detail-layout .section-label,
body .profile-create-layout .section-label {
    color: #00a88f !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

body .profile-detail-layout h2,
body .profile-create-layout h2 {
    color: #1f2a44 !important;
    font-size: clamp(18px, 2vw, 22px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

body .profile-detail-layout .lede,
body .profile-about-copy,
body .profile-detail-layout .card-copy {
    color: #263238 !important;
    line-height: 1.65 !important;
}

body .profile-section-edit-link {
    min-height: 32px !important;
    padding: 7px 10px !important;
    border-color: #d7f0eb !important;
    background: #f5fffc !important;
    color: #008f7d !important;
    box-shadow: none !important;
}

body .profile-section-edit-link:hover,
body .profile-section-edit-link:focus-visible {
    border-color: #00bfa6 !important;
    color: #007f70 !important;
    box-shadow: 0 10px 22px rgba(0, 191, 166, 0.12) !important;
}

body .profile-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: dense !important;
    gap: 10px !important;
}

body .profile-gallery > img,
body .profile-gallery .profile-photo-frame {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 8px !important;
    background: #f5f7f8 !important;
    box-shadow: none !important;
}

body .profile-gallery > img:first-child,
body .profile-gallery .profile-photo-frame:first-child {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
}

body .profile-gallery img,
body .profile-gallery .profile-photo-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body .profile-structured-grid,
body .profile-layout-business .profile-structured-grid,
body .profile-layout-business .profile-opportunity-cards,
body .profile-opportunity-cards {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 12px !important;
}

body .profile-structured-card,
body .profile-business-table > div,
body .profile-contact-row,
body .profile-cv-grid div,
body .profile-opportunity-card,
body .profile-focus-large span,
body .profile-fact-list span,
body .profile-link-list a,
body .profile-link-list span,
body .profile-publication-list span {
    border: 1px solid #e6eaf0 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #ffffff, #fbfdfd) !important;
    box-shadow: none !important;
}

body .profile-structured-card,
body .profile-business-table > div,
body .profile-cv-grid div,
body .profile-opportunity-card {
    padding: 15px !important;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

body .profile-structured-card:hover,
body .profile-business-table > div:hover,
body .profile-cv-grid div:hover,
body .profile-opportunity-card:hover {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, #00bfa6 32%, #e6eaf0) !important;
    box-shadow: 0 14px 28px rgba(31, 42, 68, 0.08) !important;
}

body .profile-structured-card span,
body .profile-business-table span,
body .profile-opportunity-card span {
    color: #00a88f !important;
    font-weight: 800 !important;
}

body .profile-structured-card strong,
body .profile-business-table strong,
body .profile-opportunity-card strong,
body .profile-cv-grid h3 {
    color: #1f2a44 !important;
    font-weight: 750 !important;
}

body .profile-structured-card p,
body .profile-business-table p,
body .profile-contact-row p,
body .profile-cv-grid p,
body .profile-opportunity-card small,
body .profile-detail-layout .small-note {
    color: #6b7c93 !important;
}

body .profile-business-table {
    gap: 12px !important;
}

body .profile-business-table > div {
    grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr) !important;
    align-items: start !important;
}

body .profile-cv-grid {
    gap: 12px !important;
    margin-bottom: 12px !important;
}

body .profile-focus-large,
body .profile-fact-list,
body .profile-link-list,
body .profile-publication-list {
    gap: 9px !important;
}

body .profile-focus-large span,
body .profile-fact-list span,
body .profile-link-list a,
body .profile-link-list span,
body .profile-publication-list span {
    min-height: 38px !important;
    padding: 9px 11px !important;
    color: #1f2a44 !important;
}

body .profile-focus-large [data-lucide],
body .profile-link-list [data-lucide],
body .profile-publication-list [data-lucide] {
    color: #00bfa6 !important;
}

body .profile-detail-side {
    top: 84px !important;
}

body .profile-detail-side > .form-panel {
    padding: 16px !important;
}

body .profile-score {
    gap: 8px !important;
}

body .profile-score strong {
    color: #1f2a44 !important;
    font-size: 22px !important;
}

body .profile-score span {
    color: #6b7c93 !important;
}

body .profile-d-number-card {
    align-items: center !important;
    padding: 13px !important;
    border-color: #ccefeb !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(0, 191, 166, 0.16), transparent 34%),
        linear-gradient(180deg, #f5fffc, #ffffff) !important;
}

body .profile-d-number-card > span {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    background: #00bfa6 !important;
}

body .profile-d-number-card strong {
    color: #1f2a44 !important;
}

body .profile-d-number-card em {
    color: #008f7d !important;
}

body .profile-contact-table {
    gap: 9px !important;
}

body .profile-contact-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 10px !important;
    padding: 12px !important;
}

body .profile-contact-row p {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
}

body .profile-contact-row-message,
body .profile-contact-row > .secondary-button {
    grid-column: 1 / -1 !important;
}

body .profile-contact-row-message .secondary-button {
    width: 100% !important;
    justify-content: center !important;
}

body .profile-contact-row em,
body .profile-contact-row em.is-d-number {
    align-self: start !important;
    background: #effaf8 !important;
    color: #008f7d !important;
}

body .profile-editor-empty {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    border-color: #ccefeb !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #fbfffe, #ffffff) !important;
}

body .profile-editor-empty > [data-lucide] {
    background: #e9fbf7 !important;
    color: #00a88f !important;
    border-radius: 8px !important;
}

body .profile-editor-empty > a {
    background: #00bfa6 !important;
    color: #ffffff !important;
}

body .profile-editor-strip {
    width: min(1180px, calc(100% - 28px)) !important;
    border-color: #ccefeb !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #f2fffb, #ffffff) !important;
}

body .profile-create-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
    max-width: 1180px !important;
}

body .profile-entry-box,
body .profile-section-box,
body .profile-biography-box,
body .profile-social-box,
body .profile-photo-adjuster,
body .profile-upload-box,
body .profile-info-map a {
    border-color: #e6eaf0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(31, 42, 68, 0.05) !important;
}

body .profile-section-box,
body .profile-biography-box,
body .profile-social-box,
body .profile-photo-adjuster {
    padding: 16px !important;
}

body .profile-info-map {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

body .profile-info-map i,
body .profile-box-head > span,
body .profile-section-box span [data-lucide],
body .profile-upload-box i {
    color: #00bfa6 !important;
}

@media (max-width: 980px) {
    body .profile-detail-layout,
    body .profile-create-layout {
        grid-template-columns: 1fr !important;
    }

    body .profile-detail-side,
    body .profile-create-side {
        position: static !important;
    }

    body .profile-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    body .profile-detail-inner {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }

    body .profile-detail-actions {
        min-width: 0 !important;
        width: 100% !important;
    }

    body .profile-detail-layout,
    body .profile-create-layout {
        padding-inline: 12px !important;
    }

    body .profile-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body .profile-structured-grid,
    body .profile-opportunity-cards,
    body .profile-cv-grid {
        grid-template-columns: 1fr !important;
    }

    body .profile-business-table > div,
    body .profile-contact-row,
    body .profile-editor-empty {
        grid-template-columns: 1fr !important;
    }

    body .profile-editor-empty > a {
        width: 100% !important;
    }
}

/* D Social comments: lighter, less nested, one focused reply box. */
body .d-status-replies-panel {
    overflow: hidden !important;
}

body .d-status-replies-list {
    display: grid !important;
    gap: 0 !important;
    padding: 8px 12px 2px !important;
    background: #ffffff !important;
}

body .d-status-reply {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid var(--ds-border) !important;
}

body .d-status-reply.child {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    padding-block: 7px !important;
    border-bottom: 0 !important;
}

body .d-status-reply > span,
body .d-status-reply-avatar {
    width: 36px !important;
    height: 36px !important;
    border: 1px solid color-mix(in srgb, var(--ds-teal) 24%, var(--ds-border)) !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--ds-teal) 10%, #ffffff) !important;
    color: var(--ds-navy) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body .d-status-reply.child > span,
body .d-status-reply.child .d-status-reply-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 10px !important;
}

body .d-status-reply > div,
body .d-status-reply.child > div {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .d-status-reply strong {
    display: block !important;
    margin: 0 0 3px !important;
    color: var(--ds-navy) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

body .d-status-reply p {
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--ds-charcoal) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

body .d-status-comment-actions {
    gap: 10px !important;
    margin-top: 3px !important;
}

body .d-status-comment-actions small {
    color: var(--ds-slate) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

body .d-status-comment-actions button,
body .d-status-comment-actions a {
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ds-slate) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

body .d-status-comment-actions button:hover,
body .d-status-comment-actions a:hover,
body .d-status-comment-actions button.is-liked {
    color: var(--ds-teal) !important;
    background: transparent !important;
    transform: none !important;
}

body .d-status-comment-actions [data-lucide] {
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
}

body .d-status-comment-actions b {
    min-width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

body .d-status-comment-children {
    gap: 4px !important;
    margin-top: 8px !important;
    padding-left: 10px !important;
    border-left: 2px solid color-mix(in srgb, var(--ds-teal) 18%, var(--ds-border)) !important;
}

body .d-status-comment-reply-form {
    margin-top: 8px !important;
    padding: 8px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ds-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body .d-status-reply-form,
body .d-status-comment-reply-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
}

body .d-status-comment-reply-form[hidden] {
    display: none !important;
}

body .d-status-replies-panel:has(.d-status-comment-reply-form:not([hidden])) > .d-status-reply-form {
    display: none !important;
}

body .d-status-reply-form {
    padding: 10px 12px !important;
}

body .d-status-reply-input-wrap {
    min-height: 40px !important;
    border-radius: 11px !important;
}

body .d-status-reply-form textarea,
body .d-status-comment-reply-form textarea {
    min-height: 38px !important;
    max-height: 92px !important;
    padding: 9px 42px 9px 11px !important;
    font-size: 14px !important;
    resize: vertical !important;
}

body .d-status-reply-form .primary-button,
body .d-status-comment-reply-form .primary-button {
    min-height: 40px !important;
    padding: 8px 13px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body .d-status-reply-emoji-picker {
    right: 6px !important;
    bottom: 6px !important;
}

body .d-status-reply-emoji-picker .d-status-emoji-toggle {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    color: var(--ds-teal) !important;
    box-shadow: none !important;
}

/* D Social follower approvals: put pending requests where owners can see them. */
body .d-status-approval-inbox {
    display: grid !important;
    gap: 14px !important;
    padding: 16px !important;
    border: 1px solid color-mix(in srgb, var(--ds-teal, #00BFA6) 24%, #e6eaf0) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(0, 191, 166, 0.08), rgba(255, 255, 255, 0.96) 46%),
        #ffffff !important;
    box-shadow: 0 18px 40px rgba(31, 42, 68, 0.08) !important;
}

body .d-status-approval-head {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
}

body .d-status-approval-head > span {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: var(--ds-teal, #00BFA6) !important;
    box-shadow: 0 12px 24px rgba(0, 191, 166, 0.13) !important;
}

body .d-status-approval-head [data-lucide] {
    width: 21px !important;
    height: 21px !important;
}

body .d-status-approval-head h2 {
    margin: 3px 0 2px !important;
    color: var(--ds-navy, #1F2A44) !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
}

body .d-status-approval-head p {
    margin: 0 !important;
    color: var(--ds-slate, #6B7C93) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

body .d-status-approval-list {
    display: grid !important;
    gap: 10px !important;
}

body .d-status-approval-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 11px !important;
    align-items: center !important;
    padding: 11px !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 10px 24px rgba(31, 42, 68, 0.05) !important;
    animation: dStatusApprovalIn 260ms ease both !important;
}

body .d-status-approval-card strong {
    display: block !important;
    color: var(--ds-navy, #1F2A44) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

body .d-status-approval-card small {
    display: inline-flex !important;
    gap: 5px !important;
    align-items: center !important;
    margin-top: 3px !important;
    color: var(--ds-slate, #6B7C93) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body .d-status-approval-card small [data-lucide] {
    width: 13px !important;
    height: 13px !important;
}

body .d-status-approval-card .d-status-request-actions {
    display: inline-flex !important;
    gap: 7px !important;
    align-items: center !important;
}

body .d-status-approval-card .d-status-request-actions form {
    margin: 0 !important;
}

body .d-status-approval-card .primary-button,
body .d-status-approval-card .secondary-button {
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

@keyframes dStatusApprovalIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

@media (max-width: 680px) {
    body .d-status-approval-card {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    body .d-status-approval-card .d-status-request-actions {
        grid-column: 1 / -1 !important;
        justify-content: stretch !important;
    }

    body .d-status-approval-card .d-status-request-actions form,
    body .d-status-approval-card .d-status-request-actions button {
        width: 100% !important;
    }
}

/* D Social header actions: visible follow button and working post menu. */
body .d-status-poster-card .simple-status-head {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
}

body .d-status-poster-card .d-status-head-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    position: relative !important;
    min-width: max-content !important;
}

body .d-status-poster-card .d-status-follow-action {
    display: inline-flex !important;
    position: static !important;
    width: auto !important;
    justify-self: auto !important;
    align-items: center !important;
}

body .d-status-poster-card .d-status-follow-action form {
    margin: 0 !important;
}

body .d-status-poster-card .d-status-follow-action .primary-button,
body .d-status-poster-card .d-status-follow-action .secondary-button,
body .d-status-poster-card .d-status-own-note {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body .d-status-poster-card .d-status-follow-action [data-lucide] {
    width: 15px !important;
    height: 15px !important;
}

body .d-status-poster-card .d-status-menu-wrap {
    position: relative !important;
    display: inline-flex !important;
}

body .d-status-poster-card .d-status-menu-button {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-color: #dfe7ed !important;
    color: #516071 !important;
    background: #ffffff !important;
    box-shadow: 0 9px 22px rgba(31, 42, 68, 0.06) !important;
}

body .d-status-poster-card .d-status-menu-button[aria-expanded="true"] {
    color: var(--ds-teal) !important;
    border-color: color-mix(in srgb, var(--ds-teal) 45%, var(--ds-border)) !important;
    box-shadow: 0 10px 24px rgba(0, 191, 166, 0.13) !important;
}

body .d-status-poster-card .d-status-menu {
    position: absolute !important;
    z-index: 80 !important;
    top: calc(100% + 9px) !important;
    right: 0 !important;
    width: 190px !important;
    padding: 7px !important;
    border: 1px solid #dfe7ed !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 20px 45px rgba(31, 42, 68, 0.16) !important;
    backdrop-filter: blur(16px) !important;
    transform-origin: 92% top !important;
    animation: dStatusMenuIn 150ms ease both !important;
}

body .d-status-poster-card .d-status-menu[hidden] {
    display: none !important;
}

body .d-status-poster-card .d-status-menu form {
    margin: 0 !important;
}

body .d-status-poster-card .d-status-menu button {
    display: flex !important;
    width: 100% !important;
    min-height: 38px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--ds-navy) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-align: left !important;
    cursor: pointer !important;
}

body .d-status-poster-card .d-status-menu button:hover,
body .d-status-poster-card .d-status-menu button:focus-visible {
    background: #f3f8f7 !important;
    color: var(--ds-teal) !important;
    outline: none !important;
}

body .d-status-poster-card .d-status-menu button [data-lucide] {
    width: 17px !important;
    height: 17px !important;
}

body .d-status-poster-card .d-status-menu button[type="submit"] {
    color: #b42318 !important;
}

@keyframes dStatusMenuIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.97);
    }

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

/* Dekeree home: Linktree-style service hub. */
body .dekeree-link-home {
    min-height: calc(100vh - 86px);
    padding: clamp(18px, 3vw, 34px);
    background:
        radial-gradient(circle at 12% 16%, rgba(0, 191, 166, 0.18), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(45, 156, 219, 0.14), transparent 28%),
        linear-gradient(135deg, #f6faf9 0%, #ffffff 45%, #f1f7f6 100%);
    color: #14221f;
}

body .dekeree-link-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 560px) minmax(280px, 420px);
    gap: clamp(22px, 4vw, 54px);
    align-items: center;
    justify-content: center;
    width: min(1180px, 100%);
    min-height: calc(100vh - 150px);
    margin: 0 auto;
}

body .dekeree-link-bg {
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(2px);
    opacity: 0.7;
}

body .dekeree-link-bg.one {
    top: 7%;
    left: 0;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(0, 191, 166, 0.22), transparent 66%);
    animation: dekereeLinkFloat 7s ease-in-out infinite;
}

body .dekeree-link-bg.two {
    right: 4%;
    bottom: 9%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(31, 42, 68, 0.12), transparent 68%);
    animation: dekereeLinkFloat 8.4s ease-in-out infinite reverse;
}

body .dekeree-link-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    width: 100%;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid rgba(198, 218, 213, 0.78);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 30px 80px rgba(24, 44, 39, 0.14);
    backdrop-filter: blur(22px);
    animation: dekereeLinkRise 620ms cubic-bezier(.2, .84, .22, 1) both;
}

body .dekeree-link-profile {
    display: grid;
    justify-items: center;
    text-align: center;
}

body .dekeree-link-logo {
    display: grid;
    width: 92px;
    height: 92px;
    margin-bottom: 12px;
    place-items: center;
    border: 1px solid rgba(0, 191, 166, 0.22);
    border-radius: 28px;
    background: linear-gradient(145deg, #ffffff, #eefaf6);
    box-shadow: 0 18px 42px rgba(0, 121, 93, 0.15);
}

body .dekeree-link-logo img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

body .dekeree-link-profile .kicker {
    margin: 0 0 4px;
    color: #017e69;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body .dekeree-link-profile h1 {
    margin: 0;
    color: #101b17;
    font-size: clamp(38px, 7vw, 74px);
    font-weight: 900;
    line-height: .95;
}

body .dekeree-link-profile .lede {
    max-width: 470px;
    margin: 12px 0 0;
    color: #53645f;
    font-size: 16px;
    line-height: 1.55;
}

body .dekeree-link-primary-actions,
body .dekeree-link-list {
    display: grid;
    gap: 10px;
}

body .dekeree-link-main-action,
body .dekeree-link-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 11px 13px;
    border: 1px solid rgba(194, 213, 208, 0.9);
    border-radius: 18px;
    background: #ffffff;
    color: #15231f;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(31, 42, 68, 0.07);
    transform: translateY(0);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

body .dekeree-link-main-action {
    min-height: 66px;
    border-color: rgba(0, 191, 166, 0.4);
    background: linear-gradient(135deg, #08795f, #00bfa6);
    color: #ffffff;
}

body .dekeree-link-main-action.secondary {
    border-color: rgba(31, 42, 68, 0.12);
    background: #10221e;
}

body .dekeree-link-main-action:hover,
body .dekeree-link-main-action:focus-visible,
body .dekeree-link-item:hover,
body .dekeree-link-item:focus-visible {
    border-color: rgba(0, 191, 166, 0.55);
    box-shadow: 0 18px 38px rgba(31, 42, 68, 0.11);
    outline: none;
    transform: translateY(-2px);
}

body .dekeree-link-main-action > span,
body .dekeree-link-item-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
}

body .dekeree-link-item-icon {
    background: #effaf6;
    color: #08795f;
}

body .dekeree-link-main-action [data-lucide],
body .dekeree-link-item [data-lucide] {
    width: 20px;
    height: 20px;
}

body .dekeree-link-main-action strong,
body .dekeree-link-item strong {
    font-size: 16px;
    font-weight: 850;
    line-height: 1.15;
}

body .dekeree-link-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body .dekeree-link-stats span {
    display: grid;
    min-height: 66px;
    place-items: center;
    padding: 10px;
    border: 1px solid #e3eeea;
    border-radius: 16px;
    background: #fbfefd;
    text-align: center;
}

body .dekeree-link-stats strong {
    color: #0b7c65;
    font-size: 22px;
    line-height: 1;
}

body .dekeree-link-stats small,
body .dekeree-link-item small {
    color: #65746f;
    font-size: 12px;
    font-weight: 700;
}

body .dekeree-link-item {
    min-height: 72px;
    animation: dekereeLinkItemIn 480ms ease both;
    animation-delay: calc(var(--link-index) * 54ms);
}

body .dekeree-link-item-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body .dekeree-link-item-copy em {
    color: #07957b;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body .dekeree-link-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

body .dekeree-link-mini a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid #dfeae6;
    border-radius: 999px;
    background: #ffffff;
    color: #24332f;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

body .dekeree-link-mini [data-lucide] {
    width: 15px;
    height: 15px;
    color: #07957b;
}

body .dekeree-link-preview {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    animation: dekereeLinkRise 720ms cubic-bezier(.2, .84, .22, 1) both 90ms;
}

body .dekeree-link-phone {
    width: min(360px, 100%);
    min-height: 610px;
    padding: 18px;
    border: 1px solid rgba(18, 34, 29, 0.14);
    border-radius: 42px;
    background: #111d19;
    box-shadow: 0 34px 80px rgba(16, 34, 30, 0.24);
    transform: rotate(-2deg);
    animation: dekereeLinkPhone 5.6s ease-in-out infinite;
}

body .dekeree-link-phone-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 42px;
    color: #ffffff;
}

body .dekeree-link-phone-top span {
    width: 62px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

body .dekeree-link-phone-screen {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 520px;
    padding: 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 191, 166, 0.2), transparent 38%),
        #f7fbfa;
}

body .dekeree-link-number {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #cfe7df;
    border-radius: 999px;
    background: #ffffff;
    color: #08795f;
    font-size: 13px;
    font-weight: 900;
}

body .dekeree-link-message {
    display: grid;
    gap: 4px;
    width: 86%;
    padding: 13px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(31, 42, 68, 0.08);
    animation: dekereeLinkMessage 4.5s ease-in-out infinite;
}

body .dekeree-link-message.outgoing {
    justify-self: end;
    background: #08795f;
    color: #ffffff;
    animation-delay: .7s;
}

body .dekeree-link-message small {
    color: inherit;
    opacity: .72;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

body .dekeree-link-message p {
    margin: 0;
    font-weight: 800;
    line-height: 1.35;
}

body .dekeree-link-service-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}

body .dekeree-link-service-row span {
    display: grid;
    min-height: 72px;
    place-items: center;
    gap: 5px;
    padding: 8px;
    border: 1px solid #dbe9e5;
    border-radius: 18px;
    background: #ffffff;
    color: #1f2a44;
    font-size: 11px;
    font-weight: 900;
}

body .dekeree-link-service-row [data-lucide] {
    color: #07957b;
}

@keyframes dekereeLinkRise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }

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

@keyframes dekereeLinkItemIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes dekereeLinkFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(12px, -14px, 0);
    }
}

@keyframes dekereeLinkPhone {
    0%, 100% {
        transform: rotate(-2deg) translateY(0);
    }

    50% {
        transform: rotate(1deg) translateY(-10px);
    }
}

@keyframes dekereeLinkMessage {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@media (max-width: 960px) {
    body .dekeree-link-shell {
        grid-template-columns: minmax(0, 620px);
        min-height: auto;
    }

    body .dekeree-link-preview {
        order: -1;
    }

    body .dekeree-link-phone {
        min-height: auto;
        transform: none;
    }

    body .dekeree-link-phone-screen {
        min-height: 360px;
    }
}

@media (max-width: 600px) {
    body .dekeree-link-home {
        padding: 12px 10px 34px;
    }

    body .dekeree-link-card {
        border-radius: 22px;
        padding: 16px;
    }

    body .dekeree-link-logo {
        width: 76px;
        height: 76px;
        border-radius: 22px;
    }

    body .dekeree-link-logo img {
        width: 58px;
        height: 58px;
    }

    body .dekeree-link-main-action,
    body .dekeree-link-item {
        min-height: 64px;
        border-radius: 16px;
    }

    body .dekeree-link-item small {
        display: none;
    }

    body .dekeree-link-stats {
        grid-template-columns: 1fr;
    }

    body .dekeree-link-phone {
        width: min(310px, 100%);
        padding: 12px;
        border-radius: 34px;
    }

    body .dekeree-link-phone-screen {
        min-height: 320px;
        border-radius: 24px;
    }
}

/* Dekeree home showcase: floating service cards inspired by the reference motion. */
body .dekeree-link-home {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.07), transparent 24%),
        radial-gradient(circle at 80% 8%, rgba(0, 191, 166, 0.18), transparent 24%),
        linear-gradient(135deg, #730019 0%, #84001f 48%, #5d0017 100%) !important;
}

body .dekeree-link-shell {
    grid-template-columns: minmax(320px, 520px) minmax(420px, 650px) !important;
}

body .dekeree-link-card {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.46) !important;
    box-shadow: 0 32px 90px rgba(29, 0, 10, 0.28) !important;
}

body .dekeree-link-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(0, 191, 166, 0.2), rgba(255, 255, 255, 0.2));
}

body .dekeree-link-preview.dekeree-card-cloud {
    min-height: 650px;
    width: min(650px, 100%);
    align-items: center;
    justify-items: center;
}

body .dekeree-cloud-stack {
    position: relative;
    width: min(650px, 100%);
    min-height: 620px;
}

body .dekeree-cloud-card,
body .dekeree-cloud-handle {
    position: absolute;
    display: grid;
    text-decoration: none;
    color: #ffffff;
    box-shadow: 0 28px 70px rgba(31, 0, 10, 0.32);
    transform: translate3d(0, 0, 0);
    animation: dekereeCloudFloat 6s ease-in-out infinite;
    animation-delay: calc(var(--cloud-index, 0) * -520ms);
}

body .dekeree-cloud-card {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    width: 330px;
    min-height: 190px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 34px;
    overflow: hidden;
}

body .dekeree-cloud-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.22), transparent 24%);
    opacity: .9;
}

body .dekeree-cloud-card > * {
    position: relative;
    z-index: 1;
}

body .dekeree-cloud-card.on {
    top: 48px;
    left: 150px;
    z-index: 5;
    background: linear-gradient(135deg, #f10537, #c9052c);
}

body .dekeree-cloud-card.social {
    top: 112px;
    right: 28px;
    z-index: 4;
    background: linear-gradient(135deg, #ef0072, #b400cf);
}

body .dekeree-cloud-card.market {
    top: 270px;
    left: 32px;
    z-index: 6;
    background: linear-gradient(135deg, #d9ab31, #9a7630);
}

body .dekeree-cloud-card.profile {
    top: 270px;
    right: 0;
    z-index: 3;
    background: linear-gradient(135deg, #687574, #344041);
}

body .dekeree-cloud-card.opps {
    bottom: 72px;
    left: 132px;
    z-index: 2;
    background: linear-gradient(135deg, #b600e8, #7f19d5);
}

body .dekeree-cloud-card.cv {
    bottom: 28px;
    right: 78px;
    z-index: 7;
    background: linear-gradient(135deg, #f7f2ed, #d8c7bd);
    color: #15231f;
}

body .dekeree-cloud-avatar {
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border-radius: 50%;
    background: #cfff1b;
    color: #111b17;
    box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.16);
}

body .dekeree-cloud-avatar [data-lucide] {
    width: 32px;
    height: 32px;
}

body .dekeree-cloud-copy {
    display: grid;
    gap: 7px;
    min-width: 0;
}

body .dekeree-cloud-copy small {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: .78;
    text-transform: uppercase;
}

body .dekeree-cloud-copy strong {
    max-width: 190px;
    color: inherit;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.02;
}

body .dekeree-cloud-copy em {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

body .dekeree-cloud-card.cv .dekeree-cloud-copy em {
    background: rgba(8, 121, 95, 0.12);
    color: #08795f;
}

body .dekeree-cloud-card > b {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: currentColor;
}

body .dekeree-cloud-card > b [data-lucide] {
    width: 27px;
    height: 27px;
}

body .dekeree-cloud-card:not(.cv) > b {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
}

body .dekeree-cloud-handle {
    z-index: 10;
    top: 232px;
    left: 50%;
    grid-template-columns: 34px auto;
    gap: 11px;
    align-items: center;
    min-height: 70px;
    padding: 12px 24px;
    border-radius: 999px;
    background: #ffffff;
    color: #101820;
    transform: translateX(-50%);
    animation: dekereeCloudHandle 4.8s ease-in-out infinite;
}

body .dekeree-cloud-handle img {
    width: 34px;
    height: 34px;
}

body .dekeree-cloud-handle strong {
    font-size: 22px;
    font-weight: 850;
}

@keyframes dekereeCloudFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -12px, 0) rotate(.7deg);
    }
}

@keyframes dekereeCloudHandle {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@media (max-width: 1100px) {
    body .dekeree-link-shell {
        grid-template-columns: minmax(0, 620px) !important;
    }

    body .dekeree-link-preview.dekeree-card-cloud {
        order: -1;
        min-height: 520px;
    }

    body .dekeree-cloud-stack {
        min-height: 500px;
        transform: scale(.82);
        transform-origin: center;
    }
}

@media (max-width: 700px) {
    body .dekeree-link-preview.dekeree-card-cloud {
        min-height: 390px;
        overflow: hidden;
    }

    body .dekeree-cloud-stack {
        min-height: 500px;
        width: 650px;
        max-width: none;
        transform: scale(.58);
    }

    body .dekeree-link-profile h1 {
        font-size: clamp(42px, 14vw, 64px) !important;
    }
}

/* Online Number: keep side boxes compact with per-list search and scroll. */
body .connect-workspace {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(270px, 320px) !important;
    gap: 14px !important;
    max-width: 1500px !important;
}

body .connect-numbers-column,
body .connect-saved-column {
    max-height: calc(100vh - 104px) !important;
    overflow: hidden !important;
    gap: 10px !important;
}

body .connect-number-card,
body .connect-dekeree-links,
body .connect-meeting-mini-panel,
body .connect-directory-panel,
body .connect-phonebook-panel,
body .connect-group-section {
    min-height: 0 !important;
    border: 1px solid #dfe8e4 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 10px 26px rgba(23, 33, 28, 0.045) !important;
}

body .connect-number-card,
body .connect-dekeree-links,
body .connect-meeting-mini-panel,
body .connect-directory-panel,
body .connect-phonebook-panel {
    padding: 10px !important;
}

body .connect-group-section {
    padding: 10px !important;
    margin-top: 0 !important;
}

body .connect-number-card {
    max-height: 112px !important;
}

body .connect-dekeree-links {
    max-height: 230px !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
}

body .connect-meeting-mini-panel {
    max-height: 260px !important;
    overflow: hidden !important;
}

body .connect-meeting-mini-list {
    max-height: 172px !important;
    overflow: auto !important;
    padding-right: 2px !important;
    scrollbar-width: thin !important;
}

body .connect-directory-panel {
    display: grid !important;
    max-height: 360px !important;
    overflow: hidden !important;
}

body .connect-directory-panel .connect-number-list {
    max-height: 218px !important;
    overflow: auto !important;
    padding-right: 2px !important;
    scrollbar-width: thin !important;
}

body .connect-phonebook-panel {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(120px, .85fr) minmax(190px, 1fr) !important;
    gap: 10px !important;
    height: calc(100vh - 112px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body .connect-group-section {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
}

body .connect-contact-list,
body .connect-group-list {
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 2px !important;
    scrollbar-width: thin !important;
}

body .connect-contact-list {
    max-height: none !important;
}

body .connect-group-list {
    max-height: none !important;
}

body .connect-panel-search {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 11px !important;
    background: #ffffff !important;
}

body .connect-panel-search input {
    min-height: 40px !important;
    font-size: 13px !important;
}

body .connect-quick-save {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) auto !important;
    gap: 7px !important;
}

body .connect-quick-save .field,
body .connect-quick-save .secondary-button {
    min-height: 38px !important;
    font-size: 12px !important;
}

body .connect-hub-grid {
    gap: 7px !important;
}

body .connect-hub-grid a {
    min-height: 64px !important;
    padding: 10px !important;
    border-radius: 10px !important;
}

body .connect-contact-list .hs-number-plate.contact,
body .connect-group-item,
body .hs-number-plate.search-result {
    min-height: 60px !important;
    padding: 8px !important;
}

body .connect-contact-list .hs-number-plate.contact .hs-number-text small,
body .connect-group-copy strong {
    font-size: 13px !important;
}

body .connect-contact-list .hs-number-plate.contact .hs-number-text strong,
body .connect-group-copy small,
body .connect-group-copy em {
    font-size: 10.5px !important;
}

body [data-connect-filter-item][hidden] {
    display: none !important;
}

body .connect-contact-list::-webkit-scrollbar,
body .connect-group-list::-webkit-scrollbar,
body .connect-number-list::-webkit-scrollbar,
body .connect-meeting-mini-list::-webkit-scrollbar,
body .connect-dekeree-links::-webkit-scrollbar {
    width: 8px;
}

body .connect-contact-list::-webkit-scrollbar-thumb,
body .connect-group-list::-webkit-scrollbar-thumb,
body .connect-number-list::-webkit-scrollbar-thumb,
body .connect-meeting-mini-list::-webkit-scrollbar-thumb,
body .connect-dekeree-links::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #9fb1aa;
    background-clip: content-box;
}

@media (max-width: 1180px) {
    body .connect-workspace {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .connect-numbers-column,
    body .connect-saved-column,
    body .connect-phonebook-panel {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body .connect-contact-list,
    body .connect-group-list,
    body .connect-directory-panel .connect-number-list,
    body .connect-meeting-mini-list {
        max-height: 360px !important;
    }
}

@media (max-width: 620px) {
    body .connect-quick-save {
        grid-template-columns: 1fr !important;
    }
}

/* Online Number: WhatsApp-style chat shell. */
body .connect-workspace {
    display: grid !important;
    grid-template-columns: 74px minmax(330px, 430px) minmax(0, 1fr) !important;
    grid-template-areas: "rail chats conversation" !important;
    gap: 0 !important;
    max-width: min(1780px, calc(100vw - 24px)) !important;
    min-height: calc(100vh - 92px) !important;
    margin: 12px auto !important;
    border: 1px solid #dfe7e2 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 60px rgba(23, 33, 28, 0.08) !important;
    overflow: hidden !important;
}

body .connect-numbers-column {
    grid-area: rail !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    height: calc(100vh - 92px) !important;
    max-height: none !important;
    padding: 12px 8px !important;
    border-right: 1px solid #e5ebe7 !important;
    background: #f7f9f8 !important;
    overflow: hidden auto !important;
}

body .connect-saved-column {
    grid-area: chats !important;
    height: calc(100vh - 92px) !important;
    max-height: none !important;
    padding: 18px 14px !important;
    border-right: 1px solid #e5ebe7 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

body .connect-conversation-panel {
    grid-area: conversation !important;
    height: calc(100vh - 92px) !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f6faf8 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body .connect-number-card,
body .connect-dekeree-links,
body .connect-meeting-mini-panel,
body .connect-directory-panel {
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body .connect-numbers-column .section-label,
body .connect-numbers-column .section-title-row,
body .connect-numbers-column .connect-meeting-mini-list,
body .connect-numbers-column .connect-number-search,
body .connect-numbers-column .connect-number-list {
    display: none !important;
}

body .connect-number-card {
    order: 1 !important;
    max-height: none !important;
}

body .connect-number-card .hs-number-plate.own {
    display: flex !important;
    justify-content: center !important;
    min-height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body .connect-number-card .hs-number-text,
body .connect-number-card .connect-own-actions {
    display: none !important;
}

body .connect-number-card .hs-number-orb {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    box-shadow: 0 10px 26px rgba(15, 143, 95, 0.16) !important;
}

body .connect-dekeree-links {
    order: 2 !important;
    overflow: visible !important;
}

body .connect-hub-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

body .connect-hub-grid a,
body .connect-meeting-mini-panel .connect-mini-icon-link,
body .connect-directory-panel::before {
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #5f6f69 !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

body .connect-hub-grid a:hover,
body .connect-meeting-mini-panel .connect-mini-icon-link:hover {
    background: #edf3f0 !important;
    color: #0f8f5f !important;
    transform: translateY(-1px) !important;
}

body .connect-hub-grid a span,
body .connect-meeting-mini-panel .connect-mini-icon-link span {
    display: none !important;
}

body .connect-hub-grid a svg,
body .connect-meeting-mini-panel .connect-mini-icon-link svg {
    width: 24px !important;
    height: 24px !important;
}

body .connect-meeting-mini-panel {
    order: 3 !important;
    display: grid !important;
    justify-content: center !important;
    max-height: none !important;
}

body .connect-meeting-mini-panel .compact-title-row {
    display: flex !important;
}

body .connect-meeting-mini-panel .compact-title-row > div {
    display: none !important;
}

body .connect-directory-panel {
    order: 4 !important;
    flex: 1 1 auto !important;
}

body .connect-directory-panel::before {
    content: "" !important;
    margin-inline: auto !important;
    background: transparent !important;
}

body .connect-phonebook-panel {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) minmax(0, .72fr) !important;
    gap: 12px !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .connect-phonebook-panel > .section-title-row:first-child {
    align-items: center !important;
    min-height: 46px !important;
}

body .connect-phonebook-panel > .section-title-row:first-child .section-label {
    display: none !important;
}

body .connect-phonebook-panel > .section-title-row:first-child h2 {
    font-size: 2rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body .connect-phonebook-panel > .section-title-row:first-child h2::before {
    content: "Chats" !important;
}

body .connect-phonebook-panel > .section-title-row:first-child h2 {
    font-size: 0 !important;
}

body .connect-phonebook-panel > .section-title-row:first-child h2::before {
    font-size: 2rem !important;
}

body .connect-quick-save {
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) auto !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: #f5f6f5 !important;
}

body .connect-quick-save .field {
    min-height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0.95rem !important;
}

body .connect-quick-save .secondary-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
}

body .connect-quick-save .secondary-button span,
body .connect-quick-save .secondary-button span {
    font-size: 0 !important;
}

body .connect-panel-search {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f5f6f5 !important;
}

body .connect-panel-search input {
    min-height: 48px !important;
    font-size: 1rem !important;
}

body .connect-contact-list,
body .connect-group-list {
    display: grid !important;
    gap: 2px !important;
    overflow: auto !important;
    padding: 0 3px 0 0 !important;
    scrollbar-width: thin !important;
}

body .connect-contact-list .connect-contact-item,
body .connect-group-list .connect-group-item {
    border: 0 !important;
    border-radius: 0 !important;
}

body .connect-contact-list .hs-number-plate.contact,
body .connect-group-item {
    min-height: 72px !important;
    padding: 9px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1ef !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .connect-contact-item.active .hs-number-plate.contact,
body .connect-group-item.active {
    border-radius: 12px !important;
    background: #eaf7ef !important;
}

body .connect-contact-list .hs-number-orb,
body .connect-group-orb {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
}

body .connect-contact-list .hs-number-plate.contact .hs-number-text small,
body .connect-group-copy strong {
    max-width: 210px !important;
    color: #111b21 !important;
    font-size: 1.02rem !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body .connect-contact-list .hs-number-plate.contact .hs-number-text strong,
body .connect-group-copy small {
    color: #667781 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body .connect-contact-list .hs-number-plate.contact .hs-number-text em,
body .connect-group-copy em {
    color: #0f8f5f !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
}

body .connect-unread-badge {
    display: grid !important;
    place-items: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #25d366 !important;
    color: #ffffff !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
}

body .connect-group-section {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #eef2ef !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .connect-group-section .section-label {
    display: none !important;
}

body .connect-group-section h2 {
    font-size: 1.05rem !important;
    text-transform: none !important;
}

body .connect-group-create {
    border: 0 !important;
    border-radius: 12px !important;
    background: #f8faf9 !important;
}

body .connect-conversation-panel .connect-chat-head {
    min-height: 76px !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid #dfe7e2 !important;
    border-radius: 0 !important;
    background: #f0f8f4 !important;
}

body .connect-conversation-panel .circle-chat {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    height: calc(100% - 76px) !important;
    min-height: 0 !important;
}

body .connect-conversation-panel .circle-message-list {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 22px 28px !important;
    background:
        radial-gradient(circle at 35% 15%, rgba(37, 211, 102, 0.06), transparent 30%),
        linear-gradient(135deg, #fbfdfc, #f8fbfa) !important;
}

body .connect-conversation-panel .circle-chat-form {
    border-top: 1px solid #e2e9e5 !important;
    background: #ffffff !important;
}

body .connect-conversation-empty {
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fbfcfb !important;
}

@media (max-width: 1180px) {
    body .connect-workspace {
        grid-template-columns: 66px minmax(290px, 380px) minmax(0, 1fr) !important;
        grid-template-areas: "rail chats conversation" !important;
    }
}

@media (max-width: 900px) {
    body .connect-workspace {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        grid-template-areas:
            "rail chats"
            "rail conversation" !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    body .connect-numbers-column,
    body .connect-saved-column,
    body .connect-conversation-panel {
        height: auto !important;
        max-height: none !important;
    }

    body .connect-conversation-panel {
        min-height: 68vh !important;
        border-top: 1px solid #e5ebe7 !important;
    }
}

@media (max-width: 620px) {
    body .connect-workspace {
        display: block !important;
        max-width: calc(100vw - 12px) !important;
        border-radius: 16px !important;
    }

    body .connect-numbers-column {
        display: grid !important;
        grid-template-columns: repeat(5, 48px) !important;
        justify-content: center !important;
        height: auto !important;
        padding: 10px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e5ebe7 !important;
    }

    body .connect-saved-column {
        height: auto !important;
        padding: 14px !important;
        border-right: 0 !important;
    }

    body .connect-phonebook-panel {
        height: auto !important;
        min-height: 520px !important;
    }

    body .connect-conversation-panel {
        height: auto !important;
        min-height: 76vh !important;
    }
}

/* D Social header: keep author names and time on one clean line. */
body .d-status-poster-card .d-status-author {
    min-width: 0 !important;
    max-width: 100% !important;
}

body .d-status-poster-card .d-status-author strong {
    display: flex !important;
    max-width: min(100%, 300px) !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

body .d-status-poster-card .d-status-name-link,
body .d-status-poster-card .d-status-author strong > button,
body .d-status-poster-card .d-status-author strong > span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body .d-status-poster-card .d-status-verified {
    flex: 0 0 auto !important;
}

body .d-status-poster-card .d-status-author span {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

body .d-status-poster-card .d-status-author span em {
    display: inline-block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    body .d-status-poster-card .d-status-author strong {
        max-width: clamp(132px, 34vw, 220px) !important;
    }
}

@media (max-width: 430px) {
    body .d-status-poster-card .d-status-author strong {
        max-width: clamp(100px, 30vw, 160px) !important;
    }
}

@media (max-width: 640px) {
    body .d-status-poster-card .d-status-follow-action .primary-button,
    body .d-status-poster-card .d-status-follow-action .secondary-button,
    body .d-status-poster-card .d-status-own-note {
        max-width: 112px !important;
        padding-inline: 10px !important;
    }
}

@media (max-width: 430px) {
    body .d-status-poster-card .simple-status-head {
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

    body .d-status-poster-card .d-status-follow-action .primary-button span,
    body .d-status-poster-card .d-status-follow-action .secondary-button span {
        display: none !important;
    }

    body .d-status-poster-card .d-status-follow-action .primary-button,
    body .d-status-poster-card .d-status-follow-action .secondary-button,
    body .d-status-poster-card .d-status-own-note {
        width: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
    }

    body .d-status-poster-card .d-status-own-note {
        font-size: 0 !important;
    }
}

body .d-status-no-replies {
    min-height: 38px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ds-slate) !important;
    font-weight: 600 !important;
}

/* Online Number: compact disappearing message control. */
body .compact-disappearing-panel {
    position: relative !important;
    display: block !important;
    justify-self: end !important;
    width: fit-content !important;
    max-width: calc(100% - 28px) !important;
    margin: 8px 16px 8px auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    z-index: 8 !important;
}

body .compact-disappearing-panel summary {
    display: inline-grid !important;
    grid-template-columns: auto minmax(0, auto) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 5px 10px 5px 6px !important;
    border: 1px solid rgba(15, 143, 95, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #14352a !important;
    box-shadow: 0 12px 28px rgba(15, 40, 30, 0.08) !important;
    cursor: pointer !important;
    list-style: none !important;
    backdrop-filter: blur(12px) !important;
}

body .compact-disappearing-panel summary::-webkit-details-marker {
    display: none !important;
}

body .compact-disappearing-panel .circle-disappearing-icon {
    width: 28px !important;
    height: 28px !important;
    background: #ecfdf5 !important;
    color: #0f8f5f !important;
}

body .compact-disappearing-panel .circle-disappearing-icon [data-lucide] {
    width: 15px !important;
    height: 15px !important;
}

body .compact-disappearing-panel .circle-disappearing-copy {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 0 !important;
}

body .compact-disappearing-panel .circle-disappearing-copy strong {
    color: #17221d !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

body .compact-disappearing-panel .circle-disappearing-copy small {
    color: #0f8f5f !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

body .compact-disappearing-panel summary > [data-lucide="chevron-down"] {
    width: 14px !important;
    height: 14px !important;
    color: #64748b !important;
    transition: transform 0.18s ease !important;
}

body .compact-disappearing-panel[open] summary > [data-lucide="chevron-down"] {
    transform: rotate(180deg) !important;
}

body .compact-disappearing-panel .circle-disappearing-form {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    display: grid !important;
    grid-template-columns: minmax(160px, 1fr) auto !important;
    gap: 8px !important;
    align-items: end !important;
    width: min(330px, calc(100vw - 32px)) !important;
    padding: 12px !important;
    border: 1px solid rgba(15, 143, 95, 0.18) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 50px rgba(15, 40, 30, 0.14) !important;
}

body .compact-disappearing-panel .circle-disappearing-form select.field {
    min-height: 38px !important;
    border-radius: 12px !important;
}

body .compact-disappearing-panel .circle-disappearing-form .secondary-button {
    min-height: 38px !important;
    border-radius: 12px !important;
}

body .compact-disappearing-panel .circle-disappearing-form em {
    grid-column: 1 / -1 !important;
    min-height: 12px !important;
    color: #0f8f5f !important;
    font-size: 0.72rem !important;
    text-align: right !important;
}

@media (max-width: 640px) {
    body .compact-disappearing-panel {
        margin-inline: 10px !important;
    }

    body .compact-disappearing-panel .circle-disappearing-copy strong {
        display: none !important;
    }

    body .compact-disappearing-panel .circle-disappearing-form {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        grid-template-columns: 1fr !important;
    }
}

/* D Social: sponsored posts and boost request controls. */
body .d-status-sponsored-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 143, 95, 0.18);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(15, 143, 95, 0.12), rgba(45, 156, 219, 0.08));
    color: #0b7350;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 28px rgba(15, 143, 95, 0.08);
}

body .d-status-sponsored-label svg {
    width: 16px;
    height: 16px;
}

body .d-status-sponsored-label.is-muted {
    background: #f7faf9;
    color: #64748b;
    box-shadow: none;
}

body .d-status-sponsor-panel {
    margin-top: 14px;
    border: 1px solid #d9ece5;
    border-radius: 18px;
    background: #fbfffd;
    overflow: hidden;
}

body .d-status-sponsor-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    color: #14213d;
    cursor: pointer;
    list-style: none;
}

body .d-status-sponsor-panel summary::-webkit-details-marker {
    display: none;
}

body .d-status-sponsor-panel summary span,
body .d-status-sponsor-panel summary small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

body .d-status-sponsor-panel summary small {
    color: #0f8f5f;
    font-size: 0.78rem;
    white-space: nowrap;
}

body .d-status-sponsor-panel form {
    display: grid;
    gap: 14px;
    padding: 0 16px 16px;
}

body .d-status-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body .d-status-sponsor-grid label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #526172;
    font-size: 0.78rem;
    font-weight: 800;
}

body .d-status-sponsor-grid input,
body .d-status-sponsor-grid select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d8e6df;
    border-radius: 12px;
    background: white;
    color: #14213d;
    font: inherit;
    font-weight: 700;
    padding: 8px 10px;
}

body .d-status-sponsor-panel p {
    margin: 0;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

body .d-status-promote-advice {
    padding: 12px 14px;
    border-radius: 14px;
    background: #e8f8ef;
    color: #0b5c45;
    font-weight: 700;
}

body .d-status-promote-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body .d-status-promote-plan {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #d8e6df;
    border-radius: 16px;
    background: white;
    cursor: pointer;
}

body .d-status-promote-plan.is-recommended,
body .d-status-promote-plan:has(input:checked) {
    border-color: #1fa855;
    background: #f4fbf7;
}

body .d-status-promote-plan input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body .d-status-promote-plan strong {
    color: #14213d;
    font-size: 0.95rem;
}

body .d-status-promote-plan span,
body .d-status-promote-plan small {
    color: #526172;
    font-size: 0.78rem;
    font-weight: 700;
}

body .d-status-promote-plan em {
    color: #0f8f5f;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body .sponsored-admin-card {
    border-color: rgba(15, 143, 95, 0.28) !important;
    background: linear-gradient(135deg, #ffffff, #f1fff8);
    box-shadow: 0 18px 42px rgba(15, 143, 95, 0.08);
}

/* Admin control room */
body .admin-console-hero,
body .admin-command-grid,
body .admin-command-layout {
    max-width: 1440px;
}

body .admin-console-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    margin: 18px auto 0;
    padding: 34px clamp(18px, 4vw, 46px);
    border: 1px solid rgba(15, 119, 88, 0.16);
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 14%, rgba(0, 191, 166, 0.16), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f3fff9 58%, #eef7ff 100%);
    box-shadow: 0 24px 70px rgba(23, 33, 28, 0.08);
    overflow: hidden;
}

body .admin-console-hero__copy {
    display: grid;
    gap: 12px;
}

body .admin-console-hero__copy h1 {
    max-width: 880px;
    margin: 0;
    color: #111827;
    font-size: clamp(2rem, 4vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: 0;
}

body .admin-console-hero__copy p {
    max-width: 780px;
    margin: 0;
    color: #536471;
    font-size: 1.03rem;
    line-height: 1.65;
}

body .admin-console-pill,
body .admin-pending-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    border: 1px solid rgba(15, 119, 88, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #087458;
    font-weight: 900;
    padding: 9px 13px;
    box-shadow: 0 12px 30px rgba(15, 119, 88, 0.08);
}

body .admin-console-pill [data-lucide],
body .admin-pending-badge [data-lucide] {
    width: 17px;
    height: 17px;
}

body .admin-console-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

body .admin-command-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 0 auto;
    padding: 16px clamp(16px, 4vw, 42px) 0;
}

body .admin-command-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    min-height: 112px;
    padding: 16px;
    border: 1px solid #e6edf0;
    border-radius: 18px;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 18px 45px rgba(17, 24, 39, 0.06);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body .admin-command-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 191, 166, 0.45);
    box-shadow: 0 22px 56px rgba(15, 119, 88, 0.12);
}

body .admin-command-card--urgent {
    background: linear-gradient(135deg, #063f33, #0b7b5f);
    color: #ffffff;
}

body .admin-command-card__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #eefaf6;
    color: #087458;
}

body .admin-command-card--urgent .admin-command-card__icon {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

body .admin-command-card__icon [data-lucide] {
    width: 21px;
    height: 21px;
}

body .admin-command-card strong {
    font-size: 2rem;
    line-height: 1;
}

body .admin-command-card span:last-child {
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 800;
}

body .admin-command-card--urgent span:last-child {
    color: rgba(255, 255, 255, 0.78);
}

body .admin-command-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    align-items: start;
    padding-top: 18px;
}

body .admin-command-main,
body .admin-activity-rail {
    min-width: 0;
}

body .admin-command-main {
    display: grid;
    gap: 18px;
}

body .admin-panel-heading,
body .admin-queue-section,
body .admin-rail-panel,
body .admin-empty-state {
    border: 1px solid #e4eceb;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(17, 24, 39, 0.05);
}

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

body .admin-panel-heading h2,
body .admin-queue-section__head h3,
body .admin-rail-title h3 {
    margin: 0;
    color: #111827;
    letter-spacing: 0;
}

body .admin-queue-tabs {
    position: sticky;
    top: 86px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid #dfe9e7;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.05);
    backdrop-filter: blur(14px);
}

body .admin-queue-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    border-radius: 999px;
    padding: 8px 12px;
    color: #334155;
    font-weight: 900;
    text-decoration: none;
}

body .admin-queue-tabs a:hover {
    background: #eefaf6;
    color: #087458;
}

body .admin-queue-tabs [data-lucide] {
    width: 17px;
    height: 17px;
}

body .admin-queue-tabs span {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f766e;
    font-size: 0.78rem;
}

body .admin-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 34px 20px;
    text-align: center;
}

body .admin-empty-state span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: #e9fff6;
    color: #087458;
}

body .admin-empty-state h3,
body .admin-empty-state p {
    margin: 0;
}

body .admin-empty-state p {
    max-width: 520px;
    color: #64748b;
}

body .admin-queue-section {
    display: grid;
    gap: 14px;
    padding: 18px;
    scroll-margin-top: 156px;
}

body .admin-queue-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body .admin-queue-section__head > span {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 900;
    padding: 7px 11px;
}

body .admin-review-list,
body .admin-rail-list {
    display: grid;
    gap: 12px;
}

body .admin-review-card {
    display: grid;
    gap: 13px;
    padding: 15px;
    border: 1px solid #e5ecf0;
    border-radius: 16px;
    background: #fbfefd;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body .admin-review-card:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 119, 88, 0.26);
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.07);
}

body .admin-review-card--sponsor {
    background: linear-gradient(135deg, #ffffff, #f0fff8);
    border-color: rgba(15, 143, 95, 0.26);
}

body .admin-review-card__top,
body .admin-rail-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

body .admin-review-icon,
body .admin-rail-title > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #eefaf6;
    color: #087458;
}

body .admin-review-icon [data-lucide],
body .admin-rail-title [data-lucide] {
    width: 21px;
    height: 21px;
}

body .admin-review-card h4 {
    margin: 0;
    color: #111827;
    font-size: 1.08rem;
    letter-spacing: 0;
}

body .admin-review-card__top p,
body .admin-review-copy,
body .admin-mini-card p {
    margin: 0;
    color: #536471;
    line-height: 1.55;
}

body .admin-review-card .kicker {
    margin: 0 0 3px;
    color: #087458;
    font-size: 0.72rem;
}

body .admin-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body .admin-chip-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-height: 30px;
    border: 1px solid #dfe9e7;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 5px 9px;
}

body .admin-chip-row [data-lucide] {
    width: 14px;
    height: 14px;
}

body .admin-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 2px;
}

body .admin-card-actions form {
    margin: 0;
}

body .admin-card-actions .compact {
    min-height: 38px;
    border-radius: 999px;
}

body .admin-queue-empty {
    margin: 0;
    border: 1px dashed #d5e3df;
    border-radius: 14px;
    background: #fbfefd;
    color: #64748b;
    font-weight: 800;
    padding: 16px;
}

body .admin-activity-rail {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 14px;
    max-height: calc(100vh - 116px);
    overflow: auto;
    padding-right: 4px;
}

body .admin-rail-panel {
    display: grid;
    gap: 12px;
    padding: 15px;
}

body .admin-mini-card {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #e6edf0;
    border-radius: 14px;
    background: #ffffff;
}

body .admin-mini-card strong {
    color: #111827;
    line-height: 1.25;
}

body .admin-mini-card span,
body .admin-mini-card small {
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 750;
}

body .admin-mini-card .compact {
    width: fit-content;
}

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

    body .admin-command-layout {
        grid-template-columns: 1fr;
    }

    body .admin-activity-rail {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 760px) {
    body .admin-console-hero {
        grid-template-columns: 1fr;
        border-radius: 22px;
        margin-inline: 12px;
    }

    body .admin-console-hero__actions {
        justify-content: flex-start;
    }

    body .admin-command-grid {
        grid-template-columns: 1fr;
    }

    body .admin-panel-heading,
    body .admin-queue-section__head {
        align-items: flex-start;
        flex-direction: column;
    }

    body .admin-queue-tabs {
        position: static;
    }

    body .admin-review-card__top {
        align-items: start;
    }
}

@media (max-width: 760px) {
    body .d-status-sponsor-grid {
        grid-template-columns: 1fr;
    }

    body .d-status-sponsor-panel summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Online Number: single WhatsApp-like chat list, no split contacts/groups. */
body .connect-phonebook-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 12px !important;
}

body .connect-chat-title-actions {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body .connect-new-chat-popover {
    position: relative !important;
}

body .connect-new-chat-popover summary,
body .connect-chat-menu-dot {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111b21 !important;
    cursor: pointer !important;
    list-style: none !important;
    text-decoration: none !important;
}

body .connect-new-chat-popover summary::-webkit-details-marker {
    display: none !important;
}

body .connect-new-chat-popover summary:hover,
body .connect-chat-menu-dot:hover {
    background: #f0f2f1 !important;
}

body .connect-new-chat-popover svg,
body .connect-chat-menu-dot svg {
    width: 24px !important;
    height: 24px !important;
}

body .connect-new-chat-popover .connect-quick-save {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(320px, calc(100vw - 40px)) !important;
    padding: 12px !important;
    border: 1px solid #dfe7e2 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 55px rgba(17, 27, 33, 0.16) !important;
}

body .connect-new-chat-popover .connect-quick-save .field {
    min-height: 44px !important;
    border: 1px solid #dde6e1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    padding: 0 12px !important;
}

body .connect-new-chat-popover .connect-quick-save .secondary-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
}

body .connect-new-chat-popover .connect-quick-save .secondary-button span {
    font-size: inherit !important;
}

body .connect-chat-filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding: 0 0 2px !important;
    scrollbar-width: none !important;
}

body .connect-chat-filter-row::-webkit-scrollbar {
    display: none !important;
}

body .connect-chat-filter-row span,
body .connect-chat-filter-row a,
body .connect-chat-filter-row button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    border: 1px solid #d7dfdb !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #4f5f59 !important;
    font-size: 0.9rem !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

body .connect-chat-filter-row .is-active {
    border-color: #bdeac8 !important;
    background: #dffbdd !important;
    color: #0d7a45 !important;
}

body .connect-chat-filter-row .connect-filter-plus {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
}

body .connect-chat-filter-row svg {
    width: 18px !important;
    height: 18px !important;
}

body .connect-chat-list-scroll {
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 3px !important;
    scrollbar-width: thin !important;
}

body .connect-chat-list-scroll::-webkit-scrollbar {
    width: 8px !important;
}

body .connect-chat-list-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: #a7b5af !important;
    background-clip: content-box !important;
}

body .connect-chat-list-scroll .connect-contact-list,
body .connect-chat-list-scroll .connect-group-list {
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
}

body .connect-chat-list-scroll .connect-group-section {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body .connect-chat-list-scroll .connect-group-section[hidden],
body .connect-chat-list-scroll .connect-group-create[hidden] {
    display: none !important;
}

body .connect-chat-list-scroll .connect-group-section > .section-title-row,
body .connect-chat-list-scroll .connect-group-section > .connect-panel-search {
    display: none !important;
}

body .connect-chat-list-scroll .connect-group-create {
    margin: 4px 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body .connect-chat-list-scroll .connect-group-create summary {
    min-height: 60px !important;
    padding: 10px 6px !important;
    border-bottom: 1px solid #edf1ef !important;
    border-radius: 0 !important;
    color: #111b21 !important;
}

body .connect-chat-list-scroll .connect-group-create form {
    margin: 8px 6px 12px !important;
    padding: 12px !important;
    border: 1px solid #dfe7e2 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body .connect-chat-list-scroll .connect-contact-edit {
    margin: 4px 0 10px 60px !important;
    border-radius: 12px !important;
}

body .connect-chat-list-scroll .connect-empty-phonebook {
    min-height: 92px !important;
    margin: 6px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1ef !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body .connect-contact-list,
body .connect-group-list {
    max-height: none !important;
}

body .connect-unsaved-contact-form,
body .connect-unsaved-contact-form button {
    width: 100% !important;
}

body .connect-unsaved-contact-form button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    cursor: pointer !important;
    text-align: left !important;
}

body .connect-unsaved-pill {
    display: none !important;
}

body .connect-unsaved-result {
    position: relative !important;
}

body .connect-unsaved-save-popover {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    z-index: 12 !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
}

body .connect-unsaved-result:hover .connect-unsaved-save-popover,
body .connect-unsaved-result:focus-within .connect-unsaved-save-popover,
body .connect-unsaved-save-popover[open] {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translateX(-2px) !important;
}

body .connect-unsaved-save-popover summary {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 1px solid #dfe7e2 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #667781 !important;
    cursor: pointer !important;
    list-style: none !important;
    box-shadow: 0 8px 18px rgba(15, 40, 30, 0.07) !important;
}

body .connect-unsaved-save-popover summary:hover,
body .connect-unsaved-save-popover[open] summary {
    border-color: #176b4d !important;
    color: #176b4d !important;
    background: #f1faf5 !important;
}

body .connect-unsaved-save-popover summary [data-lucide] {
    width: 15px !important;
    height: 15px !important;
}

body .connect-unsaved-save-popover summary span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

body .connect-unsaved-save-popover summary::-webkit-details-marker {
    display: none !important;
}

body .connect-unsaved-save-popover form {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    display: grid !important;
    gap: 10px !important;
    width: min(300px, calc(100vw - 46px)) !important;
    padding: 12px !important;
    border: 1px solid #dfe7e2 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 55px rgba(17, 27, 33, 0.18) !important;
}

body .connect-unsaved-save-popover label {
    display: grid !important;
    gap: 6px !important;
    color: #667781 !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
}

body .connect-unsaved-save-popover input.field {
    min-height: 42px !important;
    border-radius: 12px !important;
}

body .connect-settings-drawer {
    overflow: hidden !important;
    border: 1px solid #dfe8e3 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(17, 27, 33, 0.07) !important;
}

body .connect-settings-drawer > summary {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px !important;
    color: #111b21 !important;
    cursor: pointer !important;
    list-style: none !important;
}

body .connect-settings-drawer > summary::-webkit-details-marker {
    display: none !important;
}

body .connect-settings-drawer > summary > [data-lucide],
body .connect-settings-drawer > summary > i:last-child {
    color: #667781 !important;
    transition: transform 160ms ease !important;
}

body .connect-settings-drawer[open] > summary > i:last-child {
    transform: rotate(180deg) !important;
}

body .connect-settings-icon,
body .connect-settings-profile > a,
body .connect-settings-toggles label > span,
body .connect-settings-actions a > i,
body .connect-settings-language label i,
body .connect-settings-select span > i {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    color: #176b4d !important;
    background: #eaf7ef !important;
}

body .connect-settings-drawer strong {
    color: #111b21 !important;
}

body .connect-settings-drawer small,
body .connect-settings-drawer em {
    color: #667781 !important;
    font-size: 0.78rem !important;
    font-style: normal !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

body .connect-settings-panel {
    display: grid !important;
    gap: 12px !important;
    padding: 0 12px 12px !important;
    animation: settingsPanelIn 180ms ease both !important;
}

body .connect-settings-profile {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 12px !important;
    border: 1px solid #dfe8e3 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f7fffb, #ffffff) !important;
}

body .connect-settings-avatar {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    border: 2px solid #dbeee5 !important;
    border-radius: 999px !important;
    color: #176b4d !important;
    background: #eaf7ef !important;
    overflow: hidden !important;
    font-weight: 950 !important;
}

body .connect-settings-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%) !important;
    transform: scale(var(--profile-photo-zoom, 1)) !important;
    transform-origin: var(--profile-photo-x, 50%) var(--profile-photo-y, 50%) !important;
}

body .connect-settings-profile > span:nth-child(2) {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body .connect-settings-profile > span:nth-child(2) strong,
body .connect-settings-profile > span:nth-child(2) small,
body .connect-settings-profile > span:nth-child(2) em {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body .connect-settings-profile > a {
    border: 1px solid #d7e8df !important;
    text-decoration: none !important;
}

body .connect-settings-form {
    display: grid !important;
    gap: 10px !important;
}

body .connect-settings-select,
body .connect-settings-language label {
    display: grid !important;
    gap: 9px !important;
    padding: 12px !important;
    border: 1px solid #e1e9e5 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

body .connect-settings-select > span,
body .connect-settings-language label > span {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

body .connect-settings-select > span small {
    grid-column: 2 !important;
}

body .connect-settings-select .field,
body .connect-settings-language .field {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
}

body .connect-settings-toggles {
    display: grid !important;
    gap: 6px !important;
    overflow: hidden !important;
    border: 1px solid #e1e9e5 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

body .connect-settings-toggles label {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #edf2ef !important;
    cursor: pointer !important;
}

body .connect-settings-toggles label:last-child {
    border-bottom: 0 !important;
}

body .connect-settings-toggles label input[type="checkbox"] {
    grid-column: 3 !important;
    width: 42px !important;
    height: 24px !important;
    margin: 0 !important;
    appearance: none !important;
    border: 1px solid #d5ded9 !important;
    border-radius: 999px !important;
    background: #edf1ef !important;
    cursor: pointer !important;
    transition: background 160ms ease, border-color 160ms ease !important;
}

body .connect-settings-toggles label input[type="checkbox"]::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 2px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(17, 27, 33, .14) !important;
    transition: transform 160ms ease !important;
}

body .connect-settings-toggles label input[type="checkbox"]:checked {
    border-color: #176b4d !important;
    background: #176b4d !important;
}

body .connect-settings-toggles label input[type="checkbox"]:checked::before {
    transform: translateX(18px) !important;
}

body .connect-settings-toggles label > strong,
body .connect-settings-toggles label > small {
    grid-column: 2 !important;
}

body .connect-settings-toggles label > small {
    margin-top: -6px !important;
}

body .connect-settings-save {
    width: 100% !important;
    justify-content: center !important;
}

body .connect-settings-actions {
    display: grid !important;
    gap: 6px !important;
    overflow: hidden !important;
    border: 1px solid #e1e9e5 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

body .connect-settings-actions a {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid #edf2ef !important;
    color: #111b21 !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

body .connect-settings-actions a:last-child {
    border-bottom: 0 !important;
}

body .connect-settings-language {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: end !important;
}

body .connect-settings-language label {
    padding: 10px !important;
}

body .connect-contact-settings-popover {
    position: relative !important;
}

body .connect-contact-settings-popover summary {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #d7e3dd !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #40504a !important;
    cursor: pointer !important;
    list-style: none !important;
    box-shadow: 0 8px 18px rgba(17, 27, 33, 0.06) !important;
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease !important;
}

body .connect-contact-settings-popover summary::-webkit-details-marker {
    display: none !important;
}

body .connect-contact-settings-popover summary:hover,
body .connect-contact-settings-popover[open] summary {
    border-color: #176b4d !important;
    background: #f1faf5 !important;
    color: #176b4d !important;
    transform: translateY(-1px) !important;
}

body .connect-contact-settings-popover summary [data-lucide] {
    width: 18px !important;
    height: 18px !important;
}

body .connect-contact-settings-popover summary span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

body .connect-contact-settings-popover form {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    z-index: 90 !important;
    display: grid !important;
    gap: 11px !important;
    width: min(360px, calc(100vw - 38px)) !important;
    padding: 14px !important;
    border: 1px solid #dfe8e3 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 70px rgba(17, 27, 33, 0.18) !important;
}

body .connect-contact-settings-head {
    display: grid !important;
    gap: 3px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #eef3f0 !important;
}

body .connect-contact-settings-head strong {
    color: #111b21 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
}

body .connect-contact-settings-head small,
body .connect-contact-settings-popover label span {
    color: #667781 !important;
    font-size: 0.78rem !important;
    font-weight: 780 !important;
    line-height: 1.35 !important;
}

body .connect-contact-settings-popover label {
    display: grid !important;
    gap: 6px !important;
}

body .connect-contact-settings-popover .field {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 12px !important;
}

body .connect-contact-settings-popover textarea.field {
    min-height: 84px !important;
    padding-top: 10px !important;
    resize: vertical !important;
}

@keyframes settingsPanelIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

/* Online Number: keep active chat name locked at the top. */
body:has(.connect-workspace) {
    overflow: hidden !important;
}

body .connect-workspace {
    height: calc(100dvh - 92px) !important;
    min-height: 0 !important;
}

body .connect-numbers-column,
body .connect-saved-column,
body .connect-conversation-panel {
    height: 100% !important;
    min-height: 0 !important;
}

body .connect-conversation-panel {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
}

body .connect-conversation-panel .connect-chat-head {
    position: relative !important;
    top: auto !important;
    z-index: 80 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    box-shadow: 0 8px 24px rgba(17, 27, 33, 0.05) !important;
}

body .connect-conversation-panel .circle-chat {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body .connect-conversation-panel .circle-message-list {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

body .connect-workspace.is-switching-chat .connect-conversation-panel {
    opacity: 0.72 !important;
    transition: opacity 0.14s ease !important;
}

@media (max-width: 900px) {
    body:has(.connect-workspace) {
        overflow: auto !important;
    }
}

/* Online Number: final below-menu app sizing. */
body:has(.connect-workspace) {
    --dekeree-topbar-height: 74px;
    overflow: hidden !important;
}

body:has(.connect-workspace) .topbar {
    min-height: var(--dekeree-topbar-height) !important;
    z-index: 120 !important;
}

body:has(.connect-workspace) .connect-workspace {
    height: calc(100dvh - var(--dekeree-topbar-height)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border-top: 0 !important;
    border-radius: 0 !important;
}

body:has(.connect-workspace) .connect-numbers-column,
body:has(.connect-workspace) .connect-saved-column,
body:has(.connect-workspace) .connect-conversation-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

body:has(.connect-workspace) .connect-conversation-panel .connect-chat-head {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    min-height: 76px !important;
}

@media (max-width: 900px) {
    body:has(.connect-workspace) {
        overflow: auto !important;
    }

    body:has(.connect-workspace) .connect-workspace,
    body:has(.connect-workspace) .connect-numbers-column,
    body:has(.connect-workspace) .connect-saved-column,
    body:has(.connect-workspace) .connect-conversation-panel {
        height: auto !important;
    }
}

/* Online Number: place the app below the main menu and keep chat name visible. */
body:has(.connect-workspace) {
    --dekeree-topbar-height: 74px;
    overflow: hidden !important;
    padding-top: 0 !important;
}

body:has(.connect-workspace) .topbar {
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 300 !important;
    min-height: auto !important;
}

body:has(.connect-workspace) .form-shell {
    display: none !important;
}

body:has(.connect-workspace) .connect-workspace {
    height: calc(100dvh - var(--dekeree-topbar-height)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding-top: 0 !important;
    border-top: 1px solid #dfe7e2 !important;
    border-radius: 0 !important;
    align-items: stretch !important;
}

body:has(.connect-workspace) .connect-numbers-column,
body:has(.connect-workspace) .connect-saved-column,
body:has(.connect-workspace) .connect-phonebook-column,
body:has(.connect-workspace) .connect-conversation-panel {
    position: relative !important;
    top: auto !important;
    height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
}

body:has(.connect-workspace) .connect-conversation-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .connect-conversation-panel .connect-chat-head {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    z-index: 60 !important;
    grid-row: 1 !important;
    min-height: 76px !important;
    background: #f0f8f4 !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-chat {
    grid-row: 2 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 900px) {
    body:has(.connect-workspace) {
        overflow: auto !important;
        padding-top: 0 !important;
    }

    body:has(.connect-workspace) .topbar {
        position: sticky !important;
    }

    body:has(.connect-workspace) .connect-workspace,
    body:has(.connect-workspace) .connect-numbers-column,
    body:has(.connect-workspace) .connect-saved-column,
    body:has(.connect-workspace) .connect-phonebook-column,
    body:has(.connect-workspace) .connect-conversation-panel {
        height: auto !important;
    }
}

/* Online Number: expand the WhatsApp-like rail when Settings is open. */
body .connect-workspace:has(.connect-settings-drawer[open]) {
    grid-template-columns: minmax(360px, 420px) minmax(300px, 380px) minmax(0, 1fr) !important;
}

body .connect-workspace:has(.connect-settings-drawer[open]) .connect-numbers-column {
    align-items: stretch !important;
    padding: 14px !important;
    overflow-y: auto !important;
}

body .connect-workspace:has(.connect-settings-drawer[open]) .connect-number-card {
    display: grid !important;
    gap: 12px !important;
}

body .connect-workspace:has(.connect-settings-drawer[open]) .connect-number-card .hs-number-plate.own {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    min-height: 58px !important;
    padding: 8px !important;
    border: 1px solid #dfe8e3 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

body .connect-workspace:has(.connect-settings-drawer[open]) .connect-number-card .hs-number-text,
body .connect-workspace:has(.connect-settings-drawer[open]) .connect-number-card .connect-own-actions {
    display: grid !important;
}

body .connect-workspace:has(.connect-settings-drawer[open]) .connect-number-card .connect-own-actions {
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
}

body .connect-workspace:has(.connect-settings-drawer[open]) .connect-number-card .hs-number-orb {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
}

body .connect-settings-drawer[open] {
    width: 100% !important;
    max-height: calc(100dvh - 190px) !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
}

body .connect-settings-drawer[open] > summary {
    position: sticky !important;
    top: 0 !important;
    z-index: 4 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eef3f0 !important;
}

body .connect-workspace:has(.connect-settings-drawer[open]) .connect-dekeree-links,
body .connect-workspace:has(.connect-settings-drawer[open]) .connect-meeting-mini-panel,
body .connect-workspace:has(.connect-settings-drawer[open]) .connect-directory-panel {
    display: none !important;
}

@media (max-width: 1180px) {
    body .connect-workspace:has(.connect-settings-drawer[open]) {
        grid-template-columns: minmax(320px, 390px) minmax(0, 1fr) !important;
        grid-template-areas:
            "rail chats"
            "rail conversation" !important;
    }
}

@media (max-width: 760px) {
    body .connect-workspace:has(.connect-settings-drawer[open]) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "rail"
            "chats"
            "conversation" !important;
    }

    body .connect-settings-drawer[open] {
        max-height: none !important;
    }
}

body .connect-sms-chat .circle-message-list {
    background:
        radial-gradient(circle at 18px 18px, rgba(23, 107, 77, .035) 0 2px, transparent 2px 30px),
        radial-gradient(circle at 58px 58px, rgba(31, 42, 68, .028) 0 2px, transparent 2px 32px),
        linear-gradient(180deg, #fbfcfb, #ffffff) !important;
    background-size: 76px 76px, 92px 92px, auto !important;
}

body .connect-sms-chat .circle-message-row {
    position: relative !important;
    align-items: end !important;
}

body .connect-sms-chat .circle-message {
    gap: 6px !important;
    max-width: min(520px, 72%) !important;
    padding: 8px 10px 7px !important;
    border: 0 !important;
    border-radius: 16px 16px 16px 5px !important;
    color: #27322f !important;
    background: #eef1f0 !important;
    box-shadow: 0 8px 22px rgba(23, 33, 28, .06) !important;
}

body .connect-sms-chat .circle-message.mine {
    border-radius: 16px 16px 5px 16px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #7b2ff7 0%, #6d37ff 58%, #8e42ff 100%) !important;
    box-shadow: 0 12px 28px rgba(109, 55, 255, .18) !important;
}

body .connect-sms-chat .circle-message-meta {
    justify-content: flex-end !important;
    gap: 7px !important;
    order: 20 !important;
}

body .connect-sms-chat .circle-message-meta strong {
    display: none !important;
}

body .connect-sms-chat .circle-message-meta small {
    color: rgba(39, 50, 47, .55) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}

body .connect-sms-chat .circle-message.mine .circle-message-meta small,
body .connect-sms-chat .circle-message.mine .circle-message-meta span {
    color: rgba(255, 255, 255, .78) !important;
}

body .connect-sms-chat .circle-message p {
    color: #27322f !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
}

body .connect-sms-chat .circle-message p[data-message-body] {
    display: block !important;
    padding-right: 0 !important;
}

body .connect-sms-chat .circle-message p[data-message-body] > span {
    vertical-align: middle !important;
}

body .connect-sms-chat .circle-message-inline-menu-button {
    position: absolute !important;
    top: 50% !important;
    right: -34px !important;
    z-index: 13 !important;
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    border: 1px solid rgba(123, 47, 247, .14) !important;
    border-radius: 999px !important;
    color: #6d37ff !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 10px 26px rgba(31, 42, 68, .14), 0 0 0 5px rgba(123, 47, 247, .045) !important;
    opacity: .92 !important;
    transform: translateY(-50%) scale(.96) !important;
    transition: opacity .16s ease, transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
    animation: messageMenuSoftPulse 2600ms ease-in-out infinite !important;
}

body .connect-sms-chat .circle-message-inline-menu-button:hover,
body .connect-sms-chat .circle-message-inline-menu-button[aria-expanded="true"] {
    color: #5b35e8 !important;
    background: #ffffff !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 14px 34px rgba(91, 53, 232, .22), 0 0 0 6px rgba(123, 47, 247, .08) !important;
}

body .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button {
    right: auto !important;
    left: -34px !important;
    color: #6d37ff !important;
    background: #ffffff !important;
    box-shadow: 0 10px 26px rgba(31, 42, 68, .14), 0 0 0 5px rgba(255, 255, 255, .08) !important;
}

body .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button:hover,
body .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button[aria-expanded="true"] {
    color: #5b35e8 !important;
    background: #ffffff !important;
}

body .connect-sms-chat .circle-message-inline-menu-button [data-lucide] {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.6 !important;
}

body .connect-sms-chat .circle-message.mine p {
    color: #ffffff !important;
}

body .connect-sms-chat .circle-message.is-editing [data-message-body] {
    display: none !important;
}

body .connect-sms-chat .circle-message-edit-form {
    display: grid !important;
    gap: 8px !important;
    min-width: min(340px, 100%) !important;
    margin-top: 2px !important;
}

body .connect-sms-chat .circle-message-edit-form[hidden] {
    display: none !important;
}

body .connect-sms-chat .circle-message-edit-form textarea.field {
    min-height: 82px !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 13px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    resize: vertical !important;
}

body .connect-sms-chat .circle-message-edit-form textarea.field:focus {
    border-color: rgba(255, 255, 255, .54) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12) !important;
    outline: none !important;
}

body .connect-sms-chat .circle-message-edit-actions {
    display: inline-flex !important;
    justify-content: flex-end !important;
    gap: 7px !important;
}

body .connect-sms-chat .circle-message-edit-actions .secondary-button,
body .connect-sms-chat .circle-message-edit-actions .primary-button {
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
}

body .connect-sms-chat .circle-message-edit-actions .secondary-button {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .28) !important;
    background: rgba(255, 255, 255, .12) !important;
}

body .connect-sms-chat .circle-message-edit-actions .primary-button {
    color: #5b35e8 !important;
    border-color: #ffffff !important;
    background: #ffffff !important;
}

body .connect-sms-chat .circle-message-edited-label {
    justify-self: end !important;
    color: rgba(39, 50, 47, .48) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

body .connect-sms-chat .circle-message.mine .circle-message-edited-label {
    color: rgba(255, 255, 255, .68) !important;
}

body .connect-sms-chat .circle-reply-quote {
    position: relative !important;
    gap: 2px !important;
    margin: 0 0 3px !important;
    padding: 7px 9px 7px 11px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .58) !important;
    overflow: hidden !important;
}

body .connect-sms-chat .circle-reply-quote::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px auto 6px 0 !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: rgba(23, 107, 77, .48) !important;
}

body .connect-sms-chat .circle-message.mine .circle-reply-quote {
    background: rgba(255, 255, 255, .15) !important;
}

body .connect-sms-chat .circle-message.mine .circle-reply-quote::before {
    background: rgba(255, 255, 255, .62) !important;
}

body .connect-sms-chat .circle-reply-quote small {
    color: rgba(23, 107, 77, .9) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

body .connect-sms-chat .circle-reply-quote span {
    color: rgba(31, 42, 68, .72) !important;
    font-size: 12px !important;
    font-style: italic !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

body .connect-sms-chat .circle-message.mine .circle-reply-quote small,
body .connect-sms-chat .circle-message.mine .circle-reply-quote span {
    color: rgba(255, 255, 255, .86) !important;
}

body .connect-sms-chat .circle-message-side-actions {
    position: absolute !important;
    top: 50% !important;
    right: calc(100% + 8px) !important;
    z-index: 11 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-50%) translateX(8px) !important;
    transition: opacity .16s ease, transform .16s ease !important;
}

body .connect-sms-chat .circle-message-side-actions::before {
    content: "" !important;
    position: absolute !important;
    inset: -12px !important;
    z-index: -1 !important;
    border-radius: 999px !important;
}

body .connect-sms-chat .circle-message:not(.mine) .circle-message-side-actions {
    right: auto !important;
    left: calc(100% + 8px) !important;
    transform: translateY(-50%) translateX(-8px) !important;
}

body .connect-sms-chat .circle-message:hover .circle-message-side-actions,
body .connect-sms-chat .circle-message:focus-within .circle-message-side-actions,
body .connect-sms-chat .circle-message-row:hover .circle-message-side-actions,
body .connect-sms-chat .circle-message-row:focus-within .circle-message-side-actions,
body .connect-sms-chat .circle-message-side-actions:focus-within {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translateX(0) !important;
}

body .connect-sms-chat .circle-message-side-action,
body .connect-sms-chat .circle-message-tool-button.circle-message-side-action {
    position: static !important;
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #7c5cff !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .86 !important;
    transform: none !important;
}

body .connect-sms-chat .circle-message-side-action:hover,
body .connect-sms-chat .circle-message-tool-button.circle-message-side-action[aria-expanded="true"] {
    color: #5b35e8 !important;
    background: rgba(123, 47, 247, .08) !important;
    transform: translateY(-1px) !important;
}

body .connect-sms-chat .circle-message-side-action [data-lucide] {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.35 !important;
}

body .connect-sms-chat .circle-message-tools-panel {
    top: calc(100% + 8px) !important;
    right: 8px !important;
    bottom: auto !important;
    width: min(246px, calc(100vw - 44px)) !important;
    padding: 10px !important;
    border-radius: 22px !important;
    border-color: rgba(31, 42, 68, .08) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 22px 60px rgba(31, 42, 68, .2) !important;
    overflow: hidden !important;
}

body .connect-sms-chat .circle-message:not(.mine) .circle-message-tools-panel {
    right: auto !important;
    left: 8px !important;
}

body .connect-sms-chat .circle-message-options-list {
    display: grid !important;
    gap: 2px !important;
}

body .connect-sms-chat .circle-message-options-list button,
body .connect-sms-chat .circle-message-menu-disabled {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #202724 !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: left !important;
}

body .connect-sms-chat .circle-message-options-list button:hover {
    color: #5b35e8 !important;
    background: rgba(123, 47, 247, .08) !important;
}

body .connect-sms-chat .circle-message-options-list [data-lucide] {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.35 !important;
}

body .connect-sms-chat .circle-message-menu-disabled {
    color: rgba(32, 39, 36, .38) !important;
    cursor: not-allowed !important;
}

body .connect-sms-chat .circle-reaction-strip {
    margin-top: 8px !important;
    padding-top: 9px !important;
    border-top: 1px solid #edf1ef !important;
}

body .connect-sms-chat .circle-message-tool-row {
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid #edf1ef !important;
}

@keyframes messageMenuSoftPulse {
    0%,
    100% {
        box-shadow: 0 5px 14px rgba(31, 42, 68, .08);
    }

    50% {
        box-shadow: 0 8px 18px rgba(123, 47, 247, .16);
    }
}

body .connect-sms-chat .circle-quick-reply-button {
    display: none !important;
}

@media (max-width: 760px) {
    body .connect-sms-chat .circle-message {
        max-width: min(84%, 420px) !important;
    }

    body .connect-sms-chat .circle-message-side-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
        right: 8px !important;
        top: -18px !important;
        transform: none !important;
    }

    body .connect-sms-chat .circle-message:not(.mine) .circle-message-side-actions {
        right: auto !important;
        left: 8px !important;
        transform: none !important;
    }
}

body .connect-sms-chat .circle-message {
    overflow: visible !important;
}

body .connect-sms-chat .circle-message p[data-message-body] {
    display: block !important;
    padding-right: 0 !important;
}

body .connect-sms-chat .circle-message-inline-menu-button {
    position: absolute !important;
    top: 50% !important;
    right: -37px !important;
    z-index: 14 !important;
    display: grid !important;
    place-items: center !important;
    width: 31px !important;
    height: 31px !important;
    margin: 0 !important;
    border: 1px solid rgba(123, 47, 247, .15) !important;
    border-radius: 999px !important;
    color: #5b35e8 !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 13px 30px rgba(31, 42, 68, .15), 0 0 0 5px rgba(123, 47, 247, .05) !important;
    opacity: .96 !important;
    transform: translateY(-50%) scale(.98) !important;
    transition: opacity .16s ease, transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
    animation: messageMenuOutsideGlow 2600ms ease-in-out infinite !important;
}

body .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button {
    right: auto !important;
    left: -37px !important;
    color: #6a35f2 !important;
}

body .connect-sms-chat .circle-message-inline-menu-button:hover,
body .connect-sms-chat .circle-message-inline-menu-button:focus-visible,
body .connect-sms-chat .circle-message-inline-menu-button[aria-expanded="true"] {
    opacity: 1 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #7b2ff7, #5b35e8) !important;
    transform: translateY(-50%) scale(1.06) !important;
    box-shadow: 0 16px 36px rgba(91, 53, 232, .24), 0 0 0 6px rgba(123, 47, 247, .1) !important;
}

body .connect-sms-chat .circle-message-inline-menu-button [data-lucide] {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.45 !important;
}

body .connect-sms-chat .circle-message-tools-panel {
    z-index: 20 !important;
    max-height: min(78vh, 390px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-open-down {
    top: calc(100% + 10px) !important;
    bottom: auto !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-open-up {
    top: auto !important;
    bottom: calc(100% + 10px) !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-open-down::before,
body .connect-sms-chat .circle-message-tools-panel.is-open-up::before {
    content: "" !important;
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, .98) !important;
    transform: rotate(45deg) !important;
    box-shadow: -2px -2px 8px rgba(31, 42, 68, .03) !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-open-down::before {
    top: -5px !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-open-up::before {
    bottom: -5px !important;
}

body .connect-sms-chat .circle-message.mine .circle-message-tools-panel::before {
    left: 18px !important;
}

body .connect-sms-chat .circle-message:not(.mine) .circle-message-tools-panel::before {
    right: 18px !important;
}

@keyframes messageMenuOutsideGlow {
    0%,
    100% {
        box-shadow: 0 13px 30px rgba(31, 42, 68, .15), 0 0 0 5px rgba(123, 47, 247, .05);
    }

    50% {
        box-shadow: 0 16px 34px rgba(91, 53, 232, .18), 0 0 0 7px rgba(123, 47, 247, .08);
    }
}

@media (max-width: 760px) {
    body .connect-sms-chat .circle-message-inline-menu-button,
    body .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button {
        top: -14px !important;
        right: 9px !important;
        left: auto !important;
        width: 30px !important;
        height: 30px !important;
        transform: none !important;
    }

    body .connect-sms-chat .circle-message-inline-menu-button:hover,
    body .connect-sms-chat .circle-message-inline-menu-button:focus-visible,
    body .connect-sms-chat .circle-message-inline-menu-button[aria-expanded="true"] {
        transform: translateY(-1px) scale(1.04) !important;
    }

    body .connect-sms-chat .circle-message-tools-panel,
    body .connect-sms-chat .circle-message.mine .circle-message-tools-panel,
    body .connect-sms-chat .circle-message:not(.mine) .circle-message-tools-panel {
        right: 0 !important;
        left: auto !important;
        width: min(244px, calc(100vw - 34px)) !important;
    }

    body .connect-sms-chat .circle-message-tools-panel::before {
        right: 20px !important;
        left: auto !important;
    }
}

body .connect-sms-chat .circle-message-inline-menu-button,
body .connect-sms-chat .circle-message-reaction-menu-button {
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}

body .connect-sms-chat .circle-message:hover .circle-message-inline-menu-button,
body .connect-sms-chat .circle-message:hover .circle-message-reaction-menu-button,
body .connect-sms-chat .circle-message:focus-within .circle-message-inline-menu-button,
body .connect-sms-chat .circle-message:focus-within .circle-message-reaction-menu-button,
body .connect-sms-chat .circle-message-row:hover .circle-message-inline-menu-button,
body .connect-sms-chat .circle-message-row:hover .circle-message-reaction-menu-button,
body .connect-sms-chat .circle-message-inline-menu-button[aria-expanded="true"],
body .connect-sms-chat .circle-message-reaction-menu-button[aria-expanded="true"] {
    opacity: .96 !important;
    pointer-events: auto !important;
}

body .connect-sms-chat .circle-message-inline-menu-button {
    top: calc(50% - 19px) !important;
}

body .connect-sms-chat .circle-message-reaction-menu-button {
    position: absolute !important;
    top: calc(50% + 19px) !important;
    right: -37px !important;
    z-index: 14 !important;
    display: grid !important;
    place-items: center !important;
    width: 31px !important;
    height: 31px !important;
    margin: 0 !important;
    border: 1px solid rgba(20, 184, 166, .18) !important;
    border-radius: 999px !important;
    color: #087f6f !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 13px 30px rgba(31, 42, 68, .14), 0 0 0 5px rgba(20, 184, 166, .06) !important;
    transform: translateY(-50%) scale(.98) !important;
    transition: opacity .16s ease, transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

body .connect-sms-chat .circle-message.mine .circle-message-reaction-menu-button {
    right: auto !important;
    left: -37px !important;
}

body .connect-sms-chat .circle-message-inline-menu-button:hover,
body .connect-sms-chat .circle-message-inline-menu-button:focus-visible,
body .connect-sms-chat .circle-message-inline-menu-button[aria-expanded="true"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f3441, #111827) !important;
    transform: translateY(-50%) scale(1.06) !important;
    box-shadow: 0 16px 36px rgba(17, 24, 39, .2), 0 0 0 6px rgba(31, 42, 68, .08) !important;
}

body .connect-sms-chat .circle-message-reaction-menu-button:hover,
body .connect-sms-chat .circle-message-reaction-menu-button:focus-visible,
body .connect-sms-chat .circle-message-reaction-menu-button[aria-expanded="true"] {
    opacity: 1 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #10b981, #0f766e) !important;
    transform: translateY(-50%) scale(1.06) !important;
    box-shadow: 0 16px 36px rgba(16, 185, 129, .24), 0 0 0 6px rgba(20, 184, 166, .1) !important;
}

body .connect-sms-chat .circle-message-reaction-menu-button [data-lucide] {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.45 !important;
}

body .connect-sms-chat .circle-message-reaction-panel {
    position: absolute !important;
    z-index: 20 !important;
    right: 8px !important;
    width: max-content !important;
    max-width: min(288px, calc(100vw - 44px)) !important;
    padding: 9px !important;
    border: 1px solid rgba(31, 42, 68, .08) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 22px 60px rgba(31, 42, 68, .18) !important;
}

body .connect-sms-chat .circle-message:not(.mine) .circle-message-reaction-panel {
    right: auto !important;
    left: 8px !important;
}

body .connect-sms-chat .circle-message-reaction-panel[hidden] {
    display: none !important;
}

body .connect-sms-chat .circle-message-reaction-panel.is-open-down {
    top: calc(100% + 10px) !important;
    bottom: auto !important;
}

body .connect-sms-chat .circle-message-reaction-panel.is-open-up {
    top: auto !important;
    bottom: calc(100% + 10px) !important;
}

body .connect-sms-chat .circle-message-reaction-panel .circle-reaction-strip {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
}

@media (max-width: 760px) {
    body .connect-sms-chat .circle-message-inline-menu-button,
    body .connect-sms-chat .circle-message-reaction-menu-button,
    body .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button,
    body .connect-sms-chat .circle-message.mine .circle-message-reaction-menu-button {
        opacity: 1 !important;
        pointer-events: auto !important;
        right: 9px !important;
        left: auto !important;
        transform: none !important;
    }

    body .connect-sms-chat .circle-message-inline-menu-button,
    body .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button {
        top: -14px !important;
    }

    body .connect-sms-chat .circle-message-reaction-menu-button,
    body .connect-sms-chat .circle-message.mine .circle-message-reaction-menu-button {
        top: 20px !important;
    }

    body .connect-sms-chat .circle-message-inline-menu-button:hover,
    body .connect-sms-chat .circle-message-inline-menu-button:focus-visible,
    body .connect-sms-chat .circle-message-inline-menu-button[aria-expanded="true"],
    body .connect-sms-chat .circle-message-reaction-menu-button:hover,
    body .connect-sms-chat .circle-message-reaction-menu-button:focus-visible,
    body .connect-sms-chat .circle-message-reaction-menu-button[aria-expanded="true"] {
        transform: translateY(-1px) scale(1.04) !important;
    }

    body .connect-sms-chat .circle-message-reaction-panel,
    body .connect-sms-chat .circle-message:not(.mine) .circle-message-reaction-panel {
        right: 0 !important;
        left: auto !important;
    }
}

body .connect-sms-chat .circle-message-tools-panel,
body .connect-sms-chat .circle-message-reaction-panel {
    position: absolute !important;
    z-index: 10000 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(100% + 10px) !important;
}

body .connect-sms-chat .circle-message:hover,
body .connect-sms-chat .circle-message:focus-within,
body .connect-sms-chat .circle-message-row:hover,
body .connect-sms-chat .circle-message-row:focus-within {
    z-index: 9990 !important;
}

body .connect-sms-chat .circle-message.mine .circle-message-tools-panel,
body .connect-sms-chat .circle-message.mine .circle-message-reaction-panel {
    right: calc(100% + 10px) !important;
    left: auto !important;
}

body .connect-sms-chat .circle-message:not(.mine) .circle-message-tools-panel,
body .connect-sms-chat .circle-message:not(.mine) .circle-message-reaction-panel {
    right: auto !important;
    left: calc(100% + 10px) !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-open-down,
body .connect-sms-chat .circle-message-reaction-panel.is-open-down {
    top: auto !important;
    bottom: 0 !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-open-up,
body .connect-sms-chat .circle-message-reaction-panel.is-open-up {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
}

body .connect-sms-chat .circle-message-tools-panel {
    width: min(244px, calc(100vw - 44px)) !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: 0 30px 80px rgba(31, 42, 68, .28), 0 0 0 1px rgba(31, 42, 68, .06) !important;
}

body .connect-sms-chat .circle-message-reaction-panel {
    width: max-content !important;
    max-width: min(288px, calc(100vw - 44px)) !important;
}

body .connect-sms-chat .circle-message-tools-panel::before {
    display: none !important;
}

body .connect-sms-chat .circle-message-menu-disabled {
    display: none !important;
}

body .connect-sms-chat .circle-message.is-locally-pinned-message {
    box-shadow: 0 18px 48px rgba(31, 42, 68, .14), 0 0 0 2px rgba(20, 184, 166, .2) !important;
}

body .connect-sms-chat .circle-message.is-locally-pinned-message::after {
    content: "Pinned" !important;
    position: absolute !important;
    top: -11px !important;
    right: 14px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    color: #0f766e !important;
    background: #ecfdf5 !important;
    border: 1px solid rgba(20, 184, 166, .18) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
}

body .connect-sms-chat .circle-message.is-locally-selected-message {
    box-shadow: 0 18px 48px rgba(31, 42, 68, .14), 0 0 0 2px rgba(47, 52, 65, .18) !important;
}

body .connect-sms-chat .circle-message-options-list [data-message-report] {
    color: #9f1239 !important;
}

body .connect-sms-chat .circle-message-options-list [data-message-report]:hover {
    color: #ffffff !important;
    background: #9f1239 !important;
}

body .connect-sms-chat .circle-message-delete-form {
    margin: 0 !important;
}

body .connect-sms-chat .circle-message-options-list .circle-message-delete-button {
    color: #b42318 !important;
}

body .connect-sms-chat .circle-message-options-list .circle-message-delete-button:hover {
    color: #ffffff !important;
    background: #b42318 !important;
}

@media (max-width: 860px) {
    body .connect-sms-chat .circle-message-tools-panel,
    body .connect-sms-chat .circle-message-reaction-panel,
    body .connect-sms-chat .circle-message.mine .circle-message-tools-panel,
    body .connect-sms-chat .circle-message.mine .circle-message-reaction-panel,
    body .connect-sms-chat .circle-message:not(.mine) .circle-message-tools-panel,
    body .connect-sms-chat .circle-message:not(.mine) .circle-message-reaction-panel {
        right: 0 !important;
        left: auto !important;
    }

    body .connect-sms-chat .circle-message-tools-panel.is-open-down,
    body .connect-sms-chat .circle-message-reaction-panel.is-open-down {
        top: auto !important;
        bottom: calc(100% + 10px) !important;
    }

    body .connect-sms-chat .circle-message-tools-panel.is-open-up,
    body .connect-sms-chat .circle-message-reaction-panel.is-open-up {
        top: auto !important;
        bottom: calc(100% + 10px) !important;
    }
}

/* Online Number: professional app pass. */
body:has(.connect-workspace) {
    --dekeree-topbar-height: 74px;
    --connect-accent: #128c5a;
    --connect-accent-strong: #08764b;
    --connect-text: #111827;
    --connect-muted: #667781;
    --connect-line: #e5ebe8;
    --connect-soft: #f4f7f5;
    background: #f3f5f4 !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 600 !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 1px 0 rgba(17, 24, 39, .08) !important;
}

body:has(.connect-workspace) .connect-workspace {
    display: grid !important;
    grid-template-columns: 72px minmax(330px, 420px) minmax(0, 1fr) !important;
    grid-template-areas: "rail chats conversation" !important;
    gap: 0 !important;
    width: min(1760px, calc(100vw - 20px)) !important;
    max-width: none !important;
    height: calc(100dvh - var(--dekeree-topbar-height) - 14px) !important;
    min-height: 620px !important;
    margin: 7px auto !important;
    padding: 0 !important;
    border: 1px solid var(--connect-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .08) !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .connect-numbers-column,
body:has(.connect-workspace) .connect-saved-column,
body:has(.connect-workspace) .connect-conversation-panel {
    position: relative !important;
    top: auto !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .connect-numbers-column {
    grid-area: rail !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 8px !important;
    border-right: 1px solid var(--connect-line) !important;
    background: #fbfcfb !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
}

body:has(.connect-workspace) .connect-saved-column {
    grid-area: chats !important;
    padding: 22px 16px 14px !important;
    border-right: 1px solid var(--connect-line) !important;
    background: #ffffff !important;
}

body:has(.connect-workspace) .connect-conversation-panel {
    grid-area: conversation !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    background:
        radial-gradient(circle at 35% 12%, rgba(18, 140, 90, .06), transparent 30%),
        linear-gradient(180deg, #fbfdfc 0%, #f7faf8 100%) !important;
}

body:has(.connect-workspace) .connect-phonebook-panel {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 12px !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:has(.connect-workspace) .connect-phonebook-panel > .section-title-row:first-child {
    min-height: 48px !important;
}

body:has(.connect-workspace) .connect-phonebook-panel > .section-title-row:first-child h2::before {
    color: var(--connect-text) !important;
    font-size: 2.05rem !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

body:has(.connect-workspace) .connect-panel-search {
    min-height: 50px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f4f5f4 !important;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .02) !important;
}

body:has(.connect-workspace) .connect-panel-search input {
    min-height: 50px !important;
    color: var(--connect-text) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

body:has(.connect-workspace) .connect-chat-filter-row {
    gap: 8px !important;
    padding-bottom: 2px !important;
}

body:has(.connect-workspace) .connect-chat-filter-row button,
body:has(.connect-workspace) .connect-chat-filter-row a {
    min-height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid #d7dedb !important;
    border-radius: 999px !important;
    color: #475569 !important;
    background: #ffffff !important;
    font-size: .92rem !important;
    font-weight: 700 !important;
}

body:has(.connect-workspace) .connect-chat-filter-row .is-active {
    border-color: #bce9cb !important;
    color: var(--connect-accent-strong) !important;
    background: #dcfce7 !important;
}

body:has(.connect-workspace) .connect-chat-list-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
    scrollbar-width: thin !important;
}

body:has(.connect-workspace) .connect-chat-list-scroll .connect-contact-list,
body:has(.connect-workspace) .connect-chat-list-scroll .connect-group-list,
body:has(.connect-workspace) .connect-chat-list-scroll .connect-update-list {
    display: grid !important;
    gap: 0 !important;
}

body:has(.connect-workspace) .connect-chat-list-scroll .connect-updates-section {
    display: grid !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid #eef2ef !important;
}

body:has(.connect-workspace) .connect-chat-list-scroll .connect-updates-section[hidden] {
    display: none !important;
}

body:has(.connect-workspace) .connect-updates-section > .section-title-row {
    padding: 4px 2px 2px !important;
}

body:has(.connect-workspace) .connect-updates-section > .section-title-row h2 {
    font-size: 1rem !important;
}

body:has(.connect-workspace) .connect-update-item {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 54px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 76px !important;
    padding: 9px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2ef !important;
    border-radius: 0 !important;
    color: #17211c !important;
    background: transparent !important;
    transition: background .16s ease, border-radius .16s ease, transform .16s ease !important;
}

body:has(.connect-workspace) .connect-update-item:hover {
    border-bottom-color: transparent !important;
    border-radius: 14px !important;
    background: #f6f8f7 !important;
}

body:has(.connect-workspace) .connect-update-avatar {
    position: relative !important;
    display: grid !important;
    width: 50px !important;
    height: 50px !important;
    place-items: center !important;
    border: 3px solid transparent !important;
    border-radius: 999px !important;
    color: #0f4f3b !important;
    background:
        linear-gradient(#eefaf4, #eefaf4) padding-box,
        linear-gradient(135deg, #19c37d, #2678c9, #e13a84) border-box !important;
    font-weight: 900 !important;
}

body:has(.connect-workspace) .connect-update-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
}

body:has(.connect-workspace) .connect-update-avatar > [data-lucide] {
    position: absolute !important;
    right: -4px !important;
    bottom: -4px !important;
    width: 22px !important;
    height: 22px !important;
    padding: 4px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: #176b4d !important;
    box-shadow: 0 8px 16px rgba(23, 107, 77, .2) !important;
}

body:has(.connect-workspace) .connect-update-copy {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

body:has(.connect-workspace) .connect-update-copy strong,
body:has(.connect-workspace) .connect-update-copy small,
body:has(.connect-workspace) .connect-update-copy em {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body:has(.connect-workspace) .connect-update-copy strong {
    color: #17211c !important;
    font-size: .95rem !important;
    font-weight: 900 !important;
}

body:has(.connect-workspace) .connect-update-copy small {
    color: #176b4d !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
}

body:has(.connect-workspace) .connect-update-copy em {
    color: #667781 !important;
    font-size: .78rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

body:has(.connect-workspace) .connect-update-media {
    display: grid !important;
    width: 50px !important;
    height: 50px !important;
    place-items: center !important;
    border-radius: 14px !important;
    color: #176b4d !important;
    background: #eef7f2 !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .connect-update-media img,
body:has(.connect-workspace) .connect-update-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body:has(.connect-workspace) .connect-contact-list .hs-number-plate.contact,
body:has(.connect-workspace) .connect-group-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 74px !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2ef !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .16s ease, border-radius .16s ease, transform .16s ease !important;
}

body:has(.connect-workspace) .connect-contact-item:hover .hs-number-plate.contact,
body:has(.connect-workspace) .connect-group-item:hover {
    background: #f6f8f7 !important;
}

body:has(.connect-workspace) .connect-contact-item.active .hs-number-plate.contact,
body:has(.connect-workspace) .connect-group-item.active {
    border-bottom-color: transparent !important;
    border-radius: 14px !important;
    background: #e7f4ed !important;
}

body:has(.connect-workspace) .connect-contact-list .hs-number-orb,
body:has(.connect-workspace) .connect-group-avatar,
body:has(.connect-workspace) .connect-sms-profile-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border: 1.5px solid #d5ded9 !important;
    color: #0f5138 !important;
    background: #ffffff !important;
}

body:has(.connect-workspace) .connect-contact-list .hs-number-orb img,
body:has(.connect-workspace) .connect-sms-profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body:has(.connect-workspace) .connect-contact-list .hs-number-plate.contact .hs-number-text small,
body:has(.connect-workspace) .connect-group-copy strong,
body:has(.connect-workspace) .connect-sms-profile-copy strong {
    max-width: 100% !important;
    color: var(--connect-text) !important;
    font-size: 1.02rem !important;
    font-weight: 760 !important;
    line-height: 1.16 !important;
    white-space: nowrap !important;
}

body:has(.connect-workspace) .connect-contact-list .hs-number-plate.contact .hs-number-text strong,
body:has(.connect-workspace) .connect-group-copy small,
body:has(.connect-workspace) .connect-sms-profile-copy em {
    color: var(--connect-muted) !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

body:has(.connect-workspace) .connect-contact-list .hs-number-plate.contact .hs-number-text em,
body:has(.connect-workspace) .connect-group-copy em {
    color: var(--connect-accent-strong) !important;
    font-size: .8rem !important;
    font-weight: 780 !important;
}

body:has(.connect-workspace) .connect-unread-badge {
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    background: #20b66a !important;
    color: #ffffff !important;
    box-shadow: none !important;
    animation: none !important;
}

body:has(.connect-workspace) .connect-chat-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 140 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 78px !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--connect-line) !important;
    background: rgba(244, 252, 248, .96) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .04) !important;
}

body:has(.connect-workspace) .connect-sms-profile-card {
    min-width: 0 !important;
}

body:has(.connect-workspace) .connect-sms-profile-copy {
    min-width: 0 !important;
    gap: 2px !important;
}

body:has(.connect-workspace) .connect-sms-profile-copy small {
    color: #738078 !important;
    font-size: .78rem !important;
    font-weight: 740 !important;
}

body:has(.connect-workspace) .connect-chat-actions {
    gap: 8px !important;
}

body:has(.connect-workspace) .connect-chat-actions .copy-number-button,
body:has(.connect-workspace) .connect-chat-actions .icon-only-action,
body:has(.connect-workspace) .connect-contact-settings-popover summary {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid #dbe6e0 !important;
    border-radius: 999px !important;
    color: #0f5138 !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(17, 24, 39, .06) !important;
}

body:has(.connect-workspace) .connect-chat-actions .primary-button.icon-only-action {
    color: #ffffff !important;
    background: var(--connect-accent-strong) !important;
}

body:has(.connect-workspace) .connect-chat-actions span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

/* Online Number: one fixed conversation header for personal chats and groups. */
body:has(.connect-workspace) .connect-conversation-panel > .connect-fixed-chat-head {
    position: sticky !important;
    top: var(--dekeree-topbar-height, 72px) !important;
    z-index: 360 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 78px !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid var(--connect-line, #e5ebe8) !important;
    background: rgba(240, 250, 245, .98) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .06) !important;
}

body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
}

body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy {
    display: grid !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 1px !important;
}

body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy small,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy strong,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy em {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy strong {
    color: var(--connect-text, #111827) !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
}

body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy em {
    color: var(--connect-muted, #667781) !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
}

body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    min-width: max-content !important;
    max-width: 210px !important;
}

body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .copy-number-button,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .icon-only-action,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-contact-settings-popover summary,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-save-popover > summary {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
}

@media (max-width: 900px) {
    body:has(.connect-workspace) .connect-conversation-panel > .connect-fixed-chat-head {
        gap: 8px !important;
        padding: 9px 12px !important;
    }

    body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-avatar {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions {
        gap: 5px !important;
        max-width: 138px !important;
    }

    body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .copy-number-button,
    body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .icon-only-action,
    body:has(.connect-workspace) .connect-fixed-chat-head .connect-contact-settings-popover summary,
    body:has(.connect-workspace) .connect-fixed-chat-head .connect-save-popover > summary {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }
}

body:has(.connect-workspace) .connect-conversation-panel .circle-chat {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-message-list {
    min-height: 0 !important;
    height: auto !important;
    padding: 26px 28px 18px !important;
    overflow-y: auto !important;
    background:
        radial-gradient(circle at 22px 22px, rgba(18, 140, 90, .035) 0 2px, transparent 2px 34px),
        radial-gradient(circle at 66px 62px, rgba(17, 24, 39, .022) 0 2px, transparent 2px 36px),
        linear-gradient(180deg, #fbfdfc, #ffffff) !important;
    background-size: 82px 82px, 104px 104px, auto !important;
    scrollbar-width: thin !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message {
    max-width: min(560px, 72%) !important;
    padding: 9px 12px 8px !important;
    border-radius: 17px 17px 17px 6px !important;
    color: #24312c !important;
    background: #eef1f0 !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .055) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message.mine {
    border-radius: 17px 17px 6px 17px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #18b66b, #13a35f) !important;
    box-shadow: 0 16px 34px rgba(18, 166, 95, .18) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-meta {
    opacity: .88 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-read-dots {
    color: rgba(255, 255, 255, .7) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message:not(.mine) .circle-message-read-dots {
    color: #7b8781 !important;
}

body:has(.connect-workspace) .compact-disappearing-panel {
    justify-self: end !important;
    width: auto !important;
    max-width: min(360px, 92%) !important;
    margin: 0 20px 12px auto !important;
    border: 1px solid #dce8e2 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 16px 36px rgba(17, 24, 39, .08) !important;
}

body:has(.connect-workspace) .compact-disappearing-panel summary {
    min-height: 44px !important;
    padding: 6px 12px !important;
}

body:has(.connect-workspace) .compact-disappearing-panel .circle-disappearing-copy small {
    display: none !important;
}

body:has(.connect-workspace) .compact-disappearing-panel[open] {
    width: min(420px, calc(100% - 40px)) !important;
    border-radius: 18px !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-chat-form {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto !important;
    align-items: end !important;
    gap: 8px !important;
    padding: 14px 18px 10px !important;
    border-top: 1px solid var(--connect-line) !important;
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(16px) !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-chat-form textarea.field {
    min-height: 52px !important;
    max-height: 130px !important;
    padding: 14px 18px !important;
    border: 1px solid #d9e3de !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--connect-text) !important;
    font-size: 1rem !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-file-button,
body:has(.connect-workspace) .connect-conversation-panel .circle-record-button,
body:has(.connect-workspace) .connect-conversation-panel .circle-emoji-button,
body:has(.connect-workspace) .connect-conversation-panel .circle-send-button {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    border-radius: 999px !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-send-button {
    color: #ffffff !important;
    background: var(--connect-accent-strong) !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-file-note {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    color: #667781 !important;
    font-size: .76rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

body:has(.connect-workspace) .connect-settings-drawer[open] {
    position: fixed !important;
    top: calc(var(--dekeree-topbar-height) + 14px) !important;
    left: max(14px, calc((100vw - min(1760px, calc(100vw - 20px))) / 2 + 84px)) !important;
    z-index: 720 !important;
    width: min(410px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - var(--dekeree-topbar-height) - 34px) !important;
    overflow-y: auto !important;
    border: 1px solid #d9e5df !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 80px rgba(17, 24, 39, .22) !important;
}

body:has(.connect-workspace) .connect-settings-drawer[open] > summary {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #ffffff !important;
}

body:has(.connect-workspace) .connect-workspace:has(.connect-settings-drawer[open]) {
    grid-template-columns: 72px minmax(330px, 420px) minmax(0, 1fr) !important;
    grid-template-areas: "rail chats conversation" !important;
}

body:has(.connect-workspace) .connect-workspace:has(.connect-settings-drawer[open]) .connect-dekeree-links,
body:has(.connect-workspace) .connect-workspace:has(.connect-settings-drawer[open]) .connect-meeting-mini-panel,
body:has(.connect-workspace) .connect-workspace:has(.connect-settings-drawer[open]) .connect-directory-panel {
    display: grid !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-floating-panel,
body .connect-sms-chat .circle-message-reaction-panel.is-floating-panel,
body .connect-sms-chat .circle-message.mine .circle-message-tools-panel.is-floating-panel,
body .connect-sms-chat .circle-message.mine .circle-message-reaction-panel.is-floating-panel,
body .connect-sms-chat .circle-message:not(.mine) .circle-message-tools-panel.is-floating-panel,
body .connect-sms-chat .circle-message:not(.mine) .circle-message-reaction-panel.is-floating-panel {
    position: fixed !important;
    top: var(--message-panel-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--message-panel-left) !important;
    z-index: 9000 !important;
    max-height: var(--message-panel-max-height) !important;
    overflow-y: auto !important;
}

body .connect-sms-chat .circle-message-tools-panel.is-floating-panel {
    width: 244px !important;
    border-radius: 20px !important;
}

body .connect-sms-chat .circle-message-reaction-panel.is-floating-panel {
    width: max-content !important;
    border-radius: 999px !important;
}

body .connect-sms-chat .circle-message-options-list button,
body .connect-sms-chat .circle-message-options-list .circle-message-delete-button,
body .connect-sms-chat .circle-message-options-list .circle-message-menu-disabled {
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: .95rem !important;
}

/* Online Number: header belongs to the chat panel, while only messages scroll. */
body:has(.connect-workspace) .connect-conversation-panel > .connect-fixed-chat-head {
    position: relative !important;
    top: auto !important;
    z-index: 420 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 78px !important;
    transform: none !important;
}

body:has(.connect-workspace) .connect-conversation-panel > .connect-fixed-chat-head + .circle-chat {
    grid-row: 2 !important;
    min-height: 0 !important;
}

@media (max-width: 1180px) {
    body:has(.connect-workspace) {
        overflow: auto !important;
    }

    body:has(.connect-workspace) .connect-workspace {
        grid-template-columns: 68px minmax(300px, 390px) minmax(0, 1fr) !important;
        width: calc(100vw - 12px) !important;
        min-height: calc(100dvh - var(--dekeree-topbar-height) - 12px) !important;
    }
}

@media (max-width: 860px) {
    body:has(.connect-workspace) .connect-workspace {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        grid-template-areas:
            "rail chats"
            "rail conversation" !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    body:has(.connect-workspace) .connect-saved-column,
    body:has(.connect-workspace) .connect-conversation-panel {
        height: auto !important;
        min-height: 560px !important;
    }

    body:has(.connect-workspace) .connect-saved-column {
        max-height: 46dvh !important;
    }
}

@media (max-width: 620px) {
    body:has(.connect-workspace) .connect-workspace {
        display: block !important;
        width: calc(100vw - 8px) !important;
        border-radius: 16px !important;
    }

    body:has(.connect-workspace) .connect-numbers-column {
        display: grid !important;
        grid-template-columns: repeat(5, 46px) !important;
        justify-content: center !important;
        height: auto !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--connect-line) !important;
    }

    body:has(.connect-workspace) .connect-saved-column,
    body:has(.connect-workspace) .connect-conversation-panel {
        min-height: auto !important;
    }

    body:has(.connect-workspace) .connect-conversation-panel .circle-message-list {
        padding: 18px 12px !important;
    }

    body:has(.connect-workspace) .connect-sms-chat .circle-message {
        max-width: min(86%, 520px) !important;
    }

    body:has(.connect-workspace) .connect-chat-head {
        padding: 10px 12px !important;
    }

    body:has(.connect-workspace) .connect-conversation-panel .circle-chat-form {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        padding: 10px !important;
    }

    body:has(.connect-workspace) .connect-conversation-panel .circle-record-button,
    body:has(.connect-workspace) .connect-conversation-panel .circle-emoji-button {
        display: none !important;
    }
}

/* Profiles: easy update editor */
body .profile-create-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
    gap: 20px !important;
}

body .profile-easy-start {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body .profile-easy-start > div,
body .profile-info-map a,
body .profile-entry-box,
body .profile-section-box,
body .profile-upload-box,
body .profile-contact-example,
body .profile-update-checklist a {
    border-radius: 8px !important;
}

body .profile-easy-start > div,
body .profile-entry-box,
body .profile-photo-adjuster,
body .profile-section-box {
    border-color: #dce8e2 !important;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .055) !important;
}

body .profile-easy-save-strip {
    position: sticky !important;
    top: 84px !important;
    z-index: 80 !important;
}

body .profile-field-tips,
body .profile-fact-list {
    display: flex !important;
    flex-wrap: wrap !important;
}

body .profile-update-checklist a {
    min-height: 64px !important;
}

body .profile-side-save-card {
    position: sticky !important;
    top: 92px !important;
}

body .profile-photo-cropper {
    margin-inline: auto !important;
}

body .profile-section-box textarea.field,
body .profile-entry-box textarea.field {
    line-height: 1.45 !important;
}

@media (max-width: 980px) {
    body .profile-create-layout,
    body .profile-easy-start,
    body .profile-info-map,
    body .profile-section-box-grid,
    body .profile-upload-grid {
        grid-template-columns: 1fr !important;
    }

    body .profile-create-side,
    body .profile-side-save-card,
    body .profile-easy-save-strip {
        position: static !important;
    }
}

/* Online Number: one reusable top identity bar for people and groups. */
body:has(.connect-workspace) .connect-conversation-panel > .connect-unified-chat-head {
    position: relative !important;
    top: auto !important;
    z-index: 520 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    min-height: 78px !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid #dfe9e3 !important;
    background: rgba(240, 250, 245, .98) !important;
    box-shadow: 0 12px 30px rgba(17, 24, 39, .055) !important;
    backdrop-filter: blur(18px) !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-width: 0 !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-copy {
    min-width: 0 !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-copy strong,
body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-copy em,
body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-copy small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-chat-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: max-content !important;
}

body:has(.connect-workspace) .connect-conversation-panel,
body:has(.connect-workspace) .connect-conversation-panel .circle-chat {
    min-height: 0 !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-message-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-padding-top: 18px !important;
}

body .connect-workspace.is-switching-chat .connect-conversation-panel {
    opacity: 1 !important;
    transition: none !important;
}

body:has(.connect-workspace) .connect-mini-icon-link.connect-meeting-schedule-chip {
    overflow: visible !important;
    isolation: isolate !important;
}

body:has(.connect-workspace) .connect-mini-icon-link.connect-meeting-schedule-chip span {
    position: absolute !important;
    right: calc(100% + 8px) !important;
    top: 50% !important;
    width: max-content !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
    color: #176b4d !important;
    border: 1px solid #cde9db !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 12px 28px rgba(17, 24, 39, .12) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(8px, -50%) scale(.96) !important;
    animation: d-meeting-label-peek 5.8s ease-in-out infinite !important;
}

body:has(.connect-workspace) .connect-mini-icon-link.connect-meeting-schedule-chip:hover span,
body:has(.connect-workspace) .connect-mini-icon-link.connect-meeting-schedule-chip:focus-visible span {
    opacity: 1 !important;
    transform: translate(0, -50%) scale(1) !important;
    animation: none !important;
}

body:has(.connect-workspace) .connect-mini-icon-link.connect-meeting-schedule-chip::after {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: 999px;
    background: rgba(23, 107, 77, .1);
    opacity: 0;
    transform: scale(.7);
    animation: d-meeting-icon-pulse 2.8s ease-out infinite;
}

body:has(.connect-workspace) .connect-group-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
}

body:has(.connect-workspace) .connect-group-avatar:has(img) {
    color: transparent !important;
    background: #ffffff !important;
    border-color: #d7e6df !important;
    overflow: visible !important;
}

body:has(.connect-workspace) .file-field {
    display: grid !important;
    gap: 7px !important;
    height: auto !important;
    padding: 10px 12px !important;
}

body:has(.connect-workspace) .file-field span {
    color: #667781 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

body:has(.connect-workspace) .file-field input[type="file"] {
    width: 100% !important;
    color: #1f2a44 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message {
    overflow: visible !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button {
    right: -18px !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    border: 1px solid rgba(31, 42, 68, .1) !important;
    color: #1f2a44 !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 10px 24px rgba(31, 42, 68, .12), 0 0 0 3px rgba(255, 255, 255, .75) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-reaction-menu-button {
    right: auto !important;
    left: -18px !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button {
    top: calc(50% - 15px) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button {
    top: calc(50% + 17px) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button [data-lucide],
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button [data-lucide] {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.5 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-tools-panel.is-floating-panel,
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-panel.is-floating-panel {
    max-width: calc(100vw - 28px) !important;
}

/* Online Number: clean support-chat conversation style. */
body:has(.connect-workspace) .connect-conversation-panel {
    border: 0 !important;
    border-radius: 22px !important;
    background: #e3dbd1 !important;
    box-shadow: 0 18px 46px rgba(31, 42, 68, .12) !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif !important;
}

body:has(.connect-workspace) .connect-conversation-panel > .connect-unified-chat-head,
body:has(.connect-workspace) .connect-conversation-panel > .connect-fixed-chat-head {
    min-height: 86px !important;
    padding: 16px 22px !important;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    color: #ffffff !important;
    background: #096655 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-card,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-card {
    gap: 12px !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-avatar,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-avatar {
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    color: #10231f !important;
    background: #dfff79 !important;
    box-shadow: none !important;
    font-size: 19px !important;
    font-weight: 900 !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-avatar img,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-avatar img {
    border: 2px solid rgba(255, 255, 255, .78) !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-kind-dot,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-kind-dot {
    right: 0 !important;
    bottom: 2px !important;
    width: 10px !important;
    height: 10px !important;
    border: 2px solid #096655 !important;
    background: #dfff79 !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-copy small,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy small {
    margin: 0 0 1px !important;
    color: rgba(255, 255, 255, .72) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-copy strong,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy strong {
    color: #ffffff !important;
    font-size: clamp(20px, 1.7vw, 25px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: -.01em !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-sms-profile-copy em,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-sms-profile-copy em {
    color: #effff8 !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 650 !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-chat-actions,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions {
    gap: 8px !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-chat-actions .copy-number-button,
body:has(.connect-workspace) .connect-unified-chat-head .connect-chat-actions .icon-only-action,
body:has(.connect-workspace) .connect-unified-chat-head .connect-contact-settings-popover summary,
body:has(.connect-workspace) .connect-unified-chat-head .connect-save-popover > summary,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .copy-number-button,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .icon-only-action,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-contact-settings-popover summary,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-save-popover > summary {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, .13) !important;
    box-shadow: none !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-chat-actions .primary-button,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .primary-button {
    background: rgba(255, 255, 255, .2) !important;
}

body:has(.connect-workspace) .connect-unified-chat-head .connect-chat-actions .copy-number-button:hover,
body:has(.connect-workspace) .connect-unified-chat-head .connect-chat-actions .icon-only-action:hover,
body:has(.connect-workspace) .connect-unified-chat-head .connect-contact-settings-popover summary:hover,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .copy-number-button:hover,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-chat-actions .icon-only-action:hover,
body:has(.connect-workspace) .connect-fixed-chat-head .connect-contact-settings-popover summary:hover {
    background: rgba(255, 255, 255, .24) !important;
    transform: translateY(-1px) !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-chat {
    background: #e3dbd1 !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-message-list {
    padding: 26px 22px 20px !important;
    background: #e3dbd1 !important;
    background-image: none !important;
    gap: 13px !important;
    overflow-x: hidden !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-date {
    margin: 8px auto !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    color: rgba(20, 32, 29, .58) !important;
    background: rgba(255, 255, 255, .34) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-row {
    max-width: 82% !important;
    gap: 7px !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-row.mine {
    max-width: 82% !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-avatar {
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message {
    max-width: min(560px, 100%) !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 12px 12px 12px 3px !important;
    color: #030712 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message.mine {
    border-radius: 12px 12px 3px 12px !important;
    color: #030712 !important;
    background: #d9ffc8 !important;
    box-shadow: none !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message p,
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine p,
body:has(.connect-workspace) .connect-sms-chat .circle-message p[data-message-body],
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine p[data-message-body] {
    color: #030712 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message.mine:has(.circle-delivery-receipt.is-read) p,
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine:has(.circle-delivery-receipt.is-read) p[data-message-body],
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine:has(.circle-delivery-receipt.is-read) p[data-message-body] > span {
    color: #006d2f !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-meta {
    gap: 6px !important;
    margin-top: 6px !important;
    color: rgba(3, 7, 18, .48) !important;
    opacity: 1 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-meta strong,
body:has(.connect-workspace) .connect-sms-chat .circle-message-meta small,
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-meta strong,
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-meta small,
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-meta span {
    color: rgba(3, 7, 18, .5) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-read-dots,
body:has(.connect-workspace) .connect-sms-chat .circle-message:not(.mine) .circle-message-read-dots {
    color: rgba(3, 7, 18, .46) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-delivery-receipt {
    gap: 5px !important;
    min-height: 19px !important;
    padding: 0 !important;
    border: 0 !important;
    color: rgba(3, 7, 18, .5) !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-delivery-dots {
    width: 9px !important;
    min-width: 9px !important;
    height: 9px !important;
    gap: 0 !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-delivery-dots i {
    display: none !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-delivery-receipt.is-read .circle-delivery-dots {
    background: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .14) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-delivery-receipt.is-sent .circle-delivery-label,
body:has(.connect-workspace) .connect-sms-chat .circle-delivery-receipt.is-read .circle-delivery-label,
body:has(.connect-workspace) .connect-sms-chat .circle-delivery-label {
    display: inline !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    color: rgba(3, 7, 18, .5) !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button {
    color: #096655 !important;
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(9, 102, 85, .14) !important;
    box-shadow: 0 8px 18px rgba(31, 42, 68, .12) !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-chat-form {
    padding: 14px 18px 12px !important;
    border-top: 1px solid rgba(20, 32, 29, .08) !important;
    background: #f7f3ed !important;
    backdrop-filter: none !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-chat-form textarea.field {
    border-color: rgba(20, 32, 29, .12) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-file-button,
body:has(.connect-workspace) .connect-conversation-panel .circle-record-button,
body:has(.connect-workspace) .connect-conversation-panel .circle-emoji-button {
    border-color: rgba(20, 32, 29, .1) !important;
    color: #096655 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-send-button {
    color: #ffffff !important;
    background: #096655 !important;
    box-shadow: none !important;
}

body:has(.connect-workspace) .connect-conversation-panel .circle-file-note {
    color: rgba(20, 32, 29, .56) !important;
}

@media (max-width: 860px) {
    body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button,
    body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button,
    body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button,
    body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-reaction-menu-button {
        right: 6px !important;
        left: auto !important;
    }
}

@keyframes d-meeting-label-peek {
    0%, 62%, 100% {
        opacity: 0;
        transform: translate(8px, -50%) scale(.96);
    }

    10%, 34% {
        opacity: 1;
        transform: translate(0, -50%) scale(1);
    }
}

@keyframes d-meeting-icon-pulse {
    0% {
        opacity: .55;
        transform: scale(.74);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* Online Number: final viewport lock so every selected person/group keeps the same visible header. */
html:has(.connect-workspace),
body:has(.connect-workspace) {
    height: 100% !important;
}

body:has(.connect-workspace) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) > .topbar {
    position: relative !important;
    top: auto !important;
    z-index: 950 !important;
    flex: 0 0 auto !important;
}

body:has(.connect-workspace) > .site-footer,
body:has(.connect-workspace) > .form-shell {
    display: none !important;
}

body:has(.connect-workspace) > .connect-workspace {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    margin-top: 0 !important;
}

body:has(.connect-workspace) .connect-workspace {
    align-items: stretch !important;
}

body:has(.connect-workspace) .connect-conversation-panel {
    display: grid !important;
    grid-template-rows: 78px minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .connect-conversation-panel > .connect-unified-chat-head,
body:has(.connect-workspace) .connect-conversation-panel > .connect-fixed-chat-head {
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    align-self: stretch !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    overflow: visible !important;
    transform: none !important;
}

body:has(.connect-workspace) .connect-conversation-panel > .connect-contact-note {
    position: absolute !important;
    top: 88px !important;
    left: 18px !important;
    right: 18px !important;
    z-index: 12 !important;
    margin: 0 !important;
}

body:has(.connect-workspace) .connect-conversation-panel > .circle-chat {
    grid-row: 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body:has(.connect-workspace) .connect-conversation-panel > .connect-conversation-empty {
    grid-row: 1 / -1 !important;
    min-height: 0 !important;
}

body:has(.connect-workspace) .connect-conversation-panel > .connect-unified-chat-head + .circle-chat .circle-message-list,
body:has(.connect-workspace) .connect-conversation-panel > .connect-fixed-chat-head + .circle-chat .circle-message-list {
    padding-top: 22px !important;
}

@media (max-width: 860px) {
    body:has(.connect-workspace) {
        overflow: auto !important;
    }

    body:has(.connect-workspace) > .connect-workspace {
        height: auto !important;
        overflow: visible !important;
    }

    body:has(.connect-workspace) .connect-conversation-panel {
        height: auto !important;
        min-height: 620px !important;
    }
}

/* Online Number final message controls: keep option and emoji buttons attached to the bubble. */
body:has(.connect-workspace) .connect-sms-chat .circle-message-row,
body:has(.connect-workspace) .connect-sms-chat .circle-message {
    overflow: visible !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button {
    right: -16px !important;
    left: auto !important;
    z-index: 40 !important;
    width: 30px !important;
    height: 30px !important;
    opacity: 0 !important;
    color: #1f2a44 !important;
    border: 1px solid rgba(31, 42, 68, .12) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 12px 28px rgba(31, 42, 68, .14), 0 0 0 3px rgba(255, 255, 255, .72) !important;
    transform: translateY(-50%) scale(.96) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-reaction-menu-button {
    right: auto !important;
    left: -16px !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button {
    top: calc(50% - 17px) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button {
    top: calc(50% + 17px) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message:hover .circle-message-inline-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message:hover .circle-message-reaction-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message-row:hover .circle-message-inline-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message-row:hover .circle-message-reaction-menu-button,
body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button[aria-expanded="true"],
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button[aria-expanded="true"] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button:hover,
body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button:focus-visible,
body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button[aria-expanded="true"],
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button:hover,
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button:focus-visible,
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button[aria-expanded="true"] {
    transform: translateY(-50%) scale(1.04) !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-tools-panel.is-floating-panel,
body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-panel.is-floating-panel {
    max-width: calc(100vw - 28px) !important;
    max-height: var(--message-panel-max-height, calc(100vh - 28px)) !important;
    overflow: auto !important;
}

/* Keep the Online Number options menu visibly attached while staying inside the screen. */
body:has(.connect-workspace) .connect-sms-chat .circle-message-tools-panel.is-floating-panel {
    position: fixed !important;
    top: var(--message-panel-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--message-panel-left) !important;
    width: min(244px, calc(100vw - 28px)) !important;
    max-height: var(--message-panel-max-height, min(390px, calc(100vh - 28px))) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9000 !important;
}

body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-panel.is-floating-panel {
    position: fixed !important;
    top: var(--message-panel-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--message-panel-left) !important;
    z-index: 9001 !important;
}

@media (max-width: 760px) {
    body:has(.connect-workspace) .connect-sms-chat .circle-message-inline-menu-button,
    body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-menu-button {
        right: -10px !important;
        opacity: .96 !important;
        pointer-events: auto !important;
    }

    body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-inline-menu-button,
    body:has(.connect-workspace) .connect-sms-chat .circle-message.mine .circle-message-reaction-menu-button {
        left: -10px !important;
    }

    body:has(.connect-workspace) .connect-sms-chat .circle-message-tools-panel.is-floating-panel,
    body:has(.connect-workspace) .connect-sms-chat .circle-message-reaction-panel.is-floating-panel {
        position: fixed !important;
        top: var(--message-panel-top) !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--message-panel-left) !important;
    }
}

/* Online Number: keep unread message counts visible in the chat list. */
body:has(.connect-workspace) .connect-contact-list .hs-number-plate.contact,
body:has(.connect-workspace) .connect-group-item {
    overflow: visible !important;
}

body:has(.connect-workspace) .connect-unread-badge,
body:has(.connect-workspace) .connect-group-meta b {
    display: grid !important;
    place-items: center !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 7px !important;
    border: 2px solid #ffffff !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: #1fb45f !important;
    box-shadow: 0 8px 18px rgba(31, 180, 95, .2) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body:has(.connect-workspace) .connect-group-meta {
    display: grid !important;
    gap: 5px !important;
    justify-items: end !important;
    align-items: center !important;
    min-width: 34px !important;
}

body:has(.connect-workspace) .connect-group-item.has-unread .connect-group-copy strong,
body:has(.connect-workspace) .connect-contact-item:has(.connect-unread-badge) .hs-number-text small {
    color: #111b21 !important;
    font-weight: 900 !important;
}

/* Register: country and verification controls. */
.register-verification-card {
    gap: 14px;
}

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

.register-verification-choice {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 15px 16px 15px 46px;
    border: 1px solid rgba(15, 118, 110, .16);
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff, #f7fbfa);
    color: #14231f;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.register-verification-choice:hover,
.register-verification-choice.is-active {
    border-color: rgba(37, 99, 235, .45);
    background: linear-gradient(145deg, #ffffff, #eef6ff);
    box-shadow: 0 18px 38px rgba(15, 78, 130, .12);
    transform: translateY(-1px);
}

.register-verification-choice input {
    position: absolute;
    left: 16px;
    top: 18px;
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

.register-verification-choice strong {
    font-size: 15px;
    line-height: 1.2;
}

.register-verification-choice small,
.register-verification-note {
    color: #66756f;
    font-size: 13px;
    line-height: 1.35;
}

.register-phone-fields {
    transition: opacity .2s ease, transform .2s ease, max-height .2s ease;
}

.register-phone-fields.is-hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-4px);
}

.register-phone-card {
    border-color: rgba(6, 120, 88, .18);
    background:
        radial-gradient(circle at top right, rgba(6, 120, 88, .08), transparent 34%),
        linear-gradient(145deg, #ffffff, #f8fcfb);
}

.register-phone-input-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.register-phone-input-wrap > strong {
    min-width: 76px;
    height: 50px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(6, 120, 88, .2);
    border-radius: 16px;
    color: #067858;
    background: #eefaf6;
    font-size: 1.05rem;
    font-weight: 900;
}

.register-phone-input-wrap .field {
    width: 100%;
}

.is-hidden {
    display: none !important;
}

.email-approval-shell {
    min-height: calc(100vh - 220px);
    display: grid;
    place-items: center;
    padding: clamp(32px, 6vw, 84px) 20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 191, 166, 0.12), transparent 32%),
        linear-gradient(135deg, #f7fbfa 0%, #ffffff 50%, #eef8f5 100%);
}

.email-approval-card {
    width: min(760px, 100%);
    border: 1px solid rgba(6, 120, 88, 0.18);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 30px 90px rgba(31, 42, 68, 0.12);
    padding: clamp(28px, 5vw, 56px);
    text-align: center;
    animation: approvalRise 520ms ease both;
}

.email-approval-mark {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #067858;
    background: linear-gradient(135deg, rgba(0, 191, 166, 0.18), rgba(255, 255, 255, 0.9));
    box-shadow: inset 0 0 0 1px rgba(6, 120, 88, 0.16), 0 18px 44px rgba(6, 120, 88, 0.16);
}

.email-approval-mark svg {
    width: 40px;
    height: 40px;
}

.email-approval-card h1 {
    margin: 0;
    color: #0f1f1b;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.email-approval-card .lede {
    max-width: 620px;
    margin: 18px auto 0;
    color: #4f635d;
}

.email-approval-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0;
}

.email-approval-steps span {
    min-height: 86px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    border: 1px solid rgba(6, 120, 88, 0.14);
    border-radius: 18px;
    color: #14332d;
    background: #fbfefd;
    font-weight: 800;
}

.email-approval-steps svg {
    color: #067858;
}

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

.email-approval-actions form {
    margin: 0;
}

.email-approval-note {
    margin: 24px auto 0;
    max-width: 560px;
    color: #6b7c77;
    font-size: 0.95rem;
}

@keyframes approvalRise {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 720px) {
    .email-approval-steps {
        grid-template-columns: 1fr;
    }
}

.opportunity-country-scope-options {
    margin: 1rem 0;
}

.field-help {
    color: #63766f;
    display: block;
    font-size: .88rem;
    line-height: 1.4;
    margin-top: .4rem;
}

.opportunity-country-checkbox-panel {
    background: #fbfefd;
    border: 1px solid rgba(16, 83, 67, .14);
    border-radius: 18px;
    padding: .75rem;
}

.opportunity-country-search {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(16, 83, 67, .14);
    border-radius: 999px;
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: .55rem .8rem;
}

.opportunity-country-search svg {
    color: #0f7a5c;
    height: 18px;
    width: 18px;
}

.opportunity-country-search input {
    background: transparent;
    border: 0;
    font: inherit;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.opportunity-country-checkbox-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    max-height: 320px;
    overflow: auto;
    padding-right: .25rem;
}

.opportunity-country-checkbox {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(16, 83, 67, .12);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: .55rem;
    min-height: 42px;
    padding: .6rem .7rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.opportunity-country-checkbox:hover,
.opportunity-country-checkbox:has(input:checked) {
    border-color: rgba(15, 122, 92, .42);
    box-shadow: 0 10px 26px rgba(15, 122, 92, .08);
    transform: translateY(-1px);
}

.opportunity-country-checkbox input {
    accent-color: #0f7a5c;
    height: 18px;
    width: 18px;
}

.opportunity-country-checkbox span {
    color: #17241f;
    font-weight: 700;
}

.opportunity-custom-details {
    border-top: 1px solid rgba(16, 83, 67, .12);
    margin-top: 1.1rem;
    padding-top: 1.1rem;
}

.custom-details-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.custom-details-head strong {
    color: #12251f;
    display: block;
    font-size: 1rem;
}

.custom-details-head p {
    color: #61746d;
    font-size: .9rem;
    line-height: 1.45;
    margin: .2rem 0 0;
}

.custom-details-list {
    display: grid;
    gap: .8rem;
}

.custom-detail-row {
    align-items: start;
    background: #fbfefd;
    border: 1px solid rgba(16, 83, 67, .12);
    border-radius: 16px;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(170px, .8fr) minmax(260px, 1.5fr) auto;
    padding: .85rem;
}

.custom-detail-remove {
    margin-top: 1.75rem;
}

.opportunity-media-picker {
    border-top: 1px solid rgba(16, 83, 67, .12);
    margin-top: 1.1rem;
    padding-top: 1.1rem;
}

.opportunity-media-picker label.secondary-button {
    cursor: pointer;
}

.opportunity-media-preview {
    align-items: center;
    background: #f7fbfa;
    border: 1px solid rgba(16, 83, 67, .12);
    border-radius: 18px;
    display: grid;
    gap: .75rem;
    margin-top: .75rem;
    padding: .85rem;
}

.opportunity-media-preview img,
.opportunity-media-preview video {
    background: #eef5f2;
    border-radius: 14px;
    display: block;
    max-height: 360px;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.opportunity-detail-media {
    background: #f7fbfa;
    border: 1px solid rgba(16, 83, 67, .12);
    border-radius: 20px;
    margin: 1rem 0 1.25rem;
    overflow: hidden;
}

.opportunity-detail-media img,
.opportunity-detail-media video {
    display: block;
    max-height: 520px;
    object-fit: contain;
    width: 100%;
}

@media (max-width: 760px) {
    .custom-details-head,
    .custom-detail-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .custom-detail-remove {
        justify-self: end;
        margin-top: 0;
    }
}

.register-verification-card.is-phone-verification {
    border-color: rgba(37, 99, 235, .25);
    box-shadow: 0 20px 55px rgba(37, 99, 235, .08);
}

.account-phone-verified {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    vertical-align: -2px;
    color: #2563eb;
    fill: color-mix(in srgb, #2563eb 18%, transparent);
}

@media (max-width: 760px) {
    .register-verification-options {
        grid-template-columns: 1fr;
    }
}

/* D Social: show the whole photo, full width, no forced square crop. */
body .d-status-media,
body .d-status-poster-card .d-status-media,
body .simple-status-card .d-status-media:not(.d-clip-stage),
body .d-status-poster-card .d-status-media:not(.d-clip-stage),
body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-clip-stage,
body .simple-status-card.d-status-poster-card .d-clip-stage {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    background: #101816 !important;
}

body .d-status-poster-card .d-status-media-gallery,
body .d-status-poster-card .d-status-media-gallery.has-two,
body .d-status-poster-card .d-status-media-gallery.has-three,
body .d-status-poster-card .d-status-media-gallery.has-many {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding: 0 !important;
    place-items: center;
    background: #101816 !important;
}

body .d-status-poster-card .d-status-media-gallery.has-three .d-status-gallery-item:first-child,
body .d-status-poster-card .d-status-gallery-item,
body .d-status-poster-card .d-status-media-gallery .d-status-gallery-item.active {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: unset !important;
    background: #101816 !important;
}

body .d-status-media img,
body .d-status-media video,
body .d-status-poster-card .d-status-media img,
body .d-status-poster-card .d-status-media video,
body .d-status-poster-card .d-status-gallery-item img,
body .d-status-poster-card .d-status-gallery-item video,
body .d-status-poster-card .d-status-media-gallery .d-status-gallery-item img,
body .d-status-poster-card .d-status-media-gallery .d-status-gallery-item video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(82vh, 860px) !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #101816 !important;
}

/* Dekeree home — bold editorial refresh. */
body .dk-home {
    --dk-ink: #121713;
    --dk-cream: #f6f1e7;
    --dk-lime: #cfff45;
    overflow: hidden;
    color: var(--dk-ink);
    background: var(--dk-cream);
}

body .dk-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
    gap: clamp(36px, 6vw, 94px);
    align-items: center;
    width: min(1440px, 100%);
    min-height: min(900px, calc(100vh - 76px));
    margin: auto;
    padding: clamp(64px, 8vw, 118px) clamp(24px, 6vw, 88px);
}

body .dk-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(1px); }
body .dk-orb-one { width: 360px; height: 360px; right: -210px; top: -120px; background: #ffd7e3; }
body .dk-orb-two { width: 170px; height: 170px; left: -80px; bottom: 30px; background: var(--dk-lime); opacity: .5; }

body .dk-hero-copy { position: relative; z-index: 2; animation: dkRise .7s cubic-bezier(.2,.75,.2,1) both; }
body .dk-eyebrow, body .dk-section-kicker { display: flex; align-items: center; gap: 10px; color: #596159; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
body .dk-eyebrow span { width: 9px; height: 9px; border-radius: 50%; background: #7e2cff; box-shadow: 0 0 0 5px rgba(126,44,255,.12); }
body .dk-hero h1 { margin: 24px 0 26px; font-family: var(--font-display); font-size: clamp(58px, 7.4vw, 112px); font-weight: 800; letter-spacing: -.075em; line-height: .84; }
body .dk-hero h1 em, body .dk-section-heading h2 em, body .dk-final-cta h2 em { color: #7e2cff; font-family: Georgia, serif; font-weight: 500; letter-spacing: -.06em; }
body .dk-hero-copy > p { max-width: 560px; margin: 0; color: #555e56; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; }
body .dk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
body .dk-button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 12px; padding: 14px 22px; border: 1px solid var(--dk-ink); border-radius: 999px; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
body .dk-button:hover { transform: translateY(-3px); }
body .dk-button svg { width: 19px; }
body .dk-button-primary { color: #fff; background: var(--dk-ink); box-shadow: 0 12px 30px rgba(18,23,19,.17); }
body .dk-button-primary:hover { box-shadow: 0 18px 36px rgba(18,23,19,.23); }
body .dk-button-ghost { background: rgba(255,255,255,.42); }
body .dk-proof { display: flex; align-items: center; gap: 14px; margin-top: 48px; }
body .dk-proof-avatars { display: flex; }
body .dk-proof-avatars span { display: grid; width: 39px; height: 39px; margin-left: -8px; place-items: center; border: 3px solid var(--dk-cream); border-radius: 50%; background: #ff724d; color: #161b17; font-size: 10px; font-weight: 900; }
body .dk-proof-avatars span:first-child { margin-left: 0; background: var(--dk-lime); }
body .dk-proof-avatars span:last-child { background: #b892ff; }
body .dk-proof p { margin: 0; color: #657067; font-size: 12px; line-height: 1.4; }
body .dk-proof strong { color: var(--dk-ink); font-size: 13px; }

body .dk-stage { position: relative; z-index: 1; min-height: 610px; border-radius: 54% 46% 46% 54% / 47% 53% 47% 53%; background: #7e2cff; box-shadow: 0 38px 90px rgba(70,30,126,.22); transform: translate3d(var(--home-shift-x,0),var(--home-shift-y,0),0) rotateX(var(--home-rotate-x,0)) rotateY(var(--home-rotate-y,0)); transform-style: preserve-3d; transition: transform .14s ease-out; animation: dkBlob 9s ease-in-out infinite, dkFade .8s ease both .1s; }
body .dk-stage-grid { position: absolute; inset: 8%; border-radius: inherit; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle,#000 35%,transparent 75%); }
body .dk-float-card, body .dk-float-pill { position: absolute; color: var(--dk-ink); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
body .dk-float-card:hover, body .dk-float-pill:hover { transform: translateY(-7px) rotate(1deg); box-shadow: 0 28px 60px rgba(20,12,34,.25); }
body .dk-float-profile { top: 11%; left: 5%; width: 58%; min-height: 310px; padding: 30px; border-radius: 34px; background: var(--dk-lime); box-shadow: 0 26px 60px rgba(29,16,50,.25); transform: rotate(-4deg); }
body .dk-float-icon { display: grid; width: 52px; height: 52px; margin-bottom: 50px; place-items: center; border-radius: 50%; background: var(--dk-ink); color: var(--dk-lime); }
body .dk-float-card small { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
body .dk-float-card > strong { display: block; font-size: clamp(22px,2.2vw,34px); font-weight: 900; letter-spacing: -.04em; line-height: 1.02; }
body .dk-card-link { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding-top: 15px; border-top: 1px solid rgba(18,23,19,.2); font-size: 13px; font-weight: 800; }
body .dk-card-link svg { width: 16px; }
body .dk-float-call { top: 5%; right: -3%; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; width: 54%; padding: 16px; border-radius: 24px; background: #fff; box-shadow: 0 20px 45px rgba(29,16,50,.22); transform: rotate(5deg); }
body .dk-call-avatar { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; background: #e8f7f1; }
body .dk-call-avatar img { width: 38px; height: 38px; }
body .dk-float-call small, body .dk-float-call strong { margin: 0; }
body .dk-float-call strong { font-size: 14px; letter-spacing: 0; }
body .dk-float-call > svg { width: 20px; color: #16815f; }
body .dk-float-opportunity { right: 2%; bottom: 5%; width: 48%; min-height: 245px; padding: 24px; border-radius: 30px; background: #ff7654; box-shadow: 0 25px 55px rgba(29,16,50,.25); transform: rotate(4deg); }
body .dk-float-opportunity > span { display: grid; width: 46px; height: 46px; margin-bottom: 28px; place-items: center; border-radius: 15px; background: #fff; }
body .dk-float-opportunity b { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; }
body .dk-float-opportunity b svg { width: 15px; }
body .dk-float-pill { left: 4%; bottom: 10%; display: flex; align-items: center; gap: 9px; padding: 12px 17px; border-radius: 999px; background: #fff; box-shadow: 0 16px 36px rgba(29,16,50,.23); font-size: 12px; font-weight: 850; transform: rotate(-5deg); }
body .dk-float-pill span { width: 9px; height: 9px; border-radius: 50%; background: #18b777; box-shadow: 0 0 0 4px rgba(24,183,119,.16); }

body .dk-ticker { overflow: hidden; padding: 18px 0; border-block: 1px solid #202620; background: var(--dk-lime); transform: rotate(-1.2deg) scale(1.02); }
body .dk-ticker > div { display: flex; width: max-content; align-items: center; gap: 28px; animation: dkTicker 24s linear infinite; }
body .dk-ticker span { font-family: var(--font-display); font-size: 18px; font-weight: 900; letter-spacing: .08em; }
body .dk-ticker i { width: 8px; height: 8px; border-radius: 50%; background: #7e2cff; }

body .dk-explore { width: min(1320px,calc(100% - 40px)); margin: 0 auto; padding: clamp(100px,12vw,170px) 0; }
body .dk-section-heading { display: grid; grid-template-columns: 1fr minmax(280px,430px); gap: 44px; align-items: end; margin-bottom: 60px; }
body .dk-section-heading h2 { margin: 14px 0 0; font-size: clamp(48px,6vw,84px); letter-spacing: -.065em; line-height: .9; }
body .dk-section-heading > p { margin: 0; color: #5e675f; font-size: 18px; line-height: 1.65; }
body .dk-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
body .dk-service-card { position: relative; display: grid; min-height: 360px; padding: 25px; border: 1px solid rgba(18,23,19,.12); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 8px 0 rgba(18,23,19,.07); transition: transform .24s ease, box-shadow .24s ease; }
body .dk-service-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(29,36,30,.13); }
body .dk-service-number { position: absolute; top: 22px; right: 24px; font-size: 12px; font-weight: 900; opacity: .48; }
body .dk-service-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 20px; background: var(--dk-ink); color: #fff; }
body .dk-service-icon svg { width: 28px; height: 28px; }
body .dk-service-card > div { align-self: end; }
body .dk-service-card h3 { margin: 0 0 11px; font-size: 27px; letter-spacing: -.035em; }
body .dk-service-card p { max-width: 280px; margin: 0; color: rgba(18,23,19,.66); line-height: 1.55; }
body .dk-service-arrow { position: absolute; right: 24px; bottom: 25px; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(18,23,19,.18); border-radius: 50%; opacity: 0; transform: translate(-8px,8px); transition: .24s ease; }
body .dk-service-card:hover .dk-service-arrow { opacity: 1; transform: none; }
body .dk-service-card.lime { background: #d8ff67; }
body .dk-service-card.violet { background: #c8adff; }
body .dk-service-card.coral { background: #ff987f; }
body .dk-service-card.sky { background: #a9dfff; }
body .dk-service-card.amber { background: #ffd56a; }
body .dk-service-card.mint { background: #a9efd5; }

body .dk-numbers { display: grid; grid-template-columns: repeat(3,1fr) 1.25fr; gap: 1px; background: #3a423b; border-block: 1px solid #3a423b; }
body .dk-numbers > * { min-height: 190px; padding: 35px; background: var(--dk-ink); color: #fff; }
body .dk-numbers div { display: grid; align-content: center; }
body .dk-numbers strong { color: var(--dk-lime); font-size: clamp(42px,5vw,70px); letter-spacing: -.06em; line-height: 1; }
body .dk-numbers span { margin-top: 9px; color: rgba(255,255,255,.58); font-size: 13px; font-weight: 700; }
body .dk-numbers a { display: flex; align-items: center; justify-content: space-between; background: #7e2cff; font-size: 18px; font-weight: 850; }

body .dk-final-cta { display: grid; min-height: 660px; padding: 90px 24px; place-items: center; align-content: center; text-align: center; background: var(--dk-lime); }
body .dk-cta-mark { display: grid; width: 72px; height: 72px; margin-bottom: 24px; place-items: center; border-radius: 24px; background: #fff; transform: rotate(-7deg); box-shadow: 8px 8px 0 #121713; }
body .dk-cta-mark img { width: 56px; }
body .dk-final-cta p { font-size: 11px; font-weight: 900; letter-spacing: .18em; }
body .dk-final-cta h2 { margin: 16px 0 32px; font-size: clamp(58px,8vw,112px); letter-spacing: -.075em; line-height: .84; }
body .dk-final-cta h2 em { color: #7e2cff; }
body .dk-button-light { background: #fff; }

@keyframes dkRise { from { opacity: 0; transform: translateY(22px); } }
@keyframes dkFade { from { opacity: 0; transform: scale(.94); } }
@keyframes dkBlob { 0%,100% { border-radius: 54% 46% 46% 54% / 47% 53% 47% 53%; } 50% { border-radius: 45% 55% 52% 48% / 56% 44% 56% 44%; } }
@keyframes dkTicker { to { transform: translateX(-50%); } }

@media (max-width: 1000px) {
    body .dk-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 80px; }
    body .dk-hero-copy { max-width: 720px; }
    body .dk-stage { width: min(680px,100%); min-height: 600px; margin: auto; }
    body .dk-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body .dk-numbers { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
    body .dk-hero { gap: 54px; padding: 52px 18px 74px; }
    body .dk-hero h1 { font-size: clamp(54px,18vw,78px); }
    body .dk-hero-actions { display: grid; }
    body .dk-proof { margin-top: 34px; }
    body .dk-stage { min-height: 440px; border-radius: 38px; animation: dkFade .8s ease both; transform: none !important; }
    body .dk-float-profile { top: 8%; left: 4%; width: 67%; min-height: 235px; padding: 20px; border-radius: 24px; }
    body .dk-float-icon { width: 42px; height: 42px; margin-bottom: 28px; }
    body .dk-float-card > strong { font-size: 21px; }
    body .dk-card-link { margin-top: 15px; }
    body .dk-float-call { top: 3%; right: -8%; width: 54%; grid-template-columns: auto 1fr; padding: 10px; }
    body .dk-float-call > svg { display: none; }
    body .dk-float-call strong { font-size: 10px; }
    body .dk-call-avatar { width: 38px; height: 38px; }
    body .dk-float-opportunity { right: 1%; bottom: 6%; width: 55%; min-height: 190px; padding: 18px; }
    body .dk-float-opportunity > span { margin-bottom: 18px; }
    body .dk-float-pill { left: 3%; bottom: 9%; }
    body .dk-explore { width: min(100% - 28px,1320px); padding: 100px 0; }
    body .dk-section-heading { grid-template-columns: 1fr; gap: 24px; }
    body .dk-section-heading h2 { font-size: 50px; }
    body .dk-service-grid { grid-template-columns: 1fr; }
    body .dk-service-card { min-height: 300px; }
    body .dk-numbers { grid-template-columns: 1fr; }
    body .dk-numbers > * { min-height: 150px; }
    body .dk-final-cta { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
    body .dk-stage, body .dk-hero-copy, body .dk-ticker > div { animation: none; }
}

/* Long D Social posts: preview + more. display:grid/flex on <details> shows the full body. */
body .d-status-copy-block .d-status-more-text,
body .d-status-poster-card .d-status-more-text {
    display: block !important;
}

body .d-status-copy-block .d-status-more-text > summary,
body .d-status-poster-card .d-status-more-text > summary,
body .d-status-poster-card .d-status-more-text[open] > summary {
    display: block !important;
    cursor: pointer;
    list-style: none;
    white-space: pre-line;
}

body .d-status-more-text > summary::-webkit-details-marker,
body .d-status-more-text > summary::marker {
    display: none;
}

body .d-status-more-text > summary b {
    color: var(--green, #0f8a5f);
    font-weight: 800;
}

body .d-status-more-text > summary .d-status-less {
    display: none;
}

body .d-status-more-text[open] > summary .d-status-preview,
body .d-status-more-text[open] > summary .d-status-more {
    display: none;
}

body .d-status-more-text[open] > summary .d-status-less {
    display: inline;
}

body .d-status-copy-block .d-status-more-text > p {
    margin: 8px 0 0;
    white-space: pre-line;
}
.profile-custom-list {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: .55rem;
}

.profile-custom-list li::marker {
    color: #0d684f;
}

.profile-custom-check-list {
    list-style: none;
    padding-left: 0;
}

.profile-custom-check-list li {
    position: relative;
    padding-left: 1.7rem;
}

.profile-custom-check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #e7f3ee;
    color: #0d684f;
    font-size: .75rem;
    font-weight: 900;
}

.profile-custom-links,
.profile-custom-choices {
    display: grid;
    gap: .65rem;
}

.profile-custom-links a,
.profile-custom-choices label {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: fit-content;
    padding: .65rem .85rem;
    border: 1px solid #d9e4e0;
    border-radius: 12px;
    background: #f7f9f8;
    color: #0d684f;
    font-weight: 700;
    text-decoration: none;
}

.profile-custom-links a:hover {
    border-color: #0d684f;
    background: #eef6f3;
}

.profile-custom-links svg {
    width: 17px;
    height: 17px;
}

.profile-custom-choices input {
    accent-color: #0d684f;
}