:root {
    /* Brand palette mapped onto the Web Awesome tailspin / vogue / indigo theme tokens.
       These aliases keep the existing class names working while sourcing every colour,
       space, radius and shadow from the active theme. */
    --surface: var(--wa-color-surface-default);
    --surface-subtle: var(--wa-color-surface-raised);
    --surface-muted: var(--wa-color-neutral-fill-quiet);
    --text: var(--wa-color-text-normal);
    --muted: var(--wa-color-text-quiet);
    --border: var(--wa-color-surface-border);
    --accent: var(--wa-color-brand-fill-loud);
    --accent-hover: color-mix(in oklab, var(--wa-color-brand-fill-loud), black 14%);
    --accent-soft: var(--wa-color-brand-fill-quiet);
    --on-accent: var(--wa-color-brand-on-loud);
    --success: var(--wa-color-success-fill-loud);
    --danger: var(--wa-color-danger-fill-loud);
    --focus-ring: color-mix(in oklab, var(--wa-color-brand-fill-loud), transparent 78%);
    --scrim: color-mix(in oklab, var(--wa-color-neutral-fill-loud), transparent 50%);
    --shadow: var(--wa-shadow-l);
    --elev-1: var(--wa-shadow-s);
    --elev-2: var(--wa-shadow-m);
    /* Collapsed icon-only rail width (desktop). */
    --rail-w: 76px;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion: 220ms;
}

.r-ads-meta-details {
    padding: var(--wa-space-m);
}

.r-ads-meta-preview {
    max-block-size: 24rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: var(--wa-space-m);
    border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-neutral-fill-quiet);
}

.r-c2dm-picker-dialog {
    --width: min(104ch, calc(100vw - var(--wa-space-xl)));
}

.r-c2dm-picker-dialog p {
    margin: 0;
}

.r-c2dm-picker-sources {
    display: none;
}

.r-c2dm-picker-post {
    --checked-icon-color: var(--wa-color-brand-on-loud);
    block-size: 100%;
    min-inline-size: 0;
    position: relative;
    inline-size: 100%;
}

.r-c2dm-picker-post[hidden] {
    display: none;
}

.r-c2dm-picker-post::part(base) {
    align-items: stretch;
    background: var(--wa-color-surface-default);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    block-size: 100%;
    gap: 0;
    inline-size: 100%;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: border-color var(--motion) var(--ease-standard), box-shadow var(--motion) var(--ease-standard), transform var(--motion) var(--ease-standard);
}

.r-c2dm-picker-post::part(control) {
    background: var(--wa-color-surface-default);
    box-shadow: var(--wa-shadow-s);
    inset-block-start: var(--wa-space-s);
    inset-inline-start: var(--wa-space-s);
    position: absolute;
    z-index: 2;
}

.r-c2dm-picker-post:state(checked)::part(control) {
    background: var(--wa-color-brand-fill-loud);
    border-color: var(--wa-color-brand-border-loud);
}

.r-c2dm-picker-post:hover::part(base) {
    border-color: var(--wa-color-brand-border-loud);
    box-shadow: var(--wa-shadow-m);
    transform: translateY(calc(var(--wa-border-width-s) * -1));
}

.r-c2dm-picker-post:state(checked)::part(base) {
    border-color: var(--wa-color-brand-border-loud);
    box-shadow: 0 0 0 var(--wa-border-width-m) var(--wa-color-brand-fill-quiet);
}

.r-c2dm-picker-post::part(label) {
    block-size: 100%;
    inline-size: 100%;
}

.r-c2dm-picker-list {
    --min-column-size: 29ch;
    align-items: stretch;
}

.r-c2dm-picker-card {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.r-c2dm-picker-preview {
    background: var(--wa-color-surface-lowered);
    inline-size: 100%;
    overflow: hidden;
}

.r-c2dm-picker-preview img:not(.r-c2dm-picker-empty-logo) {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
}

.r-c2dm-picker-preview-empty {
    align-items: center;
    block-size: 100%;
    display: flex;
    inline-size: 100%;
    justify-content: center;
}

.r-c2dm-picker-empty-logo {
    block-size: var(--wa-space-3xl);
    inline-size: var(--wa-space-3xl);
}

.r-c2dm-picker-content {
    flex: 1;
    min-inline-size: 0;
    padding: var(--wa-space-m);
}

.r-c2dm-picker-source-label {
    --flank-size: var(--wa-space-2xl);
    min-inline-size: 0;
}

.r-c2dm-picker-source-label > span,
.r-c2dm-picker-source-label strong {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-c2dm-picker-platform-logo {
    background: var(--wa-color-surface-raised);
    block-size: var(--wa-space-2xl);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    inline-size: var(--wa-space-2xl);
    object-fit: contain;
    padding: var(--wa-space-xs);
}

.r-c2dm-picker-caption {
    display: block;
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
    max-block-size: calc(2 * var(--wa-font-size-s) * var(--wa-line-height-condensed));
    min-block-size: calc(2 * var(--wa-font-size-s) * var(--wa-line-height-condensed));
    overflow-wrap: anywhere;
    overflow: hidden;
}

.r-c2dm-picker-meta {
    align-items: center;
    border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    margin-block-start: auto;
    padding-block-start: var(--wa-space-s);
}

.r-c2dm-picker-post-type {
    background: var(--wa-color-neutral-fill-quiet);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-pill);
    color: var(--wa-color-text-quiet);
    flex: none;
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-semibold);
    padding: var(--wa-space-2xs) var(--wa-space-xs);
}

.r-c2dm-history-targets {
    padding-block-start: var(--wa-space-s);
}

* {
    box-sizing: border-box;
}

html:has(.r-content-publish) {
    scrollbar-gutter: stable;
}

.r-workspace-content {
    max-width: none;
    padding-top: 38px;
}

.r-workspace-header {
    align-items: center;
    margin-bottom: 28px;
}

