/* Agent payment accounts — create-modal pickers + minimal list layout */

/* ── Add payment account modal ── */
.fi-modal-window.wg-pa-create-modal {
    display: flex;
    flex-direction: column;
    max-height: min(90dvh, 52rem);
}

.fi-modal.fi-modal-has-sticky-header .fi-modal-window.wg-pa-create-modal,
.fi-modal.fi-modal-has-sticky-footer .fi-modal-window.wg-pa-create-modal {
    overflow: hidden;
}

.fi-modal-window.wg-pa-create-modal .fi-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        rgb(var(--primary-50)) 0%,
        rgb(255 255 255) 55%,
        rgb(var(--gray-50)) 100%
    );
    border-bottom: 1px solid rgb(var(--gray-200));
}

.fi-modal-window.wg-pa-create-modal .fi-modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.fi-modal-window.wg-pa-create-modal .fi-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
    border-top: 1px solid rgb(var(--gray-200));
    background: rgb(255 255 255 / 0.96);
    backdrop-filter: blur(8px);
}

.dark .fi-modal-window.wg-pa-create-modal .fi-modal-header {
    background: linear-gradient(
        135deg,
        rgb(var(--primary-950) / 0.65) 0%,
        rgb(var(--gray-900)) 55%,
        rgb(var(--gray-950)) 100%
    );
    border-bottom-color: rgb(var(--gray-700));
}

.dark .fi-modal-window.wg-pa-create-modal .fi-modal-footer {
    border-top-color: rgb(var(--gray-700));
    background: rgb(var(--gray-900) / 0.96);
}

.fi-modal-window.wg-pa-create-modal .fi-modal-content::-webkit-scrollbar {
    width: 0.5rem;
}

.fi-modal-window.wg-pa-create-modal .fi-modal-content::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgb(var(--gray-300));
}

.dark .fi-modal-window.wg-pa-create-modal .fi-modal-content::-webkit-scrollbar-thumb {
    background: rgb(var(--gray-600));
}

.fi-modal-window.wg-pa-create-modal .fi-modal-close-btn.fi-icon-btn {
    --tw-text-opacity: 1;
    background-color: #e11d48 !important;
    background-image: linear-gradient(135deg, #fb7185 0%, #e11d48 45%, #be123c 100%) !important;
    border: 1px solid #be123c !important;
    border-radius: 0.625rem !important;
    box-shadow: 0 2px 10px rgb(190 18 60 / 35%) !important;
    color: #fff !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
}

.fi-modal-window.wg-pa-create-modal .fi-modal-close-btn.fi-icon-btn:hover {
    background-color: #be123c !important;
    background-image: linear-gradient(135deg, #f43f5e 0%, #be123c 45%, #9f1239 100%) !important;
    box-shadow: 0 4px 14px rgb(159 18 57 / 42%) !important;
    color: #fff !important;
    transform: scale(1.04);
}

.fi-modal-window.wg-pa-create-modal .fi-modal-close-btn.fi-icon-btn .fi-icon-btn-icon,
.fi-modal-window.wg-pa-create-modal .fi-modal-close-btn.fi-icon-btn svg {
    color: #fff !important;
}

.fi-modal-window.wg-pa-create-modal .fi-section-header-heading {
    font-weight: 700;
}

/* ── Create modal: gateway & type pickers ── */
.wg-gw-picker {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.625rem;
}

@media (min-width: 480px) {
    .wg-gw-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 640px) {
    .wg-gw-picker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

.wg-gw-picker__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 2px solid rgb(var(--gray-200));
    border-radius: 0.875rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.dark .wg-gw-picker__item {
    background: rgb(var(--gray-900));
    border-color: rgb(var(--gray-700));
}

.wg-gw-picker__item:hover {
    border-color: rgb(var(--primary-300));
    box-shadow: 0 4px 14px rgb(124 58 237 / 0.08);
}

.wg-gw-picker__item:focus-visible {
    outline: 2px solid rgb(var(--primary-500));
    outline-offset: 2px;
}

.wg-gw-picker__item--selected {
    border-color: rgb(var(--primary-500));
    background: linear-gradient(135deg, rgb(var(--primary-50)) 0%, #fff 100%);
    box-shadow:
        0 0 0 3px rgb(var(--primary-200)),
        0 8px 20px rgb(124 58 237 / 0.12);
    transform: translateY(-1px);
}

.dark .wg-gw-picker__item--selected {
    background: linear-gradient(135deg, rgb(var(--primary-950)) 0%, rgb(var(--gray-900)) 100%);
    box-shadow:
        0 0 0 3px rgb(var(--primary-800)),
        0 8px 24px rgb(0 0 0 / 0.35);
}

.wg-gw-picker__radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    border: 2px solid rgb(var(--gray-300));
    flex-shrink: 0;
}

.wg-gw-picker__item--selected .wg-gw-picker__radio {
    border-color: rgb(var(--primary-600));
    background: rgb(var(--primary-600));
}

.wg-gw-picker__radio-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: transparent;
}

.wg-gw-picker__item--selected .wg-gw-picker__radio-dot {
    background: #fff;
}

.wg-gw-picker__logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    object-fit: contain;
    flex-shrink: 0;
    background: rgb(var(--gray-50));
    border: 1px solid rgb(var(--gray-100));
}

.wg-gw-picker__copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.wg-gw-picker__name {
    font-size: 0.875rem;
    font-weight: 700;
    color: rgb(var(--gray-800));
}

.dark .wg-gw-picker__name {
    color: rgb(var(--gray-100));
}

.wg-gw-picker__hint {
    font-size: 0.6875rem;
    color: rgb(var(--gray-500));
}

.wg-gw-picker__item--selected .wg-gw-picker__hint {
    color: rgb(var(--primary-600));
    font-weight: 600;
}

.wg-gw-picker__check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgb(124 58 237 / 0.35);
}

