:root {
    --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);
    --sidebar-w: 284px;
    --rail-w: 72px;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion: 220ms;
}

[hidden] {
    display: none !important;
}

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

* {
    box-sizing: border-box;
}

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

.r-content.r-company-content,
.r-content.r-developer-content {
    max-width: none;
}

.r-ads-header h1 {
    font-size: var(--wa-font-size-2xl);
    line-height: 1.08;
}

.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-dialog-form {
    display: grid;
    gap: 22px;
}

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

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 {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    max-width: 1px !important;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px !important;
}

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

.r-content {
    --r-content-pad: var(--wa-space-xl);
    width: calc(100% - var(--rail-w));
    min-width: 0;
    margin-left: var(--rail-w);
    padding: var(--r-content-pad);
    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 {
    flex: none;
}

.r-change-platforms::part(button) {
    font-weight: 600;
}

.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;
}

.r-nav-open .r-content {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
}

.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);
}

.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;
}

.r-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--scrim);
    opacity: 0;
    transition: opacity var(--motion) var(--ease-standard);
}

.r-sidebar :where(.r-nav-group-label, .r-nav-chevron,
    .r-profile-meta, .r-sidebar-workspace-meta) {
    transition: opacity calc(var(--motion) / 1.6) var(--ease-standard);
}

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

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;
}

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

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

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);
}

[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);
}

.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-workspace {
    flex-shrink: 0;
    margin: 0;
}

.r-sidebar-workspace-summary {
    align-items: center;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 10px;
    justify-content: flex-start;
    list-style: none;
    text-align: left;
    width: 100%;
}

.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-popover {
    --max-width: var(--r-sidebar-selector-width);
}

.r-sidebar-workspace-popover::part(body) {
    box-sizing: border-box;
    width: var(--r-sidebar-selector-width);
}

.r-sidebar-workspace-popover::part(body),
.r-sidebar-workspace-popover::part(dialog),
.r-sidebar-workspace-popover::part(popup__popup) {
    overflow: visible;
}

.r-sidebar-workspace-option,
.r-sidebar-company-option {
    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-pick::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:has(.r-sidebar-company-submenu)::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:has(.r-sidebar-company-submenu):hover .r-sidebar-company-submenu,
.r-sidebar-company-item:has(.r-sidebar-company-submenu):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) {
    background: var(--surface-muted);
}

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

.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 {
    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-api-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-panel.r-api-token-section {
    min-width: 0;
    padding: clamp(20px, 3vw, 32px);
}

.r-api-token-section h2 {
    margin: 0;
}

.r-api-token-section + .r-summary-note {
    padding-inline: var(--wa-space-m);
}

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

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

.r-api-token-heading code {
    overflow-wrap: anywhere;
}

.r-api-token-action {
    justify-self: end;
    min-width: 0;
    width: min(100%, 22rem);
}

.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(140px, 1.1fr) minmax(210px, 2fr) minmax(100px, 0.8fr) minmax(100px, 0.8fr) 96px;
}

.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: var(--wa-space-s) var(--wa-space-m);
    text-transform: uppercase;
}

#apiKeyStatus {
    display: grid;
    gap: 10px;
    margin-top: var(--wa-space-m);
}

#apiKeyStatus > .r-summary-note {
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-m);
    padding: var(--wa-space-xl) var(--wa-space-m);
    text-align: center;
}

.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-owner,
.r-api-token-view-only {
    min-width: 0;
    overflow-wrap: anywhere;
}

.r-api-token-you {
    background: #eaf5f7;
    border-radius: 999px;
    color: #0b6f82;
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: 8px;
    padding: 2px 8px;
}

.r-api-token-view-only {
    color: #718092;
    font-size: 0.78rem;
    font-weight: 600;
}

.r-api-token-value {
    overflow-wrap: anywhere;
    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);
}

.r-developer-setup {
    max-width: 52rem;
}

.r-developer-setup h2,
.r-developer-setup h3 {
    margin: 0;
}

.r-developer-copy {
    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);
    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-s);
    line-height: 1.5;
    margin: 0;
    max-height: none;
    overflow: auto;
    padding: var(--wa-space-m);
    white-space: pre-wrap;
}

.r-developer-copy code {
    font: inherit;
}

@media (width <= 1080px) {
    .r-api-token-heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-api-token-action {
        justify-self: stretch;
        width: 100%;
    }

    .r-api-token-header {
        display: none;
    }

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

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

    .r-api-token-owner,
.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-owner::before,
.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-owner::before {
        content: "Owner";
    }

    .r-api-token-created::before {
        content: "Created";
    }

    .r-api-token-last-used::before {
        content: "Last used";
    }
}

.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: var(--wa-font-size-2xl);
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}

.r-page-title {
    margin-bottom: var(--wa-space-xl);
}

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-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;
}

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

.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;
}

@container (width <= 560px) {
}

@media (width <= 820px) {
}

.r-pub-sync {
    align-items: center;
    color: var(--wa-color-text-quiet);
    display: flex;
    font-size: var(--wa-font-size-xs);
    gap: var(--wa-space-2xs);
}

.r-pub-sync strong {
    color: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-normal);
}

@media (hover: none) {
}

.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;
}

@media (width <= 1100px) {
}

@media (width <= 880px) {
}

@media (width <= 640px) {
}

@media (width <= 440px) {
}

.r-calendar-content {
    background: var(--wa-color-surface-lowered);
    margin-right: 0;
    max-width: none;
    min-height: 100vh;
    padding-bottom: var(--r-content-pad);
}

.r-calendar-heading {
    flex-wrap: wrap;
    gap: var(--wa-space-m);
    margin-bottom: var(--wa-space-xl);
}

.r-calendar-heading h1 {
    font-size: var(--wa-font-size-2xl);
    letter-spacing: -0.03em;
    margin: 0 0 var(--wa-space-xs);
}

.r-calendar-heading .r-hint {
    font-size: var(--wa-font-size-s);
    margin: 0;
}

.r-calendar-timezone {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

.r-calendar-page .r-calendar-platform-filters {
    display: block;
    padding-top: var(--wa-space-s);
}

.r-calendar-platform-filters::part(form-control-input) {
    flex-wrap: wrap;
    gap: var(--wa-space-xs);
}

.r-calendar-platform-filters wa-radio {
    border-radius: var(--wa-border-radius-m);
}

.r-calendar-platform-filters::part(form-control-label),
.r-calendar-view-switch::part(form-control-label) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    clip-path: inset(50%);
    overflow: hidden;
}

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

.r-calendar-primary-actions,
.r-calendar-period-controls,
.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 {
    flex: none;
}

.r-calendar-platform-filter,
.r-calendar-gap-banner,
.r-calendar-day {
    background: transparent;
    color: #526375;
    font-weight: 700;
}

.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-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: var(--wa-space-l);
}

.r-calendar-toolbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.r-calendar-period-controls strong {
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-l);
    min-width: 170px;
}

.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 {
    border-radius: 9px;
    flex: none;
    gap: 8px;
}

.r-calendar-platform-filter::part(button) {
    min-height: 38px;
    padding-inline: 14px;
}

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

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

.r-calendar-platform-filter.r-is-active::part(button) {
    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 {
    margin-bottom: 14px;
    width: 100%;
}

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

.r-calendar-gap-banner:hover::part(button) {
    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: start;
    display: grid;
    gap: var(--wa-space-l);
    grid-template-columns: minmax(0, 1fr) 320px;
}

.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-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 (width >= 1250px) {
    .r-calendar-draft-posts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

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

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

@container (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-calendar-draft-media-scroller {
    width: 100%;
}

.r-calendar-draft-media-group {
    position: relative;
}

.r-calendar-draft-media-count {
    background: #123f49;
    border-radius: 999px;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 7px;
    position: absolute;
    right: 8px;
    top: 16px;
}

.r-calendar-draft-media-track {
    display: flex;
    gap: 6px;
}

.r-calendar-draft-media-track .r-calendar-draft-media {
    flex: 0 0 min(80%, 280px);
}

.r-draft-edit-media {
    background: #f4fafb;
    border: 1px solid #d3e4e8;
    border-radius: 10px;
    padding: 10px;
}

.r-draft-edit-media-summary {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.r-draft-edit-media-items {
    display: flex;
    gap: 10px;
}

.r-draft-edit-media-item {
    display: grid;
    flex: 0 0 160px;
    gap: 6px;
}

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

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

.r-draft-platform-editor {
    --width: 57.5rem;
}

.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 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,
.r-draft-threads-approval 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,
.r-draft-threads-approval span,
.r-draft-threads-approval strong,
.r-draft-threads-approval small {
    display: block;
}

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

.r-draft-instagram-ai-option small,
.r-draft-threads-approval 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 (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-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;
}

@media (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: var(--wa-color-surface-default);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    box-shadow: var(--wa-shadow-xs);
    min-width: 0;
}

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

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

.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 var(--wa-color-surface-border);
    border-radius: 0;
    border-right: 1px solid var(--wa-color-surface-border);
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
    min-height: 100px;
    min-width: 0;
    padding: var(--wa-space-s);
    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 {
    outline: var(--wa-focus-ring);
    outline-offset: calc(-1 * var(--wa-focus-ring-width));
}

.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: var(--wa-color-brand-fill-quiet);
    box-shadow: inset 0 0 0 1px var(--wa-color-brand-border-loud);
    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;
    overflow-wrap: anywhere;
}

.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: 0;
    overflow: hidden;
}

.r-calendar-day-header {
    align-items: flex-start;
    background: var(--wa-color-surface-raised);
    border-bottom: 1px solid var(--wa-color-surface-border);
    display: flex;
    gap: var(--wa-space-m);
    justify-content: space-between;
    padding: var(--wa-space-l);
}

.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: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    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: var(--wa-color-text-quiet);
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-m);
    padding: var(--wa-space-2xl) var(--wa-space-l);
    text-align: center;
}

.r-calendar-day-empty wa-icon {
    background: var(--wa-color-brand-fill-quiet);
    border-radius: var(--wa-border-radius-l);
    color: var(--wa-color-brand-on-quiet);
    font-size: var(--wa-font-size-xl);
    padding: var(--wa-space-m);
}

.r-calendar-day-empty strong {
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-m);
}

.r-calendar-day-empty span {
    font-size: var(--wa-font-size-s);
    line-height: var(--wa-line-height-normal);
}

.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 {
    flex: none;
}

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

.r-calendar-post-action:hover::part(button) {
    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-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 (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 (width <= 880px) {
    .r-calendar-primary-actions {
        justify-content: space-between;
    }

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

    .r-calendar-toolbar-actions {
        justify-content: flex-end;
        width: 100%;
    }
}

@media (width <= 560px) {
    .r-calendar-primary-actions {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

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

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

    .r-calendar-period-controls strong {
        flex-basis: 100%;
        margin: 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;
    }
}

@media (width <= 560px) {
    .r-calendar-timezone {
        font-size: var(--wa-font-size-xs);
    }

    .r-calendar-grid:not(.r-is-week-view) .r-calendar-day {
        min-height: 76px;
        padding: var(--wa-space-xs);
    }

    .r-calendar-grid:not(.r-is-week-view) .r-calendar-day-summary strong {
        font-size: var(--wa-font-size-xs);
        font-weight: var(--wa-font-weight-normal);
    }

    .r-calendar-grid:not(.r-is-week-view) :is(.r-calendar-day-platforms, .r-calendar-day-status, .r-calendar-day-gap) {
        display: none;
    }
}

.r-secondary-button {
    flex: none;
}

.r-secondary-button::part(button),
.r-primary-button::part(button) {
    font-weight: 700;
}

.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-settings-social {
    align-items: start;
}

.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%;
}

.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;
    margin: 0;
    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%;
}

.r-publish-btn::part(button) {
    width: 100%;
    font-weight: 700;
}

.r-create-draft-btn {
    width: 100%;
}

.r-create-draft-btn::part(button) {
    width: 100%;
    font-weight: 700;
}

.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-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-tiktok-account {
    align-items: center;
    border-left: 1px solid #dbe4ea;
    display: flex;
    gap: 10px;
    margin-left: 10px;
    padding-left: 20px;
}

.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-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,
.r-schedule-modes input:checked {
    background: #078ca4;
    border: 2px solid #078ca4;
    box-shadow: inset 0 0 0 4px #fff;
}

.r-tiktok-mode-option input:focus-visible,
.r-schedule-modes 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-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-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-caption {
    min-height: 90px;
}

.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%);
}