.r-workspace-header h1 {
    color: #10233d;
    font-size: clamp(2rem, 3vw, 2.65rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.r-workspace-header .r-status-line {
    color: #718092;
    max-width: 720px;
}

.r-workspace-header-actions {
    align-items: center;
    display: flex;
    flex: none;
    gap: 12px;
}

@media (min-width: 701px) {
    .r-workspace-header-actions {
        align-self: flex-end;
    }
}

.r-workspace-count {
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    color: #34475c;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 10px 16px;
    white-space: nowrap;
}

.r-workspace-panel {
    background: white;
    border-color: #dbe5e9;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgb(25 55 72 / 5%);
    padding: 0 28px 28px;
}

.r-workspace-panel-header {
    align-items: center;
    border-bottom: 1px solid #dbe5e9;
    display: flex;
    justify-content: space-between;
    padding: 26px 0 22px;
}

.r-workspace-panel-header h2 {
    color: #10233d;
    font-size: 1.15rem;
    margin: 0 0 4px;
}

.r-workspace-panel-header p {
    color: #718092;
    font-size: 0.9rem;
    margin: 0;
}

.r-workspace-content .r-workspace-list {
    gap: 0;
}

.r-workspace-content .r-workspace-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e3eaee;
    border-radius: 0;
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    min-height: 126px;
    padding: 22px 2px;
}

.r-workspace-content .r-workspace-row.r-is-current {
    background: #fbfefe;
}

.r-workspace-avatar {
    align-items: center;
    background: #eaf5f7;
    border: 1px solid #d8edf1;
    border-radius: 50%;
    color: #078ca4;
    display: inline-flex;
    font-size: 1.45rem;
    font-weight: 800;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.r-workspace-row:nth-child(3n + 2) .r-workspace-avatar {
    background: #edf4ff;
    border-color: #dfe9fb;
    color: #3976c5;
}

.r-workspace-row:nth-child(3n) .r-workspace-avatar {
    background: #f2edfb;
    border-color: #e9e0f8;
    color: #7653c9;
}

.r-workspace-content .r-workspace-main {
    gap: 7px;
}

.r-workspace-content .r-workspace-title {
    color: #10233d;
    font-size: 1.08rem;
}

.r-workspace-meta {
    color: #718092;
    font-size: 0.84rem;
}

.r-workspace-content .r-workspace-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.r-workspace-content .r-workspace-actions form {
    margin: 0;
}

.r-workspace-content .r-workspace-actions wa-button::part(base) {
    min-height: 40px;
}

.r-workspace-create-card {
    align-items: center;
    background: #fbfefe;
    border: 1px dashed #8fcbd6;
    border-radius: 14px;
    box-shadow: none;
    color: #10233d;
    display: grid;
    gap: 16px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-top: 24px;
    min-height: 104px;
    padding: 18px 22px;
    text-align: left;
    width: 100%;
}

.r-workspace-create-card:hover {
    background: #f2fafb;
    border-color: #078ca4;
    box-shadow: 0 8px 22px rgb(25 55 72 / 6%);
    transform: translateY(-1px);
}

.r-workspace-create-card:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.r-workspace-create-icon {
    align-items: center;
    background: white;
    border: 1px solid #d8edf1;
    border-radius: 50%;
    color: #078ca4;
    display: inline-flex;
    font-size: 1.2rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.r-workspace-create-copy {
    display: grid;
    gap: 4px;
}

.r-workspace-create-copy strong {
    color: #087d93;
    font-size: 0.98rem;
}

.r-workspace-create-copy > span {
    color: #718092;
    font-size: 0.84rem;
    font-weight: 500;
}

.r-workspace-create-action {
    background: white;
    border: 1px solid #cbd8df;
    border-radius: 10px;
    color: #087d93;
    font-size: 0.86rem;
    font-weight: 750;
    padding: 10px 18px;
    white-space: nowrap;
}

.r-workspace-dialog-copy {
    line-height: 1.55;
    margin: 0;
}

.r-workspace-dialog-form {
    display: grid;
    gap: 22px;
}

.r-workspace-dialog-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

@media (max-width: 1180px) {
    .r-workspace-content .r-workspace-row {
        grid-template-columns: auto minmax(160px, 1fr);
    }

    .r-workspace-content .r-workspace-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-left: 80px;
    }
}

@media (max-width: 700px) {
    .r-workspace-content {
        padding-top: 74px;
    }

    .r-workspace-header {
        align-items: stretch;
    }

    .r-workspace-header-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .r-workspace-count {
        text-align: center;
    }

    .r-workspace-panel {
        padding: 0 18px 18px;
    }

    .r-workspace-content .r-workspace-row {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 0;
        padding: 20px 0;
    }

    .r-workspace-avatar {
        height: 50px;
        width: 50px;
    }

    .r-workspace-content .r-workspace-actions {
        display: grid;
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .r-workspace-content .r-workspace-actions form,
    .r-workspace-content .r-workspace-actions wa-button {
        width: 100%;
    }

    .r-workspace-create-card {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 180px;
        padding: 18px;
    }

    .r-workspace-create-copy {
        min-width: 0;
    }

    .r-workspace-create-copy > span {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .r-workspace-create-action {
        grid-column: 1 / -1;
        text-align: center;
        width: 100%;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--wa-color-surface-lowered);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    letter-spacing: 0;
}

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

button {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    min-height: 42px;
    padding: 0 20px;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

button:disabled,
input:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.r-sr-only {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

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

.r-login-notification-dialog {
    align-items: stretch;
    background: #f8fbfb;
    border: 1px solid #d6e3e5;
    border-radius: 28px;
    box-shadow: 0 32px 90px rgb(16 35 61 / 28%);
    color: #10233d;
    flex-direction: column;
    max-height: min(780px, calc(100dvh - 40px));
    max-width: calc(100vw - 32px);
    overflow: hidden;
    padding: 0;
    width: 620px;
}

.r-login-notification-dialog[open] {
    display: flex;
}

.r-login-notification-content {
    display: contents;
}

.r-login-notification-dialog::backdrop {
    backdrop-filter: blur(10px);
    background:
        radial-gradient(circle at 28% 12%, rgb(124 224 222 / 22%), transparent 32%),
        rgb(16 35 61 / 54%);
}

.r-login-notification-launcher {
    align-items: center;
    background: #087f91;
    border: 1px solid #087f91;
    border-radius: 0 0 16px 16px;
    border-top: 0;
    box-shadow: 0 12px 30px rgb(8 127 145 / 24%);
    color: white;
    display: flex;
    height: 52px;
    justify-content: center;
    position: fixed;
    right: 18px;
    top: 0;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    width: 52px;
    z-index: 60;
}

.r-login-notification-launcher:hover {
    background: #066d7d;
    border-color: #066d7d;
    box-shadow: 0 16px 34px rgb(8 127 145 / 28%);
    transform: translateY(-1px);
}

.r-login-notification-launcher:focus-visible {
    outline: 3px solid rgb(8 127 145 / 28%);
    outline-offset: 3px;
}

.r-login-notification-launcher svg {
    display: block;
    flex: none;
    height: 28px !important;
    max-height: 28px;
    max-width: 28px;
    min-height: 28px;
    min-width: 28px;
    width: 28px !important;
}

.r-login-notification-launcher.r-is-ringing svg {
    animation: r-login-notification-ring 720ms ease-in-out;
    transform-origin: 50% 18%;
}

.r-login-notification-launcher-count {
    align-items: center;
    background: white;
    border: 2px solid #087f91;
    border-radius: 999px;
    box-shadow: 0 3px 9px rgb(16 35 61 / 18%);
    color: #087f91;
    display: flex;
    font-size: 0.68rem;
    font-weight: 800;
    height: 20px;
    justify-content: center;
    line-height: 1;
    min-width: 20px;
    padding-inline: 5px;
    position: absolute;
    right: -7px;
    top: 6px;
    z-index: 1;
}

.r-login-notification-launcher-count[hidden] {
    display: none;
}

@keyframes r-login-notification-ring {
    0%,
    100% {
        transform: rotate(0);
    }

    18% {
        transform: rotate(18deg);
    }

    36% {
        transform: rotate(-16deg);
    }

    54% {
        transform: rotate(12deg);
    }

    72% {
        transform: rotate(-8deg);
    }

    88% {
        transform: rotate(4deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .r-login-notification-launcher.r-is-ringing svg {
        animation: none;
    }
}

.r-login-notification-minimize {
    align-items: center;
    background: #eef5f5;
    border: 1px solid #d5e3e4;
    border-radius: 10px;
    color: #536b7d;
    display: flex;
    height: 36px;
    justify-content: center;
    position: absolute;
    right: 18px;
    top: 18px;
    width: 36px;
    z-index: 1;
}

.r-login-notification-minimize:hover {
    background: #e2eeee;
    color: #10233d;
}

.r-login-notification-minimize:focus-visible {
    outline: 3px solid rgb(8 127 145 / 24%);
    outline-offset: 2px;
}

.r-login-notification-minimize::before,
.r-login-notification-minimize::after {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 16px;
}

.r-login-notification-minimize::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.r-login-notification-minimize::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.r-login-notification-header {
    background:
        radial-gradient(circle at 92% -15%, rgb(124 224 222 / 34%), transparent 44%),
        linear-gradient(145deg, #f8fcfb, #edf8f6);
    border-bottom: 1px solid #dbe7e7;
    padding: 28px 30px 24px;
}

.r-login-notification-heading {
    align-items: center;
    display: flex;
    gap: 16px;
}

.r-login-notification-icon {
    align-items: center;
    background: #087f91;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgb(8 127 145 / 24%);
    color: white;
    display: flex;
    flex: 0 0 auto;
    height: 50px;
    justify-content: center;
    width: 50px;
}

.r-login-notification-icon svg {
    height: 24px;
    width: 24px;
}

.r-login-notification-title {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.r-login-notification-eyebrow {
    color: #087f91;
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.r-login-notification-header h1 {
    font-size: clamp(1.65rem, 4vw, 2.05rem);
    letter-spacing: -0.04em;
    line-height: 1.08;
    margin: 0;
}

.r-login-notification-summary {
    display: grid;
    gap: 4px;
    margin: 16px 0 0 66px;
    max-width: 460px;
}

.r-login-notification-summary strong {
    color: #10233d;
    font-size: 0.95rem;
}

.r-login-notification-summary span {
    color: #5f7286;
    font-size: 0.8rem;
    line-height: 1.5;
}

.r-login-notification-section {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 18px 24px 8px;
}

.r-login-notification-section > span:first-child {
    display: grid;
    gap: 3px;
}

.r-login-notification-section strong {
    font-size: 0.84rem;
}

.r-login-notification-section > span:first-child > span {
    color: #728394;
    font-size: 0.72rem;
}

.r-login-notification-filter-toggle {
    align-items: center;
    background: #edf8f8;
    border: 1px solid #cce5e7;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgb(15 60 72 / 6%);
    color: #087f91;
    cursor: pointer;
    display: inline-flex;
    flex: none;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

.r-login-notification-filter-toggle::after {
    content: "\2193";
    font-size: 0.8rem;
    line-height: 1;
    transition: transform 180ms ease;
}

.r-login-notification-filter-toggle[data-show-all="true"]::after {
    transform: rotate(180deg);
}

.r-login-notification-filter-toggle:hover {
    background: #e1f2f3;
    border-color: #acd5d9;
    box-shadow: 0 3px 8px rgb(15 60 72 / 10%);
    color: #055f6e;
}

.r-login-notification-filter-toggle:focus-visible {
    outline: 2px solid rgb(8 127 145 / 40%);
    outline-offset: 2px;
}

.r-login-notification-filter-toggle:active {
    transform: translateY(1px);
}

.r-login-notification-list {
    display: grid;
    gap: 8px;
    max-height: min(340px, calc(100dvh - 340px));
    overflow-y: auto;
    padding: 8px 18px 18px;
    scrollbar-color: #9aabad transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.r-login-notification-list:focus-visible {
    border-radius: 12px;
    box-shadow: inset 0 0 0 2px rgb(8 127 145 / 34%);
    outline: none;
}

.r-login-notification-account {
    align-items: center;
    background: white;
    border: 1px solid #e1e9eb;
    border-radius: 15px;
    box-shadow: 0 3px 12px rgb(16 35 61 / 4%);
    display: grid;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 70px;
    padding: 10px 12px;
}

.r-login-notification-account[hidden] {
    display: none;
}

.r-login-notification-logo {
    align-items: center;
    background: #f2f7f7;
    border: 1px solid #e6eeee;
    border-radius: 13px;
    display: flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.r-login-notification-logo img {
    height: 29px;
    object-fit: contain;
    width: 29px;
}

.r-login-notification-identity {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.r-login-notification-identity strong,
.r-login-notification-identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-login-notification-identity strong {
    font-size: 0.86rem;
}

.r-login-notification-identity span {
    color: #6c7e90;
    font-size: 0.76rem;
}

.r-login-notification-identity .r-login-notification-preview {
    color: #3f6173;
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.35;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.r-login-notification-status {
    align-items: center;
    background: #f0f4f5;
    border-radius: 999px;
    color: #607284;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 7px 11px;
    white-space: nowrap;
}

.r-login-notification-status.r-has-updates {
    background: #d8f4f1;
    color: #066d79;
}

.r-login-notification-empty {
    color: #637486;
    padding: 32px 30px;
}

.r-login-notification-empty p {
    margin: 0;
}

.r-login-notification-footer {
    align-items: center;
    border-top: 1px solid #e4ebed;
    display: flex;
    gap: 24px;
    justify-content: flex-end;
    margin-top: auto;
    padding: 16px 22px 18px;
}

.r-login-notification-footer p {
    color: #718294;
    font-size: 0.72rem;
    line-height: 1.45;
    margin: 0 auto 0 0;
    max-width: 245px;
}

.r-login-notification-continue {
    align-items: center;
    background: #087f91;
    border: 0;
    border-radius: 12px;
    color: white;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 750;
    gap: 9px;
    justify-content: center;
    min-width: 202px;
    padding: 12px 22px;
    text-align: center;
    text-decoration: none;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.r-login-notification-continue svg {
    height: 18px;
    transition: transform 160ms ease;
    width: 18px;
}

.r-login-notification-continue:hover {
    background: #066d7d;
    box-shadow: 0 8px 20px rgb(8 127 145 / 20%);
    transform: translateY(-1px);
}

.r-login-notification-continue:hover svg {
    transform: translateX(2px);
}

.r-login-notification-continue:focus-visible {
    outline: 3px solid rgb(8 127 145 / 28%);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .r-login-notification-launcher {
        height: 48px;
        right: 10px;
        top: 0;
        width: 48px;
    }

    .r-login-notification-dialog {
        border-radius: 22px;
        max-height: calc(100dvh - 20px);
        max-width: calc(100vw - 20px);
    }

    .r-login-notification-header {
        padding: 22px 20px 18px;
    }

    .r-login-notification-heading {
        gap: 13px;
    }

    .r-login-notification-icon {
        border-radius: 14px;
        height: 44px;
        width: 44px;
    }

    .r-login-notification-summary {
        margin-left: 57px;
    }

    .r-login-notification-section {
        padding: 16px 16px 7px;
    }

    .r-login-notification-list {
        max-height: min(320px, calc(100dvh - 330px));
        padding: 7px 10px 14px;
    }

    .r-login-notification-account {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 10px;
    }

    .r-login-notification-logo {
        height: 42px;
        width: 42px;
    }

    .r-login-notification-status {
        grid-column: 2;
        justify-self: start;
    }

    .r-login-notification-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px 16px;
    }

    .r-login-notification-footer p {
        max-width: none;
        text-align: center;
    }

    .r-login-notification-continue {
        width: 100%;
    }
}

.r-content {
    width: calc(100% - var(--rail-w));
    min-width: 0;
    /* Collapsed rail is always visible on desktop, so the content sits beside it. */
    margin-left: var(--rail-w);
    padding: 28px 32px 44px;
    transition: margin-left var(--motion) var(--ease-standard), width var(--motion) var(--ease-standard);
}

.r-content-publish {
    position: relative;
    min-height: 100vh;
}

.r-composer-header {
    align-items: flex-end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.r-composer-header h1 {
    line-height: 1.1;
}

.r-composer-header p {
    margin: 0;
}

.r-change-platforms {
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    flex: none;
    font: inherit;
    font-weight: 600;
    padding: 10px 16px;
}

.r-change-platforms:hover {
    background: var(--surface);
    border-color: var(--accent);
}

.r-change-platforms:focus-visible,
.r-publish-btn:focus-visible,
.r-publish-option:has(.r-publish-check:focus-visible) {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Expanded drawer pushes the content further to the right. */
.r-nav-open .r-content {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
}

/* Collapsible navigation rail.
   Desktop: collapsed to an icon-only rail by default, expands to full width
   when nav-open. Mobile: hidden off-canvas, slides in as an overlay. */
.r-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--rail-w);
    height: 100vh;
    overflow: visible;
    scrollbar-color: var(--border) transparent;
    scrollbar-width: thin;
    transform: translateX(0);
    transition: width var(--motion) var(--ease-standard), transform var(--motion) var(--ease-standard);
}

.r-nav-open .r-sidebar {
    width: var(--sidebar-w);
}

/* Hamburger toggle: fixed top-left, morphs to an X when the drawer is open. */
.r-nav-toggle {
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.r-nav-toggle-bars {
    position: relative;
    width: 20px;
    height: 14px;
}

.r-nav-toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform var(--motion) var(--ease-standard),
        opacity calc(var(--motion) / 1.6) var(--ease-standard);
}

.r-nav-toggle-bars span:nth-child(1) { top: 0; }
.r-nav-toggle-bars span:nth-child(2) { top: 6px; }
.r-nav-toggle-bars span:nth-child(3) { top: 12px; }

.r-nav-open .r-nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.r-nav-open .r-nav-toggle-bars span:nth-child(2) { opacity: 0; }
.r-nav-open .r-nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.r-mobile-nav-toggle {
    display: none;
}

/* Scrim behind the drawer on mobile only. */
.r-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--scrim);
    opacity: 0;
    transition: opacity var(--motion) var(--ease-standard);
}

/* ── Collapsed icon-only rail (desktop, when the drawer is not expanded) ──
   Labels fade out and rows center on their icons; sub-menus reappear as
   hover flyouts so every destination stays reachable from the rail. */
.r-sidebar :where(.r-brand-name, .r-nav-group-label, .r-nav-chevron,
    .r-profile-meta, .r-cta-button > span, .r-sidebar-workspace-meta) {
    transition: opacity calc(var(--motion) / 1.6) var(--ease-standard);
}

html:not(.r-nav-open) .r-sidebar :where(.r-brand-name, .r-nav-group-label, .r-nav-chevron,
    .r-profile-meta, .r-cta-button > span, .r-sidebar-workspace-meta) {
    display: none;
}

html:not(.r-nav-open) .r-sidebar-brand {
    justify-content: center;
    padding-left: 0;
}

html:not(.r-nav-open) .r-cta-button,
html:not(.r-nav-open) .r-nav-group-summary,
html:not(.r-nav-open) .r-sidebar-profile,
html:not(.r-nav-open) .r-sidebar-workspace-summary {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

html:not(.r-nav-open) .r-nav-subitem {
    padding-left: 12px;
}

/* Larger icons while collapsed — they carry the rail on their own. */
html:not(.r-nav-open) .r-nav-icon {
    height: 26px;
    width: 26px;
}

html:not(.r-nav-open) .r-cta-icon {
    height: 24px;
    width: 24px;
}

html:not(.r-nav-open) .r-sidebar-workspace-icon {
    height: 34px;
    width: 34px;
}

/* Sub-menus float out to the right of the rail on hover/focus. */
html:not(.r-nav-open) .r-nav-group {
    position: relative;
}

html:not(.r-nav-open) .r-nav-sub {
    border-left: 0;
    margin: 0;
    position: absolute;
    top: -4px;
    left: calc(100% + 10px);
    min-width: 190px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 140ms var(--ease-standard),
        transform 140ms var(--ease-standard), visibility 140ms var(--ease-standard);
    z-index: 50;
}

html:not(.r-nav-open) .r-nav-group:hover .r-nav-sub,
html:not(.r-nav-open) .r-nav-group:focus-within .r-nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* The workspace switcher opens as a flyout beside the rail instead of expanding
   inline, where its options would be squeezed into the icon-only width. */
html:not(.r-nav-open) .r-sidebar-workspace {
    position: relative;
}

html:not(.r-nav-open) .r-sidebar-workspace-menu {
    position: absolute;
    top: 0;
    left: calc(100% + 10px);
    z-index: 50;
    min-width: 220px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

/* ── Tooltips (icon-only buttons and the collapsed rail) ── */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 80;
    left: 50%;
    bottom: calc(100% + 8px);
    padding: 6px 9px;
    border-radius: 8px;
    background: var(--text);
    color: var(--on-accent);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--elev-2);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 120ms var(--ease-standard), transform 120ms var(--ease-standard);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* In the sidebar, tooltips sit to the right and only while collapsed. */
.r-sidebar [data-tooltip]::after {
    left: calc(100% + 10px);
    bottom: auto;
    top: 50%;
    transform: translateX(-4px) translateY(-50%);
}

.r-sidebar [data-tooltip]:hover::after,
.r-sidebar [data-tooltip]:focus-visible::after {
    transform: translateX(0) translateY(-50%);
}

.r-nav-open .r-sidebar [data-tooltip]::after {
    content: none;
}

.r-sidebar-brand {
    align-items: center;
    color: var(--text);
    display: flex;
    font-weight: 800;
    gap: 10px;
    /* Leave room for the fixed hamburger so the brand sits beside it. */
    padding: 4px 8px 4px 54px;
    text-decoration: none;
}

.r-sidebar-workspace {
    flex-shrink: 0;
    margin: 0;
}

.r-sidebar-workspace-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    list-style: none;
}

.r-sidebar-workspace-summary::after {
    display: none;
}

.r-sidebar-workspace-summary:hover {
    background: var(--surface-muted);
}

.r-sidebar-workspace-icon {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 800;
    justify-content: center;
}

.r-sidebar-workspace-meta {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.r-sidebar-workspace-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-sidebar-workspace-menu {
    display: grid;
}

.r-sidebar-workspace-option,
.r-sidebar-company-option,
.r-sidebar-workspace-manage {
    align-items: center;
    background: transparent;
    color: var(--text);
    display: flex;
    justify-content: flex-start;
    min-height: 34px;
    padding: 6px 8px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.r-sidebar-company-item {
    position: relative;
}

.r-sidebar-company-option {
    border: 0;
    cursor: pointer;
}

.r-sidebar-company-option::after {
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    content: "";
    height: 6px;
    margin-left: auto;
    transform: rotate(45deg);
    width: 6px;
}

.r-sidebar-company-item::after {
    content: "";
    inset: 0 -10px 0 100%;
    position: absolute;
}

.r-sidebar-company-submenu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 3px;
    left: calc(100% + 10px);
    min-width: 210px;
    opacity: 0;
    padding: 9px;
    position: absolute;
    top: -9px;
    transform: translateX(-6px);
    transition: opacity 140ms var(--ease-standard),
        transform 140ms var(--ease-standard), visibility 140ms var(--ease-standard);
    visibility: hidden;
    z-index: 60;
}

.r-sidebar-company-item:hover .r-sidebar-company-submenu,
.r-sidebar-company-item:focus-within .r-sidebar-company-submenu {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

.r-sidebar-workspace-option:hover:not(:disabled),
.r-sidebar-company-option:hover:not(:disabled),
.r-sidebar-workspace-manage:hover {
    background: var(--surface-muted);
}

.r-sidebar-workspace-option.r-is-active,
.r-sidebar-company-option.r-is-active,
.r-sidebar-workspace-manage.r-is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Create Post CTA */
.r-cta-button {
    align-items: center;
    color: var(--on-accent);
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 11px 14px;
    text-decoration: none;
    transition: background var(--motion) var(--ease-standard), box-shadow var(--motion) var(--ease-standard);
}

.r-cta-icon {
    height: 18px;
    width: 18px;
}

/* Expandable nav groups */
.r-nav-group {
    flex-shrink: 0;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
}

.r-nav-group[open] {
    padding: 0;
}

.r-nav-group[open] .r-nav-group-summary {
    margin-inline: 0;
}

.r-nav-group-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    list-style: none;
    transition: background 120ms ease, color 120ms ease;
}

.r-nav-group-summary::after {
    display: none;
}

.r-nav-group-label {
    flex: 1;
}

.r-nav-chevron {
    transition: transform var(--motion) var(--ease-standard);
}

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

.r-nav-sub {
    display: flex;
    flex-direction: column;
}

.r-nav-subitem {
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.r-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.r-nav-icon {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-sizing: content-box;
    flex-shrink: 0;
    height: 17px;
    padding: 6px;
    width: 17px;
}

.r-sidebar-foot {
    flex-shrink: 0;
}

.r-nav-lock {
    color: var(--wa-color-text-quiet);
    flex: 0 0 auto;
    font-size: var(--wa-font-size-s);
    margin-left: auto;
}

.r-sidebar-profile {
    align-items: center;
    color: var(--text);
    display: flex;
    text-align: left;
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease;
    width: 100%;
}

.r-profile-dropdown {
    display: block;
    width: 100%;
}

.r-profile-meta {
    display: grid;
    min-width: 0;
    padding-right: 4px;
}

.r-profile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-profile-identity-avatar {
    --size: var(--wa-space-4xl);
    flex-shrink: 0;
}

.r-profile-identity-name {
    font-size: var(--wa-font-size-m);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.r-profile-layout {
    margin-top: var(--wa-space-l);
}

.r-profile-panel {
    --spacing: var(--wa-space-xl);
    width: 100%;
}

.r-profile-panel h2,
.r-profile-panel h3,
.r-profile-panel p {
    margin: 0;
}

.r-profile-panel h2,
.r-profile-panel h3 {
    font-size: var(--wa-font-size-l);
    line-height: 1.25;
}

.r-profile-section-intro {
    max-width: 60ch;
}

.r-profile-section-intro .r-summary-note {
    font-size: var(--wa-font-size-m);
    line-height: 1.5;
    margin: 0;
}

.r-profile-email {
    margin: 0;
}

.r-profile-email dt {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    font-weight: 720;
    margin-bottom: var(--wa-space-2xs);
}

.r-profile-email dd {
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-m);
    font-weight: 560;
    margin: 0;
    overflow-wrap: anywhere;
}

.r-profile-token-heading {
    --min-column-size: 28ch;
}

.r-profile-password-content {
    max-width: 44ch;
}

.r-profile-password-form wa-input {
    width: 100%;
}

.r-profile-delete-form {
    max-width: 52ch;
}

.r-profile-owned-companies {
    margin-block: 0;
    padding-left: var(--wa-space-l);
}

.r-profile-delete-actions {
    justify-content: flex-end;
}

.r-profile-token-section {
    min-width: 0;
}

.r-profile-token-section > .r-alert:not(.r-is-visible) {
    display: none;
}

.r-profile-token-section .r-summary-note {
    font-size: var(--wa-font-size-m);
    line-height: 1.5;
    margin-top: 0;
}

.r-profile-token-action {
    justify-self: end;
}

.r-api-token-table {
    min-width: 0;
}

.r-api-token-header,
.r-api-token-row {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(210px, 2fr) minmax(100px, 0.8fr) minmax(100px, 0.8fr) 82px;
}

.r-api-token-header {
    border-bottom: 1px solid #dbe5e9;
    color: #526375;
    font-size: var(--wa-font-size-xs);
    font-weight: 760;
    letter-spacing: 0.04em;
    padding: 0 12px 10px;
    text-transform: uppercase;
}

#apiKeyStatus {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.r-api-token-row {
    background: #f7fafb;
    border: 1px solid #dbe5e9;
    border-radius: 9px;
    color: #243750;
    font-size: var(--wa-font-size-s);
    min-width: 0;
    padding: 12px;
}

.r-api-token-value {
    align-items: center;
    display: flex;
    gap: 9px;
    min-width: 0;
}

.r-api-token-icon {
    flex: 0 0 auto;
    height: 15px;
    width: 15px;
}

.r-api-token-value code,
#apiKeyStatus code,
.r-api-key-secret code {
    overflow-wrap: anywhere;
}

.r-api-token-actions {
    display: flex;
    justify-content: flex-end;
}

.r-api-token-actions wa-button {
    white-space: nowrap;
}

.r-api-key-secret {
    background-color: var(--wa-color-surface-lowered);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    min-inline-size: 0;
    padding: var(--wa-space-m);
}

@media (max-width: 1080px) {
    .r-api-token-header {
        display: none;
    }

    .r-api-token-row {
        grid-template-columns: 1fr 1fr;
    }

    .r-api-token-value,
    .r-api-token-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {

    .r-api-token-value {
        grid-column: auto;
    }

    .r-api-token-actions {
        justify-content: flex-start;
    }
}

.r-auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px 16px;
}

.r-topbar {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 22px;
}

h1 {
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

h2,
h3 {
    font-weight: 800;
}

.r-status-line {
    color: var(--muted);
    font-size: 0.92rem;
    margin-top: 4px;
}

.r-progress {
    align-items: stretch;
    backdrop-filter: blur(12px);
    background: color-mix(in oklab, var(--surface), transparent 4%);
    border: 1px solid var(--border);
    border-radius: var(--wa-border-radius-l);
    box-shadow: var(--elev-2);
    display: grid;
    gap: 9px;
    padding: 12px 14px 14px;
    position: fixed;
    top: 20px;
    left: calc(50% + var(--rail-w) / 2);
    transform: translateX(-50%);
    z-index: 20;
    width: min(420px, calc(100vw - 32px));
}

.r-nav-open .r-progress {
    left: calc(50% + var(--sidebar-w) / 2);
}

.r-progress[hidden] {
    display: none;
}

.r-progress-summary {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.r-progress-bar {
    --indicator-color: var(--accent);
    --track-color: var(--accent-soft);
    --track-height: 5px;
}

.r-progress-label {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
}

.r-progress-value {
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.r-progress-error .r-progress-bar {
    --indicator-color: var(--danger);
    --track-color: color-mix(in oklab, var(--danger), transparent 84%);
}

.r-progress-error .r-progress-label,
.r-progress-error .r-progress-value {
    color: var(--danger);
}

.r-progress-warning .r-progress-bar {
    --indicator-color: var(--wa-color-warning);
    --track-color: var(--wa-color-warning-fill-quiet);
}

.r-progress-warning .r-progress-label,
.r-progress-warning .r-progress-value {
    color: var(--wa-color-warning-on-quiet);
}

.r-invisible {
    visibility: hidden;
}

.r-overflow-x-auto {
    overflow-x: auto;
}

.r-pub-refresh {
    flex: none;
}

.r-pub-tabs {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.r-pub-tab,
.r-pub-create {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 12px 16px;
    text-decoration: none;
}

.r-pub-tab.r-is-active {
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
}

.r-pub-create {
    margin: 0 0 8px auto;
}

@keyframes r-loading-pulse {
    50% {
        opacity: 0.45;
    }
}

.r-pub-post-caption {
    font-size: 0.84rem;
    font-weight: 600;
    margin: 0;
}

.r-pub-post-link {
    align-self: center;
    color: var(--wa-color-blue-40);
}

.r-pub-post-link svg {
    display: block;
    height: 16px;
    width: 16px;
}

.r-pub-post-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.r-pub-delete-unavailable {
    display: inline-flex;
}

.r-pub-post-boost {
    background: var(--accent);
    border-radius: 8px;
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 9px;
    text-decoration: none;
}

.r-pub-post-boost:hover {
    background: var(--accent-hover);
}

.r-pub-post-meta {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.72rem;
    gap: 14px;
    grid-column: 1 / -1;
}

.r-pub-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--elev-1);
    container-type: inline-size;
    min-height: clamp(420px, calc(100dvh - 280px), 900px);
    padding: 22px;
}

.r-pub-filters {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(200px, 280px) minmax(240px, 340px) minmax(180px, 240px);
    margin: 22px 2px 24px;
}

.r-pub-filters wa-select {
    width: 100%;
}


.r-pub-list-empty {
    color: var(--muted);
    display: none;
    font-size: 0.86rem;
    min-height: 180px;
    place-items: center;
}

.r-pub-list-empty.r-is-visible {
    display: grid;
}

.r-pub-panel.r-is-loading .r-pub-list-empty {
    animation: r-loading-pulse 1.2s ease-in-out infinite;
}

.r-pub-unified-posts {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.r-pub-unified-post {
    background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.r-pub-post-media {
    width: 100%;
}

.r-pub-post-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.r-pub-post-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.r-pub-post-source {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.r-pub-post-source-logo {
    flex: none;
    height: 24px;
    width: 24px;
}

.r-pub-post-source > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.r-pub-post-source strong,
.r-pub-post-source span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-pub-post-source strong {
    color: var(--text);
    font-size: 0.84rem;
}

.r-pub-post-source span {
    color: var(--muted);
    font-size: 0.72rem;
}

.r-pub-unified-post .r-pub-post-body {
    min-width: 0;
}

.r-pub-unified-post .r-pub-post-caption {
    overflow-wrap: anywhere;
}

.r-pub-unified-post .r-pub-post-meta {
    border-top: 1px solid var(--border);
    display: grid;
    gap: 5px;
    grid-template-columns: 1fr;
    min-width: 0;
    padding-top: 12px;
}

.r-pub-unified-post .r-pub-post-actions {
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: auto;
}

.r-pub-post-action-group {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}


.r-pub-details {
    display: grid;
}

.r-pub-details-media {
    background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%);
    border: 1px solid var(--border);
    overflow: hidden;
}

.r-pub-details-media img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.r-pub-details-source {
    display: flex;
}

.r-pub-details-source > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.r-pub-details-source strong {
    color: var(--text);
    font-size: 0.9rem;
}

.r-pub-details-source span {
    color: var(--muted);
    font-size: 0.78rem;
}

.r-pub-details-section {
    display: grid;
    gap: 7px;
}

.r-pub-details-label {
    font-weight: 700;
    text-transform: uppercase;
}

.r-pub-details-caption {
    color: var(--text);
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.r-pub-details-youtube {
    display: grid;
    gap: 20px;
}

.r-pub-details-youtube[hidden] {
    display: none;
}

.r-pub-details-group {
    border-top: 1px solid var(--border);
    display: grid;
    gap: 14px;
    padding-top: 16px;
}

.r-pub-details-group .r-pub-details-meta {
    border-top: 0;
    padding-top: 0;
}

.r-pub-details-meta {
    border-top: 1px solid var(--border);
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    padding-top: 16px;
}

.r-pub-details-meta > div {
    display: grid;
    gap: 5px;
}

.r-pub-details-id {
    grid-column: 1 / -1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.r-pub-scroll-sentinel {
    height: 1px;
    width: 100%;
}

@container (max-width: 560px) {
    .r-pub-unified-posts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {

    .r-pub-refresh {
        align-self: flex-start;
    }

    .r-pub-panel {
        min-height: 0;
        padding: 16px;
    }

    .r-pub-filters {
        gap: 14px;
        grid-template-columns: 1fr;
        margin-inline: 0;
    }
}


.r-posts-content .r-pub-tabs {
    border-radius: 12px;
    margin-bottom: 24px;
    max-width: 100%;
    overflow-x: auto;
    width: fit-content;
}

.r-posts-content .r-pub-tab,
.r-posts-content .r-pub-create {
    border-radius: 8px;
    flex: none;
    font-size: 0.85rem;
    padding: 9px 14px;
    white-space: nowrap;
}



.r-posts-content .r-pub-tab.r-is-active {
    border-bottom: 0;
}

.r-posts-content .r-pub-create {
    background: #078ca4;
    color: #ffffff;
    margin: 0;
}

.r-posts-content .r-pub-create:hover {
    background: #067a8e;
}

.r-posts-content .r-pub-panel {
    border-color: #dbe5e9;
}

.r-posts-content .r-pub-unified-post .r-pub-post-meta {
    border-color: #e3eaed;
}

.r-posts-content .r-pub-unified-post {
    border-color: #e3eaed;
}


.r-posts-content .r-pub-post-media,
.r-pub-details-dialog .r-pub-details-media {
    background: #eaf5f7;
    border-color: #dbe5e9;
}

.r-posts-content .r-pub-post-caption,
.r-posts-content .r-pub-post-source strong {
    color: #243750;
}

.r-posts-content .r-pub-post-meta,
.r-posts-content .r-pub-post-source span,
.r-posts-content .r-pub-list-empty {
    color: #718092;
}









.r-posts-content wa-button[variant="brand"]::part(base) {
    border-color: #078ca4;
    border-radius: 10px;
    color: #078ca4;
}

.r-posts-content wa-button[variant="brand"][appearance="filled"]::part(base),
.r-posts-content wa-button[variant="brand"]:not([appearance="outlined"])::part(base) {
    background: #078ca4;
    color: #ffffff;
}

.r-posts-content wa-button[variant="brand"]:hover::part(base) {
    background: #eaf5f7;
    border-color: #067a8e;
    color: #067a8e;
}

.r-posts-content wa-button[variant="brand"][appearance="filled"]:hover::part(base),
.r-posts-content wa-button[variant="brand"]:not([appearance="outlined"]):hover::part(base) {
    background: #067a8e;
    color: #ffffff;
}

.r-posts-content wa-button[appearance="plain"]::part(base) {
    color: #078ca4;
}

.r-posts-modal .r-modal {
    border: 1px solid #dbe5e9;
    box-shadow: 0 18px 44px rgb(16 35 61 / 14%);
}

.r-posts-modal .r-modal h2 {
    color: #10233d;
}

.r-posts-modal .r-field input,
.r-posts-modal .r-field textarea {
    background: #f8fbfc;
    border-color: #dbe5e9;
    color: #243750;
}

.r-posts-modal .r-field input:focus,
.r-posts-modal .r-field textarea:focus {
    background: #ffffff;
    border-color: #078ca4;
    box-shadow: 0 0 0 3px rgb(7 140 164 / 14%);
}

.r-posts-modal .r-field[hidden] {
    display: none;
}

.r-pub-details-dialog .r-pub-details-source strong,
.r-pub-details-dialog .r-pub-details-caption {
    color: #243750;
}

.r-pub-details-dialog .r-pub-details-source span,
.r-pub-details-dialog .r-pub-details-label {
    color: #718092;
}

.r-pub-details-dialog .r-pub-details-group,
.r-pub-details-dialog .r-pub-details-meta {
    border-color: #e3eaed;
}

.r-posts-modal wa-button[variant="brand"]::part(base),
.r-pub-details-dialog wa-button[variant="brand"]::part(base) {
    background: #078ca4;
    border-color: #078ca4;
    border-radius: 10px;
    color: #ffffff;
}

.r-posts-modal wa-button[variant="brand"][appearance="outlined"]::part(base) {
    background: #ffffff;
    color: #078ca4;
}

.r-posts-modal wa-button[variant="brand"]:hover::part(base),
.r-pub-details-dialog wa-button[variant="brand"]:hover::part(base) {
    background: #067a8e;
    border-color: #067a8e;
    color: #ffffff;
}

.r-posts-content {
    background:
        radial-gradient(circle at 78% -160px, rgb(4 153 172 / 10%), transparent 340px),
        #f6f8fa;
    margin-right: 0;
    max-width: none;
    min-height: 100vh;
    padding-bottom: 56px;
    padding-top: 40px;
}

.r-posts-content .r-empty.r-is-visible {
    background: #ffffff;
    border: 1px solid #dce4e8;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgb(25 45 58 / 7%);
    color: #596b76;
    margin: 0 auto;
    max-width: 920px;
    padding: 28px;
}

.r-posts-content .r-empty a {
    color: #078aa0;
    font-weight: 700;
}

.r-pub-page {
    display: grid;
    gap: 24px;
    margin: 0;
    max-width: none;
    width: 100%;
}

.r-pub-page-header {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 2px;
}

.r-pub-page-heading {
    display: grid;
    gap: 7px;
}

.r-pub-page-heading h1 {
    color: #152c3a;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: 1.05;
    margin: 0;
}

.r-pub-page-heading p {
    color: #657783;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.r-pub-page-actions {
    align-items: center;
    display: flex;
    flex: none;
    gap: 10px;
}

.r-pub-create {
    align-items: center;
    background: #078aa0;
    border: 1px solid #078aa0;
    border-radius: 9px;
    box-shadow: 0 6px 16px rgb(7 138 160 / 18%);
    color: #ffffff;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 750;
    justify-content: center;
    min-height: 40px;
    padding: 0 17px;
    text-decoration: none;
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.r-pub-create:hover {
    background: #066f81;
    border-color: #066f81;
    box-shadow: 0 8px 20px rgb(7 138 160 / 22%);
    transform: translateY(-1px);
}

.r-pub-refresh::part(base) {
    background: #ffffff;
    border-color: #cfdae0;
    border-radius: 9px;
    color: #405661;
    font-size: 0.82rem;
    font-weight: 700;
    min-height: 40px;
    padding-inline: 16px;
}

.r-pub-refresh:hover::part(base) {
    background: #f2f7f8;
    border-color: #a9c6cc;
    color: #067f93;
}

.r-pub-workspace {
    background: #ffffff;
    border: 1px solid #d8e3e7;
    border-radius: 22px;
    box-shadow: 0 18px 48px rgb(25 45 58 / 8%);
    overflow: hidden;
}

.r-pub-toolbar {
    background:
        radial-gradient(circle at 96% 0, rgb(7 138 160 / 8%), transparent 280px),
        #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.r-pub-toolbar-top {
    align-items: center;
    border-bottom: 1px solid #e5ebee;
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 24px;
}

.r-posts-content .r-pub-tabs {
    align-self: stretch;
    align-items: center;
    background: transparent;
    border: 0;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.r-posts-content .r-pub-tab {
    align-items: center;
    border: 0;
    border-radius: 999px;
    color: #6b7b84;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 720;
    margin: 0;
    min-height: 34px;
    padding: 0 13px;
}

.r-posts-content .r-pub-tab:hover {
    background: #f0f6f7;
    color: #193643;
}

.r-posts-content .r-pub-tab.r-is-active {
    background: #e3f3f5;
    color: #078196;
}

.r-pub-sync {
    align-items: center;
    color: #7a8991;
    display: flex;
    font-size: 0.72rem;
    gap: 7px;
}

.r-pub-sync strong {
    color: #425760;
    font-weight: 720;
}

.r-pub-sync-dot {
    background: #2ca66f;
    border: 3px solid #dff4e9;
    border-radius: 999px;
    height: 10px;
    width: 10px;
}

.r-pub-toolbar-main {
    align-items: center;
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(220px, 0.65fr) minmax(600px, 2fr);
    padding: 22px 24px;
}

.r-pub-result-count {
    align-items: center;
    background: #f4f8f9;
    border: 1px solid #e0e9ec;
    border-radius: 14px;
    display: flex;
    gap: 13px;
    min-width: 0;
    padding: 14px 16px;
}

.r-pub-result-count > strong {
    color: #17323f;
    font-size: 2rem;
    font-weight: 760;
    letter-spacing: -0.05em;
    line-height: 1;
}

.r-pub-result-count > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.r-pub-result-count span {
    color: #334c58;
    font-size: 0.78rem;
    font-weight: 750;
}

.r-pub-result-count p {
    color: #788890;
    font-size: 0.7rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-posts-content .r-pub-filters {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.r-posts-content .r-pub-filters wa-select::part(form-control-label) {
    color: #61737d;
    font-size: 0.68rem;
    font-weight: 720;
    margin-bottom: 5px;
}

.r-posts-content .r-pub-filters wa-select::part(combobox) {
    background: #f4f8f9;
    border-color: #d5dfe3;
    border-radius: 8px;
    box-shadow: none;
    color: #243f4b;
    min-height: 42px;
}

.r-posts-content .r-pub-filters wa-select:focus-within::part(combobox) {
    background: #ffffff;
    border-color: #0791a6;
    box-shadow: 0 0 0 3px rgb(7 145 166 / 12%);
}

.r-pub-toolbar-meta {
    align-items: center;
    background: #fbfcfc;
    border-top: 1px solid #e8edef;
    color: #71818a;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.69rem;
    gap: 0;
    min-height: 42px;
    padding: 9px 24px;
}

.r-pub-toolbar-meta span {
    align-items: center;
    background: #f1f5f6;
    border: 1px solid #e2e9eb;
    border-radius: 999px;
    display: inline-flex;
    margin: 3px 6px 3px 0;
    min-height: 25px;
    padding: 3px 9px;
}

.r-pub-toolbar-meta span + span::before {
    display: none;
}

.r-pub-toolbar-meta strong {
    color: #405660;
    font-weight: 760;
    margin-right: 4px;
}

.r-posts-content .r-pub-panel {
    background: #f7f9fa;
    border: 0;
    border-radius: 0;
    border-top: 1px solid #dfe7ea;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 78%);
    min-height: clamp(420px, calc(100dvh - 320px), 900px);
    padding: 26px;
}

.r-pub-panel-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 0 2px;
}

.r-pub-panel-heading {
    display: grid;
    gap: 5px;
}

.r-pub-panel-heading h2 {
    align-items: center;
    color: #17323f;
    display: flex;
    font-size: 1.18rem;
    font-weight: 760;
    gap: 10px;
    letter-spacing: -0.02em;
    margin: 0;
}

.r-pub-panel-heading h2::before {
    background: #078aa0;
    border: 4px solid #d9f0f3;
    border-radius: 7px;
    box-sizing: border-box;
    content: "";
    height: 15px;
    width: 15px;
}

.r-pub-panel-heading p {
    color: #6d7f88;
    font-size: 0.74rem;
    margin: 0 0 0 25px;
}

.r-pub-select-all {
    color: #49616c;
    font-size: 0.75rem;
    font-weight: 700;
}

.r-pub-select-all::part(control),
.r-pub-post-select::part(control) {
    border-color: #b7c8ce;
    border-radius: 5px;
}

.r-pub-select-all:state(checked)::part(control),
.r-pub-select-all:state(indeterminate)::part(control),
.r-pub-post-select:state(checked)::part(control) {
    background: #078aa0;
    border-color: #078aa0;
}

.r-pub-bulk-actions {
    align-items: center;
    background: #eaf6f7;
    border: 1px solid #c7e2e6;
    border-radius: 12px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
    margin-inline: 16px -16px;
    padding: 11px 14px;
}

.r-pub-bulk-actions[hidden] {
    display: none;
}

.r-pub-bulk-summary {
    display: grid;
    gap: 2px;
}

.r-pub-bulk-summary strong {
    color: #193e49;
    font-size: 0.78rem;
}

.r-pub-bulk-summary span {
    color: #617983;
    font-size: 0.68rem;
}

.r-pub-bulk-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.r-pub-bulk-buttons wa-button::part(base) {
    border-radius: 8px;
    font-size: 0.71rem;
    font-weight: 740;
}

.r-pub-panel-alert {
    border-radius: 12px;
    margin-bottom: 20px;
    margin-top: 0;
}

.r-posts-content .r-pub-list-empty.r-is-visible {
    background: rgb(255 255 255 / 74%);
    border: 1px dashed #afc2c8;
    border-radius: 16px;
    color: #6d7f88;
    min-height: 230px;
    padding: 28px;
    text-align: center;
}

.r-posts-content .r-pub-unified-posts {
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.r-posts-content .r-pub-unified-post {
    --r-pub-platform: #078aa0;
    background: #ffffff;
    border: 1px solid #d4dfe3;
    border-radius: 18px;
    box-shadow: inset 0 3px 0 var(--r-pub-platform), 0 8px 22px rgb(25 45 58 / 7%);
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.r-posts-content .r-pub-unified-post[data-platform="instagram"] {
    --r-pub-platform: #e94f74;
}

.r-posts-content .r-pub-unified-post[data-platform="facebook"] {
    --r-pub-platform: #1877f2;
}

.r-posts-content .r-pub-unified-post[data-platform="tiktok"] {
    --r-pub-platform: #17252b;
}

.r-posts-content .r-pub-unified-post[data-platform="youtube"] {
    --r-pub-platform: #ee2b2b;
}

.r-posts-content .r-pub-unified-post:hover {
    border-color: color-mix(in srgb, var(--r-pub-platform) 22%, #bdcdd2);
    box-shadow: inset 0 3px 0 var(--r-pub-platform), 0 18px 38px rgb(25 45 58 / 12%);
    transform: translateY(-3px);
}

.r-posts-content .r-pub-unified-post.r-is-selected {
    border-color: #078aa0;
    box-shadow: inset 0 3px 0 #078aa0, 0 0 0 3px rgb(7 138 160 / 13%), 0 12px 28px rgb(25 45 58 / 10%);
}

.r-pub-post-card-identity {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 0;
}

.r-pub-post-select {
    flex: none;
}

.r-pub-post-card-header {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e5ebee;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 16px;
}

.r-pub-post-header-actions {
    flex: none;
    flex-wrap: nowrap;
}

.r-pub-unified-post .r-pub-post-source {
    gap: 10px;
}

.r-pub-unified-post .r-pub-post-source-logo {
    background: color-mix(in srgb, var(--r-pub-platform) 6%, #f8fafb);
    border: 1px solid color-mix(in srgb, var(--r-pub-platform) 23%, #dbe5e8);
    border-radius: 10px;
    height: 34px;
    padding: 7px;
    width: 34px;
}

.r-pub-unified-post .r-pub-post-source strong {
    color: #203b47;
    font-size: 0.84rem;
    font-weight: 760;
}

.r-pub-unified-post .r-pub-post-source span {
    color: #73838b;
    font-size: 0.66rem;
    font-weight: 650;
}

.r-pub-post-status {
    align-items: center;
    background: #eaf7f0;
    border: 1px solid #d1eddd;
    border-radius: 999px;
    color: #23794f;
    display: inline-flex;
    flex: none;
    font-size: 0.63rem;
    font-weight: 760;
    gap: 6px;
    padding: 6px 8px;
}

.r-pub-post-status::before {
    background: #2ca66f;
    border-radius: 999px;
    content: "";
    height: 6px;
    width: 6px;
}

.r-pub-post-media {
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--r-pub-platform) 7%, #eef3f4), #e5ecee);
    display: block;
    overflow: hidden;
    position: relative;
}

.r-pub-post-media::after {
    background: linear-gradient(180deg, transparent 50%, rgb(16 37 47 / 30%) 100%);
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 180ms ease;
}

.r-pub-post-media img {
    transition: transform 260ms ease;
}

.r-pub-unified-post:hover .r-pub-post-media::after {
    opacity: 1;
}

.r-pub-unified-post:hover .r-pub-post-media img {
    transform: scale(1.035);
}

.r-pub-post-media-badge {
    backdrop-filter: blur(8px);
    background: rgb(255 255 255 / 92%);
    border: 1px solid rgb(255 255 255 / 84%);
    border-radius: 8px;
    bottom: 12px;
    color: #26434e;
    font-size: 0.66rem;
    font-weight: 760;
    opacity: 0;
    padding: 7px 10px;
    position: absolute;
    right: 12px;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 1;
}

.r-pub-unified-post:hover .r-pub-post-media-badge {
    opacity: 1;
    transform: translateY(0);
}

.r-pub-post-card-content {
    gap: 13px;
    padding: 15px 16px 16px;
}

.r-pub-unified-post .r-pub-post-body {
    min-height: 2.9em;
}

.r-pub-unified-post .r-pub-post-caption {
    color: #354f5a;
    font-size: 0.84rem;
    font-weight: 480;
    line-height: 1.5;
    margin: 0;
    max-height: 3em;
    overflow: hidden;
}

.r-pub-post-caption.r-is-empty {
    align-items: center;
    background: #f5f8f9;
    border: 1px dashed #d9e3e6;
    border-radius: 9px;
    color: #829199;
    display: flex;
    font-style: normal;
    min-height: 3.2em;
    padding: 9px 10px;
}

.r-posts-content .r-pub-unified-post .r-pub-post-meta {
    align-items: center;
    border-top: 1px solid #e7edef;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding-top: 12px;
}

.r-pub-post-meta-primary,
.r-pub-post-meta-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.r-pub-post-meta-primary span {
    color: #6d7f88;
    font-size: 0.69rem;
    font-weight: 650;
}

.r-pub-post-meta-secondary span {
    background: #f0f4f5;
    border: 1px solid #e0e8eb;
    border-radius: 999px;
    color: #5f737c;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
}

.r-posts-content .r-pub-unified-post .r-pub-post-actions {
    align-items: center;
    background: #f9fbfb;
    border-top: 1px solid #e3eaed;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: -16px;
    margin-inline: -16px;
    margin-top: auto;
    padding: 12px 16px;
}

.r-pub-post-action-group {
    flex-wrap: nowrap;
    gap: 7px;
}

.r-posts-content .r-pub-comments-link::part(base) {
    border-radius: 8px;
    height: 32px;
    padding: 0;
    width: 32px;
}

.r-pub-comments-link svg {
    display: block;
    height: 16px;
    width: 16px;
}

.r-pub-unified-post wa-button[appearance="plain"]::part(base) {
    background: #eaf5f6;
    border-radius: 8px;
    color: #077c90;
    font-size: 0.73rem;
    font-weight: 760;
    min-height: 32px;
    padding-inline: 10px;
}

.r-pub-unified-post wa-button[appearance="plain"]:hover::part(base) {
    background: #dceff1;
}

.r-posts-content .r-pub-post-link {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d3dfe3;
    border-radius: 8px;
    color: #5a7079;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.r-posts-content .r-pub-post-link:hover {
    background: #edf6f7;
    border-color: #aecbd1;
    color: #077f93;
}

.r-posts-content .r-pub-post-boost {
    background: #173642;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 760;
    min-height: 32px;
    padding: 8px 11px;
}

.r-posts-content .r-pub-post-boost:hover {
    background: #077f93;
}

.r-pub-unified-post wa-button[variant="danger"]::part(base) {
    background: transparent;
    border-color: transparent;
    border-radius: 8px;
    min-height: 32px;
}

.r-pub-unified-post wa-button[variant="danger"]:hover::part(base) {
    background: #fff0f2;
    border-color: #ffcbd2;
}

@container (min-width: 1250px) {
    .r-posts-content .r-pub-unified-posts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (min-width: 1600px) {
    .r-posts-content .r-pub-unified-posts {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@container (max-width: 880px) {
    .r-posts-content .r-pub-unified-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 580px) {
    .r-posts-content .r-pub-unified-posts {
        grid-template-columns: 1fr;
    }
}

@media (hover: none) {
    .r-pub-post-media-badge {
        opacity: 1;
        transform: none;
    }
}
.r-pub-details-dialog {
    --width: min(800px, calc(100vw - 32px));
}

.r-pub-action-dialog {
    --width: min(680px, calc(100vw - 32px));
}

body:has(.r-pub-action-dialog[open]) {
    overflow: hidden;
}

.r-pub-action-dialog-body {
    display: grid;
    gap: 14px;
}

.r-pub-action-dialog-body > p {
    color: #526375;
    line-height: 1.55;
    margin: 0;
}

.r-pub-reuse-note {
    background: #f3f7f8;
    border: 1px solid #d8e3e7;
    border-radius: 10px;
    color: #526375;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 10px 12px;
}

.r-pub-reuse-list {
    display: grid;
    gap: 10px;
    max-height: 48dvh;
    overflow-y: auto;
}

.r-pub-reuse-item {
    align-items: center;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.8fr);
    padding: 12px;
}

.r-pub-reuse-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.r-pub-reuse-copy strong {
    color: #193e49;
    font-size: 0.74rem;
}

.r-pub-reuse-copy span {
    color: #617983;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-pub-reuse-account {
    min-width: 0;
    width: 100%;
}

.r-pub-details {
    gap: 20px;
}

.r-pub-details-media {
    border-radius: 12px;
    max-height: 52dvh;
}

.r-pub-details-media img {
    max-height: 52dvh;
}

.r-pub-details-source {
    align-items: center;
    background: #f6f9fa;
    border: 1px solid #e0e7ea;
    border-radius: 10px;
    gap: 12px;
    padding: 12px 14px;
}

.r-pub-details-section,
.r-pub-details-group {
    gap: 8px;
}

.r-pub-details-label {
    color: #71818a;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

.r-pub-details-caption {
    font-size: 0.88rem;
    line-height: 1.65;
}

@media (max-width: 1100px) {
    .r-pub-toolbar-main {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .r-pub-result-count p {
        white-space: normal;
    }
}

@media (max-width: 880px) {
    .r-posts-content {
        padding-top: 72px;
    }

    .r-pub-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .r-pub-page-actions {
        width: 100%;
    }

    .r-posts-content .r-pub-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .r-pub-page-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .r-pub-create,
    .r-pub-refresh,
    .r-pub-refresh::part(base) {
        justify-content: center;
        width: 100%;
    }

    .r-pub-toolbar-top {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding-top: 4px;
    }

    .r-posts-content .r-pub-tabs {
        min-height: 44px;
    }

    .r-pub-sync {
        border-top: 1px solid #edf1f3;
        padding: 10px 0;
    }

    .r-pub-toolbar-main {
        gap: 20px;
        padding: 18px;
    }

    .r-posts-content .r-pub-filters {
        grid-template-columns: 1fr;
    }

    .r-pub-toolbar-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 11px 18px;
    }

    .r-pub-toolbar-meta span + span::before {
        display: none;
    }

    .r-pub-panel-top,
    .r-pub-bulk-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .r-pub-bulk-buttons {
        justify-content: stretch;
    }

    .r-pub-bulk-buttons wa-button,
    .r-pub-bulk-buttons wa-button::part(base) {
        flex: 1;
    }

    .r-pub-reuse-item {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .r-pub-reuse-list {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 440px) {
    .r-pub-page-heading h1 {
        font-size: 1.8rem;
    }

    .r-posts-content .r-pub-unified-posts {
        grid-template-columns: 1fr;
    }
}
.r-pink-panel {
    margin-bottom: 22px;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.r-pink-panel::part(body) {
    background-color: transparent;
    flex: 1;
}

.r-calendar-content {
    background: #f6f9fa;
    margin-right: 0;
    max-width: none;
    min-height: 100vh;
    padding-bottom: 56px;
    padding-top: 40px;
}

.r-calendar-page {
    margin: 0;
    max-width: none;
    width: 100%;
}

.r-calendar-header {
    align-items: center;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.r-calendar-header h1 {
    color: #10233d;
    font-size: clamp(2rem, 3vw, 2.6rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 6px 0 8px;
}

.r-calendar-header p {
    color: #718092;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

.r-calendar-eyebrow {
    color: #078ca4;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.r-calendar-primary-actions,
.r-calendar-period-controls,
.r-calendar-view-switch,
.r-calendar-platform-filters,
.r-calendar-gap-message,
.r-calendar-gap-action,
.r-calendar-day-platforms,
.r-calendar-day-post-meta,
.r-calendar-day-post-platforms,
.r-calendar-day-post-footer,
.r-calendar-day-post-actions,
.r-calendar-recommendation-label {
    align-items: center;
    display: flex;
}

.r-calendar-primary-actions {
    gap: 16px;
}

.r-calendar-view-switch {
    background: #ffffff;
    border: 1px solid #dbe5e9;
    border-radius: 11px;
    padding: 3px;
}

.r-calendar-view-button,
.r-calendar-today,
.r-calendar-icon-button,
.r-calendar-platform-filter,
.r-calendar-gap-banner,
.r-calendar-day,
.r-calendar-post-action {
    background: transparent;
    color: #526375;
    font-weight: 700;
}

.r-calendar-view-button {
    border-radius: 8px;
    font-size: 0.88rem;
    min-height: 38px;
    min-width: 88px;
    padding: 0 18px;
}

.r-calendar-view-button:hover {
    background: #f0f6f7;
    color: #0b6f82;
}

.r-calendar-view-button.r-is-active {
    background: #078ca4;
    color: #ffffff;
}

.r-calendar-create {
    align-items: center;
    background: #078ca4;
    border-radius: 10px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 750;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    text-decoration: none;
}

.r-calendar-create:hover {
    background: #067a8e;
}

.r-calendar-section-nav {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d8e3e7;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgb(25 45 58 / 5%);
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    min-height: 58px;
    padding: 0 22px;
}

.r-calendar-section-nav .r-pub-tabs {
    align-self: stretch;
    background: transparent;
    border: 0;
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
}

.r-calendar-section-nav .r-pub-tab {
    align-items: center;
    border-bottom: 2px solid transparent;
    color: #6b7b84;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 720;
    margin-bottom: -1px;
    padding: 0 1px;
}

.r-calendar-section-nav .r-pub-tab:hover {
    color: #193643;
}

.r-calendar-section-nav .r-pub-tab.r-is-active {
    background: transparent;
    border-bottom-color: #078aa0;
    color: #078196;
}

.r-calendar-toolbar {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d8e3e7;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 16px 18px 12px;
}

.r-calendar-period-controls {
    gap: 8px;
}

.r-calendar-period-controls strong {
    color: #10233d;
    font-size: 1.05rem;
    margin-left: 8px;
    min-width: 160px;
}

.r-calendar-today,
.r-calendar-icon-button {
    background: #ffffff;
    border: 1px solid #dbe5e9;
    border-radius: 9px;
    min-height: 40px;
}

.r-calendar-today {
    font-size: 0.84rem;
    padding: 0 16px;
}

.r-calendar-icon-button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.r-calendar-today:hover,
.r-calendar-icon-button:hover {
    background: #eaf5f7;
    border-color: #8dc8d2;
    color: #078ca4;
}

.r-calendar-updated {
    display: none;
}

.r-calendar-platform-filters {
    background: #ffffff;
    border: 1px solid #d8e3e7;
    border-radius: 0 0 16px 16px;
    border-top: 0;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding: 4px 18px 16px;
    scrollbar-width: thin;
}

.r-calendar-platform-filter {
    background: #f6f9fa;
    border: 1px solid #dbe5e9;
    border-radius: 9px;
    flex: none;
    font-size: 0.8rem;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
}

.r-calendar-platform-filter img {
    height: 17px;
    width: 17px;
}

.r-calendar-platform-filter:hover {
    background: #f0f6f7;
    border-color: #bfd8dd;
    color: #0b6f82;
}

.r-calendar-platform-filter.r-is-active {
    background: #078ca4;
    border-color: #078ca4;
    box-shadow: 0 5px 14px rgb(7 140 164 / 18%);
    color: #ffffff;
}

.r-drafts-toolbar {
    border-bottom: 1px solid #d8e3e7;
    border-radius: 16px;
    margin-bottom: 18px;
    padding: 12px 14px;
}

.r-drafts-toolbar .r-calendar-platform-filters {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 0;
    width: 100%;
}

.r-drafts-library {
    container-type: inline-size;
    margin-bottom: 0;
}

.r-calendar-gap-banner {
    background: #fffaf0;
    border: 1px solid #edbd65;
    border-radius: 10px;
    color: #8a5500;
    justify-content: space-between;
    margin-bottom: 14px;
    min-height: 48px;
    padding: 9px 14px;
    width: 100%;
}

.r-calendar-gap-banner[hidden],
.r-calendar-loading[hidden] {
    display: none;
}

.r-calendar-gap-banner:hover {
    background: #fff6e5;
}

.r-calendar-gap-message,
.r-calendar-gap-action {
    gap: 9px;
}

.r-calendar-gap-message strong {
    color: #49360f;
    font-size: 0.84rem;
}

.r-calendar-gap-action {
    color: #80550d;
    font-size: 0.78rem;
}

.r-calendar-gap-action wa-icon {
    font-size: 0.72rem;
}

.r-calendar-workspace {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.r-calendar-drafts {
    background: #f7fbfc;
    border: 1px solid #cddfe4;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgb(25 45 58 / 5%);
    margin-bottom: 18px;
    padding: 18px;
}

.r-calendar-drafts-header {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.r-calendar-drafts-header h2,
.r-calendar-drafts-header p {
    margin: 0;
}

.r-calendar-drafts-header h2 {
    color: #17324d;
    font-size: 1.05rem;
    margin-top: 2px;
}

.r-calendar-drafts-header p {
    color: #6c7c8c;
    font-size: 0.76rem;
    margin-top: 4px;
}

.r-calendar-drafts-header-actions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.r-calendar-drafts-header-actions > strong {
    background: #e3f2f4;
    border-radius: 999px;
    color: #0b6f82;
    font-size: 0.7rem;
    padding: 5px 9px;
}

.r-calendar-drafts-select-all {
    color: #49616c;
    font-size: 0.72rem;
    font-weight: 700;
}

.r-calendar-drafts-select-all::part(control),
.r-calendar-draft-select::part(control) {
    border-color: #b7c8ce;
    border-radius: 5px;
}

.r-calendar-drafts-select-all:state(checked)::part(control),
.r-calendar-drafts-select-all:state(indeterminate)::part(control),
.r-calendar-draft-select:state(checked)::part(control) {
    background: #078aa0;
    border-color: #078aa0;
}

.r-calendar-drafts-bulk-actions {
    align-items: center;
    background: #eaf6f7;
    border: 1px solid #c7e2e6;
    border-radius: 12px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.r-calendar-drafts-bulk-actions[hidden] {
    display: none;
}

.r-calendar-drafts-bulk-summary {
    display: grid;
    gap: 2px;
}

.r-calendar-drafts-bulk-summary strong {
    color: #193e49;
    font-size: 0.76rem;
}

.r-calendar-drafts-bulk-summary span {
    color: #617983;
    font-size: 0.68rem;
}

.r-calendar-drafts-bulk-buttons {
    align-items: center;
    display: flex;
    gap: 7px;
}

.r-calendar-drafts-bulk-buttons wa-button::part(base) {
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 740;
}

.r-calendar-draft-posts {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

@container (min-width: 1250px) {
    .r-calendar-draft-posts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (min-width: 1600px) {
    .r-calendar-draft-posts {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@container (max-width: 880px) {
    .r-calendar-draft-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 580px) {
    .r-calendar-draft-posts {
        grid-template-columns: 1fr;
    }
}

.r-calendar-draft-posts .r-calendar-day-post {
    padding-left: 40px;
    position: relative;
}

.r-calendar-draft-posts .r-calendar-day-post.r-is-selected {
    border-color: #0795aa;
    box-shadow: 0 0 0 2px rgb(7 149 170 / 14%);
}

.r-calendar-draft-media {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    display: block;
    margin: 10px 0 8px;
    object-fit: cover;
    width: 100%;
}

.r-calendar-draft-media-placeholder {
    align-items: center;
    background: #eef5f6;
    border: 1px dashed #bdd4d9;
    color: #5d7480;
    display: flex;
    flex-direction: column;
    gap: 9px;
    justify-content: center;
}

.r-calendar-draft-media-placeholder wa-icon {
    color: #078ca4;
    font-size: 1.75rem;
}

.r-calendar-draft-media-placeholder span {
    font-size: 0.72rem;
    font-weight: 700;
}

.r-draft-edit-media {
    align-items: center;
    background: #f4fafb;
    border: 1px solid #d3e4e8;
    border-radius: 10px;
    display: grid;
    gap: 12px;
    grid-template-columns: 76px 1fr auto;
    padding: 10px;
}

.r-draft-edit-media[hidden] {
    display: none;
}

.r-draft-edit-media img {
    aspect-ratio: 16 / 10;
    border-radius: 7px;
    object-fit: cover;
    width: 76px;
}

.r-draft-edit-media strong,
.r-draft-edit-media span {
    display: block;
}

.r-draft-edit-media span,
.r-draft-edit-media-empty {
    color: #68798a;
    font-size: 0.75rem;
}

.r-draft-platform-editor {
    max-height: calc(100dvh - 40px);
    max-width: 920px;
    overflow-y: auto;
}

.r-draft-edit-account {
    align-items: center;
    background: #f4f9fa;
    border: 1px solid #d8e5e8;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.r-draft-edit-account img {
    height: 28px;
    object-fit: contain;
    width: 28px;
}

.r-draft-edit-account strong,
.r-draft-edit-account span {
    display: block;
}

.r-draft-edit-account span,
.r-draft-platform-settings > span,
.r-draft-platform-settings .r-field > span {
    color: #697b85;
    font-size: 0.72rem;
}

.r-draft-platform-settings {
    background: #f7fafb;
    border: 1px solid #d8e5e8;
    border-radius: 12px;
    margin-top: 16px;
    padding: 16px;
}

.r-draft-platform-settings[hidden] {
    display: none;
}

.r-draft-platform-settings h3 {
    color: #163240;
    font-size: 0.9rem;
    margin: 0 0 14px;
}

.r-draft-settings-header {
    border-bottom: 1px solid #dce8ea;
    margin: -2px 0 16px;
    padding-bottom: 13px;
}

.r-draft-settings-header h3 {
    margin-bottom: 4px;
}

.r-draft-settings-header p {
    color: #697b85;
    font-size: 0.74rem;
    line-height: 1.45;
    margin: 0;
}

.r-draft-setting-grid,
.r-draft-collaborators {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r-draft-instagram-settings {
    background: #fdf8fa;
    border-color: #ead8df;
    container-type: inline-size;
}

.r-draft-instagram-settings .r-draft-settings-header {
    border-bottom-color: #eadfe3;
}

.r-draft-instagram-ai-option {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e7dce0;
    border-radius: 10px;
    color: #243750;
    cursor: pointer;
    display: flex;
    gap: 11px;
    margin-bottom: 16px;
    padding: 12px 13px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.r-draft-instagram-ai-option:hover {
    border-color: #dc8fab;
}

.r-draft-instagram-ai-option:has(input:focus-visible) {
    border-color: #e1306c;
    box-shadow: 0 0 0 3px rgb(225 48 108 / 10%);
}

.r-draft-instagram-ai-option input {
    flex: none;
    height: 16px;
    margin: 2px 0 0;
    padding: 0;
    width: 16px;
}

.r-draft-instagram-ai-option span,
.r-draft-instagram-ai-option strong,
.r-draft-instagram-ai-option small {
    display: block;
}

.r-draft-instagram-ai-option strong {
    color: #243750;
    font-size: 0.78rem;
    line-height: 1.35;
}

.r-draft-instagram-ai-option small {
    color: #697b85;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.45;
    margin-top: 3px;
}

.r-draft-instagram-collaborators-field {
    margin-bottom: 0;
}

.r-draft-field-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.r-draft-field-heading strong {
    color: #243750;
    font-size: 0.78rem;
}

.r-draft-field-heading span {
    background: #ffffff;
    border: 1px solid #eadfe3;
    border-radius: 999px;
    color: #806772;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 7px;
}

.r-draft-instagram-collaborators-field > p {
    color: #697b85;
    font-size: 0.7rem;
    line-height: 1.45;
    margin: 5px 0 12px;
}

.r-draft-collaborators label {
    display: grid;
    gap: 6px;
}

.r-draft-collaborators label > span {
    color: #596d78;
    font-size: 0.68rem;
    font-weight: 650;
}

@container (max-width: 600px) {
    .r-draft-instagram-settings .r-draft-collaborators {
        grid-template-columns: 1fr;
    }
}

.r-draft-threads-settings {
    background: #f4f9fa;
    border-color: #cfe1e5;
}

.r-draft-threads-grid {
    display: grid;
    gap: 4px;
}

.r-draft-threads-grid .r-field {
    margin-bottom: 12px;
}

.r-draft-threads-grid .r-field > span {
    line-height: 1.45;
}

.r-draft-threads-approval {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #d7e5e8;
    border-radius: 10px;
    color: #243750;
    cursor: pointer;
    display: flex;
    gap: 11px;
    padding: 12px 13px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.r-draft-threads-approval:hover {
    border-color: #8dc8d2;
}

.r-draft-threads-approval:has(input:focus-visible) {
    border-color: #078ca4;
    box-shadow: 0 0 0 3px rgb(7 140 164 / 12%);
}

.r-draft-threads-approval input {
    flex: none;
    height: 16px;
    margin: 2px 0 0;
    padding: 0;
    width: 16px;
}

.r-draft-threads-approval span,
.r-draft-threads-approval strong,
.r-draft-threads-approval small {
    display: block;
}

.r-draft-threads-approval strong {
    color: #243750;
    font-size: 0.78rem;
    line-height: 1.35;
}

.r-draft-threads-approval small {
    color: #697b85;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.45;
    margin-top: 3px;
}

.r-draft-posting-mode {
    border: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 14px;
    padding: 0;
}

.r-draft-posting-mode legend {
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.r-draft-posting-mode label {
    border: 1px solid #d2e0e4;
    border-radius: 9px;
    padding: 12px;
}

.r-posts-modal .r-field select {
    background: #f8fbfc;
    border: 1px solid #dbe5e9;
    border-radius: 8px;
    color: #243750;
    min-height: 40px;
    padding: 0 10px;
    width: 100%;
}

@media (max-width: 640px) {
    .r-draft-setting-grid,
    .r-draft-collaborators,
    .r-draft-posting-mode {
        grid-template-columns: 1fr;
    }
}

.r-calendar-draft-select {
    left: 12px;
    position: absolute;
    top: 10px;
}

.r-calendar-board,
.r-calendar-day-panel {
    background: #ffffff;
    border: 1px solid #d8e3e7;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgb(25 45 58 / 6%);
    min-width: 0;
}

.r-calendar-board {
    overflow: auto;
    position: relative;
}

.r-calendar-weekdays,
.r-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(104px, 1fr));
    min-width: 728px;
}

.r-calendar-weekdays {
    background: #f3f7f8;
    border-bottom: 1px solid #dbe5e9;
    border-radius: 18px 18px 0 0;
    color: #718092;
    font-size: 0.72rem;
    font-weight: 750;
    text-align: center;
}

.r-calendar-weekdays span {
    padding: 10px 4px;
}

.r-calendar-day {
    align-items: stretch;
    border-bottom: 1px solid #e3eaed;
    border-radius: 0;
    border-right: 1px solid #e3eaed;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 122px;
    padding: 11px;
    text-align: left;
    transition: background 140ms ease, box-shadow 140ms ease;
}

.r-calendar-day:nth-child(7n) {
    border-right: 0;
}

.r-calendar-day:hover {
    background: #f0f8f9;
}

.r-calendar-day:focus-visible {
    box-shadow: inset 0 0 0 3px rgb(7 140 164 / 30%);
    outline: 0;
}

.r-calendar-day.r-is-outside {
    background: #fbfcfc;
    color: #a3aeb8;
}

.r-calendar-day.r-is-today .r-calendar-day-number {
    align-items: center;
    background: #078ca4;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    height: 25px;
    justify-content: center;
    width: 25px;
}

.r-calendar-day.r-is-selected {
    background: linear-gradient(145deg, #edf9fa, #e4f3f5);
    box-shadow: inset 0 0 0 2px #078ca4, 0 5px 18px rgb(7 140 164 / 8%);
    position: relative;
    z-index: 1;
}

.r-calendar-day.r-is-drop-target {
    background: #def2f4;
    box-shadow: inset 0 0 0 3px #078ca4;
}

.r-calendar-day.r-is-drop-disabled {
    background: #f3f5f6;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.55;
}

.r-calendar-day.r-is-drop-disabled:hover {
    background: #f3f5f6;
}

.r-calendar-day.r-is-invalid-drop-target {
    background: color-mix(in oklab, var(--danger), transparent 91%);
    box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--danger), transparent 25%);
    opacity: 0.82;
}

.r-calendar-day-number {
    align-items: center;
    color: #243750;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    height: 25px;
}

.r-calendar-day.r-is-outside .r-calendar-day-number {
    color: #a3aeb8;
}

.r-calendar-day-summary {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.r-calendar-day-summary strong {
    color: #243750;
    font-size: 0.76rem;
}

.r-calendar-day-platforms {
    flex-wrap: wrap;
    gap: 4px;
}

.r-calendar-platform-logo {
    height: 16px;
    object-fit: contain;
    width: 16px;
}

.r-calendar-day-status {
    color: #0b6f82;
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1.25;
}

.r-calendar-day-gap {
    align-items: center;
    color: #b36a00;
    display: flex;
    font-size: 0.69rem;
    font-weight: 700;
    gap: 6px;
    line-height: 1.25;
}

.r-calendar-day-gap wa-icon {
    font-size: 0.48rem;
}

.r-calendar-weekdays.r-is-week-view,
.r-calendar-grid.r-is-week-view {
    grid-template-columns: repeat(7, minmax(156px, 1fr));
    min-width: 1092px;
}

.r-calendar-grid.r-is-week-view .r-calendar-day {
    gap: 10px;
    min-height: 460px;
    padding: 10px 8px;
}

.r-calendar-week-agenda {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.r-calendar-week-post {
    background: #ffffff;
    border: 1px solid #dbe5e9;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 9px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.r-calendar-week-post:hover {
    border-color: #8dc8d2;
    box-shadow: 0 5px 14px rgb(16 35 61 / 7%);
}

.r-calendar-day-summary.r-is-draggable {
    cursor: grab;
}

.r-calendar-day-summary.r-is-dragging {
    cursor: grabbing;
    opacity: 0.5;
}

.r-calendar-day-summary.r-calendar-drag-preview {
    background: #ffffff;
    border: 1px solid #8dc8d2;
    border-radius: 10px;
    padding: 10px;
}

.r-calendar-week-post.r-is-draggable {
    cursor: grab;
}

.r-calendar-week-post.r-is-dragging {
    cursor: grabbing;
    opacity: 0.5;
}

.r-calendar-week-post-header,
.r-calendar-week-post-footer,
.r-calendar-week-post-platforms {
    align-items: center;
    display: flex;
}

.r-calendar-week-post-header,
.r-calendar-week-post-footer {
    gap: 6px;
    justify-content: space-between;
    min-width: 0;
}

.r-calendar-week-post-header strong {
    color: #243750;
    flex: none;
    font-size: 0.68rem;
}

.r-calendar-week-post-platforms {
    flex: none;
    gap: 3px;
}

.r-calendar-week-post-logo {
    height: 14px;
    object-fit: contain;
    width: 14px;
}

.r-calendar-week-post-content {
    color: #243750;
    display: -webkit-box;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.r-calendar-week-post-account {
    color: #718092;
    font-size: 0.61rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-calendar-week-post-status {
    border-radius: 999px;
    flex: none;
    font-size: 0.56rem;
    font-weight: 750;
    padding: 2px 5px;
}

.r-calendar-week-post-status.r-is-scheduled {
    background: #eaf5f7;
    color: #0b6f82;
}

.r-calendar-week-post-status.r-is-publishing {
    background: #edf6ec;
    color: #336b2d;
}

.r-calendar-week-post-status.r-is-draft {
    background: #f3f5f6;
    color: #526375;
}

.r-calendar-week-post-status.r-is-failed {
    background: #fff0ef;
    color: #a23f35;
}

.r-calendar-week-more {
    color: #0b6f82;
    font-size: 0.67rem;
    font-weight: 750;
    padding: 2px 4px;
}

.r-calendar-week-empty {
    align-items: flex-start;
    border: 1px dashed #cbdadd;
    border-radius: 9px;
    color: #718092;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 11px 9px;
    white-space: normal;
    width: 100%;
}

.r-calendar-week-empty strong,
.r-calendar-week-empty span {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.r-calendar-week-empty strong {
    color: #526375;
    font-size: 0.68rem;
}

.r-calendar-week-empty span {
    font-size: 0.61rem;
    line-height: 1.4;
}

.r-calendar-loading {
    align-items: center;
    background: rgb(255 255 255 / 88%);
    color: #718092;
    display: flex;
    font-size: 0.85rem;
    inset: 37px 0 0;
    justify-content: center;
    min-height: 300px;
    position: absolute;
    z-index: 4;
}

.r-calendar-day-panel {
    display: flex;
    flex-direction: column;
    min-height: 610px;
    overflow: hidden;
}

.r-calendar-day-header {
    align-items: flex-start;
    background: #f8fbfc;
    border-bottom: 1px solid #e3eaed;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 20px 18px 17px;
}

.r-calendar-day-header h2 {
    color: #10233d;
    font-size: 0.98rem;
    line-height: 1.25;
    margin: 0 0 4px;
}

.r-calendar-day-header p {
    color: #718092;
    font-size: 0.72rem;
    margin: 0;
}

.r-calendar-add-day {
    align-items: center;
    color: #078ca4;
    display: inline-flex;
    flex: none;
    font-size: 0.72rem;
    font-weight: 750;
    gap: 5px;
    padding-top: 2px;
    text-decoration: none;
}

.r-calendar-day-empty {
    align-items: center;
    color: #718092;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 64px 28px 42px;
    text-align: center;
}

.r-calendar-day-empty[hidden] {
    display: none;
}

.r-calendar-day-empty wa-icon {
    color: #8dc8d2;
    font-size: 1.65rem;
    margin-bottom: 5px;
}

.r-calendar-day-empty strong {
    color: #243750;
    font-size: 0.85rem;
}

.r-calendar-day-empty span {
    font-size: 0.73rem;
    line-height: 1.5;
}

.r-calendar-day-posts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    max-height: 548px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px;
}

.r-calendar-day-post {
    background: #ffffff;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    cursor: grab;
    margin: 0;
    min-width: 0;
    padding: 12px;
    transition: border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
    user-select: none;
}

.r-calendar-day-post:hover {
    border-color: #8dc8d2;
    box-shadow: 0 8px 22px rgb(16 35 61 / 9%);
}

.r-calendar-day-post-media-wrap {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows 180ms ease, margin-top 180ms ease, opacity 140ms ease;
}

.r-calendar-day-post:hover .r-calendar-day-post-media-wrap {
    grid-template-rows: 1fr;
    margin-top: 10px;
    opacity: 1;
}

.r-calendar-day-post-media-inner {
    min-height: 0;
    overflow: hidden;
}

.r-calendar-day-post-media {
    background: #f3f7f8;
    border-radius: 9px;
    display: block;
    max-height: 230px;
    object-fit: contain;
    width: 100%;
}

.r-calendar-day-post:hover .r-calendar-day-post-content {
    display: block;
    overflow: visible;
    white-space: pre-wrap;
}

.r-calendar-day-post.r-is-dragging {
    cursor: grabbing;
    opacity: 0.5;
}

.r-calendar-drag-preview {
    box-shadow: 0 18px 42px rgb(16 35 61 / 22%);
    cursor: grabbing;
    left: 0;
    margin: 0;
    max-width: 320px;
    opacity: 0.96;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: none;
    z-index: 100;
}

.r-calendar-drag-preview .r-calendar-day-post-actions {
    display: none;
}

.r-calendar-drag-preview .r-calendar-day-post-media-wrap {
    display: none;
}

.r-calendar-drag-hint {
    border-top: 1px solid #e3eaed;
    color: #718092;
    font-size: 0.7rem;
    margin: 0;
    padding: 9px 12px;
    text-align: center;
}

.r-calendar-reschedule-summary {
    color: #526375;
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0 0 18px;
    overflow-wrap: anywhere;
}

.r-calendar-day-post-meta {
    color: #526375;
    font-size: 0.68rem;
    gap: 10px;
    justify-content: space-between;
}

.r-calendar-day-post-meta > strong {
    color: #243750;
    flex: none;
}

.r-calendar-day-post-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 6px;
}

.r-calendar-day-post-header .r-calendar-day-post-platforms {
    justify-self: end;
}

.r-calendar-day-post-header .r-calendar-day-post-actions {
    grid-column: 1 / -1;
    justify-self: start;
}

.r-calendar-day-post-schedule {
    align-items: center;
    display: flex;
    gap: 4px;
    white-space: nowrap;
}

.r-calendar-day-post-schedule > strong {
    color: inherit;
    font-size: inherit;
}

.r-draft-stage {
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 750;
    line-height: 1;
    padding: 4px 7px;
}

.r-draft-stage.r-is-attention {
    background: #fff7e8;
    border-color: #efd49f;
    color: #8a5a10;
}

.r-draft-stage.r-is-planned {
    background: #eef4ff;
    border-color: #c6d6f1;
    color: #365f96;
}

.r-draft-stage.r-is-ready {
    background: #eaf7f2;
    border-color: #b9dfd1;
    color: #1d6b53;
}

.r-calendar-day-post-platforms {
    gap: 4px;
    min-width: 0;
}

.r-calendar-day-post-platforms > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-calendar-day-post-logo {
    flex: none;
    height: 15px;
    object-fit: contain;
    width: 15px;
}

.r-calendar-day-post-content {
    color: #243750;
    display: -webkit-box;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 10px 0 5px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.r-calendar-day-post-account {
    color: #718092;
    display: block;
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-calendar-day-post-footer {
    gap: 8px;
    justify-content: space-between;
    margin-top: 11px;
}

.r-calendar-status {
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 750;
    padding: 3px 7px;
}

.r-calendar-status.r-is-scheduled {
    background: #eaf5f7;
    border-color: #bfd8dd;
    color: #0b6f82;
}

.r-calendar-status.r-is-publishing {
    background: #edf6ec;
    border-color: #b7d7b3;
    color: #336b2d;
}

.r-calendar-status.r-is-draft {
    background: #f3f5f6;
    border-color: #d7dfe3;
    color: #526375;
}

.r-calendar-status.r-is-failed {
    background: #fff0ef;
    border-color: #edc0bc;
    color: #a23f35;
}

.r-calendar-day-post-actions {
    gap: 3px;
}

.r-calendar-post-action {
    border-radius: 7px;
    color: #0b6f82;
    font-size: 0.62rem;
    min-height: 27px;
    padding: 0 6px;
}

.r-calendar-post-action:hover {
    background: #eaf5f7;
}

.r-calendar-recommendation {
    background: #f8fbfc;
    border-top: 1px solid #e3eaed;
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding: 14px 16px;
}

.r-calendar-recommendation[hidden] {
    display: none;
}

.r-calendar-recommendation-label {
    color: #718092;
    font-size: 0.7rem;
    font-weight: 750;
    gap: 6px;
    margin-bottom: 3px;
}

.r-calendar-recommendation > strong {
    color: #243750;
    font-size: 0.78rem;
}

.r-calendar-recommendation > span:not(.r-calendar-recommendation-label) {
    color: #526375;
    font-size: 0.72rem;
}

.r-calendar-recommendation small {
    align-items: center;
    color: #b36a00;
    display: flex;
    font-size: 0.65rem;
    gap: 5px;
}

.r-calendar-content .r-empty.r-is-visible {
    background: #eaf5f7;
    border: 1px solid #cfe4e8;
    border-radius: 16px;
    color: #526375;
    padding: 28px;
}

.r-calendar-content .r-empty a {
    color: #078ca4;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .r-calendar-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-calendar-day-panel {
        min-height: 0;
    }

    .r-calendar-day-posts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    .r-calendar-day-posts:has(> .r-calendar-day-post:only-child) {
        grid-template-columns: 1fr calc((100% - 10px) / 2) 1fr;
    }

    .r-calendar-day-posts > .r-calendar-day-post:only-child {
        grid-column: 2;
        width: 100%;
    }
}

@media (max-width: 880px) {
    .r-calendar-content {
        padding-top: 72px;
    }

    .r-calendar-header {
        align-items: stretch;
        flex-direction: column;
    }

    .r-calendar-primary-actions {
        justify-content: space-between;
    }

    .r-calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 560px) {
    .r-calendar-content {
        padding-inline: 14px;
    }

    .r-calendar-section-nav {
        align-items: stretch;
        flex-direction: column;
        padding: 4px 16px 0;
    }

    .r-calendar-section-nav .r-pub-tabs {
        min-height: 44px;
    }

    .r-calendar-section-nav .r-pub-sync {
        border-top: 1px solid #edf1f3;
        padding: 10px 0;
    }

    .r-calendar-header {
        gap: 18px;
    }

    .r-calendar-primary-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .r-calendar-view-switch {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .r-calendar-view-button {
        min-width: 0;
    }

    .r-calendar-create {
        justify-content: center;
    }

    .r-calendar-period-controls {
        flex-wrap: wrap;
    }

    .r-calendar-period-controls strong {
        flex-basis: 100%;
        margin: 4px 0 0;
    }

    .r-calendar-gap-banner {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        min-height: 76px;
    }

    .r-calendar-drafts-header,
    .r-calendar-drafts-bulk-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .r-calendar-drafts-header-actions {
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
    }

    .r-calendar-drafts-bulk-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .r-calendar-drafts-bulk-buttons wa-button::part(base) {
        width: 100%;
    }

    .r-calendar-day-posts {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-calendar-day-posts:has(> .r-calendar-day-post:only-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-calendar-day-posts > .r-calendar-day-post:only-child {
        grid-column: auto;
        width: 100%;
    }

    .r-calendar-day-header {
        align-items: flex-start;
    }
}

.r-bc-message {
    min-height: 120px;
    resize: vertical;
}

.r-demo-tabitem-active {
    background-color: var(--accent-soft);
}

.r-demo-tabitem-active::part(label) {
    color: var(--accent);
    font-weight: 700;
}

.r-demo-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.r-demo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 700;
    font-size: 0.9rem;
}

.r-demo-input {
    width: 100%;
    background-color: var(--wa-color-blue-95);
    border-radius: 12px;
    font: inherit;
    font-weight: 400;
    font-size: 1rem;
}

.r-demo-create {
    background-color: var(--wa-color-blue-95);
    border: 1px solid var(--wa-color-blue-70);
    padding: 12px 28px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.r-secondary-button {
    align-items: center;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 700;
    min-height: 42px;
    padding: 0 18px;
    text-decoration: none;
}

.r-secondary-button:hover:not(:disabled) {
    background: var(--accent);
    color: var(--on-accent);
}

.r-grid {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.r-grid-settings {
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-grid-messages {
    align-items: stretch;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    height: calc(100dvh - 160px);
    min-height: 480px;
}

.r-grid-comments {
    align-items: stretch;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    height: calc(100dvh - 160px);
    min-height: 480px;
}

.r-composer-wrap {
    display: block;
    width: 100%;
    margin-inline: auto;
}

.r-composer-wrap[hidden] {
    display: none;
}

.r-compose-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 60px;
    margin: 0;
    border: 1px solid var(--border);
    background: white;
}

.r-platform-strip-label {
    font-weight: 700;
}

.r-platform-strip-items {
    display: flex;
    flex: 1;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
}

.r-platform-strip-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.r-platform-strip-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-platform-strip-logo {
    object-fit: contain;
}

.r-platform-strip-check {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid #b0b0b0;
    border-radius: 4px;
    background: white;
    cursor: pointer;
}

.r-platform-strip-check:checked {
    border-color: black;
    background-color: black;
}

.r-platform-strip-info {
    width: 22px;
    height: 22px;
    cursor: help;
}

.r-compose-banner-row {
    display: grid;
    align-items: stretch;
    margin-bottom: 18px;
}

.r-compose-actions {
    grid-area: actions;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.r-publish-btn {
    width: 100%;
    padding: 14px 24px;
    border: 1px solid var(--accent);
    color: white;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
}

.r-publish-btn:hover {
    filter: brightness(0.94);
}

.r-publish-btn:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.r-create-draft-btn {
    background: #ffffff;
    border: 1px solid var(--accent);
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    padding: 14px 24px;
    width: 100%;
}

.r-create-draft-btn:hover {
    background: #eef9fb;
}

.r-create-draft-btn:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.r-compose-banner-input {
    flex: 1;
    height: 220px;
    border: none;
    background: transparent;
    color: black;
    font-size: 18px;
    resize: none;
    font-family: inherit;
}

.r-compose-banner-input:focus {
    outline: none;
    box-shadow: none;
}

.r-compose-date-title {
    position: absolute;
    top: 16px;
    left: 20px;
    margin: 0;
}

.r-compose-date-icon {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 20px;
    height: 20px;
    cursor: help;
}

.r-compose-sub-input {
    flex: 1;
    height: 56px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    color: black;
    font-size: 16px;
}

.r-compose-sub-input:focus {
    outline: none;
    box-shadow: none;
}

.r-platform-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}

.r-platform-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--border);
    background: white;
    overflow: hidden;
}

.r-platform-card[hidden] {
    display: none;
}

.r-platform-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
    padding: 20px 24px;
}

.r-platform-card-header::-webkit-details-marker {
    display: none;
}

.r-platform-card[open] .r-platform-card-header {
    margin-inline: 0;
}

.r-platform-card-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.r-platform-card-summary {
    color: var(--muted);
    font-size: 0.82rem;
}

.r-platform-card-toggle {
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: auto;
}

.r-platform-card-toggle::after {
    content: "Edit";
}

.r-platform-card[open] .r-platform-card-toggle {
    color: #078ca4;
}

.r-platform-card[open] .r-platform-card-toggle::after {
    content: "Collapse";
}

.r-platform-card-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.r-platform-card-name {
    font-size: 18px;
    font-weight: 700;
}

.r-platform-card-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-top: 1px solid var(--border);
    padding: 22px 24px 24px;
}

.r-platform-card-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.r-platform-card-field[hidden] {
    display: none;
}

.r-tiktok-account {
    align-items: center;
    border-left: 1px solid #dbe4ea;
    display: flex;
    gap: 10px;
    margin-left: 10px;
    padding-left: 20px;
}

.r-tiktok-account[hidden] {
    display: none;
}

.r-tiktok-account-avatar {
    border-radius: 10px;
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.r-tiktok-account-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.r-tiktok-account-copy strong {
    color: #10233d;
    font-size: 0.9rem;
}

.r-tiktok-account-copy span {
    color: #6b7c91;
    font-size: 0.78rem;
}

.r-tiktok-creator-warning strong,
.r-tiktok-creator-warning span {
    display: block;
}

.r-tiktok-creator-warning strong {
    margin-bottom: 2px;
}

.r-platform-card wa-callout[hidden] {
    display: none;
}

.r-tiktok-posting-mode {
    border: 0;
    margin: 0;
    padding: 0;
}

.r-tiktok-posting-mode legend {
    color: #10233d;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 9px;
    padding: 0;
}

.r-tiktok-mode-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-tiktok-mode-option {
    align-items: center;
    border: 1px solid #cbd7df;
    border-radius: 12px;
    color: #10233d;
    cursor: pointer;
    display: flex;
    gap: 12px;
    min-height: 76px;
    padding: 14px 16px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    width: auto;
}

.r-tiktok-mode-option:has(input:checked) {
    background: #f3fbfc;
    border-color: #078ca4;
    box-shadow: 0 0 0 1px #078ca4;
}

.r-tiktok-mode-option:has(input:disabled) {
    background: #f7f9fa;
    color: #8492a3;
    cursor: not-allowed;
}

.r-tiktok-mode-option input {
    appearance: none;
    background: #fff;
    border: 1px solid #aab9c4;
    border-radius: 50%;
    flex: 0 0 auto;
    height: 20px;
    margin: 0;
    width: 20px;
}

.r-tiktok-mode-option input:checked {
    background: #078ca4;
    border: 2px solid #078ca4;
    box-shadow: inset 0 0 0 4px #fff;
}

.r-tiktok-mode-option input:focus-visible {
    outline: 3px solid rgb(7 140 164 / 18%);
    outline-offset: 2px;
}

.r-tiktok-mode-option > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.r-tiktok-mode-option strong {
    font-size: 0.9rem;
}

.r-tiktok-mode-option > span > span {
    color: #6b7c91;
    font-size: 0.78rem;
}

.r-tiktok-draft-note {
    border-top: 1px solid #e2e8ed;
    color: #6b7c91;
    display: block;
    font-size: 0.8rem;
    margin: 4px -24px -24px;
    padding: 15px 24px;
}

.r-tiktok-draft-note[hidden],
.r-tiktok-direct-settings[hidden] {
    display: none;
}

.r-tiktok-direct-settings,
.r-platform-option-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-tiktok-direct-settings > .r-platform-card-field {
    background: #f8fafb;
    border: 1px solid #e0e7ec;
    border-radius: 12px;
    padding: 16px;
}

.r-tiktok-declaration-field {
    grid-column: 1 / -1;
}

.r-platform-option-panel {
    background: #f8fafb;
    border: 1px solid #e0e7ec;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 16px;
}

.r-platform-option-panel[hidden] {
    display: none;
}

.r-platform-option-wide {
    grid-column: 1 / -1;
}

.r-platform-card-field-row {
    display: flex;
    gap: 14px;
}

.r-ig-collaborators {
    display: flex;
    gap: 14px;
}

.r-ig-collaborators .r-ig-collaborator {
    flex: 1;
    min-width: 0;
}

.r-li-mention-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.r-li-mention-row .r-card-input {
    flex: 1;
    min-width: 0;
}

.r-platform-card-field-row wa-select {
    flex: 1;
}

.r-platform-card-label {
    font-weight: 600;
}

.r-card-input {
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: white;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
}

.r-card-input:focus {
    outline: none;
    box-shadow: none;
}

.r-card-caption {
    min-height: 90px;
}

.r-card-count {
    align-self: flex-end;
}

.r-compose-sub-field-media {
    width: 100%;
}

.r-media-file-input {
    width: 100%;
}

.r-compose-date {
    position: relative;
    display: flex;
    grid-area: schedule;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 250px;
    padding-top: 48px;
    padding-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: white;
    color: white;
}

.r-date-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 8px 20px 0;
}

.r-date-row {
    display: flex;
    gap: 12px;
}

.r-date-field {
    flex: 1;
    min-width: 0;
    color: black;
}

.r-field-start-icon {
    width: 18px;
    height: 18px;
}

.r-date-time::part(input-wrapper) {
    gap: 8px;
}

.r-date-time::part(input) {
    padding-inline-end: 4px;
}

.r-date-day-wrap {
    position: relative;
    display: block;
    padding: 14px 52px 14px 72px;
    border-radius: 16px;
    background: #d4d4d4;
}

.r-date-day-wrap.r-is-disabled {
    opacity: 0.55;
}

.r-date-day-cal {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    color: #111;
    pointer-events: none;
}

.r-date-day-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 6px;
    border: none;
    background: none;
    color: #111;
    cursor: pointer;
}

.r-date-day-toggle svg {
    width: 26px;
    height: 26px;
}

.r-date-day {
    display: block;
    width: 100%;
}

.r-date-day::part(form-control),
.r-date-day::part(form-control-input),
.r-date-day::part(base),
.r-date-day::part(input-wrapper) {
    margin: 0;
    padding: 0;
    min-height: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.r-date-day::part(form-control-label) {
    display: block;
    margin: 0 0 1px;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #4d4d4d;
}

.r-date-day::part(input) {
    padding: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: #111;
}

.r-date-day::part(segment),
.r-date-day::part(segment-literal) {
    padding: 0;
}

.r-date-day::part(expand-button),
.r-date-day::part(clear-button) {
    display: none;
}

.r-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--elev-1);
    padding: 20px;
}

.r-panel h2 {
    font-size: 1rem;
    margin: 0 0 16px;
}

.r-new-container {
    align-items: center;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 48px;
    inset: 0 0 0 var(--rail-w);
    justify-content: center;
    padding: 64px 24px;
    position: fixed;
}

.r-nav-open .r-new-container {
    inset: 0 0 0 var(--sidebar-w);
}

.r-new-container[hidden] {
    display: none;
}

.r-step-enter {
    animation: r-step-enter var(--motion) var(--ease-standard);
}

@keyframes r-step-enter {
    from {
        opacity: 0;
        transform: translateX(28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.r-publish-next {
    display: inline-flex;
    font-size: 1.25rem;
    margin-top: 28px;
}

.r-publish-next::part(base) {
    font-family: Inter, sans-serif;
    font-weight: 700;
    padding-inline: 2.25em;
}

.r-new-container:has(.r-publish-check:checked) .r-publish-next {
    visibility: visible;
}

.r-new-container .r-publish-title {
    font-family: Inter, sans-serif;
    margin: 0;
}

.r-publish-options {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 886px;
}

.r-publish-option {
    cursor: pointer;
    display: flex;
}



.r-publish-check {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.r-publish-logo {
    object-fit: contain;
}

.r-panel-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.r-panel-header > div:not(.r-panel-controls) {
    flex: 1 1 auto;
    min-width: 0;
}

.r-panel-header .r-meta {
    overflow-wrap: normal;
    white-space: nowrap;
}

.r-panel-header .r-limit-control {
    flex-shrink: 0;
    width: max-content;
}

.r-panel-header h2 {
    margin: 0;
}

.r-limit-control {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 0.86rem;
    font-weight: 700;
    gap: 8px;
}

.r-limit-control input {
    max-width: 60px;
    padding: 8px 10px;
    text-align: center;
}

.r-limit-control select {
    padding: 8px 32px;
    text-align: center;
    width: auto;
}

.r-platform-select {
    width: 168px;
}

.r-option-logo,
.r-platform-select-logo {
    block-size: 18px;
    inline-size: 18px;
    display: block;
    flex-shrink: 0;
}

.r-platform-select-logo {
    margin-inline-end: 8px;
}

.r-panel-controls {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
}

.r-panel-controls a {
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 4px 12px;
    text-decoration: none;
}

.r-panel-controls a:hover {
    background: var(--surface-muted);
    color: var(--text);
}

.r-panel-controls a.r-is-active {
    background: var(--accent-soft);
    color: var(--accent);
}

.r-table {
    border-collapse: collapse;
    font-size: 0.9rem;
    width: 100%;
}

.r-table th,
.r-table td {
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
}

.r-table thead th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.r-table tbody tr:last-child td {
    border-bottom: 0;
}

.r-table tbody tr:hover {
    background: var(--surface-muted);
}

.r-table small {
    color: var(--muted);
}

.r-inline-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.r-inline-form input {
    width: 110px;
}

.r-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

label {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

textarea,
input {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    outline: none;
    padding: 11px 12px;
    width: 100%;
}

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

textarea:focus,
input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.r-field-error {
    color: var(--danger);
    font-size: 0.84rem;
}

.r-flex {
    display: flex;
}

.r-basis-full {
    flex-basis: 100%;
}

.r-items-center {
    align-items: center;
}

.r-gap-2 {
    gap: 0.5rem;
}

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

form > .r-actions {
    margin-top: 16px;
}

.r-primary-button {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 10px 24px var(--focus-ring);
}

.r-primary-button:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 14px 30px var(--focus-ring);
    transform: translateY(-1px);
}

a.r-primary-button {
    align-items: center;
    display: inline-flex;
    min-height: 42px;
    padding: 0 20px;
    text-decoration: none;
}

.r-hint {
    color: var(--muted);
    font-size: 0.86rem;
}

.r-alert {
    border-left: 3px solid transparent;
    border-radius: 8px;
    box-sizing: border-box;
    display: block;
    font-size: 0.82rem;
    font-weight: 520;
    line-height: 1.45;
    margin-bottom: 16px;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
}

.r-alert:not(.r-is-visible) {
    border-width: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.r-alert.r-success {
    background: var(--wa-color-success-fill-quiet);
    border-color: var(--success);
    color: var(--success);
}

.r-alert.r-error {
    background: var(--wa-color-danger-fill-quiet);
    border-color: var(--danger);
    color: var(--danger);
}

.r-alert.r-warning {
    background: var(--wa-color-warning-fill-quiet);
    border-color: var(--wa-color-warning-border-normal);
    color: var(--wa-color-warning-on-quiet);
}

.r-alert.r-info {
    background: #eaf6f8;
    border-color: #55aebd;
    color: #116f7e;
}

.r-global-request-alert {
    inset-block-start: 16px;
    inset-inline-start: 50%;
    max-width: calc(100vw - 32px);
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%);
    width: 520px;
    z-index: 1000;
}

.r-empty {
    background: var(--surface-muted);
    border-radius: 14px;
    color: var(--muted);
    display: none;
    padding: 18px;
    text-align: center;
}

.r-empty.r-is-visible {
    display: block;
}

.r-publish-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}



.r-publish-account-name {
    overflow-wrap: anywhere;
}

.r-meta {
    color: var(--muted);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.r-reply-form {
    border-top: 2px solid #ffffff;
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
}

.r-reply-form .r-actions {
    margin-top: 0;
}

.r-reply-form[hidden] {
    display: none;
}

.r-summary-note {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 14px 0 0;
}

.r-back-link {
    color: var(--accent);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.r-back-link:hover {
    text-decoration: underline;
}

/* Modal dialog (queue edit) */
.r-modal-overlay {
    align-items: center;
    background: var(--scrim);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 60;
}

.r-modal-overlay.r-is-open {
    display: flex;
}

.r-modal {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--wa-shadow-l);
    max-width: 540px;
    padding: 22px;
    width: 100%;
}

.r-modal h2 {
    margin: 0 0 16px;
}

.r-modal .r-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

/* Messages page */
.r-messages-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.r-inbox-progress {
    --track-height: 8px;
    margin-top: 10px;
    width: 260px;
}

.r-inbox-panel .r-limit-control {
    color: var(--text);
}

.r-inbox-panel .r-limit-control input {
    background: #ffffff;
    border: none;
    border-radius: 999px;
}

.r-inbox-panel wa-select::part(combobox) {
    background: #ffffff;
    border: none;
    border-radius: 999px;
}

.r-inbox-pill-button::part(base) {
    border-radius: 999px;
}

.r-inbox-pill-button::part(base):hover {
    background: var(--wa-color-blue-95);
}

.r-inbox-panel .r-empty {
    background: #ffffff;
}

.r-conversation-search {
    width: 100%;
}

.r-inbox-panel .r-conversation-search::part(start) {
    color: var(--muted);
}

.r-conversation-list,
.r-post-list,
.r-comment-list,
.r-review-list {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: 8px;
    grid-auto-rows: max-content;
    margin: -4px;
    min-height: 0;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
}

.r-conversation-complete {
    color: #718092;
    flex: 0 0 auto;
    font-size: 0.76rem;
    padding-top: 12px;
    text-align: center;
}

.r-conversation-complete[hidden] {
    display: none;
}

.r-conversation-item,
.r-post-item,
.r-comment,
.r-review {
    align-items: center;
    appearance: none;
    color: var(--text);
    cursor: pointer;
    display: grid;
    font-weight: 400;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: fit-content;
    line-height: 1.35;
    list-style: none;
    min-height: 0;
    overflow: visible;
    padding: 12px;
    text-align: left;
    transition: box-shadow 120ms ease;
    white-space: normal;
    width: 100%;
}

.r-post-item {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

.r-post-list-thumbnail {
    background: #eef2f4;
    border: 1px solid #dbe5e9;
    border-radius: 9px;
    height: 44px;
    object-fit: cover;
    width: 44px;
}

.r-post-list-thumbnail.r-is-platform {
    object-fit: contain;
    padding: 11px;
}

.r-post-comment-stats {
    align-items: center;
    color: #526375;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    gap: 6px;
}

.r-post-unanswered-badge {
    background: #fff4df;
    border: 1px solid #f1c875;
    border-radius: 999px;
    color: #7a4d00;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 7px;
}

.r-avatar {
    --size: var(--wa-space-2xl);
    flex: none;
}

.r-avatar::part(initials),
.r-avatar::part(icon) {
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-bold);
}

.r-conversation-body {
    align-self: center;
    display: grid;
    gap: 3px;
    min-width: 0;
}

.r-conversation-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-conversation-name-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.r-conversation-unread-dot {
    background: #078ca4;
    border-radius: 999px;
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.r-conversation-unread-count {
    align-items: center;
    background: #078ca4;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 800;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding-inline: 6px;
}

.r-conversation-platform-logo {
    block-size: 15px;
    flex: none;
    inline-size: 15px;
    object-fit: contain;
}

.r-conversation-preview {
    color: var(--muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-conversation-item.r-has-unread .r-conversation-name {
    font-weight: 800;
}

.r-conversation-item.r-has-unread .r-conversation-preview {
    color: var(--text);
    font-weight: 700;
}

.r-conversation-item.r-has-unread .r-conversation-time {
    color: #078ca4;
    font-weight: 700;
}

.r-conversation-sort-control {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: var(--wa-font-size-s);
    font-weight: 700;
    gap: var(--wa-space-xs);
}

.r-conversation-sort {
    min-width: 132px;
}

.r-conversation-meta {
    display: grid;
    gap: 4px;
    justify-items: end;
}

.r-conversation-time {
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.r-thread-peer {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.r-thread-avatar {
    --size: calc(var(--wa-space-2xl) + var(--wa-space-2xs));
}

.r-thread-peer-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.r-thread-peer-text h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-thread-peer-text .r-meta {
    overflow: hidden;
    text-overflow: ellipsis;
}

.r-thread-empty {
    display: none;
}

.r-thread-empty.r-is-visible {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    text-align: center;
}

.r-thread-empty wa-icon {
    font-size: 2.2rem;
    opacity: 0.6;
}

.r-thread-empty p {
    margin: 0;
}

.r-message-history {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.r-message-list {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
}

.r-message-virtual-spacer {
    flex: 0 0 auto;
    list-style: none;
    pointer-events: none;
}

.r-jump-to-latest {
    align-items: center;
    background: #ffffff;
    border: 1px solid #b7dbe1;
    border-radius: 999px;
    bottom: 14px;
    box-shadow: 0 8px 22px rgb(16 35 61 / 14%);
    color: #0b6f82;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    left: 50%;
    min-height: 34px;
    padding: 0 14px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 2;
}

.r-jump-to-latest:hover {
    background: #eaf5f7;
    border-color: #63b5c3;
}

.r-jump-to-latest[hidden] {
    display: none;
}

.r-message-day {
    align-items: center;
    color: #718092;
    display: flex;
    gap: 12px;
    justify-content: center;
    list-style: none;
    margin: 8px 0 4px;
}

.r-message-day::before,
.r-message-day::after {
    background: #e3eaed;
    content: "";
    flex: 1 1 auto;
    height: 1px;
}

.r-message-day span {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0;
}

.r-reply-box {
    position: relative;
}

.r-reply-input {
    border-radius: 16px;
    display: block;
    min-height: 84px;
    padding: 14px 96px 14px 16px;
    resize: none;
    width: 100%;
}

.r-reply-input:focus {
    outline: none;
}

.r-reply-count {
    color: var(--muted);
    font-size: 0.8rem;
    pointer-events: none;
    position: absolute;
    right: 14px;
    top: 10px;
}

.r-send-button::part(base) {
    background: #c9b1f3;
    border: none;
    border-radius: 999px;
    color: #332257;
    font-weight: 700;
    padding-inline: 28px;
}

.r-send-button::part(base):hover {
    background: #b799ee;
}

@media (max-width: 880px) {
    .r-grid-messages,
    .r-grid-comments {
        height: auto;
        min-height: 0;
    }

    .r-messages-panel .r-panel-controls {
        flex-wrap: wrap;
    }

    .r-conversation-list,
    .r-post-list {
        max-height: 45dvh;
    }

    .r-message-list,
    .r-comment-list {
        max-height: 55dvh;
    }

    .r-message-history {
        flex: 0 0 auto;
        height: 55dvh;
    }
}

.r-message-row {
    align-items: end;
    display: flex;
    gap: var(--wa-space-xs);
    list-style: none;
}

.r-message-avatar {
    --size: var(--wa-space-xl);
}

.r-message-row-in {
    justify-content: flex-start;
}

.r-message-row-out {
    justify-content: flex-end;
}

.r-message-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 72%;
    min-width: 0;
}

.r-message-row-in .r-message-group {
    align-items: flex-start;
}

.r-message-row-out .r-message-group {
    align-items: flex-end;
}

.r-message-bubble {
    border-radius: 16px;
    display: grid;
    gap: 4px;
    max-width: 72%;
    padding: 8px 12px;
}

.r-message-group .r-message-bubble {
    max-width: 100%;
}

.r-message-row-in .r-message-bubble,
.r-message-row-out .r-message-bubble {
    background: #ffffff;
    color: var(--text);
}

.r-message-text {
    line-height: 1.4;
    margin: 0;
    overflow-wrap: anywhere;
}

.r-message-time {
    color: var(--muted);
    font-size: 0.72rem;
}

/* Comments page */
.r-comment {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
}

.r-comment-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.r-comment-head {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.r-comment-author {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-comment-time {
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.r-comment-text {
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.r-comment-footer {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 12px;
}

.r-comment-reply-button {
    margin-left: auto;
}

.r-comment-footer:has(.r-comment-reply-button) .r-comment-toggle {
    margin-left: 0;
}

.r-comment-link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.r-comment-link:hover {
    text-decoration: underline;
}

.r-comment-thread {
    display: grid;
    gap: 8px;
}

.r-comment-moderation {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-inline: 12px;
}

.r-comment-view-tabs {
    border-bottom: 1px solid #dbe5e9;
    display: flex;
    gap: 4px;
    padding: 0 12px;
}

.r-comment-view-tabs[hidden] {
    display: none;
}

.r-comment-view-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #526375;
    cursor: pointer;
    font: inherit;
    padding: 10px 12px 8px;
}

.r-comment-view-tab:hover {
    color: #12384a;
}

.r-comment-view-tab.r-is-active {
    border-bottom-color: #0b6f82;
    color: #0b6f82;
    font-weight: 700;
}

.r-comment-visibility-button::part(base) {
    color: var(--accent);
    font-weight: 700;
}

.r-comment.r-is-hidden {
    opacity: 0.72;
}

.r-comment-hidden-status {
    font-weight: 700;
}

.r-comment-replies {
    display: grid;
    gap: 8px;
    margin-left: 52px;
}

.r-comment-reply {
    cursor: default;
}

.r-comment-reply:hover {
    box-shadow: none;
}

.r-comment-reply .r-avatar {
    --size: var(--wa-space-xl);
}

.r-comment-reply-out {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-self: end;
}

.r-comment-reply-out .r-avatar {
    justify-self: end;
}

.r-comment-toggle {
    color: var(--accent);
    cursor: pointer;
    font-weight: 700;
    margin-left: auto;
}

.r-comment-toggle:hover {
    text-decoration: underline;
}

/* Reviews page */
.r-review-controls {
    flex-wrap: wrap;
}

.r-review {
    align-items: start;
    cursor: default;
    grid-template-columns: auto minmax(0, 1fr);
}

.r-review-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.r-review-head {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.r-review-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-review-time {
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.r-review-stars {
    color: #f5a623;
    letter-spacing: 2px;
}

.r-review-text {
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

/* No-platforms connect state shared by inbox, comments and reviews */
.r-connect-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    margin: max(24px, 50vh - 300px) auto 0;
    max-width: 520px;
    padding: 48px 32px;
    text-align: center;
}

.r-connect-empty h2 {
    margin: 0;
}

.r-connect-empty p {
    margin: 0 0 14px;
}

/* Connect page */
.r-page-list {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
}

.r-page-list > li {
    list-style: none;
    min-width: 0;
}

.r-page-option {
    align-items: center;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 14px;
    position: relative;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.r-page-option:has(input:checked),
.r-page-option:has(input:focus-visible) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.r-page-option input {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.r-page-option-marker {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: transparent;
    display: inline-flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    width: 28px;
}

.r-page-option-marker::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    content: "";
    display: block;
    height: 14px;
    opacity: 0;
    width: 14px;
}

.r-page-option:has(input:checked) .r-page-option-marker {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.r-page-option:has(input:checked) .r-page-option-marker::before {
    opacity: 1;
}

.r-page-option-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.r-page-name {
    font-weight: 700;
}

.r-page-id {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.84rem;
}

.r-selected-tag {
    color: var(--success);
    font-size: 0.84rem;
    font-weight: 700;
    margin-left: auto;
}

.r-missing-tag {
    color: var(--danger);
    font-size: 0.84rem;
    font-weight: 700;
    margin-left: auto;
    text-align: right;
}

.r-page-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.66;
}

.r-settings-panel {
    display: flex;
    flex-direction: column;
    min-height: 260px;
    overflow: hidden;
    padding: 0;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.r-settings-panel:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
}

.r-settings-panel.r-is-available {
    background: var(--surface-subtle);
    box-shadow: none;
}

.r-settings-platform-head {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 18px 20px;
}

.r-settings-platform-head h3 {
    margin: 0;
}

.r-settings-platform-logo {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-sizing: content-box;
    height: 26px;
    padding: 8px;
    width: 26px;
}

.r-settings-platform-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.r-settings-platform-title > span {
    color: var(--muted);
    font-size: 0.78rem;
}

.r-settings-platform-title > .r-settings-coming-soon {
    color: var(--danger);
}

.r-settings-platform-head wa-badge {
    margin-left: auto;
}

.r-settings-panel .r-page-list {
    border-block: 1px solid var(--border);
    gap: 0;
    margin: 0;
}

.r-settings-panel .r-page-option {
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: default;
    padding: 18px 20px;
}

.r-settings-panel .r-page-option ~ .r-page-option {
    border-top: 1px solid var(--border);
}

.r-settings-panel .r-page-option-text {
    flex: 1;
}

.r-settings-panel .r-page-name {
    font-size: 0.96rem;
}

.r-settings-panel .r-page-id {
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.r-settings-disconnect {
    margin-left: auto;
}

.r-settings-meta {
    color: var(--muted);
    font-size: 0.78rem;
    margin-top: 3px;
}

.r-settings-empty {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
    max-width: 52ch;
    padding: 2px 20px 20px;
}

.r-settings-actions {
    background: var(--surface-subtle);
    border-top: 1px solid var(--border);
    margin-top: auto;
    padding: 14px 20px;
}

.r-settings-actions .r-primary-button,
.r-settings-actions .r-secondary-button {
    border-radius: 10px;
    box-shadow: none;
    min-height: 38px;
    padding-inline: 16px;
}

.r-connection-section {
    margin-block: var(--wa-space-l);
}

.r-settings-provider-mark {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-bold);
}

.r-connection-section + wa-divider {
    --spacing: 0;
}

.r-settings-actions .r-secondary-button {
    border-width: 1px;
}

/* Workspaces page */
.r-workspace-list {
    display: grid;
    gap: 12px;
}

.r-workspace-row {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    padding: 14px;
}


.r-company-member-identity {
    min-inline-size: 0;
}


.r-company-access-editor {
    --spacing: var(--wa-space-l);
    margin-top: var(--wa-space-m);
}

.r-company-administration-option {
    background: var(--wa-color-brand-fill-quiet);
    border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal);
    border-radius: var(--wa-border-radius-l);
    color: var(--wa-color-brand-on-quiet);
    margin-top: var(--wa-space-s);
    padding: var(--wa-space-m);
}

.r-company-operational-permissions {
    --min-column-size: 20ch;
    margin-top: var(--wa-space-l);
}

.r-company-permission-actions {
    border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    padding-top: var(--wa-space-m);
}

.r-workspace-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.r-workspace-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 1rem;
    font-weight: 800;
}

.r-status-line + .r-workspace-list {
    margin-top: 16px;
}

.r-workspace-actions {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

:root {
    --sidebar-w: 284px;
    --rail-w: 72px;
}

.r-sidebar {
    gap: 12px;
    background: #fbfdfe;
    border-right: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    box-shadow: none;
    padding: 14px 12px 12px;
}

.r-nav-open .r-sidebar {
    overflow: visible;
}

.r-sidebar-header {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 2px 0 4px;
}

.r-sidebar-brand {
    font-size: 1.55rem;
    min-height: 40px;
    padding: 0;
}

.r-brand-name {
    color: #078ca4;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.r-brand-icon {
    height: 32px;
    width: 32px;
}

.r-nav-toggle {
    background: transparent;
    border: 1px solid #dbe5e9;
    border-radius: 9px;
    box-shadow: none;
    color: #526375;
    flex: 0 0 auto;
    height: 34px;
    left: auto;
    min-height: 0;
    padding: 0;
    position: static;
    top: auto;
    width: 34px;
}

.r-nav-toggle svg {
    height: 17px;
    transition: transform var(--motion) var(--ease-standard);
    width: 17px;
}

.r-nav-toggle:hover {
    background: #eef5f7;
    border-color: #b9cbd1;
    color: #0b6f82;
}

html:not(.r-nav-open) .r-sidebar-header {
    justify-content: center;
    padding: 0;
}

html:not(.r-nav-open) .r-sidebar-brand {
    display: none;
}

html:not(.r-nav-open) .r-nav-toggle svg {
    transform: rotate(180deg);
}

.r-sidebar-workspace {
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    box-shadow: none;
}

.r-sidebar-workspace-summary {
    border-radius: 11px;
    min-height: 56px;
    padding: 8px 10px;
}

.r-sidebar-workspace-summary::before {
    border-bottom: 2px solid #526375;
    border-right: 2px solid #526375;
    content: "";
    height: 6px;
    margin-left: auto;
    order: 3;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--motion) var(--ease-standard);
    width: 6px;
}

.r-sidebar-workspace[open] .r-sidebar-workspace-summary::before {
    transform: rotate(225deg) translate(-2px, -2px);
}

.r-sidebar-workspace-icon {
    background: #078ca4;
    border-radius: 9px;
    color: white;
    height: 34px;
    width: 34px;
}

.r-sidebar-workspace-label {
    color: #10233d;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.r-sidebar-workspace-name {
    color: #718092;
    font-size: 0.75rem;
    font-weight: 500;
}

.r-sidebar-workspace-menu {
    border-top: 1px solid #e6edef;
    gap: 8px;
    margin-top: 2px;
    padding: 9px;
}

.r-sidebar-workspace-option,
.r-sidebar-company-option,
.r-sidebar-workspace-manage {
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.r-sidebar-selector-group {
    display: grid;
    gap: 3px;
}

.r-sidebar-selector-group + .r-sidebar-selector-group,
.r-sidebar-selector-actions {
    border-top: 1px solid #e6edef;
    padding-top: 8px;
}

.r-sidebar-selector-heading {
    color: #718092;
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    padding: 0 8px 2px;
    text-transform: uppercase;
}

.r-sidebar-selector-actions {
    display: grid;
    gap: 3px;
}

.r-cta-button {
    background: #078ca4;
    border: 1px solid #078ca4;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.88rem;
    font-weight: 720;
    min-height: 44px;
}

.r-cta-button:hover,
.r-cta-button.r-is-active {
    background: #067a8e;
    border-color: #067a8e;
    box-shadow: none;
}

.r-sidebar-nav {
    gap: 4px;
    padding: 0;
}

.r-nav-group {
    border-radius: 0;
}

.r-nav-group-summary {
    border-radius: 8px;
    color: #243750;
    font-size: 0.79rem;
    font-weight: 760;
    min-height: 28px;
    padding: 4px 7px;
}

.r-nav-group-summary:hover,
.r-nav-group:has(.r-nav-subitem.r-is-active) .r-nav-group-summary {
    background: transparent;
    color: #10233d;
}

.r-nav-open .r-nav-icon {
    display: none;
}

.r-nav-group-summary:hover .r-nav-icon,
.r-nav-group:has(.r-nav-subitem.r-is-active) .r-nav-icon {
    background: white;
    border-color: #b9d9df;
}

.r-nav-chevron {
    color: #637486;
    height: 14px;
    width: 14px;
}

.r-nav-sub {
    border-left: 0;
    gap: 1px;
    margin: 0 0 5px;
    padding: 0;
}

.r-nav-subitem {
    align-items: center;
    border-radius: 7px;
    color: #526375;
    display: flex;
    font-size: 0.82rem;
    font-weight: 540;
    gap: 9px;
    line-height: 1.25;
    padding: 6px 8px;
    position: relative;
}

.r-nav-subicon {
    border: 1px solid #a9cdd4;
    border-radius: 5px;
    color: #315a70;
    flex: 0 0 auto;
    height: 22px;
    padding: 3px;
    width: 22px;
}

.r-nav-drafts-icon {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0;
}

.r-nav-drafts-icon::before {
    background: currentColor;
    content: "";
    height: 14px;
    mask: url("/assets/icon-drafts-336aeeb08e660e5bb2a6c2b11b3c8165.png") center / contain no-repeat;
    width: 14px;
}

.r-nav-subitem:hover {
    background: #f0f6f7;
    color: #10233d;
}

.r-nav-subitem.r-is-active {
    background: #eaf5f7;
    color: #12384a;
    font-weight: 680;
}

.r-nav-subitem.r-is-active .r-nav-subicon {
    background: white;
    border-color: #6bb8c5;
    color: #078ca4;
}

.r-nav-subitem.r-is-active::before {
    background: #079bb2;
    border-radius: 0 3px 3px 0;
    content: "";
    inset: 3px auto 3px -12px;
    position: absolute;
    width: 3px;
}

.r-sidebar-foot {
    background: #fbfdfe;
    border-top: 1px solid #e1e9ec;
    bottom: 0;
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding-top: 10px;
    position: sticky;
    z-index: 3;
}

.r-sidebar-connect {
    align-items: center;
    border-radius: 8px;
    color: #526375;
    display: flex;
    font-size: 0.8rem;
    font-weight: 620;
    gap: 9px;
    min-height: 38px;
    padding: 6px 8px;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.r-sidebar-connect svg {
    color: #078ca4;
    flex: 0 0 auto;
    height: 21px;
    width: 21px;
}

.r-sidebar-connect:hover,
.r-sidebar-connect.r-is-active {
    background: #eaf5f7;
    color: #12384a;
}

.r-sidebar-profile {
    background: transparent;
    border: 0;
    border-radius: 9px;
    gap: 9px;
    justify-content: flex-start;
    min-height: 48px;
    padding: 5px 7px;
}

.r-sidebar-profile:hover,
.r-sidebar-profile.r-is-active,
.r-sidebar-profile.r-is-open {
    background: #eef5f7;
    border-color: transparent;
}

.r-profile-icon {
    background: #d8eef1;
    border-radius: 50%;
    color: #096f81;
    display: block;
    flex: 0 0 auto;
    height: 34px;
    padding: 7px;
    width: 34px;
}

.r-profile-meta {
    gap: 1px;
}

.r-profile-name {
    color: #243750;
    font-size: 0.78rem;
    font-weight: 650;
}

.r-profile-sub {
    color: #718092;
    font-size: 0.7rem;
}

html:not(.r-nav-open) .r-sidebar-foot {
    border-top: 0;
    padding-top: 0;
}

html:not(.r-nav-open) .r-sidebar-connect {
    justify-content: center;
    padding-inline: 0;
}

html:not(.r-nav-open) .r-sidebar-connect > span {
    display: none;
}

html:not(.r-nav-open) .r-sidebar-profile {
    padding: 5px;
}

html:not(.r-nav-open) .r-sidebar-workspace-summary::before {
    display: none;
}

@media (max-width: 880px) {
    /* On mobile there is no rail: the drawer is hidden off-canvas and slides in
       as a full-width overlay. The expanded state is always .r-nav-open here, so
       the icon-only collapse rules above only apply while the sidebar is
       off-screen and never need overriding. */
    .r-sidebar {
        width: var(--sidebar-w);
        transform: translateX(-100%);
    }

    .r-progress,
    .r-nav-open .r-progress {
        left: 50%;
    }

    .r-sidebar-header {
        justify-content: space-between;
    }

    .r-sidebar .r-nav-toggle {
        display: none;
    }

    .r-mobile-nav-toggle {
        align-items: center;
        background: white;
        border: 1px solid #dbe5e9;
        border-radius: 11px;
        box-shadow: 0 6px 18px rgb(16 35 61 / 10%);
        color: #243750;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        left: 14px;
        min-height: 0;
        padding: 0;
        position: fixed;
        top: 14px;
        transition: background var(--motion) var(--ease-standard), left var(--motion) var(--ease-standard);
        width: 42px;
        z-index: 60;
    }

    .r-nav-open .r-mobile-nav-toggle {
        background: #eef5f7;
        left: calc(var(--sidebar-w) - 52px);
    }

    .r-sidebar-brand {
        display: flex;
    }

    .r-nav-toggle svg {
        transform: none;
    }

    .r-nav-open .r-sidebar {
        overflow: visible;
        transform: translateX(0);
    }

    .r-sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 12px;
    }

    .r-sidebar-foot {
        bottom: auto;
        box-shadow: 0 -10px 18px #fbfdfe;
        flex: 0 0 auto;
        margin-top: 0;
        position: relative;
    }

    .r-content {
        margin-left: 0;
        width: 100%;
        padding: 70px 16px 36px;
    }

    .r-new-container,
    .r-nav-open .r-new-container {
        box-sizing: border-box;
        justify-content: flex-start;
        inset: 0;
        max-width: 100vw;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 70px 16px 36px;
    }

    .r-new-container .r-publish-title {
        font-size: 2rem;
        line-height: 1.15;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
        width: 100%;
    }

    .r-publish-options {
        gap: 20px;
        width: 100%;
    }

    .r-publish-option {
        width: min(255px, 100%);
    }

    .r-publish-next {
        margin-top: 0;
    }

    .r-composer-wrap {
        max-width: 100%;
    }

    .r-composer-header {
        align-items: stretch;
        flex-direction: column;
        margin-top: 12px;
    }

    .r-change-platforms {
        align-self: flex-start;
    }

    .r-compose-banner-row {
        grid-template-areas:
            "content"
            "schedule"
            "link"
            "actions"
            "media";
        grid-template-columns: minmax(0, 1fr);
    }

    .r-date-row {
        flex-wrap: wrap;
    }

    .r-date-field {
        flex-basis: 130px;
    }

    .r-platform-card-field-row,
    .r-ig-collaborators,
    .r-li-mention-row {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .r-platform-card-header {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 18px;
    }

    .r-tiktok-account {
        border-left: 0;
        border-top: 1px solid #dbe4ea;
        margin: 4px 0 0;
        order: 4;
        padding: 14px 0 0;
        width: 100%;
    }

    .r-platform-card-fields {
        padding: 18px;
    }

    .r-tiktok-mode-options,
    .r-tiktok-direct-settings,
    .r-platform-option-grid {
        grid-template-columns: 1fr;
    }

    .r-platform-option-wide {
        grid-column: auto;
    }

    .r-tiktok-declaration-field {
        grid-column: auto;
    }

    .r-tiktok-draft-note {
        margin: 2px -18px -18px;
        padding: 14px 18px;
    }

    .r-platform-card-field-row wa-select,
    .r-ig-collaborators .r-ig-collaborator,
    .r-li-mention-row .r-card-input,
    .r-li-mention-row wa-button {
        flex: none;
        width: 100%;
    }

    .r-nav-open .r-content {
        margin-left: 0;
        width: 100%;
    }

    .r-nav-open .r-nav-scrim {
        display: block;
        opacity: 1;
    }

    .r-topbar,
    .r-panel-header,
    .r-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .r-grid,
    .r-grid-settings,
    .r-grid-messages,
    .r-grid-comments {
        grid-template-columns: 1fr;
    }

    .r-secondary-button,
    .r-primary-button {
        justify-content: center;
        width: 100%;
    }

    .r-panel-controls {
        flex-wrap: wrap;
    }

    .r-pink-panel {
        margin-top: 24px;
    }

    .r-pub-refresh {
        position: static;
        margin-top: 8px;
    }

    .r-compose-top {
        margin-top: 48px;
    }

    .r-demo-row2 {
        grid-template-columns: 1fr;
    }

    .r-message-bubble {
        max-width: 88%;
    }

    .r-comment-replies {
        margin-left: 20px;
    }
}

/* Analytics overview */
.r-tone-green {
    --tone-strong: #1b7a3d;
    --tone-soft: #dcf5d0;
}

.r-tone-red {
    --tone-strong: #c92a2a;
    --tone-soft: #fdecec;
}

.r-tone-blue {
    --tone-strong: var(--wa-color-blue-40);
    --tone-soft: #d0e9fb;
}

.r-tone-purple {
    --tone-strong: #6b4eff;
    --tone-soft: #e9e3ff;
}

.r-tone-cyan {
    --tone-strong: var(--accent);
    --tone-soft: var(--accent-soft);
}

.r-range-picker {
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    box-shadow: none;
    gap: 4px;
    padding: 4px;
}

.r-analytics-content {
    margin-right: 0;
    max-width: none;
    padding-top: 38px;
}

.r-analytics-content .r-tone-green {
    --tone-strong: #2f846b;
    --tone-soft: #eaf6f2;
}

.r-analytics-content .r-tone-blue {
    --tone-strong: #3f779f;
    --tone-soft: #edf5fa;
}

.r-analytics-content .r-tone-purple {
    --tone-strong: #536d88;
    --tone-soft: #eef3f6;
}

.r-analytics-content .r-tone-cyan {
    --tone-strong: #078ca4;
    --tone-soft: #eaf5f7;
}

.r-analytics-header {
    align-items: center;
    margin-bottom: 22px;
}

.r-analytics-header h1 {
    color: #10233d;
    font-size: clamp(2rem, 3vw, 2.65rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.r-analytics-header .r-status-line {
    color: #718092;
}

.r-post-performance-header {
    margin-bottom: 20px;
}

.r-analytics-kicker,
.r-section-kicker {
    color: #078ca4;
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.r-analytics-toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.r-analytics-nav {
    align-items: center;
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px;
    width: fit-content;
}

.r-analytics-content > .r-analytics-nav {
    margin-bottom: 24px;
}

.r-analytics-nav a {
    border-radius: 8px;
    color: #526375;
    flex: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 9px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.r-analytics-nav a:hover {
    background: #f0f6f7;
    color: #12384a;
}

.r-analytics-nav a.r-is-active {
    background: #eaf5f7;
    color: #0b6f82;
}

.r-range-picker a {
    border-radius: 8px;
    color: #526375;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 13px;
    transition: background 120ms ease, color 120ms ease;
}

.r-range-picker a.r-is-active {
    background: #eaf5f7;
    color: #0b6f82;
}

.r-kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 18px;
}

.r-kpi {
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgb(25 55 72 / 5%);
    column-gap: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
    min-height: 126px;
    padding: 20px;
    position: relative;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.r-kpi::before {
    background: var(--tone-strong, var(--accent));
    border-radius: 999px;
    content: "";
    height: 3px;
    inset: 0 20px auto;
    opacity: .7;
    position: absolute;
}

.r-kpi:hover {
    border-color: color-mix(in oklab, var(--tone-strong, var(--accent)), white 55%);
    box-shadow: 0 16px 36px rgb(25 55 72 / 9%);
    transform: translateY(-2px);
}

.r-kpi-icon {
    align-items: center;
    background: var(--tone-soft, var(--accent-soft));
    border-radius: 12px;
    color: var(--tone-strong, var(--accent));
    display: inline-flex;
    font-size: 1.05rem;
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.r-kpi-label {
    align-self: end;
    color: #637486;
    font-size: 0.78rem;
    font-weight: 800;
    grid-column: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.r-kpi-value {
    align-items: baseline;
    display: flex;
    font-size: 1.9rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    gap: 8px;
    grid-column: 1;
    line-height: 1.1;
    color: #10233d;
}

.r-kpi-delta {
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.r-kpi-delta-up {
    color: var(--success);
}

.r-kpi-delta-down {
    color: var(--danger);
}

.r-kpi-delta-flat {
    color: var(--muted);
}

.r-kpi-hint {
    color: #718092;
    font-size: 0.82rem;
    grid-column: 1 / -1;
}

.r-chart-panel h2 {
    align-items: center;
    display: flex;
    gap: 8px;
}

.r-analytics-content .r-chart-panel,
.r-analytics-content .r-metric-panel,
.r-analytics-content .r-post-table-panel,
.r-analytics-content .r-recommendations-panel,
.r-analytics-content .r-weekly-summary,
.r-analytics-content .r-content-comparison {
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgb(25 55 72 / 5%);
}

.r-recommendations-panel {
    padding: 24px;
}

.r-insights-layout {
    align-items: stretch;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(280px, .55fr));
    margin-bottom: 18px;
}

.r-insights-sidebar {
    display: contents;
}

.r-recommendations-panel .r-panel-header h2,
.r-weekly-summary .r-panel-header h2,
.r-content-comparison .r-panel-header h2 {
    margin-bottom: 4px;
}

.r-update-chip {
    align-items: center;
    background: #eef7f8;
    border-radius: 999px;
    color: #08768a;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 750;
    gap: 6px;
    padding: 7px 10px;
    white-space: nowrap;
}

.r-recommendation-notice {
    align-items: center;
    background: #f4f8fa;
    border: 1px solid #e4ecef;
    border-radius: 10px;
    color: #526375;
    display: flex;
    font-size: .86rem;
    gap: 9px;
    margin: 16px 0 0;
    padding: 10px 12px;
}

.r-recommendation-notice wa-icon {
    color: #3f779f;
    flex: none;
}

.r-recommendation-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.r-recommendation-card {
    align-items: center;
    background: linear-gradient(135deg, white, color-mix(in oklab, var(--tone-soft), white 62%));
    border: 1px solid #dbe5e9;
    border-radius: 14px;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 16px;
    position: relative;
}

.r-recommendation-card::before {
    background: var(--tone-strong);
    border-radius: 0 4px 4px 0;
    content: "";
    inset: 14px auto 14px 0;
    position: absolute;
    width: 3px;
}

.r-recommendation-card:only-child {
    grid-column: 1 / -1;
}

.r-recommendation-icon {
    align-items: center;
    background: var(--tone-soft);
    border-radius: 9px;
    color: var(--tone-strong);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.r-recommendation-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.r-recommendation-label {
    color: var(--tone-strong);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.r-recommendation-copy > strong {
    color: #10233d;
    line-height: 1.35;
}

.r-recommendation-detail {
    color: #718092;
    font-size: .82rem;
}

.r-recommendation-metric {
    color: var(--tone-strong);
    font-size: .86rem;
    font-weight: 800;
    white-space: nowrap;
}

.r-recommendation-result {
    align-items: flex-end;
    display: grid;
    gap: 6px;
    justify-items: end;
}

.r-recommendation-action {
    background: white;
    border: 1px solid #cbdde2;
    border-radius: 8px;
    color: #0b6f82;
    font-size: .82rem;
    font-weight: 750;
    padding: 7px 10px;
    text-decoration: none;
}

.r-weekly-summary,
.r-content-comparison {
    padding: 20px;
}

.r-summary-icon {
    align-items: center;
    background: #eaf5f7;
    border-radius: 10px;
    color: #078ca4;
    display: inline-flex;
    font-size: 1.25rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.r-weekly-metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    margin: 18px 0;
}

.r-weekly-metrics > span {
    background: #f7fafb;
    border-radius: 10px;
    color: #10233d;
    display: grid;
    font-size: 1.35rem;
    font-weight: 800;
    padding: 10px;
}

.r-weekly-metrics small,
.r-content-comparison small {
    color: #718092;
    font-size: .75rem;
    font-weight: 500;
}

.r-weekly-summary p {
    color: #526375;
    font-size: .84rem;
    margin: 8px 0 0;
}

.r-weekly-rate {
    align-items: center;
    border-top: 1px solid #e8eef1;
    color: #526375;
    display: flex;
    font-size: .8rem;
    justify-content: space-between;
    padding-top: 13px;
}

.r-weekly-rate strong {
    color: #078ca4;
}

.r-content-comparison ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.r-content-comparison li {
    border-top: 1px solid #e8eef1;
    color: #10233d;
    padding: 12px 0;
}

.r-content-comparison-row {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.r-content-comparison-row > span {
    display: grid;
}

.r-content-comparison-row > strong {
    color: #078ca4;
    font-weight: 800;
}

.r-content-bar {
    appearance: none;
    background: #e8f0f2;
    border: 0;
    border-radius: 999px;
    display: block;
    height: 6px;
    overflow: hidden;
    width: 100%;
}

.r-content-bar::-webkit-progress-bar {
    background: #e8f0f2;
}

.r-content-bar::-webkit-progress-value {
    background: linear-gradient(90deg, #47adba, #078ca4);
    border-radius: 999px;
}

.r-content-bar::-moz-progress-bar {
    background: linear-gradient(90deg, #47adba, #078ca4);
    border-radius: 999px;
}

@media (max-width: 1050px) {
    .r-insights-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r-recommendations-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .r-analytics-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .r-range-picker {
        justify-content: center;
    }

    .r-insights-layout,
    .r-recommendation-grid,
    .r-weekly-metrics {
        grid-template-columns: 1fr;
    }

    .r-recommendations-panel {
        grid-column: auto;
    }

    .r-recommendation-card {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .r-recommendation-result {
        align-items: center;
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto;
        justify-items: start;
    }
}

.r-analytics-content .r-chart-panel,
.r-analytics-content .r-metric-panel {
    padding: 24px;
}

.r-analytics-content .r-panel-header h2,
.r-analytics-content .r-metric-head h2,
.r-analytics-content .r-post-table-panel h2 {
    color: #243750;
}

.r-analytics-content .r-meta,
.r-analytics-content .r-hint {
    color: #718092;
}

.r-chart-panel h2::before {
    background: var(--tone-strong, var(--accent));
    border-radius: 4px;
    content: "";
    flex-shrink: 0;
    height: 10px;
    width: 10px;
}

.r-chart {
    display: block;
    width: 100%;
    height: auto;
}

.r-chart-gridline {
    stroke: #dbe5e9;
    stroke-width: 1;
}

.r-chart-bar {
    fill: var(--tone-strong, var(--accent));
}

.r-chart-bar:hover {
    fill: color-mix(in oklab, var(--tone-strong, var(--accent)), black 16%);
}

.r-chart-area {
    fill: color-mix(in oklab, var(--tone-soft, var(--accent-soft)), transparent 30%);
}

.r-chart-line {
    fill: none;
    stroke: var(--tone-strong, var(--accent));
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.r-chart-point {
    fill: var(--tone-strong, var(--accent));
}

.r-chart-point:hover {
    fill: color-mix(in oklab, var(--tone-strong, var(--accent)), black 16%);
}

.r-chart-tick {
    fill: #718092;
    font-size: 11px;
}

.r-chart-ytick {
    dominant-baseline: middle;
    text-anchor: end;
}

.r-chart-xtick {
    text-anchor: middle;
}

.r-chart-data {
    border-top: 1px solid #e8eef1;
    margin-top: 10px;
    padding-top: 10px;
}

.r-chart-data summary {
    color: #526375;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    width: max-content;
}

.r-chart-data summary:hover {
    color: #078ca4;
}

.r-chart-data[open] summary {
    margin-bottom: 8px;
}

.r-chart-data-table {
    font-size: 0.82rem;
}

.r-chart-data-table caption {
    color: #718092;
    padding: 4px 14px 8px;
    text-align: left;
}

.r-chart-data-table th,
.r-chart-data-table td {
    padding-block: 8px;
}

.r-chart-empty {
    align-items: center;
    background: #f7fbfc;
    border: 1px dashed #b9d9df;
    border-radius: 14px;
    color: #718092;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 190px;
}

.r-chart-empty wa-icon {
    color: #078ca4;
    font-size: 1.5rem;
}

.r-chart-empty-cta {
    color: #078ca4;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.r-chart-empty-cta:hover {
    text-decoration: underline;
}

.r-table-channel {
    align-items: center;
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.r-table-channel-logo {
    height: 18px;
    width: 18px;
}

.r-metric-grid {
    margin-top: 12px;
}

.r-ads-flow-nav {
    align-items: center;
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    margin: 0 0 28px;
    overflow-x: auto;
    padding: 4px;
    width: fit-content;
    max-width: 100%;
}

.r-ads-flow-nav a {
    border-radius: 8px;
    color: #526375;
    flex: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 9px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.r-ads-flow-nav a:hover {
    background: #f0f6f7;
    color: #12384a;
}

.r-ads-flow-nav a.r-is-active {
    background: #eaf5f7;
    color: #0b6f82;
}

.r-ads-setup-state {
    background: white;
    border-color: #b9d9df;
    margin-top: clamp(44px, 10vh, 110px);
    max-width: 680px;
    min-height: 250px;
    padding: 48px;
}

.r-ads-setup-state h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.r-ads-setup-state p {
    line-height: 1.55;
    max-width: 520px;
}

.r-ads-setup-step {
    background: #eaf5f7;
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding: 6px 10px;
    text-transform: uppercase;
}

.r-ads-setup-state .r-send-button::part(base) {
    background: var(--accent);
    color: white;
}

.r-ads-campaign-types {
    margin: 36px auto 0;
    max-width: 1100px;
}

.r-ads-campaign-types .r-panel {
    background: white;
    border: 1px solid #dbe5e9;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    min-height: 190px;
    padding: 24px;
}

.r-ads-campaign-types .r-panel h2 {
    font-size: 1.2rem;
}

.r-ads-campaign-types .r-panel .r-hint {
    flex: 1;
    line-height: 1.55;
}

.r-ads-campaign-types .r-panel .r-actions {
    justify-content: flex-start;
}

.r-ads-create-provider {
    align-items: center;
    display: flex;
    gap: 10px;
}

.r-ads-create-provider .r-ads-kicker {
    margin: 0;
}

.r-ads-create-back,
.r-ads-campaign-form {
    margin: 28px auto 0;
    max-width: 900px;
}

.r-ads-campaign-form {
    border-color: #dbe5e9;
    box-shadow: none;
    padding: 28px;
}

.r-ads-campaign-form > h2 {
    margin: 8px 0;
}

@media (max-width: 880px) {
    .r-ads-setup-state {
        margin-top: 24px;
        min-height: 0;
        padding: 32px 22px;
    }
}

.r-automation-content {
    max-width: none;
    margin-right: 0;
    padding-top: 38px;
}

.r-automation-content > * {
    margin-inline: auto;
    max-width: 1240px;
    width: 100%;
}

.r-automation-tabs-panel {
    background: #ffffff;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    box-shadow: none;
    margin: 0 0 24px;
    max-width: none;
    padding: 4px;
    width: 100%;
}

.r-automation-tabs {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.r-automation-tab {
    border-radius: 8px;
    color: #526375;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

.r-automation-tab:hover {
    background: #f0f6f7;
    color: #12384a;
}

.r-automation-tab.r-is-active {
    background: #078ca4;
    box-shadow: none;
    color: #ffffff;
}

.r-automation-tab.r-is-active:hover {
    background: #067a8e;
    color: #ffffff;
}

.r-automation-panel-title {
    border-bottom: 1px solid #dbe5e9;
    color: #10233d;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
    margin: 0;
    padding-bottom: 14px;
}

.r-automation-header {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin: 0 0 22px;
    max-width: none;
    width: 100%;
}

.r-automation-header h1 {
    color: #10233d;
    font-size: clamp(2rem, 3vw, 2.65rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 6px 0 8px;
}

.r-automation-header p {
    color: #718092;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

.r-automation-eyebrow {
    color: #078ca4;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.r-automation-prerequisite {
    align-items: start;
    background: #f2f9fa;
    border: 1px solid #cfe4e8;
    border-radius: 16px;
    display: grid;
    gap: 22px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(220px, 0.8fr) minmax(340px, 1.2fr);
    padding: 28px;
}

.r-automation-prerequisite-copy {
    display: grid;
    gap: 8px;
}

.r-automation-prerequisite-eyebrow {
    color: #078ca4;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.r-automation-prerequisite h2 {
    color: #10233d;
    font-size: 1.35rem;
    margin: 0;
}

.r-automation-prerequisite p {
    color: #526375;
    line-height: 1.55;
    margin: 0;
}

.r-automation-prerequisite-list {
    display: grid;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.r-automation-prerequisite-list li {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: 30px minmax(0, 1fr);
}

.r-automation-prerequisite-list li > span:last-child {
    display: grid;
    gap: 2px;
}

.r-automation-prerequisite-list strong {
    color: #243750;
    font-size: 0.9rem;
}

.r-automation-prerequisite-list small {
    color: #718092;
    font-size: 0.78rem;
    line-height: 1.4;
}

.r-automation-prerequisite-step {
    align-items: center;
    background: #ffffff;
    border: 1px solid #b7dbe1;
    border-radius: 999px;
    color: #078ca4;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

a.r-automation-prerequisite-action {
    background: #078ca4;
    box-shadow: none;
    color: #ffffff;
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 42px;
    padding: 0 18px;
}

a.r-automation-prerequisite-action:hover {
    background: #067a8e;
}

.r-pink-panel {
    margin-top: 0;
}

.r-demo-input {
    background: #f8fbfc;
    border: 1px solid #dbe5e9;
    color: #243750;
    padding: 13px 14px;
}

.r-demo-input:focus {
    background: #ffffff;
    border-color: #078ca4;
    outline: 3px solid rgb(7 140 164 / 14%);
}

select.r-demo-input {
    padding-block: 0;
    padding-inline-end: calc(var(--wa-form-control-padding-inline) + 1rem + var(--wa-space-xs));
}

.r-demo-create {
    background: #078ca4;
    border-color: #078ca4;
    border-radius: 10px;
    color: white;
    min-height: 42px;
    transition: filter 140ms ease, transform 140ms ease;
}

.r-demo-create:hover {
    background: #067a8e;
    box-shadow: 0 8px 18px rgb(7 140 164 / 16%);
    filter: none;
    transform: translateY(-1px);
}

.r-demo-create:disabled {
    cursor: not-allowed;
    filter: grayscale(0.15);
    opacity: 0.5;
    transform: none;
}

.r-automation-empty-mark {
    align-items: center;
    background: #ffffff;
    border: 1px solid #b7dbe1;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    position: relative;
    width: 44px;
}

.r-automation-empty-mark::before {
    background: #078ca4;
    border-radius: 999px;
    box-shadow: 8px 0 0 #5bb5c5,
                16px 0 0 #a9d8df;
    content: "";
    height: 5px;
    transform: translateX(-8px);
    width: 5px;
}

.r-automation-stats {
    display: flex;
    gap: 10px;
}

.r-automation-stats-item {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dbe5e9;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-width: 96px;
    padding: 10px 16px;
}

.r-automation-stats-item strong {
    color: #078ca4;
    font-size: 1.25rem;
    line-height: 1.15;
}

.r-automation-stats-item span {
    color: #718092;
    font-size: 0.75rem;
}

.r-seq-workspace,
.r-bc-workspace,
.r-c2dm-workspace {
    display: grid;
    gap: 18px;
}

.r-seq-panel,
.r-bc-panel,
.r-c2dm-panel {
    background: #ffffff;
    border: 1px solid #dbe5e9;
    border-radius: 16px;
    padding: 20px 22px;
}

.r-seq-panel-head,
.r-bc-panel-head,
.r-c2dm-panel-head {
    margin-bottom: 16px;
}

.r-seq-panel-title,
.r-bc-panel-title,
.r-c2dm-panel-title {
    align-items: center;
    display: flex;
    gap: 10px;
}

.r-seq-count-badge,
.r-bc-count-badge,
.r-c2dm-rule-count {
    background: #eaf5f7;
    border-radius: 999px;
    color: #0b6f82;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    padding: 5px 10px;
}

.r-seq-empty,
.r-bc-empty,
.r-c2dm-empty {
    align-items: center;
    background: #f2f9fa;
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 18px;
}

.r-seq-empty-copy,
.r-bc-empty-copy,
.r-c2dm-empty-copy {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 220px;
}

.r-seq-empty-copy strong,
.r-bc-empty-copy strong,
.r-c2dm-empty-copy strong {
    color: #10233d;
    font-size: 0.95rem;
}

.r-seq-empty-copy small,
.r-bc-empty-copy small,
.r-c2dm-empty-copy small {
    color: #718092;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
}

.r-seq-empty-action,
.r-bc-empty-action,
.r-c2dm-empty-action {
    background: #078ca4;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    min-height: 38px;
    padding: 0 16px;
}

.r-seq-empty-action:hover,
.r-bc-empty-action:hover,
.r-c2dm-empty-action:hover {
    background: #067a8e;
}

.r-seq-list,
.r-bc-list,
.r-c2dm-rule-list {
    display: grid;
    gap: 12px;
}

.r-seq-card,
.r-bc-card,
.r-c2dm-rule-card {
    align-items: center;
    border: 1px solid #dbe5e9;
    border-radius: 14px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 14px 16px;
}

.r-seq-card-main,
.r-bc-card-main,
.r-c2dm-rule-main {
    align-items: start;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.r-seq-card-logo,
.r-bc-card-logo,
.r-c2dm-rule-platforms {
    display: inline-flex;
    gap: 4px;
    padding-top: 2px;
}

.r-seq-card-logo img,
.r-bc-card-logo img,
.r-c2dm-rule-platforms img {
    height: 22px;
    width: 22px;
}

.r-seq-card-title,
.r-bc-card-title,
.r-c2dm-rule-title {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.r-seq-card-name-line,
.r-bc-card-name-line,
.r-c2dm-rule-name-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.r-seq-card-name-line strong,
.r-bc-card-name-line strong,
.r-c2dm-rule-name-line strong {
    color: #10233d;
    font-size: 0.95rem;
}

.r-c2dm-rule-targets {
    font-size: 0.82rem;
}

.r-c2dm-rule-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.r-seq-card-stats,
.r-bc-card-stats,
.r-c2dm-rule-stats {
    display: flex;
    gap: 18px;
}

.r-seq-card-stat,
.r-bc-card-stat,
.r-c2dm-rule-stat {
    display: grid;
    gap: 2px;
    justify-items: center;
    min-width: 64px;
}

.r-seq-card-stat strong,
.r-bc-card-stat strong,
.r-c2dm-rule-stat strong {
    color: #10233d;
    font-size: 1.05rem;
    line-height: 1.1;
}

.r-seq-card-stat small,
.r-bc-card-stat small,
.r-c2dm-rule-stat small {
    color: #718092;
    font-size: 0.72rem;
}

.r-seq-card-actions,
.r-bc-card-actions,
.r-c2dm-rule-actions {
    display: flex;
    gap: 8px;
}

.r-seq-create-grid,
.r-bc-create-grid,
.r-c2dm-create-grid {
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.r-c2dm-steps {
    display: grid;
    gap: 24px;
}

.r-c2dm-step {
    display: grid;
    gap: 14px;
    grid-template-columns: 32px minmax(0, 1fr);
}

.r-c2dm-step-number {
    align-items: center;
    background: #ffffff;
    border: 1px solid #b7dbe1;
    border-radius: 999px;
    color: #078ca4;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.r-c2dm-step-body {
    display: grid;
    gap: 10px;
}

.r-c2dm-step-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 32px;
}

.r-c2dm-step-title {
    color: #10233d;
    font-size: 1rem;
    margin: 0;
}

.r-c2dm-step-lead {
    color: #526375;
    font-size: 0.88rem;
    margin: 0;
}

.r-c2dm-count {
    background: #f0f6f7;
    border-radius: 999px;
    color: #526375;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 10px;
    white-space: nowrap;
}

.r-seq-field-hint,
.r-bc-field-hint,
.r-c2dm-field-hint {
    color: #718092;
    font-size: 0.78rem;
}

.r-c2dm-selected-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.r-c2dm-selected-tile {
    display: grid;
    gap: 4px;
    position: relative;
}

.r-c2dm-selected-media {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: #f0f6f7;
    border: 1px solid #dbe5e9;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.r-c2dm-selected-media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.r-c2dm-selected-media .r-c2dm-selected-logo {
    height: 26px;
    object-fit: contain;
    width: 26px;
}

.r-c2dm-selected-account {
    color: #526375;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-c2dm-selected-remove {
    align-items: center;
    background: rgb(16 35 61 / 72%);
    border: none;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    height: 22px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 22px;
}

.r-c2dm-selected-remove:hover {
    background: rgb(16 35 61 / 88%);
}

.r-c2dm-chip {
    align-items: center;
    background: #eaf5f7;
    border: 1px solid #bfe0e6;
    border-radius: 999px;
    color: #0b6f82;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 6px;
    line-height: 1;
    padding: 6px 10px;
}

.r-c2dm-chip-static {
    padding: 5px 10px;
}

.r-c2dm-chip-remove {
    background: none;
    border: none;
    color: #0b6f82;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
}

.r-c2dm-chip-remove:hover {
    color: #063f4d;
}

.r-c2dm-chip-editor {
    align-items: center;
    background: #f8fbfc;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 50px;
    padding: 8px 10px;
}

.r-c2dm-chip-editor:focus-within {
    background: #ffffff;
    border-color: #078ca4;
    outline: 3px solid rgb(7 140 164 / 14%);
}

.r-c2dm-chip-input {
    background: none;
    border: none;
    color: #243750;
    flex: 1;
    font: inherit;
    font-weight: 400;
    min-width: 160px;
    outline: none;
    padding: 6px 4px;
}

.r-c2dm-review-summary {
    background: #f2f9fa;
    border-radius: 10px;
    color: #0b6f82;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    padding: 10px 12px;
}

.r-seq-create-actions,
.r-bc-create-actions,
.r-c2dm-create-actions {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: flex-end;
}

.r-seq-create-hint,
.r-bc-create-hint,
.r-c2dm-create-hint {
    color: #b45309;
    font-size: 0.82rem;
    font-weight: 600;
}

.r-seq-create:not(:disabled),
.r-bc-create:not(:disabled),
.r-c2dm-create:not(:disabled) {
    box-shadow: 0 6px 14px rgb(7 140 164 / 22%);
}

.r-seq-preview,
.r-bc-preview,
.r-c2dm-preview {
    align-content: start;
    display: grid;
    gap: 10px;
    position: sticky;
    top: 18px;
}

.r-seq-preview-eyebrow,
.r-bc-preview-eyebrow,
.r-c2dm-preview-eyebrow {
    color: #078ca4;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.r-seq-preview-card,
.r-bc-preview-card,
.r-c2dm-preview-card {
    background: #f7fafb;
    border: 1px solid #dbe5e9;
    border-radius: 14px;
    display: grid;
    gap: 10px;
    padding: 16px;
}

.r-seq-preview-label,
.r-bc-preview-label,
.r-c2dm-preview-label {
    color: #526375;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.r-seq-bubble,
.r-bc-bubble,
.r-c2dm-bubble {
    border-radius: 12px;
    display: grid;
    gap: 3px;
    max-width: 85%;
    padding: 9px 12px;
}

.r-seq-bubble small,
.r-bc-bubble small,
.r-c2dm-bubble small {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.75;
}

.r-seq-bubble span,
.r-bc-bubble span,
.r-c2dm-bubble span {
    font-size: 0.85rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.r-c2dm-bubble-comment {
    background: #ffffff;
    border: 1px solid #dbe5e9;
    color: #243750;
    justify-self: start;
}

.r-c2dm-bubble-reply {
    background: #eaf5f7;
    border: 1px solid #bfe0e6;
    color: #0b6f82;
    justify-self: end;
}

.r-seq-bubble-dm,
.r-bc-bubble-dm,
.r-c2dm-bubble-dm {
    background: #078ca4;
    color: #ffffff;
    justify-self: end;
}

.r-seq-bubble-dm small,
.r-bc-bubble-dm small,
.r-c2dm-bubble-dm small {
    opacity: 0.85;
}

.r-seq-preview-placeholder,
.r-bc-preview-placeholder,
.r-c2dm-preview-placeholder {
    font-style: italic;
    opacity: 0.65;
}

.r-seq-preview-note,
.r-bc-preview-note,
.r-c2dm-preview-note {
    color: #718092;
    font-size: 0.75rem;
    line-height: 1.4;
}

@media (max-width: 1100px) {
    .r-seq-create-grid,
    .r-bc-create-grid,
    .r-c2dm-create-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-seq-preview,
    .r-bc-preview,
    .r-c2dm-preview {
        position: static;
    }

    .r-seq-card,
    .r-bc-card,
    .r-c2dm-rule-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

.r-bc-form,
.r-seq-form {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.r-bc-senders,
.r-seq-senders {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.r-bc-sender,
.r-seq-sender {
    align-items: center;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    transition: background 120ms ease, border-color 120ms ease;
}

.r-bc-sender:hover,
.r-seq-sender:hover {
    background: #f0f6f7;
    border-color: #b7dbe1;
}

.r-bc-sender img,
.r-seq-sender img {
    height: 22px;
    width: 22px;
}

.r-bc-sender strong,
.r-seq-sender strong {
    color: #10233d;
    font-size: 0.9rem;
}

.r-bc-sender small,
.r-seq-sender small {
    color: #718092;
    font-size: 0.75rem;
    font-weight: 400;
}

.r-bc-sender-check,
.r-seq-sender-check {
    display: none;
}

.r-bc-sender:has(.r-bc-sender-check:checked),
.r-seq-sender:has(.r-seq-sender-check:checked) {
    background: #eaf5f7;
    border-color: #078ca4;
    box-shadow: 0 0 0 2px rgb(7 140 164 / 12%);
}

.r-bc-sender:has(.r-bc-sender-check:checked)::after,
.r-seq-sender:has(.r-seq-sender-check:checked)::after {
    color: #078ca4;
    content: "✓";
    font-weight: 800;
}

.r-bc-counter,
.r-seq-counter {
    align-self: flex-end;
    color: #718092;
    font-size: 0.78rem;
    font-weight: 600;
}

.r-bc-counter-over,
.r-seq-counter-over {
    color: #b91c1c;
}

.r-bc-estimate-hint {
    color: #718092;
    font-size: 0.82rem;
    margin: 0;
}

.r-bc-estimate {
    background: #f2f9fa;
    border: 1px solid #cfe4e8;
    border-radius: 10px;
    display: grid;
    gap: 4px;
    padding: 12px 14px;
}

.r-bc-estimate strong {
    color: #0b6f82;
    font-size: 0.88rem;
}

.r-bc-estimate small {
    color: #526375;
    font-size: 0.78rem;
    line-height: 1.4;
}

.r-bc-estimate-warn {
    background: #fdf6ec;
    border-color: #f0dcbd;
}

.r-bc-estimate-warn strong {
    color: #8a5a08;
}

.r-bc-card-message {
    color: #718092;
    font-size: 0.8rem;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.r-bc-card-meta,
.r-seq-card-meta {
    color: #718092;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 4px 6px;
}

.r-bc-card-meta > span + span::before,
.r-seq-card-meta > span + span::before {
    content: "· ";
}

.r-bc-send-rows,
.r-seq-send-rows {
    display: grid;
    gap: 8px;
}

.r-bc-send-row,
.r-seq-send-row {
    align-items: baseline;
    display: grid;
    gap: 10px;
    grid-template-columns: 110px minmax(0, 1fr);
}

.r-bc-send-row small,
.r-seq-send-row small {
    color: #718092;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.r-bc-send-row strong,
.r-seq-send-row strong {
    color: #10233d;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.r-bc-send-message {
    background: #f7fafb;
    border: 1px solid #dbe5e9;
    border-radius: 10px;
    color: #243750;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
    padding: 12px 14px;
    white-space: pre-wrap;
}

.r-automation-prerequisite-connected {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.r-automation-prerequisite-connected li {
    align-items: center;
    display: flex;
    gap: 10px;
}

.r-automation-prerequisite-connected img {
    height: 20px;
    width: 20px;
}

.r-automation-prerequisite-connected li > span {
    display: grid;
    gap: 1px;
}

.r-automation-prerequisite-connected strong {
    color: #243750;
    font-size: 0.85rem;
}

.r-automation-prerequisite-connected small {
    color: #718092;
    font-size: 0.75rem;
}

.r-seq-trigger-chip {
    background: #f0f6f7;
    border: 1px solid #dbe5e9;
    border-radius: 999px;
    color: #526375;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 9px;
}

.r-seq-card-journey {
    font-size: 0.82rem;
}

.r-seq-journey-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.r-seq-journey-list li {
    border-left: 2px solid #cfe4e8;
    display: grid;
    gap: 2px;
    padding-left: 12px;
}

.r-seq-journey-wait {
    color: #078ca4;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.r-seq-journey-message {
    color: #243750;
    font-size: 0.85rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.r-seq-journey-review {
    margin: 0;
}

.r-seq-timeline {
    display: grid;
    margin-top: 6px;
}

.r-seq-node {
    align-items: center;
    display: flex;
    gap: 12px;
}

.r-seq-node-dot {
    align-items: center;
    background: #eaf5f7;
    border: 1px solid #b7dbe1;
    border-radius: 999px;
    color: #078ca4;
    display: inline-flex;
    flex: none;
    font-size: 0.85rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.r-seq-node-body {
    display: grid;
    gap: 1px;
}

.r-seq-node-body strong {
    color: #10233d;
    font-size: 0.85rem;
}

.r-seq-node-body span {
    color: #718092;
    font-size: 0.78rem;
}

.r-seq-timeline-steps {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.r-seq-step-node {
    border-left: 2px solid #cfe4e8;
    display: grid;
    gap: 8px;
    margin-left: 16px;
    padding: 14px 0 14px 24px;
}

.r-seq-wait-chip {
    background: #f0f6f7;
    border: 1px solid #dbe5e9;
    border-radius: 999px;
    color: #526375;
    font-size: 0.75rem;
    font-weight: 700;
    justify-self: start;
    padding: 4px 10px;
}

.r-seq-msg-card {
    background: #f7fafb;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
}

.r-seq-msg-head {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.r-seq-msg-head strong {
    color: #10233d;
    font-size: 0.85rem;
}

.r-seq-msg-remove {
    background: none;
    border: none;
    color: #718092;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.r-seq-msg-remove:hover {
    color: #b91c1c;
}

.r-seq-msg-card p {
    color: #243750;
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.r-seq-editor {
    border-left: 2px solid #cfe4e8;
    display: grid;
    gap: 10px;
    margin-left: 16px;
    padding: 14px 0 0 24px;
}

.r-seq-editor-title {
    color: #10233d;
    font-size: 0.9rem;
}

.r-seq-wait-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.r-seq-wait-label {
    color: #526375;
    font-size: 0.82rem;
    font-weight: 600;
}

.r-seq-wait-value {
    max-width: 90px;
    padding: 9px 10px;
}

.r-seq-wait-unit {
    max-width: 130px;
    padding: 9px 10px;
}

.r-seq-wait-summary {
    color: #078ca4;
    font-size: 0.8rem;
    font-weight: 700;
}

.r-seq-message {
    min-height: 90px;
    resize: vertical;
}

.r-seq-editor-tools {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.r-bc-personalize,
.r-seq-personalize {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.r-bc-personalize-label,
.r-seq-personalize-label {
    color: #526375;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.r-bc-personalize-buttons,
.r-seq-personalize-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.r-bc-token,
.r-seq-token {
    background: #f0f6f7;
    border: 1px solid #dbe5e9;
    border-radius: 999px;
    color: #0b6f82;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
}

.r-bc-token:hover,
.r-seq-token:hover {
    background: #eaf5f7;
    border-color: #8dc8d2;
}

.r-seq-add {
    justify-self: start;
    min-height: 38px;
    padding: 8px 18px;
}

.r-automation-content .r-table thead th {
    background: #f7fafb;
    color: #526375;
}

.r-automation-content .r-table th,
.r-automation-content .r-table td {
    border-color: #e3eaed;
}

.r-automation-content .r-table tbody tr:hover {
    background: #f2f9fa;
}

.r-automation-content wa-button[variant="brand"]::part(base) {
    background: #078ca4;
    border-color: #078ca4;
    color: #ffffff;
}

.r-automation-content wa-button[variant="brand"]:hover::part(base) {
    background: #067a8e;
    border-color: #067a8e;
}

.r-automation-content wa-button[appearance="outlined"]:not([variant="danger"])::part(base) {
    background: #ffffff;
    border-color: #b7dbe1;
    color: #0b6f82;
}

.r-automation-content wa-button[appearance="outlined"]:not([variant="danger"]):hover::part(base) {
    background: #eaf5f7;
    border-color: #8dc8d2;
}

@media (max-width: 1100px) {
    .r-automation-prerequisite {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 880px) {
    .r-automation-content {
        padding-top: 70px;
    }

    .r-automation-header {
        align-items: stretch;
        flex-direction: column;
    }

    .r-automation-prerequisite {
        grid-template-columns: minmax(0, 1fr);
    }

    a.r-automation-prerequisite-action {
        justify-content: center;
        justify-self: stretch;
    }

    .r-automation-tab {
        padding-inline: 8px;
    }
}

@media (max-width: 560px) {
    .r-automation-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .r-automation-tab {
        padding-inline: 4px;
    }

    .r-demo-row2 {
        grid-template-columns: 1fr;
    }
}

.r-community-content {
    display: flex;
    flex-direction: column;
    margin-right: 0;
    max-width: none;
    min-height: 100dvh;
    padding-top: 38px;
}

.r-community-content > .r-topbar {
    margin-bottom: 22px;
}

.r-community-content > .r-topbar h1 {
    color: #10233d;
    font-size: clamp(2rem, 3vw, 2.65rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-top: 6px;
}

.r-engagement-eyebrow {
    color: #078ca4;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.r-engagement-subtitle {
    color: #718092;
    font-size: 15px;
    line-height: 1.55;
    margin: 9px 0 0;
}

.r-engagement-tabs {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    margin: 0 0 24px;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px;
    width: fit-content;
}

.r-engagement-tab {
    border-radius: 8px;
    color: #526375;
    flex: none;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 9px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.r-engagement-tab:hover {
    background: #f0f6f7;
    color: #12384a;
}

.r-engagement-tab.r-is-active {
    background: #eaf5f7;
    color: #0b6f82;
}

.r-panel-title-row {
    align-items: center;
    display: flex;
    gap: 8px;
}

.r-panel-title-row h2 {
    color: #10233d;
    margin: 0;
}

.r-conversation-title-row {
    width: 100%;
}

.r-conversation-title-row .r-inbox-pill-button {
    margin-inline-start: auto;
}

.r-engagement-count {
    background: #eaf5f7;
    border-radius: 999px;
    color: #0b6f82;
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 26px;
    padding: 4px 8px;
    text-align: center;
}

.r-inbox-panel {
    background: #ffffff;
    border-color: #dbe5e9;
    border-radius: 16px;
    box-shadow: none;
    padding: 20px;
}

.r-inbox-progress {
    --track-color: #eaf5f7;
    --indicator-color: #078ca4;
}

.r-community-content .r-panel-header {
    border-bottom: 1px solid #e3eaed;
    margin-bottom: 14px;
    padding-bottom: 14px;
}

.r-community-content .r-panel-header h2 {
    color: #10233d;
    font-size: 1.05rem;
}

.r-selected-post-header {
    align-items: flex-start;
}

.r-selected-post-preview {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: 112px minmax(0, 1fr) 150px;
}

.r-selected-post-preview.r-is-empty {
    grid-template-columns: minmax(0, 1fr);
}

.r-selected-post-thumbnail {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: #eef2f4;
    border: 1px solid #dbe5e9;
    border-radius: 10px;
    color: #667789;
    display: flex;
    font-size: 0.78rem;
    font-weight: 700;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    width: 112px;
}

.r-selected-post-thumbnail[hidden],
.r-selected-post-thumbnail img[hidden] {
    display: none;
}

.r-selected-post-thumbnail img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.r-selected-post-thumbnail:not(.r-is-empty) {
    background: #eaf5f7;
}

.r-selected-post-content {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.r-selected-post-content h2 {
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
}

.r-selected-post-empty,
.r-selected-post-published {
    color: #526375;
    font-size: 0.8rem;
    margin: 0;
}

.r-selected-post-account {
    align-items: center;
    color: #243750;
    display: flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 6px;
    min-width: 0;
}

.r-selected-post-account img {
    height: 16px;
    object-fit: contain;
    width: 16px;
}

.r-selected-post-account span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-selected-post-footer {
    align-items: center;
    color: #526375;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 8px 18px;
    justify-content: flex-start;
    margin-top: 3px;
}

.r-selected-post-action {
    align-self: start;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    width: 150px;
}

.r-selected-post-link {
    align-items: center;
    background: #f8fbfc;
    border: 1px solid #b7dbe1;
    border-radius: 10px;
    color: #0b6f82;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 5px;
    padding: 8px 11px;
    text-decoration: none;
    white-space: nowrap;
}

.r-selected-post-link:hover {
    background: #eaf5f7;
    border-color: #8dc8d2;
}

.r-selected-post-link wa-icon {
    font-size: 0.7rem;
}

.r-comments-toolbar {
    align-items: center;
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    width: 100%;
}

.r-comments-toolbar h3 {
    color: #061c3d;
    font-size: 0.9rem;
    margin: 0;
}

.r-comments-toolbar .r-limit-control {
    margin-left: auto;
}

.r-comment-empty-checked {
    color: #667789;
    font-size: 0.78rem;
}

.r-comment-empty-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.r-thread-empty.r-is-visible #commentEmptyText {
    color: #243750;
    font-size: 0.95rem;
    font-weight: 600;
    max-width: 430px;
}

.r-comment-skeleton {
    align-items: start;
    background: #f8fbfc;
    border: 1px solid #e3eaed;
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 14px;
}

.r-comment-loading-label {
    color: #526375;
    font-size: 0.84rem;
    font-weight: 700;
    margin: 2px 4px 4px;
}

.r-comment-skeleton-avatar,
.r-comment-skeleton-line {
    animation: r-comment-skeleton-pulse 1.25s ease-in-out infinite alternate;
    background: #dbe5e9;
    display: block;
}

.r-comment-skeleton-avatar {
    border-radius: 999px;
    height: 38px;
    width: 38px;
}

.r-comment-skeleton-body {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}

.r-comment-skeleton-line {
    border-radius: 999px;
    height: 10px;
    width: 82%;
}

.r-comment-skeleton-line.r-is-short {
    width: 34%;
}

@keyframes r-comment-skeleton-pulse {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.r-inbox-panel .r-limit-control input,
.r-inbox-panel wa-select::part(combobox),
.r-inbox-pill-button::part(base) {
    background: #f8fbfc;
    border: 1px solid #dbe5e9;
    border-radius: 10px;
    color: #243750;
}

.r-inbox-panel .r-conversation-search::part(base) {
    background: #f8fbfc;
    border: 1px solid #dbe5e9;
    box-shadow: none;
}

.r-inbox-panel .r-conversation-search:focus-within::part(base),
.r-inbox-panel wa-select:focus-within::part(combobox) {
    border-color: #078ca4;
    box-shadow: 0 0 0 3px rgb(7 140 164 / 14%);
}

.r-inbox-pill-button::part(base) {
    color: #0b6f82;
    font-weight: 700;
}

.r-inbox-pill-button:hover::part(base) {
    background: #eaf5f7;
    border-color: #b7dbe1;
}

.r-conversation-item,
.r-post-item,
.r-comment,
.r-review {
    background: #f8fbfc;
    border: 1px solid #e3eaed;
    border-radius: 12px;
}

.r-conversation-item:hover,
.r-post-item:hover,
.r-comment:hover {
    background: #f2f9fa;
    border-color: #bfd8dd;
    box-shadow: none;
}

.r-conversation-item.r-is-selected,
.r-post-item.r-is-selected,
.r-comment.r-is-selected {
    background: #eaf5f7;
    border-color: #8dc8d2;
    box-shadow: none;
}

.r-conversation-item.r-has-unread {
    border-inline-start: 4px solid #078ca4;
}

.r-conversation-item.r-is-selected {
    background: #dceff2;
    border-color: #63b5c3;
    border-inline-start: 6px solid #078ca4;
}

.r-conversation-item.r-is-selected .r-conversation-name {
    font-weight: 800;
}

.r-avatar::part(initials),
.r-avatar::part(icon) {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.r-message-day span {
    background: transparent;
    border: 0;
}

.r-reply-input {
    background: #f8fbfc;
    border: 1px solid #dbe5e9;
    color: #243750;
}

.r-reply-input:focus {
    background: #ffffff;
    border-color: #078ca4;
    box-shadow: 0 0 0 3px rgb(7 140 164 / 14%);
}

.r-message-row-in .r-message-bubble {
    background: #eaf5f7;
    color: #243750;
}

.r-message-row-out .r-message-bubble {
    background: #078ca4;
    color: white;
}

.r-message-row-out .r-message-time {
    color: color-mix(in srgb, white 75%, transparent);
}

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

.r-grid-reviews .r-inbox-panel {
    min-height: 420px;
}

.r-grid-reviews .r-review-list {
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}

.r-connect-empty {
    background: #eaf5f7;
    border: 1px solid #cfe4e8;
    border-radius: 16px;
    box-shadow: none;
}

.r-connect-empty h2 {
    color: #10233d;
}

.r-connect-empty p {
    color: #526375;
}

.r-community-content .r-send-button::part(base) {
    background: #078ca4;
    border: 1px solid #078ca4;
    border-radius: 10px;
    color: #ffffff;
}

.r-community-content .r-send-button:hover::part(base) {
    background: #067a8e;
    border-color: #067a8e;
}

.r-community-content .r-thread-empty wa-icon {
    align-items: center;
    background: #eaf5f7;
    border: 1px solid #b7dbe1;
    border-radius: 999px;
    color: #078ca4;
    display: inline-flex;
    height: 52px;
    justify-content: center;
    opacity: 1;
    width: 52px;
}

.r-community-content .r-comment-link,
.r-community-content .r-comment-toggle {
    color: #078ca4;
}

.r-community-content .r-review-stars {
    color: #d98917;
}

.r-messages-content .r-messages-panel > .r-panel-header,
.r-messages-content .r-reply-form,
.r-grid-comments .r-reply-form {
    flex: 0 0 auto;
}

.r-messages-content .r-reply-form {
    margin-top: 12px;
    padding-top: 12px;
    position: relative;
}

.r-messages-content .r-reply-box,
.r-grid-comments .r-reply-box {
    background: #f8fbfc;
    border: 1px solid #dbe5e9;
    border-radius: 16px;
    overflow: hidden;
}

.r-messages-content .r-reply-box:focus-within,
.r-grid-comments .r-reply-box:focus-within {
    background: #ffffff;
    border-color: #078ca4;
    box-shadow: 0 0 0 3px rgb(7 140 164 / 14%);
}

.r-messages-content .r-reply-input,
.r-grid-comments .r-reply-input {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 72px;
    padding: 14px 16px 8px;
}

.r-messages-content .r-reply-input:focus,
.r-grid-comments .r-reply-input:focus {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.r-reply-toolbar {
    align-items: center;
    border-top: 1px solid #e3eaed;
    display: flex;
    gap: 10px;
    min-height: 50px;
    padding: 8px 10px 8px 16px;
}

.r-reply-toolbar .r-hint {
    margin-right: auto;
}

.r-reply-toolbar .r-reply-count {
    position: static;
    white-space: nowrap;
}

.r-reply-attachment-input,
.r-reply-attachment-input[hidden] {
    display: none;
}

.r-composer-tool {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #456276;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.r-composer-tool:hover,
.r-composer-tool:focus-visible {
    background: #e5f2f4;
    color: #078ca4;
    outline: none;
}

.r-composer-tool:disabled {
    cursor: default;
    opacity: 0.4;
}

.r-composer-tool-icon {
    fill: none;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 18px;
}

.r-reply-attachment {
    align-items: center;
    background: #eef7f8;
    border-top: 1px solid #e3eaed;
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 8px 12px;
}

.r-reply-attachment[hidden] {
    display: none;
}

.r-reply-attachment-thumb {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d6e4e8;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    overflow: hidden;
    width: 42px;
}

.r-reply-attachment-thumb img,
.r-reply-attachment-thumb video {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.r-reply-attachment-name {
    color: #243750;
    font-size: 0.82rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-reply-attachment .r-composer-tool {
    margin-left: auto;
}

.r-emoji-picker {
    background: #ffffff;
    border: 1px solid #d7e3e7;
    border-radius: 14px;
    bottom: 58px;
    box-shadow: 0 14px 36px rgb(27 55 73 / 18%);
    left: 8px;
    padding: 10px;
    position: absolute;
    width: min(300px, calc(100% - 16px));
    z-index: 8;
}

.r-emoji-picker[hidden] {
    display: none;
}

.r-emoji-search {
    background: #f8fbfc;
    border: 1px solid #dbe5e9;
    border-radius: 9px;
    color: #243750;
    font: inherit;
    font-size: 0.84rem;
    height: 36px;
    padding: 0 10px;
    width: 100%;
}

.r-emoji-search:focus {
    border-color: #078ca4;
    box-shadow: 0 0 0 3px rgb(7 140 164 / 14%);
    outline: none;
}

.r-emoji-grid {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(8, 1fr);
    margin-top: 8px;
    max-height: 180px;
    overflow-y: auto;
}

.r-emoji-option {
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-size: 1.3rem;
    height: 32px;
    line-height: 1;
    padding: 0;
}

.r-emoji-option:hover,
.r-emoji-option:focus-visible {
    background: #eaf5f7;
    outline: none;
}

.r-message-attachment {
    border-radius: 10px;
    display: block;
    max-height: 280px;
    max-width: min(280px, 100%);
    object-fit: cover;
}

@media (max-width: 560px) {
    .r-reply-toolbar .r-hint {
        display: none;
    }

    .r-emoji-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

.r-messages-content .r-conversation-list,
.r-messages-content .r-message-list {
    overscroll-behavior: contain;
}

.r-community-content .r-grid-messages {
    flex: 1 1 auto;
    height: auto;
    min-height: 440px;
}

@media (min-width: 881px) {
    html:has(.r-messages-content),
    body:has(.r-messages-content),
    .r-app:has(.r-messages-content) {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .r-messages-content {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .r-community-content .r-grid-messages {
        min-height: 0;
    }
}

.r-community-content .r-grid-messages > .r-panel,
.r-community-content .r-grid-comments > .r-panel {
    overflow: hidden;
}

.r-community-content .r-grid-comments {
    height: min(650px, calc(100dvh - 260px));
    min-height: 440px;
}

.r-community-content .r-grid-comments > .r-panel {
    overflow: hidden;
}

@media (max-width: 880px) {
    .r-community-content {
        padding-top: 70px;
    }

    .r-engagement-tabs {
        width: 100%;
    }

    .r-engagement-tab {
        flex: 1;
        text-align: center;
    }

    .r-community-content .r-grid-messages,
    .r-community-content .r-grid-comments {
        flex: none;
        height: auto;
        min-height: 0;
    }

    .r-community-content .r-panel-controls {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        width: 100%;
    }

    .r-community-content .r-platform-select {
        width: 100%;
    }

    .r-community-content .r-review-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r-community-content .r-review-controls .r-limit-control,
    .r-community-content .r-review-controls .r-inbox-pill-button {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .r-selected-post-preview {
        gap: 10px;
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .r-selected-post-action {
        grid-column: 2;
        justify-content: flex-end;
        width: auto;
    }

    .r-comments-toolbar {
        align-items: flex-start;
        gap: 8px;
    }

    .r-comments-toolbar .r-limit-control {
        align-items: flex-end;
        flex-direction: column;
        margin-left: auto;
    }

    .r-selected-post-thumbnail {
        width: 88px;
    }

    .r-community-content .r-panel-controls,
    .r-community-content .r-review-controls {
        grid-template-columns: 1fr;
    }

    .r-community-content .r-limit-control,
    .r-community-content .r-limit-control input,
    .r-community-content .r-inbox-pill-button {
        max-width: none;
        width: 100%;
    }

    .r-community-content .r-comment-replies {
        margin-left: 24px;
    }
}

.r-metric-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.r-metric-heading {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.r-metric-head h2 {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
}

.r-metric-head h2 wa-icon {
    color: var(--tone-strong, var(--accent));
}

.r-metric-total {
    display: grid;
    gap: 1px;
    justify-items: end;
    text-align: right;
}

.r-metric-total-value {
    color: #10233d;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.1;
}

.r-metric-total-hint {
    color: #718092;
    font-size: 0.78rem;
}

.r-chart-value {
    fill: var(--text);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
}

.r-mchart-facebook {
    fill: #1877f2;
}

.r-mchart-instagram {
    fill: #e1306c;
}

.r-mchart-tiktok {
    fill: #161823;
}

.r-mchart-youtube {
    fill: #e02424;
}

.r-mchart-threads {
    fill: #4d4d4d;
}

.r-mchart-linkedin {
    fill: #0a66c2;
}

.r-post-table-panel {
    margin-top: 12px;
}

.r-analytics-content .r-post-table-panel {
    overflow: hidden;
}

.r-analytics-content .r-post-table-panel > .r-panel-header,
.r-analytics-content .r-post-table-panel > .r-alert,
.r-analytics-content .r-post-table-panel > .r-empty,
.r-analytics-content .r-post-table-panel > .r-post-table-hint {
    margin-inline: 4px;
}

.r-analytics-content .r-table thead th {
    background: #f7fafb;
    color: #637486;
}

.r-analytics-content .r-table th,
.r-analytics-content .r-table td {
    border-bottom-color: #dbe5e9;
}

.r-analytics-content .r-table tbody tr:hover {
    background: #f7fbfc;
}

.r-analytics-content .r-page-menu wa-button::part(base) {
    border-color: #cddcdf;
    border-radius: 10px;
    color: #0b6f82;
}

@media (max-width: 1100px) {
    .r-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .r-analytics-content {
        padding-top: 70px;
    }

    .r-analytics-nav {
        width: 100%;
    }

    .r-analytics-nav a {
        flex: 1;
        text-align: center;
    }

    .r-analytics-header .r-range-picker {
        align-self: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
    }

    .r-analytics-header .r-range-picker a {
        flex: 1;
        text-align: center;
        white-space: nowrap;
    }

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

    .r-kpi-grid .r-kpi:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .r-kpi-grid {
        grid-template-columns: 1fr;
    }

    .r-kpi-grid .r-kpi:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

.r-post-caption {
    display: block;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-post-published {
    white-space: nowrap;
}

.r-post-metric-missing {
    color: var(--muted);
}

.r-post-actions {
    text-align: right;
    white-space: nowrap;
}

@keyframes r-metric-flash {
    from {
        background-color: var(--accent-soft);
    }
    to {
        background-color: transparent;
    }
}

.r-metric-updated {
    animation: r-metric-flash 1.2s ease-out;
}

.r-post-table-hint {
    margin: 14px 0 0;
}

/* ── Web Awesome component helpers ── */
.r-auth-card {
    width: min(400px, 100%);
}

.r-error-card {
    text-align: center;
}

.r-error-shell {
    --wa-color-brand-fill-loud: #2b7a8b;
    --wa-color-brand-on-loud: #ffffff;
    background: linear-gradient(135deg, #16323a 0%, #193740 52%, #245966 100%);
}

.r-error-code {
    color: var(--wa-color-brand-fill-loud);
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
    margin: 0;
}

.r-error-action::part(base) {
    background-color: var(--wa-color-brand-fill-loud);
    border-color: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
}

/* Full-width wa-button (e.r-g. form submit) */
.r-block-button {
    width: 100%;
}

/* Ads overview */
.r-ads-content {
    max-width: none;
    margin-right: 0;
    padding-top: 38px;
}

.r-ads-content > .r-topbar {
    margin-bottom: 24px;
}

.r-ads-content > .r-topbar h1 {
    color: #10233d;
    letter-spacing: -0.035em;
}

.r-ads-content > .r-panel {
    border-color: #dbe5e9;
    box-shadow: none;
}

.r-ads-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 22px;
}

.r-ads-header h1,
.r-ads-campaigns h2 {
    margin: 0;
    color: #10233d;
    letter-spacing: -0.035em;
}

.r-ads-header h1 { font-size: clamp(2rem, 3vw, 2.65rem); line-height: 1.08; }

.r-ads-header p,
.r-ads-campaigns-heading p {
    margin: 9px 0 0;
    color: #718092;
    font-size: 15px;
    line-height: 1.55;
}

.r-ads-header-actions,
.r-ads-range,
.r-inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (min-width: 641px) {
    .r-ads-header > .r-ads-header-actions {
        align-self: flex-end;
    }
}

.r-ads-button,
.r-ads-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 10px;
    background: #078ca4;
    color: #fff;
    font-size: 14px;
    font-weight: 720;
    text-decoration: none;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.r-ads-button { padding: 0 16px; }
.r-ads-button:hover,
.r-ads-row-action:hover { background: #067a8e; box-shadow: 0 8px 18px rgb(7 140 164 / 16%); transform: translateY(-1px); }
.r-ads-button.r-is-secondary { background: #eaf5f7; color: #0b6f82; }
.r-ads-button.r-is-secondary:hover { background: #d8eef1; }

.r-ads-kicker { display: block; margin-bottom: 14px; color: #078ca4; font-size: 12px; font-weight: 780; letter-spacing: .09em; text-transform: uppercase; }

.r-ads-provider-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: #d8eef1; color: #078ca4; font-size: 16px; font-weight: 800; }
.r-ads-provider-mark.r-is-meta { background: #e8f0ff; color: #2573d6; }
.r-ads-provider-mark.r-is-google { background: #fff1e7; color: #d85d24; }
.r-ads-provider-mark.r-is-tiktok { background: #ecf7f5; color: #167a70; }
.r-ads-provider-mark.r-is-small { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
.r-ads-campaign-status { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: #eef2f4; color: #637486; font-size: 11px; font-weight: 750; white-space: nowrap; }
.r-ads-campaign-status.r-is-active { background: #e8f7ee; color: #28744c; }

.r-ads-chooser { max-width: none; margin: 38px 0 0; }
.r-ads-section-heading { max-width: 650px; margin-bottom: 24px; }
.r-ads-section-heading .r-ads-kicker { margin-bottom: 10px; }
.r-ads-section-heading h2 { margin: 0; color: #10233d; font-size: clamp(1.55rem, 2.5vw, 2rem); letter-spacing: -.03em; }
.r-ads-section-heading p { margin: 9px 0 0; color: #718092; font-size: 15px; line-height: 1.55; }
.r-ads-chooser .r-ads-campaign-types { margin: 0; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.r-ads-chooser .r-ads-campaign-types .r-panel { position: relative; min-height: 218px; padding: 26px; border-radius: 18px; box-shadow: 0 10px 30px rgb(25 55 72 / 5%); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.r-ads-chooser .r-ads-campaign-types .r-panel:hover { border-color: #9ccbd3; box-shadow: 0 18px 40px rgb(25 55 72 / 10%); transform: translateY(-3px); }
.r-ads-chooser .r-ads-campaign-types .r-panel h2 { margin-top: 18px; color: #10233d; font-size: 1.3rem; letter-spacing: -.02em; }
.r-ads-chooser .r-ads-campaign-types .r-panel .r-hint { max-width: 470px; margin-top: 8px; color: #637486; }
.r-ads-chooser .r-ads-campaign-types .r-panel .r-actions { margin-top: 24px; }
.r-ads-chooser .r-ads-button { min-width: 168px; }

.r-ads-campaigns { margin-top: 32px; }
.r-ads-filters {
    --min-column-size: 24ch;
    margin-block-end: var(--wa-space-m);
}
.r-ads-policy-filter,
.r-ads-customer-filter {
    margin-block-end: var(--wa-space-l);
    max-width: 40ch;
}
.r-ads-campaigns-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.r-ads-campaigns h2 { font-size: 27px; }
.r-ads-range { padding: 4px; border: 1px solid #dbe5e9; border-radius: 12px; background: #fff; }
.r-ads-range a { padding: 8px 11px; border-radius: 8px; color: #718092; font-size: 13px; font-weight: 700; text-decoration: none; }
.r-ads-range a.r-is-active { background: #eaf5f7; color: #0b6f82; }
.r-ads-provider-warning { display: flex; align-items: center; gap: 9px; margin: 10px 0; padding: 12px 14px; border: 1px solid #f2d8a8; border-radius: 12px; background: #fff9ec; color: #75551e; font-size: 14px; }
.r-ads-campaign-frame { overflow: hidden; border: 1px solid #dbe5e9; border-radius: 16px; background: #fff; box-shadow: none; }
.r-ads-campaign-empty { display: grid; place-items: center; min-height: 220px; gap: 8px; color: #718092; font-size: 14px; text-align: center; }
.r-ads-campaign-empty strong { color: #243750; font-size: 16px; }
.r-ads-campaign-loading { place-content: center; }
.r-ads-campaign-loading wa-spinner { font-size: var(--wa-font-size-2xl); }
.r-ads-table { min-width: 980px; margin: 0; border: 0; }
.r-ads-table th { background: #f7fafb; color: #637486; font-size: 11px; letter-spacing: .055em; text-transform: uppercase; }
.r-ads-table td { color: #243750; vertical-align: middle; }
.r-ads-table td a { color: #078ca4; font-weight: 700; }
.r-ads-table small { color: #718092; }
.r-ads-status-form { display: inline; margin-left: 5px; }
.r-ads-row-action { min-height: 30px; padding: 0 9px; border: 1px solid #b9d9df; background: #fff; color: #0b6f82; font-size: 12px; }
.r-ads-row-action:hover { background: #eaf5f7; box-shadow: none; }
.r-ads-budget-input { width: 92px; min-height: 32px; padding: 0 8px; border: 1px solid #cddcdf; border-radius: 8px; color: #243750; font-size: 13px; }

.r-ads-asset-group .r-panel-header,
.r-ads-asset-group .r-ads-kicker,
.r-ads-asset-group dl,
.r-ads-asset-group dd {
    margin: 0;
}

.r-ads-asset-badges {
    margin-top: var(--wa-space-m);
}

.r-ads-asset-period {
    margin: 0;
}

.r-ads-asset-metrics > div,
.r-ads-asset-diagnostic,
.r-ads-landing-pages {
    background: var(--wa-color-surface-lowered);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-m);
}

.r-ads-asset-metrics dt {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-bold);
}

.r-ads-asset-metrics dd {
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-bold);
    margin-top: calc(var(--wa-space-m) / 2);
}

.r-ads-landing-pages h3,
.r-ads-landing-pages ul,
.r-ads-asset-section h3,
.r-ads-asset-list {
    margin-block: 0;
}

.r-ads-landing-pages ul,
.r-ads-asset-list {
    padding-inline-start: var(--wa-space-m);
}

.r-ads-landing-pages a {
    overflow-wrap: anywhere;
}

.r-ads-asset-sections {
    border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    padding-top: var(--wa-space-m);
}

.r-ads-asset-image {
    max-inline-size: calc(var(--wa-space-4xl) * 3);
}

.r-ads-asset-image img {
    border-radius: var(--wa-border-radius-l);
    inline-size: 100%;
}

.r-ads-asset-control {
    flex: 1;
}

@media (max-width: 1100px) {
    .r-ads-chooser .r-ads-campaign-types { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .r-ads-content { padding-top: 70px; }
    .r-ads-header,
    .r-ads-campaigns-heading { align-items: flex-start; flex-direction: column; }
    .r-ads-header-actions { flex-wrap: wrap; }
    .r-ads-chooser { margin-top: 28px; }
    .r-ads-chooser .r-ads-campaign-types .r-panel { min-height: 0; padding: 22px; }
    .r-ads-flow-nav { width: 100%; }
    .r-ads-flow-nav a { flex: 1; padding-inline: 8px; text-align: center; }
}

@media (max-width: 760px) {
    .r-profile-page {
        padding: 14px 14px 28px;
    }

    .r-profile-page .r-topbar {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 16px;
        min-height: 42px;
        padding-left: 56px;
    }

    .r-profile-page .r-topbar h1 {
        font-size: 1.45rem;
        letter-spacing: -0.025em;
    }

    .r-profile-page .r-status-line {
        font-size: 0.8rem;
        margin-top: 2px;
    }

    .r-profile-layout {
        margin-top: 0;
    }

    .r-profile-panel {
        --spacing: var(--wa-space-l);
    }

    .r-profile-panel h2,
    .r-profile-panel h3 {
        font-size: var(--wa-font-size-m);
    }

    .r-profile-identity-avatar {
        --size: var(--wa-space-3xl);
    }

    .r-profile-identity-name {
        font-size: var(--wa-font-size-m);
    }

    .r-profile-section-intro .r-summary-note {
        line-height: 1.55;
    }

    .r-profile-token-action {
        justify-self: stretch;
    }

    #passwordChangeSubmit,
    #apiKeyCreate,
    #accountDeleteOpen {
        width: 100%;
    }

    .r-profile-delete-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .r-profile-delete-actions wa-button {
        width: 100%;
    }

    .r-api-token-row {
        gap: 14px 12px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 16px;
    }

    .r-api-token-value,
    .r-api-token-actions {
        grid-column: 1 / -1;
    }

    .r-api-token-created,
    .r-api-token-last-used {
        color: #243750;
        display: grid;
        font-size: var(--wa-font-size-s);
        gap: 3px;
        min-width: 0;
    }

    .r-api-token-created::before,
    .r-api-token-last-used::before {
        color: #718092;
        font-size: var(--wa-font-size-xs);
        font-weight: 760;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .r-api-token-created::before {
        content: "Created";
    }

    .r-api-token-last-used::before {
        content: "Last used";
    }

    .r-api-token-actions wa-button {
        width: 100%;
    }
}
html:has(.r-content-publish) {
    background: #f5f8fa;
}

.r-content-publish {
    background:
        radial-gradient(circle at 18% 18%, rgb(7 140 164 / 10%), transparent 32%),
        radial-gradient(circle at 88% 72%, rgb(16 35 61 / 5%), transparent 30%),
        #f5f8fa;
}

.r-new-container,
.r-nav-open .r-new-container {
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 48px;
    inset: 0 0 0 var(--rail-w);
    justify-content: flex-start;
    overflow-y: auto;
    padding: 72px clamp(28px, 4vw, 64px) 152px;
}

.r-nav-open .r-new-container {
    inset-inline-start: var(--sidebar-w);
}

.r-publish-header,
.r-publish-options {
    margin-inline: auto;
    max-width: 1360px;
    width: 100%;
}

.r-publish-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: 900px;
    text-align: center;
}

.r-publish-eyebrow {
    background: rgb(7 140 164 / 9%);
    border: 1px solid rgb(7 140 164 / 15%);
    border-radius: 999px;
    color: #077d92;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    margin-bottom: 18px;
    padding: 7px 12px;
    text-transform: uppercase;
}

.r-publish-header p {
    color: #6b7c91;
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 14px auto 0;
    max-width: 720px;
}

.r-new-container .r-publish-title {
    color: #10233d;
    font-size: clamp(2.25rem, 3.4vw, 3.35rem);
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-align: center;
    white-space: normal;
}

.r-publish-options {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.r-publish-option {
    align-items: center;
    background: rgb(255 255 255 / 86%);
    border: 1px solid #d8e2e8;
    border-radius: 20px;
    box-shadow: 0 12px 34px rgb(16 35 61 / 6%);
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    min-height: clamp(218px, 25vh, 280px);
    padding: 32px 24px 28px;
    position: relative;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
    width: auto;
}

.r-publish-option:hover {
    border-color: #82c6d1;
    box-shadow: 0 18px 42px rgb(16 35 61 / 11%);
    transform: translateY(-4px);
}

.r-publish-option:has(input:checked) {
    background:
        linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(229 247 249 / 96%));
    border-color: #078ca4;
    box-shadow: 0 0 0 2px rgb(7 140 164 / 16%), 0 18px 42px rgb(16 35 61 / 10%);
}

.r-publish-connect {
    background: rgb(255 255 255 / 42%);
    border-style: dashed;
    color: inherit;
    text-decoration: none;
}

.r-publish-connect:hover {
    background: rgb(255 255 255 / 78%);
    border-color: #078ca4;
}

.r-publish-connect-icon {
    background: rgb(7 140 164 / 9%);
    border: 1px solid rgb(7 140 164 / 18%);
    border-radius: 50%;
    height: 64px;
    position: relative;
    transition: background 180ms ease, transform 180ms ease;
    width: 64px;
}

.r-publish-connect-icon::before,
.r-publish-connect-icon::after {
    background: #078ca4;
    border-radius: 999px;
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.r-publish-connect-icon::before {
    height: 3px;
    width: 24px;
}

.r-publish-connect-icon::after {
    height: 24px;
    width: 3px;
}

.r-publish-connect:hover .r-publish-connect-icon {
    background: rgb(7 140 164 / 14%);
    transform: scale(1.06);
}

.r-publish-checkmark {
    background: #fff;
    border: 1.5px solid #aebfca;
    border-radius: 7px;
    height: 26px;
    position: absolute;
    right: 16px;
    top: 16px;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
    width: 26px;
}

.r-publish-option:has(input:checked) .r-publish-checkmark {
    background: #078ca4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 15px no-repeat;
    border-color: #078ca4;
    transform: scale(1.04);
}

.r-publish-logo {
    flex: none;
    height: 64px;
    width: 64px;
}

.r-publish-identity {
    display: grid;
    gap: 4px;
    max-width: none;
    min-width: 0;
    text-align: center;
}

.r-publish-name {
    color: #10233d;
    font-size: 1.08rem;
    font-weight: 750;
}

.r-publish-account-name {
    color: #6b7c91;
    font-size: 0.93rem;
}

.r-publish-actions {
    align-items: center;
    backdrop-filter: blur(16px);
    background: rgb(255 255 255 / 88%);
    border-top: 1px solid #d6e0e6;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    left: var(--rail-w);
    padding: 16px max(clamp(28px, 4vw, 64px), calc((100% - 1360px) / 2));
    position: fixed;
    right: 0;
    z-index: 2;
}

.r-nav-open .r-publish-actions {
    left: var(--sidebar-w);
}

.r-publish-next {
    margin: 0;
    visibility: visible;
}

.r-publish-selection {
    color: #5e7185;
    font-size: 0.92rem;
    font-weight: 650;
}

.r-publish-next::part(base) {
    background: #078ca4;
    border-color: #078ca4;
    border-radius: 10px;
    color: #ffffff;
    min-height: 48px;
    min-width: 148px;
}

.r-composer-wrap {
    max-width: 1200px;
}

.r-composer-header {
    margin: 16px 0 24px;
}

.r-composer-header h1 {
    color: #10233d;
    font-size: clamp(2rem, 3vw, 2.55rem);
    margin: 0 0 8px;
}

.r-composer-header p {
    color: #6b7c91;
}

.r-change-platforms {
    border-color: #078ca4;
    border-radius: 8px;
    color: #07788d;
}

.r-compose-top {
    border-color: #cfdae2;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgb(16 35 61 / 4%);
    gap: 16px;
    padding: 10px 16px;
}

.r-platform-strip-label {
    color: #10233d;
    font-size: 0.95rem;
}

.r-platform-strip-items {
    gap: 8px;
    padding: 0;
}

.r-platform-strip-item {
    background: #f8fafb;
    border: 1px solid #d4dee5;
    border-radius: 8px;
    gap: 9px;
    padding: 7px 9px;
}

.r-platform-strip-item:not(:has(.r-platform-strip-check:checked)) {
    display: none;
}

.r-platform-strip-logo {
    height: 30px;
    width: 30px;
}

.r-platform-strip-identity {
    display: grid;
    line-height: 1.15;
}

.r-platform-strip-identity strong {
    color: #10233d;
    font-size: 0.78rem;
}

.r-platform-strip-name {
    color: #6b7c91;
    font-size: 0.7rem;
}

.r-platform-strip-check,
.r-platform-strip-check:checked {
    background: transparent;
    border: 0;
    border-radius: 0;
    height: 24px;
    position: relative;
    width: 24px;
}

.r-platform-strip-check:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2310233d' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
}

.r-platform-strip-info {
    color: #078ca4;
}

.r-compose-banner-row {
    grid-template-areas:
        "fields schedule"
        "fields actions";
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 20px;
    margin-top: 22px;
}

.r-compose-fields {
    background: #fff;
    border: 1px solid #cfdae2;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgb(16 35 61 / 4%);
    display: grid;
    gap: 4px;
    grid-area: fields;
    padding: 20px;
}

.r-shared-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.r-shared-field[hidden],
.r-platform-settings[hidden] {
    display: none;
}

.r-shared-field label,
.r-shared-label {
    color: #10233d;
    font-size: 0.9rem;
    font-weight: 680;
}

.r-shared-field-hint {
    color: #6b7c91;
    font-size: 0.78rem;
}

.r-shared-count {
    color: #6b7c91;
    font-size: 0.75rem;
    justify-self: end;
}

.r-shared-count.r-is-over-limit {
    color: #c92a3c;
    font-weight: 700;
}

.r-compose-fields .r-compose-sub-input,
.r-compose-fields .r-compose-banner-input {
    border: 1px solid #cbd7df;
    border-radius: 8px;
    color: #10233d;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 11px 13px;
}

.r-compose-fields .r-compose-sub-input {
    height: 44px;
}

.r-compose-fields .r-compose-banner-input {
    height: 96px;
    min-height: 96px;
    resize: vertical;
}

.r-compose-fields .r-compose-first-comment {
    height: 60px;
    min-height: 60px;
}

.r-compose-fields .r-compose-sub-input:focus,
.r-compose-fields .r-compose-banner-input:focus,
.r-card-input:focus {
    border-color: #078ca4;
    box-shadow: 0 0 0 3px rgb(7 140 164 / 13%);
    outline: none;
}

.r-compose-sub-field-media {
    grid-area: auto;
}

.r-media-file-input {
    border: 0;
    min-height: 0;
    padding: 0;
}

.r-media-file-input::part(dropzone) {
    min-height: 96px;
}

.r-compose-date {
    border-color: #cfdae2;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgb(16 35 61 / 4%);
}

.r-compose-date-title {
    color: #10233d;
    font-size: 1rem;
}

.r-compose-date-icon {
    color: #078ca4;
}

.r-schedule-modes {
    display: grid;
    gap: 12px;
}

.r-schedule-modes label {
    align-items: center;
    color: #10233d;
    cursor: pointer;
    display: flex;
    font-size: 0.88rem;
    gap: 9px;
}

.r-schedule-modes input {
    appearance: none;
    background: #fff;
    border: 1px solid #aab9c4;
    border-radius: 50%;
    height: 18px;
    margin: 0;
    width: 18px;
}

.r-schedule-modes input:checked {
    background: #078ca4;
    border: 2px solid #078ca4;
    box-shadow: inset 0 0 0 4px #fff;
}

.r-schedule-modes input:focus-visible {
    outline: 3px solid rgb(7 140 164 / 18%);
    outline-offset: 2px;
}

.r-publish-btn {
    background: #078ca4;
    border-color: #078ca4;
    border-radius: 8px;
}

.r-create-draft-btn {
    border-color: #078ca4;
    border-radius: 8px;
    color: #078ca4;
}

.r-platform-settings {
    margin-bottom: 30px;
}

.r-platform-settings > h2 {
    color: #10233d;
    font-size: 1.05rem;
    margin: 4px 0 12px;
}

.r-platform-card {
    border-color: #b8dbe1;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgb(16 35 61 / 5%);
}

.r-platform-card-name,
.r-platform-card-label,
.r-platform-card-field strong {
    color: #10233d;
}

.r-platform-card-toggle {
    color: #078ca4;
}

.r-card-input {
    border-color: #cbd7df;
    border-radius: 8px;
    color: #10233d;
}

@media (max-width: 760px) {
    .r-new-container,
    .r-nav-open .r-new-container {
        gap: 24px;
        inset: 0;
        padding: 68px 16px 112px;
    }

    .r-new-container .r-publish-title {
        font-size: 1.8rem;
        text-align: center;
    }

    .r-publish-options {
        gap: 12px;
        grid-template-columns: 1fr 1fr;
    }

    .r-publish-option {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        min-height: 144px;
        padding: 20px;
        width: auto;
    }

    .r-publish-logo {
        height: 42px;
        width: 42px;
    }

    .r-publish-actions,
    .r-nav-open .r-publish-actions {
        bottom: 0;
        left: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        right: 0;
    }

    .r-publish-next::part(base) {
        min-width: 122px;
    }

    .r-composer-header {
        gap: 14px;
        margin-top: 4px;
    }

    .r-change-platforms {
        align-self: stretch;
        text-align: center;
    }

    .r-compose-top {
        align-items: flex-start;
        margin-top: 0;
    }

    .r-platform-strip-label {
        width: 100%;
    }

    .r-platform-strip-items {
        width: calc(100% - 34px);
    }

    .r-compose-banner-row {
        grid-template-areas:
            "fields"
            "schedule"
            "actions";
        grid-template-columns: minmax(0, 1fr);
    }

    .r-compose-fields {
        padding: 16px;
    }

    .r-compose-date {
        min-height: 270px;
    }
}

@media (max-width: 430px) {
    .r-publish-options {
        grid-template-columns: 1fr;
    }

    .r-publish-option {
        align-items: center;
        flex-direction: row;
        min-height: 104px;
        padding: 18px 52px 18px 18px;
    }

    .r-publish-identity {
        text-align: left;
    }

    .r-composer-header h1 {
        font-size: 1.75rem;
    }

    .r-platform-strip-item {
        width: 100%;
    }
}

.r-shortcuts-group kbd {
    align-items: center;
    border: 1px solid #d5e0e3;
    border-bottom-color: #b8c8cd;
    border-radius: 5px;
    color: #526375;
    display: inline-flex;
    font-family: var(--wa-font-family-code);
    font-size: 0.65rem;
    font-weight: 650;
    justify-content: center;
    line-height: 1;
    min-height: 20px;
    padding: 3px 5px;
    white-space: nowrap;
}

.r-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 12px;
}

.r-sidebar-shortcuts-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #526375;
    display: flex;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 620;
    gap: 9px;
    justify-content: flex-start;
    min-height: 38px;
    padding: 6px 8px;
    text-align: left;
    width: 100%;
}

.r-sidebar-shortcuts-button:hover,
.r-sidebar-shortcuts-button:focus-visible {
    background: #eaf5f7;
    color: #12384a;
}

.r-sidebar-shortcuts-icon {
    align-items: center;
    background: #d8eef1;
    border-radius: 50%;
    color: #096f81;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--wa-font-family-code);
    font-size: 0.86rem;
    font-weight: 750;
    height: 21px;
    justify-content: center;
    width: 21px;
}

html:not(.r-nav-open) .r-sidebar-shortcuts-button > span:not(.r-sidebar-shortcuts-icon) {
    display: none;
}

html:not(.r-nav-open) .r-sidebar-shortcuts-button {
    justify-content: center;
    padding-inline: 0;
}

.r-shortcut-status {
    background: #10233d;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 9px;
    bottom: 22px;
    box-shadow: 0 12px 32px rgb(16 35 61 / 24%);
    color: white;
    font-family: var(--wa-font-family-code);
    font-size: 0.78rem;
    font-weight: 650;
    left: 50%;
    padding: 9px 13px;
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1000;
}

.r-shortcut-status[hidden] {
    display: none;
}

.r-shortcuts-dialog {
    --width: min(860px, calc(100vw - 32px));
}

.r-shortcuts-intro {
    border-bottom: 1px solid #e1e9ec;
    color: #637486;
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.r-shortcuts-intro p {
    margin: 0;
}

.r-shortcuts-grid {
    display: grid;
    gap: 16px 34px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "actions navigation"
        "create navigation"
        "calendar navigation";
}

.r-shortcuts-actions {
    grid-area: actions;
}

.r-shortcuts-navigation {
    grid-area: navigation;
}

.r-shortcuts-create {
    grid-area: create;
}

.r-shortcuts-calendar {
    grid-area: calendar;
}

.r-shortcuts-group h2 {
    color: #10233d;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.r-shortcuts-group dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.r-shortcuts-group dl > div {
    align-items: center;
    border-top: 1px solid #edf2f3;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
    min-height: 32px;
    padding: 4px 0;
}

.r-shortcuts-group dt {
    display: flex;
    gap: 0;
}

.r-shortcuts-group dd {
    color: #34495e;
    font-size: 0.84rem;
    margin: 0;
}

.r-shortcuts-group kbd {
    background: white;
    box-shadow: 0 1px 0 #b8c8cd;
    min-width: 25px;
}

.r-shortcuts-group kbd + kbd {
    margin-left: 20px;
    position: relative;
}

.r-shortcuts-group kbd + kbd::before {
    color: #718092;
    content: "+";
    font-family: var(--wa-font-family-body);
    font-size: 0.78rem;
    font-weight: 650;
    position: absolute;
    right: calc(100% + 7px);
}

@media (max-width: 680px) {
    .r-shortcuts-grid {
        grid-template-areas:
            "actions"
            "navigation"
            "create"
            "calendar";
        grid-template-columns: 1fr;
    }
}

/* Company page */
.r-company-content {
    max-width: none;
    padding-top: 38px;
}

.r-company-header {
    align-items: center;
    margin-bottom: 28px;
}

.r-company-header h1 {
    color: #10233d;
    font-size: clamp(2rem, 3vw, 2.65rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.r-company-header .r-status-line {
    color: #718092;
    max-width: 720px;
}

.r-company-header-actions {
    align-items: center;
    display: flex;
    flex: none;
    gap: 12px;
}

@media (min-width: 701px) {
    .r-company-header-actions {
        align-self: flex-end;
    }

    .r-workspace-count,
    .r-company-count {
        min-width: 120px;
        text-align: center;
    }

    .r-workspace-header-actions wa-button,
    .r-company-header-actions wa-button {
        width: 172px;
    }
}

.r-company-count {
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 12px;
    color: #34475c;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 10px 16px;
    white-space: nowrap;
}

.r-company-delete-warning {
    margin-bottom: 18px;
}

.r-company-panel {
    background: white;
    border-color: #dbe5e9;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgb(25 55 72 / 5%);
    padding: 0 28px;
}

.r-company-panel + .r-company-panel {
    margin-top: 18px;
}

.r-company-panel-header {
    align-items: center;
    border-bottom: 1px solid #dbe5e9;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    min-height: 88px;
    padding: 22px 0;
}

.r-company-panel-header h2 {
    color: #10233d;
    font-size: 1.15rem;
    margin: 0 0 4px;
}

.r-company-panel-header p {
    color: #718092;
    font-size: 0.9rem;
    margin: 0;
}

.r-company-list {
    display: grid;
}

.r-company-row {
    align-items: center;
    border-bottom: 1px solid #e3eaee;
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    min-height: 108px;
    padding: 20px 2px;
}

.r-company-row:last-child {
    border-bottom: 0;
}

.r-company-row.r-is-current {
    background: #fbfefe;
}

.r-company-avatar {
    align-items: center;
    background: #dff4f7;
    border: 1px solid #cdebef;
    border-radius: 13px;
    color: #087d93;
    display: inline-flex;
    font-size: 1.15rem;
    font-weight: 800;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.r-company-row:nth-child(2n) .r-company-avatar {
    background: #eaf2ff;
    border-color: #dce8fb;
    color: #356fb8;
}

.r-company-row:nth-child(3n) .r-company-avatar {
    background: #f1ecfb;
    border-color: #e6dcf8;
    color: #7150bd;
}

.r-company-main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.r-company-title {
    align-items: center;
    color: #10233d;
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 800;
    gap: 10px;
}

.r-company-meta {
    color: #718092;
    font-size: 0.84rem;
}

.r-company-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.r-company-actions form,
.r-company-member-actions form,
.r-company-invite-row form {
    margin: 0;
}

.r-company-actions wa-button::part(base),
.r-company-panel-header wa-button::part(base) {
    min-height: 40px;
}

.r-company-team-panel {
    padding-bottom: 4px;
}

.r-company-member-list {
    display: grid;
    margin-top: 0;
}

.r-company-member-row {
    align-items: center;
    border-bottom: 1px solid #e3eaee;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(260px, 1fr) minmax(120px, auto) minmax(70px, auto);
    min-height: 94px;
    padding: 18px 2px;
}

.r-company-member-row:last-child {
    border-bottom: 0;
}

.r-company-member-identity {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
}

.r-company-member-avatar {
    --size: 46px;
}

.r-company-member-identity h3,
.r-company-invite-main h3 {
    color: #10233d;
    font-size: 0.9rem;
    margin: 0 0 3px;
    overflow-wrap: anywhere;
}

.r-company-member-identity p,
.r-company-invite-main p {
    color: #718092;
    font-size: 0.8rem;
    margin: 0;
}

.r-company-member-role {
    justify-self: start;
}

.r-company-member-actions {
    justify-self: end;
}

.r-company-content .r-company-access-editor {
    --spacing: 16px;
    border-top: 0;
    grid-column: 1 / -1;
    margin: -4px 0 2px;
    width: 100%;
}

.r-company-content .r-company-access-editor::part(header) {
    background: #f4fafb;
    border: 1px solid #d6e8eb;
    border-radius: 10px;
    color: #087d93;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 11px 14px;
}

.r-company-content .r-company-access-editor::part(content) {
    padding: 12px 0 20px;
}

.r-company-permission-form {
    background: white;
    border: 1px solid #dbe5e9;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgb(25 55 72 / 6%);
    display: grid;
    gap: 24px;
    padding: 24px;
}

.r-company-current-access {
    align-items: center;
    background: #f7fafb;
    border: 1px solid #e0e8eb;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 14px 16px;
}

.r-company-access-label {
    color: #526578;
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.r-company-access-summary {
    color: #718092;
    display: block;
    font-size: 0.78rem;
    margin-top: 3px;
}

.r-company-access-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.r-company-access-empty,
.r-company-permission-actions > span {
    color: #718092;
    font-size: 0.8rem;
}

.r-company-permission-heading h4 {
    color: #10233d;
    font-size: 1rem;
    margin: 5px 0 4px;
}

.r-company-permission-heading p {
    color: #718092;
    font-size: 0.84rem;
    margin: 0;
}

.r-company-content .r-company-administration-option {
    background: #eef9fa;
    border-color: #bfe3e8;
    border-radius: 12px;
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 16px;
}

.r-company-permission-option-label {
    color: #087d93;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.r-company-content .r-company-operational-permissions {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.r-company-permission-option {
    background: #fbfcfd;
    border: 1px solid #e0e8eb;
    border-radius: 12px;
    min-width: 0;
    padding: 16px;
}

.r-company-content .r-company-permission-actions {
    align-items: center;
    border-top-color: #e0e8eb;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding-top: 18px;
}

.r-company-invites {
    border-top: 1px solid #dbe5e9;
    padding: 18px 0 2px;
}

.r-company-subsection-label {
    color: #526578;
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.r-company-invite-row {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    min-height: 82px;
}

.r-company-danger {
    align-items: center;
    background: #fffafa;
    border: 1px solid #efb7b7;
    border-radius: 14px;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-top: 18px;
    min-height: 104px;
    padding: 20px 26px;
}

.r-company-danger h2 {
    color: #aa1515;
    font-size: 1.05rem;
    margin: 0 0 6px;
}

.r-company-danger p {
    color: #637486;
    font-size: 0.86rem;
    margin: 0;
}

.r-company-dialog-form {
    display: grid;
    gap: 22px;
}

.r-company-dialog-copy {
    color: #637486;
    line-height: 1.55;
    margin: 0;
}

.r-company-dialog-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .r-company-row {
        grid-template-columns: auto minmax(160px, 1fr);
    }

    .r-company-actions {
        grid-column: 1 / -1;
        padding-left: 70px;
    }

    .r-company-member-row {
        grid-template-columns: minmax(220px, 1fr) auto;
    }

    .r-company-member-actions {
        grid-column: 2;
    }
}

@media (max-width: 700px) {
    .r-company-content {
        padding-top: 74px;
    }

    .r-company-header {
        align-items: stretch;
    }

    .r-company-header-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .r-company-count {
        text-align: center;
    }

    .r-company-panel {
        padding: 0 18px;
    }

    .r-company-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .r-company-panel-header wa-button {
        width: 100%;
    }

    .r-company-row {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 0;
        padding: 20px 0;
    }

    .r-company-avatar {
        height: 48px;
        width: 48px;
    }

    .r-company-actions {
        display: grid;
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .r-company-actions form,
    .r-company-actions wa-button {
        width: 100%;
    }

    .r-company-member-row {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .r-company-member-identity {
        grid-column: 1 / -1;
    }

    .r-company-member-role {
        grid-column: 1;
    }

    .r-company-member-actions {
        grid-column: 2;
    }

    .r-company-content .r-company-permission-actions,
    .r-company-current-access,
    .r-company-danger {
        align-items: stretch;
        flex-direction: column;
    }

    .r-company-access-badges {
        justify-content: flex-start;
    }

    .r-company-content .r-company-operational-permissions {
        grid-template-columns: 1fr;
    }

    .r-company-permission-form {
        padding: 18px;
    }

    .r-company-content .r-company-permission-actions wa-button,
    .r-company-danger wa-button {
        width: 100%;
    }

    .r-company-invite-row {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 14px 0;
    }

    .r-company-invite-row wa-badge,
    .r-company-invite-row form {
        grid-column: 2;
        justify-self: start;
    }

    .r-company-dialog-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .r-company-dialog-actions wa-button {
        width: 100%;
    }
}