.frc-cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.frc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.frc-btn:hover {
    opacity: 0.8;
}

.frc-btn:disabled,
.frc-btn.frc-loading {
    opacity: 0.5;
    cursor: wait;
}

.frc-btn-surface {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.frc-btn-surface.frc-icon-sm {
    width: 1rem;
    height: 1rem;
}

.frc-btn-surface.frc-icon-md {
    width: 1.25rem;
    height: 1.25rem;
}

.frc-btn-surface.frc-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
}

.frc-btn-surface > * {
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frc-btn-surface svg {
    max-width: 100%;
    max-height: 100%;
}

.frc-value {
    min-width: 0;
}

.frc-value .frc-text {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
}

.frc-icon-sm {
    height: 1rem;
    width: 1rem;
}

.frc-icon-md {
    height: 1.25rem;
    width: 1.25rem;
}

.frc-icon-lg {
    height: 1.5rem;
    width: 1.5rem;
}

@keyframes frc-spin {
    to {
        transform: rotate(360deg);
    }
}

.frc-spinner {
    animation: frc-spin 1s linear infinite;
}

.frc-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

.frc-text-revealed {
    cursor: pointer;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.frc-text-revealed:hover {
    opacity: 0.8;
}

.frc-color-primary {
    color: var(--color-primary-600, #2563eb);
}

.frc-color-success {
    color: var(--color-success-600, #16a34a);
}

.frc-color-warning {
    color: var(--color-warning-600, #ca8a04);
}

.frc-color-danger {
    color: var(--color-danger-600, #dc2626);
}

.frc-color-info {
    color: var(--color-info-600, #0891b2);
}

.frc-color-gray {
    color: var(--color-gray-600, #4b5563);
}

.dark .frc-color-primary {
    color: var(--color-primary-400, #60a5fa);
}

.dark .frc-color-success {
    color: var(--color-success-400, #4ade80);
}

.dark .frc-color-warning {
    color: var(--color-warning-400, #facc15);
}

.dark .frc-color-danger {
    color: var(--color-danger-400, #f87171);
}

.dark .frc-color-info {
    color: var(--color-info-400, #22d3ee);
}

.dark .frc-color-gray {
    color: var(--color-gray-400, #9ca3af);
}

.frc-icon-muted {
    color: var(--color-gray-400, #9ca3af);
}

.dark .frc-icon-muted {
    color: var(--color-gray-500, #6b7280);
}