.r-date-day-toggle::part(button) {
    padding: 6px;
    color: #111;
}

.r-date-day-toggle wa-icon {
    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 {
    border-color: transparent;
    display: flex;
    flex-direction: column;
    position: fixed;
}

.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 .r-publish-title {
    font-family: Inter, sans-serif;
    margin: 0;
}

.r-publish-options {
    flex-wrap: wrap;
    justify-content: center;
}

.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-inbox-toolbar {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--wa-space-s);
    width: 100%;
}

.r-inbox-toolbar .wa-cluster {
    width: 100%;
}

.r-inbox-status-select {
    flex: 0 0 auto;
    min-width: 7.5rem;
    width: auto;
}

.r-account-select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.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-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 {
    flex: none;
}

.r-hint {
    color: var(--muted);
    font-size: 0.86rem;
}

.r-ig-trial-eligibility-hint {
    align-items: center;
    display: flex;
    gap: 6px;
}

.r-ig-trial-eligibility-hint wa-icon {
    color: var(--wa-color-warning-on-quiet);
    flex: 0 0 auto;
}

.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: var(--wa-font-size-2xl);
    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-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;
}

.r-messages-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.r-contact-window {
    color: var(--wa-color-text-quiet);
}

.r-inbox-progress {
    --track-height: 8px;
    --track-color: #eaf5f7;
    --indicator-color: #078ca4;
    margin-top: 10px;
    width: 260px;
}

.r-inbox-panel .r-limit-control {
    color: var(--text);
}

.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-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-post-ad-badge {
    flex: none;
    font-size: var(--wa-font-size-xs);
}

.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-tag-icon {
    color: var(--muted);
    flex: none;
    font-size: var(--wa-font-size-s);
}

.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-meta {
    display: grid;
    gap: 4px;
    justify-items: end;
}

.r-thread-peer {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.r-thread-header {
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    width: 100%;
}

.r-thread-header .r-thread-peer {
    align-items: flex-start;
    flex: 1 1 auto;
}

.r-conversation-actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.r-conversation-actions-trigger {
    min-width: var(--wa-space-2xl);
}

.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-post-empty {
    display: none;
}

.r-post-empty.r-is-visible {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    min-height: 240px;
    padding: 40px 24px;
    text-align: center;
}

.r-post-empty wa-icon {
    font-size: 1.8rem;
    opacity: 0.6;
}

.r-post-empty h3 {
    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 {
    bottom: 14px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 2;
}

.r-jump-to-latest::part(button) {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #b7dbe1;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgb(16 35 61 / 14%);
    color: #0b6f82;
    font-size: 0.78rem;
    font-weight: 800;
}

.r-jump-to-latest:hover::part(button) {
    background: #eaf5f7;
    border-color: #63b5c3;
}

.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 (width <= 880px) {
    .r-grid-messages,
.r-grid-comments {
        height: auto;
        min-height: 0;
    }

    .r-messages-panel .r-panel-controls {
        flex-wrap: wrap;
    }

    .r-thread-header .r-conversation-actions {
        margin-inline-start: auto;
    }

    .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-system {
    align-items: center;
    align-self: center;
    background: var(--wa-color-neutral-fill-quiet);
    border: 1px solid var(--wa-color-neutral-border-quiet);
    border-radius: var(--wa-border-radius-pill);
    color: var(--wa-color-text-quiet);
    display: flex;
    font-size: var(--wa-font-size-xs);
    gap: var(--wa-space-2xs);
    justify-content: center;
    margin: var(--wa-space-xs) auto;
    max-width: min(90%, 42rem);
    padding: var(--wa-space-2xs) var(--wa-space-s);
    text-align: center;
}

.r-message-system-link {
    color: var(--wa-color-brand-on-quiet);
    font-weight: var(--wa-font-weight-semibold);
    white-space: nowrap;
}

.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-text {
    line-height: 1.4;
    margin: 0;
    overflow-wrap: anywhere;
}

.r-message-time {
    color: var(--muted);
    font-size: 0.72rem;
}

.r-comment {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
}

.r-comment-body,
.r-review-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.r-comment-head,
.r-review-head {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.r-comment-author,
.r-review-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-conversation-time,
.r-comment-time,
.r-review-time {
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.r-comment-text,
.r-review-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-tab {
    --wa-color-neutral-fill-quiet: transparent;
}

.r-comment-view-tab::part(button) {
    min-height: 38px;
    padding: 10px 12px 8px;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #526375;
    font: inherit;
}

.r-comment-view-tab:hover::part(button) {
    color: #12384a;
}

.r-comment-view-tab.r-is-active::part(button) {
    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;
}

.r-review-controls {
    flex-wrap: wrap;
}

.r-review {
    align-items: start;
    cursor: default;
    grid-template-columns: auto minmax(0, 1fr);
}

.r-review-stars {
    color: #f5a623;
    letter-spacing: 2px;
}

.r-connect-empty {
    align-items: center;
    background: #eaf5f7;
    border: 1px solid #cfe4e8;
    border-radius: 16px;
    box-shadow: none;
    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 {
    color: #10233d;
    margin: 0;
}

.r-connect-empty p {
    color: #526375;
    margin: 0 0 14px;
}

.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: visible;
    padding: 0;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.r-grid-settings-social .r-settings-panel {
    min-height: 0;
}

.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: var(--wa-space-l);
}

.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-account-count {
    color: var(--muted);
    font-size: var(--wa-font-size-m);
    margin-left: auto;
    white-space: nowrap;
}

.r-settings-account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 var(--wa-space-l) var(--wa-space-m);
}

.r-settings-account-item:only-child {
    grid-column: 1 / -1;
}

.r-settings-account-item {
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    min-width: 0;
    min-height: var(--wa-space-3xl);
    padding-inline: var(--wa-space-s);
}

.r-settings-account-name {
    flex: 1;
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-semibold);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-settings-account-item wa-tooltip {
    --max-width: 35ch;
}

.r-settings-account-tooltip {
    overflow-wrap: anywhere;
}

.r-settings-empty {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
    max-width: 52ch;
    padding: var(--wa-space-3xs) var(--wa-space-l) var(--wa-space-l);
}

.r-settings-capabilities {
    align-items: center;
    color: var(--muted);
    display: flex;
    gap: var(--wa-space-2xs);
    line-height: 1.55;
}

.r-settings-capabilities-label {
    font-size: var(--wa-font-size-m);
}

.r-settings-capabilities wa-button {
    --padding-block: 0;
    --padding-inline: 0;
    margin: 0;
}

.r-settings-capability-list {
    margin: 0;
    padding-inline-start: 16px;
}

.r-settings-capability-list li {
    margin-bottom: 4px;
    line-height: 1.45;
}

.r-settings-capability-list li:last-child {
    margin-bottom: 0;
}

.r-settings-social-footer {
    background: var(--surface-subtle);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--wa-border-radius-l) var(--wa-border-radius-l);
    gap: var(--wa-space-s);
    margin-top: auto;
    padding: var(--wa-space-s) var(--wa-space-l);
}

@media (max-width: 680px) {
    .r-settings-account-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.r-settings-actions {
    background: var(--surface-subtle);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--wa-border-radius-l) var(--wa-border-radius-l);
    flex-wrap: wrap;
    margin-top: auto;
    padding: var(--wa-space-s) var(--wa-space-l);
}

.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-workspace-list {
    display: grid;
}

.r-workspace-row {
    align-items: center;
    border-bottom: 1px solid #e3eaee;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 8px 2px;
}

.r-workspace-row:last-child {
    border-bottom: 0;
}

.r-workspace-avatar {
    align-items: center;
    background: #eaf5f7;
    border-radius: 9px;
    color: #078ca4;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.r-company-member-identity {
    min-inline-size: 0;
}

.r-save-status {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
    min-height: 1em;
    opacity: 0;
    transition: opacity var(--wa-transition-fast, 160ms) ease;
    white-space: nowrap;
}

.r-save-status.r-is-visible {
    opacity: 1;
}

.r-save-status-success {
    color: var(--wa-color-success-on-quiet);
}

.r-save-status-error {
    color: var(--wa-color-danger-on-quiet);
}

.r-workspace-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.r-workspace-title {
    align-items: center;
    color: #10233d;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.88rem;
    font-weight: 650;
    gap: 8px;
}

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

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

.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;
    gap: 8px;
    min-height: 0;
    padding: 0;
}

.r-sidebar-header .r-sidebar-workspace {
    flex: 1;
    min-width: 0;
}

.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 {
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

html:not(.r-nav-open) .r-sidebar-header .r-sidebar-workspace {
    flex: 0 0 auto;
    width: 100%;
}

html:not(.r-nav-open) .r-nav-toggle svg {
    transform: rotate(180deg);
}

.r-sidebar-workspace-summary {
    background: white;
    border: 1px solid #dbe5e9;
    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:has(.r-sidebar-workspace-popover[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 {
    gap: 8px;
    padding: 9px;
}

.r-sidebar-workspace-option,
.r-sidebar-company-option {
    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 {
    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-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("./icon-drafts.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 {
    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 (width <= 880px) {
    .r-sidebar-company-item:has(.r-sidebar-company-submenu)::after {
        display: none;
    }

    .r-sidebar-company-submenu {
        display: none;
        min-width: 0;
        position: static;
        transform: none;
    }

    .r-sidebar-company-item:has(.r-sidebar-company-submenu):hover .r-sidebar-company-submenu,
    .r-sidebar-company-item:has(.r-sidebar-company-submenu):focus-within .r-sidebar-company-submenu {
        display: grid;
        transform: none;
    }

    .r-sidebar {
        width: var(--sidebar-w);
        transform: translateX(-100%);
    }

    .r-progress,
.r-nav-open .r-progress {
        left: 50%;
    }

    .r-sidebar-header {
        gap: 0;
    }

    .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-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 {
        --r-content-pad: var(--wa-space-m);
        margin-left: 0;
        width: 100%;
        padding: 70px var(--r-content-pad) var(--r-content-pad);
    }

    .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: var(--wa-font-size-2xl);
        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-compose-top {
        margin-top: 48px;
    }

    .r-message-bubble {
        max-width: 88%;
    }

    .r-comment-replies {
        margin-left: 20px;
    }
}

.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: var(--wa-color-surface-default);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    display: flex;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-2xs);
}

.r-analytics-content {
    container: analytics / inline-size;
    margin-right: 0;
    max-width: none;
}

.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-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-l);
    justify-content: space-between;
    margin-bottom: var(--wa-space-xl);
}

.r-analytics-head h1 {
    font-weight: var(--wa-font-weight-bold);
    font-size: var(--wa-font-size-2xl);
    letter-spacing: -0.02em;
    margin: 0;
}

.r-analytics-head .r-hint {
    font-size: var(--wa-font-size-s);
    margin: var(--wa-space-2xs) 0 0;
}

.r-range-picker a.r-is-active,
.r-ads-range a.r-is-active {
    background: #eaf5f7;
    color: #0b6f82;
}

.r-range-picker a {
    border-radius: var(--wa-border-radius-s);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    padding: var(--wa-space-xs) var(--wa-space-s);
    text-decoration: none;
    white-space: nowrap;
}

.r-kpi-grid {
    display: grid;
    gap: var(--wa-space-m);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: var(--wa-space-l);
}

.r-kpi {
    --spacing: var(--wa-space-l);
    min-width: 0;
}

.r-kpi-icon {
    align-items: center;
    background: var(--tone-soft, var(--wa-color-brand-fill-quiet));
    border-radius: var(--wa-border-radius-m);
    color: var(--tone-strong, var(--wa-color-brand-on-quiet));
    display: inline-flex;
    font-size: var(--wa-font-size-m);
    grid-column: 2;
    grid-row: 1;
    height: var(--wa-space-2xl);
    justify-content: center;
    width: var(--wa-space-2xl);
}

.r-kpi-label {
    align-self: center;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    grid-column: 1;
    grid-row: 1;
}

.r-kpi-value {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--wa-font-size-2xl);
    font-variant-numeric: tabular-nums;
    font-weight: var(--wa-font-weight-bold);
    gap: var(--wa-space-xs);
    grid-column: 1 / -1;
    line-height: var(--wa-line-height-condensed);
    color: var(--wa-color-text-normal);
}

.r-kpi-delta {
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-semibold);
    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: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
    grid-column: 1 / -1;
}

.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 {
    --spacing: var(--wa-space-l);
    display: block;
    min-width: 0;
}

.r-recommendations-panel {
    min-width: 0;
}

.r-recommendations-panel > h2,
.r-weekly-summary > h2,
.r-content-comparison > h2 {
    font-size: var(--wa-font-size-m);
    margin: 0 0 var(--wa-space-2xs);
}

.r-insights-layout {
    align-items: stretch;
    display: grid;
    gap: var(--wa-space-m);
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
    margin-bottom: var(--wa-space-l);
}

.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-recommendation-notice {
    align-items: start;
    color: var(--wa-color-text-quiet);
    display: flex;
    font-size: var(--wa-font-size-xs);
    gap: var(--wa-space-xs);
    line-height: var(--wa-line-height-normal);
    margin: var(--wa-space-m) 0;
}

.r-recommendation-notice wa-icon {
    color: #3f779f;
    flex: none;
}

.r-recommendation-grid {
    display: grid;
    gap: var(--wa-space-xs);
    grid-template-columns: 1fr;
    margin-top: var(--wa-space-s);
}

.r-recommendation-card {
    align-items: start;
    display: grid;
    gap: var(--wa-space-xs) var(--wa-space-s);
    grid-template-columns: auto minmax(0, 1fr);
    padding-block: var(--wa-space-s);
}

.r-recommendation-card:only-child {
    grid-column: 1 / -1;
}

.r-recommendation-icon {
    align-items: center;
    background: var(--wa-color-brand-fill-quiet);
    border-radius: var(--wa-border-radius-m);
    color: var(--wa-color-brand-on-quiet);
    display: inline-flex;
    height: var(--wa-space-2xl);
    justify-content: center;
    width: var(--wa-space-2xl);
    grid-row: span 2;
}

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

.r-recommendation-label {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-semibold);
}

.r-recommendation-copy > strong {
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-m);
    line-height: var(--wa-line-height-normal);
}

.r-recommendation-detail {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
}

.r-recommendation-metric {
    color: var(--wa-color-brand-on-quiet);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    grid-column: 2;
}

.r-weekly-summary,
.r-content-comparison {
    min-width: 0;
}

.r-weekly-metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    margin: 18px 0;
}