.wg-gw-picker__check-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.wg-type-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}

@media (min-width: 640px) {
    .wg-type-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

.wg-type-picker__card {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.875rem 1rem;
    border: 2px solid rgb(var(--gray-200));
    border-radius: 0.875rem;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.dark .wg-type-picker__card {
    background: rgb(var(--gray-900));
    border-color: rgb(var(--gray-700));
}

.wg-type-picker__card:hover {
    border-color: rgb(var(--primary-300));
    box-shadow: 0 4px 14px rgb(124 58 237 / 0.08);
}

.wg-type-picker__card:focus-visible {
    outline: 2px solid rgb(var(--primary-500));
    outline-offset: 2px;
}

.wg-type-picker__card--selected {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgb(15 23 42 / 0.1);
}

.wg-type-picker__card--personal.wg-type-picker__card--selected {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

.wg-type-picker__card--merchant.wg-type-picker__card--selected {
    border-color: #9333ea;
    background: linear-gradient(135deg, #faf5ff 0%, #fff 100%);
    box-shadow: 0 0 0 3px rgb(147 51 234 / 0.15);
}

.wg-type-picker__card--agent.wg-type-picker__card--selected {
    border-color: #ea580c;
    background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
    box-shadow: 0 0 0 3px rgb(234 88 12 / 0.15);
}

.dark .wg-type-picker__card--personal.wg-type-picker__card--selected {
    background: linear-gradient(135deg, rgb(30 58 138 / 0.35) 0%, rgb(var(--gray-900)) 100%);
}

.dark .wg-type-picker__card--merchant.wg-type-picker__card--selected {
    background: linear-gradient(135deg, rgb(88 28 135 / 0.35) 0%, rgb(var(--gray-900)) 100%);
}

.dark .wg-type-picker__card--agent.wg-type-picker__card--selected {
    background: linear-gradient(135deg, rgb(154 52 18 / 0.35) 0%, rgb(var(--gray-900)) 100%);
}

.wg-type-picker__radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    border-radius: 9999px;
    border: 2px solid rgb(var(--gray-300));
    flex-shrink: 0;
}

.wg-type-picker__card--selected .wg-type-picker__radio {
    border-color: currentColor;
    background: currentColor;
}

.wg-type-picker__card--personal.wg-type-picker__card--selected .wg-type-picker__radio {
    color: #2563eb;
}

.wg-type-picker__card--merchant.wg-type-picker__card--selected .wg-type-picker__radio {
    color: #9333ea;
}

.wg-type-picker__card--agent.wg-type-picker__card--selected .wg-type-picker__radio {
    color: #ea580c;
}

.wg-type-picker__card--selected.wg-type-picker__card--default .wg-type-picker__radio {
    color: rgb(var(--primary-600));
}

.wg-type-picker__radio-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: transparent;
}

.wg-type-picker__card--selected .wg-type-picker__radio-dot {
    background: #fff;
}

.wg-type-picker__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgb(var(--gray-100));
    color: rgb(var(--gray-600));
    flex-shrink: 0;
}

.dark .wg-type-picker__icon-wrap {
    background: rgb(var(--gray-800));
    color: rgb(var(--gray-300));
}

.wg-type-picker__card--personal.wg-type-picker__card--selected .wg-type-picker__icon-wrap {
    background: #dbeafe;
    color: #1d4ed8;
}

.wg-type-picker__card--merchant.wg-type-picker__card--selected .wg-type-picker__icon-wrap {
    background: #f3e8ff;
    color: #7e22ce;
}

.wg-type-picker__card--agent.wg-type-picker__card--selected .wg-type-picker__icon-wrap {
    background: #ffedd5;
    color: #c2410c;
}

.wg-type-picker__icon {
    width: 1.25rem;
    height: 1.25rem;
}

.wg-type-picker__copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.wg-type-picker__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: rgb(var(--gray-800));
}

