html[x-cloak] {
    display: block !important;
}

/* Credit balance detail */
.fd-credit-balance-detail {
    --fd-credit-detail-border: #e2e8f0;
    --fd-credit-detail-muted: #64748b;
    --fd-credit-detail-text: #0f172a;
    color: var(--fd-credit-detail-text);
    display: grid;
    gap: 16px;
    margin: 0 auto;
    max-width: 1600px;
    width: 100%;
}

.fd-credit-balance-detail *,
.fd-credit-balance-detail *::before,
.fd-credit-balance-detail *::after {
    box-sizing: border-box;
}

.fd-credit-balance-detail button {
    font: inherit;
}

.fd-credit-balance-detail a:focus-visible,
.fd-credit-balance-detail button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.fd-credit-balance-detail__back {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    justify-self: start;
    min-height: 36px;
    text-decoration: none;
}

.fd-credit-balance-detail__back:hover {
    color: #2563eb;
}

.fd-credit-balance-detail__back .material-symbols-outlined {
    font-size: 20px;
}

.fd-credit-balance-detail__header,
.fd-credit-balance-detail__composition,
.fd-credit-balance-detail__record,
.fd-credit-balance-detail__rail > section {
    background: #fff;
    border: 1px solid var(--fd-credit-detail-border);
    border-radius: 8px;
}

.fd-credit-balance-detail__header {
    overflow: hidden;
}

.fd-credit-balance-detail__header-main {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 24px 28px 18px;
}

.fd-credit-balance-detail__identity {
    align-items: center;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.fd-credit-balance-detail__icon {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #047857;
    display: inline-flex;
    flex: 0 0 56px;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.fd-credit-balance-detail__icon .material-symbols-outlined {
    font-size: 30px;
}

.fd-credit-balance-detail__heading {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.fd-credit-balance-detail__heading-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-credit-balance-detail__heading h1 {
    color: #0f172a;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-credit-balance-detail__id {
    align-items: center;
    color: #64748b;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.fd-credit-balance-detail__id code,
.fd-credit-balance-detail__record code {
    font-size: 12px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.fd-credit-balance-detail__icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}

.fd-credit-balance-detail__icon-button:hover {
    background: #eff6ff;
    color: #2563eb;
}

.fd-credit-balance-detail__icon-button .material-symbols-outlined {
    font-size: 18px;
}

.fd-credit-balance-detail__actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.fd-credit-balance-detail__action {
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-credit-balance-detail__action .material-symbols-outlined {
    font-size: 18px;
}

.fd-credit-balance-detail__action.is-secondary {
    background: #fff;
    color: #334155;
}

.fd-credit-balance-detail__action.is-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.fd-credit-balance-detail__action.is-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.fd-credit-balance-detail__action.is-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.fd-credit-balance-detail__status-summary {
    color: #475569;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    padding: 0 28px 22px;
}

.fd-credit-balance-detail__metrics {
    border-top: 1px solid var(--fd-credit-detail-border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.fd-credit-balance-detail__metrics > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 16px 20px;
}

.fd-credit-balance-detail__metrics > div + div {
    border-left: 1px solid var(--fd-credit-detail-border);
}

.fd-credit-balance-detail__metrics dt,
.fd-credit-balance-detail__monthly-breakdown dt,
.fd-credit-balance-detail__record dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.fd-credit-balance-detail__metrics dd {
    color: #0f172a;
    font-size: 20px;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-credit-balance-detail__metrics small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.fd-credit-balance-detail__metrics .is-attention dd {
    color: #b45309;
}

.fd-credit-balance-detail__attention {
    align-items: start;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    display: flex;
    gap: 12px;
    padding: 15px 18px;
}

.fd-credit-balance-detail__attention > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 22px;
    margin-top: 1px;
}

.fd-credit-balance-detail__attention h2 {
    font-size: 14px;
    font-weight: 750;
    margin: 0;
}

.fd-credit-balance-detail__attention p,
.fd-credit-balance-detail__attention ul {
    font-size: 13px;
    line-height: 1.55;
    margin: 4px 0 0;
}

.fd-credit-balance-detail__attention ul {
    padding-left: 18px;
}

.fd-credit-balance-detail__workspace {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.fd-credit-balance-detail__main,
.fd-credit-balance-detail__rail {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.fd-credit-balance-detail__composition,
.fd-credit-balance-detail__record,
.fd-credit-balance-detail__rail > section {
    padding: 22px;
}

.fd-credit-balance-detail__composition > header,
.fd-credit-balance-detail__record > header,
.fd-credit-balance-detail__owner > header,
.fd-credit-balance-detail__timeline > header {
    display: grid;
    gap: 4px;
    margin-bottom: 18px;
}

.fd-credit-balance-detail__composition > header {
    align-items: start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.fd-credit-balance-detail__composition h2,
.fd-credit-balance-detail__record h2,
.fd-credit-balance-detail__rail h2 {
    color: #0f172a;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 0;
}

.fd-credit-balance-detail__composition header p,
.fd-credit-balance-detail__record header p,
.fd-credit-balance-detail__owner header p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.fd-credit-balance-detail__formula {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns:
        minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
}

.fd-credit-balance-detail__formula > div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
}

.fd-credit-balance-detail__formula > div.is-total {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.fd-credit-balance-detail__formula span {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.fd-credit-balance-detail__formula strong {
    color: #0f172a;
    font-size: 19px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.fd-credit-balance-detail__formula .is-total strong {
    color: #047857;
}

.fd-credit-balance-detail__operator {
    align-items: center;
    color: #94a3b8;
    display: flex;
    font-size: 20px;
    font-weight: 700;
    justify-content: center;
}

.fd-credit-balance-detail__monthly {
    border-top: 1px solid #e2e8f0;
    margin-top: 20px;
    padding-top: 20px;
}

.fd-credit-balance-detail__monthly-heading {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.fd-credit-balance-detail__monthly-heading h3 {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.fd-credit-balance-detail__monthly-heading p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    margin: 3px 0 0;
}

.fd-credit-balance-detail__monthly-heading > strong {
    color: #2563eb;
    flex: 0 0 auto;
    font-size: 14px;
}

.fd-credit-balance-detail__monthly progress,
.fd-credit-balance-detail__empty-progress {
    background: #e2e8f0;
    border: 0;
    border-radius: 4px;
    display: block;
    height: 8px;
    margin-top: 13px;
    overflow: hidden;
    width: 100%;
}

.fd-credit-balance-detail__monthly progress::-webkit-progress-bar {
    background: #e2e8f0;
}

.fd-credit-balance-detail__monthly progress::-webkit-progress-value {
    background: #2563eb;
}

.fd-credit-balance-detail__monthly progress::-moz-progress-bar {
    background: #2563eb;
}

.fd-credit-balance-detail__monthly-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 16px 0 0;
}

.fd-credit-balance-detail__monthly-breakdown > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding-right: 16px;
}

.fd-credit-balance-detail__monthly-breakdown > div + div {
    border-left: 1px solid #e2e8f0;
    padding-left: 16px;
}

.fd-credit-balance-detail__monthly-breakdown dd {
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-credit-balance-detail__bonus {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
}

.fd-credit-balance-detail__bonus-icon {
    align-items: center;
    background: #fff7ed;
    border-radius: 6px;
    color: #c2410c;
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.fd-credit-balance-detail__bonus > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-credit-balance-detail__bonus span,
.fd-credit-balance-detail__bonus small {
    color: #64748b;
    font-size: 12px;
}

.fd-credit-balance-detail__bonus strong {
    color: #0f172a;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.fd-credit-balance-detail__record dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.fd-credit-balance-detail__record dl > div {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px 14px 0;
}

.fd-credit-balance-detail__record dl > div:nth-child(even) {
    border-left: 1px solid #e2e8f0;
    padding-left: 16px;
}

.fd-credit-balance-detail__record dd {
    align-items: center;
    color: #0f172a;
    display: flex;
    font-size: 14px;
    font-weight: 650;
    gap: 5px;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-credit-balance-detail__record small {
    color: #64748b;
    font-size: 12px;
}

.fd-credit-balance-detail__owner-card {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #0f172a;
    display: flex;
    gap: 12px;
    min-width: 0;
    padding: 13px;
    text-decoration: none;
}

.fd-credit-balance-detail__owner-card:not(.is-static):hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.fd-credit-balance-detail__owner-avatar {
    align-items: center;
    background: #dbeafe;
    border-radius: 50%;
    color: #1d4ed8;
    display: inline-flex;
    flex: 0 0 40px;
    font-size: 15px;
    font-weight: 750;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.fd-credit-balance-detail__owner-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.fd-credit-balance-detail__owner-copy strong,
.fd-credit-balance-detail__owner-copy small,
.fd-credit-balance-detail__owner-copy code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-credit-balance-detail__owner-copy strong {
    font-size: 14px;
}

.fd-credit-balance-detail__owner-copy small,
.fd-credit-balance-detail__owner-copy code {
    color: #64748b;
    font-size: 11px;
}

.fd-credit-balance-detail__owner-card > .material-symbols-outlined {
    color: #94a3b8;
    flex: 0 0 auto;
    font-size: 18px;
}

.fd-credit-balance-detail__reset > header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.fd-credit-balance-detail__reset > strong,
.fd-credit-balance-detail__reset > time {
    display: block;
    overflow-wrap: anywhere;
}

.fd-credit-balance-detail__reset > strong {
    color: #0f172a;
    font-size: 17px;
}

.fd-credit-balance-detail__reset > time,
.fd-credit-balance-detail__reset > p {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.fd-credit-balance-detail__reset > time {
    margin-top: 5px;
}

.fd-credit-balance-detail__reset > p {
    border-top: 1px solid #e2e8f0;
    margin: 14px 0 0;
    padding-top: 12px;
}

.fd-credit-balance-detail__timeline ol {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-credit-balance-detail__timeline li {
    display: grid;
    gap: 11px;
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 70px;
    position: relative;
}

.fd-credit-balance-detail__timeline li:not(:last-child)::after {
    background: #e2e8f0;
    bottom: 0;
    content: "";
    left: 15px;
    position: absolute;
    top: 32px;
    width: 1px;
}

.fd-credit-balance-detail__timeline-icon {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 50%;
    color: #047857;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    position: relative;
    width: 32px;
    z-index: 1;
}

.fd-credit-balance-detail__timeline-icon .material-symbols-outlined {
    font-size: 17px;
}

.fd-credit-balance-detail__timeline li.is-due
    .fd-credit-balance-detail__timeline-icon {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #b45309;
}

.fd-credit-balance-detail__timeline li.is-unknown
    .fd-credit-balance-detail__timeline-icon,
.fd-credit-balance-detail__timeline li.is-unset
    .fd-credit-balance-detail__timeline-icon {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}

.fd-credit-balance-detail__timeline li > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-top: 3px;
}

.fd-credit-balance-detail__timeline li strong {
    color: #0f172a;
    font-size: 13px;
}

.fd-credit-balance-detail__timeline li small,
.fd-credit-balance-detail__timeline li time {
    color: #64748b;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.fd-credit-balance-detail__toast {
    background: #0f172a;
    border-radius: 6px;
    bottom: 24px;
    color: #fff;
    font-size: 13px;
    left: 50%;
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 14px;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    z-index: 80;
}

.dark .fd-credit-balance-detail {
    --fd-credit-detail-border: #334155;
    --fd-credit-detail-muted: #94a3b8;
    --fd-credit-detail-text: #e2e8f0;
}

.dark .fd-credit-balance-detail__header,
.dark .fd-credit-balance-detail__composition,
.dark .fd-credit-balance-detail__record,
.dark .fd-credit-balance-detail__rail > section {
    background: #111827;
}

.dark .fd-credit-balance-detail__heading h1,
.dark .fd-credit-balance-detail__metrics dd,
.dark .fd-credit-balance-detail__composition h2,
.dark .fd-credit-balance-detail__record h2,
.dark .fd-credit-balance-detail__rail h2,
.dark .fd-credit-balance-detail__formula strong,
.dark .fd-credit-balance-detail__monthly-heading h3,
.dark .fd-credit-balance-detail__monthly-breakdown dd,
.dark .fd-credit-balance-detail__bonus strong,
.dark .fd-credit-balance-detail__record dd,
.dark .fd-credit-balance-detail__owner-card,
.dark .fd-credit-balance-detail__reset > strong,
.dark .fd-credit-balance-detail__timeline li strong {
    color: #f8fafc;
}

.dark .fd-credit-balance-detail__back,
.dark .fd-credit-balance-detail__id,
.dark .fd-credit-balance-detail__status-summary,
.dark .fd-credit-balance-detail__metrics dt,
.dark .fd-credit-balance-detail__metrics small,
.dark .fd-credit-balance-detail__composition header p,
.dark .fd-credit-balance-detail__record header p,
.dark .fd-credit-balance-detail__owner header p,
.dark .fd-credit-balance-detail__formula span,
.dark .fd-credit-balance-detail__monthly-heading p,
.dark .fd-credit-balance-detail__monthly-breakdown dt,
.dark .fd-credit-balance-detail__bonus span,
.dark .fd-credit-balance-detail__bonus small,
.dark .fd-credit-balance-detail__record dt,
.dark .fd-credit-balance-detail__record small,
.dark .fd-credit-balance-detail__owner-copy small,
.dark .fd-credit-balance-detail__owner-copy code,
.dark .fd-credit-balance-detail__reset > time,
.dark .fd-credit-balance-detail__reset > p,
.dark .fd-credit-balance-detail__timeline li small,
.dark .fd-credit-balance-detail__timeline li time {
    color: #94a3b8;
}

.dark .fd-credit-balance-detail__icon {
    background: #052e2b;
    border-color: #065f46;
    color: #6ee7b7;
}

.dark .fd-credit-balance-detail__action.is-secondary,
.dark .fd-credit-balance-detail__formula > div,
.dark .fd-credit-balance-detail__bonus,
.dark .fd-credit-balance-detail__owner-card {
    background: #1f2937;
    border-color: #475569;
    color: #e2e8f0;
}

.dark .fd-credit-balance-detail__formula > div.is-total {
    background: #052e2b;
    border-color: #047857;
}

.dark .fd-credit-balance-detail__monthly,
.dark .fd-credit-balance-detail__monthly-breakdown > div + div,
.dark .fd-credit-balance-detail__record dl > div,
.dark .fd-credit-balance-detail__record dl > div:nth-child(even),
.dark .fd-credit-balance-detail__reset > p {
    border-color: #334155;
}

.dark .fd-credit-balance-detail__monthly progress,
.dark .fd-credit-balance-detail__monthly progress::-webkit-progress-bar,
.dark .fd-credit-balance-detail__empty-progress {
    background: #334155;
}

.dark .fd-credit-balance-detail__attention {
    background: #422006;
    border-color: #a16207;
    color: #fde68a;
}

.dark .fd-credit-balance-detail__timeline li:not(:last-child)::after {
    background: #475569;
}

@media (max-width: 1199px) {
    .fd-credit-balance-detail__header-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-credit-balance-detail__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .fd-credit-balance-detail__workspace {
        grid-template-columns: 1fr;
    }

    .fd-credit-balance-detail__rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fd-credit-balance-detail {
        gap: 12px;
    }

    .fd-credit-balance-detail__header-main {
        padding: 18px 16px 14px;
    }

    .fd-credit-balance-detail__identity {
        align-items: flex-start;
    }

    .fd-credit-balance-detail__icon {
        flex-basis: 44px;
        height: 44px;
        width: 44px;
    }

    .fd-credit-balance-detail__icon .material-symbols-outlined {
        font-size: 24px;
    }

    .fd-credit-balance-detail__icon-button {
        flex-basis: 44px;
        height: 44px;
        width: 44px;
    }

    .fd-credit-balance-detail__heading h1 {
        font-size: 20px;
    }

    .fd-credit-balance-detail__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .fd-credit-balance-detail__action {
        width: 100%;
    }

    .fd-credit-balance-detail__status-summary {
        padding: 0 16px 18px;
    }

    .fd-credit-balance-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-credit-balance-detail__metrics > div + div {
        border-left: 0;
    }

    .fd-credit-balance-detail__metrics > div:nth-child(even) {
        border-left: 1px solid var(--fd-credit-detail-border);
    }

    .fd-credit-balance-detail__metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--fd-credit-detail-border);
    }

    .fd-credit-balance-detail__metrics > div {
        padding: 14px;
    }

    .fd-credit-balance-detail__metrics dd {
        font-size: 17px;
    }

    .fd-credit-balance-detail__attention {
        padding: 13px 14px;
    }

    .fd-credit-balance-detail__composition,
    .fd-credit-balance-detail__record,
    .fd-credit-balance-detail__rail > section {
        padding: 16px;
    }

    .fd-credit-balance-detail__composition > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-credit-balance-detail__formula {
        grid-template-columns: 1fr;
    }

    .fd-credit-balance-detail__operator {
        min-height: 20px;
    }

    .fd-credit-balance-detail__monthly-breakdown,
    .fd-credit-balance-detail__record dl,
    .fd-credit-balance-detail__rail {
        grid-template-columns: 1fr;
    }

    .fd-credit-balance-detail__monthly-breakdown > div {
        padding: 10px 0;
    }

    .fd-credit-balance-detail__monthly-breakdown > div + div {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
        padding-left: 0;
    }

    .fd-credit-balance-detail__record dl > div,
    .fd-credit-balance-detail__record dl > div:nth-child(even) {
        border-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .fd-credit-balance-detail__owner-copy strong,
    .fd-credit-balance-detail__owner-copy small,
    .fd-credit-balance-detail__owner-copy code {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .dark .fd-credit-balance-detail__monthly-breakdown > div + div {
        border-color: #334155;
    }
}

/* Project operations detail workspace. */
.fd-project-detail {
    --fd-project-bg: #f7f8fa;
    --fd-project-border: #e2e6ec;
    --fd-project-border-strong: #cfd5de;
    --fd-project-muted: #687386;
    --fd-project-subtle: #8a94a5;
    --fd-project-surface: #ffffff;
    --fd-project-surface-soft: #f4f6f8;
    --fd-project-text: #172033;
    box-sizing: border-box;
    color: var(--fd-project-text);
    margin: 0 auto;
    max-width: 1460px;
    padding: 4px 4px 40px;
    width: 100%;
}

.fd-project-detail *,
.fd-project-detail *::before,
.fd-project-detail *::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

.fd-project-detail button,
.fd-project-detail input {
    font: inherit;
}

.fd-project-detail .fd-sr-only {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.fd-project-detail__back {
    align-items: center;
    border-radius: 6px;
    color: var(--fd-project-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    min-height: 38px;
    padding: 0 10px 0 6px;
    text-decoration: none;
    width: fit-content;
}

.fd-project-detail__back:hover,
.fd-project-detail__back:focus-visible {
    background: var(--fd-project-surface-soft);
    color: var(--fd-project-text);
}

.fd-project-detail__back:focus-visible,
.fd-project-detail button:focus-visible,
.fd-project-detail a:focus-visible,
.fd-project-detail input:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.fd-project-detail__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-project-detail__header {
    background: var(--fd-project-surface);
    border: 1px solid var(--fd-project-border);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 10px 30px rgba(28, 39, 59, 0.08);
    margin-top: 10px;
}

.fd-project-detail__title-row {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    min-height: 114px;
    padding: 22px 24px 18px;
}

.fd-project-detail__icon {
    align-items: center;
    background: #eaf1ff;
    border-radius: 8px;
    color: #2563eb;
    display: flex;
    flex: 0 0 48px;
    height: 48px;
    justify-content: center;
}

.fd-project-detail__icon .material-symbols-outlined {
    font-size: 27px;
}

.fd-project-detail__heading {
    min-width: 0;
}

.fd-project-detail__heading-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-project-detail__heading h1 {
    color: var(--fd-project-text);
    font-size: 26px;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-project-detail__id {
    align-items: center;
    color: var(--fd-project-muted);
    display: flex;
    gap: 6px;
    margin-top: 9px;
    min-width: 0;
}

.fd-project-detail__id code {
    background: transparent;
    color: inherit;
    font-size: 12px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-project-detail__icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--fd-project-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
}

.fd-project-detail__icon-button:hover {
    background: var(--fd-project-surface-soft);
    border-color: var(--fd-project-border);
    color: var(--fd-project-text);
}

.fd-project-detail__icon-button .material-symbols-outlined {
    font-size: 19px;
}

.fd-project-detail__owner {
    align-items: center;
    align-self: center;
    background: var(--fd-project-surface-soft);
    border: 1px solid var(--fd-project-border);
    border-radius: 7px;
    color: var(--fd-project-text);
    display: flex;
    gap: 10px;
    margin-left: auto;
    max-width: 320px;
    min-height: 58px;
    min-width: 230px;
    padding: 8px 10px;
    text-decoration: none;
}

.fd-project-detail__owner:not(.fd-project-detail__owner--static):hover {
    background: #edf3ff;
    border-color: #b9cdf8;
}

.fd-project-detail__owner-avatar {
    align-items: center;
    background: #dceaff;
    border-radius: 50%;
    color: #1d4ed8;
    display: flex;
    flex: 0 0 34px;
    font-size: 13px;
    font-weight: 750;
    height: 34px;
    justify-content: center;
}

.fd-project-detail__owner-copy {
    min-width: 0;
}

.fd-project-detail__owner-copy strong,
.fd-project-detail__owner-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-project-detail__owner-copy strong {
    font-size: 13px;
}

.fd-project-detail__owner-copy small {
    color: var(--fd-project-muted);
    font-size: 11px;
    margin-top: 3px;
}

.fd-project-detail__owner > .material-symbols-outlined {
    color: var(--fd-project-subtle);
    font-size: 18px;
    margin-left: auto;
}

.fd-project-detail__facts {
    border-top: 1px solid var(--fd-project-border);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0;
}

.fd-project-detail__facts > div {
    min-width: 0;
    padding: 14px 18px;
}

.fd-project-detail__facts > div + div {
    border-left: 1px solid var(--fd-project-border);
}

.fd-project-detail__facts dt,
.fd-project-detail__facts dd {
    margin: 0;
}

.fd-project-detail__facts dt {
    color: var(--fd-project-subtle);
    font-size: 11px;
    font-weight: 600;
}

.fd-project-detail__facts dd {
    color: var(--fd-project-text);
    font-size: 13px;
    font-weight: 650;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.fd-project-detail__tabs {
    align-items: flex-end;
    border-top: 1px solid var(--fd-project-border);
    display: flex;
    gap: 24px;
    min-height: 53px;
    overflow-x: auto;
    padding: 0 24px;
}

.fd-project-detail__tabs button {
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--fd-project-muted);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    padding: 2px 0 0;
}

.fd-project-detail__tabs button:hover {
    color: var(--fd-project-text);
}

.fd-project-detail__tabs button[aria-selected="true"] {
    border-bottom-color: #2563eb;
    color: #1d4ed8;
}

.fd-project-detail__tabs button > span {
    align-items: center;
    background: var(--fd-project-surface-soft);
    border: 1px solid var(--fd-project-border);
    border-radius: 999px;
    color: var(--fd-project-muted);
    display: inline-flex;
    font-size: 10px;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 5px;
}

.fd-project-detail__panel {
    background: var(--fd-project-surface);
    border: 1px solid var(--fd-project-border);
    border-radius: 0 0 8px 8px;
    border-top: 0;
    min-height: 360px;
    padding: 22px 24px 28px;
}

.fd-project-detail__panel[hidden] {
    display: none;
}

.fd-project-detail__metrics {
    border: 1px solid var(--fd-project-border);
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fd-project-detail__metrics > div {
    min-width: 0;
    padding: 17px 18px;
}

.fd-project-detail__metrics > div + div {
    border-left: 1px solid var(--fd-project-border);
}

.fd-project-detail__metrics span,
.fd-project-detail__metrics strong,
.fd-project-detail__metrics small {
    display: block;
}

.fd-project-detail__metrics span {
    color: var(--fd-project-muted);
    font-size: 12px;
    font-weight: 600;
}

.fd-project-detail__metrics strong {
    color: var(--fd-project-text);
    font-size: 25px;
    line-height: 1.15;
    margin-top: 7px;
}

.fd-project-detail__metrics small {
    color: var(--fd-project-subtle);
    font-size: 11px;
    margin-top: 5px;
}

.fd-project-detail__overview-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    margin-top: 22px;
}

.fd-project-detail__section {
    min-width: 0;
}

.fd-project-detail__section > header {
    align-items: center;
    border-bottom: 1px solid var(--fd-project-border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 38px;
    padding-bottom: 10px;
}

.fd-project-detail__section > header h2,
.fd-project-detail__toolbar h2,
.fd-project-detail__drawer h2,
.fd-project-detail__drawer h3 {
    color: var(--fd-project-text);
    font-size: 15px;
    font-weight: 720;
    margin: 0;
}

.fd-project-detail__section > header p,
.fd-project-detail__toolbar p,
.fd-project-detail__drawer header p {
    color: var(--fd-project-muted);
    font-size: 11px;
    margin: 0;
}

.fd-project-detail__stage-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    min-height: 130px;
    padding: 22px 4px 6px;
}

.fd-project-detail__stage-flow li {
    align-content: start;
    display: grid;
    grid-template-rows: 36px auto auto;
    justify-items: center;
    min-width: 0;
    position: relative;
    text-align: center;
}

.fd-project-detail__stage-flow li:not(:last-child)::after {
    background: #dbe5f5;
    content: "";
    height: 2px;
    left: calc(50% + 18px);
    position: absolute;
    right: calc(-50% + 18px);
    top: 17px;
    z-index: 0;
}

.fd-project-detail__stage-dot {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: var(--fd-project-surface);
    border: 3px solid #dbe5f5;
    border-radius: 50%;
    color: var(--fd-project-muted);
    display: flex;
    flex: none;
    font-size: 12px;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    line-height: 1;
    max-height: 36px;
    max-width: 36px;
    min-height: 36px;
    min-width: 36px;
    position: relative;
    width: 36px;
    z-index: 1;
}

.fd-project-detail__stage-flow .is-done .fd-project-detail__stage-dot {
    background: #2563eb;
    border-color: #d5e4ff;
    color: #ffffff;
}

.fd-project-detail__stage-flow .is-current .fd-project-detail__stage-dot {
    background: #2563eb;
    border-color: #d5e4ff;
    color: #ffffff;
}

.fd-project-detail__stage-dot .material-symbols-outlined {
    display: block;
    font-size: 18px;
    line-height: 1;
}

.fd-project-detail__stage-flow strong {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 9px;
    max-width: 100%;
}

.fd-project-detail__stage-flow small {
    color: var(--fd-project-subtle);
    font-size: 10px;
    line-height: 1.35;
    margin-top: 3px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.fd-project-detail__resource-summary {
    margin: 0;
}

.fd-project-detail__resource-summary > div {
    align-items: center;
    border-bottom: 1px solid var(--fd-project-border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 47px;
    padding: 10px 0;
}

.fd-project-detail__resource-summary > div:last-child {
    border-bottom: 0;
}

.fd-project-detail__resource-summary dt,
.fd-project-detail__resource-summary dd {
    font-size: 12px;
    margin: 0;
}

.fd-project-detail__resource-summary dt {
    color: var(--fd-project-muted);
}

.fd-project-detail__resource-summary dd {
    color: var(--fd-project-text);
    font-weight: 650;
    text-align: right;
}

.fd-project-detail__resource-value {
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 9px;
    white-space: nowrap;
}

.fd-project-detail__resource-value--success {
    background: #e8f7ef;
    color: #137a4a;
}

.fd-project-detail__resource-value--info {
    background: #eaf1ff;
    color: #1d4ed8;
}

.fd-project-detail__resource-value--warning {
    background: #fff5dd;
    color: #9a5b00;
}

.fd-project-detail__resource-empty {
    color: var(--fd-project-subtle);
    font-weight: 500;
}

.fd-project-detail__section--config {
    margin-top: 22px;
}

.fd-project-detail__config {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 14px 0 0;
}

.fd-project-detail__config > div {
    border-right: 1px solid var(--fd-project-border);
    border-top: 1px solid var(--fd-project-border);
    min-width: 0;
    padding: 13px 14px;
}

.fd-project-detail__config > div:nth-child(4n) {
    border-right: 0;
}

.fd-project-detail__config > .is-wide {
    grid-column: span 4;
}

.fd-project-detail__config dt,
.fd-project-detail__config dd {
    margin: 0;
}

.fd-project-detail__config dt {
    color: var(--fd-project-subtle);
    font-size: 11px;
}

.fd-project-detail__config dd {
    color: var(--fd-project-text);
    font-size: 13px;
    font-weight: 650;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.fd-project-detail__toolbar {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.fd-project-detail__search {
    align-items: center;
    border: 1px solid var(--fd-project-border-strong);
    border-radius: 7px;
    color: var(--fd-project-muted);
    display: flex;
    gap: 8px;
    height: 40px;
    max-width: 370px;
    padding: 0 11px;
    width: 100%;
}

.fd-project-detail__search:focus-within {
    border-color: #6f94e6;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.fd-project-detail__search .material-symbols-outlined {
    font-size: 19px;
}

.fd-project-detail__search input {
    background: transparent;
    border: 0;
    color: var(--fd-project-text);
    min-width: 0;
    outline: 0;
    width: 100%;
}

.fd-project-detail__search input::placeholder {
    color: var(--fd-project-subtle);
}

.fd-project-detail__table-wrap {
    border: 1px solid var(--fd-project-border);
    border-radius: 7px;
    overflow-x: auto;
}

.fd-project-detail__table {
    border-collapse: collapse;
    min-width: 920px;
    width: 100%;
}

.fd-project-detail__table th {
    background: var(--fd-project-surface-soft);
    color: #536075;
    font-size: 11px;
    font-weight: 700;
    padding: 11px 13px;
    text-align: left;
    white-space: nowrap;
}

.fd-project-detail__table td {
    border-top: 1px solid var(--fd-project-border);
    color: #364154;
    font-size: 12px;
    padding: 11px 13px;
    vertical-align: middle;
}

.fd-project-detail__table tbody tr:hover {
    background: #fafbfd;
}

.fd-project-detail__page {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 260px;
}

.fd-project-detail__thumbnail {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: #edf0f4;
    border: 1px solid var(--fd-project-border);
    border-radius: 5px;
    color: var(--fd-project-subtle);
    display: flex;
    flex: 0 0 72px;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.fd-project-detail__thumbnail img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.fd-project-detail [data-fd-project-html-frame] {
    background: #ffffff;
    border: 0;
    height: 720px;
    inset: 0 auto auto 0;
    pointer-events: none;
    position: absolute;
    transform: scale(var(--fd-project-html-preview-scale, 0));
    transform-origin: left top;
    width: 1280px;
}

.fd-project-detail [data-fd-project-html-frame][hidden] {
    display: none;
}

.fd-project-detail__thumbnail .material-symbols-outlined {
    font-size: 20px;
}

.fd-project-detail__page > span:last-child,
.fd-project-detail__task,
.fd-project-detail__time,
.fd-project-detail__export > span:last-child {
    min-width: 0;
}

.fd-project-detail__page strong,
.fd-project-detail__page small,
.fd-project-detail__task strong,
.fd-project-detail__task small,
.fd-project-detail__time span,
.fd-project-detail__time small,
.fd-project-detail__export strong,
.fd-project-detail__export small {
    display: block;
}

.fd-project-detail__page strong,
.fd-project-detail__task strong,
.fd-project-detail__export strong {
    color: var(--fd-project-text);
    font-size: 12px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-project-detail__page small,
.fd-project-detail__task small,
.fd-project-detail__time small,
.fd-project-detail__export small {
    color: var(--fd-project-subtle);
    font-size: 10px;
    margin-top: 3px;
}

.fd-project-detail__resource-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.fd-project-detail__resource-flags span,
.fd-project-detail__resource-state {
    background: #f1f3f6;
    border: 1px solid #e2e6ec;
    border-radius: 5px;
    color: #8a94a5;
    font-size: 10px;
    font-weight: 650;
    padding: 3px 6px;
    white-space: nowrap;
}

.fd-project-detail__resource-flags .is-ready,
.fd-project-detail__resource-state.is-ready {
    background: #e8f7ef;
    border-color: #c3ead3;
    color: #137a4a;
}

.fd-project-detail__text-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--fd-project-border-strong);
    border-radius: 6px;
    color: #3f4c61;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 650;
    gap: 5px;
    min-height: 34px;
    padding: 0 10px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-project-detail__text-button:hover {
    background: #f5f7fa;
    border-color: #aeb8c7;
    color: var(--fd-project-text);
}

.fd-project-detail__text-button--primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.fd-project-detail__text-button--primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.fd-project-detail__text-button .material-symbols-outlined {
    font-size: 17px;
}

.fd-project-detail__progress {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 140px;
}

.fd-project-detail__progress progress {
    appearance: none;
    background: #e8ebf0;
    border: 0;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
    width: 88px;
}

.fd-project-detail__progress progress::-webkit-progress-bar {
    background: #e8ebf0;
}

.fd-project-detail__progress progress::-webkit-progress-value {
    background: #3d75e7;
    border-radius: 999px;
}

.fd-project-detail__progress progress::-moz-progress-bar {
    background: #3d75e7;
    border-radius: 999px;
}

.fd-project-detail__progress small {
    color: var(--fd-project-muted);
    font-size: 10px;
    white-space: nowrap;
}

.fd-project-detail__export {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 260px;
}

.fd-project-detail__export > .material-symbols-outlined {
    align-items: center;
    background: #eaf1ff;
    border-radius: 6px;
    color: #2563eb;
    display: flex;
    flex: 0 0 34px;
    font-size: 20px;
    height: 34px;
    justify-content: center;
}

.fd-project-detail__unavailable {
    color: var(--fd-project-subtle);
    font-size: 11px;
}

.fd-project-detail__empty {
    align-items: center;
    color: var(--fd-project-muted);
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    min-height: 180px;
    padding: 28px;
    text-align: center;
}

.fd-project-detail__empty > .material-symbols-outlined {
    color: var(--fd-project-subtle);
    font-size: 29px;
}

.fd-project-detail__empty strong {
    color: var(--fd-project-text);
    font-size: 13px;
}

.fd-project-detail__empty span:last-child {
    font-size: 11px;
}

.fd-project-detail__drawer-layer[hidden] {
    display: none;
}

.fd-project-detail__html-dialog-layer[hidden] {
    display: none;
}

.fd-project-detail__drawer-layer {
    inset: 0;
    position: fixed;
    z-index: 1000;
}

.fd-project-detail__html-dialog-layer {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1020;
}

.fd-project-detail__drawer-backdrop {
    background: rgba(16, 24, 39, 0.38);
    border: 0;
    inset: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    transition: opacity 180ms ease;
    width: 100%;
}

.fd-project-detail__html-dialog-backdrop {
    background: rgba(15, 23, 42, 0.66);
    border: 0;
    inset: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    transition: opacity 180ms ease;
    width: 100%;
}

.fd-project-detail__html-dialog {
    background: #ffffff;
    border: 1px solid var(--fd-project-border);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    max-height: calc(100vh - 48px);
    max-width: 1280px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    transform: translateY(12px) scale(0.985);
    transition: opacity 180ms ease, transform 180ms ease;
    width: min(92vw, calc((100vh - 150px) * 16 / 9));
}

.fd-project-detail__html-dialog-layer.is-open .fd-project-detail__html-dialog-backdrop {
    opacity: 1;
}

.fd-project-detail__html-dialog-layer.is-open .fd-project-detail__html-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fd-project-detail__html-dialog > header {
    align-items: center;
    border-bottom: 1px solid var(--fd-project-border);
    display: flex;
    justify-content: space-between;
    min-height: 62px;
    padding: 12px 16px;
}

.fd-project-detail__html-dialog > header > div {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 0;
}

.fd-project-detail__html-dialog > header > div > .material-symbols-outlined {
    align-items: center;
    background: #eaf2ff;
    border-radius: 6px;
    color: #2563eb;
    display: flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.fd-project-detail__html-dialog h2 {
    color: var(--fd-project-text);
    font-size: 15px;
    font-weight: 720;
    margin: 0;
    max-width: min(780px, calc(100vw - 180px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-project-detail__html-dialog header p {
    color: var(--fd-project-muted);
    font-size: 11px;
    margin: 2px 0 0;
}

.fd-project-detail__html-dialog-preview {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: #eef1f5;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.fd-project-detail__html-dialog-preview > div {
    align-items: center;
    color: var(--fd-project-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
    inset: 0;
    justify-content: center;
    pointer-events: none;
    position: absolute;
}

.fd-project-detail__html-dialog-preview > div .material-symbols-outlined {
    animation: fd-project-html-dialog-spin 1s linear infinite;
    font-size: 28px;
}

.fd-project-detail__html-dialog-preview > div strong {
    font-size: 12px;
}

@keyframes fd-project-html-dialog-spin {
    to {
        transform: rotate(360deg);
    }
}

.fd-project-detail__drawer {
    background: #ffffff;
    border-left: 1px solid var(--fd-project-border);
    box-shadow: -18px 0 46px rgba(16, 24, 39, 0.16);
    height: 100%;
    margin-left: auto;
    max-width: min(540px, 100vw);
    overflow-y: auto;
    position: relative;
    transform: translateX(100%);
    transition: transform 210ms ease;
    width: 100%;
}

.fd-project-detail__drawer-layer.is-open .fd-project-detail__drawer-backdrop {
    opacity: 1;
}

.fd-project-detail__drawer-layer.is-open .fd-project-detail__drawer {
    transform: translateX(0);
}

.fd-project-detail__drawer > header {
    align-items: flex-start;
    background: #ffffff;
    border-bottom: 1px solid var(--fd-project-border);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 20px 22px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fd-project-detail__drawer-body {
    display: grid;
    gap: 22px;
    padding: 22px;
}

.fd-project-detail__preview {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: #eef1f5;
    border: 1px solid var(--fd-project-border);
    border-radius: 7px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.fd-project-detail__preview img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.fd-project-detail__preview > div {
    align-items: center;
    color: var(--fd-project-subtle);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.fd-project-detail__preview > div .material-symbols-outlined {
    font-size: 34px;
}

.fd-project-detail__preview > div strong {
    font-size: 12px;
}

.fd-project-detail__drawer h3 {
    font-size: 13px;
}

.fd-project-detail__resource-list {
    border: 1px solid var(--fd-project-border);
    border-radius: 7px;
    margin-top: 10px;
}

.fd-project-detail__resource-list > div {
    align-items: center;
    display: grid;
    gap: 11px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    min-height: 68px;
    padding: 11px 13px;
}

.fd-project-detail__resource-list > div + div {
    border-top: 1px solid var(--fd-project-border);
}

.fd-project-detail__resource-list > div > .material-symbols-outlined {
    color: #5277bd;
    font-size: 22px;
}

.fd-project-detail__resource-actions {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: flex-end;
}

.fd-project-detail__resource-actions:empty {
    display: none;
}

.fd-project-detail__resource-list strong,
.fd-project-detail__resource-list small {
    display: block;
}

.fd-project-detail__resource-list strong {
    color: var(--fd-project-text);
    font-size: 12px;
}

.fd-project-detail__resource-list small {
    color: var(--fd-project-muted);
    font-size: 10px;
    margin-top: 3px;
}

.fd-project-detail__editable-meta dl {
    border: 1px solid var(--fd-project-border);
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 10px 0 0;
}

.fd-project-detail__editable-meta dl > div {
    min-width: 0;
    padding: 11px 13px;
}

.fd-project-detail__editable-meta dl > div:nth-child(even) {
    border-left: 1px solid var(--fd-project-border);
}

.fd-project-detail__editable-meta dl > div:nth-child(n + 3) {
    border-top: 1px solid var(--fd-project-border);
}

.fd-project-detail__editable-meta dt,
.fd-project-detail__editable-meta dd {
    margin: 0;
}

.fd-project-detail__editable-meta dt {
    color: var(--fd-project-subtle);
    font-size: 10px;
}

.fd-project-detail__editable-meta dd {
    color: var(--fd-project-text);
    font-size: 11px;
    font-weight: 650;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.fd-project-detail__toast {
    background: #101827;
    border-radius: 7px;
    bottom: 24px;
    box-shadow: 0 10px 28px rgba(16, 24, 39, 0.22);
    color: #ffffff;
    font-size: 12px;
    left: 50%;
    margin: 0;
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 14px;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    z-index: 1100;
}

body.fd-project-detail-drawer-open,
body.fd-project-detail-html-dialog-open {
    overflow: hidden;
}

.dark .fd-project-detail {
    --fd-project-bg: #111827;
    --fd-project-border: #374151;
    --fd-project-border-strong: #4b5563;
    --fd-project-muted: #a6b0c0;
    --fd-project-subtle: #8e99aa;
    --fd-project-surface: #1f2937;
    --fd-project-surface-soft: #182231;
    --fd-project-text: #f3f4f6;
}

.dark .fd-project-detail__header,
.dark .fd-project-detail__panel,
.dark .fd-project-detail__section,
.dark .fd-project-detail__metrics,
.dark .fd-project-detail__table-wrap {
    background: var(--fd-project-surface);
}

.dark .fd-project-detail__table th,
.dark .fd-project-detail__owner,
.dark .fd-project-detail__thumbnail {
    background: var(--fd-project-surface-soft);
}

.dark .fd-project-detail__table tbody tr:hover {
    background: #243041;
}

.dark .fd-project-detail__search input,
.dark .fd-project-detail__text-button {
    color: var(--fd-project-text);
}

.dark .fd-project-detail__text-button {
    background: #1f2937;
}

.dark .fd-project-detail__text-button:hover {
    background: #2b3748;
}

.dark .fd-project-detail__text-button--primary,
.dark .fd-project-detail__text-button--primary:hover {
    color: #ffffff;
}

.dark .fd-project-detail__drawer,
.dark .fd-project-detail__drawer > header {
    background: #1f2937;
}

.dark .fd-project-detail__html-dialog,
.dark .fd-project-detail__html-dialog > header {
    background: #1f2937;
}

.dark .fd-project-detail__html-dialog > header > div > .material-symbols-outlined {
    background: rgba(37, 99, 235, 0.2);
}

.dark .fd-project-detail__html-dialog-preview {
    background: #182231;
}

.dark .fd-project-detail__preview {
    background: #182231;
}

@media (max-width: 1100px) {
    .fd-project-detail__facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fd-project-detail__facts > div:nth-child(5) {
        border-left: 0;
    }

    .fd-project-detail__facts > div:nth-child(n + 5) {
        border-top: 1px solid var(--fd-project-border);
    }

    .fd-project-detail__overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .fd-project-detail {
        padding: 0 0 28px;
    }

    .fd-project-detail__title-row {
        align-items: stretch;
        flex-wrap: wrap;
        padding: 18px 16px;
    }

    .fd-project-detail__heading {
        flex: 1 1 calc(100% - 64px);
    }

    .fd-project-detail__heading h1 {
        font-size: 21px;
    }

    .fd-project-detail__owner {
        margin-left: 64px;
        max-width: none;
        min-width: 0;
        width: calc(100% - 64px);
    }

    .fd-project-detail__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-project-detail__facts > div {
        border-top: 1px solid var(--fd-project-border);
        padding: 12px 14px;
    }

    .fd-project-detail__facts > div:nth-child(odd) {
        border-left: 0;
    }

    .fd-project-detail__facts > div:nth-child(1),
    .fd-project-detail__facts > div:nth-child(2) {
        border-top: 0;
    }

    .fd-project-detail__tabs {
        gap: 18px;
        padding: 0 16px;
    }

    .fd-project-detail__panel {
        padding: 16px 14px 22px;
    }

    .fd-project-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-project-detail__metrics > div:nth-child(3) {
        border-left: 0;
    }

    .fd-project-detail__metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--fd-project-border);
    }

    .fd-project-detail__stage-flow {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-project-detail__stage-flow li:nth-child(2)::after,
    .fd-project-detail__stage-flow li:nth-child(4)::after {
        display: none;
    }

    .fd-project-detail__config {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-project-detail__config > div:nth-child(4n) {
        border-right: 1px solid var(--fd-project-border);
    }

    .fd-project-detail__config > div:nth-child(2n),
    .fd-project-detail__config > .is-wide {
        border-right: 0;
    }

    .fd-project-detail__config > .is-wide {
        grid-column: span 2;
    }

    .fd-project-detail__toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-project-detail__search {
        max-width: none;
    }

    .fd-project-detail__table--pages th:last-child,
    .fd-project-detail__table--pages td:last-child,
    .fd-project-detail__table--exports th:last-child,
    .fd-project-detail__table--exports td:last-child {
        background: var(--fd-project-surface);
        box-shadow: -10px 0 16px rgba(16, 24, 39, 0.08);
        position: sticky;
        right: 0;
        z-index: 1;
    }

    .fd-project-detail__table--pages th:last-child,
    .fd-project-detail__table--exports th:last-child {
        background: var(--fd-project-surface-soft);
        z-index: 2;
    }

    .fd-project-detail__drawer-body,
    .fd-project-detail__drawer > header {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-project-detail__drawer,
    .fd-project-detail__drawer-backdrop,
    .fd-project-detail__html-dialog,
    .fd-project-detail__html-dialog-backdrop {
        transition: none;
    }
}

@media (max-width: 640px) {
    .fd-project-detail__html-dialog-layer {
        padding: 12px;
    }

    .fd-project-detail__html-dialog {
        max-height: calc(100vh - 24px);
        width: min(100%, calc((100vh - 112px) * 16 / 9));
    }

    .fd-project-detail__html-dialog > header {
        min-height: 54px;
        padding: 9px 11px;
    }

    .fd-project-detail__html-dialog > header > div > .material-symbols-outlined {
        display: none;
    }
}

html[x-cloak] .fd-direct-email-dialog[x-show] {
    display: flex !important;
}

/* Direct user email workflow. */
.fd-direct-email {
    --fd-email-border: #dce2ea;
    --fd-email-muted: #69758a;
    --fd-email-surface: #f7f9fc;
}

.fd-email-recipients,
.fd-email-compose,
.fd-email-result {
    border: 1px solid var(--fd-email-border);
    border-radius: 8px;
    background: #fff;
}

.fd-email-recipients {
    padding: 20px 22px;
}

.fd-email-recipients > header,
.fd-email-compose__header,
.fd-email-result > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.fd-email-recipients h2,
.fd-email-compose h2,
.fd-email-result h2,
.fd-direct-email-dialog h3 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

.fd-email-recipients header p,
.fd-email-compose__header p,
.fd-email-result header p {
    margin: 4px 0 0;
    color: var(--fd-email-muted);
    font-size: 13px;
}

.fd-email-recipients > header > span {
    flex: none;
    padding: 5px 9px;
    border-radius: 6px;
    color: #17633a;
    background: #e9f8ef;
    font-size: 12px;
    font-weight: 700;
}

.fd-email-recipients__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.fd-email-recipients__list li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e6eaf0;
    border-radius: 6px;
    background: var(--fd-email-surface);
}

.fd-email-recipients__list .material-symbols-outlined {
    flex: none;
    color: #2563eb;
    font-size: 20px;
}

.fd-email-recipients__list li > span:last-child,
.fd-email-result__details li > span {
    min-width: 0;
}

.fd-email-recipients__list strong,
.fd-email-recipients__list small,
.fd-email-result__details strong,
.fd-email-result__details small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-recipients__list strong {
    color: #243047;
    font-size: 13px;
}

.fd-email-recipients__list small {
    margin-top: 2px;
    color: var(--fd-email-muted);
    font-size: 12px;
}

.fd-email-recipients__skipped {
    margin-top: 14px;
    border-top: 1px solid #e6eaf0;
    padding-top: 12px;
}

.fd-email-recipients__skipped summary {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #8a5600;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
}

.fd-email-recipients__skipped summary::-webkit-details-marker {
    display: none;
}

.fd-email-recipients__skipped summary .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-recipients__skipped ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin: 10px 0 0 25px;
    padding: 0;
    list-style: none;
}

.fd-email-recipients__skipped li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #566277;
    font-size: 12px;
}

.fd-email-compose {
    margin-top: 18px;
    overflow: hidden;
}

.fd-email-compose__header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--fd-email-border);
}

.fd-email-compose__modes {
    display: inline-grid;
    flex: none;
    grid-template-columns: repeat(2, auto);
    gap: 2px;
    padding: 3px;
    border: 1px solid #d7dde6;
    border-radius: 7px;
    background: #f2f4f8;
}

.fd-email-compose__modes button {
    min-height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 5px;
    color: #667287;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.fd-email-compose__modes button[aria-pressed="true"] {
    color: #172033;
    background: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .08);
}

.fd-email-compose__subject {
    display: grid;
    gap: 7px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--fd-email-border);
}

.fd-email-compose__subject > span,
[data-email-source-editor] > label {
    color: #344057;
    font-size: 12px;
    font-weight: 700;
}

.fd-email-compose__subject input {
    width: 100%;
    min-height: 42px;
}

.fd-email-compose__subject small,
.fd-email-compose__field-error {
    color: #b42318;
    font-size: 12px;
}

.fd-email-compose__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
    min-height: 480px;
}

.fd-email-compose__editor {
    min-width: 0;
    border-right: 1px solid var(--fd-email-border);
    background: #fff;
}

.fd-email-compose__editor .ql-toolbar.ql-snow {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid var(--fd-email-border);
    padding: 7px 10px;
    background: var(--fd-email-surface);
}

.fd-email-compose__editor .ql-container.ql-snow {
    height: 431px;
    border: 0;
    color: #172033;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
}

.fd-email-compose__editor .ql-editor {
    padding: 24px;
    line-height: 1.7;
}

.fd-email-compose__editor .ql-editor.ql-blank::before {
    left: 24px;
    right: 24px;
    color: #939caf;
    font-style: normal;
}

.fd-email-compose__editor--source > .ql-toolbar,
.fd-email-compose__editor--source > .ql-container {
    display: none;
}

[data-email-source-editor] {
    height: 100%;
    padding: 14px;
    background: #111827;
}

[data-email-source-editor] > label {
    display: block;
    margin-bottom: 8px;
    color: #b9c3d5;
}

[data-email-source-editor] textarea {
    display: block;
    width: 100%;
    min-height: 414px;
    resize: vertical;
    border: 1px solid #344057;
    border-radius: 6px;
    padding: 16px;
    color: #e8edf5;
    background: #0b1220;
    font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    tab-size: 2;
}

.fd-email-compose__preview {
    display: grid;
    min-width: 0;
    grid-template-rows: 48px 1fr;
    background: #eef2f7;
}

.fd-email-compose__preview > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid var(--fd-email-border);
    color: #344057;
    background: var(--fd-email-surface);
    font-size: 12px;
    font-weight: 700;
}

.fd-email-compose__preview small {
    color: #69758a;
    font-weight: 500;
}

.fd-email-compose__preview iframe,
.fd-direct-email-dialog__preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.fd-email-compose__fallback-note {
    margin: 0;
    padding: 10px 14px;
    color: #8a4b10;
    background: #fff7e6;
    font-size: 12px;
}

.fd-direct-email:not(.fd-direct-email--enhanced) .fd-email-compose__modes,
.fd-direct-email:not(.fd-direct-email--enhanced) [data-email-rich-editor],
.fd-direct-email:not(.fd-direct-email--enhanced) .fd-email-compose__preview {
    display: none;
}

.fd-direct-email:not(.fd-direct-email--enhanced) .fd-email-compose__workspace {
    grid-template-columns: minmax(0, 1fr);
}

.fd-direct-email:not(.fd-direct-email--enhanced) .fd-email-compose__editor {
    border-right: 0;
}

.fd-direct-email--enhanced .fd-email-compose__fallback-note {
    display: none;
}

.fd-direct-email-dialog__panel {
    width: min(920px, calc(100vw - 40px));
    max-width: 920px;
}

.fd-direct-email-dialog__summary {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1px;
    margin: 0;
    border: 1px solid #e1e6ee;
    border-radius: 7px;
    overflow: hidden;
    background: #e1e6ee;
}

.fd-direct-email-dialog__summary > div {
    min-width: 0;
    padding: 12px 14px;
    background: #f8fafc;
}

.fd-direct-email-dialog__summary dt {
    color: #707b8e;
    font-size: 11px;
}

.fd-direct-email-dialog__summary dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: #172033;
    font-size: 14px;
    font-weight: 700;
}

.fd-direct-email-dialog__recipients,
.fd-direct-email-dialog__preview {
    margin-top: 18px;
}

.fd-direct-email-dialog__recipients ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 142px;
    margin: 10px 0 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.fd-direct-email-dialog__recipients li {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #e1e6ee;
    border-radius: 6px;
}

.fd-direct-email-dialog__recipients strong,
.fd-direct-email-dialog__recipients small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-direct-email-dialog__recipients strong {
    color: #243047;
    font-size: 12px;
}

.fd-direct-email-dialog__recipients small {
    margin-top: 2px;
    color: #707b8e;
    font-size: 11px;
}

.fd-direct-email-dialog__preview iframe {
    height: 260px;
    margin-top: 10px;
    border: 1px solid #e1e6ee;
    border-radius: 6px;
}

.fd-email-result {
    overflow: hidden;
}

.fd-email-result > header {
    justify-content: flex-start;
    padding: 20px 22px;
    border-bottom: 1px solid var(--fd-email-border);
}

.fd-email-result > header > .material-symbols-outlined {
    color: #2563eb;
    font-size: 28px;
}

.fd-email-result__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    border-bottom: 1px solid var(--fd-email-border);
}

.fd-email-result__stats > div {
    padding: 18px 22px;
}

.fd-email-result__stats > div + div {
    border-left: 1px solid var(--fd-email-border);
}

.fd-email-result__stats dt {
    color: var(--fd-email-muted);
    font-size: 12px;
}

.fd-email-result__stats dd {
    margin: 5px 0 0;
    font-size: 24px;
    font-weight: 750;
}

.fd-email-result__stat--success dd { color: #18864b; }
.fd-email-result__stat--danger dd { color: #b42318; }
.fd-email-result__stat--warning dd { color: #9a5b00; }

.fd-email-result__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 20px 22px;
}

.fd-email-result__details h3 {
    margin: 0 0 9px;
    color: #243047;
    font-size: 13px;
}

.fd-email-result__details ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fd-email-result__details li {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid #edf0f4;
}

.fd-email-result__details strong { color: #243047; font-size: 12px; }
.fd-email-result__details small { color: var(--fd-email-muted); font-size: 11px; }
.fd-email-result__details code { flex: none; color: #556176; font-size: 10px; }

.fd-email-result__actions {
    display: flex;
    justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid var(--fd-email-border);
    background: var(--fd-email-surface);
}

.fd-email-result__actions a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 14px;
    border: 1px solid #ced5df;
    border-radius: 6px;
    color: #344057;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.dark .fd-direct-email {
    --fd-email-border: #374151;
    --fd-email-muted: #9ca3af;
    --fd-email-surface: #202938;
}

.dark :is(.fd-email-recipients, .fd-email-compose, .fd-email-result) {
    background: #111827;
}

.dark :is(.fd-email-recipients h2, .fd-email-compose h2, .fd-email-result h2, .fd-direct-email-dialog h3) {
    color: #f3f4f6;
}

.dark .fd-email-recipients__list li,
.dark .fd-direct-email-dialog__recipients li {
    border-color: #374151;
}

.dark :is(.fd-email-recipients__list strong, .fd-email-compose__subject > span, .fd-email-result__details h3, .fd-email-result__details strong) {
    color: #e5e7eb;
}

.dark .fd-email-compose__editor,
.dark .fd-email-compose__modes button[aria-pressed="true"] {
    background: #111827;
}

.dark .fd-email-compose__editor .ql-container.ql-snow,
.dark .fd-email-compose__modes button[aria-pressed="true"] {
    color: #f3f4f6;
}

.dark .fd-direct-email-dialog__summary {
    border-color: #374151;
    background: #374151;
}

.dark .fd-direct-email-dialog__summary > div {
    background: #1f2937;
}

.dark .fd-direct-email-dialog__summary dd {
    color: #f3f4f6;
}

@media (max-width: 1024px) {
    .fd-email-recipients__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-email-compose__workspace {
        grid-template-columns: 1fr;
    }

    .fd-email-compose__editor {
        border-right: 0;
        border-bottom: 1px solid var(--fd-email-border);
    }

    .fd-email-compose__preview iframe {
        min-height: 380px;
    }
}

@media (max-width: 640px) {
    .fd-email-recipients,
    .fd-email-compose__header,
    .fd-email-compose__subject,
    .fd-email-result > header,
    .fd-email-result__details,
    .fd-email-result__actions {
        padding-left: 14px;
        padding-right: 14px;
    }

    .fd-email-recipients > header,
    .fd-email-compose__header {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-email-compose__modes {
        align-self: flex-start;
    }

    .fd-email-recipients__list,
    .fd-email-recipients__skipped ul,
    .fd-direct-email-dialog__recipients ul,
    .fd-email-result__stats,
    .fd-email-result__details {
        grid-template-columns: 1fr;
    }

    .fd-email-result__stats > div + div {
        border-top: 1px solid var(--fd-email-border);
        border-left: 0;
    }

    .fd-direct-email-dialog__summary {
        grid-template-columns: 1fr;
    }
}
/* End direct user email workflow. */

html[x-cloak] [x-show] {
    display: none !important;
}

html[x-cloak] .fd-user-list-controls--desktop {
    display: none !important;
}

html[x-cloak] .fd-user-list-noscript-filters {
    display: block !important;
}

html[x-cloak] .fd-list-bulk-bar[x-show] {
    display: flex !important;
}

html[x-cloak] .fd-list-bulk-bar [x-show] {
    display: revert !important;
}

html[x-cloak] .fd-list-bulk-bar > button {
    display: none !important;
}

html[x-cloak] .fd-sidebar-reserved[x-show],
html[x-cloak] .fd-sidebar-brand__name[x-show],
html[x-cloak] .fd-sidebar-group__title[x-show],
html[x-cloak] .fd-sidebar-group__items[x-show],
html[x-cloak] .fd-sidebar-account__identity[x-show],
html[x-cloak] .fd-sidebar-empty[x-show] {
    display: revert !important;
}

html[x-cloak] .fd-sidebar-account__identity[x-show] {
    display: flex !important;
}

html[x-cloak] .fd-sidebar-search {
    display: none !important;
}

html[x-cloak] .fd-sidebar-group__button[x-show],
html[x-cloak] .fd-sidebar-mobile-trigger[x-show],
html[x-cloak] .fd-sidebar-account__trigger[x-show] {
    display: none !important;
}

html[x-cloak] .fd-sidebar-group__fallback-title[x-show],
html[x-cloak] .fd-sidebar-account__fallback[x-show] {
    display: block !important;
}

html[x-cloak] .fd-sidebar-account__fallback[x-show] {
    display: grid !important;
}

:root {
    --fd-radius: 6px;
    --fd-space-1: 4px;
    --fd-space-2: 8px;
    --fd-space-3: 12px;
    --fd-space-4: 16px;
    --fd-space-6: 24px;
    --fd-border: #e5e7eb;
    --fd-danger: #dc2626;
    --fd-info: #2563eb;
    --fd-success: #15803d;
    --fd-warning: #b45309;
}

.fd-a11y-status {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

.fd-page {
    margin-inline: auto;
    max-width: 1120px;
    width: 100%;
}

.fd-workflow {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-6);
    max-width: 1120px;
}

.fd-page-intro {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-3);
}

.fd-page-intro__icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 2rem;
}

.fd-page-intro h1 {
    color: var(--color-font-important-light, #111827);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    margin: 0;
}

.fd-page-intro p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: var(--fd-space-1) 0 0;
}

.fd-object-summary > strong {
    display: block;
    margin-bottom: var(--fd-space-3);
}

.fd-object-summary ul {
    display: grid;
    gap: var(--fd-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-object-summary li {
    align-items: center;
    border-top: 1px solid var(--fd-border);
    display: flex;
    gap: var(--fd-space-3);
    justify-content: space-between;
    padding-top: var(--fd-space-2);
}

.fd-object-summary__identity {
    display: grid;
    gap: var(--fd-space-1);
    min-width: 0;
}

.fd-object-summary__identity small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow-wrap: anywhere;
}

.fd-object-summary__state {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--fd-space-2);
}

.fd-object-summary .fd-object-summary__empty {
    color: var(--color-font-subtle-light, #6b7280);
    justify-content: flex-start;
}

.fd-form-errors {
    border: 1px solid color-mix(in srgb, var(--fd-danger) 30%, transparent);
    border-radius: var(--fd-radius);
    color: var(--fd-danger);
    padding: var(--fd-space-4);
}

.fd-form-errors ul {
    display: grid;
    gap: var(--fd-space-1);
    margin: var(--fd-space-2) 0 0;
    padding-left: var(--fd-space-6);
}

.fd-action-bar {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    justify-content: flex-end;
}

.fd-section {
    border-bottom: 1px solid var(--fd-border);
    display: grid;
    gap: var(--fd-space-4);
    padding-bottom: var(--fd-space-3);
}

.fd-section__header h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.fd-section__header p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.875rem;
    margin: var(--fd-space-1) 0 0;
}

.fd-status-badge {
    border: 1px solid transparent;
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: 0 var(--fd-space-2);
    white-space: nowrap;
}

.fd-status-badge--success {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: var(--fd-success);
}

.fd-status-badge--info {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: var(--fd-info);
}

.fd-status-badge--warning {
    background: #fef3c7;
    border-color: #fde68a;
    color: var(--fd-warning);
}

.fd-status-badge--danger {
    background: #fee2e2;
    border-color: #fecaca;
    color: var(--fd-danger);
}

.fd-status-badge--disabled,
.fd-status-badge--neutral {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #4b5563;
}

.fd-change-preview {
    background: #f9fafb;
    border: 1px solid var(--fd-border);
    border-radius: var(--fd-radius);
    padding: var(--fd-space-4);
}

.fd-change-preview dl {
    display: grid;
    gap: var(--fd-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.fd-change-preview dt,
.fd-stat span,
.fd-stat small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
}

.fd-change-preview dd {
    font-weight: 600;
    margin: var(--fd-space-1) 0 0;
}

.fd-change-preview__impact {
    border-top: 1px solid var(--fd-border);
    margin: var(--fd-space-4) 0 0;
    padding-top: var(--fd-space-3);
}

.fd-empty-state {
    align-items: center;
    border: 1px dashed var(--fd-border);
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-2);
    padding: var(--fd-space-6);
    text-align: center;
}

.fd-empty-state strong {
    color: var(--color-font-important-light, #111827);
}

.fd-empty-state p,
.fd-message p {
    margin: 0;
}

.fd-message {
    border: 1px solid;
    border-radius: var(--fd-radius);
    display: grid;
    gap: var(--fd-space-1);
    padding: var(--fd-space-4);
}

.fd-message--success { border-color: #bbf7d0; color: var(--fd-success); }
.fd-message--info { border-color: #bfdbfe; color: var(--fd-info); }
.fd-message--warning { border-color: #fde68a; color: var(--fd-warning); }
.fd-message--danger { border-color: #fecaca; color: var(--fd-danger); }

.fd-stat {
    border-left: 3px solid var(--fd-info);
    display: grid;
    gap: var(--fd-space-1);
    padding-left: var(--fd-space-3);
}

.fd-stat strong {
    font-size: 1.25rem;
}

.dark .fd-page-intro h1 {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-page-intro p,
.dark .fd-object-summary small,
.dark .fd-section__header p,
.dark .fd-change-preview dt,
.dark .fd-stat span,
.dark .fd-stat small,
.dark .fd-object-summary .fd-object-summary__empty {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-section__header h2,
.dark .fd-empty-state strong {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-section,
.dark .fd-change-preview__impact {
    border-color: var(--color-base-800, #1f2937);
}

.dark .fd-change-preview {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-empty-state {
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-object-summary li {
    border-color: var(--color-base-800, #1f2937);
}

@media (max-width: 767px) {
    .fd-action-bar {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .fd-action-bar > * {
        width: 100%;
    }

    .fd-object-summary li {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--fd-space-1);
    }

    .fd-object-summary small {
        text-align: left;
    }

    .fd-object-summary__state {
        justify-content: space-between;
        width: 100%;
    }

    .fd-change-preview dl {
        grid-template-columns: 1fr;
    }
}

/* Subscription detail */
.fd-subscription-detail {
    --fd-subscription-border: #e2e7ef;
    --fd-subscription-muted: #687386;
    --fd-subscription-soft: #f5f7fa;
    --fd-subscription-surface: #ffffff;
    --fd-subscription-text: #172033;
    color: var(--fd-subscription-text);
    display: grid;
    gap: 18px;
    min-width: 0;
    padding-bottom: 24px;
}

.fd-subscription-detail *,
.fd-subscription-detail *::before,
.fd-subscription-detail *::after {
    box-sizing: border-box;
}

.fd-subscription-detail button {
    font: inherit;
}

.fd-subscription-detail a:focus-visible,
.fd-subscription-detail button:focus-visible {
    outline: 3px solid rgb(37 99 235 / 24%);
    outline-offset: 2px;
}

.fd-subscription-detail__back {
    align-items: center;
    border-radius: 6px;
    color: var(--fd-subscription-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    justify-self: start;
    min-height: 36px;
    padding: 7px 10px;
    text-decoration: none;
}

.fd-subscription-detail__back:hover {
    background: var(--fd-subscription-soft);
    color: var(--fd-subscription-text);
}

.fd-subscription-detail__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-subscription-detail__header,
.fd-subscription-detail__period,
.fd-subscription-detail__record,
.fd-subscription-detail__rail > section {
    background: var(--fd-subscription-surface);
    border: 1px solid var(--fd-subscription-border);
    border-radius: 8px;
}

.fd-subscription-detail__header {
    overflow: hidden;
    padding: 26px 28px 0;
}

.fd-subscription-detail__header-main {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.fd-subscription-detail__identity {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.fd-subscription-detail__icon {
    align-items: center;
    background: #eaf1ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 56px;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.fd-subscription-detail__icon .material-symbols-outlined {
    font-size: 30px;
}

.fd-subscription-detail__heading {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.fd-subscription-detail__heading-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-subscription-detail__heading h1 {
    color: var(--fd-subscription-text);
    font-size: 25px;
    font-weight: 720;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-subscription-detail__plan-id {
    align-items: center;
    align-self: start;
    background: #eef4ff;
    border-radius: 5px;
    color: #1d4ed8;
    display: inline-flex;
    font-size: 12px;
    font-weight: 650;
    justify-self: start;
    min-height: 24px;
    padding: 3px 8px;
}

.fd-subscription-detail__plan-id.is-unknown {
    background: #f3f4f6;
    color: #6b7280;
}

.fd-subscription-detail__id {
    align-items: center;
    color: var(--fd-subscription-muted);
    display: flex;
    gap: 6px;
    min-width: 0;
}

.fd-subscription-detail__id code {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.fd-subscription-detail__icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--fd-subscription-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

.fd-subscription-detail__icon-button:hover {
    background: var(--fd-subscription-soft);
    border-color: var(--fd-subscription-border);
    color: var(--fd-subscription-text);
}

.fd-subscription-detail__icon-button .material-symbols-outlined {
    font-size: 17px;
}

.fd-subscription-detail__primary-action {
    align-items: center;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    min-height: 42px;
    padding: 9px 15px;
    text-decoration: none;
}

.fd-subscription-detail__primary-action:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.fd-subscription-detail__primary-action .material-symbols-outlined {
    font-size: 19px;
}

.fd-subscription-detail__status-summary {
    color: var(--fd-subscription-muted);
    font-size: 13px;
    line-height: 1.65;
    margin: 16px 0 22px 72px;
    max-width: 760px;
}

.fd-subscription-detail__metrics {
    border-top: 1px solid var(--fd-subscription-border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 -28px;
}

.fd-subscription-detail__metrics > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 17px 20px 19px;
}

.fd-subscription-detail__metrics > div + div {
    border-left: 1px solid var(--fd-subscription-border);
}

.fd-subscription-detail__metrics > div.is-attention {
    background: #fff9eb;
    box-shadow: inset 0 3px 0 #f59e0b;
}

.fd-subscription-detail__metrics > div.is-attention dd {
    color: #a84d0f;
}

.fd-subscription-detail__metrics dt,
.fd-subscription-detail__metrics dd,
.fd-subscription-detail__metrics small {
    margin: 0;
}

.fd-subscription-detail__metrics dt {
    color: var(--fd-subscription-muted);
    font-size: 11px;
    font-weight: 650;
}

.fd-subscription-detail__metrics dd {
    color: var(--fd-subscription-text);
    font-size: 17px;
    font-weight: 720;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.fd-subscription-detail__metrics small {
    color: var(--fd-subscription-muted);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.fd-subscription-detail__workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.7fr);
    min-width: 0;
}

.fd-subscription-detail__main,
.fd-subscription-detail__rail {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.fd-subscription-detail__period,
.fd-subscription-detail__record,
.fd-subscription-detail__rail > section {
    min-width: 0;
    padding: 22px;
}

.fd-subscription-detail__period > header,
.fd-subscription-detail__record > header,
.fd-subscription-detail__rail section > header {
    margin-bottom: 18px;
}

.fd-subscription-detail__period > header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.fd-subscription-detail h2 {
    color: var(--fd-subscription-text);
    font-size: 16px;
    font-weight: 720;
    line-height: 1.35;
    margin: 0;
}

.fd-subscription-detail section header p {
    color: var(--fd-subscription-muted);
    font-size: 12px;
    line-height: 1.55;
    margin: 5px 0 0;
}

.fd-subscription-detail__period-progress {
    display: grid;
    gap: 9px;
    margin-bottom: 22px;
}

.fd-subscription-detail__period-progress progress {
    appearance: none;
    background: #e8edf5;
    border: 0;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    width: 100%;
}

.fd-subscription-detail__period-progress progress::-webkit-progress-bar {
    background: #e8edf5;
}

.fd-subscription-detail__period-progress progress::-webkit-progress-value {
    background: #2563eb;
    border-radius: 4px;
}

.fd-subscription-detail__period-progress progress::-moz-progress-bar {
    background: #2563eb;
    border-radius: 4px;
}

.fd-subscription-detail__period-progress span {
    color: var(--fd-subscription-muted);
    font-size: 12px;
    font-weight: 600;
    justify-self: end;
}

.fd-subscription-detail__period-boundaries {
    border-bottom: 1px solid var(--fd-subscription-border);
    border-top: 1px solid var(--fd-subscription-border);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.fd-subscription-detail__period-boundaries > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 17px 4px;
}

.fd-subscription-detail__period-boundaries > div + div {
    border-left: 1px solid var(--fd-subscription-border);
    padding-left: 20px;
}

.fd-subscription-detail__period-boundaries dt {
    align-items: center;
    color: var(--fd-subscription-muted);
    display: flex;
    font-size: 11px;
    font-weight: 650;
    gap: 6px;
}

.fd-subscription-detail__period-boundaries dt .material-symbols-outlined {
    color: #2563eb;
    font-size: 17px;
}

.fd-subscription-detail__period-boundaries dd {
    color: var(--fd-subscription-text);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.fd-subscription-detail__period-boundaries small {
    color: var(--fd-subscription-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.fd-subscription-detail__attention {
    align-items: flex-start;
    background: #f7f9fc;
    border: 1px solid var(--fd-subscription-border);
    border-radius: 6px;
    color: #4b5563;
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding: 12px 14px;
}

.fd-subscription-detail__attention--warning {
    background: #fff9eb;
    border-color: #f3d49a;
    color: #92400e;
}

.fd-subscription-detail__attention > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 19px;
    margin-top: 1px;
}

.fd-subscription-detail__attention > span:last-child {
    display: grid;
    gap: 3px;
}

.fd-subscription-detail__attention strong {
    font-size: 12px;
}

.fd-subscription-detail__attention small {
    font-size: 11px;
    line-height: 1.5;
}

.fd-subscription-detail__record dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.fd-subscription-detail__record dl > div {
    border-top: 1px solid var(--fd-subscription-border);
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 16px 4px;
}

.fd-subscription-detail__record dl > div:nth-child(even) {
    border-left: 1px solid var(--fd-subscription-border);
    padding-left: 20px;
}

.fd-subscription-detail__record dt {
    color: var(--fd-subscription-muted);
    font-size: 11px;
    font-weight: 650;
}

.fd-subscription-detail__record dd {
    align-items: center;
    color: var(--fd-subscription-text);
    display: flex;
    font-size: 14px;
    font-weight: 680;
    gap: 5px;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-subscription-detail__record dd.is-empty {
    color: var(--fd-subscription-muted);
    font-weight: 600;
}

.fd-subscription-detail__record dd code {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.fd-subscription-detail__record dl small {
    color: var(--fd-subscription-muted);
    font-size: 11px;
    line-height: 1.45;
}

.fd-subscription-detail__owner-card {
    align-items: center;
    background: var(--fd-subscription-soft);
    border-radius: 6px;
    color: var(--fd-subscription-text);
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    min-height: 68px;
    padding: 12px;
    text-decoration: none;
}

.fd-subscription-detail__owner-card:not(.is-static):hover {
    background: #edf3ff;
}

.fd-subscription-detail__owner-card.is-static {
    grid-template-columns: 42px minmax(0, 1fr);
}

.fd-subscription-detail__owner-avatar {
    align-items: center;
    background: #dce9ff;
    border-radius: 50%;
    color: #1d4ed8;
    display: inline-flex;
    font-size: 14px;
    font-weight: 750;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.fd-subscription-detail__owner-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-subscription-detail__owner-copy strong,
.fd-subscription-detail__owner-copy small,
.fd-subscription-detail__owner-copy code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscription-detail__owner-copy strong {
    color: var(--fd-subscription-text);
    font-size: 13px;
}

.fd-subscription-detail__owner-copy small,
.fd-subscription-detail__owner-copy code {
    color: var(--fd-subscription-muted);
    font-size: 11px;
}

.fd-subscription-detail__owner-card > .material-symbols-outlined {
    color: var(--fd-subscription-muted);
    font-size: 18px;
}

.fd-subscription-detail__timeline ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-subscription-detail__timeline li {
    display: grid;
    gap: 11px;
    grid-template-columns: 30px minmax(0, 1fr);
    padding-bottom: 17px;
    position: relative;
}

.fd-subscription-detail__timeline li:last-child {
    padding-bottom: 0;
}

.fd-subscription-detail__timeline li:not(:last-child)::before {
    background: var(--fd-subscription-border);
    bottom: -2px;
    content: "";
    left: 14px;
    position: absolute;
    top: 30px;
    width: 1px;
}

.fd-subscription-detail__timeline-icon {
    align-items: center;
    background: var(--fd-subscription-soft);
    border: 1px solid var(--fd-subscription-border);
    border-radius: 50%;
    color: var(--fd-subscription-muted);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    position: relative;
    width: 30px;
    z-index: 1;
}

.fd-subscription-detail__timeline li.is-done .fd-subscription-detail__timeline-icon {
    background: #eaf1ff;
    border-color: #bed4ff;
    color: #2563eb;
}

.fd-subscription-detail__timeline li.is-scheduled .fd-subscription-detail__timeline-icon {
    background: transparent;
    border-color: #93c5fd;
    border-style: dashed;
    color: #2563eb;
}

.fd-subscription-detail__timeline-icon .material-symbols-outlined {
    font-size: 16px;
}

.fd-subscription-detail__timeline li > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.fd-subscription-detail__timeline strong {
    color: var(--fd-subscription-text);
    font-size: 12px;
}

.fd-subscription-detail__timeline small,
.fd-subscription-detail__timeline time {
    color: var(--fd-subscription-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.fd-subscription-detail__toast {
    background: #172033;
    border-radius: 6px;
    bottom: 24px;
    box-shadow: 0 12px 30px rgb(15 23 42 / 18%);
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    left: 50%;
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 14px;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    z-index: 1000;
}

.dark .fd-subscription-detail {
    --fd-subscription-border: #334155;
    --fd-subscription-muted: #94a3b8;
    --fd-subscription-soft: #182235;
    --fd-subscription-surface: #0f172a;
    --fd-subscription-text: #f8fafc;
}

.dark .fd-subscription-detail__icon,
.dark .fd-subscription-detail__timeline li.is-done .fd-subscription-detail__timeline-icon {
    background: #172c52;
    border-color: #31558f;
    color: #93b4ff;
}

.dark .fd-subscription-detail__metrics > div.is-attention {
    background: #2b2112;
    box-shadow: inset 0 3px 0 #f59e0b;
}

.dark .fd-subscription-detail__metrics > div.is-attention dd {
    color: #fbbf24;
}

.dark .fd-subscription-detail__timeline li.is-scheduled .fd-subscription-detail__timeline-icon {
    border-color: #4f79b7;
    color: #93b4ff;
}

.dark .fd-subscription-detail__plan-id {
    background: #172c52;
    color: #b9ceff;
}

.dark .fd-subscription-detail__plan-id.is-unknown {
    background: #263244;
    color: #cbd5e1;
}

.dark .fd-subscription-detail__primary-action {
    background: #3b72ee;
    border-color: #3b72ee;
}

.dark .fd-subscription-detail__primary-action:hover {
    background: #4c82f4;
    border-color: #4c82f4;
}

.dark .fd-subscription-detail__period-progress progress,
.dark .fd-subscription-detail__period-progress progress::-webkit-progress-bar {
    background: #263244;
}

.dark .fd-subscription-detail__attention {
    background: #172033;
    color: #cbd5e1;
}

.dark .fd-subscription-detail__attention--warning {
    background: #422006;
    border-color: #854d0e;
    color: #fde68a;
}

.dark .fd-subscription-detail__owner-card:not(.is-static):hover {
    background: #172c52;
}

.dark .fd-subscription-detail__owner-avatar {
    background: #172c52;
    color: #b9ceff;
}

.dark .fd-subscription-detail__toast {
    background: #e2e8f0;
    color: #0f172a;
}

@media (max-width: 1100px) {
    .fd-subscription-detail__workspace {
        grid-template-columns: 1fr;
    }

    .fd-subscription-detail__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fd-subscription-detail {
        gap: 14px;
    }

    .fd-subscription-detail__header {
        padding: 20px 18px 0;
    }

    .fd-subscription-detail__header-main {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-subscription-detail__identity {
        gap: 12px;
    }

    .fd-subscription-detail__icon {
        flex-basis: 46px;
        height: 46px;
        width: 46px;
    }

    .fd-subscription-detail__icon .material-symbols-outlined {
        font-size: 25px;
    }

    .fd-subscription-detail__heading h1 {
        font-size: 21px;
    }

    .fd-subscription-detail__primary-action {
        width: 100%;
    }

    .fd-subscription-detail__status-summary {
        margin: 14px 0 18px;
    }

    .fd-subscription-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 -18px;
    }

    .fd-subscription-detail__metrics > div + div {
        border-left: 0;
    }

    .fd-subscription-detail__metrics > div:nth-child(even) {
        border-left: 1px solid var(--fd-subscription-border);
    }

    .fd-subscription-detail__metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--fd-subscription-border);
    }

    .fd-subscription-detail__metrics > div {
        padding: 15px 16px;
    }

    .fd-subscription-detail__main,
    .fd-subscription-detail__rail {
        gap: 14px;
    }

    .fd-subscription-detail__rail {
        grid-template-columns: 1fr;
    }

    .fd-subscription-detail__period,
    .fd-subscription-detail__record,
    .fd-subscription-detail__rail > section {
        padding: 18px;
    }

    .fd-subscription-detail__period > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-subscription-detail__period-boundaries,
    .fd-subscription-detail__record dl {
        grid-template-columns: 1fr;
    }

    .fd-subscription-detail__period-boundaries > div + div,
    .fd-subscription-detail__record dl > div:nth-child(even) {
        border-left: 0;
        padding-left: 4px;
    }

    .fd-subscription-detail__period-boundaries > div + div {
        border-top: 1px solid var(--fd-subscription-border);
    }

    .fd-subscription-detail__owner-copy strong,
    .fd-subscription-detail__owner-copy small,
    .fd-subscription-detail__owner-copy code {
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }
}

/* Payment detail workspace */
.fd-payment-detail {
    --fd-payment-detail-border: #e2e7ef;
    --fd-payment-detail-muted: #687386;
    --fd-payment-detail-soft: #f5f7fa;
    --fd-payment-detail-surface: #ffffff;
    --fd-payment-detail-text: #172033;
    color: var(--fd-payment-detail-text);
    display: grid;
    gap: 16px;
    margin: 0 auto;
    max-width: 1600px;
    padding: 8px 0 28px;
    width: 100%;
}

.fd-payment-detail *,
.fd-payment-detail *::before,
.fd-payment-detail *::after {
    box-sizing: border-box;
}

.fd-payment-detail button {
    font: inherit;
}

.fd-payment-detail a:focus-visible,
.fd-payment-detail button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.fd-payment-detail__back {
    align-items: center;
    border-radius: 6px;
    color: var(--fd-payment-detail-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    justify-self: start;
    min-height: 38px;
    padding: 0 10px;
    text-decoration: none;
}

.fd-payment-detail__back:hover {
    background: var(--fd-payment-detail-soft);
    color: var(--fd-payment-detail-text);
}

.fd-payment-detail__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-payment-detail__header,
.fd-payment-detail__flow,
.fd-payment-detail__fulfillment,
.fd-payment-detail__rail > section {
    background: var(--fd-payment-detail-surface);
    border: 1px solid var(--fd-payment-detail-border);
    border-radius: 8px;
}

.fd-payment-detail__header {
    overflow: hidden;
    padding: 24px 28px 0;
}

.fd-payment-detail__identity {
    align-items: flex-start;
    display: flex;
    gap: 16px;
}

.fd-payment-detail__icon {
    align-items: center;
    background: #eaf1ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 58px;
    height: 58px;
    justify-content: center;
}

.fd-payment-detail__icon .material-symbols-outlined {
    font-size: 31px;
}

.fd-payment-detail__heading {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.fd-payment-detail__heading-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-payment-detail__heading h1 {
    color: var(--fd-payment-detail-text);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-payment-detail__product-type {
    background: var(--fd-payment-detail-soft);
    border-radius: 4px;
    color: var(--fd-payment-detail-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    justify-self: start;
    line-height: 1;
    padding: 5px 7px;
}

.fd-payment-detail__id {
    align-items: center;
    color: var(--fd-payment-detail-muted);
    display: flex;
    gap: 5px;
    min-width: 0;
}

.fd-payment-detail__id > code {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-payment-detail__icon-button,
.fd-payment-detail__identifiers button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--fd-payment-detail-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.fd-payment-detail__icon-button:hover,
.fd-payment-detail__identifiers button:hover {
    background: var(--fd-payment-detail-soft);
    border-color: var(--fd-payment-detail-border);
    color: var(--fd-payment-detail-text);
}

.fd-payment-detail__icon-button .material-symbols-outlined,
.fd-payment-detail__identifiers button .material-symbols-outlined {
    font-size: 18px;
}

.fd-payment-detail__status-summary {
    color: var(--fd-payment-detail-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 16px 0 22px 74px;
}

.fd-payment-detail__metrics {
    border-top: 1px solid var(--fd-payment-detail-border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 -28px;
}

.fd-payment-detail__metrics > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 17px 22px 19px;
}

.fd-payment-detail__metrics > div + div {
    border-left: 1px solid var(--fd-payment-detail-border);
}

.fd-payment-detail__metrics dt,
.fd-payment-detail__metrics dd,
.fd-payment-detail__metrics small {
    margin: 0;
}

.fd-payment-detail__metrics dt {
    color: var(--fd-payment-detail-muted);
    font-size: 12px;
    font-weight: 650;
}

.fd-payment-detail__metrics dd {
    color: var(--fd-payment-detail-text);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.fd-payment-detail__metrics small {
    color: var(--fd-payment-detail-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-payment-detail__workspace {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.72fr);
}

.fd-payment-detail__main,
.fd-payment-detail__rail {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.fd-payment-detail__flow,
.fd-payment-detail__fulfillment,
.fd-payment-detail__rail > section {
    overflow: hidden;
}

.fd-payment-detail__flow > header,
.fd-payment-detail__fulfillment > header,
.fd-payment-detail__rail section > header {
    padding: 20px 22px;
}

.fd-payment-detail__flow h2,
.fd-payment-detail__fulfillment h2,
.fd-payment-detail__rail h2,
.fd-payment-detail__result h3 {
    color: var(--fd-payment-detail-text);
    font-weight: 750;
    margin: 0;
}

.fd-payment-detail__flow h2,
.fd-payment-detail__fulfillment h2,
.fd-payment-detail__rail h2 {
    font-size: 16px;
}

.fd-payment-detail__flow header p,
.fd-payment-detail__fulfillment header p,
.fd-payment-detail__rail header p,
.fd-payment-detail__result header p {
    color: var(--fd-payment-detail-muted);
    font-size: 12px;
    line-height: 1.55;
    margin: 4px 0 0;
}

.fd-payment-detail__flow ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 8px 24px 24px;
}

.fd-payment-detail__flow li {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 42px minmax(0, 1fr);
    min-width: 0;
    padding-right: 26px;
    position: relative;
}

.fd-payment-detail__flow li:not(:last-child)::after {
    background: var(--fd-payment-detail-border);
    content: "";
    height: 2px;
    left: 42px;
    position: absolute;
    right: 0;
    top: 20px;
    z-index: 0;
}

.fd-payment-detail__flow-icon {
    align-items: center;
    background: var(--fd-payment-detail-soft);
    border: 2px solid var(--fd-payment-detail-border);
    border-radius: 50%;
    color: var(--fd-payment-detail-muted);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    position: relative;
    width: 42px;
    z-index: 1;
}

.fd-payment-detail__flow-icon .material-symbols-outlined {
    font-size: 20px;
}

.fd-payment-detail__flow .is-done .fd-payment-detail__flow-icon {
    background: #2563eb;
    border-color: #dbeafe;
    color: #fff;
}

.fd-payment-detail__flow .is-done:not(:last-child)::after {
    background: #93c5fd;
}

.fd-payment-detail__flow .is-current .fd-payment-detail__flow-icon {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.fd-payment-detail__flow .is-danger .fd-payment-detail__flow-icon {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.fd-payment-detail__flow li > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.fd-payment-detail__flow li strong {
    font-size: 13px;
}

.fd-payment-detail__flow li small {
    color: var(--fd-payment-detail-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-payment-detail__fulfillment > header {
    align-items: flex-start;
    border-bottom: 1px solid var(--fd-payment-detail-border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.fd-payment-detail__fulfillment-callout {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    margin: 18px 22px 0;
    padding: 14px 16px;
}

.fd-payment-detail__fulfillment-callout > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 21px;
}

.fd-payment-detail__fulfillment-callout > span:last-child {
    display: grid;
    gap: 3px;
}

.fd-payment-detail__fulfillment-callout strong {
    font-size: 13px;
}

.fd-payment-detail__fulfillment-callout small {
    font-size: 12px;
    line-height: 1.55;
}

.fd-payment-detail__fulfillment-callout--success {
    background: #ecfdf3;
    border-left: 3px solid #16a34a;
    color: #166534;
}

.fd-payment-detail__fulfillment-callout--warning {
    background: #fff7ed;
    border-left: 3px solid #f97316;
    color: #9a3412;
}

.fd-payment-detail__fulfillment-callout--danger {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    color: #991b1b;
}

.fd-payment-detail__fulfillment-callout--neutral {
    background: var(--fd-payment-detail-soft);
    border-left: 3px solid #94a3b8;
    color: var(--fd-payment-detail-text);
}

.fd-payment-detail__result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.fd-payment-detail__result {
    min-width: 0;
    padding: 0 22px 22px;
}

.fd-payment-detail__result + .fd-payment-detail__result {
    border-left: 1px solid var(--fd-payment-detail-border);
}

.fd-payment-detail__result > header {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    min-height: 70px;
    padding: 0 0 14px;
}

.fd-payment-detail__result > header > .material-symbols-outlined {
    color: #2563eb;
    font-size: 22px;
    margin-top: 1px;
}

.fd-payment-detail__result h3 {
    font-size: 14px;
}

.fd-payment-detail__result-link {
    align-items: center;
    background: var(--fd-payment-detail-soft);
    color: inherit;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 78px;
    padding: 12px 14px;
    text-decoration: none;
}

.fd-payment-detail__result-link:not(.fd-payment-detail__result-link--static):hover {
    background: #eef4ff;
}

.fd-payment-detail__result-link > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-payment-detail__result-link small,
.fd-payment-detail__result-link span span,
.fd-payment-detail__result-note,
.fd-payment-detail__result-empty small {
    color: var(--fd-payment-detail-muted);
    font-size: 11px;
}

.fd-payment-detail__result-link strong {
    font-size: 14px;
}

.fd-payment-detail__result-status {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
}

.fd-payment-detail__result-status > .material-symbols-outlined {
    color: var(--fd-payment-detail-muted);
    font-size: 18px;
}

.fd-payment-detail__result-note {
    line-height: 1.5;
    margin: 9px 0 0;
}

.fd-payment-detail__result-empty {
    background: var(--fd-payment-detail-soft);
    display: grid;
    gap: 4px;
    min-height: 78px;
    padding: 14px;
}

.fd-payment-detail__result-empty strong {
    font-size: 13px;
}

.fd-payment-detail__result-empty--attention {
    background: #fef2f2;
    color: #991b1b;
}

.fd-payment-detail__result-empty--attention small {
    color: #b91c1c;
}

.fd-payment-detail__evidence {
    border-bottom: 1px solid var(--fd-payment-detail-border);
    border-top: 1px solid var(--fd-payment-detail-border);
    margin: 0;
}

.fd-payment-detail__evidence > div {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(74px, 0.55fr) minmax(0, 1fr) auto;
    padding: 12px 0;
}

.fd-payment-detail__evidence > div + div {
    border-top: 1px solid var(--fd-payment-detail-border);
}

.fd-payment-detail__evidence dt {
    color: var(--fd-payment-detail-muted);
    font-size: 11px;
    font-weight: 650;
}

.fd-payment-detail__evidence dd {
    display: grid;
    gap: 2px;
    margin: 0;
    min-width: 0;
}

.fd-payment-detail__evidence dd strong {
    font-size: 13px;
}

.fd-payment-detail__evidence dd small,
.fd-payment-detail__evidence dd span {
    color: var(--fd-payment-detail-muted);
    font-size: 11px;
}

.fd-payment-detail__evidence a {
    align-items: center;
    color: #2563eb;
    display: inline-flex;
    font-size: 12px;
    font-weight: 650;
    gap: 3px;
    text-decoration: none;
}

.fd-payment-detail__evidence a .material-symbols-outlined {
    font-size: 16px;
}

.fd-payment-detail__relations,
.fd-payment-detail__identifiers,
.fd-payment-detail__future-actions,
.fd-payment-detail__timeline {
    min-width: 0;
}

.fd-payment-detail__owner {
    align-items: center;
    border-top: 1px solid var(--fd-payment-detail-border);
    color: inherit;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 84px;
    padding: 15px 20px;
    text-decoration: none;
}

.fd-payment-detail__owner:not(.fd-payment-detail__owner--static):hover {
    background: var(--fd-payment-detail-soft);
}

.fd-payment-detail__owner-avatar {
    align-items: center;
    background: #dbeafe;
    border-radius: 50%;
    color: #1d4ed8;
    display: inline-flex;
    font-size: 15px;
    font-weight: 750;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.fd-payment-detail__owner-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-payment-detail__owner-copy strong,
.fd-payment-detail__owner-copy small,
.fd-payment-detail__owner-copy code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-payment-detail__owner-copy strong {
    font-size: 13px;
}

.fd-payment-detail__owner-copy small,
.fd-payment-detail__owner-copy code {
    color: var(--fd-payment-detail-muted);
    font-size: 11px;
}

.fd-payment-detail__owner > .material-symbols-outlined {
    color: var(--fd-payment-detail-muted);
    font-size: 18px;
}

.fd-payment-detail__identifiers dl {
    border-top: 1px solid var(--fd-payment-detail-border);
    margin: 0;
    padding: 0 20px;
}

.fd-payment-detail__identifiers dl > div {
    display: grid;
    gap: 6px;
    padding: 13px 0;
}

.fd-payment-detail__identifiers dl > div + div {
    border-top: 1px solid var(--fd-payment-detail-border);
}

.fd-payment-detail__identifiers dt {
    color: var(--fd-payment-detail-muted);
    font-size: 11px;
    font-weight: 650;
}

.fd-payment-detail__identifiers dd {
    align-items: center;
    display: flex;
    gap: 5px;
    margin: 0;
    min-width: 0;
}

.fd-payment-detail__identifiers code,
.fd-payment-detail__identifiers dd > span {
    color: var(--fd-payment-detail-text);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-payment-detail__future-actions-heading {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.fd-payment-detail__future-actions-heading > span {
    background: var(--fd-payment-detail-soft);
    border: 1px solid var(--fd-payment-detail-border);
    border-radius: 4px;
    color: var(--fd-payment-detail-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
}

.fd-payment-detail__future-actions-list {
    border-top: 1px solid var(--fd-payment-detail-border);
    display: grid;
    gap: 8px;
    padding: 14px 16px 16px;
}

.fd-payment-detail__future-actions-list button {
    align-items: center;
    background: var(--fd-payment-detail-soft);
    border: 1px solid var(--fd-payment-detail-border);
    border-radius: 6px;
    color: var(--fd-payment-detail-text);
    cursor: not-allowed;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 56px;
    opacity: 0.72;
    padding: 9px 11px;
    text-align: left;
    width: 100%;
}

.fd-payment-detail__future-actions-list button > .material-symbols-outlined {
    color: var(--fd-payment-detail-muted);
    font-size: 21px;
    justify-self: center;
}

.fd-payment-detail__future-actions-list button > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-payment-detail__future-actions-list strong {
    font-size: 12px;
    font-weight: 700;
}

.fd-payment-detail__future-actions-list small {
    color: var(--fd-payment-detail-muted);
    font-size: 10px;
    line-height: 1.45;
}

.fd-payment-detail__timeline ol {
    border-top: 1px solid var(--fd-payment-detail-border);
    list-style: none;
    margin: 0;
    padding: 17px 20px 4px;
}

.fd-payment-detail__timeline li {
    display: grid;
    gap: 11px;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 68px;
    position: relative;
}

.fd-payment-detail__timeline li:not(:last-child)::after {
    background: var(--fd-payment-detail-border);
    bottom: 0;
    content: "";
    left: 16px;
    position: absolute;
    top: 32px;
    width: 2px;
}

.fd-payment-detail__timeline-icon {
    align-items: center;
    background: var(--fd-payment-detail-soft);
    border: 1px solid var(--fd-payment-detail-border);
    border-radius: 50%;
    color: var(--fd-payment-detail-muted);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    position: relative;
    width: 34px;
    z-index: 1;
}

.fd-payment-detail__timeline .is-done .fd-payment-detail__timeline-icon {
    background: #eaf1ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.fd-payment-detail__timeline-icon .material-symbols-outlined {
    font-size: 17px;
}

.fd-payment-detail__timeline li > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-top: 1px;
}

.fd-payment-detail__timeline strong {
    font-size: 12px;
}

.fd-payment-detail__timeline small,
.fd-payment-detail__timeline time {
    color: var(--fd-payment-detail-muted);
    font-size: 11px;
}

.fd-payment-detail__toast {
    background: #172033;
    border-radius: 6px;
    bottom: 24px;
    color: #fff;
    font-size: 13px;
    left: 50%;
    padding: 10px 15px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1000;
}

.dark .fd-payment-detail {
    --fd-payment-detail-border: #303846;
    --fd-payment-detail-muted: #9ca6b7;
    --fd-payment-detail-soft: #1d2430;
    --fd-payment-detail-surface: #111827;
    --fd-payment-detail-text: #f3f4f6;
}

.dark .fd-payment-detail__icon,
.dark .fd-payment-detail__timeline .is-done .fd-payment-detail__timeline-icon {
    background: #172554;
    border-color: #1e40af;
    color: #93c5fd;
}

.dark .fd-payment-detail__owner-avatar {
    background: #172554;
    color: #bfdbfe;
}

.dark .fd-payment-detail__flow .is-done .fd-payment-detail__flow-icon {
    border-color: #1e40af;
}

.dark .fd-payment-detail__flow .is-current .fd-payment-detail__flow-icon,
.dark .fd-payment-detail__fulfillment-callout--warning {
    background: #431407;
    border-color: #9a3412;
    color: #fed7aa;
}

.dark .fd-payment-detail__flow .is-danger .fd-payment-detail__flow-icon,
.dark .fd-payment-detail__fulfillment-callout--danger,
.dark .fd-payment-detail__result-empty--attention {
    background: #450a0a;
    border-color: #991b1b;
    color: #fecaca;
}

.dark .fd-payment-detail__fulfillment-callout--success {
    background: #052e16;
    border-color: #15803d;
    color: #bbf7d0;
}

.dark .fd-payment-detail__result-link:not(.fd-payment-detail__result-link--static):hover {
    background: #172554;
}

@media (max-width: 1180px) {
    .fd-payment-detail__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 767px) {
    .fd-payment-detail {
        gap: 12px;
        padding-top: 0;
    }

    .fd-payment-detail__header {
        padding: 18px 16px 0;
    }

    .fd-payment-detail__identity {
        gap: 12px;
    }

    .fd-payment-detail__icon {
        flex-basis: 46px;
        height: 46px;
    }

    .fd-payment-detail__icon .material-symbols-outlined {
        font-size: 25px;
    }

    .fd-payment-detail__heading h1 {
        font-size: 20px;
    }

    .fd-payment-detail__status-summary {
        margin: 14px 0 18px;
    }

    .fd-payment-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 -16px;
    }

    .fd-payment-detail__metrics > div {
        padding: 14px 16px;
    }

    .fd-payment-detail__metrics > div:nth-child(odd) {
        border-left: 0;
    }

    .fd-payment-detail__metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--fd-payment-detail-border);
    }

    .fd-payment-detail__metrics dd {
        font-size: 16px;
    }

    .fd-payment-detail__flow > header,
    .fd-payment-detail__fulfillment > header,
    .fd-payment-detail__rail section > header {
        padding: 17px 16px;
    }

    .fd-payment-detail__flow ol {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 16px 14px;
    }

    .fd-payment-detail__flow li {
        min-height: 64px;
        padding: 0 0 10px;
    }

    .fd-payment-detail__flow li:not(:last-child)::after {
        bottom: 0;
        height: auto;
        left: 20px;
        right: auto;
        top: 42px;
        width: 2px;
    }

    .fd-payment-detail__fulfillment > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-payment-detail__fulfillment-callout {
        margin: 15px 16px 0;
    }

    .fd-payment-detail__result-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-payment-detail__result {
        padding: 0 16px 18px;
    }

    .fd-payment-detail__result + .fd-payment-detail__result {
        border-left: 0;
        border-top: 1px solid var(--fd-payment-detail-border);
        padding-top: 18px;
    }

    .fd-payment-detail__rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-payment-detail__evidence > div {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .fd-payment-detail__evidence > div > dd:last-child {
        grid-column: 2;
    }
}

/* Global change-list toolbar and states. */
[data-fd-async-list] {
    position: relative;
}

.fd-list-async-progress {
    background: transparent;
    height: 3px;
    left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: sticky;
    right: 0;
    top: 0;
    transition: opacity 120ms ease;
    z-index: 60;
}

.fd-list-async-progress > span {
    animation: fd-list-progress 900ms ease-in-out infinite;
    background: var(--color-primary-600, #2563eb);
    display: block;
    height: 100%;
    transform: translateX(-100%);
    width: 42%;
}

[data-fd-async-list][aria-busy="true"] .fd-list-async-progress {
    opacity: 1;
}

[data-fd-async-list] [data-fd-async-list-fragment] {
    transition: opacity 120ms ease;
}

[data-fd-async-list][aria-busy="true"] [data-fd-async-list-fragment] {
    opacity: .78;
}

@keyframes fd-list-progress {
    from {
        transform: translateX(-105%);
    }

    to {
        transform: translateX(245%);
    }
}

.fd-list-toolbar {
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    display: grid;
    gap: var(--fd-space-3);
    margin-bottom: var(--fd-space-3);
    padding: var(--fd-space-3);
}

.fd-list-toolbar__main {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-list-search {
    align-items: center;
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    display: flex;
    flex: 1 1 320px;
    height: 40px;
    min-width: 160px;
    overflow: hidden;
}

.fd-list-search:focus-within {
    border-color: var(--color-primary-600, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-600, #2563eb) 18%, transparent);
}

.fd-list-search__icon,
.fd-list-search > a {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.fd-list-search > a:hover {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-important-light, #111827);
}

.fd-list-search input[type="search"] {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--color-font-default-light, #374151);
    flex: 1 1 auto;
    height: 38px;
    min-width: 0;
    outline: 0;
    padding: 0 var(--fd-space-2) 0 0;
    width: 100%;
}

.fd-list-search__icon .material-symbols-outlined,
.fd-list-search > a .material-symbols-outlined,
.fd-list-filter-trigger .material-symbols-outlined,
.fd-list-primary-action .material-symbols-outlined,
.fd-list-filter-chip .material-symbols-outlined,
.fd-list-filter-panel__header .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.fd-list-filter-trigger,
.fd-list-primary-action {
    align-items: center;
    border-radius: var(--fd-radius);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 600;
    gap: var(--fd-space-2);
    height: 40px;
    justify-content: center;
    max-width: min(320px, 42vw);
    min-width: 0;
    padding: 0 var(--fd-space-4);
    white-space: nowrap;
}

.fd-list-filter-trigger:first-child,
.fd-list-primary-action:first-child {
    margin-left: auto;
}

.fd-list-filter-trigger {
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    color: var(--color-font-important-light, #111827);
}

.fd-list-filter-trigger[x-cloak] {
    display: none !important;
}

.fd-list-filter-trigger:hover,
.fd-list-filter-trigger[aria-expanded="true"] {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
}

.fd-list-primary-action {
    background: var(--color-base-900, #111827);
    border: 1px solid var(--color-base-900, #111827);
    color: white;
}

.fd-list-primary-action:hover {
    background: var(--color-primary-700, #1d4ed8);
    border-color: var(--color-primary-700, #1d4ed8);
    color: white;
}

.fd-list-filter-trigger > span:last-child,
.fd-list-primary-action > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-list-filter-trigger:focus-visible,
.fd-list-primary-action:focus-visible,
.fd-list-filter-chip:focus-visible,
.fd-list-filter-clear:focus-visible,
.fd-list-filter-panel button:focus-visible,
.fd-list-sort-link:focus-visible,
.fd-list-bulk-bar button:focus-visible,
.fd-list-bulk-bar select:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-list-filter-chips {
    align-items: center;
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    padding-top: var(--fd-space-3);
}

.fd-list-filter-chip {
    align-items: center;
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    font-size: 0.8125rem;
    gap: var(--fd-space-1);
    min-height: 32px;
    max-width: 100%;
    padding: 4px var(--fd-space-2);
}

.fd-list-filter-chip > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-list-filter-chip:hover {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
}

.fd-list-filter-clear {
    color: var(--color-primary-700, #1d4ed8);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: var(--fd-space-1);
}

.fd-list-filter-panel {
    pointer-events: none;
    position: static;
}

.fd-list-filter-backdrop {
    display: none;
}

.fd-list-filter-panel__content {
    background: white;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    box-shadow: 0 16px 40px rgb(15 23 42 / 16%);
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 640px);
    overflow: hidden;
    pointer-events: auto;
    width: min(380px, calc(100vw - 32px));
    z-index: 101;
}

.fd-list-filter-transition {
    transition: opacity 120ms ease, transform 120ms ease;
}

.fd-list-filter-transition-edge {
    opacity: 0;
    transform: translateY(-4px);
}

.fd-list-filter-transition-rest {
    opacity: 1;
    transform: translateY(0);
}

.fd-list-filter-panel__header {
    align-items: center;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    min-height: 52px;
    padding: 6px var(--fd-space-3) 6px var(--fd-space-4);
}

.fd-list-filter-panel__header h2,
.fd-list-filter-group legend {
    color: var(--color-font-important-light, #111827);
    font-weight: 600;
}

.fd-list-filter-panel__header button {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.fd-list-filter-panel__header button:hover {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-important-light, #111827);
}

.fd-list-filter-panel__groups {
    display: grid;
    gap: var(--fd-space-4);
    overflow-y: auto;
    padding: var(--fd-space-4);
}

.fd-list-filter-group {
    border: 0;
    display: grid;
    gap: var(--fd-space-2);
    margin: 0;
    min-width: 0;
    padding: 0;
}

.fd-list-filter-group legend {
    font-size: 0.8125rem;
    padding: 0;
}

.fd-list-filter-options {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-list-filter-option {
    align-items: center;
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: flex;
    font-size: 0.8125rem;
    gap: 8px;
    justify-content: flex-start;
    min-height: 40px;
    min-width: 0;
    padding: 7px 10px;
    text-align: left;
}

.fd-list-filter-option__check {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 4px;
    color: transparent;
    display: inline-flex;
    flex: 0 0 18px;
    font-size: 14px;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.fd-list-filter-option:hover {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
}

.fd-list-filter-option.is-selected,
.fd-list-filter-option[aria-pressed="true"] {
    background: color-mix(in srgb, var(--fd-success) 9%, white);
    border-color: color-mix(in srgb, var(--fd-success) 55%, white);
    color: var(--fd-success);
    font-weight: 600;
}

.fd-list-filter-option.is-selected .fd-list-filter-option__check,
.fd-list-filter-option[aria-pressed="true"] .fd-list-filter-option__check {
    background: var(--fd-success);
    border-color: var(--fd-success);
    color: white;
}

.fd-filter-choice-group {
    border: 0;
    display: grid;
    gap: 8px;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.fd-filter-choice-group > legend {
    color: var(--color-font-important-light, #111827);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0;
}

.fd-filter-choice-list {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-filter-choice {
    align-items: center;
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    cursor: pointer;
    display: flex;
    font-size: 0.8125rem;
    gap: 8px;
    min-height: 40px;
    min-width: 0;
    padding: 7px 10px;
}

.fd-filter-choice:hover {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
}

.fd-filter-choice input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.fd-filter-choice .material-symbols-outlined {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 4px;
    color: transparent;
    display: inline-flex;
    flex: 0 0 18px;
    font-size: 14px;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.fd-filter-choice:has(input:checked) {
    background: color-mix(in srgb, var(--color-primary-600, #2563eb) 8%, white);
    border-color: color-mix(in srgb, var(--color-primary-600, #2563eb) 50%, white);
    color: var(--color-primary-700, #1d4ed8);
    font-weight: 600;
}

.fd-filter-choice input:checked + .material-symbols-outlined,
.fd-filter-choice:has(input:checked) .material-symbols-outlined {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: white;
}

.fd-filter-choice:has(input:focus-visible) {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-list-filter-option [data-fd-filter-controlled-keys],
.fd-list-filter-option [data-fd-filter-params] {
    display: none;
}

.fd-list-filter-panel__actions {
    align-items: center;
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    flex: 0 0 auto;
    gap: var(--fd-space-2);
    justify-content: flex-end;
    padding: var(--fd-space-3) var(--fd-space-4);
}

.fd-list-filter-reset,
.fd-list-filter-apply {
    align-items: center;
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-weight: 600;
    height: 40px;
    justify-content: center;
    padding: 0 var(--fd-space-4);
}

[data-fd-async-list][aria-busy="true"] [data-fd-async-list-fragment] {
    cursor: progress;
}

[data-fd-async-list][aria-busy="true"] .fd-list-filter-trigger,
[data-fd-async-list][aria-busy="true"] .fd-recharge-history__summary,
[data-fd-async-list][aria-busy="true"] .fd-recharge-history__results,
[data-fd-async-list][aria-busy="true"] #changelist-form {
    opacity: 0.68;
    transition: opacity 120ms ease;
}

.fd-list-filter-reset {
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    color: var(--color-font-important-light, #111827);
}

.fd-list-filter-reset:hover {
    background: var(--color-base-100, #f3f4f6);
}

.fd-list-filter-apply {
    background: var(--color-primary-600, #2563eb);
    border: 1px solid var(--color-primary-600, #2563eb);
    color: white;
}

.fd-list-filter-apply:hover {
    background: var(--color-primary-700, #1d4ed8);
    border-color: var(--color-primary-700, #1d4ed8);
}

.fd-list-filter-noscript {
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    margin-bottom: var(--fd-space-3);
    padding: var(--fd-space-3);
}

.fd-list-bulk-bar {
    align-items: center;
    background: var(--color-base-900, #111827);
    border: 1px solid var(--color-base-900, #111827);
    border-radius: var(--fd-radius);
    color: white;
    display: flex;
    gap: var(--fd-space-3);
    margin-bottom: var(--fd-space-3);
    min-height: 56px;
    padding: 7px var(--fd-space-3);
}

.fd-list-bulk-bar > strong {
    flex: 0 0 auto;
    white-space: nowrap;
}

.fd-list-bulk-bar #changelist-actions {
    color: white;
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    width: auto !important;
}

.fd-list-bulk-bar #changelist-actions > div {
    background: transparent;
    border-radius: 0;
    gap: var(--fd-space-2);
    padding: 0;
}

.fd-list-bulk-bar #changelist-actions .primary {
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.fd-list-bulk-bar #changelist-actions select {
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-base-900, #111827);
    height: 40px;
    max-width: min(320px, 40vw);
    min-width: 160px;
}

.fd-list-bulk-bar #changelist-actions button[type="submit"] {
    background: var(--fd-success);
    border-radius: var(--fd-radius);
    color: white;
    height: 40px;
    padding: 0 var(--fd-space-3);
}

.fd-list-bulk-bar #changelist-actions .action-counter,
.fd-list-bulk-bar #changelist-actions .all {
    font-size: 0.8125rem;
}

.fd-list-bulk-bar #changelist-actions .question a,
.fd-list-bulk-bar #changelist-actions .clear a {
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: var(--fd-radius);
    color: white;
    min-height: 32px;
    padding: 5px var(--fd-space-2);
}

.fd-list-bulk-bar > button {
    border: 1px solid rgb(255 255 255 / 42%);
    border-radius: var(--fd-radius);
    flex: 0 0 auto;
    height: 40px;
    padding: 0 var(--fd-space-3);
    white-space: nowrap;
}

.fd-list-bulk-bar > button:hover {
    background: rgb(255 255 255 / 12%);
}

.fd-user-bulk-bar {
    gap: var(--fd-space-2);
}

.fd-user-bulk-bar__summary {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--fd-space-2);
    white-space: nowrap;
}

.fd-user-bulk-bar__summary > .material-symbols-outlined {
    font-size: 20px;
}

.fd-list-bulk-bar #changelist-actions.fd-user-bulk-actions {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
}

.fd-user-bulk-actions__buttons {
    display: flex;
    flex: 1 1 auto;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-list-bulk-bar #changelist-actions button.fd-user-bulk-action[type="submit"] {
    align-items: center;
    background: white;
    border: 1px solid white;
    border-radius: var(--fd-radius);
    color: var(--color-base-900, #111827);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 6px;
    height: 40px;
    justify-content: center;
    padding: 0 var(--fd-space-3);
    white-space: nowrap;
}

.fd-list-bulk-bar #changelist-actions button.fd-user-bulk-action[type="submit"]:hover {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-200, #e5e7eb);
}

.fd-user-bulk-action > .material-symbols-outlined {
    font-size: 19px;
}

.fd-user-bulk-actions__scope {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
}

.fd-user-bulk-actions__native-counter,
.fd-user-bulk-actions__scope > .all {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.fd-user-bulk-actions__scope > .question a,
.fd-user-bulk-actions__scope > .clear a {
    align-items: center;
    display: inline-flex;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.fd-user-bulk-bar > .fd-user-bulk-bar__clear {
    background: transparent;
}

.fd-list-empty-state {
    background: white;
    border-style: solid;
    min-height: 240px;
}

.fd-list-empty-state > .material-symbols-outlined {
    color: var(--color-base-400, #9ca3af);
    font-size: 40px;
}

.fd-list-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    justify-content: center;
    margin-top: var(--fd-space-2);
}

.fd-list-empty-state__actions a {
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-important-light, #111827);
    font-weight: 600;
    min-height: 40px;
    padding: 9px var(--fd-space-4);
}

.fd-list-empty-state__actions a:hover {
    background: var(--color-base-100, #f3f4f6);
}

.dark .fd-list-empty-state {
    background: var(--color-base-900, #111827);
}

.dark .fd-list-empty-state__actions a {
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-list-empty-state__actions a:hover {
    background: var(--color-base-800, #1f2937);
}

.fd-list-pagination {
    align-items: center;
    background: white;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
    margin-top: var(--fd-space-3);
    min-height: 64px;
    padding: var(--fd-space-3);
}

.fd-list-pagination__summary {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    gap: 6px;
    margin: 0;
}

.fd-list-pagination__summary strong {
    color: var(--color-font-important-light, #111827);
    font-weight: 700;
}

.fd-list-pagination__controls,
.fd-list-pagination__pages {
    align-items: center;
    display: flex;
    gap: 6px;
}

.fd-list-pagination__controls {
    min-width: 0;
}

.fd-list-pagination__direction,
.fd-list-pagination__page,
.fd-list-pagination__ellipsis {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .8125rem;
    font-weight: 600;
    height: 38px;
    justify-content: center;
}

.fd-list-pagination__direction {
    gap: 4px;
    padding: 0 var(--fd-space-2);
}

.fd-list-pagination__direction .material-symbols-outlined {
    font-size: 18px;
}

.fd-list-pagination__page {
    min-width: 38px;
    padding: 0 8px;
}

.fd-list-pagination__direction:hover,
.fd-list-pagination__page:hover {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
    color: var(--color-font-important-light, #111827);
}

.fd-list-pagination__page.is-current {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-900, #111827);
    color: white;
}

.fd-list-pagination__direction.is-disabled {
    background: var(--color-base-50, #f9fafb);
    border-color: var(--color-base-200, #e5e7eb);
    color: var(--color-base-400, #9ca3af);
    cursor: not-allowed;
}

.fd-list-pagination__ellipsis {
    border-color: transparent;
    color: var(--color-font-subtle-light, #6b7280);
    min-width: 28px;
}

.fd-list-pagination :is(a, span[aria-current="page"]):focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.dark .fd-list-pagination {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-800, #1f2937);
}

.dark .fd-list-pagination__summary,
.dark .fd-list-pagination__ellipsis {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-list-pagination__summary strong {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-list-pagination__direction,
.dark .fd-list-pagination__page {
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-list-pagination__direction:hover,
.dark .fd-list-pagination__page:hover {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-600, #4b5563);
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-list-pagination__page.is-current {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: white;
}

.dark .fd-list-pagination__direction.is-disabled {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-800, #1f2937);
    color: var(--color-base-600, #4b5563);
}

#content-main[data-fd-list]:has(#changelist-form input.action-select:checked) .fd-list-toolbar {
    display: none;
}

#result_list thead th {
    color: var(--color-font-important-light, #111827);
    display: none;
    font-weight: 600;
    padding: var(--fd-space-2) var(--fd-space-3);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

#result_list thead th.action-checkbox-column {
    display: table-cell;
    width: 40px;
}

#result_list td.action-checkbox::before {
    content: "选择记录";
}

#result_list thead th.sortable {
    color: var(--color-font-default-light, #374151);
}

.fd-list-header {
    align-items: center;
    display: flex;
    min-width: 0;
}

.fd-list-sort-link {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    min-height: 40px;
    min-width: 0;
}

.fd-list-sort-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-list-sort-icon {
    color: var(--color-base-400, #9ca3af);
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

#result_list thead th.sortable:hover .fd-list-sort-icon {
    color: var(--color-base-600, #4b5563);
}

#result_list thead th.sorted.ascending .fd-list-sort-icon,
#result_list thead th.sorted.descending .fd-list-sort-icon {
    color: var(--color-primary-600, #2563eb);
}

.fd-list-sort-priority {
    align-items: center;
    background: var(--color-primary-50, #eff6ff);
    border: 1px solid var(--color-primary-200, #bfdbfe);
    border-radius: var(--fd-radius);
    color: var(--color-primary-700, #1d4ed8);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 700;
    height: 20px;
    justify-content: center;
    margin-left: 6px;
    min-width: 20px;
    padding: 0 4px;
}

.fd-list-select-all-label {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-height: 40px;
}

.fd-list-select-all-label__text {
    font-weight: 400;
}

.dark .fd-list-toolbar {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-800, #1f2937);
}

.dark .fd-list-search,
.dark .fd-list-filter-trigger,
.dark .fd-list-filter-chip,
.dark .fd-list-filter-reset {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-list-search input[type="search"],
.dark .fd-list-filter-trigger,
.dark .fd-list-filter-chip,
.dark .fd-list-filter-reset,
.dark #result_list thead th,
.dark #result_list thead th.sortable {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-list-search__icon,
.dark .fd-list-search > a,
.dark .fd-list-filter-panel__header button {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-list-search > a:hover,
.dark .fd-list-filter-panel__header button:hover,
.dark .fd-list-filter-trigger:hover,
.dark .fd-list-filter-trigger[aria-expanded="true"] {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-600, #4b5563);
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-list-primary-action {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
}

.dark .fd-list-primary-action:hover {
    background: var(--color-primary-500, #3b82f6);
    border-color: var(--color-primary-500, #3b82f6);
}

.dark .fd-list-filter-chips,
.dark .fd-list-filter-panel__header,
.dark .fd-list-filter-panel__actions {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-list-filter-panel__content {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-list-filter-panel__header h2,
.dark .fd-list-filter-group legend {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-list-filter-option {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-list-filter-option:hover {
    background: var(--color-base-700, #374151);
    border-color: var(--color-base-600, #4b5563);
}

.dark .fd-list-filter-option.is-selected,
.dark .fd-list-filter-option[aria-pressed="true"] {
    background: color-mix(in srgb, var(--fd-success) 18%, var(--color-base-900, #111827));
    border-color: var(--fd-success);
    color: var(--color-green-300, #86efac);
}

.dark .fd-filter-choice-group > legend {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-filter-choice {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-filter-choice:hover {
    background: var(--color-base-700, #374151);
    border-color: var(--color-base-600, #4b5563);
}

.dark .fd-filter-choice:has(input:checked) {
    background: color-mix(in srgb, var(--color-primary-600, #2563eb) 18%, var(--color-base-900, #111827));
    border-color: var(--color-primary-500, #3b82f6);
    color: var(--color-primary-300, #93c5fd);
}

.dark .fd-list-sort-priority {
    background: color-mix(in srgb, var(--color-primary-600, #2563eb) 18%, transparent);
    border-color: var(--color-primary-700, #1d4ed8);
    color: var(--color-primary-300, #93c5fd);
}

@media (min-width: 1024px) {
    #result_list thead th {
        display: table-cell;
    }

    .fd-list-select-all-label__text {
        display: none;
    }
}

@media (max-width: 1279px) {
    .fd-user-bulk-bar {
        align-items: center;
        flex-wrap: wrap;
    }

    .fd-list-bulk-bar #changelist-actions.fd-user-bulk-actions {
        flex-basis: 100%;
        order: 3;
    }

    .fd-user-bulk-actions__buttons {
        flex-wrap: wrap;
    }

    .fd-user-bulk-bar > .fd-user-bulk-bar__clear {
        margin-left: auto;
    }
}

@media (max-width: 767px) {
    .fd-list-toolbar {
        padding: var(--fd-space-2);
    }

    .fd-list-toolbar__main {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .fd-list-pagination {
        align-items: stretch;
        flex-direction: column;
        gap: var(--fd-space-2);
    }

    .fd-list-pagination__summary {
        justify-content: center;
    }

    .fd-list-pagination__controls {
        width: 100%;
    }

    .fd-list-pagination__pages {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        padding: 2px;
        scrollbar-width: thin;
    }

    .fd-list-pagination__direction {
        height: 40px;
        padding-inline: 10px;
    }

    .fd-list-pagination__direction-label {
        display: none;
    }

    .fd-list-pagination__page {
        height: 40px;
        min-width: 40px;
    }

    .fd-list-search {
        flex-basis: 100%;
        min-width: 100%;
    }

    .fd-list-filter-trigger:first-child,
    .fd-list-primary-action:first-child {
        margin-left: 0;
    }

    .fd-list-filter-trigger,
    .fd-list-primary-action {
        flex: 1 1 max-content;
        max-width: 100%;
        padding-inline: var(--fd-space-3);
    }

    .fd-list-filter-panel {
        inset: 0;
        position: fixed;
        z-index: 100;
    }

    .fd-list-filter-backdrop {
        background: rgb(15 23 42 / 42%);
        display: block;
        inset: 0;
        pointer-events: auto;
        position: fixed;
        z-index: 100;
    }

    .fd-list-filter-panel__content {
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--fd-radius) var(--fd-radius) 0 0;
        border-right: 0;
        bottom: 0 !important;
        left: 0 !important;
        max-height: min(82dvh, 720px);
        max-width: none;
        position: fixed !important;
        right: 0 !important;
        top: auto !important;
        width: 100%;
        z-index: 101;
    }

    .fd-list-filter-transition-edge {
        transform: translateY(16px);
    }

    .fd-list-filter-options {
        grid-template-columns: 1fr;
    }

    .fd-filter-choice-list {
        grid-template-columns: 1fr;
    }

    .fd-list-filter-panel__actions {
        padding-bottom: calc(var(--fd-space-3) + env(safe-area-inset-bottom));
    }

    .fd-list-filter-reset,
    .fd-list-filter-apply {
        flex: 1 1 0;
    }

    .fd-list-bulk-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-list-bulk-bar #changelist-actions > div,
    .fd-list-bulk-bar #changelist-actions .primary {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .fd-list-bulk-bar #changelist-actions select {
        max-width: 100%;
        width: 100%;
    }

    .fd-list-bulk-bar #changelist-actions .action-counter,
    .fd-list-bulk-bar #changelist-actions .all,
    .fd-list-bulk-bar #changelist-actions .question,
    .fd-list-bulk-bar #changelist-actions .clear {
        margin-left: 0;
        margin-top: var(--fd-space-2);
    }

    .fd-list-bulk-bar > button {
        width: 100%;
    }

    .fd-list-bulk-bar #changelist-actions.fd-user-bulk-actions {
        align-items: stretch;
        flex-basis: auto;
        flex-direction: column;
        order: 0;
    }

    .fd-user-bulk-actions__buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .fd-list-bulk-bar #changelist-actions button.fd-user-bulk-action[type="submit"] {
        min-width: 0;
        padding-inline: var(--fd-space-2);
        width: 100%;
    }

    .fd-user-bulk-actions__scope {
        justify-content: flex-start;
        width: 100%;
    }

    .fd-user-bulk-bar > .fd-user-bulk-bar__clear {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fd-list-async-progress > span {
        animation: none;
        transform: none;
        width: 100%;
    }

    .fd-list-filter-transition,
    .fd-list-async-progress,
    [data-fd-async-list] [data-fd-async-list-fragment],
    .fd-list-primary-action,
    .fd-list-filter-trigger,
    .fd-list-filter-chip,
    .fd-list-sort-icon {
        transition: none;
    }
}

body.app-auth.model-group.change-form #id_permissions_from,
body.app-auth.model-group.change-form #id_permissions_to,
body.app-auth.model-group.change-form .selector-available select,
body.app-auth.model-group.change-form .selector-chosen select {
    height: 32rem !important;
    min-height: 32rem !important;
}

body.app-auth.model-group.change-form .selector-available,
body.app-auth.model-group.change-form .selector-chosen {
    min-height: 34rem !important;
}

.fd-sidebar-layout {
    flex: 0 0 auto;
    position: relative;
    z-index: 60;
}

.fd-sidebar-reserved,
.fd-sidebar {
    width: 224px;
}

.fd-sidebar-reserved {
    min-height: 100vh;
    transition: width 160ms ease;
}

.fd-sidebar-reserved.is-compact,
.fd-sidebar.is-compact {
    width: 64px;
}

.fd-sidebar {
    background: var(--color-base-50, #f9fafb);
    border-right: 1px solid var(--color-base-200, #e5e7eb);
    bottom: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    transition: width 160ms ease;
}

.fd-sidebar-brand {
    align-items: center;
    display: flex;
    gap: 8px;
    min-height: 64px;
    padding: 0 12px;
}

.fd-sidebar-brand__link {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.fd-sidebar-brand__mark {
    align-items: center;
    background: var(--color-base-900, #111827);
    border-radius: var(--fd-radius);
    color: white;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.fd-sidebar-brand__name {
    color: var(--color-font-important-light, #111827);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sidebar-icon-button {
    align-items: center;
    border-radius: var(--fd-radius);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin-left: auto;
    width: 36px;
}

.fd-sidebar-icon-button:hover,
.fd-sidebar-group__button:hover,
.fd-sidebar-search:hover,
.fd-sidebar-account__trigger:hover {
    background: var(--color-base-100, #f3f4f6);
}

.fd-sidebar-search {
    align-items: center;
    background: white;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    display: flex;
    gap: 8px;
    margin: 2px 12px 16px;
    min-height: 38px;
    padding: 0 10px;
    text-align: left;
}

.fd-sidebar-search__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sidebar-search kbd {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 11px;
}

.fd-sidebar-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 10px 12px;
}

.fd-sidebar-group__button {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-important-light, #111827);
    display: flex;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    text-align: left;
    width: 100%;
}

.fd-sidebar-group__button.is-active {
    font-weight: 600;
}

.fd-sidebar-group__fallback-title {
    color: var(--color-font-important-light, #111827);
    font-weight: 600;
    margin: 0;
    min-height: 40px;
    padding: 0 10px;
}

.fd-sidebar-group__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sidebar-group__chevron {
    transition: transform 140ms ease;
}

.fd-sidebar-group__button[aria-expanded="true"] .fd-sidebar-group__chevron {
    transform: rotate(90deg);
}

.fd-sidebar-group__items {
    border-left: 1px solid var(--color-base-200, #e5e7eb);
    margin: 2px 0 8px 19px;
    padding-left: 10px;
}

.fd-sidebar-item {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #4b5563);
    display: flex;
    min-height: 36px;
    padding: 0 10px;
}

.fd-sidebar-item:hover {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-important-light, #111827);
}

.fd-sidebar-item.is-active {
    background: var(--color-base-900, #111827);
    color: white;
    font-weight: 600;
}

.fd-sidebar-empty {
    color: var(--color-font-subtle-light, #6b7280);
    padding: 12px 10px;
}

.fd-sidebar.is-compact .fd-sidebar-brand {
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 88px;
    padding: 8px;
}

.fd-sidebar.is-compact .fd-sidebar-compact-toggle {
    margin: 0;
}

.fd-sidebar.is-compact .fd-sidebar-icon-button,
.fd-sidebar.is-compact .fd-sidebar-search,
.fd-sidebar.is-compact .fd-sidebar-group__button,
.fd-sidebar.is-compact .fd-sidebar-account__trigger {
    margin-inline: auto;
    padding-inline: 0;
    width: 40px;
}

.fd-sidebar-account {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    padding: 10px;
    position: relative;
}

.fd-sidebar-account__trigger {
    align-items: center;
    border-radius: var(--fd-radius);
    display: flex;
    gap: 10px;
    min-height: 44px;
    padding: 4px 8px;
    text-align: left;
    width: 100%;
}

.fd-sidebar-account__fallback {
    gap: 6px;
}

.fd-sidebar-account__fallback-identity {
    align-items: center;
    display: flex;
    gap: 10px;
    min-height: 44px;
    padding: 4px 8px;
}

.fd-sidebar-account__fallback-identity > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fd-sidebar-account__fallback-identity strong,
.fd-sidebar-account__fallback-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sidebar-account__fallback-identity small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 11px;
}

.fd-sidebar-account__identity {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.fd-sidebar-account__identity strong,
.fd-sidebar-account__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-sidebar-account__identity small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 11px;
}

.fd-sidebar-account__menu {
    background: white;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    bottom: calc(100% + 8px);
    box-shadow: 0 10px 24px rgb(15 23 42 / 12%);
    left: 10px;
    min-width: 196px;
    padding: 6px;
    position: absolute;
    right: 10px;
    z-index: 80;
}

.fd-sidebar-account__action {
    align-items: center;
    border-radius: var(--fd-radius);
    display: flex;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    width: 100%;
}

.fd-sidebar-account__action:hover {
    background: var(--color-base-100, #f3f4f6);
}

.fd-sidebar-account__action.is-danger {
    color: var(--fd-danger);
}

.fd-sidebar.is-compact .fd-sidebar-account__menu {
    bottom: 0;
    left: calc(100% + 8px);
    right: auto;
}

.fd-sidebar-overlay {
    display: none;
}

.fd-sidebar-mobile-trigger,
.fd-sidebar-mobile-divider {
    display: none;
}

.dark .fd-sidebar {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-800, #1f2937);
}

.dark .fd-sidebar-brand__name,
.dark .fd-sidebar-group__button {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-sidebar-search,
.dark .fd-sidebar-account__menu {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-sidebar-group__items,
.dark .fd-sidebar-account {
    border-color: var(--color-base-800, #1f2937);
}

.dark .fd-sidebar-item {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-sidebar-item.is-active {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-base-900, #111827);
}

@media (max-width: 1023px) {
    .fd-sidebar-reserved.is-mobile {
        left: 0;
        min-height: 100vh;
        position: fixed;
        top: 0;
        width: min(88vw, 288px);
        z-index: 70;
    }

    .fd-sidebar-reserved.is-mobile .fd-sidebar {
        width: min(88vw, 288px);
    }

    .fd-sidebar-overlay {
        background: rgb(15 23 42 / 35%);
        border: 0;
        bottom: 0;
        display: block;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 65;
    }

    .fd-sidebar-mobile-trigger {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        min-height: 40px;
        min-width: 40px;
    }

    .fd-sidebar-brand .fd-sidebar-icon-button {
        min-height: 40px;
        min-width: 40px;
    }

    .fd-sidebar-brand__link {
        min-height: 40px;
    }

    .fd-sidebar-search,
    .fd-sidebar-item,
    .fd-sidebar-account__action {
        min-height: 40px;
    }

    .fd-sidebar-mobile-divider {
        background: var(--color-base-200, #e5e7eb);
        display: block;
        height: 20px;
        margin-inline: 8px;
        width: 1px;
    }

    body.fd-sidebar-drawer-open {
        overflow: hidden;
    }
}

/* User changelist controls and semantic columns. */
.fd-user-list-intro {
    align-items: flex-end;
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
    margin-bottom: var(--fd-space-5, 20px);
}

.fd-user-list-intro h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.fd-user-list-intro p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: var(--fd-space-1) 0 0;
}

.fd-user-list-refresh {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--fd-space-2);
    min-height: 40px;
    padding: 0 var(--fd-space-3);
}

.fd-user-list-refresh .material-symbols-outlined,
.fd-user-list-search .material-symbols-outlined,
.fd-user-list-mobile-filter-trigger .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.fd-user-list-toolbar__main {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-user-list-search {
    align-items: center;
    display: flex;
    flex: 1 1 420px;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-user-list-search__field {
    align-items: center;
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    display: flex;
    flex: 1 1 auto;
    min-height: 42px;
    min-width: 0;
    padding: 0 var(--fd-space-3);
}

.fd-user-list-search__field:focus-within {
    border-color: var(--color-primary-600, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-600, #2563eb) 18%, transparent);
}

.fd-user-list-search__field > .material-symbols-outlined {
    color: var(--color-font-subtle-light, #6b7280);
    flex: 0 0 auto;
}

.fd-user-list-search input[type="search"] {
    background: transparent;
    border: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-height: 40px;
    min-width: 0;
    outline: 0;
    padding: 0 0 0 var(--fd-space-2);
    width: 100%;
}

.fd-user-list-search > a {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.fd-user-list-controls button,
.fd-user-list-filter-trigger {
    align-items: center;
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-weight: 600;
    gap: var(--fd-space-2);
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--fd-space-3);
}

.fd-user-list-controls button[type="submit"] {
    background: var(--color-base-900, #111827);
    color: white;
}

.fd-user-list-controls {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
}

.fd-user-list-controls select,
.fd-user-list-controls input[type="date"] {
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    min-height: 38px;
    padding: 0 var(--fd-space-3);
}

.fd-user-list-date-range {
    align-items: center;
    display: inline-flex;
    gap: var(--fd-space-2);
}

.fd-user-list-reset {
    color: var(--color-primary-700, #1d4ed8);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: var(--fd-space-1);
}

.fd-user-list-filter-panel .fd-user-list-controls {
    align-items: stretch;
    display: grid;
    padding: var(--fd-space-4);
}

.fd-user-list-filter-panel .fd-user-list-controls > label,
.fd-user-list-filter-panel .fd-user-list-controls select,
.fd-user-list-filter-panel .fd-user-list-controls input[type="date"] {
    width: 100%;
}

.fd-user-list-noscript-filters {
    display: none;
    margin-bottom: var(--fd-space-3);
}

.fd-user-list-noscript-filters summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 40px;
    padding: var(--fd-space-2) 0;
}

.fd-user-list-filter-error {
    color: var(--fd-danger);
    font-size: 0.8125rem;
    margin: 0;
}

.fd-user-list-refresh:focus-visible,
.fd-user-list-search a:focus-visible,
.fd-user-list-controls a:focus-visible,
.fd-user-list-controls button:focus-visible,
.fd-user-list-controls select:focus-visible,
.fd-user-list-controls input:focus-visible,
.fd-user-list-filter-trigger:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-user-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 180px;
}

.fd-user-identity > a {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-user-identity__mark {
    align-items: center;
    background: #dbeafe;
    border-radius: 999px;
    color: #1d4ed8;
    display: inline-flex;
    flex: 0 0 36px;
    font-weight: 700;
    height: 36px;
    justify-content: center;
}

.fd-user-identity__copy,
.fd-user-contact,
.fd-user-time {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-user-identity__copy strong {
    font-weight: 700;
}

.fd-user-identity__copy small,
.fd-user-time small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-user-contact > span {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-user-time--empty {
    color: var(--color-font-subtle-light, #6b7280);
}

[data-fd-list-model="task"] .fd-user-time > span {
    white-space: nowrap;
}

.fd-user-row-actions {
    align-items: center;
    display: flex;
    gap: var(--fd-space-3);
    min-width: 178px;
}

.fd-user-row-actions__view {
    color: var(--color-primary-700, #1d4ed8);
    font-weight: 600;
}

.fd-user-row-menu {
    position: relative;
}

.fd-user-row-menu__trigger,
.fd-user-row-menu__fallback-details > summary {
    align-items: center;
    background: transparent;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: var(--fd-space-1);
    min-height: 34px;
    padding: 0 var(--fd-space-2);
}

.fd-user-row-menu__fallback-details > summary::-webkit-details-marker {
    display: none;
}

.fd-user-row-menu__fallback-details > summary::marker {
    content: "";
}

.fd-user-row-menu__trigger[aria-expanded="true"],
.fd-user-row-menu__fallback-details[open] > summary {
    border-color: var(--color-primary-600, #2563eb);
}

.fd-user-row-menu__popup,
.fd-user-row-menu__fallback {
    background: white;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    box-shadow: 0 12px 30px rgb(15 23 42 / 14%);
    display: grid;
    min-width: 176px;
    padding: 6px;
    z-index: 50;
}

.fd-user-row-menu__fallback {
    margin-top: 6px;
    position: static;
}

.fd-user-row-menu__popup a,
.fd-user-row-menu__fallback a {
    border-radius: var(--fd-radius);
    padding: 9px 10px;
    white-space: nowrap;
}

.fd-user-row-menu__popup a:hover,
.fd-user-row-menu__popup a:focus-visible,
.fd-user-row-menu__fallback a:hover,
.fd-user-row-menu__fallback a:focus-visible {
    background: var(--color-base-100, #f3f4f6);
}

.fd-user-row-menu__trigger:focus-visible,
.fd-user-row-menu__fallback-details > summary:focus-visible,
.fd-user-row-actions__view:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

/* Project changelist semantic columns. */
.fd-project-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 210px;
}

.fd-project-identity__mark {
    align-items: center;
    background: #eef2ff;
    border-radius: var(--fd-radius);
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-project-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-project-identity__copy,
.fd-project-owner,
.fd-project-stage {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-project-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-project-identity__title-link,
.fd-project-identity__copy > strong,
.fd-project-owner strong {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 240px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-project-identity__title-link:hover,
.fd-project-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-project-identity__preview {
    align-items: center;
    border-radius: 5px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 26px;
    height: 26px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-project-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-project-identity__title-row:hover .fd-project-identity__preview,
.fd-project-identity__title-row:focus-within .fd-project-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-project-identity__preview:hover,
.fd-project-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-project-identity__copy small,
.fd-project-owner small,
.fd-project-stage small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-project-owner-link {
    display: inline-flex;
    min-width: 0;
}

.fd-project-owner-link:hover strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-project-owner--missing strong {
    color: var(--fd-danger, #dc2626);
}

.fd-project-stage {
    justify-items: start;
    min-width: 104px;
}

.fd-project-owner-link:focus-visible,
.fd-project-identity__title-link:focus-visible,
.fd-project-identity__preview:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

/* Admin user changelist semantic columns. */
.fd-admin-user-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 230px;
}

.fd-admin-user-identity__avatar {
    align-items: center;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    border-radius: 50%;
    color: #1d4ed8;
    display: inline-flex;
    flex: 0 0 36px;
    font-size: 13px;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    line-height: 1;
    width: 36px;
}

.fd-admin-user-identity__copy,
.fd-admin-user-time {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-admin-user-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-admin-user-identity__title-link,
.fd-admin-user-identity__title-row > strong {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 210px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-admin-user-identity__title-link:hover,
.fd-admin-user-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-admin-user-identity__preview {
    align-items: center;
    border-radius: 5px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 26px;
    height: 26px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-admin-user-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-admin-user-identity__title-row:hover .fd-admin-user-identity__preview,
.fd-admin-user-identity__title-row:focus-within .fd-admin-user-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-admin-user-identity__preview:hover,
.fd-admin-user-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-admin-user-identity__copy small,
.fd-admin-user-time small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-admin-user-identity__protected {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    gap: 2px;
}

.fd-admin-user-identity__protected .material-symbols-outlined {
    font-size: 14px;
}

.fd-admin-user-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 120px;
}

.fd-admin-user-role,
.fd-admin-user-badge {
    align-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    min-height: 24px;
    padding: 3px 8px;
    white-space: nowrap;
}

.fd-admin-user-role {
    background: #eff6ff;
    color: #1d4ed8;
}

.fd-admin-user-role--empty,
.fd-admin-user-role--more,
.fd-admin-user-badge--member {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #4b5563;
}

.fd-admin-user-badge--superuser {
    background: #f3e8ff;
    border-color: #e9d5ff;
    color: #7e22ce;
}

.fd-admin-user-badge--success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.fd-admin-user-badge--warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #a16207;
}

.fd-admin-user-badge--danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.fd-admin-user-time {
    min-width: 130px;
}

.fd-admin-user-time--empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-admin-user-identity__title-link:focus-visible,
.fd-admin-user-identity__preview:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.dark .fd-admin-user-identity__avatar {
    background: rgb(37 99 235 / 18%);
    border-color: rgb(96 165 250 / 30%);
    color: #93c5fd;
}

.dark .fd-admin-user-identity__copy small,
.dark .fd-admin-user-time small,
.dark .fd-admin-user-identity__protected,
.dark .fd-admin-user-time--empty {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-admin-user-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-admin-user-identity__preview:hover,
.dark .fd-admin-user-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-admin-user-role {
    background: rgb(37 99 235 / 16%);
    border-color: rgb(96 165 250 / 28%);
    color: #93c5fd;
}

.dark .fd-admin-user-role--empty,
.dark .fd-admin-user-role--more,
.dark .fd-admin-user-badge--member {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: #d1d5db;
}

@media (max-width: 767px) {
    .fd-admin-user-identity,
    .fd-admin-user-roles,
    .fd-admin-user-time {
        max-width: min(100%, 300px);
        min-width: 0;
    }

    .fd-admin-user-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }
}

/* Template changelist tabs and semantic columns. */
.fd-template-list-intro {
    margin-bottom: var(--fd-space-3);
}

.fd-list-scope-tabs {
    align-items: stretch;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: var(--fd-space-5);
    margin-bottom: var(--fd-space-4);
    min-width: 0;
    overflow-x: auto;
}

.fd-list-scope-tabs a {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 600;
    gap: var(--fd-space-2);
    min-height: 44px;
    padding: 0 2px;
    position: relative;
    text-decoration: none;
}

.fd-list-scope-tabs a::after {
    background: transparent;
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}

.fd-list-scope-tabs a:hover,
.fd-list-scope-tabs a:focus-visible {
    color: var(--color-font-important-light, #111827);
}

.fd-list-scope-tabs a[aria-current="page"] {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-list-scope-tabs a[aria-current="page"]::after {
    background: var(--color-primary-600, #2563eb);
}

.fd-list-scope-tabs .material-symbols-outlined {
    font-size: 19px;
}

.fd-list-scope-tabs strong {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 6px;
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    min-width: 24px;
    padding: 2px 6px;
}

.fd-list-scope-tabs a:focus-visible,
.fd-template-identity__title-link:focus-visible,
.fd-template-identity__preview:focus-visible,
.fd-template-owner__link:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-template-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 230px;
}

.fd-template-identity__mark {
    align-items: center;
    background: #ecfeff;
    border: 1px solid #cffafe;
    border-radius: 6px;
    color: #0e7490;
    display: inline-flex;
    flex: 0 0 72px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 72px;
    aspect-ratio: 16 / 9;
}

.fd-template-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-template-identity__cover {
    background: var(--color-base-50, #f8fafc);
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.fd-template-identity__mark.is-missing .fd-template-identity__cover {
    display: none;
}

.fd-template-identity__copy,
.fd-template-owner,
.fd-template-status,
.fd-template-metric,
.fd-template-time {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-template-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-template-identity__title-link,
.fd-template-identity__copy > strong,
.fd-template-owner strong,
.fd-template-metric strong,
.fd-template-time strong {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 250px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-template-identity__title-link:hover,
.fd-template-identity__title-link:focus-visible,
.fd-template-owner__link:hover strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-template-identity__preview {
    align-items: center;
    border-radius: 5px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 26px;
    height: 26px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-template-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-template-identity__title-row:hover .fd-template-identity__preview,
.fd-template-identity__title-row:focus-within .fd-template-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-template-identity__preview:hover,
.fd-template-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-template-identity__copy small,
.fd-template-owner small,
.fd-template-status small,
.fd-template-metric small,
.fd-template-time small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-template-owner__link {
    display: inline-flex;
    min-width: 0;
    text-decoration: none;
}

.fd-template-owner--missing strong {
    color: var(--fd-danger, #dc2626);
}

.fd-template-status {
    justify-items: start;
    min-width: 112px;
}

.fd-template-metric,
.fd-template-time {
    min-width: 96px;
}

/* Task changelist semantic columns. */
.fd-task-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 220px;
}

.fd-task-identity__mark {
    align-items: center;
    background: #ecfdf5;
    border-radius: var(--fd-radius);
    color: #047857;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-task-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-task-identity__copy,
.fd-task-project,
.fd-task-owner,
.fd-task-status,
.fd-task-progress {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-task-identity__copy strong,
.fd-task-project strong,
.fd-task-owner strong {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-task-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-task-identity__title-link {
    color: inherit;
    font-weight: 700;
    max-width: 205px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-task-identity__title-link:hover {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-task-identity__preview {
    align-items: center;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

.fd-task-identity:hover .fd-task-identity__preview,
.fd-task-identity:focus-within .fd-task-identity__preview,
.fd-task-identity__preview:focus-visible {
    opacity: 1;
}

.fd-task-identity__preview:hover,
.fd-task-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-task-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-task-identity__copy small,
.fd-task-project small,
.fd-task-owner small,
.fd-task-status small,
.fd-task-progress small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-task-project-link,
.fd-task-owner-link {
    color: inherit;
    display: inline-flex;
    min-width: 0;
    text-decoration: none;
}

.fd-task-project-link:hover strong,
.fd-task-owner-link:hover strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-task-project-link:focus-visible,
.fd-task-owner-link:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-task-project--missing strong,
.fd-task-owner--missing strong {
    color: var(--fd-danger, #dc2626);
}

.fd-task-project--none strong,
.fd-task-owner--restricted strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-task-status {
    justify-items: start;
    min-width: 88px;
}

.fd-task-progress {
    min-width: 132px;
}

.fd-task-progress progress {
    appearance: none;
    background: var(--color-base-200, #e5e7eb);
    border: 0;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    width: 124px;
}

.fd-task-progress progress::-webkit-progress-bar {
    background: var(--color-base-200, #e5e7eb);
}

.fd-task-progress progress::-webkit-progress-value {
    background: #0d9488;
}

.fd-task-progress progress::-moz-progress-bar {
    background: #0d9488;
}

.fd-task-points {
    align-items: baseline;
    display: inline-flex;
    gap: 3px;
    min-width: 70px;
}

.fd-task-points strong {
    font-variant-numeric: tabular-nums;
}

.fd-task-points small {
    color: var(--color-font-subtle-light, #6b7280);
}

/* Payment changelist semantic columns. */
.fd-payment-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 230px;
}

.fd-payment-identity__mark {
    align-items: center;
    background: #fff7ed;
    border-radius: var(--fd-radius);
    color: #c2410c;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-payment-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-payment-identity__copy,
.fd-payment-user,
.fd-payment-product,
.fd-payment-status,
.fd-payment-method {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-payment-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-payment-identity__title-link,
.fd-payment-identity__copy > strong,
.fd-payment-user strong,
.fd-payment-product strong,
.fd-payment-method strong {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 250px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-payment-identity__title-link:hover,
.fd-payment-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-payment-identity__preview {
    align-items: center;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-payment-identity__title-row:hover .fd-payment-identity__preview,
.fd-payment-identity__title-row:focus-within .fd-payment-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-payment-identity__preview:hover,
.fd-payment-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-payment-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-payment-identity__copy small,
.fd-payment-user small,
.fd-payment-product small,
.fd-payment-status small,
.fd-payment-method small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-payment-user-link {
    color: inherit;
    display: inline-flex;
    min-width: 0;
    text-decoration: none;
}

.fd-payment-user-link:hover strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-payment-user--missing strong {
    color: var(--fd-danger, #dc2626);
}

.fd-payment-user--restricted strong,
.fd-payment-product--unknown strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-payment-status {
    justify-items: start;
    min-width: 92px;
}

.fd-payment-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.fd-payment-user-link:focus-visible,
.fd-payment-identity__title-link:focus-visible,
.fd-payment-identity__preview:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

/* Subscription changelist semantic columns. */
.fd-subscription-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 210px;
}

.fd-subscription-identity__mark {
    align-items: center;
    background: #eef2ff;
    border-radius: var(--fd-radius);
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-subscription-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-subscription-identity__copy,
.fd-subscription-user,
.fd-subscription-status {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-subscription-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-subscription-identity__title-link,
.fd-subscription-user strong {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 220px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscription-identity__title-link:hover,
.fd-subscription-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscription-identity__title-link--unknown,
.fd-subscription-user--restricted strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-subscription-identity__preview {
    align-items: center;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-subscription-identity__title-row:hover .fd-subscription-identity__preview,
.fd-subscription-identity__title-row:focus-within .fd-subscription-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-subscription-identity__preview:hover,
.fd-subscription-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscription-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-subscription-identity__copy small,
.fd-subscription-user small,
.fd-subscription-status small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscription-user-link {
    color: inherit;
    display: inline-flex;
    min-width: 0;
    text-decoration: none;
}

.fd-subscription-user-link:hover strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscription-user--missing strong {
    color: var(--fd-danger, #dc2626);
}

.fd-subscription-status {
    justify-items: start;
    min-width: 92px;
}

.fd-subscription-credits {
    align-items: baseline;
    display: inline-flex;
    gap: 4px;
    min-width: 82px;
    white-space: nowrap;
}

.fd-subscription-credits strong {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.fd-subscription-credits small,
.fd-subscription-credits--empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-subscription-period {
    display: grid;
    gap: 6px;
    min-width: 200px;
}

.fd-subscription-period > span {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: 30px minmax(0, 1fr);
}

.fd-subscription-period > span > small {
    color: var(--color-font-subtle-light, #6b7280);
    padding-top: 1px;
}

.fd-subscription-period .fd-user-time > span,
.fd-subscription-period .fd-user-time small {
    white-space: nowrap;
}

.fd-subscription-provider {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscription-provider--empty {
    color: var(--color-font-subtle-light, #6b7280);
    font-family: inherit;
}

.fd-subscription-user-link:focus-visible,
.fd-subscription-identity__title-link:focus-visible,
.fd-subscription-identity__preview:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

/* Credit balance changelist semantic columns. */
.fd-credit-balance-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 238px;
}

.fd-credit-balance-identity__mark {
    align-items: center;
    background: #ecfdf5;
    border-radius: var(--fd-radius);
    color: #047857;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-credit-balance-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-credit-balance-identity__copy,
.fd-credit-balance-total,
.fd-credit-balance-monthly,
.fd-credit-balance-bonus,
.fd-credit-balance-time {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-credit-balance-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-credit-balance-identity__title-link {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 220px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-credit-balance-identity__title-link:hover,
.fd-credit-balance-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-balance-identity--restricted .fd-credit-balance-identity__title-link {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-credit-balance-identity--missing .fd-credit-balance-identity__title-link {
    color: var(--fd-danger, #dc2626);
}

.fd-credit-balance-identity__preview {
    align-items: center;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-credit-balance-identity__title-row:hover
    .fd-credit-balance-identity__preview,
.fd-credit-balance-identity__title-row:focus-within
    .fd-credit-balance-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-credit-balance-identity__preview:hover,
.fd-credit-balance-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-balance-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-credit-balance-identity__copy small,
.fd-credit-balance-total small,
.fd-credit-balance-monthly small,
.fd-credit-balance-bonus small,
.fd-credit-balance-time small,
.fd-credit-balance-actions__empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-credit-balance-identity__copy small {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-credit-balance-total,
.fd-credit-balance-monthly {
    min-width: 150px;
}

.fd-credit-balance-total strong,
.fd-credit-balance-monthly strong,
.fd-credit-balance-bonus strong {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.fd-credit-balance-total strong {
    color: #047857;
    font-size: 15px;
}

.fd-credit-balance-total.is-anomalous strong,
.fd-credit-balance-monthly.is-anomalous strong,
.fd-credit-balance-bonus.is-anomalous strong {
    color: var(--fd-danger, #dc2626);
}

.fd-credit-balance-warning {
    align-items: center;
    color: var(--fd-danger, #dc2626);
    display: inline-flex;
    font-size: 12px;
    gap: 3px;
    margin-top: 2px;
}

.fd-credit-balance-warning .material-symbols-outlined {
    font-size: 15px;
}

.fd-credit-balance-monthly progress {
    appearance: none;
    background: var(--color-base-200, #e5e7eb);
    border: 0;
    border-radius: 999px;
    height: 5px;
    margin: 3px 0;
    overflow: hidden;
    width: 128px;
}

.fd-credit-balance-monthly progress::-webkit-progress-bar {
    background: var(--color-base-200, #e5e7eb);
}

.fd-credit-balance-monthly progress::-webkit-progress-value {
    background: #2563eb;
    border-radius: 999px;
}

.fd-credit-balance-monthly progress::-moz-progress-bar {
    background: #2563eb;
    border-radius: 999px;
}

.fd-credit-balance-bonus {
    min-width: 98px;
}

.fd-credit-balance-time {
    min-width: 132px;
}

.fd-credit-balance-time strong,
.fd-credit-balance-time small {
    white-space: nowrap;
}

.fd-credit-balance-time.is-due strong {
    color: #b45309;
}

.fd-credit-balance-time.is-empty strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-credit-balance-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 224px;
}

.fd-credit-balance-action {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: inherit;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
    min-height: 32px;
    padding: 0 9px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-credit-balance-action:hover,
.fd-credit-balance-action:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-primary-500, #3b82f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-balance-action--primary {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #ffffff;
}

.fd-credit-balance-action--primary:hover,
.fd-credit-balance-action--primary:focus-visible {
    background: var(--color-primary-700, #1d4ed8);
    border-color: var(--color-primary-700, #1d4ed8);
    color: #ffffff;
}

.fd-credit-balance-action .material-symbols-outlined {
    font-size: 17px;
}

.fd-credit-balance-identity__title-link:focus-visible,
.fd-credit-balance-identity__preview:focus-visible,
.fd-credit-balance-action:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

/* Credit transaction changelist semantic columns. */
.fd-credit-transaction-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 250px;
}

.fd-credit-transaction-identity__mark {
    align-items: center;
    background: #eef2ff;
    border-radius: var(--fd-radius);
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-credit-transaction-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-credit-transaction-identity__copy,
.fd-credit-transaction-user,
.fd-credit-transaction-amount,
.fd-credit-transaction-type,
.fd-credit-transaction-reference,
.fd-credit-transaction-time {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-credit-transaction-identity__title-row,
.fd-credit-transaction-reference__heading {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-credit-transaction-identity__title-link,
.fd-credit-transaction-identity__copy > strong,
.fd-credit-transaction-user strong,
.fd-credit-transaction-reference strong,
.fd-credit-transaction-reference a {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 250px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-credit-transaction-identity__title-link:hover,
.fd-credit-transaction-identity__title-link:focus-visible,
.fd-credit-transaction-user-link:hover strong,
.fd-credit-transaction-reference a:hover,
.fd-credit-transaction-reference a:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-transaction-identity__preview {
    align-items: center;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-credit-transaction-identity__title-row:hover
    .fd-credit-transaction-identity__preview,
.fd-credit-transaction-identity__title-row:focus-within
    .fd-credit-transaction-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-credit-transaction-identity__preview:hover,
.fd-credit-transaction-identity__preview:focus-visible,
.fd-credit-transaction-reference__copy:hover,
.fd-credit-transaction-reference__copy:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-transaction-identity__preview .material-symbols-outlined,
.fd-credit-transaction-reference__copy .material-symbols-outlined {
    font-size: 18px;
}

.fd-credit-transaction-identity__copy small,
.fd-credit-transaction-user small,
.fd-credit-transaction-amount small,
.fd-credit-transaction-type small,
.fd-credit-transaction-reference small,
.fd-credit-transaction-time small,
.fd-credit-transaction-actions__empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-credit-transaction-identity__copy small,
.fd-credit-transaction-user small,
.fd-credit-transaction-reference small {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-credit-transaction-user-link {
    color: inherit;
    display: inline-flex;
    min-width: 0;
    text-decoration: none;
}

.fd-credit-transaction-user--missing strong {
    color: var(--fd-danger, #dc2626);
}

.fd-credit-transaction-user--restricted strong,
.fd-credit-transaction-reference--empty strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-credit-transaction-amount {
    min-width: 112px;
}

.fd-credit-transaction-amount strong,
.fd-credit-transaction-amount small {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fd-credit-transaction-amount strong {
    font-size: 15px;
    font-weight: 750;
}

.fd-credit-transaction-amount--increase strong {
    color: #047857;
}

.fd-credit-transaction-amount--decrease strong {
    color: #b91c1c;
}

.fd-credit-transaction-amount--zero strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-credit-transaction-type {
    justify-items: start;
    min-width: 96px;
}

.fd-credit-transaction-reference {
    min-width: 190px;
}

.fd-credit-transaction-reference__copy {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    padding: 0;
}

.fd-credit-transaction-reference__copy.is-copied {
    color: #047857;
}

.fd-credit-transaction-time {
    min-width: 140px;
}

.fd-credit-transaction-time strong,
.fd-credit-transaction-time small {
    white-space: nowrap;
}

.fd-credit-transaction-time--empty strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-credit-transaction-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 180px;
}

.fd-credit-transaction-action {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: inherit;
    display: inline-flex;
    font-size: 12px;
    font-weight: 650;
    gap: 5px;
    min-height: 32px;
    padding: 0 9px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-credit-transaction-action:hover,
.fd-credit-transaction-action:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-primary-500, #3b82f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-transaction-action .material-symbols-outlined {
    font-size: 17px;
}

.fd-credit-transaction-identity__title-link:focus-visible,
.fd-credit-transaction-identity__preview:focus-visible,
.fd-credit-transaction-user-link:focus-visible,
.fd-credit-transaction-reference a:focus-visible,
.fd-credit-transaction-reference__copy:focus-visible,
.fd-credit-transaction-action:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-credit-transaction-detail-back {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    margin-bottom: 14px;
    min-height: 36px;
    text-decoration: none;
}

.fd-credit-transaction-detail-back:hover,
.fd-credit-transaction-detail-back:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-transaction-detail-back .material-symbols-outlined {
    font-size: 19px;
}

/* Read-only task observability detail. */
.fd-task-detail {
    --fd-task-detail-border: #e2e6ec;
    --fd-task-detail-muted: #687386;
    --fd-task-detail-soft: #f5f7fa;
    --fd-task-detail-surface: #ffffff;
    --fd-task-detail-text: #172033;
    box-sizing: border-box;
    color: var(--fd-task-detail-text);
    display: grid;
    gap: 14px;
    margin: 0 auto;
    max-width: 1320px;
    padding: 4px 4px 40px;
    width: 100%;
}

.fd-task-detail *,
.fd-task-detail *::before,
.fd-task-detail *::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

.fd-task-detail button,
.fd-task-detail progress {
    font: inherit;
}

.fd-task-detail__back {
    align-items: center;
    border-radius: 6px;
    color: var(--fd-task-detail-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    min-height: 38px;
    padding: 0 10px 0 6px;
    text-decoration: none;
    width: fit-content;
}

.fd-task-detail__back:hover,
.fd-task-detail__back:focus-visible {
    background: var(--fd-task-detail-soft);
    color: var(--fd-task-detail-text);
}

.fd-task-detail__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-task-detail a:focus-visible,
.fd-task-detail button:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-task-detail__header,
.fd-task-detail__workspace {
    background: var(--fd-task-detail-surface);
    border: 1px solid var(--fd-task-detail-border);
    border-radius: 8px;
}

.fd-task-detail__header {
    overflow: hidden;
}

.fd-task-detail__identity {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    padding: 22px 24px 8px;
}

.fd-task-detail__icon {
    align-items: center;
    background: #ecfdf5;
    border-radius: 8px;
    color: #047857;
    display: flex;
    flex: 0 0 48px;
    height: 48px;
    justify-content: center;
}

.fd-task-detail__icon .material-symbols-outlined {
    font-size: 26px;
}

.fd-task-detail__heading {
    min-width: 0;
}

.fd-task-detail__heading-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-task-detail__heading h1 {
    color: var(--fd-task-detail-text);
    font-size: 24px;
    font-weight: 760;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-task-detail__type {
    background: var(--fd-task-detail-soft);
    border-radius: 4px;
    color: var(--fd-task-detail-muted);
    display: inline-block;
    font-size: 11px;
    margin-top: 7px;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-task-detail__id {
    align-items: center;
    color: var(--fd-task-detail-muted);
    display: flex;
    gap: 5px;
    margin-top: 4px;
    min-width: 0;
}

.fd-task-detail__id > code {
    background: transparent;
    color: inherit;
    font-size: 12px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-task-detail__icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--fd-task-detail-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
}

.fd-task-detail__icon-button:hover {
    background: var(--fd-task-detail-soft);
    border-color: var(--fd-task-detail-border);
    color: var(--fd-task-detail-text);
}

.fd-task-detail__icon-button .material-symbols-outlined {
    font-size: 18px;
}

.fd-task-detail__status-summary {
    color: var(--fd-task-detail-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    padding: 0 24px 20px 86px;
}

.fd-task-detail__metrics {
    border-top: 1px solid var(--fd-task-detail-border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.fd-task-detail__metrics > div {
    display: grid;
    gap: 4px;
    min-height: 94px;
    padding: 16px 20px;
}

.fd-task-detail__metrics > div + div {
    border-left: 1px solid var(--fd-task-detail-border);
}

.fd-task-detail__metrics dt,
.fd-task-detail__metrics dd,
.fd-task-detail__metrics small {
    margin: 0;
}

.fd-task-detail__metrics dt {
    color: var(--fd-task-detail-muted);
    font-size: 12px;
    font-weight: 600;
}

.fd-task-detail__metrics dd {
    align-items: center;
    color: var(--fd-task-detail-text);
    display: flex;
    font-size: 19px;
    font-weight: 760;
    min-height: 28px;
    overflow-wrap: anywhere;
}

.fd-task-detail__metrics small {
    color: var(--fd-task-detail-muted);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.fd-task-detail__read-state {
    align-items: center;
    border-radius: 4px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    min-height: 25px;
    padding: 2px 8px;
}

.fd-task-detail__read-state--success {
    background: #dcfce7;
    color: #166534;
}

.fd-task-detail__read-state--neutral {
    background: #f3f4f6;
    color: #4b5563;
}

.fd-task-detail__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
    overflow: hidden;
}

.fd-task-detail__execution {
    min-width: 0;
    padding: 24px;
}

.fd-task-detail__execution > header {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.fd-task-detail__execution h2,
.fd-task-detail__rail h2 {
    color: var(--fd-task-detail-text);
    font-size: 16px;
    font-weight: 740;
    line-height: 1.4;
    margin: 0;
}

.fd-task-detail__execution header p,
.fd-task-detail__rail header p {
    color: var(--fd-task-detail-muted);
    font-size: 12px;
    line-height: 1.55;
    margin: 4px 0 0;
}

.fd-task-detail__execution > header > strong {
    color: #047857;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}

.fd-task-detail__progress {
    display: grid;
    gap: 8px;
    margin-top: 24px;
}

.fd-task-detail__progress progress {
    appearance: none;
    background: var(--color-base-200, #e5e7eb);
    border: 0;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    width: 100%;
}

.fd-task-detail__progress progress::-webkit-progress-bar {
    background: var(--color-base-200, #e5e7eb);
}

.fd-task-detail__progress progress::-webkit-progress-value {
    background: #0d9488;
}

.fd-task-detail__progress progress::-moz-progress-bar {
    background: #0d9488;
}

.fd-task-detail__progress span {
    color: var(--fd-task-detail-muted);
    font-size: 12px;
}

.fd-task-detail__execution-metrics {
    border-bottom: 1px solid var(--fd-task-detail-border);
    border-top: 1px solid var(--fd-task-detail-border);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 24px 0 0;
}

.fd-task-detail__execution-metrics > div {
    min-width: 0;
    padding: 16px 12px 16px 0;
}

.fd-task-detail__execution-metrics > div:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--fd-task-detail-border);
    padding-left: 14px;
}

.fd-task-detail__execution-metrics dt,
.fd-task-detail__execution-metrics dd {
    margin: 0;
}

.fd-task-detail__execution-metrics dt {
    color: var(--fd-task-detail-muted);
    font-size: 11px;
}

.fd-task-detail__execution-metrics dd {
    color: var(--fd-task-detail-text);
    font-size: 19px;
    font-weight: 740;
    margin-top: 4px;
}

.fd-task-detail__execution-metrics dd small {
    color: var(--fd-task-detail-muted);
    font-size: 11px;
    font-weight: 600;
    margin-left: 3px;
}

.fd-task-detail__metrics-empty {
    align-items: center;
    border-bottom: 1px solid var(--fd-task-detail-border);
    border-top: 1px solid var(--fd-task-detail-border);
    color: var(--fd-task-detail-muted);
    display: flex;
    font-size: 12px;
    gap: 8px;
    margin-top: 24px;
    min-height: 68px;
}

.fd-task-detail__metrics-empty .material-symbols-outlined {
    font-size: 19px;
}

.fd-task-detail__failure {
    align-items: flex-start;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding: 13px 14px;
}

.fd-task-detail__failure > .material-symbols-outlined {
    font-size: 20px;
}

.fd-task-detail__failure strong,
.fd-task-detail__failure p {
    display: block;
    margin: 0;
}

.fd-task-detail__failure strong {
    font-size: 13px;
}

.fd-task-detail__failure p {
    font-size: 12px;
    line-height: 1.55;
    margin-top: 3px;
}

.fd-task-detail__rail {
    border-left: 1px solid var(--fd-task-detail-border);
    min-width: 0;
}

.fd-task-detail__rail > section {
    padding: 22px;
}

.fd-task-detail__rail > section + section {
    border-top: 1px solid var(--fd-task-detail-border);
}

.fd-task-detail__relations {
    min-width: 0;
}

.fd-task-detail__relation-list {
    display: grid;
    margin-top: 14px;
}

.fd-task-detail__relation-list > a,
.fd-task-detail__relation-list > div {
    align-items: center;
    color: inherit;
    display: grid;
    gap: 10px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    min-height: 66px;
    padding: 9px 5px;
    text-decoration: none;
}

.fd-task-detail__relation-list > * + * {
    border-top: 1px solid var(--fd-task-detail-border);
}

.fd-task-detail__relation-list > a:hover {
    background: var(--fd-task-detail-soft);
}

.fd-task-detail__relation-icon {
    align-items: center;
    background: var(--fd-task-detail-soft);
    border-radius: 7px;
    color: var(--fd-task-detail-muted);
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.fd-task-detail__relation-icon .material-symbols-outlined,
.fd-task-detail__relation-list > a > .material-symbols-outlined {
    font-size: 19px;
}

.fd-task-detail__relation-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-task-detail__relation-copy small,
.fd-task-detail__relation-copy strong,
.fd-task-detail__relation-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-task-detail__relation-copy small,
.fd-task-detail__relation-copy > span {
    color: var(--fd-task-detail-muted);
    font-size: 11px;
}

.fd-task-detail__relation-copy strong {
    font-size: 13px;
}

.fd-task-detail__timeline ol {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.fd-task-detail__timeline li {
    display: grid;
    gap: 10px;
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 62px;
    position: relative;
}

.fd-task-detail__timeline li:not(:last-child)::after {
    background: var(--fd-task-detail-border);
    content: "";
    height: calc(100% - 28px);
    left: 14px;
    position: absolute;
    top: 28px;
    width: 1px;
}

.fd-task-detail__timeline-icon {
    align-items: center;
    background: var(--fd-task-detail-soft);
    border: 1px solid var(--fd-task-detail-border);
    border-radius: 50%;
    color: var(--fd-task-detail-muted);
    display: flex;
    height: 28px;
    justify-content: center;
    position: relative;
    width: 28px;
    z-index: 1;
}

.fd-task-detail__timeline .is-done .fd-task-detail__timeline-icon {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.fd-task-detail__timeline-icon .material-symbols-outlined {
    font-size: 15px;
}

.fd-task-detail__timeline li > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-bottom: 14px;
}

.fd-task-detail__timeline strong {
    font-size: 12px;
}

.fd-task-detail__timeline small,
.fd-task-detail__timeline time {
    color: var(--fd-task-detail-muted);
    font-size: 11px;
    line-height: 1.4;
}

.fd-task-detail__toast {
    background: #172033;
    border-radius: 6px;
    bottom: 24px;
    color: #ffffff;
    font-size: 12px;
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 9px 13px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 80;
}

.dark .fd-user-list-intro p,
.dark .fd-user-identity__copy small,
.dark .fd-user-time small,
.dark .fd-project-identity__copy small,
.dark .fd-project-owner small,
.dark .fd-project-stage small,
.dark .fd-template-identity__copy small,
.dark .fd-template-owner small,
.dark .fd-template-status small,
.dark .fd-template-metric small,
.dark .fd-template-time small,
.dark .fd-task-identity__copy small,
.dark .fd-task-project small,
.dark .fd-task-owner small,
.dark .fd-task-status small,
.dark .fd-task-progress small,
.dark .fd-task-points small,
.dark .fd-payment-identity__copy small,
.dark .fd-payment-user small,
.dark .fd-payment-product small,
.dark .fd-payment-status small,
.dark .fd-payment-method small,
.dark .fd-subscription-identity__copy small,
.dark .fd-subscription-user small,
.dark .fd-subscription-status small,
.dark .fd-subscription-credits small,
.dark .fd-subscription-credits--empty,
.dark .fd-subscription-period > span > small,
.dark .fd-subscription-provider--empty {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-project-identity__mark {
    background: rgb(79 70 229 / 18%);
    color: #a5b4fc;
}

.dark .fd-project-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-project-identity__preview:hover,
.dark .fd-project-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-list-scope-tabs {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-list-scope-tabs a {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-list-scope-tabs a:hover,
.dark .fd-list-scope-tabs a:focus-visible {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-list-scope-tabs a[aria-current="page"] {
    color: var(--color-primary-300, #93c5fd);
}

.dark .fd-list-scope-tabs strong {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-template-identity__mark {
    background: rgb(8 145 178 / 18%);
    border-color: rgb(103 232 249 / 24%);
    color: #67e8f9;
}

.dark .fd-template-identity__cover {
    background: var(--color-base-900, #111827);
}

.dark .fd-template-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-template-identity__preview:hover,
.dark .fd-template-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-task-identity__mark {
    background: rgb(5 150 105 / 18%);
    color: #6ee7b7;
}

.dark .fd-task-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-task-identity__preview:hover,
.dark .fd-task-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-payment-identity__mark {
    background: rgb(194 65 12 / 18%);
    color: #fdba74;
}

.dark .fd-payment-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-payment-identity__preview:hover,
.dark .fd-payment-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-subscription-identity__mark {
    background: rgb(79 70 229 / 18%);
    color: #a5b4fc;
}

.dark .fd-subscription-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-subscription-identity__preview:hover,
.dark .fd-subscription-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-credit-balance-identity__mark {
    background: rgb(5 150 105 / 18%);
    color: #6ee7b7;
}

.dark .fd-credit-balance-identity__preview,
.dark .fd-credit-balance-identity__copy small,
.dark .fd-credit-balance-total small,
.dark .fd-credit-balance-monthly small,
.dark .fd-credit-balance-bonus small,
.dark .fd-credit-balance-time small,
.dark .fd-credit-balance-actions__empty {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-credit-balance-identity__preview:hover,
.dark .fd-credit-balance-identity__preview:focus-visible,
.dark .fd-credit-balance-action--secondary:hover,
.dark .fd-credit-balance-action--secondary:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-credit-balance-identity--restricted
    .fd-credit-balance-identity__title-link,
.dark .fd-credit-balance-time.is-empty strong {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-credit-balance-monthly progress,
.dark .fd-credit-balance-monthly progress::-webkit-progress-bar {
    background: var(--color-base-700, #374151);
}

.dark .fd-credit-balance-action--secondary {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-credit-transaction-identity__mark {
    background: rgb(79 70 229 / 18%);
    color: #a5b4fc;
}

.dark .fd-credit-transaction-identity__preview,
.dark .fd-credit-transaction-identity__copy small,
.dark .fd-credit-transaction-user small,
.dark .fd-credit-transaction-amount small,
.dark .fd-credit-transaction-type small,
.dark .fd-credit-transaction-reference small,
.dark .fd-credit-transaction-reference__copy,
.dark .fd-credit-transaction-time small,
.dark .fd-credit-transaction-actions__empty,
.dark .fd-credit-transaction-detail-back {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-credit-transaction-identity__preview:hover,
.dark .fd-credit-transaction-identity__preview:focus-visible,
.dark .fd-credit-transaction-reference__copy:hover,
.dark .fd-credit-transaction-reference__copy:focus-visible,
.dark .fd-credit-transaction-action:hover,
.dark .fd-credit-transaction-action:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-credit-transaction-user--restricted strong,
.dark .fd-credit-transaction-reference--empty strong,
.dark .fd-credit-transaction-amount--zero strong {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-credit-transaction-action {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-task-project--none strong,
.dark .fd-task-owner--restricted strong,
.dark .fd-payment-user--restricted strong,
.dark .fd-payment-product--unknown strong,
.dark .fd-subscription-user--restricted strong,
.dark .fd-subscription-identity__title-link--unknown {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-task-progress progress,
.dark .fd-task-progress progress::-webkit-progress-bar {
    background: var(--color-base-700, #374151);
}

.dark .fd-task-detail {
    --fd-task-detail-border: #303846;
    --fd-task-detail-muted: #9ca6b7;
    --fd-task-detail-soft: #1d2430;
    --fd-task-detail-surface: #111827;
    --fd-task-detail-text: #f3f4f6;
}

.dark .fd-task-detail__icon {
    background: rgb(5 150 105 / 18%);
    color: #6ee7b7;
}

.dark .fd-task-detail__read-state--success {
    background: rgb(22 101 52 / 35%);
    color: #86efac;
}

.dark .fd-task-detail__read-state--neutral {
    background: #252d3a;
    color: #c2c9d4;
}

.dark .fd-task-detail__failure {
    background: rgb(127 29 29 / 24%);
    color: #fecaca;
}

.dark .fd-task-detail__timeline .is-done .fd-task-detail__timeline-icon {
    background: rgb(5 150 105 / 18%);
    border-color: #047857;
    color: #6ee7b7;
}

.dark .fd-user-list-refresh,
.dark .fd-user-list-search__field,
.dark .fd-user-list-controls select,
.dark .fd-user-list-controls input[type="date"] {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-row-menu__popup,
.dark .fd-user-row-menu__fallback {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-list-controls button[type="submit"] {
    background: var(--color-primary-600, #2563eb);
}

@media (max-width: 1023px) {
    .fd-task-detail__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-task-detail__rail {
        border-left: 0;
        border-top: 1px solid var(--fd-task-detail-border);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-task-detail__rail > section + section {
        border-left: 1px solid var(--fd-task-detail-border);
        border-top: 0;
    }
}

@media screen and (max-width: 767px) {
    .fd-user-list-intro {
        align-items: flex-start;
        gap: var(--fd-space-3);
    }

    .fd-list-scope-tabs {
        gap: var(--fd-space-4);
        margin-inline: -2px;
        padding-inline: 2px;
    }

    .fd-list-scope-tabs a {
        min-height: 42px;
    }

    .fd-template-identity {
        min-width: 0;
    }

    .fd-user-list-search {
        flex-wrap: wrap;
    }

    .fd-user-list-noscript-filters {
        display: block;
    }

    .fd-user-list-date-range {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .fd-user-row-actions {
        justify-content: flex-end;
        min-width: 0;
    }

    .fd-user-row-menu__popup {
        max-width: calc(100vw - 24px);
    }

    [data-fd-list-model="project"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="project"] #result_list td::before {
        min-width: 84px;
    }

    [data-fd-list-model="template"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="template"] #result_list td::before {
        min-width: 92px;
    }

    [data-fd-list-model="task"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="task"] #result_list td::before {
        min-width: 84px;
    }

    [data-fd-list-model="payment"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="payment"] #result_list td::before {
        min-width: 84px;
    }

    [data-fd-list-model="subscription"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="subscription"] #result_list td::before {
        min-width: 92px;
    }

    [data-fd-list-model="creditbalance"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="creditbalance"] #result_list td::before {
        min-width: 92px;
    }

    [data-fd-list-model="credittransaction"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="credittransaction"] #result_list td::before {
        min-width: 92px;
    }

    .fd-project-identity,
    .fd-project-owner-link,
    .fd-template-identity,
    .fd-template-owner__link,
    .fd-task-identity,
    .fd-task-project-link,
    .fd-task-owner-link,
    .fd-payment-identity,
    .fd-payment-user-link,
    .fd-subscription-identity,
    .fd-subscription-user-link,
    .fd-credit-balance-identity,
    .fd-credit-transaction-identity,
    .fd-credit-transaction-user-link {
        max-width: min(100%, 280px);
        min-width: 0;
    }

    .fd-template-identity__preview,
    .fd-task-identity__preview,
    .fd-payment-identity__preview,
    .fd-subscription-identity__preview,
    .fd-credit-balance-identity__preview,
    .fd-credit-transaction-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }

    .fd-credit-balance-total,
    .fd-credit-balance-monthly,
    .fd-credit-balance-bonus,
    .fd-credit-balance-time,
    .fd-credit-balance-actions {
        min-width: 0;
    }

    .fd-credit-balance-actions {
        justify-content: flex-end;
    }

    .fd-credit-transaction-amount,
    .fd-credit-transaction-type,
    .fd-credit-transaction-reference,
    .fd-credit-transaction-time,
    .fd-credit-transaction-actions {
        min-width: 0;
    }

    .fd-credit-transaction-actions {
        justify-content: flex-end;
    }

    .fd-credit-transaction-reference__copy {
        flex-basis: 44px;
        height: 44px;
    }

    .fd-credit-transaction-action {
        min-height: 44px;
    }

    .fd-subscription-period {
        min-width: 0;
    }

    .fd-task-detail {
        gap: 10px;
        padding-inline: 0;
    }

    .fd-task-detail__identity {
        padding: 18px 16px 8px;
    }

    .fd-task-detail__icon {
        flex-basis: 42px;
        height: 42px;
    }

    .fd-task-detail__heading h1 {
        font-size: 20px;
    }

    .fd-task-detail__status-summary {
        padding: 0 16px 16px 72px;
    }

    .fd-task-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-task-detail__metrics > div:nth-child(odd) {
        border-left: 0;
    }

    .fd-task-detail__metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--fd-task-detail-border);
    }

    .fd-task-detail__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-task-detail__execution {
        padding: 20px 16px;
    }

    .fd-task-detail__execution-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-task-detail__execution-metrics > div:not(:nth-child(3n + 1)) {
        border-left: 0;
        padding-left: 0;
    }

    .fd-task-detail__execution-metrics > div:nth-child(even) {
        border-left: 1px solid var(--fd-task-detail-border);
        padding-left: 12px;
    }

    .fd-task-detail__rail {
        border-left: 0;
        border-top: 1px solid var(--fd-task-detail-border);
        display: block;
    }

    .fd-task-detail__rail > section {
        padding: 20px 16px;
    }

    .fd-task-detail__rail > section + section {
        border-left: 0;
        border-top: 1px solid var(--fd-task-detail-border);
    }
}

/* Channel blocklist create, edit, and removal workflow. */
.fd-channel-blocklist-page .fd-email-channel-page__hero-icon,
.fd-channel-blocklist-page .fd-email-channel-page__preview-icon {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

.fd-channel-blocklist-page .fd-email-channel-page__feedback {
    gap: var(--fd-space-3);
    justify-content: space-between;
}

.fd-channel-blocklist-page .fd-email-channel-page__feedback a {
    color: inherit;
    flex: 0 0 auto;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fd-channel-blocklist-page
    .fd-email-channel-form__field
    input[type="email"],
.fd-channel-blocklist-page
    .fd-email-channel-form__field
    input[type="search"],
.fd-channel-blocklist-page .fd-email-channel-form__field select,
.fd-channel-blocklist-page
    .fd-email-channel-dialog__panel
    input[type="email"],
.fd-channel-blocklist-page .fd-email-channel-dialog__panel textarea {
    background: transparent;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    box-shadow: none;
    color: inherit;
    font-size: 0.875rem;
    max-width: none;
    min-height: 42px;
    padding: 9px 11px;
    width: 100%;
}

.fd-channel-blocklist-page .fd-email-channel-form__field select {
    appearance: auto;
    cursor: pointer;
}

.fd-channel-blocklist-page
    .fd-email-channel-form__field
    input[type="email"]:focus,
.fd-channel-blocklist-page
    .fd-email-channel-form__field
    input[type="search"]:focus,
.fd-channel-blocklist-page .fd-email-channel-form__field select:focus,
.fd-channel-blocklist-page
    .fd-email-channel-dialog__panel
    input[type="email"]:focus,
.fd-channel-blocklist-page
    .fd-email-channel-dialog__panel
    textarea:focus {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 12%);
    outline: none;
}

.fd-channel-blocklist-page
    .fd-email-channel-form__field.is-invalid
    input,
.fd-channel-blocklist-page
    .fd-email-channel-form__field.is-invalid
    select,
.fd-channel-blocklist-page
    .fd-email-channel-form__field.is-invalid
    textarea {
    border-color: #ef4444;
}

.fd-channel-blocklist-picker {
    display: grid;
    gap: var(--fd-space-2);
}

.fd-channel-blocklist-picker__search {
    display: block;
    position: relative;
}

.fd-channel-blocklist-picker__search .material-symbols-outlined {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 18px;
    left: 11px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.fd-channel-blocklist-picker__search input[type="search"] {
    padding-left: 36px;
}

.fd-channel-blocklist-impact {
    align-items: flex-start;
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: 34px minmax(0, 1fr);
    padding: var(--fd-space-4) var(--fd-space-5);
}

.fd-channel-blocklist-impact + .fd-channel-blocklist-impact {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-channel-blocklist-impact > .material-symbols-outlined {
    align-items: center;
    background: #ecfdf5;
    border-radius: var(--fd-radius);
    color: #059669;
    display: inline-flex;
    font-size: 19px;
    height: 34px;
    justify-content: center;
}

.fd-channel-blocklist-impact.is-neutral > .material-symbols-outlined {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-channel-blocklist-impact strong {
    display: block;
    font-size: 0.875rem;
}

.fd-channel-blocklist-impact p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.55;
    margin: 4px 0 0;
}

.fd-channel-blocklist-preview > div > span {
    color: var(--color-font-subtle-light, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-channel-blocklist-preview a {
    align-items: center;
    color: var(--color-primary-700, #1d4ed8);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 3px;
    margin-top: 4px;
    text-decoration: none;
}

.fd-channel-blocklist-preview a:hover,
.fd-channel-blocklist-preview a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fd-channel-blocklist-preview a .material-symbols-outlined {
    font-size: 15px;
}

.fd-channel-blocklist-page
    .fd-email-channel-dialog__panel
    textarea {
    min-height: 86px;
    resize: vertical;
}

.dark .fd-channel-blocklist-page .fd-email-channel-page__hero-icon,
.dark .fd-channel-blocklist-page .fd-email-channel-page__preview-icon {
    background: rgb(225 29 72 / 14%);
    border-color: rgb(251 113 133 / 24%);
    color: #fda4af;
}

.dark .fd-channel-blocklist-page
    .fd-email-channel-form__field
    input[type="email"],
.dark .fd-channel-blocklist-page
    .fd-email-channel-form__field
    input[type="search"],
.dark .fd-channel-blocklist-page .fd-email-channel-form__field select,
.dark .fd-channel-blocklist-page
    .fd-email-channel-dialog__panel
    input[type="email"],
.dark .fd-channel-blocklist-page
    .fd-email-channel-dialog__panel
    textarea {
    border-color: var(--color-base-600, #4b5563);
}

.dark .fd-channel-blocklist-impact + .fd-channel-blocklist-impact {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-channel-blocklist-impact > .material-symbols-outlined {
    background: rgb(5 150 105 / 16%);
    color: #6ee7b7;
}

.dark
    .fd-channel-blocklist-impact.is-neutral
    > .material-symbols-outlined {
    background: var(--color-base-800, #1f2937);
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-channel-blocklist-impact p,
.dark .fd-channel-blocklist-preview > div > span,
.dark
    .fd-channel-blocklist-picker__search
    .material-symbols-outlined {
    color: var(--color-font-subtle-dark, #9ca3af);
}

@media screen and (max-width: 639px) {
    .fd-channel-blocklist-page .fd-email-channel-page__feedback {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-channel-blocklist-impact {
        padding: var(--fd-space-4);
    }
}

/* Invitation code generation workflow. */
.fd-invitation-batch {
    margin: 0 auto;
    max-width: 1240px;
    padding-bottom: 48px;
}

.fd-invitation-batch__header {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 24px;
}

.fd-invitation-batch__list-link {
    align-items: center;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 6px;
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
}

.fd-invitation-batch__list-link:hover,
.fd-invitation-batch__list-link:focus-visible {
    border-color: var(--color-primary-400, #60a5fa);
    color: var(--color-primary-600, #2563eb);
}

.fd-invitation-batch__list-link .material-symbols-outlined {
    font-size: 19px;
}

.fd-invitation-batch__layout {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
}

.fd-invitation-batch__form,
.fd-invitation-batch__summary,
.fd-invitation-batch__result {
    background: var(--color-base-50, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
}

.fd-invitation-batch__form {
    padding: 26px 28px 30px;
}

.fd-invitation-batch__fields {
    margin-top: 24px;
}

.fd-invitation-batch__fields textarea {
    min-height: 112px;
    resize: vertical;
}

.fd-invitation-batch__summary {
    padding: 24px;
    position: sticky;
    top: 88px;
}

.fd-invitation-batch__summary-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.fd-invitation-batch__summary-heading > .material-symbols-outlined {
    align-items: center;
    background: #eef4ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 23px;
    height: 42px;
    justify-content: center;
}

.fd-invitation-batch__summary-heading h2,
.fd-invitation-batch__summary-heading p {
    margin: 0;
}

.fd-invitation-batch__summary-heading h2 {
    color: var(--color-font-default-light, #111827);
    font-size: 16px;
    font-weight: 700;
}

.fd-invitation-batch__summary-heading p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 13px;
    margin-top: 3px;
}

.fd-invitation-batch__summary dl,
.fd-invitation-batch__result-summary {
    margin: 0;
}

.fd-invitation-batch__summary dl > div {
    align-items: baseline;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 13px 0;
}

.fd-invitation-batch__summary dl > div:last-child {
    border-bottom: 0;
}

.fd-invitation-batch__summary dt,
.fd-invitation-batch__result-summary dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 13px;
}

.fd-invitation-batch__summary dd {
    color: var(--color-font-default-light, #111827);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    max-width: 62%;
    text-align: right;
}

.fd-invitation-batch__summary dd strong {
    color: #2563eb;
    font-size: 24px;
}

.fd-invitation-batch__summary-note {
    background: #f7f9fc;
    border-left: 3px solid #93c5fd;
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 13px;
    line-height: 1.65;
    margin: 18px 0 0;
    padding: 11px 12px;
}

.fd-invitation-batch__form-actions,
.fd-invitation-batch__result-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
}

.fd-invitation-batch__form-actions > a,
.fd-invitation-batch__secondary-action {
    align-items: center;
    border: 1px solid var(--color-base-200, #d1d5db);
    border-radius: 6px;
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
    text-decoration: none;
}

.fd-invitation-batch__form-actions > button,
.fd-invitation-batch__result-actions > button {
    align-items: center;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    min-height: 40px;
    padding: 0 17px;
}

.fd-invitation-batch__form-actions > button:hover,
.fd-invitation-batch__result-actions > button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.fd-invitation-batch__form-actions > button:disabled,
.fd-invitation-batch__result-actions > button:disabled {
    cursor: wait;
    opacity: .65;
}

.fd-invitation-batch__form-actions .material-symbols-outlined,
.fd-invitation-batch__result-actions .material-symbols-outlined {
    font-size: 18px;
}

.fd-invitation-batch__warning {
    align-items: flex-start;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 8px;
    color: #9a3412;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px 16px;
}

.fd-invitation-batch__warning strong,
.fd-invitation-batch__warning p {
    margin: 0;
}

.fd-invitation-batch__warning p {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 4px;
}

.fd-invitation-batch__result {
    padding: 28px;
}

.fd-invitation-batch__success {
    align-items: center;
    display: flex;
    gap: 14px;
}

.fd-invitation-batch__success > .material-symbols-outlined {
    color: #16a34a;
    font-size: 42px;
}

.fd-invitation-batch__success h2,
.fd-invitation-batch__success p {
    margin: 0;
}

.fd-invitation-batch__success h2 {
    color: var(--color-font-default-light, #111827);
    font-size: 22px;
    font-weight: 750;
}

.fd-invitation-batch__success p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 14px;
    margin-top: 5px;
}

.fd-invitation-batch__result-summary {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
}

.fd-invitation-batch__result-summary > div {
    border-right: 1px solid var(--color-base-200, #e5e7eb);
    min-width: 0;
    padding: 16px 18px;
}

.fd-invitation-batch__result-summary > div:nth-child(3n) {
    border-right: 0;
}

.fd-invitation-batch__result-summary > div:nth-child(n + 4) {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-invitation-batch__result-summary dd {
    color: var(--color-font-default-light, #111827);
    font-size: 15px;
    font-weight: 650;
    margin: 5px 0 0;
    overflow-wrap: anywhere;
}

.fd-invitation-batch__codes {
    margin-top: 26px;
}

.fd-invitation-batch__codes-heading {
    align-items: end;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.fd-invitation-batch__codes-heading h3,
.fd-invitation-batch__codes-heading p {
    margin: 0;
}

.fd-invitation-batch__codes-heading h3 {
    color: var(--color-font-default-light, #111827);
    font-size: 16px;
    font-weight: 700;
}

.fd-invitation-batch__codes-heading p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 13px;
    margin-top: 4px;
}

.fd-invitation-batch__codes-heading > span {
    background: #eff6ff;
    border-radius: 999px;
    color: #1d4ed8;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
}

.fd-invitation-batch__codes textarea {
    background: #f8fafc;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 6px;
    color: #111827;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 14px;
    line-height: 1.8;
    min-height: 300px;
    padding: 16px 18px;
    resize: vertical;
    width: 100%;
}

.fd-invitation-batch__codes textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 14%);
    outline: none;
}

.fd-invitation-batch__copy-status {
    color: #15803d;
    font-size: 13px;
    min-height: 20px;
    margin: 8px 0 0;
    text-align: right;
}

.dark .fd-invitation-batch__list-link,
.dark .fd-invitation-batch__form,
.dark .fd-invitation-batch__summary,
.dark .fd-invitation-batch__result {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-invitation-batch__summary-heading h2,
.dark .fd-invitation-batch__summary dd,
.dark .fd-invitation-batch__success h2,
.dark .fd-invitation-batch__result-summary dd,
.dark .fd-invitation-batch__codes-heading h3 {
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-invitation-batch__summary-heading p,
.dark .fd-invitation-batch__summary dt,
.dark .fd-invitation-batch__result-summary dt,
.dark .fd-invitation-batch__success p,
.dark .fd-invitation-batch__codes-heading p {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-invitation-batch__summary dl > div,
.dark .fd-invitation-batch__result-summary,
.dark .fd-invitation-batch__result-summary > div {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-invitation-batch__summary-note,
.dark .fd-invitation-batch__codes textarea {
    background: var(--color-base-800, #1f2937);
    color: var(--color-font-default-dark, #f3f4f6);
}

@media screen and (max-width: 900px) {
    .fd-invitation-batch__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-invitation-batch__summary {
        position: static;
    }
}

@media screen and (max-width: 640px) {
    .fd-invitation-batch__header,
    .fd-invitation-batch__codes-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-invitation-batch__list-link {
        align-self: flex-start;
    }

    .fd-invitation-batch__form,
    .fd-invitation-batch__summary,
    .fd-invitation-batch__result {
        padding: 20px;
    }

    .fd-invitation-batch__result-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-invitation-batch__result-summary > div,
    .fd-invitation-batch__result-summary > div:nth-child(3n) {
        border-bottom: 1px solid var(--color-base-200, #e5e7eb);
        border-right: 0;
        border-top: 0;
    }

    .fd-invitation-batch__result-summary > div:last-child {
        border-bottom: 0;
    }

    .fd-invitation-batch__form-actions,
    .fd-invitation-batch__result-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-invitation-batch__form-actions > a,
    .fd-invitation-batch__form-actions > button,
    .fd-invitation-batch__result-actions > a,
    .fd-invitation-batch__result-actions > button {
        width: 100%;
    }
}

/* User detail overview. */
.fd-user-detail {
    display: grid;
    gap: var(--fd-space-6);
    margin-inline: auto;
    max-width: 1200px;
    width: 100%;
}

.fd-user-detail__fragment {
    display: grid;
    gap: var(--fd-space-6);
    min-width: 0;
}

.fd-user-detail-list-filters {
    display: grid;
    gap: var(--fd-space-4);
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
    padding: var(--fd-space-4);
}

.fd-user-detail-list-filters > label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.fd-user-detail-list-filters > label > span:first-child {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
    font-weight: 600;
}

.fd-user-detail-list-filters input:not([type="checkbox"]):not([type="radio"]) {
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-important-light, #111827);
    height: 40px;
    min-width: 0;
    outline: 0;
    padding: 8px 10px;
    width: 100%;
}

.fd-user-detail-list-filters input:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--color-primary-600, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-600, #2563eb) 18%, transparent);
}

.fd-user-detail-list-filters .fd-list-filter-panel__actions {
    margin: 0 calc(var(--fd-space-4) * -1) calc(var(--fd-space-4) * -1);
}

.dark .fd-user-detail-list-filters > label > span:first-child {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-user-detail-list-filters input:not([type="checkbox"]):not([type="radio"]) {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-important-dark, #f9fafb);
    color-scheme: dark;
}

.fd-user-detail-header,
.fd-user-detail-section {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
}

.fd-user-detail-header {
    overflow: hidden;
}

.fd-user-detail-back {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    font-size: 0.875rem;
    gap: var(--fd-space-1);
    margin: var(--fd-space-4) var(--fd-space-6) 0;
}

.fd-user-detail-heading {
    align-items: flex-start;
    display: grid;
    gap: var(--fd-space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--fd-space-4) var(--fd-space-6) var(--fd-space-6);
}

.fd-user-detail-avatar {
    align-items: center;
    background: var(--color-primary-100, #dbeafe);
    border-radius: var(--fd-radius);
    color: var(--color-primary-700, #1d4ed8);
    display: inline-flex;
    font-size: 1.25rem;
    font-weight: 700;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.fd-user-detail-title,
.fd-user-detail-title__line {
    min-width: 0;
}

.fd-user-detail-title {
    display: grid;
    gap: var(--fd-space-1);
}

.fd-user-detail-title__line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
}

.fd-user-detail-title h1 {
    font-size: 1.375rem;
    font-weight: 650;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-user-detail-title p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-user-detail-title code,
.fd-user-detail-fields code,
.fd-user-binding-list code {
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
    user-select: all;
}

.fd-user-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    justify-content: flex-end;
}

.fd-user-detail-action {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: var(--fd-space-2);
    min-height: 2.5rem;
    padding: 0 var(--fd-space-3);
}

.fd-user-detail-action--primary {
    background: var(--color-primary-600, #2563eb);
    border-color: transparent;
    color: #fff;
}

.fd-user-detail-action:hover,
.fd-user-detail-action:focus-visible,
.fd-user-detail-back:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.fd-user-detail-tabs {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: var(--fd-space-4);
    overflow-x: auto;
    padding: 0 var(--fd-space-6);
}

.fd-user-detail-tabs a {
    border-bottom: 2px solid transparent;
    flex: 0 0 auto;
    padding: var(--fd-space-3) 0;
}

.fd-user-detail-tabs a[aria-current="page"] {
    border-color: var(--color-primary-600, #2563eb);
    color: var(--color-primary-700, #1d4ed8);
    font-weight: 650;
}

.fd-user-detail-overview {
    display: grid;
    gap: var(--fd-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-user-detail-section {
    padding: var(--fd-space-6);
}

.fd-user-detail-section:first-child {
    grid-column: 1 / -1;
}

.fd-user-detail-section > header {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    margin-bottom: var(--fd-space-4);
    padding-bottom: var(--fd-space-3);
}

.fd-user-detail-section h2 {
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
}

.fd-user-detail-fields {
    display: grid;
    gap: 0 var(--fd-space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.fd-user-detail-fields > div {
    border-bottom: 1px solid var(--color-base-100, #f3f4f6);
    display: grid;
    gap: var(--fd-space-2);
    grid-template-columns: 7rem minmax(0, 1fr);
    padding: var(--fd-space-3) 0;
}

.fd-user-detail-fields dt {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-user-detail-fields dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-user-detail-fields--times {
    grid-template-columns: 1fr;
}

.fd-user-binding-list {
    display: grid;
    gap: var(--fd-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-user-binding-list li {
    align-items: center;
    border-bottom: 1px solid var(--color-base-100, #f3f4f6);
    display: grid;
    gap: var(--fd-space-2);
    grid-template-columns: minmax(6rem, auto) minmax(5rem, auto) minmax(0, 1fr);
    padding: var(--fd-space-3) 0;
}

.dark .fd-user-detail-header,
.dark .fd-user-detail-section {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-detail-tabs,
.dark .fd-user-detail-section > header,
.dark .fd-user-detail-fields > div,
.dark .fd-user-binding-list li {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-detail-title p,
.dark .fd-user-detail-fields dt,
.dark .fd-user-detail-back {
    color: var(--color-font-subtle-dark, #9ca3af);
}

@media (max-width: 1023px) {
    .fd-user-detail-heading {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .fd-user-detail-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .fd-user-detail-back {
        margin-inline: var(--fd-space-4);
    }

    .fd-user-detail-heading {
        grid-template-columns: 1fr;
        padding-inline: var(--fd-space-4);
    }

    .fd-user-detail-avatar {
        height: 2.5rem;
        width: 2.5rem;
    }

    .fd-user-detail-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .fd-user-detail-action {
        justify-content: center;
    }

    .fd-user-detail-tabs {
        padding-inline: var(--fd-space-4);
    }

    .fd-user-detail-overview,
    .fd-user-detail-fields {
        grid-template-columns: 1fr;
    }

    .fd-user-detail-section {
        padding: var(--fd-space-4);
    }

    .fd-user-detail-fields > div,
    .fd-user-binding-list li {
        grid-template-columns: 1fr;
    }
}

/* User detail project list. */
.fd-user-projects {
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
}

.fd-user-projects__header h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
}

.fd-user-projects__header p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: var(--fd-space-1) 0 0;
}

.fd-user-invitations__header {
    align-items: start;
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
}

.fd-user-invitations__header > span {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.875rem;
    white-space: nowrap;
}

.fd-user-invitations__table col:nth-child(1) { width: 35%; }
.fd-user-invitations__table col:nth-child(2) { width: 25%; }
.fd-user-invitations__table col:nth-child(3) { width: 25%; }
.fd-user-invitations__table col:nth-child(4) { width: 15%; }

.fd-user-invitations__table tr[data-first-redemption="true"] {
    background: var(--color-primary-50, #eff6ff);
}

.dark .fd-user-invitations__header > span {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-user-invitations__table tr[data-first-redemption="true"] {
    background: color-mix(in srgb, var(--color-primary-900, #1e3a8a) 35%, transparent);
}

.fd-user-projects__toolbar {
    align-items: end;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: minmax(16rem, 1fr) minmax(10rem, auto) minmax(11rem, auto) auto auto;
    min-width: 0;
    padding-bottom: var(--fd-space-4);
}

.fd-user-projects__toolbar label {
    display: grid;
    gap: var(--fd-space-1);
    min-width: 0;
}

.fd-user-projects__toolbar label > span {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
    font-weight: 600;
}

.fd-user-projects__toolbar input,
.fd-user-projects__toolbar select {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    min-height: 40px;
    min-width: 0;
    padding: 0 var(--fd-space-3);
    width: 100%;
}

.fd-user-projects__toolbar button,
.fd-user-projects__toolbar > a,
.fd-user-projects__pagination a,
.fd-user-projects__pagination span,
.fd-user-projects__empty > a {
    align-items: center;
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    justify-content: center;
    min-height: 40px;
}

.fd-user-projects__toolbar button {
    background: var(--color-base-900, #111827);
    border: 1px solid var(--color-base-900, #111827);
    color: #fff;
    gap: var(--fd-space-2);
    padding: 0 var(--fd-space-3);
    white-space: nowrap;
}

.fd-user-projects__toolbar button .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.fd-user-projects__toolbar > a,
.fd-user-projects__empty > a {
    color: var(--color-primary-700, #1d4ed8);
    padding: 0 var(--fd-space-2);
    white-space: nowrap;
}

.fd-user-projects__toolbar > a:hover,
.fd-user-projects__empty > a:hover,
.fd-user-projects__table a:hover,
.fd-user-projects__pagination a:hover {
    color: var(--color-primary-600, #2563eb);
    text-decoration: underline;
}

.fd-user-projects__table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.fd-user-projects__table {
    border-collapse: collapse;
    min-width: 720px;
    table-layout: fixed;
    width: 100%;
}

.fd-user-projects__table col:nth-child(1) { width: 24%; }
.fd-user-projects__table col:nth-child(2) { width: 12%; }
.fd-user-projects__table col:nth-child(3) { width: 10%; }
.fd-user-projects__table col:nth-child(4) { width: 12%; }
.fd-user-projects__table col:nth-child(5) { width: 15%; }
.fd-user-projects__table col:nth-child(6) { width: 15%; }
.fd-user-projects__table col:nth-child(7) { width: 12%; }

.fd-user-projects__table th,
.fd-user-projects__table td {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    padding: var(--fd-space-3);
    text-align: left;
    vertical-align: top;
}

.fd-user-projects__table th {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
    font-weight: 650;
}

.fd-user-projects__table td {
    color: var(--color-font-default-light, #374151);
    font-size: 0.875rem;
    min-width: 0;
}

.fd-user-projects__table td:first-child {
    min-width: 0;
}

.fd-user-projects__table td:last-child {
    white-space: nowrap;
}

.fd-user-projects__table td:first-child strong,
.fd-user-projects__table td:first-child code,
.fd-user-projects__table td:nth-child(2) small {
    display: block;
}

.fd-user-projects__table td:first-child code,
.fd-user-projects__table td:nth-child(2) small {
    margin-top: var(--fd-space-1);
}

.fd-user-projects__table code,
.fd-user-projects__table strong {
    overflow-wrap: anywhere;
}

.fd-user-projects__table code,
.fd-user-projects__table small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
}

.fd-user-projects__table a {
    color: var(--color-primary-700, #1d4ed8);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.fd-user-projects__table td:last-child a {
    align-items: center;
    border-radius: var(--fd-radius);
    display: inline-flex;
    gap: var(--fd-space-1);
    min-height: 40px;
    padding: 0 var(--fd-space-2);
}

.fd-user-projects__table td:last-child a:active {
    background: var(--color-primary-50, #eff6ff);
}

.fd-user-projects__table td:last-child .material-symbols-outlined,
.fd-context-back .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.fd-context-back {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-primary-700, #1d4ed8);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: var(--fd-space-1);
    margin-bottom: var(--fd-space-4);
    min-height: 40px;
    padding: 0 var(--fd-space-2);
}

.fd-context-back:hover {
    color: var(--color-primary-600, #2563eb);
    text-decoration: underline;
}

.fd-context-back:active {
    background: var(--color-primary-50, #eff6ff);
}

.fd-context-back:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.fd-user-projects__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    justify-content: flex-end;
}

.fd-user-projects__pagination a,
.fd-user-projects__pagination span {
    border: 1px solid var(--color-base-300, #d1d5db);
    color: var(--color-font-default-light, #374151);
    min-width: 40px;
    padding: 0 var(--fd-space-2);
}

.fd-user-projects__pagination span[aria-current="page"] {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-900, #111827);
    color: #fff;
}

.fd-user-projects__pagination span[aria-hidden="true"] {
    border-color: transparent;
    min-width: auto;
}

.fd-user-projects__empty {
    display: grid;
    gap: var(--fd-space-2);
    justify-items: center;
}

.fd-user-projects__table a:focus-visible,
.fd-user-projects__toolbar :is(input, select, button, a):focus-visible,
.fd-user-projects__pagination a:focus-visible,
.fd-user-projects__empty > a:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.dark .fd-user-projects__header h2 {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-user-projects__header p,
.dark .fd-user-projects__toolbar label > span,
.dark .fd-user-projects__table th,
.dark .fd-user-projects__table code,
.dark .fd-user-projects__table small {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-user-projects__toolbar input,
.dark .fd-user-projects__toolbar select {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-projects__toolbar,
.dark .fd-user-projects__table tr {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-projects__table th,
.dark .fd-user-projects__table td,
.dark .fd-user-projects__pagination a,
.dark .fd-user-projects__pagination span {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-projects__table td,
.dark .fd-user-projects__pagination a,
.dark .fd-user-projects__pagination span {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-projects__pagination span[aria-current="page"] {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #fff;
}

.dark .fd-user-projects__toolbar > a,
.dark .fd-user-projects__empty > a,
.dark .fd-user-projects__table a,
.dark .fd-context-back {
    color: var(--color-primary-300, #93c5fd);
}

.dark .fd-user-projects__toolbar > a:hover,
.dark .fd-user-projects__empty > a:hover,
.dark .fd-user-projects__table a:hover,
.dark .fd-context-back:hover {
    color: var(--color-primary-200, #bfdbfe);
}

.dark .fd-user-projects__table td:last-child a:active,
.dark .fd-context-back:active {
    background: var(--color-base-800, #1f2937);
}

@media (max-width: 1199px) {
    .fd-user-projects__toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(10rem, auto);
    }

    .fd-user-projects__toolbar > a {
        justify-self: start;
    }
}

@media (max-width: 1023px) {
    .fd-user-projects__toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(10rem, auto);
    }

    .fd-user-projects__toolbar > a {
        justify-self: start;
    }
}

@media (max-width: 767px) {
    .fd-user-projects__toolbar {
        grid-template-columns: 1fr;
    }

    .fd-user-projects__toolbar button,
    .fd-user-projects__toolbar > a {
        justify-content: center;
        width: 100%;
    }

    .fd-user-projects__table-wrap {
        overflow-x: visible;
    }

    .fd-user-projects__table {
        min-width: 0;
    }

    .fd-user-projects__table colgroup {
        display: none;
    }

    .fd-user-projects__table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .fd-user-projects__table,
    .fd-user-projects__table tbody,
    .fd-user-projects__table tr,
    .fd-user-projects__table td {
        display: block;
        width: 100%;
    }

    .fd-user-projects__table tr {
        border-bottom: 1px solid var(--color-base-200, #e5e7eb);
        padding: var(--fd-space-2) 0;
    }

    .fd-user-projects__table td {
        border: 0;
        padding: var(--fd-space-2) 0;
    }

    .fd-user-projects__table td::before {
        color: var(--color-font-subtle-light, #6b7280);
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        margin-bottom: var(--fd-space-1);
    }

    .fd-user-projects__table td:first-child,
    .fd-user-projects__table td:nth-child(2) {
        display: grid;
        width: 100%;
    }

    .fd-user-projects__pagination {
        justify-content: flex-start;
    }

    .fd-context-back {
        justify-content: center;
        width: 100%;
    }
}

.dark .fd-user-projects__table td::before {
    color: var(--color-font-subtle-dark, #9ca3af);
}

/* User detail subscription summary. */
.fd-user-subscription {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
    padding: var(--fd-space-6);
}

.fd-user-subscription--empty {
    background: transparent;
    border: 0;
    padding: 0;
}

.fd-user-subscription__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
    padding-bottom: var(--fd-space-4);
}

.fd-user-subscription__plan {
    display: grid;
    gap: var(--fd-space-1);
    min-width: 0;
}

.fd-user-subscription__plan h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 1.125rem;
    font-weight: 650;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-user-subscription__plan code,
.fd-user-subscription__fields code {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
    user-select: all;
    white-space: normal;
}

.fd-user-subscription__fields {
    display: grid;
    gap: 0 var(--fd-space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.fd-user-subscription__fields > div {
    border-bottom: 1px solid var(--color-base-100, #f3f4f6);
    display: grid;
    gap: var(--fd-space-2);
    grid-template-columns: 9rem minmax(0, 1fr);
    min-width: 0;
    padding: var(--fd-space-3) 0;
}

.fd-user-subscription__fields dt {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-user-subscription__fields dd {
    color: var(--color-font-default-light, #374151);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-user-subscription__identifier {
    overflow-wrap: anywhere;
    user-select: all;
}

.fd-user-subscription__actions {
    display: flex;
    justify-content: flex-end;
}

.fd-user-subscription__actions a {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-primary-700, #1d4ed8);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: var(--fd-space-1);
    min-height: 40px;
    padding: 0 var(--fd-space-2);
}

.fd-user-subscription__actions a:hover {
    color: var(--color-primary-600, #2563eb);
    text-decoration: underline;
}

.fd-user-subscription__actions a:active {
    background: var(--color-primary-50, #eff6ff);
}

.fd-user-subscription__actions a:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.fd-user-subscription__actions .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.dark .fd-user-subscription {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-subscription--empty {
    background: transparent;
    border-color: transparent;
}

.dark .fd-user-subscription__header,
.dark .fd-user-subscription__fields > div {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-subscription__plan h2 {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-user-subscription__plan code,
.dark .fd-user-subscription__fields dt,
.dark .fd-user-subscription__fields code {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-user-subscription__fields dd {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-subscription__actions a {
    color: var(--color-primary-300, #93c5fd);
}

.dark .fd-user-subscription__actions a:hover {
    color: var(--color-primary-200, #bfdbfe);
}

.dark .fd-user-subscription__actions a:active {
    background: var(--color-base-800, #1f2937);
}

@media (max-width: 767px) {
    .fd-user-subscription {
        padding: var(--fd-space-4);
    }

    .fd-user-subscription--empty {
        padding: 0;
    }

    .fd-user-subscription__header {
        flex-direction: column;
    }

    .fd-user-subscription__fields {
        grid-template-columns: 1fr;
    }

    .fd-user-subscription__fields > div {
        grid-template-columns: 1fr;
    }

    .fd-user-subscription__actions a {
        box-sizing: border-box;
        justify-content: center;
        width: 100%;
    }
}

/* User detail payment list. */
.fd-user-payments {
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
}

.fd-user-payments__header h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
}

.fd-user-payments__header p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: var(--fd-space-1) 0 0;
}

.fd-user-payments__toolbar {
    align-items: end;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: minmax(220px, 1.4fr) auto repeat(3, minmax(150px, .7fr)) auto auto;
    min-width: 0;
    padding-bottom: var(--fd-space-4);
}

.fd-user-payments__toolbar > label,
.fd-user-payments__status {
    display: grid;
    gap: var(--fd-space-1);
    min-width: 0;
}

.fd-user-payments__toolbar label > span,
.fd-user-payments__status legend {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 600;
}

.fd-user-payments__toolbar input[type="search"],
.fd-user-payments__toolbar input[type="date"],
.fd-user-payments__toolbar select {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    min-height: 40px;
    min-width: 0;
    padding: 0 var(--fd-space-3);
    width: 100%;
}

.fd-user-payments__status {
    border: 0;
    margin: 0;
    padding: 0;
}

.fd-user-payments__status > div {
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(64px, 1fr));
}

.fd-user-payments__status label {
    cursor: pointer;
    position: relative;
}

.fd-user-payments__status input {
    inset: 0;
    opacity: 0;
    position: absolute;
}

.fd-user-payments__status label span {
    align-items: center;
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    display: flex;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--fd-space-2);
    white-space: nowrap;
}

.fd-user-payments__status label:first-child span {
    border-radius: var(--fd-radius) 0 0 var(--fd-radius);
}

.fd-user-payments__status label:last-child span {
    border-radius: 0 var(--fd-radius) var(--fd-radius) 0;
}

.fd-user-payments__status input:checked + span {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-900, #111827);
    color: #fff;
    font-weight: 650;
}

.fd-user-payments__toolbar button,
.fd-user-payments__toolbar > a,
.fd-user-payments__pagination a,
.fd-user-payments__pagination span,
.fd-user-payments__empty > a {
    align-items: center;
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    justify-content: center;
    min-height: 40px;
}

.fd-user-payments__toolbar button {
    background: var(--color-base-900, #111827);
    border: 1px solid var(--color-base-900, #111827);
    color: #fff;
    gap: var(--fd-space-2);
    padding: 0 var(--fd-space-3);
    white-space: nowrap;
}

.fd-user-payments__toolbar > a,
.fd-user-payments__empty > a,
.fd-user-payments__table a {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-user-payments__table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.fd-user-payments__table {
    border-collapse: collapse;
    min-width: 960px;
    table-layout: fixed;
    width: 100%;
}

.fd-user-payments__table th,
.fd-user-payments__table td {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    padding: var(--fd-space-3);
    text-align: left;
    vertical-align: top;
}

.fd-user-payments__table th {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 650;
}

.fd-user-payments__table td {
    color: var(--color-font-default-light, #374151);
    font-size: .875rem;
}

.fd-user-payments__table :is(strong, code, small) {
    display: block;
    overflow-wrap: anywhere;
}

.fd-user-payments__table :is(code, small) {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    margin-top: var(--fd-space-1);
}

.fd-user-payments__table td:first-child :is(strong, code, small),
.fd-user-payments__table td:nth-child(2) code {
    user-select: all;
}

.fd-user-payments__amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fd-user-payments__table td:last-child a {
    align-items: center;
    display: inline-flex;
    gap: var(--fd-space-1);
    min-height: 40px;
}

.fd-user-payments__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    justify-content: flex-end;
}

.fd-user-payments__pagination :is(a, span) {
    border: 1px solid var(--color-base-300, #d1d5db);
    color: var(--color-font-default-light, #374151);
    min-width: 40px;
    padding: 0 var(--fd-space-2);
}

.fd-user-payments__pagination span[aria-current="page"] {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-900, #111827);
    color: #fff;
}

.fd-user-payments__error {
    color: var(--color-red-700, #b91c1c);
    font-size: .875rem;
    margin: 0;
}

.fd-user-payments__empty {
    display: grid;
    gap: var(--fd-space-2);
    justify-items: center;
}

.fd-user-payments :is(input, select, button, a):focus-visible,
.fd-user-payments__status input:focus-visible + span {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.dark .fd-user-payments__header h2 {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-user-payments__toolbar > a,
.dark .fd-user-payments__empty > a,
.dark .fd-user-payments__table a {
    color: var(--color-primary-300, #93c5fd);
}

.dark .fd-user-payments__error {
    color: var(--color-red-300, #fca5a5);
}

.dark .fd-user-payments__header p,
.dark .fd-user-payments__toolbar label > span,
.dark .fd-user-payments__status legend,
.dark .fd-user-payments__table th,
.dark .fd-user-payments__table :is(code, small) {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-user-payments__toolbar input,
.dark .fd-user-payments__toolbar select,
.dark .fd-user-payments__status label span {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-payments__status input:checked + span,
.dark .fd-user-payments__pagination span[aria-current="page"] {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #fff;
}

.dark .fd-user-payments__table :is(th, td),
.dark .fd-user-payments__pagination :is(a, span) {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-payments__table td,
.dark .fd-user-payments__pagination :is(a, span) {
    color: var(--color-font-default-dark, #d1d5db);
}

@media (max-width: 1599px) {
    .fd-user-payments__toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .fd-user-payments__toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fd-user-payments__toolbar {
        grid-template-columns: 1fr;
    }

    .fd-user-payments__toolbar button,
    .fd-user-payments__toolbar > a {
        width: 100%;
    }

    .fd-user-payments__table-wrap {
        overflow-x: visible;
    }

    .fd-user-payments__table,
    .fd-user-payments__table tbody,
    .fd-user-payments__table tr,
    .fd-user-payments__table td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .fd-user-payments__table thead {
        clip: rect(0 0 0 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
    }

    .fd-user-payments__table tr {
        border-bottom: 1px solid var(--color-base-200, #e5e7eb);
        padding: var(--fd-space-2) 0;
    }

    .fd-user-payments__table td {
        border: 0;
        column-gap: var(--fd-space-3);
        display: grid;
        grid-template-columns: minmax(88px, .35fr) minmax(0, 1fr);
        padding: var(--fd-space-2) 0;
    }

    .fd-user-payments__table td::before {
        color: var(--color-font-subtle-light, #6b7280);
        content: attr(data-label);
        display: block;
        font-size: .75rem;
        grid-column: 1;
        grid-row: 1 / -1;
        margin-bottom: var(--fd-space-1);
    }

    .fd-user-payments__table td > * {
        grid-column: 2;
    }

    .fd-user-payments__pagination {
        justify-content: flex-start;
    }
}

.dark .fd-user-payments__table td::before {
    color: var(--color-font-subtle-dark, #9ca3af);
}

/* User detail audit context. */
.fd-user-audits__header p {
    max-width: 760px;
}

.fd-user-audits__table {
    min-width: 1080px;
}

.fd-user-audits__table th:nth-child(1) { width: 14%; }
.fd-user-audits__table th:nth-child(2) { width: 17%; }
.fd-user-audits__table th:nth-child(3) { width: 9%; }
.fd-user-audits__table th:nth-child(4) { width: 13%; }
.fd-user-audits__table th:nth-child(5) { width: 20%; }
.fd-user-audits__table th:nth-child(6) { width: 17%; }
.fd-user-audits__table th:nth-child(7) { width: 10%; }

.fd-user-audits__action {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-2);
}

.fd-user-audits__action > .material-symbols-outlined {
    color: var(--color-primary-600, #2563eb);
    flex: 0 0 auto;
    font-size: 20px;
    margin-top: 1px;
}

.fd-user-audits__message {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

[data-user-detail][data-fd-user-audit-enhanced="true"] .fd-user-audit-drawer__backdrop {
    display: block;
}

[data-user-detail][data-fd-user-audit-enhanced="true"] .fd-user-audit-drawer {
    border-width: 0 0 0 1px;
    box-shadow: -18px 0 48px rgb(15 23 42 / 0.16);
    inset: 0 0 0 auto;
    margin-top: 0;
    position: fixed;
    width: 640px;
}

.fd-user-audit-drawer__agent {
    overflow-wrap: anywhere;
}

.fd-user-audit-drawer__section {
    padding-top: 22px;
}

.fd-user-audit-drawer__section h3 {
    color: #111827;
    font-size: 16px;
    font-weight: 650;
    margin: 0 0 12px;
}

.fd-user-audit-drawer__section pre {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #334155;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
    overflow: auto;
    padding: 14px;
    white-space: pre-wrap;
}

.dark .fd-user-audits__action > .material-symbols-outlined {
    color: var(--color-primary-300, #93c5fd);
}

.dark .fd-user-audit-drawer__section h3 {
    color: #f9fafb;
}

.dark .fd-user-audit-drawer__section pre {
    background: #111827;
    border-color: #374151;
    color: #d1d5db;
}

@media (max-width: 767px) {
    .fd-user-audits__table {
        min-width: 0;
    }

    [data-user-detail][data-fd-user-audit-enhanced="true"] .fd-user-audit-drawer {
        width: 100%;
    }
}

/* User detail credit context. */
.fd-user-credits {
    display: grid;
    gap: var(--fd-space-5, 20px);
    min-width: 0;
}

.fd-user-credits__header,
.fd-user-credits__transactions > header {
    align-items: center;
    display: flex;
    gap: var(--fd-space-3);
    justify-content: space-between;
}

.fd-user-credits :is(h2, h3, h4, p) {
    margin: 0;
}

.fd-user-credits__header h2,
.fd-user-credits__balance h3,
.fd-user-credits__transactions h3 {
    color: var(--color-font-important-light, #111827);
    font-size: 1rem;
    font-weight: 650;
}

.fd-user-credits__header p,
.fd-user-credits__transactions > header p {
    color: var(--color-font-subtle-light, #6b7280);
    margin-top: var(--fd-space-1);
}

.fd-user-credits__recharge,
.fd-user-credits__toolbar button {
    align-items: center;
    background: var(--color-base-900, #111827);
    border: 1px solid var(--color-base-900, #111827);
    border-radius: var(--fd-radius);
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 650;
    gap: var(--fd-space-2);
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--fd-space-3);
    white-space: nowrap;
}

.fd-user-credits__recharge .material-symbols-outlined,
.fd-user-credits__toolbar button .material-symbols-outlined,
.fd-user-credits__table a .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.fd-user-credits__balance,
.fd-user-credits__transactions {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
    padding-top: var(--fd-space-4);
}

.fd-user-credits__metrics {
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.fd-user-credits__metrics > div {
    border-left: 2px solid var(--color-primary-500, #3b82f6);
    min-width: 0;
    padding-left: var(--fd-space-3);
}

.fd-user-credits__metrics dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 600;
}

.fd-user-credits__metrics dd {
    color: var(--color-font-important-light, #111827);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin: var(--fd-space-1) 0 0;
    overflow-wrap: anywhere;
}

.fd-user-credits__sources h4 {
    color: var(--color-font-important-light, #111827);
    font-size: .875rem;
    font-weight: 650;
}

.fd-user-credits__sources ul {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    list-style: none;
    margin: var(--fd-space-2) 0 0;
    padding: 0;
}

.fd-user-credits__sources li {
    align-items: center;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: minmax(180px, 1fr) auto;
    padding: var(--fd-space-3) 0;
}

.fd-user-credits__sources :is(span, strong, small, code) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-user-credits__sources small,
.fd-user-credits__sources code {
    color: var(--color-font-subtle-light, #6b7280);
    display: block;
}

.fd-user-credits__sources b {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fd-user-credits__toolbar {
    align-items: end;
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(140px, .75fr)) auto auto;
    min-width: 0;
}

.fd-user-credits__toolbar label {
    display: grid;
    gap: var(--fd-space-1);
    min-width: 0;
}

.fd-user-credits__toolbar label > span {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 600;
}

.fd-user-credits__toolbar :is(input, select) {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    min-height: 40px;
    min-width: 0;
    padding: 0 var(--fd-space-3);
    width: 100%;
}

.fd-user-credits__toolbar > a,
.fd-user-credits__empty > a,
.fd-user-credits__error a,
.fd-user-credits__table a {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-user-credits__toolbar > a,
.fd-user-credits__empty > a {
    align-items: center;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    min-height: 40px;
}

.fd-user-credits__table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.fd-user-credits__table {
    border-collapse: collapse;
    min-width: 900px;
    table-layout: fixed;
    width: 100%;
}

.fd-user-credits__table :is(th, td) {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    padding: var(--fd-space-3);
    text-align: left;
    vertical-align: top;
}

.fd-user-credits__table th {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 650;
}

.fd-user-credits__table td {
    color: var(--color-font-default-light, #374151);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.fd-user-credits__table :is(code, small) {
    color: var(--color-font-subtle-light, #6b7280);
    display: block;
    font-size: .75rem;
    margin-top: var(--fd-space-1);
    overflow-wrap: anywhere;
}

.fd-user-credits__table code {
    user-select: all;
}

.fd-user-credits__table td:last-child a {
    align-items: center;
    display: inline-flex;
    gap: var(--fd-space-1);
    min-height: 40px;
}

.fd-user-credits__amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fd-user-credits__amount--positive {
    color: var(--color-green-700, #15803d);
}

.fd-user-credits__amount--negative {
    color: var(--color-red-700, #b91c1c);
}

.fd-user-credits__date-error,
.fd-user-credits__error {
    color: var(--color-red-700, #b91c1c);
}

.fd-user-credits__error {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
}

.fd-user-credits__empty {
    display: grid;
    gap: var(--fd-space-2);
    justify-items: center;
}

.fd-user-credits__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    justify-content: flex-end;
}

.fd-user-credits__pagination :is(a, span) {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    padding: 0 var(--fd-space-2);
}

.fd-user-credits__pagination span[aria-current="page"] {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-900, #111827);
    color: #fff;
}

.fd-user-credits :is(input, select, button, a):focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.dark .fd-user-credits :is(h2, h3, h4),
.dark .fd-user-credits__metrics dd {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-user-credits :is(p, dt, th, small, code),
.dark .fd-user-credits__toolbar label > span {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-user-credits__recharge,
.dark .fd-user-credits__toolbar button {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #fff;
}

.dark .fd-user-credits__toolbar :is(input, select) {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
    color-scheme: dark;
}

.dark .fd-user-credits :is(.fd-user-credits__balance, .fd-user-credits__transactions, li, th, td),
.dark .fd-user-credits__sources ul,
.dark .fd-user-credits__table tr {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-credits__table td {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-credits :is(.fd-user-credits__toolbar > a, .fd-user-credits__empty > a, .fd-user-credits__error a, .fd-user-credits__table a) {
    color: var(--color-primary-300, #93c5fd);
}

.dark .fd-user-credits__amount--positive {
    color: var(--color-green-300, #86efac);
}

.dark .fd-user-credits__amount--negative {
    color: var(--color-red-300, #fca5a5);
}

.dark .fd-user-credits p.fd-user-credits__date-error,
.dark .fd-user-credits__error {
    color: var(--color-red-300, #fca5a5);
}

.dark .fd-user-credits__pagination :is(a, span) {
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-credits__pagination span[aria-current="page"] {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #fff;
}

@media (max-width: 1599px) {
    .fd-user-credits__toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .fd-user-credits__toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fd-user-credits__header {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-user-credits__recharge,
    .fd-user-credits__toolbar button,
    .fd-user-credits__toolbar > a {
        justify-content: center;
        width: 100%;
    }

    .fd-user-credits__metrics,
    .fd-user-credits__toolbar {
        grid-template-columns: 1fr;
    }

    .fd-user-credits__sources li {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .fd-user-credits__pagination {
        justify-content: flex-start;
    }

    .fd-user-credits__table-wrap {
        overflow-x: visible;
    }

    .fd-user-credits__table,
    .fd-user-credits__table tbody,
    .fd-user-credits__table tr,
    .fd-user-credits__table td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .fd-user-credits__table thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .fd-user-credits__table tr {
        border-bottom: 1px solid var(--color-base-200, #e5e7eb);
        padding: var(--fd-space-2) 0;
    }

    .fd-user-credits__table td {
        border: 0;
        column-gap: var(--fd-space-3);
        display: grid;
        grid-template-columns: minmax(88px, .35fr) minmax(0, 1fr);
        padding: var(--fd-space-2) 0;
    }

    .fd-user-credits__table td::before {
        color: var(--color-font-subtle-light, #6b7280);
        content: attr(data-label);
        font-size: .75rem;
        grid-column: 1;
        grid-row: 1 / -1;
    }

    .fd-user-credits__table td > * {
        grid-column: 2;
    }
}

.dark .fd-user-credits__table td::before {
    color: var(--color-font-subtle-dark, #9ca3af);
}

/* End user detail credit context. */

/* User plan change workflow. */
.fd-plan-change {
    color: var(--color-font-default-light, #374151);
}

.fd-plan-change__distribution {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
}

.fd-plan-change__distribution > span {
    align-items: center;
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: .75rem;
    gap: var(--fd-space-2);
    min-height: 32px;
    padding: 0 var(--fd-space-3);
}

.fd-plan-change__fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.fd-plan-change__plans {
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fd-plan-change__plan {
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    cursor: pointer;
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
    padding: var(--fd-space-4);
    position: relative;
}

.fd-plan-change__plan:hover {
    border-color: var(--color-primary-400, #60a5fa);
}

.fd-plan-change__plan:has(input:checked) {
    background: var(--color-primary-50, #eff6ff);
    border-color: var(--color-primary-600, #2563eb);
    box-shadow: inset 0 0 0 1px var(--color-primary-600, #2563eb);
}

.fd-plan-change__plan:has(input:focus-visible) {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.fd-plan-change__plan > input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.fd-plan-change__plan-check {
    color: var(--color-base-300, #d1d5db);
    font-size: 22px;
    position: absolute;
    right: var(--fd-space-3);
    top: var(--fd-space-3);
}

.fd-plan-change__plan:has(input:checked) .fd-plan-change__plan-check {
    color: var(--color-primary-600, #2563eb);
}

.fd-plan-change__plan-heading {
    display: grid;
    gap: 2px;
    padding-right: 2rem;
}

.fd-plan-change__plan-heading strong {
    color: var(--color-font-important-light, #111827);
    font-size: 1rem;
}

.fd-plan-change__plan-heading small,
.fd-plan-change__credits small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
}

.fd-plan-change__credits {
    display: grid;
    gap: 2px;
}

.fd-plan-change__credits strong {
    color: var(--color-primary-700, #1d4ed8);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fd-plan-change__plan dl {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-2);
    margin: 0;
    padding-top: var(--fd-space-3);
}

.fd-plan-change__plan dl > div {
    display: flex;
    font-size: .75rem;
    gap: var(--fd-space-2);
    justify-content: space-between;
}

.fd-plan-change__plan dt {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-plan-change__plan dd {
    color: var(--color-font-important-light, #111827);
    font-weight: 600;
    margin: 0;
}

.fd-plan-change__field-errors {
    color: var(--color-red-700, #b91c1c);
    font-size: .75rem;
    margin: var(--fd-space-2) 0 0;
    padding-left: var(--fd-space-4);
}

.fd-plan-change__empty {
    color: var(--color-font-subtle-light, #6b7280);
    grid-column: 1 / -1;
    margin: 0;
}

.fd-plan-change__impact {
    align-items: flex-start;
    background: var(--color-yellow-50, #fffbeb);
    border-left: 3px solid var(--color-yellow-500, #eab308);
    border-radius: var(--fd-radius);
    display: flex;
    gap: var(--fd-space-3);
    padding: var(--fd-space-4);
}

.fd-plan-change__impact > span {
    color: var(--color-yellow-700, #a16207);
    font-size: 20px;
}

.fd-plan-change__impact strong {
    color: var(--color-yellow-900, #713f12);
}

.fd-plan-change__impact p {
    color: var(--color-yellow-900, #713f12);
    font-size: .875rem;
    line-height: 1.5;
    margin: var(--fd-space-1) 0 0;
}

.fd-plan-change-dialog {
    align-items: center;
    background: rgb(17 24 39 / .55);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--fd-space-6);
    position: fixed;
    z-index: 1000;
}

.fd-plan-change-dialog__panel {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 20px 48px rgb(15 23 42 / .24);
    display: grid;
    gap: var(--fd-space-4);
    max-height: calc(100dvh - 48px);
    max-width: 46rem;
    min-width: 0;
    overflow-y: auto;
    padding: var(--fd-space-6);
    width: 100%;
}

.fd-plan-change-dialog__header {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
}

.fd-plan-change-dialog__header h2,
.fd-plan-change-dialog__users h3 {
    color: var(--color-font-important-light, #111827);
    margin: 0;
}

.fd-plan-change-dialog__header h2 {
    font-size: 1.125rem;
}

.fd-plan-change-dialog__header p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .875rem;
    margin: var(--fd-space-1) 0 0;
}

.fd-plan-change-dialog__header button {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.fd-plan-change-dialog__header button:hover {
    background: var(--color-base-100, #f3f4f6);
}

.fd-plan-change-dialog__target {
    align-items: baseline;
    background: var(--color-primary-50, #eff6ff);
    border-left: 3px solid var(--color-primary-600, #2563eb);
    border-radius: var(--fd-radius);
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    padding: var(--fd-space-3) var(--fd-space-4);
}

.fd-plan-change-dialog__target > span,
.fd-plan-change-dialog__target small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
}

.fd-plan-change-dialog__target strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-plan-change-dialog__users {
    display: grid;
    gap: var(--fd-space-3);
}

.fd-plan-change-dialog__users h3 {
    font-size: .875rem;
}

.fd-plan-change-dialog__users ul {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    list-style: none;
    margin: 0;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0;
}

.fd-plan-change-dialog__users li {
    align-items: center;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
    padding: var(--fd-space-3) 0;
}

.fd-plan-change-dialog__users li > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-plan-change-dialog__users small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.fd-plan-change-dialog__transition {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    font-size: .75rem;
    gap: var(--fd-space-1);
}

.fd-plan-change-dialog__transition .material-symbols-outlined,
.fd-plan-change-dialog__skipped .material-symbols-outlined {
    font-size: 17px;
}

.fd-plan-change-dialog__skipped,
.fd-plan-change-dialog__warning {
    border-radius: var(--fd-radius);
    font-size: .875rem;
    margin: 0;
    padding: var(--fd-space-3);
}

.fd-plan-change-dialog__skipped {
    align-items: flex-start;
    background: var(--color-base-50, #f9fafb);
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    gap: var(--fd-space-2);
}

.fd-plan-change-dialog__warning {
    background: var(--color-yellow-50, #fffbeb);
    border-left: 3px solid var(--color-yellow-500, #eab308);
    color: var(--color-yellow-900, #713f12);
}

.fd-plan-change-dialog__warning p {
    margin: var(--fd-space-1) 0 0;
}

.fd-plan-change-dialog__form,
.fd-plan-change__nojs-confirmation {
    display: grid;
    gap: var(--fd-space-4);
}

.fd-plan-change-dialog__acknowledgement {
    align-items: flex-start;
    display: flex;
    font-size: .875rem;
    gap: var(--fd-space-2);
    line-height: 1.5;
}

.fd-plan-change-dialog__acknowledgement input {
    flex: 0 0 auto;
    height: 18px;
    margin-top: 2px;
    width: 18px;
}

.fd-plan-change-dialog__actions {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    justify-content: flex-end;
}

.fd-plan-change-dialog__actions :is(a, button) {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: var(--fd-space-2);
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--fd-space-4);
}

.fd-plan-change-dialog__actions > :last-child {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #fff;
}

.fd-plan-change-dialog__actions button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.fd-plan-change__nojs-confirmation {
    border-top: 1px solid var(--color-base-300, #d1d5db);
    padding-top: var(--fd-space-6);
}

.fd-plan-change__nojs-confirmation :is(h2, p) {
    margin: 0;
}

.dark .fd-plan-change {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-plan-change__distribution > span,
.dark .fd-plan-change-dialog__skipped {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-plan-change__plan {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-plan-change__plan:has(input:checked),
.dark .fd-plan-change-dialog__target {
    background: rgb(30 58 138 / .25);
}

.dark .fd-plan-change__plan-heading strong,
.dark .fd-plan-change__plan dd,
.dark .fd-plan-change-dialog__header h2,
.dark .fd-plan-change-dialog__users h3 {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-plan-change__plan-heading small,
.dark .fd-plan-change__credits small,
.dark .fd-plan-change__plan dt,
.dark .fd-plan-change-dialog__header p,
.dark .fd-plan-change-dialog__header button,
.dark .fd-plan-change-dialog__target > span,
.dark .fd-plan-change-dialog__target small,
.dark .fd-plan-change-dialog__users small,
.dark .fd-plan-change-dialog__skipped {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-plan-change__plan dl,
.dark .fd-plan-change-dialog__users ul,
.dark .fd-plan-change-dialog__users li,
.dark .fd-plan-change__nojs-confirmation {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-plan-change__impact,
.dark .fd-plan-change-dialog__warning {
    background: #422006;
}

.dark .fd-plan-change__impact :is(strong, p),
.dark .fd-plan-change-dialog__warning {
    color: var(--color-yellow-100, #fef9c3);
}

.dark .fd-plan-change-dialog__panel {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

@media (max-width: 900px) {
    .fd-plan-change__plans {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .fd-plan-change-dialog {
        align-items: flex-end;
        padding: 0;
    }

    .fd-plan-change-dialog__panel {
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        max-height: calc(100dvh - 24px);
        padding: var(--fd-space-4);
    }

    .fd-plan-change-dialog__users li,
    .fd-plan-change-dialog__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-plan-change-dialog__transition {
        flex: 1 1 auto;
    }

    .fd-plan-change-dialog__actions > * {
        width: 100%;
    }
}

/* End user plan change workflow. */

/* User role and status workflow. */
.fd-role-status {
    color: var(--color-font-default-light, #374151);
    max-width: 1120px;
    min-width: 0;
    width: 100%;
}

.fd-role-status__distributions {
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-role-status__distributions > div {
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    display: grid;
    gap: var(--fd-space-2);
    padding: var(--fd-space-3) var(--fd-space-4);
}

.fd-role-status__distributions > div > span,
.fd-role-status__distributions small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 500;
}

.fd-role-status__distributions > div > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
}

.fd-role-status__distributions strong {
    align-items: center;
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: .8125rem;
    gap: var(--fd-space-2);
    min-height: 30px;
    padding: 0 var(--fd-space-3);
}

.fd-role-status__selectors {
    display: grid;
    gap: var(--fd-space-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-role-status__selectors fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.fd-role-status__selectors legend {
    color: var(--color-font-important-light, #111827);
    font-size: .875rem;
    font-weight: 700;
    margin-bottom: var(--fd-space-3);
}

.fd-role-status__choice-grid {
    display: grid;
    gap: var(--fd-space-2);
}

.fd-role-status__choice {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    cursor: pointer;
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: 36px minmax(0, 1fr) 22px;
    min-height: 72px;
    padding: var(--fd-space-3);
    position: relative;
}

.fd-role-status__choice:hover {
    border-color: var(--color-primary-400, #60a5fa);
}

.fd-role-status__choice:has(input:checked) {
    background: var(--color-primary-50, #eff6ff);
    border-color: var(--color-primary-600, #2563eb);
    box-shadow: inset 0 0 0 1px var(--color-primary-600, #2563eb);
}

.fd-role-status__choice--danger:has(input:checked) {
    background: var(--color-red-50, #fef2f2);
    border-color: var(--color-red-600, #dc2626);
    box-shadow: inset 0 0 0 1px var(--color-red-600, #dc2626);
}

.fd-role-status__choice:has(input:focus-visible) {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.fd-role-status__choice > input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.fd-role-status__choice > .material-symbols-outlined:first-of-type {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.fd-role-status__choice > span:nth-of-type(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-role-status__choice strong {
    color: var(--color-font-important-light, #111827);
    font-size: .875rem;
}

.fd-role-status__choice small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    line-height: 1.4;
}

.fd-role-status__check {
    color: var(--color-base-300, #d1d5db);
    font-size: 21px;
}

.fd-role-status__choice:has(input:checked) .fd-role-status__check {
    color: var(--color-primary-600, #2563eb);
}

.fd-role-status__choice--danger:has(input:checked) .fd-role-status__check {
    color: var(--color-red-600, #dc2626);
}

.fd-role-status__field-errors {
    color: var(--color-red-700, #b91c1c);
    font-size: .75rem;
    margin: var(--fd-space-2) 0 0;
    padding-left: var(--fd-space-4);
}

.fd-role-status__impact {
    align-items: flex-start;
    background: var(--color-primary-50, #eff6ff);
    border-left: 3px solid var(--color-primary-600, #2563eb);
    border-radius: var(--fd-radius);
    display: flex;
    gap: var(--fd-space-3);
    padding: var(--fd-space-4);
}

.fd-role-status__impact > span {
    color: var(--color-primary-700, #1d4ed8);
    font-size: 20px;
}

.fd-role-status__impact strong {
    color: var(--color-primary-900, #1e3a8a);
}

.fd-role-status__impact p {
    color: var(--color-primary-900, #1e3a8a);
    font-size: .875rem;
    line-height: 1.5;
    margin: var(--fd-space-1) 0 0;
}

.fd-role-status-dialog__panel {
    max-width: 52rem;
}

.fd-role-status-dialog__targets {
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-role-status-dialog__targets > div {
    background: var(--color-primary-50, #eff6ff);
    border-left: 3px solid var(--color-primary-600, #2563eb);
    border-radius: var(--fd-radius);
    display: grid;
    gap: 2px;
    padding: var(--fd-space-3) var(--fd-space-4);
}

.fd-role-status-dialog__targets span {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
}

.fd-role-status-dialog__targets strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-role-status-dialog__danger {
    align-items: flex-start;
    background: var(--color-red-50, #fef2f2);
    border-left: 3px solid var(--color-red-600, #dc2626);
    border-radius: var(--fd-radius);
    color: var(--color-red-900, #7f1d1d);
    display: flex;
    gap: var(--fd-space-3);
    padding: var(--fd-space-3) var(--fd-space-4);
}

.fd-role-status-dialog__danger > span {
    color: var(--color-red-700, #b91c1c);
    font-size: 20px;
}

.fd-role-status-dialog__danger p {
    font-size: .8125rem;
    margin: var(--fd-space-1) 0 0;
}

.fd-role-status-dialog__identity {
    display: grid;
    gap: 2px;
    min-width: 11rem;
}

.fd-role-status-dialog__changes {
    display: grid;
    gap: var(--fd-space-1);
    justify-items: end;
}

.fd-role-status-dialog__changes > span {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: .75rem;
    gap: var(--fd-space-1);
    justify-content: flex-end;
}

.fd-role-status-dialog__changes > span > small:first-child {
    min-width: 2rem;
}

.fd-role-status-dialog__changes .material-symbols-outlined,
.fd-role-status-dialog__skipped .material-symbols-outlined {
    font-size: 17px;
}

.fd-role-status-dialog__changes em {
    background: var(--color-yellow-50, #fffbeb);
    border-radius: var(--fd-radius);
    color: var(--color-yellow-800, #854d0e);
    font-size: .6875rem;
    font-style: normal;
    padding: 2px var(--fd-space-2);
}

.dark .fd-role-status {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-role-status__distributions > div,
.dark .fd-role-status__choice {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-role-status__distributions strong,
.dark .fd-role-status__choice > .material-symbols-outlined:first-of-type {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-role-status__choice:has(input:checked),
.dark .fd-role-status-dialog__targets > div,
.dark .fd-role-status__impact {
    background: rgb(30 58 138 / .25);
}

.dark .fd-role-status__choice--danger:has(input:checked),
.dark .fd-role-status-dialog__danger {
    background: rgb(127 29 29 / .3);
}

.dark .fd-role-status__selectors legend,
.dark .fd-role-status__choice strong,
.dark .fd-role-status__distributions strong {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-role-status__distributions > div > span,
.dark .fd-role-status__distributions small,
.dark .fd-role-status__choice small,
.dark .fd-role-status-dialog__targets span {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-role-status__impact :is(strong, p),
.dark .fd-role-status-dialog__targets strong {
    color: var(--color-primary-200, #bfdbfe);
}

.dark .fd-role-status-dialog__danger {
    color: var(--color-red-100, #fee2e2);
}

@media (max-width: 1024px) {
    .fd-role-status__selectors {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .fd-role-status__distributions,
    .fd-role-status-dialog__targets {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-role-status-dialog__users li {
        align-items: stretch;
    }

    .fd-role-status-dialog__identity {
        min-width: 0;
    }

    .fd-role-status-dialog__changes {
        justify-items: start;
    }

    .fd-role-status-dialog__changes > span {
        justify-content: flex-start;
    }
}

/* End user role and status workflow. */

/* User recharge workflow. */
.fd-user-recharge {
    color: var(--color-font-default-light, #374151);
    max-width: 1120px;
    min-width: 0;
    width: 100%;
}

body.fd-dialog-open {
    overflow: hidden;
}

.fd-user-recharge__header {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
    min-width: 0;
}

.fd-user-recharge__header .fd-page-intro {
    min-width: 0;
}

.fd-user-recharge__history {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .875rem;
    font-weight: 600;
    gap: var(--fd-space-2);
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--fd-space-3);
}

.fd-user-recharge__history:hover {
    background: var(--color-base-50, #f9fafb);
    border-color: var(--color-base-400, #9ca3af);
}

.fd-user-recharge .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

.fd-user-recharge__error {
    background: var(--color-red-50, #fef2f2);
    border-left: 3px solid var(--color-red-600, #dc2626);
    border-radius: var(--fd-radius);
    color: var(--color-red-800, #991b1b);
    font-size: .875rem;
    padding: var(--fd-space-3) var(--fd-space-4);
}

.fd-user-recharge__nojs-search {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-2);
    padding-top: var(--fd-space-4);
}

.fd-user-recharge__nojs-search > label {
    color: var(--color-font-important-light, #111827);
    font-size: .875rem;
    font-weight: 600;
}

.fd-user-recharge__search-row {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-user-recharge__search-row input {
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    min-height: 40px;
    min-width: 0;
    padding: 0 var(--fd-space-3);
    width: min(100%, 42rem);
}

.fd-user-recharge__search-row button {
    align-items: center;
    background: var(--color-base-900, #111827);
    border: 1px solid var(--color-base-900, #111827);
    border-radius: var(--fd-radius);
    color: #fff;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: var(--fd-space-2);
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--fd-space-4);
}

.fd-user-recharge__layout {
    align-items: start;
    display: grid;
    gap: var(--fd-space-6);
    grid-template-columns: minmax(0, 1fr) 20rem;
    min-width: 0;
}

.fd-user-recharge__editor,
.fd-user-recharge__section,
.fd-user-recharge__fields,
.fd-user-recharge__fields > .group {
    min-width: 0;
}

.fd-user-recharge__section {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    padding-top: var(--fd-space-4);
}

.fd-user-recharge__locked {
    align-items: center;
    color: var(--color-green-700, #15803d);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 650;
    gap: var(--fd-space-1);
    margin: 0;
}

.fd-user-recharge__user-summary {
    min-height: 28px;
    min-width: 0;
}

.fd-user-recharge__loading {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .875rem;
    margin: 0;
}

.fd-user-recharge__identity {
    border-left: 3px solid var(--color-primary-500, #3b82f6);
    display: grid;
    gap: var(--fd-space-1);
    min-width: 0;
    padding: var(--fd-space-1) 0 var(--fd-space-1) var(--fd-space-3);
}

.fd-user-recharge__identity-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-user-recharge__identity-heading strong {
    color: var(--color-font-important-light, #111827);
    overflow-wrap: anywhere;
}

.fd-user-recharge__identity-heading span {
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    font-size: .75rem;
    font-weight: 650;
    padding: 2px var(--fd-space-2);
}

.fd-user-recharge__identity > span,
.fd-user-recharge__identity code {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-user-recharge__fields {
    display: grid;
    gap: var(--fd-space-4);
}

.fd-user-recharge__fields > .group {
    margin: 0;
}

.fd-user-recharge__fields :is(input:not([type="hidden"]), select, textarea),
.fd-user-recharge__fields .select2-container {
    max-width: 100%;
    min-width: 0;
}

.fd-user-recharge__fields .select2-container {
    width: min(100%, 42rem) !important;
}

.fd-user-recharge__fields :is(input:not([type="hidden"]), select) {
    min-height: 40px;
}

.fd-user-recharge #div_id_credits .grow {
    max-width: 42rem;
    position: relative;
}

.fd-user-recharge #div_id_credits .grow::after {
    color: var(--color-font-subtle-light, #6b7280);
    content: "点";
    font-size: .875rem;
    pointer-events: none;
    position: absolute;
    right: var(--fd-space-3);
    top: 50%;
    transform: translateY(-50%);
}

.fd-user-recharge #id_credits {
    padding-right: 2.5rem;
}

.fd-user-recharge__reason-help {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    margin: calc(var(--fd-space-2) * -1) 0 0;
}

.fd-user-recharge__field-error {
    color: var(--color-red-700, #b91c1c);
    font-size: .75rem;
    margin: var(--fd-space-2) 0 0;
}

.fd-user-recharge__warning {
    background: var(--color-yellow-50, #fffbeb);
    border-left: 3px solid var(--color-yellow-500, #eab308);
    border-radius: var(--fd-radius);
    color: var(--color-yellow-900, #713f12);
    font-size: .875rem;
    margin: 0;
    overflow-wrap: anywhere;
    padding: var(--fd-space-3);
}

.fd-user-recharge__summary {
    border-left: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
    padding-left: var(--fd-space-6);
    position: sticky;
    top: var(--fd-space-6);
}

.fd-user-recharge__summary h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
}

.fd-user-recharge__summary dl {
    display: grid;
    margin: 0;
}

.fd-user-recharge__summary dl > div {
    align-items: baseline;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    padding: var(--fd-space-3) 0;
}

.fd-user-recharge__summary dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 600;
}

.fd-user-recharge__summary dd {
    color: var(--color-font-important-light, #111827);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.fd-user-recharge__summary dl > div:last-child dd {
    color: var(--color-green-700, #15803d);
    font-size: 1.125rem;
}

.fd-user-recharge__impact {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    line-height: 1.5;
    margin: 0;
}

.fd-user-recharge__summary-actions,
.fd-user-recharge-dialog__actions,
.fd-user-recharge__nojs-actions {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    justify-content: flex-end;
}

.fd-user-recharge__summary-actions :is(a, button),
.fd-user-recharge-dialog__actions :is(a, button),
.fd-user-recharge__nojs-actions :is(a, button) {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: var(--fd-space-2);
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--fd-space-4);
}

.fd-user-recharge__summary-actions a,
.fd-user-recharge-dialog__actions > :first-child,
.fd-user-recharge__nojs-actions a {
    background: var(--color-base-0, #fff);
    color: var(--color-font-default-light, #374151);
}

.fd-user-recharge__summary-actions button,
.fd-user-recharge-dialog__actions > :last-child,
.fd-user-recharge__nojs-actions button {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #fff;
}

.fd-user-recharge__summary-actions button:hover,
.fd-user-recharge-dialog__actions > :last-child:hover,
.fd-user-recharge__nojs-actions button:hover {
    background: var(--color-primary-700, #1d4ed8);
    border-color: var(--color-primary-700, #1d4ed8);
}

.fd-user-recharge :is(button, input, select, textarea)[disabled] {
    cursor: not-allowed;
    opacity: .6;
}

.fd-user-recharge [aria-busy="true"] {
    cursor: progress;
}

.fd-user-recharge :focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.fd-user-recharge-dialog {
    align-items: center;
    background: rgb(17 24 39 / .55);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--fd-space-6);
    position: fixed;
    z-index: 1000;
}

.fd-user-recharge-dialog__panel {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 20px 48px rgb(15 23 42 / .24);
    display: grid;
    gap: var(--fd-space-4);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    max-width: 42rem;
    min-width: 0;
    overflow-y: auto;
    padding: var(--fd-space-6);
    width: 100%;
}

.fd-user-recharge-dialog__header {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
}

.fd-user-recharge-dialog__header h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 1.125rem;
    font-weight: 650;
    margin: 0;
}

.fd-user-recharge-dialog__header p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .875rem;
    margin: var(--fd-space-1) 0 0;
}

.fd-user-recharge-dialog__close {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.fd-user-recharge-dialog__close:hover {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-important-light, #111827);
}

.fd-user-recharge-dialog__summary {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    margin: 0;
}

.fd-user-recharge-dialog__summary > div {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-4);
    grid-template-columns: 8rem minmax(0, 1fr);
    min-width: 0;
    padding: var(--fd-space-3) 0;
}

.fd-user-recharge-dialog__summary dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 600;
}

.fd-user-recharge-dialog__summary dd {
    color: var(--color-font-important-light, #111827);
    font-weight: 600;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-user-recharge-dialog__reason dd {
    font-weight: 400;
    white-space: pre-wrap;
}

.fd-user-recharge__nojs-confirmation {
    border-top: 1px solid var(--color-base-300, #d1d5db);
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
    padding-top: var(--fd-space-6);
}

.fd-user-recharge__nojs-confirmation h2,
.fd-user-recharge__nojs-confirmation p {
    margin: 0;
}

.fd-user-recharge__nojs-confirmation dl {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    margin: 0;
}

.fd-user-recharge__nojs-confirmation dl > div {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-4);
    grid-template-columns: 10rem minmax(0, 1fr);
    padding: var(--fd-space-3) 0;
}

.fd-user-recharge__nojs-confirmation dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: .75rem;
    font-weight: 600;
}

.fd-user-recharge__nojs-confirmation dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dark .fd-user-recharge {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-recharge__history,
.dark .fd-user-recharge__summary-actions a,
.dark .fd-user-recharge-dialog__actions > :first-child,
.dark .fd-user-recharge__nojs-actions a {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-recharge__history:hover,
.dark .fd-user-recharge-dialog__close:hover {
    background: var(--color-base-800, #1f2937);
}

.dark .fd-user-recharge__error {
    background: var(--color-red-950, #450a0a);
    border-color: var(--color-red-500, #ef4444);
    color: var(--color-red-200, #fecaca);
}

.dark .fd-user-recharge__section,
.dark .fd-user-recharge__nojs-search,
.dark .fd-user-recharge__summary,
.dark .fd-user-recharge__summary dl > div,
.dark .fd-user-recharge-dialog__summary,
.dark .fd-user-recharge-dialog__summary > div,
.dark .fd-user-recharge__nojs-confirmation,
.dark .fd-user-recharge__nojs-confirmation dl,
.dark .fd-user-recharge__nojs-confirmation dl > div {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-user-recharge__nojs-search > label,
.dark .fd-user-recharge__identity-heading strong,
.dark .fd-user-recharge__summary h2,
.dark .fd-user-recharge__summary dd,
.dark .fd-user-recharge-dialog__header h2,
.dark .fd-user-recharge-dialog__summary dd,
.dark .fd-user-recharge__nojs-confirmation h2 {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-user-recharge__loading,
.dark .fd-user-recharge__identity > span,
.dark .fd-user-recharge__identity code,
.dark .fd-user-recharge__reason-help,
.dark .fd-user-recharge__summary dt,
.dark .fd-user-recharge__impact,
.dark .fd-user-recharge-dialog__header p,
.dark .fd-user-recharge-dialog__close,
.dark .fd-user-recharge-dialog__summary dt,
.dark .fd-user-recharge__nojs-confirmation dt {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-user-recharge__identity-heading span {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-user-recharge__locked,
.dark .fd-user-recharge__summary dl > div:last-child dd {
    color: var(--color-green-300, #86efac);
}

.dark .fd-user-recharge__search-row input {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
    color-scheme: dark;
}

.dark .fd-user-recharge #div_id_credits .grow::after {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-user-recharge__field-error {
    color: var(--color-red-300, #fca5a5);
}

.dark .fd-user-recharge__warning {
    background: #422006;
    border-color: var(--color-yellow-500, #eab308);
    color: var(--color-yellow-100, #fef9c3);
}

.dark .fd-user-recharge-dialog__panel {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    box-shadow: 0 20px 48px rgb(0 0 0 / .5);
}

@media (max-width: 1023px) {
    .fd-user-recharge__layout {
        gap: var(--fd-space-4);
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 17rem);
    }

    .fd-user-recharge__summary {
        padding-left: var(--fd-space-4);
    }
}

@media (max-width: 767px) {
    .fd-user-recharge__header {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-user-recharge__history {
        align-self: flex-start;
    }

    .fd-user-recharge__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-user-recharge__summary {
        border-left: 0;
        border-top: 1px solid var(--color-base-200, #e5e7eb);
        padding-left: 0;
        padding-top: var(--fd-space-4);
        position: static;
    }

    .fd-user-recharge__search-row,
    .fd-user-recharge__summary-actions,
    .fd-user-recharge-dialog__actions,
    .fd-user-recharge__nojs-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-user-recharge__search-row > *,
    .fd-user-recharge__summary-actions > *,
    .fd-user-recharge-dialog__actions > *,
    .fd-user-recharge__nojs-actions > * {
        width: 100%;
    }

    .fd-user-recharge-dialog {
        align-items: flex-end;
        padding: 0;
    }

    .fd-user-recharge-dialog__panel {
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: var(--fd-space-4);
    }

    .fd-user-recharge-dialog__summary > div,
    .fd-user-recharge__nojs-confirmation dl > div {
        gap: var(--fd-space-1);
        grid-template-columns: minmax(0, 1fr);
    }
}

.dark .fd-user-recharge__summary {
    border-color: var(--color-base-700, #374151);
}

/* End user recharge workflow. */

/* User recharge history */
.fd-recharge-history {
    color: var(--color-font-default-light, #374151);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-inline: auto;
    max-width: 1500px;
    min-width: 0;
    width: 100%;
}

.fd-recharge-history__intro {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.fd-recharge-history__intro h1 {
    color: var(--color-font-important-light, #111827);
    font-size: 24px;
    font-weight: 650;
    line-height: 32px;
    margin: 0;
}

.fd-recharge-history__intro p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 4px 0 0;
}

.fd-recharge-history .fd-button,
.fd-recharge-drawer .fd-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    justify-content: center;
    line-height: 20px;
    min-height: 40px;
    padding: 9px 14px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-recharge-history .fd-button .material-symbols-outlined,
.fd-recharge-drawer .fd-button .material-symbols-outlined {
    font-size: 19px;
}

.fd-recharge-history .fd-button--primary,
.fd-recharge-drawer .fd-button--primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.fd-recharge-history .fd-button--primary:hover,
.fd-recharge-drawer .fd-button--primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.fd-recharge-history .fd-button--secondary,
.fd-recharge-drawer .fd-button--secondary {
    background: #fff;
    border-color: #d1d5db;
    color: #374151;
}

.fd-recharge-history .fd-button--secondary:hover,
.fd-recharge-drawer .fd-button--secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.fd-recharge-history .fd-button--compact,
.fd-recharge-drawer .fd-button--compact {
    min-height: 34px;
    padding: 6px 10px;
}

.fd-recharge-history__tabs {
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    gap: 28px;
}

.fd-recharge-history__tabs a {
    align-items: center;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    margin-bottom: -1px;
    padding: 11px 2px 12px;
    text-decoration: none;
}

.fd-recharge-history__tabs a:hover {
    color: #111827;
}

.fd-recharge-history__tabs a[aria-current="page"] {
    border-bottom-color: #2563eb;
    color: #1d4ed8;
}

.fd-recharge-history__tabs .material-symbols-outlined {
    font-size: 20px;
}

.fd-recharge-history__filter-panel .fd-list-filter-panel__content {
    width: min(420px, calc(100vw - 32px));
}

.fd-recharge-history__filters {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
    padding: 16px;
}

.fd-recharge-history__filters > label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.fd-recharge-history__filters > label > span:first-child {
    color: #4b5563;
    font-size: 12px;
    font-weight: 600;
}

.fd-recharge-history__filters input:not([type="checkbox"]):not([type="radio"]),
.fd-recharge-history__filters select {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #111827;
    font-size: 14px;
    height: 40px;
    min-width: 0;
    outline: none;
    padding: 8px 10px;
    width: 100%;
}

.fd-recharge-history__filters input:not([type="checkbox"]):not([type="radio"]):focus,
.fd-recharge-history__filters select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}

.fd-recharge-history__date[hidden] {
    display: none;
}

.fd-recharge-history__filters .fd-list-filter-panel__actions {
    margin: 2px -16px -16px;
}

.fd-recharge-history__sort-link {
    align-items: center;
    color: inherit;
    display: inline-flex;
    gap: 5px;
    text-decoration: none;
}

.fd-recharge-history__sort-link:hover {
    color: #1d4ed8;
}

.fd-recharge-history__sort-link .material-symbols-outlined {
    color: #9ca3af;
    font-size: 17px;
}

.fd-recharge-history__table th[aria-sort] .fd-recharge-history__sort-link,
.fd-recharge-history__table th[aria-sort] .material-symbols-outlined {
    color: #2563eb;
}

.fd-recharge-history__summary {
    align-items: stretch;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.fd-recharge-history__summary > div {
    display: grid;
    gap: 3px;
    padding: 14px 18px;
}

.fd-recharge-history__summary > div + div {
    border-left: 1px solid #e5e7eb;
}

.fd-recharge-history__summary span {
    color: #6b7280;
    font-size: 12px;
}

.fd-recharge-history__summary strong {
    color: #111827;
    font-size: 18px;
    font-weight: 650;
}

.fd-recharge-history__results {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    min-width: 0;
    overflow: hidden;
}

.fd-recharge-history__table-scroll {
    overflow-x: auto;
}

.fd-recharge-history__table {
    border-collapse: collapse;
    min-width: 1180px;
    width: 100%;
}

.fd-recharge-history__table--operations {
    min-width: 1250px;
}

.fd-recharge-history__table th {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 12px;
    font-weight: 650;
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
}

.fd-recharge-history__table td {
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    max-width: 260px;
    padding: 14px;
    vertical-align: top;
}

.fd-recharge-history__table tbody tr:last-child td {
    border-bottom: 0;
}

.fd-recharge-history__table tbody tr:hover {
    background: #fafafa;
}

.fd-recharge-history__table td > small,
.fd-recharge-history__actor small {
    color: #9ca3af;
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.fd-recharge-history__user,
.fd-recharge-history__actor,
.fd-recharge-history__time {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-recharge-history__user {
    color: #111827;
    text-decoration: none;
}

.fd-recharge-history__user:hover strong {
    color: #1d4ed8;
}

.fd-recharge-history__user small {
    color: #9ca3af;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.fd-recharge-history__points {
    color: #15803d;
    white-space: nowrap;
}

.fd-recharge-history__muted {
    color: #9ca3af;
}

.fd-recharge-history__reason {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fd-recharge-history code,
.fd-recharge-drawer code {
    color: #4b5563;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.fd-recharge-history__actions {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.fd-recharge-history__pagination {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.fd-recharge-history__pagination a {
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    display: inline-flex;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
    padding: 6px 10px;
    text-decoration: none;
}

.fd-recharge-history__pagination a:hover,
.fd-recharge-history__pagination a[aria-current="page"] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.fd-recharge-history__live {
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.fd-recharge-drawer__backdrop {
    background: rgb(17 24 39 / 0.34);
    display: none;
    inset: 0;
    position: fixed;
    z-index: 49;
}

.fd-recharge-drawer {
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    max-width: 100%;
    position: static;
    width: 100%;
    z-index: 50;
}

[data-fd-recharge-history][data-enhanced="true"] .fd-recharge-drawer__backdrop {
    display: block;
}

[data-fd-recharge-history][data-enhanced="true"] .fd-recharge-drawer {
    border-width: 0 0 0 1px;
    box-shadow: -18px 0 48px rgb(15 23 42 / 0.16);
    inset: 0 0 0 auto;
    margin-top: 0;
    position: fixed;
    width: 640px;
}

.fd-recharge-drawer__header {
    align-items: flex-start;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 20px 24px;
}

.fd-recharge-drawer__header > div > span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.fd-recharge-drawer__header h2 {
    color: #111827;
    font-size: 20px;
    font-weight: 650;
    line-height: 28px;
    margin: 4px 0 0;
}

.fd-recharge-drawer__close {
    align-items: center;
    border-radius: 6px;
    color: #6b7280;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.fd-recharge-drawer__close:hover {
    background: #f3f4f6;
    color: #111827;
}

.fd-recharge-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 24px;
}

.fd-recharge-drawer__overview {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 22px;
}

.fd-recharge-drawer__status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.fd-recharge-drawer__status > span:last-child {
    color: #6b7280;
    font-size: 13px;
}

.fd-recharge-drawer__overview > p {
    color: #374151;
    line-height: 1.6;
    margin: 14px 0;
    overflow-wrap: anywhere;
}

.fd-recharge-drawer__overview dl,
.fd-recharge-drawer__timeline-card dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.fd-recharge-drawer__overview dl > div,
.fd-recharge-drawer__timeline-card dl > div {
    border-top: 1px solid #f3f4f6;
    display: grid;
    gap: 12px;
    grid-template-columns: 112px minmax(0, 1fr);
    padding: 9px 0;
}

.fd-recharge-drawer dt {
    color: #6b7280;
    font-size: 12px;
}

.fd-recharge-drawer dd {
    color: #111827;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-recharge-drawer__error,
.fd-recharge-drawer__attempt-error {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    color: #9a3412;
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding: 12px;
}

.fd-recharge-drawer__timeline {
    padding-top: 22px;
}

.fd-recharge-drawer__section-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.fd-recharge-drawer__section-title h3 {
    color: #111827;
    font-size: 16px;
    font-weight: 650;
    margin: 0;
}

.fd-recharge-drawer__section-title span {
    color: #9ca3af;
    font-size: 12px;
}

.fd-recharge-drawer__timeline ol {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.fd-recharge-drawer__timeline li {
    display: grid;
    gap: 12px;
    grid-template-columns: 14px minmax(0, 1fr);
    padding-bottom: 18px;
    position: relative;
}

.fd-recharge-drawer__timeline li:not(:last-child)::before {
    background: #dbeafe;
    bottom: -3px;
    content: "";
    left: 6px;
    position: absolute;
    top: 13px;
    width: 2px;
}

.fd-recharge-drawer__timeline-mark {
    background: #2563eb;
    border: 3px solid #dbeafe;
    border-radius: 50%;
    height: 14px;
    margin-top: 5px;
    position: relative;
    width: 14px;
    z-index: 1;
}

.fd-recharge-drawer__timeline-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 14px;
}

.fd-recharge-drawer__timeline-card > div:first-child {
    align-items: center;
    display: flex;
    gap: 9px;
    justify-content: space-between;
}

.fd-recharge-drawer__timeline-card > p {
    color: #6b7280;
    font-size: 12px;
    margin: 5px 0 10px;
}

.fd-recharge-drawer__attempt-error {
    font-size: 12px;
    margin-top: 10px;
}

.fd-recharge-drawer__footer {
    align-items: center;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 24px;
}

.dark .fd-recharge-history {
    color: #d1d5db;
}

.dark .fd-recharge-history__intro h1,
.dark .fd-recharge-history__summary strong,
.dark .fd-recharge-history__user,
.dark .fd-recharge-drawer__header h2,
.dark .fd-recharge-drawer__section-title h3,
.dark .fd-recharge-drawer dd {
    color: #f9fafb;
}

.dark .fd-recharge-history__intro p,
.dark .fd-recharge-history__tabs a,
.dark .fd-recharge-history__summary span,
.dark .fd-recharge-drawer__header > div > span,
.dark .fd-recharge-drawer dt,
.dark .fd-recharge-drawer__overview > p,
.dark .fd-recharge-drawer__timeline-card > p {
    color: #9ca3af;
}

.dark .fd-recharge-history__tabs,
.dark .fd-recharge-history__summary,
.dark .fd-recharge-history__results,
.dark .fd-recharge-drawer__header,
.dark .fd-recharge-drawer__overview,
.dark .fd-recharge-drawer__footer {
    border-color: #374151;
}

.dark .fd-recharge-history__table th {
    background: #111827;
    border-color: #374151;
}

.dark .fd-recharge-history__filters input,
.dark .fd-recharge-history__filters select,
.dark .fd-recharge-history__summary,
.dark .fd-recharge-history__results,
.dark .fd-recharge-history .fd-button--secondary,
.dark .fd-recharge-drawer,
.dark .fd-recharge-drawer__footer,
.dark .fd-recharge-drawer .fd-button--secondary,
.dark .fd-recharge-drawer__timeline-card {
    background: #0f172a;
    border-color: #374151;
    color: #e5e7eb;
}

.dark .fd-recharge-history__table td {
    border-color: #1f2937;
    color: #d1d5db;
}

.dark .fd-recharge-history__table tbody tr:hover,
.dark .fd-recharge-history .fd-button--secondary:hover,
.dark .fd-recharge-drawer .fd-button--secondary:hover,
.dark .fd-recharge-drawer__close:hover {
    background: #1f2937;
}

.dark .fd-recharge-history__summary > div + div,
.dark .fd-recharge-drawer__overview dl > div,
.dark .fd-recharge-drawer__timeline-card dl > div {
    border-color: #1f2937;
}

.dark .fd-recharge-history code,
.dark .fd-recharge-drawer code {
    color: #cbd5e1;
}

.dark .fd-recharge-drawer__error,
.dark .fd-recharge-drawer__attempt-error {
    background: #431407;
    border-color: #9a3412;
    color: #fed7aa;
}

@media (max-width: 767px) {
    .fd-recharge-history {
        gap: 16px;
    }

    .fd-recharge-history__intro {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-recharge-history__intro .fd-button {
        align-self: flex-start;
    }

    .fd-recharge-history__tabs {
        gap: 18px;
    }

    .fd-recharge-history__summary {
        grid-template-columns: 1fr;
    }

    .fd-recharge-history__summary > div {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 11px 14px;
    }

    .fd-recharge-history__summary > div + div {
        border-left: 0;
        border-top: 1px solid #e5e7eb;
    }

    .fd-recharge-history__table-scroll {
        overflow: visible;
    }

    .fd-recharge-history__table,
    .fd-recharge-history__table--operations {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .fd-recharge-history__table thead {
        display: none;
    }

    .fd-recharge-history__table tbody {
        display: grid;
    }

    .fd-recharge-history__table tr {
        display: grid;
        padding: 14px;
    }

    .fd-recharge-history__table tr + tr {
        border-top: 1px solid #e5e7eb;
    }

    .fd-recharge-history__table td {
        align-items: start;
        border: 0;
        display: grid;
        gap: 10px;
        grid-template-columns: 92px minmax(0, 1fr);
        max-width: none;
        padding: 7px 0;
    }

    .fd-recharge-history__table td::before {
        color: #6b7280;
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
    }

    .fd-recharge-history__actions {
        min-width: 0;
    }

    .fd-recharge-history__pagination {
        justify-content: center;
    }

    [data-fd-recharge-history][data-enhanced="true"] .fd-recharge-drawer {
        width: 100%;
    }

    .fd-recharge-drawer__header,
    .fd-recharge-drawer__body,
    .fd-recharge-drawer__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fd-recharge-drawer__overview dl > div,
    .fd-recharge-drawer__timeline-card dl > div {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .fd-recharge-drawer__footer .fd-button {
        flex: 1 1 auto;
    }

    .dark .fd-recharge-history__summary > div + div,
    .dark .fd-recharge-history__table tr + tr {
        border-color: #374151;
    }
}

/* Read-only credit transaction detail. */
.fd-credit-transaction-detail {
    --fd-transaction-border: #e2e6ec;
    --fd-transaction-muted: #687386;
    --fd-transaction-soft: #f6f8fb;
    --fd-transaction-surface: #ffffff;
    --fd-transaction-text: #172033;
    box-sizing: border-box;
    color: var(--fd-transaction-text);
    display: grid;
    gap: 14px;
    margin: 0 auto;
    max-width: 1320px;
    padding: 4px 4px 40px;
    width: 100%;
}

.fd-credit-transaction-detail *,
.fd-credit-transaction-detail *::before,
.fd-credit-transaction-detail *::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

.fd-credit-transaction-detail button {
    font: inherit;
}

.fd-credit-transaction-detail a:focus-visible,
.fd-credit-transaction-detail button:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-credit-transaction-detail__back {
    align-items: center;
    color: var(--fd-transaction-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    justify-self: start;
    min-height: 36px;
    text-decoration: none;
}

.fd-credit-transaction-detail__back:hover,
.fd-credit-transaction-detail__back:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-transaction-detail__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-credit-transaction-detail__header,
.fd-credit-transaction-detail__change,
.fd-credit-transaction-detail__reference,
.fd-credit-transaction-detail__record,
.fd-credit-transaction-detail__rail > section {
    background: var(--fd-transaction-surface);
    border: 1px solid var(--fd-transaction-border);
    border-radius: 8px;
}

.fd-credit-transaction-detail__header {
    overflow: hidden;
}

.fd-credit-transaction-detail__header-main {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 24px;
}

.fd-credit-transaction-detail__identity {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.fd-credit-transaction-detail__icon {
    align-items: center;
    background: #eef2ff;
    border-radius: 8px;
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
}

.fd-credit-transaction-detail__icon.is-increase {
    background: #ecfdf5;
    color: #047857;
}

.fd-credit-transaction-detail__icon.is-decrease {
    background: #fff7ed;
    color: #c2410c;
}

.fd-credit-transaction-detail__icon.is-zero {
    background: #f3f4f6;
    color: #6b7280;
}

.fd-credit-transaction-detail__icon .material-symbols-outlined {
    font-size: 28px;
}

.fd-credit-transaction-detail__heading {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.fd-credit-transaction-detail__heading-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.fd-credit-transaction-detail__heading h1 {
    color: var(--fd-transaction-text);
    font-size: 24px;
    font-weight: 750;
    line-height: 1.3;
    margin: 0;
    max-width: 720px;
    overflow-wrap: anywhere;
}

.fd-credit-transaction-detail__id {
    align-items: center;
    color: var(--fd-transaction-muted);
    display: flex;
    gap: 5px;
    min-width: 0;
}

.fd-credit-transaction-detail__id code,
.fd-credit-transaction-detail__record code,
.fd-credit-transaction-detail__reference-card code,
.fd-credit-transaction-detail__owner-card code {
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.fd-credit-transaction-detail__icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--fd-transaction-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
}

.fd-credit-transaction-detail__icon-button:hover,
.fd-credit-transaction-detail__icon-button:focus-visible {
    background: #eef2ff;
    color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-transaction-detail__icon-button .material-symbols-outlined {
    font-size: 18px;
}

.fd-credit-transaction-detail__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    max-width: 540px;
}

.fd-credit-transaction-detail__action {
    align-items: center;
    border: 1px solid var(--fd-transaction-border);
    border-radius: 7px;
    color: var(--fd-transaction-text);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-credit-transaction-detail__action:hover {
    background: var(--fd-transaction-soft);
    border-color: #c9d1dc;
}

.fd-credit-transaction-detail__action.is-primary {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #ffffff;
}

.fd-credit-transaction-detail__action.is-primary:hover {
    background: var(--color-primary-700, #1d4ed8);
    border-color: var(--color-primary-700, #1d4ed8);
}

.fd-credit-transaction-detail__action .material-symbols-outlined {
    font-size: 18px;
}

.fd-credit-transaction-detail__summary {
    border-top: 1px solid var(--fd-transaction-border);
    color: var(--fd-transaction-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    padding: 13px 24px;
}

.fd-credit-transaction-detail__metrics {
    border-top: 1px solid var(--fd-transaction-border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.fd-credit-transaction-detail__metrics > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 17px 20px;
}

.fd-credit-transaction-detail__metrics > div + div {
    border-left: 1px solid var(--fd-transaction-border);
}

.fd-credit-transaction-detail__metrics dt,
.fd-credit-transaction-detail__change-facts dt,
.fd-credit-transaction-detail__reference-meta dt,
.fd-credit-transaction-detail__record dt {
    color: var(--fd-transaction-muted);
    font-size: 12px;
    font-weight: 650;
}

.fd-credit-transaction-detail__metrics dd {
    color: var(--fd-transaction-text);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-credit-transaction-detail__metrics .is-increase dd {
    color: #047857;
}

.fd-credit-transaction-detail__metrics .is-decrease dd {
    color: #b91c1c;
}

.fd-credit-transaction-detail__metrics small {
    color: var(--fd-transaction-muted);
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.fd-credit-transaction-detail__attention {
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    display: flex;
    gap: 12px;
    padding: 15px 18px;
}

.fd-credit-transaction-detail__attention > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 22px;
    margin-top: 1px;
}

.fd-credit-transaction-detail__attention h2 {
    font-size: 14px;
    font-weight: 750;
    margin: 0;
}

.fd-credit-transaction-detail__attention p,
.fd-credit-transaction-detail__attention ul {
    font-size: 13px;
    line-height: 1.55;
    margin: 4px 0 0;
}

.fd-credit-transaction-detail__attention ul {
    padding-left: 18px;
}

.fd-credit-transaction-detail__workspace {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
}

.fd-credit-transaction-detail__main,
.fd-credit-transaction-detail__rail {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.fd-credit-transaction-detail__change,
.fd-credit-transaction-detail__reference,
.fd-credit-transaction-detail__record,
.fd-credit-transaction-detail__rail > section {
    padding: 20px;
}

.fd-credit-transaction-detail__change > header,
.fd-credit-transaction-detail__reference > header,
.fd-credit-transaction-detail__record > header,
.fd-credit-transaction-detail__rail section > header {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
}

.fd-credit-transaction-detail__change > header,
.fd-credit-transaction-detail__reference > header {
    align-items: start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.fd-credit-transaction-detail__change > header > .fd-status-badge,
.fd-credit-transaction-detail__reference > header > .fd-status-badge {
    justify-self: start;
}

.fd-credit-transaction-detail__change h2,
.fd-credit-transaction-detail__reference h2,
.fd-credit-transaction-detail__record h2,
.fd-credit-transaction-detail__rail h2 {
    color: var(--fd-transaction-text);
    font-size: 15px;
    font-weight: 750;
    margin: 0;
}

.fd-credit-transaction-detail__change header p,
.fd-credit-transaction-detail__reference header p,
.fd-credit-transaction-detail__record header p,
.fd-credit-transaction-detail__rail header p {
    color: var(--fd-transaction-muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.fd-credit-transaction-detail__amount-block {
    align-items: center;
    background: var(--fd-transaction-soft);
    border: 1px solid var(--fd-transaction-border);
    border-radius: 8px;
    display: flex;
    gap: 14px;
    padding: 18px;
}

.fd-credit-transaction-detail__amount-icon {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--fd-transaction-border);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 46px;
    height: 46px;
    justify-content: center;
}

.fd-credit-transaction-detail__amount-block.is-increase
    .fd-credit-transaction-detail__amount-icon,
.fd-credit-transaction-detail__amount-block.is-increase strong {
    color: #047857;
}

.fd-credit-transaction-detail__amount-block.is-decrease
    .fd-credit-transaction-detail__amount-icon,
.fd-credit-transaction-detail__amount-block.is-decrease strong {
    color: #b91c1c;
}

.fd-credit-transaction-detail__amount-block > div {
    display: grid;
    gap: 2px;
}

.fd-credit-transaction-detail__amount-block span,
.fd-credit-transaction-detail__amount-block small {
    color: var(--fd-transaction-muted);
    font-size: 12px;
}

.fd-credit-transaction-detail__amount-block strong {
    color: var(--fd-transaction-text);
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    font-weight: 780;
    line-height: 1.2;
}

.fd-credit-transaction-detail__description {
    border-bottom: 1px solid var(--fd-transaction-border);
    padding: 18px 2px;
}

.fd-credit-transaction-detail__description > span {
    color: var(--fd-transaction-muted);
    display: block;
    font-size: 12px;
    font-weight: 650;
    margin-bottom: 6px;
}

.fd-credit-transaction-detail__description p {
    color: var(--fd-transaction-text);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.fd-credit-transaction-detail__change-facts,
.fd-credit-transaction-detail__reference-meta,
.fd-credit-transaction-detail__record dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.fd-credit-transaction-detail__change-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fd-credit-transaction-detail__change-facts > div {
    display: grid;
    gap: 5px;
    padding: 16px 2px 0;
}

.fd-credit-transaction-detail__change-facts > div + div {
    border-left: 1px solid var(--fd-transaction-border);
    padding-left: 16px;
}

.fd-credit-transaction-detail__change-facts dd,
.fd-credit-transaction-detail__reference-meta dd,
.fd-credit-transaction-detail__record dd {
    color: var(--fd-transaction-text);
    font-size: 13px;
    font-weight: 650;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-credit-transaction-detail__reference-card {
    align-items: center;
    background: var(--fd-transaction-soft);
    border: 1px solid var(--fd-transaction-border);
    border-radius: 8px;
    display: grid;
    gap: 13px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 16px;
}

.fd-credit-transaction-detail__reference-card.is-resolved {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.fd-credit-transaction-detail__reference-card.is-missing,
.fd-credit-transaction-detail__reference-card.is-mismatch,
.fd-credit-transaction-detail__reference-card.is-unavailable {
    background: #fffbeb;
    border-color: #fde68a;
}

.fd-credit-transaction-detail__reference-icon {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--fd-transaction-border);
    border-radius: 8px;
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.fd-credit-transaction-detail__reference-icon .material-symbols-outlined {
    font-size: 22px;
}

.fd-credit-transaction-detail__reference-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-credit-transaction-detail__reference-copy > strong {
    color: var(--fd-transaction-text);
    font-size: 14px;
}

.fd-credit-transaction-detail__reference-copy > p {
    color: var(--fd-transaction-muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.fd-credit-transaction-detail__reference-copy > div {
    align-items: center;
    color: var(--fd-transaction-muted);
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-credit-transaction-detail__reference-link,
.fd-credit-transaction-detail__balance > a {
    align-items: center;
    color: var(--color-primary-700, #1d4ed8);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-credit-transaction-detail__reference-link .material-symbols-outlined,
.fd-credit-transaction-detail__balance > a .material-symbols-outlined {
    font-size: 18px;
}

.fd-credit-transaction-detail__reference-meta {
    border-top: 1px solid var(--fd-transaction-border);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
}

.fd-credit-transaction-detail__reference-meta > div {
    display: grid;
    gap: 4px;
    padding-top: 14px;
}

.fd-credit-transaction-detail__record dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-credit-transaction-detail__record dl > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px 0;
}

.fd-credit-transaction-detail__record dl > div:nth-child(even) {
    border-left: 1px solid var(--fd-transaction-border);
    padding-left: 18px;
}

.fd-credit-transaction-detail__record dl > div:nth-child(n + 3) {
    border-top: 1px solid var(--fd-transaction-border);
}

.fd-credit-transaction-detail__record dd {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-credit-transaction-detail__record small {
    color: var(--fd-transaction-muted);
    font-size: 12px;
}

.fd-credit-transaction-detail__owner-card {
    align-items: center;
    background: var(--fd-transaction-soft);
    border: 1px solid var(--fd-transaction-border);
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: 11px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 14px;
    text-decoration: none;
}

.fd-credit-transaction-detail__owner-card:not(.is-static):hover {
    border-color: #bfdbfe;
}

.fd-credit-transaction-detail__owner-avatar {
    align-items: center;
    background: #dbeafe;
    border-radius: 50%;
    color: #1d4ed8;
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 15px;
    font-weight: 750;
    height: 42px;
    justify-content: center;
    text-transform: uppercase;
    width: 42px;
}

.fd-credit-transaction-detail__owner-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-credit-transaction-detail__owner-copy strong {
    color: var(--fd-transaction-text);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-credit-transaction-detail__owner-copy small {
    color: var(--fd-transaction-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-credit-transaction-detail__owner-card > .material-symbols-outlined {
    color: var(--fd-transaction-muted);
    font-size: 19px;
}

.fd-credit-transaction-detail__balance > strong {
    color: var(--fd-transaction-text);
    display: block;
    font-size: 25px;
    font-variant-numeric: tabular-nums;
    font-weight: 780;
}

.fd-credit-transaction-detail__balance > span,
.fd-credit-transaction-detail__balance > small {
    color: var(--fd-transaction-muted);
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.fd-credit-transaction-detail__balance > a {
    margin-top: 14px;
}

.fd-credit-transaction-detail__balance-empty {
    align-items: flex-start;
    color: var(--fd-transaction-muted);
    display: flex;
    gap: 9px;
}

.fd-credit-transaction-detail__balance-empty
    > .material-symbols-outlined {
    font-size: 20px;
}

.fd-credit-transaction-detail__balance-empty p {
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}

.fd-credit-transaction-detail__boundaries ul {
    display: grid;
    gap: 11px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-credit-transaction-detail__boundaries li {
    align-items: flex-start;
    color: var(--fd-transaction-muted);
    display: flex;
    font-size: 12px;
    gap: 8px;
    line-height: 1.55;
}

.fd-credit-transaction-detail__boundaries
    li
    .material-symbols-outlined {
    color: #4f46e5;
    flex: 0 0 auto;
    font-size: 17px;
    margin-top: 1px;
}

.fd-credit-transaction-detail__toast {
    background: #111827;
    border-radius: 7px;
    bottom: 22px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 70;
}

.dark .fd-credit-transaction-detail {
    --fd-transaction-border: #374151;
    --fd-transaction-muted: #9ca3af;
    --fd-transaction-soft: #111827;
    --fd-transaction-surface: #0f172a;
    --fd-transaction-text: #f3f4f6;
}

.dark .fd-credit-transaction-detail__icon.is-increase {
    background: #052e24;
    color: #6ee7b7;
}

.dark .fd-credit-transaction-detail__icon.is-decrease {
    background: #431407;
    color: #fdba74;
}

.dark .fd-credit-transaction-detail__icon.is-zero {
    background: #1f2937;
    color: #d1d5db;
}

.dark .fd-credit-transaction-detail__icon-button:hover,
.dark .fd-credit-transaction-detail__icon-button:focus-visible {
    background: #1e293b;
    color: #93c5fd;
}

.dark .fd-credit-transaction-detail__action:hover {
    background: #1f2937;
    border-color: #4b5563;
}

.dark .fd-credit-transaction-detail__attention,
.dark .fd-credit-transaction-detail__reference-card.is-missing,
.dark .fd-credit-transaction-detail__reference-card.is-mismatch,
.dark .fd-credit-transaction-detail__reference-card.is-unavailable {
    background: #422006;
    border-color: #92400e;
    color: #fde68a;
}

.dark .fd-credit-transaction-detail__amount-icon,
.dark .fd-credit-transaction-detail__reference-icon {
    background: #0f172a;
}

.dark .fd-credit-transaction-detail__reference-card.is-resolved {
    background: #052e24;
    border-color: #166534;
}

.dark .fd-credit-transaction-detail__owner-avatar {
    background: #1e3a8a;
    color: #bfdbfe;
}

@media (max-width: 1024px) {
    .fd-credit-transaction-detail__header-main {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-credit-transaction-detail__actions {
        justify-content: flex-start;
        max-width: none;
    }

    .fd-credit-transaction-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-credit-transaction-detail__metrics > div:nth-child(3) {
        border-left: 0;
    }

    .fd-credit-transaction-detail__metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--fd-transaction-border);
    }

    .fd-credit-transaction-detail__workspace {
        grid-template-columns: 1fr;
    }

    .fd-credit-transaction-detail__rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fd-credit-transaction-detail {
        gap: 12px;
        padding: 0 0 28px;
    }

    .fd-credit-transaction-detail__header-main,
    .fd-credit-transaction-detail__change,
    .fd-credit-transaction-detail__reference,
    .fd-credit-transaction-detail__record,
    .fd-credit-transaction-detail__rail > section {
        padding: 16px;
    }

    .fd-credit-transaction-detail__identity {
        align-items: center;
    }

    .fd-credit-transaction-detail__icon {
        flex-basis: 44px;
        height: 44px;
    }

    .fd-credit-transaction-detail__icon .material-symbols-outlined {
        font-size: 23px;
    }

    .fd-credit-transaction-detail__heading h1 {
        font-size: 20px;
    }

    .fd-credit-transaction-detail__id code {
        max-width: min(56vw, 320px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fd-credit-transaction-detail__icon-button {
        flex-basis: 44px;
        height: 44px;
    }

    .fd-credit-transaction-detail__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-credit-transaction-detail__action {
        justify-content: center;
        min-height: 44px;
        padding: 0 10px;
    }

    .fd-credit-transaction-detail__actions
        > .fd-credit-transaction-detail__action:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .fd-credit-transaction-detail__summary {
        padding: 13px 16px;
    }

    .fd-credit-transaction-detail__metrics {
        grid-template-columns: 1fr;
    }

    .fd-credit-transaction-detail__metrics > div + div,
    .fd-credit-transaction-detail__metrics > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--fd-transaction-border);
    }

    .fd-credit-transaction-detail__change > header,
    .fd-credit-transaction-detail__reference > header {
        display: grid;
    }

    .fd-credit-transaction-detail__change-facts,
    .fd-credit-transaction-detail__reference-meta,
    .fd-credit-transaction-detail__record dl,
    .fd-credit-transaction-detail__rail {
        grid-template-columns: 1fr;
    }

    .fd-credit-transaction-detail__change-facts > div + div {
        border-left: 0;
        border-top: 1px solid var(--fd-transaction-border);
        padding-left: 2px;
    }

    .fd-credit-transaction-detail__reference-card {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .fd-credit-transaction-detail__reference-link {
        grid-column: 1 / -1;
        min-height: 44px;
    }

    .fd-credit-transaction-detail__record dl > div:nth-child(even) {
        border-left: 0;
        padding-left: 0;
    }

    .fd-credit-transaction-detail__record dl > div + div {
        border-top: 1px solid var(--fd-transaction-border);
    }
}

/* Invitation code changelist and distribution controls. */
.fd-invitation-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 250px;
}

.fd-invitation-identity__mark {
    align-items: center;
    background: #eef2ff;
    border-radius: var(--fd-radius);
    color: #4f46e5;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-invitation-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-invitation-identity__content,
.fd-invitation-plan,
.fd-invitation-status,
.fd-invitation-usage,
.fd-invitation-time,
.fd-invitation-channel-partner,
.fd-invitation-creator {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-invitation-identity__title-row {
    align-items: center;
    display: flex;
    gap: 3px;
    min-width: 0;
}

.fd-invitation-identity__title-link {
    color: inherit;
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 750;
    max-width: 210px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-invitation-identity__title-link:hover,
.fd-invitation-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-invitation-identity__preview,
.fd-invitation-identity__copy,
.fd-invitation-identity__copy-link {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-invitation-identity__title-row:hover
    .fd-invitation-identity__preview,
.fd-invitation-identity__title-row:hover
    .fd-invitation-identity__copy,
.fd-invitation-identity__title-row:hover
    .fd-invitation-identity__copy-link,
.fd-invitation-identity__title-row:focus-within
    .fd-invitation-identity__preview,
.fd-invitation-identity__title-row:focus-within
    .fd-invitation-identity__copy,
.fd-invitation-identity__title-row:focus-within
    .fd-invitation-identity__copy-link {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-invitation-identity__preview:hover,
.fd-invitation-identity__preview:focus-visible,
.fd-invitation-identity__copy:hover,
.fd-invitation-identity__copy:focus-visible,
.fd-invitation-identity__copy-link:hover,
.fd-invitation-identity__copy-link:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-invitation-identity__copy.is-copied,
.fd-invitation-identity__copy-link.is-copied {
    color: #047857;
}

.fd-invitation-identity__copy-link:disabled {
    cursor: not-allowed;
}

.fd-invitation-identity__title-row:hover
    .fd-invitation-identity__copy-link:disabled,
.fd-invitation-identity__title-row:focus-within
    .fd-invitation-identity__copy-link:disabled {
    color: var(--color-font-subtle-light, #6b7280);
    opacity: 0.55;
}

.fd-invitation-identity__preview .material-symbols-outlined,
.fd-invitation-identity__copy .material-symbols-outlined,
.fd-invitation-identity__copy-link .material-symbols-outlined {
    font-size: 18px;
}

.fd-invitation-identity__content > small,
.fd-invitation-plan small,
.fd-invitation-status small,
.fd-invitation-usage small,
.fd-invitation-redeemers small,
.fd-invitation-time small,
.fd-invitation-channel-partner small,
.fd-invitation-creator small {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-invitation-identity__content > small,
.fd-invitation-redeemers strong,
.fd-invitation-redeemers small,
.fd-invitation-channel-partner strong,
.fd-invitation-channel-partner small,
.fd-invitation-creator strong,
.fd-invitation-creator small {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-invitation-plan {
    min-width: 112px;
}

.fd-invitation-plan strong,
.fd-invitation-status strong,
.fd-invitation-usage strong,
.fd-invitation-redeemers strong,
.fd-invitation-time strong,
.fd-invitation-channel-partner strong,
.fd-invitation-creator strong {
    font-weight: 700;
}

.fd-invitation-status {
    justify-items: start;
    min-width: 116px;
}

.fd-invitation-usage {
    min-width: 140px;
}

.fd-invitation-usage__value {
    align-items: baseline;
    display: flex;
    gap: 7px;
}

.fd-invitation-usage__value strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fd-invitation-usage__track {
    background: var(--color-base-200, #e5e7eb);
    border-radius: 999px;
    display: block;
    height: 5px;
    margin-top: 4px;
    overflow: hidden;
    width: 126px;
}

.fd-invitation-usage__track > span {
    background: var(--color-primary-600, #2563eb);
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 0;
}

.fd-invitation-redeemers {
    min-width: 160px;
}

.fd-invitation-redeemers__users {
    display: grid;
    gap: 4px;
}

.fd-invitation-redeemers__users > a {
    color: inherit;
    display: grid;
    text-decoration: none;
}

.fd-invitation-redeemers__users > a:hover strong,
.fd-invitation-redeemers__users > a:focus-visible strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-invitation-redeemers--unknown strong {
    color: #b45309;
}

.fd-invitation-time {
    min-width: 142px;
}

.fd-invitation-time strong,
.fd-invitation-time small {
    white-space: nowrap;
}

.fd-invitation-time--expired strong {
    color: #b45309;
}

.fd-invitation-time--never strong {
    color: #047857;
}

.fd-invitation-creator {
    color: inherit;
    min-width: 140px;
    text-decoration: none;
}

.fd-invitation-channel-partner {
    min-width: 140px;
}

.fd-invitation-channel-partner--missing strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-invitation-creator--link:hover strong,
.fd-invitation-creator--link:focus-visible strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-invitation-creator--missing strong {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-invitation-row--unavailable > td:not(.action-checkbox) {
    background-color: rgb(107 114 128 / 2.5%);
}

.fd-invitation-row--unavailable .fd-invitation-identity__mark {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-subtle-light, #6b7280);
}

[data-fd-list-model="invitationcode"]
    input.action-select:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.fd-invitation-bulk-bar {
    align-items: center;
}

.fd-invitation-native-actions {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.fd-invitation-bulk-copy {
    align-items: center;
    background: var(--color-primary-600, #2563eb);
    border: 1px solid var(--color-primary-600, #2563eb);
    border-radius: var(--fd-radius);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 650;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
}

.fd-invitation-bulk-copy:hover,
.fd-invitation-bulk-copy:focus-visible {
    background: var(--color-primary-700, #1d4ed8);
    border-color: var(--color-primary-700, #1d4ed8);
}

.fd-invitation-bulk-copy:disabled {
    cursor: wait;
    opacity: 0.72;
}

.fd-invitation-bulk-copy .material-symbols-outlined {
    font-size: 18px;
}

.fd-invitation-bulk-copy--link {
    background: rgb(255 255 255 / 9%);
    border-color: rgb(255 255 255 / 42%);
    color: #ffffff;
}

.fd-invitation-bulk-copy--link:hover,
.fd-invitation-bulk-copy--link:focus-visible {
    background: rgb(255 255 255 / 16%);
    border-color: rgb(255 255 255 / 58%);
    color: #ffffff;
}

.fd-invitation-bulk-copy--link:disabled {
    cursor: not-allowed;
}

.fd-invitation-bulk-copy-note {
    align-items: center;
    color: #fde68a;
    display: inline-flex;
    font-size: 12px;
    gap: 5px;
}

.fd-invitation-bulk-copy-note .material-symbols-outlined {
    font-size: 17px;
}

.fd-invitation-identity__title-link:focus-visible,
.fd-invitation-identity__preview:focus-visible,
.fd-invitation-identity__copy:focus-visible,
.fd-invitation-identity__copy-link:focus-visible,
.fd-invitation-redeemers__users > a:focus-visible,
.fd-invitation-creator--link:focus-visible,
.fd-invitation-bulk-copy:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.dark .fd-invitation-identity__mark {
    background: rgb(79 70 229 / 18%);
    color: #a5b4fc;
}

.dark .fd-invitation-identity__preview,
.dark .fd-invitation-identity__copy,
.dark .fd-invitation-identity__copy-link,
.dark .fd-invitation-identity__content > small,
.dark .fd-invitation-plan small,
.dark .fd-invitation-status small,
.dark .fd-invitation-usage small,
.dark .fd-invitation-redeemers small,
.dark .fd-invitation-time small,
.dark .fd-invitation-channel-partner small,
.dark .fd-invitation-creator small {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-invitation-identity__preview:hover,
.dark .fd-invitation-identity__preview:focus-visible,
.dark .fd-invitation-identity__copy:hover,
.dark .fd-invitation-identity__copy:focus-visible,
.dark .fd-invitation-identity__copy-link:hover,
.dark .fd-invitation-identity__copy-link:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-invitation-identity__title-row:hover
    .fd-invitation-identity__copy-link:disabled,
.dark .fd-invitation-identity__title-row:focus-within
    .fd-invitation-identity__copy-link:disabled {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-invitation-usage__track {
    background: var(--color-base-700, #374151);
}

.dark .fd-invitation-row--unavailable .fd-invitation-identity__mark {
    background: var(--color-base-800, #1f2937);
    color: var(--color-font-subtle-dark, #9ca3af);
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="invitationcode"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="invitationcode"] #result_list td::before {
        min-width: 92px;
    }

    .fd-invitation-identity,
    .fd-invitation-redeemers,
    .fd-invitation-channel-partner,
    .fd-invitation-creator {
        max-width: min(100%, 280px);
        min-width: 0;
    }

    .fd-invitation-identity__preview,
    .fd-invitation-identity__copy,
    .fd-invitation-identity__copy-link {
        flex-basis: 44px;
        height: 44px;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }

    .fd-invitation-plan,
    .fd-invitation-status,
    .fd-invitation-usage,
    .fd-invitation-redeemers,
    .fd-invitation-time,
    .fd-invitation-channel-partner {
        min-width: 0;
    }

    .fd-invitation-bulk-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-invitation-bulk-bar > button {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .fd-invitation-bulk-copy-note {
        justify-content: center;
        text-align: center;
    }
}

.fd-invitation-detail {
    color: #111827;
    margin: 0 auto;
    max-width: 1500px;
    padding: 0 0 32px;
}

.fd-invitation-detail__back {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    margin: 0 0 18px;
    text-decoration: none;
}

.fd-invitation-detail__back:hover,
.fd-invitation-detail__back:focus-visible {
    color: #2563eb;
}

.fd-invitation-detail__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-invitation-detail__header,
.fd-invitation-detail__redemptions,
.fd-invitation-detail__note,
.fd-invitation-detail__rail > section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.fd-invitation-detail__header {
    overflow: hidden;
}

.fd-invitation-detail__header-main {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 28px 30px 14px;
}

.fd-invitation-detail__identity {
    align-items: center;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.fd-invitation-detail__icon {
    align-items: center;
    background: #eef4ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 58px;
    height: 58px;
    justify-content: center;
}

.fd-invitation-detail__icon .material-symbols-outlined {
    font-size: 30px;
}

.fd-invitation-detail__title-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-invitation-detail__title-line h1 {
    font-size: 26px;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-invitation-detail__id-row {
    align-items: center;
    color: #64748b;
    display: flex;
    gap: 6px;
    margin-top: 8px;
    min-width: 0;
}

.fd-invitation-detail__id-row code {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-invitation-detail__icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    padding: 0;
}

.fd-invitation-detail__icon-button:hover,
.fd-invitation-detail__icon-button:focus-visible {
    color: #2563eb;
}

.fd-invitation-detail__icon-button .material-symbols-outlined {
    font-size: 18px;
}

.fd-invitation-detail__header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.fd-invitation-detail__header-actions button,
.fd-invitation-edit__actions button {
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 650;
    gap: 7px;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
}

.fd-invitation-detail__header-actions .material-symbols-outlined,
.fd-invitation-edit__actions .material-symbols-outlined {
    font-size: 18px;
}

.fd-invitation-detail__secondary-action {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.fd-invitation-detail__primary-action,
.fd-invitation-edit__actions button[type="submit"] {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
}

.fd-invitation-detail__secondary-action:hover,
.fd-invitation-detail__secondary-action:focus-visible {
    border-color: #94a3b8;
    color: #0f172a;
}

.fd-invitation-detail__primary-action:hover,
.fd-invitation-detail__primary-action:focus-visible,
.fd-invitation-edit__actions button[type="submit"]:hover,
.fd-invitation-edit__actions button[type="submit"]:focus-visible {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.fd-invitation-detail__summary {
    color: #64748b;
    margin: 0;
    padding: 0 30px 24px 104px;
}

.fd-invitation-detail__metrics {
    border-top: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.fd-invitation-detail__metrics > div {
    border-right: 1px solid #e2e8f0;
    min-width: 0;
    padding: 18px 22px;
}

.fd-invitation-detail__metrics > div:last-child {
    border-right: 0;
}

.fd-invitation-detail__metrics dt,
.fd-invitation-detail__rail dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    margin-bottom: 6px;
}

.fd-invitation-detail__metrics dd,
.fd-invitation-detail__rail dd {
    margin: 0;
}

.fd-invitation-detail__metrics dd {
    font-size: 16px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.fd-invitation-detail__metrics small,
.fd-invitation-detail__rail small {
    color: #94a3b8;
    display: block;
    font-size: 12px;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.fd-invitation-detail__workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 330px;
    margin-top: 18px;
}

.fd-invitation-detail__main,
.fd-invitation-detail__rail {
    display: grid;
    gap: 18px;
}

.fd-invitation-detail__redemptions,
.fd-invitation-detail__note,
.fd-invitation-detail__rail > section {
    padding: 22px;
}

.fd-invitation-detail__redemptions > header,
.fd-invitation-detail__note > header {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.fd-invitation-detail h2 {
    font-size: 17px;
    font-weight: 750;
    margin: 0;
}

.fd-invitation-detail__redemptions header p,
.fd-invitation-detail__note header p {
    color: #64748b;
    font-size: 13px;
    margin: 5px 0 0;
}

.fd-invitation-detail__redemption-list {
    border-top: 1px solid #e2e8f0;
    margin-top: 18px;
}

.fd-invitation-detail__redemption-list > a {
    align-items: center;
    color: inherit;
    display: grid;
    gap: 14px;
    grid-template-columns: 42px minmax(0, 1fr) minmax(130px, auto) 22px;
    padding: 16px 4px;
    text-decoration: none;
}

.fd-invitation-detail__redemption-list > a + a {
    border-top: 1px solid #eef2f7;
}

.fd-invitation-detail__redemption-list > a:hover strong,
.fd-invitation-detail__redemption-list > a:focus-visible strong {
    color: #2563eb;
}

.fd-invitation-detail__user-avatar {
    align-items: center;
    background: #dbeafe;
    border-radius: 50%;
    color: #1d4ed8;
    display: flex;
    font-weight: 750;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.fd-invitation-detail__user-copy,
.fd-invitation-detail__redeemed-time {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fd-invitation-detail__user-copy strong,
.fd-invitation-detail__redeemed-time strong {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-invitation-detail__user-copy small,
.fd-invitation-detail__user-copy code,
.fd-invitation-detail__redeemed-time small {
    color: #64748b;
    font-size: 12px;
    margin-top: 3px;
}

.fd-invitation-detail__redeemed-time {
    text-align: right;
}

.fd-invitation-detail__empty {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    display: flex;
    gap: 13px;
    margin-top: 18px;
    padding: 20px;
}

.fd-invitation-detail__empty--attention {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.fd-invitation-detail__empty > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fd-invitation-detail__empty strong {
    color: #334155;
}

.fd-invitation-detail__empty--attention strong {
    color: #78350f;
}

.fd-invitation-detail__note > p {
    background: #f8fafc;
    border-left: 3px solid #93c5fd;
    color: #334155;
    line-height: 1.7;
    margin: 18px 0 0;
    min-height: 52px;
    overflow-wrap: anywhere;
    padding: 13px 15px;
}

.fd-invitation-detail__rail > section > header {
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 5px;
    padding-bottom: 13px;
}

.fd-invitation-detail__rail dl {
    margin: 0;
}

.fd-invitation-detail__rail dl > div {
    border-bottom: 1px solid #eef2f7;
    padding: 14px 0;
}

.fd-invitation-detail__rail dl > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fd-invitation-detail__rail dd {
    font-size: 14px;
}

.fd-invitation-detail__rail dd code {
    overflow-wrap: anywhere;
}

.fd-invitation-detail__rule {
    align-items: flex-start;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af;
    display: flex;
    gap: 12px;
}

.fd-invitation-detail__rule > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fd-invitation-detail__rule small {
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

.fd-invitation-edit[hidden] {
    display: none;
}

.fd-invitation-edit {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1000;
}

.fd-invitation-edit__backdrop {
    background: rgba(15, 23, 42, 0.56);
    border: 0;
    inset: 0;
    padding: 0;
    position: absolute;
}

.fd-invitation-edit__dialog {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
    max-height: calc(100vh - 48px);
    max-width: 640px;
    overflow: auto;
    position: relative;
    width: 100%;
}

.fd-invitation-edit__header {
    align-items: flex-start;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 22px 24px 18px;
}

.fd-invitation-edit__header > div > span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 750;
}

.fd-invitation-edit__header h2 {
    font-size: 20px;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.fd-invitation-edit__header p {
    color: #64748b;
    font-size: 13px;
    margin: 6px 0 0;
}

.fd-invitation-edit__close {
    align-items: center;
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    display: flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
}

.fd-invitation-edit__close:hover,
.fd-invitation-edit__close:focus-visible {
    color: #0f172a;
}

.fd-invitation-edit__form {
    display: grid;
    gap: 20px;
    padding: 22px 24px 24px;
}

.fd-invitation-edit__feedback {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 13px;
    padding: 11px 13px;
}

.fd-invitation-edit__field {
    display: grid;
    gap: 8px;
}

.fd-invitation-edit__field > label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.fd-invitation-edit__field select,
.fd-invitation-edit__field input[type="datetime-local"],
.fd-invitation-edit__field textarea {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    font-size: 14px;
    min-height: 42px;
    padding: 9px 11px;
    width: 100%;
}

.fd-invitation-edit__field textarea {
    min-height: 104px;
    resize: vertical;
}

.fd-invitation-edit__field select:focus,
.fd-invitation-edit__field input:focus,
.fd-invitation-edit__field textarea:focus {
    border-color: #2563eb;
    outline: 2px solid rgba(37, 99, 235, 0.14);
}

.fd-invitation-edit__field.is-invalid select,
.fd-invitation-edit__field.is-invalid input,
.fd-invitation-edit__field.is-invalid textarea {
    border-color: #dc2626;
}

.fd-invitation-edit__error {
    color: #b91c1c;
    min-height: 16px;
}

.fd-invitation-edit__expiry-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.fd-invitation-edit__expiry-shortcuts button {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    min-height: 30px;
    padding: 0 10px;
}

.fd-invitation-edit__expiry-shortcuts button:hover,
.fd-invitation-edit__expiry-shortcuts button:focus-visible {
    border-color: #2563eb;
    color: #2563eb;
}

.fd-invitation-edit__locked-value {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px;
}

.fd-invitation-edit__locked-value span {
    font-size: 14px;
    font-weight: 650;
}

.fd-invitation-edit__locked-value small,
.fd-invitation-edit__field-meta {
    color: #64748b;
    font-size: 12px;
}

.fd-invitation-edit__field-meta {
    display: flex;
    justify-content: space-between;
}

.fd-invitation-edit__actions {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: 2px -24px -24px;
    padding: 18px 24px;
}

.fd-invitation-edit__actions button[type="button"] {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.fd-invitation-edit__actions button:disabled {
    cursor: wait;
    opacity: 0.62;
}

.fd-invitation-action-controls {
    position: relative;
}

.fd-invitation-action-controls__notice {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
    max-width: 280px;
}

.fd-invitation-action-controls__notice .material-symbols-outlined {
    flex: 0 0 auto;
}

.fd-invitation-action-menu {
    position: relative;
}

.fd-invitation-action-menu__popover {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.16);
    display: grid;
    gap: 4px;
    min-width: 310px;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 80;
}

.fd-invitation-action-menu__popover[hidden] {
    display: none;
}

.fd-invitation-action-menu__item {
    align-items: flex-start !important;
    background: transparent;
    border: 0;
    border-radius: 6px !important;
    color: #334155;
    display: flex !important;
    gap: 11px !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding: 11px 12px !important;
    text-align: left;
    width: 100%;
}

.fd-invitation-action-menu__item:hover,
.fd-invitation-action-menu__item:focus-visible {
    background: #f8fafc;
}

.fd-invitation-action-menu__item:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.fd-invitation-action-menu__item > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fd-invitation-action-menu__item strong {
    font-size: 13px;
}

.fd-invitation-action-menu__item small {
    color: #64748b;
    font-size: 12px;
    font-weight: 450;
    line-height: 1.45;
    white-space: normal;
}

.fd-invitation-action-menu__item--success > .material-symbols-outlined {
    color: #15803d;
}

.fd-invitation-action-menu__item--warning > .material-symbols-outlined {
    color: #b45309;
}

.fd-invitation-action-menu__item--danger {
    color: #b91c1c;
}

.fd-invitation-action-menu__item--danger:hover,
.fd-invitation-action-menu__item--danger:focus-visible {
    background: #fef2f2;
}

.fd-invitation-action-noscript {
    background: #fff;
    border: 1px solid #dbe3ee;
    display: grid;
    gap: 16px;
    margin-top: 12px;
    padding: 16px;
}

.fd-invitation-action-noscript form {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: 8px;
    padding-top: 14px;
}

.fd-invitation-action-noscript textarea {
    border: 1px solid #cbd5e1;
    min-height: 78px;
    width: 100%;
}

.fd-invitation-action-noscript__confirm {
    align-items: flex-start;
    display: flex;
    gap: 8px;
}

.fd-invitation-action-dialog[hidden] {
    display: none;
}

.fd-invitation-action-dialog {
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 1020;
}

.fd-invitation-action-dialog__backdrop {
    background: rgba(15, 23, 42, 0.58);
    border: 0;
    inset: 0;
    padding: 0;
    position: absolute;
}

.fd-invitation-action-dialog__panel {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    max-height: calc(100vh - 48px);
    max-width: 660px;
    overflow: auto;
    position: relative;
    width: 100%;
}

.fd-invitation-action-dialog__header {
    align-items: flex-start;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 22px 24px 18px;
}

.fd-invitation-action-dialog__header > div > span {
    color: #b45309;
    font-size: 12px;
    font-weight: 750;
}

.fd-invitation-action-dialog__header h2 {
    font-size: 20px;
    margin: 4px 0 0;
}

.fd-invitation-action-dialog__header p {
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
    margin: 6px 0 0;
}

.fd-invitation-action-dialog__close {
    align-items: center;
    background: transparent;
    border: 0;
    color: #64748b;
    cursor: pointer;
    display: flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
}

.fd-invitation-action-dialog__impact {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 16px 24px;
}

.fd-invitation-action-dialog__impact > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fd-invitation-action-dialog__impact > div:last-child {
    text-align: right;
}

.fd-invitation-action-dialog__impact span {
    color: #64748b;
    font-size: 12px;
}

.fd-invitation-action-dialog__impact strong {
    font-size: 15px;
}

.fd-invitation-action-dialog__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 18px 24px 4px;
}

.fd-invitation-action-dialog__summary > div {
    border-bottom: 1px solid #eef2f7;
    min-width: 0;
    padding: 10px 0;
}

.fd-invitation-action-dialog__summary > div:nth-child(odd) {
    padding-right: 16px;
}

.fd-invitation-action-dialog__summary dt {
    color: #64748b;
    font-size: 12px;
}

.fd-invitation-action-dialog__summary dd {
    font-size: 14px;
    font-weight: 650;
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

.fd-invitation-action-dialog__form {
    display: grid;
    gap: 16px;
    padding: 18px 24px 24px;
}

.fd-invitation-action-dialog__feedback {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #b91c1c;
    font-size: 13px;
    padding: 11px 13px;
}

.fd-invitation-action-dialog__field {
    display: grid;
    gap: 7px;
}

.fd-invitation-action-dialog__field > label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.fd-invitation-action-dialog__field textarea {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    min-height: 92px;
    padding: 10px 11px;
    resize: vertical;
    width: 100%;
}

.fd-invitation-action-dialog__field textarea:focus {
    border-color: #2563eb;
    outline: 2px solid rgba(37, 99, 235, 0.14);
}

.fd-invitation-action-dialog__field > small {
    color: #64748b;
    font-size: 12px;
}

.fd-invitation-action-dialog__error {
    color: #b91c1c !important;
    min-height: 16px;
}

.fd-invitation-action-dialog__delete-confirm {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 6px;
    padding: 12px 13px;
}

.fd-invitation-action-dialog__delete-confirm label {
    align-items: flex-start;
    color: #9a3412;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 650;
    gap: 9px;
}

.fd-invitation-action-dialog__delete-confirm input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.fd-invitation-action-dialog__actions {
    align-items: center;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: 2px -24px -24px;
    padding: 18px 24px;
}

.fd-invitation-action-dialog__actions button {
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 650;
    gap: 7px;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
}

.fd-invitation-action-dialog__actions button[type="button"] {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.fd-invitation-action-dialog__actions button[type="submit"] {
    background: #b45309;
    border: 1px solid #b45309;
    color: #fff;
}

.fd-invitation-action-dialog__actions button[type="submit"].is-danger {
    background: #b91c1c;
    border-color: #b91c1c;
}

.fd-invitation-action-dialog__actions button:disabled {
    cursor: wait;
    opacity: 0.62;
}

.fd-invitation-detail__toast {
    background: #0f172a;
    border-radius: 6px;
    bottom: 24px;
    color: #fff;
    font-size: 13px;
    left: 50%;
    max-width: min(420px, calc(100vw - 32px));
    padding: 11px 16px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1100;
}

.fd-dialog-open {
    overflow: hidden;
}

.dark .fd-invitation-detail {
    color: #f8fafc;
}

.dark .fd-invitation-detail__header,
.dark .fd-invitation-detail__redemptions,
.dark .fd-invitation-detail__note,
.dark .fd-invitation-detail__rail > section,
.dark .fd-invitation-edit__dialog,
.dark .fd-invitation-action-menu__popover,
.dark .fd-invitation-action-dialog__panel,
.dark .fd-invitation-action-noscript {
    background: #111827;
    border-color: #374151;
}

.dark .fd-invitation-detail__metrics,
.dark .fd-invitation-detail__metrics > div,
.dark .fd-invitation-detail__redemption-list,
.dark .fd-invitation-detail__redemption-list > a + a,
.dark .fd-invitation-detail__rail > section > header,
.dark .fd-invitation-detail__rail dl > div,
.dark .fd-invitation-edit__header,
.dark .fd-invitation-edit__actions,
.dark .fd-invitation-action-dialog__header,
.dark .fd-invitation-action-dialog__impact,
.dark .fd-invitation-action-dialog__summary > div,
.dark .fd-invitation-action-dialog__actions,
.dark .fd-invitation-action-noscript form {
    border-color: #374151;
}

.dark .fd-invitation-detail__secondary-action,
.dark .fd-invitation-edit__actions button[type="button"],
.dark .fd-invitation-edit__field select,
.dark .fd-invitation-edit__field input[type="datetime-local"],
.dark .fd-invitation-edit__field textarea,
.dark .fd-invitation-action-dialog__actions button[type="button"],
.dark .fd-invitation-action-dialog__field textarea {
    background: #111827;
    border-color: #4b5563;
    color: #f8fafc;
}

.dark .fd-invitation-detail__note > p,
.dark .fd-invitation-detail__empty,
.dark .fd-invitation-edit__locked-value,
.dark .fd-invitation-edit__expiry-shortcuts button,
.dark .fd-invitation-action-dialog__impact,
.dark .fd-invitation-action-menu__item:hover,
.dark .fd-invitation-action-menu__item:focus-visible {
    background: #1f2937;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark .fd-invitation-detail__empty strong,
.dark .fd-invitation-edit__field > label,
.dark .fd-invitation-action-dialog__field > label,
.dark .fd-invitation-action-dialog__summary dd {
    color: #f3f4f6;
}

.dark .fd-invitation-action-menu__item {
    color: #e5e7eb;
}

.dark .fd-invitation-action-menu__item--danger:hover,
.dark .fd-invitation-action-menu__item--danger:focus-visible,
.dark .fd-invitation-action-dialog__delete-confirm {
    background: #431407;
    border-color: #9a3412;
}

.dark .fd-invitation-action-dialog__delete-confirm label {
    color: #fed7aa;
}

.dark .fd-invitation-detail__rule {
    background: #172554 !important;
    border-color: #1e40af !important;
}

.dark .fd-invitation-detail__rule small {
    color: #cbd5e1;
}

@media screen and (max-width: 1023px) {
    .fd-invitation-detail__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-invitation-detail__rail {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .fd-invitation-detail__header-main {
        flex-direction: column;
        padding: 22px 18px 12px;
    }

    .fd-invitation-detail__header-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
    }

    .fd-invitation-detail__header-actions:has(> :only-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-invitation-action-controls,
    .fd-invitation-action-menu,
    .fd-invitation-action-menu > button {
        width: 100%;
    }

    .fd-invitation-action-menu__popover {
        left: 0;
        min-width: 0;
        right: auto;
        width: min(340px, calc(100vw - 36px));
    }

    .fd-invitation-detail__summary {
        padding: 0 18px 20px;
    }

    .fd-invitation-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-invitation-detail__metrics > div:nth-child(2) {
        border-right: 0;
    }

    .fd-invitation-detail__metrics > div:nth-child(-n + 2) {
        border-bottom: 1px solid #e2e8f0;
    }

    .fd-invitation-detail__rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-invitation-detail__redemptions,
    .fd-invitation-detail__note,
    .fd-invitation-detail__rail > section {
        padding: 18px;
    }

    .fd-invitation-detail__redemption-list > a {
        grid-template-columns: 42px minmax(0, 1fr) 20px;
    }

    .fd-invitation-detail__redeemed-time {
        grid-column: 2 / 3;
        text-align: left;
    }

    .fd-invitation-edit {
        align-items: flex-end;
        padding: 0;
    }

    .fd-invitation-edit__dialog {
        border-bottom: 0;
        border-left: 0;
        border-radius: 8px 8px 0 0;
        border-right: 0;
        max-height: 92vh;
        max-width: none;
    }

    .fd-invitation-edit__header,
    .fd-invitation-edit__form {
        padding-left: 18px;
        padding-right: 18px;
    }

    .fd-invitation-edit__actions {
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .fd-invitation-edit__actions button {
        flex: 1 1 0;
    }

    .fd-invitation-action-dialog {
        align-items: flex-end;
        padding: 0;
    }

    .fd-invitation-action-dialog__panel {
        border-bottom: 0;
        border-left: 0;
        border-radius: 8px 8px 0 0;
        border-right: 0;
        max-height: 94vh;
        max-width: none;
    }

    .fd-invitation-action-dialog__header,
    .fd-invitation-action-dialog__impact,
    .fd-invitation-action-dialog__summary,
    .fd-invitation-action-dialog__form {
        padding-left: 18px;
        padding-right: 18px;
    }

    .fd-invitation-action-dialog__summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-invitation-action-dialog__summary > div:nth-child(odd) {
        padding-right: 0;
    }

    .fd-invitation-action-dialog__actions {
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .fd-invitation-action-dialog__actions button {
        flex: 1 1 0;
    }
}

/* Platform template HTML translation batches. */
.fd-template-list-intro__actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--fd-space-2);
}

.fd-template-list-history {
    align-items: center;
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-important-light, #111827);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: var(--fd-space-2);
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--fd-space-3);
    white-space: nowrap;
}

.fd-template-list-history:hover,
.fd-template-list-history:focus-visible {
    background: var(--color-base-100, #f3f4f6);
}

.fd-template-list-history .material-symbols-outlined {
    font-size: 18px;
}

.fd-template-html-bulk-bar {
    gap: var(--fd-space-2);
}

.fd-template-html-bulk-bar__summary {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-template-html-bulk-bar__summary .material-symbols-outlined {
    font-size: 20px;
}

.fd-template-html-bulk-bar__summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-template-html-bulk-bar > button {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 650;
    gap: 6px;
    justify-content: center;
}

.fd-template-html-bulk-bar > button .material-symbols-outlined {
    font-size: 18px;
}

.fd-template-html-bulk-bar > .fd-template-html-bulk-bar__primary {
    background: white;
    border-color: white;
    color: var(--color-base-900, #111827);
}

.fd-template-html-bulk-bar > .fd-template-html-bulk-bar__primary:hover {
    background: var(--color-base-100, #f3f4f6);
}

.fd-template-html-bulk-bar__clear {
    color: white;
}

.fd-template-html-dialog {
    background: white;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 24px 64px rgb(15 23 42 / 24%);
    color: var(--color-font-default-light, #374151);
    margin: auto;
    max-height: min(86vh, 820px);
    max-width: min(760px, calc(100vw - 32px));
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.fd-template-html-progress-dialog {
    max-width: min(820px, calc(100vw - 32px));
}

.fd-template-html-dialog::backdrop {
    background: rgb(15 23 42 / 54%);
    backdrop-filter: blur(2px);
}

.fd-template-html-dialog__header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: var(--fd-space-3);
    justify-content: space-between;
    padding: 20px 22px 18px;
}

.fd-template-html-dialog__header > div {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.fd-template-html-dialog__header > div > .material-symbols-outlined {
    align-items: center;
    background: #eff6ff;
    border-radius: 7px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 38px;
    font-size: 21px;
    height: 38px;
    justify-content: center;
}

.fd-template-html-dialog__header h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.fd-template-html-dialog__header p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 4px 0 0;
}

.fd-template-html-dialog__header > button {
    align-items: center;
    border: 0;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
}

.fd-template-html-dialog__header > button:hover {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-important-light, #111827);
}

.fd-template-html-dialog__header > button .material-symbols-outlined {
    font-size: 20px;
}

.fd-template-html-dialog__body {
    max-height: calc(min(86vh, 820px) - 150px);
    overflow: auto;
    padding: 20px 22px;
}

.fd-template-html-dialog__loading {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 180px;
}

.fd-template-html-dialog__loading .material-symbols-outlined {
    animation: fd-template-html-spin 900ms linear infinite;
    color: #2563eb;
    font-size: 22px;
}

@keyframes fd-template-html-spin {
    to {
        transform: rotate(360deg);
    }
}

.fd-template-html-dialog__metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 20px;
}

.fd-template-html-dialog__metrics > div {
    background: var(--color-base-50, #f8fafc);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 12px 14px;
}

.fd-template-html-dialog__metrics dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
}

.fd-template-html-dialog__metrics dd {
    color: var(--color-font-important-light, #111827);
    font-size: 1.25rem;
    font-weight: 750;
    margin: 0;
}

.fd-template-html-dialog__modes {
    border: 0;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.fd-template-html-dialog__modes legend {
    color: var(--color-font-important-light, #111827);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.fd-template-html-dialog__modes label {
    align-items: center;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: 18px 24px minmax(0, 1fr);
    min-height: 72px;
    padding: 13px 15px;
}

.fd-template-html-dialog__modes label:has(input:checked) {
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 1px rgb(37 99 235 / 10%);
}

.fd-template-html-dialog__modes input {
    accent-color: #2563eb;
    height: 17px;
    margin: 0;
    width: 17px;
}

.fd-template-html-dialog__modes label > .material-symbols-outlined {
    color: #64748b;
    font-size: 22px;
}

.fd-template-html-dialog__modes label:has(input:checked) > .material-symbols-outlined {
    color: #2563eb;
}

.fd-template-html-dialog__modes label > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-template-html-dialog__modes strong {
    color: var(--color-font-important-light, #111827);
    font-size: 0.875rem;
}

.fd-template-html-dialog__modes small {
    color: var(--color-font-subtle-light, #6b7280);
    line-height: 1.45;
}

.fd-template-html-dialog__warning {
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 7px;
    color: #92400e;
    display: flex;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
}

.fd-template-html-dialog__warning .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 19px;
    margin-top: 1px;
}

.fd-template-html-dialog__warning p {
    font-size: 0.8125rem;
    line-height: 1.55;
    margin: 0;
}

.fd-template-html-dialog__reasons {
    background: var(--color-base-50, #f8fafc);
    border-left: 3px solid var(--color-base-300, #d1d5db);
    margin-top: 14px;
    padding: 10px 12px;
}

.fd-template-html-dialog__reasons strong {
    color: var(--color-font-important-light, #111827);
    font-size: 0.8125rem;
}

.fd-template-html-dialog__reasons ul {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.8125rem;
    margin: 5px 0 0;
    padding-left: 18px;
}

.fd-template-html-dialog__error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    color: #b91c1c;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 14px 0 0;
    padding: 10px 12px;
}

.fd-template-html-dialog__actions {
    align-items: center;
    background: var(--color-base-50, #f8fafc);
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 22px;
}

.fd-template-html-dialog__actions button {
    align-items: center;
    background: white;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 6px;
    color: var(--color-font-important-light, #111827);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 650;
    gap: 6px;
    justify-content: center;
    min-height: 40px;
    padding: 0 15px;
}

.fd-template-html-dialog__actions button:hover:not(:disabled) {
    background: var(--color-base-100, #f3f4f6);
}

.fd-template-html-dialog__actions button.is-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.fd-template-html-dialog__actions button.is-primary:hover:not(:disabled) {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.fd-template-html-dialog__actions button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.fd-template-html-dialog__actions .material-symbols-outlined {
    font-size: 18px;
}

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

.fd-template-html-progress__summary > div {
    background: var(--color-base-50, #f8fafc);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    display: grid;
    gap: 3px;
    padding: 10px 12px;
}

.fd-template-html-progress__summary span {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
}

.fd-template-html-progress__summary strong {
    color: var(--color-font-important-light, #111827);
    font-size: 1.125rem;
}

.fd-template-html-progress__summary [data-tone="success"] strong {
    color: #15803d;
}

.fd-template-html-progress__summary [data-tone="danger"] strong {
    color: #b91c1c;
}

.fd-template-html-progress__bar {
    background: var(--color-base-200, #e5e7eb);
    border-radius: 4px;
    height: 6px;
    margin: 16px 0;
    overflow: hidden;
}

.fd-template-html-progress__bar > span {
    background: #2563eb;
    display: block;
    height: 100%;
    transition: width 220ms ease;
    width: 0;
}

.fd-template-html-progress__tasks {
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    max-height: 330px;
    overflow: auto;
}

.fd-template-html-progress__tasks article {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 58px;
    padding: 10px 13px;
}

.fd-template-html-progress__tasks article + article {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-template-html-progress__tasks article > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-template-html-progress__tasks article strong {
    color: var(--color-font-important-light, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-template-html-progress__tasks article small {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-template-html-progress__tasks article > span {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 5px;
    color: var(--color-font-default-light, #374151);
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 650;
    padding: 5px 8px;
}

.fd-template-html-progress__tasks article[data-status="succeeded"] > span {
    background: #ecfdf5;
    color: #047857;
}

.fd-template-html-progress__tasks article[data-status="failed"] > span {
    background: #fef2f2;
    color: #b91c1c;
}

.fd-template-html-progress__tasks article[data-status="running"] > span,
.fd-template-html-progress__tasks article[data-status="retrying"] > span {
    background: #eff6ff;
    color: #1d4ed8;
}

.fd-template-html-progress__empty {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 0;
    padding: 36px 20px;
    text-align: center;
}

.fd-template-html-history__list {
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    max-height: 430px;
    overflow: auto;
}

.fd-template-html-history__list > button {
    align-items: center;
    background: white;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    min-height: 66px;
    padding: 11px 14px;
    text-align: left;
    width: 100%;
}

.fd-template-html-history__list > button + button {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-template-html-history__list > button:hover {
    background: var(--color-base-50, #f8fafc);
}

.fd-template-html-history__list > button > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-template-html-history__list strong {
    color: var(--color-font-important-light, #111827);
}

.fd-template-html-history__list small {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-template-html-history__list em {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 5px;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 650;
    padding: 5px 8px;
}

.fd-template-html-history__list em[data-status="succeeded"] {
    background: #ecfdf5;
    color: #047857;
}

.fd-template-html-history__list em[data-status="failed"],
.fd-template-html-history__list em[data-status="partial_failed"] {
    background: #fef2f2;
    color: #b91c1c;
}

.fd-template-html-dialog button:focus-visible,
.fd-template-list-history:focus-visible,
.fd-template-html-bulk-bar button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.dark .fd-template-list-history,
.dark .fd-template-html-dialog,
.dark .fd-template-html-dialog__actions,
.dark .fd-template-html-history__list > button {
    background: #111827;
    color: #d1d5db;
}

.dark .fd-template-list-history,
.dark .fd-template-html-dialog,
.dark .fd-template-html-dialog__header,
.dark .fd-template-html-dialog__actions,
.dark .fd-template-html-dialog__metrics > div,
.dark .fd-template-html-dialog__modes label,
.dark .fd-template-html-progress__summary > div,
.dark .fd-template-html-progress__tasks,
.dark .fd-template-html-progress__tasks article + article,
.dark .fd-template-html-history__list,
.dark .fd-template-html-history__list > button + button {
    border-color: #334155;
}

.dark .fd-template-html-dialog__metrics > div,
.dark .fd-template-html-progress__summary > div,
.dark .fd-template-html-dialog__reasons,
.dark .fd-template-html-progress__tasks article > span,
.dark .fd-template-html-history__list em {
    background: #1e293b;
}

.dark .fd-template-html-dialog__header h2,
.dark .fd-template-html-dialog__metrics dd,
.dark .fd-template-html-dialog__modes legend,
.dark .fd-template-html-dialog__modes strong,
.dark .fd-template-html-dialog__reasons strong,
.dark .fd-template-html-progress__summary strong,
.dark .fd-template-html-progress__tasks article strong,
.dark .fd-template-html-history__list strong,
.dark .fd-template-html-dialog__actions button {
    color: #f8fafc;
}

.dark .fd-template-html-dialog__modes label:has(input:checked) {
    background: #172c52;
    border-color: #3b82f6;
}

.dark .fd-template-html-dialog__actions button {
    background: #1e293b;
    border-color: #475569;
}

.dark .fd-template-html-dialog__actions button.is-primary {
    background: #2563eb;
    border-color: #2563eb;
}

.dark .fd-template-html-history__list > button:hover,
.dark .fd-template-list-history:hover {
    background: #1e293b;
}

@media screen and (max-width: 767px) {
    .fd-template-list-intro {
        align-items: stretch;
    }

    .fd-template-list-intro__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .fd-template-list-history,
    .fd-template-list-intro__actions .fd-user-list-refresh {
        justify-content: center;
        width: 100%;
    }

    .fd-template-html-bulk-bar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .fd-template-html-bulk-bar__summary {
        flex-basis: 100%;
    }

    .fd-template-html-bulk-bar > button {
        flex: 1 1 0;
    }

    .fd-template-html-dialog {
        border-bottom: 0;
        border-left: 0;
        border-radius: 8px 8px 0 0;
        border-right: 0;
        margin: auto 0 0;
        max-height: 92vh;
        max-width: none;
        width: 100%;
    }

    .fd-template-html-dialog__header,
    .fd-template-html-dialog__body,
    .fd-template-html-dialog__actions {
        padding-left: 17px;
        padding-right: 17px;
    }

    .fd-template-html-dialog__body {
        max-height: calc(92vh - 150px);
    }

    .fd-template-html-dialog__metrics,
    .fd-template-html-progress__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-template-html-dialog__modes label {
        grid-template-columns: 18px 22px minmax(0, 1fr);
        padding: 12px;
    }

    .fd-template-html-dialog__actions button {
        flex: 1 1 0;
    }
}

/* Email Campaign changelist semantic columns. */
.fd-email-campaign-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 250px;
}

.fd-email-campaign-identity__mark {
    align-items: center;
    background: #ecfeff;
    border: 1px solid #cffafe;
    border-radius: var(--fd-radius);
    color: #0e7490;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-email-campaign-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-email-campaign-identity__copy,
.fd-email-campaign-channel,
.fd-email-campaign-status,
.fd-email-campaign-failed,
.fd-email-campaign-creator {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-email-campaign-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-email-campaign-identity__title-link,
.fd-email-campaign-identity__copy > strong,
.fd-email-campaign-channel strong,
.fd-email-campaign-failed strong,
.fd-email-campaign-creator strong {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 280px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-campaign-identity__title-link:hover,
.fd-email-campaign-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-campaign-identity__preview {
    align-items: center;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-email-campaign-identity__title-row:hover
    .fd-email-campaign-identity__preview,
.fd-email-campaign-identity__title-row:focus-within
    .fd-email-campaign-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-email-campaign-identity__preview:hover,
.fd-email-campaign-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-campaign-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-campaign-identity__copy small,
.fd-email-campaign-channel small,
.fd-email-campaign-status small,
.fd-email-campaign-failed small,
.fd-email-campaign-creator small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-campaign-channel {
    min-width: 128px;
}

.fd-email-campaign-channel--missing strong,
.fd-email-campaign-creator--missing strong,
.fd-email-campaign-failed--active strong {
    color: var(--fd-danger, #dc2626);
}

.fd-email-campaign-status {
    justify-items: start;
    min-width: 90px;
}

.fd-email-campaign-progress {
    display: grid;
    gap: 7px;
    min-width: 132px;
}

.fd-email-campaign-progress__value {
    align-items: baseline;
    display: flex;
    gap: 7px;
}

.fd-email-campaign-progress__value strong,
.fd-email-campaign-failed strong {
    font-variant-numeric: tabular-nums;
}

.fd-email-campaign-progress__value small {
    color: var(--color-font-subtle-light, #6b7280);
    white-space: nowrap;
}

.fd-email-campaign-progress__track {
    background: var(--color-base-200, #e5e7eb);
    border-radius: 999px;
    display: block;
    height: 6px;
    overflow: hidden;
    width: 124px;
}

.fd-email-campaign-progress__track > span {
    background: #0891b2;
    border-radius: inherit;
    display: block;
    height: 100%;
    min-width: 0;
}

.fd-email-campaign-failed {
    min-width: 72px;
}

.fd-email-campaign-creator {
    min-width: 128px;
}

.fd-email-campaign-identity__title-link:focus-visible,
.fd-email-campaign-identity__preview:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.dark .fd-email-campaign-identity__mark {
    background: rgb(8 145 178 / 18%);
    border-color: rgb(103 232 249 / 24%);
    color: #67e8f9;
}

.dark .fd-email-campaign-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-campaign-identity__preview:hover,
.dark .fd-email-campaign-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-email-campaign-identity__copy small,
.dark .fd-email-campaign-channel small,
.dark .fd-email-campaign-status small,
.dark .fd-email-campaign-progress__value small,
.dark .fd-email-campaign-failed small,
.dark .fd-email-campaign-creator small {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-campaign-progress__track {
    background: var(--color-base-700, #374151);
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="emailcampaign"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="emailcampaign"] #result_list td::before {
        min-width: 92px;
    }

    .fd-email-campaign-identity,
    .fd-email-campaign-channel,
    .fd-email-campaign-creator {
        max-width: min(100%, 280px);
        min-width: 0;
    }

    .fd-email-campaign-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }

    .fd-email-campaign-progress {
        min-width: 0;
        width: min(100%, 240px);
    }

    .fd-email-campaign-progress__track {
        max-width: 100%;
        width: 100%;
    }
}

/* Email send changelist semantic columns. */
.fd-email-send-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 250px;
}

.fd-email-send-identity__mark {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--fd-radius);
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-email-send-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-email-send-identity__copy,
.fd-email-send-recipient,
.fd-email-send-type,
.fd-email-send-campaign,
.fd-email-send-status {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-email-send-identity__title-row {
    align-items: center;
    display: flex;
    gap: 4px;
    min-width: 0;
}

.fd-email-send-identity__title-link,
.fd-email-send-identity__copy > strong,
.fd-email-send-recipient strong,
.fd-email-send-campaign strong,
.fd-email-send-campaign > a {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 280px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-send-identity__title-link:hover,
.fd-email-send-identity__title-link:focus-visible,
.fd-email-send-campaign > a:hover,
.fd-email-send-campaign > a:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-send-identity__preview {
    align-items: center;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-2px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-email-send-identity__title-row:hover .fd-email-send-identity__preview,
.fd-email-send-identity__title-row:focus-within
    .fd-email-send-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
}

.fd-email-send-identity__preview:hover,
.fd-email-send-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-send-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-send-identity__copy small,
.fd-email-send-recipient small,
.fd-email-send-type small,
.fd-email-send-campaign small,
.fd-email-send-status small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-send-recipient {
    min-width: 160px;
}

.fd-email-send-recipient--missing strong,
.fd-email-send-campaign--missing strong {
    color: var(--fd-danger, #dc2626);
}

.fd-email-send-type {
    justify-items: start;
    min-width: 110px;
}

.fd-email-send-campaign {
    min-width: 170px;
}

.fd-email-send-campaign--empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-email-send-status {
    justify-items: start;
    min-width: 170px;
}

/* Email subscriber changelist semantic columns. */
.fd-subscriber-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 250px;
}

.fd-subscriber-identity__mark {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    border-radius: var(--fd-radius);
    color: #059669;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-subscriber-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-subscriber-identity__copy,
.fd-subscriber-owner,
.fd-subscriber-channels {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-subscriber-identity__title-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.fd-subscriber-identity__title-link {
    color: inherit;
    font-weight: 700;
    max-width: 280px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscriber-identity__title-link:hover,
.fd-subscriber-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscriber-identity__preview {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-4px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-subscriber-identity:hover .fd-subscriber-identity__preview,
.fd-subscriber-identity:focus-within .fd-subscriber-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

.fd-subscriber-identity__preview:hover,
.fd-subscriber-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-subscriber-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-subscriber-identity__copy strong,
.fd-subscriber-owner strong,
.fd-subscriber-owner__link {
    color: inherit;
    display: block;
    font-weight: 700;
    max-width: 280px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscriber-owner__link:hover strong,
.fd-subscriber-owner__link:focus-visible strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscriber-owner__link:focus-visible,
.fd-subscriber-channel-chip:focus-visible,
.fd-subscriber-actions__link:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-subscriber-identity__copy small,
.fd-subscriber-owner small,
.fd-subscriber-channels small {
    color: var(--color-font-subtle-light, #6b7280);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscriber-identity--missing strong,
.fd-subscriber-owner--missing strong,
.fd-subscriber-channels--missing strong {
    color: var(--fd-danger, #dc2626);
}

.fd-subscriber-owner {
    min-width: 180px;
}

.fd-subscriber-owner--guest,
.fd-subscriber-owner--restricted,
.fd-subscriber-channels--empty,
.fd-subscriber-channels--restricted {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-subscriber-channels {
    min-width: 190px;
}

.fd-subscriber-channels__chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.fd-subscriber-channel-chip {
    background: var(--color-base-100, #f3f4f6);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 999px;
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
    max-width: 150px;
    overflow: hidden;
    padding: 4px 8px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscriber-channel-chip:hover,
.fd-subscriber-channel-chip:focus-visible {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.fd-subscriber-channel-chip--missing {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.fd-subscriber-channel-chip--more {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-subscriber-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    min-width: 190px;
}

.fd-subscriber-actions__link {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 650;
    gap: 5px;
    min-height: 34px;
    padding: 0 9px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-subscriber-actions__link:hover,
.fd-subscriber-actions__link:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscriber-actions__link .material-symbols-outlined {
    font-size: 17px;
}

.fd-subscriber-actions--empty {
    color: var(--color-font-subtle-light, #6b7280);
    min-width: 0;
}

[data-fd-list-model="subscriber"] .fd-user-time > span {
    white-space: nowrap;
}

/* Email channel changelist semantic columns. */
.fd-email-channel-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 210px;
}

.fd-email-channel-identity__mark {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--fd-radius);
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-email-channel-identity.is-inactive
    .fd-email-channel-identity__mark {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-200, #e5e7eb);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-email-channel-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-email-channel-identity__copy,
.fd-email-channel-status,
.fd-email-channel-order {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-email-channel-identity__title-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.fd-email-channel-identity__title-link {
    color: inherit;
    font-weight: 700;
    max-width: 220px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-channel-identity__title-link:hover,
.fd-email-channel-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-channel-identity__preview {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-4px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-email-channel-identity:hover .fd-email-channel-identity__preview,
.fd-email-channel-identity:focus-within .fd-email-channel-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

.fd-email-channel-identity__preview:hover,
.fd-email-channel-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-email-channel-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-channel-identity__copy small,
.fd-email-channel-status small,
.fd-email-channel-order small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-channel-key {
    background: var(--color-base-100, #f3f4f6);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-block;
    font-size: 0.8125rem;
    max-width: 180px;
    overflow: hidden;
    padding: 5px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-channel-key.is-missing,
.fd-email-channel-description.is-empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-email-channel-key.is-missing {
    font-family: inherit;
}

.fd-email-channel-description {
    display: -webkit-box;
    line-height: 1.45;
    max-width: 330px;
    min-width: 190px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fd-email-channel-status {
    justify-items: start;
    min-width: 150px;
}

.fd-email-channel-order {
    min-width: 125px;
}

.fd-email-channel-order strong {
    font-size: 1rem;
}

.fd-email-channel-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    min-width: 190px;
}

.fd-email-channel-actions__link {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 650;
    gap: 5px;
    min-height: 34px;
    padding: 0 9px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-email-channel-actions__link:hover,
.fd-email-channel-actions__link:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-email-channel-actions__link .material-symbols-outlined {
    font-size: 17px;
}

.fd-email-channel-actions--empty {
    color: var(--color-font-subtle-light, #6b7280);
    min-width: 0;
}

[data-fd-list-model="emailchannel"] .fd-user-time > span {
    white-space: nowrap;
}

.dark .fd-email-channel-identity__mark {
    background: rgb(37 99 235 / 16%);
    border-color: rgb(96 165 250 / 28%);
    color: #93c5fd;
}

.dark .fd-email-channel-identity.is-inactive
    .fd-email-channel-identity__mark,
.dark .fd-email-channel-key {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-email-channel-identity__copy small,
.dark .fd-email-channel-status small,
.dark .fd-email-channel-order small,
.dark .fd-email-channel-key.is-missing,
.dark .fd-email-channel-description.is-empty,
.dark .fd-email-channel-actions--empty {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-channel-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-channel-identity__preview:hover,
.dark .fd-email-channel-identity__preview:focus-visible,
.dark .fd-email-channel-actions__link:hover,
.dark .fd-email-channel-actions__link:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-email-channel-actions__link {
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="emailchannel"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="emailchannel"] #result_list td::before {
        min-width: 92px;
    }

    .fd-email-channel-identity,
    .fd-email-channel-description,
    .fd-email-channel-status,
    .fd-email-channel-order,
    .fd-email-channel-actions {
        max-width: min(100%, 300px);
        min-width: 0;
    }

    .fd-email-channel-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }
}

/* Announcement changelist semantic columns. */
.fd-announcement-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 230px;
}

.fd-announcement-identity__mark {
    align-items: center;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: var(--fd-radius);
    color: #6d28d9;
    display: inline-flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
}

.fd-announcement-identity.is-inactive
    .fd-announcement-identity__mark {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-200, #e5e7eb);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-announcement-identity__mark .material-symbols-outlined {
    font-size: 21px;
}

.fd-announcement-identity__copy,
.fd-announcement-status,
.fd-announcement-order {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-announcement-identity__title-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.fd-announcement-identity__title-link {
    color: inherit;
    font-weight: 700;
    max-width: 250px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-announcement-identity__title-link:hover,
.fd-announcement-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-announcement-identity__preview {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-4px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-announcement-identity:hover .fd-announcement-identity__preview,
.fd-announcement-identity:focus-within
    .fd-announcement-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

.fd-announcement-identity__preview:hover,
.fd-announcement-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-announcement-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-announcement-identity__copy small,
.fd-announcement-status small,
.fd-announcement-order small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-announcement-content {
    display: -webkit-box;
    line-height: 1.5;
    max-width: 440px;
    min-width: 260px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fd-announcement-content.is-empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-announcement-status {
    justify-items: start;
    min-width: 155px;
}

.fd-announcement-order {
    min-width: 125px;
}

.fd-announcement-order strong {
    font-size: 1rem;
}

[data-fd-list-model="announcement"] .fd-user-time > span {
    white-space: nowrap;
}

.dark .fd-announcement-identity__mark {
    background: rgb(109 40 217 / 18%);
    border-color: rgb(167 139 250 / 30%);
    color: #c4b5fd;
}

.dark .fd-announcement-identity.is-inactive
    .fd-announcement-identity__mark {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-announcement-identity__copy small,
.dark .fd-announcement-status small,
.dark .fd-announcement-order small,
.dark .fd-announcement-content.is-empty,
.dark .fd-announcement-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-announcement-identity__preview:hover,
.dark .fd-announcement-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="announcement"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="announcement"] #result_list td::before {
        min-width: 92px;
    }

    .fd-announcement-identity,
    .fd-announcement-content,
    .fd-announcement-status,
    .fd-announcement-order {
        max-width: min(100%, 320px);
        min-width: 0;
    }

    .fd-announcement-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }
}

/* Feedback changelist semantic columns. */
.fd-feedback-content {
    align-items: center;
    display: flex;
    gap: var(--fd-space-3);
    min-width: 320px;
}

.fd-feedback-content__mark {
    align-items: center;
    border: 1px solid;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
}

.fd-feedback-content__mark--bug {
    background: #fff1f0;
    border-color: #fecdca;
    color: #b42318;
}

.fd-feedback-content__mark--feature {
    background: #eff8ff;
    border-color: #b2ddff;
    color: #175cd3;
}

.fd-feedback-content__mark--other {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}

.fd-feedback-content__mark--unknown {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-200, #e5e7eb);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-feedback-content__mark .material-symbols-outlined {
    font-size: 21px;
}

.fd-feedback-content__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fd-feedback-content__title-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.fd-feedback-content__title-link {
    color: inherit;
    display: -webkit-box;
    font-weight: 700;
    line-height: 1.45;
    max-width: 440px;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fd-feedback-content__title-link:hover,
.fd-feedback-content__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-feedback-content__preview {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-4px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-feedback-content:hover .fd-feedback-content__preview,
.fd-feedback-content:focus-within .fd-feedback-content__preview {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

.fd-feedback-content__preview:hover,
.fd-feedback-content__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-feedback-content__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-feedback-content__copy small,
.fd-feedback-category small,
.fd-feedback-submitter small,
.fd-feedback-status small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-feedback-content.is-empty
    .fd-feedback-content__title-link {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-feedback-category {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 138px;
}

.fd-feedback-category > .material-symbols-outlined {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 17px;
    height: 30px;
    justify-content: center;
}

.fd-feedback-category > span:last-child,
.fd-feedback-submitter > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-feedback-category strong,
.fd-feedback-submitter strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-feedback-category--bug > .material-symbols-outlined {
    background: #fff1f0;
    color: #b42318;
}

.fd-feedback-category--feature > .material-symbols-outlined {
    background: #eff8ff;
    color: #175cd3;
}

.fd-feedback-category--other > .material-symbols-outlined {
    background: #f5f3ff;
    color: #6d28d9;
}

.fd-feedback-category--unknown > .material-symbols-outlined {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-feedback-submitter,
.fd-feedback-submitter__link {
    min-width: 0;
}

.fd-feedback-submitter {
    align-items: center;
    display: flex;
    gap: 8px;
    max-width: 245px;
    min-width: 170px;
}

.fd-feedback-submitter > .material-symbols-outlined {
    align-items: center;
    background: #eff8ff;
    border-radius: 50%;
    color: #175cd3;
    display: inline-flex;
    flex: 0 0 32px;
    font-size: 18px;
    height: 32px;
    justify-content: center;
}

.fd-feedback-submitter.is-guest > .material-symbols-outlined,
.fd-feedback-submitter.is-restricted > .material-symbols-outlined,
.fd-feedback-submitter.is-missing > .material-symbols-outlined {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-feedback-submitter__link {
    color: inherit;
    display: block;
    text-decoration: none;
}

.fd-feedback-submitter__link:hover strong,
.fd-feedback-submitter__link:focus-visible strong {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-feedback-contact {
    display: grid;
    gap: 7px;
    max-width: 260px;
    min-width: 190px;
}

.fd-feedback-contact > span {
    align-items: center;
    display: flex;
    gap: 7px;
    min-width: 0;
}

.fd-feedback-contact > span > .material-symbols-outlined {
    color: var(--color-font-subtle-light, #6b7280);
    flex: 0 0 18px;
    font-size: 17px;
}

.fd-feedback-contact > span > span {
    display: grid;
    min-width: 0;
}

.fd-feedback-contact small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 10px;
}

.fd-feedback-contact strong {
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-feedback-contact.is-empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-feedback-status {
    display: grid;
    gap: 4px;
    justify-items: start;
    max-width: 230px;
    min-width: 155px;
}

.fd-feedback-status__note {
    display: block;
    max-width: 220px;
}

[data-fd-list-model="feedback"] .fd-user-time > span {
    white-space: nowrap;
}

.dark .fd-feedback-content__mark--bug,
.dark .fd-feedback-category--bug > .material-symbols-outlined {
    background: rgb(180 35 24 / 18%);
    border-color: rgb(240 68 56 / 30%);
    color: #fda29b;
}

.dark .fd-feedback-content__mark--feature,
.dark .fd-feedback-category--feature > .material-symbols-outlined,
.dark .fd-feedback-submitter > .material-symbols-outlined {
    background: rgb(23 92 211 / 18%);
    border-color: rgb(83 177 253 / 30%);
    color: #84caff;
}

.dark .fd-feedback-content__mark--other,
.dark .fd-feedback-category--other > .material-symbols-outlined {
    background: rgb(109 40 217 / 18%);
    border-color: rgb(167 139 250 / 30%);
    color: #c4b5fd;
}

.dark .fd-feedback-content__mark--unknown,
.dark .fd-feedback-category--unknown > .material-symbols-outlined,
.dark .fd-feedback-submitter.is-guest > .material-symbols-outlined,
.dark .fd-feedback-submitter.is-restricted > .material-symbols-outlined,
.dark .fd-feedback-submitter.is-missing > .material-symbols-outlined {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-feedback-content__copy small,
.dark .fd-feedback-category small,
.dark .fd-feedback-submitter small,
.dark .fd-feedback-status small,
.dark .fd-feedback-contact small,
.dark .fd-feedback-contact > span > .material-symbols-outlined,
.dark .fd-feedback-contact.is-empty,
.dark .fd-feedback-content.is-empty
    .fd-feedback-content__title-link,
.dark .fd-feedback-content__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-feedback-content__preview:hover,
.dark .fd-feedback-content__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

@media screen and (max-width: 1199px) {
    .fd-feedback-content {
        min-width: 260px;
    }

    .fd-feedback-content__title-link {
        max-width: 330px;
    }

    .fd-feedback-contact {
        min-width: 165px;
    }
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="feedback"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="feedback"] #result_list td::before {
        min-width: 92px;
    }

    .fd-feedback-content,
    .fd-feedback-category,
    .fd-feedback-submitter,
    .fd-feedback-contact,
    .fd-feedback-status {
        max-width: min(100%, 340px);
        min-width: 0;
    }

    .fd-feedback-content__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }
}

/* System setting changelist semantic columns. */
.fd-system-setting-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-3);
    min-width: 310px;
}

.fd-system-setting-identity__mark {
    align-items: center;
    border: 1px solid;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
}

.fd-system-setting-identity__mark--billing {
    background: #eff8ff;
    border-color: #b2ddff;
    color: #175cd3;
}

.fd-system-setting-identity__mark--growth {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}

.fd-system-setting-identity__mark--ai {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}

.fd-system-setting-identity__mark--communication {
    background: #fff6ed;
    border-color: #fedf89;
    color: #b54708;
}

.fd-system-setting-identity__mark--other {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-200, #e5e7eb);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-system-setting-identity__mark .material-symbols-outlined {
    font-size: 21px;
}

.fd-system-setting-identity__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fd-system-setting-identity__title-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.fd-system-setting-identity__title-link {
    color: inherit;
    font-weight: 700;
    line-height: 1.4;
    max-width: 360px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-system-setting-identity__title-link:hover,
.fd-system-setting-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-system-setting-identity__preview {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-4px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-system-setting-identity:hover
    .fd-system-setting-identity__preview,
.fd-system-setting-identity:focus-within
    .fd-system-setting-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

.fd-system-setting-identity__preview:hover,
.fd-system-setting-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-system-setting-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-system-setting-identity__copy small {
    color: var(--color-font-subtle-light, #6b7280);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", monospace;
    max-width: 390px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-system-setting-category {
    align-items: center;
    display: flex;
    gap: 9px;
    min-width: 180px;
}

.fd-system-setting-category > .material-symbols-outlined {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 17px;
    height: 30px;
    justify-content: center;
}

.fd-system-setting-category--billing > .material-symbols-outlined {
    background: #eff8ff;
    color: #175cd3;
}

.fd-system-setting-category--growth > .material-symbols-outlined {
    background: #ecfdf3;
    color: #067647;
}

.fd-system-setting-category--ai > .material-symbols-outlined {
    background: #f5f3ff;
    color: #6d28d9;
}

.fd-system-setting-category--communication
    > .material-symbols-outlined {
    background: #fff6ed;
    color: #b54708;
}

.fd-system-setting-category--other > .material-symbols-outlined {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-system-setting-category > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-system-setting-category strong,
.fd-system-setting-category small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-system-setting-category small,
.fd-system-setting-value small {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-system-setting-value {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    max-width: 520px;
    min-width: 280px;
}

.fd-system-setting-value__kind {
    background: var(--color-base-100, #f3f4f6);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
}

.fd-system-setting-value--json .fd-system-setting-value__kind {
    background: #eff8ff;
    border-color: #b2ddff;
    color: #175cd3;
}

.fd-system-setting-value--sensitive .fd-system-setting-value__kind {
    background: #fff6ed;
    border-color: #fedf89;
    color: #b54708;
}

.fd-system-setting-value--invalid .fd-system-setting-value__kind {
    background: #fff1f0;
    border-color: #fecdca;
    color: #b42318;
}

.fd-system-setting-value__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-system-setting-value__copy strong {
    display: block;
    font-weight: 650;
    max-width: 400px;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-fd-list-model="systemsetting"] .fd-user-time > span {
    white-space: nowrap;
}

.dark .fd-system-setting-identity__mark--billing,
.dark .fd-system-setting-category--billing
    > .material-symbols-outlined {
    background: rgb(23 92 211 / 18%);
    border-color: rgb(83 177 253 / 30%);
    color: #84caff;
}

.dark .fd-system-setting-identity__mark--growth,
.dark .fd-system-setting-category--growth
    > .material-symbols-outlined {
    background: rgb(6 118 71 / 18%);
    border-color: rgb(71 205 137 / 30%);
    color: #75e0a7;
}

.dark .fd-system-setting-identity__mark--ai,
.dark .fd-system-setting-category--ai
    > .material-symbols-outlined {
    background: rgb(109 40 217 / 18%);
    border-color: rgb(167 139 250 / 30%);
    color: #c4b5fd;
}

.dark .fd-system-setting-identity__mark--communication,
.dark .fd-system-setting-category--communication
    > .material-symbols-outlined {
    background: rgb(181 71 8 / 18%);
    border-color: rgb(247 144 9 / 30%);
    color: #fec84b;
}

.dark .fd-system-setting-identity__mark--other,
.dark .fd-system-setting-category--other
    > .material-symbols-outlined,
.dark .fd-system-setting-value__kind {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-system-setting-value--json
    .fd-system-setting-value__kind {
    background: rgb(23 92 211 / 18%);
    border-color: rgb(83 177 253 / 30%);
    color: #84caff;
}

.dark .fd-system-setting-value--sensitive
    .fd-system-setting-value__kind {
    background: rgb(181 71 8 / 18%);
    border-color: rgb(247 144 9 / 30%);
    color: #fec84b;
}

.dark .fd-system-setting-value--invalid
    .fd-system-setting-value__kind {
    background: rgb(180 35 24 / 18%);
    border-color: rgb(240 68 56 / 30%);
    color: #fda29b;
}

.dark .fd-system-setting-identity__copy small,
.dark .fd-system-setting-category small,
.dark .fd-system-setting-value small,
.dark .fd-system-setting-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-system-setting-identity__preview:hover,
.dark .fd-system-setting-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="systemsetting"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="systemsetting"] #result_list td::before {
        min-width: 92px;
    }

    .fd-system-setting-identity,
    .fd-system-setting-category,
    .fd-system-setting-value {
        max-width: min(100%, 340px);
        min-width: 0;
    }

    .fd-system-setting-identity__title-link,
    .fd-system-setting-identity__copy small,
    .fd-system-setting-value__copy strong {
        max-width: 100%;
    }

    .fd-system-setting-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }

    .fd-system-setting-value__copy strong {
        white-space: normal;
    }
}

/* Email channel create and detail workspace. */
.fd-email-channel-page {
    color: var(--color-font-default-light, #111827);
    margin: 0 auto;
    max-width: 1480px;
    padding: var(--fd-space-6);
}

.fd-email-channel-page__back {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 650;
    gap: var(--fd-space-2);
    margin-bottom: var(--fd-space-5);
    text-decoration: none;
}

.fd-email-channel-page__back:hover,
.fd-email-channel-page__back:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-email-channel-page__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-email-channel-page__hero {
    align-items: center;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    display: flex;
    gap: var(--fd-space-6);
    justify-content: space-between;
    margin-bottom: var(--fd-space-5);
    padding: var(--fd-space-6);
}

.fd-email-channel-page__identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-4);
    min-width: 0;
}

.fd-email-channel-page__hero-icon {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--fd-radius);
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
}

.fd-email-channel-page__hero-icon .material-symbols-outlined {
    font-size: 28px;
}

.fd-email-channel-page__title-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
}

.fd-email-channel-page__title-line h1 {
    font-size: 2rem;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
    max-width: 760px;
    overflow-wrap: anywhere;
}

.fd-email-channel-page__identity > div > p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 7px 0 0;
}

.fd-email-channel-page__key-row {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.fd-email-channel-page__key-row code {
    color: var(--color-font-default-light, #374151);
    overflow-wrap: anywhere;
}

.fd-email-channel-page__icon-button {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.fd-email-channel-page__icon-button:hover,
.fd-email-channel-page__icon-button:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-email-channel-page__icon-button .material-symbols-outlined {
    font-size: 17px;
}

.fd-email-channel-page__hero-meta {
    display: grid;
    flex: 0 0 min(420px, 38%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.fd-email-channel-page__hero-meta > div {
    border-left: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: var(--fd-space-2) var(--fd-space-5);
}

.fd-email-channel-page__hero-meta dt,
.fd-email-channel-page__usage dt,
.fd-email-channel-page__read-fields dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
    font-weight: 650;
}

.fd-email-channel-page__hero-meta dd,
.fd-email-channel-page__usage dd,
.fd-email-channel-page__read-fields dd {
    font-weight: 700;
    margin: 0;
}

.fd-email-channel-page__hero-meta small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow-wrap: anywhere;
}

.fd-email-channel-page__feedback {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--fd-radius);
    color: #047857;
    display: flex;
    font-size: 0.875rem;
    margin-bottom: var(--fd-space-4);
    min-height: 44px;
    padding: 10px 14px;
}

.fd-email-channel-page__feedback.is-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.fd-email-channel-page__workspace {
    align-items: start;
    display: grid;
    gap: var(--fd-space-5);
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.fd-email-channel-page__editor,
.fd-email-channel-page__rail > section {
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    min-width: 0;
}

.fd-email-channel-page__editor > header,
.fd-email-channel-page__rail > section > header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
    padding: var(--fd-space-5);
}

.fd-email-channel-page__editor h2,
.fd-email-channel-page__rail h2,
.fd-email-channel-dialog h2 {
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.35;
    margin: 0;
}

.fd-email-channel-page__editor header p,
.fd-email-channel-page__rail header p,
.fd-email-channel-dialog header p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 5px 0 0;
}

.fd-email-channel-page__read-only {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 4px;
    padding: 6px 8px;
}

.fd-email-channel-page__read-only .material-symbols-outlined {
    font-size: 15px;
}

.fd-email-channel-form {
    display: grid;
    gap: var(--fd-space-5);
    padding: var(--fd-space-5);
}

.fd-email-channel-form__grid {
    display: grid;
    gap: var(--fd-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-email-channel-form__grid.is-compact {
    grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1.3fr);
}

.fd-email-channel-form__field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.fd-email-channel-form__field label,
.fd-email-channel-form__label {
    color: var(--color-font-default-light, #111827);
    font-size: 0.8125rem;
    font-weight: 700;
}

.fd-email-channel-form__field input[type="text"],
.fd-email-channel-form__field input[type="number"],
.fd-email-channel-form__field textarea,
.fd-email-channel-dialog__panel input[type="text"] {
    background: transparent;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    box-shadow: none;
    color: inherit;
    font-size: 0.875rem;
    max-width: none;
    min-height: 42px;
    padding: 9px 11px;
    width: 100%;
}

.fd-email-channel-form__field textarea {
    min-height: 124px;
    resize: vertical;
}

.fd-email-channel-form__field input:focus,
.fd-email-channel-form__field textarea:focus,
.fd-email-channel-dialog__panel input:focus {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 12%);
    outline: none;
}

.fd-email-channel-form__field.is-invalid input,
.fd-email-channel-form__field.is-invalid textarea {
    border-color: #ef4444;
}

.fd-email-channel-form__field > small,
.fd-email-channel-form__field-meta small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
    line-height: 1.45;
}

.fd-email-channel-form__field-meta {
    display: flex;
    gap: var(--fd-space-3);
    justify-content: space-between;
}

.fd-email-channel-form__error {
    color: #dc2626;
    font-size: 0.75rem;
    min-height: 1em;
}

.fd-email-channel-form__locked {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    gap: var(--fd-space-2);
    min-height: 42px;
    padding: 9px 11px;
}

.fd-email-channel-form__locked .material-symbols-outlined {
    font-size: 17px;
}

.fd-email-channel-form__locked code {
    color: var(--color-font-default-light, #374151);
    overflow-wrap: anywhere;
}

.fd-email-channel-form__status {
    align-content: start;
}

.fd-email-channel-switch {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--fd-space-3);
    min-height: 42px;
}

.fd-email-channel-switch input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.fd-email-channel-switch__track {
    background: var(--color-base-300, #d1d5db);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 42px;
    height: 24px;
    padding: 3px;
    transition: background-color 140ms ease;
}

.fd-email-channel-switch__track span {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(15 23 42 / 25%);
    display: block;
    height: 18px;
    transform: translateX(0);
    transition: transform 140ms ease;
    width: 18px;
}

.fd-email-channel-switch input:checked + .fd-email-channel-switch__track {
    background: #16a34a;
}

.fd-email-channel-switch
    input:checked
    + .fd-email-channel-switch__track
    span {
    transform: translateX(18px);
}

.fd-email-channel-switch input:focus-visible + .fd-email-channel-switch__track {
    box-shadow: 0 0 0 3px rgb(59 130 246 / 20%);
}

.fd-email-channel-form__actions {
    align-items: center;
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: var(--fd-space-3);
    justify-content: flex-end;
    margin: 0 calc(var(--fd-space-5) * -1)
        calc(var(--fd-space-5) * -1);
    padding: var(--fd-space-4) var(--fd-space-5);
}

.fd-email-channel-form__actions a,
.fd-email-channel-form__actions button,
.fd-email-channel-page__danger button,
.fd-email-channel-dialog footer button {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
}

.fd-email-channel-form__actions a {
    color: var(--color-font-default-light, #374151);
}

.fd-email-channel-form__actions button {
    background: var(--color-primary-600, #2563eb);
    border-color: var(--color-primary-600, #2563eb);
    color: #fff;
}

.fd-email-channel-form__actions button:hover,
.fd-email-channel-form__actions button:focus-visible {
    background: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-email-channel-form__actions button:disabled,
.fd-email-channel-dialog footer button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.fd-email-channel-form__actions .material-symbols-outlined,
.fd-email-channel-page__danger .material-symbols-outlined,
.fd-email-channel-dialog footer .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-channel-page__rail {
    display: grid;
    gap: var(--fd-space-4);
}

.fd-email-channel-page__usage {
    display: grid;
    margin: 0;
}

.fd-email-channel-page__usage > div {
    align-items: center;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    justify-content: space-between;
    padding: 13px var(--fd-space-5);
}

.fd-email-channel-page__usage dd {
    font-size: 1rem;
}

.fd-email-channel-page__related {
    display: grid;
    gap: var(--fd-space-2);
    padding: var(--fd-space-4) var(--fd-space-5);
}

.fd-email-channel-page__related a {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: grid;
    gap: var(--fd-space-2);
    grid-template-columns: 22px minmax(0, 1fr) 20px;
    min-height: 38px;
    padding: 7px 9px;
    text-decoration: none;
}

.fd-email-channel-page__related a:hover,
.fd-email-channel-page__related a:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-email-channel-page__related .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-channel-page__state {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-3);
    padding: var(--fd-space-5);
}

.fd-email-channel-page__state.is-attention {
    color: #b45309;
}

.fd-email-channel-page__state p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 3px 0 0;
}

.fd-email-channel-page__danger {
    border-color: #fecaca !important;
    padding-bottom: var(--fd-space-5);
}

.fd-email-channel-page__danger > header {
    border-color: #fee2e2 !important;
}

.fd-email-channel-page__danger h2 {
    color: #b91c1c;
}

.fd-email-channel-page__danger button {
    border-color: #fca5a5;
    color: #b91c1c;
    margin: var(--fd-space-4) var(--fd-space-5) 0;
}

.fd-email-channel-page__danger button:hover:not(:disabled),
.fd-email-channel-page__danger button:focus-visible:not(:disabled) {
    background: #fef2f2;
    outline: none;
}

.fd-email-channel-page__danger button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.fd-email-channel-page__preview {
    align-items: center;
    display: flex;
    gap: var(--fd-space-3);
    padding: var(--fd-space-5);
}

.fd-email-channel-page__preview-icon {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--fd-radius);
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
}

.fd-email-channel-page__preview > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-email-channel-page__preview strong,
.fd-email-channel-page__preview code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-email-channel-page__preview code,
.fd-email-channel-page__preview small {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-email-channel-page__boundary {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-3);
    padding: var(--fd-space-5);
}

.fd-email-channel-page__boundary > .material-symbols-outlined {
    color: #0f766e;
}

.fd-email-channel-page__boundary h2 {
    margin-bottom: 5px;
}

.fd-email-channel-page__boundary p {
    color: var(--color-font-subtle-light, #6b7280);
    line-height: 1.55;
    margin: 0;
}

.fd-email-channel-page__read-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.fd-email-channel-page__read-fields > div {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: var(--fd-space-5);
}

.fd-email-channel-page__read-fields dd {
    overflow-wrap: anywhere;
}

.fd-email-channel-dialog {
    inset: 0;
    position: fixed;
    z-index: 1100;
}

.fd-email-channel-dialog__backdrop {
    background: rgb(15 23 42 / 52%);
    border: 0;
    inset: 0;
    position: absolute;
    width: 100%;
}

.fd-email-channel-dialog__panel {
    background: var(--color-base-50, #fff);
    border-radius: var(--fd-radius);
    box-shadow: 0 24px 64px rgb(15 23 42 / 24%);
    left: 50%;
    max-height: calc(100vh - 48px);
    max-width: min(520px, calc(100vw - 32px));
    overflow-y: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.fd-email-channel-dialog__panel > header {
    align-items: center;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    padding: var(--fd-space-5);
}

.fd-email-channel-dialog__icon {
    align-items: center;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--fd-radius);
    color: #dc2626;
    display: inline-flex;
    height: 42px;
    justify-content: center;
}

.fd-email-channel-dialog__close {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.fd-email-channel-dialog__close:hover,
.fd-email-channel-dialog__close:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    outline: none;
}

.fd-email-channel-dialog__panel form {
    display: grid;
    gap: var(--fd-space-4);
    padding: var(--fd-space-5);
}

.fd-email-channel-dialog__warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--fd-radius);
    color: #9a3412;
    padding: 12px 14px;
}

.fd-email-channel-dialog__warning p {
    margin: 5px 0 0;
}

.fd-email-channel-dialog__feedback {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--fd-radius);
    color: #b91c1c;
    font-size: 0.8125rem;
    padding: 9px 11px;
}

.fd-email-channel-dialog footer {
    display: flex;
    gap: var(--fd-space-3);
    justify-content: flex-end;
}

.fd-email-channel-dialog footer button:last-child {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.fd-email-channel-dialog footer button:last-child:hover,
.fd-email-channel-dialog footer button:last-child:focus-visible {
    background: #b91c1c;
    outline: none;
}

.fd-email-channel-page__toast {
    background: #111827;
    border-radius: var(--fd-radius);
    bottom: 24px;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 650;
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1200;
}

.dark .fd-email-channel-page {
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-email-channel-page__hero,
.dark .fd-email-channel-page__editor,
.dark .fd-email-channel-page__rail > section {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-channel-page__hero-icon,
.dark .fd-email-channel-page__preview-icon {
    background: rgb(37 99 235 / 16%);
    border-color: rgb(96 165 250 / 28%);
    color: #93c5fd;
}

.dark .fd-email-channel-page__hero-meta > div,
.dark .fd-email-channel-page__editor > header,
.dark .fd-email-channel-page__rail > section > header,
.dark .fd-email-channel-page__usage > div,
.dark .fd-email-channel-form__actions,
.dark .fd-email-channel-page__read-fields > div,
.dark .fd-email-channel-dialog__panel > header {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-channel-form__field label,
.dark .fd-email-channel-form__label {
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-email-channel-form__locked,
.dark .fd-email-channel-page__read-only {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-channel-form__locked code,
.dark .fd-email-channel-page__key-row code,
.dark .fd-email-channel-form__actions a,
.dark .fd-email-channel-page__related a {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-email-channel-form__field input[type="text"],
.dark .fd-email-channel-form__field input[type="number"],
.dark .fd-email-channel-form__field textarea,
.dark .fd-email-channel-dialog__panel input[type="text"] {
    border-color: var(--color-base-600, #4b5563);
}

.dark .fd-email-channel-dialog__panel {
    background: var(--color-base-900, #111827);
}

@media screen and (max-width: 1199px) {
    .fd-email-channel-page {
        padding: var(--fd-space-4);
    }

    .fd-email-channel-page__hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-email-channel-page__hero-meta {
        flex-basis: auto;
        width: 100%;
    }

    .fd-email-channel-page__hero-meta > div:first-child {
        border-left: 0;
        padding-left: 0;
    }

    .fd-email-channel-page__workspace {
        grid-template-columns: 1fr;
    }

    .fd-email-channel-page__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 639px) {
    .fd-email-channel-page {
        padding: var(--fd-space-3);
    }

    .fd-email-channel-page__hero,
    .fd-email-channel-page__editor > header,
    .fd-email-channel-page__rail > section > header,
    .fd-email-channel-form,
    .fd-email-channel-page__preview,
    .fd-email-channel-page__boundary,
    .fd-email-channel-page__state,
    .fd-email-channel-page__read-fields > div {
        padding: var(--fd-space-4);
    }

    .fd-email-channel-page__identity {
        align-items: flex-start;
    }

    .fd-email-channel-page__hero-icon {
        flex-basis: 42px;
        height: 42px;
    }

    .fd-email-channel-page__hero-icon .material-symbols-outlined {
        font-size: 23px;
    }

    .fd-email-channel-page__title-line h1 {
        font-size: 1.35rem;
    }

    .fd-email-channel-page__hero-meta {
        grid-template-columns: 1fr;
    }

    .fd-email-channel-page__hero-meta > div {
        border-left: 0;
        border-top: 1px solid var(--color-base-200, #e5e7eb);
        padding: var(--fd-space-3) 0;
    }

    .fd-email-channel-form__grid,
    .fd-email-channel-form__grid.is-compact,
    .fd-email-channel-page__rail,
    .fd-email-channel-page__read-fields {
        grid-template-columns: 1fr;
    }

    .fd-email-channel-form__actions {
        margin: 0 calc(var(--fd-space-4) * -1)
            calc(var(--fd-space-4) * -1);
        padding: var(--fd-space-4);
    }

    .fd-email-channel-form__actions a,
    .fd-email-channel-form__actions button {
        flex: 1 1 0;
    }

    .fd-email-channel-dialog__panel {
        max-height: calc(100vh - 24px);
        max-width: calc(100vw - 20px);
    }
}

/* Email subscriber detail. */
.fd-subscriber-detail {
    color: var(--color-font-default-light, #111827);
    display: grid;
    gap: var(--fd-space-4);
}

.fd-subscriber-detail__back {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    font-weight: 600;
    gap: var(--fd-space-2);
    justify-self: start;
    text-decoration: none;
}

.fd-subscriber-detail__back:hover,
.fd-subscriber-detail__back:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscriber-detail__header,
.fd-subscriber-detail__channels,
.fd-subscriber-detail__owner,
.fd-subscriber-detail__actions,
.fd-subscriber-detail__boundary {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius-lg);
}

.fd-subscriber-detail__header {
    overflow: hidden;
}

.fd-subscriber-detail__header-main {
    padding: 26px 28px 20px;
}

.fd-subscriber-detail__identity {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-4);
    min-width: 0;
}

.fd-subscriber-detail__icon {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    border-radius: var(--fd-radius-lg);
    color: #059669;
    display: inline-flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
}

.fd-subscriber-detail__icon .material-symbols-outlined {
    font-size: 27px;
}

.fd-subscriber-detail__heading {
    display: grid;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-subscriber-detail__heading-line,
.fd-subscriber-detail__email,
.fd-subscriber-detail__id {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    min-width: 0;
}

.fd-subscriber-detail__heading-line h1 {
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-subscriber-detail__email {
    color: var(--color-font-default-light, #374151);
}

.fd-subscriber-detail__email > .material-symbols-outlined {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 18px;
}

.fd-subscriber-detail__email strong {
    overflow-wrap: anywhere;
}

.fd-subscriber-detail__id code {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.fd-subscriber-detail__icon-button,
.fd-subscriber-detail__row-action {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    text-decoration: none;
}

button.fd-subscriber-detail__icon-button {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.fd-subscriber-detail__icon-button:hover,
.fd-subscriber-detail__icon-button:focus-visible,
.fd-subscriber-detail__row-action:hover,
.fd-subscriber-detail__row-action:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-subscriber-detail__icon-button .material-symbols-outlined,
.fd-subscriber-detail__row-action .material-symbols-outlined {
    font-size: 18px;
}

.fd-subscriber-detail__summary {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    color: var(--color-font-subtle-light, #6b7280);
    margin: 0;
    padding: 14px 28px;
}

.fd-subscriber-detail__metrics {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.fd-subscriber-detail__metrics > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 16px 20px;
}

.fd-subscriber-detail__metrics > div + div {
    border-left: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-subscriber-detail__metrics dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 0.75rem;
    font-weight: 650;
}

.fd-subscriber-detail__metrics dd {
    font-size: 1rem;
    font-weight: 750;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscriber-detail__metrics small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-subscriber-detail__attention {
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--fd-radius-lg);
    color: #92400e;
    display: flex;
    gap: var(--fd-space-3);
    padding: 16px 18px;
}

.fd-subscriber-detail__attention > .material-symbols-outlined {
    color: #d97706;
}

.fd-subscriber-detail__attention h2,
.fd-subscriber-detail__attention p,
.fd-subscriber-detail__attention ul {
    margin: 0;
}

.fd-subscriber-detail__attention h2 {
    font-size: 0.9375rem;
}

.fd-subscriber-detail__attention p {
    margin-top: 3px;
}

.fd-subscriber-detail__attention ul {
    margin-top: 6px;
    padding-left: 18px;
}

.fd-subscriber-detail__workspace {
    align-items: start;
    display: grid;
    gap: var(--fd-space-4);
    grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.8fr);
}

.fd-subscriber-detail__main,
.fd-subscriber-detail__rail {
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
}

.fd-subscriber-detail__channels,
.fd-subscriber-detail__owner,
.fd-subscriber-detail__actions {
    overflow: hidden;
}

.fd-subscriber-detail__channels > header,
.fd-subscriber-detail__owner > header,
.fd-subscriber-detail__actions > header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: var(--fd-space-3);
    justify-content: space-between;
    padding: 17px 20px;
}

.fd-subscriber-detail__channels h2,
.fd-subscriber-detail__owner h2,
.fd-subscriber-detail__actions h2,
.fd-subscriber-detail__boundary h2 {
    font-size: 1rem;
    font-weight: 750;
    margin: 0;
}

.fd-subscriber-detail__channels header p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 3px 0 0;
}

.fd-subscriber-detail__read-only {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 999px;
    color: var(--color-font-subtle-light, #6b7280);
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.fd-subscriber-detail__channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-subscriber-detail__channel-list > li {
    align-items: center;
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: 40px minmax(0, 1fr) 30px;
    padding: 16px 20px;
}

.fd-subscriber-detail__channel-list > li + li {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-subscriber-detail__channel-list > li.is-missing {
    background: #fff7f7;
}

.fd-subscriber-detail__channel-icon,
.fd-subscriber-detail__rail-icon {
    align-items: center;
    background: #eff6ff;
    border-radius: var(--fd-radius);
    color: #2563eb;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.fd-subscriber-detail__channel-list > li.is-missing
    .fd-subscriber-detail__channel-icon {
    background: #fef2f2;
    color: #dc2626;
}

.fd-subscriber-detail__channel-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.fd-subscriber-detail__channel-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
}

.fd-subscriber-detail__channel-heading a,
.fd-subscriber-detail__channel-heading strong {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.fd-subscriber-detail__channel-heading a:hover,
.fd-subscriber-detail__channel-heading a:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscriber-detail__channel-copy small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow-wrap: anywhere;
}

.fd-subscriber-detail__state {
    align-items: flex-start;
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    gap: var(--fd-space-3);
    padding: 24px 20px;
}

.fd-subscriber-detail__state > .material-symbols-outlined {
    color: #64748b;
}

.fd-subscriber-detail__state.is-attention,
.fd-subscriber-detail__state.is-attention
    > .material-symbols-outlined {
    color: #b45309;
}

.fd-subscriber-detail__state strong {
    color: var(--color-font-default-light, #374151);
}

.fd-subscriber-detail__state p {
    margin: 3px 0 0;
}

.fd-subscriber-detail__boundary {
    align-items: flex-start;
    background: #f8fafc;
    display: flex;
    gap: var(--fd-space-3);
    padding: 18px 20px;
}

.fd-subscriber-detail__boundary > .material-symbols-outlined {
    color: #475569;
}

.fd-subscriber-detail__boundary p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 4px 0 0;
}

.fd-subscriber-detail__owner.is-attention {
    border-color: #fecaca;
}

.fd-subscriber-detail__owner-summary {
    align-items: flex-start;
    display: grid;
    gap: var(--fd-space-3);
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 18px 20px;
}

.fd-subscriber-detail__owner-summary a,
.fd-subscriber-detail__owner-summary strong {
    color: inherit;
    font-weight: 750;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.fd-subscriber-detail__owner-summary a:hover,
.fd-subscriber-detail__owner-summary a:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscriber-detail__owner-summary p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 4px 0 0;
}

.fd-subscriber-detail__owner-fields {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    margin: 0;
}

.fd-subscriber-detail__owner-fields > div {
    display: grid;
    gap: 8px;
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 11px 20px;
}

.fd-subscriber-detail__owner-fields > div + div {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-subscriber-detail__owner-fields dt {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-subscriber-detail__owner-fields dd {
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.fd-subscriber-detail__actions > div {
    display: grid;
    gap: var(--fd-space-2);
    padding: 16px 20px;
}

.fd-subscriber-detail__actions a {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: flex;
    font-weight: 650;
    gap: var(--fd-space-2);
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    text-decoration: none;
}

.fd-subscriber-detail__actions a:hover,
.fd-subscriber-detail__actions a:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-subscriber-detail__actions a .material-symbols-outlined {
    font-size: 18px;
}

.fd-subscriber-detail__actions p {
    color: var(--color-font-subtle-light, #6b7280);
    margin: 0;
    text-align: center;
}

.fd-subscriber-detail__toast {
    background: #111827;
    border-radius: var(--fd-radius);
    bottom: 24px;
    color: #fff;
    left: 50%;
    margin: 0;
    padding: 10px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 60;
}

.dark .fd-subscriber-identity__preview {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-subscriber-identity__preview:hover,
.dark .fd-subscriber-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-subscriber-detail {
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-subscriber-detail__header,
.dark .fd-subscriber-detail__channels,
.dark .fd-subscriber-detail__owner,
.dark .fd-subscriber-detail__actions,
.dark .fd-subscriber-detail__boundary {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-subscriber-detail__back,
.dark .fd-subscriber-detail__email > .material-symbols-outlined,
.dark .fd-subscriber-detail__id code,
.dark .fd-subscriber-detail__summary,
.dark .fd-subscriber-detail__metrics dt,
.dark .fd-subscriber-detail__metrics small,
.dark .fd-subscriber-detail__channels header p,
.dark .fd-subscriber-detail__channel-copy small,
.dark .fd-subscriber-detail__state,
.dark .fd-subscriber-detail__boundary p,
.dark .fd-subscriber-detail__owner-summary p,
.dark .fd-subscriber-detail__owner-fields dt,
.dark .fd-subscriber-detail__actions p {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-subscriber-detail__summary,
.dark .fd-subscriber-detail__metrics,
.dark .fd-subscriber-detail__metrics > div + div,
.dark .fd-subscriber-detail__channels > header,
.dark .fd-subscriber-detail__owner > header,
.dark .fd-subscriber-detail__actions > header,
.dark .fd-subscriber-detail__channel-list > li + li,
.dark .fd-subscriber-detail__owner-fields,
.dark .fd-subscriber-detail__owner-fields > div + div {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-subscriber-detail__icon {
    background: rgb(5 150 105 / 18%);
    border-color: rgb(52 211 153 / 24%);
    color: #6ee7b7;
}

.dark .fd-subscriber-detail__icon-button,
.dark .fd-subscriber-detail__row-action {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-subscriber-detail__icon-button:hover,
.dark .fd-subscriber-detail__icon-button:focus-visible,
.dark .fd-subscriber-detail__row-action:hover,
.dark .fd-subscriber-detail__row-action:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-subscriber-detail__attention {
    background: rgb(180 83 9 / 18%);
    border-color: rgb(245 158 11 / 28%);
    color: #fde68a;
}

.dark .fd-subscriber-detail__channel-list > li.is-missing {
    background: rgb(127 29 29 / 14%);
}

.dark .fd-subscriber-detail__channel-icon,
.dark .fd-subscriber-detail__rail-icon {
    background: rgb(37 99 235 / 18%);
    color: #93c5fd;
}

.dark .fd-subscriber-detail__state strong {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-subscriber-detail__boundary {
    background: var(--color-base-800, #1f2937);
}

.dark .fd-subscriber-detail__read-only {
    background: var(--color-base-800, #1f2937);
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-subscriber-detail__actions a {
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-subscriber-detail__actions a:hover,
.dark .fd-subscriber-detail__actions a:focus-visible {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-600, #4b5563);
    color: var(--color-primary-400, #60a5fa);
}

@media screen and (max-width: 1100px) {
    .fd-subscriber-detail__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-subscriber-detail__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .fd-subscriber-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }

    .fd-subscriber-detail__header-main {
        padding: 20px 18px 16px;
    }

    .fd-subscriber-detail__identity {
        gap: var(--fd-space-3);
    }

    .fd-subscriber-detail__icon {
        flex-basis: 44px;
        height: 44px;
    }

    .fd-subscriber-detail__icon .material-symbols-outlined {
        font-size: 23px;
    }

    .fd-subscriber-detail__heading-line h1 {
        font-size: 1.25rem;
    }

    .fd-subscriber-detail__summary {
        padding: 12px 18px;
    }

    .fd-subscriber-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-subscriber-detail__metrics > div {
        padding: 14px 16px;
    }

    .fd-subscriber-detail__metrics > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-base-200, #e5e7eb);
    }

    .fd-subscriber-detail__metrics > div:nth-child(4) {
        border-top: 1px solid var(--color-base-200, #e5e7eb);
    }

    .dark .fd-subscriber-detail__metrics > div:nth-child(3),
    .dark .fd-subscriber-detail__metrics > div:nth-child(4) {
        border-color: var(--color-base-700, #374151);
    }

    .fd-subscriber-detail__rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-subscriber-detail__channel-list > li {
        grid-template-columns: 36px minmax(0, 1fr) 30px;
        padding: 14px 16px;
    }

    .fd-subscriber-detail__channel-icon,
    .fd-subscriber-detail__rail-icon {
        height: 36px;
        width: 36px;
    }
}

.fd-email-send-detail__back {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    font-weight: 600;
    gap: var(--fd-space-2);
    margin-bottom: var(--fd-space-4);
    text-decoration: none;
}

.fd-email-send-detail__back:hover,
.fd-email-send-detail__back:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-send-detail__back:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 3px;
}

.fd-email-send-detail__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-email-send-safe-error {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-email-send-detail {
    margin: 0 auto;
    max-width: 1280px;
    width: 100%;
}

.fd-email-send-detail__header {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
    overflow: hidden;
}

.fd-email-send-detail__header-main {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 26px 28px 20px;
}

.fd-email-send-detail__identity {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-4);
    min-width: 0;
}

.fd-email-send-detail__icon {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--fd-radius);
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
}

.fd-email-send-detail__icon .material-symbols-outlined {
    font-size: 27px;
}

.fd-email-send-detail__heading {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.fd-email-send-detail__heading-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
}

.fd-email-send-detail__heading h1 {
    color: var(--color-font-default-light, #111827);
    font-size: 26px;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
    max-width: 780px;
    overflow-wrap: anywhere;
}

.fd-email-send-detail__recipient,
.fd-email-send-detail__id,
.fd-email-send-detail__relation-id {
    align-items: center;
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.fd-email-send-detail__recipient > .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-send-detail__recipient strong {
    color: var(--color-font-default-light, #374151);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fd-email-send-detail__id code,
.fd-email-send-detail__relation-id code,
.fd-email-send-detail__traces code {
    color: var(--color-font-subtle-light, #6b7280);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.fd-email-send-detail__icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-font-subtle-light, #6b7280);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    transition:
        background-color 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}

.fd-email-send-detail__icon-button:hover,
.fd-email-send-detail__icon-button:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-send-detail__icon-button:active {
    transform: scale(0.94);
}

.fd-email-send-detail__icon-button:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.fd-email-send-detail__icon-button .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-send-detail__status-summary {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    color: var(--color-font-subtle-light, #6b7280);
    line-height: 1.6;
    margin: 0;
    padding: 14px 28px;
}

.fd-email-send-detail__metrics {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.fd-email-send-detail__metrics > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 17px 20px;
}

.fd-email-send-detail__metrics > div + div {
    border-left: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-email-send-detail__metrics dt,
.fd-email-send-detail__traces small {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 12px;
}

.fd-email-send-detail__metrics dd {
    color: var(--color-font-default-light, #111827);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-email-send-detail__metrics small {
    color: var(--color-font-subtle-light, #6b7280);
    line-height: 1.45;
}

.fd-email-send-detail__attention {
    align-items: flex-start;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--fd-radius);
    color: #9a3412;
    display: flex;
    gap: var(--fd-space-3);
    margin-top: var(--fd-space-4);
    padding: 16px 18px;
}

.fd-email-send-detail__attention > .material-symbols-outlined {
    flex: 0 0 22px;
    font-size: 22px;
}

.fd-email-send-detail__attention h2,
.fd-email-send-detail__attention p {
    margin: 0;
}

.fd-email-send-detail__attention h2 {
    font-size: 15px;
    font-weight: 750;
}

.fd-email-send-detail__attention p,
.fd-email-send-detail__attention li {
    line-height: 1.55;
}

.fd-email-send-detail__attention p {
    margin-top: 3px;
}

.fd-email-send-detail__attention ul {
    list-style: disc;
    margin: 8px 0 0;
    padding-left: 20px;
}

.fd-email-send-detail__workspace {
    display: grid;
    gap: var(--fd-space-5);
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
    margin-top: var(--fd-space-5);
}

.fd-email-send-detail__main,
.fd-email-send-detail__rail {
    display: grid;
    gap: var(--fd-space-4);
    min-width: 0;
}

.fd-email-send-detail__result,
.fd-email-send-detail__message,
.fd-email-send-detail__timeline,
.fd-email-send-detail__rail > section {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: var(--fd-radius);
}

.fd-email-send-detail__result {
    align-items: center;
    display: flex;
    gap: var(--fd-space-4);
    padding: 22px;
}

.fd-email-send-detail__result-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 48px;
    height: 48px;
    justify-content: center;
}

.fd-email-send-detail__result-icon .material-symbols-outlined {
    font-size: 25px;
}

.fd-email-send-detail__result h2,
.fd-email-send-detail__result p,
.fd-email-send-detail__message h2,
.fd-email-send-detail__message p,
.fd-email-send-detail__timeline h2,
.fd-email-send-detail__timeline p,
.fd-email-send-detail__rail h2,
.fd-email-send-detail__rail p {
    margin: 0;
}

.fd-email-send-detail__eyebrow {
    color: var(--color-font-subtle-light, #6b7280);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 3px;
}

.fd-email-send-detail__result h2 {
    color: var(--color-font-default-light, #111827);
    font-size: 19px;
    font-weight: 750;
}

.fd-email-send-detail__result p {
    color: var(--color-font-subtle-light, #6b7280);
    line-height: 1.6;
    margin-top: 4px;
}

.fd-email-send-detail__result.is-success {
    border-color: #bbf7d0;
}

.fd-email-send-detail__result.is-success
    .fd-email-send-detail__result-icon {
    background: #ecfdf5;
    color: #047857;
}

.fd-email-send-detail__result.is-danger {
    border-color: #fecaca;
}

.fd-email-send-detail__result.is-danger .fd-email-send-detail__result-icon {
    background: #fef2f2;
    color: #dc2626;
}

.fd-email-send-detail__result.is-warning {
    border-color: #fde68a;
}

.fd-email-send-detail__result.is-warning
    .fd-email-send-detail__result-icon {
    background: #fffbeb;
    color: #d97706;
}

.fd-email-send-detail__result.is-info
    .fd-email-send-detail__result-icon {
    background: #eff6ff;
    color: #2563eb;
}

.fd-email-send-detail__result.is-neutral
    .fd-email-send-detail__result-icon {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-email-send-detail__message,
.fd-email-send-detail__timeline,
.fd-email-send-detail__rail > section {
    padding: 20px;
}

.fd-email-send-detail__message > header,
.fd-email-send-detail__timeline > header,
.fd-email-send-detail__rail > section > header {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-3);
    justify-content: space-between;
}

.fd-email-send-detail__message h2,
.fd-email-send-detail__timeline h2,
.fd-email-send-detail__rail h2 {
    color: var(--color-font-default-light, #111827);
    font-size: 16px;
    font-weight: 750;
}

.fd-email-send-detail__message header p,
.fd-email-send-detail__timeline header p {
    color: var(--color-font-subtle-light, #6b7280);
    line-height: 1.5;
    margin-top: 3px;
}

.fd-email-send-detail__read-only {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 999px;
    color: var(--color-font-subtle-light, #6b7280);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
}

.fd-email-send-detail__message dl {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 18px 0 0;
}

.fd-email-send-detail__message dl > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 16px 0;
}

.fd-email-send-detail__message dl > div + div {
    border-left: 1px solid var(--color-base-200, #e5e7eb);
    padding-left: 20px;
}

.fd-email-send-detail__message dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 12px;
}

.fd-email-send-detail__message dd {
    color: var(--color-font-default-light, #111827);
    font-weight: 650;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-email-send-detail__message dd small {
    color: var(--fd-danger, #dc2626);
    display: block;
    font-weight: 500;
    margin-top: 3px;
}

.fd-email-send-detail__content-boundary {
    align-items: flex-start;
    background: var(--color-base-50, #f9fafb);
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    color: var(--color-font-subtle-light, #6b7280);
    display: flex;
    gap: 9px;
    margin: 0 -20px -20px;
    padding: 13px 20px;
}

.fd-email-send-detail__content-boundary
    > .material-symbols-outlined {
    flex: 0 0 19px;
    font-size: 19px;
}

.fd-email-send-detail__content-boundary p {
    line-height: 1.55;
}

.fd-email-send-detail__timeline ol {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.fd-email-send-detail__timeline li {
    align-items: flex-start;
    display: grid;
    gap: 10px;
    justify-items: center;
    min-width: 0;
    position: relative;
    text-align: center;
}

.fd-email-send-detail__timeline li:not(:last-child)::after {
    background: var(--color-base-200, #e5e7eb);
    content: "";
    height: 2px;
    left: calc(50% + 25px);
    position: absolute;
    right: calc(-50% + 25px);
    top: 19px;
}

.fd-email-send-detail__timeline li.is-done:not(:last-child)::after {
    background: #86efac;
}

.fd-email-send-detail__timeline-icon {
    align-items: center;
    aspect-ratio: 1;
    background: var(--color-base-100, #f3f4f6);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 50%;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    position: relative;
    width: 40px;
    z-index: 1;
}

.fd-email-send-detail__timeline-icon .material-symbols-outlined {
    font-size: 20px;
}

.fd-email-send-detail__timeline li.is-done
    .fd-email-send-detail__timeline-icon {
    background: #ecfdf5;
    border-color: #86efac;
    color: #047857;
}

.fd-email-send-detail__timeline li.is-current
    .fd-email-send-detail__timeline-icon {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
    box-shadow: 0 0 0 4px rgb(59 130 246 / 10%);
}

.fd-email-send-detail__timeline li > div {
    min-width: 0;
}

.fd-email-send-detail__timeline strong {
    color: var(--color-font-default-light, #111827);
    display: block;
    font-size: 13px;
}

.fd-email-send-detail__timeline li p,
.fd-email-send-detail__timeline li small {
    color: var(--color-font-subtle-light, #6b7280);
    display: block;
    line-height: 1.45;
    margin-top: 3px;
}

.fd-email-send-detail__relation,
.fd-email-send-detail__execution-summary {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-3);
    margin-top: 17px;
}

.fd-email-send-detail__rail-icon {
    align-items: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--fd-radius);
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
}

.fd-email-send-detail__rail-icon .material-symbols-outlined {
    font-size: 22px;
}

.fd-email-send-detail__relation > div,
.fd-email-send-detail__execution-summary > div {
    min-width: 0;
}

.fd-email-send-detail__relation strong,
.fd-email-send-detail__relation > div > a,
.fd-email-send-detail__execution-summary strong {
    color: var(--color-font-default-light, #111827);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.fd-email-send-detail__relation > div > a:hover,
.fd-email-send-detail__relation > div > a:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-send-detail__relation > div > a:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 3px;
}

.fd-email-send-detail__relation p,
.fd-email-send-detail__execution-summary p,
.fd-email-send-detail__no-trace {
    color: var(--color-font-subtle-light, #6b7280);
    line-height: 1.55;
    margin-top: 5px;
}

.fd-email-send-detail__relation-id {
    margin-top: 8px;
}

.fd-email-send-detail__campaign.is-restricted
    .fd-email-send-detail__rail-icon {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-300, #d1d5db);
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-email-send-detail__campaign.is-attention
    .fd-email-send-detail__rail-icon {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.fd-email-send-detail__traces {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    list-style: none;
    margin: 17px 0 0;
    padding: 6px 0 0;
}

.fd-email-send-detail__traces li {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    justify-content: space-between;
    min-width: 0;
    padding-top: 10px;
}

.fd-email-send-detail__traces li > span:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-email-send-detail__trace-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
}

.fd-email-send-detail__no-trace {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    margin-top: 17px;
    padding-top: 13px;
}

.fd-email-send-detail__toast {
    background: #111827;
    border-radius: var(--fd-radius);
    bottom: 24px;
    box-shadow: 0 12px 28px rgb(15 23 42 / 22%);
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    left: 50%;
    margin: 0;
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 14px;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    z-index: 60;
}

.dark .fd-email-send-detail__header,
.dark .fd-email-send-detail__result,
.dark .fd-email-send-detail__message,
.dark .fd-email-send-detail__timeline,
.dark .fd-email-send-detail__rail > section {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-send-detail__icon,
.dark .fd-email-send-detail__rail-icon {
    background: rgb(37 99 235 / 18%);
    border-color: rgb(96 165 250 / 24%);
    color: #93c5fd;
}

.dark .fd-email-send-detail__heading h1,
.dark .fd-email-send-detail__metrics dd,
.dark .fd-email-send-detail__result h2,
.dark .fd-email-send-detail__message h2,
.dark .fd-email-send-detail__message dd,
.dark .fd-email-send-detail__timeline h2,
.dark .fd-email-send-detail__timeline strong,
.dark .fd-email-send-detail__rail h2,
.dark .fd-email-send-detail__relation strong,
.dark .fd-email-send-detail__relation > div > a,
.dark .fd-email-send-detail__execution-summary strong {
    color: var(--color-font-default-dark, #f9fafb);
}

.dark .fd-email-send-detail__recipient strong {
    color: var(--color-font-default-dark, #e5e7eb);
}

.dark .fd-email-send-detail__recipient,
.dark .fd-email-send-detail__id,
.dark .fd-email-send-detail__relation-id,
.dark .fd-email-send-detail__status-summary,
.dark .fd-email-send-detail__metrics dt,
.dark .fd-email-send-detail__metrics small,
.dark .fd-email-send-detail__eyebrow,
.dark .fd-email-send-detail__result p,
.dark .fd-email-send-detail__message header p,
.dark .fd-email-send-detail__message dt,
.dark .fd-email-send-detail__timeline header p,
.dark .fd-email-send-detail__timeline li p,
.dark .fd-email-send-detail__timeline li small,
.dark .fd-email-send-detail__relation p,
.dark .fd-email-send-detail__execution-summary p,
.dark .fd-email-send-detail__no-trace,
.dark .fd-email-send-detail__id code,
.dark .fd-email-send-detail__relation-id code,
.dark .fd-email-send-detail__traces code,
.dark .fd-email-send-detail__traces small {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-send-detail__status-summary,
.dark .fd-email-send-detail__metrics,
.dark .fd-email-send-detail__metrics > div + div,
.dark .fd-email-send-detail__message dl,
.dark .fd-email-send-detail__message dl > div + div,
.dark .fd-email-send-detail__content-boundary,
.dark .fd-email-send-detail__traces,
.dark .fd-email-send-detail__no-trace {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-send-detail__content-boundary {
    background: var(--color-base-800, #1f2937);
}

.dark .fd-email-send-detail__read-only,
.dark .fd-email-send-detail__icon-button:hover,
.dark .fd-email-send-detail__icon-button:focus-visible,
.dark .fd-email-send-detail__timeline-icon,
.dark .fd-email-send-detail__campaign.is-restricted
    .fd-email-send-detail__rail-icon {
    background: var(--color-base-800, #1f2937);
}

.dark .fd-email-send-detail__icon-button,
.dark .fd-email-send-detail__timeline-icon,
.dark .fd-email-send-detail__campaign.is-restricted
    .fd-email-send-detail__rail-icon {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-send-detail__timeline-icon,
.dark .fd-email-send-detail__campaign.is-restricted
    .fd-email-send-detail__rail-icon {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-send-detail__timeline li:not(:last-child)::after {
    background: var(--color-base-700, #374151);
}

.dark .fd-email-send-detail__timeline li.is-done:not(:last-child)::after {
    background: #166534;
}

.dark .fd-email-send-detail__attention {
    background: rgb(154 52 18 / 18%);
    border-color: rgb(251 146 60 / 28%);
    color: #fdba74;
}

.dark .fd-email-send-detail__result.is-success {
    border-color: rgb(34 197 94 / 36%);
}

.dark .fd-email-send-detail__result.is-success
    .fd-email-send-detail__result-icon,
.dark .fd-email-send-detail__timeline li.is-done
    .fd-email-send-detail__timeline-icon {
    background: rgb(5 150 105 / 18%);
    border-color: rgb(52 211 153 / 32%);
    color: #6ee7b7;
}

.dark .fd-email-send-detail__result.is-danger {
    border-color: rgb(239 68 68 / 36%);
}

.dark .fd-email-send-detail__result.is-danger
    .fd-email-send-detail__result-icon {
    background: rgb(220 38 38 / 18%);
    color: #fca5a5;
}

.dark .fd-email-send-detail__result.is-warning {
    border-color: rgb(245 158 11 / 36%);
}

.dark .fd-email-send-detail__result.is-warning
    .fd-email-send-detail__result-icon {
    background: rgb(217 119 6 / 18%);
    color: #fcd34d;
}

.dark .fd-email-send-detail__result.is-info
    .fd-email-send-detail__result-icon,
.dark .fd-email-send-detail__timeline li.is-current
    .fd-email-send-detail__timeline-icon {
    background: rgb(37 99 235 / 18%);
    border-color: rgb(96 165 250 / 32%);
    color: #93c5fd;
}

.fd-email-send-identity__title-link:focus-visible,
.fd-email-send-identity__preview:focus-visible,
.fd-email-send-campaign > a:focus-visible {
    outline: 2px solid var(--color-primary-600, #2563eb);
    outline-offset: 2px;
}

.dark .fd-email-send-identity__mark {
    background: rgb(37 99 235 / 18%);
    border-color: rgb(96 165 250 / 24%);
    color: #93c5fd;
}

.dark .fd-email-send-identity__preview,
.dark .fd-email-send-campaign--empty,
.dark .fd-email-send-detail__back,
.dark .fd-email-send-safe-error {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-send-identity__preview:hover,
.dark .fd-email-send-identity__preview:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

.dark .fd-email-send-identity__copy small,
.dark .fd-email-send-recipient small,
.dark .fd-email-send-type small,
.dark .fd-email-send-campaign small,
.dark .fd-email-send-status small {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-subscriber-identity__mark {
    background: rgb(5 150 105 / 18%);
    border-color: rgb(52 211 153 / 24%);
    color: #6ee7b7;
}

.dark .fd-subscriber-identity__copy small,
.dark .fd-subscriber-owner small,
.dark .fd-subscriber-channels small,
.dark .fd-subscriber-owner--guest,
.dark .fd-subscriber-owner--restricted,
.dark .fd-subscriber-channels--empty,
.dark .fd-subscriber-channels--restricted,
.dark .fd-subscriber-actions--empty {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-subscriber-channel-chip {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-subscriber-channel-chip:hover,
.dark .fd-subscriber-channel-chip:focus-visible {
    background: rgb(37 99 235 / 18%);
    border-color: rgb(96 165 250 / 32%);
    color: #93c5fd;
}

.dark .fd-subscriber-channel-chip--missing {
    background: rgb(220 38 38 / 18%);
    border-color: rgb(248 113 113 / 28%);
    color: #fca5a5;
}

.dark .fd-subscriber-actions__link {
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-subscriber-actions__link:hover,
.dark .fd-subscriber-actions__link:focus-visible {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-600, #4b5563);
    color: var(--color-primary-400, #60a5fa);
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="subscriber"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="subscriber"] #result_list td::before {
        min-width: 92px;
    }

    .fd-subscriber-identity,
    .fd-subscriber-owner,
    .fd-subscriber-channels,
    .fd-subscriber-actions {
        max-width: min(100%, 300px);
        min-width: 0;
    }
}

@media screen and (max-width: 1100px) {
    .fd-email-send-detail__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-send-detail__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="emailsend"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="emailsend"] #result_list td::before {
        min-width: 92px;
    }

    .fd-email-send-identity,
    .fd-email-send-recipient,
    .fd-email-send-campaign,
    .fd-email-send-status {
        max-width: min(100%, 280px);
        min-width: 0;
    }

    .fd-email-send-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }

    .fd-email-send-detail__header-main {
        padding: 20px 18px 16px;
    }

    .fd-email-send-detail__identity {
        gap: var(--fd-space-3);
    }

    .fd-email-send-detail__icon {
        flex-basis: 44px;
        height: 44px;
    }

    .fd-email-send-detail__icon .material-symbols-outlined {
        font-size: 23px;
    }

    .fd-email-send-detail__heading h1 {
        font-size: 21px;
    }

    .fd-email-send-detail__recipient strong,
    .fd-email-send-detail__id code {
        max-width: calc(100vw - 140px);
    }

    .fd-email-send-detail__status-summary {
        padding: 12px 18px;
    }

    .fd-email-send-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-email-send-detail__metrics > div {
        padding: 14px 16px;
    }

    .fd-email-send-detail__metrics > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-base-200, #e5e7eb);
    }

    .fd-email-send-detail__metrics > div:nth-child(4) {
        border-top: 1px solid var(--color-base-200, #e5e7eb);
    }

    .dark .fd-email-send-detail__metrics > div:nth-child(3),
    .dark .fd-email-send-detail__metrics > div:nth-child(4) {
        border-top-color: var(--color-base-700, #374151);
    }

    .fd-email-send-detail__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-send-detail__rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-send-detail__result {
        align-items: flex-start;
        padding: 18px;
    }

    .fd-email-send-detail__message,
    .fd-email-send-detail__timeline,
    .fd-email-send-detail__rail > section {
        padding: 17px;
    }

    .fd-email-send-detail__message dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-send-detail__message dl > div + div {
        border-left: 0;
        border-top: 1px solid var(--color-base-200, #e5e7eb);
        padding-left: 0;
    }

    .dark .fd-email-send-detail__message dl > div + div {
        border-top-color: var(--color-base-700, #374151);
    }

    .fd-email-send-detail__content-boundary {
        margin: 0 -17px -17px;
        padding: 13px 17px;
    }

    .fd-email-send-detail__timeline ol {
        gap: 16px;
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-send-detail__timeline li {
        gap: 12px;
        grid-template-columns: 40px minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }

    .fd-email-send-detail__timeline li:not(:last-child)::after {
        bottom: -17px;
        height: auto;
        left: 19px;
        right: auto;
        top: 40px;
        width: 2px;
    }
}

/* Email Campaign create workflow. */
.fd-email-campaign-create {
    max-width: 1240px;
}

.fd-email-campaign-create__header {
    align-items: flex-start;
    display: flex;
    gap: var(--fd-space-4);
    justify-content: space-between;
}

.fd-email-campaign-create__header > a {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 6px;
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 600;
    gap: 7px;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
}

.fd-email-campaign-create__header > a:hover,
.fd-email-campaign-create__header > a:focus-visible {
    background: var(--color-base-50, #f9fafb);
    border-color: var(--color-primary-400, #60a5fa);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-email-campaign-create__header .material-symbols-outlined {
    font-size: 19px;
}

.fd-email-campaign-create__notice {
    border: 1px solid;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1.5;
    padding: 12px 14px;
}

.fd-email-campaign-create__notice--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.fd-email-campaign-create__notice--warning,
.fd-email-campaign-create__notice--dialog {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.fd-email-campaign-create__layout {
    align-items: start;
    display: grid;
    gap: var(--fd-space-5);
    grid-template-columns: minmax(0, 1fr) 340px;
}

.fd-email-campaign-create__editor,
.fd-email-campaign-create__summary {
    background: #fff;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
}

.fd-email-campaign-create__editor {
    min-width: 0;
    padding: 24px;
}

.fd-email-campaign-create__summary {
    padding: 22px;
    position: sticky;
    top: 88px;
}

.fd-email-campaign-create__section-heading {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.fd-email-campaign-create__section-heading > .material-symbols-outlined {
    align-items: center;
    background: #ecfeff;
    border: 1px solid #cffafe;
    border-radius: 6px;
    color: #0e7490;
    display: inline-flex;
    flex: 0 0 38px;
    font-size: 21px;
    height: 38px;
    justify-content: center;
}

.fd-email-campaign-create__section-heading h2,
.fd-email-campaign-create__section-heading p {
    margin: 0;
}

.fd-email-campaign-create__section-heading h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.fd-email-campaign-create__section-heading p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 13px;
    line-height: 1.55;
    margin-top: 2px;
}

.fd-email-campaign-create__field {
    margin-top: 22px;
}

.fd-email-campaign-create__field > label {
    color: var(--color-font-important-light, #111827);
    display: block;
    font-size: 14px;
    font-weight: 650;
    margin-bottom: 8px;
}

.fd-email-campaign-create__field select,
.fd-email-campaign-create__field input,
.fd-email-campaign-create__field textarea {
    max-width: none;
    width: 100%;
}

.fd-email-campaign-create__field textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    min-height: 360px;
    resize: vertical;
}

.fd-email-campaign-create__help {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 12px;
    line-height: 1.55;
    margin: 7px 0 0;
}

.fd-email-campaign-create__field-error,
.fd-email-campaign-create__form-error {
    color: var(--fd-danger, #dc2626);
    font-size: 13px;
    line-height: 1.5;
    margin: 7px 0 0;
}

.fd-email-campaign-create__field-error ul,
.fd-email-campaign-create__form-error ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-email-campaign-composer {
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    margin-top: 24px;
    min-width: 0;
    overflow: hidden;
}

.fd-email-campaign-composer__header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 15px 16px;
}

.fd-email-campaign-composer__header label,
.fd-email-campaign-composer__header p {
    margin: 0;
}

.fd-email-campaign-composer__header label {
    color: var(--color-font-important-light, #111827);
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.fd-email-campaign-composer__header p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 2px;
}

.fd-email-campaign-composer__modes {
    background: #f1f5f9;
    border: 1px solid #dbe2ea;
    border-radius: 7px;
    display: inline-grid;
    flex: 0 0 auto;
    gap: 2px;
    grid-template-columns: repeat(2, auto);
    padding: 3px;
}

.fd-email-campaign-composer__modes button {
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    min-height: 30px;
    padding: 0 11px;
}

.fd-email-campaign-composer__modes button[aria-pressed="true"] {
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 9%);
    color: #172033;
}

.fd-email-campaign-composer__blocks {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: 7px;
    min-height: 43px;
    overflow-x: auto;
    padding: 6px 12px;
}

.fd-email-campaign-composer__blocks > span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    margin-right: 2px;
    text-transform: uppercase;
}

.fd-email-campaign-composer__blocks button {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
    color: #334155;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 650;
    gap: 5px;
    min-height: 30px;
    padding: 0 9px;
}

.fd-email-campaign-composer__blocks button:hover,
.fd-email-campaign-composer__blocks button:focus-visible {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.fd-email-campaign-composer__blocks button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.fd-email-campaign-composer__blocks .material-symbols-outlined {
    font-size: 17px;
}

.fd-email-campaign-composer__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 460px;
}

.fd-email-campaign-create--enhanced
.fd-email-campaign-composer__workspace {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.fd-email-campaign-composer__editor {
    background: #fff;
    min-width: 0;
}

.fd-email-campaign-create--enhanced
.fd-email-campaign-composer__editor {
    border-right: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-email-campaign-composer__editor .ql-toolbar.ql-snow {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: 2px;
    min-height: 48px;
    overflow-x: auto;
    padding: 7px 9px;
}

.fd-email-campaign-composer__editor .ql-container.ql-snow {
    border: 0;
    color: #172033;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    height: 410px;
}

.fd-email-campaign-composer__editor .ql-editor {
    line-height: 1.7;
    padding: 22px;
}

.fd-email-campaign-composer__editor .ql-editor.ql-blank::before {
    color: #94a3b8;
    font-style: normal;
    left: 22px;
    right: 22px;
}

.fd-email-campaign-composer__editor .fd-email-button-block {
    margin: 18px 0;
    text-align: center;
}

.fd-email-campaign-composer__editor .fd-email-button {
    background: #2563eb;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 12px 22px;
    text-decoration: none;
}

.fd-email-campaign-composer__editor .fd-email-divider {
    border: 0;
    border-top: 1px solid #dce2ea;
    margin: 24px 0;
}

.fd-email-campaign-composer__editor--source > .ql-toolbar,
.fd-email-campaign-composer__editor--source > .ql-container {
    display: none;
}

[data-fd-email-campaign-source-editor] {
    background: #0b1220;
    height: 100%;
    padding: 14px;
}

[data-fd-email-campaign-source-editor] > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

[data-fd-email-campaign-source-editor] label {
    color: #dbe5f4;
    font-size: 12px;
    font-weight: 700;
}

[data-fd-email-campaign-source-editor] > div > span {
    color: #8fa0b8;
    font-size: 11px;
}

.fd-email-campaign-create__field
[data-fd-email-campaign-html],
[data-fd-email-campaign-source-editor] textarea {
    background: #111827;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e5edf8;
    display: block;
    font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    min-height: 400px;
    padding: 15px;
    resize: vertical;
    tab-size: 2;
    width: 100%;
}

.fd-email-campaign-composer__preview {
    background: #eef2f7;
    display: none;
    grid-template-rows: 48px 1fr;
    min-width: 0;
}

.fd-email-campaign-create--enhanced
.fd-email-campaign-composer__preview {
    display: grid;
}

.fd-email-campaign-composer__preview > div {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    color: #344057;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: space-between;
    padding: 0 13px;
}

.fd-email-campaign-composer__preview small {
    color: #64748b;
    font-weight: 500;
}

.fd-email-campaign-composer__preview iframe {
    background: #fff;
    border: 0;
    height: 100%;
    width: 100%;
}

.fd-email-campaign-composer__fallback {
    background: #fff7e6;
    color: #8a4b10;
    font-size: 12px;
    margin: 0;
    padding: 10px 14px;
}

.fd-email-campaign-create--enhanced
.fd-email-campaign-composer__fallback {
    display: none;
}

.fd-email-campaign-create:not(.fd-email-campaign-create--enhanced)
.fd-email-campaign-composer__modes,
.fd-email-campaign-create:not(.fd-email-campaign-create--enhanced)
.fd-email-campaign-composer__blocks,
.fd-email-campaign-create:not(.fd-email-campaign-create--enhanced)
[data-fd-email-campaign-rich-editor] {
    display: none;
}

.fd-email-campaign-block-dialog {
    background: transparent;
    border: 0;
    inset: 0;
    margin: auto;
    max-width: 500px;
    padding: 0;
    width: min(500px, 92vw);
}

.fd-email-campaign-block-dialog::backdrop {
    backdrop-filter: blur(2px);
    background: rgb(15 23 42 / 52%);
}

.fd-email-campaign-block-dialog__panel {
    background: #fff;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 22px 60px rgb(15 23 42 / 24%);
    overflow: hidden;
}

.fd-email-campaign-block-dialog__panel > header,
.fd-email-campaign-block-dialog__panel > footer {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 16px 18px;
}

.fd-email-campaign-block-dialog__panel > header {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-email-campaign-block-dialog__panel > header span:not(.material-symbols-outlined) {
    color: #2563eb;
    display: block;
    font-size: 11px;
    font-weight: 750;
    margin-bottom: 2px;
}

.fd-email-campaign-block-dialog__panel h2 {
    color: #111827;
    font-size: 18px;
    font-weight: 750;
    margin: 0;
}

.fd-email-campaign-block-dialog__panel > header > button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #64748b;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.fd-email-campaign-block-dialog__panel > header > button:hover {
    background: #f1f5f9;
    color: #111827;
}

.fd-email-campaign-block-dialog__body {
    display: grid;
    gap: 15px;
    padding: 18px;
}

.fd-email-campaign-block-dialog__body label {
    display: grid;
    gap: 7px;
}

.fd-email-campaign-block-dialog__body label > span {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.fd-email-campaign-block-dialog__body input {
    min-height: 42px;
    width: 100%;
}

.fd-email-campaign-block-dialog__body > p {
    color: #64748b;
    font-size: 12px;
    margin: -5px 0 0;
}

.fd-email-campaign-block-dialog__panel > footer {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    justify-content: flex-end;
}

.fd-email-campaign-block-dialog__panel > footer button {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-weight: 650;
    gap: 6px;
    justify-content: center;
    min-height: 39px;
    padding: 0 14px;
}

.fd-email-campaign-block-dialog__panel > footer button:first-child {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.fd-email-campaign-block-dialog__panel > footer button:last-child {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
}

.fd-email-campaign-block-dialog__panel > footer .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-campaign-create__summary dl {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    margin: 20px 0 0;
}

.fd-email-campaign-create__summary dl > div {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 13px 0;
}

.fd-email-campaign-create__summary dl > div + div {
    border-top: 1px solid var(--color-base-100, #f3f4f6);
}

.fd-email-campaign-create__summary dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 13px;
}

.fd-email-campaign-create__summary dd {
    color: var(--color-font-important-light, #111827);
    font-size: 13px;
    font-weight: 650;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.fd-email-campaign-create__impact {
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #475569;
    display: flex;
    gap: 9px;
    margin-top: 18px;
    padding: 12px;
}

.fd-email-campaign-create__impact .material-symbols-outlined {
    color: #0e7490;
    flex: 0 0 auto;
    font-size: 19px;
}

.fd-email-campaign-create__impact p {
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

.fd-email-campaign-create__actions {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    margin-top: 20px;
}

.fd-email-campaign-create__actions > a,
.fd-email-campaign-create__actions > button,
.fd-email-campaign-dialog footer > div > button {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-weight: 650;
    gap: 7px;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    text-decoration: none;
}

.fd-email-campaign-create__actions > a,
.fd-email-campaign-dialog footer > div > button:first-child {
    background: #fff;
    border: 1px solid var(--color-base-300, #d1d5db);
    color: var(--color-font-default-light, #374151);
}

.fd-email-campaign-create__actions > button,
.fd-email-campaign-dialog footer > div > button:last-child {
    background: var(--color-primary-600, #2563eb);
    border: 1px solid var(--color-primary-600, #2563eb);
    color: #fff;
}

.fd-email-campaign-create__actions > button:hover,
.fd-email-campaign-dialog footer > div > button:last-child:hover {
    background: var(--color-primary-700, #1d4ed8);
}

.fd-email-campaign-create__actions > button:disabled,
.fd-email-campaign-dialog footer > div > button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.fd-email-campaign-create__actions .material-symbols-outlined,
.fd-email-campaign-dialog footer .material-symbols-outlined {
    font-size: 19px;
}

.fd-email-campaign-dialog {
    background: transparent;
    border: 0;
    height: min(760px, 92vh);
    inset: 0;
    margin: auto;
    max-height: 92vh;
    max-width: 1180px;
    padding: 0;
    width: min(1180px, 94vw);
}

.fd-email-campaign-dialog::backdrop {
    background: rgb(15 23 42 / 58%);
    backdrop-filter: blur(2px);
}

.fd-email-campaign-dialog__panel {
    background: #fff;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgb(15 23 42 / 24%);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.fd-email-campaign-dialog__panel > header,
.fd-email-campaign-dialog__panel > footer {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 18px 22px;
}

.fd-email-campaign-dialog__panel > header {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-email-campaign-dialog__panel > header h2,
.fd-email-campaign-dialog__panel > header p {
    margin: 0;
}

.fd-email-campaign-dialog__panel > header h2 {
    color: var(--color-font-important-light, #111827);
    font-size: 20px;
    font-weight: 750;
    line-height: 1.4;
}

.fd-email-campaign-dialog__panel > header p {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 13px;
    margin-top: 2px;
}

.fd-email-campaign-dialog__eyebrow {
    color: #0e7490;
    display: block;
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 3px;
}

.fd-email-campaign-dialog__panel > header > button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
}

.fd-email-campaign-dialog__panel > header > button:hover,
.fd-email-campaign-dialog__panel > header > button:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-font-important-light, #111827);
}

.fd-email-campaign-dialog__panel
    > .fd-email-campaign-create__notice--dialog {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    margin: 0;
}

.fd-email-campaign-dialog__body {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 330px minmax(0, 1fr);
    min-height: 0;
    overflow: auto;
}

.fd-email-campaign-dialog__impact {
    border-right: 1px solid var(--color-base-200, #e5e7eb);
    padding: 24px 22px;
}

.fd-email-campaign-dialog__recipient-count {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 8px;
    display: grid;
    padding: 18px;
}

.fd-email-campaign-dialog__recipient-count > span {
    color: #155e75;
    font-size: 13px;
    font-weight: 650;
}

.fd-email-campaign-dialog__recipient-count > strong {
    color: #164e63;
    font-size: 36px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    margin: 5px 0;
}

.fd-email-campaign-dialog__recipient-count > small {
    color: #0e7490;
    font-size: 12px;
}

.fd-email-campaign-dialog__impact dl {
    margin: 18px 0 0;
}

.fd-email-campaign-dialog__impact dl > div {
    padding: 11px 0;
}

.fd-email-campaign-dialog__impact dl > div + div {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-email-campaign-dialog__impact dt {
    color: var(--color-font-subtle-light, #6b7280);
    font-size: 12px;
    margin-bottom: 3px;
}

.fd-email-campaign-dialog__impact dd {
    color: var(--color-font-important-light, #111827);
    font-size: 13px;
    font-weight: 650;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-email-campaign-dialog__warning {
    align-items: flex-start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding: 11px;
}

.fd-email-campaign-dialog__warning .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 18px;
}

.fd-email-campaign-dialog__warning p {
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}

.fd-email-campaign-dialog__preview {
    min-width: 0;
    padding: 22px;
}

.fd-email-campaign-dialog__preview > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.fd-email-campaign-dialog__preview h3 {
    color: var(--color-font-important-light, #111827);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.fd-email-campaign-dialog__preview > div > span {
    background: #f1f5f9;
    border-radius: 999px;
    color: #475569;
    font-size: 11px;
    font-weight: 650;
    padding: 4px 8px;
}

.fd-email-campaign-dialog__preview iframe {
    background: #fff;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 6px;
    height: 460px;
    width: 100%;
}

.fd-email-campaign-dialog__panel > footer {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-email-campaign-dialog__confirmation {
    align-items: flex-start;
    color: var(--color-font-default-light, #374151);
    display: flex;
    font-size: 13px;
    gap: 9px;
    line-height: 1.5;
    max-width: 560px;
}

.fd-email-campaign-dialog__confirmation input {
    flex: 0 0 auto;
    height: 17px;
    margin-top: 1px;
    width: 17px;
}

.fd-email-campaign-dialog footer > div {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.dark .fd-email-campaign-create__editor,
.dark .fd-email-campaign-create__summary,
.dark .fd-email-campaign-dialog__panel,
.dark .fd-email-campaign-composer,
.dark .fd-email-campaign-composer__header,
.dark .fd-email-campaign-composer__editor,
.dark .fd-email-campaign-block-dialog__panel {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-campaign-create__section-heading h2,
.dark .fd-email-campaign-create__field > label,
.dark .fd-email-campaign-create__summary dd,
.dark .fd-email-campaign-dialog__panel > header h2,
.dark .fd-email-campaign-dialog__impact dd,
.dark .fd-email-campaign-dialog__preview h3 {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-email-campaign-composer__header label,
.dark .fd-email-campaign-block-dialog__panel h2,
.dark .fd-email-campaign-block-dialog__body label > span {
    color: var(--color-font-important-dark, #f9fafb);
}

.dark .fd-email-campaign-create__section-heading p,
.dark .fd-email-campaign-create__help,
.dark .fd-email-campaign-create__summary dt,
.dark .fd-email-campaign-dialog__panel > header p,
.dark .fd-email-campaign-dialog__impact dt,
.dark .fd-email-campaign-dialog__confirmation {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-campaign-composer__header p,
.dark .fd-email-campaign-block-dialog__body > p {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-email-campaign-create__summary dl,
.dark .fd-email-campaign-create__summary dl > div + div,
.dark .fd-email-campaign-dialog__panel > header,
.dark .fd-email-campaign-dialog__impact,
.dark .fd-email-campaign-dialog__impact dl > div + div,
.dark .fd-email-campaign-dialog__panel > footer,
.dark .fd-email-campaign-dialog__preview iframe {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-campaign-composer__blocks,
.dark .fd-email-campaign-composer__preview > div {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-email-campaign-composer__blocks button,
.dark .fd-email-campaign-block-dialog__panel > footer button:first-child {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-600, #4b5563);
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-email-campaign-create__impact {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-subtle-dark, #9ca3af);
}

@media screen and (max-width: 1023px) {
    .fd-email-campaign-create__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-campaign-create__summary {
        position: static;
    }

    .fd-email-campaign-dialog__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-campaign-dialog__impact {
        border-bottom: 1px solid var(--color-base-200, #e5e7eb);
        border-right: 0;
    }

    .fd-email-campaign-create--enhanced
    .fd-email-campaign-composer__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-campaign-create--enhanced
    .fd-email-campaign-composer__editor {
        border-bottom: 1px solid var(--color-base-200, #e5e7eb);
        border-right: 0;
    }

    .fd-email-campaign-composer__preview {
        min-height: 430px;
    }
}

@media screen and (max-width: 640px) {
    .fd-email-campaign-create__header {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-email-campaign-create__header > a {
        align-self: flex-start;
    }

    .fd-email-campaign-create__editor,
    .fd-email-campaign-create__summary {
        padding: 17px;
    }

    .fd-email-campaign-composer__header {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-email-campaign-composer__modes {
        align-self: flex-start;
    }

    .fd-email-campaign-composer__editor .ql-container.ql-snow {
        height: 360px;
    }

    .fd-email-campaign-composer__preview {
        min-height: 380px;
    }

    .fd-email-campaign-create__actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-campaign-dialog {
        height: 96vh;
        max-height: 96vh;
        width: 96vw;
    }

    .fd-email-campaign-dialog__panel {
        height: 100%;
    }

    .fd-email-campaign-dialog__panel > header,
    .fd-email-campaign-dialog__panel > footer,
    .fd-email-campaign-dialog__impact,
    .fd-email-campaign-dialog__preview {
        padding: 16px;
    }

    .fd-email-campaign-dialog__preview iframe {
        height: 330px;
    }

    .fd-email-campaign-dialog__panel > footer {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-email-campaign-dialog footer > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Email Campaign detail */
.fd-email-campaign-detail {
    --fd-campaign-detail-border: #dfe5ee;
    --fd-campaign-detail-muted: #667085;
    --fd-campaign-detail-text: #172033;
    --fd-campaign-detail-surface: #ffffff;
    --fd-campaign-detail-soft: #f7f9fc;
    color: var(--fd-campaign-detail-text);
    display: grid;
    gap: 18px;
    min-width: 0;
}

.fd-email-campaign-detail *,
.fd-email-campaign-detail *::before,
.fd-email-campaign-detail *::after {
    box-sizing: border-box;
}

.fd-email-campaign-detail button {
    font: inherit;
}

.fd-email-campaign-detail a:focus-visible,
.fd-email-campaign-detail button:focus-visible {
    outline: 3px solid rgb(37 99 235 / 24%);
    outline-offset: 2px;
}

.fd-email-campaign-detail__back {
    align-items: center;
    color: var(--fd-campaign-detail-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 650;
    gap: 7px;
    justify-self: start;
    min-height: 36px;
    text-decoration: none;
}

.fd-email-campaign-detail__back:hover {
    color: #1d4ed8;
}

.fd-email-campaign-detail__back .material-symbols-outlined {
    font-size: 20px;
}

.fd-email-campaign-detail__header,
.fd-email-campaign-detail__attention,
.fd-email-campaign-detail__main > section,
.fd-email-campaign-detail__rail > section {
    background: var(--fd-campaign-detail-surface);
    border: 1px solid var(--fd-campaign-detail-border);
    border-radius: 8px;
}

.fd-email-campaign-detail__header {
    overflow: hidden;
}

.fd-email-campaign-detail__header-main {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: 26px 28px 18px;
}

.fd-email-campaign-detail__identity {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.fd-email-campaign-detail__icon {
    align-items: center;
    background: #eaf1ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 56px;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.fd-email-campaign-detail__icon .material-symbols-outlined {
    font-size: 29px;
}

.fd-email-campaign-detail__heading {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.fd-email-campaign-detail__heading-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.fd-email-campaign-detail__heading h1 {
    color: var(--fd-campaign-detail-text);
    font-size: 27px;
    font-weight: 750;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-email-campaign-detail__id {
    align-items: center;
    color: var(--fd-campaign-detail-muted);
    display: flex;
    gap: 7px;
    min-width: 0;
}

.fd-email-campaign-detail__id code,
.fd-email-campaign-detail__channel code,
.fd-email-campaign-detail__creator code {
    color: inherit;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.fd-email-campaign-detail__icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.fd-email-campaign-detail__icon-button:hover {
    background: #eef2f7;
    color: #1d4ed8;
}

.fd-email-campaign-detail__icon-button .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-campaign-detail__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.fd-email-campaign-detail__action {
    align-items: center;
    border: 1px solid var(--fd-campaign-detail-border);
    border-radius: 7px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 650;
    gap: 7px;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    text-decoration: none;
}

.fd-email-campaign-detail__action .material-symbols-outlined {
    font-size: 19px;
}

.fd-email-campaign-detail__action.is-secondary {
    background: #fff;
    color: #344054;
}

.fd-email-campaign-detail__action.is-secondary:hover {
    background: #f8fafc;
    border-color: #b8c2d1;
}

.fd-email-campaign-detail__action.is-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.fd-email-campaign-detail__action.is-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.fd-email-campaign-detail__status-summary {
    color: var(--fd-campaign-detail-muted);
    margin: 0;
    padding: 0 28px 22px 100px;
}

.fd-email-campaign-detail__metrics {
    border-top: 1px solid var(--fd-campaign-detail-border);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.fd-email-campaign-detail__metrics > div {
    min-width: 0;
    padding: 18px 22px;
}

.fd-email-campaign-detail__metrics > div + div {
    border-left: 1px solid var(--fd-campaign-detail-border);
}

.fd-email-campaign-detail__metrics dt,
.fd-email-campaign-detail__progress dt {
    color: var(--fd-campaign-detail-muted);
    font-size: 12px;
    font-weight: 650;
    margin-bottom: 6px;
}

.fd-email-campaign-detail__metrics dd {
    color: var(--fd-campaign-detail-text);
    font-size: 23px;
    font-weight: 750;
    line-height: 1.2;
    margin: 0;
}

.fd-email-campaign-detail__metrics small {
    color: #8792a5;
    display: block;
    font-size: 12px;
    margin-top: 5px;
}

.fd-email-campaign-detail__metrics .is-attention dd {
    color: #dc2626;
}

.fd-email-campaign-detail__attention {
    align-items: flex-start;
    background: #fff9ed;
    border-color: #f5cb76;
    color: #7c4a03;
    display: flex;
    gap: 13px;
    padding: 18px 20px;
}

.fd-email-campaign-detail__attention > .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 23px;
}

.fd-email-campaign-detail__attention h2 {
    color: #713f12;
    font-size: 15px;
    font-weight: 750;
    margin: 0 0 4px;
}

.fd-email-campaign-detail__attention p,
.fd-email-campaign-detail__attention ul {
    font-size: 13px;
    margin: 0;
}

.fd-email-campaign-detail__attention ul {
    margin-top: 7px;
    padding-left: 18px;
}

.fd-email-campaign-detail__workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    min-width: 0;
}

.fd-email-campaign-detail__main,
.fd-email-campaign-detail__rail {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.fd-email-campaign-detail__main > section,
.fd-email-campaign-detail__rail > section {
    min-width: 0;
    overflow: hidden;
}

.fd-email-campaign-detail__main > section > header,
.fd-email-campaign-detail__rail > section > header {
    align-items: flex-start;
    border-bottom: 1px solid var(--fd-campaign-detail-border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 18px 20px;
}

.fd-email-campaign-detail__main h2,
.fd-email-campaign-detail__rail h2 {
    color: var(--fd-campaign-detail-text);
    font-size: 16px;
    font-weight: 750;
    margin: 0;
}

.fd-email-campaign-detail__main header p {
    color: var(--fd-campaign-detail-muted);
    font-size: 12px;
    margin: 4px 0 0;
}

.fd-email-campaign-detail__progress > header > strong {
    color: #2563eb;
    font-size: 24px;
    line-height: 1;
}

.fd-email-campaign-detail__progress > progress {
    appearance: none;
    background: #e8edf5;
    border: 0;
    border-radius: 3px;
    display: block;
    height: 6px;
    margin: 22px 20px 12px;
    overflow: hidden;
    width: calc(100% - 40px);
}

.fd-email-campaign-detail__progress > progress::-webkit-progress-bar {
    background: #e8edf5;
}

.fd-email-campaign-detail__progress > progress::-webkit-progress-value {
    background: #2563eb;
}

.fd-email-campaign-detail__progress > progress::-moz-progress-bar {
    background: #2563eb;
}

.fd-email-campaign-detail__progress > dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 6px 20px 20px;
}

.fd-email-campaign-detail__progress > dl > div {
    border-left: 3px solid #cbd5e1;
    padding: 5px 13px;
}

.fd-email-campaign-detail__progress > dl > div.is-success {
    border-left-color: #16a34a;
}

.fd-email-campaign-detail__progress > dl > div.is-danger {
    border-left-color: #dc2626;
}

.fd-email-campaign-detail__progress dd {
    color: var(--fd-campaign-detail-text);
    font-size: 20px;
    font-weight: 750;
    margin: 0;
}

.fd-email-campaign-detail__preview-label {
    background: #eef2f7;
    border-radius: 999px;
    color: #526077;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 650;
    padding: 5px 9px;
}

.fd-email-campaign-detail__preview-frame {
    background: #eef2f7;
    padding: 14px;
}

.fd-email-campaign-detail__preview-frame iframe {
    background: #fff;
    border: 1px solid #d9e0ea;
    border-radius: 6px;
    display: block;
    height: 500px;
    width: 100%;
}

.fd-email-campaign-detail__sends > header > a {
    align-items: center;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 650;
    gap: 4px;
    min-height: 34px;
    text-decoration: none;
}

.fd-email-campaign-detail__sends > header > a:hover {
    color: #1d4ed8;
}

.fd-email-campaign-detail__sends > header > a .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-campaign-detail__send-list {
    display: grid;
}

.fd-email-campaign-detail__send {
    align-items: center;
    color: inherit;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 240px) 20px;
    min-height: 74px;
    padding: 13px 20px;
    text-decoration: none;
}

.fd-email-campaign-detail__send + .fd-email-campaign-detail__send {
    border-top: 1px solid var(--fd-campaign-detail-border);
}

.fd-email-campaign-detail__send:hover {
    background: var(--fd-campaign-detail-soft);
}

.fd-email-campaign-detail__send-recipient {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 0;
}

.fd-email-campaign-detail__send-recipient > .material-symbols-outlined {
    align-items: center;
    background: #eaf1ff;
    border-radius: 7px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 38px;
    font-size: 20px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.fd-email-campaign-detail__send-recipient > span:last-child,
.fd-email-campaign-detail__send-state {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fd-email-campaign-detail__send-recipient strong {
    color: var(--fd-campaign-detail-text);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fd-email-campaign-detail__send-recipient small,
.fd-email-campaign-detail__send-state small {
    color: var(--fd-campaign-detail-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.fd-email-campaign-detail__send-state {
    justify-items: start;
}

.fd-email-campaign-detail__send > .material-symbols-outlined {
    color: #98a2b3;
    font-size: 20px;
}

.fd-email-campaign-detail__empty {
    align-items: center;
    color: var(--fd-campaign-detail-muted);
    display: flex;
    gap: 12px;
    justify-content: center;
    min-height: 132px;
    padding: 24px;
    text-align: left;
}

.fd-email-campaign-detail__empty > .material-symbols-outlined {
    font-size: 28px;
}

.fd-email-campaign-detail__empty > div {
    display: grid;
    gap: 3px;
}

.fd-email-campaign-detail__empty strong {
    color: var(--fd-campaign-detail-text);
    font-size: 14px;
}

.fd-email-campaign-detail__empty small {
    font-size: 12px;
}

.fd-email-campaign-detail__empty.is-attention > .material-symbols-outlined {
    color: #b45309;
}

.fd-email-campaign-detail__channel,
.fd-email-campaign-detail__creator {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    padding: 18px;
}

.fd-email-campaign-detail__rail-icon,
.fd-email-campaign-detail__creator-avatar {
    align-items: center;
    background: #eaf1ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 16px;
    font-weight: 750;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.fd-email-campaign-detail__rail-icon .material-symbols-outlined,
.fd-email-campaign-detail__creator-avatar .material-symbols-outlined {
    font-size: 21px;
}

.fd-email-campaign-detail__channel.is-missing
    .fd-email-campaign-detail__rail-icon,
.fd-email-campaign-detail__creator.is-missing
    .fd-email-campaign-detail__creator-avatar {
    background: #fff4e5;
    color: #b45309;
}

.fd-email-campaign-detail__channel > div,
.fd-email-campaign-detail__creator > span:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.fd-email-campaign-detail__channel strong,
.fd-email-campaign-detail__creator strong {
    color: var(--fd-campaign-detail-text);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fd-email-campaign-detail__channel p,
.fd-email-campaign-detail__creator small {
    color: var(--fd-campaign-detail-muted);
    font-size: 12px;
    margin: 3px 0 0;
    overflow-wrap: anywhere;
}

.fd-email-campaign-detail__timeline ol {
    list-style: none;
    margin: 0;
    padding: 18px;
}

.fd-email-campaign-detail__timeline li {
    align-items: flex-start;
    display: flex;
    gap: 11px;
    min-height: 66px;
    position: relative;
}

.fd-email-campaign-detail__timeline li:not(:last-child)::after {
    background: var(--fd-campaign-detail-border);
    content: "";
    height: calc(100% - 31px);
    left: 15px;
    position: absolute;
    top: 31px;
    width: 1px;
}

.fd-email-campaign-detail__timeline-icon {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #dce3ec;
    border-radius: 50%;
    color: #64748b;
    display: inline-flex;
    flex: 0 0 31px;
    height: 31px;
    justify-content: center;
    width: 31px;
}

.fd-email-campaign-detail__timeline-icon .material-symbols-outlined {
    font-size: 17px;
}

.fd-email-campaign-detail__timeline li.is-done
    .fd-email-campaign-detail__timeline-icon {
    background: #eaf8ef;
    border-color: #a7dfbc;
    color: #15803d;
}

.fd-email-campaign-detail__timeline li > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.fd-email-campaign-detail__timeline strong {
    color: var(--fd-campaign-detail-text);
    font-size: 13px;
}

.fd-email-campaign-detail__timeline small,
.fd-email-campaign-detail__timeline time {
    color: var(--fd-campaign-detail-muted);
    font-size: 11px;
}

.fd-email-campaign-detail__toast {
    background: #172033;
    border-radius: 6px;
    bottom: 24px;
    color: #fff;
    font-size: 13px;
    left: 50%;
    max-width: min(360px, calc(100vw - 32px));
    padding: 10px 14px;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    z-index: 90;
}

.dark .fd-email-campaign-detail {
    --fd-campaign-detail-border: #334155;
    --fd-campaign-detail-muted: #94a3b8;
    --fd-campaign-detail-text: #e2e8f0;
    --fd-campaign-detail-surface: #172033;
    --fd-campaign-detail-soft: #1f2937;
}

.dark .fd-email-campaign-detail__icon,
.dark .fd-email-campaign-detail__send-recipient
    > .material-symbols-outlined,
.dark .fd-email-campaign-detail__rail-icon,
.dark .fd-email-campaign-detail__creator-avatar {
    background: #1e3a5f;
    color: #93c5fd;
}

.dark .fd-email-campaign-detail__action.is-secondary,
.dark .fd-email-campaign-detail__preview-frame iframe {
    background: #0f172a;
}

.dark .fd-email-campaign-detail__icon-button:hover,
.dark .fd-email-campaign-detail__preview-label {
    background: #273449;
}

.dark .fd-email-campaign-detail__attention {
    background: #422006;
    border-color: #854d0e;
    color: #fde68a;
}

.dark .fd-email-campaign-detail__attention h2 {
    color: #fef3c7;
}

.dark .fd-email-campaign-detail__progress > progress,
.dark .fd-email-campaign-detail__progress > progress::-webkit-progress-bar,
.dark .fd-email-campaign-detail__preview-frame {
    background: #263348;
}

.dark .fd-email-campaign-detail__timeline-icon {
    background: #253044;
    border-color: #42516a;
}

@media screen and (max-width: 1199px) {
    .fd-email-campaign-detail__workspace {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 290px);
    }
}

@media screen and (max-width: 1023px) {
    .fd-email-campaign-detail__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-campaign-detail__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-email-campaign-detail__timeline {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 767px) {
    .fd-email-campaign-detail {
        gap: 14px;
    }

    .fd-email-campaign-detail__header-main {
        align-items: stretch;
        flex-direction: column;
        padding: 20px 18px 14px;
    }

    .fd-email-campaign-detail__status-summary {
        padding: 0 18px 18px;
    }

    .fd-email-campaign-detail__actions {
        justify-content: stretch;
    }

    .fd-email-campaign-detail__action {
        flex: 1 1 180px;
    }

    .fd-email-campaign-detail__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-email-campaign-detail__metrics > div:nth-child(odd) {
        border-left: 0;
    }

    .fd-email-campaign-detail__metrics > div:nth-child(n + 3) {
        border-top: 1px solid var(--fd-campaign-detail-border);
    }

    .fd-email-campaign-detail__send {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) 20px;
    }

    .fd-email-campaign-detail__send-state {
        grid-column: 1 / -1;
        padding-left: 49px;
    }

    .fd-email-campaign-detail__send > .material-symbols-outlined {
        grid-column: 2;
        grid-row: 1;
    }

    .fd-email-campaign-detail__rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-campaign-detail__timeline {
        grid-column: auto;
    }
}

@media screen and (max-width: 520px) {
    .fd-email-campaign-detail__identity {
        gap: 12px;
    }

    .fd-email-campaign-detail__icon {
        flex-basis: 48px;
        height: 48px;
        width: 48px;
    }

    .fd-email-campaign-detail__heading h1 {
        font-size: 22px;
    }

    .fd-email-campaign-detail__id {
        align-items: flex-start;
    }

    .fd-email-campaign-detail__metrics > div {
        padding: 15px 16px;
    }

    .fd-email-campaign-detail__metrics dd {
        font-size: 20px;
    }

    .fd-email-campaign-detail__main > section > header,
    .fd-email-campaign-detail__rail > section > header {
        padding: 16px;
    }

    .fd-email-campaign-detail__progress > dl {
        padding-inline: 16px;
    }

    .fd-email-campaign-detail__preview-frame {
        padding: 8px;
    }

    .fd-email-campaign-detail__preview-frame iframe {
        height: 420px;
    }

    .fd-email-campaign-detail__send {
        padding: 13px 16px;
    }
}

/* ADM-02: productized backend user create and edit */
.fd-admin-user-form-page {
    color: var(--color-base-900, #111827);
    display: grid;
    gap: 18px;
    padding-bottom: 28px;
}

.fd-admin-user-form-page__back {
    align-items: center;
    color: var(--color-base-500, #6b7280);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    justify-self: start;
    text-decoration: none;
}

.fd-admin-user-form-page__back:hover {
    color: var(--color-primary-600, #2563eb);
}

.fd-admin-user-form-page__back .material-symbols-outlined {
    font-size: 19px;
}

.fd-admin-user-form-page__hero {
    align-items: center;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    justify-content: space-between;
    min-height: 96px;
    padding: 2px 0 20px;
}

.fd-admin-user-form-page__identity {
    align-items: center;
    display: flex;
    gap: 15px;
    min-width: 0;
}

.fd-admin-user-form-page__identity > div {
    min-width: 0;
}

.fd-admin-user-form-page__avatar,
.fd-admin-user-preview__avatar {
    align-items: center;
    aspect-ratio: 1;
    background: #eaf1ff;
    border: 1px solid #d7e4ff;
    border-radius: 8px;
    color: #245edb;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 23px;
    font-weight: 750;
    justify-content: center;
    width: 54px;
}

.fd-admin-user-form-page__avatar .material-symbols-outlined {
    font-size: 27px;
}

.fd-admin-user-form-page__title-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.fd-admin-user-form-page__title-line h1 {
    font-size: 26px;
    font-weight: 750;
    line-height: 1.2;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fd-admin-user-form-page__identity p {
    color: var(--color-base-500, #6b7280);
    font-size: 14px;
    margin: 7px 0 0;
    overflow-wrap: anywhere;
}

.fd-admin-user-form-page__hero-meta {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(2, minmax(120px, auto));
    margin: 0;
}

.fd-admin-user-form-page__hero-meta div {
    display: grid;
    gap: 3px;
}

.fd-admin-user-form-page__hero-meta dt,
.fd-admin-user-preview__facts dt {
    color: var(--color-base-500, #6b7280);
    font-size: 12px;
}

.fd-admin-user-form-page__hero-meta dd,
.fd-admin-user-preview__facts dd {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.fd-admin-user-form-page__hero-meta small {
    color: var(--color-base-400, #9ca3af);
    font-size: 11px;
}

.fd-admin-user-form-page__feedback {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    color: #047857;
    display: flex;
    font-size: 13px;
    gap: 12px;
    justify-content: space-between;
    padding: 11px 13px;
}

.fd-admin-user-form-page__feedback.is-error {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

.fd-admin-user-form-page__feedback a {
    color: inherit;
    font-weight: 700;
}

.fd-admin-user-form-page__workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.fd-admin-user-form-page__editor,
.fd-admin-user-form-page__rail > section {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
}

.fd-admin-user-form-page__editor > header,
.fd-admin-user-form-page__rail > section > header {
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    padding: 18px 20px;
}

.fd-admin-user-form-page__editor > header h2,
.fd-admin-user-form-page__rail h2 {
    font-size: 16px;
    font-weight: 750;
    margin: 0;
}

.fd-admin-user-form-page__editor > header p,
.fd-admin-user-form-page__rail header p {
    color: var(--color-base-500, #6b7280);
    font-size: 13px;
    margin: 5px 0 0;
}

.fd-admin-user-form {
    display: grid;
}

.fd-admin-user-form__section {
    display: grid;
    gap: 17px;
    padding: 22px 20px;
}

.fd-admin-user-form__section + .fd-admin-user-form__section,
.fd-admin-user-form__boundary + .fd-admin-user-form__section {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
}

.fd-admin-user-form__section > header {
    align-items: center;
    display: flex;
    gap: 11px;
}

.fd-admin-user-form__section > header > .material-symbols-outlined {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border-radius: 6px;
    color: var(--color-base-600, #4b5563);
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 19px;
    height: 34px;
    justify-content: center;
}

.fd-admin-user-form__section > header > div {
    min-width: 0;
}

.fd-admin-user-form__section > header h3 {
    font-size: 15px;
    font-weight: 750;
    margin: 0;
}

.fd-admin-user-form__section > header p {
    color: var(--color-base-500, #6b7280);
    font-size: 12px;
    margin: 3px 0 0;
}

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

.fd-admin-user-form__field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.fd-admin-user-form__field label,
.fd-admin-user-form__label {
    color: var(--color-base-700, #374151);
    font-size: 13px;
    font-weight: 700;
}

.fd-admin-user-form__field input:not([type="checkbox"]),
.fd-admin-user-form__role-search input {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 6px;
    color: var(--color-base-900, #111827);
    font-size: 14px;
    height: 42px;
    outline: none;
    padding: 0 12px;
    width: 100%;
}

.fd-admin-user-form__field input:not([type="checkbox"]):focus,
.fd-admin-user-form__role-search input:focus {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
}

.fd-admin-user-form__field small {
    color: var(--color-base-500, #6b7280);
    font-size: 11px;
    line-height: 1.5;
}

.fd-admin-user-form__field.is-invalid input:not([type="checkbox"]),
.fd-admin-user-form__roles.is-invalid {
    border-color: #e11d48;
}

.fd-admin-user-form__error {
    color: #be123c;
    font-size: 12px;
    min-height: 0;
}

.fd-admin-user-form__error:empty {
    display: none;
}

.fd-admin-user-form__error--global:not(:empty) {
    margin: 0 20px 18px;
}

.fd-admin-user-form__locked {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 6px;
    display: flex;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
}

.fd-admin-user-form__locked .material-symbols-outlined {
    color: var(--color-base-400, #9ca3af);
    font-size: 17px;
}

.fd-admin-user-form__password {
    align-items: center;
    display: flex;
    position: relative;
}

.fd-admin-user-form__password input {
    padding-right: 42px !important;
}

.fd-admin-user-form__password button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-base-500, #6b7280);
    cursor: pointer;
    display: none;
    height: 32px;
    justify-content: center;
    position: absolute;
    right: 5px;
    width: 32px;
}

.fd-admin-user-form-page.is-enhanced .fd-admin-user-form__password button {
    display: inline-flex;
}

.fd-admin-user-form__password button .material-symbols-outlined {
    font-size: 18px;
}

.fd-admin-user-form__password-rules {
    color: var(--color-base-500, #6b7280);
    display: grid;
    font-size: 11px;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding-left: 18px;
}

.fd-admin-user-form__boundary {
    align-items: center;
    background: #f8fafc;
    display: flex;
    gap: 12px;
    padding: 17px 20px;
}

.fd-admin-user-form__boundary > .material-symbols-outlined {
    color: #0f766e;
    font-size: 25px;
}

.fd-admin-user-form__boundary strong {
    font-size: 13px;
}

.fd-admin-user-form__boundary p {
    color: var(--color-base-500, #6b7280);
    font-size: 12px;
    margin: 3px 0 0;
}

.fd-admin-user-form__role-search {
    align-items: center;
    display: none;
    margin-left: auto;
    position: relative;
    width: min(210px, 38%);
}

.fd-admin-user-form-page.is-enhanced .fd-admin-user-form__role-search {
    display: flex;
}

.fd-admin-user-form__role-search .material-symbols-outlined {
    color: var(--color-base-400, #9ca3af);
    font-size: 17px;
    left: 10px;
    position: absolute;
}

.fd-admin-user-form__role-search input {
    height: 36px;
    padding-left: 33px;
}

.fd-admin-user-form__roles {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-admin-user-role-option {
    align-items: center;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 18px minmax(0, 1fr) 22px;
    min-height: 76px;
    padding: 12px;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.fd-admin-user-role-option:hover {
    border-color: var(--color-primary-300, #93c5fd);
}

.fd-admin-user-role-option:has(input:checked) {
    background: #eff6ff;
    border-color: #93c5fd;
}

.fd-admin-user-role-option input {
    accent-color: var(--color-primary-600, #2563eb);
    height: 17px;
    margin: 0;
    width: 17px;
}

.fd-admin-user-role-option__body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.fd-admin-user-role-option__title {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: space-between;
}

.fd-admin-user-role-option__title strong {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-admin-user-role-option__title small,
.fd-admin-user-role-option__permissions {
    color: var(--color-base-500, #6b7280);
    font-size: 11px;
}

.fd-admin-user-role-option__title small {
    flex: 0 0 auto;
}

.fd-admin-user-role-option__permissions {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-admin-user-role-option__check {
    align-items: center;
    background: var(--color-primary-600, #2563eb);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 15px;
    height: 21px;
    justify-content: center;
    opacity: 0;
    width: 21px;
}

.fd-admin-user-role-option:has(input:checked) .fd-admin-user-role-option__check {
    opacity: 1;
}

.fd-admin-user-role-option.is-locked {
    cursor: default;
    grid-template-columns: 20px minmax(0, 1fr);
}

.fd-admin-user-role-option__lock {
    color: var(--color-base-400, #9ca3af);
    font-size: 18px;
}

.fd-admin-user-form__empty-role {
    align-items: center;
    border: 1px dashed var(--color-base-300, #d1d5db);
    border-radius: 7px;
    color: var(--color-base-500, #6b7280);
    display: flex;
    font-size: 12px;
    gap: 8px;
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 70px;
}

.fd-admin-user-form__protected-roles {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 7px;
    color: #9a3412;
    padding: 12px;
}

.fd-admin-user-form__protected-roles > strong {
    font-size: 12px;
}

.fd-admin-user-form__protected-roles > p {
    font-size: 11px;
    margin: 3px 0 9px;
}

.fd-admin-user-form__protected-roles > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fd-admin-user-form__protected-roles span {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #fdba74;
    border-radius: 5px;
    font-size: 11px;
    padding: 4px 7px;
}

.fd-admin-user-form__access-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-admin-user-access-option {
    align-items: center;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    gap: 11px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 72px;
    padding: 12px;
}

.fd-admin-user-access-option > span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.fd-admin-user-access-option strong {
    font-size: 13px;
}

.fd-admin-user-access-option small {
    color: var(--color-base-500, #6b7280);
    font-size: 11px;
}

.fd-admin-user-access-option > .material-symbols-outlined {
    color: var(--color-base-400, #9ca3af);
    font-size: 17px;
}

.fd-admin-user-access-option.is-locked {
    cursor: not-allowed;
}

.fd-admin-user-switch {
    display: inline-flex;
}

.fd-admin-user-switch input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.fd-admin-user-switch__track {
    background: var(--color-base-300, #d1d5db);
    border-radius: 999px;
    display: inline-flex;
    height: 23px;
    padding: 3px;
    transition: background-color 150ms ease;
    width: 40px;
}

.fd-admin-user-switch__track span {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    height: 17px;
    transform: translateX(0);
    transition: transform 150ms ease;
    width: 17px;
}

.fd-admin-user-switch input:checked + .fd-admin-user-switch__track {
    background: #16a34a;
}

.fd-admin-user-switch input:checked + .fd-admin-user-switch__track span {
    transform: translateX(17px);
}

.fd-admin-user-switch input:focus-visible + .fd-admin-user-switch__track {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.fd-admin-user-switch input:disabled + .fd-admin-user-switch__track {
    opacity: 0.7;
}

.fd-admin-user-form__locked-note {
    color: #92400e;
    font-size: 11px;
    margin: -5px 0 0;
}

.fd-admin-user-form__noscript {
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
    margin: 0;
    padding: 11px 20px;
}

.fd-admin-user-form__actions {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    bottom: 0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 20px;
    position: sticky;
    z-index: 3;
}

.fd-admin-user-form__actions > a,
.fd-admin-user-form__actions > button,
.fd-admin-user-dialog footer button {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    height: 38px;
    justify-content: center;
    padding: 0 14px;
    text-decoration: none;
}

.fd-admin-user-form__actions > a,
.fd-admin-user-dialog footer button:first-child {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    color: var(--color-base-700, #374151);
}

.fd-admin-user-form__actions > button,
.fd-admin-user-dialog footer button:last-child {
    background: var(--color-base-900, #111827);
    border: 1px solid var(--color-base-900, #111827);
    color: #fff;
    cursor: pointer;
}

.fd-admin-user-form__actions button:disabled,
.fd-admin-user-dialog button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.fd-admin-user-form__actions .material-symbols-outlined,
.fd-admin-user-dialog footer .material-symbols-outlined {
    font-size: 17px;
}

.fd-admin-user-form-page__rail {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 18px;
}

.fd-admin-user-form-page__rail > section:not(.fd-admin-user-form-page__boundary) {
    padding-bottom: 16px;
}

.fd-admin-user-preview {
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 17px 18px 13px;
}

.fd-admin-user-preview__avatar {
    border-radius: 50%;
    font-size: 17px;
    width: 42px;
}

.fd-admin-user-preview > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fd-admin-user-preview strong,
.fd-admin-user-preview small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-admin-user-preview strong {
    font-size: 14px;
}

.fd-admin-user-preview small {
    color: var(--color-base-500, #6b7280);
    font-size: 11px;
}

.fd-admin-user-preview__facts {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    margin: 0 18px;
}

.fd-admin-user-preview__facts div {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 11px 0;
}

.fd-admin-user-preview__facts div + div {
    border-top: 1px solid var(--color-base-100, #f3f4f6);
}

.fd-admin-user-preview__facts dd {
    overflow-wrap: anywhere;
    text-align: right;
}

.fd-admin-user-form-page__rail > .fd-admin-user-form-page__boundary {
    align-items: flex-start;
    background: #f0fdfa;
    border-color: #99f6e4;
    display: flex;
    gap: 11px;
    padding: 16px;
}

.fd-admin-user-form-page__boundary > .material-symbols-outlined {
    color: #0f766e;
    font-size: 24px;
}

.fd-admin-user-form-page__boundary h2 {
    color: #115e59;
    font-size: 14px;
}

.fd-admin-user-form-page__boundary p,
.fd-admin-user-form-page__retention p {
    color: #475569;
    font-size: 12px;
    line-height: 1.55;
    margin: 4px 0 0;
}

.fd-admin-user-form-page__retention {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    padding: 15px 18px 0;
}

.fd-admin-user-form-page__retention .material-symbols-outlined {
    color: var(--color-base-500, #6b7280);
    font-size: 21px;
}

.fd-admin-user-password-action {
    align-items: flex-start;
    display: grid;
    gap: 10px;
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 15px 18px 0;
}

.fd-admin-user-password-action > .material-symbols-outlined {
    color: #b45309;
    font-size: 21px;
}

.fd-admin-user-password-action > div {
    display: grid;
    gap: 3px;
}

.fd-admin-user-password-action strong {
    font-size: 12px;
}

.fd-admin-user-password-action p {
    color: var(--color-base-500, #6b7280);
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
}

.fd-admin-user-password-action > a {
    align-items: center;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    color: #92400e;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 36px;
    text-decoration: none;
}

.fd-admin-user-password-action > a:hover,
.fd-admin-user-password-action > a:focus-visible {
    background: #fef3c7;
    border-color: #f59e0b;
    outline: none;
}

.fd-admin-user-dialog {
    inset: 0;
    position: fixed;
    z-index: 1000;
}

.fd-admin-user-dialog[hidden] {
    display: none;
}

.fd-admin-user-dialog__backdrop {
    background: rgba(15, 23, 42, 0.52);
    border: 0;
    inset: 0;
    position: absolute;
    width: 100%;
}

.fd-admin-user-dialog__panel {
    background: var(--color-base-0, #fff);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    left: 50%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(500px, calc(100vw - 28px));
}

.fd-admin-user-dialog__panel > header {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: 11px;
    grid-template-columns: 38px minmax(0, 1fr) 32px;
    padding: 18px;
}

.fd-admin-user-dialog__icon {
    align-items: center;
    background: #ecfdf5;
    border-radius: 7px;
    color: #047857;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.fd-admin-user-dialog__icon .material-symbols-outlined {
    font-size: 21px;
}

.fd-admin-user-dialog h2 {
    font-size: 17px;
    font-weight: 750;
    margin: 1px 0 0;
}

.fd-admin-user-dialog header p {
    color: var(--color-base-500, #6b7280);
    font-size: 12px;
    margin: 4px 0 0;
}

.fd-admin-user-dialog__close {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-base-500, #6b7280);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.fd-admin-user-dialog__close .material-symbols-outlined {
    font-size: 19px;
}

.fd-admin-user-dialog__summary {
    display: grid;
    margin: 0;
    padding: 8px 18px;
}

.fd-admin-user-dialog__summary div {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 10px 0;
}

.fd-admin-user-dialog__summary div + div {
    border-top: 1px solid var(--color-base-100, #f3f4f6);
}

.fd-admin-user-dialog__summary dt {
    color: var(--color-base-500, #6b7280);
    font-size: 12px;
}

.fd-admin-user-dialog__summary dd {
    font-size: 13px;
    font-weight: 650;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.fd-admin-user-dialog__changes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px 18px 17px;
}

.fd-admin-user-dialog__changes span {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 5px;
    color: #1d4ed8;
    font-size: 11px;
    padding: 4px 7px;
}

.fd-admin-user-dialog footer {
    background: var(--color-base-50, #f9fafb);
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    padding: 14px 18px;
}

.fd-admin-user-form-page__toast {
    background: #111827;
    border-radius: 6px;
    bottom: 22px;
    color: #fff;
    font-size: 13px;
    left: 50%;
    padding: 10px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1100;
}

.dark .fd-admin-user-form-page {
    color: #f3f4f6;
}

.dark .fd-admin-user-form-page__hero,
.dark .fd-admin-user-form-page__editor,
.dark .fd-admin-user-form-page__rail > section,
.dark .fd-admin-user-form-page__editor > header,
.dark .fd-admin-user-form-page__rail > section > header,
.dark .fd-admin-user-form__section + .fd-admin-user-form__section,
.dark .fd-admin-user-form__boundary + .fd-admin-user-form__section,
.dark .fd-admin-user-form__actions,
.dark .fd-admin-user-preview__facts,
.dark .fd-admin-user-dialog__panel > header,
.dark .fd-admin-user-dialog footer {
    border-color: #374151;
}

.dark .fd-admin-user-form-page__editor,
.dark .fd-admin-user-form-page__rail > section,
.dark .fd-admin-user-dialog__panel,
.dark .fd-admin-user-form__actions {
    background: #111827;
}

.dark .fd-admin-user-form-page__avatar,
.dark .fd-admin-user-preview__avatar {
    background: #1e3a5f;
    border-color: #31598a;
    color: #bfdbfe;
}

.dark .fd-admin-user-form__field label,
.dark .fd-admin-user-form__label {
    color: #e5e7eb;
}

.dark .fd-admin-user-form__field input:not([type="checkbox"]),
.dark .fd-admin-user-form__role-search input {
    background: #0f172a;
    border-color: #475569;
    color: #f8fafc;
}

.dark .fd-admin-user-form__locked,
.dark .fd-admin-user-form__section > header > .material-symbols-outlined,
.dark .fd-admin-user-dialog footer {
    background: #1f2937;
}

.dark .fd-admin-user-form__boundary {
    background: #0f1f2c;
}

.dark .fd-admin-user-role-option,
.dark .fd-admin-user-access-option {
    border-color: #374151;
}

.dark .fd-admin-user-role-option:has(input:checked) {
    background: #172554;
    border-color: #3b82f6;
}

.dark .fd-admin-user-form__protected-roles {
    background: #431407;
    border-color: #9a3412;
    color: #fed7aa;
}

.dark .fd-admin-user-form__protected-roles span {
    background: #7c2d12;
    border-color: #c2410c;
}

.dark .fd-admin-user-form-page__rail > .fd-admin-user-form-page__boundary {
    background: #042f2e;
    border-color: #0f766e;
}

.dark .fd-admin-user-form-page__boundary h2 {
    color: #99f6e4;
}

.dark .fd-admin-user-form-page__boundary p,
.dark .fd-admin-user-form-page__retention p {
    color: #cbd5e1;
}

.dark .fd-admin-user-dialog__changes span {
    background: #172554;
    border-color: #1d4ed8;
    color: #bfdbfe;
}

@media screen and (max-width: 1120px) {
    .fd-admin-user-form-page__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-admin-user-form-page__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }

    .fd-admin-user-form-page__rail > section:first-child {
        grid-row: span 2;
    }
}

@media screen and (max-width: 720px) {
    .fd-admin-user-form-page {
        gap: 13px;
        padding-bottom: 16px;
    }

    .fd-admin-user-form-page__hero {
        align-items: flex-start;
        display: grid;
        gap: 15px;
        padding-bottom: 16px;
    }

    .fd-admin-user-form-page__avatar {
        width: 46px;
    }

    .fd-admin-user-form-page__title-line h1 {
        font-size: 22px;
    }

    .fd-admin-user-form-page__hero-meta {
        gap: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .fd-admin-user-form-page__workspace,
    .fd-admin-user-form-page__rail,
    .fd-admin-user-form__grid,
    .fd-admin-user-form__roles,
    .fd-admin-user-form__access-grid,
    .fd-admin-user-form__password-rules {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-admin-user-form-page__rail > section:first-child {
        grid-row: auto;
    }

    .fd-admin-user-form-page__editor > header,
    .fd-admin-user-form-page__rail > section > header,
    .fd-admin-user-form__section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .fd-admin-user-form__section > header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .fd-admin-user-form__role-search,
    .fd-admin-user-form-page.is-enhanced .fd-admin-user-form__role-search {
        margin-left: 45px;
        width: calc(100% - 45px);
    }

    .fd-admin-user-form__actions {
        padding: 12px 15px;
    }

    .fd-admin-user-form__actions > a,
    .fd-admin-user-form__actions > button {
        flex: 1 1 0;
    }

    .fd-admin-user-form__error--global:not(:empty) {
        margin-left: 15px;
        margin-right: 15px;
    }
}

@media screen and (max-width: 430px) {
    .fd-admin-user-form-page__identity {
        align-items: flex-start;
    }

    .fd-admin-user-form-page__title-line {
        align-items: flex-start;
    }

    .fd-admin-user-form-page__feedback {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-admin-user-form__role-search,
    .fd-admin-user-form-page.is-enhanced .fd-admin-user-form__role-search {
        margin-left: 0;
        width: 100%;
    }

    .fd-admin-user-role-option__title {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .fd-admin-user-role-option__title strong,
    .fd-admin-user-role-option__permissions {
        white-space: normal;
    }

    .fd-admin-user-dialog footer {
        flex-direction: column;
    }

    .fd-admin-user-dialog footer button {
        width: 100%;
    }
}

/* Email Campaign test send */
.fd-email-campaign-test {
    --fd-campaign-test-border: #dce3ec;
    --fd-campaign-test-muted: #64748b;
    --fd-campaign-test-soft: #f6f8fb;
    --fd-campaign-test-surface: #ffffff;
    --fd-campaign-test-text: #172033;
    color: var(--fd-campaign-test-text);
    display: grid;
    gap: 18px;
    margin-inline: auto;
    max-width: 1560px;
    width: 100%;
}

.fd-email-campaign-test__back {
    align-items: center;
    color: var(--fd-campaign-test-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    justify-self: start;
    min-height: 34px;
    text-decoration: none;
}

.fd-email-campaign-test__back:hover,
.fd-email-campaign-test__back:focus-visible {
    color: #2563eb;
}

.fd-email-campaign-test__back .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-campaign-test__header {
    align-items: center;
    border-bottom: 1px solid var(--fd-campaign-test-border);
    display: flex;
    gap: 28px;
    justify-content: space-between;
    padding: 4px 2px 20px;
}

.fd-email-campaign-test__identity {
    align-items: center;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.fd-email-campaign-test__icon {
    align-items: center;
    background: #eaf2ff;
    border: 1px solid #cfe0ff;
    border-radius: 6px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 58px;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.fd-email-campaign-test__icon .material-symbols-outlined {
    font-size: 28px;
}

.fd-email-campaign-test__identity > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.fd-email-campaign-test__eyebrow {
    color: #2563eb;
    font-size: 12px;
    font-weight: 750;
}

.fd-email-campaign-test__title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-email-campaign-test__title-row h1 {
    color: var(--fd-campaign-test-text);
    font-size: 24px;
    font-weight: 760;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-email-campaign-test__identity code {
    color: var(--fd-campaign-test-muted);
    font-size: 12px;
}

.fd-email-campaign-test__header > p {
    color: var(--fd-campaign-test-muted);
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    max-width: 460px;
    text-align: right;
}

.fd-email-campaign-test__workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
}

.fd-email-campaign-test__preview,
.fd-email-campaign-test__compose {
    background: var(--fd-campaign-test-surface);
    border: 1px solid var(--fd-campaign-test-border);
    border-radius: 6px;
    min-width: 0;
}

.fd-email-campaign-test__preview > header,
.fd-email-campaign-test__compose > header {
    align-items: center;
    border-bottom: 1px solid var(--fd-campaign-test-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 18px 20px;
}

.fd-email-campaign-test__preview > header > div,
.fd-email-campaign-test__compose > header > div {
    display: grid;
    gap: 3px;
}

.fd-email-campaign-test__preview h2,
.fd-email-campaign-test__preview p,
.fd-email-campaign-test__compose h2,
.fd-email-campaign-test__compose p {
    margin: 0;
}

.fd-email-campaign-test__preview h2,
.fd-email-campaign-test__compose h2 {
    color: var(--fd-campaign-test-text);
    font-size: 15px;
    font-weight: 750;
}

.fd-email-campaign-test__preview p,
.fd-email-campaign-test__compose p {
    color: var(--fd-campaign-test-muted);
    font-size: 12px;
    line-height: 1.55;
}

.fd-email-campaign-test__preview > header > span {
    background: var(--fd-campaign-test-soft);
    border: 1px solid var(--fd-campaign-test-border);
    border-radius: 999px;
    color: var(--fd-campaign-test-muted);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
}

.fd-email-campaign-test__compose > header {
    justify-content: flex-start;
}

.fd-email-campaign-test__compose > header > .material-symbols-outlined {
    align-items: center;
    background: #eaf8ef;
    border-radius: 6px;
    color: #15803d;
    display: inline-flex;
    flex: 0 0 38px;
    font-size: 20px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.fd-email-campaign-test__subject {
    align-items: start;
    background: var(--fd-campaign-test-soft);
    border-bottom: 1px solid var(--fd-campaign-test-border);
    display: grid;
    gap: 5px;
    padding: 14px 20px;
}

.fd-email-campaign-test__subject span {
    color: var(--fd-campaign-test-muted);
    font-size: 11px;
    font-weight: 650;
}

.fd-email-campaign-test__subject strong {
    color: var(--fd-campaign-test-text);
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.fd-email-campaign-test__preview-frame {
    background: #eef2f7;
    padding: 12px;
}

.fd-email-campaign-test__preview-frame iframe {
    background: #ffffff;
    border: 0;
    border-radius: 4px;
    display: block;
    height: 600px;
    width: 100%;
}

.fd-email-campaign-test__compose form {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.fd-email-campaign-test__field {
    display: grid;
    gap: 8px;
}

.fd-email-campaign-test__field > span {
    color: var(--fd-campaign-test-text);
    font-size: 13px;
    font-weight: 700;
}

.fd-email-campaign-test__field input {
    width: 100%;
}

.fd-email-campaign-test__field small {
    color: var(--fd-campaign-test-muted);
    font-size: 11px;
    line-height: 1.55;
}

.fd-email-campaign-test__safety,
.fd-email-campaign-test__notice {
    align-items: flex-start;
    border-radius: 6px;
    display: flex;
    font-size: 12px;
    gap: 9px;
    line-height: 1.55;
    padding: 11px 12px;
}

.fd-email-campaign-test__safety {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.fd-email-campaign-test__notice {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    margin: 18px 20px 0;
}

.fd-email-campaign-test__safety .material-symbols-outlined,
.fd-email-campaign-test__notice .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 18px;
}

.fd-email-campaign-test__actions,
.fd-email-campaign-test__result-actions,
.fd-email-campaign-test-dialog__actions {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.fd-email-campaign-test__actions a,
.fd-email-campaign-test__actions button,
.fd-email-campaign-test__result-actions a,
.fd-email-campaign-test-dialog__actions button {
    align-items: center;
    border: 1px solid var(--fd-campaign-test-border);
    border-radius: 6px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    text-decoration: none;
}

.fd-email-campaign-test__actions a,
.fd-email-campaign-test__result-actions a,
.fd-email-campaign-test-dialog__actions button:first-child {
    background: var(--fd-campaign-test-surface);
    color: #475569;
}

.fd-email-campaign-test__actions button,
.fd-email-campaign-test__result-actions a.is-primary,
.fd-email-campaign-test-dialog__actions button:last-child {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.fd-email-campaign-test__actions button:hover,
.fd-email-campaign-test__result-actions a.is-primary:hover,
.fd-email-campaign-test-dialog__actions button:last-child:hover {
    background: #1d4ed8;
}

.fd-email-campaign-test__actions button:disabled,
.fd-email-campaign-test-dialog__actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.fd-email-campaign-test__actions .material-symbols-outlined,
.fd-email-campaign-test__result-actions .material-symbols-outlined,
.fd-email-campaign-test-dialog__actions .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-campaign-test__result {
    align-items: flex-start;
    border: 1px solid;
    border-radius: 6px;
    display: flex;
    gap: 18px;
    padding: 24px;
}

.fd-email-campaign-test__result--failed {
    background: #fff7f7;
    border-color: #fecaca;
}

.fd-email-campaign-test__result--uncertain {
    background: #fffbeb;
    border-color: #fde68a;
}

.fd-email-campaign-test__result-icon {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 46px;
    font-size: 24px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.fd-email-campaign-test__result--failed
    .fd-email-campaign-test__result-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.fd-email-campaign-test__result--uncertain
    .fd-email-campaign-test__result-icon {
    background: #fef3c7;
    color: #a16207;
}

.fd-email-campaign-test__result-copy {
    display: grid;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.fd-email-campaign-test__result-copy > span {
    color: var(--fd-campaign-test-muted);
    font-size: 11px;
    font-weight: 700;
}

.fd-email-campaign-test__result-copy h2,
.fd-email-campaign-test__result-copy p {
    margin: 0;
}

.fd-email-campaign-test__result-copy h2 {
    font-size: 20px;
    font-weight: 760;
}

.fd-email-campaign-test__result-copy p {
    color: #526077;
    font-size: 13px;
    line-height: 1.65;
}

.fd-email-campaign-test__result-copy dl {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 6px;
    display: grid;
    margin: 2px 0 0;
}

.fd-email-campaign-test__result-copy dl > div {
    display: grid;
    gap: 4px;
    padding: 11px 13px;
}

.fd-email-campaign-test__result-copy dl > div + div {
    border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.fd-email-campaign-test__result-copy dt {
    color: var(--fd-campaign-test-muted);
    font-size: 10px;
    font-weight: 650;
}

.fd-email-campaign-test__result-copy dd {
    color: var(--fd-campaign-test-text);
    font-size: 13px;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-email-campaign-test-dialog {
    background: transparent;
    border: 0;
    inset: 0;
    margin: auto;
    max-height: calc(100vh - 40px);
    max-width: min(1080px, calc(100vw - 40px));
    padding: 0;
    width: 100%;
}

.fd-email-campaign-test-dialog::backdrop {
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(2px);
}

.fd-email-campaign-test-dialog__panel {
    background: var(--fd-campaign-test-surface, #ffffff);
    border: 1px solid var(--fd-campaign-test-border, #dce3ec);
    border-radius: 6px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
    color: var(--fd-campaign-test-text, #172033);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}

.fd-email-campaign-test-dialog__panel > header {
    align-items: flex-start;
    border-bottom: 1px solid var(--fd-campaign-test-border, #dce3ec);
    display: flex;
    flex: 0 0 auto;
    gap: 20px;
    justify-content: space-between;
    padding: 20px 22px;
}

.fd-email-campaign-test-dialog__panel > header > div {
    display: grid;
    gap: 4px;
}

.fd-email-campaign-test-dialog__panel > header span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 750;
}

.fd-email-campaign-test-dialog__panel h2,
.fd-email-campaign-test-dialog__panel h3,
.fd-email-campaign-test-dialog__panel p {
    margin: 0;
}

.fd-email-campaign-test-dialog__panel h2 {
    font-size: 19px;
    font-weight: 760;
}

.fd-email-campaign-test-dialog__panel > header p {
    color: var(--fd-campaign-test-muted, #64748b);
    font-size: 12px;
}

.fd-email-campaign-test-dialog__panel > header > button {
    align-items: center;
    background: var(--fd-campaign-test-soft, #f6f8fb);
    border: 1px solid var(--fd-campaign-test-border, #dce3ec);
    border-radius: 6px;
    color: #64748b;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}

.fd-email-campaign-test-dialog__panel > header
    > button
    .material-symbols-outlined {
    font-size: 19px;
}

.fd-email-campaign-test-dialog__notice {
    align-items: center;
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    color: #9a3412;
    display: flex;
    flex: 0 0 auto;
    font-size: 12px;
    gap: 8px;
    padding: 10px 22px;
}

.fd-email-campaign-test-dialog__notice .material-symbols-outlined {
    font-size: 18px;
}

.fd-email-campaign-test-dialog__body {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    min-height: 0;
    overflow: auto;
}

.fd-email-campaign-test-dialog__summary {
    background: var(--fd-campaign-test-soft, #f6f8fb);
    border-right: 1px solid var(--fd-campaign-test-border, #dce3ec);
    padding: 20px;
}

.fd-email-campaign-test-dialog__summary h3,
.fd-email-campaign-test-dialog__preview h3 {
    font-size: 13px;
    font-weight: 750;
}

.fd-email-campaign-test-dialog__summary dl {
    display: grid;
    margin: 14px 0;
}

.fd-email-campaign-test-dialog__summary dl > div {
    display: grid;
    gap: 4px;
    padding: 11px 0;
}

.fd-email-campaign-test-dialog__summary dl > div + div {
    border-top: 1px solid var(--fd-campaign-test-border, #dce3ec);
}

.fd-email-campaign-test-dialog__summary dt {
    color: var(--fd-campaign-test-muted, #64748b);
    font-size: 10px;
    font-weight: 650;
}

.fd-email-campaign-test-dialog__summary dd {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-email-campaign-test-dialog__summary > div {
    align-items: flex-start;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1e40af;
    display: flex;
    font-size: 11px;
    gap: 8px;
    line-height: 1.55;
    padding: 10px;
}

.fd-email-campaign-test-dialog__summary
    > div
    .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 17px;
}

.fd-email-campaign-test-dialog__preview {
    display: grid;
    gap: 12px;
    padding: 20px;
}

.fd-email-campaign-test-dialog__preview > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.fd-email-campaign-test-dialog__preview > div > span {
    color: var(--fd-campaign-test-muted, #64748b);
    font-size: 10px;
}

.fd-email-campaign-test-dialog__preview iframe {
    background: #ffffff;
    border: 1px solid var(--fd-campaign-test-border, #dce3ec);
    border-radius: 4px;
    height: 470px;
    width: 100%;
}

.fd-email-campaign-test-dialog__panel > form {
    border-top: 1px solid var(--fd-campaign-test-border, #dce3ec);
    display: grid;
    flex: 0 0 auto;
    gap: 14px;
    padding: 16px 22px;
}

.fd-email-campaign-test-dialog__confirmation {
    align-items: flex-start;
    color: #475569;
    display: flex;
    font-size: 12px;
    gap: 9px;
    line-height: 1.5;
}

.fd-email-campaign-test-dialog__confirmation input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.dark .fd-email-campaign-test {
    --fd-campaign-test-border: #334155;
    --fd-campaign-test-muted: #94a3b8;
    --fd-campaign-test-soft: #1f2937;
    --fd-campaign-test-surface: #172033;
    --fd-campaign-test-text: #e2e8f0;
}

.dark .fd-email-campaign-test__icon {
    background: #1e3a5f;
    border-color: #315684;
    color: #93c5fd;
}

.dark .fd-email-campaign-test__preview-frame {
    background: #0f172a;
}

.dark .fd-email-campaign-test__safety,
.dark .fd-email-campaign-test-dialog__summary > div {
    background: #172554;
    border-color: #1e40af;
    color: #bfdbfe;
}

.dark .fd-email-campaign-test__notice,
.dark .fd-email-campaign-test-dialog__notice {
    background: #422006;
    border-color: #854d0e;
    color: #fed7aa;
}

.dark .fd-email-campaign-test__result--failed {
    background: #3f1d24;
    border-color: #7f1d1d;
}

.dark .fd-email-campaign-test__result--uncertain {
    background: #422006;
    border-color: #854d0e;
}

.dark .fd-email-campaign-test__result-copy p,
.dark .fd-email-campaign-test-dialog__confirmation {
    color: #cbd5e1;
}

.dark .fd-email-campaign-test__result-copy dl {
    background: rgba(15, 23, 42, 0.42);
}

@media screen and (max-width: 1023px) {
    .fd-email-campaign-test__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-campaign-test__compose {
        order: -1;
    }
}

@media screen and (max-width: 767px) {
    .fd-email-campaign-test__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-email-campaign-test__header > p {
        max-width: none;
        text-align: left;
    }

    .fd-email-campaign-test__preview-frame iframe {
        height: 460px;
    }

    .fd-email-campaign-test-dialog {
        max-height: calc(100vh - 20px);
        max-width: calc(100vw - 20px);
    }

    .fd-email-campaign-test-dialog__panel {
        max-height: calc(100vh - 20px);
    }

    .fd-email-campaign-test-dialog__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-email-campaign-test-dialog__summary {
        border-bottom: 1px solid var(--fd-campaign-test-border, #dce3ec);
        border-right: 0;
    }
}

@media screen and (max-width: 520px) {
    .fd-email-campaign-test__identity {
        align-items: flex-start;
    }

    .fd-email-campaign-test__icon {
        flex-basis: 46px;
        height: 46px;
        width: 46px;
    }

    .fd-email-campaign-test__title-row h1 {
        font-size: 20px;
    }

    .fd-email-campaign-test__preview > header,
    .fd-email-campaign-test__compose > header,
    .fd-email-campaign-test__compose form {
        padding: 16px;
    }

    .fd-email-campaign-test__actions,
    .fd-email-campaign-test__result-actions,
    .fd-email-campaign-test-dialog__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-email-campaign-test__actions a,
    .fd-email-campaign-test__actions button,
    .fd-email-campaign-test__result-actions a,
    .fd-email-campaign-test-dialog__actions button {
        width: 100%;
    }

    .fd-email-campaign-test__result {
        padding: 18px;
    }

    .fd-email-campaign-test__result-icon {
        display: none;
    }

    .fd-email-campaign-test-dialog__preview iframe {
        height: 380px;
    }
}

/* Channel blocklist operations list. */
.fd-channel-blocklist-identity {
    align-items: center;
    display: flex;
    gap: var(--fd-space-2);
    min-width: 250px;
}

.fd-channel-blocklist-identity__mark {
    align-items: center;
    background: #fff1f2;
    border: 1px solid #ffe4e6;
    border-radius: var(--fd-radius);
    color: #e11d48;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.fd-channel-blocklist-identity.is-invalid
    .fd-channel-blocklist-identity__mark,
.fd-channel-blocklist-identity.is-missing
    .fd-channel-blocklist-identity__mark {
    background: #fffbeb;
    border-color: #fef3c7;
    color: #d97706;
}

.fd-channel-blocklist-identity__mark .material-symbols-outlined {
    font-size: 20px;
}

.fd-channel-blocklist-identity__copy,
.fd-channel-blocklist-channel {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.fd-channel-blocklist-identity__title-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.fd-channel-blocklist-identity__title-link {
    color: inherit;
    font-weight: 700;
    max-width: 285px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-channel-blocklist-identity__title-link:hover,
.fd-channel-blocklist-identity__title-link:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
}

.fd-channel-blocklist-identity__preview {
    align-items: center;
    border-radius: var(--fd-radius);
    color: var(--color-font-subtle-light, #6b7280);
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transform: translateX(-4px);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
    visibility: hidden;
}

.fd-channel-blocklist-identity:hover
    .fd-channel-blocklist-identity__preview,
.fd-channel-blocklist-identity:focus-within
    .fd-channel-blocklist-identity__preview {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

.fd-channel-blocklist-identity__preview:hover,
.fd-channel-blocklist-identity__preview:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-channel-blocklist-identity__preview .material-symbols-outlined {
    font-size: 18px;
}

.fd-channel-blocklist-identity__copy small,
.fd-channel-blocklist-channel small {
    color: var(--color-font-subtle-light, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-channel-blocklist-channel {
    color: inherit;
    min-width: 185px;
    text-decoration: none;
}

a.fd-channel-blocklist-channel:hover,
a.fd-channel-blocklist-channel:focus-visible {
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-channel-blocklist-channel strong {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-channel-blocklist-channel small {
    align-items: center;
    display: flex;
    gap: 5px;
}

.fd-channel-blocklist-channel code {
    font-size: 0.75rem;
}

.fd-channel-blocklist-channel.is-restricted,
.fd-channel-blocklist-channel.is-missing,
.fd-channel-blocklist-note.is-empty,
.fd-channel-blocklist-actions.is-empty {
    color: var(--color-font-subtle-light, #6b7280);
}

.fd-channel-blocklist-note {
    display: -webkit-box;
    line-height: 1.45;
    max-width: 390px;
    min-width: 190px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fd-channel-blocklist-actions {
    align-items: center;
    display: flex;
    min-width: 110px;
}

.fd-channel-blocklist-actions a {
    align-items: center;
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: var(--fd-radius);
    color: var(--color-font-default-light, #374151);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 650;
    gap: 5px;
    min-height: 34px;
    padding: 0 9px;
    text-decoration: none;
    white-space: nowrap;
}

.fd-channel-blocklist-actions a:hover,
.fd-channel-blocklist-actions a:focus-visible {
    background: var(--color-base-100, #f3f4f6);
    border-color: var(--color-base-400, #9ca3af);
    color: var(--color-primary-700, #1d4ed8);
    outline: none;
}

.fd-channel-blocklist-actions .material-symbols-outlined {
    font-size: 17px;
}

[data-fd-list-model="channelblocklist"] .fd-user-time > span {
    white-space: nowrap;
}

.dark .fd-channel-blocklist-identity__mark {
    background: rgb(225 29 72 / 14%);
    border-color: rgb(251 113 133 / 24%);
    color: #fda4af;
}

.dark .fd-channel-blocklist-identity.is-invalid
    .fd-channel-blocklist-identity__mark,
.dark .fd-channel-blocklist-identity.is-missing
    .fd-channel-blocklist-identity__mark {
    background: rgb(217 119 6 / 14%);
    border-color: rgb(251 191 36 / 24%);
    color: #fbbf24;
}

.dark .fd-channel-blocklist-identity__copy small,
.dark .fd-channel-blocklist-channel small,
.dark .fd-channel-blocklist-channel.is-restricted,
.dark .fd-channel-blocklist-channel.is-missing,
.dark .fd-channel-blocklist-note.is-empty,
.dark .fd-channel-blocklist-actions.is-empty {
    color: var(--color-font-subtle-dark, #9ca3af);
}

.dark .fd-channel-blocklist-identity__preview,
.dark .fd-channel-blocklist-actions a {
    color: var(--color-font-default-dark, #d1d5db);
}

.dark .fd-channel-blocklist-actions a {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-channel-blocklist-identity__preview:hover,
.dark .fd-channel-blocklist-identity__preview:focus-visible,
.dark .fd-channel-blocklist-actions a:hover,
.dark .fd-channel-blocklist-actions a:focus-visible {
    background: var(--color-base-800, #1f2937);
    color: var(--color-primary-400, #60a5fa);
}

@media screen and (max-width: 767px) {
    [data-fd-list-model="channelblocklist"] #result_list td {
        align-items: flex-start;
        height: auto;
        min-height: 45px;
        overflow: visible;
    }

    [data-fd-list-model="channelblocklist"] #result_list td::before {
        min-width: 92px;
    }

    .fd-channel-blocklist-identity,
    .fd-channel-blocklist-channel,
    .fd-channel-blocklist-note,
    .fd-channel-blocklist-actions {
        max-width: min(100%, 300px);
        min-width: 0;
    }

    .fd-channel-blocklist-identity__title-link,
    .fd-channel-blocklist-channel strong {
        max-width: min(100%, 250px);
    }

    .fd-channel-blocklist-identity__preview {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }
}

/* Announcement create and edit workflow */
.fd-announcement-page {
    display: grid;
    gap: 18px;
    margin: 0 auto;
    max-width: 1480px;
    padding: 4px 0 28px;
}

.fd-announcement-page__back {
    align-items: center;
    color: var(--color-font-subtle-light, #667085);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 6px;
    justify-self: start;
    text-decoration: none;
}

.fd-announcement-page__back:hover,
.fd-announcement-page__back:focus-visible {
    color: var(--color-primary-600, #2563eb);
}

.fd-announcement-page__back .material-symbols-outlined {
    font-size: 18px;
}

.fd-announcement-page__hero {
    align-items: center;
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    min-height: 106px;
    padding: 20px 24px;
}

.fd-announcement-page__identity {
    align-items: center;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.fd-announcement-page__hero-icon {
    align-items: center;
    background: #e9f7ef;
    border: 1px solid #cce9d8;
    border-radius: 8px;
    color: #177245;
    display: inline-flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.fd-announcement-page__hero-icon .material-symbols-outlined {
    font-size: 28px;
}

.fd-announcement-page__identity > div {
    min-width: 0;
}

.fd-announcement-page__title-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-announcement-page__title-line h1 {
    color: var(--color-font-default-light, #111827);
    font-size: 24px;
    font-weight: 760;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-announcement-page__identity > div > p {
    color: var(--color-font-subtle-light, #667085);
    font-size: 13px;
    margin: 6px 0 0;
}

.fd-announcement-page__id-row {
    align-items: center;
    color: var(--color-font-subtle-light, #667085);
    display: flex;
    gap: 4px;
    margin-top: 7px;
}

.fd-announcement-page__id-row small {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.fd-announcement-page__icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    padding: 0;
    width: 26px;
}

.fd-announcement-page__icon-button:hover,
.fd-announcement-page__icon-button:focus-visible {
    background: var(--color-base-200, #e5e7eb);
    color: var(--color-primary-600, #2563eb);
}

.fd-announcement-page__icon-button .material-symbols-outlined {
    font-size: 17px;
}

.fd-announcement-page__hero-meta {
    display: grid;
    flex: 0 0 auto;
    gap: 0;
    grid-template-columns: repeat(2, minmax(138px, 1fr));
    margin: 0;
}

.fd-announcement-page__hero-meta > div {
    border-left: 1px solid var(--color-base-200, #e5e7eb);
    min-width: 0;
    padding: 2px 20px;
}

.fd-announcement-page__hero-meta dt {
    color: var(--color-font-subtle-light, #667085);
    font-size: 11px;
    font-weight: 650;
}

.fd-announcement-page__hero-meta dd {
    color: var(--color-font-default-light, #111827);
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0 0;
}

.fd-announcement-page__hero-meta small {
    color: var(--color-font-subtle-light, #667085);
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.fd-announcement-page__feedback,
.fd-announcement-dialog__feedback {
    background: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: 7px;
    color: #067647;
    font-size: 13px;
    padding: 10px 12px;
}

.fd-announcement-page__feedback.is-error,
.fd-announcement-dialog__feedback {
    background: #fff1f0;
    border-color: #fecdca;
    color: #b42318;
}

.fd-announcement-page__workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.32fr) minmax(360px, 0.8fr);
}

.fd-announcement-page__editor,
.fd-announcement-page__rail > section {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
}

.fd-announcement-page__editor {
    min-width: 0;
    padding: 22px;
}

.fd-announcement-page__rail {
    display: grid;
    gap: 18px;
    min-width: 0;
    position: sticky;
    top: 18px;
}

.fd-announcement-page__rail > section {
    padding: 18px;
}

.fd-announcement-page__section-header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.fd-announcement-page__section-header h2,
.fd-announcement-page__danger h2 {
    color: var(--color-font-default-light, #111827);
    font-size: 15px;
    font-weight: 750;
    margin: 0;
}

.fd-announcement-page__section-header p,
.fd-announcement-page__danger header p {
    color: var(--color-font-subtle-light, #667085);
    font-size: 12px;
    line-height: 1.55;
    margin: 4px 0 0;
}

.fd-announcement-page__read-only {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border-radius: 5px;
    color: var(--color-font-subtle-light, #667085);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 650;
    gap: 5px;
    padding: 5px 8px;
}

.fd-announcement-page__read-only .material-symbols-outlined {
    font-size: 15px;
}

.fd-announcement-form {
    display: grid;
    gap: 20px;
    margin-top: 22px;
}

.fd-announcement-form__field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.fd-announcement-form__field > label,
.fd-announcement-form__label,
.fd-announcement-form__label-row label {
    color: var(--color-font-default-light, #111827);
    font-size: 12px;
    font-weight: 700;
}

.fd-announcement-form__label-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.fd-announcement-form__label-row small,
.fd-announcement-form__field > small {
    color: var(--color-font-subtle-light, #667085);
    font-size: 11px;
}

.fd-announcement-form input[type="text"],
.fd-announcement-form input[type="number"],
.fd-announcement-dialog input[type="text"],
.fd-announcement-form textarea {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 7px;
    color: var(--color-font-default-light, #111827);
    font-size: 13px;
    min-height: 42px;
    padding: 9px 11px;
    width: 100%;
}

.fd-announcement-form input:focus,
.fd-announcement-form textarea:focus,
.fd-announcement-dialog input:focus {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    outline: none;
}

.fd-announcement-form__settings {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(180px, 0.42fr) minmax(240px, 1fr);
}

.fd-announcement-form__status {
    align-content: start;
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    padding: 12px 14px;
}

.fd-announcement-switch {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 9px;
    justify-self: start;
}

.fd-announcement-switch input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.fd-announcement-switch__track {
    background: #9ca3af;
    border-radius: 12px;
    display: inline-flex;
    height: 22px;
    padding: 3px;
    transition: background-color 160ms ease;
    width: 40px;
}

.fd-announcement-switch__track span {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    height: 16px;
    transform: translateX(0);
    transition: transform 160ms ease;
    width: 16px;
}

.fd-announcement-switch input:checked + .fd-announcement-switch__track {
    background: #177245;
}

.fd-announcement-switch input:checked + .fd-announcement-switch__track span {
    transform: translateX(18px);
}

.fd-announcement-switch input:focus-visible + .fd-announcement-switch__track {
    box-shadow: 0 0 0 3px rgba(23, 114, 69, 0.18);
}

.fd-announcement-editor {
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 7px;
    overflow: hidden;
}

.fd-announcement-editor textarea {
    border: 0;
    border-radius: 0;
    min-height: 280px;
    resize: vertical;
}

.fd-announcement-editor.is-enhanced textarea {
    display: none;
}

.fd-announcement-editor__toolbar.ql-toolbar.ql-snow {
    align-items: center;
    background: var(--color-base-50, #f9fafb);
    border: 0;
    border-bottom: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px;
}

.fd-announcement-editor .ql-container.ql-snow {
    border: 0;
    color: var(--color-font-default-light, #111827);
    font-family: inherit;
    font-size: 14px;
    min-height: 280px;
}

.fd-announcement-editor .ql-editor {
    line-height: 1.7;
    min-height: 280px;
    padding: 16px;
}

.fd-announcement-editor .ql-editor img {
    cursor: pointer;
    display: block;
    height: auto;
    margin: 12px 0;
    max-width: 100%;
    object-fit: contain;
    transition: outline-color 0.16s ease;
}

.fd-announcement-editor .ql-editor img.is-selected {
    outline: 3px solid rgba(23, 114, 69, 0.28);
    outline-offset: 3px;
}

.fd-announcement-editor .ql-editor .ql-align-center img {
    margin-left: auto;
    margin-right: auto;
}

.fd-announcement-editor .ql-editor .ql-align-right img {
    margin-left: auto;
    margin-right: 0;
}

.fd-announcement-editor__image-controls {
    align-items: center;
    background: var(--color-base-50, #f9fafb);
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 12px;
}

.fd-announcement-editor__image-controls[hidden] {
    display: none;
}

.fd-announcement-editor__image-controls > span {
    color: var(--color-font-subtle-light, #667085);
    font-size: 11px;
    font-weight: 700;
}

.fd-announcement-editor__image-controls > div {
    display: flex;
    gap: 3px;
}

.fd-announcement-editor__image-controls button {
    align-items: center;
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 5px;
    color: var(--color-font-default-light, #344054);
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 650;
    justify-content: center;
    min-height: 28px;
    min-width: 34px;
    padding: 3px 7px;
}

.fd-announcement-editor__image-controls button:hover,
.fd-announcement-editor__image-controls button:focus-visible,
.fd-announcement-editor__image-controls button.is-active {
    background: #e9f7ef;
    border-color: #79b596;
    color: #177245;
}

.fd-announcement-editor__image-controls .material-symbols-outlined {
    font-size: 17px;
}

.fd-announcement-editor__image-controls small {
    color: var(--color-font-subtle-light, #667085);
    font-size: 11px;
    margin-left: auto;
}

.is-uploading-announcement-image .fd-announcement-editor .ql-image {
    cursor: wait;
    opacity: 0.5;
}

.fd-announcement-form__actions {
    align-items: center;
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 18px;
}

.fd-announcement-form__actions > a {
    color: var(--color-font-subtle-light, #667085);
    font-size: 13px;
    font-weight: 650;
    padding: 9px 12px;
    text-decoration: none;
}

.fd-announcement-form__actions > button {
    align-items: center;
    background: #111827;
    border: 1px solid #111827;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    min-height: 40px;
    padding: 8px 15px;
}

.fd-announcement-form__actions > button:hover,
.fd-announcement-form__actions > button:focus-visible {
    background: #263244;
}

.fd-announcement-form__actions > button:disabled,
.fd-announcement-dialog button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.fd-announcement-form__actions .material-symbols-outlined {
    font-size: 18px;
}

.fd-announcement-form__error {
    color: #b42318;
    font-size: 11px;
    min-height: 16px;
}

.fd-announcement-form__field.is-invalid input,
.fd-announcement-form__field.is-invalid textarea,
.fd-announcement-form__field.is-invalid .fd-announcement-editor {
    border-color: #f04438;
}

.fd-announcement-page__preview-state {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 5px;
    color: var(--color-font-subtle-light, #667085);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 8px;
}

.fd-announcement-page__preview-state.is-active {
    background: #e9f7ef;
    color: #177245;
}

.fd-announcement-preview {
    aspect-ratio: 4 / 5;
    background: #f4f6f8;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    margin-top: 16px;
    min-height: 420px;
    overflow: hidden;
}

.fd-announcement-preview iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.fd-announcement-page__preview-note {
    align-items: center;
    color: var(--color-font-subtle-light, #667085);
    display: flex;
    font-size: 11px;
    gap: 5px;
    margin: 10px 0 0;
}

.fd-announcement-page__preview-note .material-symbols-outlined {
    color: #177245;
    font-size: 16px;
}

.fd-announcement-page__danger {
    border-color: #fecdca !important;
}

.fd-announcement-page__danger header {
    display: grid;
    gap: 3px;
}

.fd-announcement-page__danger > button {
    align-items: center;
    background: transparent;
    border: 1px solid #f04438;
    border-radius: 7px;
    color: #b42318;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    margin-top: 14px;
    min-height: 38px;
    padding: 8px 12px;
}

.fd-announcement-page__danger > button:hover:not(:disabled),
.fd-announcement-page__danger > button:focus-visible:not(:disabled) {
    background: #fff1f0;
}

.fd-announcement-page__danger > button:disabled {
    border-color: var(--color-base-300, #d1d5db);
    color: var(--color-font-subtle-light, #667085);
    cursor: not-allowed;
    opacity: 0.7;
}

.fd-announcement-page__danger .material-symbols-outlined {
    font-size: 17px;
}

.fd-announcement-page__read-fields {
    display: grid;
    gap: 0;
    margin: 20px 0 0;
}

.fd-announcement-page__read-fields > div {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(100px, 0.28fr) 1fr;
    padding: 14px 0;
}

.fd-announcement-page__read-fields dt {
    color: var(--color-font-subtle-light, #667085);
    font-size: 12px;
}

.fd-announcement-page__read-fields dd {
    color: var(--color-font-default-light, #111827);
    font-size: 13px;
    font-weight: 650;
    margin: 0;
    overflow-wrap: anywhere;
}

.fd-announcement-dialog {
    inset: 0;
    position: fixed;
    z-index: 1100;
}

.fd-announcement-dialog[hidden] {
    display: none;
}

.fd-announcement-dialog__backdrop {
    background: rgba(17, 24, 39, 0.55);
    border: 0;
    inset: 0;
    position: absolute;
    width: 100%;
}

.fd-announcement-dialog__panel {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.24);
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
}

.fd-announcement-dialog__panel > header {
    align-items: flex-start;
    display: grid;
    gap: 12px;
    grid-template-columns: 42px 1fr 32px;
}

.fd-announcement-dialog__icon {
    align-items: center;
    background: #fff1f0;
    border-radius: 8px;
    color: #b42318;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.fd-announcement-dialog__panel h2 {
    color: var(--color-font-default-light, #111827);
    font-size: 17px;
    margin: 1px 0 0;
}

.fd-announcement-dialog__panel header p {
    color: var(--color-font-subtle-light, #667085);
    font-size: 12px;
    margin: 4px 0 0;
}

.fd-announcement-dialog__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--color-font-subtle-light, #667085);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.fd-announcement-dialog__panel form {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.fd-announcement-dialog__warning {
    background: #fff8f6;
    border-left: 3px solid #f04438;
    padding: 10px 12px;
}

.fd-announcement-dialog__warning strong {
    color: #7a271a;
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.fd-announcement-dialog__warning p {
    color: #b54708;
    font-size: 12px;
    margin: 4px 0 0;
}

.fd-announcement-dialog__panel footer {
    align-items: center;
    display: flex;
    gap: 9px;
    justify-content: flex-end;
}

.fd-announcement-dialog__panel footer button {
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    min-height: 38px;
    padding: 8px 13px;
}

.fd-announcement-dialog__panel footer button[type="button"] {
    background: var(--color-base-0, #fff);
    color: var(--color-font-default-light, #111827);
}

.fd-announcement-dialog__panel footer button[type="submit"] {
    align-items: center;
    background: #b42318;
    border-color: #b42318;
    color: #fff;
    display: inline-flex;
    gap: 5px;
}

.fd-announcement-dialog__panel footer .material-symbols-outlined {
    font-size: 17px;
}

.fd-announcement-page__toast {
    background: #111827;
    border-radius: 7px;
    bottom: 24px;
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    left: 50%;
    padding: 10px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1200;
}

.dark .fd-announcement-page__hero,
.dark .fd-announcement-page__editor,
.dark .fd-announcement-page__rail > section,
.dark .fd-announcement-dialog__panel {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-announcement-page__title-line h1,
.dark .fd-announcement-page__hero-meta dd,
.dark .fd-announcement-page__section-header h2,
.dark .fd-announcement-page__danger h2,
.dark .fd-announcement-form__field > label,
.dark .fd-announcement-form__label,
.dark .fd-announcement-form__label-row label,
.dark .fd-announcement-page__read-fields dd,
.dark .fd-announcement-dialog__panel h2 {
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-announcement-form input[type="text"],
.dark .fd-announcement-form input[type="number"],
.dark .fd-announcement-form textarea,
.dark .fd-announcement-dialog input[type="text"] {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-announcement-form__status,
.dark .fd-announcement-editor__toolbar.ql-toolbar.ql-snow {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-announcement-editor,
.dark .fd-announcement-page__read-fields > div,
.dark .fd-announcement-form__actions {
    border-color: var(--color-base-700, #374151);
}

.dark .fd-announcement-editor .ql-container.ql-snow {
    color: var(--color-font-default-dark, #f3f4f6);
}

@media screen and (max-width: 1180px) {
    .fd-announcement-page__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-announcement-page__rail {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
        position: static;
    }

    .fd-announcement-page__preview-section {
        grid-row: span 2;
    }

    .fd-announcement-preview {
        aspect-ratio: 16 / 10;
        min-height: 380px;
    }
}

@media screen and (max-width: 767px) {
    .fd-announcement-page {
        gap: 14px;
        padding-bottom: 20px;
    }

    .fd-announcement-page__hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .fd-announcement-page__hero-icon {
        flex-basis: 44px;
        height: 44px;
        width: 44px;
    }

    .fd-announcement-page__title-line h1 {
        font-size: 20px;
    }

    .fd-announcement-page__hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .fd-announcement-page__hero-meta > div {
        border-left: 0;
        border-top: 1px solid var(--color-base-200, #e5e7eb);
        padding: 12px 10px 0 0;
    }

    .fd-announcement-page__editor,
    .fd-announcement-page__rail > section {
        padding: 16px;
    }

    .fd-announcement-page__rail,
    .fd-announcement-form__settings {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-announcement-editor__toolbar.ql-toolbar.ql-snow {
        align-items: flex-start;
    }

    .fd-announcement-editor .ql-container.ql-snow,
    .fd-announcement-editor .ql-editor {
        min-height: 230px;
    }

    .fd-announcement-preview {
        aspect-ratio: 4 / 5;
        min-height: 420px;
    }

    .fd-announcement-form__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fd-announcement-form__actions > a,
    .fd-announcement-form__actions > button {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .fd-announcement-form__actions > button {
        order: -1;
    }
}

/* Feedback detail and processing workflow */
.fd-feedback-page {
    display: grid;
    gap: 16px;
    padding-bottom: 28px;
}

.fd-feedback-page__back {
    align-items: center;
    color: var(--color-font-subtle-light, #667085);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 6px;
    justify-self: start;
    text-decoration: none;
}

.fd-feedback-page__back:hover {
    color: #2563eb;
}

.fd-feedback-page__back .material-symbols-outlined {
    font-size: 18px;
}

.fd-feedback-page__hero,
.fd-feedback-page__content,
.fd-feedback-page__rail > section,
.fd-feedback-page__processing,
.fd-feedback-page__history {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
}

.fd-feedback-page__hero {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-width: 0;
    padding: 20px 22px;
}

.fd-feedback-page__identity {
    align-items: center;
    display: flex;
    gap: 14px;
    min-width: 0;
}

.fd-feedback-page__hero-icon {
    align-items: center;
    background: #eef4ff;
    border: 1px solid #d7e5ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.fd-feedback-page__hero-icon--bug {
    background: #fff4ed;
    border-color: #ffd6ae;
    color: #e04f16;
}

.fd-feedback-page__hero-icon--feature {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #079455;
}

.fd-feedback-page__hero-icon--other {
    background: #f4f3ff;
    border-color: #d9d6fe;
    color: #6938ef;
}

.fd-feedback-page__hero-icon .material-symbols-outlined {
    font-size: 27px;
}

.fd-feedback-page__identity-copy {
    min-width: 0;
}

.fd-feedback-page__eyebrow,
.fd-feedback-page__id-row,
.fd-feedback-page__title-line {
    align-items: center;
    display: flex;
    gap: 8px;
}

.fd-feedback-page__eyebrow > span:first-child {
    color: var(--color-font-subtle-light, #667085);
    font-size: 12px;
    font-weight: 700;
}

.fd-feedback-page__identity h1 {
    color: var(--color-font-default-light, #101828);
    font-size: 22px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 5px 0;
}

.fd-feedback-page__id-row small {
    color: var(--color-font-subtle-light, #667085);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-feedback-page__icon-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-font-subtle-light, #667085);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

.fd-feedback-page__icon-button:hover {
    background: var(--color-base-100, #f3f4f6);
    color: #2563eb;
}

.fd-feedback-page__icon-button .material-symbols-outlined {
    font-size: 17px;
}

.fd-feedback-page__hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(145px, 1fr));
    margin: 0;
}

.fd-feedback-page__hero-meta > div {
    border-left: 1px solid var(--color-base-200, #e5e7eb);
    min-width: 0;
    padding: 0 18px;
}

.fd-feedback-page__hero-meta dt {
    color: var(--color-font-subtle-light, #667085);
    font-size: 11px;
    font-weight: 650;
}

.fd-feedback-page__hero-meta dd {
    color: var(--color-font-default-light, #101828);
    font-size: 13px;
    font-weight: 750;
    margin: 4px 0 0;
}

.fd-feedback-page__hero-meta small {
    color: var(--color-font-subtle-light, #98a2b3);
    display: block;
    font-size: 10px;
    margin-top: 2px;
}

.fd-feedback-page__feedback {
    align-items: center;
    background: #ecfdf3;
    border: 1px solid #abefc6;
    border-radius: 7px;
    color: #067647;
    display: flex;
    font-size: 13px;
    font-weight: 650;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 12px;
}

.fd-feedback-page__feedback[hidden] {
    display: none;
}

.fd-feedback-page__feedback.is-error {
    background: #fef3f2;
    border-color: #fecdca;
    color: #b42318;
}

.fd-feedback-page__feedback button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 4px;
}

.fd-feedback-page__feedback button .material-symbols-outlined {
    font-size: 17px;
}

.fd-feedback-page__workspace {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
}

.fd-feedback-page__content,
.fd-feedback-page__processing,
.fd-feedback-page__history,
.fd-feedback-page__rail > section {
    padding: 18px;
}

.fd-feedback-page__rail {
    display: grid;
    gap: 16px;
}

.fd-feedback-page__section-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fd-feedback-page__section-header > div {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.fd-feedback-page__section-icon {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border-radius: 7px;
    color: var(--color-font-subtle-light, #667085);
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.fd-feedback-page__section-icon .material-symbols-outlined {
    font-size: 19px;
}

.fd-feedback-page__section-header h2 {
    color: var(--color-font-default-light, #101828);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0;
}

.fd-feedback-page__section-header p {
    color: var(--color-font-subtle-light, #667085);
    font-size: 11px;
    margin: 3px 0 0;
}

.fd-feedback-page__category,
.fd-feedback-page__read-only {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border-radius: 6px;
    color: var(--color-font-subtle-light, #667085);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 4px;
    min-height: 28px;
    padding: 5px 8px;
}

.fd-feedback-page__category .material-symbols-outlined,
.fd-feedback-page__read-only .material-symbols-outlined {
    font-size: 15px;
}

.fd-feedback-page__content-body {
    color: var(--color-font-default-light, #1d2939);
    font-size: 15px;
    line-height: 1.8;
    min-height: 176px;
    overflow-wrap: anywhere;
    padding: 8px 2px;
    white-space: pre-wrap;
}

.fd-feedback-page__empty {
    color: var(--color-font-subtle-light, #98a2b3);
    font-size: 12px;
}

.fd-feedback-page__submitter {
    align-items: center;
    background: var(--color-base-50, #f9fafb);
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 7px;
    color: inherit;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    padding: 11px;
    text-decoration: none;
}

.fd-feedback-page__submitter:hover:not(.is-static) {
    border-color: #84adff;
}

.fd-feedback-page__submitter > .material-symbols-outlined:first-child {
    color: #2563eb;
    font-size: 25px;
}

.fd-feedback-page__submitter > .material-symbols-outlined:last-child {
    color: var(--color-font-subtle-light, #98a2b3);
    font-size: 17px;
}

.fd-feedback-page__submitter strong,
.fd-feedback-page__submitter small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-feedback-page__submitter strong {
    color: var(--color-font-default-light, #101828);
    font-size: 12px;
}

.fd-feedback-page__submitter small {
    color: var(--color-font-subtle-light, #667085);
    font-size: 10px;
    margin-top: 2px;
}

.fd-feedback-page__contacts {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-feedback-page__contacts li {
    align-items: center;
    display: grid;
    gap: 9px;
    grid-template-columns: 24px minmax(0, 1fr) 30px;
    min-width: 0;
}

.fd-feedback-page__contacts li > .material-symbols-outlined {
    color: var(--color-font-subtle-light, #667085);
    font-size: 18px;
}

.fd-feedback-page__contacts small,
.fd-feedback-page__contacts strong {
    display: block;
}

.fd-feedback-page__contacts small {
    color: var(--color-font-subtle-light, #667085);
    font-size: 10px;
}

.fd-feedback-page__contacts strong {
    color: var(--color-font-default-light, #101828);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-feedback-form {
    display: grid;
    gap: 18px;
}

.fd-feedback-form__statuses {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.fd-feedback-form__statuses legend,
.fd-feedback-form__label-row label {
    color: var(--color-font-default-light, #344054);
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 9px;
}

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

.fd-feedback-form__status-option {
    align-items: center;
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d0d5dd);
    border-radius: 7px;
    cursor: pointer;
    display: grid;
    gap: 9px;
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 70px;
    padding: 11px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.fd-feedback-form__status-option:hover {
    border-color: #84adff;
}

.fd-feedback-form__status-option.is-selected {
    border-color: #528bff;
    box-shadow: 0 0 0 2px #dbe7ff;
}

.fd-feedback-form__status-option--resolved.is-selected {
    border-color: #17b26a;
    box-shadow: 0 0 0 2px #d1fadf;
}

.fd-feedback-form__status-option--ignored.is-selected {
    border-color: #98a2b3;
    box-shadow: 0 0 0 2px #eaecf0;
}

.fd-feedback-form__status-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.fd-feedback-form__status-mark {
    align-items: center;
    border: 1px solid var(--color-base-300, #d0d5dd);
    border-radius: 50%;
    color: transparent;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.fd-feedback-form__status-mark .material-symbols-outlined {
    font-size: 14px;
}

.fd-feedback-form__status-option.is-selected .fd-feedback-form__status-mark {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.fd-feedback-form__status-option--resolved.is-selected .fd-feedback-form__status-mark {
    background: #079455;
    border-color: #079455;
}

.fd-feedback-form__status-option--ignored.is-selected .fd-feedback-form__status-mark {
    background: #667085;
    border-color: #667085;
}

.fd-feedback-form__status-option strong,
.fd-feedback-form__status-option small {
    display: block;
}

.fd-feedback-form__status-option strong {
    color: var(--color-font-default-light, #101828);
    font-size: 12px;
}

.fd-feedback-form__status-option small {
    color: var(--color-font-subtle-light, #667085);
    font-size: 10px;
    line-height: 1.45;
    margin-top: 2px;
}

.fd-feedback-form__field {
    display: grid;
    gap: 7px;
}

.fd-feedback-form__label-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.fd-feedback-form__label-row label {
    margin: 0;
}

.fd-feedback-form__label-row small,
.fd-feedback-form__field > p {
    color: var(--color-font-subtle-light, #667085);
    font-size: 10px;
    margin: 0;
}

.fd-feedback-form textarea {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d0d5dd);
    border-radius: 7px;
    box-sizing: border-box;
    color: var(--color-font-default-light, #101828);
    font-size: 13px;
    line-height: 1.6;
    min-height: 126px;
    padding: 11px 12px;
    resize: vertical;
    width: 100%;
}

.fd-feedback-form textarea:focus {
    border-color: #528bff;
    box-shadow: 0 0 0 3px #e5edff;
    outline: none;
}

.fd-feedback-form__error {
    color: #d92d20;
    display: block;
    font-size: 11px;
    min-height: 15px;
}

.fd-feedback-form .has-error textarea,
.fd-feedback-form .has-error .fd-feedback-form__status-option {
    border-color: #f04438;
}

.fd-feedback-form__actions {
    align-items: center;
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
}

.fd-feedback-form__actions > span {
    color: var(--color-font-subtle-light, #667085);
    font-size: 11px;
}

.fd-feedback-form__actions > span strong {
    color: var(--color-font-default-light, #344054);
}

.fd-feedback-form__actions button {
    align-items: center;
    background: #111827;
    border: 1px solid #111827;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 6px;
    min-height: 40px;
    padding: 9px 14px;
}

.fd-feedback-form__actions button:hover:not(:disabled) {
    background: #1f2937;
}

.fd-feedback-form__actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.fd-feedback-form__actions button .material-symbols-outlined {
    font-size: 18px;
}

.fd-feedback-page__permission-note {
    align-items: flex-start;
    background: #fffaeb;
    border: 1px solid #fedf89;
    border-radius: 7px;
    color: #93370d;
    display: flex;
    gap: 10px;
    padding: 12px;
}

.fd-feedback-page__permission-note > .material-symbols-outlined {
    font-size: 20px;
}

.fd-feedback-page__permission-note strong {
    font-size: 12px;
}

.fd-feedback-page__permission-note p {
    font-size: 11px;
    margin: 3px 0 0;
}

.fd-feedback-page__current-note {
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    margin-top: 16px;
    padding-top: 14px;
}

.fd-feedback-page__current-note > span {
    color: var(--color-font-subtle-light, #667085);
    display: block;
    font-size: 10px;
    font-weight: 700;
}

.fd-feedback-page__current-note p {
    color: var(--color-font-default-light, #344054);
    font-size: 12px;
    line-height: 1.65;
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.fd-feedback-page__current-note p.is-empty {
    color: var(--color-font-subtle-light, #98a2b3);
}

.fd-feedback-history {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-feedback-history li {
    display: grid;
    gap: 12px;
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 66px;
    position: relative;
}

.fd-feedback-history li:not(:last-child)::before {
    background: var(--color-base-200, #e5e7eb);
    content: "";
    height: calc(100% - 25px);
    left: 13px;
    position: absolute;
    top: 26px;
    width: 1px;
}

.fd-feedback-history__marker {
    align-items: center;
    background: #fffaeb;
    border: 1px solid #fedf89;
    border-radius: 50%;
    color: #dc6803;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
    z-index: 1;
}

.fd-feedback-history__marker--success {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #079455;
}

.fd-feedback-history__marker--danger {
    background: #fef3f2;
    border-color: #fecdca;
    color: #d92d20;
}

.fd-feedback-history__marker .material-symbols-outlined {
    font-size: 15px;
}

.fd-feedback-history__content {
    padding-bottom: 14px;
}

.fd-feedback-history__content > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.fd-feedback-history__content strong {
    color: var(--color-font-default-light, #101828);
    font-size: 12px;
}

.fd-feedback-history__content p {
    color: var(--color-font-subtle-light, #667085);
    font-size: 11px;
    margin: 5px 0 2px;
}

.fd-feedback-history__content > small {
    color: var(--color-font-subtle-light, #98a2b3);
    font-size: 10px;
}

.fd-feedback-history__empty {
    align-items: center;
    color: var(--color-font-subtle-light, #667085);
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 100px;
    text-align: left;
}

.fd-feedback-history__empty > .material-symbols-outlined {
    font-size: 28px;
}

.fd-feedback-history__empty strong {
    color: var(--color-font-default-light, #344054);
    font-size: 12px;
}

.fd-feedback-history__empty p {
    font-size: 11px;
    margin: 2px 0 0;
}

.fd-feedback-page__toast {
    background: #111827;
    border-radius: 7px;
    bottom: 24px;
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    left: 50%;
    padding: 10px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1200;
}

.dark .fd-feedback-page__hero,
.dark .fd-feedback-page__content,
.dark .fd-feedback-page__rail > section,
.dark .fd-feedback-page__processing,
.dark .fd-feedback-page__history,
.dark .fd-feedback-form__status-option {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-feedback-page__identity h1,
.dark .fd-feedback-page__hero-meta dd,
.dark .fd-feedback-page__section-header h2,
.dark .fd-feedback-page__content-body,
.dark .fd-feedback-page__submitter strong,
.dark .fd-feedback-page__contacts strong,
.dark .fd-feedback-form__statuses legend,
.dark .fd-feedback-form__label-row label,
.dark .fd-feedback-form__status-option strong,
.dark .fd-feedback-form__actions > span strong,
.dark .fd-feedback-page__current-note p,
.dark .fd-feedback-history__content strong,
.dark .fd-feedback-history__empty strong {
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-feedback-page__submitter,
.dark .fd-feedback-page__section-icon {
    background: var(--color-base-800, #1f2937);
    border-color: var(--color-base-700, #374151);
}

.dark .fd-feedback-form textarea {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
    color: var(--color-font-default-dark, #f3f4f6);
}

.dark .fd-feedback-form__actions,
.dark .fd-feedback-page__current-note,
.dark .fd-feedback-history li:not(:last-child)::before {
    border-color: var(--color-base-700, #374151);
}

@media screen and (max-width: 1180px) {
    .fd-feedback-page__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-feedback-page__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-feedback-form__status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .fd-feedback-page {
        gap: 12px;
        padding-bottom: 18px;
    }

    .fd-feedback-page__hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .fd-feedback-page__hero-icon {
        flex-basis: 44px;
        height: 44px;
        width: 44px;
    }

    .fd-feedback-page__identity h1 {
        font-size: 19px;
    }

    .fd-feedback-page__hero-meta {
        border-top: 1px solid var(--color-base-200, #e5e7eb);
        padding-top: 13px;
        width: 100%;
    }

    .fd-feedback-page__hero-meta > div {
        border-left: 0;
        padding: 0 12px 0 0;
    }

    .fd-feedback-page__content,
    .fd-feedback-page__processing,
    .fd-feedback-page__history,
    .fd-feedback-page__rail > section {
        padding: 15px;
    }

    .fd-feedback-page__rail,
    .fd-feedback-form__status-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-feedback-page__section-header {
        gap: 10px;
    }

    .fd-feedback-form__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .fd-feedback-form__actions button {
        justify-content: center;
        width: 100%;
    }

    .fd-feedback-page__feedback {
        align-items: flex-start;
        gap: 8px;
    }
}

/* System setting detail */
.fd-system-setting-page {
    --fd-setting-border: var(--color-base-200, #e5e7eb);
    --fd-setting-muted: var(--color-base-500, #64748b);
    --fd-setting-ink: var(--color-base-900, #111827);
    display: grid;
    gap: 16px;
    padding-bottom: 28px;
}

.fd-system-setting-page__back {
    align-items: center;
    color: var(--fd-setting-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    justify-self: start;
    text-decoration: none;
}

.fd-system-setting-page__back:hover {
    color: var(--color-primary-600, #2563eb);
}

.fd-system-setting-page__back .material-symbols-outlined {
    font-size: 18px;
}

.fd-system-setting-page__hero,
.fd-system-setting-page__editor,
.fd-system-setting-page__rail > section,
.fd-system-setting-history {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--fd-setting-border);
    border-radius: 8px;
}

.fd-system-setting-page__hero {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    min-height: 132px;
    padding: 24px 28px;
}

.fd-system-setting-page__identity {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    min-width: 0;
}

.fd-system-setting-page__hero-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 56px;
    height: 56px;
    justify-content: center;
    width: 56px;
}

.fd-system-setting-page__hero-icon--billing {
    background: #eaf2ff;
    color: #2563eb;
}

.fd-system-setting-page__hero-icon--growth {
    background: #fff3d8;
    color: #a16207;
}

.fd-system-setting-page__hero-icon--ai {
    background: #f3e8ff;
    color: #7e22ce;
}

.fd-system-setting-page__hero-icon--communication {
    background: #e7f8ef;
    color: #047857;
}

.fd-system-setting-page__hero-icon--other {
    background: #eef2f7;
    color: #475569;
}

.fd-system-setting-page__hero-icon .material-symbols-outlined {
    font-size: 28px;
}

.fd-system-setting-page__eyebrow,
.fd-system-setting-page__key-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fd-system-setting-page__eyebrow > span {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 999px;
    color: var(--fd-setting-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
}

.fd-system-setting-page__eyebrow
    .fd-system-setting-page__format {
    background: #eaf2ff;
    color: #1d4ed8;
}

.fd-system-setting-page__eyebrow
    .fd-system-setting-page__read-only {
    align-items: center;
    background: #fff3d8;
    color: #92400e;
    display: inline-flex;
    gap: 3px;
}

.fd-system-setting-page__read-only
    .material-symbols-outlined {
    font-size: 13px;
}

.fd-system-setting-page__identity h1 {
    color: var(--fd-setting-ink);
    font-size: 24px;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 8px 0 4px;
}

.fd-system-setting-page__identity p {
    color: var(--fd-setting-muted);
    font-size: 13px;
    margin: 0 0 9px;
}

.fd-system-setting-page__key-row code,
.fd-system-setting-modal code {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 4px;
    color: var(--color-base-700, #374151);
    font-size: 12px;
    padding: 4px 7px;
}

.fd-system-setting-page__icon-button,
.fd-system-setting-plan header button,
.fd-system-setting-pack header button,
.fd-system-setting-password button,
.fd-system-setting-modal header > button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--fd-setting-muted);
    cursor: pointer;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
}

.fd-system-setting-page__icon-button:hover,
.fd-system-setting-plan header button:hover,
.fd-system-setting-pack header button:hover,
.fd-system-setting-password button:hover,
.fd-system-setting-modal header > button:hover {
    background: var(--color-base-100, #f3f4f6);
    color: var(--color-primary-600, #2563eb);
}

.fd-system-setting-page__icon-button
    .material-symbols-outlined,
.fd-system-setting-plan header button
    .material-symbols-outlined,
.fd-system-setting-pack header button
    .material-symbols-outlined,
.fd-system-setting-password button
    .material-symbols-outlined,
.fd-system-setting-modal header > button
    .material-symbols-outlined {
    font-size: 18px;
}

.fd-system-setting-page__hero-meta {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    margin: 0;
}

.fd-system-setting-page__hero-meta > div {
    border-left: 1px solid var(--fd-setting-border);
    min-width: 0;
    padding: 4px 22px;
}

.fd-system-setting-page__hero-meta dt,
.fd-system-setting-page__hero-meta small {
    color: var(--fd-setting-muted);
    display: block;
    font-size: 11px;
}

.fd-system-setting-page__hero-meta dd {
    color: var(--fd-setting-ink);
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0 2px;
}

.fd-system-setting-page__hero-meta small {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-system-setting-page__feedback {
    align-items: center;
    background: #e7f8ef;
    border: 1px solid #a7e7c3;
    border-radius: 7px;
    color: #166534;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    justify-content: space-between;
    padding: 10px 13px;
}

.fd-system-setting-page__feedback[hidden] {
    display: none;
}

.fd-system-setting-page__feedback.is-error {
    background: #fff0f0;
    border-color: #fecaca;
    color: #b91c1c;
}

.fd-system-setting-page__feedback button {
    align-items: center;
    background: transparent;
    border: 0;
    color: currentColor;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 4px;
}

.fd-system-setting-page__feedback button
    .material-symbols-outlined {
    font-size: 17px;
}

.fd-system-setting-page__workspace {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 310px;
}

.fd-system-setting-page__editor,
.fd-system-setting-page__rail > section,
.fd-system-setting-history {
    padding: 20px;
}

.fd-system-setting-page__rail {
    display: grid;
    gap: 16px;
}

.fd-system-setting-page__section-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.fd-system-setting-page__section-header > div {
    align-items: center;
    display: flex;
    gap: 10px;
}

.fd-system-setting-page__section-icon {
    align-items: center;
    background: var(--color-base-100, #f3f4f6);
    border-radius: 7px;
    color: var(--color-primary-600, #2563eb);
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.fd-system-setting-page__section-icon
    .material-symbols-outlined {
    font-size: 20px;
}

.fd-system-setting-page__section-header h2 {
    color: var(--fd-setting-ink);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: 0;
    margin: 0;
}

.fd-system-setting-page__section-header p {
    color: var(--fd-setting-muted);
    font-size: 11px;
    margin: 2px 0 0;
}

.fd-system-setting-field {
    display: grid;
    gap: 8px;
}

.fd-system-setting-field--compact {
    max-width: 420px;
}

.fd-system-setting-field > label,
.fd-system-setting-field__heading > label,
.fd-system-setting-grid label {
    color: var(--color-base-700, #374151);
    font-size: 12px;
    font-weight: 700;
}

.fd-system-setting-field input,
.fd-system-setting-field textarea,
.fd-system-setting-grid input,
.fd-system-setting-grid select {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--fd-setting-ink);
    font-size: 13px;
    min-height: 40px;
    outline: 0;
    padding: 9px 11px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    width: 100%;
}

.fd-system-setting-field textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, monospace;
    line-height: 1.55;
    min-height: 240px;
    resize: vertical;
}

.fd-system-setting-field input:focus,
.fd-system-setting-field textarea:focus,
.fd-system-setting-grid input:focus,
.fd-system-setting-grid select:focus {
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 12%);
}

.fd-system-setting-field input:disabled,
.fd-system-setting-field textarea:disabled,
.fd-system-setting-grid input:disabled,
.fd-system-setting-grid select:disabled,
.fd-system-setting-grid input[readonly] {
    background: var(--color-base-50, #f8fafc);
    color: var(--fd-setting-muted);
}

.fd-system-setting-field > p,
.fd-system-setting-grid label > small {
    color: var(--fd-setting-muted);
    font-size: 11px;
    margin: 0;
}

.fd-system-setting-field__heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.fd-system-setting-field__heading button,
.fd-system-setting-add {
    align-items: center;
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 6px;
    color: var(--color-base-700, #374151);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    min-height: 36px;
    padding: 7px 11px;
}

.fd-system-setting-field__heading button:hover,
.fd-system-setting-add:hover {
    border-color: var(--color-primary-400, #60a5fa);
    color: var(--color-primary-700, #1d4ed8);
}

.fd-system-setting-field__heading button
    .material-symbols-outlined,
.fd-system-setting-add .material-symbols-outlined {
    font-size: 17px;
}

.fd-system-setting-field__unit,
.fd-system-setting-input-unit,
.fd-system-setting-password {
    align-items: center;
    display: flex;
    position: relative;
}

.fd-system-setting-field__unit > span,
.fd-system-setting-input-unit > small {
    color: var(--fd-setting-muted);
    font-size: 12px;
    pointer-events: none;
    position: absolute;
    right: 12px;
}

.fd-system-setting-field__unit input,
.fd-system-setting-input-unit input {
    padding-right: 42px;
}

.fd-system-setting-password input {
    padding-right: 44px;
}

.fd-system-setting-password button {
    position: absolute;
    right: 6px;
}

.fd-system-setting-toggle {
    align-items: center;
    border: 1px solid var(--fd-setting-border);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    max-width: 520px;
    padding: 14px;
}

.fd-system-setting-toggle > input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.fd-system-setting-toggle > span:nth-of-type(1) {
    background: var(--color-base-300, #d1d5db);
    border-radius: 999px;
    flex: 0 0 42px;
    height: 24px;
    position: relative;
    transition: background 120ms ease;
}

.fd-system-setting-toggle > span:nth-of-type(1)::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(15 23 42 / 22%);
    content: "";
    height: 18px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: transform 120ms ease;
    width: 18px;
}

.fd-system-setting-toggle
    > input:checked
    + span:nth-of-type(1) {
    background: var(--color-primary-600, #2563eb);
}

.fd-system-setting-toggle
    > input:checked
    + span:nth-of-type(1)::after {
    transform: translateX(18px);
}

.fd-system-setting-toggle strong,
.fd-system-setting-toggle small {
    display: block;
}

.fd-system-setting-toggle strong {
    color: var(--fd-setting-ink);
    font-size: 13px;
}

.fd-system-setting-toggle small {
    color: var(--fd-setting-muted);
    font-size: 11px;
    margin-top: 2px;
}

.fd-system-setting-collection {
    display: grid;
    gap: 12px;
}

.fd-system-setting-plan,
.fd-system-setting-pack {
    border: 1px solid var(--fd-setting-border);
    border-radius: 7px;
    overflow: hidden;
}

.fd-system-setting-plan > header,
.fd-system-setting-pack > header {
    align-items: center;
    background: var(--color-base-50, #f8fafc);
    border-bottom: 1px solid var(--fd-setting-border);
    display: flex;
    justify-content: space-between;
    min-height: 56px;
    padding: 10px 14px;
}

.fd-system-setting-plan > header > div,
.fd-system-setting-pack > header > div {
    align-items: center;
    display: flex;
    gap: 10px;
}

.fd-system-setting-plan > header > div
    > .material-symbols-outlined,
.fd-system-setting-pack > header > div
    > .material-symbols-outlined {
    color: var(--color-primary-600, #2563eb);
    font-size: 21px;
}

.fd-system-setting-plan header strong,
.fd-system-setting-plan header code,
.fd-system-setting-pack header strong {
    display: block;
}

.fd-system-setting-plan__required {
    background: #eaf2ff;
    border-radius: 999px;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
}

.fd-system-setting-plan header strong,
.fd-system-setting-pack header strong {
    color: var(--fd-setting-ink);
    font-size: 13px;
}

.fd-system-setting-plan header code {
    color: var(--fd-setting-muted);
    font-size: 10px;
    margin-top: 2px;
}

.fd-system-setting-grid {
    display: grid;
    gap: 13px;
    padding: 14px;
}

.fd-system-setting-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fd-system-setting-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fd-system-setting-grid--limits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px 0 0;
}

.fd-system-setting-grid label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.fd-system-setting-plan details {
    border-top: 1px solid var(--fd-setting-border);
    padding: 0 14px 14px;
}

.fd-system-setting-plan summary {
    align-items: center;
    color: var(--color-base-700, #374151);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: space-between;
    list-style: none;
    padding-top: 13px;
}

.fd-system-setting-plan summary::-webkit-details-marker {
    display: none;
}

.fd-system-setting-plan summary
    .material-symbols-outlined {
    font-size: 18px;
    transition: transform 120ms ease;
}

.fd-system-setting-plan details[open] summary
    .material-symbols-outlined {
    transform: rotate(180deg);
}

.fd-system-setting-add {
    margin-top: 12px;
}

.fd-system-setting-form__error {
    color: #b91c1c;
    display: block;
    font-size: 12px;
    margin-top: 10px;
}

.fd-system-setting-form__error:empty {
    display: none;
}

.fd-system-setting-form__actions {
    align-items: center;
    border-top: 1px solid var(--fd-setting-border);
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
}

.fd-system-setting-form__actions > div {
    align-items: center;
    color: var(--fd-setting-muted);
    display: flex;
    font-size: 11px;
    gap: 6px;
}

.fd-system-setting-form__actions
    > div
    .material-symbols-outlined {
    color: #059669;
    font-size: 18px;
}

.fd-system-setting-form__actions > button,
.fd-system-setting-modal footer
    button[data-fd-setting-confirm] {
    align-items: center;
    background: var(--color-primary-600, #2563eb);
    border: 1px solid var(--color-primary-600, #2563eb);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 6px;
    min-height: 40px;
    padding: 9px 15px;
}

.fd-system-setting-form__actions > button:disabled,
.fd-system-setting-modal footer button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.fd-system-setting-form__actions
    > button
    .material-symbols-outlined,
.fd-system-setting-modal footer
    button
    .material-symbols-outlined {
    font-size: 18px;
}

.fd-system-setting-sensitive,
.fd-system-setting-delegated {
    align-items: center;
    background: #fff8e8;
    border: 1px solid #f5d58e;
    border-radius: 7px;
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
}

.fd-system-setting-delegated {
    background: #f6efff;
    border-color: #d8b4fe;
}

.fd-system-setting-sensitive
    > .material-symbols-outlined,
.fd-system-setting-delegated__icon {
    align-items: center;
    background: rgb(255 255 255 / 72%);
    border-radius: 6px;
    color: #a16207;
    display: inline-flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.fd-system-setting-delegated__icon {
    color: #7e22ce;
}

.fd-system-setting-sensitive strong,
.fd-system-setting-delegated strong {
    color: var(--fd-setting-ink);
    display: block;
    font-size: 13px;
}

.fd-system-setting-sensitive p,
.fd-system-setting-delegated p {
    color: var(--fd-setting-muted);
    font-size: 11px;
    margin: 3px 0 0;
}

.fd-system-setting-delegated > div:nth-child(2) {
    flex: 1;
}

.fd-system-setting-delegated > a {
    align-items: center;
    color: #6d28d9;
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 4px;
    text-decoration: none;
}

.fd-system-setting-delegated > a
    .material-symbols-outlined {
    font-size: 17px;
}

.fd-system-setting-facts {
    display: grid;
    margin: 0;
}

.fd-system-setting-facts > div {
    border-top: 1px solid var(--fd-setting-border);
    display: grid;
    gap: 4px;
    padding: 11px 0;
}

.fd-system-setting-facts > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.fd-system-setting-facts dt {
    color: var(--fd-setting-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.fd-system-setting-facts dd {
    color: var(--fd-setting-ink);
    font-size: 12px;
    font-weight: 650;
    margin: 0;
}

.fd-system-setting-guardrails {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-system-setting-guardrails li {
    align-items: flex-start;
    color: var(--color-base-700, #374151);
    display: flex;
    font-size: 11px;
    gap: 7px;
}

.fd-system-setting-guardrails
    .material-symbols-outlined {
    color: #059669;
    font-size: 17px;
}

.fd-system-setting-history__list {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-system-setting-history__list li {
    display: grid;
    gap: 10px;
    grid-template-columns: 12px minmax(0, 1fr);
    padding: 8px 0;
}

.fd-system-setting-history__mark {
    background: var(--color-primary-600, #2563eb);
    border: 3px solid #dbeafe;
    border-radius: 50%;
    height: 10px;
    margin-top: 4px;
    width: 10px;
}

.fd-system-setting-history__row {
    align-items: center;
    display: flex;
    gap: 8px;
}

.fd-system-setting-history__row strong {
    color: var(--fd-setting-ink);
    font-size: 12px;
}

.fd-system-setting-history__list small {
    color: var(--fd-setting-muted);
    display: block;
    font-size: 10px;
    margin-top: 3px;
}

.fd-system-setting-empty {
    align-items: center;
    color: var(--fd-setting-muted);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 130px;
    padding: 18px;
    text-align: center;
}

.fd-system-setting-empty
    .material-symbols-outlined {
    font-size: 26px;
}

.fd-system-setting-empty strong {
    color: var(--fd-setting-ink);
    font-size: 12px;
    margin-top: 7px;
}

.fd-system-setting-empty p {
    font-size: 11px;
    margin: 3px 0 0;
}

.fd-system-setting-modal {
    background: var(--color-base-0, #fff);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 72px rgb(15 23 42 / 28%);
    color: var(--fd-setting-ink);
    inset: 0;
    margin: auto;
    max-width: 520px;
    padding: 0;
    position: fixed;
    width: calc(100% - 32px);
}

.fd-system-setting-modal::backdrop {
    background: rgb(15 23 42 / 48%);
}

.fd-system-setting-modal > form {
    display: grid;
}

.fd-system-setting-modal header {
    align-items: center;
    border-bottom: 1px solid var(--fd-setting-border);
    display: grid;
    gap: 10px;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    padding: 18px 20px;
}

.fd-system-setting-modal h2 {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: 0;
    margin: 0;
}

.fd-system-setting-modal header p,
.fd-system-setting-modal__change p {
    color: var(--fd-setting-muted);
    font-size: 11px;
    margin: 3px 0 0;
}

.fd-system-setting-modal__summary,
.fd-system-setting-modal__change {
    display: grid;
    gap: 5px;
    margin: 16px 20px 0;
}

.fd-system-setting-modal__summary > span,
.fd-system-setting-modal__change > span {
    color: var(--fd-setting-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.fd-system-setting-modal__summary strong,
.fd-system-setting-modal__change strong {
    font-size: 13px;
}

.fd-system-setting-modal code {
    justify-self: start;
}

.fd-system-setting-modal__warning {
    align-items: flex-start;
    background: #fff8e8;
    border: 1px solid #f5d58e;
    border-radius: 6px;
    display: flex;
    gap: 8px;
    margin: 16px 20px 0;
    padding: 10px;
}

.fd-system-setting-modal__warning
    .material-symbols-outlined {
    color: #a16207;
    font-size: 19px;
}

.fd-system-setting-modal__warning p {
    color: #854d0e;
    font-size: 11px;
    margin: 0;
}

.fd-system-setting-modal footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 18px 20px 20px;
}

.fd-system-setting-modal footer > button:first-child {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 6px;
    color: var(--color-base-700, #374151);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    min-height: 40px;
    padding: 9px 14px;
}

.fd-system-setting-page__toast {
    background: #111827;
    border-radius: 6px;
    bottom: 24px;
    box-shadow: 0 12px 32px rgb(15 23 42 / 24%);
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    left: 50%;
    max-width: min(420px, calc(100% - 32px));
    padding: 10px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1200;
}

.dark .fd-system-setting-page {
    --fd-setting-border: #334155;
    --fd-setting-muted: #94a3b8;
    --fd-setting-ink: #f8fafc;
}

.dark .fd-system-setting-page__hero,
.dark .fd-system-setting-page__editor,
.dark .fd-system-setting-page__rail > section,
.dark .fd-system-setting-history,
.dark .fd-system-setting-modal {
    background: #111827;
}

.dark .fd-system-setting-field input,
.dark .fd-system-setting-field textarea,
.dark .fd-system-setting-grid input,
.dark .fd-system-setting-grid select,
.dark .fd-system-setting-add,
.dark .fd-system-setting-field__heading button,
.dark .fd-system-setting-toggle {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

.dark .fd-system-setting-plan,
.dark .fd-system-setting-pack,
.dark .fd-system-setting-plan > header,
.dark .fd-system-setting-pack > header {
    background: #0f172a;
    border-color: #334155;
}

@media screen and (max-width: 1180px) {
    .fd-system-setting-page__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-system-setting-page__rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-system-setting-grid--limits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 900px) {
    .fd-system-setting-page__hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-system-setting-page__hero-meta {
        border-top: 1px solid var(--fd-setting-border);
        padding-top: 14px;
        width: 100%;
    }

    .fd-system-setting-page__hero-meta > div:first-child {
        border-left: 0;
        padding-left: 0;
    }

    .fd-system-setting-grid--three,
    .fd-system-setting-grid--four,
    .fd-system-setting-grid--limits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 640px) {
    .fd-system-setting-page {
        gap: 12px;
        padding-bottom: 18px;
    }

    .fd-system-setting-page__hero,
    .fd-system-setting-page__editor,
    .fd-system-setting-page__rail > section,
    .fd-system-setting-history {
        padding: 15px;
    }

    .fd-system-setting-page__hero-icon {
        flex-basis: 44px;
        height: 44px;
        width: 44px;
    }

    .fd-system-setting-page__identity h1 {
        font-size: 19px;
    }

    .fd-system-setting-page__rail,
    .fd-system-setting-grid--three,
    .fd-system-setting-grid--four,
    .fd-system-setting-grid--limits {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-system-setting-form__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .fd-system-setting-form__actions > button {
        justify-content: center;
        width: 100%;
    }

    .fd-system-setting-delegated {
        align-items: flex-start;
        flex-direction: column;
    }

    .fd-system-setting-modal footer {
        flex-direction: column;
    }

    .fd-system-setting-modal footer > button {
        justify-content: center;
        width: 100%;
    }
}

/* AI settings workspace */
.fd-ai-settings-page {
    --fd-ai-border: var(--color-base-200, #e5e7eb);
    --fd-ai-ink: var(--color-base-900, #111827);
    --fd-ai-muted: var(--color-base-500, #6b7280);
    display: grid;
    gap: 16px;
    padding-bottom: 28px;
}

.fd-ai-settings-hero {
    align-items: center;
    background: #f8fbff;
    border: 1px solid var(--fd-ai-border);
    border-radius: 8px;
    display: grid;
    gap: 16px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    min-height: 118px;
    padding: 22px 24px;
}

.fd-ai-settings-hero__icon,
.fd-ai-settings-section__icon {
    align-items: center;
    background: #eaf2ff;
    border-radius: 8px;
    color: #2563eb;
    display: inline-flex;
    justify-content: center;
}

.fd-ai-settings-hero__icon {
    height: 54px;
    width: 54px;
}

.fd-ai-settings-hero__icon .material-symbols-outlined {
    font-size: 28px;
}

.fd-ai-settings-hero__copy {
    min-width: 0;
}

.fd-ai-settings-hero__eyebrow {
    color: #2563eb;
    display: block;
    font-size: 11px;
    font-weight: 750;
    margin-bottom: 4px;
}

.fd-ai-settings-hero h1 {
    color: var(--fd-ai-ink);
    font-size: 24px;
    font-weight: 780;
    letter-spacing: 0;
    margin: 0;
}

.fd-ai-settings-hero p {
    color: var(--fd-ai-muted);
    font-size: 12px;
    line-height: 1.65;
    margin: 5px 0 0;
    max-width: 760px;
}

.fd-ai-settings-hero__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(94px, 1fr));
    margin: 0;
}

.fd-ai-settings-hero__summary > div {
    border-left: 1px solid var(--fd-ai-border);
    padding: 2px 18px;
}

.fd-ai-settings-hero__summary dt {
    color: var(--fd-ai-muted);
    font-size: 10px;
    font-weight: 700;
}

.fd-ai-settings-hero__summary dd {
    color: var(--fd-ai-ink);
    font-size: 16px;
    font-weight: 780;
    margin: 4px 0 0;
}

.fd-ai-settings-unavailable,
.fd-ai-settings-feedback {
    align-items: center;
    border: 1px solid var(--fd-ai-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

.fd-ai-settings-unavailable {
    background: #fff8e8;
    border-color: #f5d58e;
    color: #854d0e;
}

.fd-ai-settings-unavailable > .material-symbols-outlined {
    font-size: 24px;
}

.fd-ai-settings-unavailable > div {
    flex: 1;
}

.fd-ai-settings-unavailable h2 {
    font-size: 13px;
    margin: 0;
}

.fd-ai-settings-unavailable p {
    font-size: 11px;
    margin: 3px 0 0;
}

.fd-ai-settings-unavailable a,
.fd-ai-settings-feedback button {
    align-items: center;
    background: transparent;
    border: 0;
    color: currentColor;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 5px;
    text-decoration: none;
}

.fd-ai-settings-unavailable a
    .material-symbols-outlined {
    font-size: 17px;
}

.fd-ai-settings-feedback {
    background: #effaf5;
    border-color: #a7e8c8;
    color: #166534;
    font-size: 12px;
    font-weight: 650;
}

.fd-ai-settings-feedback[hidden],
.fd-ai-settings-test-result[hidden],
.fd-ai-settings-toast[hidden] {
    display: none;
}

.fd-ai-settings-feedback > span:nth-child(2) {
    flex: 1;
}

.fd-ai-settings-feedback > .material-symbols-outlined {
    font-size: 19px;
}

.fd-ai-settings-feedback.is-error {
    background: #fff0f0;
    border-color: #fecaca;
    color: #b91c1c;
}

.fd-ai-settings-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.fd-ai-settings-main,
.fd-ai-settings-rail {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.fd-ai-settings-section,
.fd-ai-settings-rail > section {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--fd-ai-border);
    border-radius: 8px;
    min-width: 0;
}

.fd-ai-settings-section {
    padding: 20px;
}

.fd-ai-settings-section__header,
.fd-ai-settings-rail > section > header,
.fd-ai-settings-modal header {
    align-items: center;
    display: flex;
    gap: 11px;
}

.fd-ai-settings-section__header {
    margin-bottom: 18px;
}

.fd-ai-settings-section__icon {
    flex: 0 0 38px;
    height: 38px;
    width: 38px;
}

.fd-ai-settings-section__icon
    .material-symbols-outlined {
    font-size: 21px;
}

.fd-ai-settings-section h2,
.fd-ai-settings-rail h2,
.fd-ai-settings-modal h2 {
    color: var(--fd-ai-ink);
    font-size: 15px;
    font-weight: 760;
    letter-spacing: 0;
    margin: 0;
}

.fd-ai-settings-section__header p,
.fd-ai-settings-rail header p,
.fd-ai-settings-modal header p {
    color: var(--fd-ai-muted);
    font-size: 11px;
    line-height: 1.5;
    margin: 3px 0 0;
}

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

.fd-ai-settings-model {
    background: var(--color-base-50, #f8fafc);
    border-top: 3px solid #93c5fd;
    border-radius: 7px;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 15px;
}

.fd-ai-settings-model__heading {
    align-items: center;
    display: flex;
    gap: 9px;
}

.fd-ai-settings-model__heading
    > .material-symbols-outlined {
    color: #2563eb;
    font-size: 21px;
}

.fd-ai-settings-model__heading label,
.fd-ai-settings-field label,
.fd-ai-settings-billing-row label {
    color: var(--fd-ai-ink);
    display: block;
    font-size: 12px;
    font-weight: 750;
}

.fd-ai-settings-model__heading span:not(.material-symbols-outlined) {
    color: #2563eb;
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
}

.fd-ai-settings-model > p,
.fd-ai-settings-field p,
.fd-ai-settings-billing-row p {
    color: var(--fd-ai-muted);
    font-size: 11px;
    line-height: 1.55;
    margin: 0;
}

.fd-ai-settings-model__control {
    align-items: stretch;
    display: flex;
    gap: 8px;
}

.fd-ai-settings-control {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--fd-ai-ink);
    font-size: 12px;
    min-height: 40px;
    min-width: 0;
    outline: 0;
    padding: 9px 11px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    width: 100%;
}

.fd-ai-settings-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 12%);
}

.fd-ai-settings-control:disabled {
    background: var(--color-base-100, #f3f4f6);
    color: var(--fd-ai-muted);
    cursor: not-allowed;
}

.fd-ai-settings-model__control > button,
.fd-ai-settings-save-panel > button,
.fd-ai-settings-modal footer > button {
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 750;
    gap: 5px;
    justify-content: center;
    min-height: 40px;
}

.fd-ai-settings-model__control > button {
    background: var(--color-base-0, #fff);
    border: 1px solid var(--color-base-300, #d1d5db);
    color: var(--color-base-700, #374151);
    flex: 0 0 auto;
    padding: 8px 12px;
}

.fd-ai-settings-model__control > button:hover {
    border-color: #60a5fa;
    color: #1d4ed8;
}

.fd-ai-settings-model__control > button:disabled,
.fd-ai-settings-save-panel > button:disabled,
.fd-ai-settings-modal footer > button:disabled {
    cursor: wait;
    opacity: 0.52;
}

.fd-ai-settings-model__control
    .material-symbols-outlined,
.fd-ai-settings-save-panel
    .material-symbols-outlined,
.fd-ai-settings-modal footer
    .material-symbols-outlined {
    font-size: 18px;
}

.fd-ai-settings-test-result {
    align-items: center;
    background: #ecfdf3;
    border-radius: 6px;
    color: #166534;
    display: flex;
    gap: 8px;
    padding: 9px 10px;
}

.fd-ai-settings-test-result.is-error {
    background: #fff0f0;
    color: #b91c1c;
}

.fd-ai-settings-test-result
    > .material-symbols-outlined {
    font-size: 19px;
}

.fd-ai-settings-test-result strong,
.fd-ai-settings-test-result small {
    display: block;
}

.fd-ai-settings-test-result strong {
    font-size: 11px;
}

.fd-ai-settings-test-result small {
    font-size: 10px;
    margin-top: 1px;
    opacity: 0.82;
}

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

.fd-ai-settings-field {
    border-top: 1px solid var(--fd-ai-border);
    display: grid;
    gap: 10px;
    min-width: 0;
    padding-top: 14px;
}

.fd-ai-settings-field__heading {
    align-items: flex-start;
    display: flex;
    gap: 9px;
}

.fd-ai-settings-field__heading
    > .material-symbols-outlined {
    color: #2563eb;
    font-size: 20px;
}

.fd-ai-settings-field-error {
    color: #b91c1c;
    display: block;
    font-size: 10px;
    min-height: 0;
}

.fd-ai-settings-field-error:empty {
    display: none;
}

.fd-ai-settings-billing {
    border-top: 1px solid var(--fd-ai-border);
}

.fd-ai-settings-billing-row {
    align-items: center;
    border-bottom: 1px solid var(--fd-ai-border);
    display: grid;
    gap: 12px;
    grid-template-columns: 34px minmax(180px, 1fr) minmax(120px, 190px) 108px;
    min-height: 74px;
    padding: 10px 4px;
}

.fd-ai-settings-billing-row:last-child {
    border-bottom: 0;
}

.fd-ai-settings-billing-row__icon {
    align-items: center;
    background: #eef6ff;
    border-radius: 7px;
    color: #2563eb;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.fd-ai-settings-billing-row__icon
    .material-symbols-outlined {
    font-size: 18px;
}

.fd-ai-settings-billing-row__input {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
}

.fd-ai-settings-billing-row__input > span {
    color: var(--fd-ai-muted);
    font-size: 11px;
}

.fd-ai-settings-billing-row__input
    .fd-ai-settings-field-error {
    grid-column: 1 / -1;
}

.fd-ai-settings-billing-row__estimate {
    text-align: right;
}

.fd-ai-settings-billing-row__estimate span,
.fd-ai-settings-billing-row__estimate strong {
    display: block;
}

.fd-ai-settings-billing-row__estimate span {
    color: var(--fd-ai-muted);
    font-size: 10px;
}

.fd-ai-settings-billing-row__estimate strong {
    color: #166534;
    font-size: 13px;
    margin-top: 3px;
}

.fd-ai-settings-rail > section {
    padding: 17px;
}

.fd-ai-settings-rail > section > header {
    border-bottom: 1px solid var(--fd-ai-border);
    margin-bottom: 13px;
    padding-bottom: 13px;
}

.fd-ai-settings-rail > section > header
    > .material-symbols-outlined {
    color: #2563eb;
    font-size: 21px;
}

.fd-ai-settings-guardrails {
    display: grid;
    gap: 11px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-ai-settings-guardrails li {
    align-items: flex-start;
    color: var(--color-base-700, #374151);
    display: flex;
    font-size: 11px;
    line-height: 1.55;
    gap: 7px;
}

.fd-ai-settings-guardrails
    .material-symbols-outlined {
    color: #059669;
    font-size: 17px;
}

.fd-ai-settings-reserved {
    display: grid;
}

.fd-ai-settings-reserved > div {
    align-items: center;
    border-bottom: 1px solid var(--fd-ai-border);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 0;
}

.fd-ai-settings-reserved > div:first-child {
    padding-top: 0;
}

.fd-ai-settings-reserved > div:last-child {
    border-bottom: 0;
}

.fd-ai-settings-reserved strong,
.fd-ai-settings-reserved small {
    display: block;
}

.fd-ai-settings-reserved strong {
    color: var(--fd-ai-ink);
    font-size: 11px;
}

.fd-ai-settings-reserved small,
.fd-ai-settings-reserved__notice {
    color: var(--fd-ai-muted);
    font-size: 10px;
    line-height: 1.5;
}

.fd-ai-settings-reserved small {
    margin-top: 2px;
}

.fd-ai-settings-reserved__value {
    background: var(--color-base-100, #f3f4f6);
    border-radius: 999px;
    color: var(--color-base-700, #374151);
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 750;
    padding: 5px 8px;
}

.fd-ai-settings-reserved__notice {
    background: #fff8e8;
    border-radius: 6px;
    color: #854d0e;
    margin: 10px 0 0;
    padding: 9px;
}

.fd-ai-settings-save-panel {
    background: #f7fbff !important;
    border-color: #bfdbfe !important;
}

.fd-ai-settings-save-panel > button {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
    padding: 9px 14px;
    width: 100%;
}

.fd-ai-settings-save-panel > button:hover:not(:disabled) {
    background: #1d4ed8;
}

.fd-ai-settings-read-only {
    align-items: flex-start;
    background: var(--color-base-50, #f8fafc) !important;
    color: var(--fd-ai-muted);
    display: flex;
    gap: 10px;
}

.fd-ai-settings-read-only
    > .material-symbols-outlined {
    font-size: 20px;
}

.fd-ai-settings-read-only strong {
    color: var(--fd-ai-ink);
    display: block;
    font-size: 12px;
}

.fd-ai-settings-read-only p {
    font-size: 10px;
    margin: 3px 0 0;
}

.fd-ai-settings-modal {
    background: var(--color-base-0, #fff);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 72px rgb(15 23 42 / 28%);
    color: var(--fd-ai-ink);
    inset: 0;
    margin: auto;
    max-height: min(720px, calc(100vh - 40px));
    max-width: 600px;
    overflow: auto;
    padding: 0;
    position: fixed;
    width: calc(100% - 32px);
}

.fd-ai-settings-modal::backdrop {
    background: rgb(15 23 42 / 48%);
}

.fd-ai-settings-modal > form {
    display: grid;
}

.fd-ai-settings-modal header {
    border-bottom: 1px solid var(--fd-ai-border);
    padding: 18px 20px;
}

.fd-ai-settings-modal__summary {
    align-items: center;
    background: var(--color-base-50, #f8fafc);
    display: flex;
    justify-content: space-between;
    margin: 16px 20px 0;
    padding: 10px 12px;
}

.fd-ai-settings-modal__summary span {
    color: var(--fd-ai-muted);
    font-size: 11px;
}

.fd-ai-settings-modal__summary strong {
    font-size: 12px;
}

.fd-ai-settings-modal__changes {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 12px 20px 0;
    max-height: 280px;
    overflow: auto;
    padding: 0;
}

.fd-ai-settings-modal__changes li {
    border-bottom: 1px solid var(--fd-ai-border);
    display: grid;
    gap: 5px;
    padding: 10px 0;
}

.fd-ai-settings-modal__changes strong {
    font-size: 11px;
}

.fd-ai-settings-modal__changes li > span {
    align-items: center;
    color: var(--fd-ai-muted);
    display: flex;
    font-size: 10px;
    gap: 7px;
    min-width: 0;
}

.fd-ai-settings-modal__changes del,
.fd-ai-settings-modal__changes ins {
    max-width: 44%;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-ai-settings-modal__changes del {
    color: #b91c1c;
}

.fd-ai-settings-modal__changes ins {
    color: #166534;
    font-weight: 700;
}

.fd-ai-settings-modal__warning {
    align-items: flex-start;
    background: #fff8e8;
    border: 1px solid #f5d58e;
    border-radius: 6px;
    display: flex;
    gap: 8px;
    margin: 16px 20px 0;
    padding: 10px;
}

.fd-ai-settings-modal__warning
    .material-symbols-outlined {
    color: #a16207;
    font-size: 19px;
}

.fd-ai-settings-modal__warning p {
    color: #854d0e;
    font-size: 11px;
    margin: 0;
}

.fd-ai-settings-modal footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 18px 20px 20px;
}

.fd-ai-settings-modal footer > button {
    border: 1px solid var(--color-base-300, #d1d5db);
    padding: 9px 14px;
}

.fd-ai-settings-modal footer > button:first-child {
    background: var(--color-base-0, #fff);
    color: var(--color-base-700, #374151);
}

.fd-ai-settings-modal footer
    > button[data-fd-ai-confirm] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.fd-ai-settings-toast {
    background: #111827;
    border-radius: 6px;
    bottom: 24px;
    box-shadow: 0 12px 32px rgb(15 23 42 / 24%);
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    left: 50%;
    max-width: min(420px, calc(100% - 32px));
    padding: 10px 14px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 1200;
}

.dark .fd-ai-settings-page {
    --fd-ai-border: #334155;
    --fd-ai-ink: #f8fafc;
    --fd-ai-muted: #94a3b8;
}

.dark .fd-ai-settings-hero,
.dark .fd-ai-settings-section,
.dark .fd-ai-settings-rail > section,
.dark .fd-ai-settings-modal {
    background-color: #111827;
}

.dark .fd-ai-settings-model,
.dark .fd-ai-settings-control,
.dark .fd-ai-settings-modal__summary {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

.dark .fd-ai-settings-control:disabled,
.dark .fd-ai-settings-reserved__value {
    background: #1e293b;
    color: #94a3b8;
}

@media screen and (max-width: 1180px) {
    .fd-ai-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-ai-settings-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 900px) {
    .fd-ai-settings-hero {
        align-items: flex-start;
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .fd-ai-settings-hero__icon {
        height: 48px;
        width: 48px;
    }

    .fd-ai-settings-hero__summary {
        border-top: 1px solid var(--fd-ai-border);
        grid-column: 1 / -1;
        padding-top: 14px;
        width: 100%;
    }

    .fd-ai-settings-hero__summary > div:first-child {
        border-left: 0;
        padding-left: 0;
    }

    .fd-ai-settings-rail {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 720px) {
    .fd-ai-settings-models,
    .fd-ai-settings-runtime {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-ai-settings-billing-row {
        grid-template-columns: 34px minmax(0, 1fr) 92px;
    }

    .fd-ai-settings-billing-row__input {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .fd-ai-settings-billing-row__estimate {
        grid-column: 3;
        grid-row: 1;
    }
}

@media screen and (max-width: 520px) {
    .fd-ai-settings-page {
        gap: 12px;
        padding-bottom: 18px;
    }

    .fd-ai-settings-hero,
    .fd-ai-settings-section,
    .fd-ai-settings-rail > section {
        padding: 15px;
    }

    .fd-ai-settings-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .fd-ai-settings-hero__icon {
        display: none;
    }

    .fd-ai-settings-model__control {
        flex-direction: column;
    }

    .fd-ai-settings-model__control > button {
        width: 100%;
    }

    .fd-ai-settings-billing-row {
        align-items: start;
        grid-template-columns: 30px minmax(0, 1fr);
        padding: 13px 0;
    }

    .fd-ai-settings-billing-row__icon {
        height: 30px;
        width: 30px;
    }

    .fd-ai-settings-billing-row__input,
    .fd-ai-settings-billing-row__estimate {
        grid-column: 2;
        grid-row: auto;
        text-align: left;
    }

    .fd-ai-settings-modal footer {
        flex-direction: column;
    }

    .fd-ai-settings-modal footer > button {
        width: 100%;
    }
}