.r-weekly-metrics > span {
    color: var(--wa-color-text-normal);
    display: grid;
    gap: var(--wa-space-xs);
    font-size: var(--wa-font-size-xl);
    font-weight: var(--wa-font-weight-bold);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow-wrap: anywhere;
}

.r-weekly-metrics small,
.r-content-comparison small {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-normal);
}

.r-weekly-summary p {
    color: #526375;
    font-size: .84rem;
    margin: 8px 0 0;
}

.r-weekly-rate {
    align-items: center;
    border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    color: var(--wa-color-text-quiet);
    display: flex;
    gap: var(--wa-space-s);
    font-size: var(--wa-font-size-s);
    justify-content: space-between;
    padding-top: var(--wa-space-m);
}

.r-weekly-rate strong {
    color: var(--wa-color-text-normal);
}

.r-content-comparison ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.r-content-comparison li {
    color: var(--wa-color-text-normal);
    margin: 0;
    padding-block: var(--wa-space-s);
}

.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: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.r-content-bar {
    --track-height: var(--wa-space-2xs);
    --track-color: var(--wa-color-neutral-fill-quiet);
    --indicator-color: var(--wa-color-brand-fill-loud);
}

@media (width <= 1050px) {
    .r-insights-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r-recommendations-panel {
        grid-column: 1 / -1;
    }
}

@media (width <= 640px) {
    .r-analytics-head {
        align-items: stretch;
        flex-direction: column;
        gap: var(--wa-space-s);
    }

    .r-range-picker {
        justify-content: center;
    }

    .r-insights-layout,
    .r-recommendation-grid {
    display: grid;
    gap: var(--wa-space-s);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block: var(--wa-space-l);
}

    .r-recommendations-panel {
        grid-column: auto;
    }

    .r-recommendation-card {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    
}

.r-analytics-content .r-panel-header h2,
.r-analytics-content .r-post-table-panel h2 {
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-m);
    margin: 0;
}

.r-analytics-content .r-meta,
.r-analytics-content .r-hint {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    line-height: var(--wa-line-height-normal);
}

.r-table-channel {
    align-items: center;
    display: flex;
    gap: 8px;
    white-space: nowrap;
}

.r-table-channel-logo {
    height: 18px;
    width: 18px;
}

.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;
}

@media (width <= 880px) {
    .r-ads-setup-state {
        margin-top: 24px;
        min-height: 0;
        padding: 32px 22px;
    }
}

.r-community-content {
    display: flex;
    flex-direction: column;
    margin-right: 0;
    max-width: none;
    min-height: 100dvh;
}

.r-community-content > .r-inbox-progress {
    margin: -14px 0 16px;
    width: 100%;
}