.dark .wg-type-picker__title {
    color: rgb(var(--gray-100));
}

.wg-type-picker__description {
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgb(var(--gray-500));
}

.wg-type-picker__check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    color: #fff;
}

.wg-type-picker__card--personal .wg-type-picker__check {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
}

.wg-type-picker__card--merchant .wg-type-picker__check {
    background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
}

.wg-type-picker__card--agent .wg-type-picker__check {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}

.wg-type-picker__check-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* Legacy chip class kept for any cached markup */
.wg-type-picker__chip {
    border: 1px solid rgb(var(--gray-300));
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: #fff;
    color: rgb(var(--gray-700));
    transition: all 0.15s;
}

.dark .wg-type-picker__chip {
    background: rgb(var(--gray-900));
    border-color: rgb(var(--gray-600));
    color: rgb(var(--gray-200));
}

.wg-type-picker__chip--selected {
    border-color: rgb(var(--primary-600));
    background: rgb(var(--primary-600));
    color: #fff;
}

.wg-type-picker__chip--personal.wg-type-picker__chip--selected {
    background: #2563eb;
    border-color: #2563eb;
}

.wg-type-picker__chip--merchant.wg-type-picker__chip--selected {
    background: #9333ea;
    border-color: #9333ea;
}

.wg-type-picker__chip--agent.wg-type-picker__chip--selected {
    background: #ea580c;
    border-color: #ea580c;
}

.wg-pa-hint {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: rgb(var(--gray-500));
}

.wg-pa-empty-gateways {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px dashed rgb(var(--warning-300));
    background: rgb(var(--warning-50));
    font-size: 0.875rem;
    color: rgb(var(--warning-800));
}

.wg-pa-empty-gateways__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* ── Page layout ── */
.wg-pa-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wg-pa-layout__tips {
    margin-top: 0.25rem;
}

.wg-pa-layout__tips-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgb(var(--gray-600));
}

.dark .wg-pa-layout__tips-list {
    color: rgb(var(--gray-300));
}

.wg-pa-layout__tips-list li + li {
    margin-top: 0.375rem;
}

/* Gateway header — outside cards */
.wg-pa-gateway {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wg-pa-gateway__header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.wg-pa-gateway__logo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 0.3125rem;
}

.dark .wg-pa-gateway__logo {
    background: #111827;
    border-color: #374151;
}

.wg-pa-gateway__meta {
    min-width: 0;
}

.wg-pa-gateway__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
}

.dark .wg-pa-gateway__title {
    color: #f8fafc;
}

.wg-pa-gateway__stats {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #64748b;
}

.dark .wg-pa-gateway__stats {
    color: #94a3b8;
}

/* Account card grid */
.wg-pa-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .wg-pa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .wg-pa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* ── Payment account card (reference mock) ── */
.wg-pa-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.125rem;
    border-radius: 1.25rem;
    border: 1px solid #e8edf3;
    background: #fff;
    box-shadow: 0 4px 24px rgb(15 23 42 / 0.06);
}

.dark .wg-pa-card {
    border-color: #334155;
    background: #0f172a;
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.45);
}

.wg-pa-card--active {
    border-color: #bbf7d0;
}

.dark .wg-pa-card--active {
    border-color: #166534;
}

.wg-pa-card__decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 7rem;
    height: 7rem;
    pointer-events: none;
    opacity: 0.55;
}

.wg-pa-card--active .wg-pa-card__decor {
    background:
        radial-gradient(circle at 80% 20%, rgb(34 197 94 / 0.18) 0%, transparent 55%),
        repeating-linear-gradient(
            -35deg,
            transparent,
            transparent 8px,
            rgb(34 197 94 / 0.06) 8px,
            rgb(34 197 94 / 0.06) 9px
        );
}

.wg-pa-card--inactive .wg-pa-card__decor {
    background:
        radial-gradient(circle at 85% 15%, rgb(148 163 184 / 0.2) 0%, transparent 50%),
        linear-gradient(135deg, transparent 40%, rgb(148 163 184 / 0.08) 40%, rgb(148 163 184 / 0.08) 42%, transparent 42%);
}