.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-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 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-title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.r-selected-post-content h2 {
    line-height: 1.3;
    max-height: 2.6em;
    min-width: 0;
    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-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,
.r-community-content .r-post-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-post-empty wa-icon {
    height: 72px;
    width: 72px;
}

.r-community-content .r-post-empty h3 {
    color: #10233d;
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.35;
    max-width: 16rem;
}

.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-composer-tool {
    flex: 0 0 auto;
    width: 34px;
}

.r-composer-tool::part(button) {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    color: #456276;
    font-size: 1rem;
}

.r-composer-tool:hover::part(button),
.r-composer-tool:focus-visible::part(button) {
    background: #e5f2f4;
    color: #078ca4;
    outline: none;
}

.r-composer-tool:disabled::part(button) {
    opacity: 0.4;
}

.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-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-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 {
    width: 100%;
}

.r-emoji-option::part(button) {
    min-height: 32px;
    padding: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
}

.r-emoji-option:hover::part(button),
.r-emoji-option:focus-visible::part(button) {
    background: #eaf5f7;
    outline: none;
}

.r-message-attachment {
    border-radius: 10px;
    display: block;
    max-height: 280px;
    max-width: min(280px, 100%);
    object-fit: cover;
}

@media (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,
.r-community-content .r-grid-comments {
    flex: 1 1 auto;
    height: auto;
    min-height: 440px;
}

@media (width >= 881px) {
    html:has(.r-messages-content),
html:has(.r-community-content .r-grid-comments),
body:has(.r-messages-content),
body:has(.r-community-content .r-grid-comments),
.r-app:has(.r-messages-content),
.r-app:has(.r-community-content .r-grid-comments) {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .r-messages-content,
.r-community-content:has(.r-grid-comments) {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .r-community-content .r-grid-messages,
.r-community-content .r-grid-comments {
        min-height: 0;
    }
}

.r-community-content .r-grid-messages > .r-panel,
.r-community-content .r-grid-comments > .r-panel {
    overflow: hidden;
}

@media (width <= 880px) {
    .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-inbox-toolbar {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }

    .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 (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-post-table-panel {
    margin-top: 12px;
}

.r-analytics-content .r-post-table-panel {
    overflow: hidden;
}

.r-kpi::part(body) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--wa-space-s);
}

.r-range-picker a:hover {
    background: var(--wa-color-neutral-fill-quiet);
}

.r-range-picker a.r-is-active {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.r-analytics-content .r-table {
    min-width: 70rem;
}

.r-analytics-content .r-overflow-x-auto {
    max-block-size: 65dvh;
}

.r-kpi-value > span:first-child {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.r-analytics-content wa-badge[variant="success"]::part(badge) {
    background: var(--wa-color-success-fill-quiet);
    color: var(--wa-color-success-on-quiet);
}

.r-analytics-content .r-table :is(th, td):nth-last-child(-n + 4) {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.r-analytics-content .r-post-caption {
    font-size: var(--wa-font-size-s);
    line-height: 1.5;
    max-height: 3em;
    min-width: 26ch;
    max-width: 48ch;
    white-space: normal;
}

.r-analytics-content .r-table small {
    margin-top: var(--wa-space-2xs);
    color: var(--wa-color-text-quiet);
}

.r-analytics-content .r-post-published {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
}

@container analytics (width <= 65rem) {
    .r-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .r-recommendations-panel {
        grid-column: 1 / -1;
    }
}

@container analytics (width <= 38rem) {
    .r-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r-kpi {
        --spacing: var(--wa-space-m);
    }

    .r-kpi-grid .r-kpi:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .r-insights-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.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 {
    margin-inline: 4px;
}

.r-analytics-content .r-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--wa-color-surface-raised);
    color: var(--wa-color-text-quiet);
    font-weight: var(--wa-font-weight-semibold);
    font-size: var(--wa-font-size-xs);
}

.r-analytics-content .r-table th,
.r-analytics-content .r-table td {
    border-bottom-color: var(--wa-color-surface-border);
    padding: var(--wa-space-m);
}

.r-analytics-content .r-table tbody tr:hover {
    background: var(--wa-color-neutral-fill-quiet);
}

@media (width <= 1100px) {
    .r-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (width <= 680px) {
    

    

    .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 (width <= 350px) {
    .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-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);
}

.r-ads-content {
    max-width: none;
    margin-right: 0;
}

.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-launch-content {
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
}

.r-ads-launch-header-copy {
    max-width: 68ch;
}

.r-ads-launch-form {
    padding-block-end: var(--wa-space-l);
}

.r-ads-launch-steps {
    margin-block-end: var(--wa-space-l);
    padding-block: var(--wa-space-xs);
}

.r-ads-launch-steps wa-button::part(button) {
    font-weight: var(--wa-font-weight-semibold);
}

.r-ads-launch-steps wa-button[appearance="plain"]::part(button) {
    color: var(--wa-color-text-quiet);
}

.r-ads-launch-steps wa-button[appearance="plain"]::part(button):hover {
    color: var(--wa-color-text-normal);
}

.r-ads-launch-section-heading {
    align-items: flex-start;
}

.r-ads-launch-section-heading > wa-badge {
    flex: none;
    margin-block-start: var(--wa-space-2xs);
}

.r-ads-launch-workspace {
    --content-percentage: 60%;
    --flank-size: calc(var(--wa-space-5xl) * 5);
}

.r-ads-launch-editor {
    --spacing: var(--wa-space-xl);
    min-inline-size: var(--content-percentage);
}

.r-ads-launch-editor::part(body) {
    padding: var(--wa-space-xl);
}

.r-ads-launch-summary > wa-card::part(body) {
    padding: var(--wa-space-xl);
}


.r-ads-launch-summary {
    min-inline-size: 0;
    position: sticky;
    top: var(--wa-space-m);
}

.r-ads-launch-summary > wa-card {
    --spacing: var(--wa-space-l);
    inline-size: 100%;
}

.r-ads-launch-section-heading h2,
.r-ads-launch-section-heading p,
.r-ads-launch-summary h2,
.r-ads-launch-summary p {
    margin: 0;
}

.r-ads-launch-section-heading h2 {
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-l);
}

.r-ads-launch-section-heading p,
.r-ads-launch-upload small {
    color: var(--wa-color-text-quiet);
}

.r-ads-launch-summary h2 {
    font-size: var(--wa-font-size-l);
}

.r-ads-launch-upload-icon {
    background-color: var(--wa-color-surface-default);
    block-size: var(--wa-space-2xl);
    border-radius: var(--wa-border-radius-circle);
    color: var(--wa-color-text-normal);
    flex: none;
    inline-size: var(--wa-space-2xl);
}

.r-ads-launch-grid {
    --min-column-size: calc(var(--wa-space-5xl) * 5);
}

.r-ads-launch-copy-grid {
    --min-column-size: calc(var(--wa-space-5xl) * 3);
}

.r-ads-launch-upload {
    background-color: var(--wa-color-surface-lowered);
    border: var(--wa-border-width-s) dashed var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    cursor: pointer;
    padding: var(--wa-space-l);
    transition: background-color var(--wa-transition-normal), border-color var(--wa-transition-normal);
}

.r-ads-launch-upload:hover,
.r-ads-launch-upload:focus-within {
    background-color: var(--wa-color-surface-default);
    border-color: var(--wa-color-brand-border-normal);
}

.r-ads-launch-upload-title {
    color: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-semibold);
}

.r-ads-launch-file {
    color: var(--wa-color-text-quiet);
    cursor: pointer;
    inline-size: 100%;
}

.r-ads-launch-file::file-selector-button {
    background-color: var(--wa-color-surface-default);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    color: var(--wa-color-text-normal);
    cursor: pointer;
    font: inherit;
    font-weight: var(--wa-font-weight-semibold);
    margin-inline-end: var(--wa-space-s);
    padding: var(--wa-space-xs) var(--wa-space-m);
}

.r-ads-launch-summary-spend {
    font-size: var(--wa-font-size-xl);
}

.r-ads-launch-summary-list {
    margin: 0;
}

[data-campaign-summary] .r-ads-launch-summary-list dt,
[data-google-campaign-summary] .r-ads-launch-summary-list dt {
    color: var(--wa-color-neutral-on-loud);
    font-size: var(--wa-font-size-s);
    opacity: 0.72;
}

.r-ads-launch-summary-list dd {
    font-weight: var(--wa-font-weight-semibold);
    margin: 0;
    overflow-wrap: anywhere;
}

[data-campaign-summary] wa-callout[variant="warning"][appearance="outlined"]::part(message) {
    color: var(--wa-color-neutral-on-loud);
}

[data-campaign-summary] wa-callout[variant="warning"][appearance="outlined"] wa-checkbox::part(label) {
    color: var(--wa-color-neutral-on-loud);
}

.r-ads-launch-summary-note > wa-icon {
    color: var(--wa-color-brand-fill-loud);
    font-size: var(--wa-font-size-l);
}

.r-campaign-review-intro {
    color: var(--wa-color-text-quiet);
    margin: 0;
}

.r-campaign-review-dialog {
    --width: 46rem;
}

.r-campaign-review-summary {
    margin: 0;
}

.r-campaign-review-summary > div {
    border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    display: grid;
    gap: var(--wa-space-2xs) var(--wa-space-m);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    padding-block: var(--wa-space-s);
}

.r-campaign-review-summary > div:first-child {
    padding-block-start: 0;
}

.r-campaign-review-summary > div:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.r-campaign-review-summary dt {
    color: var(--wa-color-text-quiet);
    font-weight: var(--wa-font-weight-semibold);
}

.r-campaign-review-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.r-campaign-review-copy {
    white-space: pre-wrap;
}

@media (width <= 640px) {
    .r-campaign-review-summary > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

.r-ads-content > .r-ads-campaigns {
    margin-top: 0;
}

.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 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 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.r-ads-heading-tools {
    display: grid;
    justify-items: end;
    gap: 8px;
    padding-top: 10px;
}

.r-ads-live-status {
    display: flex;
    align-items: center;
    min-height: 20px;
    gap: 7px;
    color: #718092;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.r-ads-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #2b9b69;
    box-shadow: 0 0 0 3px rgb(43 155 105 / 12%);
    animation: r-ads-live-pulse 2.4s ease-in-out infinite;
}

.r-ads-live-updating { display: none; color: #078ca4; font-weight: 700; }
.r-ads-live-updating.htmx-request { display: inline; }

@keyframes r-ads-live-pulse {
    50% { opacity: .45; }
}

.r-ads-action-button::part(base) {
    min-height: 40px;
    border-color: #c7d4dc;
    border-radius: 10px;
    color: #243750;
    font-size: 13px;
    font-weight: 680;
}

.r-ads-action-button::part(base):hover {
    border-color: #96b8c2;
    background: #f7fafb;
    color: #10233d;
}

@media (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;
    text-decoration: none;
}

.r-ads-button::part(button) { padding: 0 16px; }
.r-ads-button:hover::part(button) { background: #067a8e; box-shadow: 0 8px 18px rgb(7 140 164 / 16%); transform: translateY(-1px); }
.r-ads-button.r-is-secondary::part(button) { background: #eaf5f7; color: #0b6f82; }
.r-ads-button.r-is-secondary:hover::part(button) { 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-snapchat { background: #fffc00; color: #111; }
.r-ads-provider-mark.r-is-small { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
.r-ads-provider-mark img {
    block-size: 70%;
    inline-size: 70%;
    object-fit: contain;
}
.r-ads-provider-mark.r-is-campaign {
    block-size: var(--wa-space-3xl);
    border-radius: var(--wa-border-radius-l);
    inline-size: var(--wa-space-3xl);
}
.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-campaigns { margin-top: 32px; }
.r-ads-report-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 20px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #dbe5e9;
    border-radius: 14px;
    background: #f8fbfc;
}
.r-ads-filters {
    --min-column-size: 24ch;
    margin: 0;
}
.r-ads-range-group {
    display: grid;
    gap: 7px;
    justify-items: end;
}
.r-ads-range-group > span {
    color: #526477;
    font-size: 12px;
    font-weight: 680;
}
.r-ads-performance {
    margin-bottom: var(--wa-space-l);
}
.r-ads-performance-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    padding: var(--wa-space-xl);
    border: 1px dashed #cddcdf;
    border-radius: 16px;
    background: #fff;
    color: #718092;
    text-align: center;
}
.r-ads-performance-empty strong {
    display: block;
    margin-bottom: var(--wa-space-xs);
    color: #243750;
}
.r-ads-performance-heading {
    margin-bottom: var(--wa-space-m);
}
.r-ads-performance-heading h3,
.r-ads-performance-group h4,
.r-ads-performance-metrics {
    margin: 0;
}
.r-ads-performance-heading h3 {
    color: #10233d;
    font-size: 18px;
    letter-spacing: -.02em;
}
.r-ads-performance-heading p,
.r-ads-performance-group-heading p,
.r-ads-performance-note {
    color: #718092;
    font-size: 13px;
    line-height: 1.5;
}
.r-ads-performance-heading p,
.r-ads-performance-group-heading p {
    margin: 5px 0 0;
}
.r-ads-performance-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wa-space-m);
}
.r-ads-performance-group {
    padding: var(--wa-space-l);
}
.r-ads-performance-group-heading {
    display: flex;
    align-items: flex-start;
    gap: var(--wa-space-s);
    padding-bottom: var(--wa-space-m);
    border-bottom: 1px solid #e4ecef;
}
.r-ads-performance-step {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: #eaf5f7;
    color: #0b6f82;
    font-size: 12px;
    font-weight: 800;
}
.r-ads-performance-group h4 {
    color: #10233d;
    font-size: 16px;
}
.r-ads-performance-group h4 span {
    display: inline-flex;
    margin-left: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f0f4f6;
    color: #637486;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
    vertical-align: middle;
}
.r-ads-performance-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wa-space-s);
    padding-top: var(--wa-space-m);
}
.r-ads-performance-metrics > div {
    min-width: 0;
}
.r-ads-performance-metrics dt {
    color: #637486;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.r-ads-performance-metrics dd {
    margin: 6px 0 3px;
    color: #10233d;
    font-size: 20px;
    font-weight: 760;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.r-ads-performance-metrics small {
    display: block;
    color: #84919f;
    font-size: 11px;
    line-height: 1.4;
}
.r-ads-performance-note {
    margin: var(--wa-space-s) 0 0;
}
.r-ads-policy-filter {
    margin-block-end: var(--wa-space-l);
    max-width: 40ch;
}
.r-ads-campaigns-heading { display: flex; align-items: start; justify-content: space-between; gap: 32px; margin-bottom: 22px; }
.r-ads-campaigns-heading .r-ads-header-actions { flex-wrap: wrap; justify-content: flex-end; }
.r-ads-campaigns h2 { font-size: clamp(27px, 2.2vw, 32px); line-height: 1.1; }
.r-ads-overview-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #d6e1e6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(16 35 61 / 4%);
}
.r-ads-overview-metrics > div {
    display: grid;
    align-content: center;
    min-height: 94px;
    padding: 16px 20px;
    border-right: 1px solid #e3eaee;
}
.r-ads-overview-metrics > div:last-child { border-right: 0; }
.r-ads-overview-metrics span {
    color: #637486;
    font-size: 11px;
    font-weight: 720;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.r-ads-overview-metrics strong {
    margin-top: 5px;
    color: #10233d;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
}
.r-ads-overview-metrics small {
    margin-top: 3px;
    color: #84919f;
    font-size: 11px;
}
.r-ads-pacing-overview {
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #cfe0e4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgb(16 35 61 / 5%);
}

.r-ads-pacing-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-ads-pacing-metrics > div {
    display: grid;
    align-content: center;
    min-height: 108px;
    padding: 17px 20px;
    border-right: 1px solid #e3eaee;
}
.r-ads-pacing-metrics > div:last-child { border-right: 0; }
.r-ads-pacing-metrics span {
    color: #526477;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.r-ads-pacing-metrics strong {
    margin-top: 6px;
    color: #10233d;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.r-ads-pacing-metrics small { margin-top: 4px; color: #84919f; font-size: 10px; line-height: 1.4; }
.r-ads-pacing-value.r-is-over { color: #b34b37; }
.r-ads-pacing-value.r-is-under { color: #24754f; }
.r-ads-pacing-value.r-is-on-track { color: #0b6f82; }
.r-ads-range { justify-self: end; padding: 4px; border: 1px solid #dbe5e9; border-radius: 12px; background: #fff; }
.r-ads-range a { min-width: 58px; padding: 8px 12px; border-radius: 8px; color: #718092; font-size: 13px; font-weight: 720; text-align: center; text-decoration: none; }
.r-ads-range a:hover { background: #f3f7f8; color: #243750; }
.r-ads-range a:focus-visible,
.r-ads-button:focus-visible::part(button),
.r-ads-row-action:focus-visible::part(button),
.r-ads-budget-input:focus-visible,
.r-ads-budget-suggestion summary:focus-visible,
.r-ads-budget-control summary:focus-visible {
    outline: 3px solid rgb(7 140 164 / 22%);
    outline-offset: 2px;
}
.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 #cfdee3; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgb(16 35 61 / 6%); }
.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-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid #e1e9ed;
    background: #fff;
}

.r-ads-table-context strong { color: #10233d; font-size: 14px; }

.r-ads-table-tools { display: flex; align-items: center; gap: 10px; }
.r-ads-table-tools > span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef6f7;
    color: #0b6f82;
    font-size: 11px;
    font-weight: 720;
    white-space: nowrap;
}
.r-ads-columns { position: relative; padding: 0; border: 0; }
.r-ads-columns summary {
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid #cddcdf;
    border-radius: 8px;
    background: #fff;
    color: #526477;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}
.r-ads-columns summary::marker { content: ""; }
.r-ads-columns summary:hover { border-color: #9eb7bf; background: #f8fbfc; }
.r-ads-columns summary:focus-visible {
    outline: 3px solid rgb(7 140 164 / 22%);
    outline-offset: 2px;
}
.r-ads-columns form {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: 330px;
    max-width: calc(100vw - 48px);
    gap: 14px;
    padding: 16px;
    border: 1px solid #d6e1e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 38px rgb(16 35 61 / 14%);
}
.r-ads-column-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-height: 320px;
    overflow: auto;
}
.r-ads-column-options label { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; color: #526477; font-size: 12px; }
.r-ads-column-options input {
    all: revert;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #078ca4;
}
.r-ads-column-options input::after { content: none; }
.r-ads-metric-help::part(base) { min-height: 24px; padding: 0 4px; }
.r-ads-cost-value { justify-content: flex-end; flex-wrap: nowrap; }
.r-ads-columns .r-ads-button { justify-self: end; }
.r-ads-provider-campaign-scroll {
    max-block-size: min(65dvh, calc(var(--wa-space-4xl) * 8));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.r-ads-table {
    --r-ads-table-header-height: var(--wa-space-3xl);

    width: 100%;
    margin: 0;
    border: 0;
    table-layout: fixed;
}
.r-ads-table col.r-ads-provider-column { inline-size: calc(var(--wa-space-4xl) + var(--wa-space-l)); }
.r-ads-table col.r-ads-campaign-column { inline-size: calc(var(--wa-space-4xl) * 5); }
.r-ads-table col.r-ads-status-column { inline-size: calc(var(--wa-space-4xl) * 2 + var(--wa-space-l)); }
.r-ads-table col.r-ads-metric-column { inline-size: calc(var(--wa-space-4xl) * 2); }
.r-ads-table col.r-ads-results-column { inline-size: calc(var(--wa-space-4xl) * 3); }
.r-ads-table col.r-ads-pacing-column { inline-size: calc(var(--wa-space-4xl) * 5); }
.r-ads-table col.r-ads-budget-column { inline-size: calc(var(--wa-space-4xl) * 3); }
.r-ads-table th,
.r-ads-table td { padding: 14px 12px; }
.r-ads-table th { position: sticky; z-index: 5; top: 0; height: var(--r-ads-table-header-height); padding-block: 0; background: #f5f8fa; color: #637486; font-size: 10px; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; vertical-align: middle; }
.r-ads-table th.r-is-sorted { background: #eaf5f7; color: #0b6f82; }
.r-ads-sort-form { margin: 0; }
.r-ads-sort-form wa-button::part(button) {
    display: flex;
    align-items: center;
    justify-content: inherit;
    width: 100%;
    min-height: 48px;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
}
.r-ads-sort-form wa-button:hover::part(button) { color: #078ca4; }
.r-ads-provider-column .r-ads-sort-form wa-button::part(button) { justify-content: center; }
.r-ads-metric-column .r-ads-sort-form wa-button::part(button) { justify-content: flex-end; }
.r-ads-sort-form wa-button:focus-visible::part(button) {
    border-radius: 4px;
    outline: 3px solid rgb(7 140 164 / 22%);
    outline-offset: 2px;
}
.r-ads-sort-form small { display: inline; color: currentColor; font-size: 9px; }
.r-ads-table td { height: 90px; color: #243750; font-size: 12px; vertical-align: middle; }
.r-ads-table tbody tr { background: #fff; transition: background 160ms ease, box-shadow 160ms ease; }
.r-ads-table tbody tr:hover { background: #f8fbfc; }
.r-ads-table tbody tr.r-is-meta > td:first-child { box-shadow: inset 3px 0 #8ab3ff; }
.r-ads-table tbody tr.r-is-google > td:first-child { box-shadow: inset 3px 0 #f2a879; }
.r-ads-table tbody tr.r-is-tiktok > td:first-child { box-shadow: inset 3px 0 #75c6bc; }
.r-ads-table tbody tr.r-is-snapchat > td:first-child { box-shadow: inset 3px 0 #e9e000; }
.r-ads-provider-section-heading {
    padding: 10px 14px;
    border-top: 1px solid #d6e1e6;
    background: #eef4f6;
}
.r-ads-provider-section:first-child .r-ads-provider-section-heading { border-top: 0; }
.r-ads-provider-section.r-is-unconnected .r-ads-provider-section-heading { background: #f8fafb; }
.r-ads-provider-section.r-is-unconnected .r-ads-provider-mark { filter: grayscale(1); opacity: .7; }
.r-ads-provider-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.r-ads-provider-group-main { display: flex; align-items: center; gap: 10px; }
.r-ads-provider-group-copy { display: grid; gap: 2px; }
.r-ads-provider-group-copy strong { color: #10233d; font-size: 13px; }
.r-ads-provider-group-copy small { color: #718092; font-size: 11px; }
.r-ads-provider-suggestion { color: #0b6f82; font-weight: 700; }
.r-ads-table td .r-ads-provider-connect {
    display: inline-flex;
    min-height: 30px;
    padding: 6px 10px;
    color: #0b6f82;
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
}
.r-ads-table td .r-ads-provider-connect:hover { color: #056f81; text-decoration: none; }
.r-ads-table td a,
.r-ads-campaign-name { display: block; color: #078ca4; font-size: 14px; font-weight: 760; line-height: 1.35; text-decoration: none; }
.r-ads-table td a:hover { color: #056f81; text-decoration: underline; text-underline-offset: 3px; }
.r-ads-table small { display: block; color: #718092; line-height: 1.4; }
.r-ads-provider-column,
.r-ads-provider-cell { width: 76px; text-align: center; }
.r-ads-provider-cell .r-ads-provider-mark { margin-inline: auto; }
.r-ads-table .r-ads-provider-label {
    margin-top: 6px;
    color: #637486;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.2;
    text-transform: uppercase;
}
.r-ads-campaign-column { min-width: 190px; }
.r-ads-status-column { min-width: 130px; }
.r-ads-results-column { min-width: 125px; }
.r-ads-account-line { margin-top: 4px; }
.r-ads-objective { margin-top: 6px; color: #718092; font-size: 11px; letter-spacing: .025em; text-transform: uppercase; }
.r-ads-metric-column,
.r-ads-metric-cell { text-align: right; }
.r-ads-metric-cell { color: #10233d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-ads-spend-cell { font-weight: 600; }
.r-ads-change { font-weight: 700; }
.r-ads-change.r-is-higher { color: #b34b37; }
.r-ads-change.r-is-lower { color: #24754f; }
.r-ads-change.r-is-steady { color: #718092; }
.r-ads-pacing-column { min-width: 270px; }
.r-ads-pacing-cell { min-width: 270px; padding-block: 10px; }
.r-ads-pacing-detail { display: grid; gap: 8px; }
.r-ads-pacing-primary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.r-ads-pacing-primary span { color: #718092; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.r-ads-pacing-primary strong { color: #10233d; font-size: 14px; font-variant-numeric: tabular-nums; }
.r-ads-pacing-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; color: #718092; font-size: 10px; }
.r-ads-pacing-facts > span:last-child { grid-column: 1 / -1; }
.r-ads-pacing-facts strong { color: #526477; font-variant-numeric: tabular-nums; }
.r-ads-pacing-facts .r-ads-pacing-value { font-weight: 720; text-align: right; text-transform: none; }
.r-ads-pacing-unavailable { color: #84919f; font-size: 11px; }
.r-ads-budget-suggestion summary,
.r-ads-budget-control summary {
    width: fit-content;
    padding: 5px 8px;
    border: 1px solid #c6dce1;
    border-radius: 7px;
    background: #f6fafb;
    color: #0b6f82;
    cursor: pointer;
    font-size: 10px;
    font-weight: 720;
    list-style: none;
}
.r-ads-budget-suggestion summary::marker,
.r-ads-budget-control summary::marker { content: ""; }
.r-ads-budget-suggestion summary:hover,
.r-ads-budget-control summary:hover { border-color: #8fc8d1; background: #eaf5f7; }
.r-ads-budget-suggestion form,
.r-ads-budget-control form {
    display: grid;
    width: 238px;
    gap: 10px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #d6e1e6;
    border-radius: 10px;
    background: #fbfdfe;
    box-shadow: 0 8px 20px rgb(16 35 61 / 7%);
}
.r-ads-budget-suggestion p { margin: 0; color: #526477; font-size: 11px; line-height: 1.45; }
.r-ads-budget-approval { display: flex; align-items: flex-start; gap: 8px; color: #526477; font-size: 10px; line-height: 1.4; }
.r-ads-budget-approval input { flex: none; margin-top: 1px; accent-color: #078ca4; }
.r-ads-result { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.r-ads-status-controls { display: flex; align-items: center; gap: 10px; }
.r-ads-status-form { display: inline; margin: 0; }
.r-ads-row-action::part(button) { min-height: 32px; padding: 0 11px; border-radius: 8px; font-size: 12px; }
.r-ads-row-action.r-is-activate::part(button) { font-weight: 720; }
.r-ads-budget-cell { min-width: 170px; }
.r-ads-budget-control { display: grid; gap: 7px; }
.r-ads-budget-control > strong { color: #10233d; font-size: 13px; font-variant-numeric: tabular-nums; }
.r-ads-budget-input { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid #cddcdf; border-radius: 8px; background: #fff; color: #243750; font-size: 13px; font-variant-numeric: tabular-nums; }
.r-ads-budget-input:hover { border-color: #9eb7bf; }
.r-ads-budget-input:focus { border-color: #078ca4; }

.r-ads-navigation-indicator {
    background: var(--wa-color-surface-raised);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    box-shadow: var(--wa-shadow-l);
    color: var(--wa-color-text-normal);
    inset-block-end: var(--wa-space-l);
    inset-inline-end: var(--wa-space-l);
    padding: var(--wa-space-m) var(--wa-space-l);
    pointer-events: none;
    position: fixed;
    z-index: 1000;
}

.r-ads-navigation-indicator wa-spinner {
    font-size: var(--wa-font-size-l);
}

.r-ads-campaign-title {
    --flank-size: var(--wa-space-3xl);
    min-inline-size: 0;
}

.r-ads-campaign-title > div,
.r-ads-media-card,
.r-ads-media-card > div {
    min-inline-size: 0;
}

.r-ads-campaign-tabs {
    margin-block-start: var(--wa-space-xl);
}

.r-ads-campaign-tabs > wa-tab-panel {
    --padding: var(--wa-space-l) 0 0;
}

.r-ads-metric-grid {
    --min-column-size: 18ch;
}

.r-ads-metric-card strong {
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-xl);
}

.r-ads-settings-grid,
.r-ads-upload-grid {
    --min-column-size: 28ch;
}

.r-ads-ad-set-facts {
    --min-column-size: 22ch;
}

.r-ads-ad-set-facts small {
    color: var(--wa-color-text-quiet);
}

.r-ads-media-grid {
    --min-column-size: 32ch;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min-column-size)), 1fr));
}

.r-google-media-name {
    overflow-wrap: anywhere;
    min-block-size: 2lh;
}

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

.r-ads-identifier {
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-m);
    min-inline-size: 0;
    padding: var(--wa-space-xs) var(--wa-space-s);
}

.r-ads-identifier code {
    color: var(--wa-color-text-quiet);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-ads-google-campaign h2,
.r-ads-google-campaign h3,
.r-ads-meta-campaign h2,
.r-ads-meta-campaign h3,
.r-ads-snapchat-campaign h2,
.r-ads-snapchat-campaign h3 {
    margin-block: 0;
}

.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 (width <= 1100px) {
    
    .r-ads-performance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-ads-campaigns-heading { align-items: flex-start; flex-direction: column; }
    .r-ads-heading-tools { width: 100%; justify-items: start; padding-top: 0; }
    .r-ads-campaigns-heading .r-ads-header-actions { justify-content: flex-start; }
    .r-ads-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-ads-overview-metrics > div:nth-child(2) { border-right: 0; }
    .r-ads-overview-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid #e3eaee; }
    .r-ads-pacing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r-ads-pacing-metrics > div:nth-child(2) { border-right: 0; }
    .r-ads-pacing-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid #e3eaee; }
    .r-ads-report-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .r-ads-range-group { justify-items: start; }
    .r-ads-range { justify-self: start; }
}

@media (width <= 640px) {
    .r-ads-header,
.r-ads-campaigns-heading { align-items: flex-start; flex-direction: column; }
    .r-ads-header-actions { flex-wrap: wrap; justify-content: flex-start; }
    .r-ads-campaigns-heading { gap: 22px; margin-bottom: 22px; }
    .r-ads-heading-tools { gap: 14px; }
    .r-ads-overview-metrics { grid-template-columns: 1fr; }
    .r-ads-overview-metrics > div,
.r-ads-overview-metrics > div:nth-child(2) { border-right: 0; border-bottom: 1px solid #e3eaee; }
    .r-ads-overview-metrics > div:last-child { border-bottom: 0; }
    
    .r-ads-pacing-metrics { grid-template-columns: 1fr; }
    .r-ads-pacing-metrics > div,
.r-ads-pacing-metrics > div:nth-child(2) { border-right: 0; border-bottom: 1px solid #e3eaee; }
    .r-ads-pacing-metrics > div:last-child { border-bottom: 0; }
    .r-ads-table-context { align-items: flex-start; flex-direction: column; }
    .r-ads-report-toolbar { margin-bottom: 16px; padding: 14px; }
    .r-ads-range-group { justify-items: stretch; }
    .r-ads-range { width: 100%; justify-self: stretch; overflow-x: auto; }
    .r-ads-range a { flex: 1; }
    
    
    
    
    .r-ads-performance-groups { grid-template-columns: 1fr; }
    .r-ads-performance-group { padding: var(--wa-space-m); }
}

@media (width <= 760px) {
    .r-profile-page {
        padding: 70px var(--r-content-pad) var(--r-content-pad);
    }

    .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-api-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-owner,
.r-api-token-value,
.r-api-token-actions {
        grid-column: 1 / -1;
    }

    .r-api-token-owner,
.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-owner::before,
.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-owner::before {
        content: "Owner";
    }

    .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 var(--r-content-pad) 152px;
}

.r-nav-open .r-new-container {
    inset-inline-start: var(--sidebar-w);
}

.r-publish-header {
    margin-inline: auto;
    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: var(--wa-font-size-2xl);
    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-fill, minmax(220px, 1fr));
    width: 100%;
}

.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 var(--r-content-pad);
    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: none;
    margin-inline: 0;
}

.r-composer-header {
    margin: 16px 0 24px;
}

.r-composer-header h1 {
    color: #10233d;
    font-size: var(--wa-font-size-2xl);
    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;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.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-media-preview {
    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);
    display: grid;
    max-height: 420px;
    overflow: hidden;
    place-items: center;
}

.r-media-preview:has(.r-media-preview-content:nth-of-type(n + 2)) {
    gap: var(--wa-space-s);
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    overflow: auto;
    padding: var(--wa-space-s);
    place-items: stretch;
}

.r-media-preview:has(.r-media-preview-content:nth-of-type(n + 2)) .r-media-preview-content {
    height: 112px;
    max-height: 112px;
    object-fit: cover;
    width: 100%;
}

.r-media-preview-content {
    display: block;
    max-height: 420px;
    max-width: 100%;
    object-fit: contain;
}

.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-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 (width <= 760px) {
    .r-new-container,
.r-nav-open .r-new-container {
        gap: 24px;
        inset: 0;
        padding: 68px var(--r-content-pad) 112px;
    }

    .r-new-container .r-publish-title {
        font-size: var(--wa-font-size-2xl);
        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 var(--r-content-pad) 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 (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: var(--wa-font-size-2xl);
    }

    .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-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-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 (width <= 680px) {
    .r-shortcuts-grid {
        grid-template-areas:
            "actions"
            "navigation"
            "create"
            "calendar";
        grid-template-columns: 1fr;
    }
}

.r-company-delete-warning {
    margin-bottom: 18px;
}

.r-company-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.r-company-create-panel {
    max-inline-size: calc(var(--wa-space-5xl) * 8);
}

.r-company-panel + .r-company-panel {
    border-top: 1px solid #dbe5e9;
    margin-top: 18px;
    padding-top: 18px;
}

.r-company-panel-header {
    align-items: center;
    border-bottom: 1px solid #dbe5e9;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 12px 0;
}

.r-company-member-actions form,
.r-company-invite-row form {
    margin: 0;
}

.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: 12px;
    grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.6fr) auto;
    min-height: 52px;
    padding: 8px 2px;
}

.r-company-member-row:last-child {
    border-bottom: 0;
}

.r-company-member-identity {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
}

.r-company-member-avatar {
    --size: 32px;
}

.r-company-member-identity h3,
.r-company-invite-main h3 {
    color: #10233d;
    font-size: 0.88rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.r-company-member-access,
.r-company-permission-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.r-company-permission-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    min-width: 0;
}

.r-company-member-actions {
    justify-self: end;
}

.r-company-permission-help {
    margin: 4px 0 10px;
}

.r-company-permission-help-list {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.r-company-permission-help-item strong {
    color: #10233d;
    font-size: 0.84rem;
}

.r-company-permission-help-item p,
.r-company-permission-help > p {
    color: #718092;
    font-size: 0.8rem;
    margin: 2px 0 0;
}

.r-company-access-empty {
    color: #718092;
    font-size: 0.8rem;
}

.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-copy {
    color: #637486;
    line-height: 1.55;
    margin: 0;
}

@media (width <= 980px) {
    .r-company-member-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .r-workspace-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .r-company-member-access,
    .r-company-permission-form,
    .r-workspace-actions {
        grid-column: 1 / -1;
    }

    .r-workspace-actions {
        justify-self: start;
    }
}

@media (width <= 700px) {
    .r-company-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .r-company-panel-header wa-button {
        width: 100%;
    }

    .r-company-member-row {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .r-company-member-identity {
        grid-column: 1 / -1;
    }

    .r-company-member-actions {
        grid-column: 2;
    }

    .r-company-danger {
        align-items: stretch;
        flex-direction: column;
    }

    .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%;
    }
}
.r-publish-target {
    display: inline-flex;
}
.r-pinterest-board-trigger {
    width: 100%;
}
.r-pinterest-board-trigger::part(button) {
    justify-content: space-between;
    text-align: start;
    min-height: calc(var(--wa-space-3xl) + var(--wa-space-xl));
    border-radius: var(--wa-border-radius-l);
}
.r-pinterest-board-popover {
    --max-width: min(var(--r-pinterest-board-width, calc(var(--wa-space-3xl) * 12)), calc(100vw - var(--wa-space-xl)));
}
.r-pinterest-board-popover::part(body) {
    width: var(--max-width);
    padding: var(--wa-space-s);
}
.r-pinterest-board-results {
    min-height: calc(var(--wa-space-3xl) * 3);
    max-height: calc(var(--wa-space-3xl) * 5);
    overflow-y: auto;
}
.r-pinterest-board-option::part(button),
.r-pinterest-board-create::part(button) {
    justify-content: flex-start;
    text-align: start;
}
.r-pinterest-board-trigger::part(label),
.r-pinterest-board-option::part(label),
.r-pinterest-board-create::part(label) {
    text-align: start;
    flex: 1;
}
.r-pinterest-board-dialog {
    --width: calc(var(--wa-space-3xl) * 13);
    --spacing: var(--wa-space-xl);
}
.r-pinterest-board-dialog::part(dialog) {
    border-radius: calc(var(--wa-border-radius-l) * 2);
}
.r-pinterest-board-dialog::part(title) {
    text-align: center;
    font-size: var(--wa-font-size-2xl);
    font-weight: var(--wa-font-weight-bold);
}

.r-conversation-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.r-conversation-filters > wa-select {
    min-width: 0;
    width: 100%;
}

.r-conversation-back {
    display: none;
}

@media (width <= 880px) {
    .r-conversation-back {
        display: block;
        align-self: start;
    }
}

.r-ads-overview {
    container-type: inline-size;
    max-width: none;
    margin-inline: 0;
    color: var(--wa-color-text-normal);
}

.r-ads-overview .r-ads-campaigns-heading {
    align-items: center;
    gap: var(--wa-space-l);
    margin-bottom: var(--wa-space-l);
}

.r-ads-overview h2 {
    margin: 0 0 var(--wa-space-xs);
    letter-spacing: -0.03em;
}

.r-ads-overview :is(.r-ads-budget-heading, .r-ads-table-tools) h3 {
    margin: 0;
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-m);
}

.r-ads-overview .r-ads-campaigns-heading p {
    margin: 0;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

.r-ads-overview .r-ads-heading-tools {
    gap: var(--wa-space-s);
    padding-top: 0;
}

.r-ads-overview .r-ads-report-toolbar {
  align-items: start;
    gap: var(--wa-space-l);
    padding: var(--wa-space-m);
    margin-bottom: var(--wa-space-l);
    border-color: var(--wa-color-surface-border);
    background: var(--wa-color-surface-default);
    border-radius: var(--wa-border-radius-l);
}

.r-ads-overview .r-ads-filters {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    min-width: 0;
}

.r-ads-overview .r-ads-filters :is(form, wa-select) {
    min-width: 0;
    width: 100%;
}

.r-ads-overview .r-ads-range-group > span {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.r-ads-overview .r-ads-range {
    background: var(--wa-color-surface-lowered);
    border: 0;
}

.r-ads-overview .r-ads-range a.r-is-active {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.r-ads-connection-notices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
    gap: var(--wa-space-xs) var(--wa-space-l);
    margin-bottom: var(--wa-space-l);
}

.r-ads-connection-notices:empty {
    display: none;
}

.r-ads-overview-warning {
    margin: 0;
    border: 0;
    border-radius: 0;
    font-size: var(--wa-font-size-s);
    background: transparent;
    padding: var(--wa-space-xs) 0;
    color: var(--wa-color-text-quiet);
}

.r-ads-overview .r-ads-overview-metrics {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--wa-space-m);
    overflow: visible;
    margin-block: var(--wa-space-l);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.r-ads-kpi {
    --spacing: var(--wa-space-l);
    min-width: 0;
    border-radius: var(--wa-border-radius-l);
    border-color: var(--wa-color-surface-border);
    box-shadow: none;
}

.r-ads-kpi::part(body) {
    display: grid;
    gap: var(--wa-space-xs);
}

.r-ads-overview .r-ads-kpi strong {
    font-size: var(--wa-font-size-2xl);
    margin: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;
    color: var(--wa-color-text-normal);
}

.r-ads-overview .r-ads-kpi span {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-normal);
    text-transform: none;
    letter-spacing: normal;
}

.r-ads-kpi-label wa-icon {
    color: var(--wa-color-brand-on-quiet);
    background: var(--wa-color-brand-fill-quiet);
    border-radius: var(--wa-border-radius-m);
    padding: var(--wa-space-s);
    font-size: var(--wa-font-size-m);
}

.r-ads-overview .r-ads-kpi small {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    margin: 0;
}

.r-ads-overview .r-ads-pacing-overview {
    display: block;
    margin-bottom: var(--wa-space-l);
    border-color: var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    box-shadow: none;
    background: var(--wa-color-surface-default);
}

.r-ads-budget-heading {
    margin: 0;
    gap: var(--wa-space-s);
    flex-wrap: wrap;
}

.r-ads-budget-heading > span {
    font-size: var(--wa-font-size-s);
}

.r-ads-budget-heading > wa-icon {
    color: var(--wa-color-brand-on-quiet);
}

.r-ads-overview .r-ads-pacing-overview::part(header) {
    padding: var(--wa-space-m) var(--wa-space-l);
}

.r-ads-overview .r-ads-pacing-overview::part(content) {
    padding: 0 var(--wa-space-l) var(--wa-space-l);
}

.r-ads-overview .r-ads-pacing-metrics {
    gap: var(--wa-space-m);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.r-ads-overview .r-ads-pacing-metrics > div {
    padding: var(--wa-space-m);
    background: var(--wa-color-surface-lowered);
    border: 0;
    border-radius: var(--wa-border-radius-m);
    min-height: 0;
    align-content: start;
}

.r-ads-overview .r-ads-pacing-metrics span {
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.r-ads-overview .r-ads-pacing-metrics strong {
    font-size: var(--wa-font-size-l);
    overflow-wrap: anywhere;
}

.r-ads-overview .r-ads-pacing-metrics small {
    font-size: var(--wa-font-size-xs);
    color: var(--wa-color-text-quiet);
}

.r-ads-overview .r-ads-campaign-frame {
    border-color: var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    box-shadow: none;
}

.r-ads-overview .r-ads-table-context {
    padding: var(--wa-space-m) var(--wa-space-l);
    overflow: visible;
}

.r-ads-overview .r-ads-table-tools {
    width: 100%;
    gap: var(--wa-space-m);
    flex-wrap: wrap;
}

.r-ads-overview .r-ads-columns {
    margin-inline-start: auto;
}

.r-ads-overview .r-ads-campaign-frame:has(.r-ads-columns[open]) {
    overflow: visible;
}

.r-ads-table-scroll-hint {
    display: none;
    margin: 0;
    padding: var(--wa-space-s) var(--wa-space-m);
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.r-ads-overview .r-ads-columns summary {
    gap: var(--wa-space-s);
}

.r-ads-overview .r-ads-provider-sections {
    display: flex;
    flex-wrap: wrap;
}

.r-ads-overview .r-ads-provider-section {
    min-width: 0;
    flex: 1 1 18rem;
}

.r-ads-overview .r-ads-provider-section:has(table) {
    flex-basis: 100%;
}

.r-ads-overview .r-ads-provider-section:not(:has(table)) .r-ads-provider-section-heading {
    background: var(--wa-color-surface-default);
    height: 100%;
    border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.r-ads-overview .r-ads-account-line {
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-ads-overview .r-ads-provider-section-heading {
    background: var(--wa-color-surface-lowered);
    padding: var(--wa-space-m) var(--wa-space-l);
}

.r-ads-overview .r-ads-table {
    min-width: 76rem;
}

.r-ads-overview .r-ads-table th {
    font-size: var(--wa-font-size-s);
    letter-spacing: normal;
    text-transform: none;
    color: var(--wa-color-text-quiet);
    background: var(--wa-color-surface-default);
}

.r-ads-overview .r-ads-table th.r-is-sorted {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.r-ads-overview .r-ads-sort-form wa-button::part(button) {
    border-radius: 0;
    box-shadow: none;
}

.r-ads-overview .r-ads-table td {
    height: auto;
    padding-block: var(--wa-space-m);
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-normal);
}

.r-ads-overview :is(.r-ads-metric-cell, .r-ads-spend-cell) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: end;
}

.r-ads-overview .r-ads-budget-control details {
    border: 0;
    border-radius: 0;
}

.r-ads-overview .r-ads-campaign-empty {
    padding: var(--wa-space-xl);
    place-content: center;
}

.r-ads-overview .r-ads-campaign-empty > wa-icon {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xl);
    margin-bottom: var(--wa-space-s);
}

.r-ads-report-notes {
    margin-top: var(--wa-space-m);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

@container (width <= 1000px) {
    .r-ads-table-scroll-hint {
        display: block;
    }

    .r-ads-overview .r-ads-pacing-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r-ads-overview .r-ads-report-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-ads-overview .r-ads-range-group {
        justify-items: start;
    }
}

@container (width <= 560px) {
    .r-ads-overview .r-ads-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .r-ads-kpi,
    .r-ads-overview .r-ads-pacing-overview {
        --spacing: var(--wa-space-m);
    }

    .r-ads-overview .r-ads-kpi strong {
        font-size: var(--wa-font-size-xl);
    }

    .r-ads-kpi-label wa-icon {
        padding: 0;
        background: transparent;
    }

    .r-ads-overview .r-ads-table-context {
        padding: var(--wa-space-m);
    }
}.r-campaign-launch-page > :is(wa-card, wa-callout) {
    margin-block-end: var(--wa-space-l);
}

.r-campaign-launch-page .r-ads-header {
    align-items: center;
    gap: var(--wa-space-l);
    margin-block-end: var(--wa-space-xl);
}

.r-campaign-launch-page .r-ads-header h1 {
    font-size: var(--wa-font-size-2xl);
    margin-block: var(--wa-space-s);
}

.r-campaign-launch-page .r-ads-header p {
    font-size: var(--wa-font-size-s);
    margin: 0;
}

.r-campaign-launch-logo {
    inline-size: var(--wa-space-xl, 2rem);
    block-size: var(--wa-space-xl, 2rem);
    object-fit: contain;
}

.r-campaign-launch-setup,
.r-campaign-launch-recovery,
.r-campaign-launch-empty {
    inline-size: 100%;
    min-inline-size: 0;
    --spacing: var(--wa-space-l);
    background: var(--wa-color-surface-default);
    border-radius: var(--wa-border-radius-l);
    box-shadow: none;
}

.r-campaign-launch-setup h2,
.r-campaign-launch-recovery h2,
.r-campaign-launch-empty h2 {
    font-size: var(--wa-font-size-l);
    margin: 0;
}

.r-campaign-launch-setup p,
.r-campaign-launch-recovery p,
.r-campaign-launch-empty p {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    line-height: var(--wa-line-height-normal);
    margin: 0;
}

.r-campaign-launch-state-icon {
    font-size: var(--wa-font-size-xl);
    color: var(--wa-color-text-quiet);
}

.r-campaign-launch-recovery::part(body),
.r-campaign-launch-empty::part(body) {
    padding-block: var(--wa-space-3xl);
    text-align: center;
}

.r-campaign-launch-recovery p,
.r-campaign-launch-empty p {
    max-inline-size: 58ch;
}

.r-campaign-launch-recovery::part(footer) {
    background: var(--wa-color-surface-lowered);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
}

.r-campaign-launch-empty::part(body) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wa-space-m);
}

.r-campaign-launch-page [data-provider-content] > :is(wa-card, wa-callout) {
    margin-block-end: var(--wa-space-l);
}

.r-campaign-launch-updated {
    margin-block: var(--wa-space-s) var(--wa-space-l);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
}@container (width >= 850px) {}

@container (width <= 849px) {}

.r-max-w-4xl { max-inline-size: 56rem; inline-size: 100%; }
.r-min-column-22rem { --min-column-size: 22rem; }
.r-col-span-full { grid-column: 1 / -1; }

.r-w-full {
    width: 100%;
}

:is(.r-ads-meta-campaign, .r-ads-google-campaign) .r-ads-campaign-title {
    flex: 1;
}

:is(.r-ads-meta-campaign, .r-ads-google-campaign) .r-ads-header h1 {
    font-size: var(--wa-font-size-2xl);
}

@container (width <= 850px) {
    .r-ads-overview .r-ads-overview-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

.r-meta-thumbnail {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-m);
}

.r-meta-thumbnail > * {
    grid-area: 1 / 1;
}

.r-meta-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    background: var(--wa-color-surface-lowered);
}

.r-meta-thumbnail:has(img:not([hidden])) .r-meta-media-fallback {
    visibility: hidden;
}

.r-meta-media-fallback {
    padding: var(--wa-space-m);
    color: var(--wa-color-text-quiet);
    text-align: center;
}

.r-meta-ad-row {
    --flank-size: calc(var(--wa-space-5xl) * 2);
}

.r-meta-ad-row h3,
.r-ads-meta-campaign wa-card {
    overflow-wrap: anywhere;
    min-width: 0;
}

.r-meta-secondary-metrics wa-card::part(body) {
    padding: var(--wa-space-m);
}

.r-meta-preview-dialog {
    --width: 90ch;
}

.r-meta-preview-frame {
    width: 100%;
    height: 65vh;
    border: none;
}

.r-meta-full-media {
    display: block;
    max-width: 100%;
    max-height: 65vh;
    margin-inline: auto;
    object-fit: contain;
}

.r-meta-preview-content {
    container-type: inline-size;
}

@container (width < 540px) {
    .r-meta-preview-frame {
        width: 540px;
        height: calc(65vh * (540px / 100cqw));
        zoom: calc(100cqw / 540px);
    }
}

.r-google-group-grid {
    --min-column-size: 40ch;
}

.r-google-group-heading {
    --flank-size: calc(var(--wa-space-3xl) * 2);
}

.r-google-group-thumbnail {
    inline-size: calc(var(--wa-space-3xl) * 2);
}

.r-google-group-name {
    overflow-wrap: anywhere;
}

.r-google-group-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.r-google-group-metrics dt {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

.r-google-group-metrics dd {
    margin: 0;
    font-weight: var(--wa-font-weight-semibold);
}

.r-content.r-dashboard {
    overflow-wrap: anywhere;
}

.r-dashboard-body {
    container-type: inline-size;
    inline-size: 100%;
}

.r-dashboard :is(h1, h2, p) {
    margin: 0;
}

.r-dashboard h1 {
    font-size: var(--wa-font-size-2xl);
    font-weight: var(--wa-font-weight-semibold);
    letter-spacing: -0.025em;
}

.r-dashboard h2 {
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-semibold);
}

.r-dashboard-indicators {
    grid-template-columns: minmax(0, 1fr);
}

@container (width >= 36rem) {
    .r-dashboard-indicators {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (width >= 64rem) {
    .r-dashboard-indicators {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.r-dashboard-indicator {
    color: var(--wa-color-text-normal);
    block-size: 100%;
}

.r-dashboard-indicator a {
    color: inherit;
}

.r-dashboard-indicator wa-button wa-icon {
    font-size: var(--wa-font-size-s);
}

.r-dashboard-coverage::part(button) {
    padding: 0;
}

.r-dashboard-coverage-ring {
    --size: var(--wa-space-3xl);
    --track-width: var(--wa-space-2xs);
    --indicator-color: var(--wa-color-brand-fill-loud);
    --track-color: var(--wa-color-neutral-fill-normal);
    --indicator-transition-duration: 0s;
    font-size: var(--wa-font-size-xs);
    font-variant-numeric: tabular-nums;
}

.r-dashboard-thumbnail {
    --size: var(--wa-space-4xl);
    flex: 0 0 var(--wa-space-4xl);
}

.r-dashboard-activity-text {
    flex: 1;
    min-inline-size: 0;
}

.r-dashboard-value {
    font-size: var(--wa-font-size-2xl);
    line-height: var(--wa-line-height-condensed);
    font-variant-numeric: tabular-nums;
}

.r-dashboard-overview,
.r-dashboard-activity-column {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.r-dashboard-overview > div {
    min-inline-size: 0;
}

.r-dashboard-breakdown {
    margin: 0;
}

.r-dashboard-breakdown svg {
    inline-size: 100%;
    block-size: var(--wa-space-s);
}

.r-dashboard-chart-track {
    fill: var(--wa-color-neutral-fill-normal);
}

.r-dashboard-post-metrics,
.r-dashboard-provider-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.r-dashboard-insight {
    container-type: inline-size;
}

@container (width >= 28rem) {
    .r-dashboard-provider-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.r-dashboard-provider-metrics strong {
    display: block;
    font-variant-numeric: tabular-nums;
    font-size: var(--wa-font-size-l);
}

.r-dashboard-performance-value {
    font-size: var(--wa-font-size-2xl);
    font-variant-numeric: tabular-nums;
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
}

.r-dashboard-performance-chart {
    margin: 0;
}

.r-dashboard-performance-chart svg {
    inline-size: 100%;
    block-size: calc(var(--wa-space-4xl) * 2.5);
}

.r-dashboard-performance-previous {
    fill: var(--wa-color-neutral-fill-loud);
    opacity: 0.35;
}

.r-dashboard-performance-current {
    fill: var(--wa-color-brand-fill-loud);
}

.r-dashboard :is(section, li, li > div) {
    min-inline-size: 0;
}

.r-dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.r-dashboard-list > li + li {
    border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    margin-block-start: var(--wa-space-s);
    padding-block-start: var(--wa-space-s);
}

.r-dashboard-preview {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.r-dashboard-notices {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

.r-dashboard details summary {
    cursor: pointer;
}

.r-dashboard details[open] summary {
    margin-block-end: var(--wa-space-m);
}

.r-dashboard-indicator > div {
    flex-wrap: nowrap;
    align-items: start;
    min-block-size: 2.5em;
    font-size: var(--wa-font-size-s);
}

.r-dashboard-indicator wa-icon {
    font-size: var(--wa-font-size-xl);
    inline-size: 1em;
    block-size: 1em;
    flex-shrink: 0;
}

@container (width >= 52rem) {
    .r-dashboard-overview {
        grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    }

    .r-dashboard-overview:has(> :nth-child(3)) > .r-dashboard-activity-column {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r-dashboard-attention > section {
        display: grid;
        grid-template-columns: 12rem minmax(0, 1fr);
    }

    .r-dashboard-attention .r-dashboard-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
        gap: var(--wa-space-m);
    }

    .r-dashboard-attention .r-dashboard-list > li {
        margin: 0;
        padding: 0 0 0 var(--wa-space-m);
        border-block-start: none;
        border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    }

}

@container (width >= 85rem) {
    .r-dashboard-overview {
        grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    }

    .r-dashboard-overview:has(> :nth-child(3)) > .r-dashboard-activity-column {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .r-dashboard-indicator {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .r-dashboard-indicator > div {
        min-block-size: auto;
    }

    .r-dashboard-indicator > .wa-caption-s {
        grid-column: 1;
        grid-row: 2;
    }

    .r-dashboard-value {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-inline-start: var(--wa-space-m);
    }
}

.r-dashboard-chart {
    margin: 0;
}

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

@container (width >= 38rem) {
    .r-dashboard-days {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

.r-dashboard-day {
    padding: var(--wa-space-xs) var(--wa-space-2xs);
    border-radius: var(--wa-border-radius-s);
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    font-size: var(--wa-font-size-s);
    font-variant-numeric: tabular-nums;
}

.r-dashboard-day[data-count="0"] {
    background: var(--wa-color-surface-lowered);
    color: var(--wa-color-text-quiet);
}

.r-dashboard-chart-plot {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--wa-space-s);
}

.r-dashboard-chart-axis {
    padding-block: var(--wa-space-xs);
}

.r-dashboard-chart svg {
    inline-size: 100%;
    block-size: calc(var(--wa-space-4xl) * 1.75);
    fill: var(--wa-color-brand-fill-loud);
}

.r-dashboard-chart-grid {
    stroke: var(--wa-color-surface-border);
    stroke-width: 1;
    fill: none;
}

.r-feedback-trigger {
    inset-block-end: max(var(--wa-space-l), env(safe-area-inset-bottom));
    inset-inline-end: max(var(--wa-space-l), env(safe-area-inset-right));
    position: fixed;
    z-index: 30;
    white-space: nowrap;
}

.r-app:has(.r-publish-actions) .r-feedback-trigger {
    inset-block-end: calc(var(--wa-space-4xl) + var(--wa-space-xl) + env(safe-area-inset-bottom));
}

.r-feedback-dialog {
    --width: calc(var(--wa-space-4xl) * 8);
}

.r-feedback-intro {
    color: var(--wa-color-text-quiet);
    margin: 0;
}

@media (width <= 880px) {
    .r-nav-open .r-feedback-trigger {
        visibility: hidden;
    }
}

.r-content-workspace {
    container: published / inline-size;
}

.r-content-heading h1 {
    margin: 0;
    font-size: var(--wa-font-size-2xl);
    font-weight: var(--wa-font-weight-bold);
}

.r-content-heading .r-hint {
    font-size: var(--wa-font-size-s);
}

#analyticsFilters wa-select::part(form-control-label),
#publishedFilters wa-input::part(form-control-label),
#publishedFilters wa-select::part(form-control-label) {
    font-size: var(--wa-font-size-s);
}

.r-content-primary-filters {
    grid-template-columns: minmax(200px, 1.25fr) repeat(3, minmax(0, 1fr));
}

.r-content-filters {
    --min-column-size: 20ch;
}

.r-content-toolbar-meta {
    padding-top: var(--wa-space-m);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
}

.r-content-layout-group wa-button[variant="brand"]::part(button) {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.r-content-posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wa-space-l);
}

.r-content-post {
    min-width: 0;
    --spacing: 0;
    overflow: hidden;
}

.r-content-post-shell,
.r-content-card-layout {
    flex: 1;
}

.r-content-post::part(body) {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.r-content-post-header,
.r-content-post-copy {
    padding: var(--wa-space-l);
}

.r-content-post-copy {
    flex: 1;
}

.r-content-post-copy > .r-hint {
    font-size: var(--wa-font-size-xs);
}

.r-content-post-header .r-content-source strong {
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
}

.r-content-post-header .r-content-source small {
    font-size: var(--wa-font-size-xs);
}

.r-content-post-actions {
    margin-top: auto;
    padding-top: var(--wa-space-s);
    border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.r-content-post .r-content-source {
    flex: 1;
    --flank-size: 34px;
}

.r-content-post .r-table-channel-logo {
    width: 34px;
    height: 34px;
    padding: 7px;
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-lowered);
}

.r-content-media-layout {
    --flank-size: 24ch;
}

.r-content-source {
    --flank-size: var(--wa-font-size-2xl);
    min-width: 0;
}

.r-content-source small {
    color: var(--wa-color-text-quiet);
}

.r-content-preview {
    flex: none;
    border-radius: var(--wa-border-radius-m);
    aspect-ratio: 16 / 9;
    background: var(--wa-color-surface-lowered);
    color: var(--wa-color-text-normal);
    text-decoration: none;
}

.r-content-preview img {
    object-fit: cover;
}

.r-content-preview img,
.r-content-detail-preview img {
    width: 100%;
    height: 100%;
}

.r-content-detail-preview img {
    object-fit: contain;
}

.r-content-preview > span {
    text-align: center;
    align-items: center;
}

.r-content-caption {
    margin: 0;
    line-height: 1.6;
    max-height: 4.8em;
    overflow-wrap: anywhere;
    overflow: hidden;
}

.r-content-metrics {
    --min-column-size: 14ch;
    margin: 0;
}

.r-content-metrics-row,
.r-content-metrics-row > div {
    flex-wrap: nowrap;
}

.r-content-metrics-row dd {
    white-space: nowrap;
}

.r-content-metrics dt {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
}

.r-content-metrics dd {
    margin: 0;
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    overflow-wrap: anywhere;
}

.r-content-feedback,
.r-content-empty {
    padding: var(--wa-space-m);
    background: var(--wa-color-neutral-fill-quiet);
    color: var(--wa-color-neutral-on-quiet);
    border-radius: var(--wa-border-radius-s);
}

.r-content-detail-caption {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
}

.r-content-detail-preview {
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    max-height: 40vh;
    background: var(--wa-color-surface-lowered);
}

.r-content-post-dialog {
    --width: min(92vw, 1440px);
    --spacing: var(--wa-space-l);
}

.r-content-detail-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wa-space-xl);
}

.r-content-detail-columns > .r-content-feedback {
    grid-column: 1 / -1;
}

.r-content-detail-post,
.r-content-detail-comments {
    min-width: 0;
    max-height: 75vh;
    overflow-y: auto;
}

.r-content-detail-comments {
    padding-inline-start: var(--wa-space-l);
    border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

@media (max-width: 880px) {
    .r-content-detail-columns {
        grid-template-columns: minmax(0, 1fr);
    }
    .r-content-detail-post,
    .r-content-detail-comments {
        max-height: none;
        overflow-y: visible;
    }
    .r-content-detail-comments {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

.r-content-comment {
    padding-block: var(--wa-space-m);
    border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.r-content-posts-list .r-content-preview {
    max-height: 30vh;
}

@container published (width >= 1250px) {
    .r-content-posts:not(.r-content-posts-list) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container published (width >= 1600px) {
    .r-content-posts:not(.r-content-posts-list) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@container published (width <= 1100px) {
    .r-content-primary-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container published (width <= 880px) {
    .r-content-posts:not(.r-content-posts-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #publishedWorkspace .r-insights-layout,
    #publishedWorkspace .r-recommendation-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .r-content-post-dialog {
        --width: 100vw;
        --spacing: var(--wa-space-m);
    }
    .r-content-post-header,
    .r-content-post-copy {
        padding: var(--wa-space-m);
    }
}

.r-content-insight-preview {
    width: 12ch;
    aspect-ratio: 4 / 3;
    background: var(--wa-color-surface-lowered);
}

.r-content-insight-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@container published (width <= 580px) {
    .r-content-posts:not(.r-content-posts-list) {
        grid-template-columns: minmax(0, 1fr);
    }
    .r-content-primary-filters wa-input,
    .r-content-primary-filters wa-select:last-child {
        grid-column: 1 / -1;
    }
}

.r-analytics-post-link {
    --flank-size: 8ch;
    color: var(--wa-color-text-normal);
}

.r-analytics-post-link .r-content-insight-preview {
    flex: none;
    width: 8ch;
}

@media (width <= 640px) {
    #analyticsWorkspace .r-recommendation-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}