.dark .wg-pa-card--active .wg-pa-card__decor {
    opacity: 0.35;
    background:
        radial-gradient(circle at 80% 20%, rgb(34 197 94 / 0.22) 0%, transparent 55%),
        repeating-linear-gradient(
            -35deg,
            transparent,
            transparent 8px,
            rgb(34 197 94 / 0.1) 8px,
            rgb(34 197 94 / 0.1) 9px
        );
}

.dark .wg-pa-card--inactive .wg-pa-card__decor {
    opacity: 0.25;
}

.wg-pa-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.wg-pa-card__signal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.wg-pa-card__signal--live {
    background: #dcfce7;
    color: #16a34a;
    box-shadow: 0 0 0 4px rgb(34 197 94 / 0.12);
}

.dark .wg-pa-card__signal--live {
    background: rgb(22 101 52 / 0.35);
    color: #4ade80;
    box-shadow: 0 0 0 4px rgb(34 197 94 / 0.15);
}

.wg-pa-card__signal--off {
    background: #f3f4f6;
    color: #6b7280;
}

.dark .wg-pa-card__signal--off {
    background: #1e293b;
    color: #94a3b8;
}

.wg-pa-card__signal-logo {
    width: 1.375rem;
    height: 1.375rem;
    object-fit: contain;
}

.fi-panel-agent .wg-pa-card__signal svg {
    width: 1.375rem;
    height: 1.375rem;
}

.wg-pa-card__toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.fi-panel-agent .wg-pa-card__toggle .fi-toggle {
    display: inline-flex;
}

.wg-pa-card__title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.dark .wg-pa-card__title {
    color: #f8fafc;
}

.wg-pa-card__rule {
    position: relative;
    z-index: 1;
    margin: 0.5rem 0 0.5rem;
    border: none;
    border-top: 2px dotted #e2e8f0;
}

.dark .wg-pa-card__rule {
    border-top-color: #334155;
}

.wg-pa-card__verified {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.wg-pa-card__verified--ok {
    background: #dcfce7;
    color: #166534;
}

.dark .wg-pa-card__verified--ok {
    background: rgb(22 101 52 / 0.4);
    color: #86efac;
}

.wg-pa-card__verified--muted {
    background: #1e293b;
    color: #fff;
}

.dark .wg-pa-card__verified--muted {
    background: #334155;
    color: #e2e8f0;
}

.wg-pa-card__verified--pending {
    background: #fef3c7;
    color: #b45309;
}

.dark .wg-pa-card__verified--pending {
    background: rgb(180 83 9 / 0.25);
    color: #fcd34d;
}

.fi-panel-agent .wg-pa-card__verified svg {
    width: 0.875rem;
    height: 0.875rem;
}

.wg-pa-card__rows {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 0;
}

.wg-pa-card__row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.wg-pa-card__row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    flex-shrink: 0;
    border-radius: 0.625rem;
    background: #eff6ff;
    color: #2563eb;
}

.wg-pa-card--active .wg-pa-card__row-icon {
    background: #ecfdf5;
    color: #16a34a;
}

.dark .wg-pa-card__row-icon {
    background: rgb(37 99 235 / 0.15);
    color: #60a5fa;
}

.dark .wg-pa-card--active .wg-pa-card__row-icon {
    background: rgb(22 163 74 / 0.2);
    color: #4ade80;
}

.fi-panel-agent .wg-pa-card__row-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.wg-pa-card__row-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.wg-pa-card__row-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.dark .wg-pa-card__row-label {
    color: #64748b;
}

.wg-pa-card__row-value {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    word-break: break-word;
}

.dark .wg-pa-card__row-value {
    color: #f1f5f9;
}

.wg-pa-card__row-value--number {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1rem;
}

.wg-pa-card--active .wg-pa-card__row-value--number > span {
    color: #15803d;
}

.dark .wg-pa-card--active .wg-pa-card__row-value--number > span {
    color: #4ade80;
}

.wg-pa-card__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    flex-shrink: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.wg-pa-card__copy:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.dark .wg-pa-card__copy {
    color: #94a3b8;
}

.dark .wg-pa-card__copy:hover {
    background: #1e293b;
    color: #e2e8f0;
}

.fi-panel-agent .wg-pa-card__copy svg {
    width: 1rem;
    height: 1rem;
}

.wg-pa-card__pending-actions {
    position: relative;
    z-index: 1;
    margin-top: 0.5rem;
    text-align: center;
}

.wg-pa-card__remove {
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #e11d48;
    cursor: pointer;
}

.wg-pa-card__remove:hover {
    color: #be123c;
    text-decoration: underline;
}

.dark .wg-pa-card__remove {
    color: #fb7185;
}

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

@media (min-width: 1024px) {
    .wg-kpi-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}